Курсовая работа по созданию сайта. Реферат структура сайта

Курсовая работа по созданию сайта

Содержание

Введение

3

Глава 1 Анализ программного обеспечения по разработке сайта

1.1 Обзор существующих языков создания сайта

5

1.2 Возможности языка гипертекстовой разметки HTML

7

Глава 2 Этапы создания сайта «Мир вышивки»

2.1 Разработка структуры сайта

9

2.2 Описание процесса создания сайта

13

2.3 Руководство пользователя

17

Заключение

24

Список источников и литературы

25

Введение

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

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

По мнению исследователей Богуславской И.Я., Стасова В.В., Динцес Л.А. и Городцева В.А. [2.5] русская вышивка была подвержена сильному влиянию рукоделия Византии. Явное смешение стилей придает предметам русского вышивального искусства особую оригинальность, самобытность и неповторимость.

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

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

Объектом исследования является процесс разработки сайта.

Предмет – язык гипертекстовой разметки HTML как средство создания сайта.

Цель – разработать сайт «Мир вышивки» с использованием языка гипертекстовой разметки HTML.

Задачи:

1. Проанализировать существующие языки для написания сайта.

2. Рассмотреть функциональные возможности HTML.

3. Рассмотреть источники по теме.

4. Разработать макет сайта.

5. Наполнить сайт информацией по теме.

6. Разработать руководство пользователя.

При написании курсового проекта использовались метод теоретического исследования (анализ) и эмпирический метод (изучение источников литературы).

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

Глава 1 Анализ программного обеспечения по разработке сайта

1. 1. Обзор существующих языков создания сайта

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

FrontPage - входит в состав пакета приложений Microsoft Office.

Данное приложение при разработке страниц веб-узла пользуется html-движком Trident, который лежит в основе браузера Internet Explorer. В браузерах, использующих другие движки, например Gecko, страницы, созданные с помощью FrontPage, могут отображаться по-другому. Программа обладает широким спектром возможностей, в частности, может автоматически отправлять изменения, внесённые разработчиком сайта в исходные тексты, в режиме реального времени [1.3].

CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL [2.2].

Macromedia Dreamweaver - программа была создана разработчиками специально для того, чтобы облегчить работу по созданию любых сайтов, начиная с домашней страницы и заканчивая коммерческим сайтом. Эта программа хорошо подходит начинающим WEB-дизайнерам, которые только делают первые шаги к созданию своего собственного сайта [1.3].

Web Page Maker – это очень простой инструмент для создания WEB – страниц. С его помощью можно создать свою страничку даже не обладая никакими знаниями HTML. Просто перетаскивая мышкой на рабочее пространство программы изображения, текст, музыку и видео. Во время работы с лёгкостью можно передвигать объекты по всей странице. Web Page Maker содержит несколько высококачественных шаблонов, которые помогут начать работу. Также вместе с программой поставляются различные эскизы, Java - скрипты, таблицы, формы и т. д. В программу встроен FTP-менеджер, с помощью которого можно опубликовать свой сайт в интернете [1.6].

WebSite X5 Evolution - полноценная программа для создания web-сайтов, за несколько шагов пользователь сможет создавать и опубликовывать профессиональные веб-сайты и онлайн-магазины. Не требует знаний программирования, имеет более 1000 готовых шаблонов веб-сайтов, проста в использовании, по сравнению с другими программами по визуальному сайтостроительству. Сайты созданные в данной программе совместимы с разными интернет-браузерами, могут просматриваться с мобильных телефонов и индексируются поисковыми системами. Программой могут пользоваться пользователи, которым нужно простое и быстрое создание собственного веб-сайта или веб-галереи. Бизнесмены могут использовать данную программу для профессионального создания корпоративных веб-сайтов или онлайн-магазинов. Данная программа не имеет никаких ограничений по количеству создаваемых страниц и веб-сайтов [1.3].

HTML - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме [2.2].

В выше перечисленных программах есть такие недостатки как:

1. Работа с таблицами. В программах имеется отдельная утилита для редактирования таблиц (Table Editor), но она не интегрирована в главную программу и требует экспортирования таблиц в виде графического объекта, что затрудняет работу с ним [1.7].

2. Требования к аппаратным и программным средствам при установке программы.

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

4. Не во всех программах включены в библиотеку различные заготовки: библиотек Java - скриптов, таблиц, форм, фреймов, изображений и множества дополнительных функций [2.2].

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

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

1. 2. Возможности языка гипертекстовой разметки HTML

Язык HTML лучше всего подходит для создания интерактивных сайтов, страниц с использованием современных мультимедийных форматов (музыка, фото и видео, игры) [2.1]. Причем все эти мультимедиа воспроизводятся прямо в браузере, без вызова дополнительных программ типа Adobe Flash.

Язык HTML, несмотря на кажущуюся поначалу сложность, очень простой, можно даже сказать, примитивный. Он состоит из небольшого набора тегов (от англ. tag) - элементов языка разметки, таких как текст, иллюстрация, таблица и их атрибутов – параметров, определяющих дополнительные свойства тега [1.1].

Писать сайт на языке HTML можно в текстовом редакторе «Блокнот», который входит в набор стандартных программ любой операционной системы.

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML, скорее всего, будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения.

Один недостаток гипертекстовой разметки HTML – знания языка гипертекстовой разметки (теги, атрибуты).

Глава 2. Процесс создания сайта «Мир вышивки»

2.1 Разработка структуры сайта

Разработка структуры web-сайта является одним из ключевых моментов его создания, который в большой степени определяет эффективность его функционирования в будущем. С технической точки зрения структура сайта – это не что иное, как все его страницы, расположенные в порядке их значимости для пользователей, то есть иерархии [1.7].

Разрабатывая структуру для будущего сайта, очень важно учитывать то, что сегодня выигрывают, прежде всего, те интернет-ресурсы, которые могут обеспечить своим пользователям быстрый доступ к любой информации, находящейся на их страницах [2.4].

Структура сайта «Мир вышивки»:

1. Главная страница (история развития вышивания).

2. Галерея (картины крестиком, картины бисером, картины лентами, картины гладью).

3. Контакты.

4. Оценка стоимости картин.

На главной странице будет находиться меню-ссылки, по которым можно перейти в галерею, контакты и перейти по ссылке «Оценка стоимости картин», просмотреть краткую историю развития вышивки. На рисунке 1-3 изображена главная страница сайта.

Рисунок 1. Главная страница сайта

Рисунок 2. Меню-ссылки на другие страницы

Рисунок 3. История вышивания

На странице галерея можно будет просмотреть работы, готовые картины (вышитые крестиком, бисером, лентами, гладью), сделать заказ, написать комментарий. На рисунках 4-7 изображены веб-страницы сайта готовых работ.

Рисунок 4. Картины бисером

Рисунок 5. Картины гладью

Рисунок 6. Картины крестиком

Рисунок 7. Картины лентами

Перейдя по ссылке «Контакты» можно обратиться по указанному номеру, написать на электронную почту (соц.сети) для получения дополнительной информации, которая заинтересует. На рисунке 8 изображена веб-страница «Контакты».

Рисунок 8. Веб-страница «Контакты»

Оценка стоимости картин – это дополнительный сайт, в котором можно самостоятельно оценить работу с помощью онлайн калькулятора, который изображен на рисунке 9.

Рисунок 9. Оценка стоимости картин

2.2 Описание процесса создания сайта

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

Это оглавление страницы

Здесь расположено основное содержание страницы

.

Первая страница сайта создана. После этого, нужно сохранить документ, при этом поменяв расширение с txt на html. После этого, страница сайта будет открываться уже не  через блокнот, а в браузере [2.6]. Пример написания страницы показан на рисунке 10.

Рисунок 10. Начало кода страницы

Пара тегов  показывает браузеру, что данный документ является html – документом. Между ними располагается все содержимое моей странички. В том числе и пары тегов ,.

Содержимое тега содержит служебную информацию для браузера, и поисковых систем, и не отображается на странице, за исключением тега [2.3]. Тег предназначен для хранения основного содержимого страницы сайта, которое будет отображаться в окне браузера.

Содержимое тега это оглавление страницы. Его содержимое отображается на вкладке браузера. Это очень важный тег, так как именно он говорит поисковым системам, чему посвящена страница сайта [2.1]. Таким образом, для того, чтобы страница попала в выдачу поисковой системы по определенному запросу, этот запрос должен присутствовать в теге . Пример показан на рисунке 11.

Рисунок 11. Тег - оглавление страницы

Для написания создания сайта я использовала теги:

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

Переход на следующую строку, я использовала тег [2.6].

С помощью следующих тегов, абзацы текста были выровнены по левому краю, по правому краю, по ширине и по центру:

1. абзац выровнен по левому краю…

   .

2. абзац выровнен по правому краю…

   .

3. абзац выровнен по центру…

   .

4. абзац выровнен по ширине…

   .

Пример выравнивая текста по центру изображен на рисунке 12.

Рисунок 12. Выравнивание текста по центру

Были изменены размеры и виды шрифта:

1. Шрифт 1

   самый маленький.

2. <p><font size=«7»>Шрифт 7font>p> самый большой.

Виды шрифта:

1. Жирный текст.
2. Курсив.

3. <p><u>Подчеркнутый текстu>p>.

4. Жирный курсив.

Для лучшего восприятия текста, был изменен цвет текста:

Пример написания тегов изменения цвета изображен на рисунке 13.

Рисунок 13. Написание тега изменение цвета текста

С помощью тега <body background…> был задан фон картинкой каждой веб-страницы [2.3].

На веб-страницах (Картины крестиком, бисером, лентами, гладью) были изменены размеры картинок в таблице с помощью тега .

Текстовая ссылка:

С помощью текстовой ссылки был осуществлен переходов между страницами сайта, внутри текста на одной странице, а также и на другие сайты [2.6].

1. Ссылка на главную страницу сайта.

2. Ссылка на 001 страницу сайта.

3. Ссылка на другой сайт.

Пример текстовых ссылок изображен на рисунке 14.

Рисунок 14. Написание текстовых ссылок в блокноте для сайта

Для удобного просмотра картинок на каждой веб-странице, с помощью тегов создана простейшая таблица:

Пример простейший таблице показан на рисунке 15.

Рисунок 15. Написание таблицы для сайта в блокноте

2.3 Руководство пользователя

На главной странице сайта находятся меню-ссылки по которым можно перейти на другие страницы. А так же на главной странице можно прочитать историю развития разной вышивки. На рисунках 16-19 показаны ссылки на другие страницы.

Рисунок 16. Ссылки на другие веб-страницы

Рисунок 17. История вышивания крестиком

Рисунок 18. Ссылки для перехода на другую страницу истории вышивания

Рисунок 19. История вышивания бисером.

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

Рисунок 20. Указание размера под каждой готовой работой

Так же под каждой картинкой в таблице иметься поле для написания комментария. В этом поле можно написать любой интересующий вопрос, любой комментарий к картинам. После написания комментария нужно нажать кнопку отправить, и ваш комментарий будет отправлен. Если вы написали не тот комментарий, следует просто нажать крестик и ваше предложение будет удалено. На рисунках 21-22 изображено поле для написания комментариев и кнопка для отправки.

Рисунок 21. Поле для написания комментария и кнопка для отправления

Рисунок 22. Удаления комментария

После написания комментария нажав на кнопку «отправить», высветиться окно, которое изображено на рисунке 23.

Рисунок 23. Окно после отправки комментария.

Если вы хотите сделать заказ, вам нужно под картинкой в таблице поставить «галочку», как указанно на рисунке 24.

Рисунок 24. Оформление заказа

После нажатия кнопки «Заказать», вам нужно будет заполнить ваши данные.

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

Рисунок 25. Окно после заказа картины

Перейдя по ссылки «Контакты», вы можете обратиться по указанному номеру, написать на электронную почту (соц.сети) для дополнительной информации. На рисунке 26 изображена веб-страница «Контакты».

Рисунок 26. Веб-страница «Контакты»

Так же, на главной веб-странице есть ссылка на другой сайт, который оценивает стоимость картин. Перейдя по ссылки «Оценка картин», вы сможете самостоятельно оценить стоимость готовой работы. На рисунке 27 показан пример сайта «Оценка стоимости картин»

Рисунок 27. Оценки картин крестиком на сайте «Оценка стоимости картин»

Заключение

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

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

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

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

Список источников и литературы

1. Литература

1. 1. Дуванов А. А. Web-конструирование. – Петербург: 2009. - 384 с.

   2. Едомский Ю. Е. Техника Web-дизайна для студента. – Петербург: 2010. - 491 с.

   3. Крамер Э. HTML: наглядный курс Web-дизайна. - Киев: 2009. - 304 с.

   4. Леонтьев Б. Web-дизайн. Руководство пользователя. - Киев: 2011. - 384 с.

   5. Печников В. Н. Создание Web-страниц и Web-сайтов. - М.: Триумф: 2010. - 370 с.

   6. Роббинс Д. Web-дизайн. Справочник. - "КУДИЦ-ПРЕСС": 2009. - 816 с.

   7. Смирнова И. Е. Начала web-дизайна. –Петербург: 2010. - 491 с.

2. Интернет-ресурсы

   1. HTML и Web дизайн для начинающих: [Электронный ресурс]. - http://sovet.h2.ru (дата обращения: 29.03.2014)

   2. Основы CSS и HTML: [Электронный ресурс]. - http://www.web-lesson.ru (дата обращения: 1.03.2014)

   3. Создание сайтов: HTML: [Электронный ресурс]. - http://www.codeharmony.ru (дата обращения: 15.05.2014)

   4. Архитектурная мастерская. Создание сайта: [Электронный ресурс]. - http://wonderfulstyle.ucoz.com (дата обращения: 23.04.2014)

   5. Магия творчества. История вышивания: [Электронный ресурс]. - http://myhobbi.net (дата обращения: 14.04.2014)

   6. Создание страниц сайта с помощью HTML: [Электронный ресурс]. - http://roumik.ru (дата обращения 31.03.2014)

   7. Создание шаблона сайта с помощью CSS: [Электронный ресурс]. - http://ruseller.com (дата обращения 1.05.2014)

infourok.ru

Реферат - Создание web-страницы - Информатика, программирование

КАК СОЗДАТЬ WEB-СТРАНИЦУ

Самый простой способ создать страницу для размещения в Интернете — воспользоваться инструментами пакета Microsoft Office. Последние версии этого пакета предоставляют возможность преобразовать обычный документ в HTML-формат с неплохим качеством кода.

Возможности Word

Подготовленный в текстовом редакторе Word документ можно легко преобразовать в web-страницу. Однако она будет выглядеть не столь привлекательно, как хотелось бы, если не предпринять дополнительные шаги. Рассмотрим несколько примеров.

Возьмем некоторый текст.

Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню — позиция Файл). Тогда html-представление документа будет иметь вид:

Первое, что бросается в глаза — текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.

Использование таблицы

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

Фон и стиль

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

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

Вставка картинки

В документ можно добавить картинку, взяв ее, к примеру, из коллекции клипов.

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

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

В документе при этом не будет создаваться лишнего пустого пространства.

Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование — Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.

Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.

Бегущая строка

Word позволяет внести на web-страницу и другие оформительские элементы, например «бегущую строку». Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню — позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает дополнительное окно для задания текста параметров бегущей строки.

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

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

Использование шаблонов оформления

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

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

Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат — Тема.

Создание гиперссылок и закладок

Последний вопрос, который мы планируем рассмотреть в данном разделе — создание гиперссылок в документе.

Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка — Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.

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

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

Тогда при создании гиперссылки нужно указать эту закладку (кнопка Закладка… расположена в правой части формы), выбрав, например, ее из списка в форме:

Веб-презентация в PowerPoint

Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.

Вы можете открыть подготовленную презентацию и выполнить операции (из главного меню) Файл — Сохранить как веб-страницу. Как обычно нужно задать имя веб-презентации в открывшемся окне. В результате выполнения преобразования презентации будет создан файл с заданным именем и расширением .htm и одноименная папка с дополнительными материалами.

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

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

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

С помощью кнопки Показ сладов можно просматривать слайды на полном экране.

Создание гиперссылок

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

Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий. Создадим новый слайд — оглавление коллекции.

Если новый слайд получился не первый в последовательности, то нужно выйти в режим сортировщика слайдов (из главного меню с помощью операций Вид — Сортировщик слайдов) и перетащить новый слайд в начало коллекции.

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

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

Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.

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

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

После выполнения преобразования презентации в веб-формат наша первая страница будет иметь вид:

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

Обзор редакторов для верстки веб-страниц

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

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

Редакторы для верстки веб-страниц бываю двух типов: визуальные и текстовые.

Визуальные редакторы не требуют от вас знаний html, css и прочих технологий для разметки страниц. В визуальном редакторе вы располагаете различные элементы вашего сайта, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get — что видишь, то и получаешь.

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

Какого же типа вам следует заводить редактор? Если вы изучаете html, css или другие технологии для разметки страниц, если вы хотите уметь создавать качественные страницы и быть профессиональным кодером, то безусловно вам нужен текстовой редактор. Если же у вас нет времени на изучение html, css и прочих технологий, если перед вами не стоит очень сложных задач в выполнении страницы, то смело заводите себе визуальный редактор и пользуйтесь им, он очень экономит время и силы. А лучше всего иметь у себя на компьютере и визуальный, и текстовой редакторы для разных нужд.

ВИЗУАЛЬНЫЕ РЕДАКТОРЫ

Macromedia Dreamweaver MX

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

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

Adobe GoLive и LiveMotion

Возможно, Adobe GoLive понравится тем, кто любит программы от Adobe, и много с ними работал: знакомая среда, достаточно легко разобраться, что к чему. Кроме того, еще один плюс для любителей Adobe — все программы от Adobe прекрасно взаимодействуют друг с другом и дополняют друг друга, GoLive не исключение, он прекрасно дружит с собратьями. Однако, GoLive не более, чем визуальный редактор для верстки веб-страниц, больше чем поддержки таких технологий, как Html, Dhtml, CSS, XML и нескольких готовых Javascript`ов не стоит ждать от этой программы. Однако, следует отметить, что встроенный редактор кода (текстовой) в этой программе очень хороший. Т.е. возможно, GoLive оптимальное сочетание визуального и текстового редактора (два в одном).

Хочу также добавить, что, вероятно, стоит использовать с GoLive такую программу, как Adobe LiveMotion (в предыдущих версиях она называлось Image Styler). Хотя, по идее, LiveMotion является графическим редактором, в котором вы можете создавать незатейливую, но качественную графику для своих веб-сайтов, эта программа также умеет верстать веб-странички, на основе того, что вы нарисовали (не лучшим образом, но довольно прилично, плюсом является то, что LiveMotion сам режет готовый макет на много картинок, которые вы потом можете использовать при верстке сайта в GoLive).

Microsoft FrontPage

Если верить разработчикам, то программа FrontPage позволяет создавать веб-узлы, обладающие широкими возможностями, а также предоставляет средства управления ими. На деле, FrontPage дружит с Html, Css, Dhtml, Javascript. Дает достаточно широкие возможности по управлению изображениями и flash-ролликами. Кроме того FrontPage дружит с такими технологиями, как ASP, XML, VBScript, XSL. Также разработчики утвержают, что в последней версии FrontPage теперь борется за чистоту кода, что ж, остается надеятся, что это так, т.к. раньше данный пункт был не на высоте (раньше FrontPage вставлял в код очень много ненужных комментариев и другой лишней информации, так что правильностью и чистотой кода странички, сделанные в этом редакторе похвастаться не могли).

Hotdog

Программа имеет простой и понятный пользователю интерфейс. Кроме того, что Hotdog дружит с пользователем, эта программа дружит также с Flash, SQL, PHP, ASP, имеет работать с GIF-изображениями (оптимизация, анимация), включает в себя Html-компрессор, может создавать файлы справки (CHM).

ТЕКСТОВЫЕ РЕДАКТОРЫ

Homesite

Этот редактор, пожалуй, самый популярный и мощный среди текстовых, и не зря. Кроме того, что в нем достаточно легко работать не только с Html-кодом (есть все, от списка всевозможных атрибутов ко всем тегам вплоть до проверки кода (правильность проверяется с точки зрения W3C.org)), но также есть поддержка XHTML, CSS-редактор, и так далее.

HTML Pad

Эта программа тоже пользуется большой любовью пользователей. Помимо всего стандартного HTMLPad поддерживает JavaScript, VBScript, SSI, ASP и Perl, умеет создавать макросы (нападобие Word`a и Excel'я), включает в себя кучу различных справочных материалов по CSS и Html, и многое другое.

Notepad

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

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

Если вы считаете, что какой-то редактор для верстки веб-страниц был несправедливо упущен в этой статье, если вы знаете ценный учебник или статью по какому-либо редактору, если вы считаете, что мы незаслуженно отругали или похвалили тот или иной редактор, то сообщите нам об этом на Форуме, или по Е-майл ([email protected]), мы обязательно прислушаемся к вашему мнению и постараемся исправиться.

www.ronl.ru

Реферат - Создание 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 Создание второй страницы

3.4 Создание страницы с описанием города

3.5 Страница с фотографиями

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

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

Заключение

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

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

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

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

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

1. Основные сведения

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-броузерах различных типов и на различных платформах.

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-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <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, следующий — 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак «1». Синтаксис заголовка уровня 1 следующий:

<h2>

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

</h2>

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

<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>

<h3> Список сотрудников нашей фирмы </h3>

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

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

всех сотрудников нашей компании. <P>

Список может быть использован только в служебных целях. <P>

</BODY>

</HTML>

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

Список сотрудников нашей фирмы

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

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

Список может быть использован только в служебных целях.

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

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

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

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

<BR CLEAR=left|right|all>

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

<p> Как вы можете видеть, данная схема демонстрирует связь<BR CLEAR=left> <img src=«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.

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

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

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

в) список описаний

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

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

Пронумерованный список начинается стартовым тэгом <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>

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

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

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

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

Пронумерованный список начинается стартовым тэгом <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> <h3> Список сотрудников нашей фирмы </h3> <h4> Составлено: 30 июля 1996 года </h4> Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <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> может иметь параметры:

<OL TYPE=disc|circle|squade> или<OL TYPE=A|a|I|i|1 VALUE=n>

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

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-сайтов.

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

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

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

Следующий пример представляет собой вызов HTML-документа index.html с сервера www.softexpress.com с использованием 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-документу в сети). Например: www.softexpress.com/ — доступ к Home-странице компании SoftExpress

ftp:

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

mailto:

активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:[email protected] — активизирует сессию посылки сообщения пользователю 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-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: 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> — закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-броузером. Обычно этот текст отображается подчеркнутым и выделен синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается броузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте). Вот пример сегмента HTML-документа:

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

Данная строка будет выглядеть на экране следующим образом:

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

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

Для создания такой ссылки необходимо выполнить следующие шаги:

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

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

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

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

Например:

<p><b>Списокразделов</b></p> <ul> <li><a href="#ex1">Раздел1</a></li> <li><a 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.3 Графика внутри документа

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

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

<IMG SRC=«URL» ALT=«text» HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop ISMAP>

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

URL:

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

ALT=«text»:

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

HEIGTH=n1:

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

WIDTH=n2:

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

ALIGN:

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

ISMAP:

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

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

<IMG SRC=«www.softexpress.com/images/nekton.jpg» ALT=«СофтСервис лого» ALIGN=«top» ISMAP>

С версии HTML 2.0 у тэга <IMG> появились дополнительные параметры:

<IMG SRC=«URL» ALT=«text» HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5 ISMAP>

Новые параметры:

BORDER:

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

VSPACE:

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

HSPACE:

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

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

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

<BODYBACKGROUND=«picture.gif»>.

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

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX">

где каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:

BGCOLOR:

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

TEXT:

Цвет простого текста документа

LINK:

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

<BODYBGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

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

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

Форматтэга:

<HR SIZE=number WIDTH=number|percent ALIGN=left|right|center NOSHADE>

Параметры тэга:

SIZE:

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

WIDTH:

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

ALIGN:

Расположение на экране (слева | по центру | справа).

NOSHADE:

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

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

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

bold (жирный)

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

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

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

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

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

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

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

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

Дополнительные стили:

· big (большой)

· small (маленький)

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

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

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

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

<FONTSIZE=+|- n>

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

<BASEFONTSIZE=n>

Например:

<p>и<font SIZE=+1>з</font><font SIZE=+2>м</font> <font SIZE=+3>е</font><font SIZE=+4>н</font> <font SIZE=+3>е</font><font SIZE=+2>н</font> <font SIZE=+1>и</font> е</p>

изменение

Цвет шрифта <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; вместо <.

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

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

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

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

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

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

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

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

Тэги формы:

TEXTAREA:

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

<TEXTAREA NAME=«address» ROWS=10 COLS=50>

Москва,

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

д.9Б, офис 448

</TEXTAREA>

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

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

ROWS — высота поля ввода в символах

COLS — ширина поля ввода в символах

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

INPUT:

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

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

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

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

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

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

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

CHECKBOX: Используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI-программу, может принимать значение ON или OFF.

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

IMAGE:

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

PASSWORD:

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

RADIO:

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

RESET:

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

SUBMIT:

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

TEXT:

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

VALUE — присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен).

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

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

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

Select multiple — позволяет выбрать несколько элементов из LISTBOX.

SELECT: Тэг SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.

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

<FORM>

<SELECT NAME=group>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

</SELECT>

</FORM>

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

<FORM>

<SELECT SINGLE NAME=group SIZE=4>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTIONS> Pentium PRO

</SELECT>

</FORM>

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

<FORM>

<SELECT SINGLE NAME=group SIZE=4 MULTIPLE=2>

<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>.

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

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

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

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

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

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

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

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

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

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

<HTML> <HEAD>...</HEAD> <FRAMESET>...</FRAMESET> </HTML>

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

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

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

<FRAME SRC=«url1»> <FRAME ...> ...

</FRAMESET>

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

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

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

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

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

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

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

Value:

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

value%:

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

value*:

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

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

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

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

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

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

<FRAMESET ROWS="*,60%,*"> — аналогично предыдущему примеру.

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

<FRAMESET ROWS=«50%,50%»>

<FRAMESET COLS="*,*"

</FRAMESET>

</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». Это атрибут может быть использован, если автор документа хочет указать величину разделительных полос между фреймами сбоку. Значение value указывается в пикселях и не может быть меньше единицы. По умолчанию данное значение зависит от реализации поддержки фреймов используемым клиентом броузером.

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

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

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

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

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

<FRAMESETROWS="*,*">

<NOFRAMES>

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

</NOFRAMES>

<FRAMESET COLS=«65%,35%»>

<FRAME SRC=«link1.html»>

<FRAME SRC=«link2.html»>

</FRAMESET>

<FRAMESET COLS="*,40%,*">

<FRAME SRC=«link3.html»>

<FRAME SRC=«link4.html»>

<FRAME SRC=«link5.html»>

</FRAMESET>

</FRAMESET>

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

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

TARGET=«windows_name»

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

TARGETв тэге A:

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

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

TARGETв тэге BASE:

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

Документ№ 1.

<FRAMESET ROWS=«20,*»> <FRAME SRC=«doc2.htm» NAME=«Frame1»> <FRAME SRC=«doc3.htm» NAME=«Frame2»> </FRAMESET>

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

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

TARGETв тэге AREA:

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

<AREA SHAPE=«circle» COORDS=«100,100,50» HREF=«www.softexpress.com» TARGET=«Frame1»>

TARGETв тэге FORM:

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

<FORM ACTION=«url» TARGET=«window_name»>

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

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

TARGET="_blank":

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

TARGET="_self":

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

TARGET="_parent":

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

TARGET="_top":

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

2.8 HTML Таблицы

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

Основные тэги таблицы:

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

Это основные тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом 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 может принимать числовое значение, определяющее ширину границы, например BORDER=3.

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%».

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

<TABLE BORDER=5>

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

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

значение</TH></TR>

<TR><TH>Рост</TH><TH>Вес</TH></TR>

<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 – Среднее значение

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

На данный момент в Web используется два типа растровых файлов: в форматах JPEG и GIF.

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

GIF-формат хорошо передает ровные плоскости цвета, жесткие границы (например, векторную графику, логотипы). Имеет максимальную компрессию, допускает прозрачный фон. Плохо масштабируется в броузере, искажает цветовые и тоновые раскаты. Используйте GIF-формат, если изображение без значительных потерь переводится в 128-цветовую гамму с включенной опцией «dithering». В противном случае лучше сохранять изображение в JPEG-формате. Для экспорта файла в GIF-формат сначала проиндексируйте его цветовую палитру в Adobe Photoshop:

1. Подбирайте минимальное количество цветов вручную (для качественной передачи антиалиасного одноцветного изображения на одноцветном фоне достаточно 5-8 цветов, двух-трехцветного изображения — 15-25 цветов) Если исходное изображение Grayscale, перед индексацией переведите его в RGB-гамму.

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример:

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

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

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

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

Пример:

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

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

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

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

Свойства элементов, управляемых с помощью 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 Подготовка

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

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

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

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

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

И тут я вовремя вспомнил о разрешениях. У половины пользователей стоит экранное разрешение 800*600, у второй половины 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 страниц. Первая страница будет приветственной, вторая будет содержать описание создания города, третья страница будет отображать сегодняшний Костанай, четвёртая будет содержать фотографии города, пятая – программы, имеющие отношение к Костанаю, а шестая – благодарности.

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

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

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

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

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

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

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

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

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

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

3.3 Создание второй страницы

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

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

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

На этом и третья страница была готова.

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

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

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

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

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

Заключение

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

На создание своего сайта я потратил около полутора месяцев. Кое-что мне подсказывали, но большинство затруднений я разрешал сам, отыскивая ответ в самоучителе. Конечно, профессионал создал бы такой сайт за несколько дней, но сразу профессионалом ещё никто не становился. Заметив какие-то недочёты в устройстве сайта, прошу не забывать, что это моя первая серьёзная работа в 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. Личные конспекты

www.ronl.ru

Смотрите также

• 
  Структура жидкости реферат
• 
  Структура женской консультации реферат
• 
  Реферат структура проекта
• 
  Реферат структура учебной деятельности
• 
  Реферат гены и их структура
• 
  Реферат структура социологического знания
• 
  Структура социологического знания реферат
• 
  Реферат социальная структура россии
• 
  Психологическая структура личности реферат
• 
  Структура биотехнологического производства реферат
• 
  Отраслевая структура мирового хозяйства реферат