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

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

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

Оставить комментарий

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Что будем искать? Например,Человек

Мы в социальных сетях