|
|
Учебнометодическое пособие к лабораторнопрактическим занятиям по дисциплине Введение в информационные технологии для студентов направления подготовки 44. 03. 04 Профессиональное обучение всех форм обучения|
|
Количество контейнеров для строк рассчитывается так же, как в редакторе Word (по самому мелкому дроблению). В нашем примере – 7.
Отцентрируйте заголовок таблицы. Расположите ее на цветном фоне. Выберите цвет для шрифта (см. лабораторную работу №1).
4. Заполните первую строку таблицы. Так как это «шапка» с названиями столбцов, для ячеек используйте контейнеры … | . Окончательно контейнер первой строки выглядит так:
Название |
Адрес |
Тип номера |
Цена за день |
|---|
5. Заполните вторую строку таблицы. Так как это уже содержание таблицы, для ячеек используйте контейнеры … | . Первая и вторая ячейки по высоте занимают 3 строки. Чтобы объединить их, добавьте атрибуты ROWSPAN=3. Окончательно контейнер второй строки выглядит так:
Россия |
Пр. Ленина, д. 42 |
Люкс одноместный |
$150 |
6. Заполните контейнер третьей строки таблицы. Для ячеек по-прежнему используйте контейнеры … | . Первая и вторая ячейки входят в объединенные раньше блоки, их объявлять не надо. А третья и четвертая ячейки содержат новую информацию. Скопируйте контейнеры соответствующих ячеек из второй строки и поменяйте в них содержимое. Окончательно контейнер этой строки выглядит так:
Люкс двухместный |
$250 |
7. Аналогично п. 6 заполните контейнер четвертой строки. Сохраните документ и просмотрите его через браузер. В таблице пока нет разлиновки, но, если все сделано правильно, структура расположения информации должна просматриваться.
8. Добавьте в таблицу сведения о гостинице Спортивная. Они располагаются в пятой и шестой строках. Похожие строки находятся во второй и третьей строках таблицы, и теги, создающие их, уже сформированы. Скопируйте теги из второй и третьей строк соответственно в контейнеры пятой и шестой строк, замените содержание ячеек. Так как здесь первая и вторая ячейки по высоте занимают только 2 строки, поменяйте значение атрибута ROWSPAN. Получаем для новых строк:
Спортивная |
Профсоюзов, д. 15 |
одноместный |
$50 |
двухместный |
$80 |
9. Добавьте в таблицу сведения о гостинице Вокзальная. Они располагаются в седьмой строке. В ней нет объединения ячеек, все четыре ячейки содержат новую информацию. Можно скопировать теги второй строки, убрать в них атрибуты ROWSPAN и просто заменить информацию в контейнерах ячеек:
Бысым |
Привокзальная пл., д. 3 |
Четырехместный |
$50 |
Сохраните документ и просмотрите его через браузер.
10. Форматирование таблицы. Добавьте в тег атрибуты 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="имя файла-пейзажа с расширением". В результате тег должен выглядеть примерно так:
сохранить код с исправлением и просмотреть его в окне браузера. В ячейке в виде фона отображен левый верхний угол картинки;
скопировать атрибут BACKGROUND="…" в открывающий тег , заменить название файла на файл другого пейзажа. Сохранить код с исправлением и просмотреть его в окне браузера. Теперь вся таблица изображается на фоне второй картинки, а в ячейке по-прежнему сохраняется предыдущий фон;
скопировать атрибут BACKGROUND="…" в открывающий тег , заменить название файла на файл третьего пейзажа. Сохранить код с исправлением и просмотреть его в окне браузера. Фон, указанный в , заполняет все окно браузера, а фон, заказанный во внутренних тегах, распространяется только на область их действия.
Вывод: внутренние назначения заменяют внешние.
3. Проанализируйте способы указания адресов нужных файлов (URL). Для этого сделайте следующие манипуляции:
перенесите в папку Сайт_Фамилия все файлы пейзажей, нажмите кнопку Обновить в окне браузера. Фон пропал;
в атрибутах BACKGROUND="…" добавьте перед именами файлов название папки, в которой они находятся. В результате получим примерно это: BACKGROUND="Сайт_Иванов\море.jpg"
Сохраните изменения и просмотрите их через браузер. Фон появился. Прочтите п. 6 (фрагмент про относительный URL) и просмотрите примеры п. 9 при разных ссылках на файлы. В нашем примере мы сделали ссылку на файл в дочерней папке;
поменяйте местами файл с таблицей и файлы пейзажей (файл с таблицей – в папку Сайт…, а файлы пейзажей – в папку своей группы), закройте окно браузера и откройте таблицу снова из папки Сайт… Фон опять пропал;
в атрибутах BACKGROUND="…" замените название дочерней папки на значок родительской. В результате получим примерно это: BACKGROUND="..\море.jpg"
Сохраните изменения и просмотрите их через браузер. Фон появился. В этом примере мы сделали ссылку на файл в родительской папке.
Вывод: самый простой URL получается, если все файлы, необходимые для просмотра документа, находятся в одной папке. В противном случае надо указывать пути к ним.
4. Добавьте первую гиперссылку. Для этого нужно:
в код документа с таблицей после закрывающего тега добавить текст: Ответственный за размещение гостей … (Ваша фамилия) . Внимание! В атрибуте HREF при указании пути и названия файла Вашего резюме следует соблюдать все регистры букв и пробелы. Сохраните изменения и просмотрите их через браузер;
Подробнее о гиперссылках и их атрибутах см. п. 10.
5. Добавьте гиперссылку на почтовый ящик e-mail. Для этого нужно в код документа с таблицей после контейнера с первой гиперссылкой добавить строку:
Сообщите нам о нужном Вам номере по e-mail
Сохраните изменение и просмотрите результат. Сделайте двойной щелчок на этой гиперссылке. Просмотрите окно создания сообщения. Прочтите в п. 6 о структуре URL и разберите в п. 10 примеры различных гиперссылок. Добавьте во все гиперссылки атрибут TITLE с какими-нибудь поясняющими надписями.
6. Вставьте изображение как самостоятельный объект. Для этого откройте файл с Вашим резюме. После сведений о том, где Вы родились, вставьте тег  (вместо многоточия укажите URL своего файла с изображением человека). Сохраните и просмотрите изменение. Добавьте в тег ![]() атрибуты размеров картинки, сделайте ей окантовку в виде толстой рамки, поэкспериментируйте с вариантами разного расположения текста около нее. Необходимые для этого сведения см. в п. 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.
|
Содержание отчета
После выполнения работы составить отчет, включающий исходный код html-страниц, описание основных использованных тегов и снимки экрана (скриншоты).
Технология выполнения работы
В данной работе с помощью языка разметки HTML должны быть созданы 5 web-страниц, оформленных с помощью основных html-тегов.
Вопросы для защиты работы
Дайте определение понятиям "HTML", "гиперссылка", "браузер", "тег".
Общая структура тегов.
В каких случаях используются &-последовательности и комментарии?
Расскажите об общей структуре html-документа.
Перечислите теги форматирования шрифта.
Как оформляются смысловые части текста и списки?
Создание таблиц с помощью языка HTML.
Приведите примеры использования графических изображений в html-документе.
Как создать гиперссылку?
|
|
Скачать 1.6 Mb.