Вредоносное ПО (malware) - это назойливые или опасные программы,...
Здравствуйте, уважаемые читатели блога сайт! В прошлой статье мы разобрались, а также что такое тип документа и как браузеры определяют используемый язык с помощью . Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом.
Что такое HTML-тег, виды HTML-тегов, примеры написанияHTML-тег — в переводе с английского tag — помечать -символы, заключенные в угловые скобки и являющиеся элементами языка гипертекстовой разметки (HTML). Символы могут быть толок на английском языке (весь интернет на нем построен). Тег имеет видЭто тег выделения текста жирным шрифтом. Теги имеют три вида:
- Открывающий тег - тег, стоящий в начале. В рассмотренном выше примере тег является открывающим и стоит перед тем текстом, который нужно выделить.
- Закрывающий тег - тег, стоящий в конце. Отличительной чертой служит слеш «/» перед символами в угловых скобках. Опять же обратимся к рассмотренному выше примеру. Тег является закрывающим и стоит после текста, который следует выделить жирным
- Одиночные теги
— теги, которые не имеют закрывающего тега. Примером может служить
Вот пример открывающего и закрывающего тега:
Вся конструкция, включая текст, будет выглядеть следующим образом:
Этот текст будет выделен жирным
А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам:Этот текст будет выделен жирным. Существует еще такое понятие, как контейнерные теги , но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее частым примером служит тег новой строки.
В основном, одиночные теги используются для вставки какого-либо элемента, например изображения или таблицы.
Что такое атрибуты,правила написания и зачем они нужны Помимо тегов существуют еще и так называемые атрибуты . Точнее не помимо, а в тегах. С помощью атрибутов можно задать дополнительные параметры для какого-либо тега. Атрибуты для каждого тега свои, а в данной теме мы будем экспериментировать над тегом , который без атрибутов, собственно, ничего толкового не делает.Font — контейнерный тег, применяемый для форматирования текста. С помощью данного тега вы сможете и выделить текст жирным, и изменить размер, и расстояние между строк — в общем все, что можно делать с текстом. Рассмотрим пример с размером текста. Для начала заключим текст в тег Font.
Текст
Теперь немного про правила написания атрибутов. Атрибуты всегда пишутся в открывающем теге и после символов самого тега. Можно написать в одном теге несколько атрибутов в любом порядке. Атрибуты вы можете найти на сайте валидатора W3C (про который я напишу чуть ниже). Итак, вот пример тега font с атрибутом size:
Текст
Данный атрибут в теге font изменяет размер заключенного в теги Текста.
Если вы откроете исходный код страницы, то увидите, что место, где находится большое слово «Текста» имеет вид
Текста
Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в данном случае size), затем ставим «=» и заключаем параметр атрибута в двойные кавычки. Параметры атрибутов вы сможете найти все на том же сайте консорциума всемирной паутины.
Что такое валидатор (validator) W3C, правила написания и список тегов Как я и писал, существует великое множество тегов. Но где их всех найти? Вот для этой цели существует валидатор W3C W3C - World Wide Web Consorcium, а по-русски — консорциум всемирной паутины. Не совсем понятно, да? Это такое место, где разрабатывают веб-стандарты — (языки гипертекстовой разметки — их детище). Во главе всего консорциума стоит, известный из прошлой статьи, Тим Бернерс-Ли — создатель HTML. Сайт этой организации — w3.org . Предупреждаю, сайт полностью на английском, так что запаситесь словарем или переводчиком в браузере. Кстати, Google у данного сайта равен 9, а — 37000 (это все очень много, если кто не в курсе).Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке HTML 4.01 Specification , после чего вверху видим вкладку elements , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах): 
А сразу после легенды идет таблица самих тегов:
- В первом столбце — Name — само название тега — то что должно стоять в угловых скобках (< и >).
- Второй столбец — Start Tag — наличие открывающего тега. В данном столбце вы можете увидеть букву «O», что значит «Optional», а в переводе с английского - Опционально. Данная буква присутствует только напротив тегов , , и и означает, что можно ставить открывающий тег, а можно не ставить — браузер сам все сделает.
- Третий столбец — End Tag — наличие закрывающего тега. Напротив данного тега можно увидеть как букву «O», так и букву «F». Значение первой не изменилось. Вторая же буква — «F» — дословно с английского «запрещено» — означает, что закрывающий тег ставить запрещено, его просто не существует. Например, не существует тега , ибо нечего в нем закрывать.
- Четвертый - Empty
— означает, что тег является одиночным (пустым). Все теги, напротив которых стоит буква «E» в данном столбце, стоит еще и буква «F» в предыдущем столбце. Ведь у одиночных тегов не бывает закрывающих. Примером служит все тот же тег
.
- Пятый столбец — Depr. или Deprecated — с английского «не рекомендуемые». Если в данном столбце стоит буква «D» (которая расшифровывается точно также) значит, что данный тег не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и внешнего вида всего сайта и HTML-документа используются каскадные таблицы стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, данная функция используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста ( и являются примером)
- Шестой столбец — DTD — может содержать либо букву «L» , либо «F» . Первая — «L» - Loose DTD — означает, что тег, напротив которого стоит данная буква, может использоваться только в переходном типе документов ( — Transitional, про который я писал в предыдущей статье). Вторая — «F» — Frameset DTD — означает, что тег может использоваться только в документе, типа FRAMESET ( — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.
- И последний, седьмой столбец - Description — краткое описание тега, опять же на английском
Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.
- Первая колонка — Name — как и в случае с тегами — название атрибута. Все на английском, но имея базовые знания можно догадаться, что делает тот или иной атрибут.
- Вторая колонка — Related Elements — это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.
- Третья колонка — Type — это все возможные значения определенного атрибута. Например напротив выбранного нами атрибута size в теге Font стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это специальный набор вариантов размера (в данном случае). Ведь можно писать как пиксели, так и проценты
- Четвертая колонка — Default — означает, обязателен ли атрибут в определенном теге. Например, в теге Img атрибут src обязателен, так как указывает на источник, из которого брать картинку.
- 6, 7, и 8 колонки означают то же самое, что и в случае с тегами.
Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на языке HTML, над которой и будем экспериментировать.
Создание файла в формате html — HTML-документПрежде всего, разберемся что такое HTML-документ . А это, собственно, файл в формате HTML. И все интернет странички являются HTML- документами. Например, при попадании на сайт в адресной строке в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать локальный сервер — Денвер (про который я все хочу написать).
Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением.html. Можно (и лучше всего) использовать Notepad++ , потому что в данном текстовом редакторе используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде
Итак, нам нужно просто открыть Notepad++ и сохранить файл с произвольным текстом (можно и пустой), но в формате.html. Для этого, как обычно, кликаете на надпись файл, затем "сохранить как " и ищем среди большого списка расширений «HyperText Markup Language file (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTMLНиже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
| Комментарий. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет тип документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Ссылка, гиперссылка, якорь. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет текст как аббревиатуру. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Контактная информация автора или владельца документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет область на карте-изображении | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Статья | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Контент в стороне (содержимое не является основным на странице по смыслу) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Позволяет вставить воспроизводимый аудио файл. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Полужирный текст. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Задает базовый URL или аттрибут target для относительных ссылок в документе. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Область, где написание текста может имееть другое направления. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Устанавливает направление написания текста. В отличии от направление указывается физическое направление | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Цитата. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Указывает область body документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Перенос строки. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Кликабельная кнопка | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Используется для рисовании графики с помощью скриптов | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Подпись таблицы. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Сноска на название материала. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Используется для вставки компьютерного кода в текстовом виде. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Задает характеристики колонок в таблице. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет группу из одной или более колонок таблицы для форматирования. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет описание термина из тега в списке терминов | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Текст, который удален в новой версии документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Указывает, что содержимое является термином. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет диалоговое окно или интерактивный элемент | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Блочный элемент - один из основных элементов верстки. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет список определений | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Название термина в списке определений | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| выделенный по смыслу текст (обычно, текст выделенный курсивом). | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Контейнер для внешнего приложения | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Группа связанных элементов в форме | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Заголовок для элемента | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет автономную группу из нескольких элементов (например картинка с подписью) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Нижний колонтитул | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет форму пользовательского ввода | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| - | Заголовки HTML разного уровня: , , , , , . | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Указывает область head документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Блок заголовка | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Горизонтальная линия - тематический разделитель. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Выделяет текст курсивом. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет встроенный фрейм | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Изображение, картинка. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Поле для ввода | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Текст, который был добавлен в новой версии документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Заголовок элементов | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Элемент списка | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Основной контент | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Контейнер для . Определяет пользовательскую карту на изображении | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Выделенный текст (обычно с помощью подсветки фона). | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Контейнер для списка пунктов меню | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет элементы, которые пользователь может вызвать из контекстного меню | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Используется для определения мета-данных документа. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Измеритель значений в заданном диапазоне | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Контейнер для навигационных элементов | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Альтернативный контент для пользователей, отключивших скрипты | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет встроенный объект | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет нумерованный список | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет группу связанных вариантов в выпадающем списке. Дает название группу | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Параметр (вариант выбора) в выпадающем списке | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Результат вычислений | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Абзац. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Задает параметры для встроенных объектов | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Контейнер для нескольких изображений | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Предварительно отформатированный текст. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Индикатор выполнения (прогресса) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Цитата в тексте. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Альтернативный текст, если браузер не поддерживает тег . | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Аннотация к содержимому тега . | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Перечеркнутый текст. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет скрипт или подключение скрипта из внешнего ресурса. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Раздел | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет выпадающий список | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Текст шрифтом меньшего размера. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет ресурс для тегов , и . | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Строчный элемент. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Текст, выделенный по значению. Обычно отображается полужирным. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет контейнер для определения стилей документа | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Отображает текст в виде нижнего индекса. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Заголовок внутри тега | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Отображает текст в виде верхнего индекса. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
