Теги и атрибуты. Наполнение страницы с помощью HTML.

HTML-язык разметки информации на web-странице. С помощью этого языка вы сможете создать HTML-текст и осуществить редактирование текста в HTML.

Теги

Тегами называются команды в HTML, которые задают тип информации. Теги бывают парными и одиночными. Большинство тегов - парные. Парные теги содержат 2 элемента : открывающий и закрывающий.

уроки html вёрстки

Между ними располагается отображаемая информация (текст). Также внутри тегов могут располагаться и другие теги парные и непарные. Рассмотрим некоторые теги, с помощью которых мы создадим запись, содержащую, текст, картинку и список.

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

Атрибуты тегов предназначены для задания некоторых параметров отображения информации, задаваемой тегом. Синтаксис задания атрибутов следующий:

<тег атрибут="значение атрибута">…<.тег>

Например расположение текста можно задать с помощью атрибута align

Пример записи атрибута:

Текст абзаца выровнен по центру>/p>

Атрибут align может задавать следующие значения:

  • center - выравнивание по центру
  • left - выравнивание по левому краю
  • right - выравнивание по правому краю
  • justify - выравнивание по ширине.

Атрибут align может применяться и для других тегов.
В курсе "HTML, CSS и оптимизация графики для Web" рассмотрены другие теги и их атрибуты.
Далее пошагово рассмотрим, как можно создать html-запись, содержащую текст, картинку и список.

1. Создаём абзац

Абзац создаётся с помощью парного тега >p>..>/p>, внутри которого указывается отображаемый текст (см. пример1)

Пример1. Создание абзаца

уроки html
При создании нового абзаца его текст будет начинаться с новой строки.

2. Создаём список

Список создаётся с помощью парного тега, между открывающим и закрывающим элементами которого располагаются пункты списка, которые задаются с помощью парного тега.

Пример2. Создание списка

уроки html для начинающих

3. Вставка изображения

Изображение на сайт вставляется с помощью одиночного тега с его обязательным атрибутом src. В области значения этого атрибута нужно указать путь к файлу изображения. Файл изображения должен находиться в корневой папке проекта, либо в одной из папок внутри проекта Вашего сайта. HTML-запись будет выглядеть следующим образом:


То есть мы размещаем на сайте изображение, которое находится в одной из папок внутри проекта, которая называется "images"


Пример3.Вставка изображения.

html уроки для чайников

4. Обтекание картинки текстом.

Чтобы текст обтекал картинку нужно для картинки задать выравнивание по левому краю с помощью атрибута align.

Пример4. Обтекание картинки текстом

html урок 1

Для того, чтобы узнать больше, предлагаем Вам изучить дистанционные курсы html css: "HTML, CSS и оптимизация графики для web". В них вы найдёте множество других уроков HTML с примерами.