Будь умным!

У вас вопросы?
У нас ответы:) SamZan.net

Структура HTML-кода

Работа добавлена на сайт samzan.net:


02. Структура HTML-кода

На этой странице:

  •  Головная часть HTML-программы
  •  Тело программы
    •  Заголовки
    •  Горизонтальная линия
    •  Абзац
  •  Блочные и строчные элементы
  •  Стиль записи кода программы
    •  Лесенка
    •  Короткие строки
    •  Теги большие, атрибуты маленькие

Элемент HTML — является основным элементом HTML-разметки. Все остальные элементы вложены в него, являются его потомками.

Элемент HTML задаётся парным тегом. Тег <HTML> открывает HTML-программу, а тег </HTML> — закрывает её.

Между этими двумя основными тегами располагается головная часть программы и её тело:

 

<HTML>

..голова

..тело

</HTML>

 Головная часть HTML-программы

Головная часть HTML-программы записывается между открывающим тегом <HEAD> и закрывающим </HEAD>:

 

<HEAD>

..содержимое головной части

</HEAD>

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

Так, элемент

 

<META http-equiv="Content-Type"

     content="text/html; charset=windows-1251">

задаёт браузеру информацию о кодировке, в которой написан текст HTML-документа. В данном случае задана стандартная кодировка Windows.

Элемент META задаётся одиночным тегом и не имеет визуального образа на экране.

Между тегами <TITLE> и </TITLE> располагается текст, отображаемый в заголовке окна браузера:

 

<TITLE>Первый HTML-документ</TITLE>

Щёлкните мышкой на следующей ссылке и найдите текст “Первый HTML-документ” в заголовке окна браузера.

Первый HTML-документ

В окошке браузера Microsoft Internet Explorer вы должны увидеть:

Название окна должно совпадать с заголовком страницы. Это очень удобно, когда окно с сайтом свёрнуто в кнопку на Панели Задач — на этой кнопке пользователь видит заголовок текущей страницы:

Название окна заносится в набор избранных сайтов (меню Избранное), если пользователь решит запомнить ссылку на текущую страницу:

Название окна — дополнительная подсказка пользователю о его текущем положении на сайте.

В примере урока заголовок окна, заданный элементом TITLE, совпадает с заголовком страницы, заданный элементом H1: “Первый HTML-документ”.

В головной части HTML-кода используют и другие элементы. Этот, например, указывает имя автора документа:

 

<META http-equiv="author" content="И.Сидоров">

А эти элементы задают описание документа и ключевые слова для поисковых систем:

 

<META name="description"

     content="Обучение учителей и школьников">

<META name="keywords"

     content="Роботландия, Web-конструирование">

 Тело программы

Между тегами <BODY> и </BODY> располагаются элементы, которые браузер последовательно выводит в окно документа (строит изображение).

Тело нашей простой программы содержит следующие элементы:

Элемент

Схема кода

Назначение

H1

<H1>...</H1>

Заголовок

HR

<HR>

Горизонтальная линия

P

<P>...</P>

Абзац

Заголовки

Заголовки являются важной частью документа. Они разделяют информацию на отдельные логические части и поэтому существенно улучшают её восприятие.

Заголовки бывают разные по значению, или как говорят, по уровню. Учебник, например, имеет название — это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав — это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня, а параграфы — пункты, обозначенные заголовками четвёртого уровня.

HTML поддерживает заголовки шести уровней при помощи конструкции:

<Hn>текст заголовка</Hn>

В качестве n следует использовать одну из цифр 1–6, обозначающую уровень заголовка.

При отображении страницы браузер выделяет заголовки размером шрифта и жирностью:

Это заголовок 1 уровня

Это заголовок 2 уровня

Это заголовок 3 уровня

Это заголовок 4 уровня

Это заголовок 5 уровня

Это заголовок 6 уровня

Элементом H1 задают, как правило, заголовок сайта, элементом H2 — заголовок страницы, элементом H3 — разделы на странице и так далее.

Например, страница “В лес за грибами” сайта “Лесные истории” может иметь следующий вид (справа от заголовков проставлен их уровень):

Уровни заголовков отражают структуру документа (показана на схеме справа). Однако, в HTML-коде иерархия документа закладывается только в номер уровня Hn, и не означает вложенность соответствующих фрагментов кода.

Код вышеприведённой страницы имеет вид:

 

<HTML>

 <HEAD>

   <META http-equiv="Content-Type"

         content="text/html; charset=windows-1251">

   <TITLE>В лес за грибами</TITLE>

 </HEAD>

 <BODY>

   <H1>Лесные истории</H1>

   <HR>

   <H2>В лес за грибами</H2>

   <H3>Сборы</H3>

   <P>

Мы собирались в поход весь вечер.

   <H3>Дорога к лесу</H3>

   <P>

Утром мы взяли приготовленные корзины и рюкзаки.

Сначала мы шли полем, затем перешли вброд речку и

вошли в лес.

   <H3>В лесу</H3>

   <H4>Встреча на полянке</H4>

   <P>

На полянке мы увидели ежа.

   <H4>Муравейник</H4>

   <P>

Потом нашли большой муравейник.

   <H4>Грибная роща</H4>

   <P>

Наконец, нашли грибное место и набрали полные

корзины.

   <H3>Возвращение домой</H3>

   <P>

Домой вернулись без приключений. Мы были очень

довольны прогулкой, а мама&nbsp;&#8212;

собранными грибами.

 </BODY>

<HTML>

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

В коде все элементы Hn и P являются прямыми потомками элемента BODY.

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

Существуют специальные программы, которые автоматически составляют оглавление гипертекстового документа. Делают они это при помощи сбора информации из тегов <Hn>. Если заголовочные теги обрамляют обычные тексты или не отражают иерархическую структуру документа, оглавление будет построено неверно.

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

Погрешность

Описание

Неудачные заголовки

Точки в коротких заголовках

Горизонтальная линия

Линия — простейший графический элемент, который умеет строить браузер. Горизонтальная линия задаётся тегом <HR>, и этот тег не имеет парного закрывающего.

Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране. Посмотрите еще раз, как линия отделяет заголовок в примере от основного текста:

Первый HTML-документ

Абзац

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

Абзацы отделяются друг от друга “красными” или пустыми строками. Красная строка — это первая строка абзаца с текстом, сдвинутым вправо.

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

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

Задаётся абзац тегами <P> и </P>, между которыми помещается текст. Парный тег </P> является необязательным.

По умолчанию браузер использует не красную, а пустую строку (отступ) для отделения одного абзаца от другого.

Браузер отображает элемент P следующим образом:

  1.  Абзац выводится с новой строки и перед ним формируется отступ размером в пустую строку.
  2.  Абзац выравнивается по левому краю для языков с написанием слева направо и по правому для языков с написанием справа налево.
  3.  Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде.
  4.  Перенос текста на новую строку выполняется, если очередное слово не помещается в экранной строке, а не тогда, когда в HTML-коде начинается новая строка.
  5.  Завершая абзац, браузер выполняет переход на новую строку и формирует после абзаца отступ размером в пустую строку.

Посмотрите, как браузер перестраивает абзац в разных по ширине окнах (откройте документ и измените несколько раз ширину его окна):

Первый HTML-документ

Парный тег </P> является необязательным — браузер определяет конец текущего абзаца по началу следующего или началу другого элемента уровня блока (о делении элементов на строчные и блочные рассказано в следующем пункте). Однако на практике лучше использовать следующее правило: в цепочке элементов P последний элемент лучше записывать с закрывающим тегом. А можно все элементы Pзаписывать парными тегами, тогда уж браузеру точно не к чему будет придраться!

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

Элементы HTML разделяются на два класса — блочные и строчные.

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

Блочный элемент занимает всю доступную ширину. Высота блочного элемента определяется его содержимым.

Приведённый выше рисунок соответствует, например, такому коду:

 

<HTML>

 <HEAD>

   <META http-equiv="Content-Type"

         content="text/html; charset=windows-1251">

   <TITLE>Блочные элементы</TITLE>

 </HEAD>

 <BODY>

   <P>

Первый блочный элемент.

   <P>

Второй блочный элемент.

   <P>

Третий блочный элемент.

 </BODY>

<HTML>

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

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

Элемент HTML является блочным. Внутри этого элемента расположен элемент — BODY, который тоже является блочным.

Прямые потомки BODY — всегда блоки: абзацы (P), горизонтальные линии (HR), заголовки (Hn) и другие. Даже если поместить в BODY строчные элементы, браузер автоматически “обернёт” их в специально созданные безымянные блоки.

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

Рассмотрим следующий пример:

 

<HTML>

 <HEAD>

   <META http-equiv="Content-Type"

         content="text/html; charset=windows-1251">

   <TITLE>Блочные и строчные элементы</TITLE>

 </HEAD>

 <BODY>

   <H1>Блочные и строчные элементы</H1>

   <HR>

   <P>

Первый абзац. В этом абзаце выделено важное

<EM>слово</EM> при помощи строчного элемента EM

(выделение).

   <P>

Это второй абзац. В этом абзаце тоже выделено

важное <STRONG>слово</STRONG>, но при помощи

строчного элемента STRONG (сильное выделение).

 </BODY>

<HTML>

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

Каждый блочный элемент в BODY, кроме HR, содержит внутри себя строчные элементы.

Блочный элемент H1 содержит один строчный безымянный элемент (текст заголовка):

Если ширина окна уменьшается, соответственно уменьшается ширина H1 и строчный элемент занимает несколько строк:

Блочный элемент P в первом абзаце содержит три строчных элемента: безымянный, EM и ещё один безымянный:

Если ширина окна уменьшается, строчные элементы переносятся со строки на строку так, чтобы занять ширину содержащего их блока (P):

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

 

<BODY>

 <STRONG>Выделенный текст</STRONG>

 <P>Первый абзац</P>

 <P>Второй абзац</P>

 Текст без разметки

</BODY>

Все строчные и неразмеченные элементы собираются в безымянные блоки (назовём их условно БЛОК):

 

<BODY>

 <БЛОК><STRONG>Выделенный текст</STRONG></БЛОК>

 <P>Первый абзац</P>

 <P>Второй абзац</P>

 <БЛОК>Текст без разметки</БЛОК>

</BODY>

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

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

Следующий код является ошибочным:

 

<P>

 <HR>

</P>

Можно ли размещать внутри строчного элемента блочные? Стандарт языка запрещает это: “строчные элементы могут содержать только данные и другие строчные элементы”.

 Стиль записи кода программы

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

Лесенка

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

Структурная лесенка должна повторять иерархическую структуру блочных элементов: каждый потомок смещается вправо по отношению к телу своего родителя (точки имитируют пробелы-отступы):

 

<HTML>

..<HEAD>

....<TITLE>Заголовок окна</TITLE>

..</HEAD>

..<BODY>

....<H1>Заголовок</H1>

....<P>

Здесь расположен текст абзаца.

....<P>

Здесь расположен текст абзаца.

..</BODY>

</HTML>

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

Исключением могут быть короткие конструкции, начало и конец которых записываются в одной строке (например, <H1>Заголовок</H1>).

Структурную лесенку делайте только на теговом “каркасе” блочных элементов. Строчные элементы лучше начинать с первой позиции — так их легче записывать и редактировать.

Короткие строки

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

Теги большие, атрибуты маленькие

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




1. Синтаксическая синонимичность
2. экономической и политической сути религиозное антикатолицистское по своей идеологической форме
3. Сибирский федеральный университет Лесосибирский педагогический институт ~ филиал федерального госуд
4. 2008 N 447З от 28122009 N 96З от 06
5. экономическое развитие и политический строй России во II половине XVIIвека
6. Pinnacle Studi
7. Контрольная работа 1 Вариант 1 1
8. Психологические основы психолого-педагогического сопровождения выбора профиля обучения и профессии.html
9. во Сметная стоимость
10. Выпадение прямой кишки
11. Сердце Хаоса По мотивам Morrowind Готовиться игра 2013г.html
12. Методы в возрастной психологии
13. Прогнозирование и планирование экономики для студентов всех специальностей на 2012-2013 учебный год.
14. 42 Удосконалення обліку витрат і калькулювання собівартості продукції виноробства С
15. РЕФЕРАТ дисертації на здобуття наукового ступеня кандидата педагогічних наук Київ 1999
16. Рынок факторов производства и распределение ресурсов Автор работы- Студент 1 курса Очн
17. НОРМА ПАТОЛОГИЯ Хотелось бы начать эту главу с одного личного воспоминания первого столкновения с ре
18. Гузенков П
19.  Философия в современном мире
20. Молодежное движение 60-х Этап первыйhippies

Материалы собраны группой SamZan и находятся в свободном доступе