Б ез знаний языка гипертекстовой разметки нельзя создать ни одного веб-сайта или какого-либо другого интернет проекта. Все начинается с HTML, а уже потом все остальное CSS, PHP и другие различные скриптовые языки для формирования всяких красивостей и интересных функций. Не смотря на свою простоту в использовании при создании html страниц, этот язык имеет около 130, а возможно и больше тегов, к которым применяются разные атрибуты для изменения различных свойств.
В принципе если открыть любой html документ или интернет страницу вы всегда в ней увидите большое количество тегов из языка гипертекстовой разметки, хоть они и часто повторяются, так как описывают одни и те же элементы конструкции html страницы, такие как форматирование параграфов текста или вставки картинки в статью.
Но практически всегда вы увидите в коде страницы такие теги как тип документа , , , титл заголовка страницы,
параграфы и вставка изображений , а так же многие другие.
Для того чтобы не забыть уже известные вам теги и почерпнуть что то новое, публикую здесь краткую, но информативную таблицу с основными html тегами.
HTML что такое тег. Парные, непарные теги. Тег i. Тег br. HTML5 для начинающих. Урок#2
Источник: www.white-windows.ru
Основные элементы HTML веб-страницы
HTML-код веб-страницы должен иметь определенную структуру. В нем есть обязательные теги, с помощью которых браузеры и поисковые боты распознают, что перед ними именно html-документ (расширение файла .html в данном случае ни о чем не говорит), на какой версии HTML он написан, что следует вывести в титуле страницы и другое.
С другой стороны, каждая web-страница уникальна по своему содержанию. Поэтому во многом набор и последовательность используемых при ее верстке тегов будет характерным только для нее.
Любой html-документ должен начинаться с одиночного тега с атрибутом, указывающем на используемую версию языка HTML. В случае с HTML5 первая строка будет такой:
Далее идет открывающий тег . Его закрывающий тег должен находиться в самом конце кода страницы. Пара . формирует корневой элемент документа. Все содержимое страницы находится между этими тегами.
После идет элемент head , содержимое которого не отображается на странице. В head содержится метаинформация (информация об информации на странице), к документу подключаются другие файлы, могут быть включения кодов CSS и JS. Ниже описаны элементы HTML, которые настоятельно рекомендуется включать в head страниц сайтов, размещаемых в Web. Однако в курсе большинство из них мы будем опускать.
Содержимое элемента title выводится в браузере на вкладке окна, в котором открывается документ. Обычно здесь дублируют и дополняют заголовок страницы.
Кодировка документа указывается с помощью тега через атрибут charset . В настоящее время обычно при создании html-документов используют UTF-8.
Что такое элементы и тэги в html
Следующая команда позволяет корректно отображать видимое содержимое страницы на небольших экранах (смартфонах): .
Краткое описание содержимого страницы ( ) может быть использовано в поисковой выдаче. Например, человек вводит поисковый запрос в поисковой строке. Поисковик формирует поисковую выдачу, ранжируя (выставляя по очереди) ответы согласно своему алгоритму. Информация под ссылкой на ресурс может быть взята из краткого описания страницы (хотя не обязательно).
При этом для поисковой оптимизации более важным является содержимое контейнера title . Оно в подавляющем большинстве случаев определяет заголовок-ссылку на вашу страницу в поисковой выдаче.
После элемента head начинается то, что будет отображаться в окне браузера, то есть «тело» документа. Начинается оно с открывающего тега , закрывающий тег которого находится непосредственно перед закрывающим тегом корневого элемента. Другими словами, конец кода html-документа обычно выглядит так: .
Весь содержательный контент страницы заключается между тегами и .
Что из себя представляет контент страницы? Чаще всего это текст. Мы разделяем его на абзацы. Если статья длинная, то у нее, кроме заголовка, могут быть разделы, у каждого из которых может быть свой подзаголовок.
В HTML для разметки абзаца используется элемент p , для заголовка первого уровня (самого главного) – h1 .
Кроме текста нередко в веб-контент включают различные изображения. Для этого используется одиночный тег . Обязательным атрибутом является src (сокращение от слова source – источник), с помощью которого указывается адрес, где находится файл. Также рекомендуется прописывать атрибуты width и height – ширина и высота картинки, alt – для описывающей изображение информации. Значение alt может использоваться поисковыми системами в поиске по картинкам, а также отображается в браузере, если по каким-то причинам изображение не загрузилось.
Ширина и высота картинки измеряется в пикселях. Узнать размеры находящегося на вашем компьютере изображения можно через окно «Свойства», которое вызывается через контекстное меню (правый клик по файлу картинки). Чтобы узнать размер изображения, размещенного на веб-странице, можно в контекстном меню выбрать пункт «Открыть картинку в новой вкладке» (или подобный). В титуле страницы, помимо имени файла, будет указан размер.
Обратите внимание на адрес в атрибуте src . Указывать исключительно название файла допустимо, если картинка находится в том же каталоге что и html-файл. В иных случаях может использоваться не только относительная адресация, но и абсолютная. Тема адресации, которая касается также ссылок и другого, будет рассмотрена позже в данном курсе.
Ссылки – важная составляющая веба. Недаром говорят о всемирной паутине (World Wide Web), связь между документами в которой обеспечивают как раз ссылки (гиперссылки). В языке HTML они создаются с помощью элемента a . У открывающего тега должен быть атрибут href . Обычно его значением является адрес другого документа.
Между тегами и записывается текст ссылки, который видит читатель страницы. При клике по этому тексту происходит переход к другому документу (он загружается в окно браузера). В адресной строке при этом меняется адрес.
Нередким элементом страницы являются списки. Они бывают неупорядоченные и упорядоченные. Первые определяются элементом ul , вторые – ol . Каждый пункт и того и другого списка формирует контейнер .
Чтобы придать значимости какой-либо фразе или термину их помещают в контейнер («важный, ключевой текст») или («обратить особое внимание», «сделать акцент»). Первый выглядит жирным, второй – курсивом.
Strong и em – структурные элементы; они имеют значение для поисковых систем. С их помощью придают больший вес заключенным в них словам. Если же нужно просто выделить текст жирным или курсивом для красоты, наглядности, понятности можно использовать теги оформления и , пришедшие из более ранних версий HTML.
Следует отметить, с помощью языка CSS элементы b и strong , i и em можно сделать визуально отличимыми. Например, задать для b темно-синий цвет шрифта, а em дополнительно к курсиву придать жирность начертания.
Существует множество различных элементов HTML. Информацию о них можно найти во многих источниках. О некоторых тегах будет рассказано позже по ходу курса.
Еще раз обратим внимание на терминологию. Элементы HTML создаются с помощью тегов. У открывающих и одиночных тегов могут быть атрибуты. Атрибутам через знак равенства присваиваются значения. Значения берутся в кавычки. Атрибуты пишутся после имени тега, но последовательность между самими атрибутами, если их несколько, не важна.
Атрибуты можно представить как своего рода «настройщики» элемента. Набор допустимых атрибутов разных тегов может отличаться, однако существуют общие, то есть употребимые с большинством тегов.
В программировании, в том числе декларативном, куда можно отнести верстку веб-страниц, используют комментарии. Их назначение – пояснять работу кода для изучающего программу человека. Комментарии никак не сказываются на выполнении программ. При разработке бывает с их помощью «выключают» часть кода, чтобы сконцентрироваться на другой части или при тестировании разных вариантов. В HTML комментарии записываются так:
X Скрыть Наверх
Введение в веб-разработку и создание сайтов
Источник: younglinux.info
Теги и синтаксис HTML
Как я уже говорил, теги HTML — это специальные инструкции, указывающие браузерам как отображать ту или иную часть страницы. Сейчас мы поговорим о них подробнее, но не старайтесь сразу все запоминать — у вас не получится, да и не нужно это, так как в остальных главах вы будете на каждом шагу сталкиваться с тегами — постепенно все само запомнится. Просто прочитайте и постарайтесь понять.
Открывающие и закрывающие теги, теги-контейнеры
Теги могут быть открывающими (начальными) и закрывающими (конечными). Открывающие теги состоят из знаков «» между которыми указывается имя тега, а у закрывающих перед именем дополнительно ставится прямой слэш (/).
Большинство HTML-тегов являются парными — имеют обязательные открывающий и закрывающий теги, например: и . Некоторые имеют только открывающий тег, например , и называются пустыми. Другие же могут иметь открывающий тег, а закрывающий можно указывать, а можно и нет, тогда браузер сам определит, где заканчивается действие тега.
Теги, которые имеют обязательный или необязательный закрывающий тег принято называть теги-контейнеры или элементы-контейнеры.
Все теги HTML не чувствительны к регистру, то есть можно указывать и или вообще .
Теперь совет. Рекомендую вам всегда писать теги в нижнем регистре (строчными буквами) и ставить необязательные закрывающие теги. Во-первых, это является признаком профессионализма и хорошего тона, а во-вторых, в HTML-коде со всеми закрывающими тегами гораздо проще ориентироваться и править его. Ну да я вам об этом еще не раз напомню.
Пример использования тегов
Жирный шрифт Курсивный шрифт
Результат в браузере
Жирный шрифт Курсивный шрифт
И все таки, как будет правильно — «теги» или «элементы»?
Вообще, в большинстве случаев правильно будет говорить — «элементы». Именно из HTML-элементов состоит веб-страница, и именно элементы выводят в окне браузера изображения, таблицы, ссылки и т.д. А теги предназначены для того, чтобы сообщить браузеру, где и какой элемент находится, начинается и заканчивается. Давайте еще раз рассмотрим пример, который расположен выше. Там указаны два элемента B и I . Каждый из них содержит обычный текст и имеет открывающий и закрывающий теги.
Так уж сложилось, что на сегодняшний день слово «тег» прочно вошло в русский язык (да и не только в русский) в качестве синонима слову «элемент». Я думаю из-за того, что при использовании обоих слов не теряется смысл повествования. Поэтому в данном учебнике я тоже буду использовать оба этих слова, чтобы вы привыкли к ним и научились подсознательно определять, о чем идет речь в каждом конкретном случае. И сильно на этом не заморачивайтесь, знаете, чем отличается тег от элемента — вот и хорошо.
Теги можно указывать в одну строку, а можно в несколько
Да, HTML-теги можно указывать в одну строку, а можно в несколько, для браузеров это не имеет никакого значения, они просто игнорируют переносы строк. А также между тегами можно ставить сколько угодно пробелов — все подряд идущие пробелы браузеры воспринимают как один. Например, вот так:
Жирный шрифт Курсивный шрифт
Результат в браузере
Жирный шрифт Курсивный шрифт
Правильная вложенность тегов
Многие теги можно вкладывать друг в друга, чтобы они вместе воздействовали на один и тот же элемент страницы. Но при этом важно соблюдать правильную вложенность — тег, появляющийся раньше, должен закрываться позже. Кстати, ошибка вложенности является одной из самой распространенной среди новичков.
<тег1><тег2> <тег3>. — неправильно
Пример использования вложенных тегов
Жирный курсивный шрифт
Результат в браузере
Жирный курсивный шрифт
Родительские и дочерние теги, потомки и предки
Чтобы указать иерархическую структуру HTML-тегов, их принято называть определенными словами. На самом деле все очень просто. Итак, давайте возьмем такой пример:
Родительские теги — тег является родительским для других тегов, если они вложены внутрь него на один уровень. В нашем примере является родительским для и , но не является для тега . А вот родитель .
Дочерние теги — обратно родительским. и дочерние для , а для тега .
Предки — тег является предком для всех тегов, которые находятся внутри него на любом уровне вложенности. предок для всех тегов, а предок .
Потомки — обратно предкам. Все теги — потомки тега , но еще и потомок тега .
Ну что, не запутались? Чтобы проще запомнить, проведите аналогию со своим семейным древом и сразу все встанет на свои места.
Что значит «один тег содержит другой»?
Как вы уже знаете, теги можно вкладывать друг в друга и, соответственно, одни могут содержать другие. Но тут есть один небольшой, но очень важный момент, которому новички часто не уделяют должного внимания. Давайте возьмем уже знакомый нам пример:
Говорят, что один тег содержит другой только, если первый является родительским тегом, а второй — дочерним и никак иначе. то есть в нашем примере содержит и , но не содержит . А вот как раз и содержит . Немного необычно, правда? Но своя логика в этом есть, согласитесь.
Каждый HTML-элемент может содержать только определенный набор тегов, а некоторые вообще не могут содержать ничего кроме текста. Все это зависит от типа, к которому относится тег, поэтому, перед тем как вкладывать теги, проверьте — может ли один из них содержать другой.
Типы тегов
В HTML, теги делятся на несколько типов или моделей:
Inline (встроенные, уровня строки) — все, что выводят эти теги на страницу, всегда отображается браузером на одной сроке. И только если доступной ширины (например, ширины окна браузера) не хватает, то происходит перенос строки на следующую и т.д.
Пример использования встроенных тегов
Жирный шрифт Курсивный шрифт
Результат в браузере
Жирный шрифт Курсивный шрифт
Block (блочные, уровня блока) — все, что выводит каждый из таких тегов на страницу, отображается браузером с новой строки, После себя такие элементы также создают переносы строк.
Пример использования блочных тегов
Параграф 1
Параграф 2
Результат в браузере
Есть еще теги других типов, но о них мы с вами поговорим в дальнейших уроках, а эти два типа самые распространенные в HTML.
Ну что, надеюсь пока все понятно? Тогда пошли дальше.
Разделы сайта
- Как сделать сайт
Самому и бесплатно - Учебник HTML
Для начинающих - Учебник CSS
Для новичков - Справочники
По HTML и CSS - Примеры
HTML и CSS - Ссылки
Полезные сайты для вебмастеров - Инструментарий
Программы для создания сайтов
Учебник HTML
- Введение
- Что такое HTML?
- Теги и синтаксис HTML
- Атрибуты HTML-тегов
- Общие и текст
- Структура HTML-документа
- Параграфы и заголовки
- Как изменить шрифт?
- Меняем цвет текста и фона
- Выравнивание содержимого
- Цитаты и обрыв строки
- Что такое спецсимволы HTML?
- Горизонтальные линии
- Группирование элементов
- Комментарии в HTML
- Ссылки
- Cсылки и их разновидности
- Меняем цвета ссылок
- Ссылки на электронную почту
- Якоря — создаем закладки
- Изображения
- Изображения
- Изображения для фонов
- Изображения — ссылки
- Таблицы
- Таблицы
- Границы, рамки и отступы HTML-таблиц
- Объединение ячеек таблицы
- Вложенные таблицы
- Списки
- Нумерованные и маркированные списки
- Метатеги
- Метатеги и их типы
С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.
Источник: seodon.ru