Рассмотрим создание HTML страницы с простым форматированием, без использования таблиц стилей CSS, по сути - форматированный текст.
Структура
HTML документ состоит из двух основных частей - заголовка и собственно самого тела документа, объединенных в общем теге - HTML
В заголовке (head) находится скрытая от пользователя часть, используемая браузерами и поисковыми роботами (пути к скриптам, таблицам стилей, META информация, кодировка....)
В теле документа (body) - текст, изображения, таблицы и т.п. - то, что увидет пользователь просматривая страницу в браузере.
Пример:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заголовок страницы</title>
</head>
<body>
<p>Содержимое, которое будет отображено в браузере</p>
</body>
</html>
!DOCTYPE - указание типа документа, ранее так же указывалась версия html, но с приходом HTML 5 стало достаточно такой записи
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - указываем кодировку для корректного отображения текста во всех браузерах. В большинстве случаев используется utf-8.
Тот же документ с неверной кодировкой может выглядеть так:
<head> - начало заголовка документа - открывающий тег
</head> - окончание заголовка документа - закрывающий тег
Каждый открытый тег должен быть закрыт
<body> - начало тела документа
</body> - окончание тела документа
Разметка содержимого страницы
Теперь добавим немного текста и разметим его специальными тегами:
1. Выделим часть текста курсивом (<em></em>), часть полужирным (<strong></strong>), часть расположим по центру. У текста будет заголовок и разбит он будет на абзацы (<p></p>), для части текста будет использован перенос на новую строку с помощью тега <br/>. Создадим упорядоченный (<ol>) и неупорядоченный (<ul>) список
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заголовок страницы</title>
</head>
<body>
<h3>Содержимое, которое будет отображено в браузере</h3>
<p><strong>Текст, выделенный жирным</strong></p>
<p><em>Курсив</em> <u>подчеркивание</u></p>
<p align="center"><em><strong>Этот текст выделен жирным,<br/> курсивом <br/>и расположен по центру</strong></em></p>
<ul>
<li>список</li>
<li>не упорядочен</li>
</ul>
<ol>
<li>список</li>
<li>упорядочен</li>
</ol>
</body>
</html>Содержимое, которое будет отображено в браузере
Текст, выделенный жирным
Курсив подчеркивание
Этот текст выделен жирным,
курсивом
и расположен по центру
- список
- неупорядочен
- список
- упорядочен
Заголовок выделяется тегами от <h1> до <h6>. H1 - основной заголовок, h2-6 - подзаголовки. В зависимости от уровня заголовка как правило отличается размер шрифта, но использовать данный тег только с этой целью - нельзя. В первую очередь нужно рассматривать важность выделяемого в H1-6 текста
Тег <p> - параграф. В примере для одного из параграфов задано выравнивание по середине (align="center"), можно сделать выравнивание по левому краю (align="left"), правому (align="right"), по ширине (align="justify").
Тег <br/> - не закрывающийся, служит для перехода на новую строку
2. Добавление ссылок и изображений
Ссылки добавляются с помощью тега <a> с атрибутом "href"
2.1.1 - простая ссылка с текстом - <a href="https://webrazrab.ru">Сайт для начинающего веб-мастера</a> - откроется в том же окне - Сайт для начинающего веб-мастера
2.1.2 - та же ссылка, но открывающаяся в новом окне - <a href="https://webrazrab.ru" target="blank">Сайт для начинающего веб-мастера</a>, здесь был добавлен атрибут "target" - Сайт для начинающего веб-мастера
Для вставки изображения используется тег <img> с атрибутом "src" для указания пути к изображению, так же возможно применение атрибута "alt" для указания альтернативного названия.
- Простое изображение: <img alt="Картинка для примера" src="https://webrazrab.ru/wr-logo.png" />
- изображение как ссылка с открытием в новом окне:
<a href="https://webrazrab.ru/wr-logo.png" target="_blank"><img alt="Картинка для примера" src="https://webrazrab.ru/wr-logo.png" /></a>
В данном случае использована ссылка на это же изображение, так же можно вставить ссылку на файл, адрес страницы...
