Добавление заголовков и параграфов

Добавление заголовков и параграфов

Если вы пользовались Microsoft Word, вам должно быть хорошо знакомо использование стилей для выделения заголовков по степени важности. В HTML заголовки по степени важности делятся на шесть уровней. Н1 — самый важный, Н2 — чуть менее важен, и, наконец, Н6 — наименее значимый.

Пример того, как добавить важный заголовок:

<h1>Важный заголовок</h1>

Результат:

Важный заголовок

и чуть менее важный:

<h2>Чуть менее важный</h2>

Результат:

Чуть менее важный

Каждый параграф, который вы напишете должен начинаться тэгом <p> и заканчиваться тэгом </p>. Например:

<p>Это первый параграф.</p>
<p>А это второй параграф.</p>

Выделение курсивом

Вы можете выделить одно или больше слов, используя тэг <em>, пример:

Это действительно <em>интересный</em> пункт!

Результат:

Это действительно интересный пункт!

Изменение цвета и размера текста

Тэг FONT может быть использован для указания цвета и размера шрифта, которым будет выведен ваш текст. В этом примере устанавливается цвет:

В этом предложении есть <font color="red">слово</font>,выделенное красным цветом.

Результат:

В этом предложении есть слово выделенное красным цветом.

Атрибут size служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер "нормального" шрифта соответствует числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2):

Советы <font size="+2"color="red">ветеринарного</font>врача

Результат:

Советы ветеринарного врача

Вставка рисунков

Использование рисунков делает ваши страницы более интересными. Вставить рисунок позволяет тэг <img>. Предположим, что файл рисунка "okean.jpeg", шириной 200 пикселов и высотой 150, лежит в той же папке что и HTML файл.

<img src="okean.jpeg" width="200"height="150"><BR>

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

<img src="okean.jpeg" width="200"height="150" alt="В товремя, как мы бороздили просторы Океана...">

В WWW используется два формата графических файлов GIF и JPEG. Формат GIF используется, когда требуется прозрачное изображение или анимация, а также для:

• черно-белых рисунков и текста
• изображений с ограниченным количеством цветов
• графики с резкими контурами (меню, кнопки, диаграммы и т.п.)
• изображений с текстом

Формат JPEG больше подходит в следующих случаях:

• сканированные изображения
• графика со сложным сочетанием цветов и оттенков
• любое изображение с палитрой более чем 256 цветов

Создание ссылок на другие страницы

Ссылки обозначаются тэгом <a>. Определим ссылку на страницу определенную в файле "index.htm":

Это ссылка на <ahref="index.htm">Главная страница</a>.

Текст между <a> и </a> используется как описание ссылки, обозначается обычно синим цветом, и подчеркивается линией.

Для ссылки на другую Web-страницу нужно указать ее полный Web-адрес (называемый URL), например, для ссылки на www.km.ru необходимо набрать следующий текст:

Это ссылка на<a href="http://www.km.ru/">www.km.ru</a>.

Вы можете использовать в ссылке картинку. Следующий пример позволяет кликаньем на логотипе компании перейти на ее домашнюю страницу:

<a href="/"><img src="logo.gif"alt="home page"></a>

Списки

HTML предлагает три вида списков. Первый вид называется маркированным (неупорядоченным) списком. Маркированный список открывается тэгом <ul>, а каждый его пункт начинается стандартным тэгом <li>, пример:

<ul> <li>первый пункт списка</li> <li>второй пункт списка</li> <li>третий пункт списка</li></ul>

Результат:

• первый пункт списка
• второй пункт списка
• третий пункт списка

Второй вид - нумерованный (упорядоченный) список. Он использует тэги <ol> и <li>. Пример:

<ol> <li>первый пункт списка</li> <li>второй пункт списка</li> <li>третий пункт списка</li></ol>

Результат:

1. первый пункт списка
2. второй пункт списка
3. третий пункт списка

И последний - это список определений (глоссарий). Он представляет текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение, открывается тэгом <dl>. Каждый термин открывается тэгом <dt>, а определение тэгом <dd>. Пример:

<dl> <dt>первый термин</dt> <dd>его определение</dd> <dt>второй термин</dt> <dd>его определение</dd> <dt>третий термин</dt> <dd>его определение</dd></dl>

Результат:

Первый термин

Его определение

Второй термин

Его определение

Третий термин

Его определение

Списки могут быть вложенными, один в другой. Пример:

<ol> <li>первый пункт списка</li> <li>второй пункт списка <ul> <li>первый пункт вложенного списка</li> <li>второй пункт вложенного списка</li> </ul> </li> <li>третий пункт списка</li></ol>

Результат:

1. первый пункт списка
2. второй пункт списка
• первый пункт вложенного списка
• второй пункт вложенного списка

1. третий пункт списка

Углубляемся в Изучение HTML

Здесь мы вас научим как:

• вставлять перевод строки
• не разрывающие пробелы
• специальные символы
• внутренние ссылки
• создавать преформатированный текст
• позиционировать изображения на странице
• создавать таблицы

Как сделать перевод строки

Перевод строки осуществляется с помощью тэга <br>. Пример:

<p>Иванов И.И.<br>г. Солнечный Магадан,<br>ул. Курортная,<br>барак.4, корпус.2, койка от окна 9-я</p>

Результат:

Иванов И.И.
г. Солнечный Магадан,
ул. Курортная,
барак.4, корпус.2, койка от окна 9-я

Тэг <br> не нуждается в закрывающем тэге.

Как вставить не разрывающий пробел

Иногда нужно воспрепятствовать автоматическому разбиению слов по строкам, например в торговой марке "Coke Cola". В таких случаях вместо пробела следует использовать &nbsp;. Пример:

Сладкие газированные напитки, такие как Coke&nbsp;Cola,достигли мировой популярности.

Специальные символы

Специальные символы могут быть введены в ваш HTML-документ при помощи символа & (амперсант) и кода символа:

Символ	Код	Пример
Знак авторского права	©	Copyright © 1999 KM.ru
Зарегистрированная марка	®	MagiCo ®
Торговая марка	™	Webfarer™
Меньше чем	&lt;	<
Больше чем	&gt;	>
Амперсант	&amp;	&
не разрывающий пробел	&nbsp;
тире	&#8212;	—
двойная кавычка	&quot;	"

Внутренние ссылки

Допустим, вам нужно написать длинную WEB-страницу с таблицей содержания в начале. Как сделать ссылки из таблицы содержания на соответствующие секции?

Допустим, каждая такая секция начинается с заголовка:

<h2>Ночные клубы</h2>

Для того чтобы сделать на нее ссылку, разместите ее в <a name=идентификатор>.... </a>

<h2><a name="ночные-клубы">Ночные клубы</a></h2>

Теперь мы можем сделать ссылку:

<ul>... <li><a href="#ночные-клубы">Ночные клубы</a></li>...</ul>

Символ;# является необходимым перед именем цели. Если цель находится в другом документе,не следует разместить WEB-адрес перед символом #. Пример:

<a href="http://www.bath.co.uk/ index.htm#ночные-клубы">Ночные клубы</a>

Преформатированный текст

Одно из преимуществ Web заключается в том, что текст автоматически располагается по строчкам внутри окна в зависимости от его текущих размеров. Но иногда требуется, чтобы часть текста оставалась без изменений. Как пример, код программы. Используйте для этого тэг <pre>:

<pre> void Node::Remove() { if (prev) prev->next = next; else if (parent) parent->SetContent(null); if (next) next->prev = prev; parent = null; }</pre>

В итоге получим:

void Node::Remove() { if (prev) prev->next = next; else if (parent) parent->SetContent(null); if (next) next->prev = prev; parent = null; }

Цвет текста и фона были заданы с помощью таблицы стилей. Обратите внимание, что все переводы строки и пробелы отображаются в том же виде, что и в HTML. Исключением является перевод строки непосредственно после тэга <pre> и перед тэгом </pre>, которые не отображаются. Этот факт демонстрируют два примера, которые отобразятся одинаково:

<pre>преформатированный текст</pre> <pre>преформатированный текст </pre>

Преформатированный текст отображается моноширинным шрифтом.

Таблицы

Для лучшего представления информации удобно использовать таблицы.

Вот пример простой таблицы:

Год	Продажи
	$18M
	$25M
	$36M

Ее HTML-код следующий:

<table border="3"><tr><th>Год</th><th>Продажи</th></tr><tr><td>2000</td><td>$18M</td></tr><tr><td>2001</td><td>$25M</td></tr><tr><td>2002</td><td>$36M</td></tr></table>

Элемент table является контейнером для таблицы. Атрибут border определяет толщину границы в пикселях. Элемент tr является контейнером для каждой строки таблицы. Элементы th и td являются контейнерами для ячеек, содержащих заголовки и данные соответственно.

Ширина таблицы

Атрибут width используется для установки ширины таблицы. Значение задается как в пикселях, так и в процентах по отношению к расстоянию между левой и правой границами. Пример:

<table border="3" cellpadding="10" width="80%">

такое изменение кода приведет к следующему эффекту:

Год	Продажи
	$18M
	$25M
	$36M

Пустые ячейки

Сравните:

Год	Продажи
	$18M
	$25M

с

Год	Продажи
	$18M
	$25M

Чтобы избежать такого эффекта используйте неразрывающий пробел в пустой ячейке:

<td>&nbsp;</td>

Таблицы без рамки

Для представления таблицы без рамки следует установить border="0" и cellspacing="0"
Рамка немного отличается цветом от основного фона, просто для наглядности.:

Год	Продажи
	$18M
	$25M
	$36M

Код:

<table border="0" cellspacing="0" cellpadding="10">
<tr><th>Год</th><th>Продажи</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

Раскрашивание таблицы

Для установки различных цветов заголовков и ячеек, содержащих данные, в атрибуте bgcolor укажите цвет, который вы хотите использовать.

<table border="0" cellspacing="0" cellpadding="10"> <tr bgcolor="#000000"> <th bgcolor="#FFFFFF">Год</th> <th bgcolor="#FFFFFF">Продажи</th> </tr> <tr> <td bgcolor="#FFFF66">2000</td> <td bgcolor="#FFFF66">$18M</td> </tr> <tr> <td bgcolor="#FFFF66">2001</td> <td bgcolor="#FFFF66">$25M</td> </tr> <tr> <td bgcolor="#FFFF66">2002</td> <td bgcolor="#FFFF66">$36M</td> </tr></table>

В HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах - красном, зеленом и синем. Для каждого цвета задается значение от 00 до FF. Затем эти значения объединяются в одно число, перед которым ставится символ - «#».

Определение структуры

Заглавие	<H?></H?>	(стандарт определяет 6 уровней)
с выравниванием	<H? ALIGN=LEFT|CENTER|RIGHT></H?>
Секция	<DIV></DIV>
с выравниванием	<DIV ALIGN=LEFT|RIGHT|CENTER></DIV>
Цитата	<BLOCKQUOTE></BLOCKQUOTE>	(обычно выделяется отступом)
Выделение	<EM></EM>	(обычно изображается курсивом)
Дополнительное выделение	<STRONG></STRONG>	(обычно изображается жирным шрифтом)
Отсылка, цитата	<CITE></CITE>	(обычно курсив)
Код	<CODE></CODE>	(для листингов кода)
Пример вывода	<SAMP></SAMP>
Ввод с клавиатуры	<KBD></KBD>
Переменная	<VAR></VAR>
Определение	<DFN></DFN>	(часто не поддерживается)
Адрес автора	<ADDRESS></ADDRESS>
Большой шрифт	<BIG></BIG>
Маленький шрифт	<SMALL></SMALL>

Внешний вид

Жирный	<B></B>
Курсив	<I></I>
Подчеркнутый	<U></U>	(часто не поддерживается)
Перечеркнутый	<STRIKE></STRIKE>	(часто не поддерживается)
Перечеркнутый	<S></S>	(часто не поддерживается)
Верхний индекс	<SUB></SUB>
Нижний индекс	<SUP></SUP>
Печатная машинка	<TT></TT>	(изображается как шрифт фиксированой ширины)
Форматированый	<PRE></PRE>	(сохранить формат текста как есть)
Ширина	<PRE WIDTH=?></PRE>	(в символах)
Центрировать	<CENTER></CENTER>>	(как текст, так и графика)
Мигающий	<BLINK></BLINK>	(наиболее осмеянный элемент)
Размер шрифта	<FONT SIZE=?></FONT>	(от 1 до 7)
Изменить размер шрифта	<FONT SIZE="+|-?"></FONT>
Базовый размер шрифта	<BASEFONT SIZE=?>	(от 1 до 7; по умолчанию 3)
Цвет шрифта	<FONT COLOR="#$$$$$$"></FONT>
Выбор шрифта	<FONT FACE="***"></FONT>
Многоколоночный текст	<MULTICOL COLS=?></MULTICOL>
Пробел между колонками	<MULTICOL GUTTER=?></MULTICOL>	(по умолчанию 10 точек)
Ширина колонки	<MULTICOL WIDTH=?></MULTICOL>
Пустой блок	<SPACER>
Тип пустого блока	<SPACER TYPE=horizontal| vertical|block>
Величина пустого блока	<SPACER SIZE=?>
Размеры пустого блока	<SPACER WIDTH=? HEIGHT=?>
Выравнивание	<SPACER ALIGN=left|right|center>

Ссылки и графика

Ссылка	<A HREF="URL"></A>
Ссылка на закладку	<A HREF="URL#***"></A>	(в другом документе)
Ссылка на закладку	<A HREF="#***"></A>	(в том же документе)
На другое окно	<A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A>
Определить закладку	<A NAME="***"></A>
Отношение	<A REL="***"></A>	(часто не поддерживается)
Обратное отношение	<A REV="***"></A>	(часто не поддерживается)
Графика	<IMG SRC="URL">
Выравнивание	<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
Выравнивание	<IMG SRC="URL" ALIGN=TEXTTOP| ABSMIDDLE|BASELINE|ABSBOTTOM>
Альтернатива	<IMG SRC="URL" ALT="***">	(выводится если картинка не изображается)
Карта	<IMG SRC="URL" ISMAP>	(нужна также программа)
Локальная карта	<IMG SRC="URL" USEMAP="URL">
Определение карты	<MAP NAME="***"></MAP>
Области карты	<AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
Размеры	<IMG SRC="URL" WIDTH=? HEIGHT=?>	(в точках)
Окантовка	<IMG SRC="URL" BORDER=?>	(в точках)
Отступ	<IMG SRC="URL" HSPACE=? VSPACE=?>	(в точках)
Заменитель в низком разрешении	<IMG SRC="URL" LOWSRC="URL">
Обновить	<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
Включить объект	<EMBED SRC="URL">	(вставить объект в страницу)
Размер объекта	<EMBED SRC="URL" WIDTH=? HEIGHT=?>

Разделители

Параграф	<P></P>	(закрывать элемент часто не обязательно)
Выравнивание	<P ALIGN=LEFT|CENTER|RIGHT></P>
Новая строка	<BR>	(одиночный перевод строки)
Убрать выравнивание	<BR CLEAR=LEFT|RIGHT|ALL>
Горизонтальный разделитель	<HR>
Выравнивание	<HR ALIGN=LEFT|RIGHT|CENTER>
Толщина	<HR SIZE=?>	(в точках)
Ширина	<HR WIDTH=?>	(в точках)
Ширина в процентах	<HR WIDTH="%">	(в процентах от ширины страницы)
Сплошная линия	<HR NOSHADE>	(без трехмерных эффектов)
Нет разбивки	<NOBR></NOBR>	(запрещает перевод строки)
Перенос	<WBR>	(где разбивать строку для переноса при необходимости)

Списки

Неупорядоченный	<UL><LI></UL>	(<LI>перед каждым элементом)
Компактный	<UL COMPACT></UL>
Тип метки	<UL TYPE=DISC|CIRCLE|SQUARE>	(для всего списка)
<LI TYPE=DISC|CIRCLE|SQUARE>	(этот и последующие)
Нумерованый	<OL><LI></OL>	(<LI>перед каждым элементом)
Компактный	<OL COMPACT></OL>
Тип нумерации	<OL TYPE=A|a|I|i|1>	(для всего списка)
<LI TYPE=A|a|I|i|1>	(этот и следующие)
Первый номер	<OL START=?>	(для всего списка)
<LI VALUE=?>	(этот и следующие)
Список определений	<DL><DT><DD></DL>	(<DT>=термин, <DD>=определение)
Компактный	<DL COMPACT></DL>
Меню	<MENU><LI></MENU>	(<LI>перед каждым элементом)
Компактное	<MENU COMPACT></MENU>
Каталог	<DIR><LI></DIR>	(<LI>перед каждым элементом)
Компактный	<DIR COMPACT></DIR>

Фон и цвета

Фоновая картинка	<BODY BACKGROUND="URL">
Цвет фона	<BODY BGCOLOR="#$$$$$$">	(порядок: красный/зеленый/синий)
Цвет текста	<BODY TEXT="#$$$$$$">
Цвет ссылки	<BODY LINK="#$$$$$$">
Пройденная ссылка	<BODY VLINK="#$$$$$$">
Активная ссылка	<BODY ALINK="#$$$$$$">

Специальные символы
(вводить только в нижнем регистре)

Специальный символ	&#?;	(где? это код ISO 8859-1)
<	&lt;
>	&gt;
&	&amp;
"	&quot;
Торговая марка ТМ	&reg;
Copyright	&copy;
Неразделяющий пробел	&nbsp;

Формы

Определить форму	<FORM ACTION="URL" METHOD=GET|POST></FORM>
Посылка файла	<FORM ENCTYPE="multipart/form-data"></FORM>
Поле ввода	<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET">
Имя поля	<INPUT NAME="***">
Значение поля	<INPUT VALUE="***">
Отмечен?	<INPUT CHECKED>	(checkboxes и radio boxes)
Размер поля	<INPUT SIZE=?>	(в символах)
Максимальная длина	<INPUT MAXLENGTH=?>	(в символах)
Список вариантов	<SELECT></SELECT>
Имя списка	<SELECT NAME="***"></SELECT>
Число вариантов	<SELECT SIZE=?></SELECT>
Множественний выбор	<SELECT MULTIPLE>	(можно выбрать больше одного)
Опция	<OPTION>	(элемент который может быть выбран)
Опция по умолчанию	<OPTION SELECTED>
Ввод текста, размер	<TEXTAREA ROWS=? COLS=?></TEXTAREA>
Имя текста	<TEXTAREA NAME="***"></TEXTAREA>
Разбивка на строки	<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>

Таблицы

Определить таблицу	<TABLE></TABLE>
Окантовка таблицы	<table border=?></TABLE>
Расстояние между ячейками	<TABLE CELLSPACING=?>
Дополнение ячеек	<TABLE CELLPADDING=?>
Желаемая ширина	<TABLE WIDTH=?>	(в точках)
Ширина в процентах	<TABLE WIDTH="%">	(проценты от ширины страницы)
Строка таблицы	<TR></TR>
Выравнивание	<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>
Ячейка таблицы	<TD></TD>	(должна быть внутри строки)
Выравнивание	<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>
Без перевода строки	<TD NOWRAP>
Растягивание по колонке	<TD COLSPAN=?>
Растягивание по строке	<TD ROWSPAN=?>
Желаемая ширина	<TD WIDTH=?>	(в точках)
Ширина в процентах	<TD WIDTH="%">	(проценты от ширины страницы)
Цвет ячейки	<TD BGCOLOR="#$$$$$$">
Заголовок таблицы	<TH></TH>	(как данные, но жирный шрифт и центровка)
Выравнивание	<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>
Без перевода строки	<TH NOWRAP>
Растягивание по колонке	<TH COLSPAN=?>
Растягивание по строке	<TH ROWSPAN=?>
Желаемая ширина	<TH WIDTH=?>	(в точках)
Ширина в процентах	<TH WIDTH="%">	(проценты ширины таблицы)
Цвет ячейки	<TH BGCOLOR="#$$$$$$">
Заглавие таблицы	<CAPTION></CAPTION>
Выравнивание	<CAPTION ALIGN=TOP|BOTTOM>	(сверху/снизу таблицы)

Фреймы

Документ с фреймами	<FRAMESET></FRAMESET>	(вместо<BODY>)
Высота строк	<FRAMESET ROWS=,,,></FRAMESET>	(точки или %)
Высота строк	<FRAMESET ROWS=*></FRAMESET>	(* = относительный размер)
Ширина колонок	<FRAMESET COLS=,,,></FRAMESET>	(точки или %)
Ширина колонок	<FRAMESET COLS=*></FRAMESET>	(* = относительный размер)
Ширина окантовки	<FRAMESET BORDER=?>
Окантовка	<FRAMESET FRAMEBORDER="yes|no">
Цвет окантовки	<FRAMESET BORDERCOLOR="#$$$$$$">
Определить фрейм	<FRAME>	(содержание отдельного фрейма)
Документ	<FRAME SRC="URL">
Имя фрейма	<FRAME NAME="***"|_blank|_self| _parent|_top>
Ширина границы	<FRAME MARGINWIDTH=?>	(правая и левая границы)
Высота границы	<FRAME MARGINHEIGHT=?>	(верхняя и нижняя границы)
Скроллинг?	<FRAME SCROLLING="YES|NO|AUTO">
Постоянный размер	<FRAME NORESIZE>
Окантовка	<FRAME FRAMEBORDER="yes|no">
Цвет окантовки	<FRAME BORDERCOLOR="#$$$$$$">
Содержание без фреймов	<NOFRAMES></NOFRAMES>	(для просмотрщиков не поддерживающих фреймы)

Язык JAVA

Applet	<APPLET></APPLET>
Applet - имя файла	<APPLET CODE="***">
Параметры	<APPLET PARAM NAME="***">
Applet - адрес	<APPLET CODEBASE="URL">
Applet - имя	<APPLET NAME="***">	(для ссылок из других частей страницы)
Альтернативный текст	<APPLET ALT="***">	(для программ не поддерживающих Java)
Выравнивание	<APPLET ALIGN="LEFT|RIGHT|CENTER">
Размеры	<APPLET WIDTH=? HEIGHT=?>	(в точках)
Отступ	<APPLET HSPACE=? VSPACE=?>	(в точках)

Разное

Комментарий	<!-- *** -->	(игнорируется просмотрщиком)
Пролог HTML 3.2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
Поиск	<ISINDEX>	(означает начальную точку поиска)
Приглашение	<ISINDEX PROMPT="***">	(текст приглашения для поля ввода)
Запустить поиск	<A HREF="URL?***"></a>	(используйте действительно знак вопроса)
URL этого файла	<BASE HREF="URL">	(должно быть в заголовке)
Имя базового окна	<BASE TARGET="***">	(должно быть в заголовке)
Отношение	<LINK REV="***" REL="***" HREF="URL">	(должно быть в заголовке)
Метаинформация	<META>	(должно быть в заголовке)
Стили	<STYLE></STYLE>	(часто не поддерживается)
Программа	<SCRIPT></SCRIPT>	(часто не поддерживается)

 

Добавление заголовков и параграфов

Если вы пользовались Microsoft Word, вам должно быть хорошо знакомо использование стилей для выделения заголовков по степени важности. В HTML заголовки по степени важности делятся на шесть уровней. Н1 — самый важный, Н2 — чуть менее важен, и, наконец, Н6 — наименее значимый.

Пример того, как добавить важный заголовок:

<h1>Важный заголовок</h1>

Результат:

Важный заголовок

и чуть менее важный:

<h2>Чуть менее важный</h2>

Результат:

Чуть менее важный

Каждый параграф, который вы напишете должен начинаться тэгом <p> и заканчиваться тэгом </p>. Например:

<p>Это первый параграф.</p>
<p>А это второй параграф.</p>

Выделение курсивом

Вы можете выделить одно или больше слов, используя тэг <em>, пример:

Это действительно <em>интересный</em> пункт!

Результат:

Это действительно интересный пункт!