Теги html нужны для построения каркаса сайта. Например, мы работаем на движке Word Press и не собираемся сами строить сайт. Но все же нужны элементарные знания о том, из чего он состоит. Нахожу доступные материалы, например, у Евгения Попова, излагаю их, в своем понимании. В тегах html заложено руководство для действия браузеров. С их помощью браузер понимает, что нужно загрузить: заголовок, текст, картинку, абзац, или ссылки.
Теги html — создание каркаса сайта
Применяются теги разных версий, совсем недавно применялась только базовая версия html — 4.01. Однако сейчас, современные шаблоны сайтов строятся на основе html5 и html7.
- Однако это же относится к построению главной страницы — Index php. В коде теги всегда записываются, как парные: открывающие и закрывающие, образующие контейнер.
- Но внутри контейнера могут располагаться другие парные теги: head — заголовок. Открывающий <head> и закрывающий </head>, который отличается лишь присутствием в нем слеша — косой черты.
- Внутри заголовка находятся форматирующие теги и специальные. Форматирующие создают видимую часть страницы: заголовки, текст, картинки, ссылки.
- Специальные или вспомогательные теги, сообщают браузеру, как должна выглядеть страница. Например, в какой кодировке ее показывать, какие должны подключатся таблицы стилей и скрипты. Область head содержит вспомогательные теги.
- Область body — тело страницы, содержит теги форматирующие.
Теги html — для кодировки и контента
На сайтах, сразу под head, располагается: Мета /<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″/. Его функции многогранны. В данном случае тег указывает кодировку, в которой изложены материалы сайта. Кодировка создается для браузера, как единый язык программирования. Но это не языки разных народов.
Следующий тег каркаса — title – название заголовка страницы. Он отображается в поисковой строке браузера. Страница пока имеет только каркас, без содержания, так как не заполнен раздел body. Но такой сайт уже можно найти в браузере.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>первая страница html</title> </head> <body>...</body> </html>
- Раздел body- вмещает в себя контент страницы, это может быть текст, картинка, видео.
- В тексте важным является парный тег <p>, обозначающий абзац.
- Далее используем парные теги от <h1> до <h6> для заголовков. Они отличаются друг от друга размерами шрифта и степенью важности для текста.
Теги html — cписки
Иногда в своих текстах мы применяем списки, для них в коде тоже существуют определенные теги.
- Упорядоченный список обозначается парными <ol>. Так можем обозначить контейнер списка.
- Отдельные элементы упорядоченного списка обозначаются цифрами. Внутри него могут быть еще элементы. Например, несколько предложений текста, каждое из них заключим в парные <li>.
- Неупорядоченный список — элементы обозначаются маркером. К этому списку применяется т<ul>. Все его элементы равноправны и для них нет отдельных тегов.
- В списках определения каждый элемент нуждается в описании. Весь список заключаются в парные <dl>.
- Например, каждый элемент описательного списка создается с помощью <dt>.
- Если мы увидим такие строки в визуальном редакторе, то заметим, что они на экране, никак не отображаются – ни цифрами, ни маркерами. Но весь блок нуждается в описании. Обозначается тегами: <dd>Описание 1</dd>, <dd>Описание 2 </dd и так далее.
Атрибуты
Евгений Попов проводит аналогию атрибутов с реалиями в жизни. Например, атрибутами являются номера маршрутных автобусов. Пассажиры отличают свой автобус из массы одинаковых машин, только по их номерам.
С атрибутами тегов происходят подобные отличия. В результате, все абзацы страниц и списков, выделенные тегами, для браузера выглядят одинаково. Но если нам нужно что-либо выделить, то мы применим значения атрибута.
Некоторые атрибуты могут применяться для всех тегов, другие – только для — определенных. Например, какой — то из одинаковых списков мы решили начать не с 1, а с нуля. Тогда после <ol> напишем start 0.
Некоторые атрибуты пишутся только после определенных тегов, но их нельзя писать с другими. Наизусть это запомнить сложно. Однако, для этого существуют, «шпаргалки». Ранее сайты строились, только на основе тегов, потому их было очень много, но с применением CSS — многие устарели.
Вставка изображений
Например, мы решим вставить фото сразу после заголовка. Это будет выглядеть, как на рисунке. Тег <img> является одинарным, но не парным, потому что вставка картинки является одиночной.
Чтобы браузер мог быстрее обработать изображение, добавляем еще атрибут srs. Указываем папку, где находится картинка, размеры: ширину и высоту. Атрибут alt применяется только в том случае, если отключен вид картинки. В результате, остается лишь ее описание. Далее мы указываем атрибуты, для обтекания картинки текстом. Например, слева или справа и добавляем их для отступа от текста.
