Практикум по информатике на тему: "Создание Web страниц" (11 класс)

Практикум «Создание Web страниц»

Задание 1. Создание простейших файлов НТЛ“.

I . Создайте папку prim, в которой мы будем сохранять сконструированные

2. Запустите программу Блокнот (Notepad).

З. Наберите в окне редактора простейший текст файла HTML:

Учебный файл HTML

4HEAD>

Первый сайт!

4BODY>

4НТМО

4.   Сохраните файл под именем *.НТМ. Требования к сохраненным файлам • „щ-шна имени не должна превышать 8 символов, без пробелов, тире и т.п., а также не допускаются большие буквы.

5.   Для просмотра созданной загрузите браузер MicrosoR Intemet Ехр\огег.

6.   Выполните команду Файл, Открыть, найдите в папке PR_IM ваш файл и загрузите его. Убедитесь, что название («Учебный файл HTML») отразилось в верхней, статусной, строке браузера.

Управление расположением текста на экране

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

Задание 2. Управление расположением текста на экране.

1 . При необходимости выполните пункты 5 — 6 задтшя 1.

2. Откройте первоисточник  выполнив команду Вид, Просмотр

Откроется окно программы Блокнот, в котором ваша Web-cTpaHua будет представлена в командах HTML. З. Внесите изменения в текст файла HTML, расположив слова «Первый», «сайт!» на разных строках:

Учебный файл HTML

Первый сайт!

4.                     Сохраните внесенные изменения файл. Закройте программу Блокнот.

5.                     Просмотрите с помощью браузера MicrosoR lntemet Explorer полученную  используя клавишу F5 или команду Вид , Обновить . Изменилось ли изображение текста на экране?

Примечание. В дальнейшем после внесения изменений в всегда выполняйте пункты 4 5 задания 2.

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

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

Задание З. Использование тэгов перевода строки и абзаца. I . Внесите изменения в текст файла HTML:

Учебный файл HTML

4HEAD>

<Р>Первый4Р>

Это мой!

4BODY>

2.               Сохраните текст с внесенными изменениями в файле.

3.               Просмотрите с помощью браузера MicrosoR Internet Explorer полученную  Как изменилось юображение текста на экране

Выделение фрагментов текста

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

Существуют три тэга выделения фрагментов текста:

<В> — выделение полужирным, <I> — выделение курсивом,

<U> ...</U> — выделение подчеркиванием.

Задание 4. Выделение фрагментов текста.

I . Внесите изменения в файл:

<НТМО

Учебный файл HTML

<В> Первый <Л <U> Эго мой!<Ш>

</НТМО

2. Просмотрите полученную

Возможно использование комбинированных выделений:

4><В>Первый</В>сайт!<Л>

Но при этом необходимо помнить следующее правило записи комбинированных тэгов: <Тэг-2> ... 4Тэг-2> 4Тэг-1> — правильная запись; <Гэг-2> ... «Тэг-1> </Тзг-2> — ошибочная запись.

Задание размера символов

Существуют два способа управления размером текста, изображаемого браузером:

•  использование стилей заголовка,

•  задание размера шрифта основного документа или размера текущего шрифта.

Использование стилей заголовка

Используется шесть тэгов заголовков (от до <Нб>). Каждому тэгу соответствует конкретный стиль, заданный параметрами настройки браузера.

Задание 5. Использование стией заголовка.

1 . Внесите изменения в файл:

<НТМО

Учебный файл HTML

          <Н Первый          1 >Фсайт!<Л>

2. Просмотрите полученную

Задание размера текущего шрифта

Тэг шрифта  позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.

Задание 6. Установка размера текущего шрифта.

1. Внесите изменения в файл:

<НТМО

Учебный файл НТМЕ.

<FONT    Первый «ТОМ» сайт!

2. Самостоятельно измените размер шрифта для текста «Это мой!», используя тэг <FONT>.

З. Измените оформление текста  используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.

Гарнитура н цвет шрифта

Тэг <FONT> предоставляет возможности управления размером, гарнитурой и цветом текста.

Изменение гарнитуры шрифта выполняется простым добавлением к тэгу <FONT> атрибута FACE.

Например, для изображения текста шрифтом Arial необходимо записать: <FONT дг1я изменения цвдга шрифта можно использовать в тэге атрибут COLOR="X”

Вместо Х надо ПОДСТаВИТЬ либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную (R — Red), зеленую (G — Green). синюю (В — В1ие), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB.- Примеры загмси цвета в формате RGB приведены в прилагаемом файле C010r.htm и таблице. Запись цвета в формате RGB

	RRGGBB	Цвет	RRGGBB
В1асК (черный)	000000	Purp1e (фиолетовый)	FFOOFF
While (белый)	FFFFFF	Ye110w (желтый)	FFFFOO
Red (красный)	FFOOOO	Brown (коричневый)	996633
Green (зеленый)	OOFFOO	0range (оранжевый)	FF8000
Azure (бирюзовый)	OOFFFF	Vi01et (лиловый)	8000FF
В1ие (синий)	0000FF	Gray (серый)	AOAOAO

Задание 7. Установка гарнитуры и цвета шрифта.

1. Внесите изменения в файл:

<НТМО

4HEAD>

Первый

4BODY>

2. Самостоятельно измените размер, цвдг, гарнитуру, стиль текста документа.

Выравнивание текста по горизонтали

С помощью тэгов НТМ1_, можно управлять горизонтальным выравниванием текста. Если способ выравнивания не оговорен, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле.

Современные браузеры воспринимают атрибут выравнивания текста ALIGN=•

ALIGN=CENTER — выравнивание по центру; ALIGN=RIGHT — выравнивание по правому краю; ALIGN=LEFT — выравнивание по левому краю.

Задание 8. Выравнивание текста по горизонтави. 1 . Внесите изменения в файл:

Первый

Задание цвета фона и текста

При изображении фона и текста браузеры используют цвета, установленные по умолчанию, — они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в тэге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, ТЕХТ= задает цвет текста для всей страницы, LINk= и VLINk= определяют цвета соответственно не просмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже).  Задание 9. Установка цвета фона и текста. Внесите изменения в файл:

4BODY>

Размещение графики на

Атрибут	Формат	Описание
ALT		Задает текст, заменяющий изображение в том случае, если браузер не воспринимает уго изображение
BORDER		Задаст толщину рамки вокруг изображения. Измеряется в
ALIGN	.GlF”	Задаст выравнивание изображения относительно текста: относительно текста выровнена верхняя часть изображения — top, нижняя — bottom, средняя middle, левая — [ей, правая — right
НЕЮНТ	HElGHTS=1	Задает вертикальный размер изображеения внутри окна браузера
WIDTH	“	Задает горизонтальный размер изображения внутри окна браузера

Тэг позволяет вставить в документ изображение. Оно появится в том месте документа, где находится этот тэг. Данный тэг является одиночным. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. При выполнении следующего задания будем считать, что графический файл SIDNEY .GIF' хранится в рабочем каталоге lMAGES, где находится и наша

Задание 10. Размещение графики на И“еЬ-странице. Внесите изменения в рабочий файл:

Тэг <IMG> имеет немај10 атрибутов, описанных в табл. 2, которые можно задавать дополнительно. Они могут располагаться в любом месте тэга после кода IMG.

Таблица 2

Ат иб ы изоб а;кения

VSPACE	<1MG             SRC-—”SYDNEY.GIF”	Зададт добавление верхнего и нижнего пустых полей
HSPACE	<lMG     SRC-—”SYDNEY.GlF” HSPACE	Задает добавление левого и правого пустых полей

Задание 11. Установка атрибутов изображения.

Самостоятельно внесите изменения в файл: опробуйте использование таких атрибутов графики, как ALT, BORDER, НЕЮНТ, WIDTH.

Примечание. Всегда обращайте внимание на размер (объем в байтах) графического файла, так как это влияет на время загрузки  Общепринятый размер изображения — не более 25Кв.

Фоновая графика

Фоновое изображение — это графический файл с изображением небольшой прямоугольной плашки. При просмотре в браузере эта плашка многократно повторяется, заполняя все окно, независимо от его размеров.

Графика, используемая в качестве фоновой, задается в пге <BODY>.

Задание 12. Установка фонового изображени на Web-cmpaHuqe. Внесите изменения в рабочий файл:

4BODY>

Таблицы

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

Таблица состоит из трех основных частей:

•  названия таблицы;

•  заголовков столбцов;

•  ячеек.

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

Тэги оформления таблиц и их атрибуты описаны в табл. 3 — 5.

Таблица З

Тэги о о мления таблиц

тег	Формат	Описание
TABLE		Объявление таблицы Тэг строки
		Тэг данных

Таблица 4

Ат иб ты тэт <TABLE>

А иб т		Фо мат	Описание вокруг таблющ
BORDER			Устанавливает рамку Задает ширину таблицы и процентах от ширины страницы или в пикселях
WIDTH
BGCOLOR		<TABLE BGCOLOR=	Задаег цвет фона таблицы

Таблица 5

Атрибуты тэгов <TD> и <TR>

Задание 13. Создание таблицы.

1.  Запустите программу Блокнот.

2.  Наберите следующий текст в окне редактора:

<НТМО

	Ат иб т	Фо мат	Описание
	ALIGN		Устанавливает выравнивание по горизонтали (ЮСЈНТ. LEFT, CENTER)
	VALIGN		Устанавливает выравнивание по вертикали (ТОР, MlDDLE, ВОТТОМ, BASELINE)

4BODY>

З. Сохраните файл под именем 5.НТМ.

4. Для просмотра созданной загрузите браузер Microsoft Intemet Exp10rer.

Задание 14. Создание таблиц.

Дополните полученную Web-cTpuw-U' по аналогии списком учителей, работающих в 6-х, 7-х, 8-х и 9-х классов.

Построение гипертекстовых связей

Важнейшим свойством языка HTML является возможность включения в документ ссылок на другие документы. Возможны ссылки:

•  на удаленный

•  на некоторую точку в текущем

•  на любой файл, не являющийся

В качестве ссылки можно использовать текст или графику.

Ссылки в пределах одного документа

Такие ссылки требуют наличия двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от того, как настроен браузер. Для изменения цвета ссылки используется атрибуты и VLINK» ога <BODY>. Оптием ссылку:

класс4А>

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

Определим метку:

5 класс

Задание 15. Создание ссылки в пределах одного Документа.

1.                 Дополните файл 5.НТМ описанием таблицы, содержащей классы, поместив его в начало Webстранищ:

4TR>

4TABLE>

2.                 Вставьте в файл 5 .НТМ метку, указываюп:џю на 5 класс:

З. Вставьте в таблищ с названиями дней недели ссылку для выбранной метки:

класс4А>

4.  Сохраните файл.

5.  Просмотрите полученную

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

Опишем ссылку: <А rel="nofollow ugc" target="_blank" href="5.НТМ”>5 класс4А>

После имени файла (5.НТМ), между символами «>» и «>» располагается текст («5 класс»), на котором должен быть произведен щелчок для перехода к этому файлу.

Задание 16. Создание ссьики на Другой НТТ-Документ.

1 . Загрузите в браузер файл raboch.htm.

2. Внесите изменения в файл:

<НТМО

4BODY>

З. Сохраните файл.

4. Просмотрите полученную

Подведите курсор к ссылке 5 класс и по щелчку мыши вы перейдете на другую (файл

5.нтм).

Задание 17. Создание графической ссьики на Другой НТМЬДокумент.

1. Внесите изменения в файл 5.-НТМ так, чтобы в конце страницы была ссылка на головную страницу Первый сайт (файл RABOCH.HTM). В качестве ссылки используйте графический файл следующим образом:

4TR>

4CENTER>

4НТМ

2. Просмотрите полученную Web-cTpaHV11_w.

В качестве ссылки выступает рисунок (колокольчики), находящийся в файле bel17.GIF.

Итоговое задание

Теперь, когда вы получили общее представление о создании и узнали ОСНОВНЫе команды HTML, наступило время подвести итог, выпоЛнив самостоятельную работу.

Задание 18. Самостоятельное итоговое заДание.

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

Как подготовить хорошую

1.                   Следует обратить внимание на простоту и логичность расположения информашш на ваших страницах.

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

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

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

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

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

6.   Использование графики может дополнительно привлечь пользователей. Но необходимо помнить о времени загрузки вашей страницы, которое определяется количеством и объемом графической информации. Красивая картинка не произведет никакого впечатления, если, для того чтобы ее увидеть, придется ждать 5 минут, пока они загрузится.

Тестирование

Перед тем как выставлять на сервер свои  необходимо -их протестировать. Созданные документы ДОЈ1жны пройти «локальную проверку» в пределах вашего жесткого диска. При проверке используйте разные браузеры. Вы увидите отличия, кошрые могут оказаться цосгаточно существенными.

В рамках тестирования необходимо сделать следующее:

1.   Проверить правописание. Выполните автоматизированную проверку правописания текста (для этого можно использовать MicrosoR Word) или попросите кого-нибудь выполнить корректуру.

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

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

4.                    Проверить, Допустимо ли время загрузки.

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

[1]Mac OS X        [1]      2F[1]xPDF CAROATTRxx