Загрузка...

Учим HTML с SmileyCoder

Тема в разделе Программирование создана пользователем SmileyCoder 9 сен 2017. 331 просмотр

  1. SmileyCoder
    SmileyCoder Автор темы 9 сен 2017 Заблокирован(а) 27 7 сен 2017
    Учим HTML - основу веб-разработки [#1]

    HTML - HyperText Markup Language или просто язык разметки. Неправильно этот язык называть языком программирования, он таковым не является.

    Для начала давайте разберемся, зачем вообще он нужен в вебе?

    Самый простой сайт (обычный, информационный), который не содержит никакого функционала обычно пишется на трёх языках - html, css, javascript

    (Про функциональность поговорим в следующих статьях, для начала разберемся в самом простом)

    Итак, за что отвечает каждый из языков:

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

    JavaScript - динамика сайта. То есть если вы напишите сайт только на html и css он будет статическим (ничего двигаться на странице не будет). Если вы добавляете скрипты на Javascript, то сайт становится визуально приятнее и воспринимается легче. То есть например вы создали интернет-магазин. С помощью джаваскрипта можно сделать анимацию добавления товара в корзину - как будто картинка летит в корзину.

    И наконец HTML - помогает сверстать страницу, то есть расположить логические блоки сайта так как надо. (Например меню сайта сверху, основной информационный блок ровно под меню, колонка с новостями правее и тд.)

    Приведу пример последовательной разработки сайта:

    Пишется структура сайта на html (Создаются разные блоки)

    Затем с помощью CSS вы эти блоки украшаете.

    Ну и наконец делаете динамику с помощью JavaScript.



    Теперь перейдем конкретно к HTML (если до этого этапа что-либо не понятно - не волнуйтесь, в процессе последовательного изучения всё встанет на свои места)

    Структура пустой html-страницы:

    [IMG]
    Разберём по порядку:

    Базовым элементом в html является тэг.

    Тэги бывают как двойными, так и одинарными.

    Двойные теги - имеют открывающий и закрывающий теги

    То есть например:

    <html> - открывающий тег

    </html> - закрывающий тег

    Тут html - название тега.

    Как понять, каким является тег - открывающим или закрывающим?

    В закрывающих тегах перед их названием обязательно ставится наклонный слеш.

    Таким образом в нашем примере 4 тега:

    <html>, <head>, <title>, <body>

    Каждый из них имеет закрывающий тег.

    Вообще структуру html-кода стоит рассматривать как капусту. Теги вкладываются в теги

    То есть например всё что находится между тегами <html> и </html> является их содержимым.

    Для тегов <head> и </head> содержимым является всё, что между ними (Тег <title>)

    У каждой страницы есть тег <title> - внутри него пишется название страницы, которое будет отображаться в названии вкладке

    [IMG]
    Вот например в коде этого сайта внутри тега title написано Telegraph

    Обычно в теге <head> пишется техническая информация о сайте, которая почти нигде не отображается.

    Всё содержимое сайта, которое увидит пользователь располагается внутри тега <body>



    Думаю, для первого (или далеко не первого) знакомства с вебом достаточно. Не буду сильно перегружать вас. Если есть желание поизучать структуры html-страниц различных сайтов - прямо на нужном сайте можно нажать правой кнопкой мыши и выбрать "просмотр кода страницы". Откроется новая вкладка, вы там сможете увидеть кучу кода, но попытайтесь на таких страницах найти теги, которые мы уже разобрали и убедитесь что внутри них находится именно то, что и должно быть.
     
  2. SmileyCoder
    SmileyCoder Автор темы 9 сен 2017 Заблокирован(а) 27 7 сен 2017
    лишь первая статья) дальше - больше.
     
  3. OxxxyDrocher
    OxxxyDrocher 9 сен 2017 Заблокирован(а) 329 12 ноя 2016
    го еще
     
  4. SmileyCoder
    SmileyCoder Автор темы 9 сен 2017 Заблокирован(а) 27 7 сен 2017
    сейчас закину)
     
  5. SmileyCoder
    SmileyCoder Автор темы 9 сен 2017 Заблокирован(а) 27 7 сен 2017
Загрузка...
Top