Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

HTML: Podstawy

piątek,

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 (<!-- Komentarz -->) 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.
Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły