# Введение в HTML Содрано [отсюда](https://msiter.ru/tutorials/html-nachalnogo-urovnya) ## Что нужно, чтобы создать веб-страницу Большинство вещей в сети ничем не отличаются от аналогичных вещей в вашем домашнем компьютере: такие же файлы, хранящиеся в таких же подкаталогах. HTML файлы – это обычные текстовые файлы. Таким образом, чтобы начать писать на языке HTML, вам необходим всего лишь обычный текстовый редактор. Например, создайте файл `myfirstpage.html` с содержимым ``` Это моя первая веб-страница ``` Чтобы просматривать HTML файлы, они не обязательно должны быть размещены в сети Интернет. Откройте браузер и в адресной строке, где вы обычно вводите адрес сайтов, введите адрес созданного вами файла (например, `c:\html\myfirstpage.html`) и нажмите ввод. ## Структура HTML документа Хотя основа документа HTML – простой текст, чтобы создать настоящий HTML документ, необходимо кое-что еще. А именно задать структуру документа HTML. Структура документа HTML состоит из тегов, которые окружают содержимое и придают ему определенное техническое значение. ```html Это моя первая веб-страница ``` Теперь сохраните документ, вернитесь в браузер и выберите команду "Обновить". Внешний вид страницы никак не изменился. Однако предназначение HTML – определение значения для содержимого, а не внешнего представления, и данный пример показал нам несколько фундаментальных элементов веб-страницы, задающих базовую структуру документа HTML. Первая строка, начинающаяся с ``, - открывающий тег, который прекращает все недомолвки и прямо говорит браузеру, что все, что между ним и закрывающим тегом ``, является HTML документом. Все что находится между `` и `` является основным содержимым веб-страницы и выводится в окне браузера. ### Закрывающие теги Теги `` и `` закрывают соответствующие открывающие теги. Все теги в структуре документа HTML должны быть закрыты. Хотя более ранние стандарты прохладно смотрели на то, что некоторые теги оставались открытыми, новые стандарты языка требуют, чтобы абсолютно все теги были закрыты. В любом случае следование этому правилу будет хорошей привычкой. Не у всех тегов есть соответствующие закрывающие теги (вроде ``). Некоторые теги, которые не заключают в себе контент, закрывают сами себя. Например, тег разрыва строки выглядит следующим образом: `
`. Мы вернемся к этому примеру позднее. Все что нужно запомнить, это то, что все теги в структуре документа HTML должны быть закрыты, и большинство из них (те которые содержат какой-нибудь контент) имеют следующую форму: `открывающий тег → контент → закрывающий тег`. ### Атрибуты У тегов также могут быть атрибуты. Атрибуты – это определенная дополнительная информация. Атрибуты определяются в открывающем теге, а их значения всегда заключаются в кавычки. Все это выглядит следующим образом: ``` <тег атрибут="значение"> контент ``` Подробнее о тегах с атрибутами мы поговорим немного позже. ### Элементы Предназначение тегов – обозначать начало и конец элемента структуры документа HTML. Элементы же это кирпичики, из которых складывается веб-страница. Так, например, все что находится между тегами `` и ``, включая сами эти теги, является элементом body. ## Заголовок веб-документа У каждой веб-страницы должна быть головная часть или заголовок документа. Чтобы добавить заголовок документа HTML, измените код вашей веб-страницы следующим образом: ```html Моя первая веб-страница Это моя первая веб-страница ``` Мы добавили два новых элемента. Они начинаются с тегов `` и `` (также обратите внимание, как они оба закрываются). Элемент `<head>` располагается перед элементом `<body>`. Он содержит информацию о веб-странице. Это и есть заголовок документа HTML. Информация, расположенная в элементе `<head>`, не отображается в окне браузера. Позднее вы убедитесь, что внутри заголовка документа HTML могут располагаться некоторые другие элементы, и одним из самых важных является элемент `<title>`. Если вывести в браузер нашу вновь модифицированную веб-страницу, то вы увидите строку "Моя первая веб-страница", появившуюся в верхней части браузера, там, где всегда отображается название файла. Таким образом, текст, помещенный между тегами `<title>` и ``, стал названием веб-страницы. Если добавить эту веб-страницу в "Избранное", то вы заметите, что и здесь используется это же "название" страницы. ## Абзац в веб-документе Теперь, когда у вас есть базовая структура документа HTML, можно наконец добавить немного контента. Вернитесь в текстовый редактор и добавьте в код вашей веб-страницы еще одну строку: ```html Это моя первая веб-страницы Вот здорово ``` Посмотрите на получившийся документ в браузере. Наверное, вы ожидали, что в браузере ваш документ будет отображаться так же, как вы его писали, т.е. на двух строчках. Однако вместо этого вы увидите что-то вроде: ``` Это моя первая веб-страница Вот здорово ``` Это произошло потому, что браузер совершенно не обращает внимание на количество строк, на которых расположен код веб-страницы. Также ему безразлично сколько пробелов вы ввели между словами (вы получите тот же результат, если напишите " Это моя первая веб-страница Вот здорово"). Если вы хотите, чтобы текст отображался на разных строках, вы должны ясно указать это, определив абзац HTML. Измените две строки вашего контента следующим образом: ```html

Это моя первая веб-страница

Вот здорово

``` Тег `

` создает параграф или абзац HTML. Посмотрите на получившуюся веб-страницу в браузере: теперь две строки текста в браузере отображаются также на двух строках. Рассматривайте контент HTML документа, как текст книги – с делением на параграфы и абзацы HTML там, где это необходимо. ## Выделение текста Вы можете внутри абзаца HTML выделять текст при помощи тега `` (акцент) и тега `` (усиленный акцент). Оба эти тега в принципе делают одно и то же – выделяют текст, хотя традиционно браузеры отображают текст внутри тега `` курсивом, а внутри тега `` жирным шрифтом. ```html

Вот это простой акцент. А это усиленный акцент.

``` ## Разрыв строки Для разделения строк также можно использовать тег разрыва строки `
`: ```html Это моя первая веб-страница
Вот здорово! ``` Тем не менее, данный метод часто приводит к разным злоупотреблениям и в тех случаях, когда один блок текста должен быть отделен от другого, не рекомендуется к использованию (так как если речь идет об абзацах HTML, то лучше использовать элемент `

`). ## Шесть уровней текстовых заголовков Тег `

` – это всего лишь один из тегов форматирования текста. Если у вас есть документы с настоящими заголовками, то следующие теги HTML вам очень пригодятся. Это теги `

`, `

`, `

`, `

`, `

` и `
`. Измените код вашей первой веб-страницы следующим образом: ```html

Моя первая веб-страница

Что это такое

Простая страница, созданная при помощи HTML

Для чего это нужно

Чтобы изучить HTML

``` Обратите внимание, что тег `

` мы использовали всего один раз. Это потому что он считается основным заголовком страницы и не должен использоваться больше одного раза на странице. Тем не менее, все остальные теги заголовков от `

` до `

` можно использовать столько раз сколько хотите. Однако их всегда следует использовать в соответствующем порядке. Например, `

` должен быть подзаголовком `

`, который в свою очередь должен быть подзаголовком `

`. ## Упорядоченные и неупорядоченные списки Существует три типа списков: упорядоченные, неупорядоченные и списки определений. Здесь мы рассмотрим первые два вида списков, а о списках определений вы узнаете позже. Упорядоченные и неупорядоченные списки работают одинаково, за исключением того, что последние используются для представления непоследовательных списков, элементы которых обычно маркируются крупной черной точкой (буллитом), а первые используются для представления последовательных списков, которые обычно имеют вид элементов пронумерованных в возрастающем порядке. Для определения неупорядоченных списков используется тег `