Создание html страницы с простым форматированием

Рассмотрим создание 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>

Содержимое, которое будет отображено в браузере

Текст, выделенный жирным

Курсив подчеркивание

Этот текст выделен жирным,
курсивом
и расположен по центру

  • список
  • неупорядочен
  1. список
  2. упорядочен

Заголовок выделяется тегами от <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="http://httpmaster.ru">Сайт для начинающего веб-мастера</a> - откроется в том же окне - Сайт для начинающего веб-мастера

2.1.2 - та же ссылка, но открывающаяся в новом окне - <a href="http://httpmaster.ru" target="blank">Сайт для начинающего веб-мастера</a>, здесь был добавлен атрибут "target" - Сайт для начинающего веб-мастера

Для вставки изображения используется тег <img> с атрибутом "src" для указания пути к изображению, так же возможно применение атрибута "alt" для указания альтернативного названия. 

- Простое изображение: <img alt="Картинка для примера" src="/images/httpm-logo.png" />

Картинка для примера

- изображение как ссылка с открытием в новом окне:

 <a href="/images/httpm-logo.png" target="_blank"><img alt="Картинка для примера"  src="/images/httpm-logo.png"  /></a>

Картинка для примера

В данном случае использована ссылка на это же изображение, так же можно вставить ссылку на файл, адрес страницы...

Добавить комментарий

Комментарии ()