Привет! В сегодняшней статье я постараюсь прописать самую основную и полезную информацию для тех, кто пытается разобраться с языком гипертекстовой разметки HTML. Мы выясним его назначение, в обзоре будут описаны основные тэги и команды языка HTML и принципы работы с ним. Из статьи вы узнаете для чего и как использовать HTML на практике при работе с блогом или сайтом.

Основные цели и задачи HTML

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

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

HTML является инструментом, так называемой, front-end разработки сайта. Что это означает? Наверняка вы уже не раз слышали, что есть такие понятия в среде создания сайтов, как front-end и back-end. Так вот, к front-end-разработке (внешний интерфейс) относятся инструменты и языки, которые отвечают за отображение сайта непосредственно для пользователя. Происходит отображение при помощи разных браузеров (Internet Explorer, Opera, Mozilla, Chrome и т.д.). Читайте о том, . Браузеры хорошо понимают HTML и CSS и преобразовывают полученную информацию в понятный для пользователя вид.

Back-end разработка основана на серверных языках, например, PHP. С помощью кода PHP данные сайта распознаются сервером, а далее передаются браузеру после преобразования кода специальным интерпретатором. Т.е. браузер так или иначе получает сайт в виде HTML разметки и CSS стилей. Посмотреть исходный код сайта можно, к примеру, в . Из исходного кода не всегда можно определить, на каком языке программирования написан сайт, но коды стилей CSS и теги HTML вы увидите независимо от этого.

С чего начать изучение HTML?

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

Самая новая версия языка HTML, возможности которой выходят далеко за рамки только разметки структуры текста – это HTML5. Кроме того, по сравнению с HTML4, в последней версии появилось много новых тегов, изменилась семантика.

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

Для создания html-документа будем использовать удобный редактор .

Первое, что необходимо объявить — это тип документа со ссылкой на соответствующий ему раздел :

А теперь составим простую страницу index.html с последующими комментариями:

Заголовок №1 страницы

Подзаголовок 2

В итоге в браузере отображается такая страница при открытии данного файла index.html:

Разберем его составные части подробнее.

Каркас документа это теги: html, head, body. Причем в тег html заключены все остальные:

Соответственно тег html объявляет об открытии для чтения и закрытии html-документа ( — открывающий тег, — закрывающий тег).

Head – это «голова» документа, в нее включена информация, которая не будет отображаться в теле документа. Соответственно body – «тело» документа, или его видимая часть.

В head мы указываем кодировку (charset=utf-8) и title страницы. Далее для приведенного варианта мы подключаем стили с помощью тега

В нашем случае мы прописываем стили для блоков blok1 и blok2. Блоки эти мы создали внутри тегов body с помощью тегов