Теги для работы с текстом.

Главные теги.

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

У <HTML> есть единственный параметр title. Благодаря параметру выводится всплывающая подсказка, которая отображается, когда курсор мыши задерживается в окне веб-страницы.

Тег <HEAD> содержит все служебные теги, не отображаемые в браузере, к которым относятся: <BASE>, <BASEFONT>, <BGSOUND>, <LINK>, <META>, <SCRIPT>, <STYLE>, <TITLE>.

Тег <TITLE> определяет заголовок документа. Заголовок на странице может быть только один и отображается он в левом верхнем углу окна браузера.

<HEAD>

<title>Здесь отображается заголовок страницы </title>

</HEAD >

Тег <BODY> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. К контенту относятся текст, изображения, теги, скрипты JavaScript и т.д.

Параметры:

Ø Background - Задает фоновый рисунок на Web-странице.

Ø Bgcolor - Цвет фона веб-страницы.

Ø Bgproperties - Определяет, прокручивать фон совместно с текстом или нет.

Ø Bottommargin - Отступ от нижнего края окна браузера до контента.

Ø Leftmargin - Отступ по горизонтали от края окна браузера до контента.

Ø Text - Цвет текста в документе.

Ø Topmargin - Отступ от верхнего края окна браузера до контента.

Текстовое содержимое

</BODY>

Значение цвета можно задавать двумя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Задание. Создать первую HTML-страницу, которая должна удовлетворять следующим требованиям:

· имя файла index.html (для создания данного файла необходимо открыть блокнот и сохранить его, использую название Index, заменив расширение с txt на html).

· должна появляться всплывающая подсказка «моя первая страница на HTML»

· заголовок страницы должен копировать всплывающую подсказку

· цвет фона страницы должен быть темно-серый (#999999)

Теги для работы с текстом.

Тег <Strong> у станавливает жирное начертание шрифта.

Тег <Em> определяет курсивное начертание шрифта.

Тег <U> устанавливает подчеркнутое начертание шрифта.

Тег <S> определяет зачеркнутое начертание шрифта.

Тег <SUB> отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

Тег <SUP> отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

Данная группа тегов не имеет параметров, они обязательно должны закрываться.

Тег <FONT> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура.

Параметры:

Ø Color - Устанавливает цвет текста.

Ø Face - Определяет гарнитуру шрифта.

Ø Size - Задает размер шрифта в условных единицах.

<font face=" Minion Pro Med, шрифт 2..."> текст написан шрифтом Minion Pro Med</font>

Тег <P> определяет текстовый параграф. Добавляет отступ перед следующей строкой. Имеет единственный параметр align. Этот параметр отвечает за выравнивание текста на странице и может принимать следующие значения: left, center, right, justify.

Тег <BR> устанавливает перевод строки в том месте, где этот тег находится (не парный).

Теги <H1>…<H6> заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <H1> представляет собой наиболее важный заголовок первого уровня, а тег <H6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Имеют единственный параметр align, как и тег <P>, с теми же самыми значениями.

Тег <HR> рисует горизонтальную линию, которая по своему виду зависит от используемых параметров:

Ø Align - Определяет выравнивание линии.

Ø Color - Цвет линии.

Ø Size - Толщина линии.

Ø Width - Ширина линии.

Тег <MARQUEE> создает бегущую строку на странице.

Параметры:

Ø Behavior - Задает тип движения содержимого контейнера <MARQUEE>.

Аргументы:

· Alternate - Контент перемещается между правым и левым краем элемента.

· Scroll - Контент перемещается в направлении, заданным параметром direction, затем скрывается за пределами области, после чего начинает движение с начала.

· Slide - Контент перемещается в направлении, заданным параметром direction, доходит до края области и останавливается.

Ø Direction- Указывает направление движения содержимого контейнера <MARQUEE>.

Аргументы:

· Left - Движение справа налево.

· Right - Движение в правую сторону.

Ø Loop - Задает, сколько раз будет прокручиваться содержимое.

Задание.

Изменить страницу Index.html так, что бы её содержимое совпадало с содержимым, представленным на рисунке 2 (для надписи «Великие поэты России» использовать шрифт Mistral).

Работа с таблицей

Таблицы с невидимой границей используются для верстки Web-страниц, позволяя разделять документ на модульные блоки.

Тег <TABLE> контейнер для элементов, определяющих содержимое таблицы. Внутри <TABLE> допустимо использовать следующие элементы: <CAPTION>, <COL>, <COLGROUP>, <TBODY>, <TD>, <TFOOT>, <TH>, <THEAD> и <TR>.

Параметры:

Ø Align - Определяет выравнивание таблицы.

Ø Background - Задает фоновый рисунок в таблице.

Ø Bgcolor - Цвет фона таблицы.

Ø Border - Толщина рамки в пикселях.

Ø Bordercolor - Цвет рамки.

Ø Cellpadding - Отступ от рамки до содержимого ячейки.

Ø Cellspacing - Расстояние между ячейками.

Ø Height - Высота таблицы.

Ø Width - Ширина таблицы.

Тег <TR> служит контейнером для создания строки таблицы.

Параметры:

Ø Align - Определяет выравнивание содержимого ячеек по горизонтали.

Ø Bgcolor - Цвет фона ячеек.

Ø Bordercolor - Цвет рамки.

Ø Valign - Выравнивание содержимого ячеек по вертикали.

Тег <TD> предназначен для создания одной ячейки таблицы.

Параметры:

Ø Align - Определяет выравнивание содержимого ячейки по горизонтали.

Ø Background - Задает фоновый рисунок в ячейке.

Ø Bgcolor - Цвет фона ячейки.

Ø Bordercolor - Цвет рамки.

Ø Colspan - Объединяет горизонтальные ячейки.

<td colspan="2">содержимое ячейки</td> - данной строкой было объединено 2-е горизонтальные ячейки. Выглядеть это будет так:

содержимое ячейки

Ø Height - Высота ячейки.

Ø Rowspan - Объединяет вертикальные ячейки.

Ø Valign - Выравнивание содержимого ячейки по вертикали.

· Top - Выравнивание содержимого ячейки по верхнему краю строки.

· Middle - Выравнивание по середине.

· Bottom - Выравнивание по нижнему краю.

· Baseline - Выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

Ø Width - Ширина ячейки.

Пример.

Создадим таблицу шириной 200 px и толщенной рамки 1 px, содержащую две строки и три столбца, в которой объединены ячейки верхней строки. Для отображения в браузере ячеек, не содержащих информацию, используются специальные символы « ». Без использования этих символов, отображение таблицы может быть некорректным.

<table width="200px" border="1px">

<tr>

<td colspan="3"> </td>

</tr>

<tr>

<td> </td>

</tr>

</table >

Работа с изображениями.

Тег <IMG> предназначен для отображения на Web-странице изображений в графическом формате GIF, JPEG или PNG.

Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылки. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.

Параметры:

Ø Align - Определяет, как рисунок будет выравниваться по краю и способ обтекания текстом.

· Bottom - Выравнивание нижней границы изображения по окружающему тексту.

· Left - Выравнивает изображение по левому краю окна.

· Middle - Выравнивание середины изображения по базовой линии текущей строки.

· Right - Выравнивает изображение по правому краю окна.

· Top - Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

Ø Alt - Альтернативный текст для изображения (если изображение по каким-либо причинам будет отсутствовать, то вместо него будет выведен текст)

Ø Border - Толщина рамки вокруг изображения.

Ø Height - Высота изображения.

Ø Width - Ширина изображения.

Ø Hspace - Горизонтальный отступ от изображения до окружающего контента.

Ø Vspace - Вертикальный отступ от изображения до окружающего контента.

Ø Lowsrc - Путь к графическому файлу низкого разрешения для предварительного отображения.

Ø Src - Путь к графическому файлу.

Организация ссылок.

Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок (якорей).

Ссылки являются основой гипертекстовых документов и позволяют переходить с одной web-страницы на другую. Особенность ссылки состоит в том, что она может указывать не только на html-файл, но и на файл любого типа, причем этот файл может размешаться совсем на другом сайте. Главное, чтобы к файлу, на который делается ссылка, был доступ. Если ссылка ссылается на часть контента внутри страницы, то она называется якорем.

Параметры:

Ø Href - Задает адрес документа, на который следует перейти.

Ø Name - Устанавливает имя якоря внутри документа. Правильное оформление якоря:

<a href=”#nachalo”> Начало </a>

…

<a name=”#nachalo”> Начало </a>

Ø Target - Имя окна или фрейма, куда браузер будет загружать документ.

· _blank — загружает страницу в новое окно браузера.

· _self — загружает страницу в текущее окно (по умолчанию).

Ø Title - Добавляет всплывающую подсказку к тексту ссылки.

Задание.

· Изменить файл Index.html создав таблицу из 2-х строк и 3-х столбцов (объединив ячейки верхней строки) и поместить содержимое, как представлено на рисунке.

· Создать две странички stix1.html и stix2.html, используя дизайн и структуру Index.html. Содержимым для 2-ой ячейки 2-ой строки страницы stix1.html будет:

Я помню чудное мгновенье:

Передо мной явилась ты,

Как мимолетное виденье,

Как гений чистой красоты

В томленьях грусти безнадежной

В тревогах шумной суеты,

Звучал мне долго голос нежный

И снились милые черты.

Шли годы. Бурь порыв мятежный

Рассеял прежние мечты,

И я забыл твой голос нежный,

Твой небесные черты.

В глуши, во мраке заточенья

Тянулись тихо дни мои

Без божества, без вдохновенья,

Без слез, без жизни, без любви.

Душе настало пробужденье:

И вот опять явилась ты,

Как мимолетное виденье,

Как гений чистой красоты.

И сердце бьется в упоенье,

И для него воскресли вновь

И божество, и вдохновенье,

И жизнь, и слезы, и любовь.

Для страницы stix2.html, соответственно:

Я вас любил: любовь еще, быть может,

В душе моей угасла не совсем;

Но пусть она вас больше не тревожит;

Я не хочу печалить вас ничем.

Я вас любил безмолвно, безнадежно,

То робостью, то ревностью томим;

Я вас любил так искренно, так нежно,

Как дай вам бог любимой быть другим.

· В Index.html первые четверостишия стихов будут являться ссылка для перехода на страницы stix1.html и stix2.html. А на страницах stix1.html и stix2.html «Пушкин А.С.» должен быть ссылкой для возвращения на Index.html.