Практическое занятие 1 (1). Занятие 1 Разработка Webсайтов

• Название: Занятие 1 Разработка Webсайтов
• Дата: 25.04.2023
• Размер: 345.35 Kb.
• Имя файла: Практическое занятие 1 (1).docx
• Тип: Занятие; #1088553

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-проектов в будущей профессиональной деятельности.

1. Как устроен HTML-документ

HTML - язык маркировки гипертекста. HTML-документ — это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Вот самый простой HTML-документ:

Привет!

Это простейший пример HTML-документа.

Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape.

Сохранив изменения в Notepad, просто нажмите кнопку Reload (перезагрузить) в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, ) называется меткой (по-английски — tag, читается "тэг").

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением "/". Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами (рисунок 1).

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

Заголовок страницы помещается в контейнер

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

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

Отображаемое в браузере содержание страницы помещается в контейнер .

Рисунок 1

2. Обязательные метки

1. 
   ...
   

Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.

Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки
Все, что находится между метками , толкуется браузером как название документа. NetscapeNavigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

4. ...
   
   

   Привет!

   
   
   Вставить пояснительный текст
   
   
   
   
   
   
   
   
   При этом фон страницы должен быть неярким и однородным.
   
   4. 
      Ввести команду ФайлСохранить. Файлу главной Web-страницы присвоить имя index.htm.
      
   5. 
      Войти в свой каталог на жестком диске компьютера и открыть созданный файл. Автоматически запустится браузер, в заголовке окна которого высвечивается Название вашего Web-сайта.
      
   6. 
      Пользуясь инструкциями пунктов 1.3 - 1.10 и приложениями А, Б, создать собственный Web-сайт с рисунками, таблицами, списком, бегущей строкой и гиперссылками. При этом другие страницы создаются в текстовом редакторе Блокнот аналогичным образом. По возможности для навигации лучше использовать тестовые меню, а не картинки с надписями.
      
   7. 
      В конце страницы сделать гиперссылку на любой текстовый или электронный внешний ресурс, например, сайт и т.д.
      
   8. 
      В процессе создания 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