Создаем простую HTML страницу

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

Пример простой HTML страницы

Немного истории

HTML (Hyper Text Markup Language или язык разметки гипертекста) появился в 1990г и был призван помочь ученым в обмене научной информацией, да да именно так изначально был устроен интернет - небольшое количество людей из научной среды пользовались всемирной паутиной. Изначально язык HTML подразумевал форматирование текста (задание стилевого оформления, цвет текста, отступы, абзацы и т.д...) сегодня HTML содержит такие элементы как таблицы, формы и отвечает современным канонам интернет индустрии. С приходом HTML5 который, сейчас бурно развивается, появилась возможность использовать тэги, подходящие по смыслу как в XML, например, для заголовка страницы использовать конструкцию <header>...</header> в место обычного <div id="header">...</div>, а также добавлены теги <video>, <audio> призванные облегчить интеграцию видео и аудио в станицу сайта, в HTML4 эти вопросы решаются флэш технологиями, что усложняет код и требует установки флэш плеера для вашего браузера.

Пример HTML кода  страницы

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>TakProstoTak.ru - создать сайт просто!</title>
  </head>
<body>
  <h1>Заголовок материала</h1>
  <p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley   of type and scrambled it to make a type specimen book.
  </p>
</body>
</html>

Так выглядит типичная страница на HTML. Давайте попробуем разобраться, что она из себя представляет. Первой строкой идет <!DOCTYPE html PUBLIC... это обязательный тэг,  который сообщает браузеру стандарт и версию языка разметки документа (кроме HTML еще есть XML и XHTML). Следующий обязательный парный тэг заголовка  <head> внутри него идет тэг <meta...  ,который сообщает браузеру кодировку документа. Внутри парного тэга <title> прописывается заголовок страницы.

Следом за тэгом <head> идет парный тэг <body>, который содержит тело страницы - основное содержание вашей страницы.  В теле страницы у  нас расположены парный тэг - заголовок первого уровня <h1>, а также парный тэг абзаца - <p>. Внутри тэга абзаца находится одиночный тэг переноса на следующую строку <br/>.

Подведем итоги того, что стало ясно из анализа страницы:

  • HTML документ состоит из тэгов
  • тэги бывают парные (<h1>, <body>...) и одиночные (<br/>...)
  • тэги бывают служебные (<!DOCTYPE..., <meta...) и предназначенные для форматирования текста (<p>, <br/>, <h1>...)

Примечание: Важно соблюдать вложенность тэгов, если внутри парного тэга открывается другой парный тэг, то и закрыться он должен внутри родительского тэга. <p><span></span></p> - верная конструкция. <p><span></p></span> - ошибочная конструкция.

Технические средства

Создавать HTML документы можно конечно и в блокноте, но лучше для этого использовать специальные программы типа adobe dreamweaver или notepad++. Вот так выглядит HTML текст в редакторе notepad++


редактор notepad++

редактор notepad++

намного удобнее когда разные элементы текста сгруппированы по цветам, согласитесь. скачать notepad++

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

Создаем файл в notepad++, заполняем текстом из примера который был выше, сохраняем файл с расширением .html, открываем только что созданный файл в браузере и смотрим результат

Просмотр в браузере

Просмотр в браузере

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



Похожие статьи:
↑ Наверх ↑
  • Комментарии

Прокомментировать

Подписаться, не комментируя