Теги
Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования и применяются теги. Общий синтаксис написания тегов следующий.
Как видно из данного примера, теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные атрибуты, которые разделяются между собой пробелом. Впрочем, есть теги без всяких дополнительных атрибутов. Условно атрибуты можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега.
В примере 3.1 показан типичный HTML-документ с тегами и текстом.
Пример 3.1. Теги в документе
Lorem ipsum Lorem ipsum dolor sit amet consectetuer cursus pede pellentesque vitae pretium. Tristique mus at elit lobortis libero Sed vestibulum ut eleifend habitasse. Quis Nam Mauris adipiscing Integer ligula dictum sed at enim urna. Et scelerisque id et nibh dui tincidunt Curabitur faucibus elit massa. Tincidunt et gravida Phasellus eget parturient faucibus tellus at justo sollicitudin. Mi nulla ut adipiscing.
В данном примере используется одиночный тег , а парных тегов сразу несколько: , , , и
.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
HTML форматирование текста
Вид текста на экране зависит от того, какие HTML теги были использованы для его форматирования. Теги форматирования делятся на две категории: теги физической разметки, которые отвечают за стилевое оформление (жирное начертание, курсив, шрифт и т.д.) текста, и теги логической разметки, которые несут смысловую нагрузку (например, дают понять поисковым системам по каким словам необходимо ранжировать веб-страницу).
Рассмотрим подробно теги форматирования и объясним нюансы их применения.
Теги —
Теги — используются для структурирования HTML заголовков. В HTML используются 6 уровней заголовков, от до . используется для обозначения самого важного, а наименее важного заголовков.
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Заголовок первого уровня h1> h2>Заголовок второго уровня h2> h3>Заголовок третьего уровня h3> h4>Заголовок четвертого уровня h4> h5>Заголовок пятого уровня h5> h6>Заголовок шестого уровня h6> body> html>Результат
Теги и
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Мы использовали тег <strong>, чтобы выделить strong> этот важный фрагмент текста strong>. p> body> html>Результат
Теги и
Пример
html> html> body> p>Это обычный абзац p> p>Важный фрагмент текста выделяется em>курсивным начертанием em> p> body> html>Результат
Тег
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> pre>Крошка сын к отцу пришёл, и спросила кроха: — Что такое хорошо и что такое плохо? — pre> body> html>Результат
Как вы заметили, все пробелы и переносы строк сохранены в браузере.
Тег
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Изучайте язык гипертекстовой разметки HTML на сайте mark>W3Docs.com mark>. p> body> html>Результат
Тег
Пример
html> html> head> title>Использование тега SMALL title> head> body> p>Процентная ставка всего 10%* p> small>* - в день small> / body> html>Результат
Тег и
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Мой любимый цвет del>зеленый del> ins>синий ins>! p> body> html>Результат
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>s>Я учусь в школе s> p> p>Я учусь в институте. p> body> html>Результат
Содержимое обоих тегов браузеры отображают как перечеркнутый текст. Несмотря на внешнюю схожесть, теги не могут заменять друг друга.
Тег и
Тег используется для определения части текста, которая была добавлена в документ. Содержимое тега в браузере отображается как подчеркнутый текст.
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Ее любимые цветы del>фиалки del> ins>подснежники ins>․ p> body> html>Результат
Пример
html> html> head> title>Заголовок документа title> head> body> p>Здесь мы использовали u>элемент <u> u>. p> body> html>Результат
Теги и
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Формула воды -Hsub>2 sub>O, а формула спирта - Csub>2 sub>Hsub>5 sub>ОН p> p>E = mcsup>2 sup>, где E — энергия объекта, m — его масса, c — скорость света в вакууме. p> body> html>Результат
Тег
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>dfn>HTML dfn> (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML p> body> html>Результат
Теги
,
и
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Это первый абзац p> p>Это второй абзац p> body> html>Результат
Пример
html> html> head> title>Заголовок документа title> head> body> h1>Пример использования тега <br> h1> p> Внутри абзаца мы можем вставить тег <br />, br /> чтобы перенести часть текста на другую строку в случае необходимости. p> body> html>Результат
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Футбол h1> p>Командный вид спорта, в котором целью является забить мяч в ворота соперника. p> hr> h1>Баскетбол h1> p>Спортивная командная игра с мячом, в которой мяч забрасывают руками в корзину (кольцо) соперника. p> body> html>Продолжим наше ознакомление с искусством верстки на HTML. На очереди – парные теги. И вообще, что за слово такое ругательное? Теги? Итак, тег, умные люди, в частности отцы паутины, называют «дескриптор», но я его так никогда не называл, и не буду называть на моем сайте, можно же просто – «тег». Тег – это элемент языка разметки текста (HTML). Кратко говоря: «Тег – элемент HTML», все, что внутри тега, называют содержанием элемента. Логично, не так ли? Я говорю проще: «внутри тега», умные слова только на конференциях нужно использовать, а не в быту. Итак, подобрались к парным тегам, включаем логику, парный, хм… значит, есть начальный тег и конечный тег, но их так не называют, кроме Википедии, конечно. Правильно так: «Открывающий и Закрывающий тег». Даже с большой буквы написал, в знак уважения. Теперь, например:
…
, есть открывающий, есть закрывающий тег, значит парный тег. Тег
…
тоже парный, кстати, знакомлю, это заголовок первого уровня, то есть простой текст, по отношению к нему, будет меньше. Для большего понимания проведем аналогию: тег – это одежда, а его содержимое – это человек. Облачив человека в одежду, он преобразуется. Также, если обернуть содержимое (текст, например) в тег, он поменяет свой внешний вид. С парными тегами кончено.
Несложно догадаться, что у одинарного тега нет закрывающего, пример:
,
, . Думаю, кто-то видел теги такого плана:
, ну и так далее. Это «Старый стиль». Да, когда был HTML4, нужно было закрывать одинарный тег именно так, но с появлением HTML5 многое изменилось, и не только это конечно. Не настаиваю на написание закрывающей косой черты и в системе проверки это учтено, но давайте быть новаторами и не тормозить процесс! Те три тега «перенос строки», «разделительная линия», «изображение» соответственно.
И в продолжении
Старайтесь учить сразу эти теги. Отрабатывайте их в заданиях и придумывайте свои задания, для себя. Читайте литературу и тематические сайты. А теперь приступите к заданию. В нем немного нужно подумать. Даю подсказку, после слова «это» напишите какой-то тег, тот который в задании.
О парных тегах
Умение быстро и четко манипулировать тегами, это хороший старт в изучении. Вы практически всегда будете работать с этими тегами верстая сайт. В уроке пятом (парные теги), вы познакомитесь ближе с парными тегами.
Правильно структурировать информацию, тоже хорошее дело, ведь поисковые системы (Yandex, Google), любят, когда заголовки помещены в теги заголовка первого уровня – это информация официальная, ее озвучил глава Google. На поисковую выдачу влияет так же использование тегов «маркированный список» и «нумерованный список». На поисковую выдачу так же влияет использование атрибутов title , alt . Да это только малая часть, на самом деле, есть 200 официальных пунктов от Google, которые влияют на выдачу в поисковике. Возможно, обо всех их я напишу.
Основные теги HTML
Окей, с доктайпом разобрались. Приступим непосредственно к контенту.
Простейшая HTML-страница состоит как минимум из трёх тегов: , и .
Тег располагается в документе сразу после доктайпа и содержит все остальные теги, включая и . Тегу обычно добавляют важный атрибут lang (сокращение от английского «language»), в котором задаётся язык документа. Наш сайт будет русскоязычным, поэтому в lang пропишем такое значение:
Тег хранит важную служебную информацию, а в теге хранится содержание страницы, которое отображается в окне браузера. Все тексты и картинки мы будем добавлять внутрь . В документе теги head и body могут быть использованы только один раз.
Давайте начнём работу над прототипом главной страницы нашего сайта!
Атрибут lang можно задавать любым тегам, если нужно уточнить, на каком языке написан текст внутри тега. Но если задать его тегу , то действие атрибута распространится на весь документ целиком.
Перейти к заданию
- index.html Сплит-режим