Структура документа html – Использование разделов и создание структуры HTML документа — Веб-технологии для разработчиков

HTML5 - Основы создания структуры документа

Статья, которая повествует об основах создания структуры документа в HTML 5.

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

HTML 5 - Корректные и не корректые структуры страниц

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

Создание структуры документа в HTML 4 осуществляется с помощью 6 элементов (h2, h3, h4, h5, h5, h6). Эти элементы, при их размещении на странице, создают неявные разделы. Данные разделы называются неявными, потому что автор их в документе явно не создаёт. Они образуются автоматически, как только user agent встречает один из этих элементов в документе. Впоследствии из всех созданных user agent-ом разделов образуется структура документа.

Модель структуры документа, использованная в HTML 4, имеет существенные ограничения, которые связаны с тем, что автору доступны для её создания всего 6 элементов h2, h3, h4, h5, h5 и h6. С помощью этих элементов веб-разработчик не может спроектировать структуру документа, которая одновременно обеспечивала бы логическую взаимосвязь между разделами и отвечала критериям SEO.

Более подробно познакомиться с процессом создания структуры документа в HTML 4 и с проблемами при её реализации можно в следующей статье.

Стратегия создания структуры документа в HTML5 значительно изменилась. Теперь она не определяется только одними заголовками, т.к. это всегда для большинства веб-разработчиков выглядело как-то нелепо. Заголовки позволяют определить структуру документа, но они не группируют контент. До HTML 5 авторы группировали контент с помощью элементов

div, а затем использовали атрибуты классов или id атрибуты для того, чтобы присвоить этим разделам более семантически верное значение. К счастью в HTML5 появилась новая группа элементов sectioning, которые позволяют авторам создавать описание (структуру) документа. К этой группе относятся элементы article, aside, nav и section. Их основное назначение сделать код HTML более семантическим, добавить в него смысл с помощью разметки.

Для создания структуры документа в HTML 5 используются заголовочные элементы (h2, h3, h4, h5, h5 и h6) и элементы nav, aside, section и article из группы sectioning. Данные элементы в отличие от заголовков предназначены для создания явных разделов и установления этим разделам некоторого смысла.

HTML5 - Элементы предназначенные для создания структуры документа

Для того чтобы было более просто понять основные принципы структурирования документа в HTML 5 будет считать, что элементы body, nav, aside, section и article создают секции (явные разделы), а элементы h2, h3, h4, h5, h5 и h6 - обычные разделы (неявные разделы).

Процесс разработки структуры документа рассмотрим посредством пошаговых инструкций.

В HTML 5 создание структуры документа начинается с элемента body. Данный элемент создаёт основную секцию (раздел на уровне документа).


<body>
</body>

--> Вышеприведённый пример будет создавть следующую структуру документа:
[document] Untitled

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

body (основной секции). Например, создадим секции nav, section и aside. Эти секции будут являться дочерними по отношению к body.


<body>
  <nav></nav>
  <section></section>
  <aside></aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] Untitled
  [nav] Untitled
  [section] Untitled
  [aside] Untitled

Каждая из секций (nav, aside, section, article) в свою очередь тоже может содержать секции. Таким образом, в HTML 5 получается структура документа. Т.е. одни секции вкладываются в другие. Секции, которые расположены непосредственно в body, имеют 2 уровень. А секции, которые расположены непосредственно в секциях 2 уровня будут уже иметь 3 уровень и т.д.

Например, создадим в section 3 секции article.


<body>
  <nav></nav>
  <section>
    <article></article>
    <article></article>
    <article></article>
  </section>
  <aside></aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] Untitled [nav] Untitled [section] Untitled [article] Untitled [article] Untitled [article] Untitled [aside] Untitled

Элементы h2, h3, h4, h5, h5 и h6 в HTML5 применяются для указания названия секции (т.е. выступают в качестве заголовка секции) и для создания неявных разделов внутри секции. Причём взаимосвязь между неявными разделами осуществляется только в пределах одной секции. Т.е. заголовочные элементы, находящиеся в одной секции, не связаны с заголовочными элементами, находящимися в другой секции. Другими словами неявные разделы одной секции изолированы от неявных разделах другой секции. В качестве заголовка секции выступает заголовочный элемент, находящийся в этой секции и имеющий самый высокий ранг (уровень). Если секция не содержит заголовочный элемент, то она не имеет названия (Untitled).

Внимание: В HTML 4 в отличие от HTML 5 взаимосвязь между неявными разделами осуществлялась в пределах всего документа, а не в пределах секции (body, nav, aside, section, article). В HTML 4 нет элементов для создания секций.

Например, создадим названия для всех секций кроме nav.

<body>
  <h2>A</h2>
  <nav></nav>
  <section>
    <h2>B</h2>
    <article>
      <h2>C</h2>
    </article>
    <article>
      <h2>D</h2>
    </article>
    <article>
      <h2>E</h2>
    </article>
  </section>
  <aside>
    <h2>F</h2>
  </aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] A
  [nav] Untitled
  [section] B
     [article] C
     [article] D
     [article] E
  [aside] F

Например, создадим неявные разделы в секции section и aside:


<body>
  <h2>A</h2>
  <nav></nav>
  <section>
    <h2>B</h2>
    <article>
      <h2>C</h2>
    </article>
    <article>
      <h2>D</h2>
    </article>
    <article>
      <h2>E</h2>
    </article>
    <h3>B-R1</h3>
    <h4>B-R2</h4>
    <h3>B-R3</h3>
  </section>
  <aside>
    <h2>F</h2>
    <h3>F-R1</h3>
    <h4>F-R2</h4>
    <h5>F-R3</h5>
    <h4>F-R4</h4>
    <h4>F-R5</h4>
  </aside>
</body>

--> Вышеприведённый пример будет создавать следующую структуру документа:
[document] A
  [nav] Untitled
  [section] B
     [article] C
     [article] D
     [article] E
     [h3] B-R1
       [h4] B-R2
     [h3] B-R3
  [aside] F
    [h3] F-R1
      [h4] F-R2
        [h5] F-R3
      [h4] F-R4
      [h4] F-R5

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

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

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

Также в HTML-документе должны присутствовать элементы HEAD (информация о документе) и BODY (тело документа).

Раздел документа HEAD

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

Раздел заголовка начинается тегом <HEAD> и следует сразу за тегом <HTML>. Между открывающим и закрывающим тегами элемента HEAD располагаются другие элементы заголовка.

Название документа title

Для того чтобы дать название HTML-документу, предназначен тег <TITLE>. Это название будет выведено в заголовок окна броузера. Название записывается между тегами <TITLE> и </TITLE> и представляет собой строку текста. Длина этой строки может быть любой, но рекомендуется делать ее не больше 60 символов. Элемент TITLE должен находиться только в разделе HEAD.

Раздел документа BODY

 

В этом разделе документа располагается та информация, которая отображается в окне броузера. Раздел BODY должен начинаться тегом <BODY> и завершаться тегом </BODY>, между которыми располагаются элементы HTML, из которых и состоит содержание документа.

Спецификация элемента BODY

Тег <BODY> имеет ряд атрибутов, определяющих внешний вид документа. Ниже приводится спецификация тега <BODY>.

<BODY

TEXT="цвет текста"

BGCOLOR="цвет фона"

BACKGROUND="адрес фонового рисунка"

LINK="цвет непосещенной гиперссылки"

VLINK="цвет посещенной гиперссылки"

ALINK="цвет активной гиперссылки"

>

Атрибут TEXT задает цвет шрифта для всего документа в формате RGB или в символьной нотации. По умолчанию (если не указан этот атрибут) используются настройки броузера.

Атрибут BGCOLOR задает цвет фона окна броузера документа в формате RGB или в символьной нотации. По умолчанию используются настройки броузера.

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

Атрибуты LINK, VLINK и ALINK задают цвета гиперссылок в формате RGB или в символьной нотации. По умолчанию используются настройки броузера. Непосещенная гиперссылка – гиперссылка, которая еще не использовалась для перехода к другому документу. Посещенная гиперссылка – гиперссылка, которая уже использовалась для перехода к другому документу. Активная гиперссылка – гиперссылка на документ, к которому в данный момент происходит переход.

 Советы по использованию атрибутов тега BODY

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

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

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

 Примеры

seodon.ru | Учебник HTML - Структура HTML-документа

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Моя первая HTML-страница</title>
</head>
<body>

<p>Здравствуйте!</p>

</body>
</html>

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

Тег <HTML> или корневой элемент веб-страницы

Тег <HTML> является предком всех тегов HTML-документа, его еще часто называют корневым элементом. Вне этого элемента не должно появляться ни одного тега, а сам он может содержать теги <HEAD> и <BODY>, причем каждый только в единственном числе. Помните, что значит «содержать»? Совершенно верно, это значит, что только эти два тега могут находиться внутри <HTML> на первом уровне вложенности, а уже внутри них должны располагаться остальные теги HTML-страницы, что и отображено в примере.

Тег <HEAD> или «шапка» HTML-страницы

Внутри тега <HEAD> находятся различные служебные теги, которые указывают кодировку веб-страницы, ее заголовок и так далее, очень часто его называют «шапкой» документа. Информация, находящаяся внутри этого элемента предназначена в основном для браузеров (Internet Explorer, Opera и т.п.) и поисковиков (Яндекс, Google и т.п.), поэтому она никак не отображается на странице (за исключением текста в теге <TITLE>).

Тег <META> — указываем кодировку документа

В нашем примере тег <META> отвечает за указание кодировки HTML-документа. Он является одним из семейства тегов иначе называемых метатегами, о которых мы поговорим с вами в других уроках. А пока просто ставьте его, как показано в примере, внутри элемента-контейнера <HEAD>.

Тег <TITLE> или заголовок документа

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

Каждая страница должна иметь только один заголовок, соответственно и тег <TITLE> должен быть на странице только один и только внутри элемента <HEAD>.

Пример отображения заголовка в браузере Internet Explorer.

В поисковой системе Яндекс.

Тег <BODY> или тело документа

Тег <BODY> является контейнерным элементом, между открывающим и закрывающим тегами которого находятся все те элементы, которые мы видим на странице, поэтому его и называют телом HTML-документа.

У тега <BODY> есть одно очень важное правило — он должен содержать элементы уровня блока и не может содержать встроенные элементы (уровня строки). Многие учебники, которые я видел, никогда не заостряют на этом внимание, но мы-то с вами хотим изучить правильный HTML, верно? Кстати, вы помните, что такое блочные и встроенные элементы? Блочные создают впереди и после себя перенос строки в начало, а встроенные отображаются на одной строке.

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

Пример правильного указания тегов

<body>
<p><i>Учим правильный HTML!</i></p>
</body>

Неправильное использование тегов

<body>
<i><p>А вот такой порядок тегов неверный!</p></i>
</body>

Вообще, подобные правила есть у каждого HTML-тега, а не только у <BODY>, поэтому вы конечно спросите: «А как же мы узнаем — какие теги может содержать элемент, а какие нет»? Все очень просто: во-первых, в этом учебнике я всегда вам буду это подсказывать, а во-вторых — в справочнике по HTML-тегам эта информация есть по каждому тегу. И поверьте, когда вы закончите обучение, то будете «на автомате» писать грамотный HTML, уж я об этом позабочусь. 🙂

Тег <!DOCTYPE> или выбираем версию HTML

А теперь пора вернуться к первой строке примера, тегу <!DOCTYPE>. И первое, что вам нужно понять — этот тег не входит в состав самого HTML-документа, поэтому он и вынесен за пределы тега <HTML>. А нужен он для того, чтобы браузер понял, к какой версии HTML относится созданная вами страничка. Если же <!DOCTYPE> не указать, то браузеры решат, что вы используете очень старую версию HTML и могут показать страницу так «криво», что вам и в страшном сне не привидится, поэтому пишите его всегда.

Существует три версии языка HTML 4.01, который мы будем с вами изучать, каждой из них соответствует свой Доктайп. Итак:

HTML 4.01 Strict (строгое соответствие синтаксису языка)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional (переходный синтаксис языка)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset (переходный синтаксис языка плюс использование фреймов)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Strict является самой строгой версией HTML, в нем недопустимы никакие ошибки синтаксиса, например ошибки вложенности тегов.

HTML 4.01 Transitional — это более лояльная версия, которая спокойно переносит многие ошибки кода. НО! Когда я думал над тем, какому же языку учить в данном учебнике, то решил, что это будет именно строгая версия. Так как лучше учиться сразу правильно, чем потом переучиваться.

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

Вообще, существует еще несколько версий HTML, например XHTML. Но отличия синтаксиса XHTML от HTML настолько минимальны, что их можно перечислить по пальцам рук, еще и свободные останутся. 🙂 Причем часть этих отличительных особенностей большинством вебмастеров вообще не используется. Другими словами, если вы освоите HTML 4.01, то вам уже не надо будет изучать XHTML, совсем. Прочитаете о нем разок, потратив пару часов, и все. Еще есть HTML 5, который находится в разработке, пока не утвержден и постоянно изменяется разработчиками W3C, но в нем вообще просто добавится несколько новых тегов и атрибутов.

Создаем свою первую HTML-страницу

Вот и пришло время создания вашей первой HTML-страницы. Как я уже говорил, в этом учебнике я буду использовать текстовый HTML-редактор «Notepad++». Открыв его, вы увидите уже до боли знакомые вам по другим текстовым редакторам (например, Microsoft Word или OpenOffice Writer) строки меню. Если меню на английском языке, то смените его на русский, выбрав: Settings → Preferences → General → Localisation → Русский.

Теперь напишите в редакторе пример, который показан в начале этого урока и нажмите «Сохранить».

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

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

Понятие тега и элемента

Определение 1

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

Различают 2 типа тегов: контейнеры и одиночные.

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

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

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

Границы документа

Определение 2

Основным HTML-тегом является одноименный тег . Он всегда стоит в начале и открывает документ, а тег стоит в последней строке и закрывает документ.

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

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

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

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

Раздел HEAD открывает тег , который стоит сразу после тега . Закрывающий тэг указывает на конец этого раздела. Между ними находятся остальные теги раздела заголовка документа.

Название документа

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

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

Замечание 1

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

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

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

This is an example document

Enter body text here

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

Атрибуты элемента BODY

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

Рассмотрим эти атрибуты.

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

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

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

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

Атрибутом TEXT определяется цвет текста документа. Необходимо стараться на странице поддерживать высокую контрастность текста. Используя шрифт с тонким начертанием лучше сделать его темным на светлом фоне.

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

Атрибут VLINK показывает просмотренные ссылки. Как правило, они окрашиваются более темным оттенком того же цвета, что и не просмотренные ссылки.

Атрибутом ALINK определяется цвет активной ссылки. Этот атрибут обычно используется при просмотре многокадровых документов.

Замечание 2

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

С помощью атрибутов LEFTMARGIN и TOPMARGIN устанавливаются расстояния между левым и верхним краями текста и соответствующими краями окна браузера. Местоположение других краев текста не регулируется для обеспечения возможности просмотра страниц любым браузером.

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

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

Включение комментариев

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

Элемент Address

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

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

Структура html-документа (основные блоки)

<HTML>

<HEAD>

служебная информация

<TITLE>

информация об имени страницы (информации, которая будет отображаться в строке заголовка обозревателя)

</TITLE>

</HEAD>

<BODY>

основная часть документа

</BODY>

</HTML>

Как правильно создать и сохранить html страницы.

1) Создаём папку электронный учебник, для того, чтобы уроки были структурированы и содержались в одном месте.

Если необходимые для ЭУ изображения будут сохранены в этой же папке, то прописывать полный путь к ним не нужно, указывается только название файла. 2) Создаём  файл с кодом в текстовом редакторе, например в Блокноте (NotePad).

<!DOCTYPE html>

<html>

<head>

<title>Заголовок документа</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

</body>

</html>

DOCTYPE (Document Type Definition) указывает тип документа. Это необходимо, чтобы браузер понимал, согласно какому стандарту отображать текущую страницу. Ведь существует много версий (X)HTML и как раз с помощью DOCTYPE мы сообщаем браузеру, какая именно версия использовалась при написание нашей страницы.

Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо установить параметр <meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">. Для операционной системы Windows и кириллицы charset обычно принимает значение utf - 8 или windows-1251

Далее Сохранить как.

Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с .html на конце, например primer.html

Пример создания титульной страницы

  1. Откройте primer.html через блокнот. Исправьте содержимое на: <!DOCTYPE html>

<html>

<head>

<title>Главная страница</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<font face="Book Antiqua" color="Blue" size="5">

<br><br> <b> <p align="center"> <br><img src="logo.png">

<br> Новокузнецкий институт (филиал)<br>

федерального государственного бюджетного<br>

образовательного учреждения высшего профессионального образования<br>

Кемеровский государственный университет” </b> </font> <br>

<font color=" Navy " size="5">

<b><p align="center"><br>Физико-математический факультет</b>

<br><img src="fizmat.png"> <br> <br> <br> </font>

<br>

<font color=" Navy " size="6">Электронный учебник по программированию

<br> <a href="содержание.html"><img src="button.jpg"><br> <font color=" Navy " size="5">

<p align="right"> Выполнил студент группы ИН-11<br>Иванов И.И.</p>

<br><br><p align="center"> Новокузнецк 2016

</body>

  1. Сохраните документ с именем Обложка.html

  2. Просмотрите документ в окне браузера и оцените результат. При необходимости внесите коррективы, вернувшись в Блокнот.

Форматирование текста

<HN> </HN> – изменение размера шрифта / отмена выбранного размера шрифта NÎ[1…6]

<B> </B> – полужирный шрифт / отмена полужирного шрифта

<I> </I> – курсив / отмена курсива

<U> </U> – подчёркивание / отмена подчёркивания

<EM> </EM> – выделение (аналогично тэгу <I>) / отмена выделения

<STRONG> </STRONG> – полужирный шрифт / отмена полужирного шрифта

<BIG> </BIG> – увеличение шрифта относительно текущего / отмена увеличения шрифта относительно текущего

<SMALL> </SMALL> – уменьшение шрифта относительно текущего / отмена уменьшение шрифта относительно текущего

<BR> – переход на следующую строку

<PRE> </PRE> – отображение без изменения форматирования / отмена отображения без изменения форматирования

<SUP> </SUP> – текст сдвигается вверх (верхний индекс) / отмена сдвига

<SUB> </SUB> – текст сдвигается вниз (нижний индекс) / отмена сдвига

<FONT> </FONT> – изменение шрифта / отмена действия шрифта

Атрибуты тэга <FONT>

COLOR= название цвета или его шестнадцатеричный код

изменение цвет текста

Например:

<FONT СOLOR= red> текст </FONT>

приведёт к выводу текста красным цветом.

FACE = название шрифта –изменение гарнитуры (начертания) шрифта

Например:

<FONT FACE = Arial> текст </FONT>

приведёт к выводу текста шрифтом Arial.

SIZE = размер шрифта – изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку.

Например:

<FONT SIZE = 4> текст </FONT>

Атрибуты могут перечисляться через пробел в произвольном порядке.

Например:

<FONT SIZE = 4 FACE = Times New Roman

СOLOR= Black > текст </FONT>

Абзац

<P> </P> – абзац / конец абзаца

Атрибуты тэга <P> для выравнивания текста

Атрибуту ALIGN может быть присвоено одно из 4-значений:

LEFT

ALIGN = RIGHT

CENTER

JUSTIFY

Позволяет выравнивать текст по левому, правому краю по центру или по ширине.

Например:

<P ALIGN = CENTER> текст </P>

Фон

Фон страницы задается в начале основной части документа, т.е. атрибутами тэга <BODY>

Атрибуты тэга <BODY> для изменения цвета текста и фона

TEXT= цвет или его код

Задает цвет текста

Например:

<BODY TEXT =7EA3B8>

BGCOLOR=цвет или его код

Например:

<BODY BGCOLOR =Black>

BACKGROUND= имя файла

использование в качестве фона изображение из файла. Изображение-текстуру можно создать в графическом редакторе или PowerPoint

BGPROPERTIES=FIXED

создание фона – “водяного знака”(фона, который не перемещается вместе с текстом)

Отправить ответ

avatar
  Подписаться  
Уведомление о