Rozdział 22 · Tworzenie stron internetowych z PythonHTML: struktura strony internetowej
HTML jest językiem znaczników, a nie programowaniem: opisuje strukturę, a nie zachowanie.
HTML (HyperText Markup Language - Język znaczników hipertekstowych) opisuje nie zachowanie ani wygląd, lecz struktura stron: gdzie jest tytuł, gdzie jest akapitem tekstu, gdzie jest obrazem, gdzie jest linkiem. HTML jest językiem znaczników, a nie językiem Programowanie: nie ma warunków, pętli ani zmiennych, jedynie opis tego, co i W jakiej kolejności pokazać.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый сайт на HTML.</p>
<ul>
<li>Учу Python</li>
<li>Учу HTML</li>
</ul>
<a href="https://python.org">Официальный сайт Python</a>
</body>
</html>
<h1> to otwierający tag tytułowy, </h1> (ze ukośnikiem) to zamykająca się forma, a razem z zawartością między nimi tworzą jedno element strony. Niektóre elementy, takie jak <img>, brak zamykającego taga i zagnieżdżonej zawartości — nazywa się to void- element: Wszystkie niezbędne informacje są przekazywane przez atrybuty.Atrybuty — dodatkowe właściwości tagu
W oznaczeniu otwierającym możesz określić atrybuty — pary
имя="значение". Na linku <a>
atrybut href ustawia adres, blisko zdjęcia
<img> — src określa plik, oraz
alt określa alternatywę obrazową tekstową, która odpowiada
Jej znaczenie na stronie: jest używana przez czytniki ekranu i wyświetlana,
Jeśli plik nie zostanie przesłany:
<img src="kotik.jpg" alt="Рыжий кот спит на подоконнике">Częste tagi
| Tag | Co oznacza |
|---|---|
<h1>…<h6> | Nagłówki od najważniejszych (h1) po najmniejsze (h6) |
<p> | Akapit tekstu |
<ul> / <li> | Lista i jej pozycje |
<a href="…"> | Link do innej strony |
<img src="…" alt="…"> | Obraz z opisem tekstowym |
<label> / <input> | Pole formularza i jego sygnatura |
h1-h6 ustalić logiczną strukturę strony, podobnie jak spis treści książki: h1 jest głównym nagłówkiem, zwykle ma go na stronie, oraz h2 są nagłówki sekcji wewnątrz. Czytniki ekranu i wyszukiwarki korzystają z tej struktury, a nie z tego, czy coś jest narysowane dużym drukiem.Formy
Formularz zbiera wpisane przez użytkownika informacje i przesyła je na serwer:
<form>
<label for="imya">Ваше имя</label>
<input type="text" id="imya" name="imya">
<button type="submit">Отправить</button>
</form><label for="imya"> związane z
<input id="imya"> przez dopasowany identyfikator — kliknij
by caption umieszcza kursor w polu, a czytnik ekranu odczytuje podpis, gdy
Pole jest skupiane. Co dzieje się z tymi danymi na serwerze, znajduje się w sekcji 22.13.