Структура html страниц
Любая html-страница должна содержать следующие обязательные теги:
html - сообщает браузеру, что страника написана на языке HTML и строчки до закрывающего тега представляют собой единый документ;
head - между открывающим и закрывающим тегами помещается важная информация, описывающая этот документ;
body - между открывающим и закрывающим тегами помещается само содержание страницы.
Таким образом HTML-документ имеет следующую структуру:
<html>
<head>
Описание документа (не отображается на самой страничке)
</head>
<body>
Содержание (отображается на страничке с учетом заданной разметки)
</body>
</html>
Head
Сам раздел не является обязательным и служит для размещения описания документа.
Если он есть, то обязательным тегом является только TITLE, содержание которого задает название документа, показываемое обычно в заголовке окна браузера.
Например, такая строчка
<TITLE>1_HTML</TITLE>
задаст название документа "1_HTML", которое в Mozilla Firefox будет отражаться в заголовке окна и на закладках (когда открыто несколько страничек):
Форматирование текста
Шрифты: гарнитура, размер, цвет
Оформление текста
Заголовки
Теги переноса строки и форматирования абзаца
Выравнивание текста
Упражнение
Шрифты: гарнитура, размер, цвет
При помощи HTML-разметки можно написать текст разного начертания (гарнитуры), размера и цвета. Для этого используется тег <font>, имеющий несколько параметров:
face – для задания гарнитуры,
size – для задания размера,
color – для задания цвета.
Чтобы задать нужный шрифт, размер или цвет, необходимо соответствующему параметру присвоить нужное значение:
параметр="значение"
Гарнитура
Например, чтобы написать текст шрифтом Times New Roman, необходимо вставить перед нужным текстом тег <font> и присвоить его параметру face значение Times New Roman, а т.к. тег <font> – парный, то после необходимого текста обязательно нужно вставить закрывающий тег:
<font face="Times New Roman">Текст с начертанием Times New Roman</font>
В результате браузер отобразит эту строчку так:
Текст с начертанием Times New Roman
Параметру face можно присвоить несколько значений через запятую:
face="Times New Roman, Times, serif"
В таком случае, браузер сначала попытается отобразить текст шрифтом Times New Roman. Если такой шрифт отсутствует на компьютере пользователя, то браузер попытается отобразить текст шрифтом Times и т.д.
Размер
Чтобы написать текст размером 4, необходимо вставить перед нужным текстом тег и присвоить его параметру size значение 4:
<font size="4">Текст размера 4</font>
В результате браузер отобразит эту строчку так:
Текст размера 4
Что же означает эта загадочная цифра 4? Параметр size может принимать значения от 1 до 7. Это условные единицы. Средний размер, используемый по умолчанию, соответствует size="3".
Следовательно, размер текста 4 – это средний размер, увеличенный на 1 условную единицу, а размер 2 - это средний размер, уменьшенный на 1 условную единицу и т.д. Величина текста, заданная таким способом, называется абсолютной.
Но есть и другой способ уменьшить или увеличить размер текста относительно размера по умолчанию. Для этого нужно присвоить параметру size значение "-1" или "+1" соответственно. При таком способе задания размера величина текста называется относительной.
Итак, чтобы получить размер текста 5, можно воспользоваться двумя способами:
<font size="5">Текст размера 5</font> или <font size="+2">Текст размера
5</font>
Помимо перечисленных существует еще несколько способов задать размер текста.
Увеличить текст можно с помощью тега <big>:
<big>Увеличенный текст</big>
В результате браузер отобразит эту строчку так:
Увеличенный текст
Уменьшить текст можно с помощью тега <small>:
<small>Уменьшенный текст</small>
В результате браузер отобразит эту строчку так:
Уменьшенный текст
Теги <small> и <big> можно повторить несколько раз для усиления эффекта. Например, если в результате строки:
<big>Большой текст</big>
текст недостаточно велик:
Большой текст
можно написать так:
<big><big>Большой текст</big></big>
И в результате получится больший текст:
Большой текст
Цвет
Теперь о задании цвета текста. Чтобы написать текст красным цветом, необходимо вставить перед нужным текстом тег <font> и присвоить его параметру color значение red:
<font color="red">Красный текст</font>
В результате браузер отобразит эту строчку так:
Красный текст
Но цвет можно задать не только по названию, но и по цифровому значению в шестнадцатеричном формате, который выглядит как знак # и 6 символов (цифры 0-9 и буквы латинского алфавита A-F) после него. Например, красному цвету соответствует шестнадцатеричное значение #FF0000. Т.е. написать текст красным цветом можно двумя способами:
<font color="red">Красный текст</font> или <font color="#FF0000">Красный текст</font>
Здесь можно скачать таблицу цветов, в которой приведены основные цвета, их названия и соответствующие им шестнадцатеричные значения.
Оформление текста
Для оформления текста существуют следующие теги, именуемые тегами форматирования.
Теги <b> и <strong> позволяют написать жирный текст:
<strong>Жирный текст</strong> или <b>Жирный текст</b>
В результате оба этих варианта в браузере будут выглядеть так:
Жирный текст
Теги <i> и <em> позволяют написать текст курсивом: <i>Текст курсивом</i> или <em>Текст курсивом</em>
В результате оба этих варианта в браузере будут выглядеть так:
Текст курсивом
Тег <u> позволяет написать подчеркнутый текст: <u>Подчеркнутый текст</u>
В браузере увидим:
Подчеркнутый текст Этот тег полезно использовать для выделения ссылок.
Тег <strike> позволяет написать зачеркнутый текст: <strike>Зачеркнутый текст</strike>
В браузере увидим:
Зачеркнутый текст
Теги <sup> и <sub> позволяют написать верхний индекс или нижний индекс соответственно. Эти теги уменьшают размер текста и сдвигают его относительно базовой линии вверх или вниз.
Например, их можно использовать для написания формул:
E = mc<sup>2</sup> или C<sub>2</sub>H<sub>5</sub>OH
В браузере увидим:
E = mc2 или C2H5OH
Теги форматирования можно использовать совместно.
Например, чтобы сделать текст жирным и курсивным одновременно, достаточно написать:
<b><i>Жирный курсивный текст</i></b>
И в браузере мы увидим:
Жирный курсивный текст
Обратите внимание: если тег <b> стоит первым, то закрывающий тег </b> должен стоять в конце. Т.е. теги "вкладываюся" друг в друга как матрешки. Именно поэтому парные теги еще называют контейнерами.
Сводная таблица тегов форматирования:
Тег
Действие
<b>
Делает текст
жирным
<strong>
Делает текст
жирным
<i>
Делает текст
курсивным
<em>
Делает текст
курсивным
<u>
Делает текст
подчеркнутым
<strike>
Делает текст
зачеркнутым
<sup>
Верхний индекс
<sub>
Нижний индекс
Пример использования
Результат
<b>Текст</b>
Текст
<strong>Текст</strong>
Текст
<i>Текст</i>
Текст
<em>Текст</em>
Текст
<u>Текст</u>
Текст
<strike>Текст</strike>
Текст
E = mc<sup>2</sup>
E = mc2
C<sub>2</sub>H<sub>5</sub>OH
C2H5OH
Заголовки
Чтобы как-то выделить заголовки в тексте, в html существуют специальные теги заголовка. Эти теги изменяют размер текста, сверх и снизу заголовка делаются отступы, пропорциональные его размеру, а также после заголовка делается перенос строки. Вот эти теги: <h1>, <h2> : <h6>. <h1> - самый большой заголовок, <h6> - самый маленький.
Т.е. если написать:
<h1>Текст в виде большого заголовка</h1> и <h6>Текст в виде маленького заголовка</h6>
Браузер отобразит это так:
Текст в виде большого заголовка
и
Текст в виде маленького заголовка
Теги переноса строки и форматирования абзаца
Вот еще несколько полезных теги для форматирования текста.
Полезно знать:
Если в тесте html-документа поставить перенос строки, то браузер его проигнорирует и отобразит весь текст в одну строку.
Например, в тесте html-документа написано:
Идет бычок, качается,
Вздыхает на ходу...
А браузер отобразит этот текст следующим образом:
Идет бычок, качается, Вздыхает на ходу...
Тут-то нас и спасет тег <br>. Это непарный тег, означающий переход на новую строку.
Т.е написав:
Идет бычок, качается,<br>
Вздыхает на ходу...
или
Идет бычок, качается,<br>Вздыхает на ходу...
В браузере мы увидим:
Идет бычок, качается,
Вздыхает на ходу...
С помощью этого тега можно не только перенести тест на новую строку, но и делать отступы между разными элементами документа. Достаточно просто вставить не один тег <br>, а два и т.д.
Полезно знать:
Если в тесте html-документа подряд стоят несколько пробелов, то браузер их проигнорирует и отобразит только один.
Например, в тесте html-документа написано:
Здравствуй, дорогой друг!
А браузер отобразит этот текст следующим образом:
Здравствуй, дорогой друг!
Тег <pre> используется, когда требуется написать текст как есть, включая все пробелы и переносы строки.
Т.е. если написать:
<pre>Идет бычок, качается, Вздыхает на ходу...</pre>
То браузер отобразит этот текст следующим образом:
Идет бычок, качается,
Вздыхает на ходу...
Но!
Не стоит злоупотреблять тегом <pre>. И по возможности обходиться без него.
Любой текст можно, а иногда и нужно, разбить на абзацы. В html такую функцию выполняет тег <p>. Если поместить текст между открывающим тегом <p> и закрывающим тегом </p>, то сверху и снизу от этого теста появится отступ, т.е. этот кусок текста отделится от общей массы текста и образуется параграф. По умолчанию параграф выровнен по левому краю.
Выравнивание текста
Всего в html можно задать 4 типа выравнивания: по левому краю, по правому краю, по центру, по ширине. Чтобы задать тип выравнивания нужно параметру align тега <p> присвоить одно из значений:
left (выравнивание по левому краю),
right (выравнивание по правому краю),
center (выравнивание по центру),
justify (выравнивание по ширине).
Вот примеры текста с различным типом выравнивания:
по левому краю
по правому краю
по центру
по ширине
<p
<p
<p
<p
align="left">Хотя
align="right">Хотя
align="center">Хотя
align="justify">Хотя
Карлсон и был
Карлсон и был
Карлсон и был
Карлсон и был
лучшим в мире
лучшим в мире
лучшим в мире
лучшим в мире
специалистом по
специалистом по
специалистом по
специалистом по
паровым
паровым
паровым машинам,
паровым машинам,
машинам,
машинам,
денатурат он
денатурат он
денатурат он
денатурат он
наливал весьма
наливал весьма
наливал весьма
наливал весьма
неуклюже и даже
неуклюже и даже
неуклюже и
неуклюже и даже
пролил его, так что
пролил его, так что
даже пролил его,
пролил его, так
на полке
на полке
так что на полке
что на полке
образовалось целое
образовалось целое
образовалось
образовалось
денатуратное
денатуратное
целое
целое
озеро.</p>
озеро.</p>
денатуратное
денатуратное
озеро.</p>
озеро.</p>