«Единственный способ творить великие дела – это любить то, что ты делаешь»
HTML



Определение в Википедии: HTML (от англ. HyperText Markup Language - язык разметки гипертекста) – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. 

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

Язык HTML отвечает за разметку страницы, за порядок и последовательность расположения ее элементов. При помощи HTML элементам страницы задают определенные свойства и характеристики. Редактирование текста - это тоже HTML.

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



Теги парные и одиночные

Основой языка HTML являются теги. Каждый элемент страницы обозначен тем или иным тегом.

Тег - это «метка», состоящая из буквы или нескольких букв, заключенных между символами «меньше чем» - "<" и «больше чем» - ">". Теги бывают парные и непарные (одиночные).

- парные теги. У таких тегов сначала идет открывающий тег - между символами "<" и ">", сообщающий браузеру о начале своего действия в данном месте; затем закрывающий тег – между символами "</" и ">" (то есть у закрывающего тега к символу «меньше чем» - "<" добавляется слэш /), сообщающий браузеру о завершении своего действия .

Закрывающий тег не всегда является обязательным.

- одиночные теги не имеют закрывающего элемента.

Парный тег <q> - открывает кавычки. Он имеет обязательный, закрывающий кавычки, тег </q>.

Фрагмент кода
<q> Кавычки </q>
Результат

Кавычки

Парный тег

Парный тег <p> - создает новый параграф. Он имеет закрывающий тег </p>, который не является обязательным!

Каждый следующий тег <p> не только создает новый абзац, но и завершает предыдущий. Новый абзац будет отделен от предыдущего пустой строкой.

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

Атрибуты тега являются его дополнением - они задают дополнительные правила отображения содержимого тега на странице.

Например, атрибут align тега <p> определяет выравнивание содержимого тега (текста) по горизонтали.

Многие теги имеют несколько атрибутов, среди которых есть обязательные. Есть теги не имеющие атрибутов!

Фрагмент кода
<p> Первый абзац - его завершение не обозначено закрывающим тегом.
<p align="center"> Второй абзац имеет закрывающий тег. Атрибут align задает выравнивание текста по центру в горизонтальной плоскости!</p>
Результат

Первый абзац - его завершение не обозначено закрывающим тегом.

Второй абзац имеет закрывающий тег. Атрибут align задает выравнивание текста по центру в горизонтальной плоскости!

Одиночный тег

Одиночный тег <br>, использующийся для переноса строки, не имеет закрывающего тега и не имеет атрибутов.

Фрагмент кода
<p> С помощью тега <br> установим перенос строки внутри текущего абзаца. </p>
Результат

С помощью тега
установим перенос строки внутри текущего абзаца.

Редактор HTML

По сути веб страница - это обычный текстовый документ, поэтому для ее создания можно воспользоваться простым текстовым редактором, который является частью ОС Windows - Блокнотом.

Естественно, существует несколько визуальных редакторов для работы с HTML, лидером среди которых является Dreamweaver - HTML-редактор от компании Adobe.

Но Dreamweaver и другие специализированные HTML-редакторы - это помощники, которые автоматизируют работу с кодом. И перед тем, как приступать к их помощи и начинать с ними работать, необходимо этот код знать. Поэтому первые шаги в изучении HTML и CSS (Cascading Style Sheets - каскадные таблицы стилей) следует делать, используя Блокнот. При этом набирать код Вы будете вручную - с клавиатуры. А это как раз то что нужно для начинающих изучение языка HTML и технологии CSS.

В дальнейшем, естественно, необходимо переходить к специализированным HTML-редакторам.




HTML по шагам

Все теги HTML

Тематические публикации

Тематические публикации