HTML элементы: одиночные и парные теги (открывающий и закрывающий тег). Html теги (на примере p, br, hr) и их атрибуты Теги парные и непарные
HTML элемент - это основная структурная единица веб-страницы, написанная на языке HTML.
Парные и одиночные теги HTML
Синтаксис HTML элементов, состоящих из парных тегов:
- Элемент начинается с открывающего тега.
- Элемент заканчивается закрывающим тегом.
- Содержимым элемента является все, что находится между открывающим и закрывающим тегами. Содержимое может быть текстом и/или другим HTML элементом.
Примечание: не забывайте в закрывающем теге ставить символ "/ ", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ "/ " в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.
Синтаксис HTML элементов, состоящих из одиночных тегов:
- Элемент состоит только из открывающего тега.
Элементы, состоящие из одиночных тегов называются пустыми . Всего в HTML 16 одиночных тегов:
Вложенные элементы
HTML элементы, состоящие из парных тегов, могут либо содержать в себе любые другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.
Следующий пример состоит из трех элементов, два из которых вложенные:
Мой первый абзац
Когда один элемент располагается внутри другого, нужно следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, например, следующий код является неверным:
Это очень
интересноЗдесь элемент выходит за пределы элемента
Пример с правильной вложенностью:
Это очень интересно
Здесь элемент правильно вложен - он находится полностью в элементе
Браузер игнорирует пробельные символы в HTML-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пример кода, в котором используются пробельные символы:
Мой первый абзац
Пробельные символы
Мой первый заголовок
Код примера можно было бы написать и вовсе без использования пробельных символов, но такой код будет менее удобен для чтения:
Мой первый заголовок
Мой первый абзац
Поскольку код HTML-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность кода.
Тег (мн. теги, иногда тэг ) — это элемент языка HTML, с помощью которого выполняется разметка исходного текста веб-страницы. Теги представляют из себя сокращения или аббревиатуры английских слов заключенные в угловые скобки <>, например, тег
…
сокращение от английского слова paragraph , то есть текст заключенный в данный тег будет распознаваться браузерами, как параграф.Каждый тег в HTML имеет специальное значение и отвечает за вывод определенных данных. Регистр букв в названиях тегов не имеет значение, например, тег
…
и тег…
— это одно и то же. То есть теги можно записывать и строчными, и заглавными буквами. Раньше общепринятым было, все теги записывать заглавными буквами, чтобы теги отличались от обычного текста. Сейчас такой необходимости нет, так как многие редакторы имеют подсветку синтаксиса.Классификация тегов
Всего тегов в HTML насчитывается более 90. Как правило, один тег воздействует только на часть документа, например, тег заголовка первого уровня
…
. В таких случаях используются парные теги: открывающий и закрывающий . Открывающий тег (например,) создает эффект, а закрывающий ( ) — прекращает его действие. Как видно из примера, закрывающий тэг всегда имеет вот такой символ (/ ) — прямой слеш. Такие теги называют парные .
Некоторые теги дают разовый эффект в месте своего появления. Например, тег горизонтальной полосы
или тег отображения картинки
Типы тегов
Кроме того теги подразделяют на несколько типов, которое различаются по выполняем функциям:
- теги заголовка документа;
- блочные элементы;
- строчные элементы;
- универсальные элементы;
- списки;
- таблицы;
- фреймы.
Это разделение не строгое, поэтому некоторые теги находятся в разных группах. Например, тэги для создания списков
- и
Правила применения тегов
- относятся и к спискам, и к блочным элементам.
Структура тегов
При загрузке в браузере сами теги не отображаются, но влияют на способ отображения своего содержимого. Если в написание тега допущена ошибка, он игнорируется целиком.
Все теги имеют определенную структуру, которую необходимо соблюдать при написании. Кроме того, практически все теги имеют различные атрибуты, которые могут изменять способ отображения содержимого.
Давайте посмотрим на правильную структуру тегов содержащих атрибуты:
Для примера я привел два совершенно разных тега. Первый одинарный — отвечает за вывод изображений, атрибут — src=»logo.jpg»
. Второй … парный отвечает за создание ссылок, атрибут — href=»сайт»
.
Вывод 1 : Атрибуты могут иметь парные и непарные теги.
Вывод 2 : Атрибуты могут иметь только открывающие теги, закрывающие теги не имеют атрибутов.
Картинка для разъяснения:
Министерство образования Республики Беларусь
БЕЛОРУССКИЙ НАЦИОНАЛЬНЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
Кафедра «Основы бизнеса»
Отчёт о выполнении лабораторной работы №1
«СТРУКТУРА ГИПЕРТЕКСТОВОГО ДОКУМЕНТА»
по дисциплине «Информационные технологии»
Выполнила: студентка гр.105032Бычко Е.В.
Принял:преподавательДашкевичН.В.
Лабораторная работа №1
СТРУКТУРА ГИПЕРТЕКСТОВОГО ДОКУМЕНТА
Цель работы: приобрести начальные навыки создания простейших Internet-документов; научиться выполнять форматирование созданных Web-страниц.
Выполнение работы
Задание 1.Создание файловой структуры
Пользуясь средствами Проводника, в своей рабочей папке была создана файловая структура, приведенная на рис. 1.1.
Рис. 1.1. Файловая структура
Задание 2. Создание HTML документа
Средствами приложения блокнот создайте HTMLдокумент, при просмотре которого в браузерах в строке заголовка окна отображается текст «Содержимое строки заголовка», в основной области – текст «Так выглядит документ HTML». На рисунке 2.1. представлен HTML документ.
Рис. 2.1. HTMLдокумент
Просмотр документа в браузере представлен на рисунке 2.2.
Рис. 2.2. Документ в браузере
Задание 3. Изменение HTMLдокумента
Необходимо изменить документ таки образом, чтобы при просмотре в браузере в строке заголовка отображался текст «Общий вид документа html», а в основной части документа – текст:
«Вот некоторые приемы работы,
которые мы освоим:
разбиение текста
выравнивание текста
создание заголовков
работа с таблицами.»
Структура HTML документа представлена на рисунке 3.1.
Рис. 3.1. HTMLдокумент
Просмотр документа в браузере (рис. 3.2).
Рис. 3.2. Документ в браузере
Контрольные вопросы
Что такое гипертекст?
Какова структура простейшего HTML-документа?
Структура самого простого HTML документа имеет следующий вид:
ПЕРВЫЙ ТЕКСТ НА СТРАНИЧКЕ
Как задаётся начало текстового абзаца?
Для задания начального абзаца необходимо использовать парный тег - начало и конец абзаца.
В чём заключается разметка гипертекста средствами HTML?
HTML - теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками - тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства. Атрибуты указываются в открывающем теге.
Чем непарные теги отличаются от парных?
Теги HTML бывают парными и непарными. Непарные теги оказывают воздействие на весь документ или определяют разовый эффект в том месте, где они вставлены. При использовании парных тегов в документ добавляются открывающий и закрывающий теги, которые воздействуют на часть документа, заключённую между ними.
Определение в Википедии: HTML (от англ. HyperText Markup Language - язык разметки гипертекста ) – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML ). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.
Все что Вы видите в окне браузера, каждый элемент веб страницы: текстовые блоки, абзацы и заголовки, фотографии, реклама, различные меню, формы для заполнения и т.д., - все это создано и размещено на странице веб разработчиком при помощи HTML.
Язык HTML отвечает за разметку страницы, за порядок и последовательность расположения ее элементов. При помощи HTML элементам страницы задают определенные свойства и характеристики. Редактирование текста - это тоже HTML.
Но HTML - это не язык программирования, как некоторые ошибочно полагают, - по сути это редактор, язык разметки гипертекстовых документов. И это, конечно же, основа веб-дизайна.
Теги парные и одиночные
Основой языка HTML являются теги . Каждый элемент страницы обозначен тем или иным тегом.
Тег - это «метка», состоящая из буквы или нескольких букв, заключенных между символами «меньше чем» - "<" и «больше чем» - ">" . Теги бывают парные и непарные (одиночные) .
- парные теги . У таких тегов сначала идет открывающий тег - между символами "<" и ">" , сообщающий браузеру о начале своего действия в данном месте; затем закрывающий тег – между символами"" (то есть у закрывающего тега к символу «меньше чем» - "<" добавляется слэш / ), сообщающий браузеру о завершении своего действия.
Закрывающий тег не всегда является обязательным.
- одиночные теги не имеют закрывающего элемента.
Парный тег
- открывает кавычки. Он имеет обязательный, закрывающий кавычки, тег
.
Кавычки
Парный тег
Парный тег
Создает новый параграф. Он имеет закрывающий тег
, который не является обязательным!Каждый следующий тег
Не только создает новый абзац, но и завершает предыдущий. Новый абзац будет отделен от предыдущего пустой строкой.
Здесь же введем еще одно из ключевых понятий языка HTML - Атрибут тега.
Атрибуты тега являются его дополнением - они задают дополнительные правила отображения содержимого тега на странице.
Например, атрибут align тега
Определяет выравнивание содержимого тега (текста ) по горизонтали.
Многие теги имеют несколько атрибутов, среди которых есть обязательные. Есть теги не имеющие атрибутов!
Первый абзац - его завершение не обозначено закрывающим тегом.
Второй абзац имеет закрывающий тег. Атрибут align задает выравнивание текста по центру в горизонтальной плоскости!
Первый абзац - его завершение не обозначено закрывающим тегом.
Второй абзац имеет закрывающий тег. Атрибут align задает выравнивание текста по центру в горизонтальной плоскости!
Одиночный тег
Одиночный тег
, использующийся для переноса строки, не имеет закрывающего тега и не имеет атрибутов.
С помощью тега
установим перенос строки внутри текущего абзаца.
С помощью тега
установим перенос строки внутри текущего абзаца.
Редактор HTML
По сути веб страница - это обычный текстовый документ, поэтому для ее создания можно воспользоваться простым текстовым редактором, который является частью ОС Windows - Блокнотом .
Естественно, существует несколько визуальных редакторов для работы с HTML, лидером среди которых является Dreamweaver (Дримвивер ) - HTML-редактор от компании Adobe .
Но Dreamweaver и другие специализированные HTML-редакторы - это помощники, которые автоматизируют работу с кодом. И перед тем, как приступать к их помощи и начинать с ними работать, необходимо этот код знать. Поэтому первые шаги в изучении HTML и CSS (Cascading Style Sheets - каскадные таблицы стилей ) следует делать, используя Блокнот . При этом набирать код Вы будете вручную - с клавиатуры. А это как раз то что нужно для начинающих изучение языка HTML и технологии CSS.
В дальнейшем, естественно, необходимо переходить к специализированным HTML-редакторам.
Парные теги, называемые по-другому контейнеры, состоят из двух частей- открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный - <тег> , а в закрывающем используется слэш - . Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок. Так, на рис. 4 демонстрируется, как можно и нельзя добавлять один контейнер внутрь другого.
Рис. 4 Вложение тегов, а - правильное, б - неверное
Если связать открывающий и закрывающий тег между собой скобкой, как показано на рис. 4, то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой (рис. 4а). Любое пересечение условных скобок (рис. 4б) говорит о том, что правильная последовательность тегов нарушена.
Не все контейнеры требуют обязательно закрывающего тега, иногда его можно и опустить. Тем не менее, закрывайте все требуемые теги, так вы приучитесь сводить к нулю возможные ошибки.
Для тегов любого типа действуют определенные правила их использования. Причем, некоторые правила обязательны для выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет.
Атрибуты тегов и кавычки
Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных ("пример") или одинарных кавычках ("пример"). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы (пример 2).
Пример 2. Использование кавычек в атрибутах тегов
< html >
< head >
< meta http-equiv="content-type" content="text/html; charset=utf-8">
< title > Кавычки в атрибуте alttitle >
head >
< body >
< p >< img src="images/arena.png" alt="Вид заголовка" width="400" height="101">p >
< p >< img src="images/arena.png" alt=Вид заголовка width="400" height="101">p >
body >
html >
В данном примере строка 8 написана правильно, со всеми кавычками, а в строке 9 у атрибута alt кавычки отсутствуют. Из-за этого браузер в качестве значения alt возьмет только первое слово («Вид»), а слово «заголовка» будет воспринято как ошибочное значение. Поэтому всегда приучайтесь указывать значения атрибутов тегов в кавычках.
Теги можно писать как прописными, так и строчными символами
Любые теги, а также их
атрибуты нечувствительны к регистру,
поэтому вы вольны выбирать сами, как
писать -
,
или
.
В любом случае рекомендуется придерживаться
выбранной формы записи на протяжении
всех страниц сайта. Заметим также, что
текст, полностью набранный прописными
символами, читается хуже, чем текст со
строчными символами или смешанный.
Переносы строк
Внутри тега между его атрибутами допустимо ставить перенос строк. В примере 3 показана одна и та же строка, но оформленная разными способами.
Пример 3. Переносы строк в коде тега
HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4
< html >
< head >
< meta http-equiv="content-type" content="text/html; charset=utf-8">
< title > Кавычки в атрибуте alttitle >
head >
< body >
< p >< img src="images/arena.png" alt="Вид заголовка в IE" width="400" height="101">p >
< p >< img src="images/arena.png"
alt="Вид заголовка в браузере IE"
height="101">p >
body >
html >
В данном примере первый
тег
набран
в одну строку, включая все его атрибуты,
а второй тег
разбит
на несколько строк.
Хотя ошибки при переносе текста в подобном случае и не возникнет, рекомендуем писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править.
