Найти в Дзене

HTML. Наполнение страницы контентом.

Привет, джуниор!

В прошлой статье, мы поговорили о базой разметке html-страницы. Пора углубится в изучении тегов и наполнить нашу страницу контентом.


Заголовки страниц

Заголовки страниц создаются с помощью тегов:
<h1> - заголовок первого уровня;
<h2> - заголовок второго уровня;
<h3> - заголовок третьего уровня;
<h4> - заголовок четвертого уровня;
<h5> - заголовок пятого уровня;
<h6> - заголовок шестого уровня;

Отредактируйте код и обновите страницу

Добавление заголовков в код
Добавление заголовков в код
Отображение заголовков на странице
Отображение заголовков на странице

Как вы могли заметить, все заголовки имеют жирный текст и разный размер.

Абзацы

Основным элементом для веб-страницы являются абзацы. Используя тег <p> - мы можем добавить абзац. Отредактируйте код и обновите страницу.

Добавление тега абзаца в код
Добавление тега абзаца в код
Отображение абзаца на странице
Отображение абзаца на странице

Ссылки

Чтобы добавить ссылки на внешний источник (сайт) или выполнить переход между страницами сайта, необходимо использовать тег <a>.
У ссылок есть обязательный атрибут
href, используя этот атрибут, мы указываем странице адрес, куда мы хотим перейти. Отредактируйте код и обновите страницу.

Добавление тега ссылки в код
Добавление тега ссылки в код
Отображение ссылки на странице.
Отображение ссылки на странице.

Изображение

Для добавления изображения на страницу необходимо воспользоваться тегом <img>. Тег содержит два атрибута src и alt.
В значение атрибута src задают путь до картинки в папке проекта или url-адрес изображения из интернета.
В значение атрибута alt задают имя для изображения, на тот случай, когда браузер не может отобразить саму картинку.
Для наглядности примера, скопируйте url любой картинки из интернета и поместите в значения атрибута
src.
Отредактируйте код и обновите страницу.

Добавление тега изображения в код
Добавление тега изображения в код
Отображение картинки на странице
Отображение картинки на странице

Обратите внимание, тег img является самозакрывающимся.

Списки

Для создания списков в html используется несколько тегов:
<ul>
- создает маркированный список.
<ol>
- создает нумерованный список.

Тег <li> в обоих случаях, служит для создания элементов внутри списка.
Отредактируйте код и обновите страницу.

Добавление списков и элементов в код
Добавление списков и элементов в код
Отображение списков на странице
Отображение списков на странице

Сегодня мы изучили лишь малую часть различных тегов, которые используются при создании веб-страницы.

В
следующей статье, познакомимся с CSS, что позволить нам визуально изменять нашу страницу.

До скорых встреч =)