HTML

Podstawy Języka HTML

Co to jest HTML?

HTML, czyli HyperText Markup Language (Hipertekstowy Język Znaczników), to strukturalny język znaczników używany do tworzenia i opisywania elementów wchodzących w skład stron internetowych.

  • Wyjaśnienie: Wyobraź sobie, że budujesz dom. HTML nie odpowiada za jego malowanie ani instalację elektryczną, ale za same ściany, otwory na drzwi i okna. Za pomocą HTML mówisz przeglądarce internetowej, w którym miejscu na stronie ma znajdować się nagłówek, gdzie zwykły tekst, a gdzie ma wyświetlić się obrazek.

Podstawowe elementy (Klocki strony)

  • Znacznik (Tag)
    • Definicja: Podstawowe polecenie języka HTML zapisane w nawiasach ostrokątnych, które instruuje przeglądarkę, jak ma zinterpretować i wyświetlić dany fragment treści.
    • Wyjaśnienie: To specjalne hasła-kody dla przeglądarki. Składają się najczęściej ze znacznika otwierającego oraz znacznika zamykającego, który posiada ukośnik (slash). Przykładowo, jeśli chcesz pogrubić tekst, otaczasz go znacznikami na początku i na końcu, informując komputer, gdzie dokładnie kończy się wyróżnienie.
  • Atrybut (Attribute)
    • Definicja: Dodatkowa informacja umieszczana wewnątrz znacznika otwierającego, która modyfikuje działanie elementu lub nadaje mu unikalne właściwości.
    • Wyjaśnienie: Sam znacznik mówi przeglądarce, czym jest dany element, a atrybut podaje szczegóły. Na przykład sam znacznik obrazka nie zadziała, jeśli w atrybucie src, czyli source (źródło), nie wskażesz dokładnego adresu pliku graficznego, który ma się załadować na ekranie.
  • Element hipertekstowy (Hiperlink od Hyperlink)
    • Definicja: Aktywny element strony internetowej pozwalający użytkownikowi na natychmiastowe przeniesienie się pod inny adres sieciowy po kliknięciu.
    • Wyjaśnienie: To po prostu klasyczny odnośnik lub link. Może być ukryty pod słowem lub pod obrazkiem. Gdy użytkownik w niego kliknie, przeglądarka od razu ładuje nową podstronę lub zewnętrzny portal.

Najważniejsze Znaczniki Sekcji i Tekstu

  • Znacznik nagłówka (h1 do h6 od Heading)
    • Definicja: Znaczniki służące do definiowania tytułów i śródtytułów na stronie, określające ich ważność w hierarchii od najważniejszego h1 do najmniej istotnego h6.
    • Wyjaśnienie: Działa to jak w gazecie. Tytuł głównego artykułu na pierwszej stronie jest największy i najważniejszy (heading 1). Mniejsze podtytuły wewnątrz sekcji to heading 2, a drobniejsze sekcje tekstowe otrzymują heading 3. Przeglądarka automatycznie powiększa tekst w tych znacznikach.
  • Znacznik akapitu (p od Paragraph)
    • Definicja: Znacznik strukturalny służący do wydzielania standardowych bloków tekstu i tworzenia nowej linii z odstępem pionowym.
    • Wyjaśnienie: Kiedy piszesz artykuł lub notatkę, nie chcesz, aby wszystko było zlane w jedną wielką masę tekstu. Zawijając tekst w znacznik p (paragraph), tworzysz osobny akapit. Przeglądarka sama zadba o to, by pod takim blokiem pojawił się estetyczny odstęp.
  • Znacznik pogrubienia (b od Bold lub strong)
    • Definicja: Znacznik tekstowy powodujący pogrubienie czcionki w celu wizualnego lub logicznego wyróżnienia ważnego fragmentu zdania.
    • Wyjaśnienie: Używasz go dokładnie tak samo jak zakreślacza w zeszycie. Jeśli chcesz, aby czytelnik od razu zwrócił uwagę na konkretne słowo w środku akapitu, otaczasz to słowo znacznikiem b (bold), a komputer wyświetli je grubszą czcionką.
  • Znacznik linii poziomej (hr od Horizontal Rule)
    • Definicja: Znacznik pojedynczy generujący poziomą linię oddzielającą, używany do wizualnego dzielenia tematycznego treści na stronie.
    • Wyjaśnienie: To cyfrowa kreska odcinająca (horizontal rule). W przeciwieństwie do innych znaczników, hr nie potrzebuje zamknięcia z ukośnikiem. Wstawiasz go w kodzie w miejscu, w którym kończy się jeden duży temat, a zaczyna kolejny, aby strona była bardziej czytelna.

Słowniczek List i Struktury Dokumentu

  • Lista nieuporządkowana (ul od Unordered List)
    • Definicja: Konstrukcja służąca do tworzenia list wypunktowanych, w których kolejność elementów nie ma znaczenia matematycznego ani chronologicznego.
    • Wyjaśnienie: To klasyczne punktory (unordered list). Przeglądarka wyświetla elementy takiej listy, stawiając przed nimi kropki lub kwadraciki. Przykładem zastosowania jest lista zakupów lub spis cech produktu.
  • Lista uporządkowana (ol od Ordered List)
    • Definicja: Konstrukcja służąca do tworzenia list numerowanych, w których kolejność elementów odgrywa kluczową rolę.
    • Wyjaśnienie: Używasz tej listy (ordered list), gdy ważna jest kolejność kroków. Przeglądarka automatycznie wstawi cyfry jeden, dwa, trzy przed kolejnymi punktami. Idealnym przykładem jest przepis kulinarny lub instrukcja uruchamiania bazy danych krok po kroku.
  • Element listy (li od List Item)
    • Definicja: Znacznik definiujący pojedynczy punkt lub pozycję, umieszczany zawsze wewnątrz listy ul lub ol.
    • Wyjaśnienie: Same znaczniki list informują komputer jedynie o typie zestawienia. Dopiero znacznik li (list item) określa konkretny wiersz z treścią. Każdy pojedynczy punkt na Twojej liście musi być zamknięty w tych znacznikach.
  • Znacznik struktury głównej (html)
    • Definicja: Główny znacznik otaczający całą zawartość dokumentu internetowego, informujący przeglądarkę o formacie interpretowanego pliku.
    • Wyjaśnienie: To absolutny fundament każdego projektu. Wszystkie inne znaczniki, teksty, tabele czy odnośniki muszą znajdować się wewnątrz tego jednego wielkiego znacznika html. Stanowi on klamrę spinającą całą stronę internetową.

Narzędzia z Lekcji – Jak się łączą w całość?

Tworzenie stron internetowych w HTML opiera się na prostym schemacie edycji zwykłego tekstu oraz wyświetlania go w programie przeglądającym. W warunkach szkolnych proces ten składa się z następujących kroków:

  1. Edytor kodu (Code Editor) – Narzędzie służące do wpisywania czystego tekstu oraz znaczników HTML. Programy te często kolorują składnię (syntax highlighting), ułatwiając szybkie odnalezienie niedomkniętych nawiasów ostrokątnych. Plik z kodem zapisuje się na dysku komputera z rozszerzeniem kropka html.
  2. Przeglądarka internetowa (Web Browser) – Program, który otwiera zapisany plik kropka html. Przeglądarka nie wyświetla samych kodów w nawiasach ostrokątnych, lecz interpretuje je i zamienia na gotowy obraz strony, pokazując nagłówki, akapity, linie poziome oraz działające odnośniki.
  3. Podgląd kodu źródłowego (View Source) – Funkcja w przeglądarce internetowej (view source), która pozwala na podejrzenie czystego kodu HTML dowolnej strony w sieci. Pomaga to w nauce informatyki, umożliwiając sprawdzenie, jakich znaczników użyli inni programiści do zbudowania danej sekcji na stronie.