HTML структура веб страницы

Здравствуйте друзья! В сегодняшней статье хочу вам рассказать, что собой представляет структура обычной html страницы. Как говорится, основы основ знать нужно. Так что, читаем и вникаем…


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

Теперь же, когда мы установили локальный сервер Денвер, можем уже целенаправленно создавать наши интернет странички. Давайте взглянем, что же собой представляет страничка изнутри, т.е. посмотрим код, который читает наш веб-браузер. Взгляните, какие сложные буковки и цифры у исходного кода страницы Яндекса :-)

браузер выступает в роли некого конвертера-переводчика, который трансформирует весь код в понятный для нас и привычный вид веб-страницы.

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

Структура вебстраницы

Как видите, основой страницы являются латинские надписи заключенные в специальные скобки, которые вы можете найти у себя на клавиатуре :-)

Путем заточения слов в такие скобки, получаются так называемые теги. Существуют открывающиеся теги и закрывающиеся (со «слешом» в начале). Запомните это! Раз вы открыли тег, обязательно в конце закройте.

В конструкции любой веб страницы всегда присутствуют основные теги (html, head, body) между которыми и пишется весь основной программный код. Таким образом, чтобы создать сайт на html, нужно будет сделать множество страничек. Взгляните на простую структурную схему сайта

Здесь, под каждый раздел сайта (контакты, о компании и т.п.), нужно создавать отдельную HTML страницу. Это хорошо, когда сайт небольшой, а когда у вас 100 или 1000 страниц. Что делать в этом случае? Создавать все вручную? Нет, не пугайтесь, вот здесь нам на помощь придут системы управления сайтами (англ. CMS), о которых я расскажу в ближайших статьях. Не пропустите.

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

 

С уважением, Антон Лапшин
автор блога http://AzbukaBloga.ru

Приз за первый комментарий
 

Комментарии: 11

  1. 2013-11-23 в 17:28

    Еще недавно я считала эти коды каким-то наисложнейшим явлением. А присмотрелась, вроде не так страшен этот «черт». Конечно учиться надо основательно. Не могли бы вы, Антон, посоветовать доступных авторов, которые учат кодикам с самых азов. Так сказать для чайников.

    • Антон Лапшин :
      2013-11-23 в 21:46

      Я сам учился по курсу Евгения Попова «PHP для начинающих» и по статьям в сети.

  2. 2013-11-24 в 18:28

    А в чем отличие РНР от НТМL?
    А также пользовательский CSS, что означает (вкратце опишите, пожалуйста)? Спасибо.

    • Антон Лапшин :
      2013-11-26 в 11:52

      HTML — это более простой язык для создания веб страничек. PHP — продвинутый язык програмирования, который в может добавить вашему сайту ОГРОМНОЙ функциональности. Представьте, если я сам делал каждую страничку для этого блога в ручную, когда хотел написать новую статью. Это жуть в полном смысле слова.

      А благодаря PHP, на котором создан движок WordPress — эта процедура упрощается до безобразия.

      А CSS — отвечает за оформление HTML странички (фон, логотипы, отступы и т.п). Если что непонятно Лилия, то Спрашивайте.

      • 2013-11-27 в 14:47

        Ну хоть немного в различиях поняла, спасибо. А чему из этого надо обучиться, чтобы понимать в кодах блога?
        CSS тоже ведь коды?

        • Антон Лапшин :
          2013-11-28 в 21:40

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

    • 2013-11-26 в 12:02

      Отличие большое.
      html – это язык гипертекстовой разметки.
      PHP Это уже язык программирование.

  3. 2013-11-28 в 22:22

    По мне дак вообще HTML учить не надо, за исключением основных тегов B BR H1 BODY и все такое. HTML таблицу и много другое можно и «Визуально» создать, в Dreamweaver без этой проги вообще не куда))) Я на CS3 подсел ещё давным давно.

    А что бы в кодах Блога понимать, я так делал. открывал нужны мне файл и смотрел что где выводится, что не понятно, брал, например функцию «the_author()» и в google её, а там все ответы и сразу все понятно.

    Что бы тему отредактировать пользовался методом тыка:) Допустим мне надо под статьёй вывести форму подписки, открывал single.php и в подозрительных местах вставлял чушь «124213» после смотрел где на блоге чушь выведится, если там где надо то чушь заменял на код формы. А после css что аккуратно форму сделать

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

    • 2013-11-29 в 12:43

      Обнадежили, что научиться можно этим кодам. Спасибо, за советы.

      • Антон Лапшин :
        2013-11-29 в 22:03

        можно, как гласит правило Паретто, нужно выучить всего 20% процентов что-бы успешно разбираться в чем-то.

    • Антон Лапшин :
      2013-11-29 в 22:01

      Это точно Слав, метод тыка самый действенный и полезный способ изучения ) сам постоянно использую, особенно работая с html. Что-то поменял, потом смотрю в браузере что получилось, и так несколько раз пока не найду компромиссный вариант.

Добавить комментарий

На вверх