Уроки 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. В дальнейших уроках поговорим об этом более подробно.

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

образованиепрограммированиеверсткаобучение
25%
30
19
6.594 GOLOS
0
В избранное
Александр
Блог о том и о сем
19
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (0)
Сортировать по:
Сначала старые