Co to jest HTML? Kurs HTML dla zielonych.

Gdzieś usłyszałeś, że strony internetowe tworzone są w języku HTML. Jeśli chcesz się dowiedzieć co to jest HTML, to zapraszam do lektury tego kursu. Nauczysz się co to znaczy HTML, jak są zbudowane strony internetowe w HTML5, jak wygląda i jak napisać coś w języku HTML.

Co to jest HTML?

HTML to skrót od angielskiego HyperText Markup Language, co tłumaczone jest na polski jako: hipertekstowy język znaczników. Zobacz od razu co to jest ten "znacznik".

Znacznik HTML (również z angielskiego: tag HTML) to specjalny fragment tekstu zawarty w znakach mniejszości i większości.

Większość znaczników jest dwuelementowa, tzw. zawierają znacznik otwierający:

<znacznik>

i zamykający:

</znacznik>

Istnieją również znaczniki jedno elementowe. W takim przypadku prawidłowy zaspis wygląda następująco:

<znacznik />

Wszystkie strony internetowe są zbudowane z takich znaczników HTML. Jest ich dość dużo, lecz istnieją takie, które są używane na okrągło podczas robienia strony, a są i takie których prawie nikt nie używa.

Każdy znacznik(tag) posiada również opcjonalne atrybuty – każdy inne, ale niektóre się powtarzają dla każdego znacznika.

Atrybuty ustawia się następująco:

<znacznik atrybut="wartość atrubutu" />

lub dla znaczników dwuelementowych:

<znacznik atrybut="wartość atrubutu"></znacznik>

Oczywiście można ustawić wiele atrubutów do jednego tagu HTML:

<znacznik atrybut="wartość atrubutu" atrybut2="wartość atrubutu2"></znacznik>

Co to jest HTML5?

HTML5 jest piątą i aktualnie obowiązującą wersją standardu opisującego język HTML. Od wersji HTML4 różni się głównie nowymi tagami. Jedne tagi HTML zostały wycofane, inne bardzo pomocne zostały wprowadzone. Niektóre zmiany to:

• nowe tagi dla odtwarzania audio i video
• nowe tagi semantyczne (wskazujące jaki tym infomracji wyświetlają): time, nav, article…
• nowe atrubuty dla pól formularza ułatwiające wprowadzanie odpowiednich danych: liczb, dat, emaili, adresów URL, haseł, wybierania plików z dysku…
• wsparcie dla mechanizmu drag-and-drop
• wsparcie dla wyświetlania grafiki wektorowej
• tag canvas do wyświetlania obszaru na którym można rysować grafikę 2D/3D
• geolokalizacji
• Niektóre znaczniki z HTML4 zostały wycofane, np. znacznik center
• i inne bardziej programistyczne zmiany.

Zagnieżdżanie tagów HTML jeden w drugim

Tworząc stronę internetową tagi HTML umieszcza się wielokrotnie jeden znacznik w drugim znaczniku – tworząc w ten sposób strukturę całej strony HTML.

Istnieją oczywiście odpowiednie zasady, jaki znacznik HTML można umieszczać w jakim, lecz na ten moment wystarczy, że cały HTML strony internetowej wygląda mniej więcej w taki sposób:

<znacznik1> 
  <znacznik2></znacznik2>
  <znacznik2></znacznik2>
  <znacznik2>
    <znacznik3></znacznik3> 
    <znacznik4 />
  </znacznik2>
</znacznik1>

Zagnieżdzając kolejne tagi w sobie, powstaje drzewo. Przeglądarka internetowa (Chrome, Firefox itd.) odczytuje taką strukturę HTMLa przed wyświetleniem i najpierw tworzy w pamięci wirtualnie tzw. drzewo DOM(ang. Document Object Model). Tłumaczone jest to na Obiektowy model dokumentu.

Domyślny wygląd stron HTML

Znaczniki HTML wyświetlane w przeglądarkach internetowych posiadają swój domyślny wygląd.

Wystarczy w pliku HTML napisać strukturę/treść strony, a następnie otworzyć w wybranej przeglądarce, a ta wyświetli ją na ekranie.

Oczywiście ten domyślny wygląd można modyfikować, dzięki czemu strony internetowe mogą wyglądać inaczej.

Doknuje się tego dodając style CSS (ang. Cascading Style Sheets, pl. Kaskadowe arkusze stylów) do HTML, które przeglądarka również umie odczytać i przekuć na wygląd wyświetlanej strony HTML.

W tym kursie pomijam modyfikowanie domyślnego wyglądu.

Warto być świadomym jak wygląda domyślne wyświetlony znacznik, żeby wiedzieć jakie style trzeba dodać, żeby wyświetlał się zgodnie z naszą wolą.

A więc co to jest HTML?

Odpowiadając na pytanie tytułowe: "Co to jest HTML?" podzielę znaczniki dla tych, którzy okazjonalnie muszą zedytować coś w gotowych plikach HTML oraz dla tych, którzy chcą tworzyć strony HTML od podstaw.

Co to jest HTML dla początkujących i tylko okazjonalnie edytujących treść stron internetowych?

Oto najważniejsze tagi HTML dla edytorów treści stron internetowych. Zakładając, że stronę internetową już masz i musisz podmienić w niej treść.

Znacznik wstawiający link na stronie HTML

Podstawowym znacznikiem HTML, który poniekąd "tworzy" sieć internetową, jest znacznik a. Ten znacznik służy do wstawiania linku na stronie internetowej.

W najprosztej postaci wygląda następująco:

<a href="https://farmastron.pl/">Link do strony głównej FarmaStron</a>

Powyższy kod wstawiony do strony HTML wyświetli taki link:

Link do strony głównej FarmaStron

W tym tagu został użyty atrybut href, którego wartość to url to strony głównej FarmyStron. Atrybut href mówi przeglądarce internetowej, którą stronę ma załadować po kliknięciu w wyświetlany link.

Jeśli chcesz, żeby strona otwierała się w nowym oknie(tabie przeglądarki) dodaj do linku atrybut target z wartością _blank:

<a href="https://farmastron.pl/" target="_blank">Link do strony głównej FarmaStron otwierany w nowym oknie</a>

Link do strony głównej FarmaStron otwierany w nowym oknie

Ważne: pliku HTML nieistotne są znaki nowej linii oraz więcej spacji pod rząd niż jedna. Przeglądarka wyświetlając stronę je zignoruje. Także pisząc HTML formatujemy kod tak, aby był czytelny dla piszącego. A ewentualne pozbycie się zbędnych znaków zazwyczaj robi się automatycznie, w procesie optymalizacji strony, którą chcemy opublikować w internecie.

Znacznik a jest znacznikiem związanym z tekstem, stąd domyślnie jest wyświetlany liniowo. Poniższy kod…:

<a href="https://farmastron.pl/">Link 1</a>
<a href="https://farmastron.pl/">Link 2</a>

…wyświetli dwa linki, jeden obok drugiego:

Link 1Link 2

Znacznik wskazujący pojedynczy paragraf tekstu na stronie HTML

Kolejnym najczęściej używanym znacznikiem jest znacznik p. Służy on do dzielenia dłuższego tekstu na pojedyncze paragrafy.

Każdy paragraf tekstu należy objąć w osobny tag p:

<p>Pierwszy paragraf tekstu.</p>
<p>Drugi paragraf tekstu.</p>

Pierwszy paragraf tekstu.

Drugi paragraf tekstu.

Paragrafów powinno się użwać tak samo jak w przypadku innych nośników (książek, artykułów) do dzielenia dłuższych tekstów na mniejsze fragmenty.

Znacznik wstawiający zdjęcie/obrazek na stronie HTML

Kolejnym najpopularniejszym tagiem HTML jest znacznik wyświetlający zdjęcie na stronie internetowej. Jest to tag img.

W atrybucie src należy podać lokalizację obrazka pod którą przeglądarka może znaleźć zdjęcie.

Poprawny HTML wymaga, aby zawsze używać go wraz z atrybutem alt, w którym należy napisać co przedstawia obrazek.

Znacznik img jest znacznikiem pojedynczym, liniowym (dwa zdjęcia wyświetlą się, jeśli mogą, obok siebie), i wygląda następująco:

<img src="https://farmastron.pl/static/images/farmastron.png" alt="Logo FarmaStron" />

A tak się prezentuje logo FarmyStron:

Listy wypuntkowane i wynumerowane na stronie HTML

Bardzo często w tekście wstawionym na stronie internetowej chcemy pewne fragmenty wylistować. W HTML służą do tego tagi:

• ul - (ang. unordered list) listy wypunktowane kropkami (tak jak ta lista)
• ol - (ang. ordered list) listy wynumerowane (1, 2, 3…)

W obu listach bezpośrednio w ul lub ol dla każdego punktu musi zostać użyty tag li – od angielskiego list item.

Lista wypunktowana ul

Kod HTML takiej listy wygląda następująco:

<ul>
  <li>punkt pierwszy</li>
  <li>punkt drugi</li>
  <li>punkt trzeci</li>
</ul>

• punkt pierwszy
• punkt drugi
• punkt trzeci

Lista wynumerowane ol

Kod HTML takiej listy wygląda następująco:

<ol>
  <li>punkt pierwszy</li>
  <li>punkt drugi</li>
  <li>punkt trzeci</li>
</ol>

Taki kod wyświetlony w przeglądarce (domyślnie) wygląda tak:

1. punkt pierwszy
2. punkt drugi
3. punkt trzeci

Table

Kolejnym tagiem, który pewnie chętnie wstawisz na stronę internetową jest tag table, który służy do wstawiania tabeli.

Jest chętnie używany kiedy ktoś potrzebuje wyświetlić dane tabelaryczne i potrzebuje oddzielać dane kolumnami i wierszami. Do niedawna to byja jedyna opcja, lecz wraz ze stylami CSS Grid pojawiła się lepsza alternatywa – chociaż nieco trudniejsza dla początkującego.

Podstawowa tabelka składa się z:

• wierszy, tag tr (ang. table row)
• komórek z danymi (kolumn), tag td (ang. table data)

Kod takiej prostej tabeli wygląda następująco:

<table>
  <tr><td>Imię</td><td>Ocena</td></tr>
  <tr><td>Jaś</td><td>4</td></tr>
  <tr><td>Małgosia</td><td>4+</td></tr>
</table>

I wygląda tak:

Jak widzisz dane zaprezentowane są w dwóch kolumnach i trzech wierszach, przy czym pierwszy wiersz po prostu zawiera nagłówki kolumn.

Możesz jednak wskazać które kolmórki zaierają nagłówki, a które dane. Do tego trzeba wprowadzić trzy nowe tagi:

• tag th (ang. table header) – komórka zawierająca tytuł kolumny
• tag thead – część zawierająca tytuły kolumn
• tag tbody – część zawierająca dane w tabeli

Z nowymi tagami taka tabelka będzie wyglądać następująco:

<table>
  <thead>
    <tr>
      <th>Imię</th>
      <th>Ocena</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jaś</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Małgosia</td>
      <td>4+</td>
    </tr>
  </tbody>
</table>

A wygląda tak:

A wraz z dodatkiem kilku prostych styli:

table th, /* wszystkie elementy th w tagach table */
table td { /* oraz wszystkie elementy td w tagach table */
  border: 1px solid #000; /* niech posiadają czarne obramowanie ciągłą linią o szerokości jednego piksela */
  padding: 0.25rem; /* oraz wewnętrzny odstęp od tego obramowania o wielkości 1/4 podstawowej wielkości tekstu na tej stronie */
}

Może powyższa tabelka prezentować się następująco:

Co to jest HTML dla początkującego twórcy stron internetowych?

Oprócz opisanych wyżej tagów istnieje jeszcze kilka podstawowych tagów, które służą do stworzenia podstawowej struktury całego dokumentu HTML.

Są to takie tagi jak: html, head, body, div i jego semantyczne odmiany: main, nav, aside, header, footer oraz article.

<!-- to jest komentarz -->

Tag html

Tag htmlwystępuje tylko raz na całej stronie i zawiera w sobie całą zawartość strony HTML, poprzedzony jest jedynie tagiem DOCTYPE służącym do informowania przeglądarki, że ma do czynienia z dokumentem HTML w wersji 5:

<!DOCTYPE HTML>
<html>
...
</html>

Przy tagu html możemy dodatkowo określić w jakim języku się napisany dany dokument. Służy do tego atrybut lang:

<!DOCTYPE HTML>
<html lang="pl-PL">
...
</html>

Dwie małe litery pl deklarują używany język, a dwie duże kraj, w którym tego języka się używa. Przykłady dla angielskiego są następujące:

<html lang="en">
<html lang="en-US">
<html lang="en-GB">

Tag head

Umieszczany jest raz bezpośrednio po otwarciu tagu html. Służy do umieszczania w nim nagłówka, czyli dodatkowych informacji danego dokumentu HTML.

Są to takie informacje jak kodowanie znaków w dokumencie, tytuł, krótki opis, wskazania na kod CSS ze stylami, fav-ikonka i inne ikonki strony, informacja jak strona ma się dostosowywać do obszaru na jakim jest wyświetlana oraz (opcjonalnie) wiele innych meta-informacji o dokumencie.

Taki prosty nagłowek strony może wyglądać następująco:

<!DOCTYPE HTML>
<html lang="pl-PL">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="icon" href="ikonka.png" sizes="32x32">
  <title>Tytuł dokumentu</title><!-- zwięzły tytuł dokumentu -->
  <meta name="description" content="Krótki opis dokumentu."><!-- bardzo zwięzły opis dokumentu np. do 200 znaków -->
  <link rel="stylesheet" href="styles.css" media="all"><!-- plik ze stylami CSS -->
  </head>
</html>

Tag body

Na temat tagu body, nie trzeba się dużo rozpisywać. Zawiera całą zawartość strony HTML, która będzie wyświetlana przez przeglądarkę.

<!DOCTYPE HTML>
<html lang="pl-PL">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="icon" href="ikonka.png" sizes="32x32">
  <title>Tytuł dokumentu</title><!-- zwięzły tytuł dokumentu -->
  <meta name="description" content="Krótki opis dokumentu."><!-- bardzo zwięzły opis dokumentu np. do 200 znaków -->
  <link rel="stylesheet" href="styles.css" media="all"><!-- plik ze stylami CSS -->
  </head>
  <tbody>
    To jest moja pierwsza strona internetowa.
  </tbody>
</html>

Z całego powyższego kodu na ekranie wyświetli się tylko: To jest moja pierwsza strona internetowa.

Tag div

<div></div>

Jest podstawowym tagiem do grupowania innych tagów. Jest to tag blokowy co oznacza, że domyślnie przeglądarka próbuje wyświetlić go zawsze od "nowej linii" od lewej do prawej, na całą dostępną szerokość w miejscu gdzie jest tagi tag wstawiony.

Jeśli jest wstawiony w innym tagu, który posiada już jakoś ograniczoną szerokość, to całą dostępna przestrzeń będzie tą szerokością. Na przykładzie:

Do pierwszego div'a dodany zostanie czerwony kolor tła i wysokość 150 pikseli, aby zobrazować to zachowanie.

<div style="background-color: red; height: 150px;"></div>

A teraz zostanie ten czerwony div objęty jeszcze jednym divem, który będzie miał ustawioną maksymalną szerokość 200 piskeli:

<div style="max-width: 200px;">
  <div style="background-color: red; height: 150px;">
</div>

Mimo, że czerwony prostokąt nie posiada ustawionej szerokości to domyślnie rozciąga się na 100% szerokości rodzica(element nadrzędny) i nie rozciągnie się bardziej.

Semantyczne odmiany tagu div

Wszystkie wymienione tagi wizualnie zachowują się tak samo jak tag div.

• Tag main – służy do wskazywania głównej zawartości w danym dokumencie HTML, np. lista postów jeśli to jest strona główna bloga, albo artykuł wraz z komentarzami jeśli to jest strona pojedynczego posta
• Tag nav – służy do wskazywania fragmentu, który zawiera menu linkami nawigacyjnymi
• Tag aside – służy do wskazywania fragmentu, który zawiera poboczną treść niezwiązaną z główną treścią, umieszczoną w tagu main np. sidebar
• Tag header – służy do wskazywania fragmentu, który zawiera nagłówek, może to być nagłówek całej strony, ale też nagłówek pojedynczego fragmentu
• Tag footer – służy do wskazywania fragmentu, który zawiera stopkę, może to być stopka całej strony, ale też pojedynczego fragmentu
• Tag article – służy do wskazywania osobnej treści oddzielnej od reszty treści, na stronie z pojedycznym tekstem będzie jeden taki tag, a na liście postów będzie użyty dla każdego posta na liście

W praktyce struktura strony pojedycznego posta może wyglądać tak:

<!DOCTYPE HTML>
<html lang="pl-PL">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="icon" href="ikonka.png" sizes="32x32">
  <title>Tytuł dokumentu</title><!-- zwięzły tytuł dokumentu -->
  <meta name="description" content="Krótki opis dokumentu."><!-- bardzo zwięzły opis dokumentu np. do 200 znaków -->
  <link rel="stylesheet" href="styles.css" media="all"><!-- plik ze stylami CSS -->
  </head>
  <body>
    <header id="main-header">
      <div id="main-header__title">Moja strona internetowa</div>
      <nav id="main-header__nav">
        <a href="/">Strona główna</a>
        <a href="/about">O mnie</a>
      </nav>
    </header>
    <div id="main-wrapper">
      <main id="main-content">
        <article class="article">
          <header class="article__header">
            <h1 class="article__header-title">O mnie</h1>
          </header>
          <main class="article__content">
            <p>Początek traktatu czasu być przyczytane lub wprost pszenikający. Albowiem najrealniejsza musi wolny czyn powinien być przyczytane. Jeżeli czyn.</p>
            <p>Rod ludzki zawsze wewnętrzną odmianę w piosence: Marusieńka po jakim uczynku z czystego serca lub upominek ale je.</p>
            <p>Cobym ja stąd Komissya towarzystwa przyjacioł nauk a toć jest konieczna, bo służą do tego dał mu to.</p>
          </main>
        </article>
      </main>
      <aside class="sidebar">
        <div class="sidebar__section">Linki do portali społecznościowych.</div>
        <div class="sidebar__section">Lista ostatnich postów.</div>
      </aside>
    </div>
    <footer id="main-footer">©2020 Wszelkie prawa zastrzeżone.</footer>
  </body>
</html>

Bez styli CSS po otwarciu w przeglądarce będzie to wyglądać tak:

Strona wyświetlona w przeglądarce

Lecz po dopisaniu przykładowych kilkudziesięciu linijek styli CSS w dodatkowym pliku styles.css umieszczony w tym samym folderze co plik html:

:root {
    --main-bg-color: #ccc;
    --nav-link-color: #fff;
}

body {
    margin: 0;
}

#main-header {
    background: var(--main-bg-color);
    padding: 0.5rem 0.5rem 0;
}

#main-header__title {
    font-size: 2rem;
    line-height: 2rem;
    margin-bottom: 0.5rem;
}

#main-header__nav {
    display: flex;
    flex-wrap: wrap;
}

#main-header__nav a {
    padding: 0.5rem 1rem;
    background-color: rgba(0,0,0,0.25);
    color: var(--nav-link-color);
    text-decoration: none;
}

#main-header__nav a:hover {
    background-color: rgba(0,0,0,0.5);
}

#main-wrapper {
    display: grid;
    grid-template-columns: 4fr 1fr;
}

#main-content {
    padding: 0.5rem 0.5rem 0;
}

.article__header-title {
    margin: 0 0 0.5rem;
}

.sidebar {
    background: var(--main-bg-color);
    padding: 1rem 0.5rem;
}

.sidebar__section {
    margin-bottom: 1rem;
}

#main-footer {
    background: var(--main-bg-color);
    padding: 1rem 0.5rem;
    text-align: right;
}

Omawianie styli CSS jest poza tym kursem, więc po krótce powyższe style do odpowiednich tagów w pliku HTML ustawiają wybrane style: kolory, marginesy, układanie się elementów.

Strona w przeglądarce z przykładowymi stylami (okno przeglądarki ustawione na szerokość około 570 piskeli)

Tag span

Tag span jest poniekąd podobny do tagu div, sam z siebie w ogóle "nie wygląda". Służy do obejmowania krótkich kawałów tekstu (takich do kilku, kilkunastu słów, krótszych od paragrafów), aby im np. nadać jakieś dodatkowe style.

Przykład:

<p>Początek traktatu czasu być <span>przyczytane lub wprost pszenikający</span>. Albowiem najrealniejsza musi wolny czyn powinien być przyczytane. Jeżeli czyn.</p>

Style CSS nadane do każdego tagu span w każdym tagi p:

p span {
  background: red;
  color: white;
  padding: 0.25rem;
}

Wyglądać to będzie tak:

Początek traktatu czasu być przyczytane lub wprost pszenikający. Albowiem najrealniejsza musi wolny czyn powinien być przyczytane. Jeżeli czyn.

Domyślnie tag span ma styl display inline, czyli zachowuje się jak tekst. Lecz oczywiście można mu zmienić styl display na przykład na wartość block:

Przykład:

<p>Początek traktatu czasu być <span>przyczytane lub wprost pszenikający</span>. Albowiem najrealniejsza musi wolny czyn powinien być przyczytane. Jeżeli czyn.</p>

Style CSS nadane do każdego tagu span w każdym tagi p:

p span {
  display: block;
  background: red;
  color: white;
  padding: 0.25rem;
}

Wyglądać to będzie tak:

Początek traktatu czasu być przyczytane lub wprost pszenikający. Albowiem najrealniejsza musi wolny czyn powinien być przyczytane. Jeżeli czyn.

Tagi tytułów h1, h2, h3, h4, h5, h6

Tagi tytułów służą do nadawania tytułów poszczególnym sekcjom na stronie internetowej. Jak widzisz jest ich sześć, im większa cyfra tym nagłówek jest mniej ważny i powinien być zastosowany do mniejszej sekcji.

Tagi tytułów są dwuelementowe:

<h1>Najważniejszy tytuł - główny tutuł strony</h1>
<h2>Mniej ważny tytuł - tutuły poszczególnych sekcji strony</h2>
<h3>Jeszcze mniej ważny tytuł - tutuły elementów w sekcjach np. tutyłu artukułów na liście postów</h3>
<h4>Tytuły oddzielające małe fragmenty tekstu</h4>
<h5>Bardzo mało ważny tutuł</h5>
<h6>Najmniej ważny tutuł - prawie nieużywane</h6>

Tytuły powinny tworzyć hierarchię ważności poszczególnych treści na stronie.

Tak więc h1 powinien zawierać najważniejszy tytuł na całej pojedynczej stronie HTML, a więc i w kodzie HTML powinien występować tylko raz.

Na stronie głównej powinien być użyty w głównym nagłówku stronu i zawierać tytuł całej strony internetowej wraz z krótkim opisem np.:

<header id="main-header">
  <h1>FarmaStron – blog o stronach internetowych</h1>
</header>

Natomiast już na jakieś podstronie tytuł witryny nie jest najważniejszym tutułem, jest nim tytuł podstrony. Więc w headerze strony nie powinno się używać tagu h1. Powinien on powędrować do tagu article i tam być użyty jako tytuł danej strony np.:

<article>
  <h1>O mnie</h1>
  …
</article>

Przykład strony głównej z listą postów (uproszczony fragment):

<header id="main-header">
  <h1>FarmaStron – blog o stronach internetowych</h1>
</header>
<main>
  <h2>Ostatnie posty:</h2>
  <article>
    <h3><a href="#">Słowo o CSS</a></h3>
  </article>
  <article>
    <h3><a href="#">Znaczenie kolorów</a></h3>
  </article>
  <article>
    <h3><a href="#">Jak wybrać domenę internetową?</a></h3>
  </article>
</main>