Основы HTML

В разделе Основы HTML вы узнаете о главных законах языка HTML, познакомитесь с составом HTML-страницы,…


В разделе Основы HTML вы узнаете о главных законах языка HTML, познакомитесь с составом HTML-страницы, а также — об отношениях между HTML-элементами. HTML-документ — это простой текст, написанный в любой привычной для вас программе (например, в Блокноте) или в более сложных редакторах (Notepad++, Visual Studio Code и т.п.). Из названия видно расширение, которое при этом используется: .html. Сам документ включает в себя не только текст, но и так называемое дерево элементов. Важно знать, что у HTML-элемента обязательно есть обозначения его начала и завершения. Это теги, которые так и называются: начальный и закрывающий. Оба эти тега почти повторяют друг друга и отличаются лишь одной косой чертой — слэшем. Вот как это выглядит: <название тега>…</название тега>. В середине между этими тегами находится главное содержание элемента, то есть контент. Тег сам по себе не несет в себе значение элемента. Рассмотрим такой пример <input type="button" value="Кнопка">. Содержимое этого тега - Кнопка, остальное — вспомогательные составные части.

В одной строке документа может встретиться несколько тегов. Тогда нужно внимательно следить за тем, чтобы они открывались и закрывались в той же последовательности: <p><i>Текст</i></p>. Если вы не соблюдете так называемый принцип «матрёшки», тег потеряет свое значение и не даст никакого результата: <p><i>Текст</p></i>. Атрибуты элементов бывают двух видов: глобальные (тогда они подходят к любому тегу) и собственные. Их записывают в открывающем теге. Атрибуты содержат имя и значение. Это выглядит так: имя атрибута (параметра) = "значение". Параметры нужны, чтобы элемент, к которому они относятся, имел определенные свойства.

Любой элемент имеет только один id и при этом может иметь не одно значение class. В случае нескольких значений class их оформляют через пробел: <div class="nav top">. Еще одно правило для class и id: они не могут содержать в себе ничего, кроме букв, цифр, дефисов и нижних подчеркиваний. Их началом может быть либо буква, либо цифра. Правильное оформление каждого элемента позволяет браузеру соответственно выстроить его структуру (DOM). Браузер ориентируется на все инструкции, содержащиеся в HTML-документе (в том числе на таблицы стилей и скрипты). При верной разметке появляется HTML-страница со всеми составляющими — заголовками, таблицами, картинками и др.

Чтение (иначе — интерпретация, парсинг) браузером происходит до полной загрузки страницы. Это чтение идет поочередно, от первой строки и далее, одновременно происходит обработка CSS и сравнение таблицы стилей с элементами. Любой файл, записанный на языке HTML, делится на две неравные части. В нем всегда есть заголовок, он прописывается тегами <head>…</head> — и основная часть, которая обозначается начальным тегом <body> и завершающим тегом </body>.

Дерево документа

Существует несколько версий языка HTML. Каждая из них работает по своим законам, прописанным в специальном документе, он называется Document Type Definition, сокращенно DTD. Именно он прописывает все действующие данной версии теги и атрибуты (параметры).

DOCTYPE помогает правильно изображать страницу сайта. Также он сообщает, какая именно версию языка HTML используется в данном документе, а также - какой DTD файл, находящийся во всемирной сети.

<!DOCTYPE html> <!-- Объявление формата документа -->
<html>
<head> <!-- Техническая информация о документе -->
<meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->
<title>...</title> <!-- Задаем заголовок документа -->
<link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей -->
<script src="script.js"></script> <!-- Подключаем сценарии -->
</head>
<body> <!-- Основная часть документа -->
</body>
</html>

Очень важное значение имеет корневой элемент <html>. Он начинает и заканчивает (</html>) содержимое документа, которое носит название "объектная модель" (DOM — document object model).

Для представления о том, как различные элементы влияют друг на друга, нужно знать, в каких отношениях они находятся между собой. Выделяют три вида «родственных связей»: родители, дочки и сестры.

Элемент, объединяющий в середине себя другие элементы, — это Предок. На рисунке 1 это <html>. <body> тоже будет предком, но уже для меньшего количества элементов: <h1>, <p>, <span>, <nav> и др.

Соответственно потомками будут называться те элементы, которые располагаются в середине иных (предков). Здесь <body> — потомок (для  <html>) и предок (в частности, для  <p> ).

Важно не путать родительские элементы с предками. Родитель — это тот элемент, который имеет отношение непосредственно со следующим после него элементом нижнего уровня, но не со всеми элементами ниже него. Здесь <html> играет роль родителя лишь для <head> и <body>, а <p> — родитель для <span> и т.п.

То же самое относится и к дочерним тегам. Дочка — это тег, находящийся уровнем ниже родителя. У  <body> есть не одна дочка: <h1>, <h2>, <p> и <nav>.

И, как вы уже догадались, между элементами могут существовать также и сестринские отношения — когда один или больше тегов являются дочками одного родителя. Иначе говоря, сестры — теги одного уровня: например, это <head> и <body>  или <h1>, <h2> и <p>.

Элемент <html>

Главное, что нам нужно знать об <html> — это то, что он корневой элемент, содержащий в себе весь контент. Браузер не видит и не реагирует на любые элементы HTML-кода, которые находятся ниже или выше <html>...</html>.  То есть все остальное содержимое находится между <html>...</html>. Для <html> действуют manifest и xmlns и ‎глобальные атрибуты.

АтрибутОписание, значение
manifestЭтот параметр прописывает путь к файлу кэша манифеста:

<html manifest="about_company.appcache">

Элемент <head>

Как мы уже говорили, тег <head>...</head> обозначает название и передает главную информацию: description, ключи для поиска и т.п. Полное содержание, находящееся внутри <head>, читатель не видит в браузере. Вместе с тем именно из этой информации браузер считывает, как ему воспринимать страницу. Для <head> используются только ‎глобальные атрибуты.

Элемент <title>

В элементе <head> всегда есть такая составляющая часть, как <title>. Он содержит заголовок, доступный для прочтения посетителю сайта. Существуют ограничения для длины заголовка — максимум она может достигать 60 символов. Остальные знаки не будут отражаться в заголовке. Для удобства читателей в названии обычно указывают  наиболее ясное и полное содержание всей страницы. Для этого тега также используются только ‎глобальные атрибуты.

Элемент <meta>

В отличие от <title> этот тег встречается в <head> не всегда. Он описывает содержимое, ключи для поиска, может указать автора и др. В то же время внутри раздела <head> может находиться не один тег <meta>. Тогда каждый из них будет передавать свою часть информации.

<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">

Язык HTML позволяет использовать как русский, так и английский языки в описаниях, а также в употребляемых ключевых словах:

<meta name="description" lang="ru" content="Описание содержимого страницы">
<meta name="description" lang="en" content="Description">
<meta name="keywords" lang="ru" content="Ключевые слова через запятую">
<meta name="keywords" lang="en" content="Keywords">

Помимо этого <meta> дает согласие или запрещает индексацию вашего текста поисковыми машинами. Вот как это выглядит:

Разрешение на индексацию и переход по ссылкам

<meta name="robots" content="index, follow">

Разрешение только на индексацию (переход по ссылкам запрещен):

<meta name="robots" content="index, nofollow">

Полный запрет:

<meta name="robots" content="noindex, nofollow">

Также <meta> позволяет запрограммировать автоперезагрузку вашей страницы через определенный период времени, для этого применяется тег refresh:

<meta http-equiv="refresh" content="20">

Тогда каждые 20 с. происходит обновление. С целью перевода читателя на какую-либо иную страницу прописывается ее адрес:

<meta http-equiv="refresh" content="0; url=http://yandex.ru/">

Используемые параметры: charset, content, http-equiv, name, кроме того применяются  ‎глобальные атрибуты.

АтрибутОписание, значение
charsetПрописывает код для документа: <meta charset="UTF-8">
contentЗдесь может находиться любой текст, передающий значение, ассоциируемое с параметрами http-equiv или name.
http-equivПроверяет поведение браузера (аналогично тому, как действуют HTTP названия). Браузер действует по предписаниям (инструкциям), полученным при помощи параметров:

default-style прописывает наиболее подходящий стиль для нашей страницы. content обязательно имеет идентификатор элемента <link> со ссылкой на таблицу CSS или <style>, который и определяет таблицу стилей.

refresh, как мы писали выше, определяет срок до очередного обновления страницы. Он измеряется в секундах. Также он может обозначать время до перехода на следующую страницу, если после значения времени указывается "url=адрес_страницы".

Автообновление происходит после определенного периода, здесь после 20 секунд:

<meta http-equiv="refresh" content="20">

Возможно задать переход без паузы, тогда количество секунд в элементе должно быть равно 0:

<meta http-equiv="refresh" content="0; url=http://mail.ru/">

nameСвязан со значением, содержащимся в параметре content. Применяется, когда в теге нет параметров http-equiv, charset или itemprop.

application-name дает название приложения, применяемое на странице.

author соответственно прописывает имя автора созданного файла в наиболее удобном формате.

description традиционно сообщает описание страницы:

<meta name="description" content="Описание содержимого страницы">

generator определяет какой-либо пакет ПО, которое применяется при образовании документа:

<meta name="generator" content="WordPress 4.0"> .

keywords перечисляет ключевые слова через запятую. Важно, чтобы они передавали смысл содержимого страницы:

<meta name="keywords" content="Ключевые слова через запятую">.

Помимо этого name при необходимости применяется для обозначения расширенного списка значений: creator, googlebot, publisher, robots, slurp, viewport. Впрочем, стоит отметить, что эти данные пока используются неофициально.

1.2.3. Элемент <style>

<style>, о чем мы также уже упоминали, используют для передачи стилей. Здесь уже применяется другой язык программирования — CSS. Собственные атрибуты для <style>: media, scoped и type и традиционно ‎глобальные атрибуты.

<style> определяет стиль для всей страницы или для ее отдельных частей.

Для того, чтобы элемент отражался в нужном стиле, нужно использовать еще один атрибут — class (также здесь возможно применение id), при помощи которого присваивается необходимое название:

<div class="paper">
...
</div>

CSS код применяется напрямую:

<p style="color: #666666; background-color: #ef4444; padding: 20px;">

 

АтрибутОписание, значение
mediaПоказывает соответствие типа устройства и каскадных таблиц стилей (CSS). Это особая технология описания внешнего вида файла. В самой таблице особые установки для работы различных устройств оформляются с применением media query.
nonceЭто произвольная строковая переменная, состоящая из случайных символов и определяющая условия применения стилей. Ее главная задача — ограждать содержимое страницы от некоторых видов атак. Значение параметра — строка текста.
typeУказывает на MIME тип (Multipurpose Internet Mail Extension, Многоцелевые расширения почты Интернета) файла со стилями: <style type="text/css">.

1.2.4. Элемент <link>

HTML язык позволяет создавать стили разными путями, например, открыв для этого дополнительный файл типа .css: style.css.

Он прикрепляется к документу через @import url

<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title> </title>
</head>

с применением <link>. Стоит обратить внимание на то, что <link> используется однократно, без применения закрывающего тега. Он утверждает отношения страницы с различными документами. Такие строки в некоторых документах встречаются не единожды:

<link rel="stylesheet" href="style.css" type="text/css">

<link> использует href, hreflang, media, rel, type и ‎глобальные атрибуты.

АтрибутОписание, значение
crossoriginОтмечает необходимость применения CORS (это специальная технология, при помощи которой сайт имеет доступ к иному домену) во время загрузки картинки.

anonymous — кросс-доменный запрос дополняется специальным заголовком Origin, в котором указывается имя запрашивающего домена. Сервер при этом должен откликнуться соответствующим CORS заголовком Access-Control-Allow-Origin:* возможна замена звёздочки именем домена, подделка которого невозможна), иначе извлечение картинки запрещается.

use-credentials — когда сервер не открывает свои данные с применением Access-Control-Allow-Credentials:true, сохранение картинки также запрещается.

hrefСобственно показывает местонахождение файла, содержащего стили.
hreflangНазывает язык, используемый в том файле, куда ведет ссылка.
mediaПоказывает тип устройства, для которого используется ссылка.
nonceЭто произвольная строковая переменная, состоящая из случайных символов, определяющая установки по применению стилей. Ее главная задача — ограждать содержимое страницы от некоторых видов атак. Значение параметра — строка текста.
relЭтот параметр указывает на то, как соотносится данный документ и тот, на который ссылается <link>.

alternate — альтернативная ссылка на тот же самый документ, имеющий разные иные форматы (печатный вид, тот же текст на другом языке, зеркало, RSS-лента и т.п.):

<link rel="alternate stylesheet" type="text/css" title="small_font" href="small-font.css">.

<link rel="alternate" type="application/rss+xml" title="my_RSS" href="index.xml">

<link rel="alternate" type="application/atom+xml" title="News" href="/atom.xml?type=news">

archives — специальный тег, подчеркивающий историческую важность контента по ссылке. Это могут быть различные видео— или аудиозаписи, ценные фотодокументы и др.

author — в этом случае ссылка приводит на информацию об авторе или на его контактную информацию.

bookmark осуществляет переход на предка данной статьи. В случае если такого близко связанного со страницей ресурса нет, она может приводить к разделу, максимально связанному с содержанием текста.

external применяется, когда нужно отметить, что страница по ссылке принадлежит другому сайту.

first применяется для ссылки, которая относится к начальному документу из списка.

help, как это следует из названия, открывает справочную информацию.

icon указывает местонахождение значка, применяемого для нашего файла.

last обозначает ссылку, направляющую к завершающему файлу в списке.

license открывает информацию об авторских правах, относящихся к данному файлу.

next дает понять, что существует некий список файлов, и данная ссылка направляет на очередной  документ этого списка:

<link rel="next" href="/next.html" type="text/html" title="Следующая страница">

nofollow подчеркивает коммерческий характер данной ссылки. Второй вариант: автор страницы ее не подтверждает.

noreferrer запрещает копировать в заголовке запроса, поступающего от посетителя сайта, адресную ссылку источника запроса.

pingback передает адрес пингбэк-сервера. С его помощью блог передает информацию сайтам, которые его упоминают.

prefetch напоминает о необходимости предварительного кэширования файла по ссылке.

prev отмечает, что существует некий список файлов, и ссылка направляет на предваряющий  документ этого списка.

<link rel="prev" href="/next.html" type="text/html" title="Предыдущая страница">

search подтверждает, что в документе по ссылке есть поиск.

sidebar предлагает показать документ, к которому ведет ссылка, в новом окне. Также иногда возможно подключение опции добавления ссылки в закладки.

stylesheet переводит к внешнему файлу — таблице стилей, используемых на этой странице.

tag отмечает принадлежность метки по гиперссылке к этому файлу.

up означает, что наш файл - звено определенной иерархической структуры, а ссылка направляет на следующий за ним верхний уровень.

sizesПередает размер значка файла для изображения в браузере. Применяется вместе с rel="icon".

ширина х высота — измеряется в пикселях, цифры в теге перечисляются через пробел:

<link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png">;

any — размер иконки не ограничен.

titleОзначает название ссылки или другое название, например, набора дополнительных таблиц стилей. Значение параметра — текст.
typeУказывает на MIME тип файла (Multipurpose Internet Mail Extension, Многоцелевые расширения почты Интернета): "text/css".

Элемент <script>

<script> нужен для прикрепления к файлу каких-либо сценариев. Здесь непременно нужен закрывающий тег по окончании сценария. Также возможен вариант, когда сценарий размещается в отдельном файле. Тогда он работает при помощи async, charset, defer, src, type и традиционно ‎глобальных атрибутов.

АтрибутОписание, значение
asyncСообщает об асинхронности исполнения данного сценария по сравнению с оставшимся контентом файла (работа начинается с момента загрузки страницы).
charsetФормирует кодировку символов
crossoriginОтмечает необходимость применения CORS (это специальная технология, при помощи которой сайт имеет доступ к иному домену) при загрузке скриптов (с применением src).

anonymous — кросс-доменный запрос дополняется специальным названием Origin без сообщения условий доступа  (cookie, сертификат X.509, логин/пароль и пр.). Сервер при этом должен откликнуться соответствующим CORS названием Access-Control-Allow-Origin:имя домена. Иначе загрузка скрипта запрещается.

use-credentials — тот же запрос, но теперь с передачей условий доступа. Необходимый отклик сервера: Access-Control-Allow-Credentials: true. В случае отсутствия такого ответа загрузка скрипта запрещается.

deferПарсинг сценариев приостанавливается, пока клиент не увидит документ полностью. .
nonceОграждает от нападений на ресурс с применением межсайтового скриптинга (cross site scripting — уязвимость, которая заключается во внедрении кода, исполняемого на стороне клиента (JavaScript) в страницу, просматриваемую клиентами). Определяет установки применения скриптов с употреблением nonce-значений и хэшей.
srcПодводит к документу, содержащему сценарий. Значение — адресная ссылка на файл, в котором прописана JavaScript-программа.
typeОпределяет язык сценария.

Элемент <body>

Этот элемент содержит непосредственно контент файла. Применяет ‎глобальные атрибуты.

АтрибутОписание, значение
onafterprintДействие, происходящее вслед за командой "печать", а также после того, как закрывается окно печати.
onbeforeprintДействие, происходящее, до того, как файл выводится на печать .
onbeforeunloadДействие происходит в момент решения клиентом уйти со страницы. Открывает возможность задать клиенту вопрос, подтверждает ли он свое решение или нет.
onhashchangeДействие происходит при изменении hash-части адреса строки: если вместо example.domain/test.aspx#page1 в строке появляется example.domain/test.aspx#page2 и т.п.
onmessageДействие начинается, если от его источника приходит соответствующая информация.
onofflineДействие происходит в случае разрыва связи с интернет-сетью.
ononlineДействие при появлении интернет-сети.
onpagehideДействие связано с тем, что клиент уходит со страницы при помощи навигации: по ссылке, после обновления страницы и т.п.
onpageshowКлиент попадает на страницу после того, как произошло действие onload..
onunloadОтсутствие загрузки страницы или прекращение работы браузера.


Оцените полезность статьи:

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (2 оценок, среднее: 5,00 из 5)
Загрузка...

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности