- •Введение
- •1. Протокол http
- •1. Теги, структура html документа
- •2. Форматирование текста
- •Шрифты: гарнитура, размер, цвет
- •Оформление текста
- •Заголовки
- •Текст в виде большого заголовка
- •Текст в виде маленького заголовка Теги переноса строки и форматирования абзаца
- •Выравнивание текста
- •3. Списки.
- •4. Таблицы.
- •5. Изображения
- •6. Свойства страницы - параметры тега body
- •7. Ссылки
- •8. Формы.
- •11. Символьные объекты.
- •10. Что такое css?
- •11 Добавление стилей
- •Лекция: Введение в MySql
1. Теги, структура html документа
Теги
Структура HTML страниц
Head
Упражнение
Теги
Команды для браузера, говорящие, как отображать текст, вставлять таблицы, изображения и другие объекты, называются тегами (от англ. tag - ярлык, признак). Сами теги (команды) не отображаются на экране.
Имя тега пишется в треугольных скобках, например, <b> - тег, говорящий браузеру записывать весь последующий текст жирным шрифтом. Имя тега можно записывать на любом регистре (прописными или строчными буквами), то есть <b> будет воспринято браузером так же, как и <B>.
Теги бывают парные и непарные. Например, тег <b> говорит браузеру записывать жирным шрифтом весь последующий текст до команды </b>. В таком случае тег, дающий команду, называют открывающим, а тег, отменяющий команду, закрывающим.
Теги могут иметь параметры (или атрибуты). Например, чтобы задать цвет шрифта, используется тег font с параметром color: <font color=green> - это открывающий тег, который командует браузеру с этого момента отображать шрифт зеленым (в данном примере) цветом до закрывающего тега </font>.
Некоторые параметры требуют обязательного указания их значений. Для некоторых параметров браузер использует значения по умолчанию, если другие значения не заданы.
Если тег имеет несколько параметров, то они прописываются через пробел в любой последовательности. Например: <font color=green size=3> <font size=3 color=green> - две аналогичные записи открывающего тега font с параметрами color и size.
Структура HTML страниц
Любая html-страница должна содержать следующие обязательные теги:
html - сообщает браузеру, что страника написана на языке HTML и строчки до закрывающего тега представляют собой единый документ;
head - между открывающим и закрывающим тегами помещается важная информация, описывающая этот документ;
body - между открывающим и закрывающим тегами помещается само содержание страницы.
Таким образом HTML-документ имеет следующую структуру:
<html>
<head> Описание документа (не отображается на самой страничке) </head>
<body> Содержание (отображается на страничке с учетом заданной разметки) </body>
</html>
Head
Сам раздел не является обязательным и служит для размещения описания документа. Если он есть, то обязательным тегом является только TITLE, содержание которого задает название документа, показываемое обычно в заголовке окна браузера.
Например, такая строчка <TITLE>1_HTML</TITLE> задаст название документа "1_HTML", которое в Mozilla Firefox будет отражаться в заголовке окна и на закладках (когда открыто несколько страничек):
2. Форматирование текста
Шрифты: гарнитура, размер, цвет
Оформление текста
Заголовки
Теги переноса строки и форматирования абзаца
Выравнивание текста
Упражнение
Шрифты: гарнитура, размер, цвет
При помощи 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>
Здесьможно скачать таблицу цветов, в которой приведены основные цвета, их названия и соответствующие им шестнадцатеричные значения.