Базовые теги
Итак, мы создали страницу, теперь давайте разбираться, что мы все-таки написали.
DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.
Декларация <!DOCTYPE html> сообщает, что в этом документе используется пятая версия языка гипертекстовой разметки - HTML 5.
HTML документы описываются специальными именами HTML элементов (тегами), каждый тег описывает различное содержание документа. Теги представляют собой команды, которые сообщают браузеру, каким образом отображать веб-страницу (документ).
Цель любого веб-браузера прочитать HTML документ и правильно его отобразить. Браузер не отображает HTML теги, но использует их, чтобы определить, как отображать конкретный документ. Теги бывают двух видов: парные и одиночные (пустые). У парных HTML-тегов первый тег в паре является начальным (открывающим) тегом, а второй тег является конечным (закрывающим) тегом. Основная функция начального тега заключается в том, чтобы сообщить браузеру где команда начинается, а конечным тегом определить где она заканчивается.
Обратите внимание, что все теги заключены в угловые скобки < и >, а закрывающий тег всегда должен содержать прямой слеш перед названием тега - </тег>, этим мы сообщаем браузеру, что на этом месте наша "команда" закончена.
Текст между тегами < HYPERLINK "https://basicweb.ru/html/tag_html.php"html HYPERLINK "https://basicweb.ru/html/tag_html.php"> и </html> сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки. Является корневым элементом HTML документа и все остальные элементы должны быть его потомками (вложены в него).
Следующий тег - <head>. Это тоже парный тег (<head> и </head> ). Этот тег не отображается на странице (кроме заголовка), но он необходим для указания дополнительных параметров страницы - описание страницы, ключевые слова, стили, скрипты, заголовок и прочее.
<meta> - Тег который обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами. Мета элементы, как правило, используются, чтобы указать описание страницы, ключевые слова, автора документа и другие метаданные. Тег <meta> с атрибутом charset="utf-8" задает кодировку документа UTF-8. С помощью этого тега мы можем отображать русский шрифт на нашем сайте.
Текст между < HYPERLINK "https://basicweb.ru/html/tag_title.php"title HYPERLINK "https://basicweb.ru/html/tag_title.php"> и </title> обеспечивает название для документа. Название документа должно содержать важные ключевые слова, чтобы поисковые системы могли включить вашу страницу в результаты поиска (по определенным запросам пользователей).
Текст между < HYPERLINK "https://basicweb.ru/html/tag_body.php"body HYPERLINK "https://basicweb.ru/html/tag_body.php"> и </body> описывает видимое содержимое страницы!
Давайте добавим на нашу страничку немного контента, например, напишем небольшой текст о любимом времени года.
Сохраним и попробуем запустить наш сайт. Мы увидим, что текст на сайте хоть и отобразился, но смешался в одну большую кучу. Давайте отделим заголовок от текста.
Для записи заголовка пользуются тегами от < HYPERLINK "https://basicweb.ru/html/tag_h1.php"h1 HYPERLINK "https://basicweb.ru/html/tag_h1.php"> до < HYPERLINK "https://basicweb.ru/html/tag_h6.php"h6 HYPERLINK "https://basicweb.ru/html/tag_h6.php">: тег < HYPERLINK "https://basicweb.ru/html/tag_h1.php"h1 HYPERLINK "https://basicweb.ru/html/tag_h1.php"> определяет наиболее важные заголовки, а < HYPERLINK "https://basicweb.ru/html/tag_h6.php"h6 HYPERLINK "https://basicweb.ru/html/tag_h6.php"> определяет наименее важные заголовки (< HYPERLINK "https://basicweb.ru/html/tag_h1.php"h1 HYPERLINK "https://basicweb.ru/html/tag_h1.php"> заголовки должны быть основными заголовками на странице, затем следуют заголовки < HYPERLINK "https://basicweb.ru/html/tag_h2.php"h2 HYPERLINK "https://basicweb.ru/html/tag_h2.php"> и так далее). Браузеры автоматически добавляют пустое пространство до и после каждого заголовка. Основной текст поместим внутрь тега параграфа <p> </p>. Параграф будет начинать текст с новой строки.
Теперь наш текст уже не выглядит однообразной сумятицей: У нас появился заголовок и подзаголовок. Но что если я захочу добавить стихотворение на свою страницу?
В коде выглядит неплохо, но браузер все-равно отображает все одной строкой.
Что-бы разбить стихотворение по строфам воспользуемся тегом переноса строки <br>. Этот тег одиночный ставится там, где необходим перенос строки.
Теперь на странице стих выглядит гораздо гармоничней.
Форматирование текста и создание списка.
Итак, на нашей страничке есть текст, но я хочу некоторые слова сделать более заметными. Это можно сделать, при помощи курсива (тег <em> курсив </em>) или полужирного шрифта (тег <strong> полужирный </strong>).
Не редко возникает ситуация когда мы хотим необходимо составить список, вроде списка покупок в магазин или сравнительного списка за и против. Создадим небольшой маркированный (без нумерации) список преимуществ зимы перед другими сезонами и нумерованный список недостатков зимы.
В языке HTML создание маркированного списка осуществляется парным тегом <ul>... </ul>.
Создание нумерованного списка, в языке html, осуществляется тегами <ol> и </ol>. Для указания пункта списка в любом случае используется парный тег <li> … </li>
И вот что у нас получилось
Картинка
Какой-же вебсайт без иллюстраций? Любой текст смотрится намного интересней, если он "разбавлен" изображениями. Представьте статью в 3000 символов без изображений - сплошной текст. Скучно и неинтересно.
В языке HTML, для вставки изображений, предназначен тег <img> с обязательным атрибутом src. Этот атрибут необходим для указания файла изображения и адреса к нему (если изображение находится в другой папке).
Мы добавили изображение. Правда оно настолько большое, что занимает весь экран. Придётся уменьшить его размер. В языке HTML предусмотрена возможность указывать размер изображения.
Для этого существуют два атрибута - width (ширина) и height (высота).
Указывать размеры изображения можно либо в процентах от максимального изображения или в пикселях.
Вот теперь картинка смотрится отлично)
Вопросы:
1. HTML – это...
2. Какой тег должен открывать HTML-программу, а какой закрывать её?
3. Какой тэг при создании страницы добавляет имя страницы, которое будет отображаться в строке заголовка в браузере пользователя?
4. Какое расширение может иметь HTML-документ?