Структура html файла: Структура HTML файла

12.06.2021 alexxlab

Содержание

Структура HTML файла

Типичный HTML файл представляет собой текстовый файл с набором тегов. Теги — это особые команды, которые помогают браузеру отображать страницу. Благодаря тегам браузер понимает, в каком месте текст должен быть выделен жирным или курсивом, какой заголовок будет у страницы и как отображать таблицу. Их содержание не будет отображаться на странице браузера. Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью «Как создать HTML файл». Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.

Рассмотрим пример упрощённого HTML файла, страницы сайта:

<!DOCTYPE html>
<html>
   <head>
      Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы
   </head>
   <body>
      Содержание страницы
   </body>
</html>

Всё, что написано латиницей и заключено в скобки < > — это теги. Разберём пример по сторкам:

<!DOCTYPE html> — эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.

<html> … </html> — это парный тег (у него есть открывающая часть <html> и закрывающая </html>, которые различаются наличием слеша «/«). Внутри него заключено всё тело html документа.

<head> … </head> — всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.

<body> … </body> — этот тег, внутри которого находится отображаемая область страницы.

Пример html страницы

Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Про мышей</title>
</head>
<body>      Тише, мыши, кот на крыше,<br>
а котята ещё выше.<br>
Кот пошёл за молоком,<br>
а котята кувырком.<br>
Кот пришёл без молока,<br>
 а котята ха-ха-ха.    </body>
</html>

Относительно предыдущего примера в новом появилось несколько изменений: во второй строке стоит <html lang=»ru»>. У этого тега появился атрибут lang=»ru». Обратите внимание, что атрибут ставится внутри скобок тега < >. Как можно догадаться из названия, он указывает на то, что страница использует русский язык. Современные браузеры практически все могут безошибочно определить язык, поэтому в этом атрибуте нет особой необходимости, но привели его в качестве примера атрибута, которым может обладать тег.

Второе изменение касается содержания тега <head> … </head>

. Здесь в первой строчке появилось указание на кодировку текста <meta charset="utf-8">. Тег «meta» называется метатегом.

Если сохранить html файл с одной кодировкой, а в «meta» написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.

В блоке <head> … </head> также появилась строчка <title>Про мышей</title>. Этот тег указывает, какой заголовок будет у страницы браузера (у вкладки).

Внутри тега <body> … </body> появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег <br>, который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги

<br>, то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег <br> не имеет закрывающей пары по аналогии с <body> … </body> или <head> … </head>.

Ради практики создайте файл на своём компьютере с любым названием и расширением «.html». К примеру, «page.html». Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.

Комментарии в HTML коде

Существует способ оставлять комментарии в HTML коде. Они могут быть полезными для разработчика. К примеру, комментарии о том, что необходимо доделать на сайте. Эти комментарии не видны обычным пользователям на странице браузера, но видны в HTML коде. Задать комментарий можно через такую конструкцию: <!— текст_комментария —>. Пример комментариев:

<!DOCTYPE html>
<html>
<head>
<!-- Комментарий в разделе head -->
</head>
<!-- Комментарий между блоками head и body-->
<body>
<!-- Комментарий в теле страницы -->
</body>
</html>

Комментарий может находиться в любой части сайта.

Комментировать можно всё, включая теги. Можно скрывать целые части страниц — ограничений нет.

Структура html документа — разбор страницы с примерами

Вы узнаете какая должна присутствовать минимальная структура html документа. Подробно и с примерами разберем каждый необходимый ее элемент. Также поговорим о том, как правильно создавать файлы и страницы сайта.

Структура HTML документа

Давайте разберем структуру html документа чтобы понимать, как все работает. Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной).

Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены в примере ниже.

<!DOCTYPE html>
<html>
    <head>
        <title>Профессиональное создание сайта в интернете с примерами</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Как создать сайт в интернете</h2>
        <p>Здесь размещается содержание документа, которое видно всем пользователям.</p>
    </body>
</html>

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

Визуальный пример html страницы

Тег DOCTYPE

Тег DOCTYPE всегда идет в самом начале веб-страницы. Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.

В последней версии 5 он имеет такой вид:

<!DOCTYPE html>

Рекомендую его таким и использовать. С помощью данного элемента браузер дальше интерпретирует то, что мы ему напишем. То есть все теги в стандарте html 5.

Тег HTML

Тег html является контейнером, который заключает в себя все содержимое веб-страницы. Открывающие и закрывающие элементы в документе не обязательны. Однако хороший стиль требует их использования.

Как правило, открывающий тег html идет вторым после определения документа при помощи doctype. Закрывающий всегда идет на странице последним.

Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается. Поэтому все остальные элементы (кроме doctype) должны быть вложены внутри этого контейнера.

Тег head

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

Содержимое head не отображается напрямую на веб-странице, кроме тега title. Он отвечает за заголовок страницы.

В общем, в этом элементе хранится вся техническая информация о странице. Например, тип кодировки html страницы. Он будет говорить браузеру, как ему лучше декодировать документ. Также сюда мы можем подключать css стили и различные скрипты.

Тег title

У head есть один обязательный компонент. Это тег title. Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.

Отнеситесь к этому серьезно!

В данном элементе рекомендую использовать название не более 60 символов с пробелами. Это нужно чтобы оно не обрезалось в поисковой выдаче. И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

 <head>
    <title>Профессиональное создание сайта в интернете с примерами</title>
</head>

Конечно же, при этом нужно вставлять ключевые слова и делать свое название более привлекательным. Иначе вы просто рискуете потерять трафик с поиска.

Тег meta

Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.

Таким образом, с помощью параметров и атрибутов, тег может хранить важную информацию о вашей странице.

Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.

<head>
    <title>Профессиональное создание сайта в интернете с примерами</title>
    <meta charset="utf-8">
</head>

Обратите внимание, как указывается параметр. Его вставляем внутри тега и перед правой закрывающей скобкой. Далее ставим знак равно и в кавычках указываем кодировку документа.

Обязательно ее указывайте в своих документах. Иначе на вашем сайте вместо текста появятся некрасивые иероглифы (кракозябры).

Тег body

Чуть ниже идет тег body. Это основное тело документа. Внутри него находится тот контент, который виден пользователю. Это может быть текст, картинки, ссылки, видео и так далее.

Обратите внимание, что body всегда идет ниже тега head. То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!

Внутри body обязательно должен присутствовать тег h2. Это заголовок материала. То есть, как будет называться ваша статья. Рекомендую название делать не более 55 символов с пробелами.

Далее чуть ниже идут элементы текста. Это обязательно будет абзац (тег p), картинки, какие-то выделения и так далее.

Синтаксис html

Немного стоит упомянуть и про синтаксис html. Сразу старайтесь располагать теги в таком удобном виде, как на примере выше. Конечно же, можно расположить их и в хаотичном порядке.

<!DOCTYPE html>
<html><head>
<title>Профессиональное создание сайта в интернете с примерами</title><meta charset="utf-8">
</head><body><p>Здесь размещается содержание документа, которое видно всем пользователям.</p></body>
</html>

Браузеру будет все равно.

Он по-любому отобразит страницу правильно. Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.

Отдельные теги всегда располагайте в разных строчках. Причем соблюдайте правило вложенности. Все вложенные теги делайте отступом в одну табуляцию от родительского элемента.

<!DOCTYPE html>
<html>
    <head>
        <title>Название документа</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Название материала</h2>
        <p>Основной текст</p>
    </body>
</html>

То есть тег head должен идти отступом в одну табуляцию относительно тега html. Body идет на уровне с head поскольку он тоже вложен в контейнер html.

В общем, для быстрой и удобной работы с исходным кодом обязательно соблюдайте отступы по уровню вложенности элементов.

Исключение лишь могут составлять head и body. Они используются всего лишь один раз на странице. Поэтому чтобы не уходить далеко вправо при большой вложенности, эти элементы можно делать без отступов.

<!DOCTYPE html>
<html>
<head>
    <title>Название документа</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Основной текст</p>
</body>
</html>

При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.

Как вы знаете, теги можно вкладывать друг в друга. Например, текст и картинка находятся в разных тегах. Однако при этом они имеют общий родительский элемент.

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

Важно четко соблюдать порядок!

Если в какой-то тег вкладывается другой, то сначала идет открывающая часть одного тега. Затем открывающая часть другого и так далее. Только потом их нужно закрывать. Но делать это нужно уже в обратном порядке. То есть сначала закрываем второй тег и только в конце доходим до первого.

Правильный пример:

<body>
    <p>Здесь размещается содержание документа, которое видно всем пользователям.</p>
</body>

Неправильный пример:

<body>
    <p>Здесь размещается содержание документа, которое видно всем пользователям.
</body>
    </p>

Кроме того, в один тег могут быть вложены несколько элементов. Но принцип тут тот же самый. Сначала мы открываем его. Затем вкладываем туда несколько тегов и потом закрываем.

Для наибольшей удобности дополнительно можно использовать html комментарии в коде. Например, прописать за что отвечает данный кусок кода. Это очень полезно при разработке.

Сам комментарий может быть, как однострочным, так и многострочным.

<!DOCTYPE html><!--Указываем тип документа-->
<html>
<head>
    <title>Название документа</title>
    <meta charset="utf-8"><!--Кодировка-->
</head>
<body>
    <!--Главное содержание страницы для пользователей-->
    <p>Основной текст</p>
</body>
</html>

Прописывается он между конструкциями <!— —>.

Как создать файл html

Возможно, некоторые из вас не знают, как создать файл html. Для этой задачи есть много специальных программ:

Brackets
Блокнот
Notepad++
Sublime Text
Atom и другие

Если у вас Windows, то Блокнот будет уже доступен по умолчанию. Но им не удобно пользоваться. Рекомендую для начала использовать бесплатный редактор html страниц Notepad++. В нем есть много возможностей для удобной работы с кодом.

Когда запустите редактор, то перед вами уже будет новый пустой файл. Пропишите в нем тот скелет html страницы (каркас), который мы выше разбирали. Он должен всегда присутствовать.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Профессиональное создание сайта в интернете с примерами</title> 
        <meta charset="utf-8"> 
    </head> 
    
    <body> 
        <h2>Как создать сайт в интернете</h2> 
        <p>Здесь размещается содержание документа, которое видно всем пользователям.</p> 
   </body> 
</html>

Текст можете изменить под себя. В общем, это будет самая простая html страница.

HTML кодировка

При создании страниц всегда прописывайте кодировку в meta теге. Это служебный тег, который вставляют в head.

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

Сейчас у нас он играет роль указателя кодировки. Здесь есть специальная запись. Она говорит браузеру о том, что данный документ создан в кодировке utf-8.

<meta charset="utf-8">

Для чего вообще нужна кодировка?

Не секрет, что во всем мире пишут и разговаривают на разных языках. Если мы создаем страницу и пишем на русском языке, то в Германии будут создавать и писать уже на немецком. В других странах уже свой язык.

Раньше при создании html страницы нужно было указывать кодировку, что мы пишем на русском языке. Немцам нужно было указывать, что они пишут на немецком и так далее.

Когда мы заходим на страницу, браузер уже понимает, на каком языке написан сайт. Также он понимает какой язык для текста используется. Соответственно, он пытается отобразить этот текстовый контент в зависимости от заданной кодировки.

К сожалению, это не всегда получалось.

Если бы мы заходили на китайские сайты, то у нас вместо их символов могли высвечиваться черные квадраты или знаки вопросов. То есть браузер просто не понимал, что это за символы.

Неправильно задана html кодировка

Как решение этой проблемы была создана универсальная кодировка utf-8.

Когда она стала уже стандартом, отпала необходимость указывать конкретную кодировку для определенного языка. Достаточно было указать универсальную utf-8 и у вас сайт отображался бы нормально во всех браузерах.

При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8. Но тут нужно обратить свое внимание еще на одну вещь.

Сохраняем html utf-8

Чтобы все работало и браузер отображал страницу, желательно сохранить сам html документ в utf-8. В этом программа Notepad ++ нам очень хорошо помогает.

Здесь есть пункт «Кодировки». Если у вас сейчас кодировка не стоит (как у меня на нижнем рисунке), то щелкните по пункту «Преобразовать в UTF-8 без BOM».

В этом случае ваш html файл будет преобразован в кодировку utf-8. Сохраните изменения.

В правом нижнем углу вы найдете надпись «Dos\Windows ANSI as UTF-8». Это значит, что документ создан в режиме utf-8 и отображение будет нормальным.

И сразу такой совет!

Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ». Сразу поставьте галочку на «UTF-8 без метки BOM». Так у вас все новые документы будут сразу создаваться в этой кодировке.

Как сохранить html страницу

Сейчас расскажу, как сохранить html страницу правильно. После того, как задали кодировку и структуру html страницы, вам нужно нажать на «сохранение». Заходим во вкладку «Файл» —> «Сохранить как…».

Имя файла может быть любое. Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как index.html.

Когда набираем адрес сайта без указания конкретной страницы, это значит, что мы запрашиваем страницу index.html. То есть, когда мы обращаемся к серверу, он развернет именно индексную страницу.

Если же мы указываем какую-то конкретную страницу, то в итоге она и будет выводиться. Но если адрес не указан, то будет возвращена индексная страница. Поэтому по умолчанию мы называем страницу index.html.

И как вы уже должны заметить, расширение файла должно быть html. То есть в типе файла выбираем «Hyper Text Markup Language» и нажимаем «Сохранить».

Как открыть html файл

Как открыть html файл чтобы посмотреть наглядное отображение страницы. Для этого используем любой браузер: Google Chrome, Opera, Edge, Mozilla Firefox, Safari и другие.

Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам язык HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.

В общем, кликаем по файлу правой кнопкой мыши.

В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера. Если они не отобразятся, то кликаем на «Выбрать другое приложение». Там уже среди списка выбираем нужную программу для чтения html страниц.

Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.

Как посмотреть html код страницы

Еще хочу вам рассказать, как можно посмотреть html код страницы прямо в браузере. Это очень полезно на практике. Например, узнать, какую структуру html кода использует тот или иной сайт.

Посмотреть код очень просто. Достаточно нажать сочетание клавиш Ctrl + U. В новой вкладке вам откроется исходный код страницы сайта.

Исходный код сайта

Еще можно в адресной строке прямо перед адресом страницы прописать:

view-source:

Но я рекомендую использовать горячие клавиши для быстрой работы.

Еще в браузерах есть встроенный инструмент веб-разработчика. Доступ к нему в меню у каждой программы будет разным. Однако клавишей F12 этот инструмент откроется в любом браузере.

Инструмент разработчика в браузере

Во вкладке «Elements» слева будет html код, а справа стили CSS. Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат. Также при редактировании могут высвечиваться подсказки. Это тоже полезно.

На этом все!

Теперь вы знаете, как создать html страницу. Для этого мы рассмотрели саму структуру документа. Также я дал вам некоторые инструменты для удобной работы с кодом. Еще были важные правила по кодировке и работе с файлами. Обязательно их соблюдайте!

Мне нравится1Не нравится

Структура HTML документа, как создать первую web страницу

Прежде чем понять, что такое структура html документа и перейти к ее разбору нам нужно выбрать программу в которой мы будем реализовывать наш план. Просто использовать NotePad++ или Блокнот не целесообразно. Лично Я использую программу Sublime Text 3, она отлично подходит для взаимодействия с кодом и упрощает жизнь во многих моментах. По желанию вы так же можете разобраться в программе Brackets от Adobe. Она тоже очень хороша, но на мой взгляд работает значительно дольше чем Sublime.

Структура HTML документа

Для того, чтобы начать разбор, мы должны создать отдельную папку в которой будет хранится наш первый html файл. Для этого открываем наш Sublime Text 3 и переходим в раздел File > New File. Вы увидите, что у Вас создался новый файл и он будет открыт в новой вкладке редактора. Теперь нажимаем сочетание клавиш CTRL+S и сохраняем наш документ в папку проекта с название index.html. Абсолютно все файлы типа html, имеют расширение html или htm. Для стартового файла, с которого начинается сайт всегда используем имя index. Это очень важно т.к. при загрузки вашего веб сайта первым делом браузер обращает внимание на этот файл. В итоге у вас выйдет готовый документ, но он пока пустой. Давайте перейдем непосредственно к созданию структуры.

Все страницы html состоят из тегов, их минимальное количество — это три тега на страницу. Они бывают:

Парные/Непарные
Закрывающиеся/Незакрывающиеся

Если мы откроем код любого сайта в интернете, мы можем заметить что они начинаются с одной и той же строки — это декларация типа документа или “доктайп”. На данный момент существует несколько версий html, и тип документа необходим, чтобы браузер смог правильно отобразить страницу и определить версию языка.

Для старых версий языка doctype выглядел так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

В новых версиях, начиная с версии HTML5 и выше определяется следующим образом:

<!doctype html>

Мы можем открыть наш файл в браузере, где мы увидим путь к нашему файлу и белый экран т.к. ничего кроме базового тега мы не прописывали.

Так давайте это исправим и напишем следующий тег <html></html>.

<!doctype html>
<html>
</html>

Этот тег относится к типу закрывающийся и в нем располагается вся информация нашего документа. Т.е все действия связанные в дальнейшем с разработкой будут происходить именно в этом теге.

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

<title></title> — тег отвечающий за название нашей страницы. Обычно в нем прописывается название вашей организации или название сайта. В нашем случае для примера мы напишем:

<!doctype html>
<html>
<head>
<title>Наш первый сайт</title>
</head>
</html>

Следующим шагом мы зададим нашему документу meta описание.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Наш первый сайт</title>
</head>
</html>

Этот тег говорит нашему браузеру, какую кодировку нужно использовать. Важно знать, что каждый тег имеет свой атрибут и его значение. Чтоб было более понятно в коде выше атрибутом является «charset», а значением «utf-8». Значение атрибута всегда заключается в кавычки. Также есть и другие виды тега «meta», такие как «keywords» «description» и др.. Но это уже тема семантической разметки.

Давайте разберем тег под названием <body></body>. Боди тег закрывающийся и содержит в себе основную информацию страницы. Т.е после того как мы прописали выше перечисленные теги, нам нужно перейти к созданию информации, которая будет отображаться на сайте и видна пользователям. Чтобы увидеть это наглядно, давайте пропишем еще несколько тегов.

<h2></h2> — тег в котором указывается заголовок страницы. Существует 6 уровней заголовков от h2-h6. Обычно используют h2 один раз на странице, h3 подзаголовок второго уровня он может использоваться несколько раз и заголовок 3-го уровня h4. Все остальные уровни заголовков используются в крайне редком случае. Поймите одно, что каждый уровень заголовка идет один за другим от h2(самый большой) и до h6(самый маленький). Нельзя использовать теги в такой последовательности h2-h3-h4-h3, важно соблюдать последовательность.

<p></p> — тег параграфа. В нем заключается код текста на нашей странице. Он является блочным и всегда начинается с новой строки. Если вы хотите сделать абзацы, тогда каждый из них заключается в этот тег. Величиной можно управлять с помощью стилей.

В результате у нас получится вот такая структура нашего документа:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Наш первый сайт</title>
</head>
<body>
<h2>Наш первый документ</h2>
<p>Наш первый текст Наш первый текст Наш первый текст</p>
</body>
</html>

Кстати советую вам изучить тему семантической верстки, в которой раскрыта тема понимания вашего сайта поисковыми системами. Очень важно, чтобы они понимали ваш код и знали, что находится в том или ином куске кода.

Подробнее об этой статье в моем видеоуроке по структуре html документа, где мы разбираем все вышеперечисленное:

Оставляйте свои комментарии ниже, нам очень важно знать ваше мнение и о чем бы вы хотели узнать в следующих наших уроках.

Структура html страницы.

Урок 4.

Теперь Вы знаете, что такое теги и сейчас самое время разобраться в структуре html страницы. На рисунке ниже изображен html код в котором нет текста, есть только три тега. Это тег &lthtml&gt, &lthead&gt и &ltbody&gt. Все эти три тега должны обязательно закрываться.

Именно эти три тега и составляют структуру html страницы. Они должны обязательно присутствовать в каждом html документе. Это железное правило.

Разберем значение каждого из этих тегов.

Тег &lthtml&gt является контейнером для всего содержимого страницы. Другими словами, весь код страницы находиться между открывающимся &lthtml&gt и закрывающимся &lt/html&gt.

В тег &lthead&gt заключается служебная информация для браузера и поисковых систем. Эта информация никак не отображается браузером на экране монитора. Исключение составляет тег &lttitle&gt &lt/title&gt. О нем мы поговорим в конце этого урока.

Тег &ltbody&gt — это основное тело нашего документа. Все, что находится между тегами &ltbody&gt и &lt/body&gt будет выводиться браузером на экран монитора.

Вся суть структуры html страницы в этом рисунке:

Тег &lttitle&gt

Тег &lttitle&gt закрывающийся, внутри него указывается название страницы. Данный тег является обязательным для каждой страницы. Он должен находиться строго между &lthead&gt и &lt/head&gt.

Давайте вернемся к странице которую мы создавали на 3-ем уроке. В коде между &lttitle&gt и &lt/title&gt написано «Мой первый сайт» это значит, что наша страница имеет название «Мой первый сайт».

Содержимое тега &lttitle&gt отображается на экране, а именно в окне браузера, обратите внимание на рисунок:

В первую очередь содержание данного тега имеет значение для поисковиков (Яндекс, Гугл и др.). Поисковые роботы считывают содержание тега &lttitle&gt для того чтобы понимать о чем ваша страница.

Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

Конспект «Структура HTML-документа» — Структура HTML-документа — HTML Academy

Каждый HTML-документ начинается с декларации типа документа или «доктайпа». Тип документа необходим, чтобы браузер мог определить версию HTML и правильно отобразить страницу.

<!DOCTYPE html>

Простейшая HTML-страница состоит как минимум из трёх тегов: <html>, <head> и <body>. Тег <head> обычно содержит заголовок, ключевые слова, описание страницы и другие служебные данные. Также внутри него подключаются внешние ресурсы, например, стили. Содержимое этого тега не отображается на странице напрямую. А в теге <body> хранится содержание страницы, которое отображается в окне браузера.

Для подключения стилей к странице существует тег <link>. Для этого у него есть атрибут href в котором задаётся адрес стилевого файла, а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.

<head>
  <link href="адрес_файла_стилей.css" rel="stylesheet">
</head>

Ещё один элемент, который располагается в <head> — это тег <title>. В нём задаётся заголовок страницы, который отображается во вкладках браузера. По заголовку должно быть понятно, о чём эта страница, даже когда она не открыта в браузере, а отображается в результатах поиска или в браузерных закладках.

<head>
  <title>Тренажёры — HTML Academy</title>
</head>

Ещё один важный тег, располагающийся внутри <head> это тег <meta>. Он одиночный, то есть не требует парный закрывающий тег в конце. С помощью <meta> можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: кодировку текста, описание контента и так далее. Для этого используются теги <meta> с разными атрибутами и их значениями.

Кодировка текста HTML-страницы указывается с помощью атрибута charset:

<meta charset="название кодировки">

Самая распространённая современная кодировка — utf-8.

Перечень ключевых слов задаётся тегом <meta>, у которого атрибут name имеет значение keywords. Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:

<meta name="keywords" content="важные, ключевые, слова">

Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description:

<meta name="description" content="краткое описание">

Внутри <body> находятся те теги, которые отображаются на странице. Например, тег <main> выделяет основное содержание страницы, которое не повторяется на других страницах. И обычно на странице используется один <main>.

Тег <header> содержит вводную часть страницы, которую чаще называют «шапкой», а тег <footer> описывает заключительную часть страницы, или «подвал». Существует тег <section>, который обозначает крупный смысловой (или «логический») раздел.

Тег <article>, обозначает цельный, законченный и самостоятельный фрагмент информации.

Для создания логического раздела с основной навигацией предназначен тег <nav> (сокращение от английского «navigation»). Обычно в <nav> включают ссылки на другие страницы или навигацию по текущей странице.

Тег <aside> включает в себя дополнительное содержание, не связанное напрямую с основным. Такие блоки ещё часто называют «сайдбарами» или боковыми панелями.

Для создания основной структуры текста используют заголовки. В HTML существует целое семейство заголовочных тегов: от <h2> до <h6>. Тег <h2> обозначает самый важный заголовок (заголовок верхнего уровня), а тег <h6> обозначает подзаголовок самого нижнего уровня.

<h2>Спецификация HTML</h2>
<h3>Раздел 1 Введение</h3>
<h4>Раздел 1.1 Происхождение языка</h4>

Основную структуру текста создают с помощью заголовков, а более мелкую выстраивают с помощью параграфов (или абзацев). Для разметки параграфов предназначен тег <p>. По умолчанию абзацы начинаются с новой строки и отделяются от остального контента отступами сверху и снизу.

Продолжить

Структура html файла.

В первую очередь нам потребуется создать файл с расширением «htm» или «html» и открыть его для редактирования в текстовом редакторе

Файл начинается с тега <html> и заканчивается тегом </html>. Внутри тегов <html></html> обязательно создаются два раздела.

Первый раздел заголовка — начинается с тега <head> и заканчивается тегом </head>. Между этими тегами размещается техническая информация, сообщающая браузеру о настройках страницы, либо содержащая определенные данные. Первый раздел заголовка служит только для формирования общей структуры документа. Он заключает в себе гипертекст, который определяет собственно web-странцу. Это та часть документа, которую разрабатывает автор страницы и которая отображается браузером.

Для примера, можно поместить сюда контейнер, позволяющий поместить текст для отображения в заголовке окна браузера.

Второй раздел — собственно тело HTML-страницы, он начинается с тега <body> и заканчивается тегом </body> — между этими тегами размещается текст, который будет выводиться на экран, а также теги, управляющие разметкой этого текста. Внутри этого раздела размещаются элементы, предназначенные для дизайна Web- страницы. Внутри стартового тега элемента <body> Можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.

Если сравнить исходные тексты различных web-страниц, то можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information progressing. Text and Office systems. Standard Generalized Markup Language (SGML)».

Заголовок файла — раздел <head></head>

Заголовок HTML файла находится внутри тегов <head></head>, расположенных перед тегом <body>. В заголовке находятся теги, сообщающие браузеру информацию о файле, о подключаемых модулях, а также данные о применяемых стилях и коды исполняемых программ. Разберем некоторые теги заголовка.

Тег <meta>. Этот тег служит для передачи служебной информации браузеру (о применяемой кодировке). Сообщать браузеру информацию о кодировке необходимо, чтобы текст на странице отображался правильно независимо от настроек браузера.

Тег <title>. Этот тег выводит название страницы в заголовок окна. Он важен как для оформления, так и для индексации станицы, поскольку поисковые машины используют содержащуюся в этом теге информацию. Закрывающий тег для этого элемента обязателен. Пример: <title>HTML страничка</title>.

Тег <style>. Внутри пары <style></style> определяются стили, применяемые для оформления страницы. Стили по праву можно назвать краеугольным камнем web-дизайна, именно они отвечают за то, как будет выглядеть информация на станице, как и где будут располагаться элементы и как в целом будет вести себя станица. Для описания стилей используется специальный синтаксис, называемый CSS (каскадные таблицы стилей). В данный момент большинство браузеров используют CSS 2, в ближайшем будущем, вероятно, будет использоваться CSS 3, что значительно расширит возможности применения стилей.

Тег <script>. Пара <script></script> используется для размещения исполняемого кода на языке JavaScript или VBScript внутри HTML-страницы.

Тег <link>. Тег <link> используется без закрывающего тега и позволяет подключать к HTML-файлу внешние файлы. Этот тег удобен для подключения внешних CSS-таблиц, или программ наJavaScript или VBScript. Например, если в нескольких страницах применяются одинаковые стили — не имеет смысла в каждом файле создавать свою CSS-таблицу. Эту таблицу можно создать в отдельном файле, а из HTML-файлов подключать ее с помощью тега <link>. При этом изменения стиля в таком файле, автоматически будут влиять на отображение всех страниц, подключенных к нему, что делает управление сайтом более универсальным.

Помимо этого заголовок может содержать элементы <meta>…</meta>. Открывающий тег <meta> включает пары имя=значение, описывающие свойства документа, например, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

Структура HTML документа: тип HTML документа, заголовок HTML документа, тело HTML документа, границы HTML документа

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой продолжим раздел HTML. Эта запись поможет разобраться вам со структурой HTML документа. На самом деле, структура HTML документа очень простая: границы документа, заголовок, тело и декларация. О каждом элементе структуры документа и его назначении вы можете узнать из этой публикации.

Структура HTML документа: тип HTMLдокумента, заголовок HTML документа, тело HTML документа, границы HTML документа

Кроме того, что мы рассмотрим структуру HTML документа, мы поговорим о том, как браузер интерпретирует HTML документ и проведем параллель между HTML и протоколом HTTP, ведь обе эти технологии были разработаны в ЦЕРНе одним и тем же человеком для того, чтобы сделать общение по сети более доступным и простым специально неподготовленным пользователям. Так же любой начинающий веб-разработчик или веб-мастер должен знать и понимать, как работают эти две технологии: HTML и HTTP.

Структура HTML документа. Особенности работы браузера с HTML

Содержание статьи:

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

Прежде чем перейти к рассмотрению структуры HTML документа, давайте откроем файл в папке Lesson 1 (этот файл мы создали, когда знакомились с HTML) в браузере и воспользуемся консолью разработчика, я буду использовать для этого Google Chrome, вы можете использовать любой другой браузер.

Открыв index.htmlв браузере, нажмите F12, либо нажмите правой кнопкой мыши в области просмотра и из контекстного меню выберите пункт «Просмотреть код».

Смотрим код сформированной HTML страницы в браузере

Снизу у нас появится консоль, в которой наибольший интерес для нас в данный момент представляет вкладка Elements.

Код HTML страницы в консоли браузера

А теперь нажмите еще раз по области просмотра правой кнопкой мыши, но теперь нажмите «Просмотр код страницы».

У вас откроется новая вкладка в браузере, в которой будет отображен HTMLкод, из которого получилась данная страница, в моем случае это:

Заметили разницу? В консоли помимо текста «Hello, World!» мы видим HTML тэги, когда мы смотрим HTML код, мы этих тэгов не видим. Данный пример очень показательный по двум причинам:

Вы увидели структуру HTML документа.
Вы увидели, как браузер обрабатывает HTML код.

Все дело в том, что разработчики браузеров заботятся о своих пользователях в отличии от некоторых HTML разработчиков, поэтому браузеры будут исправлять некоторые ошибки разработчика, чтобы пользователь видел красивую и правильную структуру HTML документа. Здесь стоит заметить, что HTML тэги могут делиться как на одиночные и парные HTML тэги, так и на обязательные и необязательные HTML тэги, так же существуют еще и запрещенные HTML тэги. Обо всем этом мы обязательно поговорим.

В данном примере браузер сгенерировал структуру HTML документа за нас, но, тут можно подумать, что тэги, обозначающие структуру HTML документа необязательные, и этот будет глубоким заблуждением, просто браузер генерирует тэги структуры HTML документа в том случае, когда разработчик их не указал.

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

Вы, наверное, уже разобрались со структурой HTML документа, посмотрев код консоли. Но я предлагаю вам взглянуть на картинку ниже, на ней изображена структура HTMLдокумента.

Структура HTML документа

Сверху мы видим HTML тэг <!DOCTYPE>, этот тэг так же является частью структуры HTML документа, но браузер его не генерирует, так как по тэгам не может определить версию HTML стандарта, как раз таки для определения версии HTML документа и используется тэг <!DOCTYPE>. Обратите внимание: это не простой параметр. На основе версии определяются правила написания тэгов (синтаксис HTML) и набор тэгов, который может быть использован в документе и, если эти правила будут нарушены, то ваш код будет невалидным.

Далее зеленой линией обозначен тэг <html>, который определяет границы HTML документа, весь код HTML документа за исключением декларации должен быть внутри тэгов <html> и </html>, иначе документ будет невалидным. Для простоты понимания структуры HTML документа можно представить, что тэги <html>и </html> это своеобразный контейнер, а декларация DOCTYPE это инструкция по использованию контейнера.

Но также на рисунке мы видим, что наш контейнер <html>состоит из двух отсеков: верхний отсек – это заголовок HTML документа, в заголовке HTML документа располагается служебная информация, которая невидна пользователю за исключением названия HTML документа в тэге <title>.

Нижний отсек – это тело HTML документа, в котором идет код, который отображается браузером на экранах пользователя в виде HTML элементов. Отметим себе, что HTML элементы – это то, что пользователь видит на экране, а HTML тэги – это то, что разработчик пишет в редакторе. Структура HTML документа очень строгая и ее не стоит нарушать, конечно, любой современный браузер будет стараться корректно отобразить HTML документ, но как только вы будете делать валидацию HTML, вы будете получать ошибки.

Да и поисковые системы начинают относиться хуже к тем сайтам, у которых HTML код невалидный. Поэтому никогда не пренебрегайте правилами HTML. Давайте теперь более подробно поговорим о структуре HTML документа.

Заголовок HTML документа: место для служебной информации, которую не видят пользователи. HTML тэг <head>

Пожалуй, самым важным элементом структуры HTML документа является его заголовок. Начало заголовка HTML документа обозначается открывающим тэгом <head>, конец заголовка HTML документа обозначается закрывающим тэгом </head>.

Внутри заголовка HTML документа прописывается вся необходимая служебная информация:

В заголовке указывается кодировка HTML документа.
Так же здесь подключатся таблицы стилей.
Заголовок HTML документа используется для подключения файлов JavaScript.
В заголовке расположено описание HTML документа.
В заголовке указывается название HTML документа.
В заголовке могут быть указаны другие мета-тэги HTML, которые позволяют браузеру корректно отображать документы, а пользователям и поисковой системы получить больше информации о сайте.

Для нас сейчас важно сделать вывод о том, что заголовок HTML документа – важный элемент его структуры, который используется для размещения служебной информации, с некоторыми особенностями мы познакомимся в других записях.

Хочу обратить ваше внимание на то, что заголовок HTML документа и HTML заголовок – разные вещи, по крайней мере в моем понимание. HTML заголовок – это тэги <h2>, <h3>, <h4>и так до <h6>, эти тэги делят документ на разделы.

Тело HTML документа: видимая часть HTML страницы. HTML тэг <body>

В структуре HTML документа есть тело. Браузер обычно отображает содержимое тела HTML документа в области просмотра. Другими словами: тело HTML документа отображается пользователю и он даже может взаимодействовать с HTML элементами при помощи браузера, например, вводить данные в HTML формы.

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

Открывающий HTML тэг <body> обозначает начало тела HTML документа, закрывающий тэг </body>обозначает его окончание. Вне тела не должно быть HTML тэгов, которые бы отображались пользователю.

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

Границы HTML документа. HTML тэг <html>

Если не быть таким уж формалистом, то HTML можно считать подмножеством XML. В XML действует незыблемое правило: один документ – один тэг. В XML так же, как и в HTML есть декларация. Как понимать это правило: один документ – один тэг. Ведь на самом деле в XML документе тэгов много? Понимать это правило нужно следующим образом: тэг один, но в него может быть вложено сколь угодно много тэгов. Этот внешний тэг называют корневым или корнем. Корень как раз-таки и является границей XML. В HTML границей документа является тэг <html>.

Так и в HTML: весь HTML документ представляет собой один тэг <html>, внутри которого должно быть обязательно два вложенных тэга: <head>и <body>. За пределами границы HTML документа, кроме декларации, ничего быть не должно, на то это и граница.

Важной особенностью структуры HTML документа является то, что за пределами <html>…</html>не должно быть других тэгов, а внутри <html> могут быть только тэги <head>и <body>. А вот внутри тэгов <head>и <body>может быть сколь угодно много тэгов, правда внутри <head>служебных, а внутри <body>тех тэгов, которые видны пользователю.

Повторюсь, что структура HTML документа строгая и порядок написания тэгов должен быть так, как на рисунке выше.

Вывод: тэг <html> определяет границу HTML документа, за пределами которой не должно быть других тэгов, кроме декларации. Внутри границы HTML документа могут располагаться только тэги <head>и <body>в том порядке, как они написаны, а внутри тэгов <head> и <body> можно писать сколь угодно много тэгов.

Тип HTML документа: как браузер узнает о версии HTML в документе. HTML тэг DOCTYPE

Браузер интерпретирует HTML документа. Другими словами: браузер проводит его анализ и в соответствии с этим анализом он решает, как отображать HTML документ пользователю. На данный момент используют два стандарта HTML: 4.01 и 5 (есть еще XHTML, но на это у нас будет отдельная рубрика).

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

Для того чтобы браузер понимал с какой версией HTML он работает, в структуре HTML документа используется декларация, для объявления декларации используется HTML тэг <!DOCTYPE>, мы подробно поговорим про декларацию и ее роль в структуре HTML документа в отдельной записи, сейчас важно понимать то, что она нужна для того, чтобы браузер понял, как интерпретировать код HTML.

В принципе, мы рассмотрели структуру HTML документа и довольноподробно поговорили о каждом элементе структуры и его назначении в HTML, но давайте все-таки напишем код.

Пример структуры HTML документа

Без примера структуры HTML документа публикация была бы не полной. Поэтому откройте папку HTML, которую мы создали в прошлой записи и создайте в ней папку Lesson 2. Затем откройте любой удобный для вас редактор кода и напишите в нем следующее:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Структура HTML документа</title> </head> <body> <p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p> </body> </html>

<!DOCTYPE html>

<head>

<title>Структура HTML документа</title>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p>

</body>

</html>

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

Так выглядит HTML документ в браузере с правильно заданной структурой

Если вы откроете консоль и откроете исходный код страницы, то увидите, что структура HTML документа есть и там, и там, только в этот раз браузер не делал работу за нас. Так же на странице мы видим HTML заголовок и HTML параграф, о которых мы поговорим, когда начнем разбираться с типографией в HTML.

Так же обратите внимание на то, что на вкладке появился текст: «Структура HTML документа», это получилось благодаря тому, что внутри заголовка HTML документа мы использовали тэг <title>, который используется для того, чтобы давать имена HTML страницам. На картинке для примера я оставил вкладку, которая принадлежит странице из прошлой записи. Еще внутри заголовка есть мета-тэг с указанием кодировки документа.

Сравниваем структуру HTML документа со структурой HTTP протокола

Ни для кого не секрет, что в сети Интернет основным протоколом передачи данных является HTTP, который расшифровывается, как протокол передачи гипертекста и который был разработан одним и тем же человеком, что и HTML в ЦЕРНе.

Поэтому тут можно провести аналогию с HTTP протоколом, в котором есть HTTP сообщение, состоящее из служебной информации, которая прописывается в специальных полях HTTP заголовка и есть тело HTTP сообщения или HTTP объект, в котором передается полезная для пользователя информация. Согласитесь, что структура HTML документа очень похожа на структуру HTTP протокола.

Но если вам мало, то добавим: и HTTP запрос и HTTP ответ начинаются со статусной строки, если мы говорим про запрос, то в статусной строке указывается метод HTTP протокола, который говорит HTTP серверу о том, как выполнить запрос, а ответ сервера содержит специальный HTTP код состояния, который говорит клиенту о том, как он понял этот запрос. Это похоже на DOCTYPE?

Как браузер интерпретирует HTML документ

HTML и HTTP очень связаны между собой, если вы не знаете, то HTTP протокол синхронный, это означает, что во время HTTP соединения и клиент, и сервер обмениваются сообщениями по очереди. Сперва клиент отправляет запрос, потом сервер отправляет ответ на запрос, если клиенту нужно, он делает еще запрос, на который опять же отвечает сервер.

HTTP клиент в нашем случае – это браузер. По HTTP протоколу чаще всего передаются HTML документы. Из-за особенностей реализации HTTP протокола и структуры HTML документа браузеры реализованы так, что они читают и интерпретируют HTML код слева направо и сверху вниз: сначала браузер проверяет версию HTML, указанную в декларации, затем он видит тэг <html>, который говорит ему о том, что начался HTML документ.

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

За тэгом <head> браузер видит тэг <body>, который говорит ему о том, что началось тело документа, которое нужно показать клиенту. Проанализировав тело, браузер увидит закрывающий тэг </body> и при этом поймет, что закончилось тело.

Об окончании документа браузер понимает по закрывающему тэгу </html>

Надеюсь, что данная статья помогла вам разобраться со структурой HTML документа и с тем, как обрабатывает браузер HTML код, если есть какие-то вопросы по структуре HTML документов – задавайте их в комментариях, разберемся вместе.

Глобальная структура HTML-документа

7.1 Введение в структуру HTML документ

Документ HTML 4 состоит из трех частей:

строка, содержащая версию HTML информация,
декларативный раздел заголовка (разделенный заголовком HEAD элемент),
тело, которое содержит фактическое содержание документа. Тело может быть реализуется элементом BODY или Элемент FRAMESET .

Пробелы (пробелы, символы новой строки, табуляции и комментарии) могут появляться перед или после каждого раздела. Разделы 2 и 3 должны быть разделены кодом HTML элемент.

Вот пример простого HTML-документа:



   <ГОЛОВА>
       Мой первый HTML-документ 
   
   <ТЕЛО>
       Привет, мир!

Действительный документ HTML декларирует, какая версия HTML используется в документе.Декларация типа документа называет определение типа документа (DTD), используемое для документа (см. [ISO8879]).

HTML 4.01 определяет три DTD, поэтому авторы должны включать одно из следующих декларации типов документов в своих документах. DTD различаются по элементам они поддерживают.

HTML 4.01 Strict DTD включает все элементы и атрибуты, которые не были устарели или не отображаются в документах набора фреймов. Для документов, использующих это DTD, используйте это объявление типа документа:
```
 
```
HTML 4.01 Переходный DTD включает в себя все, что входит в строгий DTD plus устаревшие элементы и атрибуты (большинство из которых касается визуального представления). Для документов, которые используют это DTD, используйте это объявление типа документа:
```
 
```
DTD набора фреймов HTML 4.01 включает все в переходных кадрах DTD plus.Для документов, использующих это DTD, используйте это объявление типа документа:
```
 
```

URI в каждом объявлении типа документа позволяет пользовательским агентам загружать DTD и любые наборы сущностей, которые нужный. Следующие (относительные) URI относятся к DTD и наборы сущностей для HTML 4:

Связь между общедоступными идентификаторами и файлами может быть указана с помощью файл каталога в формате, рекомендованном Oasis Open Consortium (см. [OASISOPEN]).Образец файла каталога для HTML 4.01 включен в начало раздела, посвященного справочнику SGML. информация для HTML. Последние две буквы декларации обозначают язык DTD. Для HTML это всегда английский («EN»).

Примечание. Начиная с версии HTML 4.01 от 24 декабря, Рабочая группа HTML придерживается следующей политики:

Любые изменения в будущих HTML 4 DTD не сделают недействительными документы, которые соответствуют DTD данной спецификации. Рабочая группа HTML оставляет за собой право исправлять известные ошибки.
Программное обеспечение, соответствующее DTD данной спецификации, может игнорировать особенности будущих HTML 4 DTD, которые он не распознает.

Это означает, что в объявлении типа документа авторы могут безопасно использовать системный идентификатор, относящийся к последней версии HTML 4 DTD. Авторы может также выбрать использование системного идентификатора, который относится к конкретному (датированному) версия HTML 4 DTD, когда требуется проверка этого конкретного DTD.W3C приложит все усилия, чтобы архивные документы были доступны на неопределенный срок по адресу их первоначальный адрес в исходном виде.

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

версия = cdata [CN]: Устарело. г. значение этого атрибута указывает, какая версия HTML DTD управляет текущей документ. Этот атрибут устарел, поскольку он избыточен с информацией о версии, предоставленной типом документа. декларация.

Атрибуты, определенные в другом месте

После объявления типа документа остальная часть HTML-документа содержится в элементе HTML . Таким образом, типичный HTML-документ имеет это состав:



  ... Сюда идет голова, тело и т.д. ...

7.4 Заголовок документа

7.4.1 Модель

HEAD элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

профиль = uri [CT]: Этот атрибут определяет расположение одного или нескольких профилей метаданных, разделены пробелом.Для будущих расширений пользовательские агенты должны учитывать значение должно быть списком, хотя эта спецификация рассматривает только первый URI должен быть значимым. Профили обсуждаются ниже в раздел по метаданным.

Атрибуты, определенные в другом месте

Элемент HEAD содержит информацию о текущем документе, например в качестве названия, ключевых слов, которые могут быть полезны для поисковых систем, и других данных это не считается содержанием документа. Пользовательские агенты обычно не отображают элементы, которые появляются в HEAD как содержимое.Однако они могут сделать Информация в HEAD доступна пользователям через другие механизмы.

7.4.2 Модель

TITLE элемент


 TITLE  - - (#PCDATA) - (% head.misc;) - заголовок документа ->

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

Каждый HTML-документ должен иметь НАЗВАНИЕ элемент в разделе HEAD .

Авторы должны использовать элемент TITLE для идентификации содержимого документ. Поскольку пользователи часто обращаются к документам вне контекста, авторы должны предоставлять заголовки с богатым контекстом. Таким образом, вместо названия, такого как «Введение», которое не дает много контекстной справки, авторы должен содержать заголовок, например «Введение в средневековое пчеловодство» вместо.

По причинам доступности пользовательские агенты всегда должны делать содержимое Элемент TITLE доступен пользователям (включая TITLE элементы, встречающиеся в кадрах).Механизм этого зависит от пользователя. агент (например, в качестве подписи, произносится).

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



<ГОЛОВА>
 Исследование динамики населения 
  ... другие элементы головки... 

<ТЕЛО>
  ... тело документа ...

7.4.3 Название

атрибут

Определения атрибутов

заголовок = текст [CS]: Этот атрибут предлагает справочную информацию об элементе, для которого он установлен.

В отличие от элемента TITLE , который предоставляет информацию обо всем документ и может появляться только один раз, атрибут title может аннотировать любое число элементов.Пожалуйста, обратитесь к определению элемента, чтобы убедитесь, что он поддерживает этот атрибут.

Значения атрибута title могут отображаться пользовательскими агентами в различных способов. Например, визуальные браузеры часто отображают заголовок как инструмент подсказка «(короткое сообщение, которое появляется, когда указывающее устройство останавливается над объект). Аудио пользовательские агенты могут озвучивать информацию заголовка аналогичным образом. контекст. Например, установка атрибута для ссылки позволяет пользовательским агентам (визуальный и невизуальный), чтобы рассказать пользователям о характере связанных ресурс:

 ... какой-то текст ... 
Вот фото

   я нырял с аквалангом прошлым летом

  ... еще текст ...

Атрибут title имеет дополнительную роль при использовании с LINK элемент для обозначения внешняя таблица стилей. Пожалуйста, обратитесь к разделу о ссылках и таблицах стилей для получения подробной информации.

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

7.4.4 Мета данные

Примечание. W3C Структура описания ресурсов (см. [RDF10]) стала W3C Рекомендация от февраля 1999 г. RDF позволяет авторам указывать машиночитаемые метаданные о HTML-документах и других сетевых ресурсах.

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

Например, чтобы указать автора документа, можно использовать META следующий элемент:

Элемент META определяет свойство (здесь «Автор») и назначает ценность для него (здесь «Дэйв Рэггетт»).

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

Указание метаданных

Обычно определение метаданных состоит из двух шагов:

Объявление свойства и значения этого свойства.Это можно сделать за два способы:
1. Изнутри документа через элемент META .
2. извне документа, путем ссылки на метаданные через LINK элемент (см. раздел по ссылке типы).
Ссылаясь на профиль, в котором недвижимость и ее юридические значения определены. Для обозначения профиля используйте Атрибут profile элемента HEAD .

Обратите внимание, что, поскольку профиль определен для элемента HEAD , тот же профиль применяется ко всем элементам META и LINK в заголовке документа.

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

Элемент

META

 META  - O EMPTY - общая метаинформация ->
 http-Equiv  ИМЯ # ПРЕДПОЛАГАЕТСЯ - Имя заголовка ответа HTTP -
    name  NAME #IMPLIED - имя метаинформации -
    содержимое  CDATA # ТРЕБУЕТСЯ - связанная информация -
    схема  CDATA # ПРЕДПОЛАГАЕТСЯ - выберите форму содержания -
  >

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

Для следующих атрибутов допустимые значения и их интерпретация являются профиль зависимый:

имя = имя [CS]: Этот атрибут определяет имя свойства.В этой спецификации не указаны допустимые значения для этого атрибута.
содержимое = cdata [CS]: Этот атрибут определяет значение свойства. Эта спецификация не перечислить допустимые значения для этого атрибута.
схема = cdata [CS]: Этот атрибут называет схему, которая будет использоваться для интерпретации значения свойства. (подробности см. в разделе о профилях).
http-Equiv = имя [CI]: Этот атрибут может использоваться вместо имени атрибут.HTTP-серверы используют этот атрибут для сбора информации для HTTP. заголовки ответного сообщения.

Атрибуты, определенные в другом месте

Элемент META может использоваться для идентификации свойств документа (например, автор, срок действия, список ключевых слов и т. д.) и присвоить им значения характеристики. Эта спецификация не определяет нормативный набор характеристики.

каждый Элемент META определяет пару свойство / значение. Атрибут name идентифицирует свойство, а Атрибут content определяет значение свойства.

Например, следующее объявление устанавливает значение для Author недвижимость:

Атрибут lang может использоваться с META , чтобы указать язык для значение атрибута содержимого . Это позволяет синтезаторам речи применять языковые правила произношения.

В этом примере имя автора объявлено французским:

Примечание. Элемент META — это общий механизм для указание метаданных. Однако некоторые элементы и атрибуты HTML уже обрабатывают определенные фрагменты метаданных и могут использоваться авторами вместо META для укажите эти части: элемент TITLE , элемент ADDRESS , INS и DEL элементы, атрибут title и атрибут cite .

Примечание. Когда свойство указано в META элемент принимает значение, которое является URI, некоторые авторы предпочитают указывать метаданные через LINK элемент.Таким образом, следующее объявление метаданных:

можно также записать:

Заголовки META и HTTP

Атрибут http-Equiv может использоваться вместо атрибута name и имеет особое значение, когда документы извлекаются через протокол передачи гипертекста (HTTP).HTTP серверы могут использовать имя свойства, указанное в http-Equiv для создания заголовка в стиле [RFC822] в ответ HTTP. См. Спецификацию HTTP ([RFC2616]) для подробности о допустимых заголовках HTTP.

Следующий образец декларации META :

приведет к заголовку HTTP:

Истекает: Вт, 20 августа 1996 14:25:27 GMT

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

Примечание. Некоторые пользовательские агенты поддерживают использование META для обновить текущую страницу через указанное количество секунд, с опцией заменить его другим URI. Авторы должны использовать , а не . этот метод перенаправления пользователей на разные страницы, так как это делает страницу недоступен для некоторых пользователей. Вместо этого следует выполнять автоматическую переадресацию страниц. с использованием перенаправления на стороне сервера.

META и поисковые системы

Обычно META используется для указания ключевых слов, по которым выполняется поиск движок может использовать для улучшения качества результатов поиска.Когда несколько Элементы META предоставляют зависящую от языка информацию о документ, поисковые системы могут фильтровать по атрибуту lang для отображения результатов поиска результаты с использованием языковых предпочтений пользователя. Например,

<- Для носителей английского языка в США ->

<- Для носителей британского английского ->

<- Для носителей французского ->

Эффективность поисковых систем также можно повысить с помощью LINK элемент для указания ссылок на переводы документа на другие языки, ссылки на версии документа на других носителях (например,г., PDF), а когда документ является частью коллекции, ссылки на соответствующую отправную точку для просмотр коллекции.

Дополнительная помощь представлена в разделе, помогающем поисковым системам индексировать ваш Интернет. сайт.

META и PICS Платформа для выбора интернет-контента (PICS, указанные в [PICS]) это инфраструктура для связывания ярлыков (метаданных) с интернет-контентом. Первоначально разработан, чтобы помочь родителям и учителям контролировать, что дети могут доступ в Интернет, он также облегчает другое использование этикеток, в том числе подписание кода, конфиденциальность и управление правами интеллектуальной собственности.

В этом примере показано, как можно использовать объявление META для включения Этикетка PICS 1.1:

<ГОЛОВА>
 
   <em> ... название документа ... </em>

META и информация по умолчанию

Элемент META может использоваться для указания информации по умолчанию для документ в следующих случаях:

В следующем примере указывается кодировка символов для документа как ISO-8859-5

Профили метаданных

Модель Атрибут profile заголовка HEAD определяет расположение профиля метаданных.Стоимость Атрибут профиля — это URI. Пользовательские агенты могут использовать этот URI в двух способы:

Как глобально уникальное имя. Пользовательские агенты могут распознавать имя (без фактического получения профиля) и выполнить некоторые действия на основе известные соглашения для этого профиля. Например, поисковые системы могут предоставить интерфейс для поиска по каталогам HTML-документов, где эти все документы используют один и тот же профиль для представления записей каталога.
По ссылке.Пользовательские агенты могут разыменовать URI и выполнить некоторые действия на основе фактических определений в профиле (например, разрешить использование профиля в текущем HTML-документе). Эта спецификация не определить форматы для профилей.

Этот пример относится к гипотетическому профилю, который определяет полезные свойства. для индексации документов. Свойства, определенные этим профилем, включая «автор», «авторское право», «ключевые слова» и «дата» — имеют свои значения, установленные последующие Декларации META .

 
   Как заполнять титульные листы меморандума

В процессе написания данной спецификации обычной практикой является использование форматы даты, описанные в [RFC2616], раздел 3.3. Как эти форматы относительно сложно обрабатывать, мы рекомендуем авторам использовать Формат даты [ISO8601]. Для получения дополнительной информации см. Разделы о INS и DEL элементы.

Атрибут scheme позволяет авторам предоставлять пользовательским агентам больше контекст для правильной интерпретации метаданных. Иногда такие дополнительная информация может иметь решающее значение, например, когда метаданные могут быть указаны в разные форматы. Например, автор может указать дату в (неоднозначный) формат «10-9-97»; означает ли это 9 октября 1997 г. или 10 сентября 1997? Модель Значение атрибута scheme «Месяц-День-Год» устраняет неоднозначность этой даты значение.

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

Например, следующие Схема Объявление может помочь пользовательскому агенту определить, что значением свойства «идентификатор» является код ISBN номер:

Значения атрибута схемы зависят от свойства имя и связанный профиль .

Примечание. Одним из примеров профиля является Dublin Core (см. [DCORE]). Этот профиль определяет набор рекомендуемых свойств для электронные библиографические описания и предназначены для продвижения совместимость разрозненных моделей описания.

7,5 Тело документа

7.5.1 Модель

КУЗОВ элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

фон = uri [CT]: Устарело. г. значением этого атрибута является URI, который обозначает ресурс изображения. Изображение как правило, мозаика фона (для визуальных браузеров).
текст = цвет [CI]: Устарело. Это атрибут устанавливает цвет переднего плана для текста (для визуальных браузеров).
ссылка = цвет [CI]: Устарело. Это атрибут устанавливает цвет текста, помечающего непосещенные гипертекстовые ссылки (для визуальных браузеры).
vlink = цвет [CI]: Устарело. Это атрибут устанавливает цвет текста, обозначающего посещенные гипертекстовые ссылки (для визуальных браузеры).
alink = цвет [CI]: Устарело. Это атрибут устанавливает цвет текста, обозначающего гипертекстовые ссылки, при выборе пользователь (для визуальных браузеров).

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (язык информация), реж (текст направление)
title (заголовок элемента)
стиль (рядный информация о стиле)
bgcolor (цвет фона)
onload , onunload (внутренние события)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Тело документа содержит содержимое документа.Содержание может быть представлен пользовательским агентом различными способами. Например, для визуального браузеры, вы можете думать о теле как о холсте, на котором отображается контент: текст, изображения, цвета, графика и т. д. Для звуковых агентов пользователя одно и то же содержимое можно говорить. Поскольку таблицы стилей теперь предпочтительный способ указать представление документа, презентационный атрибуты BODY были устарело.

УСТАРЕВШИЙ ПРИМЕР:
Следующий фрагмент HTML иллюстрирует использование устаревших атрибутов.Он устанавливает фон цвет холста — белый, цвет текста переднего плана — черный, а цвет гиперссылок на красный изначально, фуксия при активации и бордовый один раз посетил.



<ГОЛОВА>
  Исследование динамики населения 


   ... тело документа ...

Использование таблиц стилей, тот же эффект может быть выполнено следующим образом:



<ГОЛОВА>
  Исследование динамики населения 
 <СТИЛЬ type = "текст / css">
  ТЕЛО {фон: белый; черный цвет}
  A: ссылка {цвет: красный}
  A: посетил {color: maroon}
  A: активный {цвет: фуксия}
 

<ТЕЛО>
   ... тело документа ...

Использование внешних (связанных) таблиц стилей дает вам возможность изменять презентация без изменения исходного HTML-документа:



<ГОЛОВА>
  Исследование динамики населения 
 

<ТЕЛО>
   ... тело документа ...

7.5.2 Идентификаторы элементов:

id и класс атрибуты

Определения атрибутов

id = имя [CS]: Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документ.
класс = cdata-list [CS]: Этот атрибут назначает элементу имя класса или набор имен классов.Любому количеству элементов может быть присвоено одно и то же имя или имена класса. Несколько Имена классов должны быть разделены пробелами.

Модель Атрибут id присваивает уникальный идентификатор элемента (который может быть проверен парсером SGML). Например, следующие абзацы отличаются своими значениями id :

Это абзац с уникальным названием.

Это также абзац с уникальным названием.

Атрибут id выполняет несколько ролей в HTML:

Как селектор таблиц стилей.
В качестве целевого якоря для гипертекста ссылки.
Как средство ссылки на конкретный элемент из сценария.
Как имя объявленного элемента OBJECT .
Для универсальной обработки пользовательскими агентами (например, для идентификации полей при извлечении данных из HTML-страниц в базу данных, перевод HTML документы в другие форматы и т. д.).

атрибут class , с другой стороны, назначает одно или несколько имен классов элементу; можно сказать, что элемент принадлежит к этим классам.Имя класса может быть общим для нескольких экземпляров элемента. класс атрибут имеет несколько ролей в HTML:

В качестве селектора таблицы стилей (когда автор хочет присвоить стилевую информацию набору элементов).
Для общей обработки пользовательскими агентами.

В следующем примере SPAN элемент используется в сочетании с атрибутами id и class для разметки документировать сообщения. Сообщения появляются как на английском, так и на французском языках.

Переменная объявлена дважды

Необъявленная переменная

Неверный синтаксис для имени переменной

Переменная d & eacute; Clear & eacute; e deux fois

Переменная ind & eacute; finie

Ошибка синтаксиса для переменной

Следующие правила стиля CSS предписывают визуальным пользовательским агентам отображать информационные сообщения зеленого цвета, предупреждающие сообщения желтого цвета и сообщения об ошибках красным:

ОХВАТЫВАТЬ.информация {цвет: зеленый}
SPAN.warning {color: yellow}
SPAN.error {цвет: красный}

Обратите внимание, что французское «msg1» и английское «msg1» могут не отображаться в один и тот же документ, поскольку они имеют одно и то же значение id . Авторы могут использовать в дальнейшем из id атрибут для уточнения представления отдельных сообщений, сделать им целевые якоря и т. д.

Почти каждому элементу HTML можно присвоить идентификатор и класс. Информация.

Предположим, например, что мы пишем документ о программировании язык.Документ должен включать ряд предварительно отформатированных примеров. Мы используем Элемент PRE для форматирования примеров. Также назначаем фон цвет (зеленый) для всех экземпляров элемента PRE , принадлежащих к классу «пример».

<ГОЛОВА>
 <em> ... название документа ... </em> 
<СТИЛЬ type = "текст / css">
PRE.example {background: green}


<ТЕЛО>
  ... пример кода здесь ...

Установив атрибут id для этого примера, мы можем (1) создать гиперссылку к нему и (2) переопределить информацию о стиле класса с помощью стиля экземпляра Информация.

Примечание. г. id Атрибут использует то же пространство имен, что и имя атрибут при использовании для имен привязок. Пожалуйста обратитесь к разделу по анкерам с id для получения дополнительной информации.

7.5.3 Блочный и встроенный элементы

Некоторые элементы HTML, которые могут появляться в BODY , считаются «блочными», а другие — «встроенный» (также известный как «уровень текста»). Это различие основано на несколько понятий:

Модель содержимого: Как правило, элементы уровня блока могут содержать встроенные элементы и другие блочные элементы.Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию присуща идея, что блочные элементы создают «большие» структуры, чем встроенные элементы.
Форматирование: По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Как правило, элементы уровня блока начинаются с новых строк, встроенных элементов не. Для получения информации о пробелах, разрывах строк и форматировании блоков, пожалуйста, обратитесь к разделу по тексту.
Направленность: По техническим причинам, связанным с двунаправленным [UNICODE] текстовый алгоритм, блочные и встроенные элементы различаются тем, как они наследуют информация о направленности. Подробнее см. В разделе наследование направления текста.

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

Изменение традиционных идиом представления для уровня блока и встроенные элементы также влияют на двунаправленный текст алгоритм. См. Раздел о влияние таблиц стилей на двунаправленность для получения дополнительной информации.

7.5.4 Группирование элементов:

DIV и SPAN элементы

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (язык информация), реж (текст направление)
title (заголовок элемента)
стиль (рядный информация о стиле)
выравнивание (выравнивание)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

DIV и Элементы SPAN в сочетании с id и атрибуты класса , предлагают общий механизм для добавления структуры к документы.Эти элементы определяют содержимое как встроенное ( SPAN, ) или блочного уровня ( DIV ), но не накладывать никаких других идиом представления на содержание. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang и т. Д., Чтобы настроить HTML под свои нужды и вкусы.

Предположим, например, что мы хотим сгенерировать документ HTML на основе база данных о клиентах. Поскольку HTML не включает элементы, которые идентифицировать такие объекты, как «клиент», «номер телефона», «адрес электронной почты» и т. д., мы используем DIV и SPAN для достижения желаемого структурного и презентационного эффекты. Мы могли бы использовать элемент ТАБЛИЦА следующим образом, чтобы структурировать информация:





  Информация о клиенте: 
<ТАБЛИЦА>
  Фамилия:  Бойера 
  Имя:  Стефан 
  Тел:  (212) 555-1212 
  Электронная почта:  sb @ foo.org 




  Информация о клиенте: 
<ТАБЛИЦА>
  Фамилия:  Лафон 
  Имя:  Ив 
  Тел:  (617) 555-1212 
  Электронная почта:  [email protected]

Позже мы можем легко добавить объявления таблиц стилей для точной настройки представление этих записей в базе данных.

Другой пример использования см. В разделе, посвященном class и id атрибуты.

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

aaaaaaaa

bbbbbbbbb

ccccc

, который обычно отображается как:

ааааааааа
bbbbbbbbb
ccccc

ccccc

7.5.5 Заголовки: элементы

h2 , h3 , h4 , h5 , H5 , H6

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (язык информация), реж (текст направление)
title (заголовок элемента)
стиль (рядный информация о стиле)
выравнивание (выравнивание)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент заголовка кратко описывает тему вводимого им раздела.Заголовочная информация может использоваться пользовательскими агентами, например, для создания оглавление документа автоматически.

В HTML есть шесть уровней заголовков, из которых h2 является наиболее важным, а H6 — наиболее важным. в мере. Визуальные браузеры обычно отображают более важные заголовки в более крупном размере. шрифты, чем менее важные.

В следующем примере показано, как использовать элемент DIV для связывания заголовок с разделом документа, который следует за ним.Это позволит вам определите стиль для раздела (раскрасьте фон, установите шрифт и т. д.) с помощью таблицы стилей.


  Лесные слоны  
 В этом разделе мы обсуждаем малоизвестных лесных слонов.
  ... этот раздел продолжается ... 

  Среда обитания  
 Лесные слоны живут не на деревьях, а среди них.
  ... продолжение этого подраздела ...

Это строение может быть украшено информацией о стиле, например:

<ГОЛОВА>
<НАЗВАНИЕ> ... название документа ...  
<СТИЛЬ type = "текст / css">
DIV.section {выравнивание текста: выравнивание; font-size: 12pt}
DIV.subsection {text-indent: 2em}
h2 {стиль шрифта: курсив; цвет: зеленый}
h3 {цвет: зеленый}

Нумерованные разделы и ссылки
HTML сам по себе не вызывает номера разделов быть сформированным из заголовков. Эта возможность может быть предложена пользовательскими агентами, тем не мение. Вскоре языки таблиц стилей, такие как CSS, позволят авторам управлять генерация номеров разделов (удобно для прямых ссылок в печатных документы, как в «См. раздел 7.2 «).

Некоторые люди считают, что пропуск уровней заголовков — это плохо упражняться. Они принимают h2 h3 h2, в то время как они не принимают h2 h4 h2, поскольку уровень заголовка h3 пропускается.

7.5.6 Модель

АДРЕС элемент

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (язык информация), реж (текст направление)
title (заголовок элемента)
стиль (рядный информация о стиле)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент ADDRESS может использоваться авторами для предоставления контактной информации. для документа или основной части документа, например формы.Этот элемент часто появляется в начале или в конце документа.

Например, страница на веб-сайте W3C, связанная с HTML, может включать следующая контактная информация:

<АДРЕС>
 Дэйв Рэггетт ,
 Арно Ле Хорс ,
контактные лица для  деятельности W3C HTML  

$ Дата: 2018/03/20 02:36:52 $

Глобальная структура HTML-документа

7.1 Введение в структуру HTML документ

Документ HTML 4 состоит из трех частей:

строка, содержащая версию HTML информация,
декларативный раздел заголовка (разделенный заголовком HEAD элемент),
тело, которое содержит фактическое содержание документа. Тело может быть реализуется элементом BODY или Элемент FRAMESET .

Пробелы (пробелы, символы новой строки, табуляции и комментарии) могут появляться перед или после каждого раздела.Разделы 2 и 3 должны быть разделены кодом HTML элемент.

Вот пример простого HTML-документа:



   <ГОЛОВА>
       Мой первый HTML-документ 
   
   <ТЕЛО>
       Привет, мир!

HTML 4.01 Strict DTD включает все элементы и атрибуты, которые не были устарели или не отображаются в документах набора фреймов. Для документов, использующих это DTD, используйте это объявление типа документа:
```
 
```
HTML 4.01 Переходный DTD включает в себя все, что входит в строгий DTD plus устаревшие элементы и атрибуты (большинство из которых касается визуального представления). Для документов, которые используют это DTD, используйте это объявление типа документа:
```
 
```
DTD набора фреймов HTML 4.01 включает все в переходных кадрах DTD plus.Для документов, использующих это DTD, используйте это объявление типа документа:
```
 
```

Примечание. Начиная с версии HTML 4.01 от 24 декабря, Рабочая группа HTML придерживается следующей политики:

Любые изменения в будущих HTML 4 DTD не сделают недействительными документы, которые соответствуют DTD данной спецификации. Рабочая группа HTML оставляет за собой право исправлять известные ошибки.
Программное обеспечение, соответствующее DTD данной спецификации, может игнорировать особенности будущих HTML 4 DTD, которые он не распознает.

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

версия = cdata [CN]: Устарело. г. значение этого атрибута указывает, какая версия HTML DTD управляет текущей документ. Этот атрибут устарел, поскольку он избыточен с информацией о версии, предоставленной типом документа. декларация.

Атрибуты, определенные в другом месте



  ... Сюда идет голова, тело и т.д. ...

7.4 Заголовок документа

7.4.1 Модель

HEAD элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

профиль = uri [CT]: Этот атрибут определяет расположение одного или нескольких профилей метаданных, разделены пробелом.Для будущих расширений пользовательские агенты должны учитывать значение должно быть списком, хотя эта спецификация рассматривает только первый URI должен быть значимым. Профили обсуждаются ниже в раздел по метаданным.

Атрибуты, определенные в другом месте

7.4.2 Модель

TITLE элемент


 TITLE  - - (#PCDATA) - (% head.misc;) - заголовок документа ->

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

Каждый HTML-документ должен иметь НАЗВАНИЕ элемент в разделе HEAD .



<ГОЛОВА>
 Исследование динамики населения 
  ... другие элементы головки... 

<ТЕЛО>
  ... тело документа ...

7.4.3 Название

атрибут

Определения атрибутов

заголовок = текст [CS]: Этот атрибут предлагает справочную информацию об элементе, для которого он установлен.

 ... какой-то текст ... 
Вот фото

   я нырял с аквалангом прошлым летом

  ... еще текст ...

7.4.4 Мета данные

Например, чтобы указать автора документа, можно использовать META следующий элемент:

Элемент META определяет свойство (здесь «Автор») и назначает ценность для него (здесь «Дэйв Рэггетт»).

Указание метаданных

Обычно определение метаданных состоит из двух шагов:

Объявление свойства и значения этого свойства.Это можно сделать за два способы:
1. Изнутри документа через элемент META .
2. извне документа, путем ссылки на метаданные через LINK элемент (см. раздел по ссылке типы).
Ссылаясь на профиль, в котором недвижимость и ее юридические значения определены. Для обозначения профиля используйте Атрибут profile элемента HEAD .

Элемент

META

 META  - O EMPTY - общая метаинформация ->
 http-Equiv  ИМЯ # ПРЕДПОЛАГАЕТСЯ - Имя заголовка ответа HTTP -
    name  NAME #IMPLIED - имя метаинформации -
    содержимое  CDATA # ТРЕБУЕТСЯ - связанная информация -
    схема  CDATA # ПРЕДПОЛАГАЕТСЯ - выберите форму содержания -
  >

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

Для следующих атрибутов допустимые значения и их интерпретация являются профиль зависимый:

имя = имя [CS]: Этот атрибут определяет имя свойства.В этой спецификации не указаны допустимые значения для этого атрибута.
содержимое = cdata [CS]: Этот атрибут определяет значение свойства. Эта спецификация не перечислить допустимые значения для этого атрибута.
схема = cdata [CS]: Этот атрибут называет схему, которая будет использоваться для интерпретации значения свойства. (подробности см. в разделе о профилях).
http-Equiv = имя [CI]: Этот атрибут может использоваться вместо имени атрибут.HTTP-серверы используют этот атрибут для сбора информации для HTTP. заголовки ответного сообщения.

Атрибуты, определенные в другом месте

Например, следующее объявление устанавливает значение для Author недвижимость:

В этом примере имя автора объявлено французским:

можно также записать:

Заголовки META и HTTP

Следующий образец декларации META :

приведет к заголовку HTTP:

Истекает: Вт, 20 августа 1996 14:25:27 GMT

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

META и поисковые системы

<- Для носителей английского языка в США ->

<- Для носителей британского английского ->

<- Для носителей французского ->

В этом примере показано, как можно использовать объявление META для включения Этикетка PICS 1.1:

<ГОЛОВА>
 
   <em> ... название документа ... </em>

META и информация по умолчанию

Элемент META может использоваться для указания информации по умолчанию для документ в следующих случаях:

В следующем примере указывается кодировка символов для документа как ISO-8859-5

Профили метаданных

Как глобально уникальное имя. Пользовательские агенты могут распознавать имя (без фактического получения профиля) и выполнить некоторые действия на основе известные соглашения для этого профиля. Например, поисковые системы могут предоставить интерфейс для поиска по каталогам HTML-документов, где эти все документы используют один и тот же профиль для представления записей каталога.
По ссылке.Пользовательские агенты могут разыменовать URI и выполнить некоторые действия на основе фактических определений в профиле (например, разрешить использование профиля в текущем HTML-документе). Эта спецификация не определить форматы для профилей.

 
   Как заполнять титульные листы меморандума

Значения атрибута схемы зависят от свойства имя и связанный профиль .

7,5 Тело документа

7.5.1 Модель

КУЗОВ элемент

Начальный тег: опционально , Конечный тег: опционально

Определения атрибутов

фон = uri [CT]: Устарело. г. значением этого атрибута является URI, который обозначает ресурс изображения. Изображение как правило, мозаика фона (для визуальных браузеров).
текст = цвет [CI]: Устарело. Это атрибут устанавливает цвет переднего плана для текста (для визуальных браузеров).
ссылка = цвет [CI]: Устарело. Это атрибут устанавливает цвет текста, помечающего непосещенные гипертекстовые ссылки (для визуальных браузеры).
vlink = цвет [CI]: Устарело. Это атрибут устанавливает цвет текста, обозначающего посещенные гипертекстовые ссылки (для визуальных браузеры).
alink = цвет [CI]: Устарело. Это атрибут устанавливает цвет текста, обозначающего гипертекстовые ссылки, при выборе пользователь (для визуальных браузеров).

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (язык информация), реж (текст направление)
title (заголовок элемента)
стиль (рядный информация о стиле)
bgcolor (цвет фона)
onload , onunload (внутренние события)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)



<ГОЛОВА>
  Исследование динамики населения 


   ... тело документа ...

Использование таблиц стилей, тот же эффект может быть выполнено следующим образом:



<ГОЛОВА>
  Исследование динамики населения 
 <СТИЛЬ type = "текст / css">
  ТЕЛО {фон: белый; черный цвет}
  A: ссылка {цвет: красный}
  A: посетил {color: maroon}
  A: активный {цвет: фуксия}
 

<ТЕЛО>
   ... тело документа ...



<ГОЛОВА>
  Исследование динамики населения 
 

<ТЕЛО>
   ... тело документа ...

7.5.2 Идентификаторы элементов:

id и класс атрибуты

Определения атрибутов

id = имя [CS]: Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документ.
класс = cdata-list [CS]: Этот атрибут назначает элементу имя класса или набор имен классов.Любому количеству элементов может быть присвоено одно и то же имя или имена класса. Несколько Имена классов должны быть разделены пробелами.

Это абзац с уникальным названием.

Это также абзац с уникальным названием.

Атрибут id выполняет несколько ролей в HTML:

Как селектор таблиц стилей.
В качестве целевого якоря для гипертекста ссылки.
Как средство ссылки на конкретный элемент из сценария.
Как имя объявленного элемента OBJECT .
Для универсальной обработки пользовательскими агентами (например, для идентификации полей при извлечении данных из HTML-страниц в базу данных, перевод HTML документы в другие форматы и т. д.).

В качестве селектора таблицы стилей (когда автор хочет присвоить стилевую информацию набору элементов).
Для общей обработки пользовательскими агентами.

Переменная объявлена дважды

Необъявленная переменная

Неверный синтаксис для имени переменной

Переменная d & eacute; Clear & eacute; e deux fois

Переменная ind & eacute; finie

Ошибка синтаксиса для переменной

ОХВАТЫВАТЬ.информация {цвет: зеленый}
SPAN.warning {color: yellow}
SPAN.error {цвет: красный}

Почти каждому элементу HTML можно присвоить идентификатор и класс. Информация.

<ГОЛОВА>
 <em> ... название документа ... </em> 
<СТИЛЬ type = "текст / css">
PRE.example {background: green}


<ТЕЛО>
  ... пример кода здесь ...

7.5.3 Блочный и встроенный элементы

Модель содержимого: Как правило, элементы уровня блока могут содержать встроенные элементы и другие блочные элементы.Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию присуща идея, что блочные элементы создают «большие» структуры, чем встроенные элементы.
Форматирование: По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Как правило, элементы уровня блока начинаются с новых строк, встроенных элементов не. Для получения информации о пробелах, разрывах строк и форматировании блоков, пожалуйста, обратитесь к разделу по тексту.
Направленность: По техническим причинам, связанным с двунаправленным [UNICODE] текстовый алгоритм, блочные и встроенные элементы различаются тем, как они наследуют информация о направленности. Подробнее см. В разделе наследование направления текста.

7.5.4 Группирование элементов:

DIV и SPAN элементы

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (язык информация), реж (текст направление)
title (заголовок элемента)
стиль (рядный информация о стиле)
выравнивание (выравнивание)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)





  Информация о клиенте: 
<ТАБЛИЦА>
  Фамилия:  Бойера 
  Имя:  Стефан 
  Тел:  (212) 555-1212 
  Электронная почта:  sb @ foo.org 




  Информация о клиенте: 
<ТАБЛИЦА>
  Фамилия:  Лафон 
  Имя:  Ив 
  Тел:  (617) 555-1212 
  Электронная почта:  [email protected]

Другой пример использования см. В разделе, посвященном class и id атрибуты.

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

aaaaaaaa

bbbbbbbbb

ccccc

, который обычно отображается как:

ааааааааа
bbbbbbbbb
ccccc

ccccc

7.5.5 Заголовки: элементы

h2 , h3 , h4 , h5 , H5 , H6

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (язык информация), реж (текст направление)
title (заголовок элемента)
стиль (рядный информация о стиле)
выравнивание (выравнивание)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)


  Лесные слоны  
 В этом разделе мы обсуждаем малоизвестных лесных слонов.
  ... этот раздел продолжается ... 

  Среда обитания  
 Лесные слоны живут не на деревьях, а среди них.
  ... продолжение этого подраздела ...

Это строение может быть украшено информацией о стиле, например:

<ГОЛОВА>
<НАЗВАНИЕ> ... название документа ...  
<СТИЛЬ type = "текст / css">
DIV.section {выравнивание текста: выравнивание; font-size: 12pt}
DIV.subsection {text-indent: 2em}
h2 {стиль шрифта: курсив; цвет: зеленый}
h3 {цвет: зеленый}

7.5.6 Модель

АДРЕС элемент

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (язык информация), реж (текст направление)
title (заголовок элемента)
стиль (рядный информация о стиле)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Например, страница на веб-сайте W3C, связанная с HTML, может включать следующая контактная информация:

<АДРЕС>
 Дэйв Рэггетт ,
 Арно Ле Хорс ,
контактные лица для  деятельности W3C HTML  

$ Дата: 2018/03/20 02:36:52 $

Создайте свой первый проект HTML / CSS

Требования:

Текстовый редактор (мы рекомендуем VS Code)
Интернет-браузер

Введение

В этой статье мы расскажем, как применить навыки CSS, полученные на Codecademy, и использовать их для создания базовой веб-страницы, полностью построенной с использованием инструментов, имеющихся на вашем компьютере.Прежде чем продолжить, вы уже должны быть знакомы с основами текстовых редакторов, локальных файлов и каталогов, которые описаны в других разделах Codecademy.

Мы рекомендуем вам посмотреть это видео с пояснениями, а затем следовать приведенным ниже инструкциям.

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

Шаг 1. Создайте структуру папок для своей веб-страницы

Давайте создадим структуру папок для поддержки вашей веб-страницы.Хорошо продуманная структура папок поможет вам быстро перейти к файлам HTML или CSS, содержащим ваш код.

Сначала откройте Finder (в Mac) или проводник (в Windows). Затем создайте папку (также известную как каталог) с именем DevProject . Эта папка будет содержать все файлы для вашего проекта HTML и CSS.

Откройте папку DevProject . Внутри создайте следующие предметы:

Новый файл с именем index.html (используйте предпочитаемый вами текстовый редактор)
Новая папка под названием ресурсов

Индекс .html будет содержать HTML-код для вашей веб-страницы, в то время как папка ресурсов будет содержать все необходимые ресурсы, необходимые для файлов HTML (файлы CSS, изображения и т. д.).

Затем откройте вновь созданную папку ресурсов и . Внутри этой папки создайте следующее:

Дополнительная папка с именем css

Папка css будет содержать файлы CSS, необходимые для стилизации вашей веб-страницы.

Наконец, откройте только что созданную папку css .Внутри этой папки создайте следующее:

Новый файл с именем index.css (используйте предпочитаемый текстовый редактор)

Файл index.css будет содержать все правила стилей CSS, которые будут применены к вашей веб-странице.

Эта общая структура папок поможет поддерживать рабочий процесс при добавлении файлов или ресурсов. Вот как это должно выглядеть на высоком уровне:

Шаг 2. Добавьте контент на свою веб-страницу

Отлично! Имея структуру папок, файлы HTML и CSS в нужном месте, мы можем добавлять контент на веб-страницу.

Сначала откройте файл index.html в предпочитаемом текстовом редакторе. Затем добавьте необходимый шаблонный HTML-код:

После добавления стандартного HTML-кода вы можете также добавить следующие элементы:

Ваш собственный заголовок между тегами </code></li><li> Ваше собственное содержимое в тегах <code><body> </code>.Если вам нужно какое-то быстрое заранее написанное содержание, вы можете свободно использовать следующее и изменять по своему усмотрению:</li></ol><pre> <pre> <code> <p> <h2><span class="ez-toc-section" id="i-13"> Имя Фамилия </span></h2> <p> Я учусь программировать на Codecademy! В мои цели входят: </p> <ul> <li> Научитесь программировать </li> <li> Начать компанию </li> <li> Помогите миру </li> </ul> <p> Это один из моих любимых веб-сайтов: <a href="https://www.google.com/" target="_blank" rel="noopener"> Google </a> </p> </p> </code> </pre></pre><p> Наконец, откройте индекс <strong>.css </strong> в предпочитаемом вами текстовом редакторе. Добавьте в файл следующие предварительно записанные правила CSS (не стесняйтесь изменять по своему усмотрению):</p><pre> <pre> <code> <p> * { семейство шрифтов: Helvetica, Arial, sans-serif; } h2 { цвет: SeaGreen; } п, li { размер шрифта: 18 пикселей; } a { текстовое оформление: нет; } </p> </code> </pre></pre><p> Обязательно сохраните изменения для обоих файлов!</p><h5><span class="ez-toc-section" id="_3_HTML_CSS"> Шаг 3. Свяжите файл HTML и файл CSS </span></h5><p> Оказывается, добавленный HTML-контент не будет стилизован под правила CSS, если только не <strong> index.html </strong> и <strong> index.css </strong> связаны между собой. В разделе <code><head> </code> свяжите таблицу стилей с файлом HTML.</p><pre> <pre> <code> <p> </p> </code> </pre></pre><p> Вы можете спросить, почему для атрибута <code> href </code> установлено значение <code> ./resources/css/index.css </code>. Это связано с тем, что вы должны точно указать, где находится файл <strong> index.css </strong> в вашей папке (ах) <em> относительно </em>, где находится индекс <strong>.html </strong> жив (в противном случае два файла не будут связаны).</p><p> Если у вас возникли проблемы со связыванием HTML и CSS, обратитесь за помощью на форумы сообщества Codecademy.</p><p> Опять же, не забудьте сохранить изменения!</p><h5><span class="ez-toc-section" id="_4"> Шаг 4. Просмотрите свой проект </span></h5><p> Отличная работа — давайте взглянем на вашу веб-страницу в браузере.</p><p> Откройте предпочтительный веб-браузер. В строке меню нажмите «Файл», а затем нажмите «Открыть файл…» (или аналогичный). Перейдите к файлу <strong> index.html </strong> и нажмите «Открыть» (или аналогичный).Браузер должен загрузить вашу веб-страницу. Что ты видишь?</p><p> На этом этапе вы можете вносить изменения в свой код HTML или CSS. Имейте в виду, что для просмотра любых <em> новых </em> изменений, которые вы вносите, вам необходимо обновить страницу в браузере.</p><h5><span class="ez-toc-section" id="i-14"> Обзор </span></h5><p> Поздравляю! За это короткое время вы узнали, как взять то, что вы изучили на Codecademy, и применить это с помощью инструментов, имеющихся на вашем персональном компьютере. Вы успешно научились:</p><ol><li> Создание структуры папок для поддержки рабочего процесса и веб-страницы</li><li> Добавить содержимое HTML и стили CSS в соответствующие файлы</li><li> Свяжите файлы HTML и CSS вместе</li><li> Просмотрите свою веб-страницу в браузере (и обновите браузер, чтобы увидеть новые изменения)</li></ol><p> В целом четыре приведенных выше пункта являются хорошей отправной точкой для вашего собственного рабочего процесса разработчика.По мере того, как вы узнаете больше, вы можете изменить рабочий процесс в соответствии со своими потребностями. На этом этапе вы можете изменить содержимое веб-страницы или создать совершенно новый проект. Удачного кодирования!</p><h2><span class="ez-toc-section" id="_HTML_HTML-4"> курс HTML | Структура документа HTML </span></h2><p> Курс HTML | Структура HTML-документа</p><p> <strong> <em> Навигация по курсу </em> </strong> <br/></p><p> <b><HTML> </b> — это язык разметки, который используется браузером для управления текстом, изображениями и другим содержимым для отображения его в требуемом формате.</p><p> <strong> Теги в HTML </strong>: Теги — одна из наиболее важных частей в документе HTML. HTML использует некоторые предопределенные теги, которые сообщают браузеру о свойстве отображения содержимого, то есть о том, как отображать конкретный данный контент. Например, чтобы создать абзац, нужно использовать теги абзаца (<p></p>), а для вставки изображения необходимо использовать теги img (<img class="lazy lazy-hidden" /><noscript><img /></noscript>).</p><p> Обычно в HTML есть два типа тегов:</p><ol><li> <strong> Парные теги </strong>: Эти теги бывают парами.То есть у них есть как открывающие (<>), так и закрывающие (</>) теги.</li><li> <strong> Особые теги </strong>: закрывать эти теги не требуется.</li></ol><p> Ниже приведен пример тега (<b>) в HTML, который указывает браузеру выделить текст внутри него жирным шрифтом. <br/></p> <br/><p> <b> Структура HTML-документа </b></p><p> HTML-документ в основном разделен на две части:</p><ul><li> <strong> HEAD </strong>: содержит информацию о HTML-документе.Например, заголовок страницы, версия HTML, метаданные и т. Д.</li><li> <strong> BODY </strong>: Содержит все, что вы хотите отобразить на веб-странице.</li></ul><p> Давайте теперь посмотрим на базовую структуру HTML. Это код, который должен иметь каждую веб-страницу:</p><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p> <code> <! DOCTYPE html> </code></p><p> <code> </code></p><p> <code> <</code> <code> html </code> <code>> </code></p><p> <code> <code> <code> </code> <code>> </code></p><p> <code> </code> <code> <</code> <code> титул </code> <code>> </code></p><p> <code> </code></p><p> <code> </code> <code> </ </code> <code> заголовок </code> <code>> </code><p>04 </code> </code> </code> </code> </code> </code> </code> </code> </code> </code> </code> </code> </code> <code><p><p> <code> </code></p><p> <code> </code> <code> <</code> <code> корпус </code> <code>> </code></p><p> <code> </code></p><p> <code> </code> <code> </ </code> <code> корпус </code> <code>> </code><p>07 <code> 9000t604> </code><p>07</p>t604> </code><p>07</p>t604> </code><p>07</p>t604</table><p> Каждая веб-страница должна содержать этот код.Ниже приводится полное объяснение каждого из тегов, используемых в приведенном выше фрагменте HTML-кода:</p><p> <strong> <! DOCTYPE html>: </strong> Этот тег используется для указания версии HTML. В настоящее время это говорит о том, что это версия HTML 5.</p><p> <strong><html>: </strong> Это называется корневым элементом HTML и используется для обертывания всего кода.</p><p> <strong><head>: </strong> Тег заголовка содержит метаданные, заголовок, CSS страницы и т. Д. Все элементы HTML, которые могут использоваться внутри элемента<head>:</p><p> <strong><body>: </strong> Тег тела используется для включения всего данные, которые имеет веб-страница, от текстов до ссылок.Все содержимое, отображаемое в браузере, содержится в этом элементе.</p><p> <strong> Чтобы узнать больше о структуре HTML-документа, посетите </strong>:</p><p></p><h2><span class="ez-toc-section" id="i-15"> Файловая структура </span></h2><p> Веб-сайты состоят из файлов - файлов кода, таких как HTML и CSS, и файлов мультимедиа, таких как изображения, видео и аудио. Чтобы все работало должным образом, важно уделять особое внимание структуре папок, в которых находятся эти файлы.</p><h3><span class="ez-toc-section" id="i-16"> на этой странице </span></h3> Папка проекта Домашняя страница Подпапки Родительские папки Практическое упражнение<h3><span class="ez-toc-section" id="i-17"> Папка проекта </span></h3><p> У каждого проекта веб-сайта должна быть собственная домашняя папка.Это называется корневым каталогом <strong> </strong>. (<em> Directory </em> - это жаргонный термин для <em> папки </em>.)</p><p> Когда вы разрабатываете сайт локально (на вашем собственном компьютере), корневой каталог служит способом хранить ваши файлы вместе и правильно структурировать. Когда вы перемещаете сайт на сервер для использования в Интернете, корневой каталог становится тем более важным, потому что именно там браузер ищет файлы, когда находит IP-адрес сервера.</p><p> Сохраняя все файлы веб-сайта в общем корневом каталоге, мы делаем возможным использование относительных ссылок между страницами и файлами внутри веб-сайта.В противном случае браузеру придется искать файлы жестко, обращаясь к DNS и ища абсолютный адрес. Это помогает страницам загружаться быстрее и упрощает написание ссылок.</p><h3><span class="ez-toc-section" id="i-18"> Домашняя страница </span></h3><p> HTML-файл для домашней страницы веб-сайта <strong> всегда должен иметь имя </strong> <code> index.html </code>. Это связано с тем, что браузер, который был направлен на сервер или каталог, всегда пытается отобразить файл с этим именем, если он не был специально указан для другого файла.</p><p> Таким образом, файл <code> index.html </code> всегда следует размещать непосредственно в корневом каталоге, а не в каких-либо подпапках.</p><p> Боковое примечание: любая папка может иметь свой собственный файл <code> index.html </code>, и браузер, направленный в эту папку без указанного файла, будет отображать <code> index.html </code>. Например, если браузер был направлен на <code> https://site.com/folder </code>, он отобразит <code> https://site.com/folder/index.html </code>, если индекс <code>.html </code> файл присутствовал.</p><h3><span class="ez-toc-section" id="i-19"> Подпапки </span></h3><p> Проект веб-сайта может содержать любые подпапки / подкаталоги по желанию автора. Например, обычно используется подпапка для хранения любых изображений проекта. Но любая группа страниц или других файлов может существовать в подпапке или даже во вложенных подпапках.</p><p> Для ссылки на файл в подпапке необходимо указать путь к файлу <strong> </strong> (записанное местоположение файла), чтобы включить имя папки, за которым следует косая черта: <code> подпапка / файл.html </code>. Если имеется несколько папок, каждая из них может быть записана в одном формате: <code> подпапка / подпапка / файл.html </code>.</p><h3><span class="ez-toc-section" id="i-20"> Родительские папки </span></h3><p> Чтобы указать папку, которая является родительской <em> </em> для папки, содержащей текущий файл, запись двух точек и косой черты (<code> ../ </code>) в пути к файлу указывает на перемещение вверх по дереву файлов. Таким образом, <code> ../file.html </code> будет указывать на файл на одну папку <em> вверх </em> от файла, в котором записан путь к файлу.</p><p> Для перемещения вверх по нескольким папкам один и тот же шаблон может повторяться столько раз, сколько необходимо: <code> ../../../file.html </code> указывает на файл на три папки выше файла, в котором он записан.</p><h3><span class="ez-toc-section" id="i-21"> Практическое упражнение </span></h3><h2><span class="ez-toc-section" id="_HTML_-_UX_Art"> файловая структура HTML: обучающее путешествие в веб-разработку | Афиур Рахман Фахим | UX Art </span></h2><p> Здравствуйте, народ! Как у тебя дела с взломом? В прошлый раз мы узнали о HTML и HTML-тегах. Мы также написали немного кода.Но эти коды были совершенно случайными и неорганизованными. Однако, когда нам нужно написать код для создания настоящей веб-страницы, нам нужно следовать определенной структуре для форматирования нашего кода, а также помогать браузеру правильно отображать контент. Итак, структура HTML-файла - это то, что мы будем изучать сегодня. Давайте начнем!</p><p> Этот пост является частью серии «Полное обучающее путешествие по веб-разработке», в котором мы изучаем веб-разработку с нуля. Не забудьте присоединиться к нам там.</p><p> Итак, HTML-файл состоит из 4 основных частей.Это Декларация типа документа, HTML, Заголовок и Тело. Эти четыре части разбивают HTML-файл на разделы, которые предоставляют браузерам различную информацию для различных целей. Теперь мы обсудим каждую часть подробно.</p><p> Сначала идет объявление типа документа. Прежде чем мы начнем писать наш HTML-код, нам нужно определить, какую версию HTML мы создаем. У HTML есть много разных версий, о которых мы узнали из истории HTML. Все эти версии несколько отличаются друг от друга, несмотря на то, что у них много тегов и атрибутов с одинаковыми именами.Итак, мы должны сообщить браузеру, какую именно версию HTML мы используем, чтобы он мог правильно отображать контент.</p><p> Объявление DocType - это первое, что мы делаем в нашем HTML-файле с помощью тега <! DOCTYPE>. Это самозакрывающийся тег, поэтому нам не нужно писать отдельный закрывающий тег для этого элемента. Мы пишем тег и добавляем информацию о версии как атрибут тега. Например, если бы нам нужно было написать HTML-файл с версией 4.01, нам нужно было бы написать наш тип документа следующим образом:</p><pre> <! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN "" http://www.w3.org/TR/html4/strict.dtd "> </pre><p> Выглядит сложно, правда? Хорошая новость в том, что с момента выпуска HTML5 нам не нужно писать эти сложные строки проводных кодов. Все, что нам нужно написать, это:</p><pre> <! DOCTYPE HTML> </pre><p> Когда вы скажете "HTML" после "! DOCTYPE", он сообщит браузеру, что вы используете последнюю версию версия HTML, которая в настоящее время является HTML5. Но даже когда последняя версия HTML будет повышена до других версий, ваш файл все равно будет использовать последние определения HTML.Круто, правда? На этом мы закончили с объявлением типа doctype.</p><p> Следующая часть файловой структуры HTML - это сам тег html. Это просто обозначение начала HTML-кодов. Он отмечает начальную точку, с которой браузеры начинают отображать контент. Этот тег является корнем любого файла HTML. Все, что мы пишем в HTML-файле, помещается в этот тег. Это означает, что этот тег html является потомком каждого отдельного элемента страницы.</p><p> Мы объявляем это так:</p><pre> <html> </html> </pre><p> Все просто!</p><p> Следующей частью файловой структуры HTML является тег заголовка.Этот тег содержит метаинформацию о странице. Другими словами, в головной части HTML-файла содержится вся информация, которая не отображается непосредственно на веб-странице, но необходима для их правильного отображения.</p><p> Примером этого может быть набор символов шрифтов, которые мы используем в нашем контенте. Или заголовок нашей страницы, который обычно отображается на панели вкладок браузера. Эти вещи не отображаются в видимой части нашей веб-страницы, но все же очень необходимы. Итак, цель head - доставить в браузер всю важную информацию об остальной части страницы, в то время как на самом деле она не отображается в видимых частях веб-страниц.</p><p> Мы пишем заголовочные теги сразу после (и внутри) тегов html. Как это:</p><pre> <! DOCTYPE HTML> <html> <p> <head> </p> </head> </html> </pre><p> Вот так просто!</p><p> Тело является основной частью файловой структуры HTML. Это часть HTML-файла, содержащая весь контент, который фактически отображается на странице для зрителей. Итак, как вы, возможно, уже поняли, все, что вы видите на веб-странице; селфи ваших друзей на Facebook, это видео на Youtube или новости на BBC - все это часть этого тега тела.</p><p> Тег Body не имеет никаких правил структурирования о том, как мы организуем наш контент внутри него. Мы сбрасываем все, что хотим, чтобы наши пользователи видели внутри тела. Но HTML5 вводит множество семантических тегов, которые дают рекомендации по правильному форматированию нашего контента. Мы обсудим это в будущем.</p><p> Мы запускаем тег body после закрытия тега head, пока мы все еще находимся внутри тегов html. Итак, полная структурированная, но пустая веб-страница будет выглядеть так:</p><pre> <! DOCTYPE HTML> <html> <head> </head> <body> </body> </html> </pre><p> Итак, теперь мы почти знаем все о файловой структуре HTML.Помните ту страницу, которую мы создали в предыдущем посте, чтобы показать вам некоторые основные теги HTML? Эта страница была неструктурированной. Давайте возьмем эту страницу и организуем ее контент в соответствии со структурой, которую мы узнали сегодня. Взгляните на него и посмотрите, насколько организованным и читаемым он становится после того, как он структурирован. И, как всегда, не стесняйтесь изменять коды и смотреть, что произойдет.</p><p> Это стандартная структура, которой следует каждая веб-страница. Хотя большие и сложные страницы могут содержать намного больше тегов и информации в основных частях, которые мы обсуждали, но вплоть до скелета, вы всегда найдете эту простую структуру на любой веб-странице, существующей в сети.</p><p> Итак, готово. Теперь вы можете создать настоящую веб-страницу, используя реальную структуру, которую используют все величайшие веб-разработчики. Попробуйте создать какой-нибудь файл на своем компьютере и показать его другу. Покажите им, какую суперсилу вы приобрели.</p><p> Продолжайте взламывать файловую структуру HTML, и скоро мы подробно узнаем о некоторых основных тегах HTML. А пока, увидимся!</p><h2><span class="ez-toc-section" id="_HTML-_HTML5"> Структура HTML-документа до и после HTML5 - вот что изменилось »</span></h2> <strong> Раскрытие информации: </strong> Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше<p> Если вы хотите писать семантическую разметку - и поверьте нам, вы действительно хотите писать семантическую разметку - тогда вам необходимо правильно структурировать HTML-документы. Элементы <code> html </code>, <code> head </code> и <code> body </code> были частью спецификации HTML с середины 1990-х годов, а еще несколько лет назад они были основными элементами, используемыми для структурирования документов HTML. Однако за последние несколько лет ситуация кардинально изменилась, поскольку HTML5 добавил множество новых тегов, которые можно использовать для добавления богатого семантического значения в структуру HTML-документа.</p><h3><span class="ez-toc-section" id="_HTML-_HTML5-2"> Структура HTML-документа до HTML5 </span></h3><p> Если вы когда-либо использовали HTML, то знаете, что каждый бит HTML должен быть заключен в теги <code> html </code>. Первым должен появиться открывающий тег <code><html> </code>, а закрывающий тег <code></html> </code> должен появиться внизу документа. Все остальные биты HTML должны располагаться между этими двумя тегами.</p><p> Элемент <code> head </code> - это первый элемент, который появляется после открывающего тега <code> html </code>.В документе <code> head </code> мы помещаем такие вещи, как страница <code>, заголовок </code> и <code> мета-данные </code>, мы добавляем JavaScript на нашу страницу с тегом <code> script </code>, и мы [<code> ссылка </code>] на внешние таблицы стилей и другие ресурсы.</p><p> На большинстве веб-страниц элемент <code> head </code> является очень загруженным местом. По этой причине мы создали руководство, в котором объясняются теги, которые обычно появляются в элементе <code> head </code>, и для чего эти теги используются.</p><p> Все содержимое, которое отображается на веб-странице, вложено между открывающими и закрывающими <code> тегами body </code>.Тело - это основной контейнер содержимого, составляющего веб-страницу.</p><p> До HTML5 это было почти все для базовой структуры HTML-документа. Весь наш код был помещен между тегами <code> body </code> и стилизован с помощью CSS. Однако теперь, когда HTML5 получил широкую поддержку среди современных браузеров, пришло время реализовать новые теги HTML5, которые придадут нашим HTML-документам гораздо более значимую структуру.</p><h3><span class="ez-toc-section" id="_HTML5"> Новые семантические теги, добавленные HTML5 </span></h3><p> В этом кратком руководстве мы коснемся всех новых тегов, добавленных как часть HTML5 для определения структуры и содержимого веб-страницы.В этом руководстве мы рассмотрим следующие элементы:</p><p> Использование этих элементов не так сложно, как может показаться на первый взгляд, и большинство из них не требуют пояснений. Мы быстро рассмотрим каждый новый элемент, а затем составим шаблон HTML. Вы сможете использовать эти новые теги, чтобы добавить в разметку богатое семантическое значение.</p><h4/></h4><p> Элемент заголовка <code> </code> используется для содержания содержимого, которое появляется в верхней части каждой страницы вашего веб-сайта: логотипа, слогана, запроса поиска и, возможно, меню навигации.В большинстве случаев элемент <code> header </code> лучше всего позиционировать как прямой потомок элемента <code> body </code>, но также можно разместить его внутри основного элемента <code> </code>, если вы предпочитаете.</p><h4></h4><code><main> </code></h4><p> Используйте элемент <code> main </code> между элементами <code> header </code> и <code> footer </code>, чтобы содержать основное содержимое вашей веб-страницы. Элемент <code> main </code> не может быть потомком элемента <code> article </code>, <code> aside </code>, <code> header </code>, <code> footer </code> или <code> nav </code> element.Вместо этого он должен быть прямым потомком элемента <code> body </code>. Думайте об этом как о прямой замене <code> div </code>, который вы использовали в прошлом для завершения всего содержимого вашей страницы.</p><p> Также можно использовать более одного <code> основного элемента </code> на веб-странице. Например, если домашняя страница вашего блога включает пять ваших последних сообщений, было бы целесообразно обернуть каждое сообщение собственным <code> основным элементом </code> - или вы можете заключить каждый в теги <code> article </code>.</p><h4></h4><code><nav> </code></h4><p> Навигационные меню обычно размещаются вверху веб-страницы, на боковой панели или в нижнем колонтитуле страницы. Где бы вы ни разместили навигационное меню, оберните его тегами <code> nav </code>. Обратите внимание, что вам не нужно использовать теги <code> nav </code> для каждой ссылки, только для блоков ссылок, которые обеспечивают навигацию по всему сайту или навигацию для определенной части веб-сайта.</p><h4></h4><code><article> </code></h4><p> Если ваш веб-сайт содержит сообщения в блогах, статьи или любой другой контент, который также может появиться на другом веб-сайте в качестве синдицированного контента, заключите этот контент в сообщение <code> статьи </code>.Вы можете использовать элемент <code> article </code> практически в любом месте, кроме вложенного в элемент адреса <code> </code>, но в большинстве случаев элемент <code> article </code> будет прямым потомком основного элемента <code> </code> или элемента <code> section </code>, который является прямой потомок <code> основного элемента </code>.</p><h4></h4><code><section> </code></h4><p> Элемент <code> section </code> используется для идентификации контента, который является основным подразделом более крупного целого. Например, если вы опубликовали длинную электронную книгу в формате HTML, было бы разумно заключить каждую главу в элемент <code> section </code>.Аналогичным образом, если у вас есть боковая панель (семантически заключенная в <code> за исключением тегов </code>), которая содержит четыре раздела - рекламу, подсказку для поиска, связанные сообщения и форму подписки на новостную рассылку - можно было бы заключить каждый из этих четырех разделов в раздел <code>. </code>, поскольку письменный план содержимого боковой панели будет включать строку для каждого из четырех разделов.</p><p> Существует некоторая путаница относительно того, когда использовать <code> раздел </code>, а когда <code> div </code>. Вот хорошее практическое правило, которое поможет вам узнать, когда использовать каждый из них:</p><ul><li> Используйте <code> div </code>, если вы обертываете какой-то контент, чтобы упростить его стилизацию или упростить получение некоторого JavaScript. держись за это.</li><li> Используйте раздел <code> </code>, если вы указываете содержимое как элемент при написании структуры документа.</li></ul><h4></h4><code><aside> </code></h4><p> Если ваш веб-сайт содержит информацию, которая не имеет прямого отношения к основному содержанию страницы, было бы целесообразно заключить эту информацию в <code> помимо тегов </code>. Например, если вы пишете сообщение, которое включает некоторые технические термины, и добавляете определения для этих терминов на боковой панели, имеет смысл заключить эти определения в теги <code> помимо тегов </code>.Также часто бывает, что вся боковая панель веб-сайта блога оборачивается тегами <code> за исключением тегов </code>, чтобы было ясно, что боковая панель не является частью основного содержимого страницы.</p><h4></h4><code> <адрес> </code></h4><p> Элемент адреса <code> </code> предоставляет контактную информацию для ближайшего родительского элемента <code> article </code> или <code> основного элемента </code>, который его содержит. Используйте элемент <code> адрес </code> внутри статьи <code> </code>, чтобы указать контактную информацию автора статьи.Используйте его вне статьи <code> </code> в <code> основных элементах </code> или <code> нижнего колонтитула </code> или как прямой потомок элемента <code> body </code>, чтобы предоставить контактную информацию владельцу веб-сайта.</p><h4/></h4><p> Нижний колонтитул <code> </code> отображается в нижней части раздела документа. Обычно нижний колонтитул <code> </code> является прямым потомком элемента <code> body </code>, но его также можно использовать в основном элементе <code> </code>, разделе <code> </code> или статье <code> </code>.Чаще всего элемент <code> нижнего колонтитула </code> используется для размещения его в нижней части HTML-документа, чтобы содержать такие вещи, как уведомление об авторских правах, ссылки на связанный контент, адрес <code>, информация о владельце веб-сайта </code> и ссылки на административные элементы. например, политика конфиденциальности и условия обслуживания веб-сайта.</p><p> Вы также можете использовать элемент <code> нижнего колонтитула </code> в статье <code> </code>, чтобы предоставить метаданные об этой конкретной статье. Например, если теги <code> article </code> были использованы для обертывания сообщения на форуме, было бы целесообразно обернуть информацию об авторских правах, а также дату и время публикации сообщения в элемент </code> нижнего колонтитула <code> и поместить его в нижней части статьи <code>. </code>.</p><h3><span class="ez-toc-section" id="_HTML-9"> Шаблон HTML-документа </span></h3><p> Шаблон ниже покажет вам, как все эти элементы правильно вложены вместе. Мы приглашаем вас скопировать его и использовать в качестве стандартного шаблона для всех ваших HTML-документов.</p> <pre> <code><html> <! - Только элементы head и body должны быть прямыми потомками html элемент. Все остальные должны быть потомками головы или тела -><head> <! - Элемент head должен быть прямым потомком элемента html -> <! - Элемент head - очень загруженное место для большинства веб-сайтов, поэтому мы создали учебник, который проведет вас через различные элементы и выполненные задачи в элементе head.Вы можете найти его по следующему адресу: https://html.com/document/metadata/ -><title> Заголовок вашей веб-страницы находится здесь <заголовок> <основной> <статья> <сторона> <раздел> <адрес>

Структура html файла: Структура HTML файла

Структура HTML файла

Пример html страницы

Комментарии в HTML коде

Структура html документа — разбор страницы с примерами

Структура HTML документа

Тег DOCTYPE

Тег HTML

Тег head

Тег title

Тег meta

Тег body

Синтаксис html

Как создать файл html

HTML кодировка

Сохраняем html utf-8

Как сохранить html страницу

Как открыть html файл

Как посмотреть html код страницы

Структура HTML документа, как создать первую web страницу

Структура html страницы.

Разберем значение каждого из этих тегов.

Тег &lttitle&gt

Конспект «Структура HTML-документа» — Структура HTML-документа — HTML Academy

Структура html файла.

Структура HTML документа: тип HTML документа, заголовок HTML документа, тело HTML документа, границы HTML документа

Структура HTML документа. Особенности работы браузера с HTML

Заголовок HTML документа: место для служебной информации, которую не видят пользователи. HTML тэг <head>

Тело HTML документа: видимая часть HTML страницы. HTML тэг <body>

Границы HTML документа. HTML тэг <html>

Тип HTML документа: как браузер узнает о версии HTML в документе. HTML тэг DOCTYPE

Пример структуры HTML документа

Сравниваем структуру HTML документа со структурой HTTP протокола

Как браузер интерпретирует HTML документ

Глобальная структура HTML-документа

7.1 Введение в структуру HTML документ

7.4 Заголовок документа

7.4.1 Модель

7.4.2 Модель

7.4.3 Название

7.4.4 Мета данные

Указание метаданных

Элемент

Профили метаданных

7,5 Тело документа

7.5.1 Модель

7.5.2 Идентификаторы элементов:

7.5.3 Блочный и встроенный элементы

7.5.4 Группирование элементов:

7.5.5 Заголовки: элементы

Лесные слоны

Среда обитания

7.5.6 Модель

Глобальная структура HTML-документа

7.1 Введение в структуру HTML документ

7.4 Заголовок документа

7.4.1 Модель

7.4.2 Модель

7.4.3 Название

7.4.4 Мета данные

Указание метаданных

Элемент

Профили метаданных

7,5 Тело документа

7.5.1 Модель

7.5.2 Идентификаторы элементов:

7.5.3 Блочный и встроенный элементы

7.5.4 Группирование элементов:

7.5.5 Заголовки: элементы

Лесные слоны

Среда обитания

7.5.6 Модель

Создайте свой первый проект HTML / CSS

Введение

Шаг 1. Создайте структуру папок для своей веб-страницы

Шаг 2. Добавьте контент на свою веб-страницу

Добавить комментарий Отменить ответ