Получите свидетельство
Вход
Обучающая практическая работа
Включение таблиц, связей и графики в HTML-документы
1. Цель работы
Приобретение основных навыков включения в документы HTML таблиц, гиперсвязей и графических элементов.
2. Основные положения
Таблицы
Таблицы в HTML являются удобным средством форматирования как собственно таблиц, так и "нетабличной" информации. В последнем случае таблицы используют для того, чтобы добиться жестко заданного взаимного расположения частей WWW-страницы в окне программы просмотра.
Тэг TABLE (задание и описание таблиц) является основной командой форматирования документа HTML.
Задание таблицы определяется двумя командами (и соответственно их атрибутами):
TR (table row) - описание строки таблицы;
Структура таблицы выглядит следующим образом:
. Ряд 1, ячейка 1 Ряд 1, ячейка 2 Ряд 2, ячейка 1 Ряд 2, ячейка 2
Пример простой таблицы:
, Яблоки Помидоры Апельсины Кабачки
что на экране отобразится:
По умолчанию таблица прижимается (aligns) влево, ширина таблицы определяется наиболее длинным элементом в столбце, содержание каждой клетки размещается в середине клетки по высоте и прижимается к левому углу по ширине.
Ширина таблицы задается атрибутом WIDTH= тэга Атрибут VALIGN может принимать следующие значения: top - прижать вверх; bottom - прижать вниз; middle - разместить по центу. Атрибут ALIGN может принимать следующие значения: left - прижать влево; right - прижать вправо; center - разместить по центу. Расстояние в пикселях между границей клетки и ее содержимым и между клетками определяют атрибуты CELLPADDING= и CELLSPACING= соответственно. Рассмотрим пример таблицы, занимающей весь экран просмотрщика и содержащей клетки прижатые влево и вверх: что будет отображено на экране следующим образом: Яблоки Огурцы Апельсины Помидоры В этом примера ширина таблицы задана в процентах (100%) от ширины экрана. Заголовок к таблице можно добавить помощью тэга CAPTION после тэга Заголовок к строке (rows) или столбцу (columns) можно добавить помощью тэга TH после тэга Внутри клетки, задаваемой тэгом Рамку вокруг таблицы и каждой клетки можно нарисовать с помощью атрибута BORDER=n к тэгу Отметим, что если клетка является пустой, вокруг нее рамка рисоваться не будет, поэтому в пустые клетки в таблицах следует помещать любой непечатный символ (например, неразрывный пробел ). Ширина рамки (бордюра) задается в пикселях. В следующем примере построена таблица с рамкой, заголовком и headings: Фрукты и Овощи На экране это будет отображено следующим образом: По умолчанию заголовки центрируется относительно клетки таблицы. Атрибуты ALIGN= и VALIGN= соответственным образом изменяют его горизонтальное и вертикальное расположение. При формировании таблиц, можно задавать цвет фона клеток и цвет рамки. Цвет фона во всей таблице, в строке или в клетке устанавливает атрибут BGCOLOR= к тэгам TABLE, Цвет рамки соответствующих элементов таблицы устанавливает атрибут BORDERCOLOR= тэгов TABLE, В следующем примере использовано задание одинакового цвета фона для заголовков (headings) столбцов, и разное для клеток таблицы: Фрукты и Овощи Используя тэги изменения текстовых такие как, например, (bold - полужирный), (italic - курсив) или (команда задания типа фонта) можно изменить начертание букв в тексте, однако эти команды правильно действуют (особенно ) только в пределах одной клетки. При переходе в другую клетку, при выходе из таблицы или при входе в таблицу эти команды могут быть отменены, а могут и не отменены. Для правильного их использования команды изменения шрифтов следует указывать в каждой клетке таблицы. Как известно, таблицы далеко не всегда имеют правильную клеточную структуру. Для задания не стандартных таблиц используются дополнительные тэги и атрибуты. Тэги THEAD, BODY и TFOOT делят таблицу на три части: верхняя часть таблицы (header), тело таблицы (body) и нижняя часть таблицы (footer), в каждой из которых может быть свое деление на клетки. Общие свойства столбцов таблицы определяют тэги COLORGROUP и COL, объединяя атрибуты отдельных клеток тега TD. Способ отрисовки рамки таблицы определяют атрибуты FRAME и RULES тэга TABLE. Объединять клетки таблицы в группы, вокруг которых рисуется рамка, позволяют атрибуты COLSPAN= и ROWSPAN= тэгов TH иTD Например, рассмотрим таблицу, имеющую рамку вокруг таблицы, а внутри таблицы рамкой выделяются верхняя часть таблицы (заголовок) и столбцы в нижней части: На экране это отобразится следующим образом: Принципиально в стандарте языка имеется возможность включать в качестве фона клетки таблицы рисунки, и устанавливать правила отрисовки рамки, но не все просмотрщики это понимают. URL адреса Система адресации и собственно сами адреса в HTML документах называются URL. URL - это аббревиатура от Uniform Resource Locator. Адрес URL является сетевым расширением понятия полного имени файла в операционной системе (пути к файлу filename). В этой адресации кроме имени файла и директории, где он находится, указывается сетевое имя машины, на которой этот файл расположен и метод доступа к файлу, который можно использовать для его просмотра или загрузки. Методы доступа С помощью URL, описывающих различные методы доступа к удаленным системам, можно запускать удаленные программы и передавать им значения. На этом принципе построены шлюзы в другие интернетовские сервисы. Рассмотрим несколько наиболее часто используемых типов URL адресов и методов доступа. Файлы Допустим, файл с именем "internet.zip" лежит на FTP-сервере ftp.ict.nsc.ru в директории /pub/winsite/www/. Тогда URL адрес этого файла будет выглядеть так: file://ftp.ict.nsc.ru/pub/winsite/www/internet.zip. Пример URL адреса директории, в которой лежит файл: file://ftp.ict.nsc.ru/pub/winsite/www/. Понятно, что URL адрес корневой директории FTP сервера ftp.ict.nsc.ru выглядит вот так: file://ftp.ict.nsc.ru/. Вместо сетевого имени машины ftp.ict.nsc.ru можно указать ее IP- адрес: 193.124.243.76. Это часто бывает полезно для ускорения работы с удаленными системами при невысокой скорости передачи данных, поскольку в этом случае нет необходимости обращаться к службе DNC для поиска сетевого адреса. HTTP URLs HTTP - HyperText Transport Protocol (протокол передачи гипертекста). HTTP сервера обычно используются для предоставления гипертекстовых документов. Такие документы, в отличие от обычных, имеют ссылки на другие документы (не обязательно расположенных на этом же сервере) и состоят из текста, графики, звуков, анимации. Для вызова документа "url. html", который находится в директории /win/docs/ html/ WWW сервера www.ict.nsc.ru необходим следующий URL адрес: ://www.ict.nsc.ru/win/docs/ html/url. html. По умолчанию все программы по протоколу HTTP ищут WWW сервер на 80 порту, но можно и явно указать порт (также как и в gopher'e): http://www.weblab.com:1234/pub/files/foobar. html. Частичные URL Частичный URL указывает на документ, который находится на том же сервере и в той же директории, где и документ, в котором встречается эта ссылка. Так, например, если документ, где вы нашли эти две строчки, имел URL http://www.w3c.net/WWW/foo. html, то полный URL у второго частичного должен выглядеть как http://www.w3c.net/WWW/docs. html. Сокращенные URL адреса определяются по правилам, принятым в операционной системе UNIX. Например, адрес ../win/file. html означает переход на одну директорию вверх и выбор файла из поддиректории win с именем file. html или адрес /docs/ball.gil - переход в корневую директорию и выбор файла с полным именем docs/ball.gif. Гиперсвязи Связи (часто называемые гиперсвязями) являются особенностью, которая оправдывает наличие части HT в аббревиатуре HTML (HyperText Markup Language - Язык разметки гипертекста). Связь - это прямое соединение отдельных точек в документе с другими точками в том же самом или других документах. В HTML терминологии эти точки часто называют anchors (якорь) и bookmark (закладка). Существуют два конца связи (якоря): связь осуществляется от одной точки к другой. Последняя, называемая целью (target) связи, часто является началом документа. В простейших случаях вы создаете связь от одной точки вашего документа к другому документу (вашему собственному или написанному кем-то еще). У вас есть возможность решить, какие слова будут действовать, как видимое представление связи, т.е. фразы, которые отличаются от остального документа, и, кроме того, вам необходимо знать Web адрес - этого документа. Чтобы установить гиперсвязи и "якоря" (anchors) для них, т.е. определить, какое слово или другая конструкция в документе обеспечивает связь с ресурсом (например, с файлом HTML), или специфицировать, что текущее место экрана может использоваться с данным именем, как флажок для таких связей (в том же или другом документе), необходимо использовать тэг . A-элемент в программе из вида текст якоря преобразуется при выводе на экран так, что текст якоря представляется способом, выделяющим его из другого текста (например, подчеркиванием или подсветкой). Замечание: В якорь гиперссылки можно включить изображение из графического файла. При этом щелчок мышью на любой части этого изображения приведет к выбору данной гиперссылки. Гиперсвязь с определенным разделом HTML-документа Гиперсвязь может ссылаться не только на некоторый HTML-документ вообще, но и на определенное место в таком документе, так называемую мишень (target). При выборе гиперсвязи, ссылающейся на мишень, программа просмотра загружает связанный документ и выводит его в окне начиная с того места, где расположена данная мишень. Для того чтобы можно было ссылаться на мишень в некотором HTML-документе, необходимо дать этой мишени определенное имя, встречающееся в пределах данного документа только один раз. Синтаксис гиперсвязи, ссылающейся на мишень, отличается от обычного, рассмотренного в предыдущих разделах, только тем, что сразу после пути к файлу или URL связанного документа (без пробелов!) записывается символ # и имя мишени. Имя мишени может быть любой комбинацией букв, цифр и символов подчеркивания, но не должно содержать никаких других символов или пробелов. Если гиперсвязь ссылается на мишень, расположенную внутри того же документа, то тогда задается лишь имя мишени, перед которым также записывается символ #. Наиболее часто гиперсвязи такого рода используются при оформлении оглавлений документов и ссылок на глоссарий. Синтаксис мишени: Мишень. Синтаксис гиперссылки: Якорь. Пример: Пусть мишень находится в файле glossary. html, а якорь гиперсвязи - в файле signal_processing. html, расположенном в той же директории, что и glossary. html. Фрагмент файла glossary. html: Firmware Программно-аппаратные средства; программы ПЗУ. first-in, first-out Очередь; структура данных первым вошел - первым вышел. Фрагмент файла signal_processing. html: Буфер был организован в виде структуры данных #first_in _first_out" first-in, first-out. На экране якорь выглядит следующим образом: Буфер был организован в виде структуры данных first-in, first-out. Мишень на экране выглядит следующим образом: first-in, first-out Очередь; структура данных первым вошел - первым вышел. Гиперсвязь с документом, находящимся в той же директории на том же WWW-сервере или локальном диске В этом случае достаточно указать имя связанного файла. Синтаксис: Якорь Пример: Список публикаций сотрудников лаборатории насчитывает более трехсот статей. Гиперсвязь с документом, находящимся в другой директории на том же сервере или локальном диске В этом случае достаточно указать относительное имя директории и имя файла. Синтаксис: Якорь . Пример: Пусть HTML-документ находится в директории /usr/students/ public_ html, а связанные HTML-документы с именами my_publications. html и resume. html - в директории /usr/students/pub-lic_ html/personal_info. Тогда гиперсвязь кодируется на HTML таким образом: Заинтересованных лиц прошу прочитать мое personal_info/resume. html"резюме и список публикаций. Гиперсвязь с документом, находящимся в той же файловой системе, с использованием протокола file Для гиперсвязей с документами только в пределах данной локальной файловой системы можно воспользоваться специальным протоколом file. Синтаксис: file://путь_к_файлу"Якорь. Пример: Предположим, что документ предназначен для пользователя IBM PC-совместимого компьютера под управлением Windows 95. Пусть HTML-документ с именем LocalTest. html находится на одном из локальных дисков, а документ index. html, на который сделана ссылка - на локальном диске C: в директории \DIMA\HOMEPAGE. Тогда гиперсвязь с файлом index. html в файле LocalTest. html кодируется на HTML так: Локальная версия домашней страницы Как видно из примера, имя дисковода обозначается соответствующей латинской буквой, за которой следует вертикальная черта | (а не двоеточие!). Сразу после двоеточия идут три косые черты подряд, при этом, самая правая из них обозначает корневую директорию. Гиперсвязь с документом, находящимся на другом WWW-сервере В этом случае требуется указать URL полностью по правилам, описанным ранее. Синтаксис: /имя _директории/имя_файла"Якорь Пример: Гиперсвязь с документом http://bunny.cs.uiuc. edu: 8000/302/index. html: Курс //bunny.cs.uiuc.edu: 8000/302/ind-ex. html" Software Engineering , который ведет профессор Волков, в значительной степени посвящен работе над большими программными проектами. На экране это будет выглядеть следующим образом: Курс Software Engineering, который ведет профессор Волков, в значительной степени посвящен работе над большими программными проектами. Гиперсвязь с сервером электронной почты (Mail Server) Большинство программ просмотра позволяет отправить электронное письмо по адресу, указываемому в просматриваемом HTML-документе. Для работы с сервером электронной почты программа просмотра читателя документа также должна быть предварительно настроена. Синтаксис: Якорь. Пример (адрес вымышленный!): Жду ваших писем! На экране это будет выглядеть следующим образом: Жду ваших писем! Включение графики в HTML-документы Включение изображения из графического файла (Inline Image) В HTML-документ можно включить изображения из графических файлов в форматах GIF, JPEG и некоторых других. Наиболее часто используемыми в WWW являются графические форматы GIF и JPEG. Синтаксис: Атрибут SRC служит для указания программе просмотра имени и местоположения графического файла. Чтобы программа просмотра смогла найти графический файл с изображением, включаемым в HTML-документ, необходимо указать имя и местоположение графического файла в WWW-пространстве. При этом, в зависимости от взаимного расположения HTML-файла с документом и графического файла, можно указывать либо абсолютный URL графического файла, либо его координаты относительно HTML-файла с документом. Ниже мы рассмотрим, в порядке возрастания сложности, следующие три ситуации: графический файл находится на том же сервере и в той же директории, что и сам HTML-документ; графический файл находится на том же сервере, что и сам HTML-документ, но в другой директории; графический файл и HTML-документ находятся на разных серверах. В любом случае допустимо указание полного, или, как говорят, абсолютного, URL графического файла. Абсолютный URL включает имя протокола, адрес сервера, номер порта (если он отличается от принимаемого по умолчанию номера 80), имя директории и имя файла. Однако, в первых двух из вышеперечисленных случаев указание абсолютного URL часто не только избыточно, но и нежелательно, поскольку значительно усложняет перенос документа с одного сервера на другой или даже из одной директории в другую. Если файл с изображением находится на том же сервере (или на том же локальном диске) и в той же директории, что и сам HTML-документ, то достаточно указать только имя этого файла. Атрибуты ALIGN, WIDTH, HEIGHT, HSPACE и VSPACE, задающие расположение рисунка на странице, являются необязательными, а ALT, задающий так называемый альтернативный текст, - обязательным, поскольку он используется неграфическими программами просмотра. При помощи необязательного атрибута ALIGN флага bottom - нижняя сторона изображения выравнивается по базовой линии следующего за ним текста; absbottom - нижняя сторона изображения выравнивается по низу строки следующего за ним текста; absmiddle - горизонтальная линия, проходящая через центр строки следующего за рисунком текста выравнивается по центру изображения; middle - базовая линия следующего за рисунком текста выравнивается по центру изображения; top - изображение располагается на одной линии с самым высоким объектом (текстом или рисунком) в строке; texttop - изображение располагается на одной линии с самым высоким символом текста в строке; left - изображение выравнивается по левому краю окна, а следующий за ним текст обтекает его справа; right - изображение выравнивается по правому краю окна, а следующий за ним текст обтекает его слева. Используя атрибут ALGIN= со значениями LEFT или RIGHT можно создать "плавающую" картинку, которую будет обтекать текст. В конце плавающего объекта обязательно должна присутствовать тэг При помощи атрибутов WIDTH и HEIGHT задают размеры изображения в пикселях, чтобы при загрузке HTML-документа программа просмотра сразу отвела под это изображение необходимое ему пространство на странице и загрузила основной текст, который можно читать, пока программа просмотра получает содержимое графического файла. Если истинный размер изображения, содержащегося в графическом файле, не совпадает с заданным при помощи атрибутов WIDTH и HEIGHT, то результат зависит от используемой программы просмотра. В частности, Netscape Navigator 3.0 соответствующим образом растягивает или сжимает картинку Горизонтальный и вертикальный отступ между изображением и окружающим его текстом задается атрибутами HSPACE=nnn и VSPACE=nnn, где nnn - величина зазора, выраженная в пикселях. Некоторые программы просмотра HTML-документов, ориентированные на использование текстовых терминалов, вообще не способны выводить изображения. Кроме того, при низкой скорости обмена информацией между WWW-сервером и клиентом пользователь может отключить загрузку изображений и просматривать только текст, чтобы избежать длительных задержек. Чтобы в этих случаях на месте изображений не было "пустого места", необходимо задать с помощью атрибута ALT для каждого рисунка так называемый альтернативный текст, который будет выводиться на его месте при невозможности вывода графики. Задание движущегося текста Тэг MARQUEE позволяет задать движущийся текст. Этот тэг работает, к сожалению, только в MS Internet Explorer. Пример: SCROLLDELAY=200Движущийся текст. . В этом примере текст Движущийся текст. двигается слева направо со скоростью 10 пикселей с задержкой 200 миллисекунд. Существует несколько атрибутов этого тега: ALIGN=, размещающий текст в верхней (TOP), средней (MIDDLE) и нижней (BOTTOM) части бегущей строки; BEHAVIOR=, управляющий движением текста. Если его нет, то текст пробегает справа налево. Если задать BEHAVIOR=SCROLL, то текст будет просто пробегать по экрану. Это значение по умолчанию. Если указать BEHAVIOR=SLIDE, то текст выползает на экран и останавливается. Если использовать параметр ALTERNATE, то текст будет сначала выползать на экран, а потом, отскакивая от боковых стенок, прыгать; BGCOLOR= ,задает цвет фона бегущей строки; DIRECTION=, указывает направление движения текста (LEFT или RIGHT); HEIGHT= и WIDTH= задают толщину и ширину бегущей строки в пикселях или процентах от размера окна; HSPACE= и VSPACE= задают горизонтальные и вертикальные поля вокруг бегущей строки; LOOP= задает количество "пробегов" текста. Если вы хотите заставить бедный текст бегать вечно, то не используйте этот атрибут или задайте LOOP=INFINITE; SCROLLAMOUNT= определяет скорость "пробегания". Задается числами. 1 примерно равен скорости улитки, ползущей по монитору, а при SCROLLAMOUNT=8000 - вы просто ничего не увидите; для правильного задания скорости бегущей строки используйте вместе с предыдущем атрибутом атрибут SCROLLDELAY=, задающий скорость прорисовки текста в миллисекундах. 3. Задание на практическую работу Создать html документ в соответствии с рис. 6.1. Практическая работа обучающейся Матвеева Ивана Ивановича Тема работы: Включение таблиц, связей и графики в HTML документы Содержание Таблицы Графика Связи Рис. 6.1. Заголовок и содержание разрабатываемого документа Содержание документа (таблицы, графика, связи) должно быть выполнено в виде ссылок на соответствующие разделы документа. Создать раздел документа Таблицы, в котором разместить две таблицы, выполненные в соответствии с рис. 6.2. Скопировать в свой рабочий каталог файлы рисунков hardware.bmp и internet.gif. Создать раздел документа Графика, в котором разместить бегущую строку, картинки и текст в соответствии с рис. 6.3. При этом обеспечить вывод на экран браузера альтернативного текста. Создать из раздела Таблицы html - файл и присвоить ему имя Table.html. Создать произвольный текстовый файл и присвоить ему имя lab6.doc. Создать раздел документа Связи в соответствии с рис. 6.4, обеспечив ссылки на созданные файлы, на документ web.html на WWW-сервере izone.com.ua в директории docx, и на сервер электронной почты. Рис. 6.2. Раздел Таблицы Графика Пример размещения рисунков (бегущая строка) Это картинка из файла hardware.bmp в текущей директории (Альтернативный текст ”Earth”) Примеры (Картинки из файла internet.gif. Альтернативный текст ”Шарик”) Рис. 6.3. Раздел Графика Примеры организации гиперсвязей Гиперсвязь с документом Table. html в данной директории Гиперсвязь с документом lab6.doc, находящимся в той же файловой системе, с использованием протокола file Гиперсвязь с документом web. html, находящимся на WWW сервере isone.com.ua в директории doc Отправка сообщения Освоена работа почты! на адрес [email protected] (Mail server intbel.ru) Рис. 6.4. Раздел Связи 4. Содержание отчета Отчет должен содержать: Название работы. Ф.И.О. и класс, выполнившего работу. Цель работы. Задание. Твердые копии экрана, демонстрирующие результаты просмотра разработанного документа в браузере. Выводы по работе.. Значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана просмотрщика. Содержание каждой клетки может быть размещено с помощью атрибутов ALIGN= (горизонтальное положение) и VALIGN= (вертикальное положение) для тэгов
и .
, Яблоки Огурцы Апельсины Помидоры
. По умолчанию заголовок центрируется относительно таблицы. При помощи атрибутов ALIGN= и VALIGN= заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы.
или . можно поместить текст или рисунок. . По умолчанию используется нулевая толщина рамки (текст отображается в табличном формате, но без рамки).
. Фрукты Овощи Яблоки Помидоры Апельсины Кабачки
и соответственно. и .
. Фрукты Овощи Яблоки Огурцы Апельсины Помидоры
. Фрукты и овощи Яблоки Огурцы Апельсины Помидоры
ALIGN= left | right | top | texttop | middle | absmiddle | bottom | absbottom WIDTH=nnn HEIGHT=nnn HSPACE=nnn VSPACE=nnn ALT="альтернативный текст".
можно управлять расположением изображения на странице относительно текста и других изображений. Параметры атрибута выполняют следующие действия:
с атрибутом CLEAR=, который прекращает обтекание картинки. После этой команды текст выводится ниже графического файла
-75%
Методика преподавания информатики, инструменты оценки учебных достижений учащихся и мониторинг эффективности обучения по ФГОС ООО и ФГОС СОО
Получите комплекты видеоуроков + онлайн версии
Обучающая практическая работа "Включение таблиц, связей и графики в HTML-документы" (2.01 MB)
0
82
1
Нравится
0
Похожие файлы
Зарегистрироваться
Восстановление пароля
