Html теги для создания сайта: список самых основных

Всех приветствую в этой статье. Сегодня мы рассмотрим html теги для создания сайта. Именно не все подряд, а те, что наиболее часто используются при создании сайтов и верстке. Потому что есть просто масса тегов, которые нужны 1 раз в год, а есть те, которые вы будете использовать постоянно. Ну что ж, поехали. В конце у нас получится простенькая веб-страничка со всеми основными элементами.

Теги структуры html документа

Это глобальные теги, которые нам в любом случае нужны. На веб-странице они никак не отображаются, но позволяют разметить структуру. Например, тег html. Сегодня его очень часто даже не пишут, в этом действительно нет нужны. В общем-то, он является общий контейнером для всего html-документа. В него вложено все остальное.

Далее идут 2 секции — head и body. В первой располагаются различного рода параметры веб-страницы, подключаются внешние файлы и т.д. Например, тут задается кодировка сайта, прописываются мета теги, title, подключаются css-стили и веб-сценарии. В общем, для работоспособности сайта секция head имеет важнейшую роль.

Ну а body это тело страницы. Здесь уже мы пишем то, что непосредственно выводиться на экран. Далее мы непосредственно рассмотрим теги, которые используются в теле страницы.

Форматирование текста

Обычно о форматировании всегда говорят в первую очередь, когда речь заходит об html. Действительно, что может быть важнее текста на странице и его грамотного оформления? Так вот, о тегах для оформления текста я подробно написал здесь, советую открыть в новом окне и ознакомиться с описанными там тегами.

Например, создадим три абзаца. Один будет простым, во втором текст будет выделен жирным, а в третьем — подчеркнут.

<p>Какой-то текст в абзаце, имитируем наполнение</p>
<p><b>Какой-то текст в абзаце, имитируем наполнение</b></p>
<p><ins>Какой-то текст в абзаце, имитируем наполнение</ins></p>

Вот примерно в таком духе мы оформляем текст, используя теги, о которых говорится в той статье.

Html теги для картинок (изображений)

Для картинок есть всего 1 основной тег — img. И у него, в свою очередь, всего 1 обязательный параметр — src, то есть путь к файлу. Все остальное можно настраивать через css. Собственно, подробно о вставке картинки я писал также здесь, ну и вот пример вставки:

<img src = "walk.jpg">

Тег, как видите, одинарный, то есть закрывающая часть не нужна. Путь задается исходя из расположения html-странички. У меня картинка лежала в той же папке, что и веб-страница, а значит путь получился максимально коротким.

Изменять размер катинки можно с помощью атрибутов width и height, но оптимально все же делать это через css. Но кроме тега img в html5 появились еще теги, которая так или иначе помогают оформить картинку. Это figure и figcaption. То есть фигура и подпись к ней. Вообще область применения этих тегов более широка, но мы рассмотрим пример с картинкой:

<figure>
<img src = "walk.jpg" width = "300">
<figcaption>Прогулка</figcaption>
</figure>

Ну и пару css-строк:

Эти теги просто упростили процесс добавления подписей к картинкам:

Теги для ссылок

Ссылки — важнейшая часть веб-страницы. Но для их создания вам нужен всего один тег — a. Создается так:

<a href = "url-адрес, куда ссылаемся">Анкор</a>

То есть тоже есть 1 обязательный атрибут — href. Без него браузер просто не будет понимать, куда ему переходить. Адрес нужно указывать с протоколом http://. Ну и между открывающим и закрывающим тегом указываем непосредственно сам анкор, то есть текст, который увидим на странице.

Ссылка также может быть изображением. О том, как так сделать, написано здесь.

Списки на веб-страницах

Со списками все тоже достаточно просто. Есть 2 типа списков — маркированный и нумерованным. Различия только во внешнем виде нумератора. То есть числа это, или просто маркеры.

Нумерованный список создается тегом ol, а сами пункты тегами li. В этот тег можно вложить сколько угодно других тегов и любое содержимое.

<ol>
<li>Убрать на столе</li>
<li>Приготовить еду</li>
<li>Сходить на футбол</li>
</ol>

Какой-то пошаговый план у нас получается По умолчанию список уже отображается с определенными отступами.

Маркированный список, соответственно, создается с помощью тега ul, а внутри него все те же li.

О том, как оформлять список с помощью css, вы можете прочитать здесь.

Таблицы

Подробно о тегах для таблицы я написал здесь. Если же говорить кратко, то это:

1. table — сам контейнер для таблицы;
2. tr — ряд таблицы, тоже выполняет роль контейнера;
3. td — одна ячейка, именно сюда помещается содержимое;

Создадим простую таблицу:

<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

Ну и через css я ее немного оформил:

Если вам непонятно, что такое css, то приглашаю прочитать заодно эту статейку, сразу все станет понятно.

Формы

Формы также очень важны при создании сайтов, так как они применяются сплошь и рядом. О формах у меня по-моему толковой статьи на блоге еще нет, значит надо написать. Ну а пока создадим простую форму:

<form>
Логин: <input type = "text"> <br>
Пароль: <input type = "password"> <br>
Я согласен с правилами <input type = "checkbox"><br>
<input type = "submit" value = "Регистрация">
</form>

Основные элементы формы:

1. form — непосредственно контейнер формы, в который помещаются все поля. Чтобы форма корректно работала, ей нужно прописывать атрибуты action и method, но это уже работа с языком php.
2. input — поле формы, каким именно оно будет, зависит от значения в атрибуте type. Например, text — поле для ввода обычного текста, password — поле для ввода пароля, checkbox — галочка, submit — кнопка отправки формы. Конечно, это не все значения, но о других подробнее я напишу в отдельной статье про формы (скоро будет).
3. Ну и вспомогательные элементы. В нашем случае это текст и переносы строк.

Возможности форм, особенно с приходом html5, стали очень велики. Вы можете делать в них неограниченное количество полей, помечать их как обязательные, задавать паттерны и т.д. Опять же, обо всем этом напишу как-нибудь отдельно.

Блочные и строчные элементы

Вообще все элементы в html грубо можно разделить на две категории: блочные и строчные. К строчным относятся, например, теги: b (выделение жирным), img (картинка), a (ссылка) и т.д. То есть их можно несколько раз употребить на одной строке.

Блочные же — совсем другое дело. Блок может быть только одним в своей строке. Примеры блоков: абзацы, таблицы, списки. То есть на одной строке не может быть 2 абзаца, правильно?

В html есть теги, которые просто обозначают блочный и строчный элемент, не придавая ему более никаких свойств. Это span и div. Первый строчный, а второй блочный. Используются в верстке сплошь и рядом. Чтобы вы понимали разницу, вот пример:

<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<span>Текст</span>
<span>Текст</span>
<span>Текст</span>

Думаю, ничего больше объяснять не нужно. Что ж друзья, вот пожалуй и все основные html теги для создания сайта, которые действительно применяются сплошь и рядом и которые действительно нужно знать.