Основы HTML для начинающих

«Основы HTML для начинающих» – второй урок учебника HTML. Речь здесь пойдет об основных особенностях отображения и разметки текста. В данном уроке мы вплотную начнем работать с элементами разметки, предоставляемыми этим языком и вы на себе поймете, что язык действительно прост.

Основы отображения текста.

Разметка текста, принятая во могих популярных текстовых редакторах, таких как Microsoft Word или БЛОКНОТ, не может быть правильно интерпретированна в рамках спецификации HTML.

Вызванно это значительными различиями внутренней архитектуры вывода этих языков.

Основными элементами разметки языка HTML можно считать тег параграфа <p></p>, тег разрыва строки <br> и теги заголовков <h1></h1>,<h2></h2> и т.д. Количество пробелов между символами не может превышать 1-го. Если очень необходимо установить более одного пробела необходимо использовать символьный элемент - &nbsp. Рассмотрим сказанное на примере:

<p>Это простое предложение, которое является параграфом.</p>

<h1>Это заголовок уровня H1</h1>

<p>Выводим     несколько пробелов</p>.

Это простое предложение, которое является параграфом.

Это заголовок уровня H1

Выводим несколько пробелов

Элементы контейнера HEAD.

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

Внутри контейнера <HEAD> могут располагаться:

TITLE (заголовок страницы);
BASE (каталог для сайта по умолчанию);
META (служебные теги);
LINK (ссылки страницы);
STYLE (внутренний лист стилей);
SCRIPT (скрипты).

Изучая основы html для начинающих первым делом необходимо разобраться с элементами контейнера <head>. Должен сказать, что большинство учебников, посвященных изучению HTML начинается с описания именно этого контейнера, в то время, как читатель еще не достаточно подготовлен. Сегодня мы бросим беглый взгляд на элементы этого контейнера, не останавливаясь на них подробно. Все станет для вас намного понятней по мере изучения этого учебника.

Title.

Title – САМЫЙ ВАЖНЫЙ ЭЛЕМЕНТ РАЗМЕТКИ. Переоценить значимость этого тега практически невозможно. Заголовок страницы играет огромную роль в индексировании страницы поисковыми машинами. Именно заголовок страницы используется в качестве ссылки в строке выдачи результата ПМ. Оптимизация title является наиболее важным фактором внутренней оптимизации сайта.

Title играет немаловажную роль при программировании на JavaScript, определяя зону видимости переменных.

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

Base.

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

когда их можно заменить относительными:

,что дословно означает – «НА УРОВЕНЬ ВЫШЕ ОТ БАЗОВОГО РАСПОЛОЖЕН ФАЙЛ something.html»

Так вот базовым, по умолчанию, всегда принимается корневой каталог сайта, но вы без труда сможете это изменить посредствам тега <BASE>:

Данная запись означает, что в качестве базового каталога мы выбрали html, который расположен на уровень выше от корневого.

Link.

Служит для построения дополнительных, постоянных внешних связей документа:

REL определяет тип связи между документами, а TYPE определяет тип подключаемого документа. Для разных типов документов существуют разние методы интерпретации, поэтому следите за правильностью ввода.

Style.

Тег <style> позволяет задать внутреннюю таблицу стилей внутри тела html документа. Этот метод уже мало где используется ввиду дополнительного загромождения кода и тем самым, увеличения веса и времени загрузки документа. Но если вам где-нибудь понадобится этот метод, знайте:

<STYLE TYPE=text/css>
..описание стилей..
</STYLE>

Script.

Этот элемент разметки служит для использования и загрузки скриптов:

Meta.

Мета-теги содержат служебную информацию о документе.

Использование Мета–тегов – достаточно обширная тема, требующая отдельного урока, поэтому об использовании META–тегов мы поговори в следующий раз.

Использование комментариев.

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

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

В данном уроке мы разобрались с основами html для начинающих и посмотрели на него в действии, научились использовать элементы разметки и добавлять комментарии.

В следующий раз речь пойдет об использовании мета-тегов. Мы разберем особенности этих элементов и поговорим о каждом из них в отдельности.

Наверх

Источник: Создание сайтов