Итоговый тест по дисциплине "Web-дизайн"

Индивидуальные задания к лабораторной работе № 9

"Создание web-страниц с помощью языка разметки HTML"

Задание 1

Составить свое резюме по следующему плану (в общей сложности 4 5 строчек, вместо многоточий и пояснений в скобках вставить свои данные):

Я, … (ФИО), родился … (дата и год рождения) в городе … (место, где родились).

В 20… году окончил … школу (лицей, гимназию) с углубленным изучением …, средний балл аттестата …

В 20… году поступил на специальность … СГГА. Средний балл по первой сессии (аттестациям) …

В свободное от учебы время увлекаюсь … (перечислить не менее трех увлечений помимо учебы).

Порядок выполнения.

1. Прочтите общие сведения о языке HTML (п.п. 1, 2 теоретических сведений об HTML).

2. Подготовьте бланк для HTML-кода Вашего резюме. Для этого следует:

выполнить команду Пуск → Программы → Стандартные → Блокнот → Файл → Сохранить как…;
задать имя файла Резюме_Фамилия.html (вместо Фамилия должна стоять Ваша фамилия), сохранить файл в своей рабочей папке.

Если все сделано правильно, то в папке Вашей группы появится этот файл со значком обозревателя, в противном случае – со значком блокнота. Тогда следует удалить созданный файл и повторить все снова.

3. Введите в созданный документ стандартные теги:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

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

4. Внутри контейнера <BODY> напечатайте свое резюме. Сохраните файл.

5. Посмотрите, как выглядит набранный текст без «украшательств». Для этого следует открыть созданный файл из папки своей группы.

6. Проведите первую коррекцию кода. Для этого следует:

не закрывая браузер, перейти в окно Блокнота;
вставить в контейнер <HEAD> … </HEAD> контейнер <TITLE> Резюме ФИО </TITLE> (вместо ФИО должна стоять Ваша фамилия);
сохранить файл, перейти в окно браузера, нажать кнопку Обновить (или F5).

Посмотрите, как повлиял тег <TITLE> на информацию в заголовке браузера.

7. Проведите вторую коррекцию кода. Для этого следует:

не закрывая обозреватель, перейти в окно Блокнота;
в открывающий тег <BODY> вставить атрибуты TEXT и BGCOLOR, значения цветов выбрать самим. Подробнее об этих атрибутах в п. 4;
сохранить файл, перейти в окно браузера, нажать кнопку Обновить (или F5).

Посмотрите, как изменился вид информации в окне браузера.

Если какой-то атрибут «не сработал», значит, допущены ошибки в написании английских слов или пропущены пробелы между атрибутами. Следует найти ошибки и повторить цикл коррекции кода.

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

8. Проведите третью коррекцию кода. Для этого следует:

после раздела «ФИО, где и когда родился», поставить тег абзаца <P>;
после раздела «какую школу кончил, средний балл аттестата» – тег разрыва строки <BR>;
перед разделом «увлечения помимо учебы» вставить в код тег горизонтальной линии <HR>.

Подробнее об этих тегах см. п. 6.

Посмотрите через браузер, в чем разница действий тегов <P> и <BR>, как действует тег <HR> со значениями атрибутов по умолчанию.

9. Оформите линию нестандартным способом. Для этого следует внести в тег <HR> атрибуты длины, толщины, цвета и выравнивания линии (см. п. 6). Задайте длину 20 % – 50 % от ширины окна, выравнивание по центру, толщину 4 – 10 пикселей, цвет – любой.

Посмотрите через браузер, как действуют атрибуты на линию, созданную тегом <HR>.

10. Измените вид шрифтов в разных частях резюме. Для этого следует контейнером <H1> выделить свою фамилию, контейнером <I> – город, где Вы родились, контейнером <H6> – информацию о школе, контейнером <FONT> с атрибутами SIZE=7 COLOR=RED – информацию о факультете, контейнером <FONT> с атрибутами SIZE=1 COLOR=GREEN – информацию о приятелях, контейнером <В> выделить какое-нибудь увлечение. Подробнее об этих тегах см. п. 5.

Просмотрите через браузер, как действуют эти теги.

11. Оформите часть текста в виде списка. Для этого следует контейнером <OL> выделить блок об увлечениях, разбить его на пункты тегами <LI> (подробнее см. п. 7). Аналогично контейнером <UL> и тегами <LI> оформить в виде маркированного списка перечень Ваших приятелей.

Посмотрите, как выглядят стандартные списки.

12. Измените нумерацию в списке. Для этого с помощью атрибутов TYPE и START поменяйте нумерацию в списке увлечений (подробнее см. п. 7).

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

Задание 2

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

Таблица. Характеристики гостиниц

Название	Адрес	Тип номера	Цена за день
Центральная	Пр. Мира, д. 4	Люкс одноместный	$150
		Люкс двухместный	$250
		Одноместный	$80
Спортивная	Бульвар Профсоюзов, д. 15	Одноместный	$50
Спортивная	Бульвар Профсоюзов, д. 15	Двухместный	$80
Вокзальная	Привокзальная пл., д. 3	Четырехместный	$50

Порядок выполнения.

1. Подготовьте бланк для HTML-документ и сохраните файл в своей рабочей папке под именем Таблица_Фамилия.html (вместо Фамилия должна стоять Ваша фамилия).

2. Введите в созданный документ стандартные теги:

<HTML>

<HEAD>

<TITLE> Таблица ФИО </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Вместо ФИО в контейнере <TITLE> должна стоять Ваша фамилия.

3. Внутри контейнера <BODY> вставьте скелетные теги таблицы (см. п. 8):

<TABLE>

Характеристики гостиниц

</CAPTION>

<TR>

</TR>

<TR>

</TR>

……..

<TR>

</TR>

</TABLE>

Количество контейнеров для строк рассчитывается так же, как в редакторе Word (по самому мелкому дроблению). В нашем примере – 7.

Отцентрируйте заголовок таблицы. Расположите ее на цветном фоне. Выберите цвет для шрифта (см. лабораторную работу № 1).

4. Заполните первую строку таблицы. Так как это «шапка» с названиями столбцов, для ячеек используйте контейнеры <TH> … </TH>. Окончательно контейнер первой строки выглядит так:

<TR>

<TH> Название </TH>

<TH> Адрес </TH>

<TH> Тип номера </TH>

</TR>

5. Заполните вторую строку таблицы. Так как это уже содержание таблицы, для ячеек используйте контейнеры <TD> … </TD>. Первая и вторая ячейки по высоте занимают 3 строки. Чтобы объединить их, добавьте атрибуты ROWSPAN=3. Окончательно контейнер второй строки выглядит так:

<TR>

<TD ROWSPAN=3> Центральная </TD>

<TD> Люкс одноместный </TD>

</TR>

6. Заполните контейнер третьей строки таблицы. Для ячеек по-прежнему используйте контейнеры <TD> … </TD>. Первая и вторая ячейки входят в объединенные раньше блоки, их объявлять не надо. А третья и четвертая ячейки содержат новую информацию. Скопируйте контейнеры соответствующих ячеек из второй строки и поменяйте в них содержимое. Окончательно контейнер этой строки выглядит так:

<TR>

<TD> Люкс двухместный </TD>

</TR>

7. Аналогично п. 6 заполните контейнер четвертой строки. Сохраните документ и просмотрите его через браузер. В таблице пока нет разлиновки, но, если все сделано правильно, структура расположения информации должна просматриваться.

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

<TR>

<TD ROWSPAN=2> Спортивная </TD>

<TD ROWSPAN=2> Бульвар Профсоюзов, д. 15 </TD>

<TD> одноместный </TD>

</TR>

<TR>

<TD> двухместный </TD>

</TR>

9. Добавьте в таблицу сведения о гостинице Вокзальная. Они располагаются в седьмой строке. В ней нет объединения ячеек, все четыре ячейки содержат новую информацию. Можно скопировать теги второй строки, убрать в них атрибуты ROWSPAN и просто заменить информацию в контейнерах ячеек:

<TR>

<TD> Вокзальная </TD>

<TD> Привокзальная пл., д. 3 </TD>

<TD> Четырехместный </TD>

</TR>

Сохраните документ и просмотрите его через браузер.

10. Форматирование таблицы. Добавьте в тег <TABLE> атрибуты BORDER=3 WIDTH=70% ALIGN=CENTER BGCOLOR=YELLOW BORDERCOLOR=MAROON (можно взять свои значения атрибутов).

Посмотрите через браузер, как действуют эти атрибуты на вид таблицы. Добавьте атрибут CELLSPACING=0, потом измените его на CELLSPACING=10. Посмотрите через браузер, за что отвечает этот атрибут. Подробнее см. п. 8.

11. Форматирование ячеек. Выделите сведения, относящиеся к разным гостиницам, разной заливкой. Выровняйте по центру ячеек цены номеров. Необходимые для этого сведения – в п. 8.

Задание 3

В документ Таблица_Фамилия.html вставить файл-картинку в виде фона для одной ячейки таблицы, затем для таблицы в целом, затем для документа в целом. После таблицы вставить гиперссылку на администратора конференции.

В документ Резюме_Фамилия.html вставить файл-фотографию, проверить разные варианты обтекания изображения текстом.

Порядок выполнения.

1. Подготовьте необходимые для работы файлы. Для этого нужно:

с помощью функции Windows "Найти Файлы и папки" найти все файлы на диске С с расширением *.jpg;
из полученного списка выбрать три файла с изображениями пейзажей и один с изображением человека, скопировать их в в свою рабочую папку;
в своей папке создать новую папку с именем Сайт_Фамилия;
открыть в папке своей группы файл Таблица_Фамилия.html;
в окне браузера выполнить команду Вид → Показать код HTML.

2. Создайте фон в разных частях документа. Для этого нужно:

в открывающий тег какой-нибудь ячейки таблицы вставить атрибут BACKGROUND="имя файла-пейзажа с расширением". В результате тег должен выглядеть примерно так: <TD BACKGROUND="море.jpg">
сохранить код с исправлением и просмотреть его в окне браузера. В ячейке в виде фона отображен левый верхний угол картинки;
скопировать атрибут BACKGROUND="…" в открывающий тег <TABLE>, заменить название файла на файл другого пейзажа. Сохранить код с исправлением и просмотреть его в окне браузера. Теперь вся таблица изображается на фоне второй картинки, а в ячейке по-прежнему сохраняется предыдущий фон;
скопировать атрибут BACKGROUND="…" в открывающий тег <BODY>, заменить название файла на файл третьего пейзажа. Сохранить код с исправлением и просмотреть его в окне браузера. Фон, указанный в <BODY>, заполняет все окно браузера, а фон, заказанный во внутренних тегах, распространяется только на область их действия.

Вывод: внутренние назначения заменяют внешние.

3. Проанализируйте способы указания адресов нужных файлов (URL). Для этого сделайте следующие манипуляции:

перенесите в папку Сайт_Фамилия все файлы пейзажей, нажмите кнопку Обновить в окне браузера. Фон пропал;
в атрибутах BACKGROUND="…" добавьте перед именами файлов название папки, в которой они находятся. В результате получим примерно это: BACKGROUND="Сайт_Иванов\море.jpg"
Сохраните изменения и просмотрите их через браузер. Фон появился. Прочтите п. 6 (фрагмент про относительный URL) и просмотрите примеры п. 9 при разных ссылках на файлы. В нашем примере мы сделали ссылку на файл в дочерней папке;
поменяйте местами файл с таблицей и файлы пейзажей (файл с таблицей – в папку Сайт…, а файлы пейзажей – в папку своей группы), закройте окно браузера и откройте таблицу снова из папки Сайт… Фон опять пропал;
в атрибутах BACKGROUND="…" замените название дочерней папки на значок родительской. В результате получим примерно это: BACKGROUND="..\море.jpg"
Сохраните изменения и просмотрите их через браузер. Фон появился. В этом примере мы сделали ссылку на файл в родительской папке.

Вывод: самый простой URL получается, если все файлы, необходимые для просмотра документа, находятся в одной папке. В противном случае надо указывать пути к ним.

4. Добавьте первую гиперссылку. Для этого нужно:

в код документа с таблицей после закрывающего тега </TABLE> добавить текст: Ответственный за размещение гостей <A HREF="..\Резюме …html"> … (Ваша фамилия) </A>. Внимание! В атрибуте HREF при указании пути и названия файла Вашего резюме следует соблюдать все регистры букв и пробелы. Сохраните изменения и просмотрите их через браузер;

сделайте двойной щелчок на появившейся гиперссылке. Если гиперссылка не раскрыла Ваше резюме, проверьте правильность составления пути и названия файла в атрибуте HREF контейнера <A> …</A>. Чтобы вернуться к документу с таблицей, следует нажать кнопку Назад в окне браузера или вставить в код резюме другую гиперссылку примерно такого вида: <A HREF="Сайт …(Ваша фамилия) \Таблица …(Ваша фамилия).html"> Вернуться к таблице? </A>

Подробнее о гиперссылках и их атрибутах см. п. 10.

5. Добавьте гиперссылку на почтовый ящик e-mail. Для этого нужно в код документа с таблицей после контейнера с первой гиперссылкой добавить строку:

Сообщите нам о нужном Вам номере по <A HREF="mailto://[email protected]"> e-mail </A>

Сохраните изменение и просмотрите результат. Сделайте двойной щелчок на этой гиперссылке. Просмотрите окно создания сообщения. Прочтите в п. 6 о структуре URL и разберите в п. 10 примеры различных гиперссылок. Добавьте во все гиперссылки атрибут TITLE с какими-нибудь поясняющими надписями.

6. Вставьте изображение как самостоятельный объект. Для этого откройте файл с Вашим резюме. После сведений о том, где Вы родились, вставьте тег <IMG SRC="…"> (вместо многоточия укажите URL своего файла с изображением человека). Сохраните и просмотрите изменение. Добавьте в тег <IMG> атрибуты размеров картинки, сделайте ей окантовку в виде толстой рамки, поэкспериментируйте с вариантами разного расположения текста около нее. Необходимые для этого сведения см. в п. 9.

Варианты задания

Создать сайт из 5 документов на выбранную тему. Минимальный набор средств языка HTML, который должен быть использован в документах:

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

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

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

В документах Пункт1.html, Пункт2.html, Пункт3.html, Пункт4.html можно разместить разные группы информации по выбранной теме. Например, если выбрана тема «спортивная команда», Пункт1.html может содержать текстовые сведения об истории ее создания, Пункт2.html – список игроков, Пункт3.html – таблицу игр.

Документ Приветствие.html должен содержать гиперссылки на Пункт1.html, Пункт2.html, Пункт3.html, Пункт4.html. (Забыли как делать?)

Скачано с www.znanio.ru

Индивидуальные задания к лабораторной работе № 9 "Создание web-страниц с помощью языка разметки

Блокнота; в открывающий тег <BODY> вставить атрибуты

Спортивная Бульвар Профсоюзов, д

Заполните контейнер третьей строки таблицы

Подготовьте необходимые для работы файлы

HREF контейнера <A> …</A>

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

19.02.2020