piątek, 2024-01-05

HTML: Podstawy

HTML, czyli HyperText Markup Language, to język znaczników używany do tworzenia stron internetowych. Jego podstawy są stosunkowo proste do zrozumienia, a opanowanie HTML jest pierwszym krokiem w nauce tworzenia witryn internetowych. Podstawowymi elementami języka są znaczniki, nazywane również tagami, służące do budowy struktury strony. To fundamentalny budulec umożliwiający tworzenie zorganizowanych, funkcjonalnych i estetycznie wyglądających witryn internetowych. Wiedza na temat różnych znaczników i ich zastosowań jest kluczowa dla każdego, kto zajmuje się tworzeniem stron internetowych.

Budowa

Podstawy HTML

Struktura dokumentu HTML

Każdy dokument HTML zaczyna się od deklaracji <!DOCTYPE html>, wskazującej, że jest to dokument HTML5.
Następnie jest tag <html>, który obejmuje całą zawartość strony.

Wewnątrz <html>, treść dzieli się na dwie główne sekcje: <head> i <body>.

<!DOCTYPE html>
<html>
 <head>
   <!-- Metadane, tytuł, linki do CSS itp. -->
 </head>
 <body>
   <!-- Główna treść strony -->
 </body>
</html>

Komentarze

Komentarze () są używane do dodawania notatek w kodzie, które nie są wyświetlane w przeglądarce.

Białe znaki

Domyslnie HTML ignoruje powtórzenia białych znaków, takich jak np. wielokrotne spacje i tabulacje. Podobnie jak inne białe znaki, nowe linie są traktowane jako pojedyncza spacja. Oznacz to, że tekst podzielony na kilka linii w kodzie HTML zostanie wyświetlony jako ciągły tekst podzielony pojedynczymi spacjami.

Której wersji HTML używać?

Wybór wersji HTML zależy od kilku czynników, w tym od wymagań projektu, docelowej publiczności i kompatybilności przeglądarek, jednak na dzień dzisiejszy (2024 rok), zdecydowanie zaleca się używanie HTML5, najnowszej wersji HTML, która jest szeroko akceptowana i wspierana przez wszystkie nowoczesne przeglądarki. W typowej sytuacji nie ma sensu uzywać starszych wersji, a HTML5 wnosi szerego korzści, takich jak np. lepsze wsparcie dla urządzeń mobilnych, nowe semantyczne elementy, obsługa nowoczesnych multimediów.

Informacje o znacznikach

Kod HTML składa się ze znaczników, które dostarczają informacji przeglądarce, jak wyświetlać zawartość strony.

Składnia

Tag HTML

Znacznik HTML składa się z nazwy elementu otoczonej nawiasami ostrokątnymi, np. <nazwa>.
Większość elementów HTML zawiera tag otwierający, np. <p>, i tag zamykający, np. </p>, z zawartością pomiędzy nimi.
Niektóre znaczniki, jak <img> czy <br>, nie mają tagu zamykającego i są nazywane znacznikami samozamykającymi.

Rodzaje znaczników

Znaczniki blokowe: Takie jak <div>, <p>, <h1> do <h6>, na stronie wyświetlane są jako "blok" i zazwyczaj zaczynają się w nowej linii.
Znaczniki liniowe: Takie jak <a>, <span>, <img>, na stronie nie są wyświetlane w nowej linii i są używane do formatowania treści wewnątrz innych elementów.

Atrybuty

Znaczniki mogą zawierać atrybuty, które dostarczają dodatkowych informacji o elemencie, np. <a href="url">Link</a>, gdzie href jest atrybutem.

Funkcje znaczników

Strukturyzowanie treści: Znaczniki takie jak nagłówki, paragrafy i listy pomagają organizować treść na stronie.
Linkowanie: Znacznik <a> pozwala tworzyć hiperłącza do innych stron.
Wstawianie multimediów: Znaczniki takie jak <img> i <video> służą do wstawiania obrazów i filmów.
Formularze: Znaczniki jak <form>, <input>, <textarea> pozwalają tworzyć interaktywne formularze na stronach internetowych.
Semantyka: Znaczniki semantyczne, takie jak <article>, <section>, <header>, <footer>, pomagają lepiej zdefiniować strukturę i znaczenie treści na stronie.

Wersje HTML

Znaczniki HTML ewoluowały na przestrzeni lat, z różnymi elementami dodawanymi i usuwanymi w różnych wersjach HTML (np. HTML4, XHTML, HTML5).

Przegląd wybranych znaczników

Przegląd

Nagłówki i akapity

Nagłówki (<h1> do <h6>) definiują tytuły i podtytuły na stronie.
Akapity (<p>) służą do formatowania tekstu na stronie.

Linki i obrazy

Linki (<a href="url">) służą do nawigacji między stronami.
Obrazy (<img src="ścieżka_do_obrazu" alt="opis">) wstawiają grafikę na stronę. Ich atrybut src wskazuje ścieżkę do grafiki, alt to tekst alternatywny krótko i zwięźle opisujący obraz.

Listy

Nieuporządkowane listy (<ul>) dla punktorów.
Uporządkowane listy (<ol>) dla numeracji, z elementami listy <li>.

Formularze

Znacznik <form> definiuje formularz, który może zawierać pola tekstowe, przyciski itp.

Tabele

Tabele (<table>) służą do prezentowania danych w formie tabeli i składają się z rzędów (<tr>) i komórek (<td>).

CSS i JavaScript

HTML najczęściej stosowany jest z dodatkowymi technologiami, szczególnie z językami CSS i JavaScript.

CSS (Cascading Style Sheets) jest używany do kontrolowania prezentacji i wyglądu stron HTML. Pozwala na stylizowanie elementów, w tym zarządzanie układem, kolorami, czcionkami i animacjami.
JavaScript jest językiem programowania, który umożliwia dodanie interaktywnych funkcji do strony internetowej. Może być używany do manipulowania elementami DOM (Document Object Model), obsługi zdarzeń, weryfikacji formularzy, komunikacji z serwerem itp.

Zadania HTML, CSS i JavaScript

CSS

Struktura: HTML tworzy strukturę strony.
Warstwa prezentacji: CSS służy do wizualnego ulepszania strony. Może być stosowany do elementów HTML, aby zmienić ich wygląd na podstawie klas, identyfikatorów lub atrybutów.
Interakcja: JavaScript wprowadza dynamikę i interakcję na stronie. Może modyfikować elementy HTML i CSS w czasie rzeczywistym. Na przykład, JavaScript może reagować na kliknięcia użytkowników, zmieniając zawartość, styl lub układ strony.