Форматизация HTML

Если вы используете текстовый редактор, то вы должны быть знакомы с способностью сделать текст смелейшей, выделенной курсивом, или подчеркиванной; эти как раз 3 из 10 вариантов доступных для того чтобы показать как текст может выйти в свет в HTML и XHTML.

Смелейший текст

Что-нибыдь которое появляется внутри элемент <b>… </b>, показано в смелейшем как показан ниже:

Пример

<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

Это даст следующий:

The following word uses a bold typeface.

Текст курсивом

Что-нибыдь которое появляется внутри элемент <i>… </i> показано в выделено курсивом как показан ниже:

Пример

<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

Это даст следующий:

The following word uses a italicized typeface.

Подчеркиванный текст

Что-нибыдь которое появляется внутри элемент <u>… </u>, показано с underline как показан ниже:

Пример

<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>

Это даст следующий:

The following word uses a underlined typeface.

Текст забастовки

Что-нибыдь которое появляется внутри элемент <strike>… </strike> показано с strikethrough, которое тонкая линия через текст как показан ниже:

Пример

<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>

Это даст следующий:

The following word uses a ~~strikethrough~~ typeface.

Купель Monospaced

Содержание элемента <tt>… </tt> написано в купели monospaced. Большая часть из купелей как купели переменн-ширины потому что различные письма различных ширин (например, письмо «m» широке чем письмо «я "). В купели monospaced, однако, каждое письмо имеет такую же ширину.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>

Это даст следующий:

The following word uses a monospaced typeface.

Superscript текст

Содержание элемента <sup>… </sup> написано в верхном индексе; используемый размер шрифта одинаковый размер как характеры окружая его но высота показанного половина характера над другими характерами.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>

Это даст следующий:

The following word uses a ^superscript typeface.

Subscript текст

Содержание элемента <sub>… </sub> написано в приписке; используемый размер шрифта это же как характеры окружая его, но высота показанного половина характера под другими характерами.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>

Это даст следующий:

The following word uses a _subscript typeface.

Введенный текст

Что-нибыдь которое появляется внутри элемент <ins>… </ins> показано как введенный текст.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

Это даст следующий:

I want to drink ~~cola~~ wine

Уничтоженный текст

Что-нибыдь которое появляется внутри элемент <del>… </del>, показано как уничтоженный текст.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

Это даст следующий:

I want to drink ~~cola~~ wine

Более большой текст

Содержание элемента <big>… </big> показано один размер шрифта более большой чем остальнои текста окружая его как показан ниже:

Пример

<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>

Это даст следующий:

The following word uses a big typeface.

Более малый текст

Содержание элемента <small>… </small> показано один размер шрифта более малый чем остальнои текста окружая его как показан ниже:

Пример

<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>

Это даст следующий:

The following word uses a small typeface.

Собирать содержание

Элементы <div> и <span> позволяют вам собрать совместно несколько элементов для того чтобы создать разделы или подразделы страницы.

Например, вы могли хотеть положить все сноски на страницу внутри элемент <div> для того чтобы показать что все элементы внутри тот элемент <div> относят к сноскам. Вы могли после этого прикрепить тип к этому элементу <div> так, что они появятся используя специальный комплект правил типа.

Пример

<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> | 
<a href="/about/contact_us.htm">CONTACT</a> | 
<a href="/about/index.htm">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

Это даст следующий:

Содержимые статьи

Фактическое содержание идет здесь .....

Элемент <span>, с другой стороны, можно использовать для того чтобы собрать встроенные элементы только. Так, если вы имеют часть предложения или параграф, то которые вы хотите собрать совместно, вы смогли использовать элемент <span> следующим образом

Пример

<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>

Это даст следующий:

This is the example of span tag and the div tag alongwith CSS

Эти бирки обыкновенно использованы с CSS для того чтобы позволить вам прикрепить тип к разделу страницы.