Основные HTML теги
Во втором уроке мы рассмотрели пример создания простенькой страницы, где давались комментарии некоторых html тегов. Мне кажется, что лучше сначала показать что-то на примере, а потом перейти к более детальному изучению. Именно поэтому создание страницы было рассмотрено во втором уроке, а более детальное в третьем. Ниже Вы найдете описания распространенных html тегов. Поверьте, их хватит, чтобы написать целый сайт.
1) <p></p> - выводит текстовый абзац (допускает параметр style, class, id). Довольно распространенный тег.
<p>Текстовый абзац. В принципе ничего интересного</p>
<p>А это другой абзац</p>
|
Преобразуется на странице в следующее:
Текстовый абзац. В принципе ничего интересного
А это другой абзац
|
К тегу можно ещё приписать параметр style:
<p style="различные значения"></p> |
С помощью этих различных значений можно редактировать внешний вид текста. Читайте про эти параметры в отдельном уроке: стили в html.
Также можно прописать CLASS и ID.
2) <b></b> и <strong></strong> - два тега, которые позволяют сделать текст жирным. Разницы между этими тегами нет.
Приведем пример. Html код:
Преобразуется на странице в следующее:
3) <i></i> - курсивный текст (допускает параметр style, class, id)
Например, html код:
Преобразуется на странице в следующее:
4) <u></u> - подчеркнутый текст (допускает параметр style, class, id)
Например, html код:
<u>подчеркнутый текст</u> |
Преобразуется на странице в следующее:
5) <a href="links"></a> - создает ссылку (допускает параметр style, class и другие).
Например, html код:
<a href=http://zarabotkii.ru/>текст ссылки</a> |
Преобразуется на странице в следующее:
Все параметры и атрибуты тега <a> будут рассмотрены в отдельном уроке: html тег a.
6) <h1></h1>,...,<h6></h6> - заголовки страницы (допускает параметр style, class, id). Причем чем меньше цифра, тем больший вес и размер (по умолчанию) имеет текст, заключенный в эти теги.
Например, html код:
Преобразуется на странице в следующее:
7) <center></center> - выравнивает текст по центру.
Например, html код:
<center>Этот текст будет в центре</center> |
Преобразуется на странице в следующее:
Этот текст будет в центре |
Примечание
Рекомендуется не использовать тег <center></center>, а вместо него использовать:
• <p style="text-align"> </p> - для текста
• <div style="text-align"> </div> - для всего (например, изображение)
8) <sub></sub> - выводит подстрочный текст.
Например, html код:
Обычный текст, <sub>подстрочный текст</sub> |
Преобразуется на странице в следующее:
Обычный текст, подстрочный текст |
9) <sup></sup> - выводит надстрочный текст.
Например, html код:
Обычный текст, <sup>надстрочный текст</sup> |
Преобразуется на странице в следующее:
Обычный текст, надстрочный текст |
10) <big></big> / <small></small> - выводит текст на один пиксель большего/меньшего размера (допускает параметр style, class, id).
Например, html код:
Обычный текст, <big>этот текст больше на один пиксель</big> |
Преобразуется на странице в следующее:
Обычный текст, этот текст больше на один пиксель |
11) <ul><li></li></ul> - выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между <li> и </li>.
Например, html код:
Список:
<ul>
<li>первый элемент списка</li>
<li>второй элемент списка</li>
</ul>
|
Преобразуется на странице в следующее:
Список:
первый элемент списка
второй элемент списка
|
12) <table></table> - создает таблицу (допускает параметр style, class). Каждая новая строка создается тегами <tr></tr>, а столбец <td></td>.
Например, html код:
<table border=1>
<tr><td>1-строка 1 элемент</td><td>1-строка 2 элемент</td></tr>
<tr><td>2-строка 1 элемент</td><td>2-строка 2 элемент</td></tr>
</table>
|
Преобразуется на странице в следующее:
1-строка 1 элемент |
1-строка 2 элемент |
1-строка 1 элемент |
1-строка 2 элемент |
|
Все возможности тега <table> будут рассмотрены в отдельном уроке: html тег table.
13) <br/> - переход на следующую строку, представляет собой одиночный тег.
Например, html код:
Строка 1
<br/>
2-строка
<br/>
3-строка А этот текст будет на 3ей строке, поскольку перехода не было
|
Преобразуется на странице в следующее:
1-Строка
2-строка
3-строка А этот текст будет на 3ей строке, поскольку перехода не было |
14) <hr/> - чертит линию, представляет собой одиночный тег (допускает параметр style, class).
Например, html код:
Какой-то текст над линией
<hr>
А этот текст будет уже под линией
|
Преобразуется на странице в следующее:
Какой-то текст над линией
А этот текст будет уже под линией
|
15) <img src="ссылка_на_изображение"> - выводит изображение, представляет собой одиночный тег (допускает параметр style, class).
Например, html код:
<img src="http://www.zarabotkii.ru/uroki/7.jpg" border="0" alt="" /> |
Преобразуется на странице в следующее:
Все возможности тега <img> будут рассмотрены в отдельном уроке: html тег img.
16) <font></font> - для смены стиля текста (допускает параметр style, class, id).
Например, html код:
<font style="color:green; font-size:17px;">
Этот текст зеленый, а его размер
16 пикселей
</font>
|
Преобразуется на странице в следующее:
Этот текст зеленый, а его размер 16 пикселей |
Примечание
Аналогичным тегом является <span></span>.
17) <form></form> - создание формы на странице (допускает параметр style, class).
Подробное описание этого тега читайте: html тег form.
18) <div></div> - служит для создания блоков на странице (допускает параметр style, class). Раньше для разметки на страницах пользовались в основном таблицами. После появления тега <div> задача упростилась. Практически все сайты содержат <div> блоки, как удобную альтернативу таблицам.
Подробное описание этого тега читайте: html тег div.
19) <!--комментарий--> - служит для добавления комментариев в коде html. Все, что заключено между <!-- и --> является комментарием и не отображается на интернет странице. Комментарии очень удобны и позволяют упростить код, делая его более понятным. Приведем простой пример:
<body>
<!--верхушка сайта-->
<div class="top">Здесь содержится верхушка сайта</div>
<!--конец верхушки сайта-->
<!--левое меню-->
<div class="leftblock">Левая часть сайта, здесь может быть различное меню, реклама и т.д.</div> <!--конец левого меню-->
<!--контент страницы-->
<div class="content">Содержательная часть страницы</div>
<!--конец контента страницы-->
</body>
|
В html есть ещё пару важных тегов, о которых выше не было рассказано. Я имею ввиду заголовочные теги, однако на данном уровне Ваших познаний, мне кажется, что их изучение пока преждевременно. Для начала нужно разобраться с базовыми тегами.
Уважаемый читатель, теперь Вы имеете представление о html тегах. В следующих уроках мы рассмотрим самые важные из этих тегов во всех подробностях. Теперь советую перейти к следующим урокам.
Ссылка на следующий урок:
Урок 4. Style в html
← Перейти в каталог html уроков и советов
|