Основы HTML, язык разметки гипертекста Hyper Text Markup Language

От автора

Язык разметки гипертекста Hyper Text Markup Language, а проще говоря HTML это основной язык создания веб-страниц. В этой статье проведем самое общее знакомство с языком HTML.

Язык разметки гипертекста Hyper Text Markup Language

HTML–документ строится на основе тегов. Теги создают структуру документа. Основные теги парные. Это значит, что если есть открывающий тег  типа <…>, то должен быть и закрывающий тег со слешем </…>. Стоит отметить, что бывают и не парные теги.

Весь  документ HTML обрамляется двумя тегами <html> … </html>. Как видите они парные. Кроме этого, в HTML документе должен присутствовать одиночный тег валидатор <!DOCTYPE> указывающий тип текущего документа.

У HTML 4 три валидатора, у HTML 5 валидатор один. Структура тега HTML 5 , следующая:

Примеры:

  • <!DOCTYPEHTMLPUBLIC “-//W3C//DTDHTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd”> для документов HTML 4.
  • <!DOCTYPE html> единый для всех документов HTML5.

Структура HTML документа

HTML документ состоит из заголовка (header) и тела (body). Заголовок обрамляется тегами <head> … </head>. Тело документа обрамляется парными тегами <body> … </body>.

Пример: Основной каркас HTML 5 документа должен иметь следующую структуру:

<!DOCTYPE html><html>

<head>

Здесь место для заголовка

</head>

<body>

Здесь текст документа

</body>

</html>

Структура заголовка

Заголовок <head> … </head>, включает несколько специальных тегов. Основные из них это теги:  <title></title> и <meta></meta>.

Тег  title

Это заголовок документа, выводится в заглавной части страницы.

Тег meta

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Для индексации веб страниц важны мета-теги description и keywords:

<meta name="description" content="краткое описание статьи">

<meta name="keywords" content="список ключевых слов">

Замечу, что современные поисковики перестали «видеть» keywords, но это не отменяет их использования. Внутреннюю перелинковку никто не отменял.

Пример веб-страницы на HTML

Приведу элементарную веб-страниццу на HTML:

<!DOCTYPE html>

<html>

<head>

<title>Моя любимая веб-страница</title>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">

<meta name="keywords" content="веб, страница, любимая">

</head>

<body>

Моя первая, а значит любимая веб-страница.

</body>

</html>

Изучая основы HTML, нельзя без изучения и использования специальных текстовых редакторов. Потому-что набирать любой текст страницы HTML нужно только в текстовом редакторе типа: NotePad++, Sublime Text2 и т.п. После набора документа его нужно сохранить с расширением htm или html. Cозданный файл открываем в любом браузере, которым вы пользуетесь.

Структура тела документа

Текст в документе (в тегах <body></body>) также разбивается на заголовки и части тегами.

Теги заголовка и абзаца

Текст, документа, может обрамляться  специальными тегами.
Абзац выделяется тегами

<p> … </p>

Заголовки разделов текста выделяется тегами

<h1></h1>,<h2></h2>, <h3></h3>, до <h6></h6>

Организуются теги заголовков в иерархической форме, а число в теге указывает на степень вложенности заголовка.

Пример применения тегов <p> и <h>:


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">

<title>Моя любимая веб страница</title>

</head>

<body>

<p>Обзац моей любимой веб-страницы</p>

<h1>h1 Категория товара</h1>

<h2>h2 Категория товара</h2>

<h3>h3 Категория товара</h3>

<h4>h4 Категория товара </h4>

<h5>h5 Категория товара</h5>

<h6>h6 Категория товара </h6>

</body>

</html>

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

Один из основных атрибутов тегов это атрибут форматирования, под названием align. Значение атрибута align:

  • left – выравнить по левому краю,
  • center – выровнять  по центру,
  • right – выровнять по правому краю,
  • justify – симметричное выравнивание по двум краям.

Пример:


<p align="left">Моя любимая веб-страница</p>

<h1 align="center">h1 Товар </h1>

<h2 align="right">h2 Товар</h2>

<h3 align="justify">h3 Товар</h3>

Такое форматирование называется физическим и в принципе устарело. Для форматирования лучше и рекомендовано использовать таблицы каскадных стилей (CSS).

Списки

Современный стандарт HTML предусматривает создание трех основных видов списков:

  • Списки маркированные (unordered list);
  • Списки нумерованные (ordered list);
  • Список определений терминов (definition list).

Рассмотрим каждый из видов списков.

Списки маркированные

Маркированные списки задаются тегами  <ul> … </ul>(unordered list). Для создания каждого элемента списка применяется теги <il> и </il> (item list).

Пример:

<ul>

<li>Товар 1 из списка товаров</li>

<li>Товар 2 из списка товаров</li>

<li>Товар 3 из списка товаров</li>

</ul>

В список можно помещать теги загловков:

<ul>
<h2>Заголовок списка</h2>

<li>Товар 1 из списка товаров</li>

<li>Товар 2из списка товаров</li>

<li>Товар 3 из списка товаров</li>

</ul>

Маркеры, то есть видимые значки перед элементами списка, могут меняться, а их внешний вид задается атрибутами type. Атрибуты type могут быть: circle (не закрашенный кружок), disk(закрашенный кружок) и square( квадрат закрашенный). По умолчанию используется атрибут disc. Пример использования маркера с атрибутом disk:

<ul type="disk">

<li>Товар 1 из списка</li>

<li>Товар 2 из списка</li>

<li>Товар 3 из списка</li>

</ul>

Списки нумерованные

Нумерованные или упорядоченные списки (ordered list), каждому элементу списка присваивается номер. Создаются нумерованный списки тегами <ol> … </ol>. Для каждого элемента нумерованного списка, также используются парные теги <il> …</il>.

В нумерованных списках используются пять атрибутов:

1-Цифры арабские; i- Римские строчные цифры; I- римские прописные цифры; a-Латинские строчные буквы; A-Латинские прописные буквы.

Пример нумерованного списка.

<ol>

<h4>Список Товаров нумерованный</h4>

<li>Товар1 из списка</li>

<li>Товар2 из списка</li>

<li>Товар3 из списка</li>

</ol>

Пример нумерованного списка с маркерами латинских строчных букв:

<ol type="a">

<li>Товар1 из списка</li>

<li>Товар2 из списка</li>

<li>Товар3 из списка</li>

</ol>

Списки определений

Для создания списков по типу термин-определение термина, применяются теги <dl> … </dl> (definition list) и <dd> … </dd> (definition description). Причем сам термин заключается в парный тег <dl>, а определение (объяснение) термина заключается в парный тег <dd>.

Пример:

<dl>

<h3>Заголовок</h3>

<dt>Термин 1</dt>

<dd>Объяснение термина 1</dd>

<dt>Термин 2</dt>

<dd>Объяснение термина 2</dd>

</dl>

Вложение списков

Любой тип списка, маркированный и нумерованный, можно друг в друга вкладывать. Вложение допустимо произвольное. Главное при создании вложенных списков не запутаться в парных тегах.

Пример вложенных списков:

<ul>

<h3>Вложенные списки</h3>

<li>Раздел товаров 1</li>

<ol>

<li>Раздел товаров 1.1</li>

<li>Раздел товаров 1.2</li>

</ol>

<li>Раздел товаров 2</li>

<ol type="i">

<li>Раздел товаров 2.1</li>

<li>Раздел товаров 2.2</li>

<li>Раздел товаров 2.3</li>

</ol>

<li>Раздел товаров 3</li>

<ol type="I">

<li>Раздел товаров 3.1</li>

</ol>

</ul>

Таблицы в HTML

Для структурирования документов HTML основной структурой являются таблицы. Правда, стоит отметить, что использование таблиц для организации структур страниц устаревает и уже признано не рекомендуемым.

Структура таблицы:

<table></table>//- парные теги контейнера таблицы;//
<table>
<tr> //контейнер для создания строки таблицы//</tr>
</table>
<table>
<tr>
</tr>
<td> //тег создания одной ячейки таблицы. Этот тег должен быть внутри контейнера <tr>, который должен быть внутри тега// 
<table></td>
</table>
<table><table border="2" cellpadding="5" cellspacing="6" height="90" width="90%"></table>
  • Border – рамка шириной 2 px;
  • Cellpadding-расстояние между внешними границами ячеек таблицы;
  • Cellspacing-расстояние между внешними границами ячеек таблицы.
  • Height- высота таблицы;
  • Width-  ширина таблицы.
  • Caption- тег для создания заголовка таблицы, может размещаться только внутри контейнера <table>.

Пример таблицы:

<table border="4" cellpadding="6" cellspacing="3" height="80" width="50%">

<caption>Простая таблица</caption>

<tr align="center">

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr align="center">

<td align="center">2-1</td>

<td align="right">2-2</td>

<td>2-3</td>

</tr>

</table>

Теги  colspan и rowspan
предназначены для объединения ячеек <td>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Объединение ячеек в HTML-таблице</title>
</head>
<body>

 <table border="2">
  <tr><td colspan="2">Ячейки 1.1 и 1.2</td><td>Ячейка 1.3</td></tr>
  <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
  <tr><td colspan="3">Ячейки 3.1 - 3.3</td></tr>
 </table>
 
</body>
</html>

Гиперссылки

Гиперссылки или просто ссылки это основной элемент документа HTML для связи документов, их оптимизации и продвижения в поисковых системах.

Тег реализующий ссылки в документах HTML, это парный тег-контейнер <a> … </a>

Основной атрибут этого тега href. Этот тег содержит адрес ресурса, на который ведет ссылка. Внутри тега-контейнера <a> </a> пишется текст ссылки.

Пример ссылки:

<a href="//webonto.ru/link1.htm">Ссылка на документ с абсолютным адресом 
;
<a href="link1.htm">Ссылка на документ с относительным адресом //webonto.ru/link1.htm</a>

Как видите из примера, в ссылках можно использовать, как абсолютные, так и относительные URL. Относительный путь это адрес документа относительно текущей страницы, но которой ссылка создается.

Якорь

Для ссылки на конкретное слово страницы, используется якоря. Чтобы сделать ссылку на якорь,  атрибуту href  дается имя якоря со значком решетка впереди имени:

<a href="#Якорь 1.1">Ссылка на якорь 1</a>

и

<a href="#Якорь 2">Ссылка на Якорь  2</a>

Чтобы сослаться на якорь, в другом документе, имя якоря с решеткой (#),  пишется сразу после  адреса стороннего документа, без пробела.

<a href="doc3.htm#Якорь3 в Документе 009" >Ссылка на Якорь 3 в 
Документе 009</a>

Рисунки в виде ссылок

Рисунки и фото также можно делать в виде ссылок. Для этого рисунок вставляется в текст с тегом <img>. Атрибута src  этого тега имеет значение файла картинки:

<img src="foto1.png">

Затем, картинка «оборачивается» в тег ссылки:

<a href="link1.htm"><img src="foto1.png" border="2"></a>

На этом все! Конечно, основы HTML не включают все особенности этого языка, но дают представление о формировании HTML документа.

 ©Webonto.ru

Другие статьи

Похожие статьи:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *