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

В настоящее время разработаны и продолжают разрабатываться расширения стандартного языка HTML, предназначенные для представления документов различных типов (XML – для сложно структурированных документов и баз данных, VRML – для описания трехмерных сцен «виртуальной реальности», Voice HTML - для распознавания речи и голосового управления WEB-страницами и другие).

ССЫЛКИ НА ИНФОРМАЦИЮ О HTML

http://www.machaon.ru/digest/rusinter.HTML.html- Обзор ссылок на статьи и издания по HTML

http://www.bytecity.ru/~grinjen/HTML/1/2.html - Основы HTML. Учебный курс из 5 занятий

http://www.online.ru/it/helpdesk/html32.htm- Спецификация HTML 3.2 (углубленное изучение)

http://www.design.ru/kovodstvo/paragraphs/12.html- фреймы: плюсы и минусы http://www.cherry-design.spb.ru/pages/articles.htm - Интересные статьи

http://www.citforum.ru

ЗАДАНИЕ НА ВЫПОЛНЕНИЕ ЛАБОРАТОРНОЙ РАБОТЫ

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

2. Обязательным условием является использование текстового, а не специализированного HTML-редактора, для того, чтобы почувствовать специфику ручного программирования html-страниц.

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

4. Оформить отчёт.

СОДЕРЖАНИЕ ОТЧЕТА

1.Постановка выбранной задачи.

2.Описание web-страницы:

• описание элементов (тэгов), используемых в HTML-файлах;

• структура и текст HTML-файла

• экранная форма

3.Выводы по работе.

Вопросы к защите

1.Сервисы и службы в сети TCP/IP (WWW, HTTP, FTPи др.).

2.Теговая структура HTML. Различие в понятиях: тэг, контейнер и элемент.

3.Структура HTML-документа

4.Логическое и физическое форматирование символов

5.Использование ссылок в языке HTML. Глобальные и локальные ссылки.

Лабораторная работа № 4 создание макета web-сайта

Цель работы: С использованием любого из доступных на рабочем месте web-редакторов (Notepad, MS Word, MS FrontPage и др.) создать многостраничный гипертекстовый документ – макет web-сайта с использованием большинства возможностей, предоставляемых инструментальной системой и имеющихся в Интернет.

Методические материалы

HTML-редакторы можно разделить на 4 типа: WYSIWYG, полу-WYSIWYG, не-WYSIWYG и notepad. WYSIWY(NT)G (что на экране, то и в результате… у вас, но не у всех остальных) (what you see is you [not they] get).

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

Для редактирования HTML-текста в режиме WYSIWYG можно использовать текстовый процессор MS Word. Начиная с версии MS Word 97, он позволяет набрать некоторый текст, отформатировать его и сохранить в формате HTML.

MS FrontPage 2000 представляет собой на сегодняшний день довольно мощный программный пакет. Для новичка в Web-дизайне трудно придумать более подходящий инструмент, нежели продукт, интерфейс которого полностью интегрирован с Microsoft Office 2000. Новая версия Web-редактора совмещает в одном пакете бывшие некогда отдельными программами FrontPage Explorer и FrontPage Editor.

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

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

Для работы с изображениями в WWW используют два основных формата: JPEG ( Joint Photographic Experts Group - объединенная группа экспертов фотографии ) и GIF, ( Graphical Interchange Format - графический обменный формат ) реже используют специально созданный формат PNG ( Portable Network Graphics - переносимая сетевая графика )

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

Фоновые изображения для сайта можно найти по адресам: http://textures.boom.ru и http://web.zero.ru/fon/background.shtml.

Для того, чтобы отладить технологию размещения на web-странице графических и мультимедийных объектов можно обратиться на сайты: http://www.caravan.ru/~sokolov/ и http://gifcollection.boom.ru , а также при помощи информационно-поисковых систем, например, http://www.yandex.ru или http://www.rambler.ru найти много различных картинок и массу ссылок на бесплатные коллекции шрифтов, фоновых изображений, пиктограмм, иконок, кнопок и т.д.

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

<A href="mailto:webmaster@domen.ru?Subject=E-mail to Web-master"> E-mail to Web-master. </A >.

В этом случае при клике на ссылку у посетителя запустится программа почтовый клиент, например: Outlook Express в которой автоматически подставится указанный Вами адрес.

Очень часто web-мастера размещают на своём сайте гостевую книгу - это делает общедоступными все отзывы и предложения. Чтобы обзавестись гостевой книгой, обратитесь, например, по адресу: http://www.guestbook.ru/.

Для реализации такой формы обратной связи прибегают к помощи CGI скриптов расположенных на сервере и обрабатывающих текст, вводимый посетителем в полях формы и затем отображающих текст сообщения непосредственно на этой странице. По такому же принципу можно организовать пересылку сообщений по указанному E-mail адресу, не прибегая к использованию почтового клиента Outlook Express. Для этого можно воспользоваться бесплатным удобным и легко настраиваемым формоотправителем по адресу: http://www.webclub.ru/free/sendform .

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

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

1. разработать дизайн-концепцию будущей страницы: т.е. выбрать название, шрифты, фон, цветовое оформление деталей страницы и набросать несколько её эскизов;

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

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

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

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

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

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

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