HTML - Основы
HTML (HyperText Markup Language) - язык разметки гипертекста который предназначен для создания Web-страниц. Данный язык интерпретируется браузерами, полученный в результате форматированный текст отображается на вашем мониторе компьютера или мобильного устройства. Ключевое слово здесь - документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае - в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков.
HTML-документ состоит из дерева HTML-тегов и текста. Редактировать HTML-документы можно и в обычном текстовом документе, но удобнее это делать, конечно же, в специальных HTML-редакторах.
HTML-документ имеет расширение .html .
HTML тег - структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.
Структура документа HTML
Давайте создадим на компьютере первоначальный шаблон - файл index.html, откроем с помощью редактора и вставим в него следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок</title>
</head>
<body>
Тело документа
</body>
</html>
<!DOCTYPE html> данная конструкция всегда указывается в начале документа для правильного "понимания" браузером того, какая версия HTML используется при построении документа.
Tэг <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.
Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести. Данный тег обязателен в документе.
Тег <body> - все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы).
| Основные теги | |
| <html></html> |
Указывает программе просмотра страниц, что это HTML документ. |
| <head></head> |
Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. |
| <body></body> |
Определяет видимую часть документа |
| Теги оглавления | |
| <title></title> |
Помещает название документа в оглавление программы просмотра страниц |
| Атрибуты тела документа | |
| <body bgcolor=?> |
Устанавливает цвет фона документа, используя значение цвета в стандарте RGB - пример: FFFF00 - желтый цвет. |
| <body text=?> | Устанавливает цвет текста документа, используя значение цвета в стандарте RGB - пример: 00ff00 - зеленый цвет. |
| <body link=?> |
Устанавливает цвет гиперссылок, используя значение цвета в стандарте RGB - пример: 00FF00 - зеленый цвет. |
| <body vlink=?> |
Устанавливает цвет гиперссылок, на которыхх вы уже побывали, используя значение цвета в виде стандарте RGB - пример: 333333 - темно-серый цвет. |
| <body alink=?> |
Устанавливает цвет гиперссылок при нажатии. |
| Теги форматирования текста | |
| <pre></pre> |
Обрамляет предварительно
отформатированный текст. (как есть!)
|
| <h1></h1> |
Создает САМЫЙ БОЛЬШОЙзаголовок (как отдельный абзац) |
| <h6></h6> |
Создает САМЫЙ МАЛЕНЬКИЙзаголовок |
| <b></b> |
Создает жирный текст |
| <i></i> | Создает наклонный текст |
| <tt></tt> | Создает текст - имитирующий стиль печатной машинки. |
| <cite></cite> |
Используется для цитат, обычно наклонный текст. |
| <em></em> |
Используется для выделения из текста слова (наклонный или жирный текст) |
| <font size=?></font> |
Устанавливает размер текста в пределах от 1 до 7. |
| <font color=?></font> |
Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
|
Гиперссылки |
|
| <a href="URL">ТЕКСТ</a> |
Создает гиперссылку на другие документы или часть текущего документа. Здесь URL адрес ссылки, ТЕКСТ - текст ссылки. |
| <a href="URL"> < img src="imgURL" > </a> |
Создает гиперссылку на рисунок, находящийся по адресу imgURL. |
| "URL" = "links/main.htm" |
Адрес документа main.htm, находящегося в локальной папке links данного компьютера. |
| "URL" = "http://www.rambler.ru" |
Ссылка на ресурс, находящийся на удаленном компьютере. В адресе присутствуют: программа связи с удаленным компьютером http (HyperText Transfer Protocol, разделители :// и интернет (IP) адрес искомого ресурса (в данном случае поискового сервера Rambler). |
| <a href="mailto:EMAIL"> </a> |
Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу. |
| <a name="NAME"></a> |
Отмечает часть текста как место перехода по гипперссылке в документе. |
| <a href="#NAME"></a> |
Создает гиперссылку на помечанную часть текущего документа. |
|
Форматирование |
|
| <p> |
Создает новый параграф |
| <p align=?> |
Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center |
| <br> |
Вставляет перевод |
| <blockquote> </blockquote> |
Создает отступы с обеих сторон текста. |
| <dl></dl> |
Создает список определений. Штанга <dt> Основной снаряд в тяжелой атлетике. Состоит из стального грифа (стержня) со втулками на концах и свободно надевающихся металлических дисков. <dd> |
| <dt> |
Определяет каждый из терминов списка |
| <dd> |
Описывает каждое определение |
| <ol></ol> |
Создает нумерованный список |
| <li> |
Определяет каждый элемент списка и присваивает номер |
| <ul></ul> |
Создает ненумерованный список |
| <li> |
Предваряет каждый элемент списка и добавляет кружок или квадратик. |
| <div align=?> |
Тег, используемый для форматирования больших блоков текста HTML документа. Часто используется в таблицах стилей |
Вопросы / Комментарии / Отзывы