Азбука HTML кода

Азбука HTMLС помощью языка гипертекстовой разметки построен весь Интернет и можно сказать, что это азбука HTML кода. Язык этот достаточно простой и применяется в основном таким образом, что около 20 % знаний языка позволяют выполнить 80 % работы при реализации любой задачи по созданию сайтов.

Существует много версий языка HTML, но до настоящего времени самая стабильная и часто используемая версия – HTML 4.01.

Страницы, созданные на языке HTML становятся доступными для просмотра с помощью специальных программ – браузеров.

Самыми распространенными из них являются Internet Explorer, Opera, Mozilla Firefox, Google Chrome.

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

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

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

Поэтому при создании блогов или сайтов рекомендуется установить сразу, например, четыре самых популярных браузера: IE, Opera, Firefox, Chrome. Html-странички при изучении языка можно писать в программе «Блокнот».

Тег, это такой элемент языка, который предписывает браузеру как следует отображать какой-либо объект. Например, чтобы выделить из текста абзац (параграф) необходимо в угловых скобках прописать букву <p>, после текста то же самое, только с обратным слешем перед буквой:

<p> текст </p>

Теперь браузер будет знать, что текст, заключенный в эти теги нужно изображать как параграф.

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

Это будет достаточно длинная строка, которую можно прописать один раз и затем вставлять во все будущие html-документы:

<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

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

Затем в обязательном порядке идет тег <head> и он тоже закрывается, образуя такой контейнер, в который складываются служебные теги, скрипты, ссылки на таблицы стилей, указываются мета теги, то есть все то, что пользователь не видит. Служебные теги помогают браузеру, поисковым роботам и несут другие функции.

Все, что должен видеть пользователь, заключается в тег <body>. Он идет после тега <head> и в него заносится вся информация, то есть все содержимое страницы.

Таким образом, структура html-документа отобразится так:

<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<head>

</head>

<body>

</body>

</html>

Сейчас разберемся в служебных тегах. Первый из них это <title> определяет название документа. Возьмем конкретную страницу:

<head>

<title>Как оптимизировать сайт</title>

Далее указывается кодировка документа. Для этого пишется специальный тег <meta>, а чтобы правильно была воспринята кодировка надо написать следующие слова:

http-equiv=”Content-type”.

Эти слова можно не запоминать, а набрать один раз и вставлять в дальнейшем в другие документы. После этого следует набрать:

content=”text/html”,

указывающий — какая будет информация, текст либо html, а дальше уже указать саму кодировку:

charset=”windows-1251”.

На данное время в русском интернете используется в основном кодировка — windows-1251. Закрывается тег meta, кстати он непарный, закрывающего тега не имеет. Таким образом:

<head>

<title>Как оптимизировать сайт</title>

<meta http-equiv=”Content-type” content=”text/html” charset=”windows-1251”>

Далее можно написать meta-теги для поисковых роботов. Первый из них – keywords является атрибутом meta-тега и отвечает за ключевые слова. Атрибуты тега, как правило, придают тегу значимость, задают дополнительные правила в отображении того или иного тега.

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

<meta name=”keywords” content=”сайт, оптимизация, контент”>

Следующим идет meta-тег описание – description, а в атрибуте content пишется краткое описание странички, то есть:

<meta name=” description” content=”На данной странице Вы найдете информацию о том, как правильно оптимизировать сайт под поисковые запросы пользователей”>

Таким образом, создается каркас документа, заполняется контейнер head служебными тегами. С учетом всего сказанного структура нашего документа будет иметь вид:

<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<head>

<title>Как оптимизировать сайт</title>

<meta http-equiv=”Content-type” content=”text/html” charset=”windows-1251”>

<meta name=”keywords” content=”сайт, оптимизация, контент”>

<meta name=” description” content=”На данной странице Вы найдете информацию о том, как правильно оптимизировать сайт под поисковые запросы пользователей”>

</head>

<body>

</body>

</html>

Таким образом, именно такая незатейливая азбука html кода делает любой сайт в интернете доступным для всех посетителей.

Оставьте комментарий

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