Базовые теги HTML — Джино • Журнал
Продолжаем знакомиться с языком разметки HTML, основой основ большинства сайтов в интернете. Раньше мы уже рассказывали об этом языке, а теперь изучим самые простые и самые необходимые теги и их атрибуты в HTML.
Напомним, что теги и атрибуты — это инструменты, с помощью которых контент на странице сайта организовывается тем или иным образом. Атрибуты прописываются внутри тегов и имеют рядом с собой знак «=», а сами теги всегда заключаются в угловые скобки. Почти все теги в HTML являются парными и окружают с двух сторон ту часть контента, к которой они должны быть применены. Первый, открывающий, тег пишется без дополнительных символов, а во втором, закрывающем, теге после первой скобки появляется знак «/».
Основное
<html></html> Сигнализирует браузеру, что он имеет дело с HTML-документом.
<head></head> Очерчивает часть документа, которая не видна на странице. Предназначен для тега названия, для размещения счётчиков веб-аналитики и не только.
<title></title> Тот самый тег названия документа, его содержимое отображается в ярлыке вкладки браузера.
<body></body> Ограничивает часть документа, которая видна на странице. О том, какие теги здесь могут использоваться, мы покажем далее.
Оформление текста
<i></i> Выделяет текст курсивом.
<b></b> Делает текст полужирным.
<u></u> Подчёркивает текст.
<s></s> Зачёркивает текст.
<cite></cite> Предназначается для оформления цитат.
<tt></tt> Имитирует шрифт печатной машинки.
<code></code> Выделяет текст шрифтом Monospace, который используется для оформления фрагментов кода.
<font size=?></font> Определяет размер текста с помощью значений от 1 до 7, которые нужно подставлять вместо вопросительного знака.
<font color=?></font> Определяет цвет текста с помощью формата RRGGBB. Шестизначный код цвета так же вставляется вместо вопросительного знака.
Организация текста
<h2></h2> Оформляет текст в виде самого большого заголовка.
<h6></h6>
Заголовок h6
<p></p> Оформляет абзац.
<p align=?> Выравнивает абзац нужным образом. Вместо вопросительного знака здесь можно поставить одно из четырёх значений: left (по левому краю), right (по правому краю), justify (по ширине) или center (по центру).
<br> Добавляет перенос
строки.
<blockquote></blockquote> Вставляет отступы с обеих сторон текста.
<ol></ol>
- Предназначается
- для
- нумерованных
- списков.
<ul></ul>
- Оформляет
- ненумерованный
- список.
<li> Сопровождает каждый пункт в списке, обозначая его цифрой или маркером — в зависимости от типа списка.
Работа со ссылками
<a href="URL">ТЕКСТ</a> «Зашивает» ссылку в нужный фрагмент текста. Адрес ссылки вставляется вместо «URL», а текст по умолчанию окрашивается в синий цвет и подчёркивается.
<a href="URL">
<img src="imgURL"></a>
imgURL».
<a href="#якорь">ТЕКСТ</a> С помощью этого тега можно сослаться на «якорь» — определённый фрагмент внутри просматриваемой страницы. К примеру, якоря используется для быстрого перехода из оглавления к соответствующей части статьи. Вместо «ТЕКСТ» в первом теге необходимо поместить слово или фразу, нажав на которую, можно будет перейти в нужный участок страницы. А там, куда нужно привести читателя, необходимо добавить атрибут id="якорь" в любой тег. Например, по этой ссылке можно перейти в раздел «Основное» в начале статьи.
Работа с графикой
<img src="URL">
URL» нужна ссылка на необходимый файл.
<img src="URL" align=?> Как и в <p align=?>, этот параметр выравнивает изображение нужным образом, однако здесь применяется уже шесть значений: left (слева), right (справа) и center (по центру), а также bottom (внизу), top (вверху) и middle (посередине)
<img src="URL" border=?> Создаёт рамку в виде сплошной линии вокруг изображения. Вместо вопросительного знака можно указать любое целое положительное число. Чем больше число, тем толще рамка.
<body background="URL">
background в теге <body> позволяет установить картинку в качестве фона страницы.
<hr> Создаёт сплошную горизонтальную линию.
Вы можете проверить работу всех перечисленных выше тегов, создавая свои собственные HTML-документы. Для этого подойдёт даже Microsoft Office Word или другой текстовый редактор. Необходимо лишь сохранить файл с кодом в формате .html. Но также существуют и HTML-редакторы, которые предназначены для работы с этим языком — о них мы расскажем в одной из наших следующих статей.
Основные теги языка HTML — CyberGuru.ru
Written on . Posted in HTML, CSS, JavaScript
Основные теги языка HTML Основные теги<html></html> — Указывает программе просмотра страниц что это HTML документ.
<head></head> — Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<body></body> — Определяет видимую часть документа
Теги оглавления<title></title> — Помещает название документа в оглавление программы просмотра страниц Атрибуты тела документа<body bgcolor=?> — Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB — пример: FF0000 — красный цвет.
<body text=?> — Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB — пример: 000000 — черный цвет.
<body link=?> — Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB — пример: 00FF00 — зеленый цвет.
<body vlink=?> — Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB — пример: 333333 — серый цвет.
<body alink=?> — Устанавливает цвет гиперссылок при нажатии.
Теги для форматирования текста<pre></pre> — Обрамляет предварительно отформатированный текст.
<h2></h2> — Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6> — Создает самый маленький заголовок
<b></b> — Создает жирый текст
<i></i> — Создает наклонный текст
<tt></tt> — Создает текст — имитирующий стиль печатной машинки.Используется для цитат, обычно наклонный текст.
<em></em> — Используется для выделения из текста слова (наклонный или жирный текст)
<strong></strong> — Используется для выделения наиболее выжных частей текста (наклонный или жирный текст)
<font size=?></font> — Устанавливает размер текста в пределах от 1 до 7.
<font color=?></font> — Устанавливает цвет текста, используя значение цвета в виде RRGGBB.
Гиперссылки<a xhref=»URL»></a> — Создает гиперссылку на другие документы или часть текущего документа.
<a xhref=»mailto:EMAIL»></a> — Создает гиперссылку вызова почтовой программы для написания письма автору документа.
<a name=»NAME»></a> — Отмечает часть текста как цель для гипперссылок в документе.
<a xhref=»http://www.cyberguru.ru/#NAME»></a> — Создает гиперссылку на часть текущего документа.
Форматирование<p> — Создает новый параграф
<p align=?> — Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
<br> — Вставляет перевод строки.
<blockquote></blockquote> — Создает отступы с обеих сторон текста.<dl></dl>Создает список определений.
<dt> — Определяет каждый из терминов списка
<dd> — Описывает каждое определение
<ol></ol> — Создает нумерованный список
<li> — Определяет каждый элемент списка и присваивает номер
<ul></ul> — Создает ненумерованный список
<li> — Предваряет каждый элемент списка и добавляет кружок или квадратик.
<div align=?> — Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей
Графические элементы<img xsrc=»name»> — Добавляет изображение в HTML документ
<img xsrc=»name» align=?> — Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<img xsrc=»name» border=?> — Устанавливает толщину рамки вокруг изображения
<hr> — Добавляет в HTML документ горизонтальную линию.<hr size=?>Устанавливает высоту(толщину) линии
<hr width=?> — Устанавливает ширину линии, можно указать ширину в пикселах или процентах.
<hr noshade> — Создает линию без тени.
<hr color=?> — Задает линии определенный цвет. Значение RRGGBB.
Таблицы<table></table> — Создает таблицу.
<tr></tr> — Определяет строку в таблице.
<td></td> — Определяет отдельную ячейку в таблице.
<th></th> — Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
Атрибуты таблицы<table border=#> — Задает толщину рамки таблицы.
<table cellspacing=#> — Задает расстояние между ячейками таблицы.
<table cellpadding=#> — Задает расстояние между содержимым ячейки и ее рамкой.
<table width=#> — Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<tr align=?> или <td align=?> — Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
<tr valign=?> или <td valign=?> — Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan=#> — Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)
<td rowspan=#> — Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
<td nowrap> — Не позволяет программе просмотра делать перевод строки в ячейке таблицы.
Кадры<frameset></frameset> — Предваряет тег <body> в документе, содержащем кадры;
<frameset rows=»value,value»> — Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров.
<frameset cols=»value,value»> — Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров.
<frame> — Определяет единичный кадр или область в таблице кадров.
<noframes></noframes> — Определяет, что будет показано в окне браузера если он не поддерживает кадры.
Атрибуты кадров<frame xsrc=»URL»> — Определяет какой из HTML документов будет показан в кадре.
<frame name=»name»> — Указывает Имя кадра или области, что позволяет перенаправлять информацию в этот кадр или область из других кадров.
<frame marginwidth=#> — Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1.
<frame marginheight=#> — Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1.
<frame scrolling=VALUE> — Указывает будет-ли выводится линейка прокрутки в кадре; значение value может быть «yes,» «no,» или «auto». Значение по умолчанию для обычных документов — auto.
<frame noresize> — Препятствует изменению размеров кадра.
ФормыДля форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы.
<form></form> — Создает формы
<select multiple name=»NAME» size=?></select> — Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option> — Указывает каждый отдельный элемент меню
<select name=»NAME»></select> — Создает ниспадающее меню <option>Указывает каждый отдельный элемент меню
<textarea name=»NAME» cols=40 rows=8></textarea> — Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type=»checkbox» name=»NAME»> — Создает checkbox. За тегом следует текст.
<input type=»radio» name=»NAME» value=»x»> — Создает radio кнопку. За тегом следует текст.
<input type=text name=»foo» size=20> — Создает строку для ввода текста. Параметром Size указывается длина в символах.
<input type=»submit» value=»NAME»> — Создает кнопку «Принять»
<input type=»image» border=0 name=»NAME» xsrc=»name.gif»> — Создает кнопку «Принять» — для этого используется изображение<input type=»reset»>Создает кнопку «Отмена»
HTML Основные теги
В языке HTML всё, что вы напишите в HTML-документе, будет выведено на экран браузера сплошным текстом, то есть браузер игнорирует переводы строк, а также несколько набранных вами подряд пробелов заменяются одним.
Теги — это управляющие команды, которые были придуманы для того, чтобы отформатировать текст, т.е. теги говорят браузеру о том, как именно нужно вывести на экран часть текста, заключенную в теги. Для создания тега между угловыми скобками вводится HTML-код, который предназначен только для браузеров. Посетители сайта не видят теги.
Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды).
Например, тег <em> предназначен для акцентирования текста, браузеры отображают такой текст курсивным начертанием. Когда браузер обнаруживает этот тег, он переключается на форматирование курсивным шрифтом текста, следующего за тегом.
Рассмотрим пример:
Этот текст обычный. <em> Этот текст курсивный.
Тег <em> называют начальным или открывающим тегом, что означает включение браузером определенной команды (в данном случае написание курсивным шрифтом). У большинства тегов есть пара в виде закрывающего тега, который отключает команду.
Закрывающий тег выглядит так же, как начальный, но начинается с слэша. Итак, конечный тег для выделения курсивным шрифтом — </em>.
Рассмотрим пример:
Этот текст обычный. <em> Внимание! Курсив. </em> Это снова обычный шрифт.
Как вы успели заметить, браузер последовательно анализирует HTML – документ в поисках команд (тегов) и применяет или отключает разные параметры форматирования текста. Браузер отформатированный текст (все, что не является тегом) отображает в своем окне.
| Процесс вставки тегов в обычный неформатированный текст называется разметкой HTML-документа, а теги — знаками разметки. При написании тегов не учитывается регистр букв, тег может быть прописан как строчными, так и прописными буквами, но всё же рекомендуется применение прописных букв. |
Ниже приведены примеры основных тегов HTML, с объяснением их использования, а также примеры их применения в HTML-документе.
Заголовки
Существует специальный тег для указания заголовков в HTML. Есть 6 уровней заголовков в HTML, начиная от <h2> для наиболее важных объявлений, до <h6> для наименее важных.
Вот они:
Пример HTML: Попробуй сам<h2>Заголовок 1</h2> <h3>Заголовок 2</h3> <h4>Заголовок 3</h4> <h5>Заголовок 4</h5> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6>
HTML абзацы
С помощью HTML тэга <p> Вы можете определить абзац.
Абзацы используются для логической группировки текста. Перед и после текста абзаца браузер автоматически отступает одну строчку.
Пример HTML: Попробуй сам<p>Это абзац</p>
<p>Это другой абзац</p>
<p>Это третий абзац</p>
HTML ссылки
С помощью HTML тэга <a> создаются ссылки.
Ссылки используются для связывания HTML документов друг с другом. Нажав на ссылку пользователь будет перемещен на другой HTML документ, url которого указан в атрибуте href.
Атрибут href задает адрес документа, на который следует перейти.
Атрибуты используются для предоставления дополнительной информации о HTML-элементах.
Вставка изображений
С помощью HTML тэга <img> Вы можете вставить в HTML документ произвольное изображение.
Ширина и высота картинки может задаваться с помощью атрибутов width и height.
Пример HTML: Попробуй сам
<img src="images/orange.jpg" alt="Апельсин">
| Обратите внимание: HTML-атрибуты будут подробно рассмотрены далее в данном учебнике. |
HTML — Основные теги языка / ProgLang
Теги заголовка html-документа
Любой документ начинается с заголовка, который может быть разного размера. Существует шесть уровней заголовков в HTML: <h2>, <h3>, <h4>, <h5>, <h5> и <h6>. При отображении любого заголовка, браузер добавляет одну строку до и одну строку после этого заголовка.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример заголовков в HTML</title>
</head>
<body>
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4>
<h5>Заголовок h5</h5>
<h5>Заголовок H5</h5>
<h6>Заголовок H6</h6>
</body>
</html>
Получим следующий результат:
Тег абзаца (параграфа)
HTML предлагает способ структурирования вашего текста в разные абзацы с помощью тега <p>. Каждый абзац текста должен находиться между открывающим <p> и закрывающим тегом </p>, как показано ниже в примере:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример абзацев в HTML</title>
</head>
<body>
<p>Первый абзац текста</p>
<p>Второй абзац текста</p>
<p>Третий абзац текста</p>
</body>
</html>
Получим следующий результат:
Тег разрыва строки
Всякий раз, когда Вы используете тег <br />, все последующее за ним элементы начинаются со следующей строки. Этот тег является примером пустого элемента, в котором Вам не нужны открывающие и закрывающие теги, так как между ним нет ничего.
Тег <br /> имеет пробел между символами br и косой чертой. Если Вы пропустите это пространство, то у старых браузеров возникнут проблемы с отображением разрыва строки, а если Вы пропустите символ косой черты и просто используйте тег <br>, то он будет недействителен в XHTML.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример разрыва строки в HTML</title>
</head>
<body>
<p>Привет<br />
Вы выполнили свое задание вовремя.<br />
Спасибо</p>
</body>
</html>
Получим следующий результат:
Центрирование содержимого
Вы можете использовать тег <center>, чтобы поместить любой контент в центр страницы или в любую ячейку таблицы.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример центрирования содержимого в HTML</title>
</head>
<body>
<p>Текст не по центру.</p>
<center>
<p>Текст по центру.</p>
</center>
</body>
</html>
Получим следующий результат:
Тег горизонтальной линии в HTML
Горизонтальные линии используются для визуального разбиения разделов документа. Тег <hr> создает, из текущей позиции в документе, строку (горизонтальную линию) на правое поле и соответственно разбивает строку.
Например, Вы можете сделать горизонтальную линию между двумя параграфами, как в приведенном ниже примере:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример горизонтальной линии в HTML</title>
</head>
<body>
<p>Первый абзац и он должен быть вверху.</p>
<hr />
<p>Второй абзац и он должен быть внизу.</p>
</body>
</html>
Получим следующий результат:
Снова тег <hr /> является примером пустого элемента, где Вам не нужны открывающие и закрывающие теги, так как между ним нет ничего.
В HTML тег <hr /> имеет пробел между символами hr и косой чертой. Если Вы не поставите этот пробел, то у старых браузеров возникнут проблемы с отображением горизонтальной линии, а если Вы пропустите символ косой черты и просто используйте <hr>, то он будет недействителен в XHTML.
Сохранение форматирования
Иногда Вы хотите, чтобы ваш текст соответствовал точному формату того, как он написан в html-документе. В этих случаях Вы можете использовать тег <pre>.
Любой текст между открывающим тегом <pre> и закрывающим тегом </pre> сохранит форматирование исходного документа.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример сохранения форматирования в HTML</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
Получим следующий результат:
Попробуйте использовать этот же код, не сохраняя его внутри тегов <pre>…</pre>.
Неразрывный пробел в HTML
Предположим, Вы хотите использовать фразу «Пираты Карибского моря: Мертвецы не рассказывают сказки». Здесь Вы не хотите, чтобы браузер разделил «Пираты», «Карибского», «моря:», «Мертвецы», «не», «рассказывают» и «сказки» на две строки:
В тех случаях, когда Вы не хотите, чтобы браузер клиента прерывал текст, Вы должны использовать в HTML неразрывный пробел вместо обычного пробела. Например, при написании фразы «Пираты Карибского моря: Мертвецы не рассказывают сказки» в коде абзаца Вы должны использовать что-то похожее на следующий код:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример неразрывного пробела в HTML</title>
</head>
<body>
<p>Самый популярный кинофильм этой весны: «Пираты Карибского моря: Мертвецы не рассказывают сказки»</p>
</body>
</html>
Получим следующий результат:
Поделитесь:
| Тег | Описание | Версия |
| <!—…—> | Комментарий | |
| <!DOCTYPE> | Тип html-документа | |
| <a> | Ссылка | |
| <abbr> | Аббревиатура | |
| <acronym> | Сокращение (аббревиатура) | |
| <address> | Адрес (контактная информация) | |
| <applet> | Апплет (устаревший) | |
| <area> | Область внутри карты изображения | |
| <article> | Статья | |
| <aside> | Некоторый контент, который слабо связан с содержимым страницы или сайта | |
| <audio> | Звуковой контент | |
| <b> | Жирный текст | |
| <base> | Базовый URL для всех ссылок на странице | |
| <basefont> | Базовый шрифт (устаревший) | |
| <bdo> | Направление текстового отображения | |
| <bdi> | Текст, который должен быть изолирован от окружения для двунаправленного форматирования текста, это позволяет встраивать диапазон текста с другой или неизвестной направленностью | |
| <bgsound> | Фоновая музыка | |
| <big> | Большой текст | |
| <blink> | Текст, который мигает | |
| <blockquote> | Длинная цитата | |
| <body> | Элемент страницы body | |
| <br> | Один разрыв строки | |
| <button> | Кнопка | |
| <canvas> | Создание графики со сценарием | |
| <caption> | Заголовок таблицы | |
| <center> | Центрирование текста (устаревший) | |
| <cite> | Цитата | |
| <code> | Компьютерный код | |
| <col> | Атрибут столбцов таблицы | |
| <colgroup> | Группа столбцов таблицы | |
| <comment> | Комментарий в документе | |
| <datalist> | Список параметров входных значений | |
| <dd> | Описание определения | |
| <del> | Удаленный текст | |
| <dfn> | Термин определения | |
| <dialog> | Диалоговое окно | |
| <dir> | Список каталога (устаревший) | |
| <div> | Контейнер в документе | |
| <dl> | Список определений | |
| <dt> | Термин определения | |
| <em> | Выделенный текст, отображается курсивом | |
| <embed> | Контейнер для внешнего (не HTML) приложения, интерактивного контента или плагина | |
| <fieldset> | Набор полей | |
| <figcaption> | Подпись для тега <figure> | |
| <figure> | Автономный контент | |
| <font> | Шрифт, размер и цвет шрифта (устаревший) | |
| <footer> | Нижний колонтитул для документа или раздела | |
| <form> | Форма | |
| <frame> | Вспомогательное окно (фрейм) | |
| <frameset> | Набор кадров | |
| <h2>-<h6> | Заголовок 1-6 | |
| <head> | Информация о странице | |
| <header> | Верхний колонтитул для документа или раздела | |
| <hr> | Горизонтальная линия | |
| <html> | HTML-документ | |
| <i> | Курсивный текст | |
| <iframe> | Встроенное вспомогательное окно (фрейм) | |
| <ilayer> | Встроенный слой | |
| <img> | Изображение | |
| <input> | Поле ввода | |
| <ins> | Вставленный текст | |
| <isindex> | Однострочное поле ввода (устаревший) | |
| <kbd> | Текст, который должен быть введен с клавиатуры | |
| <keygen> | Генерация ключей в форме | |
| <label> | Метка для элемента управления формой | |
| <layer> | Слой | |
| <legend> | Заголовок в наборе полей | |
| <li> | Элемент списка | |
| <link> | Ссылка на ресурс | |
| <main> | Основной или важный контент в документе, не более одного элемента на странице | |
| <map> | Карта изображения | |
| <mark> | Текст для справочных целей, выделенный желтым фоном | |
| <marquee> | Область прокрутки текста | |
| <menu> | Список меню (устаревший) | |
| <menuitem> | Элемент команды/меню, который пользователь может вызывать из всплывающего меню | |
| <meta> | Метаданные html-документа, который не отображается на странице | |
| <meter> | Скалярное измерение в пределах известного диапазона (калибр) | |
| <multicol> | Многоколоночный текстовый поток | |
| <nav> | Раздел, который содержит только ссылки для навигации | |
| <nobr> | В прилагаемом тексте не допускается никаких прерываний | |
| <noembed> | Контент, который будет отображаться браузерами, которые не поддерживают тег <embed> | |
| <noframes> | Секция noframe | |
| <noscript> | Секция, не поддерживающая сценарий (скрипт) | |
| <object> | Встроенный объект | |
| <ol> | Упорядоченный нумерованный список | |
| <optgroup> | Группа параметров | |
| <option> | Параметр в раскрывающемся списке | |
| <output> | Результат вычисления | |
| <p> | Абзац | |
| <param> | Параметр для объекта | |
| <plaintext> | Показывать оставшуюся часть документа в виде предварительно отформатированного открытого текста (устаревший) | |
| <pre> | Предварительно отформатированный текст | |
| <progress> | Ход выполнения задачи | |
| <q> | Короткая цитата | |
| <rp> | Альтернативный текст в браузерах, которые не поддерживают элемент ruby | |
| <rt> | Текстовая аннотация элемента ruby | |
| <ruby> | Контейнер для восточно-азиатских символов | |
| <s> | Зачеркнутый текст (устаревший) | |
| <samp> | Пример компьютерного кода, скрипта или системных сообщений | |
| <script> | Скрипт | |
| <section> | Раздел в документе | |
| <select> | Выбираемый список | |
| <spacer> | Пробел | |
| <small> | Маленький текст | |
| <source> | Медиа-ресурсы, определенные внутри элементов video или audio | |
| <span> | Контейнер для строчных элементов в документе | |
| <strike> | Зачеркнутый текст (устаревший) | |
| <strong> | Полужирный текст | |
| <style> | Встраиваемая таблица стиля | |
| <sub> | Подстрочный текст | |
| <summary> | Сводка, подпись или условное обозначение для <details> | |
| <sup> | Надстрочный текст | |
| <table> | Таблица | |
| <tbody> | Тело таблицы | |
| <td> | Ячейка таблицы | |
| <textarea> | Текстовая область | |
| <tfoot> | Нижний колонтитул таблицы | |
| <th> | Заголовок ячейки таблицы | |
| <thead> | Заголовок таблицы | |
| <time> | Дата и время <details> | |
| <title> | Заголовок документа | |
| <tr> | Строка таблицы | |
| <track> | Субтитры, используемые в медиаплеере | |
| <tt> | Текст телетайпа | |
| <u> | Подчеркнутый текст (устаревший) | |
| <ul> | Маркированный список | |
| <var> | Переменная | |
| <video> | Видео-файл |
Основные теги, заголовки.
Урок 6.В этом уроке мы разберем основные теги html применяемые к тексту, а именно теги <b>, <i>, <u>, <s>, <center>, <p>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>.
Тег <b> — делает шрифт жирным (мы уже сталкивались с этим тегом).
Тег <i> — делает шрифт курсивным.
Тег <u> — подчеркивает текст.
Тег <s> — зачеркивает текст.
* Все эти теги требуют закрытия. Впредь, если я не буду ничего говорить про закрытие тега, то это будет означать, что тег требует закрытия (как сейчас) и это само собой разумеется. Когда мы будем затрагивать теги исключения которые не требуют закрытия, то я обязательно буду это указывать.
Теперь давайте применим теги в нашем коде:
Мы используем в коде все четыре рассматриваемых тега, а так же тег <br> который служит для переноса строки. Мы его применяем таким образом, чтобы наши четыре слова были написаны не в строку, а в столбик.
Результат:
Теперь познакомимся с еще одним новым тегом <center>. Данный тег выравнивает текст по центру. Давайте применим его в нашем коде и выровним по центру, например, слово «радость». После внесения изменений наш код выглядит так:
Сохраняем изменения в Notepad (Ctrl + S) и смотрим результат в браузере:
Еще давайте разберем распространенный тег <p>. Данный тег называют параграфом, но используется он для разделения текста не на параграфы, а на абзацы. Вначале каждого отдельного абзаца ставится открывающий тег <p>, в конце абзаца ставится закрывающий тег </p>. Демонстрировать Вам рисунок с примером не вижу смысла, так как все из Вас читали книги и газеты, соответственно что такое абзац Вы знаете.
В данном уроке было бы логично рассмотреть тег <font>, но мы уже уделили ему должное внимание в 4-ом уроке. Я советую Вам еще раз пробежаться глазами по практической части 4-го урока, это не будет лишним.
Заголовки html.
Теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6> — это заголовки разных уровней. Значимость заголовков соответствует названию тегов. <h2> — самый важный, <h6> — не особо важен, можно обойтись и без него. Давайте применим на практике все 6 вариантов, чтобы Вы поняли принцип их работы. Пишем следующий html код:
Сохраняем изменения и открываем файл в браузере.
Заголовки отличаются друг от друга по размеру, чем заголовок важнее, тем он больше. И еще, для того чтобы заголовок писался на новой строке, тег <br> (перенос строки) использовать не нужно.
Правила использования заголовков html.
С точки зрения оптимизации Вашей страницы для поисковых систем (Яндекс, Гугл и др.) есть несколько правил и рекомендаций.
1. Самое важное правило: тег <h2> (заголовок 1-го уровня) используется в тексте только один раз и в самом начале статьи. Наличие тега <h2> обязательно. Например, страница на которой Вы сейчас находитесь, имеет заголовок <h2>Урок 6. Основные теги html.</h2>
2. Тег <h3> нужно использовать минимум 2 раза, максимум 5.
3. Тег <h4> используется по необходимости.
4. Теги <h5>, <h5>, <h6> можно не использовать вообще (на Ваше усмотрение).
5. Заголовки нужно использовать в строгом порядке. Сначала <h2>, затем <h3>, потом <h4>. Другими словами заголовок <h4> не может находиться выше, чем заголовок <h3>.
Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]
HTML: теги
HTML: теги- HTML – Язык гипертекстовой разметки, HyperText Markup Language. Как у любого языка, у HTML есть грамматика и словарь. Слова этого словаря записываются в <угловых> скобках и называются элементами, или тегами.
- Теги используются для указания начала и конца элемента разметки, то есть, обычно теги используются парами. К конечному элементу пары тегов добавляют «/». Так отмечают начало и конец параграфа, или абзаца: <p>Текст параграфа</p>. Парный тег – это контейнер. Если начало и конец элемента совпадают, используют одиночные теги. Примеры одиночных тегов: <br>, <img>.
- Для парных тегов работает принцип вложенности: вложенный тег (потомок) должен целиком находиться внутри тега предка, наподобие матрешки. Ситуация типа <i><b></i></b> недопустима!
- У любой HTML-страницы есть основные теги, задающие структуру, «скелет» всего документа. Это <html>, <head>, <body>. Если их нет в html-файле, браузер автоматически добавит недостающие элементы базовой разметки.
- Теги HTML-документа выстраиваются в дерево зависимостей – Document Object Model, DOM. К положению элемента в DOM привязываются стили (CSS) и скрипты (JavaScript).
Шаблон HTML-страницы (сокращение Emmet «!»)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Заголовок</title>
</head>
<body>
<!-- Основное содержимое -->
</body>
</html>
Обязательные теги HTML-страницы
<!DOCTYPE html>
<html lang="ru">
<meta charset="UTF-8">
<title>Заголовок</title>
Атрибуты
- У тегов могут быть атрибуты для управления содержимым. Они записываются внутри угловых скобок тега через пробел. Значение атрибута всегда заключается в кавычки («»)
- У атрибутов есть типы: текст, число, путь к файлу и т.д.
- Некоторые атрибуты тегов заданы в стандарте HTML по умолчанию.
- Порядок следования атрибутов не важен
Пример: одиночный тег <img> имеет обязательные атрибуты src типа «путь к файлу» и alt типа «текст»
<img src="path/to/example.jpg" alt="Alternate text">Существуют глобальные атрибуты, их можно применять ко всем тегам: список глобальных атрибутов.
Некоторые глобальные атрибуты:
- class определяет класс, значение – имена классов;
- id – идентификатор, значение – уникальный идентификатор;
- style – стили, значение – код CSS;
- hidden – скрывает элемент, но не удаляет его из DOM. Аналогично применению стиля display: none;
- title – дополнительная информация в виде всплывающей подсказки, значение – текст.
- Структура и инструкции для построения HTML-документа:
- <!DOCTYPE>. Указывается в первой строке документа и означает: «Этот документ написан на HTML5». Не представлен в дереве документа DOM. Обязателен для корректного применения CSS.
- html. Главный тег, сообщает браузеру, что это HTML-документ. Находится в основании дерева DOM и он – корневой элемент, или элемент верхнего уровня.
- head. Не всю информацию надо показывать на странице. Служебная информация – в «голове» документа.
- title, link. Служебная информация: краткий заголовок и ссылки на внешние файлы (иконка, стилевой файл). Определяются в head.
- meta. Любая информация о мета-данных, которая не может быть представлена другими, ориентированными на мета-данные, HTML элементами. Например, кодировка страницы.
- body. Все видимое в окне, вкладке браузера содержимое – в «теле» страницы.
- комментарии: <!— игнорируются при построении страницы —>.
- Основная разметка
- Заголовки h2-h6. Заголовки и подзаголовки улучшают читаемость текста.
- p и br. Параграф и принудительный перенос на новую строку. Заголовки нельзя вкладывать в параграфы!
- hr. Разделитель содержимого, горизонтальная линия (display: block).
- img. Картинка, изображение (display: inline-block). В обязательном атрибуте src указывается путь к файлу или его URL. Распространенные форматы изображений: jpeg, png, svg, webp
(пример webp):
- ul и ol, li: ненумерованный и нумерованный списки, элемент списка (display: list-item).
- a. Ссылка. Атрибуты download, href, target и т.д.
Якорь — это название после символа #, который указывает на элемент (идентификатор, ID) на текущей странице. - Стилистически выделенные строчные элементы:
b (полужирный, font-weight: bold),
i (курсив, font-style: italic),
u (подчеркнутый, text-decoration: underline),
s (перечеркнутый, text-decoration: line-through). - sub (vertical-align: sub; font-size: smaller;), sup (vertical-align: super; font-size: smaller).
- Семантическая разметка
- header. «Шапка» страницы. Не путать с head!
- footer «Подвал» страницы.
- main. Основное содержимое страницы.
- section. Раздел, секция.
- article. Статья.
Семантические теги по свойствам повторяют тег div.
Структура страницы с семантической разметкой
Сколько всего тегов HTML?
Их 115–120, примерно как в периодической системе химических элементов – таблице Менделеева:
Источник: templatemonster.com, версия для мобильных устройств.
С описанием на русском языке. Серым цветом отмечены устаревшие теги. Еще: Полный список тегов HTML.
Спецсимволы HTML
Спецсимволы – запоминающиеся (мнемонические) обозначения символов вида &слово;. Они входят в стандарт HTML.
Когда использование спецсимволов – единственная возможность отобразить символ на web-странице:
- Знак меньше: <, мнемоника < Потому что с него начинаются теги.
- неразрывный пробел, мнемоника . Потому что в коде HTML игнорируется более одного пробела подряд.
Другие часто используемые спецсимволы:
- Знак больше >: >
- короткое – тире – и длинное — тире —
- двойные угловые кавычки, или французские кавычки, или «ёлочки»: « и »
- амперсанд &: &
- копирайт ©: ©
Чем заполняют макеты?
Текстом Lorem ipsum, который не имеет перевода. Слово «lorem» получилось из-за переноса «dolorem» на новую страницу после первого слога.
Фраза «dolorem ipsum» встречается в философском трактате Цицерона «О пределах добра и зла», написанном в 45 году до н.э. на латинском языке.
- В оригинале: «Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit …»
- Перевод: «Нет никого, кто любил бы свою боль, кто искал бы ее и хотел бы чтобы она была у него. Потому что это боль…»
Первые 100 слов, вызываются сокращением Emmet lorem100:
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio animi alias porro ipsam illum exercitationem odit cum perspiciatis quidem, a perferendis eum minus ea sapiente corporis libero quos ullam, debitis assumenda? Corrupti, culpa! Ut fuga corrupti culpa eligendi voluptas, molestiae aliquid quod soluta, nostrum doloribus maxime numquam illo facilis obcaecati excepturi expedita pariatur ullam necessitatibus ex eius odit, similique saepe omnis officiis. Maiores facilis ullam architecto numquam non tempore magni quae deleniti? Corrupti aspernatur officia qui recusandae quis mollitia facere illum corporis cum id harum, odit maxime repellat tempore deleniti exercitationem iste ullam suscipit provident delectus, sed necessitatibus doloremque. Excepturi?
Альтернативы HTML?
Языков разметки много, и HTML – всего один из множества, хотя сегодня и самый популярный. Существует SGML (Standard Generalized Markup Language), стандартный обобщённый язык разметки.
Языки HTML и XML произошли от SGML. HTML был приложением SGML, а XML – это подмножество SGML, разработанное для упрощения процесса машинного разбора документа. В 2000-х годах у консорциума W3C было серьезное намерение перевести веб на XML. К счастью, этого не случилось.
Markdown – облегчённый язык разметки, созданный с целью написания легко читаемого и удобного для правки текста, но пригодного для преобразования в другие форматы (например, HTML). Подходит для самых простых страниц, но требует конвертации в HTML.
Сравнение языков разметки документов.
— HTML: язык гипертекстовой разметки
HTML-элемент представляет доминирующее содержимое документа. Область основного содержимого состоит из содержимого, которое непосредственно связано с центральной темой документа или центральной функциональностью приложения или расширяет ее.
В документе не должно быть более одного элемента , для которого не указан атрибут hidden .
Содержимое элемента должно быть уникальным для документа. Контент, который повторяется в наборе документов или разделах документа, таких как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайтов и формы поиска, не должен включаться, если форма поиска не является основной функцией страницы.
не влияет на структуру документа; то есть, в отличие от таких элементов, как , таких заголовков, как и т. д.,
не влияет на концепцию DOM о структуре страницы.Это строго информативно.
<основной>
Яблоки
Яблоко — это семечковый плод яблони.
<статья>
Красное вкусное
Эти ярко-красные яблоки чаще всего встречаются во многих
супермаркеты.
...
...
<статья>
Гренни Смит
Эти сочные зеленые яблоки станут отличной начинкой для
яблочные пироги.
...
...
Landmark
Элемент ведет себя как main роль ориентира. Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации больших разделов документа и перехода к ним. Предпочитайте использовать элемент вместо объявления role="main" , если нет проблем с поддержкой устаревших браузеров.
Пропустить навигацию
Пропустить навигацию, также известную как «skipnav», — это метод, который позволяет пользователю вспомогательных технологий быстро обходить большие разделы повторяющегося контента (основная навигация, информационные баннеры и т. д.). Это позволяет пользователю быстрее получить доступ к основному содержимому страницы.
Добавление атрибута id к элементу позволяет использовать его в качестве цели пропуска навигационной ссылки.
<тело>
Перейти к основному содержанию
<основной>
Режим чтения
Функция режима чтения браузера проверяет наличие элемента , а также элементов заголовков и разделов содержимого при преобразовании содержимого в специализированное представление для чтения.
Таблицы BCD загружаются только в браузере
Для поддержки Internet Explorer 11 и более ранних версий можно добавить роль ARIA "main" к элементу . Но имейте в виду, что ARIA в спецификации HTML утверждает, что role="main" на самом деле не следует использовать с элементом , и валидатор W3C сообщит об этом с предупреждением. Однако в противном случае Internet Explorer 11 и более ранние версии не будут правильно отображать элемент для программ чтения с экрана, таких как JAWS, если этот элемент также не имеет атрибута role="main" .
Тег HTML »
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше- Элемент
- Структура HTML-документа до и после HTML5 — вот что изменилось
- Что делает
HTML-тег - Элемент
используется для обозначения содержимого веб-страницы, относящегося к центральной теме этой страницы или приложения. Он должен включать контент, уникальный для этой страницы, и не должен включать контент, который дублируется на нескольких веб-страницах, например верхние и нижние колонтитулы и основные элементы навигации. - Дисплей
- встроенный
- Использование
- семантический | структурный
Структурирование HTML-документа
Элемент — это структурный и семантический элемент, определяющий основной раздел страницы, где отображается содержимое. Аналогичные элементы включают , который обозначает статью в файле HTML, и , который описывает примечание или комментарий. Раздел также полезен, когда нестандартные устройства, такие как программы чтения с экрана, интерпретируют содержимое вашей страницы.Это позволяет устройству чтения с экрана быстро обнаруживать и находить важный контент, пропуская при этом код в верхней части файла. — один из 9 структурных тегов, представленных в спецификации HTML 5.
Использование
Элемент можно использовать только один раз в каждом файле HTML. За ним следует закрывающий тег , который следует разместить в конце содержимого. Оба тега должны использоваться вне других структурных элементов, таких как и его закрывающий тег, и и его закрывающий тег.Они не могут перекрывать их или сидеть внутри них.
Правильные определения на вашей странице
предшествовал аналогичный элемент, . Эти два элемента имеют разные цели в HTML. Чтобы получить правильное использование, вернитесь к исходным определениям, предоставленным W3C. «представляет основное содержание тела документа или приложения», а «представляет содержимое документа»
.Для более четкого понимания рассмотрим, как вы будете стилизовать Клэр — опытный технический писатель, редактор и энтузиаст HTML.Она пишет для HTML.com и руководит контент-агентством Red Robot Media. Тег Элемент Этот элемент не влияет на представление DOM о структуре страницы, в отличие от таких элементов, как Вспомогательная технология может использовать ориентиры для быстрой идентификации больших разделов документа и навигации по ним.Рекомендуется использовать элемент Пользователь вспомогательных технологий может пропускать большие разделы повторяющегося контента, используя технику «skipnav». Это позволяет пользователю легко получить доступ к основному содержанию страницы. Если вы добавите атрибут id к элементу Тег
Языки HTML и CSS предназначены для верстки сайта.
HTML (язык гипертекстовой разметки) — это язык гипертекстовой разметки, который используется для создания веб-страниц. ... ...
CSS — это язык стилей, определяющий отображение HTML-документов.
... Тег Тег HTML Пример: Поддерживаемые браузеры: Браузеры, поддерживаемые <Главная> Тег , перечислены ниже: Тег HTML Тег HTML-документ может иметь более одного элемента Тег Теги HTML могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя.Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот пример: Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий. Ниже перечислены атрибуты, которые можно добавить к этому тегу. В следующей таблице показаны атрибуты, характерные для этого тега/элемента. Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5. Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием. Полный список обработчиков событий см. в разделе Атрибуты содержимого обработчиков событий HTML 5. В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом Тег HTML В HTML синтаксис тега Ваш надежный ресурс для изучения новых технологий. Изучите HTML (язык гипертекстовой разметки) с помощью наших пошаговых руководств и справочников. Изучите CSS (каскадные таблицы стилей) с помощью наших пошаговых руководств и справочников. К тегу Тег Мы обсудим тег Если вы создали новую веб-страницу в HTML5, ваш тег Ваш надежный ресурс для изучения новых технологий. Изучите HTML (язык гипертекстовой разметки) с помощью наших пошаговых руководств и справочников. Изучите CSS (каскадные таблицы стилей) с помощью наших пошаговых руководств и справочников. В этом примере документа HTML5 мы создали тег Вы не можете использовать тег Вы не можете использовать тег Вы не можете использовать тег Вы не можете использовать тег Есть несколько основных тегов, которые вы должны добавить в каждый создаваемый HTML-документ.В предыдущем модуле вы создали новый файл с именем index.html. В текущем уроке вы добавите в этот файл несколько основных необходимых тегов, тем самым начав создание своего портфолио. Эти основные теги обеспечивают шаблон для любой веб-страницы.
По завершении этого упражнения: Возможно, вам будет легче читать, если вы добавите дополнительные пустые строки, как показано в примере выше.Кроме того, отступ содержимого, которое находится внутри другого содержимого, помогает вам увидеть взаимосвязь между всеми частями страницы. Это стандартная практика для всех языков разметки, сценариев и программирования. Помните: Дополнительные пробелы и пустые строки будут игнорироваться при отображении HTML браузером. Теперь рассмотрим каждый из этих тегов: и с помощью CSS. должен заключать в себе всю суть страницы — например, сообщения в блоге или другой контент. Думайте об этом как о прямой замене имеет более широкий охват и инкапсулирует навигацию, контент, боковые панели и нижний колонтитул. Таким образом, он имеет разные последствия для стиля. Поддержка браузером основного
Тег HTML
и другие.
Пример тега HTML
<голова>
Языки программирования
HTML
CSS
Результат
Как оформить тег
Общие свойства для изменения визуального веса/выделения/размера текста в теге
Цветной текст в теге
Стили макета текста для тега
Другие свойства, на которые стоит обратить внимание для тега
HTML | Тег — GeeksforGeeks
Примечание: Документ не должен содержать более одного элемента
Синтаксис:
HTML
< < < Глава > < стиль > .класс { цвет: зеленый; } > < Body > < h2 class="class"><Main> Tag H2 > < < < < H2 > Программирование языков H2 > < P > C Программирование, C ++ Программирование, Java Программирование P > < Статья > < H2 > C Программирование H2 > < < P > C представляет собой процедурный язык P > артикул > < 9000 5 Статья > < H2 > C ++ Программирование H2 > < P > Программирование C ++ составляет Объектно-ориентированное программирование. P > < > < H2 > Программирование Java H2 > < P > Java - это чистый объект ориентированное программирование. P > Body > >
Тег HTML 5
используется для представления области основного содержимого в документе HTML. окружает основное содержимое страницы — содержимое, уникальное для этого документа и, очевидно, являющееся «основным» содержимым этой страницы. Это исключает любой контент, который повторяется на нескольких страницах (например, панели навигации, верхние и нижние колонтитулы и т. д.). , но видимым может быть только один. Если в документе присутствует более одного элемента , все остальные экземпляры должны быть скрыты с помощью атрибута hidden .Кроме того, элемент не должен появляться в тегах , , , или . был введен в HTML 5. Демо
Атрибуты
style="color:black;" . Специфичные для элемента атрибуты
Атрибут Описание
Нет
Глобальные атрибуты
tabindex не применяется к элементам диалога ).
ключ доступа автокапитализация класс редактируемый контент данные-* директор перетаскиваемый скрытый идентификатор режим ввода это идентификатор товара itemprop Артикул предметная область тип изделия язык часть слот проверка правописания стиль tabindex Название перевод Атрибуты содержимого обработчика событий
прерывание onauxclick размытие при отмене онканплей oncanplaythrough на смену по клику при закрытии в контекстном меню онкопия при обмене нарезной ondblclick ондраг ондрагенд Драгентер ондрагзит на накладке ондраговер ондрагстарт впускной ondurationchange пустой одноконцевой при ошибке онфокус onformdata на входе oninvalid нажатие клавиши нажатие клавиши onkeyup onlanguagechange под нагрузкой загруженные данные загруженные метаданные запуск при загрузке ввод с помощью мыши на коврике для мыши onmousemove onmouseout при наведении мыши на мышке вверх паста пауза в игре в игре в процессе onratechange при сбросе изменение размера при прокрутке нарушение политики безопасности поиск поиск по выбору на смене слота установлен при отправке на подвесе ontimeupdate нагрудник при изменении объема в ожидании на колесе HTML: тег
Описание
Синтаксис
<тело>
<основная роль="главная">
ТехОнТенет.ком
HTML
CSS
Пример вывода
Атрибуты
Примечание
Совместимость с браузером
Пример
Документ HTML5
<голова>
<мета-кодировка="UTF-8">
<тело>
<основная роль="главная">
TechOnTheNet.com
HTML
CSS
и два тега
Переходный документ HTML 4.01
Переходный документ XHTML 1.0
Строгий документ XHTML 1.0
Документ XHTML 1.1
WebD2: основные теги
Обзор
Результаты учащегося
Деятельность
<голова>
<мета-кодировка="utf-8">