HTML для самых маленьких #3 - тэг HEAD и его содержимое

Голова — всему начало

Всем лучи добра, в одной из прошлых статей я рассказал вам про язык HTML в целом. Кто еще не ознакомился - советую пролистать. Вообще я хочу написать структурированную серию статей. Вот задумывал эту статью в прошлый раз, Но пришлось отложить ее, что бы рассказать о путях. Признаюсь честно я покопался в интернетах для раскрытия этой темы.
В основном я использовал - http://htmlbook.ru/ - там отличная книга по тэгам. Советую добавить в закладки.

Уроки HTML #1 - HTML для самых маленьких
HTML для самых маленьких #2 - относительные и абсолютные пути
Сегодня, я расскажу вам конкретно про тэг <head></head>. Как мы помним, тэг head располагается внутри тега

<html>
    <head>
    </head>
</html>

Данный тэг используется для описание содержимого страницы, так же объясняет поисковику, какая информация расположена на странице, подключает скрипты и каскадные листы стилей CSS.

Поговорим о его возможностях подробнее. <head></head> это контейнер - значит в него можно помещать и другие контейнеры. В head мы можем положить следующие теги <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>

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

В этом листинге я указал страничке, что бы она искала запрашиваемые документы в по адресу
http://example.ru/subdir/. Это означает, что, если я нажму на ссылку, то откроется адрес
http://example.ru/subdir/common.html. Кроме этого, с помощью атрибута, мы указали, что все ссылки, будут открываться в окне. Так же сюда можно указать имя окна или фрейма, в который будет открыта ссылка.

Тэг basefont
Как можно догадаться из названия - данный тэг нужен для смены шрифта и его настроек.
Этот тэг можно указывать не только в <head>, но и в <body>. Такм образом можно достичь разных настроек для разных параграфов. Тэг <font> перебьет настройки тэга <basefont>. В качестве атрибутов, можно указывать color, face, size.

color - устанавливает цвет шрифта
face - название шрифта
size - размер шрифта

<html>
   <head>
        <basefont face="Arial, Helvetica, sans-serif" size="14" color="blue">
   </head>
   <body>
      Привет друзья, всем лучи добра
      <basefont face="'Open Sans', sans-serif" size="100" color="maroon">
      <p>Упс смениля цвет и размер - магия</p>
   </body>
</html>

Данный тэг работает только в Internet Explorer, к сожалению (или к счастью) у меня нет Windows под рукой - продемонстрировать его работу скриншотом я не смогу.

Тэг bgsound

Тэг <bgsound> определяет звуковой файл, который будет проигран после загрузки страницы. Проигрыванием можно управлять из скриптов и с помощью атрибутов

balance - управляет балансом звука между правой и левой колонками.
loop - устанавливает, сколько раз проигрывать музыкальный файл.
src - путь к музыкальному файлу.
volume - громкость звучания музыки.
Данный тэг можно использовать только внутри тэга <head>

<html>
   <head>  
      <bgsound src="townace.mid" loop="-1"> 
   </head>
   <body>
   </body>
</html>

В данном примере, после загрузки страницы проиграется звук из файла townace.mid.

Тэг style
Данный тэг позволяет указать стилистику отображения элементов на странице. Представляет собой контейнер. Располагается только внутри тэга <head>

На самом деле, начинке тега <style> можно выделить свой цикл статей=)

Тэг link
Данный тэг, предназначен, для подключения шрифтов или файлов со стилями на свою страничку.
Описание всех элементов на странице может занять очень много места. Поэтому можно складировать описания в файлы и запрашивать их на нескольких страничках.

В данном примере я подключил внешний CSS файл, благодаря чему - обычная кнопка приобрела интересные формы
Атрибуты

charset - кодировка документа.
href - путь к файлу.
media - определяет устройство, для которого следует применять стилевое оформление.
rel - определяет отношения между текущим документом и файлом, на который делается ссылка.
sizes - казывает размер иконок для визуального отображения.
type - MIME-тип данных подключаемого файла.

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

В этом примере, в тексте внутри тэга <script> я описал функцию, которая показывает сообщение при ее вызове.
Атрибуты

async - Загружает скрипт асинхронно.
defer - откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.
language - станавливает язык программирования на котором написан скрипт.
src - адрес скрипта из внешнего файла для импорта в текущий документ.
type - определяет тип содержимого тега <script>.

Тэг title
Данный тэг нужен, для того, что бы указать название сайта в заголовке браузера

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

Тэг meta
Вот и добрались до последнего тега. Последний в списке, но наверное один из самых важных тэгов. <meta> позволяет помочь поисковикам в формировании поискового ответа.
Например, многие поисковые системы ищут сначала метатег description, и если тега нет, то беруться первые несколько слов из текста для идентификации страницы.

<html>
    <head>
        <title>Мета тег Description</title>
        <meta name="description" content="Сайт об HTML и создании сайтов"> 
    </head>
    <body>
    </body>
</html>

Метатег keywords предназначен для хранения ключевых фраз для поисковиков, однако, люди так часто писали туда несоответствующую странице информацию, что большинство браузеров теперь не учитывают этот метатег при формировании ответа.

<html>
    <head>
        <title>Мета тег Keywords</title>
        <meta name="keywords" content="HTML, meta, tags, keywords"> 
    </head>
    <body>
    </body>
</html>

В следующем листинге представлен метатег для автоматической загрузки страницы

<html>
     <head>
         <title>Автозагрузка</title>
         <meta http-equiv="refresh" content="5; URL=https://www.google.ru/"> 
     </head>
     <body> 
     </body>
</html>

Браузер поймет эту запись так - через 5 секунд после загрузки страницы перейти на сайт https://www.google.ru/

Кодировка страницы

<html>
     <head>
         <title>Кодировка</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     </head>
     <body> 
     </body>
</html>

Данная конструкция позволит указать браузеру, в какой кодировке находится сайт. Если данной строки нет, то браузер попытается сам определить кодировку. Зачастую браузер ошибается, поэтому обязательно рекомендую вам указывать эту строку.

Ну что, на сегодня хватит? Получилось много текста. Спасибо всем кто дочитал до конца.

Спасибо за внимание
Подписывайтесь на мой блог и да прибудет с вами сила.