Если вы пришли в Интернет всерьез и надолго, быть вечным «чайником» не получится. Это значит, что хотя бы поверхностно придется ознакомиться и с HTML-CSS. В статье «Что должен знать блогер о HTML и CSS» мы рассмотрели общие понятия, теперь слегка коснемся структуры HTML-кода и тегов. CSS временно трогать не будем. Несмотря на то, что я правила CSS на своих сайтах, в таблицах стиля все же я пока «чайник». А вот в HTML перешла уже в разряд «самоваров»))).
Итак, как мы выяснили, HTML – это язык гипертекстовой разметки, на котором пишутся страницы сайтов. Читая этот код, веб-браузеры (Google Chrome, Internet Explorer, Firefox и т.д.) отображают на экране монитора содержимое веб-страниц.
Каждый браузер интерпретирует этот код по-своему, поэтому один и тот же документ выводится различными браузерами не всегда 100-процентно одинаково.
В связи с этим следует соблюдать правило веб-мастера № 1: опубликовав статью, всегда проверить, каким образом ее отображают самые популярные браузеры, и при необходимости внести коррективы.
Язык разметки представляет собой набор тегов. По сути веб-документы являют собой чередование фрагментов текстов с тегами. Все теги начинаются и заканчиваются угловыми скобками, между которыми заключены различные символы, например <head>, <br>, <div>. Теги выполняют функцию форматирования и не отображаются браузерами при просмотре страниц. Весь остальной текст, не заключенный между скобок, будет выведен на экран монитора. Существует огромное количество тегов и каждый из них выполняет определенную функцию. В действительности же рядовому веб-мастеру на практике требуется не более 10-20 тегов.
Итак, как мы выяснили, HTML – это язык гипертекстовой разметки, на котором пишутся страницы сайтов. Читая этот код, веб-браузеры (Google Chrome, Internet Explorer, Firefox и т.д.) отображают на экране монитора содержимое веб-страниц.
Каждый браузер интерпретирует этот код по-своему, поэтому один и тот же документ выводится различными браузерами не всегда 100-процентно одинаково.
В связи с этим следует соблюдать правило веб-мастера № 1: опубликовав статью, всегда проверить, каким образом ее отображают самые популярные браузеры, и при необходимости внести коррективы.
HTML теги
Язык разметки представляет собой набор тегов. По сути веб-документы являют собой чередование фрагментов текстов с тегами. Все теги начинаются и заканчиваются угловыми скобками, между которыми заключены различные символы, например <head>, <br>, <div>. Теги выполняют функцию форматирования и не отображаются браузерами при просмотре страниц. Весь остальной текст, не заключенный между скобок, будет выведен на экран монитора. Существует огромное количество тегов и каждый из них выполняет определенную функцию. В действительности же рядовому веб-мастеру на практике требуется не более 10-20 тегов.
Теги бывают парные и непарные. Большинство тегов применяются в паре, один из них -открывающий, другой - закрывающий. Закрывающий тег отличается от открывающего только наличием косой линии – слэша «/».
Примеры парных тегов:
<h1>заголовок первого уровня (heading) </h1> - указывает браузеру, что между тегами заключен самый крупный заголовок;
<h2>заголовок второго уровня</h2> - указывает, что данный заголовок меньшего размера, чем заголовок первого уровня;
<p>параграф (paragraph)</p> - указывает браузеру, что это параграф и нужно оставить пустое поле до него и после;
<b>текст жирный (bold)</b> - дает указание браузеру отобразить текст между тегами жирным шрифтом.
Пример непарного тега:
<br /> - одиночный разрыв строки (break). Согласно новым стандартам все непарные теги перед закрывающей угловой скобкой должны иметь пробел и косую черту.
Браузеры читают теги, написанные и в верхнем регистре, и в нижнем. Однако последние стандарты требуют при написании тегов использования только нижнего регистра.
Структура HTML-кода
Любой веб-документ имеет строго определенную структуру, содержащую в себе три пары тегов, расположенных в следующем порядке:
<!DOCTYPE html>
<html>
<head>
содержимое тега
</head>
<body>
содержимое тега
</body>
</html>
Данные теги могут использоваться без закрывающих тегов, а могут не использоваться вовсе. Однако их рекомендуется прописывать для более четкого разделения частей документа.
Пары тегов типа <html> </html>, <head> </head>, <title> </title> и т.п. называются контейнерами. Они могут заключать в себя другие теги и тексты.
Рассмотрим вышеперечисленные элементы подробнее.
- <!DOCTYPE html>. Данный элемент указывает на тип конкретного веб-документа. Поскольку в процессе эволюции HTML появилось несколько версий языка разметки, для правильной интерпретации документа браузеру необходимо сообщить, по какому именно стандарту его отображать.
- Тег <html>. Заключает в себя все содержимое веб-документа. Открывающий тег <html> всегда расположен после DOCTYPE , а закрывающий тег </html> всегда является последним элементом кода.
- Тег <head>. В переводе с английского head, как известно, голова. Данная заголовочная часть документа содержит в себе общее описание веб-страницы. Здесь размещаются название документа (тег <title>), мета-теги (description, keywords и др.) и пр. Содержимое тега <head> является рабочей информацией для браузера, оно не отображается на странице, за исключением тега <title>.
- Тег <body>. Body, в переводе с английского означает тело. Само название указывает на то, что внутри тега содержится "тело" документа,т.е. непосредственно та его часть, которая выводится на экраны (тексты, изображения и т.д.), а также теги, таблицы стилей и др.
HTML и CSS. Путь к совершенству | Бен Хеник | HTML и CSS: The Good Parts | Бестселлеры O'Reilly |
Related Posts : Как продвигать сайт
Отправить комментарий