Jak nauczyć się HTML? Poznaj znaczniki krok po kroku

HTML to skrót od HyperText Markup Language (język znaczników hipertekstu) i jest to standardowy język używany do tworzenia stron internetowych. HTML jest językiem znaczników, co oznacza, że używa znaczników do formatowania tekstu i innych treści na stronie. Na przykład znaczniki HTML można wykorzystać do wyświetlania tekstu pogrubionego lub pochylonego albo do umieszczania odnośników do innych stron internetowych.

Język HTML został stworzony przez Tima Bernersa-Lee w 1990 roku jako sposób wyświetlania dokumentów w sieci World Wide Web (WWW). Pierwszą wersję języka HTML nazwano “HTML 0”, ponieważ był to pusty dokument bez jakiejkolwiek zawartości.

Obecnie język HTML ma wiele różnych wersji i odmian, w tym XHTML (eXtensible HyperText Markup Language) i HTML5 (najnowsza wersja języka).

Podstawy HTML – koncepcja tagów

Struktura tagu HTML z zawartością

Cześć tagów w języku HTML jest bardziej złożona, a część mniej. Zobaczmy, z czego składa się tag z zawartością – w tym przypadku <p> czyli paragraf / akapit.

  • Tag otwierający – <p>
  • Zawartość – Mój pierwszy akapit
  • Tag zamykający – </p>

Razem tworzą one element.

Atrybut znaczika HTML - klasa

Każdy z elementów może zawierać dodatkowe atrybuty, w których umieszczamy dodatkowe informacje dla przeglądarek / robotów skanujących kod strony, ale niewidocznych gołym okiem dla człowieka.

W tym przypadku użyłem atrybutu klasy – class, które wykorzystujemy do stylowania elementów (o stylach css dowiesz się z innego wpisu).

Strukutura elementu HTML bez zawartości

Jednakże mamy też tzw.: elementy puste, które nie zawierają tagu zamykającego i jest nim na przykład: img – czyli obrazek. To dlatego, że ten element jest odpowiedzialny za wyświetlenie obrazka, który jes

Struktura dokumentu HTML

Podstawowy dokument HTML powinien składać się z:

  • DOCTYPE – typ dokumentu (umieszczany na samej górze pliku)
  • elementu <html></html>, który służy za główny kontener na pozstały kod. Wskazuje gdzie zaczyna i kończy się dokument HTMTL,
  • elementu <head></head> – to kontener na metadane dokumentu, nie ma tam treści widocznych gołych okiem poza: title, który jest widoczny w kartach przeglądarki. (Dla tego wpisu jest to jego tytuł),
  • <link> – pusty tag, który pozwala podłączyć plik ze stylami css, do naszego dokumentu HTML – dzięki niemu strona może nabrać ciekawszego wyglądu,
  • elementu <body></body> – to kontener, który zawiera wszystkie elementy widoczne dla użytkownika,

Zobacz przykład zawartości dokumentu HTML poniżej.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Moja pierwsza strona</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css">    
  </head>
  <body>
    <p>Mój pierwszy akapit</p>
  </body>
</html>

Elementy HTML do edycji tekstu

  • Nagłówki od <h1>Nagłówek najwyższego poziomu</h1> do <h6>Nagłówek najniższego poziomu</h6>
  • Paragrafy / akapity <p>Paragraf</p>
  • Pogrubienie tekstu – <b>Pogrubienie</b> lub <strong>Pogrubienie</strong>
  • Przechylenie tekstu <i>Przechylenie</i> lub <em>Przechylenie</em>
  • Zmniejszenie tekstu <small>Zmniejszenie</small>
  • Zakreślenie tekstu kolorem <mark>Zakreślenie</mark>
  • Przekreślenie usuniętego tekstu <del>Przekreślenie</del>
  • Podkreślenie dodanego tekstu <ins>Dodany tekst</ins>
  • Dolny indeks <sub>Dolny</sub>
  • Górny indeks <sup>Górny</sup>

Listy numerowane, nienumerowane oraz listy pojęć w HTML

Każda lista w języku HTML składa się z kilku różnych tagów – typ listy i kolejne elementy listy. Wyróżniamy takie znaczniki jak:

  • <ol> – ordered list – lista numerowana
  • <ul> – unordered list – lista nienumerowana
  • <li> – list item – element list
  • <dl> – description list – lista pojęć
  • <dt> – nazwa opisywanego pojęcia
  • <dd> – opis opisywanego pojęcia

Przykładowy kod list w HTML:

<ul>
  <li> Punkt 1</li>
  <li> Punkt 2</li>
</ul>

<ol>
  <li> Punkt 1</li>
  <li> Punkt 2</li>
</ol>

<dl>
  <dt>Kawa </dt>
  <dd>- proszek zasypany wrzątkiem</dd>
  <dt>Woda</dt>
  <dd>- woda ze źródełka</dd>
</dl> 

Tabele w HTML

Za pomocą języka HTML możesz tworzyć zaawansowane tabele, w których zaprezentujesz różne zestawienia danych.

Tabele składają się z takich elementów jak:

  • <table> – kontener zawierający kolejne elementy tabeli
  • <thead> – kontener na nagłówek tabeli (opcjonalny)
  • <tfoot> – kontener na stopkę tabeli (opcjonalny)
  • <tbody> – kontener na dane tabeli (opcjonalny)
  • <tr> – wiersz tabeli
  • <td> – komórka tabeli
  • <th> – komórka nagłówka tabeli
  • <caption> – podpis tabeli
  • <colgroup> – grupa kilku kolumn

Przykładowy kod tabeli w HTML:

 <table>
  <tr>
    <th>Osoba 1</th>
    <th>Osoba 2</th>
    <th>Osoba 3</th>
  </tr>
  <tr>
    <td>Adam</td>
    <td>Andrzej</td>
    <td>Eustachy</td>
  </tr>
  <tr>
    <td>16</td>
    <td>19</td>
    <td>10</td>
  </tr>
</table> 

Pozostałe elemnty w HTML

  • <video> – służy do umieszczania plików video na stronie
  • <a> – to popularne hiperłącze, które pozwala na przechodzenie pomiędzy stronami / podstronami
  • <iframe> – pozwala zagnieździć inny dokument / stronę w kodzie Twojej strony (tak działają mapy google)
  • <canvas> – pozwala na rysowanie elementów za pomocą funkcji języka Java Script (więcej o tym przeczytasz w innym wpisie wkrótce)
  • <audio> – tak jak w przypadku video, możemy umieścić ścieżkę dźwiękową na stronie.
  • <img> – pozwala na umieszczenie obrazka na stronie
  • <progress> – pozwala na umieszczenie paska postępu, które za pomocą Java Script może się zmieniać

Formularze w HTML

Formularze pozwalają na wygenerowanie elementów, dzięki którym użytkownik odwiedzający stronę będzie mógł przesłać dodatkowe informacje do administratora strony (oczywiście po odpowiednim skonfigurowaniu za pomocą dodatkowych technologii backendowych).

Formularze składają się z takich elementów jak:

  • <form> – element definiujący akcję, metodę wysyłki i miejsce, do którego zostaną wysłane dane z formularza
  • <button> – przycisk wywołujący akcję
  • <label> – opis pola formularza
  • <textarea> – pole do wpisania dłuższej wiadomości tekstowej
  • <select> – pole, w którym możemy wybrać opcje z wcześniej zdefiniowanej listy
  • <input> – pole, do którego wprowadzamy dane w zależności od wartości atrybutu “type” tego pola.

Wyróżniamy takie typy inputów jak:

  • button – pole typu przycisk do kliknięcia,
  • checkbox – pole, w którym możemy zaznaczyć kilka opcji,
  • color – pole, w którym wybieramy kolor,
  • date – pole, w którym możemy wybrać datę,
  • datetime-local – pole, w którym możemy wybrać datę i godzinę,
  • email – pole, w którym można wpisać tylko e-mail (weryfikacja zapisu, nie prawidłowości adresu),
  • file – pole, w którym możemy załączyć plik,
  • hidden – pole ukryte, może służyć jako zabezpieczenie przed spamem (jako honeypot) lub do przesyłania ukrytych danych w przypadku aplikacji,
  • image – pole, w którym możemy umieścić obrazek,
  • month – pole, w którym możemy wybrać miesiąc,
  • number – pole, w którym możemy wprowadzić tylko liczbę,
  • password – pole, w którym wprowadzamy hasło (dane są zakryte kółkami),
  • radio – pole, w którym możemy wybrać jedną z wcześniej zdefiniowanych opcji (podobne do elementu select),
  • range – pole, w którym możemy wybrać zakres,
  • reset – przycisk do wyzerowania pól formularza,
  • search – pole wykorzystywane w wyszukiwarkach, do wpisania szukanej frazy
  • submit – przycisk do wysłania formularza
  • tel – pole do wpisania numeru telefonu
  • text – pole do wpisania wartości tekstowej
  • time – pole do wybrania godziny
  • url – pole do wpisania adresu URL strony www
  • week – pole do wybrania tygodnia roku

Przykładowy prosty formularz w HTML:

 <form method="POST" action="index.php">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form> 

Najbardziej popularny element HTML

Jednym z najczęściej używanych znaczników HTML przez webdeveloperów i pagebuildery jest div.

Divy to nic innego jak uniwersalne “pojemniki”, którym możemy nadać pożądane cechy przez kod CSS.

Divy to podstawa tworzenia zaawansowanego layoutu stron internetowych lecz ich prawdziwy potencjał wykorzystasz tylko jeśli będziesz stosować CSS. Więcej o stylach CSS

Uniwersalne atrybuty HTML

  • class – służy do zdefiniowania jednej lub więcej klas styli przypisanych elementowi
  • id – przypisuje unikalny adres id elementowi (jedno ID przypisujemy jednemu elementowi)
  • dir – służy do wskazania kierunku tekstu (od prawej do lewej lub na odwrót)
  • accesskey – służy do zdefiniowania skrótu klawiszowego, służącemu przejściu do tego elementu
  • contenteditable – służy do pozwolenia na edycję zawartości elementu
  • draggable – pozwala przesuwać element
  • hidden – pozwala ukryć element
  • lang – określa język zawartości elementu
  • spellcheck – sprawdzenie prawidłowości zapisu wymowy i gramatyki zawartości elementu
  • tabindex – pozwala na określenie kolejności przechodzenia elementów za pomocą przycisku tab
  • title – nadanie tytułu elementowi, wyświetlanego po najechaniu na ten element
  • style – pozwala przypisać indywidualne style danemu elementowi (lepiej używać klas)
  • translate – określa czy dany element należy tłumaczyć, czy nie

Przydatne narzędzie do tworzenia kodu HTML – Emmet

Do nauki języka przydałby się prosty notatnik jak Notepad++, dzięki któremu możesz łatwo i szybko pisać w tym języku. Jednakże jeśli planujesz rozwiajć się w technologiach internetowych to polecam Ci naukę Visual Studio Code.

W VSC możesz zainstalować ogrom rozszerzeń, które na pewnym etapie znacznie przyśpieszają tworzenie kodu. Jednym z nich jest “Emmet”.

To narzędzie, dzięki któremu za pomocą kilku wyrazów jesteś w stanie wygenerować kod HTML z odpowiednimi zagnieżdżeniami i atrybutami klas.

Podsumowanie

Pamiętaj, że nie musisz się wszystkiego uczyć na pamięć! Zacznij od zrobienia prostej strony, wykorzystując konkretne elementy przedstawione wcześniej. Zobacz, jak każdy z nich zachowuje się na stronie, a z czasem część z nich zapamiętasz.

Pamiętaj, że zawartość Internetu jest dla Ciebie! Korzystaj z tych zasobów mądrze!

Źródła:

https://www.w3schools.com/html/default.asp

https://developer.mozilla.org/pl/docs/Learn/HTML