ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 12.12.2023
Просмотров: 13
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
-
Практическое занятие № 1 Разработка Web-сайтов
Сайт (от англ.site) - это совокупность Web-страничек, как правило, объединенных какой-то общей тематикой (направлением). Понятие «сайт» можно ассоциировать с понятием «книга». Книга – это совокупность страниц, объединенных переплетом. Страницы внутри книги могут относиться и к одной, и к разным тематикам. Сайт – то же самое. Он может объединять страницы одного направления, а может обозначать огромную структуру Интернета, содержащую множество разнообразной информации.
Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language (HTML) - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Web-проекта.
Существует большое количество способов создания собственных Web - сайтов или Web - страниц, однако все они делятся на два основных типа: визуальный и программируемый. При использовании визуального способа пользователь как бы рисует или конструирует свою страничку на экране визуального редактора или конвертера, после чего программа по этому рисунку генерирует соответствующий код HTML. При программируемом способе пользователь сам вносит в свой текст так называемые «теги» или команды языка HTML. Но даже использование визуального способа не отменяет необходимости знать основы языка HTML, как например, проверка правописания в программе Word не отменяет необходимости писать правильно на русском языке. А также очень часто используемые при этом HTML-редакторы или конвертеры ограничены
в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах [3].
Физически Web - страница представляет собой обычный текстовый файл, в котором содержатся команды HTML и непосредственно текст и графика. Только текст этой страницы отличается от текста на бумаге тем, что он воспроизводится на экране, а текст с экрана неудобно читать, он может быть слишком мелким и при этом пользователь, который просматривает Web-страницу на своем компьютере в своем браузере, волен настроить свои шрифты по своему усмотрению. Поэтому при создании Web
-страницы создается не столько дизайн, сколько стиль. И если пользоваться набором собственных правил можно создать индивидуальный дизайн, который будет узнаваем. Дело в повторении некоторых элементов, определенных абзацных отступов, игре размерами и цветом.
Цель работы: приобретение опыта представления информации для реализации собственных Web-проектов в будущей профессиональной деятельности.
-
Как устроен HTML-документ
HTML - язык маркировки гипертекста. HTML-документ — это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Вот самый простой HTML-документ:
Привет!
Это простейший пример HTML-документа.
Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажмите кнопку Reload (перезагрузить) в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, ) называется меткой (по-английски — tag, читается "тэг").
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида
Web-страница помещается в контейнер и состоит из двух частей: заголовка и отображаемого в браузере содержания.
Заголовок страницы помещается в контейнер
. Заголовок содержит название страницы, которое помещается в контейнер и при просмотре отображается в верхней строке окна браузера.Также в заголовок помещаются не отображаемые при про- смотре мета-тэги, задающие кодировку страницы для ее прави- льного отображения в браузере, а также содержащие описание и ключевые слова страницы, которые в первую очередь про- сматривают роботы поисковых систем.
Отображаемое в браузере содержание страницы помещается в контейнер .
Рисунок 1
-
Обязательные метки
-
...
Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки
Все, что находится между метками , толкуется браузером как название документа. NetscapeNavigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
-
...
Привет!
Вставить пояснительный текст
При этом фон страницы должен быть неярким и однородным.-
Ввести команду ФайлСохранить. Файлу главной Web-страницы присвоить имя index.htm. -
Войти в свой каталог на жестком диске компьютера и открыть созданный файл. Автоматически запустится браузер, в заголовке окна которого высвечивается Название вашего Web-сайта. -
Пользуясь инструкциями пунктов 1.3 - 1.10 и приложениями А, Б, создать собственный Web-сайт с рисунками, таблицами, списком, бегущей строкой и гиперссылками. При этом другие страницы создаются в текстовом редакторе Блокнот аналогичным образом. По возможности для навигации лучше использовать тестовые меню, а не картинки с надписями. -
В конце страницы сделать гиперссылку на любой текстовый или электронный внешний ресурс, например, сайт и т.д. -
В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат. Для этого необходимо активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню ФайлСохранить. Затем активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница.
Приложение А
(справочное) Таблица А.1 - Основные теги HTML
Назначение
Формат
Значения аргументов
Структура Web-страницы
Начало и конец страницы
Описание страницы, в том
числе ее имя
Имя страницы
Содержание страницы
BACKGROUND=”URL”>
Цвет фона
BGCOLOR=”#RRGGBB”>
red, blue, #FFFFFF и др.
Цвет текста
Цвет ссылки
LINK=”#RRGGBB”>
Цвет пройденной ссылки
VLINK=”#RRGGBB”>
Цвет активной ссылки
ALINK=”#RRGGBB”>
Вставка гиперссылок
Ссылка на другую страницу
указатель
ссылки
Ссылка на закладку в
другом документе
указатель
ссылки
Ссылка на закладку в том же документе
HREF=”URL#*”>указатель ссылки
Определение закладки
Списки
Ненумерованный
Тип метки
disk, circle, sguare
Нумерованный
Тип нумерации
A, a, I, i, 1
Первый номер списка
1, 2, …
Меню
Каталог
Таблицы
Начало и конец
< /TABLE>
Строки таблицы
Содержание ячеек
Заголовки ячеек
<ТН>ТН>
Приложение Б
(справочное)Карта «безопасных» цветов
255.255.204
255.255.153
255.255.102
255.255.51
255.255.0
204.204.0
FFFFCC
FFFF99
FFFF66
FFFF33
FFFF00
CCCC00
255.204.102
255.204.0
255.204.51
204.153.0
204.153.51
153.102.0
FFCC66
FFCC00
FFCC33
CC9900
CC9933
996600
255.153.0
255.153.51
204.153.102
204.102.0
153.102.51
102.51.0
FF9900
FF9933
CC9966
CC6600
996633
663300
255.204.153
255.153.102
255.102.0
204.102.51
153.51.0
102.0.0
FFCC99
FF9966
FF6600
CC6633
993300
660000
255.102.51
204.51.0
255.51.0
255.0.0
204.0.0
153.0.0
FF6633
CC3300
FF3300
FF0000
CC0000
990000
255.204.204
255.153.153
255.102.102
255.51.51
255.0.51
204.0.51
FFCCCC
FF9999
FF6666
FF3333
FF0033
CC0033
204.153.153
204.102.102
204.51.51
153.51.51
153.0.51
51.0.0
CC9999
CC6666
CC3333
993333
990033
330000
255.102.153
255.51.102
255.0.102
204.51.102
153.102.102
102.51.51
FF6699
FF3366
FF0066
CC3366
996666
663333
255.153.204
255.51.153
255.0.153
204.0.102
153.51.102
102.0.51
FF99CC
FF3399
FF0099
CC0066
993366
660033
255.102.204
255.0.204
255.51.204
204.102.153
204.0.153
153.0.102
FF66CC
FF00CC
FF33CC
CC6699
CC0099
990066
255.204.255
255.153.255
255.102.255
255.51.255
255.0.255
204.51.153
FFCCFF
FF99FF
FF66FF
FF33FF
FF00FF
CC3399
204.153.204
204.102.204
204.0.204
204.51.204
153.0.153
153.51.153
CC99CC
CC66CC
CC00CC
CC33CC
990099
993399
204.102.255
204.51.255
204.0.255
153.0.204
153.102.153
102.0.102
CC66FF
CC33FF
CC00FF
9900CC
996699
660066
204.153.255
153.51.204
153.51.255
153.0.255
102.0.153
102.51.102
CC99FF
9933CC
9933FF
9900FF
660099
663366
Все цвета Интернета
В карте представлена палитра цветов, рекомендуемых для экранного дизайна.
При создании изображения для публикации в сети главной проблемой является правильная передача цветов на разных типах компьютеров, мониторов и браузеров. Когда браузер не в состоянии правильным образом передать тот или иной цвет,
он подбирает похожий или смешивает несколько соседних цветов (dithering). Иногда первоначальный цвет может быть заменен на что-то совершенно неподходящее.
Цвета из этой палитры везде будут отображаться правильным образом
и без искажений. Любой из 216 цветов
«безопасной» палитры может быть использован для графики, текста
и фонов.
Как пользоваться палитрой
Палитра состоит из 32 сочетаний 6 оттенков красного, зеленого
и синего. Эти градации — 0, 51, 102,
153, 204, 255.
Над каждым цветом указаны два значения — RGB (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML).
153.102.204
9966CC
153.102.255
9966FF
102.0.204
6600CC
102.51.204
6633CC
102.51.153
663399
51.0.51
330033
204.204.255
CCCCFF
153.153.255
9999FF
102.51.255
6633FF
102.0.255
6600FF
51.0.153
330099
51.0.102
330066
153.153.204
9999CC
102.102.255
6666FF
102.102.204
6666CC
102.102.153
666699
51.51.153
333399
51.51.102
333366
51.51.255
3333FF
51.0.255
3300FF
51.0.204
3300CC
51.51.204
3333CC
0.0.153
000099
0.0.102
000066
102.153.255
6699FF
51.102.255
3366FF
0.0.255
0000FF
0.0.204
0000CC
0.51.204
0033CC
0.0.51
000033
0.102.255
0066FF
0.102.204
0066CC
51.102.204
3366CC
0.51.255
0033FF
0.51.153
003399
0.51.102
003366
153.204.255
99CCFF
51.153.255
3399FF
0.153.255
0099FF
102.153.204
6699CC
51.102.153
336699
0.102.153
006699
102.204.255
66CCFF
51.204.255
33CCFF
0.204.255
00CCFF
51.153.204
3399CC
0.153.204
0099CC
0.51.51
003333
153.204.204
99CCCC
102.204.204
66CCCC
51.153.153
339999
102.153.153
669999
0.102.102
006666
51.102.102
336666
204.255.255
CCFFFF
153.255.255
99FFFF
102.255.255
66FFFF
51.255.255
33FFFF
0.255.255
00FFFF
0.204.204
00CCCC
153.255.204
99FFCC
102.255.204
66FFCC
51.255.204
33FFCC
0.255.204
00FFCC
51.204.204
33CCCC
0.153.153
009999
102.204.153
66CC99
51.204.153
33CC99
0.204.153
00CC99
51.153.102
339966
0.153.102
009966
0.102.51
006633
102.255.153
66FF99
51.255.153
33FF99
0.255.153
00FF99
51.204.102
33CC66
0.204.102
00CC66
0.153.51
009933
153.255.153
99FF99
102.255.102
66FF66
51.255.102
33FF66
0.255.102
00FF66
51.153.51
339933
0.102.0
006600
204.255.204
CCFFCC
153.204.153
99CC99
102.204.102
66CC66
102.153.102
669966
51.102.51
336633
0.51.0
003300
51.255.51
33FF33
0.255.51
00FF33
0.255.0
00FF00
0.204.0
00CC00
51.204.51
33CC33
0.204.51
00CC33
106
102.255.0
102.255.51 51.255.0
51.204.0
51.153.0
0.153.0
66FF00
66FF33 33FF00
33CC00
339900
009900
204.255.153
CCFF99
153.255.102
99FF66
102.204.0
66CC00
102.204.51
66CC33
102.153.51
669933
51.102.0
336600
153.255.0
99FF00
153.255.51
99FF33
153.204.102
99CC66
153.204.0
99CC00
153.204.51
99CC33
102.153.0
669900
204.255.102
CCFF66
204.255.0
CCFF00
204.255.51
CCFF33
204.204.153
CCCC99
102.102.51
666633
51.51.0
333300
204.204.102
CCCC66
204.204.51
CCCC33
153.153.51
999966
153.153.102
999933
153.153.0
999900
102.102.0
666600
255.255.255 204.204.204
FFFFFF CCCCCC
153.153.153
999999
102.102.102
666666
51.51.51
333333
0.0.0
000000
-