Как закрыть теги html

Структура HTML документа

Хотя основа документа HTML – простой текст, чтобы создать настоящий HTML документ, необходимо кое-что еще. А именно задать структуру документа HTML.

Структура документа HTML состоит из тегов, которые окружают содержимое и придают ему определенное техническое значение.

Измените свой документ следующим образом:

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

Теперь сохраните документ, вернитесь в браузер и выберите команду «Обновить» (это перезагрузит вашу веб-страницу).

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

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

Закрывающие теги

Теги и закрывают соответствующие открывающие теги. Все теги в структуре документа HTML 4.01 (XHTML) должны быть закрыты. Хотя более ранние стандарты прохладно смотрели на то, что некоторые теги оставались открытыми, новые стандарты языка требуют, чтобы абсолютно все теги были закрыты. В любом случае следование этому правилу будет хорошей привычкой.

Не у всех тегов есть соответствующие закрывающие теги (вроде ). Некоторые теги, которые не заключают в себе контент, закрывают сами себя. Например, тег разрыва строки выглядит следующим образом:
. Мы вернемся к этому примеру позднее. Все что нужно запомнить, это то, что все теги в структуре документа HTML должны быть закрыты, и большинство из них (те которые содержат какой-нибудь контент) имеют следующую форму: открывающий тег → контент → закрывающий тег.

Атрибуты

У тегов также могут быть атрибуты. Атрибуты – это определенная дополнительная информация. Атрибуты определяются в открывающем теге, а их значения всегда заключаются в кавычки. Все это выглядит следующим образом:

Подробнее о тегах с атрибутами мы поговорим немного позже.

Элементы

Предназначение тегов – обозначать начало и конец элемента структуры документа HTML. Элементы же это кирпичики, из которых складывается веб-страница. Так, например, все что находится между тегами и , включая сами эти теги, является элементом body.

Источник

Знакомство с тегами.

Прежде чем разобраться в структуре созданной нами страницы, нужно понимать, что такое теги. Теги являются основной составляющей html.

С помощью тегов мы можем добавить на нашу страницу различные объекты (текст, таблицы, картинки, ссылки). Так же с помощью тегов мы можем влиять на внешний вид этих объектов (цвет, размер). В созданной нами странице написано «Здравствуйте! Это моя первая веб-страница!», данный текст написан без использования тегов. С помощью определенных тегов, мы можем сделать так, чтобы эта надпись выводилась браузером на экран, например курсивом, либо жирным шрифтом.

Этот урок один из самых важных. Я рекомендую отнестись к нему серьезно. Если Вы прочитаете первую половину урока и что-то не поймете — не огорчайтесь, приступите к выполнению практической части, она, как правило помогает разобраться во всех вопросах.

Правила написания тегов.

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

Бывают теги которые не нужно закрывать, для их работы нужно только открыть тег. Таких тегов очень мало, о них мы поговорим позже. Практически все теги необходимо закрывать, если не закрыть тег, который по своим правилам требует закрытия, то это будет грубейшая ошибка. Один не закрытый тег может сделать так, что вся ваша html страница будет отображаться браузером некорректно.

Правило закрытия тегов.

Часто бывает, что внутри тега, помимо текста располагаются еще другие теги. В этом случае теги закрываются в зеркальном порядке, то есть первым будет закрыт тот тег, который был открыт последним.
Пример правильного закрытия тегов:

Параметры тегов.

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

Параметров у тега может быть несколько. Например цвет и размер. В этом случае параметры указываются через пробел.
Пример написания тега с несколькими параметрами:

Применим знания на практике.

Нажимаем правой кнопкой мыши на созданный нами файл и выбираем «Edit with Notepad++» (открыть с помощью Notepad++).
Открыв файл мы видим уже знакомый нам html код, который мы вставляли ранее:

В этом уроке мы будем акцентировать внимание на строке с текстом «Здравствуйте! Это моя первая веб-страница!». Пока что не обращайте внимание на другие строки, это структура html страницы, ей будет уделен следующий урок.

Текст «Здравствуйте! Это моя первая веб-страница!» написан без использования тегов и параметров (атрибутов), соответственно при запуске файла через браузер, данный текст имеет стандартный размер и цвет.
Теперь сверните Notepad++ и давайте параллельно откроем наш файл в браузере. Сейчас наша страница выглядит так:

Первый тег, который мы изучим на практике — это тег &ltb&gt. Данный тег служит для того, чтобы сделать текст жирным. Тег &ltb&gt требует закрытия, по этому правильное применение будет выглядить так:

Теперь давайте вернемся в Notepad++ и добавим тег &ltb&gt в наш html код. Мы сделаем нашу надпись «Здравствуйте! Это моя первая веб-страница!» жирной. Для этого мы заключаем данный текст в тег &ltb&gt.
Теперь наш код выглядит так:

* Все html коды которые я размещаю — нельзя скопировать, это сделано специально для того, чтобы Вы прописывали все теги в ручную. Это полезно.

Итак, тег &ltb&gt успешно добавлен в код, и теперь, чтобы изменения вступили в силу, нам нужно их сохранить. Для этого нажимаем в верхнем меню кнопку «Файл», далее нажимаем «Сохранить». Так же процедуру сохранения можно делать с помощью горячих клавиш (Ctrl + S), это удобней.

Теперь заходим в браузер, в котором открыта наша страница. Мы внесли изменения в код и сохранили их, но браузер этого еще не знает. Чтобы сообщить браузеру об изменениях, нужно обновить страницу, для этого нажимаем на клавиатуре «F5».

Сейчас Вы должны увидеть результат применения тега &ltb&gt, надпись должна стать жирной, как на рисунке:

Теперь давайте удалим из нашего кода тег &ltb&gt и пропишем вместо него тег &ltfont&gt. Данный тег так же необходимо закрыть. Теперь наш код выглядит так:

Сохраните изменения в notepad (нажатием Ctrl + S), зайдите в браузер, обновите страницу (нажав F5). Сейчас мы видим, что надпись отображается обычно, так же как до использования тегов. Это значит, что тег &ltfont&gt ничего не поменял. Это все потому, что данный тег не работает без параметров (атрибутов). Тег &ltfont&gt лишь указывает браузеру на то, что внутри него (между &ltfont&gt и &lt/font&gt) находится текст. Для этого тега мы можем задать параметры color (цвет) и size (размер текста).

Сейчас давайте сделаем нашу надпись зеленой. Для этого мы зададим тегу &ltfont&gt параметр color (цвет) и дадим ему значение green (зеленый). Теперь наш код выглядит так:

После добавления параметра и значения в наш код html, Вы заметили, что они отличаются по цвету от всех других символов и тегов на странице. Это сделано специально для того, чтобы html код легче нам читался. Все теги обозначаются синим цветом, все атрибуты — красным, а значения атрибутов — фиолетовым.

Сейчас сохраняем изменения в Notepad++ (нажатием Ctrl + S), заходим в браузер и обновляем страницу (нажав F5). Сейчас наша надпись должна стать зеленой как на рисунке:

Теперь, чтобы закрепить материал, давайте добавим к тегу &ltfont&gt еще один атрибут size. Данный параметр отвечает за размер текста. Он может иметь значение от 1 до 7, мы будем использовать значение 6, так как это мое любимое число! Мы сейчас добавляем второй параметр для тега, важно не забыть, что если параметров несколько, то между ними пробел! После добавления параметра size наш код выглядит следующим образом:

Теперь, как обычно, сохраняем изменения в файле (Ctrl + S), заходим в браузер и обновляем страницу (F5). Сейчас наш текст должен стать большим, как на рисунке:

Если все получилось, то поздравляю, Вы освоили основной принцип работы тегов и их атрибутов. Это уже большой шаг!

Вы что-то не поняли из этого урока? Спрашивайте!
— vadimgreb@yandex.ru

Источник

Синтаксис атрибутов и элементов HTML

Для включения элементов в код применяют закрывающий и открывающий теги. Последний начинается с левой угловой скобки, затем следует имя элемента. Замыкает правая угловая скобка.

Если элемент идет с атрибутами, их записывают в открывающем теге после имени. Потом разделяют пробелами. Все атрибуты – пары «имя/значение».

Ради обеспечения удобства чтения атрибут записывается в нижнем регистре. Его значение заключают в кавычки. В зависимости от типа он может быть чувствителен к регистру.

В открывающем теге любого элемента он указывается всего один раз.

Верно:

Неаккуратно, но пройдет валидацию:

Непройдет:

Чтобы закрыть элемент, ставят левую угловую скобку и прямой слеш. За ними следует имя элемента, которое написано в открывающем теге. Затем идет правая угловая скобка. Если элемент является пустым, то его можно завершить опциональным прямым слешем, идущим перед правой угловой скобкой открывающего тега:

http://standardista.com/mobile/ch2/ Файлы для этой главы

Контент помещается между закрывающим и открывающим тегами. Он включает в себя текстовые узлы и/или другие элементы. Правила вложения нужно соблюдать!

Если один элемент включается в другой как дочерний, то другой должен быть как открыт, так и закрыт до окончания родительского элемента:

Самозакрывающиеся теги

Закрывающие теги есть у всех элементов, кроме тех, которые называются самозакрывающимися (синоним — пустые элементы). По синтаксическим правилам XHTML, такие элементы закрываются сами с помощью ведущего обратного слеша.

• — изображение;
• — переход на новую строку;
• — метаданные;

• ---

  — горизонтальная разделительная линия;

• — базовый URL и стандартная цель для ресурсов и ссылок;
• — ссылка;
• — элемент формы для генерирования пары криптографических ключей;
• — область карты-изображения;
• — столбец таблицы;
• — команда меню;
• — плагин (подключаемый модуль);
• — элемент формы;
• — параметр объекта;
• — медиаисточник (аудио или видео);
• — синхронизированное отслеживание медиа;
• — возможность разрыва строки.

Источник