HTML · lekcja 01

Struktura HTML

Z czego zbudowana jest każda strona internetowa

Co to jest HTML i znacznik?
Szkielet strony: head i body
Pudełka w pudełkach: zagnieżdżanie, atrybuty, komentarze
Ćwiczenie: pierwsza własna strona

Rozgrzewka · 3 minuty

Co już wiecie?

Zanim napiszemy pierwszą linijkę, dwa pytania o to, co już robiliście na komputerze.

Pisaliście tekst w Wordzie albo w Dokumentach Google. Skąd program wie, że jedna linijka to tytuł, a druga zwykły akapit?
Otwórzcie dowolną stronę i wciśnijcie Ctrl+U. Co się pokazuje i czym to się różni od tego, co widać na stronie?

Na start

Co to jest HTML?

Dom ma szkielet, tynk i instalację elektryczną. Strona internetowa też ma trzy warstwy:

Warstwa	Za co odpowiada?	W domu
HTML	treść i jej układ: nagłówki, akapity, listy, obrazki	szkielet i ściany
CSS	wygląd: kolory, czcionki, rozmieszczenie	farba i meble
JavaScript	zachowanie: co się dzieje po kliknięciu	prąd i włączniki

Przeglądarka czyta plik HTML od góry do dołu i rysuje z niego stronę. Dziś budujemy szkielet.

Rozkład: Struktura HTML

Znacznik

Znacznik: nawias wokół treści

W HTML każdy kawałek treści bierzecie w nawias z nazwą. Taki nawias to znacznik.

<p>To jest akapit.</p>
 ↑ otwierający          ↑ zamykający (z ukośnikiem)

Nazwa znacznika mówi, czym jest treść: p to akapit, h1 to główny nagłówek.
Nazwy piszemy małymi literami.
Kilka znaczników nie ma zamknięcia, bo nie mają treści w środku:   (nowa linia), <img> (obraz).

MDN, „Basic HTML syntax”

Szkielet strony

Każda strona ma ten sam szkielet

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Moja pierwsza strona</title>
  </head>
  <body>
    <h1>Cześć!</h1>
    <p>To moja strona.</p>
  </body>
</html>

Ten szkielet przepisujecie do każdego nowego pliku. Za chwilę rozbieramy go na części.

MDN, „Creating the content” · szkielet: standard HTML

Szkielet strony

Paczka: etykieta i zawartość

Strona jest jak paczka. Na etykiecie są informacje o paczce, w środku jest to, co dostaje odbiorca.

Część	Co tam jest?	Czy widać na stronie?
`<head>`	informacje o stronie: tytuł na karcie, kodowanie znaków, później link do CSS	nie (poza tytułem na karcie)
`<body>`	wszystko, co widzi użytkownik: nagłówki, tekst, obrazy	tak

<!DOCTYPE html> na samej górze mówi przeglądarce: „to jest nowoczesny HTML”. lang="pl" mówi, w jakim języku jest strona.

Ciekawostka z Wikipedii: <!DOCTYPE html> nie zawsze był taki krótki. W starszym HTML 4 trzeba było wpisać całą linijkę z adresem pliku reguł (DTD) w internecie. HTML5 zrezygnował z tego adresu, więc dziś wystarczy jedno krótkie zdanie.

MDN, „Creating the content” · ciekawostka: en.wikipedia.org/wiki/Document_type_declaration

Head

Trzy linijki, bez których będą krzaczki

<meta charset="utf-8">: jak zapisane są litery. Bez tego „ą” i „ś” zamieniają się w krzaczki.
<title>Moja pierwsza strona</title>: napis na karcie przeglądarki i w wynikach wyszukiwania.
<meta name="viewport" content="width=device-width, initial-scale=1">: „telefonie, pokaż stronę w swojej szerokości”. Bez tego na telefonie widać mikroskopijną stronę.

Widzicie na stronie „Ä…” zamiast „ą”? Sprawdźcie, czy w head jest meta charset="utf-8" i czy edytor zapisał plik jako UTF-8.

MDN, „Creating the content” · viewport: MDN „Viewport meta tag”

Body

Nagłówki i akapity: jak w gazecie

Gazeta ma tytuł, śródtytuły i akapity tekstu. HTML też:

<h1>Tytuł strony (jeden na stronę)</h1>
<h2>Śródtytuł</h2>
<p>Akapit tekstu. Przeglądarka sama go łamie na linie.</p>
<p>Drugi akapit, w nowym bloku.</p>

Nagłówki idą od h1 (największy) do h6 (najmniejszy). Nie przeskakujcie poziomów.
Enter w pliku nic nie zmienia na stronie. Nowy akapit robicie znacznikiem , nową linię w akapicie znacznikiem  .

MDN, „Creating the content” (headings, paragraphs)

Zasady

Pudełka w pudełkach: zagnieżdżanie

Znaczniki wkładacie jeden w drugi jak pudełka. Pudełko otwarte jako ostatnie zamykacie jako pierwsze.

dobrze:
<p>To jest <b>ważne</b>.</p>

źle:
<p>To jest <b>ważne</p>.</b>

Wcięcia (dwie spacje na poziom) nic nie zmieniają dla przeglądarki, ale Wy od razu widzicie, co jest w czym. Piszemy z wcięciami.

MDN, „Basic HTML syntax” (nesting)

Zasady

Atrybut: naklejka na pudełku

Czasem znacznik potrzebuje dodatkowej informacji. Wpisujecie ją w znaczniku otwierającym jako nazwa="wartość".

<html lang="pl">            język strony
<meta charset="utf-8">     kodowanie liter
<img src="cat.jpg" alt="Kot">   skąd obraz i co przedstawia

Wartość zawsze w cudzysłowie "…".
Między atrybutami spacja, bez przecinków.

MDN, „Basic HTML syntax” (attributes)

Zasady

Komentarz: notatka dla siebie

<!-- To jest komentarz. Przeglądarka go nie pokazuje. -->
<p>To    jest      akapit.</p>   <!-- wiele spacji = jedna spacja -->

Komentarzem opisujecie, co robi fragment. Nikt poza Wami go nie zobaczy na stronie (ale widać go w źródle).
Wiele spacji i Enterów przeglądarka skleja w jedną spację.

MDN, „Basic HTML syntax” (comments, whitespace)

Praktyka

Jak zobaczyć swoją stronę?

Załóżcie folder na swoje pliki (np. strony) i w nim plik index.html.
Otwórzcie plik w edytorze kodu i wpiszcie szkielet ze slajdu 5.
Zapiszcie (Ctrl+S) i otwórzcie plik w przeglądarce podwójnym kliknięciem.
Po każdej zmianie w edytorze: zapis, potem F5 w przeglądarce.

Ctrl+U w przeglądarce pokazuje źródło strony, czyli dokładnie to, co napisaliście. Tak podglądacie też cudze strony.

Ćwiczenie 1 · przy komputerze · 12 minut

Ćwiczenie 1: pierwsza własna strona

Plik index.html ze szkieletem. Tytuł na karcie: Wizytówka.
W body: nagłówek h1 z Waszym imieniem, pod nim h2 „O mnie”.
Dwa akapity p: co lubicie i czego chcecie się nauczyć na tym kursie. W jednym z nich jedno słowo pogrubione .
Jeden komentarz z tematem dzisiejszej lekcji.

Ma się pojawić: na karcie „Wizytówka”, duży nagłówek z imieniem, mniejszy „O mnie”, dwa akapity, polskie litery bez krzaczków. Komentarza nie widać.

Ćwiczenie 2 · na kartce lub w edytorze · 6 minut

Ćwiczenie 2: znajdźcie cztery błędy

 1  <!DOCTYPE html>
 2  <html lang=pl>
 3    <head>
 4      <meta charset="utf-8">
 5    </head>
 6    <body>
 7      <title>Moja strona</title>
 8      <h1>Witaj</h1>
 9      <p>To jest <b>ważne</p></b>
10      <p>Drugi akapit.
11    </body>
12  </html>

Wypiszcie numer linii i co jest nie tak.

Rozwiązanie

Linia 2: lang=pl bez cudzysłowu. Ma być lang="pl".
Linia 7: <title> jest w body, a należy do head.
Linia 9: zamknięcia w złej kolejności. Otwarte jako ostatnie  zamykamy jako pierwsze: ważne.
Linia 10: brak  po „Drugi akapit.”.

Podsumowanie

Co musicie umieć po tej lekcji?

Napisać szkielet strony z pamięci: doctype, html, head z meta i title, body.
Powiedzieć, co idzie do head, a co do body.
Poprawnie otwierać, zamykać i zagnieżdżać znaczniki; zapisać atrybut.
Otworzyć własny plik w przeglądarce i podejrzeć źródło.

Na następnej lekcji: tekst w HTML, czyli jak wyróżniać, cytować i dzielić tekst na części.

Rozkład: Struktura HTML → Tekst w HTML

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
Szkielet pisany ręcznie	Ten sam szkielet, ale generuje go narzędzie (szablon, framework, system CMS). Trzeba go rozumieć, żeby poprawiać błędy.	nadal w użyciu
Nagłówki h1–h6, akapity	Dokładnie tak samo. Wyszukiwarka i czytniki dla niewidomych czytają stronę po nagłówkach.	nadal w użyciu
Sprawdzanie na oko	Walidator W3C i testy automatyczne łapią niezamknięte znaczniki, zanim strona trafi do klienta.	narzędzia
Plik otwierany podwójnym kliknięciem	Strona leży na serwerze i jest wdrażana z repozytorium. Najczęściej z GitHuba.	zastąpione