HTML [Урок 1]

Zloo · 6 ноя 2016

HTML [Урок 1]

HTML - Стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Из чего состоит структура HTML-документа

Наглядный легко-запоминающийся пример структуры html-документа.

Вот как выглядит код самой простой html-страницы:
Код:
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
Привет всем! А это мой первый сайт.
</body>
</html>
Для того, чтобы создать свою html страницу, нужно вставить вышеуказанный код в блокнот, нажать Файл → Сохранить как… В поле «имя файла» указать ваше_название страницы.html, а в поле «тип файла» указать Все файлы. Нажать Сохранить.

Тег <html> сообщает о том, что начинается структура html-документа, </html> — что заканчивается. Между тегами <head></head> хранится в большей части информация для браузера и поисковых систем. В тегах <title></title> содержится заголовок нашей страницы. Тег <body> говорит о том, что далее идёт информация предназначенная для пользователя, </body> же естесственно говорит о том, что информация для пользователя заканчивается.

Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и >, именно они отличают тег <html> от обычного текста html. Рассмотрим несколько самых простых «одиночных» тегов:

  — тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
Код:
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
Привет всем! А это мой первый сайт.
</body>
</html>
<hr> — тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:

align — Определяет выравнивание линии. Может принимать значение left, center, right.
color — Задаёт цвет линии.
noshade — Рисует линию без трехмерных эффектов.
size — Задаёт толщину линии.
width — Задаёт ширину линии.

Код с использованием тега <hr>:
Код:
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
Привет всем!<hr>А это мой первый сайт.
</body>
</html>
Ещё один «одиночный» тег — это <meta>. Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между <head> и </head>. Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content, name или http-equiv. Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Код:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Код:
<meta charset="utf-8">
Cуществуют и другие одиночные теги (<area>, <base>, , <col>, <command>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track>, ), но с ними я познакомлю вас чуть позже.

Теперь давайте поговорим о «закрывающихся» тегах. Само название «закрывающийся тег», говорит о том, что тег требует обязательного закрытия. Это сделано для того, чтобы чётко ограничить часть текста, на которую действует тег.

Для наглядного примера взглянем на тег , который используется для выделения текста, он устанавливает жирное начертание шрифта. Теги  и  являются границами, которые определяют область выделения текста. Вот код, где в последней строке забыли закрыть тег :
Код:
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
Привет всем! А это мой первый сайт. 
Привет всем! А это мой первый сайт.
</body>
</html>
Как создать ссылку

Следующее, о чём я должен рассказать, это то как устанавливать ссылку. Ведь сайт это множество перелинкованных между собой страниц. Ссылка устанавливается с помощью «закрывающегося» тега <a>, у которого есть 12 атрибутов:

accesskey — активирует ссылку с помощью комбинации клавиш.
charset — указывает кодировку текста, на который ведет ссылка. *
coords — устанавливает координаты активной области. *
href — задает адрес документа, на который следует перейти.
hreflang — идентифицирует язык текста по ссылке.
name — устанавливает имя якоря внутри документа (в HTML5 следует использовать id). *
rel — отношения между ссылаемым и текущим документами.
rev — отношения между текущим и ссылаемым документами. *
shape — задает форму активной области ссылки для изображений. *
tabindex — определяет последовательность перехода между ссылками при нажатии на кнопку <Tab>.
target — тип окна, в котором браузер будет загружать документ. Может принимать значения
_blank — загружает страницу в новом окне браузера.
_self — загружает страницу в текущем окне (значение по умолчанию).
_parent — загружает страницу во фрейме-родителе, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

title — добавляет всплывающую подсказку к тексту ссылки.
* — в HTML5 является устаревшим атрибутом

Рассмотрим код страницы с простой текстовой ссылкой:

Код:

<html> <head> <title>Мой первый сайт</title> </head> <body> Привет всем! А это мой первый сайт с ссылками. <a href="Тут_Ваша_ссылка" title="Пример с тегом hr" target="_blank">Ссылка</a> на пример с тегом hr. </body> </html>

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

HTML [Урок 1]

Zloo Администратор Команда форума

Поделиться этой страницей

О форуме

CONTACT US