Опубликован: 25.10.2006 | Доступ: свободный | Студентов: 22118 / 9122 | Оценка: 4.30 / 4.02 | Длительность: 08:22:00
Лекция 1:

Введение в HTML

Лекция 1: 1234 || Лекция 2 >

Элементы HTML

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

Коротко о тегах

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

Регистр символов для отображения тегов не важен, например, <p> и <P> означает одно и то же. Однако в этом курсе используется нижний регистр для написания тегов. Это связано с тем, что консорциум WWW (W3C), который занимается стандартизацией спецификации HTML, рекомендует использовать теги в нижнем регистре, поскольку в следующем поколении стандартов будет именно такое требование.

Коротко об элементах HTML

Рассмотрим тот же пример документа HTML:

<html>
<head>
<title>Это заголовок страницы</title>
</head>
<body>
<h1>Здравствуйте!</h1>
<p>Это моя первая страница HTML. 
 <b>Этот текст выводится жирным шрифтом.</b></p>
</body>
</html>

Пример выполнения данного HTML-кода

Элементом HTML является:

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

Этот элемент начинается с тега <h1>, имеет содержимое "Здравствуйте!" и заканчивается тегом </h1>.

Также элементом HTML является:

<p>Это моя первая страница HTML.
 <b>Этот текст выводится жирным шрифтом.</b></p>

Этот элемент, начинается с начального тега <p>, заканчивается конечным тегом </p> и означает, что содержимое элемента "Это моя первая страница HTML. <b> Этот текст выводится жирным шрифтом. </b> " является отдельным параграфом. При этом внутри этого элемента находится другой элемент:

<b>Этот текст выводится жирным шрифтом.</b>

Этот элемент HTML начинается с начального тега: <b> Содержимым элемента HTML является: Этот текст выводится жирным шрифтом. Этот элемент HTML заканчивается конечным тегом </b>. Назначение тега <b> состоит в определении элемента HTML, который должен выводиться жирным шрифтом.

Все описанные элементы HTML содержатся в элементе:

<body>
<h1>Здравствуйте!</h1>
<p>Это моя первая страница HTML.
 <b>Этот текст выводится жирным шрифтом.</b></p>
</body>

Этот элемент HTML начинается с начального тега <body>, и заканчивается конечным тегом </body>. Назначение тега <body> состоит в определении элемента HTML, который содержит основную часть (или тело) документа HTML.

Атрибуты тегов

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

<имя_тега имя_атрибута="значение">

Например, тег:

<body bgcolor="red">

означает, что цвет фона страницы должен быть красным.

А тег:

<p align="center">

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

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

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

<html>
<body>
<abbr title='проект "Интернет-Университет
  Информационных Технологий" – INTUIT.ru'>ИНТУИТ</abbr>
</body>
</html>

Пример выполнения данного HTML-кода

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

<html>
<body>
<p>Попробуйте исправить текст в этих полях ввода</p>
<form action="index.php" method="GET">
<input type="text" name="blocked"
 value="Пример поля ввода, у которого указан флаг readonly" 
  readonly size="100"><br/><br/>
<input type="text" name="unblocked"
 value="Обычное поле ввода у которого нет флагов"
 size="100">
</form>
</body>
</html>

Пример выполнения данного HTML-кода

Лекция 1: 1234 || Лекция 2 >
Дарья Федотова
Дарья Федотова
Мария Иванова
Мария Иванова
Алексей Мурашев
Алексей Мурашев
Россия
Игорь Хан
Игорь Хан
Узбекистан, Ташкент, Ташкентский педагогический институт иностранных языков, 1990