Какую структуру должен иметь документ html
Перейти к содержимому

Какую структуру должен иметь документ html

  • автор:

2. HTML – Введение в язык: теги для создания html-документа и его структура

HTML – расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.

  • Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
  • Как следует из названия, HTML – это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.

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

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

HTML-документ

В следующем примере показан HTML-документ в простейшей форме:

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

Заголовок

Здесь содержание документа.

Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:

Пример html-документа

Теги для создания HTML-документа

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

В приведенном выше примере используются следующие теги для создания HTML-документа:

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

и другие.

Этот тег представляет заголовок.
Этот тег представляет абзац.

Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).

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

Консорциум World Wide Web (W3C) рекомендует использовать строчные теги, начиная с HTML 4.

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

Структура типичного HTML-документа будет иметь следующий вид:

Тег декларации документа  Теги, связанные с заголовком документа  Теги, связанные с телом документа  

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

Декларация

Тег декларация используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML – 5, и она использует следующее объявление:

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

Оглавление

  • 1. HTML – Самоучитель для начинающих
  • 2. HTML – Введение
  • 3. HTML – Основные теги
  • 4. HTML – Элементы
  • 5. HTML – Атрибуты
  • 6. HTML – Форматирование текста
  • 7. HTML – Фразовые теги
  • 29. HTML – Теги
  • 41. Коды языков ISO

Структура html-документа, html теги

Структура HTML документа, HTML - тэги

Здравствуйте, друзья!

Приступим к изучению основ html. Сегодня мы узнаем какая структура html — документа является обязательной для любой html — странички и разберем, что такое html — теги (звучит, как [тэги]).

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

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

Давайте с помощью рисунка познакомимся с обязательной структурой документов типа «html»:

Структура просто html - страницы

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

1. Декларация документа, то есть прямое указание типа настоящего документа.

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

Говорит она о том, что тип документа — html, запомните, а еще лучше скопируйте куда-нибудь и сохраните. Декларация вставляется в КАЖДЫЙ созданный html — документ в самое его начало перед любыми последующими элементами, то есть это самый первый элемент на странице. В процессе обучения Вы можете встретить различные варианты деклараций, узнать их можно именно по первому слову «!DOCTYPE«

2. Теги, призванные начинать и заканчивать html-документ. Выглядят они так:


Весь html — документ

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

3. Теги, необходимые для размещения служебной информации о документе и его названия:

Служебная заголовочная информация

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

3.1 Теги, внутри которых размещается заголовок страницы (html — документа).

Заголовок страницы

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

Кроме того в головной части подключаются различные скрипты, файлы настроек, стили и прочее.

4. Теги, в которых размещается само тело документа:

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

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

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

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

  1. задается описание типа документа ;
  2. открывается контейнер HTML ;
  3. начинается голова документа ;
  4. задается название документа между соответствующими тегами ;
  5. закрывается голова документа ;
  6. начинается тело документа ;
  7. вносится вся необходимая информация [текст, таблицы, изображения, видео и т.д.] — контент;
  8. закрывается тело документа ;
  9. закрывается контейнер HTML ;

Все просто и логично, ведь нельзя поставить человеку голову после тела и само тело вынести за границы «человека».

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

Перейдем к html — тегам

Выше я уже использовал понятие «тег» для обозначения элементов структуры html — документа, однако, не давая его определения. Полное определение есть в нашем глоссарии (искать по «тэг»), а если говорить проще, то теги — это инструменты, средства разметки html — страницы и основной синтаксис языка HTML. К слову сказать, теги используются в любом языке программирования, только везде они разные, то есть теги из HTML не подойдут для программирования на C++.

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

Все теги из себя представляют набор букв или целые слова, написанные латинскими символами, например тег — это сокращение от английского «image», то есть изображение; тег означает параграф и также происходит от английского «paragraph» и так далее. Если Вы дружите с английским, то дело пойдет еще проще, ну а если нет, то заодно научитесь некоторым словам на «англицком» благодаря курсу html от Nejalko.ru!

Все теги делятся на 2 категории, это важно запомнить:

Одиночные теги — это такие теги, которые не требуют закрывающей части, например тот же тег .

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

, означающий параграф, должен быть закрыт точно таким же тегом, только со слешем (не музыкантом) после первой угловой скобки

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

Вспомните приведенные выше основополагающие теги структуры, кстати, все парные:

  • Открываем html — документ и в конце закрываем html — документ ;
  • Открываем головную секцию документа и, после указания нужной информации, закрываем головную секцию ;
  • открываем тело документа вносим все, что хотели увидеть на странице и закрываем тело документа .

Повторю еще раз, парные теги должны быть ОБЯЗАТЕЛЬНО закрыты, иначе их действие будет продолжаться до конца html — документа (за редкими исключениями) и наш браузер сойдет с ума. Шучу, не сойдет, но закрывать их необходимо, чтобы не было ошибок кода, неправильного отображения страницы, и не сошли с ума мы, пытаясь понять, что это получилось.

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

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

Советую использовать теги комментариев, по крайней мере, пока не будете чувствовать 100%-ую уверенность в том, что сможете разобраться в коде без них (но это утопия :)).

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

Удачи, друзья!

Какие теги определяют структуру html страницы

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

Теги структуры документа html

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

— с этого указания начинается любой html-файл. Этот фрагмент кода используется для указания типа документа. Зачем это нужно? Дело в том, что существует несколько версий языка html, также есть его модификация. Указав доктайп, вы помогаете браузеру точно определить тип и интерпретировать код без ошибок.

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

Все, тип документа указан и можно двигаться дальше.

— главный элемент-контейнер на странице, в который помещаются теги заголовка и тела страницы. Он парный и закрывается в самом-самом конце документа.

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

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

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

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

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

— — очень важные парные теги заголовков, которые выводятся на веб-страницу. Как правило, в h1 заключают название статьи или другой публикации, в h2 – подзаголовки, в h3 – подзаголовки подзаголовков и т.д. В крупном документе действительно могут понадобиться все эти теги.

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

— формирует абзац (параграф) текста. Также очень важный элемент. Едва ли кто-то захочет читать сплошной текст, никак не разделенный на абзацы, верно?

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

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

Структура тега html

Давайте сразу разберемся на примере.

Правильная структура HTML документа и код страницы

Посмотрим, как выглядит самая обычная интернет-страница изнутри.

  • Структура HTML по большому счету лежит в основе каждой web — страницы.
  • Сегодня существует несколько типов HTML документов. Каждому типу документа соответствует его собственная HTML структура (подробности внизу страницы).
  • Правильная начальная структура HTML является залогом кросс-браузерности сайта .

Создадим на диске D или C папку My_first_site , впрочем, можно назвать ее как угодно.

В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот . Конечно же, это не единственное средство для написания кода, но на этом этапе вам нужен именно он.

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



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

Мой первый заголовок

Мой первый параграф

Мой второй параграф


Рассмотрим HTML теги, определяющие структуру страницы

  • – обязательные, определяют HTML документ.
  • – определяют секцию со служебной информацией, содержат инструкции для поисковиков, для браузеров, скрипты.
  • – определяют основной заголовок web — страницы.
  • – обязательные, определяют видимую часть документа.
  • – определяют заголовок 3-го уровня.
  • – определяют параграф. Смотрите урок HTML параграфы

Структура HTML документа | Пишем код страницы

Последовательность действий следующая:

1. Пишeм в Блокноте код HTML страницы:

хтмл документ, код

2. Заходим в File ⇒ Save as ( Файл ⇒ Сохранить как ), находим нашу папку D\My_first_site\ ⇒ прописываем имя файла: ( File name ) index.html ( index – это имя, .html – расширение файла) ⇒ сохраняем.

4. Открываем IE (Internet Explorer) или другой установленный по умолчанию браузер. В его меню пробуем найти и открыть сохраненный на компьютере файл index.html . Найти и открыть файл в любом браузере можно также в окошке, которое появится после набора на клавиатуре комбинации из двух клавиш: Ctrl и O – удерживаем Ctrl и после этого жмем латинскую букву O .

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

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

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

Правильная структура HTML 4.01

Такой должна быть начальная структура HTML страницы:

Самостоятельно добавьте параграфы, заголовок и посмотрите, что вышло. Не забывайте после каждого сохранения документа обновлять содержимое окна браузера нажатием кнопки в Mozilla Firefox или кнопки в Internet Explorer, или F5, чтобы изменения вступали в силу.

У вас все получилось? – Значит вы были внимательны и все сделали правильно.

Комментарий к HTML структуре:

– определяет тип контента и кодировку, windows-1251 – поддерживает как латинский так и кириллистический алфавит.

Немного позже, когда вы создадите свой первый сайт на WordPress или другой CMS, вы обратите внимание, что в структуре отображается кодировка UTF-8 :

Современные браузеры адекватно интерпретируют подобный код и русский язык в структуре CMS.

В нимание! В связи с тем, что версия HTML 4.01 морально устарела предлагаю ознакомиться со структурой XHTML. Последующие уроки полностью адаптированы под XHTML и HTML 5, то есть в примерах представлены новые теги. Так вместо устаревшего тега
используется
, вместо → и так далее.

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

Смотрите также структуру HTML 5, которую на сегодняшний день мы уже можем использовать!

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

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

Знакомство с HTML HTML структура и код страницы HTML заголовки

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML документ, структура? – Не вопрос!

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

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