Основные элементы разработки WEB

1. Язык html

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

Сегодня мы работаем в соответствии со стандартом HTML 3.2 и постепенно переходим на стандарт 4.0. Но здесь есть проблема - некоторые команды выполняются только в "Браузере" Netscape Communicator, но не выполняются в Internet Explorer, некоторые наоборот. В общем, "Гранды" между собой еще не договорились. Это - естественная болезнь роста. Новые команды и параметры появляются быстро, соответственно быстро появляются новые версии браузеров, все торопятся, и, естественно, в новых командах есть различия.

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

2. Язык JavaScript

JavaScript - это развивающийся язык описания сценариев, с помошью которого можно расширять возможности HTML - страниц. JavaScript - это простой интерпретируемый язык программирования. Он разрабатывается фирмой Netscape Communication и постоянно расширяется. JavaScript для клиента - это код JavaScript, встроенный в HTML страницы. Он позволяет использовать в Интернет выполняемое содержимое. Вариант JavaScript для сервера представляет собой альтернативу сценариям CGI, и даже обеспечивает более широкие возможности.

3. Язык Java

Java - это обьектно-ориентированный язык программирования, разработанный для создания переносимых программ между различными платформами и операционными системами. Разработанный Syn Microsystem, Java является продолжением языка C++ и содержит дополнительные возможности, делающие его очень удобным для программирования на Интернет. Специальные программы Java, называемые апплетами, можно выполнять на Web - страницах.

Java - очень молодой и очень перспективный язык программирования. Java - это профессия и очень перспективная. По мере роста числа пользователей Интернета в России будет расти и потребность в программах на Java. Кроме того, Java - это не только язык программирования, это целая идеология, позволяющая разрабатывать переносимые программируемые системы.

4. CGI

CGI - это стандартный шлюзовой интерфейс (Common Gateway Interface) для запуска внешних программ под управлением сервера WWW. Обратите внимание: CGI создается для сервера и Вы , не имея сервера в своем расположении, на нем писать не будете, но его знание Вам будет полезно для понимания обработки написанных Вами форм.

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

Для примера рассмотрим один из наиболее распространенных сценариев работы с программами CGI. В документе HTML, который создается для ввода информации, предназначенной для обработки, размещается форма ввода. Эта форма состоит из необходимых органов управления: полей редактирования текстовой информации, переключателей, списков и т. д. Каждому органу управления присваивается произвольное имя. Кроме того, в этой форме должна быть кнопка, которую следует нажать после заполнения формы.

Когда пользователь заполняет форму и нажимает кнопку, данные передаются приложению CGI, путь к которому задается в заголовке формы. Это приложение получает через протокол HTTP данные из полей формы в виде пар значений: имя поля/значение.

После обработки полученных данных приложение CGI создает документ HTML и записывает его в стандартное устройство вывода stdout. Этот документ передается отдаленному пользователю. Приложение CGI является программой, поэтому ее следует оттранслировать для той операционной системы, под управлением которой работает сервер WWW. Иногда удобно создавать программы CGI с помощью интерпретаторов таких, как Perl или язык пакетных заданий. Можно воспользоваться языком программирования C.

Основные понятия HTML:

ТЭГ - единица HTML кода, направляющая браузеру определенную команду. Тэги бывают начальными (открывающими) и конечными (закрывающими). Рассмотрим пример:

<html> - открывающий тэг, который можно закрыть с помощью тэга </html>. Существуют и тэги, которые не требуют закрытия, например <br>.

ЭЛЕМЕНТ - это все что находится между открывающим и закрывающим тэгами, например элементом будет называться все что находится между тегами <font></font>.

ПАРАМЕТР - "тэг в тэге". Например делать ссылку следует с помощью тега <а>, но нам следует указать адрес, на который она будет ссылаться. Это делается так: <а href="http://mik-on.narod.ru/">текст ссылки</а>. В данном случае href="http://mik-on.narod.ru/" - параметр, с помощью которого указывается адрес перехода, в данном случае - это адрес нашего сайта.

Окроем блокнот (notepad) и скопируем туда следующий текст:

<html> <head> <title>Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> Добро пожаловать! :) </body> </html> А теперь сохраним этот документ, присвоив ему имя index.htm. index.html Теперь откроем Internet Explore. Файл - Открыть - кнопка Обзор - Наш документ (index.html). Если мы чего-то изменили в нашем *.html документе (в блокноте), то, чтобы посмотреть как это выглядит в Internet Explorer, надо не забывать нажимать в IE (Internet Explorer) кнопку ОБНОВИТЬ (тоже самое касается других броузеров. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ. Посмотрим теперь, что у нас получилось, и разберемся как оно так получилось.

<html> <head> <title>Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> Добро пожаловать! :) </body> </html> (.) Первое, что нам нужно усвоить, что html это то, что мы сейчас изучаем. Второе, что нам нужно усвоить: Html не является языком программирования, он предназначен для разметки текстовых документов (т.е. для форматирования текста). То, как будет выглядеть ваш текст, определяют метки (tags или тэг). Пример тэга: <br> (перенос текста на другую строку, что-то вроде Enter

<html> Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий: </html> И так всегда по умолчанию. Некоторые тэги, вроде <br>, не требуют закрывающего тэга.

Дополнительный параметр позволяет расширить вохможности тэга <BR>.

<BR CLEAR=left|right|all>

Данный параметр позволяет выполнить не просто перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна броузера.

Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг <BR> для смещения текста ниже рисунка:

<p> Как вы можете видеть, данная схема демонстрирует связь<BR CLEAR=left> <img src="my.jpg" align=baseline> Мастер/Деталь </p>

Неразрывная строка <NOBR>

Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее

тэгами <NOBR> и </NOBR>. В этом случае броузер не будет переносить строку даже если она выходит за нраницы экрана; вместо этого броузер позволит горизонтально прокручивать окно. Например:

<NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR>

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

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг <WBR> в это место.

Например:

<NOBR> Данная строка является самой длинной строкой документа,<WBR> которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Цитата <BLOCKQUOTE>

Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например:

На открытии данной конференции глава представительства произнес: <P> <BLOCKQUOTE> Сегодня один из величайших дней для нашей компании. <BR> Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз. </BLOCKQUOTE>

При отображении броузером данный текст будет выглядеть так: На открытии данной конференции глава представительства произнес:

Сегодня один из величайших дней для нашей компании. Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз.

<!-- ... --> - это ремарки, на которые браузер не обращает внимания, зато нам удобнее - этими метки придуманы для удобства, они помогают нам разобраться в нашем документе, представьте, что документ состоит не из 5 строчек, а из множества.

<html> <head> <title>Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> Добро пожаловать! :) </body> </html> (.) <head> </head> - голова документа <body> </body> - тело документа

Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации Например <title> - заголовок. Зачем он? Откройте IE (Internet Explore) с нашим документом и устремите свой взгляд выше всех командных строк (на заголовок окна)

Все тэги, расположенные между <body> </body> - непосредственное содержание документа. Следущие несколько уроков будут посвящены именно этим тэгам: мы узнаем как менять цвет текста, фона, как делать текст крупнее-мельче, поговорим о картинках, таблицах и многом другом.

На этом занятии рассмотри возможности работы с цветами. Например белый цвет - ffffff Вернемся к нашей страничке. Давайте окрасим слова Добро пожаловать в красный. <font color="#CC0000">Добро пожаловать! :)</font> Теперь попробуйте вместо СС0000 поподставлять другие значения цветов.

<html> <head> <title>Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать! :) </font> </body> </html> (.)

Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже. Как же еще задавать цвета в документе? - вспомним об открывающем теге <body>: <body text="#336699"> Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font> (если цвет в <body> не задавать, то по умолчанию он будет черным).

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699"> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font> :) </body> </html> (.)

Со цветами для текста мы разобрались, теперь подумаем о фоне.

Примечание. В новых версиях броузеров возможно указывать цвет словарным обозначением (color =”red”, color =”white” и т.п.).

Цвет фона устанавливается в уже нам знакомом тэге <body>: <body bgcolor="#000000"> Это черный цвет, вы же свой документ можете раскрасить любым другим (если цвет в <body> не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше прописывайте цвет фона в body).

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font> :) </body> </html>

Обратите внимание: мы одновременно можем прописать в теге <body> и цвет текста в документе, и цвет фона. <body text="#336699 bgcolor="#000000"> Параграфы Параграфы вводятся тэгом: <p></p> С помощью параграфов мы можем центрировать текст: <p align="center">текст</p> С помощью параграфов мы можем выровнять текст по левому краю: <p align="left">текст</p> Или по правому краю документа: <p align="right">текст</p> Теперь введем параграфы в наш документ и посмотрим наглядно, что получится, попробуйте подставить в параграф другие параметры со значениями Left или Right).

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <p align="center"> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font> :) </p> </body> </html>

Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что к параграфу уже не нужен тэг <br> для переноса строки, т.к. перенос задается по умолчанию. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align="center">: <center>текст</center>

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <center> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font> :) </center> </body> </html> (.)

У тэга <p> не существует еще один атрибут: <p align="justify">текст</p> Он выравнивает текст по обоим краям документа

Работа со шрифтами

В этой главе мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга <font></font>. Итак, мы уже немного умеем форматировать текст, но посмотрите на наш документ. Мне кажется, что фраза "Здравствуйте, это моя первая страница" так и просится, чтобы ее выделили. Для этого можно использовать заголовки:

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>

<H6> текст </H6>

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

Заголовки предназначены для выделения небольшой части текста (строки, фразы), Но, если вы хотите выделить большой фрагмент текста, или только одно слово, при этом без переноса строки, то как быть? С заголовками такое не пройдет, поэтому вспомним о тэге <font></font>:

<font size="+4"> текст </font> <font size="+3"> текст </font> <font size="+2"> текст </font> <font size="+1"> текст </font> <font size="+0"> текст </font> <font size="-1"> текст </font> <font size="-2"> текст </font>

Итак, параметр size задает размер шрифта, но, в отличие от заголовков, текст не выделяется жирным шрифтом (о курсиве, жирном шрифте и т.п поговорим позже) и нет принудительного переноса.

Теперь настала пора поговорить о том как делается курсив, подчеркнутый текст, полужирный текст и фиксированный текст: <b> Полужирный текст </b> <i> Наклонный текст (курсив) </i> <u> Подчеркнутый текст </u> Теперь пара строк о фиксированом шрифте. Что это за шрифт? Это шрифт с символами одинаковой ширины, оттого и зовется фиксированным. А тэг для него следующий: <tt> fixed - фиксированный шрифт </tt> Тэг <pre>

<pre> текст (куча пробелов) текст </pre>

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

Запомните, к одному фрагменту текста может применяться сразу несколько тэгов:

<tt><b><i> текст </i></b></tt>

В нашем примере текст фиксированный, полужирный и курсивный.

Еще один атрибуте тэга <font>:

<font face="ARIAL"> текст (шрифт Arial)</font> (.)

С помощью атрибута face в нашем примере задан шрифт Arial. Таким образом вы можете задать и какой-нибудь экзотический шрифт для своей страницы, но это немного рискованно, т.к. у вашего посетителя может не оказаться такого шрифта, поэтому все же лучше задавайте стандартные (Arial (без надсечек), Times Roman (пропорциональный), Courier (равноширинный) и другие).

Применение рисунков на странице

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

Для включения картинки делаем следующее:

<img src="my.jpg">

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так:

<img src="my/my.jpg">

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой: <img src="../my.jpg">

Если картинка лежит на другом сайте, то путь прописывается полностью: <img src="http://www.homepage.ru/my/my.jpg">

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

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <center> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </center> <p align="justify"> <img src="primtocodephoto.gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :)</b> </p> </body> </html>

Посмотрите, что у нас получилось. Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.

Итак, мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Например у тэга <p> - <p align="justify">. Параметр align есть и у картинок: <img src="pr1.png" align="left">

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наооборот (картинка справа, текст слева) надо прописать right:

<img src="pr1.png" align="right">

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - <img src="pr1.png" align="bottom"> (2) - <img src="pr1.png" align="middle"> (3) - <img src="pr1.png" align="top">

Кроме параметра align существует еще несколько параметров:

(1) - <img src="pr1.png" Vspace="10"> (2) - <img src="pr1.png" Hspace="30"> (3) - <img src="pr1.png" alt="моя фотография"> (4) - <img src="pr1.png" width="100"> (5) - <img src="pr1.png" height="200"> (6) - <img src="pr1.png" border="5">

Теперь последуют обяснения по пунктам. (1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 10 пикселям. (2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам). (3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась. (4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире). (5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. (6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Все параметры могут употребляться одновременно друг с другом. Вот мы узнали о том, как расположить текст относительно картинки (+ еще несколько нужных параметров), но мы не говорили как расположить саму картинку в центре экрана (справа, слева). Здесь все очень просто, картинки как и текст можно расположить при помощи <p></p>, это наглядно представлено в нашем примере. Картинку можно сделать фоном документа. Это прописывается в открывающем тэге боди:

<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg">

Параметр Background и указывет на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и документ. Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем.

Ссылки

Теперь пора поговорить о ссылках. Наша страничка может состоять из нескольких документов.

Один из них главный (index.html или main.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете.

Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.

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

Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточное знание. Пусть prf.html - документ с вашими фотографиями. Тогда мы можем фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:

<a href="prf.html">посмотреть мои фотографии</a>

Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же как в случае с картинками:

(1) - <a href="prf.html">мои фотографии</a> (2) - <a href="photos/prf.html">мои фотографии</a> (3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ. Как видите все просто. Но есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать, а иначе по умолчанию он будет просто безобразным, поэтому вспомним об открывающем тэге боди:

<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

Разберемся что к чему: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, также не карается законом, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой). Итак пропишем цвета для ссылки и саму ссылку в нашем документе:

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <center> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </center> <p align="justify"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. </p> </body> </html>

Особый вид ссылки - это ссылка на ваш почтовый ящик. Прописывается так: <a href="mailto:pochta@mail.ru"> pochta@mail.ru - пишите письма </a> Запомните это и не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик - другое (да, но цвета всех ссылок в документе одинаковые:).

У mailto есть еще некоторые опции:

- ?subject=Тема пиcьма - &Body=Текст вашего сообщения - &cc=copy@mail.ru,copy2@mail.ru (копии письма через запятую) - &bcc=hidden_copy@mail.ru,hidden_copy2@mail.ru (скрытые копии письма через запятую)

Все вместе это будет выглядеть так:

<a href="mailto:pochta@mail.ru?subject=Hello &Body=text&cc=copy@mail.ru &bcc=hidden_copy@mail.ru"> pochta@mail.ru </a>

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

Ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка:

<a href="prf.html"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> </a>

Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку primtocodephoto.gif:

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <center> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </center> <p align="justify"> <a href="prf.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. </p> </body> </html>

Теперь посмотрите в Explorer, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание, вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0"

<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" border="0">

Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) Как это делается? Да все по тому же принципу: <a href="http://www.melody.ru/music.mp3"> скачать песню </a> Если адрес указан таким способом: <a href="http://www.melody.ru/"> музыкальный сайт </a> То это означает, что в указаном каталоге есть файл вроде index.html, который загрузится по умолчанию. Но поговорим особо о картинках, многие из вас, наверное, сталкивались с таким явлением: когда жмешь на маленькую картинку, то загружается большая в том же или в новом окне. Как это делается? Тут никаких хитростей: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg): <a href="big.jpg"> <img src="small.jpg"> </a> В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга <a></a> есть параметр target:

<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a>

Итак, target="_blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне броузера (Explorer`а).

Гиперссылки задаются элементом A. Параметры: href - определяет находящийся между начальным и конечным тэгами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного параметра. Возможные значения:

1. http://... - создает ссылку на www- документ;

2. ftp://... - создает ссылку на ftp-сайт или файл;

3. mailto:... - запускает почтовую программу, поле "кому" уже заполнено;

4. news:... - ссылка на конференцию новостей;

5. telnet:... - создает ссылку на telnet-сессию с удаленной машиной;

6. wais://... - создает ссылку на WAIS - сервер;

7. gopher://... - создает ссылку на Gopher - сервер.

Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. Например, линк

<A HREF="docs/title.html"> Документация </A> будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).

name - помечает находящуюся между начальным и конечным тэгами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово-указатель, уникальное для данного документа. Например:

<A NAME="part">Раздел1</A>.

Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, линк

<A HREF="document.html#part">Раздел1</A> отправит вас в раздел "part" файла document.html, а линк

<A HREF="#bottom">В конец документа</A> - в раздел "bottom" текущего документа.

TARGET - определяет окно(фрейм), на которое указывает гипертекстовая ссылка. Этот параметр используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:

_self - указывает, что определенный в параметре HREF документ должен отображаться в текущем фрейме; _parent - указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм; _top - указывает, что документ должен отображаться в окне-родителе всей текущей фрэймовой структуры; _blank - указывает, что документ должен отображаться в новом окне.

Списки

Что такое списки? Это лучше демонстрировать на наглядном примере:

Текст один

Текст другой

Текст сякой

Текст эдакий

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

<li>Текст один</li> <li>Текст другой</li> <li>Текст сякой</li> <li>Текст эдакий</li>

Т.е. списки задаются тэгом <li></li>. Возникает вопрос: можно ли помимо закрашенного кружочка прописать еще чего-нибудь подобное?

● По умолчанию - (1)

○Полый кружок - (2)

□ Не будь таким квадратным - (3)

У тэга <li> есть параметр type:

В случае (1) - <li type="disk">, в случае (2) - <li type="circle">, в случае (3) . <li type="square”>

Это один из вариантов. Если вы пользовались текстовыми редакторами (допустим Вордом), то бы знаете, что такое Табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается в право). Похожая фунция есть и в хтмл: <ul>Ваш текст</ul> Чтобы отступ (табуляция) был больше надо вкладывать тэг <ul> в самого себя: <ul><ul>Два отступа</ul></ul> <ul><ul><ul>Три отступа</ul></ul></ul> Пронумерованные списки В пронумерованном списке броузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны. Пронумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>. Например:

<OL> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </OL>

1. Программирование

2. Алгоритмизация

3. Проектирование

Тэг <OL> может иметь параметры:

<OL TYPE=A|a|I|i|1 START=n>

где: TYPE

Вид счетчика:

A - большие латинские буквы (A,B,C...) a - маленькие латинские буквы (a,b,c...) I - большие римские цифры (I,II,III...) i - маленькие римские цифры (i,ii,iii...) 1 - обычные цифры (1,2,3...)

START=n

Число, с которого начинается отсчет

Например:

<OL TYPE=I START=15> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </OL>

15. Программирование

16. Алгоритмизация

17. Проектирование

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

<UL> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </UL>

● Программирование

● Алгоритмизация

● Проектирование

Тэг <UL> может иметь параметр:

<UL TYPE=disc|circle|square>

Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:

<UL TYPE=square> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </UL>

■ Программирование

■ Алгоритмизация

■ Проектирование Вложенные списки Дадим пример вложенных списков:

<HTML> <HEAD> <TITLE> Список сотрудников </TITLE> </HEAD> <BODY> <H2> Список сотрудников нашей фирмы </H2> <H3> Составлено : 30 июля 2004 года </H3> Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <P> Список может быть использован только в служебных целях. <P> <OL> <LI> Дирекция <UL> <LI> Иванов И.И. <LI> Петров К.В. </UL> <LI> Отдел маркетинга <UL> <LI> Варшавская Е.Л. <LI> Самсонов Д.М. </UL> </OL> </BODY> </HTML>

Вот, что вы увидите на экране броузера: