Основы HTML

ДОМ, КОТОРЫЙ ПОСТРОИЛ ДЖЕК
создание учебного ресурса

Задание 1.

Знакомство с основами языка HTML

Основные положения
Структура документа
Теги тела документа

Основные положения

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

<TITLE> Название документа </TITLE>

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

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

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

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

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

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

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

теги <html> и </html>, которые отмечают начало и конец документа;
заголовок, ограниченный тэгами <head> и </ head >;
тело, ограниченное тэгами <body>. . . </body>.

Когда WEB-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML> ...тело документа... </HTML>

Заголовочная часть документа <HEAD>

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

<HTML>
<HEAD>
<TITLE> Учебный ресурс для студентов .. курса </TITLE>
</HEAD>
...

Внимание!

Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

Кроме элемента <title>…</title>, заголовок может содержать элементы <meta>...</meta>, например, <meta name="GENERATOR" content="Ivan Sidorov">, для указания информации о документе. Открывающий тэг <meta> включает пары имя=значение, описывающие свойства документа, например, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

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

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

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

Комментарии

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

Синтаксис комментария:

Комментарии могут встречаться в документе где угодно и в любом количестве.

Изучая язык HTML, очень полезно просматривать и анализировать HTML-код web-страниц, созданных опытными мастерами. Это помогает быстрее освоить и понять принципы и структуру языка.

Тэги тела документа

Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

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

Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx> (где x - цифра от 1 до 6, определяющая уровень заголовка)

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером . Заголовок самого верхнего уровня имеет признак "1". Синтаксис заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx>

Тэг абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако браузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

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

Центрирование элементов документа

Вы можете центрировать все элементы документа в окне браузера. Для этого можно использовать тэг <CENTER>.

Все элементы между тэгами <CENTER> и </CENTER>
будут находиться в центре окна

Тэг преформатирования <PRE>

Tэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

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

Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться браузером при помещении их между тэгами <PRE> и </PRE>.

Далее идет несколько более подробный пример, собранный из предыдущих:

<HTML>

<HEAD>

<TITLE> Учебный ресурс для студентов ... курса</TITLE>

</HEAD>

<BODY>

<H2> Дисциплина "......" </H2>

<H3> Ресурс предназначен для подготовки к занятиям, зачету</H3>

Данный сайт содержит материал, который поможет Вам глубже изучить дисциплину<P>

Здесь Вы найдете содержание лекций, планы семинарских занятий, задания и вопросы к зачету<P>

</BODY>

</HTML>

Вот, что вы увидите на экране браузера:

Внимание! Заголовок "Учебный ресурс для студентов ... курса" не отображен браузером как часть документа. Он расположен в строке заголовка окна браузера.

Разрыв строки <BR>

Тэг <BR> извещает браузер о разрыве строки. Наилучший пример использования данного тэга - форматированный адрес или любая другая последовательность строк, где браузер должен отображать их одну под другой. Например:

РГПУ <BR>
г. Ростов-на-Дону<BR>
ул. Б. Садовая 33<BR>

Дополнительный параметр позволяет расширить возможности тэга <BR>.

<BRCLEAR=left|right|all>

Данный параметр позволяет выполнить не просто перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна браузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг <BR> для смещения текста ниже рисунка:

<p> Как вы можете видеть, данная схема демонстрирует связь<BR CLEAR=left>
<img src="http://www.softexpress.com/images/schema1.gif" align=baseline>
Мастер/Деталь </p>

Неразрывная строка <NOBR>

Если вы не хотите, чтобы браузер автоматически переносил строку, то вы можете обозначить ее тэгами <NOBR> и </NOBR>. В этом случае браузер не будет переносить строку даже если она выходит за границы экрана; вместо этого браузер позволит горизонтально прокручивать окно. Например:

<NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг <WBR> в это место. Например:

<NOBR> Данная строка является самой длинной строкой документа,<WBR> которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Данная строка является самой длинной строкой документа,

которая не допускает какого-либо разбиения где бы то ни было

Цитата <BLOCKQUOTE>

Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например:

На открытии данной конференции глава представительства произнес: <P>
<BLOCKQUOTE>
Сегодня один из величайших дней для нашей компании. <BR>
Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз.
</BLOCKQUOTE>

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

На открытии данной конференции глава представительства произнес:

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

Список базовых тэгов HTML

Стартовый

Завершающий

Описание

<HTML>

</HTML>

Обозначение HTML-документа

<HEAD>

</HEAD>

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

<TITLE>

</TITLE>

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

<BODY>

</BODY>

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

<H1>

</H1>

Заголовок абзаца первого уровня

<H2>

</H2>

Заголовок абзаца второго уровня

<H3>

</H3>

Заголовок абзаца третьего уровня

<H4>

</H4>

Заголовок абзаца четвертого уровня

<H5>

</H5>

Заголовок абзаца пятого уровня

<H6>

</H6>

Заголовок абзаца шестого уровня

<P>

</P>

Абзац

<PRE>

</PRE>

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

<BR>

Перевод строки без конца абзаца

<BLOCKQUOTE>

</BLOCKQUOTE>

Цитата

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

Теперь можно идти дальше - выполнять практическую работу

По вопросам, связанным с этим веб-узлом, обращайтесь по адресу rspu@rspu.edu.ru