Теги для создания сайта html

Теги  для создания сайтов html нужны для построения каркасов. Если мы работаем на движке Word Press и не собираемся сами строить сайт, все же нужны элементарные знания о том, из чего он состоит. Нахожу доступные материалы у Евгения Попова, излагаю их, в своем понимании. В тегах html заложено руководство для действия браузеров. С их помощью браузер понимает, где нужно загрузить: заголовок, текст, картинку, абзац, ссылки и др. Они могут быть разных версий, совсем недавно применялась только базовая версия 4.01. Сейчас, современные шаблоны сайтов строятся на основе html5.теги html

 Теги html для каркаса сайта

 каркас сайта

Это же относится к построению главной страницы — Index php. В коде теги всегда записываются, как парные: открывающие и закрывающие, образующие контейнер.
Внутри контейнера  располагаются другие парные теги: head — заголовок. Открывающий <head> и закрывающий </head>, который отличается лишь присутствием в нем слеша — косой черты. Внутри заголовка находятся форматирующие теги и специальные. Форматирующие создают видимую часть страницы: заголовки, текст, картинки, ссылки и др. Специальные  или вспомогательные, сообщают браузеру, как должна выглядеть страница: в какой кодировке ее показывать, какие должны подключатся таблицы стилей и скрипты. Область head содержит вспомогательные, а область body — тело страницы — форматирующие.
На сайтах, сразу под  head, располагается: Мета<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″, его функции многогранны. В данном случае он указывает кодировку, в которой изложены материалы сайта. Кодировка создается для браузера, как единый язык программирования, а не языки разных народов.
Следующий тег каркаса  — title – название заголовка страницы. он отображается в поисковой строке браузера. Страница пока имеет только каркас, без содержания,  т.к. не заполнен раздел body. Но такой сайт уже можно найти в браузере.

  • Раздел body- вмещает в себя контент страницы, это может быть текст, картинка, видео.
  • В тексте важным является парный   <p>, обозначающий абзац.
  •  Далее используем  от h1 до h6 для заголовков, которые отличаются друг от друга размерами шрифта.

 Списки

Иногда в своих текстах мы применяем списки, для них в коде тоже существуют определенные теги.

  • Упорядоченный список обозначается парными   <ol>, так можем обозначить контейнер списка.
  • Отдельные элементы упорядоченного списка обозначаются цифрами. Внутри него могут быть еще элементы, например,  несколько предложений текста, каждое из них заключим в парные  <li>.
  • Неупорядоченный список — элементы обозначаются маркером. К этому списку применяется <ul>. Все его элементы равноправны и для них нет отдельных тегов.
  •  В списках определения  каждый элемент нуждается в описании, весь список заключаются в парные  <dl>.
  • Каждый элемент описательного списка создается с помощью <dt>.
  • Если мы увидим такие строки в визуальном редакторе, то заметим, что такие строки, на экране, никак не отображаются – ни цифрами, ни маркерами. Но весь блок нуждается в описании и обозначается  <dd>Описание 1</dd>,<dd>Описание 2 </dd и т.д.

Атрибуты 

атрибуты тегов

Евгений Попов проводит аналогию атрибутов с реалиями в  жизни, например, атрибутами являются номера маршрутных автобусов. Пассажиры отличают свой автобус из массы одинаковых машин, только по их номерам. С атрибутами  происходят подобные отличия. Все абзацы страниц и списков, выделенные тегами, для браузера выглядят одинаково. Но если нам нужно что-либо выделить, то мы применим значения атрибута. Некоторые атрибуты могут применяться для всех тегов, другие – только для — определенных. Например, какой — то из одинаковых списков мы решили начать не с 1, а с нуля  тогда после  <ol> напишем start 0. Получиться, как на рисунке. Некоторые атрибуты пишутся только после определенных тегов и их нельзя писать с другими.  Наизусть это запомнить сложно, для этого существуют, шпаргалки.  Ранее сайты строились, только на основе тегов, и их было очень много, но с применением CSS многие  устарели.

Вставка изображений

вставка картинки под заголовком

Например, мы решим вставить картинку сразу после заголовка. это будет выглядеть, как на рисунке. Тег <img> является одинарным, а не парным, потому что вставка картинки является одиночной.

теги и атрибуты для картинки

Чтобы браузер мог быстрее обработать картинку, добавляем еще атрибут srs, указываем папку, где находится картинка, размеры: ширину и высоту. Атрибут alt применяется на тот случай, если отключен вид картинки, остается ее описание. Далее мы указываем атрибуты, для обтекания картинки текстом: слева или справа и добавляем их для отступа от текста.
Автор: Ксенья Юрьевна Бастрикова

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *