Уроки HTML #1 - HTML для самых маленьких

Всем лучи добра, по совету @zoss, я посмотрел разные блоги о программировании и увидел приписку - Для этого этапа нужны базовые понятия HTML, но курсов по этим базовым понятиям так и не нашел. Поэтому я решил, что будет полезным передать свои знания новичкам.

Как гласят всякие различные учебники - HTML это HyperText Markup Language язык гипертекстовой разметки. Ну что? Все ясно? Если да - то Вы молодец и можете не читать статью дальше (но проголосовать все таки стоит).

Думаю стоит начать немного из далека. Вы когда нибудь смотрели на исходный код странички в браузере? Можете сделать это прямо сейчас - нажмите правой кнопкой и выберите пункт "Просмотр кода страницы" В разных браузерах название кнопки может отличаться - я привел пример для Chrome. После предложенных действий Вы увидите нечто подобное

Это и есть HTML - язык, описывающий расположение всех элементов на странице. Другими словами - HTML описывает расположение контейнеров и их содержимого внутри других контейнеров. Не совсем понятно? Ладно, попробуем по другому.

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

Основной коробочкой, показывающей браузеру, что дальше будет идти HTML код - является контейнер <html>:

<html>
</html>

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

Представьте, что это код страницы - главный контейнер HTML

В эту коробочку можно положить еще 2 коробочки head и body

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

Обратимся к волшебной коробочке:

А дальше как по феншую - в коробочку head мы складываем коробочки, описывающие нашу страничку, а в коробочку body складываем коробочки, которые будет видно на нашей страничке

Вот так будет выглядеть контейнер body:

<html>
    <head>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

Как вы могли заметить, у наших контейнеров есть начало <head> и конец </head>. И так нужно поступать с каждым контейнером - любой контейнер должен быть закрыт. Следите за этим, иначе аналогично содержимому обычной коробочки, содержимое вашего контейнера будет рассыпано.

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

<html>
    <body>
        <div id="sugar"> Сахарный песок </div>
        <div id="salt"> Соль </div>
    </body>
</html>

Я подписал свои контейнеры, и теперь знаю, в каком лежит сахар а в каком песок.

Некоторые контейнеры обязательны, а некоторые можно пропустить. Например в предыдущем примере я пропустил контейнер <head></head>. При отображении страницы, браузер добавит его сам.

Как я уже говорил, в контейнеры можно положить другие контейнеры. Например, у меня в холодильнике есть банка с соком и в контейнере для овощей лежит кочан капусты:

<html>
    <body>
        <div name="refrigerator">
           <div name="juice"> Банка с соком </div>
           <div name="container">
               <div name="cabbage"> Капуста </div>
           </div>
        </div>
    </body>
</html>

Взрослые люди контенеры называют тегам - в дальнейшем мы тоже так будем говорить.

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

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