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

Рассмотрим создание простой html страницы с форматированным текстом без использования css (таблицы стилей). 

При рассмотрении структуры HTML документа была создана страничка с текстом:

Здесь текста минимум, поэтому добавим еще.

1. Выделим часть текста курсивом (<em></em>), часть полужирным (<strong></strong>), часть расположим по центру. У текста будет заголовок и разбит он будет на абзацы (<p></p>), для части текста будет использован перенос на новую строку с помощью тега <br/>. Создадим упорядоченный (<ol>) и неупорядоченный (<ul>) список

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заголовок страницы</title>
</head>
 
<body>
<h1>Содержимое, которое будет отображено в браузере </h1>
<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 - подзаголовки. В зависимости от уровня заголовка как правило отличается размер шрифта, но использовать данный тег только с этой целью - не рекомендуется. 

Тег <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/logowebmast.png" />

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

- изображение как ссылка с открытием в новом окне: <a href="images/logowebmast.png" target="_blank"><img alt="Картинка для примера"  src="images/logowebmast.png"  /></a>

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

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

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

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