Если вы решили заняться веб-разработкой или изучать языки программирования, то в первую очередь начните с HTML. Самые простые веб-страницы написаны полностью на этом языке. А это значит, что изучив такой язык разметки, вы сразу же сможете открыть свою страницу в интернете.
HTML — это сокращение от HyperText Markup Language (язык гипертекстовой разметки). Говоря простыми словами, HTML — это язык разметки для создания веб-страниц и веб-приложений. Обратите внимание на то, что это не язык программирования а язык разметки!
Для начала, давайте совершим небольшой экскурс в историю создания этого языка.
Первая версия HTML была создана Сэром Тимоти Джоном Бернерсом-Ли (Sir Timothy John Berners-Lee) в 1991 году и состояла из 18 элементов.
В 1996 году выходит CSS (Cascading Style Sheets) — каскадные таблицы стилей. CSS это просто формальный язык, который мы используем для описания внешнего вида HTML-документа. То есть, когда вы видите красивый сайт, вы смотрите на работу CSS. Используя CSS, мы управляем размером, цветом, размещением, компоновкой и временем показа элементов на веб-странице.
HTML 3.2 и 4.0 вышли в течение 1997 года. Кроме всего прочего, разработчики добавили обтекание объектов текстом и возможность построения таблиц.
В декабре 1999 вышла версия 4.0.1.
В 2002 году появился XHTML 1.0 — расширенный язык разметки гипертекста. Он является частью семейства языков разметки XML.
2012 год — выход HTML5. Это пятая и, на данный момент, основная версия стандарта этого языка разметки.
В языке гипертекстовой разметки используются простые команды, которые называются тегами. Когда браузер читает вашу веб-страницу, он интерпретирует все теги, которые окружают основной текст программы.
Как работает HTML?
Теги — это обычные слова или символы в угловых скобках, например <head>, <p>, <h2>, <strong>, <body> и т.д. Используйте теги HTML, чтобы сказать браузеру, какая часть текста является названием, где начинается новый абзац, что подчеркнуть и где расположить изображения.
<!-- Небольшой фрагмент кода HTML --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body class="Home"> </body> </html>
Это очень простой пример, но он показывает все основные элементы, которые необходимы для создания простой веб-страницы.
В начале нашего примера, можно увидеть краткую форму объявления типа документа: <!DOCTYPE html>. Объявление типа документа появилось в языке HTML5. В наше время, применять другие объявления, отличные от простого <!DOCTYPE html> из HTML5, не имеет смысла.
При объявлении типа документа версии 4.01, для разбиения строк, вам необходимо использовать тег <br> Но, если тип документа будет указан как XHTML, то у элемента будет такой вид: <br />
Здесь проявляется одно из преимуществ HTML5: он допускает применение любого из этих вариантов. По сравнению с предшественниками, в HTML5 заложена простота и рациональность использования.
За doctype следует открывающий тег <html>, потом элемент <head> (голова веб-страницы), затем <body> (тело веб-страницы), в котором и находится всё, что вы хотите разместить на веб-странице. Завершает всё закрывающий тег </html>.
Элемент <html> сообщает браузеру, что документ является программным кодом на языке HTML. Всё содержимое веб-страницы находится между открывающим и закрывающим тегами элемента <html>
Раздел заголовка веб-страницы <head> содержит не только название страницы, но и другую информация, которая не отображается при просмотре веб-страницы. Эта информация предназначена для браузеров и поисковых машин.
Как вы могли заметить, HTML-элементы состоят из тегов. Есть парные теги и одиночные. Большинство элементов используют пары тегов, начиная и завершая какой-то фрагмент. Открывающий тег каждого элемента показывает браузеру, где команда начинается (<body>), а заканчивающий — где заканчивается (</body>). Закрывающий тег всегда предваряется прямым слешем ( / ) после первого символа скобки ( < ).
По своей сути HTML-файл это обычный текстовый файл. Обычно в конце имени файла добавляется .html чтобы система определила тип файла.
[addthis tool=»addthis_inline_share_toolbox»]