10 тегов HTML, которые редко используют новички

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

'(и другие символы ASCII )

При использовании HTML нужно использовать коды ASCII, когда требуется вставить какой-нибудь символ. Такое правило требует дополнительных действий, но оно гарантирует, что все символы будут правильно выведены на экран пользователя, и браузер не воспримет их как часть разметки. Вам никогда не попадался какой-нибудь текст, который отображается неправильно? Обычно проблемный текст создается с использованием кавычек, апострофов, знаков больше-меньше и так далее. Таких символов на самом деле не много, и стоит запомнить их коды ASCII.

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

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

Ссылка обозначается тегом 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, вторую часть текста сделаем красным.

Также рекомендую почитать:

  • Быстрая верстка в sublime text с плагином emmet
  • Делаем красивую таблицу html с записью данных в форму заказа
  • Основные gulp плагины
  • Позиционирование элементов, основные свойства css
  • Плагин Owl carousel 2 все основные параметры карусели
Читайте также:  Удаление программ и приложений в Windows 10

Подключение CSS-стилей

Таблицы стилей делятся на внешние и внутренние.

Внешние таблицы располагаются в отдельных файлах с расширением .css (например )

1. CSS-файл может быть подключен на страницу при помощи тега <link> , который должен находиться в секции <head>  HTML-страницы – это самый часто используемый способ подключения CSS:

2. Другой путь, это использование правила @import . Чтобы это правило работало оно должно находиться в таблице стилей (внутренней или внешней), в самом начале, перед остальными правилами.

Обычно @import используется внутри CSS-файлов. Также эта директива используется для подключения шрифтов.

Подключение CSS-стилей

3. Внутренние таблицы стилей встраиваются в HTML-страницу, в секцию <head> , и находятся они внутри тегов <style>

4. И последний способ подключения CSS – это встроенные стили. Они пишутся непосредственно внутри HTML-тегов в атрибуте style. Такие стили, действуют только на тот тег, в котором написаны.

Первые шаги: структура веб страницы (тэги html, body, head)

Язык гипертекстовой разметки предусматривает наличие корневого тэга, внутри которого будет заключен весь текст ХТМЛ документа. Им является <html>. Вообще, описывать структуру веб документа лучше всего, имея перед глазами наглядную схему,:

Первые шаги: структура веб страницы (тэги html, body, head)

Внутри корневого элемента предусмотрено наличие двух обязательных разделов, формируемых тэгами <head> и <body>:

  1. Все, что будет отображаться на создаваемой web странице, должно быть размещено внутри открывающего и закрывающего <body>
  2. Внутри <head> размещается служебная информация, которая может понадобиться браузеру для правильной интерпретации кода документа. Эта служебная информация внутри <head> не будет видна на web странице.
Первые шаги: структура веб страницы (тэги html, body, head)

Ну вот, задал слишком большой план в начале статьи, а успел рассказать только о половине из задуманного. Довольно часто у меня так случается. Например, когда писал статью о блочной верстке, то планировал уложиться в одну статью, а в результате получилось четыре. Даже можно сказать, что пять, ибо статья о современной верстке сайтов является их логическим продолжением. Ну что ж, остается только сказать, что продолжим в следующей статье уроков Html.

Читайте также:  Лучшие смартфоны Xiaomi 2021 года: какой стоит купить?

Удачи вам! До скорых встреч на страницах блога

Первые шаги: структура веб страницы (тэги html, body, head)

Использую для заработка

  • ВоркЗилла — удаленная работа для всех
  • Анкетка — платят за прохождение тестов
  • Etxt — платят за написание текстов
  • Кьюкоммент — биржа комментариев
  • Поиск лучшего курса обмена
  • 60сек — выгодный обмен криптовалют
  • Бинанс — надёжная биржа криптовалют
  • ВкТаргет — заработок в соцсетях (ВК, ОК, FB и др.)