wejścieJęzyk programowania HTML dla manekinów. Podstawy HTML dla początkujących w zrozumiałym języku
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, obrazy 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. Dla każdej wersji 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 historyczne. 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". |
1.2.5. Element Ciało dokumentu Uwaga: Dokumenty HTML mają rozszerzenie .html..
Tak, aby od tego przykładu.
- Rodzaj dokumentu (DC)
Ten projekt jest zawsze wskazany na początku dokumentu dla prawidłowej przeglądarki "zrozumienia", której wersja HTML jest używana podczas budowania dokumentu.
Ze względu na fakt, że HTML stale się rozwija, ma kilka wersji, jako każdy produkt programowy. Obecna wersja HTML jest piąta i jedna podana w przykładzie. lek Jest istotna.
Zasadniczo nie ma sensu zagłębienie w badaniu rodzaju dokumentu, ponieważ z wyjściem HTML5 projekt ten stał się standardem. Wystarczy wstawić go na początek dokumentu za każdym razem, gdy rozpoczynasz układ witryny.
- Początek dokumentu
Pierwszy znacznik, który spotykamy po tym, jak lekarz jest .
Tag HTML. - Strukturalna jednostka znakowania dokumentu HTML. Kod HTML składa się z cegieł, które są określane jako tagi. Każdy znacznik ma swoją własną funkcję, a badanie języka znacznika HTML, ostatecznie, jest dokładnie w badaniu znaczników i ich właściwości w dokumencie.
Chciałbym zauważyć, że badanie HTML nie jest taką złożoną lekcją, jak może wydawać się na pierwszy rzut oka. Aby nauczyć się tagów używanych w znaczniku - nie tak duży ładunek na mózgu.
Więc znacznik dokumentu zaczyna się od tagu i kończy się tagiem zamykającym. Każdy znacznik zawierający inne znaczniki lub elementy powinny być zamknięte znacznik. Na przykład, , ,
itd.Etykietka Jest to obowiązkowe, ponieważ zawiera całą strukturę dokumentu i jest powłoką dla innych elementów.
Etykietka
Następnie widzimy etykietka który zawiera inne, dopóki przedmioty tego nie zrozumieją. Zawiera inne elementy - oznacza to, że elementy lub znaczniki są między tagem otwierającym i zamykającym strukturze:
<тег> Treść lub inne tagi
Etykietka
Jest przeznaczony do przechowywania metamowania dokumentu HTML, czyli informacje, które nie są wyświetlane w samym dokumencie, ale są ważne i w dużej mierze określa, w jaki sposób dokument będzie wyglądał i jak się zachowywać.Ten znacznik jest wymagany w dokumencie.
Etykietka - Nagłówek dokumentów.</h4>
<title>Tytuł
Tytuł
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
А это мой первый сайт.
Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
- align — Определяет выравнивание линии. Может принимать значение left, center, right.
- color — Задаёт цвет линии.
- noshade — Рисует линию без трехмерных эффектов.
- size — Задаёт толщину линии.
- width — Задаёт ширину линии.
Код с использованием тега
:
А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Cуществуют и другие одиночные теги (,
,