Webzone Публикации Основы HTML

Основы HTML

10:30 , 02 Октябрь 2018

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 документа. Часто используется в таблицах стилей

Вопросы / Комментарии / Отзывы


Требуется аккаунт чтобы написать комментарии :)

Аяулым
21:20 , 14 Октябрь 2018

Спасибо, вся информация была полезной!