HTML to skrót od Hypertext Markup Language (język znaczników hipertekstu) . To specjalny język używany do tworzenia stron internetowych. Gdy odwiedzasz stronę internetową, komputer odczytuje kod HTML, aby wyświetlić słowa, obrazy i linki. Wyobraź sobie HTML jako cegiełki strony internetowej. Tak jak klocki Lego budują dom lub samochód, my używamy znaczników HTML do tworzenia stron internetowych.
HTML to kod, który mówi komputerowi, jak wyświetlać tekst, obrazy, filmy i linki na stronie internetowej. To jak dawanie instrukcji znajomemu, który rysuje dla Ciebie obrazek. HTML używa słów w nawiasach kątowych, zwanych znacznikami , do oznaczania początku i końca fragmentu strony internetowej.
Każda odwiedzana strona internetowa w jakiś sposób wykorzystuje HTML. Bez HTML nie byłoby żadnych stron internetowych. HTML pomaga organizować treść i podpowiada komputerowi, jak wyświetlić stronę. To pierwsza rzecz, której uczy się twórca stron internetowych, ponieważ dzięki niemu internet działa!
Dokument HTML ma specjalną strukturę. Zaczyna się od deklaracji <code><!DOCTYPE html></code>, która informuje komputer, że strona używa HTML. Następnie dokument jest dzielony na dwie główne części: nagłówek (head) i treść (body).
Bardzo prosty dokument HTML wygląda następująco:
<kod><!DOCTYPE html>
<html>
<głowa>
<title>Moja pierwsza strona internetowa</title>
</head>
<treść>
<p>Witaj, świecie!</p>
</ciało>
</html> </code>
W tym przykładzie sekcja <head> zawiera tytuł strony, natomiast sekcja <body> to miejsce, w którym umieszcza się treść wyświetlaną na ekranie.
HTML używa znaczników do oznaczania różnych części strony internetowej. Znacznik to słowo w nawiasach kątowych. Na przykład <code><p></code> informuje komputer, że poniższy fragment jest akapitem. Po zakończeniu akapitu należy użyć znacznika zamykającego <code></p></code>, aby wskazać jego koniec.
Element w HTML składa się z tagu otwierającego, treści i tagu zamykającego. Na przykład:
<code><p>To jest akapit.</p></code>
Każdy tag instruuje przeglądarkę internetową, w jaki sposób wyświetlić treść.
W HTML-u jest wiele tagów. Oto niektóre z najpopularniejszych:
Atrybuty dostarczają dodatkowych informacji o elemencie HTML. Są dodawane do znacznika otwierającego, w nawiasach kątowych. Najczęściej używanymi atrybutami są src i alt, używane ze znacznikiem obrazu.
Na przykład, aby dodać obraz, możesz napisać:
<code><img src="picture.jpg" alt="Ładny obrazek"></code>
W tym przypadku parametr src informuje przeglądarkę o lokalizacji pliku obrazu, a parametr alt zawiera opis obrazu, jeśli nie można go wyświetlić.
Dokument HTML jest podzielony na dwie części:
Linki umożliwiają przechodzenie między stronami. W HTML linki tworzymy za pomocą znacznika <a> . Atrybut href wewnątrz znacznika informuje przeglądarkę o miejscu docelowym linku.
Na przykład:
<code><a href="https://www.example.com">Odwiedź Example.com</a></code>
Po kliknięciu tego linku w przeglądarce zostanie otwarta witryna example.com .
Obrazy rozjaśniają stronę internetową i czynią ją bardziej interesującą. Aby dodać obraz, użyj znacznika <img> . Pamiętaj, że znacznik <img> nie ma znacznika zamykającego.
Oto jak dodać obraz:
<code><img src="sunflower.jpg" alt="Jasny słonecznik"></code>
Ten kod nakazuje przeglądarce wyświetlenie obrazka słonecznika. Atrybut src wskazuje lokalizację obrazka, a atrybut alt zawiera jego opis.
Listy porządkują informacje w przejrzysty sposób. W HTML istnieją dwa główne typy list:
Oto przykład listy nieuporządkowanej:
<kod><ul>
<li>Jabłko</li>
<li>Banan</li>
<li>Wiśnia</li>
</ul> </code>
A oto przykład listy uporządkowanej:
<kod><ol>
<li>Pierwszy</li>
<li>Drugi</li>
<li>Trzeci</li>
</ol> </code>
Tabele pomagają wyświetlać informacje w wierszach i kolumnach. Są przydatne, gdy trzeba porównać dane lub wyświetlić elementy w siatce.
Oto prosty przykład tabeli HTML:
<kod><table border="1">
<tr>
<th>Imię</th>
Wiek
</tr>
<tr>
<td>Alicja</td>
10
</tr>
</table> </code>
W tej tabeli <tr> definiuje wiersz tabeli, <th> służy do nagłówka tabeli (pogrubiony tekst), a <td> służy do określania danych tabeli (komórek).
HTML pozwala również na dodawanie multimediów, takich jak dźwięk i wideo. Za pomocą znacznika <audio> możesz dodawać pliki dźwiękowe. Za pomocą znacznika <video> możesz osadzać odtwarzacze wideo na swojej stronie internetowej.
Oto przykład kodu do osadzenia filmu:
<code><video width="320" height="240" controls>
<źródło src="film.mp4" type="wideo/mp4">
</wideo> </kod>
Ten kod tworzy odtwarzacz wideo z przyciskami do odtwarzania, wstrzymywania i zmiany głośności. Atrybut „controls” nakazuje przeglądarce wyświetlanie tych przycisków.
Każda strona internetowa jest zbudowana w HTML. Wyobraź sobie, że odwiedzasz stronę internetową swojej szkoły, stronę z zabawną grą lub czytasz opowiadanie online. HTML działa w tle, układając tekst, obrazy i inną treść tak, abyś mógł je wyraźnie zobaczyć.
Na przykład, gdy widzisz w Internecie zdjęcie swojej ulubionej postaci z kreskówki lub klikasz link, aby przeczytać więcej na ciekawy temat, HTML jest po to, aby to zadziałało.
Przyjrzyjmy się prostemu projektowi. Wyobraź sobie, że chcesz stworzyć małą stronę internetową o swoim ulubionym zwierzęciu, na przykład kocie. Możesz dodać tytuł, akapit o kotach, zdjęcie, a nawet link do strony z ciekawostkami o kotach.
Twój kod HTML może wyglądać następująco:
<kod><!DOCTYPE html>
<html>
<głowa>
<title>Moje ulubione zwierzę</title>
</head>
<treść>
<h1>Wszystko o kotach</h1>
<p>Koty są wesołe i miękkie. Uwielbiają spać i mruczeć. Wiele osób uwielbia mieć koty jako zwierzęta domowe.</p>
<img src="cat.jpg" alt="Słodki kotek">
<a href="https://www.catfacts.com">Dowiedz się więcej o kotach</a>
</ciało>
</html> </code>
Ten projekt wykorzystuje nagłówki, akapity, obrazy i linki. Pokazuje, jak HTML jest używany do tworzenia kompletnej strony internetowej składającej się z wielu części.
Podczas gdy HTML buduje strukturę strony internetowej, istnieją inne narzędzia, które sprawiają, że strony internetowe wyglądają i zachowują się w ciekawy sposób.
Chociaż dzisiaj uczymy się o HTML, znajomość CSS i JavaScript pomoże nam zrozumieć, jak powstają strony internetowe.
Zgłębiając HTML, odkryjesz wiele innych tagów. Oto kilka z nich, które warto poznać:
Tagi te dają Ci większą kontrolę nad tym, jak Twoja treść wyświetla się na stronie internetowej.
Język HTML bardzo się zmienił od czasu swojego powstania. Z biegiem czasu dodawano wiele nowych tagów i funkcji. Każda nowa wersja HTML ułatwia tworzenie złożonych i pięknych stron internetowych. Obecnie HTML współpracuje z CSS i JavaScript, tworząc nowoczesne strony internetowe, które są przyjemne w użyciu i świetnie wyglądają.
Dzięki temu rozwojowi HTML stał się łatwy do nauczenia i jednocześnie wystarczająco zaawansowany, aby można było tworzyć wszystko, od prostych stron internetowych po złożone aplikacje internetowe.
Choć nauka HTML to świetna zabawa, zawsze ważne jest, aby zachować bezpieczeństwo w internecie. Odwiedzając strony internetowe lub przeglądając treści online, pamiętaj, aby zawsze poprosić o pomoc osobę dorosłą, jeśli masz jakieś wątpliwości. Twoje bezpieczeństwo jest najważniejsze, a nauka HTML powinna być zawsze przyjemnym i bezpiecznym doświadczeniem.
Przyjrzyjmy się bliżej kilku ważnym terminom, których się dziś nauczyłeś:
HTML jest używany w wielu sytuacjach w świecie rzeczywistym. Oto kilka przykładów:
Poniższe przykłady pokazują, jak użyteczne jest narzędzie HTML w wielu dziedzinach codziennego życia.
Dzisiaj dowiedzieliśmy się, że HTML to skrót od Hypertext Markup Language (język znaczników hipertekstu) . Jest to podstawowy język używany do tworzenia stron internetowych. Oto najważniejsze punkty do zapamiętania:
HTML to fundament każdej strony internetowej, którą widzisz w internecie. Dzięki prostym elementom, takim jak tagi i atrybuty, możesz tworzyć atrakcyjne i interaktywne strony. W miarę nauki zobaczysz, jak HTML pomaga ożywić strony internetowe, czyniąc internet użytecznym i fascynującym miejscem do eksploracji.
