Рассмотрим верстку видимой части документа body. Все что верстается внутри тега body будет видно в браузере.
Тег body содержит любые теги для оформления документа. Откроем файл index.html в чистом шаблоне в sublime text и браузер, чтобы видно было наглядно результат верстки.
Содержание статьи
Основные теги
Первым делом рассмотрим как делать ссылки.
Ссылка обозначается тегом a и атрибутом href, который указывает куда ведет эта ссылка, например, на картинку.
Тег em и strong
После ссылки напишем тег br для переноса строки, чтобы в браузере новые теги были друг под другом.
Выделим текст курсивом тегом em.
Тег strong делает жирным текст.
Тег p
Этим тегом обозначается абзац.
Правильно будет теперь поменять тег br на тег p, чтобы все теги в браузере были в новых строках.
Теги заголовков
Любой документ начинается с тега h1 это самый главный заголовок в документе.
Следующий заголовок это h2, шрифт будет меньше по размеру.
h2 определяет все основные подзаголовки.
Теги h3 это подзаголовки в тегах h2.
Я использую только три этих тега, в оформление документа.
Теги списков ul li
Чтобы оформить элементы как список, то воспользуемся конструкцией ul, она содержит все внутри li для каждого элемента отдельно.
Тег img
Чтобы вставить картинку в документ используем тег img.
У тега есть атрибут src, для загрузки внешнего файла.
Второй обязательный атрибут img это alt, для описания картинки текстом.
Я всегда задаю этот тег для поисковых систем, для seo продвижения сайта.
Формы form
Для ввода информации обратной связи делаем формы.
Для отправки информации на сервер. Пишем тег form с атрибутом action и внутри укажем путь на скрипт обработки формы.
Когда мы нажмем на кнопку у формы отправить или или написать, то запустится скрипт для обработки формы, который указан в атрибуте action.
Для сбора данных используются input в форме. У input есть атрибут type, который означает, какой будет input, например text.
Второй атрибут name, для задания уникального имени input.
Третье свойство placeholder, эта запись будет видна внутри поля ввода формы, например, введите почту.
При вводе информации placeholder исчезнет.
input это не закрываемый тег в конце пишем слеш.
Тег span
В заключение рассмотрим тег span.
С помощью него можно оформить цвет текста, фон выделенного участка.
Сделаем цвет у тега p зеленым, а тегом span, вторую часть текста сделаем красным.
