Podczas tworzenia witryny pierwszą rzeczą, którą musisz reprezentować, jest utworzenie strony internetowej. To rodzaj "fundamentu" w budynku witryny. Dlatego wcześniej, aby zagłębić się do badania bardziej złożonych technologii do tworzenia witryn, zaleca się mieć co najmniej podstawowe informacje o HTML. W tej lekcji zapoznamy się Html.Zrozumiemy struktura dokumentów HTML. W praktycznych przykładach naprawią zdobytą wiedzę.
Co to jest HTML?
Html. Jest rozszyfrowany jako język znacznika hipertekstowego (z języka angielskiego. Język Markup HyperText). Ten język jest odpowiedzialny za dokładnie, jak wyświetlany jest hipertekst na stronach witryn. Teraz wymyślmy to, co jest hipertekst? Nie jest tajemnicą, że oddzielna strona może zawierać wiele różnych informacji, zarówno tekst, niektóre stoły, grafika, filmy, audio itp. Więc wszystkie te informacje można nazwać jednym słowem - HyperText.
Należy pamiętać, że HTML jest językiem znacznika, a nie język programowania. W tym języku nie ma funkcji logicznych i dokonać żadnych obliczeń matematycznych na niej niemożliwe. Strony HTML mają przedłużenie .html. lub .htm. I przetwarzane przez przeglądarek - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera itp.
Teraz zrozumiemy, jak przeglądarka rozumie, co i jak wyświetlić na stronie internetowej? To bardzo proste. HTML Hypertext Marking Language ma wbudowane polecenia, są one nazywane tagami. Jest na nich, że przeglądarka jest zorientowana.
Struktura dokumentów HTML.
Każdy dokument HTML (artysta internetowy) musi mieć określoną strukturę. Spowoduje to uniknięcie możliwych problemów podczas otwierania stron w przeglądarkach. Jako przykład spójrzmy na stronę, która zawiera następujący kod HTML:
Struktura dokumentów HTML. ...
Będziemy analizować w kolejności, który jest zawarty w tej strukturze:
1. Pierwszą rzeczą, która w dokumencie HTML jest określenie wersji (pierwszej linii). Aby poprawnie pracować, określ ten ciąg podczas układania strony internetowej.
3. Następnie istnieje region na szczyt witryny (Caps). Dla tego służy tagiem
. W nagłówku wskazujemy nazwę naszej strony, umieszczając tytuł strony między tagami4. Meta Tag "Opis" - Krótka zawartość strony, zaprojektowana do wyszukiwarek. Ten znacznik jest ważny dla optymalizacji wyszukiwarek i musi się wypełnić.
5. Meta Tag "Słowa kluczowe" - Słowa kluczowe, które mogą wystąpić na stronie. Ten tag jest również przeznaczony do wyszukiwarek. Obecnie ten znacznik jest rzadko używany.
6. Korpus strony otwiera tag
i zamyka odpowiednio znaczniki. Strona internetowa jest opublikowana jako reguła, główna zawartość - tekst, wideo, audio i inne informacje.Dlatego odpowiedzieliśmy na pytanie, co HTML jest i studiował strukturę dokumentu HTML. Informacje uzyskane w tej lekcji są podstawowymi koncepcjami, bez nich nie jest konieczne. Porozmawiamy o bardziej złożonych rzeczach w innych lekcjach.
Podstawy HTML. Są to podstawowe zasady języka HTML, opis struktury strony HTML, relacji w strukturze dokumentu HTML między elementami HTML.
Dokument HTML jest zwykłym dokumentem tekstowym, można utworzyć jako w zwykłym edytorze tekstu. (Notatnik)i w specjalistycznym, z kodem oświetlenia (Notatnik ++, 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 początkowym początkowym dokumencie (otwarcie) i końcowym (zamkniętym) znaczniku (z rzadkim wyjątkiem).
Start Tag. Pokazuje, gdzie rozpoczyna się element, ostateczny - gdzie się kończy. Znacznik Uformuje się, dodając slash / przed nazwą tagu:<имя тега> … . Pomiędzy początkowymi a zamykającymi znacznikami znajduje się zawartość tagu - treści.
Pojedyncze znaczniki nie mogą bezpośrednio przechowywać zawartość, na przykład jest określony jako wartość atrybutu, na przykład znacznik Utwórz przycisk z tekstem Przycisk Wewnątrz.
Tagi można zainwestować na przykład, na przykład
Tekst
. Podczas inwestowania należy przestrzegać kolejności ich zamknięcia. (Zasada "Matryshka")Na przykład następny wpis zostanie nieprawidłowy:Tekst
.Elementy HTML mogą mieć atrybuty (globalny obowiązujący dla wszystkich elementów HTML i ich własnych). Atrybuty są zapisywane w znaczniku elementu Discovery i zawierają nazwę i wartość określoną w formacie nazwy atrybutu \u003d wartość ". Atrybuty umożliwiają zmianę właściwości i zachowania elementu, dla którego są określone.
Każdy element może być przypisany kilka wartości klasy i tylko jedna wartość identyfikacyjna. Wiele wartości klasy są rejestrowane przez przestrzeń,
Przeglądanie przeglądarki (interpretuje) dokument HTML, budując swoją strukturę (DOM) i wyświetlanie go zgodnie z instrukcjami zawartymi w tym pliku (style, skrypty). Jeśli znacznik jest poprawny, strona HTML zawierająca elementy HTML zostanie wyświetlone w oknie przeglądarki - nagłówki, tabele, obrazów itp.
Proces interpretacji (ROZBIÓR GRAMATYCZNY ZDANIA) Rozpoczyna się, zanim strona internetowa zostanie w pełni załadowana do przeglądarki. Przeglądarki obsługują dokumenty HTML sekwencyjnie, od samego początku, podczas przetwarzania CSS i korelacyjne arkusze stylów z elementami stron.
Dokument HTML składa się z dwóch sekcji - tytuł - między tagami
… i znacząca część - między tagami … .Struktura strony internetowej
1. Struktura dokumentów HTML
Język HTML podąża za regułami zawartymi w pliku reklamy AD Dokument AD. (Definicja typu dokumentu lub DTD). DTD to dokument XML, który określa, które znaczniki, atrybuty i ich wartości są ważne dla określonego typu HTML. Każda wersja HTML ma własną DTD.
DocType. Odpowiedzialny za prawidłowy wyświetlanie przeglądarki stron internetowych. DocType definiuje nie tylko wersję HTML (na przykład HTML), ale także odpowiedni plik DTD w Internecie.
Elementy znajdujące się w tagu , tworzą drzewo dokumentu tak zwanego model dokumentu roboczego, DOM (model obiektu dokumentu). W tym samym elemencie Jest to element korzeniowy.
Figa. 1. Najprostsza struktura strony internetowej Aby zrozumieć interakcję elementów stron internetowych, konieczne jest rozważenie tzw "Związany związek" Między elementami. Związek między wieloma zagnieżdżonych elementów dzieli się na rodzica, spółki zależne i pielęgniarstwo.
Przodek - element, który wchodzi w inne elementy. Rysunek 1, przodk dla wszystkich elementów jest . W tym samym elemencie
Jest to przodk dla wszystkich tagów zawartych w nim:,
, ,
Potomek - element umieszczony wewnątrz jednego lub więcej typów przedmiotów. Na przykład,
To potomek i elementJest potomkiem w tym samym czasie
i .Element rodzicielski - element związany z innymi elementami niższego poziomu i na drzewie nad nimi. Rysunek 1.
i . EtykietkaJest rodzicem tylko dla .
Element córki - Element bezpośrednio podporządkowany innym elementem wyższego poziomu. Rysunek 1 Tylko przedmioty
, ,
I
Element pielęgniarski - element mający wspólny element macierzysty z tak zwanymi elementami jednego poziomu. Rysunek 1.
i - Elementy jednego poziomu, a także elementy , i
Są wśród siebie pielęgniarstwa.
1.1. Element
1.2. Element
Sekcja
... Zawiera informacje techniczne na stronie: Tytuł, opis, słowa kluczowe do wyszukiwarek, kodowanie itp. Informacje wprowadzone w nim nie są wyświetlane w oknie przeglądarki, jednak zawiera dane, które przeglądarka wskazuje, jak przetwarzać stronę.1.2.1. Element </h4>
<p>Obowiązkowa sekcja oznaczenia <head> jest tagiem <title> . Tekst umieszczony wewnątrz tego znacznika jest wyświetlany na pasku tytułu przeglądarki internetowej. Długość nagłówka powinna być nie więcej niż 60 znaków, aby w pełni dopasować do tytułu. Tekst nagłówka musi zawierać najbardziej pełny opis zawartości strony internetowej.</p>
<h4>1.2.2. Element <meta></h4>
<p>Opcjonalny tag przekrój. <head> jest tym samym tagiem <meta> . Dzięki nim możesz ustawić opis zawartości strony i słowa kluczowe do wyszukiwarek, autor dokumentu HTML i innych właściwości metadanych. Element <head> może zawierać kilka elementów <meta> Ponieważ w zależności od używanych atrybutów przenoszą różne informacje.</p><p>
<meta name="description" content="Opis treści strony.">
<meta name="keywords" content="Słowa kluczowe przez przecinek">
</p><p>Opis treści strony i słowa kluczowe mogą być jednocześnie wskazane w kilku językach, na przykład w języku rosyjskim i angielskim:</p><p>
<meta name="description" lang="ru" content="Opis treści strony.">
<meta name="description" lang="en" content="Opis.">
<meta name="keywords" lang="ru" content="Słowa kluczowe przez przecinek">
<meta name="keywords" lang="en" content="Słowa kluczowe.">
</p><p>Za pomocą tagu. <meta> Możesz zabronić lub zezwolić na indeksowanie strony internetowej według 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 uruchomić stronę w określonym czasie, należy użyć wartości odświeżania:</p><p>
<meta content="30">
</p><p>Strona zostanie ponownie uruchomiony po 30 sekundach. Aby przenieść odwiedzający na inną stronę, musisz określić adres URL w parametrze URL:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3"> Tabela 2. Atrybuty tagów <meta>
<tbody><tr><th style="width: 20%;">Atrybut</th>
<th></th>
</tr><tr><td> Charakter.</td>
<td>Określa kodowanie znaków dla bieżącego dokumentu HTML: <meta charset="UTF-8">
</td>
</tr><tr><td> Zawartość</td>
<td>Zawiera arbitralny tekst, który określa wartość powiązaną z atrybutem EQUIV lub nazwę HTTP, w zależności od ich wartości.</td>
</tr><tr><td> Http-equiv.</td>
<td>Kontroluje działania przeglądarki na tej stronie internetowej (odpowiednik nagłówków HTTP). Podczas wyświetlania strony przeglądarka będzie postępować zgodnie z instrukcjami określonymi w atrybucie: <br> Domyślny styl Określa preferowany styl do użycia na stronie. Atrybut treści musi zawierać identyfikator elementu <link> który odnosi się do tabeli 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 zamykającego. Ten element określa relację między bieżącą stroną a innymi dokumentami. Na stronie może być kilka takich elementów. Rekord będzie miał następujący formularz:
| Atrybut | Opis |
|---|---|
| Crossorigin. | Określa, czy należy użyć CORS (technologia przeglądarki, która umożliwia dostarczanie dostępu do innych zasobów domeny) podczas wyodrębniania obrazu z witryny. Anonimowy - W zapytaniu Cross-Domain, przeglądarka automatycznie dodaje nagłówek pochodzenia zawierający nazwę domeny, z której przeprowadza żądanie. Jeśli serwer nie odbiera dostępu-Access-Control - Pochodzenie-Pochodzenie: * (lub nazwa domeny zamiast gwiazd), a następnie obciążenie obrazu zostanie zablokowane. Poświadczenia użytkowania - jeśli serwer nie dostarcza poświadczeń za pomocą dostępu-Control-Control-Poświadczenia: True, wówczas obciążenie obrazu zostanie zablokowany. |
| href. | Główny atrybut tagu, jako wartość, jest ścieżką do pliku ze stylami. |
| hreflang. | Określa język tekstu w dokumencie, do którego jest łącze. |
| Głoska bezdźwięczna. | Określa typ urządzenia, do którego należy zastosować zasób referencyjny. |
| CHWILOWO | Randing zmienna wygenerowana losowo na serwerze, która ustawia reguły stosowania wbudowanych stylów w celu ochrony treści. Wartość atrybutu - ciąg tekstowy. |
| Rel. | Atrybut określa relację między bieżącym dokumentem a dokumentem, które odniesienia. Alternatywny - link do tego samego dokumentu, ale w innym formacie (na przykład drukować strony, tłumaczenie, lustro, wstążki w formacie RSS lub atom), . Archiwa - wskazuje, że dokument na link reprezentuje zainteresowanie historycznym. Link może wskazywać na zbiór rekordów, dokumentów i innych materiałów. Autor link do strony o autorze dokumentu lub strony za pomocą danych kontaktowych autora. Odwołanie do zakładek w najbliższym przodku artykułu, który jest linkiem lub do sekcji artykułu, najbardziej ściśle związane z elementem, jeśli nie ma przodka. Zewnętrzny służy do wskazania, że \u200b\u200bstrona, do której link nie jest częścią tej witryny. Najpierw określa link prowadzący do pierwszego dokumentu z sekwencji dokumentu. Pomóż odwołać się do dokumentu za pomocą certyfikatu. Ikona określa ścieżkę do ikony, która zostanie użyta do bieżącego dokumentu. Ostatni Określa link prowadzący do ostatniego dokumentu w sekwencji dokumentów. Odniesienie do licencji do informacji o prawach autorskich dla dokumentu. Następny wskazuje, że ten dokument jest częścią serii i że link prowadzi do następującego dokumentu w tej serii. NoFollowska wskazuje, że link nie jest zatwierdzony przez autora lub że łącze jest komercyjne. NefErr wskazuje, że nagłówek żądania klienta zawierający adres URL źródła żądania nie może być przesyłany podczas łącza. Pingback Określa adres serwera Pingback, który umożliwia blog automatycznie powiadomić witryny, które łączą się z nim. Preference Wskazuje, że plik powinien być przechowywany z wyprzedzeniem, do którego prowadzi link. Poprzednia wskazuje, że ten dokument jest częścią serii, i że łącze prowadzi do poprzedniego dokumentu w tej serii. Wyszukiwanie wskazuje, że dokument referencyjny zawiera interfejs wyszukiwania i powiązane zasoby. Pasek boczny Wskazuje, że dokument odniesienia, jeśli to możliwe, zostanie wyświetlone w dodatkowym kontekście przeglądarki, a niektóre przeglądarki po kliknięciu hiperłącza otworzy okno, aby dodać link do panelu Zakładki. Łącze arkuszowe stylów do zewnętrznego pliku, który zostanie użyty jako arkusz stylów dla tego dokumentu. Tag wskazuje, że etykieta, na której hiperłącze prowadzi do tego dokumentu. W górę wskazuje, że strona jest częścią konstrukcji hierarchicznej i że hiperłącza prowadzi do wyższego poziomu zasobu w strukturze. |
| Rozmiary. | Określa rozmiar ikon wyświetlacza wizualnego. Atrybut rozmiary jest używany tylko za pomocą Rel \u003d "Icon" i może podjąć następujące znaczenia: Szerokość to wysokość - definiuje listę rozmiarów oddzielonych przestrzeniami, każdy rozmiar musi być w formacie - szerokości wysokości (wymiary ikon są ustawione w pikselach), na przykład: ; Każda - ikona może skalować do dowolnego rozmiaru. |
| Tytuł | Określa tytuł łącza lub nazwy zestawu stołów w stylu alternatywnych. Wartość atrybutu - tekst. |
| Rodzaj | Określa typ dokumentu MIME, do którego jest łącze. W takim przypadku wymaga wartości "Tekst / CSS". |
