Создание Web страницы предприятия

HTML

1. Сохраните файл (Меню Файл Сохранить как). Выберите тип документа: "Все файлы". Имя файла задайте в формате name.html, например: Ivanov.html.

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

2. Используя атрибут bgcolor тега BODY задайте фон для страницы. Например так:

(названия основных цветов посмотрите в таблице)

или используя шестнадцатеричное значение "#RRGGBB", например

BODY bgcolor ="#A3FFFF"

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

H1 Страница Пети Иванова H1

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

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

P и P – выделение в абзац

BR и BR – разрыв строки

FONT и FONT – форматирование фрагмента текста находящегося между открывающим и закрывающим тегом.

b и b – полужирный текст i и i – курсив

u и u – подчёркнутый s и s – перечёркнутый

sup и sup – верхний индекс sub и sub – нижний индекс

Также используются атрибуты тегa FONT:

face = "" – гарнитура шрифта, size ="" – размер шрифта, color = "" – цвет шрифта.

Для тега P атрибут align = "" – выравнивание текста, со значениями, указанными в таблице. Например:

FONT face="Arial" size="18" color="maroon"b Пример полужирного текста шрифта Arial размера 18 pt FONT

1. Используя вышеуказанные теги и их атрибуты, разместите на странице заголовок и основной текст.

2. Для создания бегущей строки используется тег: MARQUEE…Текст бегущей строки…MARQUEE

Готовая страничка должна выглядеть примерно так:

1. Готовую web-страницу покажите учителю.

Работа со списками на web-страницах.

Задание: Создать на web-странице маркированный и нумерованный списки.

Указания к выполнению работы.

1. Для создания маркированного списка используйте контейнер UL …UL. Каждый пункт списка отделяется тегом LI/ Например:

UL

LI Первый пункт

LIВторой пункт

UL

2. Для изменения маркеров используется атрибут TYPE тега UL со следующими значениями:

"circle"– не закрашенный круг

"disk" – закрашенный круг

"square" – закрашенный квадрат

Иногда в начале списка помещают заголовок, который выделяют парным тегом LH..LH.

3. Для задания нумерованного списка используется контейнер OL…OL. Пункты списка отделяются точно так же как и в маркированном списке (см. п. 1).

Для изменения типа нумерации используется атрибут TYPE со значениями:

"I", "i" – большие и маленькие римские цифры

"A", "a" – большие и маленькие латинские буквы.

По умолчанию нумерация установлена арабскими цифрами.

Используя теги создания списков, создайте список:

ВАРИАНТ 1. ВАРИАНТ 2.

Работа с таблицами на web-страницах. Применение таблиц для разметки страниц.

Задание:

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

2. Разместить таблицу на web-странице по образцу, указанному в варианте, использовать различные приёмы оформления.

1. Таблицы помещаются в контейнере TABLE…TABLE.

2. Для задания строк используется контейнер TR..TR.

3. Для задания данных в ячейке используется контейнер TD..TD.

4. Для задания данных в ячейке заголовка используется контейнер TH..TH.

5. Для задания границ таблицы (строки, ячейки) используется атрибут BORDER со значением толщины границы.

6. Для задания цвета границы используется атрибут BORDERCOLOR, а для задания заливки ячейки (строки, таблицы) атрибут BGCOLOR. Также используется атрибут WIDTH для задания ширины таблицы (ячейки таблицы).

Обратите внимание: если значение атрибута width задано в процентах, например width=30%, то ширина отмеряется от размера окна браузера, то есть не является фиксированной. Если width=100%, то таблица занимает всё окно браузера по ширине.

Таким образом, указанные атрибуты могут быть вставлены в любой из тегов TABLE, TR,TD и TH.

7. Для объединения ячеек по строке (то есть смежных ячеек нескольких столбцов) используется атрибут COLSPAN=k, где k – число объединяемых ячеек, для объединения ячеек по столбцу (то есть смежных ячеек нескольких строк) используется атрибут ROWSPAN=k, где k – число объединяемых ячеек. Также можно использовать атрибут ALIGN для выравнивания содержимого ячеек(строк, всей таблицы).

Обратите внимание: если в строке задано объединение k ячеек (по столбцам), то в следующей строке ячейки под ними задавать уже не нужно! То же самое касается объединения ячеек по столбцам.

Атрибут CELLSPACING=k сообщает браузеру, какое расстояние в пикселях следует оставить между границами ячеек и по умолчанию имеет значение равное 2.

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

TD7TD

TR

TABLE

8. Аналогичным образом можно применять таблицы для разметки (точного расположения элементов) страниц.

Варианты выполнения заданий:

Вариант№1

В ариант№2

Работа с внутренними гиперссылками на web-страницах.

Задание:

1. Разбить текст на web-странице на абзацы согласно пунктам содержания .

2. Каждый пункт содержания выделить как внутреннюю гиперссылку.

3. Выполнить форматирование текста на странице.

Указания к выполнению работы.

1. Откройте web-страницу ssylki.html.

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

3. Для применения форматирования целесообразно разбить текст на абзацы.

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

Для установки точки отправления необходимо установить тег a href = "#имя", где символ # указывает на то что гиперссылка внутренняя. После текста, который будет гиперссылкой необходимо закрыть тег: a. Например:

a href ="hyp1" Это пример гиперссылки a.

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

alink= цвет - цвет ссылок до использования

vlink =цвет – цвет ссылок после использования

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

a name = "имя"a

Для примера из п. 4 это будет выглядеть так:

a name = "hyp1"Назначение гиперссылкиa

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

2. Проверьте работоспособность ссылок. Готовую страницу покажите учителю.

Выполните задания по вариантам. Номер варианта совпадает с номером компьютера.

Вставка и размещение изображений на web-странице.

Задание:

1. Разместить текстуру или рисунок из коллекции Microsoft в качестве фона web-страницы .

2. Поместить изображение на web-страницу, установить подходящий размер и выравнивание.

3. Включить заголовок изображения.

Указания к выполнению работы.

1. Создайте рабочую папку в папке Мои документы, в которую поместите созданную ранее web-страницу. Если такой страницы не, то создайте заново простейший пример (см. практическую работу №1).

2. В этой же папке создайте папку "images", в которой будут располагаться рисунки для web-страницы.

3. Для подготовки текстуры откройте программу CorelDraw (Пуск Программы Corel Graphic Suite 11 CorelDraw11) . Создайте произвольную замкнутую фигуру, желательно прямоугольник, в противном случае текстуры не полностью заполнят web-страницу, заполните её текстурой и экспортируйте в виде рисунка с расширением jpeg в созданную папку images. Размер экспортируемого изображения можно изменять.

4. Для заполнения рисунком из коллекции Microsoft скопируйте его в папку images из папки C:\Program Files\Microsoft Office\CLIPART. Однако не все типы файлов поддерживаются браузерами. Изменить тип файла можно при помощи импорта и экспорта в программе CorelDraw.

5. О ткройте созданную ранее страницу в браузере. Для редактирования исходного html кода достаточно войти в меню Вид Просмотр HTML кода.

6. В коде страницы в тег BODY внесите изменения добавив атрибут BACKGROUND ="", где в качестве значения укажите папку images и имя рисунка. Например:

Сохраните код (Меню файл Сохранить). В браузере нажмите кнопку "Обновить" , просмотрите как происходит заполнение фоновым рисунком.

1. Откройте папку с материалами и скопируйте два графических файла в папку images.

Можно так же подобрать самостоятельно 2 любых графических файла и поместить их в папку images.

1. Первый рисунок (gerb.gif или другой) поместите вверху по центру. Для этого используйте тег img src = "имя_файла". Для выравнивания рисунка относительно страницы удобно пользоваться тегом абзаца P (см. практическую работу № 1). Для рисунка можно задать название, которое появляется при загрузке и при наведении курсора мыши. Для этого используется атрибут alt = " название ". Например: P align = "center" img src="images\gerb.gif" alt=" Герб Севастополя".

2. Откройте текстовый документ и скопируйте фрагмент текста в код web-страницы. Текст выровняйте по ширине страницы. Подберите хорошо читаемый цвет текста и гарнитуру шрифта. Если необходимо, дополнительно разбейте текст на абзацы.

3. Второй рисунок выровняйте относительно текста, уменьшив его размеры до 30% –40% от исходного. Для изменения размеров используются атрибуты width и height, значениями которых служит нужный размер картинки в пикселях или процентах. Для выравнивания относительно текста используется атрибут align со значениями top – вверху, middle – по центру, bottom – снизу, left – слева и right – справа. Например:

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

1. Готовую web-страницу покажите учителю.

Работа с внешними гиперссылками на web-страницах. Изображения-карты.

Задание:

1. Создать на странице гиперссылки на локальную страницу, на страницу Интернет и на электронный почтовый ящик .

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

Указания к выполнению работы.

1. Откройте ранее созданную в работе № 2 страницу.

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

a href="адрес" объект a.

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

a href="rest.html" отдохните с нами! a, или

a href="pages\rest.html отдохните с нами a.

1. Если ссылка делается на ресурс Интернет, то в теге a указывается его полный адрес:

Всё о Jeans .

1. В случае ссылки на электронный почтовый ящик добавляется указатель mailto:

[email protected]" Письмо Васе

1. Вставьте изображение с размерами приблизительно 300 на 300 пикселей на эту страницу.

2. Для подготовки карты изображения вставьте атрибут usemap с именем карты в тег img, например : img src="pic1.jpg" usemap="#map1".

3. Для задания карты используйте контейнер map name="map1" ...map . Здесь значение атрибута name должно совпадать с тем значением, которое было указано в атрибуте usemap.

4. Для задания разметки карты используйте тег area. Атрибуты: shape, со значениями: rect – прямоугольник, circle– окружность , poly – многоугольник, атрибут cords – значения ключевых точек фигур. Здесь же в теге area указываются и адреса гиперссылок.

Пример:

img src="navbar.gif" usemap="#map1"

Руководство по доступу

Переход

Поиск

Первые десять

*** Примечание: желательно формировать гиперссылки на карте в привязке к объектам для удобства.***

1. Проверьте работоспособность ссылок. Готовую работу пришлите преподавателю.