Rozumiem. Sprawdzian z HTML w gimnazjum... Brzmi groźnie, prawda? Pewnie czujesz lekką panikę, zastanawiasz się, co będzie i czy dasz radę. Ale spokojnie! HTML to nie czarna magia. To po prostu język, którego używamy do budowania stron internetowych. A język można się nauczyć, krok po kroku, tak jak uczyłeś się pisać i czytać.
Celem tego artykułu jest pomoc w przygotowaniu się do sprawdzianu. Zapomnij o nudnych definicjach! Skupimy się na praktycznych zadaniach i przykładach, które naprawdę pomogą Ci zrozumieć, jak działa HTML. No to zaczynamy!
Podstawy HTML - fundament Twojej wiedzy
Najważniejsze jest, żeby zrozumieć strukturę dokumentu HTML. Każda strona internetowa zaczyna się i kończy od znaczników <html> i </html>. Wewnątrz mamy dwie główne sekcje: <head> i <body>.
Must Read
Sekcja <head> to takie informacje dla przeglądarki – tytuł strony (<title>), kodowanie znaków (<meta charset="UTF-8">), linki do stylów CSS i inne ustawienia. To, co znajduje się w <head>, nie jest widoczne na stronie dla użytkownika.
Natomiast sekcja <body> to cała zawartość strony, którą widzisz w przeglądarce – teksty, obrazy, linki, filmy, tabele, formularze… Wszystko!
Przykład:
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj świecie!</h1>
<p>To jest paragraf tekstu.</p>
</body>
</html>
Spróbuj skopiować ten kod do pliku tekstowego, zapisz go jako index.html i otwórz w przeglądarce. Powinieneś zobaczyć nagłówek "Witaj świecie!" i paragraf tekstu.
Najczęściej używane znaczniki
<h1>do<h6>– nagłówki (od największego do najmniejszego)<p>– paragraf (akapit)<br>– przełamanie linii (linia nowa)<a href="adres_strony">Tekst linku</a>– link (hiperłącze)<img src="adres_obrazka" alt="Opis obrazka">– obrazek<ul>– lista nieuporządkowana (z punktami)<ol>– lista uporządkowana (numerowana)<li>– element listy<table>– tabela<tr>– wiersz tabeli<td>– komórka tabeli
Zadania praktyczne – sprawdzamy Twoją wiedzę
Teraz przejdźmy do konkretnych zadań. To najlepszy sposób, żeby utrwalić wiedzę i sprawdzić, co już umiesz, a nad czym musisz jeszcze popracować.
Zadanie 1: Stwórz prostą stronę o sobie
Napisz kod HTML, który wyświetli na stronie Twoje imię i nazwisko, krótki opis (np. zainteresowania) oraz listę Twoich ulubionych przedmiotów w szkole.
Wskazówki:
- Użyj nagłówka
<h1>dla imienia i nazwiska. - Użyj paragrafu
<p>dla opisu. - Użyj listy
<ul>lub<ol>dla ulubionych przedmiotów.
Przykładowe rozwiązanie:
<html>
<head>
<title>Moja strona</title>
</head>
<body>
<h1>Jan Kowalski</h1>
<p>Interesuję się sportem i grami komputerowymi.</p>
<h2>Ulubione przedmioty w szkole:</h2>
<ul>
<li>Matematyka</li>
<li>Informatyka</li>
<li>WF</li>
</ul>
</body>
</html>
Zadanie 2: Dodaj link do swojej ulubionej strony internetowej
Zmodyfikuj stronę z zadania 1, dodając link do swojej ulubionej strony. Link powinien wyświetlać się pod listą ulubionych przedmiotów.
Wskazówki:
- Użyj znacznika
<a href="adres_strony">Tekst linku</a>. - Pamiętaj, żeby w atrybucie
hrefpodać pełny adres strony (np.https://www.google.com).
Przykładowe rozwiązanie:
<html>
<head>
<title>Moja strona</title>
</head>
<body>
<h1>Jan Kowalski</h1>
<p>Interesuję się sportem i grami komputerowymi.</p>
<h2>Ulubione przedmioty w szkole:</h2>
<ul>
<li>Matematyka</li>
<li>Informatyka</li>
<li>WF</li>
</ul>
<p><a href="https://www.google.com">Moja ulubiona strona: Google</a></p>
</body>
</html>
Zadanie 3: Dodaj obrazek
Znajdź w internecie obrazek (np. logo szkoły) i dodaj go do swojej strony. Obrazek powinien wyświetlać się na górze strony, pod nagłówkiem z Twoim imieniem i nazwiskiem.
Wskazówki:
- Użyj znacznika
<img src="adres_obrazka" alt="Opis obrazka">. - W atrybucie
srcpodaj adres obrazka. Możesz skopiować adres obrazka z przeglądarki (kliknij prawym przyciskiem myszy na obrazku i wybierz "Kopiuj adres obrazka"). - Pamiętaj o atrybucie
alt, który opisuje obrazek. To ważne dla osób niewidomych i dla pozycjonowania strony w wyszukiwarkach.
Przykładowe rozwiązanie (zakładając, że adres obrazka to "https://www.example.com/logo.png"):
<html>
<head>
<title>Moja strona</title>
</head>
<body>
<h1>Jan Kowalski</h1>
<img src="https://www.example.com/logo.png" alt="Logo szkoły">
<p>Interesuję się sportem i grami komputerowymi.</p>
<h2>Ulubione przedmioty w szkole:</h2>
<ul>
<li>Matematyka</li>
<li>Informatyka</li>
<li>WF</li>
</ul>
<p><a href="https://www.google.com">Moja ulubiona strona: Google</a></p>
</body>
</html>
Wskazówki na sprawdzian
- Czytaj uważnie polecenia! Upewnij się, że wiesz, co masz zrobić.
- Pisz kod starannie. Dbaj o poprawne zamykanie znaczników (
<p>i</p>). - Sprawdzaj składnię. Nawet mała literówka może spowodować, że strona nie będzie działać poprawnie.
- Nie bój się eksperymentować. Jeśli nie jesteś pewien, jak coś zrobić, spróbuj różnych rozwiązań.
- Używaj komentarzy. Możesz dodawać komentarze do kodu, żeby opisać, co robi dana część kodu (
<!-- To jest komentarz -->). To pomaga zrozumieć kod i znaleźć błędy. - Przede wszystkim – nie panikuj! Zachowaj spokój i skup się na zadaniu.
Pamiętaj, HTML to narzędzie, a nie przeszkoda. Im więcej będziesz ćwiczyć, tym łatwiej będzie Ci tworzyć strony internetowe. Powodzenia na sprawdzianie! Jesteś w stanie to zrobić!
