08.09.2014      322      0
 

Теги 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 для заголовков, которые отличаются друг от друга размерами шрифта.

 Теги html — cписки

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

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

Атрибуты 

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

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

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

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

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

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

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


Об авторе: Ксенья Юрьевна Бастрикова

Ваш комментарий

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

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности

Яндекс.Метрика