"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка сайта
Примеры PHP
Графика
Оптимизация сайта
Полезное
Реклама на сайте:






Базовые теги


папка digest

Урок №3

Теги — это управляющие команды, которые были придуманы для того, чтобы отформатировать текст, т.е. теги говорят браузеру о том, как именно нужно вывести на экран часть текста, заключенную в теги. Для создания тега между угловыми скобками вводится HTML-код, который предназначен только для браузеров.

Базовые теги (основные)

В основе языка HTML лежит понятие «тэг» (англ.tag-ярлык,). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов <html> и </html>. В web-странице включены контейнеры, отвечающие за заголовок документа это: Голова который содержит дополнительную информацию, а также контейнеры, отвечающие за само содержание документа это: Тело. (Пример на рисунке.)

Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды).

Например, тег <p> выводит текстовый абзац (допускает атрибуты style, class, id).
Самый распространенный тег, поскольку в него помещают текст.

1. HTML тег <p></p> (Используется для абзацев)

Рассмотрим пример:

<p>Абзац текста.</p>
<p>Следующий абзац текста.</p>

Как это будет выглядеть на странице:

Абзац текста.

Следующий абзац текста.

Итак, мы расмотрели пример с тегом <p>, далее предлагаю ознакомиться с полным списком html тегов.


Список тегов html

2. HTML тег <b> и </strong> (Выделение жирным)

<strong></strong> и <b></b>— Это два тега, которые позволяют сделать шрифт жирным. Разницы между этими тегами нет, но чаще всего используется тег <b>

Рассмотрим пример:

<b>жирный текст</b>
<strong>жирный текст</strong>

Как это будет выглядеть на странице:

Жирный текст.

Также как и в случае с <p> можно прописать атрибуты (class и id)


3. HTML тег <em> (Предназначен для акцентирования текста. Создание курсива)

<em></em> -Курсивный шрифт (допускает параметр style, class, id)

Рассмотрим пример:

<em>Курсивный текст.</em>

Как это будет выглядеть на странице:

Курсивный текст.

На протяжении долгих лет использовался тег <i> </i>. С приходом в нашу жизнь HTML5 стали использовать тег <em></em>. Отныне тег <i> </i> содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски. На мой взгляд, <i> логично использовать там, где типографская традиция предполагает курсив (например, слова на иностранном языке, термины и др.)


4. HTML тег <u></u> (Подчеркнутый текст)

<u></u> -Подчеркнутый шрифт (допускает параметр style, class, id) а так же, html код:

Рассмотрим пример:

<u>Подчеркнутый текст.</u>

Как это будет выглядеть на странице:

Подчеркнутый текст.

5. HTML тег <a></a> (Позволяет создавать гиперссылки)

<a href="links"></a> — Создает ссылку на странице (допускает параметр style, class и другие).

Рассмотрим пример:

<a href="http://webps.ru/">текст ссылки</a>

Как это будет выглядеть на странице:

Веб поскриптум

6. HTML тег <h1></h1> (Заголовки на странице контента)

Существует специальный тег для указания заголовков в HTML. Всего шесть уровней заголовков в HTML, начиная от <h1> для наиболее важных объявлений, до <h6> для наименее важных. (допускает параметр style, class и другие).

Рассмотрим пример:

<h1>Заголовок h1.</h1>

Как это будет выглядеть на странице:

Заголовок h1

Тег <h1> используют для названия страницы, также как и title этот тег оказывают больше влияние на ранжирование сайта.


7. HTML тег <center></center> (Выравнивание)

<center></center> Выравнивает содержимое контента по центру страницы.

Рассмотрим пример:

<center>Например: Этот текст будет находится в центре страницы.</center>

Как это будет выглядеть на странице:

Выравнивает содержимое контента по центру страницы.

В настоящие время тег <center></center> , используется редко, вместо него принято писать такие конструкции:

  • <p style="text-align:center">** ** **</p> — Это для текста
  • <div style="text-align:center">** ** **</div> — Это например, для изображения.

8. HTML тег <sub></sub> (Подстрочный текст)

<sub></sub> Выводит подстрочный шрифт.

Рассмотрим пример:

Это обычный текст. <sub>А это подстрочный текст.</sub>

Как это будет выглядеть на странице:

Это обычный текст. А это подстрочный текст.

Как видите "Разница на лицо".


9. HTML тег <sup></sup> (Надстрочный текст)

<sup></sup> Выводит надстрочный шрифт.

Рассмотрим пример:

Это обычный текст. <sup>А это надстрочный текст.</sup>

Как это будет выглядеть на странице:

Это обычный текст. А это надстрочный текст.

10. HTML тег <big>и</small> (Относится к размеру: большой маленький)

<big></big> <small></small> Выводит шрифт на один пиксель больше-меньше текующего размера (допускает параметр style, class, id).

Рассмотрим пример:

Это обычный текст. <big>Это большой текст.</big> <small>Это маленький текст.</small>

Как это будет выглядеть на странице:

Это обычный текст. Это большой текст. Это маленький текст.

11. HTML тег <ul></ul> (Создание списков)

<ul><li>***</li></ul> Выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между <li> и </li>

Рассмотрим пример:

Список: 
<ul>
	<li>Первый элемент списка<li>
	 <li>Второй элемент списка<li>
	  <li>Третий элемент списка<li>
</ul>

Как это будет выглядеть на странице:

  • Первый элемент списка
  • Второй элемент списка
  • Третий элемент списка

12. HTML тег <ol></ol> (Нумерация списков)

<ol><li>***</li></ol> Выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между <li> и </li>

Рассмотрим пример:

Список: 
<ol>
	<li>Первый элемент списка<li>
	 <li>Второй элемент списка<li>
	  <li>Третий элемент списка<li>
</ol>

Как это будет выглядеть на странице:

  1. Первый элемент списка
  2. Второй элемент списка
  3. Третий элемент списка

Как видите мы заменили тег <ul> на <ol> и получили нумерацию списка, то есть изменился маркер на цифру.


13. HTML тег <table></table> (Создание таблиц)

<table></table> Создает таблицу (допускает параметр style, class).

Рассмотрим пример:

<table border="1">
<tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

Как это будет выглядеть на странице:

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Атрибуты таблицы<table></table>.
Состоит она из строки <tr></tr> и столбца <td></td>.
Пересечение строки и столбца дает ячейку,в которую и надо вписывать данные. Ячейки <td> должны находиться внутри строки <tr>.


14. HTML тег <br /> (Перенос строки)

<br /> Переход на следующую строку, представляет собой одиночный тег.

Рассмотрим пример:

Первая строка.
<br/>Вторая строка.
<br/>Третия строка.
Этот текст будет на третей строке, поскольку перехода не было

Как это будет выглядеть на странице:

Первая строка.

Вторая строка.
Третия строка.

Тег <br/> попросту разбивает строку.
Два друг за другом идущих тега <br/> увеличат расстояние между строчек по вертикали. Но это не повод использовать их в таких целях! Для увеличения расстояния пользуйтесь CSS.


15. HTML тег <img></img> (Oпределяет изображение.)

<img src="ссылка_на_изображение"> Выводит изображение, представляет собой одиночный тег (допускает параметр style, class).

Рассмотрим пример:

<img src="http://webps.ru/img/kloyn.jpg">

Как это будет выглядеть на странице:


16. HTML тег <hr/> Cоздает горизонтальную линию.

<hr/>Представляет собой одиночный тег (допускает параметр style, class).

Рассмотрим пример:

К примеру здесь находится какой-то текст над линией
<hr>
А этот текст будет уже под линией

Как это будет выглядеть на странице:

К примеру здесь находится какой-то текст над линией

А этот текст будет уже под линией

17. HTML тег <div> Oпределяют секцию документа

<div></div> Cлужит для создания блоков на странице (допускает параметр style, class). Раньше для разметки на страницах пользовались в основном таблицами. После появления тега <div> задача упростилась. Практически все сайты содержат <div> блоки, как удобную альтернативу таблицам.


18. HTML тег <form> Oпределяет HTML формы

<form></form> Cоздание формы на странице (допускает параметр style, class).

Рассмотрим пример:

<html>
<body>
<form action="">
<input type="radio" name="Sex" value="Мужской" checked="checked" /> Мужчина<br />
<input type="radio" name="Sex" value="Женский" /> Женщина<br />
<input type="text" size="20" /> Возраст<br />
<input type="text" size="20" /> Страна<br />
<input type="submit" value="Отправить" /><br />
</form> </body>
</html>

Как это будет выглядеть на странице:

Мужчина
Женщина
Возраст
Страна


19. HTML тег <!------> Теги комментариев

Комментарии служат ориентиром внутри исходного кода – комментируют участки кода, при этом, они не видны в браузере.

Рассмотрим пример:

<!DOCTYPE HTML>
<html>
<title>Комментарий в html коде</title>
<body>
<!--Создадим параграф-->
<p>Также комментарии могут содержать инструкции к программным сценариям.</p>
</body>
</html>

Также комментарии могут содержать инструкции к программным сценариям.




  На этом уроке мы разобрали Базовые теги (основные), теперь Вы имеете представление о html тегах.

 



Создано: 03.02.2020.|Обновлено: 15.12.2022.