Какие теги определяют видимую часть. Что такое теги HTML и какие виды тегов существуют
Человек не может жить одними словами,
в каком бы количестве он их ни проглатывал.
Эдлай Стивенсон.
В ообще-то, язык HTML не является языком программирования. Это язык разметки гипертекста (HyperText Markup Language). Т. е. называть его «языком HTML» не верно.
Е сли говорить проще, то HTML - это список тегов (управляющих слов), которые позволяют представить обычный текст в форматированном виде. Например, выделить его жирным , или курсивом и т. д. Но представить так текст можно только в специальных программах - (программы, с помощью которых ты бродишь по Интернету).
О ни отображают только отформатированный текст и скрывают теги HTML , которые применялись для форматирования. Чтобы тебе было понятней, о чем я говорю, щелкни правой кнопкой мыши по этой странице и в открывшемся меню выбери пункт «Исходный код» или что-то подобное. Перед тобой откроется эта страница в своём настоящем виде.
С оздавать код HTML можно как в обычных , так и использовать специальные программы, так называемые . Визуальные редакторы отличаются от текстовых тем, что заточены под набор кода HTML, CSS, JavaScript, PHP и др., т. е. под web-программирование. Кроме того, они позволяют сразу же просмотреть плоды своих трудов во встроенном браузере и подсвечивают некоторые ошибки в набранном коде.
Н астоятельно рекомендую набирать весь код руками (для улучшения прямоты этих самых рук), визуальные редакторы же значительно облегчают этот процесс. Лично я пользуюсь . Это далеко не самая последняя версия, но её возможностей мне хватает с избытком.
Я поступаю так: набираю код в Dreamweaver, затем сохраняю и нажимаю кнопку «Просмотр в браузере» (список браузеров в этом меню ты редактируешь сам), после возвращаюсь в Dreamweaver и продолжаю редактирование. Здесь . Это то, что касается инструментов, теперь перейдём непосредственно к тегам HTML.
Н ачнём со строения html-страницы, вернее с её основных тегов.
Обязательные теги HTML-страницыК обязательным (основным) тегам HTML, которые используются в каждом html-документе, относятся следующие:
Примечание. Для того, чтобы браузер выводил код HTML как текст (не интерпретировал его в код), после каждой открывающей угловой скобки «» я оставляю пробел. Ты, когда будешь набирать код, пробелы НЕ ОСТАВЛЯЙ .
К ак видишь, все теги парные (есть открывающий тег и закрывающий), в HTML почти все теги такие. Отличаются открывающий тег от закрывающего тем, что перед закрывающим стоит косая черта «/ ». Такие теги ещё называют контейнерными , потому что между ними можно вставить другие теги, т.е. поместить в контейнер. Ты и сам можешь видеть, что между тегами и находятся другие теги.
Н абирать имена тегов можно как заглавными буквами, так и прописными, разницы нет никакой. Т. е. записи вида и для браузера различий не имеют и интерпретируются одинаково. Теперь поговорим поподробнее о том, что означают эти теги.
Т ак, основные теги и показывают браузерам и другим программам для просмотра гипертекстовых страниц, что они как раз и имеют дело с гипертекстовым документом. Любой html-документ должен начинаться с и заканчиваться. Т. е. между этими тегами находится ВЕСЬ код html-страницы.
М ежду тегами и находятся мета-теги (заголовок страницы, описание, ключевые слова и т.д.). В них хранится информация об html-странице и технические сведения. Вообще, данный тег не является обязательными, т. е. без него html-документ будет нормально отображаться браузерами. Но даже, если ты не планируешь использовать область заголовка, то напиши хотя бы просто. Это нужно для совместимости между различными версиями программ.
В се сведения, находящиеся между тегами «HEAD», никак не отображаются браузером (за исключением информации между тегами, где расположено название html-документа, выводимое в верхней панели браузера). Но могут оказывать большое влияние на вид html-страницы, её жизнь в Интернете и ранжирование . Подробнее о тегах, которые располагаются в заголовке гипертекстового документа, мы поговорим позже.
О сновное содержимое html-документа располагается между тегами и . Здесь находится всё, что мы видим, когда открываем html-страницу: текст, графика, меню, кнопочки и т. д. Это основное «тело» страницы.
В се остальные теги, использующиеся при создании html-документа, находятся между (т. е. внутри) этими обязательными тегами. Практически все теги в HTML имеют различные атрибуты, свойства и параметры, которые позволяют отобразить информацию именно так, как задумал разработчик. Например, если ты напишешь:
То фон всей страницы будет красным.
З десь тег - это, собственно, тег; bgcolor - его атрибут; "#FF0000" - значение атрибута (у тега может быть несколько атрибутов).
Примечание. Все атрибуты тега и их значения указываются в открывающем теге (тот, который без косой черты), но ни в коем случае не в закрывающем.
И так, мы разобрались с основными тегами html-документа. Теперь настало время более подробно изучить остальные. Здесь я хочу сделать небольшое отступление.
Как я предлагаю изучать HTMLП рименяя на практике знания, полученные из , я понял, какую ошибку допустило большинство авторов этих книг и самоучителей. Все эти учебники, во-первых, предназначены новичкам , во-вторых, изучение основ HTML идёт в них по порядку.
Т . е. сначала рассматриваются теги заголовка html-документа (, а потом теги «тела» ().
О сновываясь на собственном опыте, смею утверждать, что такой порядок изучения основ HTML для новичка категорически неприемлем. Новичок предпринимает попытку изучить все эти многочисленные и малопонятные ему теги заголовка, во-первых, не видя результатов своего обучения (напомню, теги заголовка браузером не отображаются). А во-вторых, даже не подозревая, что большинство этих тегов для создания задуманного им сайта не понадобятся (по крайней мере, в начале работы).
Т аким образом, он только теряет время и желание продолжать изучение HTML. При этом утверждаясь во мнении, что могут только «гуру» за хорошие деньги. Я бы тоже бросил это занятие, если бы не наплевал на то, что мне пока непонятно и не пошёл дальше.
П оэтому, я предлагаю тебе сначала рассмотреть теги, относящиеся к «телу» html-документа (), а уж затем переходить к остальным. Тем более, что в «теле» html-страницы и содержится информация, за которой будут приходить посетители сайта. А создать или найти её гораздо сложнее, чем написать код.
Н у что же, теперь, не мешкая ни минуты, жми кнопку «Дальше» и продолжи узнавать, как эти небритые и невыспавшиеся дядьки создают сайты.
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTMLНиже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Комментарий. | |||||||||||||||||||||||||||||||||||||||||||
Определяет тип документа. | |||||||||||||||||||||||||||||||||||||||||||
Ссылка, гиперссылка, якорь. | |||||||||||||||||||||||||||||||||||||||||||
Определяет текст как аббревиатуру. | |||||||||||||||||||||||||||||||||||||||||||
Контактная информация автора или владельца документа. | |||||||||||||||||||||||||||||||||||||||||||
Определяет область на карте-изображении | |||||||||||||||||||||||||||||||||||||||||||
Статья | |||||||||||||||||||||||||||||||||||||||||||
Контент в стороне (содержимое не является основным на странице по смыслу) | |||||||||||||||||||||||||||||||||||||||||||
Позволяет вставить воспроизводимый аудио файл. | |||||||||||||||||||||||||||||||||||||||||||
Полужирный текст. | |||||||||||||||||||||||||||||||||||||||||||
Задает базовый URL или аттрибут target для относительных ссылок в документе. | |||||||||||||||||||||||||||||||||||||||||||
Область, где написание текста может имееть другое направления. | |||||||||||||||||||||||||||||||||||||||||||
Устанавливает направление написания текста. В отличии от направление указывается физическое направление | |||||||||||||||||||||||||||||||||||||||||||
Цитата. | |||||||||||||||||||||||||||||||||||||||||||
Указывает область body документа. | |||||||||||||||||||||||||||||||||||||||||||
Перенос строки. | |||||||||||||||||||||||||||||||||||||||||||
Кликабельная кнопка | |||||||||||||||||||||||||||||||||||||||||||
Используется для рисовании графики с помощью скриптов | |||||||||||||||||||||||||||||||||||||||||||
Подпись таблицы. | |||||||||||||||||||||||||||||||||||||||||||
Сноска на название материала. | |||||||||||||||||||||||||||||||||||||||||||
Используется для вставки компьютерного кода в текстовом виде. | |||||||||||||||||||||||||||||||||||||||||||
Задает характеристики колонок в таблице. | |||||||||||||||||||||||||||||||||||||||||||
Определяет группу из одной или более колонок таблицы для форматирования. | |||||||||||||||||||||||||||||||||||||||||||
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле | |||||||||||||||||||||||||||||||||||||||||||
Определяет описание термина из тега в списке терминов | |||||||||||||||||||||||||||||||||||||||||||
Текст, который удален в новой версии документа. | |||||||||||||||||||||||||||||||||||||||||||
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть | |||||||||||||||||||||||||||||||||||||||||||
Указывает, что содержимое является термином. | |||||||||||||||||||||||||||||||||||||||||||
Определяет диалоговое окно или интерактивный элемент | |||||||||||||||||||||||||||||||||||||||||||
Блочный элемент - один из основных элементов верстки. | |||||||||||||||||||||||||||||||||||||||||||
Определяет список определений | |||||||||||||||||||||||||||||||||||||||||||
Название термина в списке определений | |||||||||||||||||||||||||||||||||||||||||||
выделенный по смыслу текст (обычно, текст выделенный курсивом). | |||||||||||||||||||||||||||||||||||||||||||
Контейнер для внешнего приложения | |||||||||||||||||||||||||||||||||||||||||||
Группа связанных элементов в форме | |||||||||||||||||||||||||||||||||||||||||||
Заголовок для элемента | |||||||||||||||||||||||||||||||||||||||||||
Определяет автономную группу из нескольких элементов (например картинка с подписью) | |||||||||||||||||||||||||||||||||||||||||||
Нижний колонтитул | |||||||||||||||||||||||||||||||||||||||||||
Определяет форму пользовательского ввода | |||||||||||||||||||||||||||||||||||||||||||
- | Заголовки HTML разного уровня: , , , , , . | ||||||||||||||||||||||||||||||||||||||||||
Указывает область head документа. | |||||||||||||||||||||||||||||||||||||||||||
Блок заголовка | |||||||||||||||||||||||||||||||||||||||||||
Горизонтальная линия - тематический разделитель. | |||||||||||||||||||||||||||||||||||||||||||
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом. | |||||||||||||||||||||||||||||||||||||||||||
Выделяет текст курсивом. | |||||||||||||||||||||||||||||||||||||||||||
Определяет встроенный фрейм | |||||||||||||||||||||||||||||||||||||||||||
Изображение, картинка. | |||||||||||||||||||||||||||||||||||||||||||
Поле для ввода | |||||||||||||||||||||||||||||||||||||||||||
Текст, который был добавлен в новой версии документа. | |||||||||||||||||||||||||||||||||||||||||||
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом. | |||||||||||||||||||||||||||||||||||||||||||
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода. | |||||||||||||||||||||||||||||||||||||||||||
Заголовок элементов | |||||||||||||||||||||||||||||||||||||||||||
Элемент списка | |||||||||||||||||||||||||||||||||||||||||||
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS) | |||||||||||||||||||||||||||||||||||||||||||
Основной контент | |||||||||||||||||||||||||||||||||||||||||||
Контейнер для . Определяет пользовательскую карту на изображении | |||||||||||||||||||||||||||||||||||||||||||
Выделенный текст (обычно с помощью подсветки фона). | |||||||||||||||||||||||||||||||||||||||||||
Контейнер для списка пунктов меню | |||||||||||||||||||||||||||||||||||||||||||
Определяет элементы, которые пользователь может вызвать из контекстного меню | |||||||||||||||||||||||||||||||||||||||||||
Используется для определения мета-данных документа. | |||||||||||||||||||||||||||||||||||||||||||
Измеритель значений в заданном диапазоне | |||||||||||||||||||||||||||||||||||||||||||
Контейнер для навигационных элементов | |||||||||||||||||||||||||||||||||||||||||||
Альтернативный контент для пользователей, отключивших скрипты | |||||||||||||||||||||||||||||||||||||||||||
Определяет встроенный объект | |||||||||||||||||||||||||||||||||||||||||||
Определяет нумерованный список | |||||||||||||||||||||||||||||||||||||||||||
Определяет группу связанных вариантов в выпадающем списке. Дает название группу | |||||||||||||||||||||||||||||||||||||||||||
Параметр (вариант выбора) в выпадающем списке | |||||||||||||||||||||||||||||||||||||||||||
Результат вычислений | |||||||||||||||||||||||||||||||||||||||||||
|
Абзац. | ||||||||||||||||||||||||||||||||||||||||||
Задает параметры для встроенных объектов | |||||||||||||||||||||||||||||||||||||||||||
Контейнер для нескольких изображений | |||||||||||||||||||||||||||||||||||||||||||
Предварительно отформатированный текст. | |||||||||||||||||||||||||||||||||||||||||||
Индикатор выполнения (прогресса) | |||||||||||||||||||||||||||||||||||||||||||
Цитата в тексте. | |||||||||||||||||||||||||||||||||||||||||||
Альтернативный текст, если браузер не поддерживает тег . | |||||||||||||||||||||||||||||||||||||||||||
Аннотация к содержимому тега . | |||||||||||||||||||||||||||||||||||||||||||
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов). | |||||||||||||||||||||||||||||||||||||||||||
Перечеркнутый текст. | |||||||||||||||||||||||||||||||||||||||||||
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом). | |||||||||||||||||||||||||||||||||||||||||||
Определяет скрипт или подключение скрипта из внешнего ресурса. | |||||||||||||||||||||||||||||||||||||||||||
Раздел | |||||||||||||||||||||||||||||||||||||||||||
Определяет выпадающий список | |||||||||||||||||||||||||||||||||||||||||||
Текст шрифтом меньшего размера. | |||||||||||||||||||||||||||||||||||||||||||
Определяет ресурс для тегов , и . | |||||||||||||||||||||||||||||||||||||||||||
Строчный элемент. | |||||||||||||||||||||||||||||||||||||||||||
Текст, выделенный по значению. Обычно отображается полужирным. | |||||||||||||||||||||||||||||||||||||||||||
Определяет контейнер для определения стилей документа | |||||||||||||||||||||||||||||||||||||||||||
Отображает текст в виде нижнего индекса. | |||||||||||||||||||||||||||||||||||||||||||
Заголовок внутри тега | |||||||||||||||||||||||||||||||||||||||||||
Отображает текст в виде верхнего индекса. | |||||||||||||||||||||||||||||||||||||||||||
|