Skip to content
Menu
AzbukaBloga.Ru
  • Главная
  • Уроки WordPress
  • Обо мне
  • Услуги
  • Контакты
AzbukaBloga.Ru

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

Posted on 29.10.2012

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

  • html
  • для начинающих

11 thoughts on “HTML структура веб страницы”

  1. Лилия:
    23.11.2013 в 17:28

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

    Ответить
    1. Антон Лапшин:
      23.11.2013 в 21:46

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

      Ответить
  2. Лилия:
    24.11.2013 в 18:28

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

    Ответить
    1. Антон Лапшин:
      26.11.2013 в 11:52

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

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

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

      Ответить
      1. Лилия:
        27.11.2013 в 14:47

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

        Ответить
        1. Антон Лапшин:
          28.11.2013 в 21:40

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

          Ответить
    2. Слава:
      26.11.2013 в 12:02

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

      Ответить
  3. Слава:
    28.11.2013 в 22:22

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

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

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

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

    Ответить
    1. Лилия:
      29.11.2013 в 12:43

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

      Ответить
      1. Антон Лапшин:
        29.11.2013 в 22:03

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

        Ответить
    2. Антон Лапшин:
      29.11.2013 в 22:01

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

      Ответить

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Нажимая на кнопку 'Отправить комментарий', вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности сайт AzbukaBloga.ru.

19 − девять =

Рубрики

  • Бесплатности
  • Блоггинг
  • Дизайн
  • Конкурсы
  • Личные записи
  • Новости блога
  • Полезное
  • Раскрутка блога
  • Сайтостроение
  • Шопинг онлайн

Чек-лист по настройке Яндекс Директ

Свежие записи

  • Как я набрал 4507 подписчика или какие самые эффективные каналы сбора подписной базы
  • Не знаете чем открыть формат WebP? Я вам помогу
  • Вспомнить Все любой ценой или Evernote наступает
  • Блог долго грузиться? Ответ — удаляй плагин
  • Как установить счетчик посещаемости Liveinternet?

Свежие комментарии

  • Кирилл к записи Про это забывают 92% блоггеров
  • Марина к записи Не знаете чем открыть формат WebP? Я вам помогу
  • Михаил к записи Популярные SEO блоги
  • Павел к записи Как установить счетчик посещаемости Liveinternet?
  • Людмила к записи Услуги
©2022 AzbukaBloga.Ru | WordPress Theme: EcoCoded
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.