HTML (HyperText Markup Language) - в переводе с английского: язык гипертекстовой разметки. То есть на самом деле на сайтах мы с вами видим обыкновенные текстовые документы. Но они размечены специальным образом, чтобы текст был наглядным.
Для того чтобы научиться писать простейшие сайты, никаких особых навыков и сред разработки не нужно. Для написания простого сайта достаточно текстового документа, который нужно сохранить с расширением html и всё, сайт готов.
Например, если создать в блокноте пустой текстовый документ, добавить туда текст “Урок 1” и сохранить документ как “Урок 1.html”, то это будет готовый простейший сайт. Это легко можно проверить открыв его в браузере.
Браузер - это программа, которая помогает просматривать интернет страницы. Браузеры бывают разные, но смысл и принципы их работы одинаковы.
Рисунок 1. - Фрагмент интернет страницы с текстом “Урок 1”.
Для того чтобы придать тексту различную функциональность и эффекты, нужно его разметить специальным образом. Это и делается с помощью языка HTML.
Все языковые конструкции языка состоят из специальных блоков - тегов. Это как кирпичики из которых строится web-страница. Каждый тег начинается с символа < и заканчивается символом >, например, тег <p>
.
Все теги можно разделить на две большие группы: одиночные и парные. Парные теги состоят из двух - открывающий и закрывающий тег. Закрывающий тэг содержит символ /. Пример закрывающего тега:
<p>Это пример парного тега</p>
Как вы видите тег <p>
имеет пару: закрывающий тег </p>
. Парными тегами обычно выделяют часть текста, которую нужно оформить.
Есть и такие элементы, которые итак являются одиночными. Например, разделительная полоса или изображение. Для них достаточно одиночного тэга, парный не нужен.
И ещё один момент, как и во многих других языках программирования, иногда требуется писать комментарии, здесь они будут следующего вида:
<!-- это комментарий-->
Теги могут быть вложены друг в друга. Например, так:
<p>Урок 1:<strong>Привет, мир!</strong></p>
Здесь в тег <p>
- параграф, вложен тег <strong>
- полужирного шрифта. И тот текст, который обрамляет тег <strong>
будет полужирным.
Если открыть этот документ в браузере, увидим:
Рисунок 2. Вложенные теги.
Запомнить: