Язык гипертекстовой разметки HTML - основы разметки, функции

Содержание:

Откуда появился HTML
Что такое веб-документ
Формирование структуры
Файл стилей css

Откуда появился HTML

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

В 60-е годы ХХ века впервые в истории было употреблено понятие «гипертекст» учёным Т. Нильсоном. Его проект «Ксанаду» создавал электронные библиотеки, базы которых должны были храниться на спутнике и управляться с помощью радио и телефонной связи. Использование в работе гипертекстовых ссылок позволяло выполнение перехода с одного документа на другой.

На основе языка разметки документов SGML в начале 90-х г. Тимом Бернерсом-Ли был создан язык разметки гипертекста HTML. Однако он так и остался бы теорией, но М. Андриссен и группа студентов Иллинойского университета разработали первый браузер — Mosaic и запустили его бесплатное распространение. Во Всемирной паутине браузер демонстрировал гипертекстовые странички. С этого момента началось развитие веб-страниц и веб-серверов.

Благодаря своим достоинствам язык html стал использоваться повсеместно, что требовало создание стандартов для его использования, иначе в дальнейшем возникло бы разночтение. Консорциум W3C создал и принял первую спецификацию hypertext markup language. Со временем в язык вносились изменения и возникали следующие спецификации. Сейчас во всём мире принято использовать HTML5.

Что такое веб-документ

Язык html — специально стандартизированный, служащий для разметки документов в интернете.

В обычном понимании это просто текстовый файл. Он содержит в себе набор команд стандартной гипертекстовой разметки, назначение которых — указать браузерам, как правильно отображать содержимое. Примечательно, что для использования документа в интернете, текста собственно может и не быть, а вот структура должна присутствовать обязательно.

Гипертекстовые файлы имеют 2 расширения — .htm или. html, работать с ними можно в обычном блокноте Windows. Но гораздо удобнее использовать специально предназначенные инструменты. Веб-редакторы, которыми можно оформить содержание страницы, бывают:

Визуальные (принцип WYSIWYG) — WebProject, WYSIWYG Web Builder и т. п.
Не визуальные (только чистый код) — Notepad, Free HTML Editor и пр.
Комбинированные — Adobe Dreamweaver, FrontPage, Word и др.

В каких редакторах лучше работать, зависит от личных предпочтений и навыков владения инструментами веб-дизайнера.

Базовые элементы и команды языка html называются тегами (tag). Они являются регистронезависимыми и всегда находится в угловых скобках.

Структура тега выглядит так: <Тег параметр 1 = «значение» параметр 2= «значение">. Параметры также называют атрибутами. Пример: <img src="foto.jpg» alt="фото в статье">.

Теги делятся на 2 большие группы:

Одиночные (например, <meta>, <link>).
Контейнерные или парные.(<p></p>), состоят из открывающего и закрывающего тега и могут вкладываться друг в друга как матрёшка.

Формирование структуры

Любая страница, которую пользователи видят в браузере, имеет чёткую структуру — синтез html-элементов и текста.

Заголовок <head> и тело страницы <body> записываются в парный тег <html>, который сообщает браузеру, какое расширение ему нужно обработать. Согласно стандартам W3C, первым должен стоять тег <!DOCTYPE>. Он описывает тип документа — DTD и даёт браузеру команду как следует обрабатывать текущую страницу, так как не только есть разные версии HTML, но есть и другие технологии, например, XHTML, XML.

Полностью веб-документ будет иметь следующую структуру:

<!DOCTYPE html>

<html>

<head>

Заголовок сайта

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

</head>

<body>

<!--Тело сайта ->

</body>

</html>

Заголовок и тело страницы

Задаётся контейнерным тегом <head>, его функция заключается в определение названия документа и предоставление служебной информации для браузеров. В его составе обязательно должен присутствовать <title>Название…</title>, этот тег определяет название страницы. Это единственный видимый элемент заголовка. Все остальные теги относятся к служебным и браузерами не отображаются:

<base> — указывает адрес текущего документа, может изменить целевое окно для всех ссылок в теле документа (<base href="http://www.mysite.ru/" target="_blank">).
<basefont> — задаёт размер, цвет, шрифт текста (<basefont face="Arial, Helvetica, sans-serif" size="4″ color="blac">).
<link> — ссылка на внешние файлы стиля (css) (<link rel="stylesheet" href="style.css">).
<style> — позволяет описывать стиль в заголовке (<style type="text/css"> h1{color:#000000;}</style>).
<script> — описание скриптов или указание на сторонний файл, содержащий их (<script type="text/javascript" href="http://mysite.ru/myscript.js"></script>).
<meta> — теги для хранения информации.(<meta name="keywords" content="Ключевые, слова, через, запятую">).

С помощью тега <meta http-equiv="refresh" content="5; URL=http://anothesite.ru"> можно перенаправить посетителя на другую страницу, через определённое время, в этом случае 5 секунд. Это очень удобно, если, например, сайт переезжает на другой домен.

Всё, что расположено в контейнерном теге <body>, отображается в браузере. Это основное содержание страницы — текст, картинки, заголовки. Для улучшения читаемости и визуального восприятия используются разные элементы разметки. Важно соблюдать принцип вложенности и не забывать закрывать парные теги.

Команды оформления содержания

По типу содержимого и характе́рному поведению в структуре документа элементы html делятся на строчные и блочные. При вёрстке они дополняют друг друга. В случае необходимости, с помощью css некоторым блочным элементам можно задать свойство блочно-строчных, присвоив display значение inline-block.

Элементы строки:

<b>жирный шрифт</b>;
<strong>логическое выделение написанного</strong>;
<i>курсив физическая разметка</i>;
<em>выделение текста курсивом, логическая разметка</em>;
<big> увеличивает на одну единице текст</big>;
<small>уменьшает текст на 1 единицу</small>;
<sup>шрифт в верхнем индексе</sup>;
<sub>шрифт в нижнем индексе</sub>;
<a>определяет текстовые ссылки, имеет атрибуты: href=''ссылка'', name=''якорь''</a>;
<img> для вставки изображений в формате jpeg, png, gif;
<br> перенос строки.

Строчные элементы используются для форматирования текста. Могут включать в себя только другие строчные теги и данные. Свойство width не применяется, ширина регулируется объёмом содержимого и полей или отступов. Имеют возможность переноситься на другую строку.

Элементы блока:

<blockquote>цитата</blockquote>;
<div>блочный контейнер</div>;
<h1>Заголовки разного уровня в тексте <h1> - <h6>Другой уровень</h6>;
<p>абзац, новый параграф</p>;
<pre>вставка предварительно форматированного текста</pre>;
<hr> линия.

Блочные элементы могут формировать структуру документа, включать в себя другие подобные и строчные. Растягиваются по ширине, всегда начинаются с новой строки.

Таблицы и списки

Очень важно для веб-дизайнера уметь работать с таблицами. С их помощью гораздо легче представить структурированные данные, кроме того, сама вёрстка html-документа может быть табличной.

Таблицы в HTML создаются с помощью контейнерных тегов:

<table>

<tbody>

<caption>Название таблицы</caption>

<tr> строка

<th>Название столбца </th>

<td>содержимое ячейки</td>

</tr>

</tbody>

</table>

Управлять таблицей можно с помощью атрибутов: border — бордюр, alighn — выравнивание по ширине, valign — по высоте, cellpadding — отступ в ячейках, cellspacing — отступ между ячейками, width — ширина.

В интернет-страницах часто данные представляют в виде списков с помощью специальных тегов. Это не только улучшает восприятие содержимого, но и позволяет систематизировать информацию. Список представляет собой контейнер.

Его поведение в структуре веб-страницы аналогично блочным элементам. <li> - это всегда пункт списка.

Списки бывают трёх типов:

маркированные <ul><li></li></ul>.;
нумерованные <ol><li></li></ol>;
список определения <dl><dt>Термин</dt><dd>определение</dd></dl>.

Файл стилей css

Язык HTML имеет различные способы для форматирования содержания, но все они имеют заметные недостатки. Придётся оформлять все элементы на каждой странице сайта. Если это 1−2 страницы, это терпимо, но если страниц сотни или даже тысячи применяют Cascading Style Sheets — css. Такие стили можно сформировать в отдельном файле, ссылка на который с помощью тега <link rel="stylesheet" href="file.css">, выносится в заголовок документа, между <head> и</head>.

Для успешного использования файла стилей нужно будет назначить элементам свойства класса или присвоить значение id. Например: <div class="post">. Использование css:

Это облегчает изменение внешнего вида сайта и его элементов, ведь править приходится только один файл. А также с помощью css можно значительно уменьшить размеры документа.

В дальнейшем для работы с веб-документами необходимо будет изучить css, нелишними будут и уроки по javascript и php.