Введение в HTML. Создаем свою веб-страничку.

Ну кто не мечтал о своем собственном блоге или о создании очень популярного сайта, которым будут пользоваться миллионы людей в Интернете? И одной из основных технологий веба на текущий момент остается язык разметки гипертекста — HTML.

HTML(HypeText Markup Language) — это язык описания веб-страниц. Язык не в привычном многим императивном стиле(когда шаги алгоритма выполняются один за другим и приводят к какому-то результату), а в декларативном. В декларативном программировании мы не указываем, что должна делать программа по шагам, а говорим о том, как она должна это сделать.

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

Веб-страница на языке HTML описывается при помощи специальных элементов(можно их называть также ключевыми словами) — тегов. Браузер последовательно парсит полученный документ, распознает теги и постепенно его отображает.

Тег — это специальный элемент описания веб-страницы, заключенный в угловые скобки и описывающий какой-нибудь компонент страницы. Большинство тегов имеют парные закрывающие теги. Например теги <html> и </html> являются основными для любого документа HTML и их присутствие говорит браузеру о том, что текст внутри данных тегов должен интерпретироваться вашим им как документ HTML. Тег <head> определяет заголовок веб-страницы, а тег <body> — это основное содержимое, то, что вы видите в окне браузера, когда заходите на тот или иной сайт.

HTML — это сама по себе спецификация, описывающая набор различных элементов(тегов), которые могут обрабатываться браузером. В ней определено множество различных тегов для отображения всевозможными компонентами на странице — вроде определения абзаца(<p>), переноса строки(<br>), добавления внешних ссылок на другие страницы(<a>), даже отдельные теги для видео(<video>) и аудио(<audio>).  Последняя версия спецификации на текущий момент называется HTML5.

Обычная работа сервера и клиента(браузера) на данном этапе построена именно на получении с сервера набора веб-страниц, взаимодействия с ними и управлении навигацией. Браузер на своей стороне при получении документа HTML начинает его разбор, определяя что за компонент(описанный тегом) перед ним и соответственно отображает его.

Так давайте еще раз взглянем на созданную нами веб-страницу. Запустив ее в одном из доступных браузеров, вы должны получить следующее:

На основной странице отобразился текст, который мы описали внутри тегов <body></body>. Это основная часть документа. Давайте посмотрим, как его еще можно преобразовать. Немного изменим исходный документ:

Откроем страничку в браузере:

Текст выделился жирным. Значит тег <b> отвечает за выделение текста.

Давайте теперь напишем что-нибудь еще:

Результат:

Если у вас на экране вместо русских символов отобразились «кракозябры», то добавьте внутрь тега <head> тег <meta> для указания кодировки документа и проверьте, чтобы ваш html-документ был сохранен в кодировке UTF-8:

Ну и последнее, что мы сделаем в этом уроке — выделим в отдельный абзац фразу «Введение в HTML». Для этого надо поместить этот текст внутрь тега <p>:

Итоги.

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

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

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