|
|
Учебнометодическое пособие к лабораторнопрактическим занятиям по дисциплине Введение в информационные технологии для студентов направления подготовки 44. 03. 04 Профессиональное обучение всех форм обучения
Таблица создается по строкам. Для каждой строки создается контейнер | … , определяющий, какие ячейки и информация должны находиться в этой строке. Атрибут ALIGN со значениями LEFT, CENTER или RIGHT задает горизонтальное выравнивание во всех ячейках строки. Атрибут VALIGN со значениями TOP, MIDDLE или BOTTOM – вертикальное выравнивание (по умолчанию MIDDLE – по центру).
Для оформления ячеек используются два вида контейнеров: … | (Table Head) и … | (Table Data). Первый свою информацию выравнивает по центру и изображает жирным шрифтом, второй выравнивает по левому краю и использует обычный шрифт. Обычно … | используют для ячеек с заголовками строк или столбцов, а … | – для ячеек с данными таблицы. Можно также оставить ячейку пустой, но, чтобы она была отображена на экране, следует внести в нее &-последовательность (см. п. 3).
Для оформления данных, скомпонованных в виде таблицы, в теги , , | , | добавляют атрибуты.
Основные атрибуты тега :
WIDTH – определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;
ALIGN – определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT, CENTER и RIGHT;
BORDER – устанавливает толщину рамки в пикселах. По умолчанию – 0 (таблица рисуется без рамки);
BORDERCOLOR – устанавливает цвет рамки, по умолчанию черный. Цвет можно задавать английским словом или шестнадцатеричным числом;
CELLSPACING – определяет расстояние между рамками ячеек таблицы в пикселах;
CELLPADDING – определяет промежуток в пикселах между рамкой ячейки и текстом внутри нее;
BGCOLOR – устанавливает цвет фона для всей таблицы. По умолчанию белый. Цвет можно задавать английским словом или шестнадцатеричным числом;
BACKGROUND – заполняет фон таблицы изображением (см. п. 9). Значением атрибута является URL нужного файла.
Тег , открывающий строку таблицы, может иметь такие атрибуты:
ALIGN – устанавливает горизонтальное выравнивание текста во всех ячейках строки. Может принимать значения LEFT (по умолчанию), CENTER и RIGHT;
VALIGN – устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), MIDDLE (выравнивание по центру – это значение принимается по умолчанию), BOTTOM (по нижнему краю);
BGCOLOR – устанавливает цвет фона для строки.
Ячейки таблицы начинаются тегами или . Для них предусмотрены следующие атрибуты:
ALIGN – устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT, CENTER и RIGHT;
VALIGN – устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP, CENTER (это значение принимается по умолчанию), BOTTOM;
WIDTH – определяет ширину ячейки в пикселах;
HEIGHT – определяет высоту ячейки в пикселах;
NOWRAP – присутствие этого атрибута показывает, что текст должен размещаться в одну строку;
BGCOLOR – устанавливает цвет фона ячейки;
BACKGROUND – заполняет фон ячейки изображением. Значением атрибута является URL нужного файла.
9. Использование изображений
Внесение в документ изображений, как правило, существенно улучшает его внешний вид и делает его привлекательным для просмотра. Файлы рисунков можно использовать как фон для основной информации или же включать в документ как самостоятельные объекты. В Интернете обычно используют изображения в формате GIF и JPEG (файлы с расширениями .gif и .jpg). Современные браузеры понимают и другие форматы графических файлов (например, .png, .svg). Все они хорошо сжимают изображение, но в то же время прилично сохраняют его цветовую гамму и детали.
Чтобы использовать рисунок в качестве фона, применяют атрибут BACKGROUND. Его можно указывать в теге (см. п. 3) и табличных тегах , , | , | (см. п. 8). Если размер рисунка больше размера площади, которую следует закрыть фоном, то берется левая верхняя часть изображения, если меньше – рисунок повторяется, пока вся отведенная под фон площадь не будет закрыта.
Рисунок в качестве самостоятельного объекта (логотип фирмы, фотография и т. п.) вставляется тегом ![]() (IMaGe – изображение). Обязательный атрибут – SRC (SouRCe – источник). Значением этого атрибута является URL файла с изображением.
URL обязательно надо выделять двойными кавычками и следить, чтобы пробелы и регистры букв в названиях папок и файлов в точности соответствовали оригиналу.
Примеры:
 – рисунок picture.gif находится в том же каталоге, что и текущий документ;
 – из текущего каталога перейти в подкаталог images и взять файл picture.gif оттуда;
 – подняться в родительский каталог, оттуда перейти в каталог images и взять там рисунок picture.gif;
 – указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере или используется файл с другого сайта.
Остальные атрибуты тега ![]() , перечисленные ниже, оговаривают размеры и положение рисунка на странице, а также то, где должен располагаться поясняющий текст:
BORDER=n – рамка вокруг рисунка, где n – ее толщина в пикселах;
WIDTH=n – задается ширина изображения в пикселах или в процентах от ширины экрана браузера (тогда после n следует знак %);
HEIGHT=n – высота изображения в пикселах или в процентах от высоты экрана;
HSPACE=n – отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным);
VSPACE=n – вертикальный отступ от картинки в пикселах;
ALIGN=BOTTOM – по умолчанию. Сопровождающий текст выравнивается по нижнему краю рисунка справа от него. Другие значения атрибута ALIGN, приводящие к выравниванию текста справа от рисунка по его высоте: TOP – по верхнему краю рисунка, CENTER или MIDDLE – по центру рисунка. Чтобы текст обтекал рисунок, используются значения LEFT или RIGHT. Рисунок прижимается соответственно к левому или правому краю экрана, а остальное пространство рядом с ним занимает текст;
ALT="какой-то текст" – альтернативный текст. Текст, который появляется вместо картинки, если по какой-либо причине загрузка изображения не состоялась.
Пример:
– рисунок picture.gif находится в том же каталоге, что и текущий документ. В том случае, если его не удается найти или открыть, в рамку, отведенную под рисунок, будет выдан текст: Здесь должен быть рисунок
10. Теги гиперссылок
Ссылки – инструмент, позволяющий связывать между собой различные документы или обеспечивать быстрый переход от одной части документа к другой. Браузер обычно выделяет ссылку цветом и подчеркиванием. Курсор при наведении его на ссылку приобретает вид указательного пальца. По двойному щелчку на ссылке браузер включает поисковые средства и раскрывает заказанный документ либо поверх старого, либо в специально оговоренном окне.
Ссылки создаются с помощью контейнера … (Add – добавлять). Обязательный атрибут – HREF (Hiper REFerence – гиперссылка). При минимальном наборе атрибутов структура ссылки выглядит так:
якорь ссылки
Примеры:
нужный документ – по двойному щелчку на тексте нужный документ браузер раскроет документ filename.html, находящийся в том же каталоге, что и текущий документ;
нужный документ – по двойному щелчку на тексте нужный документ браузер раскроет документ filename.html в подкаталоге folder текущего каталога;
нужный документ – по двойному щелчку на тексте нужный документ браузер из каталога, в котором расположен вызывающий документ, поднимется в родительский каталог, затем перейдет в его подкаталог folder и раскроет находящийся там документ filename.html.
нужный документ – ссылка с указанием полного адреса файла на другом компьютере. По двойному щелчку на тексте нужный документ установится связь с нужным компьютером и раскроется документ index.html, находящийся там по адресу /business/fax/339/.
Другие атрибуты тега :
TITLE ="поясняющий текст"– всплывающая подсказка с пояснением к ссылке;
TARGET="имя окна" – указывает, в каком окне следует раскрывать вызванный документ (подробнее см. п. 11).
Пример (прокомментируйте сами):
просмотр отчета
Замечание. Якорем ссылки может быть любой объект, видимый в окне браузера, например, рисунок. Для этого разместите  между тегами и . Вокруг рисунка появится рамка, которая показывает, что он является ссылкой. Ширина рамки задается атрибутом BORDER в теге . Если рамка портит внешний вид документа, то укажите в атрибутах рисунка BORDER=0. То, что это гиперссылка, будет видно только по форме курсора, наведенного на рисунок.
Ресурсом, который вызывается по гиперссылке, может быть любой файл, доступный через Интернет.
Примеры:
нужная программа
Такая ссылка по щелчку на словах нужная программа запустит протокол передачи файлов (ftp) и произведет выгрузку файла file.exe из каталога directory сервера servername на жесткий диск пользователя.
Пишите письма автору
В окне браузера появится текст:
Пишите письма автору
Если навести курсор на слово автору, то появится всплывающая подсказка Ссылка на почтовый ящик Администратора сайта. По двойному щелчку на слове автору будет запущена почтовая программа в режиме создания сообщений, и в поле Кому автоматически будет введен адрес username@mail.ru
Ссылки можно делать не только на внешнюю информацию, но и на внутренние места документа. Это облегчает просмотр больших документов. Разберем это на примере. Допустим, электронный вариант этих методических указаний создается по гипертекстовому стандарту. Тогда в начале каждого параграфа необходимо создать метку, на которую будет указывать гиперссылка.
Пример:
или 10.
В первом случае после метки должен идти заголовок параграфа вместе с номером, во втором – просто заголовок, т. е. при организации метки поясняющий текст в контейнере … необязателен. Если он вставлен, то он не подчеркивается и выглядит как обычный текст. Теперь Содержание можно оформить как список гиперссылок. Символ # означает, что дальше идет метка внутри документа. Пункт Содержания со ссылкой на п. 10 должен выглядеть так:
10. Теги гиперссылок
На эту же метку можно будет перейти и из любого другого места методических указаний. Например, ссылку со стр. 1 (п. 1) следует оформить так:
(см. п. 10)
Если гиперссылка указывает на внешний документ, то по умолчанию в окно браузера выдается его начало. Если же нужная в нем информация расположена дальше и обозначена меткой, то можно сразу же открыть документ на этом месте, указав после имени файла метку (так же, как мы открываем книгу с закладкой).
Пример:
http://www.sarf.spb.ru/study.htm#begin
Обратите внимание, что браузеры чувствительны к регистру ссылок. Если Вы вместо "http://webs.web.com" наберете "http://webs.Web.com", то получите нерабочую ссылку. Та же ситуация и с расширениями: если у Вас ссылка на файл "index.htm", а там находится "index.html", то результат тот же – нерабочая ссылка.
С дополнительным материалом по теме можно ознакомиться в литературе [3, 5].
Самостоятельная работа №9 Индивидуальные задания к лабораторной работе №9. "Создание web-страниц с помощью языка разметки HTML"
Задание 1
Составить свое резюме по следующему плану (в общей сложности 4-5 строчек, вместо многоточий и пояснений в скобках вставить свои данные):
Я, … (ФИО), родился … (дата и год рождения) в городе … (место, где родились).
В 20… году окончил … школу (лицей, гимназию) с углубленным изучением …, средний балл аттестата …
В 20… году поступил на специальность … ТПОП. Средний балл по первой сессии (аттестациям) …
В свободное от учебы время увлекаюсь … (перечислить не менее трех увлечений помимо учебы).
Порядок выполнения.
1. Прочтите общие сведения о языке HTML (п.п. 1, 2 теоретических сведений об HTML).
2. Подготовьте бланк для HTML-кода Вашего резюме. Для этого следует:
выполнить команду Пуск → Программы → Стандартные → Блокнот → Файл → Сохранить как…;
задать имя файла Резюме_Фамилия.html (вместо Фамилия должна стоять Ваша фамилия), сохранить файл в своей рабочей папке.
Если все сделано правильно, то в папке Вашей группы появится этот файл со значком обозревателя, в противном случае – со значком блокнота. Тогда следует удалить созданный файл и повторить все снова.
3. Введите в созданный документ стандартные теги:
напечатайте свое резюме. Сохраните файл.
5. Посмотрите, как выглядит набранный текст без «украшательств». Для этого следует открыть созданный файл из папки своей группы.
6. Проведите первую коррекцию кода. Для этого следует:
не закрывая браузер, перейти в окно Блокнота;
вставить в контейнер контейнер (вместо ФИО должна стоять Ваша фамилия);
сохранить файл, перейти в окно браузера, нажать кнопку Обновить (или F5).
Посмотрите, как повлиял тег
вставьте скелетные теги таблицы (см. п.8):
Характеристики гостиниц
|
|
……..
|
| | | |
|
|
Скачать 1.6 Mb.