Рубрики
программирование

Теги html для каркаса сайта списков атрибутов изображений

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

 Теги html — создание каркаса сайта

  • Это же относится к построению главной страницы — Index php. В коде теги всегда записываются, как парные: открывающие и закрывающие, образующие контейнер.
  • Внутри контейнера  располагаются другие парные теги: head — заголовок. Открывающий <head> и закрывающий </head>, который отличается лишь присутствием в нем слеша — косой черты.
  • Внутри заголовка находятся форматирующие теги и специальные. Форматирующие создают видимую часть страницы: заголовки, текст, картинки, ссылки.
  • Специальные  или вспомогательные теги, сообщают браузеру, как должна выглядеть страница. Например, в какой кодировке ее показывать, какие должны подключатся таблицы стилей и скрипты. Область head содержит вспомогательные теги.
  • Область body — тело страницы, содержит теги форматирующие.

Теги html — для кодировки и контента

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

  • Раздел 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 применяется в том случае, если отключен вид картинки. В результате, остается только ее описание. Далее мы указываем атрибуты, для обтекания картинки текстом. Например, слева или справа и добавляем их для отступа от текста.

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

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