Знакомство с тегами.
Прежде чем разобраться в структуре созданной нами страницы, нужно понимать, что такое теги. Теги являются основной составляющей html.
С помощью тегов мы можем добавить на нашу страницу различные объекты (текст, таблицы, картинки, ссылки). Так же с помощью тегов мы можем влиять на внешний вид этих объектов (цвет, размер). В созданной нами странице написано «Здравствуйте! Это моя первая веб-страница!», данный текст написан без использования тегов. С помощью определенных тегов, мы можем сделать так, чтобы эта надпись выводилась браузером на экран, например курсивом, либо жирным шрифтом.
Этот урок один из самых важных. Я рекомендую отнестись к нему серьезно. Если Вы прочитаете первую половину урока и что-то не поймете — не огорчайтесь, приступите к выполнению практической части, она, как правило помогает разобраться во всех вопросах.
Правила написания тегов.
Теги всегда пишутся в треугольных скобках. Сначала идет открывающийся тег, он состоит из треугольных скобок и названия самого тега. Внутри тега находиться какой-либо контент (текст). Далее тег нужно закрыть. Закрывающийся тег выглядит так же как открывающийся, но перед названием тега ставиться слэш.
Пример написания тега:
Бывают теги которые не нужно закрывать, для их работы нужно только открыть тег. Таких тегов очень мало, о них мы поговорим позже. Практически все теги необходимо закрывать, если не закрыть тег, который по своим правилам требует закрытия, то это будет грубейшая ошибка. Один не закрытый тег может сделать так, что вся ваша html страница будет отображаться браузером некорректно.
Правило закрытия тегов.
Часто бывает, что внутри тега, помимо текста располагаются еще другие теги. В этом случае теги закрываются в зеркальном порядке, то есть первым будет закрыт тот тег, который был открыт последним.
Пример правильного закрытия тегов:
Параметры тегов.
С помощью параметров (атрибутов) тега мы можем задать нужный нам цвет или размер текста, находящегося внутри этого тега. Значение параметра пишется в кавычках.
Пример написания тега с параметром (атрибутом):
Параметров у тега может быть несколько. Например цвет и размер. В этом случае параметры указываются через пробел.
Пример написания тега с несколькими параметрами:
Применим знания на практике.
Нажимаем правой кнопкой мыши на созданный нами файл и выбираем «Edit with Notepad++» (открыть с помощью Notepad++).
Открыв файл мы видим уже знакомый нам html код, который мы вставляли ранее:
В этом уроке мы будем акцентировать внимание на строке с текстом «Здравствуйте! Это моя первая веб-страница!». Пока что не обращайте внимание на другие строки, это структура html страницы, ей будет уделен следующий урок.
Текст «Здравствуйте! Это моя первая веб-страница!» написан без использования тегов и параметров (атрибутов), соответственно при запуске файла через браузер, данный текст имеет стандартный размер и цвет.
Теперь сверните Notepad++ и давайте параллельно откроем наш файл в браузере. Сейчас наша страница выглядит так:
Первый тег, который мы изучим на практике — это тег <b>. Данный тег служит для того, чтобы сделать текст жирным. Тег <b> требует закрытия, по этому правильное применение будет выглядить так:
Теперь давайте вернемся в Notepad++ и добавим тег <b> в наш html код. Мы сделаем нашу надпись «Здравствуйте! Это моя первая веб-страница!» жирной. Для этого мы заключаем данный текст в тег <b>.
Теперь наш код выглядит так:
* Все html коды которые я размещаю — нельзя скопировать, это сделано специально для того, чтобы Вы прописывали все теги в ручную. Это полезно.
Итак, тег <b> успешно добавлен в код, и теперь, чтобы изменения вступили в силу, нам нужно их сохранить. Для этого нажимаем в верхнем меню кнопку «Файл», далее нажимаем «Сохранить». Так же процедуру сохранения можно делать с помощью горячих клавиш (Ctrl + S), это удобней.
Теперь заходим в браузер, в котором открыта наша страница. Мы внесли изменения в код и сохранили их, но браузер этого еще не знает. Чтобы сообщить браузеру об изменениях, нужно обновить страницу, для этого нажимаем на клавиатуре «F5».
Сейчас Вы должны увидеть результат применения тега <b>, надпись должна стать жирной, как на рисунке:
Теперь давайте удалим из нашего кода тег <b> и пропишем вместо него тег <font>. Данный тег так же необходимо закрыть. Теперь наш код выглядит так:
Сохраните изменения в notepad (нажатием Ctrl + S), зайдите в браузер, обновите страницу (нажав F5). Сейчас мы видим, что надпись отображается обычно, так же как до использования тегов. Это значит, что тег <font> ничего не поменял. Это все потому, что данный тег не работает без параметров (атрибутов). Тег <font> лишь указывает браузеру на то, что внутри него (между <font> и </font>) находится текст. Для этого тега мы можем задать параметры color (цвет) и size (размер текста).
Сейчас давайте сделаем нашу надпись зеленой. Для этого мы зададим тегу <font> параметр color (цвет) и дадим ему значение green (зеленый). Теперь наш код выглядит так:
После добавления параметра и значения в наш код html, Вы заметили, что они отличаются по цвету от всех других символов и тегов на странице. Это сделано специально для того, чтобы html код легче нам читался. Все теги обозначаются синим цветом, все атрибуты — красным, а значения атрибутов — фиолетовым.
Сейчас сохраняем изменения в Notepad++ (нажатием Ctrl + S), заходим в браузер и обновляем страницу (нажав F5). Сейчас наша надпись должна стать зеленой как на рисунке:
Теперь, чтобы закрепить материал, давайте добавим к тегу <font> еще один атрибут size. Данный параметр отвечает за размер текста. Он может иметь значение от 1 до 7, мы будем использовать значение 6, так как это мое любимое число! Мы сейчас добавляем второй параметр для тега, важно не забыть, что если параметров несколько, то между ними пробел! После добавления параметра size наш код выглядит следующим образом:
Теперь, как обычно, сохраняем изменения в файле (Ctrl + S), заходим в браузер и обновляем страницу (F5). Сейчас наш текст должен стать большим, как на рисунке:
Если все получилось, то поздравляю, Вы освоили основной принцип работы тегов и их атрибутов. Это уже большой шаг!
Вы что-то не поняли из этого урока? Спрашивайте!
— vadimgreb@yandex.ru
Основные HTML-теги
Тег — это специальное зарезервированное слово, заключённое в угловые скобки (например, ). Тег — основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не , а .
Какими бывают теги?
Большинство HTML-тегов являются парными: есть открывающий (например, ) и закрывающий тег, который от открывающего отличает слеш (/) после первой угловой скобки (например, ). Всё, что находится внутри пары тегов, называется их содержимым.
Содержимое Помещённый внутри этих тегов текст становится жирным
Бывают и непарные (одиночные) теги, которые называются метками. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега — . Он устанавливает перенос текста на следующую строку.
Если проводить параллели с русским языком, то можно сказать, что парные теги — это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) — это знаки препинания (восклицательный, вопросительный или точка).
Любой тег состоит из:
- Открывающей угловой скобки ().
- Специального слова (имени тега). Например, hr, iframe, b.
- Закрывающей угловой скобки (>).
Основные HTML-теги
Так как теги — основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.
- — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
- , , , , — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
- — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
- содержит ссылку на файл сценария или сам код.
- — тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов , определяющих разные стили разных частей страницы.
- — полная противоположность , его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
- хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
- содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри должна располагаться как раз эта статья.
- предназначен для создания ссылок. Ссылки — корень гипертекста, поэтому им посвящена отдельная статья.
- нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу статья).
- , , — , , , , , , и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML».
- — блочный элемент. Текст внутри форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
- . У вас есть абзац или блок . Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег .
- , , — теги списков. Маркированные, нумерованные — работа этих тегов. Есть ещё списки определений, за которые отвечают теги , и , но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков».
- , , , , и используются при создании таблиц и подробно рассматриваются в отдельной статье.
- — тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера .
- — тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами ).
- создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер . Но зачем нам тогда отдельно , если есть универсальный ? позволяет создать кнопку с расширенными параметрами. Например, на кнопке можно разместить картинку. На элементе, созданном через , такого сделать нельзя.
- и — теги создания меню в HTML 5. — это контейнер, внутри которого помещаются элементы , добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
- — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.
Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Так, HTML- теги размечают веб-страницу. Ставят его в коде сайта, помогая браузеру понять, когда именно необходимо будет отобразить тот или иной фрагмент и текст. ну к примеру, вы пишите заголовок статьи. Первое требование — он должен выделяться на фоне остального текста даже визуально, это делают при помощи CSS-стилей. Второе — браузер должен распознать, что это заголовок, а не текст, для чего его и отмечают специальным тегом — .
Посетитель, зайдя на сайт, не видит теги, даже те, которые служат разметкой страниц. Такие HTML-теги предназначены больше для специалистов, поисковиков и браузеров, позволяя корректно отображать информацию. Существует, к примеру, тег , который вовсе ничего не отображает. То есть пользователь не видит его, а вот поисковые роботы его не просто распознают, но и учитывают точность и четкость указанной в нем информации для ранжирования страниц и выдачи.
Теги для разметки страниц сайта заключают в треугольные скобки, чтобы браузеру и поисковым роботам было проще их определить. Что досконально изучить HTML-теги, недостаточно одной словарной статьи. Это довольно обширная тема, которая захватывает и продвижение, и контекст, и социальные сети.
- Продвижение по трафику
- Продвижение молодого сайта
- Продвижение сайта в США
- Продвижение сайта в Москве
- Наша команда
- Словарь терминов
- Вакансии
- Услуги
- Политика конфиденциальности
СПАСИБО, ЧТО ДОВЕРИЛИСЬ НАМ!
Мы вас не подведём! Наш менеджер перезвонит в течение часа, чтобы обсудить всё, что вам интересно. Не бойтесь спрашивать, мы не кусаемся!
СПАСИБО, ЧТО ДОВЕРИЛИСЬ НАМ!
Мы вас не подведём! Наш менеджер перезвонит в течение часа, чтобы обсудить всё, что вам интересно. Не бойтесь спрашивать, мы не кусаемся!
СПАСИБО, ЧТО ДОВЕРИЛИСЬ НАМ!
Мы вас не подведём! Наш менеджер перезвонит в течение часа, чтобы обсудить всё, что вам интересно. Не бойтесь спрашивать, мы не кусаемся!
СПАСИБО, ЧТО ДОВЕРИЛИСЬ НАМ!
Мы вас не подведём! Наш менеджер перезвонит в течение часа, чтобы обсудить всё, что вам интересно. Не бойтесь спрашивать, мы не кусаемся!
СПАСИБО, ЧТО ДОВЕРИЛИСЬ НАМ!
Мы вас не подведём! Наш менеджер перезвонит в течение часа, чтобы обсудить всё, что вам интересно. Не бойтесь спрашивать, мы не кусаемся!
Что такое тег в html
В HTML теги используются для создания элементов. Имя HTML-элемента — это имя заключённое в угловые скобки, как например
для «абзаца». Обратите внимание, что концу имени предшествует символ косой черты (слеша), «
«, и что в пустых элементах закрывающий тег не требуется и не допускается. Если атрибуты не указаны, то для них применяются значения по умолчанию.
Узнать больше
Общие знания
Техническое руководство
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 12 нояб. 2023 г. by MDN contributors.
Your blueprint for a better internet.