Август 2017
Автор: Рубрика: Верстка Комментариев нет

Основные теги html


Основные теги html

Рассмотрим верстку видимой части документа body. Все что верстается внутри тега body будет видно в браузере.

Тег body содержит любые теги для оформления документа. Откроем файл index.html в чистом шаблоне в sublime text и браузер, чтобы видно было наглядно результат верстки.

Основные теги

Первым делом рассмотрим как делать ссылки.

Ссылка обозначается тегом a и атрибутом href, который указывает куда ведет эта ссылка, например, на картинку.

Тег em и strong

После ссылки напишем тег br для переноса строки, чтобы в браузере новые теги были друг под другом.

Выделим текст курсивом тегом em.

Тег strong делает жирным текст.

Тег p

Этим тегом обозначается абзац.

Правильно будет теперь поменять тег br на тег p, чтобы все теги в браузере были в новых строках.

Теги заголовков

Любой документ начинается с тега h1 это самый главный заголовок в документе.

Следующий заголовок это h2, шрифт будет меньше по размеру.

h2 определяет все основные подзаголовки.

Теги h3 это подзаголовки в тегах h2.

Я использую только три этих тега, в оформление документа.

Тег em и strong заголовки h1

Теги списков ul li

Чтобы оформить элементы как список, то воспользуемся конструкцией ul, она содержит все внутри li для каждого элемента отдельно.

Тег img

Чтобы вставить картинку в документ используем тег img.

У тега есть атрибут src, для загрузки внешнего файла.

Второй обязательный атрибут img это alt, для описания картинки текстом.

Я всегда задаю этот тег для поисковых систем, для seo продвижения сайта.

Формы form

Для ввода информации обратной связи делаем формы.

Для отправки информации на сервер. Пишем тег form с атрибутом action и внутри укажем путь на скрипт обработки формы.

Когда мы нажмем на кнопку у формы отправить или или написать, то запустится скрипт для обработки формы, который указан в атрибуте action.

Для сбора данных используются input в форме. У input есть атрибут type, который означает, какой будет input, например text.

Второй атрибут name, для задания уникального имени input.

Третье свойство placeholder, эта запись будет видна внутри поля ввода формы, например, введите почту.

При вводе информации placeholder исчезнет.

input это не закрываемый тег в конце пишем слеш.

Теги списков ul li и формы

Тег span

В заключение рассмотрим тег span.

С помощью него можно оформить цвет текста, фон выделенного участка.

Сделаем цвет у тега p зеленым, а тегом span, вторую часть текста сделаем красным.

Тег span

Комментариев нет