Самостоятельная работа расширения файлов

Обновлено: 05.07.2024

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

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

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

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

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

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 получается, если все файлы, необходимые для просмотра документа, находятся в одной папке. В противном случае надо указывать пути к ним.

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

5. Добавьте гиперссылку на почтовый ящик e-mail. Для этого нужно в код документа с таблицей после контейнера с первой гиперссылкой добавить строку: Сообщите нам о нужном Вам номере по <A HREF="mailto://adm@mail.ru"> e-mail </A>
6. Вставьте изображение как самостоятельный объект. Для этого откройте файл с Вашим резюме. После сведений о том, где Вы родились, вставьте тег <IMG SRC="…"> (вместо многоточия укажите URL своего файла с изображением человека). Сохраните и просмотрите изменение. Добавьте в тег <IMG> атрибуты размеров картинки, сделайте ей окантовку в виде толстой рамки, поэкспериментируйте с вариантами разного расположения текста около нее. Необходимые для этого сведения см. в п. 9.

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

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

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

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

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

Читайте также: