Операторы для формирования запросов

Лекция № 5-6. Язык разметки гипертекста HTML

С чего же начинать? Во-первых попробуйте сделать следующее...
Откройте Блокнот и скопируйте в него:

Сохраните документ как htm файл (например, 001.htm) и запустите. Вы создали первую свою страницу. Поздравляю!

Теперь расскажу немного о тегах - знаках, распологающихся в скобках. Большинство тегов имеют открывающийся элемент < > и закрывающийся < />. Между ними и находяться коды, которые распознает Обозреватель. HTML-документ всегда начинаться отрывающимся тегом < HTML> и заканчиваться закрывающим < /HTML>. Дальше идет заголовок < HEAD> < /HEAD>. Между этими тегами всегда должна находиться информация о кодировки страницы, в нашем случае < meta http-equiv=" Content-Type" content=" text/html; charset=windows-1251" >, и теги опредиляющие название страницы < TITLE> < /TITLE>. Только теперь между тегами содержимого документа < BODY> < /BODY> можно распологать свою информацию, рисунки, видеофайлы, аудиофайлы...

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

Большинство HTML документов имеют заголовок. Для его создания используют теги < Hn> < /Hn>, где n – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок определенного размера.

< H1> Заголовок< /H1>

< H2> Заголовок< /H2>

< H3> Заголовок< /H3>

< H4> Заголовок< /H4>

< H5> Заголовок< /H5>

< H6> Заголовок< /H6>

Для создания нового абзаца используется тег < P>, а для перехода на новую строчку без создания абзаца - тег < BR>. Эти теги закрывать не обязательно. Конечно, если Вы не используете в теге < P> элемент ALIGN, которым может задаватся выравнивание абзаца:

< P ALIGN=LEFT> По левому краю < /P>

< P ALIGN=CENTER> По центру < /P>

< P ALIGN=RIGHT> По правому краю < /P>

< P ALIGN=JUSTIFY> Текст, находящийся между этими элементами выравнивается по ширине < /P>

Для придания тексту определенного начертания - жирный, курсив, подчеркнутый и т.д., поместите его между соответствующими тегами:

Некоторые теги могут или должны применяться с определенными параметрами, которые указываются в открывающемся элементе тега (можно сразу указывать несколько параметров в одном теге). Например, открывающийся тег < FONT> (закрывающийся тег < /FONT> обязателен) может иметь несколько атрибутов:

SIZE - задает размер текста (по умолчанию размер текста равен 3). Поместив текст между тегами < FONT SIZE=n> < /FONT>, где n - цифровое значение, Вы придадите ему нужный вам размер:

< font size=" 1" > Пример 1 < /font>
< font size=" 2" > Пример 2 < /font>
< font size=" 3" > Пример 3 < /font>
< font size=" 4" > Пример 4 < /font>
< font size=" 5" > Пример 5 < /font>
< font size=" 6" > Пример 6 < /font>

FACE - задает стандартное имя шрифта. Используйте шрифты, которые установлены на компьютере пользователя, в противном случае Обозреватель будет использовать шрифт, определенный по умолчанию (обычно Times New Roman). К стандартным шрифтам можно отнести шрифты, поставляемые с Windows 98, Ms Plus, Ms Office. В самой нижней строке данной таблицы представлено использование семества шрифта - имя каждого шрифта пишется через запятую. Если у пользователя на компьютере нет шрифта Comic Sans MS, Обозреватель подставит следующий в этом списке - Tahoma.

COLOR - задает цвет текста (по умолчанию черный - #000000). Цвет текста может определятся как самим названием, например, red, blue и т.д, так и представлен в шестнадцатиричном виде - #FF0000 (красный) #0000FF (синий).

< font COLOR=" red" > Красный < /font>
< font COLOR=" #FF0000" > Красный < /font>

С помощью элемента STYLE тега < SPAN> (закрывающийся тег < /SPAN> обязателен) можно задавать выделение текста любым цветом:

< SPAN STYLE=" BACKGROUND-COLOR: lightgreen" > Светлозеленый < /SPAN>

< SPAN STYLE=" BACKGROUND-COLOR: yellow" > Желтый < /SPAN>

< SPAN STYLE=" BACKGROUND-COLOR: lightblue" > Светлосиний < /SPAN>

Цвет и фон страницы выбираються по желанию дизайнера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не стремитесь все затемнить, текст удобно читать, если его хорошо видно.

Итак сначала про цвет. Для его вставки в строку с тегом < BODY> Вашего документа нужно добавить параметр BGCOLOR и указать его значение - название цвета или его шестнадцатиричный вид. Данные два примера заполняют страницу документа красным цветом.

< BODY BGCOLOR=" RED" > (использовано название цвета)
< BODY BGCOLOR=" #FF0000" > (использован шестнадцатиричный вид цвета)

Тепер о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так:

< BODY BACKGROUND=" images.gif" >

Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологаеться, что графический файл рассположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif.

Подобное указание путей применяется для разных элементов, например, ссылок, рисунков, файлов.

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

Тег < BODY> может также иметь параметры отступов в документе (определяются числовым значение).

leftmargin - отступ слева
rightmargin - отступ справа
topmargin - отступ сверху
bottom margin - отступ снизу

< BODY leftmargin=" 0", topmargin=" 0", marginwidth=" 0" marginheight=" 0" >

Лекция № 9-10

Пронумерованные списки:
В данном случае Обозреватель автоматически будет проставлять числа перед каждым элементом списка. Начинается пронумерованный список с тэга < OL> и завершается тэгом < /OL>. Например:

Тэг < OL> может иметь следующие параметры:

TYPE - вид счетчика:
A - большие латинские буквы
a - маленькие латинские буквы
I - большие римские цифры
i - маленькие римские цифры
1 - обычные цифры

START - устанавливает число, с которого будет начинатся отсчет.

Следующий пример отображает список, пронумерованный большими латинскими буквами и начинающийся с восьмой цифры:

Непронумерованные списки:
Для непронумерованных списков Обозреватель обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь Обозревателя.

Непронумерованный список начинается открывающимся тэгом < UL> и завершается тэгом < /UL>. Каждый элемент списка начинается с тэга < LI>. Например:

Тэг < UL> может включать параметр TYPE со значениями disc, circle, square.

Данные значения - это внешний вид маркера, который по умолчанию ставится в виде диска, т.е. disc.

Списки определений:
Списки определений имеют следующий вид:

С элементом DL можно использовать атрибут COMPACT для установки более компактного размещения пунктов списка.

< DL COMPACT>

Именно так используется данный атрибут - никакие числовые значения ему не присваиваются.

Лекция № 11-12

Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):

< IMG SRC=" Рисунок " BORDER=" 0 " ALIGN=" Выравнивание " WIDTH=" Ширина " HEIGHT=" Высота " HSPACE=" Отступ_1 " VSPACE=" Отступ_2 " ALT=" Подсказка " NAME=" Имя " LOWSRC=" Рисунок_2 " >

В таблице находится описание каждого параметра данной конструкции:

Пример обычной вставки изображения в электронный документ Вы можете наблюдать ниже. Вместо названия файла я вставил изображения папки. Подведите курсор к рисунку, чтобы увидеть подсказку.

< IMG SRC="

" BORDER=" 0" ALT=" Папка" WIDTH=" 17" HEIGHT=" 16" >

Всегда задавайте размеры картинки в параметрах height и width, резервируя тем самым место в окне Обозревателя еще до загрузки изображения. Параметр alt можно не указывать, но вдруг у человека не загрузилась картинка, он хоть будет знать, что она собой представляет.

Лекция № 13-14

Таблицы.

Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.

Таблица начинается открывающимся тегом < TABLE> и завершается закрывающимся < /TABLE>.
Тег < TABLE> может включать следующие аттрибуты:

Таблица может включать заголовок, который распологается между тегами < CAPTION> < /CAPTION>. Он должен быть непосредственно после тега < TITLE>. К заголовку возможно применение аттрибута ALIGN, определяющего его положение относительно таблицы:

TOP - значение по умолчанию, заголовок над таблицей по центру.
LEFT - заголовок над таблицей слева.
RIGHT - заголовок над таблицей справа.
BOTTOM - заголовок под таблицей по центру.

Теперь о строках и ячейках таблицы. Строки таблицы начинаются открывающимся тэгом < TR> и завершаются закрывающимся < /TR>, а каждая ячейка таблицы начинается тегом < TD> и завершается < /TD>. Данные теги могут иметь такие аттрибуты:

Кроме этого, любая ячейка таблицы может быть определена не тегами < TD> < /TD>, а тегами < TH> < /TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект & nbsp; (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (& nbsp; - обязательно должен набираться строчными буквами и закрыватся точкой с запятой).

И еще - имейте ввиду, что теги, устанавливающие шрифт (< B>, < I>, < FONT SIZE=" n", FONT COLOR=" #FFFFFF"), необходимо повторять для каждой ячейки.

В создании таблиц Вам может помочь данная программа:

Начало формы

Конец формы

Лекция № 15

· Введение. Создание обычной гипперссылки.

· Графический файл в роли ссылки.

· Ссылка на e-mail.

· Закладки.

· Ссылки и цвет.

Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки:

< A HREF=" URL" TARGET=" Окно" TITLE=" Подсказка" > Название ссылки< /A>

Параметры элемента < A> представлены в таблице:

Для примера я создал ссылку на документ 002.htm под рисунком (смотрите ниже). Предпологаеться, что оба документа находяться в одной папке.

Щелкнув на ссылку откроеться другой документ, в данном случае 002.htm.

Гиперссылкой можно сделать и любой графический файл, поддерживающийся Обозревателем (традиционно - *.gif, *.jpg.). Для этого вместо названия ссылки нужно прописать графический элемент (Параметр TITLE должен быть только у рисунка):

< a href=" URL" target=" Окно" >
< img border=" 0" src=" Рисунок" width=" Ширина" height=" Высота" TITLE=" Подсказка>
< /a>

Вы можете также создать ссылку на e-mail, в это случае нужно в качестве URL’a прописать следующее:
mailto: адрес электронной почты
Например:
< a href=" mailto: lenin@zeos.net" > Мое мыло< /a>

Щелкнув на такую ссылку, откроется окно почтовой программы пользователя с уже заполнеными полями. Останется только написать письмо и отправить.

Иногда возникает вопрос: как сделать ссылку на определенное место в том же или в другом документе? Чтобы нажав по какой-нибудь ссылке можно было попасть в определенное место данного документа. Вот в этом нам и помогут закладки.

Ссылка на закладку в том же документе имеет следующий вид:
< a href=" #Имя закладки" > Название раздела< /a>

А так выглядит ссылка на закладку в другом документе:
< a href=" Имя документа#Имя закладки" > Название раздела< /a>

Сама закладка будет такой:
< A NAME=" Имя закладки" > < /a>

Щелкнув на Название раздела пользователь будет попадать на определенную Вами закладку. Вверху данной страницы находится содержание, оформленное как ссылки на определенные закладки, находящиеся в этом же документе.

Для того, чтобы при наведении на ссылку курсором и при клике она меняла свой цвет в тег < BODY> нужно добавить еще несколько параметров.

text - цвет текста.
link - цвет ссылки.
vlink - цвет пройденой ссылки.
alink - цвет активной ссылки, когда подводиться к ней курсор.

< BODY text=" black" link=" blue" vlink=" purple" alink=" red" >

Данные атрибуты определяют свойства для всего документа. Поместив такой код в HTML страницу, уже не надо будет назначать каждый раз цвет шрифту, т.к везде он будет таким, каким определен в теге < BODY>.