|
Пожалуйста, уточните, кто автор курса Основы работы с HTML ? |
Инспектор
Вы можете этот курс.
Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 1:
Введение в HTML
Элементы 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>
