Ćwiczenia HTML i CSS
Ćwiczenie 1: Struktura podstawowa strony HTML
Stwórz stronę HTML z nagłówkiem, paragrafem, linkiem i obrazkiem.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Moja pierwsza strona</h1>
<p>To jest mój pierwszy dokument HTML</p>
<a href="https://www.google.com" target="_blank">Kliknij, aby przejść do Google</a>
<br>
<img src="https://via.placeholder.com/150" alt="Obrazek">
</body>
</html>
Ćwiczenie 2: Tworzenie listy
Stwórz listę nieuporządkowaną (ul) z trzema pozycjami: HTML, CSS, JavaScript.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Lista technologii</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Ćwiczenie 3: Formularz kontaktowy
Stwórz formularz z polami: imię, adres e-mail, wiadomość i przycisk wysyłania.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Formularz kontaktowy</title>
</head>
<body>
<h2>Formularz kontaktowy</h2>
<form action="#" method="post">
<label for="name">Imię:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Adres e-mail:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Wiadomość:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="Wyślij">
</form>
</body>
</html>
Ćwiczenie 4: Flexbox – Układ bloków
Stwórz stronę z trzema kolumnami, ustawionymi obok siebie za pomocą Flexboxa.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox</title>
<style>
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 30%;
height: 200px;
background-color: lightblue;
text-align: center;
line-height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Kolumna 1</div>
<div class="box">Kolumna 2</div>
<div class="box">Kolumna 3</div>
</div>
</body>
</html>
Ćwiczenie 5: Stylizacja CSS
Stylizuj nagłówek, paragraf i linki na stronie.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylizacja CSS</title>
<style>
h1 {
color: blue;
font-weight: bold;
text-align: center;
}
p {
font-family: Arial, sans-serif;
color: black;
background-color: lightgray;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<h1>Witaj na mojej stronie</h1>
<p>To jest paragraf tekstu.</p>
<a href="https://www.google.com">Kliknij tutaj, aby przejść do Google</a>
</body>
</html>