Терминология в HTML

История создания HTML

Давайте немного познакомимся с историей создания html. В 1989 году Тим Бернерс–Ли предложил использовать гипертекст, а в 1991 году он создал документ "HTML Tags" в котором были описаны некоторые теги для гипертекста. Стандарт HTML 2.0 был принят и опубликован IETF (Internet Engineering Task Force). Да, да вы не ошиблись - стандарта HTML 1.0 вообще не было. Позже на смену IETF пришел, всем известный W3C (World Wide Web Consortium). Как вы могли заметить из названия World Wide Web Consortium все сайты начинаются на www. Последующие стандарты HTML стали публиковаться наwww.w3c.org

Наиболее удачной версии, как я считаю стала HTML 4.01, конечно после неё были и XHTML 1.0 и XHTML 1.1, которыми многие пользуются, но времена требовали перемен. После W3C хотели создать новый стандарт XHTML 2.0, но это был полный провал. И в 2009 году концориум W3C принял решение отказаться от разработки XHTML 2.0 в пользу нового языка гипертекста HTML5.

Но в этом в этом учебнике я не буду писать об HTML5 т.к. это совершенно новый язык гипертекста, который вы также сможете изучить отдельно. Здесь я постараюсь дать вам определенный минимум, который должен знать каждый для создания сайта. Речь пойдет об стандарте HTML 4.01, он по моему мнению наиболее подходит для ознакомления с этим языком. Многие скажут, зачем учить HTML, когда в интернете полно всяких CMS и конструкторов сайтов. Но уверяю вас рано или поздно вы столкнетесь со многими сложностями, исправление которых может стать для вас очень проблематичным занятием. Да и как мне кажется знания не бывают лишними.

Терминология в HTML

Скоро вы начнёте знакомство с HTML, а пока я предлагаю вам познакомиться с основными терминами этого языка:

Элемент (element) - конструкция языка гипертекста HTML, содержащая данные и позволяющая редактировать их определенным образом. Все страницы сайта содержат множество элементов, которые в совокупности и дают то что мы видим на экране.
Тег (tag) - определяет границы действия какого-нибудь элемента сайта и отделяет элементы друг от друга. В тексте веб-страницы теги заключаются в угловые скобки "<" и ">", а конечный тег всегда имеет слэш "⁄".
Гиперссылка - фрагмент гипертекста, который имеет возможность перебросить пользователя на новую страничку сайта или на другой ресурс.
Фрейм - область гипертекстового документа, который позволяет прокручивать дополнительную информацию в специальном окошке, не выходя со странице сайта (считаю, что фреймы давно устарели).
HTML-страница - файл, созданный в виде гипертекста HTML.
Скрипт (script) - программа, входящая в состав веб-страницы для расширения ее возможностей. Как раз благодаря скриптам мы можем видеть динамические страницы.
Код HTML - гипертекст в своем первоначальном виде, т.е. текст, состоящий из тегов и элементов языка HTML.
World Wide Web (WWW) - без комментариев, это всемирная паутина, позволяющая нам вовсю бродить по просторам интернета.
Язык HTML - основной (да и пожалуй единственный на сегодняшний день) язык гипертекста для создания сайтов в Интернете.
Веб-страница - документ (файл), созданный в формате гипертекста HTML.
Сам сайт - набор веб-страниц, принадлежащих одному владельцу.
Браузер (browser) - программа для просмотра Веб-страниц. Браузеров много, но основных не очень много.
URL (Uniform Resource Locator) - адрес сайта в Интернете.
Базовый URL - часть адреса, которая является общей для всех страниц текущей Веб-страницы.

Введение в HTML

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

Здесь вы познакомитесь со стандартом HTML 4.01, но есть и другие версии. Я считаю, что эту базу должен знать каждый. Ну что пожалуй после небольшого вступления пора переходить к делу, а дел поверьте мне у нас очень много!

Структура HTML

В этой статье мы перейдем непосредственно к изучению кода языка гипертекста и познакомимся со структурой документа HTML. Почти любой файл (документ) html имеет следующую структуру:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Я сказал почти любой т.к. в html5 структура документа может отличаться.

Теперь постараемся разобраться с этой структурой. Она состоит из контейнеров, в каждый из которых вносится определенный код. Самый большой контейнер <HTML></HTML> вмещает в себя весь документ HTML. Никогда не пишите код за этим контейнером, иначе можете нарваться на неприятности. Единственное не забывайте указывать доктайп перед этим контейнером. Бывало встречал сайты без него. В следующем контейнере <HEAD></HEAD> располагаются служебные команды, которые не выводятся на экран, но дают браузерам и поисковикам информацию о файле, которая помогает правильно отображать и индексировать сайт. И последний контейнер <BODY></BODY>. В нём как раз и располагается вся информация, которую может видеть пользователь.

А теперь когда вы познакомились со структурой документа HTML, предлагаю вам создать первую страничку возможно вашего будущего сайта. Для этого нам подойдет простой блокнот от Windows. Он находится в панели "Пуск" в следующей директорииПуск=>Программы=>Стандартные=>Блокнот. Открывайте его внесите в него следующий код:

<!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=utf-8">

<title>Заголовок страницы сайта</title>

</head>

<body>

<h1>index.html - Главная страница сайта</h1>

<p>Основной текст.</p>

</body>

</html>

После этого сохраните документ с разрешением *.html, пускай, предположим, он будет называться index.html. Далее открываем этот файл любым браузером, для этого нажимаете открыть с помощью ... Вот в принципе и все, вы создали первую страничку. Но кроме двух строчек на ней больше ничего нет, а для того чтобы там что-то появилось, надо внести код элементы, теги и т.д в контейнер .

Мета теги в HTML

Из предыдущего урока вы узнали какую структуру имеете HTML документ, и из предложенного мною примеры вы наверное заметили, что в контейнер

было вложено следующее:

А теперь постараемся с вами разобраться что же это такое.

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

Скажу вам сразу можно обойтись и одним мета тегом, но лучше этого не делать. Лично я, использую минимум 3 мета тега. Сейчас мы их разберём по порядку.

Этот мета тег указывает тип и кодировку документа HTML. content="text/html - указывает, что этот документ будет содержать текстовую информацию, оформленную на HTML. charset=utf-8" - указывает кодировку документа. Данный мета тег позволяет разным браузерам отображать документ максимально корректно. Этот мета тег по праву можно считать наиболее важным тегом описания документа.

Этот мета тег предоставляет краткое описание страницы сайта, используемое поисковиками для составления так называемого "сниппета" (краткого описания страницы, расположенного под заголовком сайта).

В этот мета тег мы вводим ключевые слова, находящиеся на странице сайта. Правда на сегодняшний день многие пренебрегают данным мета тегом, так как он мало что даёт при оптимизации страницы сайта. Об оптимизации Description и Keywords я уже писал в разделе раскрутки и оптимизации сайта. Остальные мета теги не особо влияют на развитие сайта. Можно также указать и авторские права и самого автора сайта при помощи других мета тегов, но они совсем не обязательны. Также существует возможность блокировки страницы от индексации поисковиками. Но я думаю, для создания сайта вам будет достаточно знать эти три мета тега.