Tworząc witrynę internetową, pierwszą rzeczą do przemyślenia jest sposób renderowania strony internetowej. To rodzaj „fundamentu” w budowaniu witryny. Dlatego przed zagłębieniem się w badanie bardziej złożonych technologii tworzenia witryn zaleca się przynajmniej podstawową znajomość języka HTML. W tej lekcji zapoznamy się z HTMLprzeanalizujmy struktura dokumentu HTML i korzystając z praktycznych przykładów utrwalimy zdobytą wiedzę.
Co to jest HTML?
HTML oznacza język znaczników hipertekstowych (z języka angielskiego HyperText Markup Language). Ten język jest odpowiedzialny za sposób wyświetlania hipertekstu na stronach serwisu. A teraz dowiedzmy się, co to jest hipertekst? Nie jest tajemnicą, że jedna strona internetowa może zawierać wiele różnych typów informacji, czy to tekst, niektóre tabele, grafiki, filmy, audio itp. Tak więc wszystkie te informacje można nazwać jednym słowem - hipertekstem.
Zwróć uwagę, że HTML jest językiem znaczników, a nie językiem programowania. W tym języku nie ma funkcji logicznych i nie można na nim wykonywać żadnych obliczeń matematycznych. Strony HTML mają rozszerzenie .html lub .htm i przetwarzane przez przeglądarki - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera itp.
Zobaczmy teraz, jak przeglądarka rozumie, co i jak wyświetlić na stronie internetowej? To jest bardzo proste. HTML języka znaczników hipertekstowych ma wbudowane polecenia zwane tagami. To przez nich kieruje przeglądarka.
Struktura dokumentu HTML
Każdy dokument HTML (strona internetowa) musi mieć określoną strukturę. Pozwoli to uniknąć ewentualnych problemów podczas otwierania stron w przeglądarkach. Jako przykład rozważmy stronę, która zawiera następujący kod HTML:
Struktura dokumentu HTML ...
Przeanalizujmy w kolejności, co zawiera ta struktura:
1. Pierwszą rzeczą, która pojawia się w dokumencie HTML, jest wskazanie wersji (pierwsza linia). Aby zapewnić poprawne działanie, ten wiersz powinien zostać określony podczas tworzenia strony internetowej.
3. Następnie pojawia się obszar na górę strony (nagłówek). Odbywa się to za pomocą tagu
... W nagłówku wskazujemy tytuł naszej strony umieszczając tytuł strony między tagami4. Metatag „opis” - podsumowanie strony, przeznaczone dla wyszukiwarek. Ten tag jest ważny dla optymalizacji wyszukiwarek i musi być wypełniony.
5. Metatag „słowa kluczowe” - słowa kluczowe, które można znaleźć na stronie. Ten tag jest również przeznaczony dla wyszukiwarek. Ten tag jest obecnie rzadko używany.
6. Ciało strony otwiera się ze znacznikiem
i zamyka się odpowiednio znacznikiem... Treść strony internetowej zawiera z reguły główną treść - tekst, wideo, dźwięk i inne informacje.W ten sposób odpowiedzieliśmy na pytanie, czym jest HTML i przestudiowaliśmy strukturę dokumentu HTML. Informacje uzyskane w tej lekcji to podstawowe pojęcia, bez nich nie można się obejść. O bardziej złożonych sprawach będziemy mówić na innych lekcjach.
Podstawy HTML zawierają podstawowe zasady języka HTML, opis struktury strony HTML, relacje w strukturze dokumentu HTML pomiędzy elementami HTML.
Dokument HTML to zwykły dokument tekstowy, który można utworzyć tak, jak w zwykłym edytorze tekstu (Notatnik)i w wyspecjalizowanych, z podświetlaniem kodu (Notepad ++, Visual Studio Code itp.)... Dokument HTML ma rozszerzenie .html.
Dokument HTML składa się z drzewa elementów HTML i tekstu. Każdy element jest oznaczony w oryginalnym dokumencie znacznikiem początkowym (otwierającym) i końcowym (zamykającym) (z rzadkimi wyjątkami).
Tag początkowy pokazuje, gdzie zaczyna się element, koniec pokazuje, gdzie się kończy. Tag końcowy tworzy się poprzez dodanie ukośnika / przed nazwą tagu:<имя тега> … ... Pomiędzy tagiem początkowym i końcowym znajduje się treść tagu - treść.
Pojedyncze tagi nie mogą bezpośrednio przechowywać treści, są one zapisywane jako wartość atrybutu, na przykład tag utworzy przycisk z tekstem Przycisk wewnątrz.
Tagi można zagnieżdżać w sobie, na przykład
Tekst
... Inwestując, należy przestrzegać kolejności zamykania (zasada „matrioszka”)na przykład poniższy kod byłby nieprawidłowy:Tekst
.Elementy HTML mogą mieć atrybuty (globalne, które dotyczą wszystkich elementów HTML i własne). Atrybuty są zapisywane w otwierającym tagu elementu i zawierają nazwę i wartość określoną w formacie atrybut nazwa \u003d "wartość". Atrybuty umożliwiają zmianę właściwości i zachowania elementu, dla którego są ustawione.
Do każdego elementu można przypisać wiele wartości klas i tylko jedną wartość id. Wiele wartości klas jest oddzielonych spacją,
Przeglądarka przegląda (interpretuje) dokument HTML, buduje jego strukturę (DOM) i wyświetla go zgodnie z instrukcjami zawartymi w tym pliku (arkusze stylów, skrypty). Jeśli znacznik jest poprawny, w oknie przeglądarki zostanie wyświetlona strona HTML zawierająca elementy HTML - nagłówki, tabele, obrazy itp.
Proces interpretacji (rozbiór gramatyczny zdania) uruchamia się przed pełnym załadowaniem strony internetowej do przeglądarki. Przeglądarki przetwarzają dokumenty HTML sekwencyjnie od samego początku, jednocześnie przetwarzając CSS i korelując arkusze stylów z elementami strony.
Dokument HTML składa się z dwóch sekcji - nagłówka - między tagami
… a część treściowa - między tagami … .Struktura strony internetowej
1. Struktura dokumentu HTML
Język HTML jest zgodny z regułami zawartymi w pliku deklaracji typu dokumentu (Definicja typu dokumentu lub DTD)... DTD to dokument XML, który określa, które znaczniki, atrybuty i ich wartości są prawidłowe dla określonego typu HTML. Każda wersja HTML ma swoje własne DTD.
DOCTYPE odpowiada za poprawne wyświetlanie strony internetowej przez przeglądarkę. DOCTYPE definiuje nie tylko wersję HTML (np. Html), ale także odpowiedni plik DTD w Internecie.
Elementy wewnątrz metki , tworzą drzewo dokumentów, tzw model obiektowy dokumentu (DOM)... Ponadto element jest elementem głównym.
Postać: 1. Najprostsza struktura strony internetowej Aby zrozumieć interakcję elementów strony internetowej, należy wziąć pod uwagę tzw "Relacje rodzinne" między elementami. Relacje między wieloma zagnieżdżonymi elementami są klasyfikowane jako nadrzędne, podrzędne i równorzędne.
Przodek - element zawierający inne elementy. Na rysunku 1 przodkiem wszystkich elementów jest ... W tym samym czasie element
jest przodkiem wszystkich zawartych w nim tagów:,
, ,
Potomek - element znajdujący się w jednym lub kilku typach elementów. Na przykład,
jest potomkiem i elementJest potomkiem obu
i .Element nadrzędny - element powiązany z innymi elementami niższego poziomu i znajdujący się w drzewie nad nimi. Ryc.1
i ... EtykietkaRodzic tylko dla .
Element podrzędny - element bezpośrednio podporządkowany innemu elementowi wyższego poziomu. Na rysunku 1 tylko elementy
, ,
I
Element pielęgnacyjny - element, który ma wspólnego rodzica z rozpatrywanym elementem, tzw. rodzeństwo. Ryc.1
i - elementy tego samego poziomu, a także elementy , i
Są między sobą siostrami.
1.1. Element
1.2. Element
Sekcja
... zawiera informacje techniczne o stronie: tytuł, opis, słowa kluczowe dla wyszukiwarek, kodowanie itp. Wprowadzone w nim informacje nie pojawiają się w oknie przeglądarki, ale zawierają dane, które mówią przeglądarce, jak obsłużyć stronę.1.2.1. Element </h4>
<p>Wymagany tag sekcji <head> jest tagiem <title> ... Tekst umieszczony wewnątrz tego tagu jest wyświetlany na pasku tytułu przeglądarki internetowej. Długość tytułu nie powinna przekraczać 60 znaków, aby całkowicie zmieścił się w tytule. Tekst tytułu powinien zawierać możliwie najpełniejszy opis zawartości strony internetowej.</p>
<h4>1.2.2. Element <meta></h4>
<p>Opcjonalna etykieta sekcji <head> to pojedynczy tag <meta> ... Można go użyć do ustawienia opisu zawartości strony i słów kluczowych dla wyszukiwarek, autora dokumentu HTML i innych właściwości metadanych. Element <head> może zawierać wiele elementów <meta> ponieważ, w zależności od użytych atrybutów, zawierają różne informacje.</p><p>
<meta name="description" content="Opis zawartości strony">
<meta name="keywords" content="Słowa kluczowe oddzielone przecinkami">
</p><p>Opis zawartości strony i słowa kluczowe można podać jednocześnie w kilku językach, na przykład w języku rosyjskim i angielskim:</p><p>
<meta name="description" lang="ru" content="Opis zawartości strony">
<meta name="description" lang="en" content="Opis">
<meta name="keywords" lang="ru" content="Słowa kluczowe oddzielone przecinkami">
<meta name="keywords" lang="en" content="Słowa kluczowe">
</p><p>Korzystanie ze znacznika <meta> możesz zabronić lub zezwolić na indeksowanie strony internetowej przez wyszukiwarki:</p>
<p>
<meta name="robots" content="index, follow">
</p><p>
<meta name="robots" content="index, nofollow">
</p><p>
<meta name="robots" content="noindex, nofollow">
</p><p>Aby automatycznie ponownie załadować stronę po określonym czasie, musisz użyć wartości odświeżania:</p><p>
<meta content="30">
</p><p>Strona załaduje się ponownie za 30 sekund. Aby wysłać gościa na inną stronę, musisz podać adres URL w parametrze url:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3"> Tabela 2. Atrybuty znaczników <meta>
<tbody><tr><th style="width: 20%;">Atrybut</th>
<th></th>
</tr><tr><td> zestaw znaków</td>
<td>Określa kodowanie znaków dla bieżącego dokumentu HTML: <meta charset="UTF-8">
</td>
</tr><tr><td> zadowolony</td>
<td>Zawiera dowolny tekst, który określa wartość skojarzoną z atrybutem http-equiv lub name, w zależności od ich wartości.</td>
</tr><tr><td> http-equiv</td>
<td>Kontroluje działania przeglądarki na danej stronie internetowej (odpowiednik nagłówków HTTP). Podczas renderowania strony przeglądarka będzie postępować zgodnie z instrukcjami podanymi w atrybucie: <br> styl domyślny wskazuje preferowany styl do użycia na stronie. Atrybut treści musi zawierać identyfikator elementu <link> który odnosi się do arkusza stylów CSS lub identyfikatora elementu<style> , содержащего таблицу стилей.<br>
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br>
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br>
<meta content="30"> <br>
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br>
<meta content="0; url=http://mail.ru/">
</td>
</tr><tr><td> name
</td>
<td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br>
application-name указывает название веб-приложения, используемого на странице.<br>
author указывает имя автора документа в свободном формате.<br>
description определяет краткое описание к содержимому страницы, например:<br>
<meta name="description" content="Описание содержимого страницы"> <br>
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br>
<meta name="generator" content="WordPress 4.0"> .<br>
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br>
<meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
</i>
</td>
</tr></tbody></table><h4>1.2.3. Элемент <style></h4>
<p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p>
<p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p>
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p>
<div class="paper">
...
</div>
</p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p>
<h4>1.2.4. Элемент <link></h4>
<p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p>
<p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через
директиву @import url</p><p>
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title>
za pomocą elementu ... Element nie wymaga tagu końcowego. Ten element definiuje relację między bieżącą stroną a innymi dokumentami. Na stronie może znajdować się kilka takich elementów. Wpis będzie wyglądał następująco:
| Atrybut | Opis, akceptowana wartość |
|---|---|
| crossorigin | Określa, czy podczas pobierania obrazu z witryny należy używać CORS (technologia przeglądarki, która umożliwia stronie internetowej dostęp do zasobów z innej domeny). anonimowy - przeglądarka automatycznie dodaje nagłówek Origin do żądania międzydomenowego, który zawiera nazwę domeny, z której wysłano żądanie. Jeśli serwer nie odpowie nagłówkiem Access-Control-Allow-Origin: * CORS (lub nazwą domeny zamiast gwiazdki), przesyłanie obrazu zostanie zablokowane. use-credentials - jeśli serwer nie dostarczy poświadczeń przy użyciu Access-Control-Allow-Credentials: true, wówczas przesyłanie obrazu zostanie zablokowane. |
| href | Głównym atrybutem tagu, wartością jest ścieżka do pliku ze stylami. |
| hreflang | Określa język tekstu w dokumencie odniesienia. |
| głoska bezdźwięczna | Określa typ urządzenia, do którego należy zastosować zasób łącza. |
| chwilowo | Losowo generowana zmienna łańcuchowa na serwerze, która określa zasady używania stylów wbudowanych do ochrony treści. Wartość atrybutu to ciąg tekstowy. |
| rel | Atrybut definiuje związek między bieżącym dokumentem a dokumentem, do którego się odnosi. alternatywny - link do tego samego dokumentu, ale w innym formacie (np. strony do druku, tłumaczenie, kopia lustrzana, kanał RSS lub Atom), . archiwa - wskazuje, że przywoływany dokument ma znaczenie historyczne. Łącze może wskazywać na zbiór rekordów, dokumentów i innych materiałów. autor to link do strony o autorze dokumentu lub do strony z danymi kontaktowymi autora. bookmark odnosi się do najbliższego przodka artykułu, którym jest link, lub do sekcji artykułu najbardziej związanej z elementem, jeśli nie ma elementu nadrzędnego. External jest używany do wskazania, że \u200b\u200bstrona, do której prowadzi łącze, nie jest częścią tej witryny. najpierw określa łącze do pierwszego dokumentu w sekwencji dokumentów. pomoc to łącze do dokumentu z pomocą. icon określa ścieżkę do ikony, która będzie używana dla bieżącego dokumentu. last określa łącze do ostatniego dokumentu w sekwencji dokumentów. Licencja odnosi się do informacji o prawach autorskich do dokumentu. dalej wskazuje, że ten dokument jest częścią serii i że odsyłacz prowadzi do następnego dokumentu w serii. nofollow oznacza, że \u200b\u200blink nie został zatwierdzony przez autora strony lub ma charakter komercyjny. noreferrer wskazuje, że nagłówek żądania klienta zawierający adres URL źródła żądania nie powinien być przekazywany dalej po odsyłaczu. pingback określa adres serwera pingback, dzięki czemu blog może automatycznie powiadamiać witryny, które do niego prowadzą. pobieranie wstępne określa, że \u200b\u200bplik łączący powinien być wcześniej buforowany. prev wskazuje, że ten dokument jest częścią serii i że odsyłacz wskazuje na poprzedni dokument w serii. search wskazuje, że dokument, do którego istnieje odwołanie, zawiera interfejs wyszukiwania i powiązane zasoby. pasek boczny wskazuje, że dokument, do którego istnieje odwołanie, jeśli to możliwe, zostanie wyświetlony w dodatkowym kontekście przeglądarki, a niektóre przeglądarki po kliknięciu hiperłącza otwierają okno, w którym można dodać łącze do paska zakładek. Arkusz stylów to łącze do zewnętrznego pliku, który będzie używany jako arkusz stylów dla tego dokumentu. tag wskazuje, że znacznik, na który wskazuje hiperłącze, dotyczy danego dokumentu. up wskazuje, że strona jest częścią struktury hierarchicznej i że hiperłącze prowadzi do wyższego poziomu zasobu w strukturze. |
| rozmiary | Określa rozmiar ikon wyświetlanych wizualnie. Atrybut rozmiarów jest używany tylko w połączeniu z atrybutem rel \u003d "icon" i może przyjmować następujące wartości: szerokość wysokość - określa listę rozmiarów oddzielonych spacjami, każdy rozmiar musi być w formacie - szerokości wysokość (rozmiary ikon są ustawiane w pikselach), na przykład: ; dowolna - ikona może być skalowana do dowolnego rozmiaru. |
| tytuł | Określa tytuł łącza lub nazwę zestawu alternatywnych arkuszy stylów. Wartością atrybutu jest tekst. |
| rodzaj | Określa typ MIME dokumentu, do którego się odwołuje. W tym przypadku przyjmuje wartość „text / css”. |
