Учебная работа. Контрольная работа: Создание Web сайта на языке html

(Пока оценок нет)

Загрузка...

Учебная работа. Контрольная работа: Создание Web сайта на языке html

Оглавление

Введение

1. Главные сведения

1.1 О языке html

1.2 Создание web веб-сайта

1.3 Главные положения

1.4 структура документа

1.5 Тэги тела документа

1.6 Перечень базисных тэгов html

2. Доп сведения

2.1 Тэги списков

2.2 Гипертекстовые ссылки

2.3 Графика снутри документа

2.4 Добавление стилей в документ

2.5 Особые тэги html

2.6 Html формы

2.7 html фреймы

2.8 Html таблицы

2.9 Оптимизация графики для web

2.10 Базы css

3. Описание сотворения веб-сайта

3.1 Подготовка

3.2 Создание главной странички

3.3 Создание 2-ой странички

3.4 Создание странички с описанием городка

3.5 Страничка с фото

3.6 Страничка с программками

3.7 Страничка с благодарностями

Заключение

Перечень использованной литературы

Введение

Эта дипломная работа посвящена языку html. При помощи этого языка создаются файлы с расширением *.htmи *.html, являющиеся Web-страницами. Из их состоят веб-сайты сети Веб.

К дипломной работе прикреплён веб-сайт, как пример того, что можно сделать с помощью языка html.

Вся работа разбита на 3 раздела. 1-ый раздел на сто процентов посвящён описанию главных тэгов html. В нём вы найдёте всю нужную информацию о том, как создавать обыкновенные Web-страницы. Во 2-м разделе имеются сведения о том, как сделать лучше наружный вид документа и встроить в него доп способности. А 3-ий раздел содержит описание того, как создавался веб-сайт, прикреплённый к данной нам дипломной работе. В нём тщательно описаны полтора месяца нелёгкой работы по созданию веб-сайта, поведано о разных ошибках при разработке и их исправлении, о возникавших затруднениях и способах их устранения.

Опосля чтения данной нам работы хоть какой человек, даже совершенно незнакомый с программированием, сумеет осознать базы программирования на html. А понимающие, может быть, отыщут чего-нибудть новое себе.

1.
Главные сведения

1.1 О языке

html

Hyper Text Markup Language (HTML) является обычным языком, созданным для сотворения гипертекстовых документов в среде WEB. HTML-документы могут просматриваться разными типами WEB-броузеров. Когда документ сотворен с внедрением HTML, WEB-броузер может интерпретировать html для выделения разных частей документа и первичной их обработки. Внедрение html дозволяет форматировать документы для их представления с внедрением шрифтов, линий и остальных графических частей на хоть какой системе, их разглядывающей.

Большая часть документов имеют обычные элементы, такие, как заголовок, параграфы либо списки. Используя тэги html, вы сможете обозначать данные элементы, обеспечивая WEB-броузеры малой информацией для отображения данных частей, сохраняя в целом общую структуру и информационную полноту документов. Все что нужно, чтоб прочесть html-документ — это WEB-броузер, который интерпретирует тэги html и воспроизводит на дисплее документ в виде, который ему присваивает создатель.

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

html-тэги могут быть условно разбиты на две группы:

1. Тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.

2. Тэги, описывающие общие характеристики документа, такие как заголовок либо создатель документа.

Запомните, что основное преимущество html состоит в том, что ваш документ быть может просмотрен на WEB-броузерах разных типов и на разных платформах.

1.2
Создание

Webсайта

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

к примеру, html редакторы, такие, как «Netscape Navigator Gold» компании Netscape, разрешают создавать документы графически с внедрением технологии WYSIWYG (What You See Is What You Get). С иной стороны, большая часть обычных средств для сотворения документов имеют конвертеры, дозволяющие преобразовывать документы к формату html.

1.3 Главные положения

Все тэги HTML начинаются с «<» (левой угловой скобки) и завершаются эмблемой «>» (правой угловой скобки). Как правило, существует стартовый тэг и оканчивающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся снутри стартового и оканчивающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

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

Некие тэги, такие, как <P> (тэг, определяющий абзац), не требуют оканчивающего тэга, но его внедрение присваивает начальному тексту документа усовершенствованную читаемость и структурируемость.

html не реагирует на регистр знаков, описывающих тэг, и приведенный ранее пример может смотреться последующим образом:

<title> Заголовок документа </title>

внимание! Доп пробелы, знаки табуляции и возврата каретки, добавленные в начальный текст HTML-документа для его наилучшей читаемости, будут проигнорированы WEB-броузером при интерпретации документа. html-документ может включать вышеперечисленные элементы, лишь если они помещены вовнутрь тэгов <PRE> и </PRE>. Наиболее тщательно о тэгах <PRE> будет написано ниже.

1.4 структура документа

Когда WEB-броузер получает документ, он описывает, как документ должен быть интерпретирован. Самый 1-ый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг докладывает WEB-броузеру, что ваш документ написан с внедрением HTML. Малый HTML-документ будет смотреться так:

<HTML>

…тело документа…

</html>

Заголовочная часть документа <HEAD>. Тэг заголовочной части документа должен быть применен сходу опосля тэга <html> и наиболее нигде в теле документа. Данный тэг представляет собой общее описание документа. Опасайтесь располагать какой-нибудь текст снутри тэга <HEAD>. Стартовый тэг <HEAD> помещается конкретно перед тэгом <TITLE> и иными тэгами, описывающими документ, а оканчивающий тэг </HEAD> располагается сходу опосля окончания описания документа. к примеру:

<html>

<HEAD>

<TITLE>Перечень служащих</TITLE>

</HEAD>

…

внимание! На техническом уровне, стартовые и оканчивающие тэги типа <html>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их употреблять, так как внедрение данных тэгов дозволяет WEB-броузеру уверенно поделить заголовочную часть документа и конкретно смысловую часть.

Заголовок документа <TITLE>. Большая часть WEB-броузеров показывают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, располагается снутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не возникает при отображении самого документа в окне.

Комменты. Как хоть какой язык, HTML дозволяет вставлять в тело документа комменты, которые сохраняются при передаче документа по сети, но не показываются броузером. Синтаксис комментария:

<!—Это комментарий—>

Комменты могут встречаться в документе где угодно и в любом количестве.

1.5 Тэги тела документа

Тэги тела документа идентифицируют отображаемые в окне составляющие html-документа. Тело документа может содержать ссылки на остальные документы, текст и другую форматированную информацию.

Тело документа <BODY>. тело документа обязано находиться меж тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx>. Когда пишется html-документ, текст структурно делится на просто текст, заглавия частей текста, заглавия наиболее высочайшего уровня и т.д. 1-ый уровень заголовков (самый большенный) обозначается цифрой 1, последующий — 2, и т.д. Большая часть броузеров поддерживает интерпретацию 6 уровней заголовков, определяя любому из их свой стиль. Заглавия выше шестого уровня не являются эталоном и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак «1». Синтаксис заголовка уровня 1 последующий:

<H1>

Заголовок первого уровня

</H1>

Заглавия другого уровня могут быть представлены в общем случае так:

<Hx>

Заголовок x-го уровня

</Hx>,

где x — цифра от 1 до 6, определяющая уровень заголовка.

Тэг абзаца <P>.

В отличии от большинства текстовых микропроцессоров, в html-документе обычно игнорируются знаки возврата каретки. Физический разрыв абзаца может находиться в любом месте начального текста документа (для удобства его читаемости). Но Броузер делит абзацы лишь при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет смотреться как один большенный абзац.

Доп характеристики тэга <P>:

<PALIGN=left|center|right>, разрешают сглаживать абзац по левому краю, центру и правому краю соответственно.

Центрирование частей документа. Вы сможете центрировать все элементы документа в окне броузера. Для этого можно употреблять тэг <CENTER>.

Все элементы меж тэгами <CENTER> и </CENTER> будут находиться в центре окна.

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

а) перевод строчки

б) знаки табуляции (сдвиг на 8 знаков на Право)

в) диспропорциональный шрифт, устанавливаемый броузером.

Внедрение тэгов, определяющих формат абзаца, таковых как <Hx> либо <ADDRESS>, будет игнорироваться броузером при помещении их меж тэгами <PRE> и </PRE>.

Дальше идет несколько наиболее подробный пример, собранный из прошлых:

<html>

<HEAD>

<TITLE> Списоксотрудников</TITLE>

</HEAD>

<BODY>

<H2> Перечень служащих нашей конторы </H2>

<H3> Составлено: 30 июля 1996 года </H3>

Данный перечень содержит фамилии, имена и отчества

всех служащих нашей компании. <P>

Перечень быть может применен лишь в служебных целях. <P>

</BODY>

</html>

Вот, что вы увидите на дисплее броузера:

Перечень служащих нашей конторы

Составлено: 30 июля 1996 года

Данный перечень содержит фамилии, имена и отчества всех служащих нашей компании.

Перечень быть может применен лишь в служебных целях.

внимание! Заголовок «Перечень служащих» не отображен броузером как часть документа. Он покажется в заголовке окна броузера.

разрыв строчки <BR>. Тэг <BR> извещает броузер о разрыве строчки. Лучший пример использования данного тэга — форматированный адресок либо неважно какая иная последовательность строк, где Броузер должен показывать их одну под иной. К примеру:

Алексей Ярцев<BR> Дмитровское шоссе,<BR> д.9Б, кабинет 326<BR>

Доп параметр дозволяет расширить способности тэга <BR>.

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

<p> Как вы сможете созидать, данная схема показывает связь<BR CLEAR=left> <img src=»HTTP://www.softexpress.com/images/schema1.gif» align=baseline> Мастер/Деталь </p>.

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

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

Данная строчка является самой длинноватой строчкой документа,

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

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

При отображении броузером данный текст будет смотреться так:

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

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

1.6 Перечень базисных тэгов
HTML

Таблица №1: Главные тэги

Стартовый
Оканчивающий
Описание

<html>
</HTML>
Обозначение HTML-документа

<HEAD>
</HEAD>
Заголовочная часть документа

<TITLE>
</TITLE>
Заголовок документа

<BODY>
</BODY>
тело документа

<H1>
</H1>
Заголовок абзаца первого уровня

<H2>
</H2>
Заголовок абзаца второго уровня

<H3>
</H3>
Заголовок абзаца третьего уровня

<H4>
</H4>
Заголовок абзаца 4-ого уровня

<H5>
</H5>
Заголовок абзаца 5-ого уровня

<H6>
</H6>
Заголовок абзаца шестого уровня

<P>
</P>
Абзац

<PRE>
</PRE>
Форматированный текст

<BR>
Перевод строчки без конца абзаца

<BLOCKQUOTE>
</BLOCKQUOTE>
Цитата

Описанные ранее тэги — это все, что нужно для вас для того, чтоб начать работать с HTML.

С внедрением обрисованных тэгов вы сможете сделать обычный html-документ. Но последующие разделы дозволят для вас значительно сделать лучше наружный вид ваших документов и обрисуют новейшие способности HTML.

2.
Доп сведения

2.1 Тэги списков

Существует три главных вида списков в html-документе:

а) пронумерованный

б) непронумерованный

в) перечень описаний

Вы сможете создавать вложенные списки, используя разные тэги списков либо повторяя одни снутри остальных. Для этого просто нужно расположить одну пару тэгов (стартовый и оканчивающий) снутри иной. Будут ли элементы вложенного перечня иметь те же маркеры, обозначающие элемент перечня — зависит от броузера. Наиболее тщательно смотри в разделе «Вложенные списки».

Пронумерованные списки. В пронумерованном перечне Броузер автоматом вставляет номера частей по порядку. Это значит, что если вы удалите один либо несколько частей пронумерованного перечня, то другие номера автоматом будут пересчитаны.

Пронумерованный перечень начинается стартовым тэгом <OL> и заканчивается тэгом </OL>. Любой элемент перечня начинается с тэга <LI>. к примеру:

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

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

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

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

Тэг <OL> может иметь характеристики:

где:

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>

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

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

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

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

Пронумерованный перечень начинается стартовым тэгом <UL> и заканчивается тэгом </UL>. Любой элемент перечня начинается с тэга <LI>. к примеру:

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

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

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

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

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

Тип тэга <UL> описывает наружный вид маркера как вид по дефлоту (disc), круглый (circle) либо квадратный (square). к примеру:

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

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

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

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

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

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

Вот, что вы увидите на дисплее броузера:

Перечень служащих нашей конторы

Составлено : 30 июля 1996 года

Данный перечень содержит фамилии, имена и отчества всех служащих нашей компании.

Перечень быть может применен лишь в служебных целях.

1. Дирекция

o Иванов И.И.

o Петров К.В.

2. Отдел маркетинга

o Варшавская Е.Л.

o Самсонов Д.М.

Элемент перечня <Li>.

Тэг <LI> может иметь характеристики:

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

TYPE

Вид маркера (см. <UL>) либо счетчика (см.OL)

VALUE=n

к примеру:

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

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

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

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

Перечень определений.

Перечень определений начинается с тэга <DL> и заканчивается тэгом </DL>. Данный перечень служит для создание списков типа «термин«-«описание». Любой термин начинается тэгом <DT> , а описание — тэгом <DD>. к примеру:

<DL> <DT> <B> Отдел маркетинга </B> <DD> Данный отдел занимается продвижением товаров и услуг <DT> <B> Денежный отдел </B> <DD> Данный отдел занимается всеми финансовыми операциями <DT> <B> Отдел кадров </B> <DD> Данный отдел занимается учетом и набором новейших служащих конторы, распределением отпусков, отслеживанием больничных листов и т.д. </DL>

Отдел маркетинга

Данный отдел занимается продвижением товаров и услуг

Денежный отдел

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

Отдел кадров

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

2.2
Гипертекстовые

ссылки

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

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

внимание! Вы сможете употреблять ссылки как для перемещения по документу, так и для перемещения от 1-го документа к другому. Но html не поддерживает возврат на предшествующую ссылку, если перемещение происходило снутри документа. Если вы используете ссылки снутри документа, а потом нажимаете на кнопку Back, то вы не перейдете на предшествующую ссылку, а вернетесь на ту часть документа, которую вы просматривали ранее.

URL. html употребляет URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы снутри html-документа. 1-ая часть URL (до двоеточия) обрисовывает способ доступа либо сетевой сервис. Иная часть URL (опосля двоеточия) интерпретируется зависимо от способа доступа. Обычно, два прямых слэша опосля двоеточия обозначают имя машинки:

method://machine-name/path/foo.html

Последующий пример представляет собой вызов html-документа index.html с сервера www.softexpress.com с внедрением HTTP протокола:

http://www.softexpress.com/index.html

Uniform Resource Locator имеетследующийформат:

method://servername:port/pathname#anchor

ОпишемкаждыйизкомпонентовURL:

METHOD. имя операции, которая будет производиться при интерпретации данного URL. Более нередко применяемые способы:

file:

чтение файла с локального диска. имя файла интерпретируется для локальной машинки юзера. Данный способ употребляется для отображения какого-нибудь файла, находящегося на машине юзера. к примеру: file:/home/alex/index.html — показывает файл index.html из каталога /home/alex на пользовательской машине

HTTP:

доступ к WEB-странице в сети с внедрением HTTP-протокола. (Это более нередко применяемый способ доступа к какому-либо html-документу в сети). к примеру: http://www.softexpress.com/ — доступ к Home-странице компании SoftExpress

ftp:

запрос файла с анонимного FTP-сервера. к примеру: ftp://hostname/directory/filename

mailto:

активизирует почтовую сессию с обозначенным юзером и хостом. к примеру: mailto:info@softexpress.com — активизирует сессию посылки сообщения юзеру info на машине softexpress.com, если Броузер поддерживает пуск электрической почты. Заметьте, что способ mailto: не просит указание слешей опосля двоеточия (как правило, опосля двоеточия сходу идет электрический адресок абонента)

telnet:

воззвание к службе telnet

news:

вызов службы новостей, если Броузер ее поддерживает. К примеру: news:relcom.www.support

SERVERNAME. Необязательный параметр, описывающий полное сетевое имя машинки. К примеру: www.softexpress.com — полное сетевое имя сервера конторы СофтСервис.

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

PORT. Номер порта TCP на котором работает WEB-. Если порт не указан, то «по дефлоту» употребляется порт 80. Данный параметр (port) не употребляется в подавляющем большинстве URL.

PATHNAME. Частичный либо полный путь к документу, который должен вызваться в итоге интерпретации URL. Разные WEB-сервера сконфигурированы по различному для интерпретации пути доступа к документу. к примеру, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном либо нескольких выделенных каталогах, путь к которым записан в особых параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется особый логический путь, который и употребляется в URL. Если WEB- лицезреет данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В неприятном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. к примеру: HTTP://www.softexpress.com/cgi-win/handle.exe

В данном примере HTTP— должен вызвать CGI-скрипт с именованием handle.exe, который находится на машине с сетевым именованием www.softexpress.com. Путь к данному скрипту — /cgi-win/ — в реальности является виртуальным методом (выделенным сервером для исполняемых модулей). Заметьте, что при описании пути употребляется unix-подобный синтаксис, где, в отличии от DOS и Windows употребляются прямые слеши заместо оборотных. Если опосля сетевого имени машинки сходу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине либо (что почаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL завершается сетевым именованием машинки, то в качестве документа запрашивается документ из корневого каталога удаленной машинки с именованием, установленным в настройках WEB-сервера (как правило, это index.html).

#ANCHOR. Данный элемент является ссылкой на строчку (точку) снутри html-документа. Большая часть броузеров, встречая опосля имени документа данный элемент, располагают документ на дисплее таковым образом, что обозначенная строчка документа помещается в верхнюю строчку рабочего окна броузера. Точки, на которые ссылается #anchor, указываются в документе с помощью тэга NAME, как это будет описано дальше.

структура ссылок в HTML-документе. Пока что мы разглядели лишь наружный вид URL. Для того, чтоб Броузер показал ссылку на URL, нужно отметить URL особыми тэгами в html-документе. Синтаксис HTML, позволяющий это создать — последующий:

<A HREF=»URL»> текст-который-будет-подсвечен-как-ссылка </A>

Тэг <A HREF=»URL»>открывает описание ссылки, а тэг </A> — закрывает его. Хоть какой текст, находящийся меж данными 2-мя тэгами подсвечивается особым образом Web-броузером. Обычно этот текст отображается подчеркнутым и выделен голубым (либо остальным данным юзером) цветом. текст, обозначающий URL, не отображается броузером, а употребляется лишь для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном либо подчеркнутом тексте). Вот вам наглядный пример сектора html-документа:

Для получения примера смотри <A HREF=»HTTP:/www.ruswebmasters.com/index.htm>страничку </A>

Данная строчка будет смотреться на дисплее последующим образом:

Для получения примера смотри страничку

Ссылки на точки снутри документа. Вы сможете созодать ссылки на разные участки либо разделы 1-го и такого же документа, используя особых сокрытый маркер для этих разделов. Это дозволяет стремительно перебегать от раздела к разделу снутри документа, не используя прокрутку экрана. Как вы щелкнете на ссылке, Броузер переместит вас на обозначенный раздел документа, а строчка, в какой стоит маркер данного раздела (обычно, 1-ая строчка раздела либо заголовок раздела) будет расположена на первой строке окна броузера (если данная строчка не находится уже на дисплее броузера).

Для сотворения таковой ссылки нужно выполнить последующие шаги:

1. Сделайте маркер раздела. Синтаксис данного маркера последующий:

<A NAME=»named_anchor»> текст-который-отобразится-в-первой-строке-броузера </A>

2. Сделайте ссылку на данный маркер:

<A HREF=»#named_anchor»> текст</A>

К примеру:

<p><b>Списокразделов</b></p> <ul> <li><a target="_blank" href=»#ex1″>Раздел1</a></li> <li><a target="_blank" href=»#ex2″>Раздел2</a></li> </ul> <p><a name=»ex1″></a>Раздел1</p> <ul> <p>Текстраздела1</p> </ul> <p><a name=»ex2″></a>Раздел2</p> <ul> <p>Текстраздела2 <br></p>

Перечень разделов

o Раздел 1

o Раздел 2

Раздел 1

текст раздела 1

Раздел 2

Текст раздела 2

Знаки «#ex1» докладывает вашему броузеру, что нужно отыскать в данном html-документе маркер с именованием «ex1».

Когда юзер щелкнет мышью на строке «Раздел 1», Броузер перейдет сходу к разделу 1.

Внимание! Как ранее было показано в синтаксисе URL, маркер раздела быть может поставлен как в том же документе, который просматривается в текущий момент, так и в другом документе. Во 2-м случае Броузер произведет подгрузку другого документа и перейдет к обозначенному для него разделу.

2.3
Графика

снутри
документа

одна из более симпатичных черт Web — возможность включения ссылок на графические и другие типы данных в html-документ. Делается это с помощью тэга <IMG…ISMAP>. Внедрение данного тэга дозволяет существенно сделать лучше наружный вид и функциональность документов.

Существует два метода использования графики в html-документах. 1-ый — это внедрение графических образов в документ, что дозволяет юзеру созидать изображения конкретно в контексте остальных частей документа. Это более применяемая техника при проектировании документов, именуемая время от времени «inline image». Синтаксис тэга:

Опишем элементы синтаксиса тэга:

URL:

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

ALT=»text»:

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

HEIGTH=n1:

Данный необязательный параметр употребляется для указания высоты рисунка в пикселях. Если данный параметр не указан, то употребляется уникальная высота рисунка. Это параметр дозволяет сжимать либо растягивать изображения по вертикали, что дозволяет наиболее верно определять наружный вид документа. Но, некие броузеры не поддерживают данный параметр. С иной стороны, экранное разрешение у вашего клиента может различаться от вашего, потому будьте внимательны при задании абсолютной величины графического объекта.

WIDTH=n2:

Параметр также необязателен, как и предшествующий. Дозволяет задать абсолютную ширину рисунка в пикселях.

ALIGN:

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

ISMAP:

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

Приведем пример использования данного тэга:

С версии html 2.0 у тэга <IMG> возникли доп характеристики:

Новейшие характеристики:

BORDER:

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

VSPACE:

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

HSPACE:

То же самое, что и VSPACE, но лишь по горизонтали.

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

Описание фонового рисунка врубается в тэг BODY и смотрится последующим образом:

<BODYBACKGROUND=»picture.gif»>.

Задание обычных цветов. Почти все html-авторы обожают употреблять заблаговременно предопределенные цвета фона документа, обыденного текста и ссылок. Чтоб задать эти цвета, нужно включить в тэг <BODY> доп характеристики:

где любой из характеристик описывает цвет того либо другого элемента. Опишем эти характеристики:

BGCOLOR:

цвет фона документа

TEXT:

цвет обычного текста документа

LINK:

Цвет ссылки. цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). цвет #000000 соответствует черному, а цвет #FFFFFF — белоснежному. к примеру:

<BODYBGCOLOR=»#000000″ TEXT=»#FFFFFF» LINK=»#9690CC»>

Данная строчка описывает белоснежный цвет фона документа, темный текст и серебристые ссылки.

Горизонтальная линия. Используя тэг <HR>, вы сможете поделить текст горизонтальной чертой.

Форматтэга:

характеристики тэга:

SIZE:

Толщина полосы в пикселях.

WIDTH:

Ширина полосы в пикселях либо процентах от ширины окна броузера.

ALIGN:

Размещение на дисплее (слева | по центру | справа).

NOSHADE:

По дефлоту линия представлена в 3D виде с тенью. NOSHADE дозволяет представить линию просто монотонной черной полосой.

2.4
Добавление

стилей
в
документ

HTML дозволяет употреблять разные стили шрифтов для выделения текстовой инфы в ваших документах. Вот маленький перечень стилей, поддерживаемых большинством броузеров:

bold (жирный)

Italic (наклонный)

mono spaced (type writer — с внедрением фиксированных шрифтов)

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

Таблица №2: Главные стили текста

Стиль
Элемент либо тэг
Итог

Bold
<B> Этот текст жирный </B>
Этот текст жирный

Italic
<I> Этот текст наклонный </I>

Mono spaced
<TT> Этот текст с непроп. шрифтом </TT>
Этот текст с непроп. шрифтом

Комбинирование стилей дозволяет для вас показывать в одной строке несколько частей разными стилями, к примеру:

<b>жизнь</b> — <i>это <b>песня!</b></i>

Жизнь
— это песня!

внимание!Добавление огромного количества стилей и их композиций приводит к затруднению чтения текста!

Доп стили:

· big (большенный)

· small (небольшой)

· sub (подстрочник)

· sup (надстрочник)

· Таблица №3: Доп стили текста

Стиль
Элемент либо тэг
Итог

Big
Этот текст <BIG> большенный </BIG>
Этот текст большенный

Small
Этот текст <SMALL> небольшой </SMALL>
Этот текст небольшой

Sub
Этот текст <SUB> подстрочник </SUB>
Этот текст подстрочник

Sup
Этот текст <SUP> надстрочник </SUP>
Этот текст надстрочник

Размер шрифта <FONT SIZE>. Вы сможете изменять размер шрифта с помощью тэга:

<FONTSIZE=+|- n>

шрифт может иметь размер от 1 до 7. Вы сможете прямо указать размер шрифта цифрой, либо указать смещение относительно базисного значения (по дефлоту — 3) в положительную либо отрицательную сторону. Базисное значение можно поменять с помощью тэга:

<BASEFONTSIZE=n>

к примеру:

изменение

цвет шрифта <FONTSIZE>. Вы сможете поменять цвет шрифта с помощью тэга:

<FONTCOLOR=»#xxxxxx>

цвет указывается в RGB-формате (Red-Green-Blue) средством указания размерности каждой составляющие цвета в шестнадцатиричном формате. К примеру, белоснежный цвет обозначается «000000», темный — «FFFFFF», голубий — «0000FF» и т.п.

<FONT COLOR=»#FF0000″> Красноватый</FONT> <FONT COLOR=»#00FF00″> Зеленоватый</FONT> <FONT COLOR=»#0000FF»> Голубий</FONT>

Красноватый Зеленоватый Голубий

2.5 Особые

тэги
html

Последующие тэги дозволят для вас создать ваш html-документ наиболее многофункциональным.

Тэг адреса <ADDRESS>. Тэг <ADDRESS> употребляется для выделения создателя документа и его дреса (к примеру, e-mail). Синтаксис:

<ADDRESS> Адресок-автора </ADDRESS>

Escape-последовательности. Некие знаки являются управляющими знаками в html и не могут впрямую употребляться в документе:

1) левая угловая скобка «<«

2) правая угловая скобка «>»

3) амперсанд «&»

4) двойные кавычки «»»

Чтоб употреблять данные знаки в документе, нужно поменять их escape-последовательностями:

Таблица №4: Escape-последовательности

<

<

>

>

&

&

«

"

Существует огромное количество escape-последовательностей для обозначения особых знаков, к примеру «©» для обозначения знака © и ® для значка ®, показавшихся в html 2.0. Одной из особенностей является подмена знаков во 2-ой части символьной таблицы (опосля 127-ого знака) на escape-последовательности для передачи текстовых файлов с государственными языками по 7-битным каналам.

внимание!Escape-последовательности чувствительны к регистру: НЕЛЬЗЯ употреблять &LT; заместо <.

2.6
HTMLФормы

Некие WWW броузеры разрешают юзеру, заполнив специальную форму, возвращающую приобретенное юзер заполняет форму и надавливает клавишу «доказательство» (SUBMIT — особый тип клавиши, который задается при описании документа), информация, введена юзером в форму, посылается HTTP-серверу для обработки и передаче остальным программкам, работающим под сервером, в согласовании с CGI (Common Gateway Interface) интерфейсом.

Когда вы описываете форму, любой элемент ввода данных имеет тэг <INPUT>. Когда юзер помещает данные в элемент формы, инфоромация располагается в разделе VALUE данного элемента.

Синтаксис. Все формы начинаются тэгом <FORM> и заканчиваются тэгом </FORM>.

<FORM METHOD=»get|post» ACTION=»URL»> Элементы_формы_и_другие_элементы_html. </FORM>

METHOD. Способ посылки сообщения с данными из формы. Зависимо от применяемого способа вы сможете посылать результаты ввода данных в форму 2-мя способами:

GET: информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программка (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Внедрение способа GET не рекомендуется.

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

ACTION: ACTION обрисовывает URL, который будет вызываться для обработки формы. Данный URL практически постоянно показывает на CGI-программу, обрабатывающую данную форму.

Тэги формы:

TEXTAREA:

Тэг <TEXTAREA> употребляется для того, чтоб дозволить юзеру вводить наиболее одной строчки инфы (вольный текст). Вотпримериспользованитэга<TEXTAREA>:

Москва,

Дмитровкое шоссе,

д.9Б, кабинет 448

</TEXTAREA>

Атрибуты, применяемые снутри тэга <TEXTAREA> обрисовывают наружный вид и имя вводимого значения. Тэг </TEXTAREA> нужен даже тогда, когда поле ввода вначале пустое. Описание атрибутов:

NAME — имя поля ввода

ROWS — высота поля ввода в знаках

COLS — ширина поля ввода в знаках

Если вы желаете, чтоб в поле ввода по дефлоту выдавался какой-нибудь текст, то нужно вставить его снутри тэгов <TEXTAREA> и </TEXTAREA>.

INPUT:

Тэг <INPUT> употребляется для ввода одной строчки текста либо 1-го слова. Атрибуты тэга:

CHECKED — значит, что CHECKBOX либо RADIOBUTTON будет избран.

MAXLENGTH — описывает количество знаков, которое юзеры могут ввести в поле ввода. При превышении количества допустимых знаков Броузер реагирует на попытку ввода новейшего знака звуковым сигналом и не дает его ввести. Не путать с атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле осуществляется скроллинг. По дефлоту

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

SIZE — описывает зрительный размер поля ввода на дисплее в знаках.

SRC — URL,. указывающий на картину (употребляется вместе с атрибутом IMAGE).

TYPE — описывает тип поля ввода. По дефлоту это обычное поле ввода для одной строчки текста. Другие типы должны быть очевидно указаны:

CHECKBOX:Употребляется для обычных логических (BOOLEAN) значений.

HIDDEN:Поля данного типа не показываются броузером и не дают юзеру изменять присвоенные данному полю по дефлоту инфы, к примеру, ID юзера, пароля либо иной инфы.

IMAGE:

Данный тип поля ввода дозволяет для вас связывать графический набросок с именованием поля. При нажатии мышью на какую-либо часть рисунка будет немедля вызвана ассоциированная форме CGI-программка. значения, присвоенные переменной NAME будут смотреться так — создается две новейших переменных: 1-ая имеет имя, обозначенное в поле NAME с добавлением .x в конце имени. В эту переменную будет помещена X-координата точки в пикселях (считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия, а переменная с именованием, содержащимся в NAME и добавленным .y, будет содержать Y-координату. Все значения атрибута VALUE игнорируются. Само описание рисунки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом <IMG>.

Password:

То же самое, что и атрибут TEXT, но вводимое юзером

RADIO:

Данный атрибут дозволяет вводить одно несколько полей ввода с атрибутом TYPE=»RADIO» с различными значениями атрибута VALUE, но с схожими значениями атрибута NAME. В CGI-программу будет передано момент будет выбрано (будет активным). При выбирании 1-го из полей ввода типа RADIO все другие поля данного типа с этим же именованием (атрибут NAME) автоматом станут невыбранными на дисплее.

RESET:

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

SUBMIT:

Данный тип обозначает клавишу, при нажатии которой будет вызвана CGI-программка (либо URL), описанная в заголовке формы. Атрибут VALUE может содержать строчку, которая будет высвечена на кнопочке.

TEXT:

Данный тип поля ввода обрисовывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE для определения наибольшей длинны вводимого значения в знаках и размера отображаемого поля ввода на дисплее (по дефлоту принимается 20 знаков).

VALUE — присваивает полю

Меню выбора в формах. Под меню выбора в формах соображают таковой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм:

Select — юзер выбирает одно значение из фиксированного перечня значений, представленных тэгами OPTION. Данный вид представляется как выпадающий LISTBOX.

Select single — то же самое, что и Select, но на дисплее юзер лицезреет сразу три элемента выбора. Если их больше, то предоставляется автоматический вертикальный скроллинг.

Select multiple — дозволяет избрать несколько частей из LISTBOX.

SELECT: Тэг SELECT дозволяет юзеру избрать

Тэг SELECT имеет один либо наиболее параметр меж стартовым тэгом <SELECT> и оканчивающим </SELECT>. По дефлоту, 1-ый элемент отображается в строке выбора. Вот вам наглядный пример тэга <SELECT>:

<FORM>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

</SELECT>

</FORM>

SELECT SINGLE: Тэг SELECT SINGLE — это то же самое, что и Select, но на дисплее юзер лицезреет сразу несколько частей выбора (три по дефлоту). Если их больше, то предоставляется автоматический вертикальный скроллинг. количество сразу отображаемых частей определяется атрибутом SIZE. Пример:

<FORM>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTIONS> Pentium PRO

</SELECT>

</FORM>

SELECTMULTIPLE: Тэг SELECT MULTIPLE похож на тэг SELECT SINGLE, но юзер может сразу избрать наиболее чем один элемент перечня. Атрибут SIZE описывает количество сразу видимых на дисплее частей, атрибут MULTIPLE — наибольшее количество сразу избранных частей. Пример:

<FORM>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTIONS> Pentium PRO

</SELECT>

</FORM>

Если выбрано сразу несколько значений, то серверу передаются соответственное избранному количество характеристик NAME=VALUE с схожими значениями NAME, но различными VALUE.

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

внимание! Так как данная возможность просит поддержки получения файлов WEB-сервером, то, соответственно, нужно, чтоб поддерживал получение файлов!

К примеру:

<FORM ENCTYPE=»multipart/form-data» ACTION=»url» METHOD=POST> Отправитьданныйфайл: <INPUT NAME=»userfile» TYPE=»file»> <P> <INPUT TYPE=»submit» VALUE=»Отправитьфайл»> </FORM>.

2.7
HTMLФреймы

Используя фреймы, дозволяющие разбивать Web-страницы на множественные прокручиваемые подокна, вы сможете существенно сделать лучше наружный вид и функциональность информационных систем и Web-приложений. Каждое подокно, либо фрейм, может иметь последующие характеристики:

· Любой фрейм имеет собственный URL, что дозволяет загружать его независимо от остальных фреймов

· Любой фрейм имеет собственное имя (параметр NAME), позволяющее перебегать к нему из другого фрейма

· Размер фрейма быть может изменен юзером прямо на дисплее с помощью мыши (если это не запрещено указанием специального параметра)

· Данные характеристики фреймов разрешают создавать продвинутые интерфейсные решения, такие как:

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

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

· Создавать окна результатов запросов, когда в одном фрэйме находится фактически запрос, а в другом результаты запроса

· Создавать формы типа «мастер-деталь» для WEB-приложений, обслуживающих базы данных.

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

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

+Представим общий синтаксис фреймов:

<FRAMESETCOLS=»value» | ROWS=»value»>

<FRAME SRC=»url1″> <FRAME …> …

</FRAMESET>

Общий контейнер FRAMESET обрисовывает все фреймы, на которые делится экран. Вы сможете поделить экран на несколько вертикальных либо несколько горизонтальных фреймов. Тэг FRAME обрисовывает любой фрейм в отдельности. Разглядим наиболее детально любой компонент.

FRAMESET. <FRAMESET [COLS=»value» | ROWS=»value»]>

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

Данный тэг имеет два взаимоисключающих параметра: ROWS и COLS.

ROWS=»список-определений-горизонтальных-подокон»

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

Синтаксис применяемых видов описания величин подокон:

Value:

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

value%:

Значение величины подокна в процентах от 1 до 100. Если общая сумма процентов описываемых подокон превосходит 100, то размеры всех фреймов пропорционально уменьшаются до суммы 100%. Если, соответственно, сумма меньше 100, то размеры пропорционально растут.

value*:

Совершенно говоря, пространство будет принадлежать данному фрейму. Если указывается два либо наиболее фрейма с описанием «*» (к примеру «*,*»), то оставшееся место делится поровну меж этими фреймами. Если перед звездочкой стоит цифра, то она показывает пропорцию для данного фрейма (во сколько раз од будет больше аналогично описанного незапятанной звездочкой). к примеру, описание «3*,*,*», гласит, что будет сотворено три фрейма с размерами 3/5 вольного места для первого фрейма и по 1/5 для 2-ух остальных.

COLS=»список-определений-горизонтальных-подокон»

То же самое, что и ROWS, но разделяет окно по вертикали, а не по горизонтали.

внимание! Совместное внедрение данных характеристик может привести к непредсказуемым результатам. к примеру, строчка: <FRAMESET ROWS=»50%,50%» COLS «50%,50%»> может привести к неверной ситуации.

Примеры: <FRAMESET COLS=»50,*,50″> — обрисовывает три фрейма, два по 50 точек справа и слева, и один снутри этих полосок.

<FRAMESET ROWS=»20%,3*,*»> — обрисовывает три фрейма, 1-ый из которых занимает 20% площади сверху экрана, 2-ой 3/4 оставшегося от первого фрейма места (т.е. 60% всей площади окна), а крайний 1/4 (т.е. 20% всей площади окна.

<FRAMESET ROWS=»*,60%,*»> — аналогично предшествующему примеру.

Тэги <FRAMESET> могут быть вложенными, т.е. к примеру:

<FRAMESET COLS=»*,*»

</FRAMESET>

Итог данного примера мы разглядим позднее.

FRAME. <FRAME SRC=»url» [NAME=»frame_name»] [MARGINWIDTH=»nw»] [MARGINHEIGHT=»nh»] [SCROLLING=yes|no|auto] [NORESIZE]>

Данный тэг описывает фрэйм снутри контейнера FRAMESET.

SRC=»url». Обрисовывает URL документа, который будет отображен снутри данного фрейма. Если он отсутствует, то будет отображен пустой фрейм.

NAME=»frame_name». Данный параметр обрисовывает имя фрейма. Имя фрейма быть может применено для определения деяния с данным фреймом из другого html-документа либо фрейма (обычно, из примыкающего фрейма этого же документа). имя непременно обязано начинаться с знака. Содержимое поименованных фреймов быть может задействовано из остальных документов с помощью специального атрибута TARGET, описываемого ниже.

MARGINWIDTH=»value». Это атрибут быть может применен, если создатель документа желает указать величину разделительных полос меж фреймами сбоку.

MARGINHEIGHT=»value». То же самое, что и MARGINWIDTH, но для верхних и нижних величин разделительных полос.

SCROLLING=»yes| no| auto». Этот атрибут дозволяет задавать наличие полос прокрутки у фрейма. Параметр yes показывает, что полосы прокрутки будут в любом случае находиться у фрейма, параметр no напротив, что полос прокрутки не будет. Auto описывает наличие полос прокрутки лишь при их необходимости (

NORESIZE. Данный атрибут дозволяет создавать фреймы без способности конфигурации размеров. По дефлоту, размер фрейма можно поменять с помощью мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность. Если у 1-го фрейма установлен атрибут NORESIZE, то у примыкающих фреймов тоже не быть может изменен размер со стороны данного.

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

Примеры. Разглядим реализацию фреймов для подобного разбиения окна:

+—————————+| | || | || Link1 | Link2 || | || | |+—————————+| | | || | | || Link3 | Link4 | Link5 || | | || | | |+—————————+

<FRAMESETROWS=»*,*»>

<H1>Ваша версия WEB-броузера не поддерживает фрэймы!</H1>

</NOFRAMES>

</FRAMESET>

</FRAMESET>

Планирование фреймов и взаимодействия меж фреймами. С возникновением фреймов сходу возникает вопросец: «Как создать так, чтоб, нажимая на ссылку в одном фрейме инициировать возникновение инфы в другом?»

Ответом на данный вопросец является планирование взаимодействия фреймов (дальше — планирование). Любой фрейм может иметь собственное имя, определяемое параметром NAME при описании данного фрейма. Существует, также, особый атрибут — TARGET, позволяющий определять, к какому фрейму относится та либо другая операция. формат данного атрибута последующий:

TARGET=»windows_name»

Данный атрибут может встречаться снутри разных тэгов:

TARGETв тэге A:

Это самое прямое внедрение TARGET. Обычно, при активизации юзером ссылки соответственный документ возникает в том же окне (либо фрейме), что и начальный, в каком была ссылка. Добавление атрибута TARGET дозволяет произвести вывод документа в иной фрейм. К примеру:

<AHREF=»mydoc.html» TARGET=»Frame1″> Переход в фрейм № 1 </A>

TARGETв тэге BASE:

Размещение TARGET в тэге BASE дозволит для вас не указывать при описании каждой ссылки фрэйм-приемник документов, вызываемых по ссылкам. Это весьма комфортно, если в одном фрэйме у вас находится меню, а в иной — выводится информация. К примеру:

Документ№ 1.

документ№ 2 (doc2.htm).

<HTML> <HEAD> <BASE TARGET=»Frame2″> </HEAD> <BODY> <A HREF=»url1″> Перваячасть</A> | <A HREF=»url2″> Втораячасть</A> </BODY> </html>

TARGETв тэге AREA:

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

TARGETв тэге FORM:

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

внимание! Имя окна (фрейма) в параметре TARGET обязано начинаться с латинской буковкы либо числа. Также нужно держать в голове, что есть зарезервированные имена для разрешения особых ситуаций.

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

TARGET=»_blank»:

Данное

TARGET=»_self»:

Данное ссылка. Это имя комфортно для переопределения окна предназначения, обозначенного ранее в тэге BASE.

TARGET=»_parent»:

Данное окна нет, то данное имя аналогично «_self».

TARGET=»_top»:

Данное поверхности окна, вне зависимости от наличия фреймов. Внедрение данного параметра комфортно в случае вложенных фреймов.

2.8

HTML
Таблицы

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

Главные тэги таблицы:

Таблица: <TABLE>…</TABLE>:

Это главные тэги, описывающие таблицу. Все элементы таблицы должны находиться снутри этих 2-ух тэгов. По дефлоту таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.

Строчка таблицы: <TR>…</TR>:

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

Ячейка таблицы: <TD>…</TD>:

Обрисовывает обычную ячейку таблицы. Ячейка таблицы быть может описана лишь снутри строчки таблицы. Любая ячейка обязана быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна либо несколько ячеек для неких колонок, то Броузер показывает пустую ячейку. Размещение данных в ячейке по дефлоту определяется атрибутами ALIGN=left и VALIGN=middle. Данное размещение быть может исправлено как на уровне описания строчки, так и на уровне описания ячейки.

Заголовок таблицы: <TH>…</TH>:

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись: <CAPTION>…</CAPTION>:

Данный тэг обрисовывает заглавие таблицы (подпись). Тэг <CAPTION> должен находиться снутри <TABLE>…</TABLE>, но снаружи описания какой-нибудь строчки либо ячейки. По дефлоту <CAPTION> имеет атрибут ALIGN=top, но быть может очевидно установлен в ALIGN=bottom. ALIGN описывает, где — сверху либо снизу таблицы — будет поставлена подпись. Подпись постоянно центрирована в рамках ширины таблицы.

Главные атрибуты таблицы:

BORDER:

Данный атрибут употребляется в тэге TABLE. Если данный атрибут находится, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. BORDER может принимать числовое

ALIGN:

Если атрибут ALIGN находится снутри тэгов <CAPTION> и </CAPTION>, то он описывает положение подписи для таблицы (сверху либо снизу). По дефлоту ALIGN=top. Если атрибут ALIGN встречается снутри <TR>, <TH> либо <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) либо center (по центру).

VALIGN:

Данный атрибут встречается снутри тэгов <TR>, <TH> и <TD>. Он описывает вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (понизу), middle (по середине) и baseline (все ячейки строчки прижаты наверх).

NOWRAP:

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

COLSPAN:

Показывает, какое количество ячеек будет объединено по горизонтали для обозначенной ячейки. По умолчании — 1.

ROWSPAN:

Показывает, какое количество ячеек будет объединено по вертикали для обозначенной ячейки. По умолчании — 1.

COLSPEC:

Данный параметр дозволяет задавать фиксированную ширину колонок или в знаках, или в процентах, к примеру COLSPEC=»20%».

Примертаблицы:

<CAPTION ALIGN=bottom> Таблица№1 </CAPTION>

<TR><TD ROWSPAN=2></TD><TH COLSPAN=2>Среднее

<TR><TD>Мужчины</TD><TD ALIGN=center>174</TD><TD

ALIGN=center>78</TD></TR>

<TR><TD>Дамы</TD><TD ALIGN=center>165</TD><TD

ALIGN=center>56</TD></TR>

</TABLE>

Таблица 3 – Среднее
Среднее

Рост

Вес

Мужчины
174
78

Дамы
165
56

Таблица №1

2.9 оптимизация графики для

Web

Сейчас в Web употребляется два типа растровых файлов: в форматах jpeg и GIF.

JPEG-формат отлично передает цветовые и тоновые раскаты, размытые границы (к примеру, фото). JPEG-файл отлично масштабируется в броузере. плохо передает ровненькие плоскости цвета, в компрессии уступает GIF-формату. При сохранении в jpeg-формате выбирайте свойство «medium».

GIF-формат отлично передает ровненькие плоскости цвета, твердые границы (к примеру, векторную графику, логотипы). Имеет наивысшую компрессию, допускает прозрачный фон. плохо масштабируется в броузере, искажает цветовые и тоновые раскаты. Используйте GIF-формат, если изображение без значимых утрат переводится в 128-цветовую палитру с включенной опцией «dithering». В неприятном случае лучше сохранять изображение в JPEG-формате. Для экспорта файла в GIF-формат поначалу проиндексируйте его цветовую гамму в количество цветов вручную (для высококачественной передачи антиалиасного одноцветного изображения на одноцветном фоне довольно 5-8 цветов, двух-трехцветного изображения — 15-25 цветов) Если начальное изображение Grayscale, перед индексацией переведите его в RGB-гамму.

2. По способности опасайтесь включения функции «dithering»- она наращивает размер файла. Эта функция нужна, лишь если в изображении находится цветовой либо тоновой раскат (напр. стал «клетчатым».

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

2.10 Базы
CSS.

Главным понятием CSS является стиль – т. е. набор правил дизайна и форматирования, который быть может использован к разным элементам странички. В обычном html для присвоения какому-либо элементу определенных параметров (таковых, как цвет, размер, положение на страничке и т. п.) приходилось всякий раз обрисовывать эти характеристики, даже если на одной странице должны размещаться 10 либо 110 таковых частей, никак не различающихся один от другого. Вы должны были 10 либо 100 10 раз вставить один и этот же кусочек HTML- кода в страницу, увеличивая размер файла и время загрузки на комп разглядывающего ее юзера.

CSS действует остальным, наиболее комфортным и экономным методом. Для присвоения какому-либо элементу определенных черт вы должны один раз обрисовать этот элемент и найти это описание как стиль, а в предстоящем просто указывать, что элемент, который вы желаете оформить подходящим образом, должен принять характеристики стиля, описанного вами. Комфортно, не правда ли?

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

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

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

Практическое освоение CSS. Как для вас уже понятно, информация о стилях может размещаться или в отдельном файле, или конкретно в коде Web-странички. Размещение описания стилей в отдельном файле имеет смысл в случае, если вы планируете использовать эти стили к большему, чем одна, количеству страничек. Для этого необходимо сделать обыденный текстовый файл, обрисовать при помощи языка CSS нужные стили, поместить этот файл на Web-сервере, а в коде Web-страниц, которые будут употреблять стили из этого файла, необходимо будет создать ссылку на него. Делается это при помощи тега <LINK>, размещающегося снутри тега <BODY> ваших страничек:

<LINK REL=STYLESHEET TYPE=»text/css» HREF=»URL»>

1-ые два параметра этого тега являются зарезервированными именами, требующимися для того, чтоб сказать броузеру, что на данной нам странице будет употребляться CSS. 3-ий параметр – HREF= «URL» – показывает на файл, который содержит описания стилей. Этот параметр должен содержать или относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – либо полный URL («http://…») в случае, если файл стилей находится на другом сервере.

2-ой вариант, при котором описание стилей размещается в коде Web- страницы, снутри тега <BODY>, в теге <STYLE type=»text/css»>… </STYLE>. В этом случае вы сможете употреблять эти стили для частей, располагающихся в границах страницы. Параметр type=»text/css» является неотклонимым и служит для указания броузеру употреблять CSS.

И 3-ий вариант, когда описание стиля размещается конкретно снутри тега элемента, который вы описываете. Это делается при помощи параметра STYLE, применяемого при применении CSS с большинством обычных тегов html. Этот способ нежелателен, и понятно почему: он приводит к потере 1-го из главных преимуществ CSS – способности отделения инфы от описания дизайна инфы. Вообщем, если нужно обрисовать только один элемент, этот вариант расположения описания стилей также полностью применим.

Давайте разглядим механизм, при помощи которого стили присваиваются элементам Web -страниц. Самый обычный вариант присвоения какому-либо элементу определенного стиля смотрится так:

НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML -тега (H1, P, TD, A и т. д.), а характеристики в фигурных скобках – перечень параметров элемента и присвоенных им значений. Наиболее тщательно команды языка CSS мы разглядим чуток позднее.

Пример:

H1 {font-size: 30pt; color: blue;}

В этом примере всем заголовкам на страничке, оформленным тегом Н1, присваивается размер шрифта 30 пт и голубий цвет.

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

CSS реализует возможность присваивать стили не многим схожим элементам странички, а избирательно – для этого употребляется параметр CLASS = «имя класса» либо идентификатор ID=«имя элемента», присваивающиеся хоть какому элементу странички. Разглядим эти способности подробнее.

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

Пример:

.b-с{font-weight: bold; text-align: center}

– описание стиля для класса b-с

Все элементы класса b-с будут отображаться жирным шрифтом с сглаживанием по центру странички (либо ячейки таблицы).

<P CLASS=»b-с»>текст параграфа</P>

– параграфу присвоен стиль класса b-с.

<TD CLASS=»b-c»>текст</TD>

– ячейке таблицы присвоен стиль класса b-c.

Находящийся в ячейке текст будет отображаться согласно описанию класса.

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

Присвоение стилей при помощи идентификаторов применяется в случае, если данному идентификатору соответствует лишь один элемент на страничке. Если частей, которым нужно присвоить таковой стиль, несколько – это уже класс.

характеристики частей, управляемых при помощи CSS. В истинное время язык CSS насчитывает достаточно огромное количество параметров частей html, которыми он может управлять. Но из-за того, что этот эталон еще весьма молод, в полном объеме его пока не поддерживают более пользующиеся популярностью броузеры (Netscape Navigator и Microsoft Internet Explorer). Крайние версии этих броузеров могут работать с достаточно огромным количеством установок CSS, а вот 3-и версии либо совершенно не поддерживают его (Netscape Navigator 3), либо поддерживают, но только отчасти (Microsoft IE 3). Наиболее того, так как создатели из этих компаний никак не могут условиться меж собой, крайние версии броузеров поддерживают неодинаковый набор параметров CSS. Все это делает малоприемлемым внедрение CSS в полном объеме, потому что, при использовании CSS для форматирования частей странички и просмотре ее при помощи броузера версии ниже 4 й, есть большая возможность узреть нечто такое, что для вас не понравится. Потому будет разумнее воздержаться от использования CSS для форматирования главный структуры страничек до всеобщего перехода на крайние версии броузеров. В то же время, применяя «неопасные», т. е. совместимые с наибольшим количеством броузеров элементы CSS, вы сможете очень облегчить для себя жизнь и создать ваши Web-странички наиболее симпатичными в плане шрифтового дизайна, а юзеры, путешествующие по Internet при помощи устаревших броузеров, просто этого не увидят, но также они не увидят и тех кошмаров, которые возникают при использовании CSS для верстки страничек.

Таблица №4: Тэги CSS

СВОЙСТВА ШРИФТА

font-family
Употребляется для указания шрифта либо шрифтового семейства, которым будет отображаться элемент.P{font-family: TimesNewRoman, sans-serif;}

font-weight
Определяетстепеньжирностишрифтаспомощьютрехпараметров: lighter, bold, bolderB {font-weight: bolder;}

font-size
Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, см)H1 {font-size: 200%;}H2 {font-size: 150px;}H3 {font-size: 400pt;}

font-size
Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, см)H1 {font-size: 200%;}H2 {font-size: 150px;}H3 {font-size: 400pt;}

цвет ЭЛЕМЕНТА И ЦВЕТ ФОНА

color
Описывает цвет элементаI {color: yellow;}

background-color
Устанавливает цвет фона для элемента – конкретно для элемента, а не для страницы. Обратите внимание, что броузеры показывают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину странички, а Netscape Navigator – только ширину, занимаемую сиим элементом. Поглядите пример (рис. 3, 4 ), вот его начальный код:<html><HEAD><TITLE>Пример использования CSS</TITLE><STYLE type=”text/css”>H1 {font-size: 300%;}</STYLE></HEAD><BODY bgcolor=white><center><BR><H1 style=”background-color: teal; color: white;”>Cascading</H1><H1 style=”background-color: navy; color: yellow;”>Style</H1><H1 style=”background-color: gold; color: brown;”>Sheets</H1></BODY></html>В этом примере в разделе <STYLE> всем элементам <Н1> на данной нам странице был установлен размер 300 % от нормы. Потом любому из частей <H1> были присвоены собственные значения цвета фона и цвета знаков.

СВОЙСТВА текста

text-decoration
Устанавливает эффекты дизайна шрифта, такие, как подчеркивание либо зачеркнутый текстH4 {text-decoration: underline;}A {text-decoration: none;}.wrong {text-decoration: line-through;}

text-align
Описывает сглаживание элемента. P{text-align: justify}H1 {text-align: center}

text-indent
Устанавливает отступ первой строчки текста. Почаще всего употребляется для сотворения параграфов с табулированной первой строчкой.P{text-indent: 50pt;}

line-height
Управляет интервалами меж строчками текста.P{line-height: 50 %}

СВОЙСТВА ГРАНИЦ

margin-left
Устанавливают значения отступов вокруг элемента.IMG{ margin-right: 20pt}P{ margin-left: 2cm}

margin-rightmargin-rightmargin-top
Устанавливаютзначенияотступоввокругэлемента.IMG { margin-right: 20pt}P { margin-left: 2cm}

ЕДИНИЦЫ ИЗМЕРЕНИЯ

px
Пикселы

cm
См

mm
Миллиметры

pt
Пункты (типограф.)

%
Проценты

Итак, перейдем к исследованию неопасных частей CSS. Описание параметров частей в CSS состоит из наименования характеристики с следующим присвоением ему определенного значения. Заглавие характеристики и его значение разбиты двоеточием.

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

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

Еще есть одна маленькая, но весьма нужная хитрость – это метод скрыть от устаревших броузеров описания стилей, располагающихся в теге <STYLE>, снутри раздела<HEAD>. Так как Броузер был написан несколько годов назад, когда никакого CSS к тому же в планах не было, он просто не усвоит, что же все-таки это такое написано снутри <STYLE>…</STYLE>, и выдаст все описания стилей на страницу, как обыденный текст. Для того чтоб предупредить это, нужно заключить описания стилей в тег объяснений. Делается это весьма просто.

<HEAD>

<!—

описания стилей

— >

</STYLE>

</HEAD>

где

<!— – тег, открывающий комментарий, а

> – закрывающий.

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

Еще один из увлекательных вариантов внедрения CSS прячется за, чудилось бы, обычный возможностью: вы сможете указывать значения отступов вокруг объектов, как отрицательные величины! Это дозволяет накладывать один слой текста на иной и получать очень достойные внимания и симпатичные результаты.

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

Сделаем новейший html-файл и составим описание стилей для 3-х объектов:

<HEAD>

BODY {font-family: Verdana; font-size: 70pt; font-weight: bold;}

.z1 { color: silver; margin-top: 100px; margin-left: 70px;}

.z2 {color: navy; margin-top: -118px; margin-left: 68px;}

</STYLE>

</HEAD>

В этом описании мы присвоили <BODY> (вообщем, это мог быть фактически хоть какой иной тег) размер, шрифт и начертание – в таком стиле будут отображаться все элементы странички. Это было изготовлено только ради рвения уменьшить размер файла страницы, заместо этого можно было обрисовать эти характеристики два раза: для всякого из классов z. Дальше мы описываем два стиля, которые различаются цветом и размером отступов вокруг их: нижний слой описывается стилем z1, а верхний – z2. Используя отрицательные значения отступов и подбирая необходимое значение, мы добиваемся того, что верхний слой вроде бы наползает на предшествующий…

</BODY>

Откроем наш возлюбленный Web-редактор и сделаем файл с будущим заглавием styles.css (заглавие файла быть может хоть каким). Опишем в этом файле стиль параграфа <P>, который будет употребляться на всех страницах нашего веб-сайта:

P {

font-family: Times New Roman, serif;

color: #000000;

margin-left: 15%;

margin-right: 15%;

margin-top: 1pt;

margin-bottom: 1pt;

text-indent: 1cm;

text-align: justify;

}

Снутри описания стиля для удобства форматирования вы сможете употреблять хоть какое количество пробелов и переносов строк – при чтении стиля Броузер просто откинет все излишние пробелы.

В этом стиле мы задали, что параграфы <P> на всех страницах, которые употребляют это описание, будут отображаться шрифтом Times New Roman либо в случае, если этот шрифт на машине не установлен, остальным шрифтом, но из этого семейства (serif). цвет шрифта мы установили темный, сглаживание – полное (по обеим сторонам).

Также мы установили для параграфа ряд значений отступов. Это было изготовлено со последующей целью: по дефлоту параграф в html отображается равным фактически 95 % странички и с интервалами меж параграфами, равными 180 % межстрочного интервала. Читать такие параграфы не весьма комфортно, потому что интервалы меж ними очень значительны, а ширина параграфа очень большая. Поглядите на журнальчик, который вы на данный момент держите в руках: текст сверстан в колонки для того, чтоб его было удобнее читать. В стиле параграфа, который мы сделали, установлены боковые отступы в 15 % ширины окна и вертикальные отступы в 1 пункт – так текст статьи будет еще читабельнее.

Давайте так же сделаем стиль для заголовков статей:

H2 {

font-family: Verdana, Arial Cyr, Arial;

font-weight: bold;

font-size: 14pt;

color: black;

margin-left: 20%;

margin-top: 1cm;

text-align: left;

}

Все заглавия наших страничек, оформленные тегом <H2>, будут отображаться жирным шрифтом Verdana либо, если этот шрифт не установлен, шрифтом Arial. Размер заголовка мы установим равным 14 пт, цвет темный, отступ слева равен 20 % ширины странички, а отступ сверху – 1 см. Заголовок будет выравниваться относительно левого края странички.

Благодаря тому, что боковые отступы заголовка и параграфа установлены нами в процентах от ширины окна броузера, во время просмотра наших страниц на компах с различным разрешением монитора пропорции и размещение заголовка, основного текста и отступов будут сохранены.

Для того чтоб «привязать» сделанные нами стили к нашим страницам, во все html-файлы в разделе <HEAD> мы должны поместить строчку со ссылкой на файл стилей и с указанием о использовании CSS:

Так как файл со стилями будет находиться в том же каталоге сервера, что и другие страницы, параметр HREF=»URL» в нашем случае будет просто именованием нашего файла стилей (styles.css).

3.
Описание сотворения веб-сайта

3.1 Подготовка

Итак, в самом начале мне были необходимы 2 главные вещи – неплохой учебник по HTMLи не наименее неплохой html-редактор. Учебник мне был нужен, потому что познаний, почерпнутых на уроках, было недостаточно, а редактор намного упрощает создание Web-страниц. Употреблять для этого обычный блокнот Windowsочень неловко, главные его неудобства – это маленькая история отмены (отменить можно не наиболее 1-го деяния) и необходимость повсевременно сохранять документ, перебегать в Броузер, обновлять страничку для просмотра конфигураций. А html-редактор дозволяет просмотреть конфигурации, внесённые в Web-страницу в своём внутреннем броузере одним нажатием клавиши. естественно же, в нём неограниченна история отмены, также имеется огромное количество остальных плюсов по сопоставлению с блокнотом.

Незначительно побродив по просторам Веба, я нашёл несколько электрических учебников по HTML, наилучшим из которых оказался самоучитель Алленовой Натальи, потому что написан весьма доступно даже для “чайников” в разработке Web-страниц, каким я, на самом деле, и был. Там нашлось всё, что я желал выяснить.

Потом я занялся поиском обычного, комфортного, а основное, бесплатного редактора Web-страниц. Прочтя описания программ, я избрал несколько редакторов, наилучшим из которых оказался редактор Arachnophilia. В данной нам программке есть фактически всё для сотворения веб-сайта. К примеру, сделать таблицу так же просто, как программке MicrosoftWord– просто указать количество строк и столбцов. Опосля нажатия клавиши “Ok” все надлежащие теги будут внесены в html-код создаваемой странички. Так же просто выполнить и остальные деяния, одним словом, большущее спасибо создателю!

3.2
Создание главной странички

Итак, создание первой странички, со обычным именованием index.htm. При разработке новейшей странички Arachnophiliaвыдаёт окошко с предложением указать цвета фона, текста и ссылок, также даёт возможность указать заголовок. Я указал лишь цвет фона – травянисто-зелёный, и заголовок, всё остальное осталось по дефлоту, потому что цвет текста и ссылок нужно было подбирать на уже имеющемся фоне, для неплохой смотрибельности.

Опосля нажатия “Ok”, в моей первой страничке уже были прописаны нужные теги. 1-ый просмотр! Передо мной стало пустое зеленоватое поле с заголовком вверху. Ну что все-таки, подумаем над шапкой. Поначалу я желал расположить там просто текст приветствия, но, подумав, решил поместить фото нашего городка – всё-таки веб-сайт о городке.

И здесь я впору вспомянул о разрешениях. У половины юзеров стоит экранное разрешение 800*600, у 2-ой половины 1024*768, остальные разрешения употребляются весьма изредка. веб-сайт должен отлично смотреться при обоих разрешениях. Я лицезрел веб-сайты, изготовленные для просмотра при 1024*768, при разрешении 800*600 создаётся необходимость горизонтальной прокрутки, что весьма мешает просмотру веб-сайта. А если сделать веб-сайт при разрешении 800*600, и выровнять все объекты по центру, то во время просмотра на 1024*768 он смотрится даже лучше. Так я и сделал.

Итак, набросок. Если создать его шириной 800 пикселей, то при разрешении 800*600 он будет занимать по ширине весь экран – не весьма прекрасно. означает, необходимо создать его незначительно поуже по ширине. Посмотрев фото, я нашёл пригодную, шириной 752 пикселя, с изображением акимата. Я уже собирался вставить её в страничку, и здесь увидел её объём – 120 Кб. При обыкновенном модеме, качающем не наиболее 4 Кб в секунду, лишь набросок раскрывался бы полминуты. Ни один юзер, помыслил я, не выдержит схожей пытки, и покинет веб-сайт ещё до его загрузки. Необходимо было как-то уменьшить объём рисунка. Имелось два метода – обрезать его по высоте и снизить свойство. Я решил употреблять оба, потому что чем меньше объём, тем лучше. Для этого я избрал наилучшую программку для обработки изображений – всеми общепризнанный AdobePhotoshop. Опосля нескольких щелчков мышью, высота рисунка поменялась с 500 на 156 пикселей. Осталось снизить свойство. При сильном снижении (1-3) объём весьма очень миниатюризируется, но смотрится набросок так, что продолжать работу с моим веб-сайтом не стал бы никто. При маленьком снижении (8-10) набросок смотрится непревзойденно, но объём очень большенный – ещё ужаснее. Выбор пал на середину (6), хорошее свойство и объём 31 Кб, означает, загрузка рисунка осуществится наименее чем за 8 секунд – это ещё можно терпеть. В итоге вышла фото 752*156 пикселей объёмом 31 Кб.

Поместив её в папку с веб-сайтом, я открыл html-редактор, и опосля нажатия нескольких клавиш набросок расположился вверху странички, с сглаживанием по центру. Хорошо, но чего-то не хватает. Я решил, что было бы хорошо наложить на набросок надписи, содержащие короткое описание моего веб-сайта – к примеру, заглавие и то, что он содержит.

опять открыв набросок в Фотошопе, я написал в верхнем левом углу рисунка “kostanay-city.kz”, а в правом нижнем короткое содержание веб-сайта – “сведения, фото, программки”. При помощи таковых эффектов, как внутренний свет, рельеф и др., я достигнул того, чтоб надписи прекрасно смотрелись на фото. Сохранив набросок с этим же именованием, я обновил страничку. Вот это уже лучше! На этом работа с шапкой была закончена.

текст. Опосля производства шапки странички, самое время было взяться за текст, избрать размер, стиль шрифта и содержание страничек. Я решил, что всего на веб-сайте будет 6 страничек. 1-ая страничка будет приветственной, 2-ая будет содержать описание сотворения городка, 3-я страничка будет показывать нынешний Костанай, четвёртая будет содержать фото городка, 5-ая – программки, имеющие отношение к Костанаю, а шестая – благодарности.

Опосля маленьких размышлений я накидал приветственный текст последующего содержания: “ЗДРАВСТВУЙТЕ! Добро пожаловать на веб-сайт о Костанае! Тут Вы найдёте огромное количество инфы о этом городке, как о его разработке, так и крайние сведения о нём. тут Вы сможете просмотреть и скачать фото городка. Также на веб-сайте доступны разные программки и файлы, имеющие отношение к Костанаю и Казахстану, к примеру телефонный справочник городка, подробные карты и т.д. Благодарим за посещение веб-сайта и до встречи!”.

Потом я длительно выбирал пригодный шрифт. Мне нравился шрифт Georgia, но он находится не во всех операционных системах. TimesNewRoman, Courierи Verdanaиспользуются практически на всех веб-сайтах. Потому я избрал Comic Sans MS, незначительно напоминающий рукописный текст.

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

Потом я длительно подбирал цвет текста, почти все цвета хорошо смотрелись на зелёном фоне, но тормознул я на красно-коричневом.

Клавиши и таблицы. Итак, настало время взяться за клавиши. Обыкновенные прямоугольники смотрелись далековато не весьма прекрасно, а сделать клавиши с непрямыми углами проще всего было в MacromediaFlash. Потому что я сам разбирался в данной нам программке весьма слабо, пришлось прибегнуть к помощи студента из параллельной группы. За пару часиков он сделал 5 хороших кнопочек, загорающихся при наведении на их указателя мыши. Клавишей, ведущей на первую страничку, я решил создать шапку странички, потому что она не изменялась во всех страничках моего веб-сайта.

На этом создание клавиш было завершено, осталось прекрасно расположить их относительно текста. Идеальнее всего смотрелась страничка при расположении клавиш в столбик слева от текста приветствия. Весьма длительно я бился над сглаживанием клавиш и текста, пока не расположил их в таблицы, клавиши в одну, а текст – в другую, а таблицы – рядом вместе. Всё сходу встало на свои места и сделалось смотреться намного лучше. Естественно же, рамки таблиц пришлось убрать, потому что с ними страничка смотрелась ужаснее.

Всё было отлично, но как создать, чтоб это всё не смотрелось ужаснее при смене разрешения? И я решил поместить таблицу с клавишами и таблицу с текстом в одну огромную таблицу с шириной 752 пикселя, под верхний набросок, и расположить её по центру. сейчас ничего никуда не съезжало при смене разрешения. Эту же структуру я сохранил и при разработке других страничек моего веб-сайта.

Баннеры и авторство. Чего же же ещё не хватает, задумывался я, глядя на получившуюся страницу и памятуя странички, виденные мною в Вебе? естественно же, баннеров. Зайдя на веб-сайты о Костанае www.kostanay.netи www.kostanai.kz, также на веб-сайт костанайской газеты “Твой Шанс”, я скопировал их баннеры, уменьшил их в Фотошопе и расположил в таблицу, а таблицу расположил под главный с сглаживанием по центру. Для наиболее чёткого отделения баннеров от текста приветствия я расположил над ними горизонтальную черту.

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

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

3.3 Создание 2-ой странички

При разработке 2-ой странички, содержащей историю сотворения городка, я просто скопировал html-код главной странички, потом удалил текст приветствия и вставил на его пространство короткое описание странички. Дальше я вставил ещё одну горизонтальную черту. В итоге вышла копия первой странички, лишь с остальным текстом приветствия и 2-мя горизонтальными чертами над баннерами. А меж этими чертами я расположил главный текст странички, содержащий саму историю сотворения городка. И, естественно же, я изменил заголовок странички.

Опосля набора 17 страничек книжки «КУСТАНАЙ: ВЧЕРА, СЕГОДНЯ, завтра«, содержащих подходящий материал, страничка с историей была готова.

3.4 Создание странички с описанием городка

Работа над третьей страничкой заняла у меня больше времени, чем над всеми остальными, потому что содержала больше всего материала. Набор 10 разделов по несколько страничек текста, в большенном количестве содержащего кавычки, скобки, примеры и цифровые характеристики – это дело не пары дней. К тому же, для наилучшей навигации по страничке я решил ввести в неё якоря – ссылки снутри странички. Под первой горизонтальной чертой я расположил в столбик наименования всех разделов, сделав каждое ссылкой на начало соответственного раздела. А в конце всякого раздела я расположил схожие ссылки, ведущие на начало перечня якорей. Таковым образом, просмотр странички намного ускорялся. Также в конце всякого раздела, под ссылкой, я вставил горизонтальную черту, для наиболее чёткого отделения разделов друг от друга.

На этом и 3-я страничка была готова.

3.5 Страничка с фото

В четвёртой страничке сохранилась та же структура, что и в первых трёх, просто заместо основного текста нужно было выложить фото городка. Объём каждой фото составлял, в среднем, 70 Кб. Если на одной страничке выложить их все, то её загрузка заняла бы большущее время, а создавать несколько страничек было недозволено. Для решения задачи я при помощи Фотошопа сделал уменьшённые копии каждой фото и вставил их в таблицу. Под каждой малеханькой фото я сделал ссылку, ведомую на её увеличенную копию. Всего на страничке представлено 39 фото, объём каждой уменьшенной фото составил не наиболее 4 Кб, потому страничка обязана загружаться меньше, чем в минуту. А если юзер захотит скачать все фото, то нет необходимости закачивать их по одной – имеется возможность скачки ZIP-архива, содержащего все фото.

Таковым образом, была завершена работа над четвёртой страничкой моего веб-сайта.

3.6 Страничка с программками

На пятой страничке должны были помещаться программки, имеющие отношение к Костанаю, статьи и гимн Казахстана. Припомнив структуру веб-сайтов, содержащих софт, я собрался сделать снимки экрана каждой программки и отдать короткие описания. Таковым образом, страничка смотрелась так – под текстом, содержащим описание странички, размещалась горизонтальная черта, ниже заглавие программки, потом с, описание и ссылка для закачивания. Позднее я сделал и снимки экрана статей. Каждую программку либо статью делила горизонтальная черта, для точного отделения их друг от друга. Также я выложил для скачки гимн Казахстана в формате mp3, и программу-архиватор WinRAR. На этом 5-ая страничка была завершена.

3.7 Страничка с благодарностями

Над крайней страничкой я работал около 15 минут, так она содержала просто благодарности всем, кто помогал мне сделать веб-сайт. Благодарности представлены в виде маркированного перечня.

Заключение

Надеюсь, опосля чтения данной нам работы вы сообразили её смысл – хоть какой человек, имеющий терпение и старательность, сумеет сделать электрический веб-сайт своими руками, в случае надобности не прибегая к помощи экспертов.

На создание собственного веб-сайта я издержал около полутора месяцев. Кое-что мне давали подсказку, но большая часть затруднений я разрешал сам, отыскивая ответ в самоучителе. естественно, специалист сделал бы таковой веб-сайт за некоторое количество дней, но сходу специалистом ещё никто не становился. Заметив какие-то недочёты в устройстве веб-сайта, прошу не забывать, что это моя 1-ая серьёзная работа в html.

Спасибо за чтение!

Перечень использованной литературы

1. Алленова Наталья – Самоучитель по html.

2. Статья в Вебе www.akdi.ru/INTERNet/html32/akdi.htm

3. веб-сайт www.ic.vrn.ru/

4. веб-сайт www.arachnoid.com/arachnophilia

5. веб-сайт www.rzn62.narod.ru

6. веб-сайт www.mysite.hut.ru

7. Статья “Тезисы выступления акима Костанайской области”

8. Статья География Казахстана”

9. Статья “Казахстан 2030”

10. Личные конспекты

]]>

Перейти и растаять в своей любимой социалке

Учебная работа. Контрольная работа: Создание Web сайта на языке html

Учебная работа. Контрольная работа: Создание Web сайта на языке html

Как? Вы еще не читали? Ну это зря...