Цель работы. После выполнения лабораторной работы слушатель будет:
1. иметь представление о методах и приемах форматирования текста в HTML;
2. освоит методики представления текстов фермате HTML.
3. научится форматировать абзацы, отступы, пробелы и т.д.
Задание: Подготовить отформатированный текст по дисциплине в размере одного модуля. Создать файл с расширением htm
Введение в HTML
История развития языков уходит в 60-е годы 20 в. Это было время, когда резко возросло количество компьютерных пользователей. На больших предприятиях и учреждениях
возникла потребность обмениваться информацией между пользовательскими компьютерами. В это время был разработан язык GML ( General Markup Language ), который предназначался для использования на ЭВМ семейства IBM . В 80-е годы язык GML развился
до мощного универсального языка разметки SGML , который наибольшее распространение получил при оформлении технической документации в военном ведомстве США. В
начале 80-х годов этой проблемой занялся Тим Бернерс-Ли. При разработке языка в основу был заложен язык SGML и приемы работы с гипертекстом, с чем и связано название
созданного им языка – HTML ( Hyper Text Markup Language ). Так как гипертексты представляют собой электронные документы, работать с ними можно только на компьютере.
Связи в гипертекстовой структуре осуществляются с помощью ссылок, благодаря которым пользователь из рабочего документа может вызвать любое количество дополнительных документов. Все документы находятся на серверах, которые размещены по всему миру и соединены между собой каналами.
Ниже приведена хронология развития HTML:
Декабрь 1990 года – рождение языка HTML в рамках проекта World Wide Web, созданного Тимом Бернерсом-Ли.
Лето 1991 года – первичная спецификация языка HTML выложена в Интернет для всеобщего обозрения.
Апрель 1994 года – появление начального документа HTML 2.0.
Июль 1994 года – появление чернового варианта спецификации HTML 2.0.
Сентябрь 1995 года – официальное принятие спецификации HTML 2.0 (RFC 1866).
Март 1995 года – выпущен черновой вариант HTML 3.0.
Май 1996 года – появление HTML 3.2.
Июль 1997 года - выпущен черновой вариант HTML 4.0.
Апрель 1998 года - принятие спецификации HTML 4.0.
Февраль 1999 года - принятие спецификации HTML 4.01.
Ключевые слова
Браузер – программа, которая применяется для поиска и просмотра документов в сети
Internet . Браузер выполняет следующие функции:
находит Web –сервер и устанавливает с ним связь;
интерпретирует HTML -код и выводит документы на экран в заданном формате
вместе с сопутствующей графикой;
читает гиперссылки в документах и осуществляет переходы на указанные документы;
поддерживает переходы по страницам вперёд и назад;
поддерживает элементы мультимедиа, звук, видео и трехмерную графику.
Наиболее популярным браузером является Internet Explorer 6
Web -страницы (Web -документы) - это гипертекстовые документы в WWW , которые содержат такую информацию, как текст, графику, звук и видео. Такие документы
имеют расширение html или htm . Другими словами это документ, подготовленный в
формате гипертекста и размещенный в WWW
2
Web -сайт - совокупность Web -страниц, объединенных одной общей темой и помещенных, как правило, на одном узловом компьютере.
Web -сервер -компьютер, подключенный к Интернету, на котором выполняется специальная программа, обеспечивающая обработку запросов клиентов и выдающая клиентам
различные страницы с информацией.
WWW (World Wide Web ) - глобальная система распространения гипертекстовой информации, использующая в качестве транспортировки Интернет.
URL (Uniform Resource Locator )( унифицированный локатор
ресурса) – уникальный адрес файла в Интернете, который хранится на хост-компьютере
подключенному к Интернету. С помощью URL, независимо от протокола доступа, может быть найдена любая информация в Интернете.
Базовый URL – часть адреса, которая является общей для всех ссылок текущей Web страницы
HTML (HyperTextMarkupLanguage) язык разметки документа - включает в себя
различные способы оформления гипертекстовых документов, дизайн, гипертекстовые
редакторы, браузеры. HTML является основным языком для создания документов в
WWW .
Элемент (element) - конструкция языка HTML . Это контейнер, содержащий данные и
позволяющий отформатировать их определенным образом. Любая Web -страница представляет собой набор элементов. Одной из основных идей гипертекста – возможность
вложения элементов.
Все элементы языка можно разделить на три группы:
элементы, которые создают структуру гипертекстового документа;
элементы, создающие эффекты форматирования
параметр или свойства элемента.
Атрибут (attribute ) - это переменная, которая имеет стандартное имя и которой может присваиваться определённый набор значений: стандартных или произвольных. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
Тег (tag ) - начальный или конечный маркеры элемента. Теги определяют границы
действия элементов и отделяют элементы друг от друга. В тексте Web -страницы теги
заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылка может осуществляться и внутри одного и того же документа.
Фрейм ( frame ) - имеет значения:
область документа со своими полосами прокрутки;
одиночное изображение в сложном (анимационном) графическом файле.
Апплет ( applet ) - программа, передаваемая на компьютер клиента в виде отдельного
файла и запускаемая при просмотре Web – страницы.
Скрипт или сценарий ( script ) - программа, включаемая в состав Web -страницы для
расширения ее возможности.
CGI ( Common Gateway Interface ) -общее название для программ, которые работая на
сервере, позволяют расширить возможности документов. Без таких программ невозможно
создать интерактивные страницы.
Программный код - аналог понятия “текст программы”. Код HTML – гипертекстовый
документ в своем первоначальном виде, когда видны все элементы и атрибуты.
Сайт (site ) набор Web – страниц, принадлежащих одному владельцу.
Загрузка ( downloading ) копирование файлов с сервера на компьютер – клиент.
Базовый цвет каждый цветовой оттенок на экране монитора получается сложением трех
базовых цветов: красного, зеленого и синего.
3
Элементы форматирования документа
Тег(и) - ( Tag)
Замечание: Осваивать HTML надо не в специализированных программных пакетов, а
основываясь на ручном создании HTML-кода документа. Научившись вручную писать
HTML-код документа, вы без труда освоите любой HTML-редактор.
Теги это начальный или конечный маркеры элемента. Теги определяют границы действия элемента и отделяют элементы друг от друга. В тексте Web -страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
Теги подразделяются на две группы:
Теги логического форматирования;
Теги физического форматирования
Теги логического форматирования
Отображают на экране монитора элементы документа, таким образом, как установлено по умолчанию спецификации языка разметки HTML .
Переопределять их параметры или свойства нельзя (кроме использования стилей
CSS)
<acronym> </acronym> используется для расшифровки аббревиатуры. Реализуется
через параметр title и отображается в браузере при наведении курсора на словоаббревиатуру.
Например: <acronym title=“HyperText Markup Language”> HTML</acronym> расшифровка сокращений.
• < cite ></ cite > Позволяет выделить цитаты и высказывания, названия библиографических источников и пр. Текст помещенный между < cite ></ cite > браузером
выделяется курсивом. Аналогичные теги: <EM>,<I>
• <Hx ></ Hx> x = 1,2,--6 Задаёт определенный размер заголовка, всего текста целиком или его конкретного фрагмента. Этот тег уже подразумевает отступ от текстовой части и делать отступ самостоятельно не надо.
• < strong > </ strong > - Используется для выделения фрагментов текста, которых
необходимо акцентировать внимание пользователя. В результате действия тега,
фрагмент текста выделяется жирным начертанием.
Теги физического форматирования
Теги физического форматирования предназначены для выделения отдельных текстовых
фрагментов различными способами, установленными автором документа и позволяют
разработчику документа визуально изменять вид текста, варьируя его параметры и значения. К тегам физического форматирования относятся:
• Тег <P > </ P > - элемент абзаца. Применяется в тексте для обозначения законченности мысли. В Web -странице четкое деление на абзацы обязательное правило, поскольку тексты должны быть лаконичными.
Пример применения : <p> Здесь располагается текст абзаца </P> (разрешается писать и
заглавные буквы и простые)
Тег <p> имеет элемент align с атрибутами left, center, right и justify которые выравнивают абзац по левому краю, по центру, либо по правому краю, соответственно.
<p align=“left”>Text</p>;
<p align=“center”>Text</p>;
<p align=“right”>Text</p>;
<p align=“justify”>Text</p>;
Тег <br>. Элемент, обеспечивающий принудительный переход на новую
4
строку. Имеет только начальный тег. В месте его размещения строка заканчивается, а
оставшийся текст печатается с новой строки.
Атрибуты:
o left – следующая строка текста отражается на ближайшем свободном
пространстве у левого поля;
o right - следующая строка текста отражается на ближайшем свободном
пространстве у правого поля;
o all - следующая строка текста отражается на ближайшем свободном пространстве у любого поля;
• <NOBR></nobr>Текст, заключенный между этими тегами, будет выведен в одну
строку. Если строка не вмещается в экран, применяют горизонтальную полосу
прокрутки.
• < B ></ B > отображает текст жирным начертанием
• < I ></ I > - выделяет нужную часть текста курсивом.
• < u ></ U > - делает текст подчеркнутым.
• < small ></ small > - отображает в себе текст шрифтом, меньшим, чем шрифт
окружающего текста;
• < span ></ span > - присваивает части текста определенные свойства;
• < sup ></ sup > - располагает часть текста по нижней линии;
• < sub ></ sub > располагает часть текста по верхней линии;
• < tt ></ tt >- элемент, обозначающий текст телетайпа;
• < ins ></ ins > и < del ></ del > Эти теги позволяют выделить текст, который надо
обозначить как вставленный или удаленный (соответственно). Вставленный
текст подчеркивается. Удаленный текст зачеркивается.
• < FONT ></ font > Определяет тип, размер и цвет шрифта.
Атрибуты:
o face (вид) - позволяет задавать определенный шрифт или несколько шрифтов. Например:
<Font face =“ Arial, Verdana, Tahoma”>;
o size – указывает размер шрифта в условных единицах от 1 до 7;
o color – задает цвет шрифта (см Приложение 1).
• <bdo></bdo> Позволяет изменять направление текста. Используется с атрибутом
dir, которому присваивается либо LTR (слева направо), либо RTL (справа налево).
< BDO dir =“ RTL ”> Направление текста можно изменить</ bdo >
• < blockquote > </ blockquote > Элемент задает отступ слева по тексту.
Очень полезный тег при форматировании текста, так как позволяет выделять отдельные
фрагменты текста и сместить их вправо, а также служит для выделения длинных цитат.
Структура Web- документа
При запуске браузера необходимо ввести информацию о версии HTML. Эта информация
содержится в теге <DOCTYPE>, который вынесен за пределы контейнера <html>.
В теге <DOCTYPE> указывается версия HTML и стандарт DTD, либо его версия. Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
"http://www.w3.org/TR/html4/loose.dtd">
Здесь:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 объявляет, что документ
соответствует спецификации DTD HTML 4.01, которая рекомендована консорциумом W3C. Облегчает распознавание этого файла другими программами. Рекомендуется оставлять этот документ без изменения.
Strict DTD –поддерживает все элементы и атрибуты, кроме устаревших.
5
Transitional DTD –включает все элементы и атрибуты, включая и устаревшие.
Frameset DTD – поддерживает все элементы, а также и элементы фреймов.
EN – указывает язык DTD.
HTML – документы в составе учебника должны проходить проверку на соответствие
DND XHTML 1.1 Проверку файла можно выполнить, если в контейнер meta включить
переход по адресу:
"http://www.w3.org/TR/html4/loose.dtd">
Любой Web-документ состоит из контейнера <HTML> </HTML>, внутри которого вложены контейнеры <head></head> и <body></body>.
Весь Web-документ заключается в контейнере HTML, который, начинаясь с тега
<HTML> и заканчиваясь тегом </HTML>. Этот тег дает указание браузеру информацию
о том, что документ разработан с помощью языка разметки HTML.
Внутри данного контейнера содержатся два контейнера.
1. Контейнер <head></head>, который, содержит парный тег - <title>Название Webдокумента</title>, который предназначен для указания имени электронного документа.
Все, что находится между парой тегов <title> и </title> интерпретируется браузером как
название Web- страницы. Если в документе имеются гиперссылки, то название документа,
на который указывается гиперссылкой, будет появляться во всплывающей подсказке.
Другой, наиболее важный тег <META>. Этот элемент содержит служебную информацию
и включает в себя два атрибута:
определения типа данных;
содержание
Информация, заключенная в теге <meta> предназначена для описания внутренних
свойств HTML-файла. Например:
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
показывает, что в документе применена кодировка windows-1251, либо
meta http-equiv="Content-Type" content="text/html; charset=utf-8">- кодировка
utf-8;
<meta name="GENERATOR" content="Microsoft FrontPage 6.0"> документ создан в редакторе Microsoft FrontPage 6.0;
<script language="JavaScript"> ….</script> - пишется программа на языке программирования JavaScript;
<meta name=”keywords”> - указание ключевых слов документа;
<meta name=”author”> - информация об авторе (авторах) документа;
<meta name=”rating”> - установление возрастной категории содержания документа и ряд другой информации.
Далее вставляются каскадные таблицы стилей CSS – это определенный и специально
оформленный набор правил, описывающих форматирование различных элементов Webстраницы. Более подробно каскадные стили таблиц будут описаны в соответствующей лабораторной работе.
<style type="text/css">
<!—
.text {font-family:Arial Cyr; color: #000000; line-height: 8mm; font-size: 10pt;}
#kursiv {font-style: italic ; } (указывает, что шрифт текста Arial Cyr, цвет черный, высота
линий 8 мм, высота букв 10 пикселей)
.color {background-color: #CECECE; } (цвет фона светло-серый)
-->
</style>
Примечание: все, что заключено между <!—и -- > воспринимается браузером как комментарии.
Далее идет закрывающийся тег </head>;
6
2. Заключительным контейнером выступает теги <body> текст</body>. Все, что будет
располагаться между тегами <body> и </body> будет выводиться на экран.
Рассмотрим основные элементы контейнера.
Контейнер начинается парным тегом <body></body>, который содержи ряд параметров,
которые условно можно разделить на четыре группы:
o параметры фона;
o границы документа;
o указание цвета текста;
o указание цвета гиперссылок.
Установка цвета фона, текста и гиперссылок можно задавать в символьном эквиваленте,
шестнадцатеричном коде или в формате цветовой модели RGB.
<BODY bgcolor=”white”>;
<BODY bgcolor=”#FFFFFF”>, где первые две буквы FF задают оттенок красного
цвета, вторые две FF- зелёного цвета и третьи FF – синего цвета. Комбинация цифр
и букв, позволяет создать любые цветовые оттенки. (см. Приложение 1)
<BODY bgcolor=”255,255,255”>
<BODY background=”images/bg0.gif”> -задаст фон в виде рисунка.
Цвет гиперссылок задается, как правило, в зависимости от их предназначения:
активные гиперссылки - alink=”#OOOOFF”;
не посещаемые - link=”#0000FF”;
посещаемые – vlink=”blue”
Далее идет определенным образом форматированный текст.
Цель работы:
Приобрести опыт оформления документов на языке гипертекстовой разметки
HTML.
Слушатель будет знать:
методику создания Wed- документов;
общую структуру документов;
создавать заголовки, абзацы и редактировать их;
Лабораторная работа 1. Структура Web- документа
Цель работы “Структура Web- документа”:
приобрести опыт оформления документов на языке гипертекстовой разметки
HTML.
научиться создавать Web-документы и форматировать их.
После выполнения работы, слушатель будет знать:
методику создания Wed- документов;
общую структуру документов;
создавать заголовки, абзацы и форматировать их;
Ход работы
Общтй вид Web – документов представлен приведенной ниже программой:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
7
<body
</body>
</html>
Создадим шаблон документа. Сохраним его как Web – документ и при выполнении дальнейших лабораторных работ, будем открывать его, набирать текст в контейнере тела и сохранять под другим именем.
Итак начнем работу.
1. Откройте “Блокнот ”;
2. Наберите или скопируйте первую часть: <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN">
http://www.w3.org/TR/html4/loose.dtd">
3. Создайте контейнер HTML, для этого наберите открывающийся тег <HTML> и
закрывающийся тег </HTML> (не забывайте, при этом, поставить “слэш” /).
Учтите, этот контейнер содержит внутри себя несколько контейнеров, поэтому
разнесите их по документу.
4. Создайте контейнер заголовка, для этого наберите теги контейнера
<head>и</head> , внутри которых наберите:
1. начальный тег заголовка документа <title>, назовите документ и вставьте конечный тег заголовка </title> ;
укажите тип кодировки. Для этого вставьте тег <meta> (закрывающегося тега нет!) и наберите в нем
фрагмент программы задания кодировки всего документа: <meta http-
equiv="Content-Type" content="text/html;charset=windows-1251"> кодировка
windows, либо <meta http-equiv="Content-Type" content="text/html; charset=utf8">- кодировка utf-8;
5. Закройте контейнер </head>;
6. Организуйте контейнер текста, для этого напишите тег <body> (далее идет текст
документа);
7. Закройте контейнеры </body> и </html>;
8. Сохраните документ. Для этого:
a. в программе “Блокнот”, кликните левой кнопкой мыши на иконке “Файл” и
в открывшемся окне нажмите “Сохранить как”;
b. в открывшемся окне выберете папку, в которой будите сохранять документ,
и в нижнем окне напишите название вашего файла, желательно на английском языке.
8
Итак, создали шаблон Web- документа. В дальнейшем будем открывать этот шаблон документа, вставлять туда свой текст и сохранять документ под другим именем.
Лабораторная работа 2. Форматирование
Цель работы:
Используя теги логического форматирования и физического форматирования, отформатировать предложенный текст.
Ход работы
1. Откройте шаблон документа (который создали в предыдущей лабораторной работе)
в браузере Internet Explorer;
2. Кликните левой кнопкой мыши на иконке “Вид” в главном меню,
а затем кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа.
3. В открывшийся “Блокнот ” вставляйте по частям и форматируйте предложенный
ниже текст (если есть свой текст, то лучше вставить его);
Текст для форматирования
Фосфор и его важнейшие соединения
Фосфор входит в состав фосфорита Са3(РО4)2, апатита Са3(РО4)2·СаF2, содержится в
костях животных и рыб.
В свободном состоянии фосфор образует более десяти аллотропических
<!—цвет фразы выберите из приложения 1-- > модификаций, среди которых наиболее
9
исследованы белый, красный и черный фосфор.
Белый фосфор – мягкое воскообразное вещество, состоящее из тетраэдрических молекул Р4. Он плавится при 44 0С, кипит при 257 0С. При 800 0С начинается диссоциация
четырехатомных молекул на двухатомные Р2, а при 1200 0С – на атомы. Белый фосфор –
реакционное вещество. На воздухе при комнатной температуре он окисляется до Р4О10, а
при 40 0С происходит самовоспламенение и бурное горение фосфора.
Изучение взаимодействия белого фосфора с кислородом привело к открытию цепных
реакций. Автором этого открытия является Н.Н. Семенов – российский физико-химик,
лауреат Нобелевской премии.
Примечание: при форматировании используйте следующие теги:
• < B ></ B > отображает текст жирным начертанием
• < I ></ I > - выделяет нужную часть текста курсивом.
• < u ></ U > - делает текст подчеркнутым.
• < small ></ small > - отображает в себе текст шрифтом, меньшим, чем шрифт
окружающего текста;
• < span ></ span > - присваивает части текста определенные свойства;
• < sup ></ sup > - располагает часть текста по нижней линии;
• < sub ></ sub > располагает часть текста по верхней линии;
Например, для написания фразы “Белый фосфор” , необходимо заключить эту фразу
между тегами <b><i><u> Белый фосфор </u></i></b>, а формулу Са3(РО4)2 запишите
между тегами <p>текст, текст Ca<sup>3</sup>(PO<sup>4</sup>)<<sup>2</sup> текст /p>
4. Отформатированный текст, представить в виде Web-страницы. Назовите файл
именем document’s form.htm и сохраните его.
5. Откройте файл в Internet Explorer и посмотрите результат. Если есть необходимость, проведите повторно отредактируйте его.
Самостоятельная работа
1. В структуре HTML существует _______контейнера. Вставьте число.
2. Укажите теги форматирования:
а) Теги логического форматирования;
б) Теги физического форматирования;
в) Теги фактического форматирования;
г) Теги идеального форматирования.
3. Для расшифровки аббревиатуры используется тег____________
6. Абзац можно создать тегом __________________
7. Приведите в соответствие теги и их значения
• < B ></ B >
- выделяет нужную часть текста курси• < I ></ I >
вом
• < u ></ U >
- отображает текст жирным начертанием
- делает текст подчеркнутым.
8. Приведите в соответствие теги заголовка и их значения
Теги
Значения
ТЕКСТ
H1
H2
ТЕКСТ
H3
ТЕКСТ
H4
ТЕКСТ
ТЕКСТ
H5
H6
ТЕКСТ
10
9. Укажите атрибут тега <p>, который расположит текст в правой части текстового
поля:
<p align=“left”>Text</p>;
<p align=“center”>Text</p>;
<p align=“right”>Text</p>;
10. Вставьте теги P <___>4O<____>10, чтобы получить формулу P4O10;
11. Вставьте теги PO<____>4<_____>3-, чтобы получить ион PO43-;
12. Для раскрытия значения HTML используется тег ____
Рабочая тетрадь:
Развитие языка гипертекстовой разметки началось ________
Как осуществляются связи между документами в HTML____
Браузер – программа ____
Web -страницы (Web -документы)-
HTML (HyperTextMarkupLanguage) язык разметки документа - включает в себя____
Атрибут (attribute ) - это переменная, ____
Тег (tag ) . Теги определяют ____
<acronym> </acronym> используется для ____
<Hx ></ Hx> (x = 1,2,--6 ). Задаёт ____
11
< strong > </ strong > - Используется для ____
Тег <P > </ P > - Элемент абзаца. Применяется в тексте ___
Запишите атрибуты тега абзаца для выравнивания по левому, центру и правому краям.
< sup ></ sup > - располагает часть текста по ____
< sub ></ sub > располагает часть текста по ___
Задайте гарнитуру шрифта, размер шрифта, цвет для отдельного слова в тексте.
Элемент задает отступ слева и справа по тексту тегом _____
Перечислите все возможные случаи задания цвета фона.
Задайте цвет гиперссылок
12
Лабораторная работа №2
Таблицы
Цель работы: дать представление слушателям о роли таблиц в Web-документах, освоить
методику создания простейших таблиц; создать таблицы по возрастающей сложности.
Рекомендации: В тетради для лабораторных работ перепишите краткую информацию о
методики составления таблиц, расшифровку значений основных тегов форматирования
таблиц и далее выполняйте рекомендации к выполнению лабораторной работы.
Таблицы занимают важное место в создании Web- страниц. Это связано с тем, что при
помощи таблиц можно создавать шаблоны документов и представлять текстовые документы в виде компактного расположения на странице с помощью кода сценариев. В таблицах можно размещать коллекции картини, фонов, маркеров и разделителей и проводить
гиперссылки на Web -документы. Пространство, отведенное под таблицы, разбивается на
прямоугольные ячейки (с видимыми или невидимыми границами), в которых размещаются элементы документа – изображения, кнопки, ссылки, вложенные таблицы.
Прежде чем выполнить лабораторную работу, ознакомимся с основными тегами, которые
используются при создании таблиц.
Правила описания таблиц
Основным тегом-контейнером является тег <table>, который требует присутствие закрывающегося тега </ table >. В состав тега входит ряд параметров, которые могут быть указаны, либо задаются по умолчанию.
Параметр border
C помощью параметра border можно задать рамку, показывающую внутреннюю структуру
таблицы – ряды и ячейки. Если параметр отсутствует или равен нулю <table border =”0”>,
рамка не будет отображена. Это помогает создать списки или использование таблиц в качества основы Web -документа. Значение параметра (в пикселах) можно задать и значением отличным от нуля, при этом, чем большее значение, тем толще будет рамка.
Параметр bordercolor
Параметр bordercolor предназначен для определения цвета рамки вокруг таблицы. Значение цвета указывается в шестнадцатеричном формате (# FFCCOO) или в виде наименования (red , green ). Например:
< table border =”0” bordercolor =”# FFCCOO ”>. Полный набор цветовой гаммы представлен в таблице в конце методического указания.
Параметр cellspacing
Параметр cellspacing задает расстояние между соседними ячейками таблицы по вертикали
и горизонтали. Значение параметра указывается в пикселах, например, <table border =”0”
bordercolor =”# FFCCOO ” cellspacing =”2”> Расстояние между соседними ячейками (как
по горизонтали, так и по вертикали) всегда будет одинаково.
Параметр cellpadding
Для создания определенного отступа содержимого ячеек, вводится параметр cellspacing .
Значение параметра задается в пикселах и обязательно указывается.
Например : <table border=”0” bordercolor =”#FFCCOO” cellspacing=”2” cellpadding=”10” >.
В случае, если <cellpadding =”0” >, содержимое ячейки будет прижато вплотную к границы таблицы, и если значение параметра border =”0” , то текст соседних ячеек сольется, что
приведет к искажению смысла документа.
Параметр align
Этот параметр применяется для выравнивания таблицы относительно окна монитора: по
левому краю, по центру и по правому краю.
- align =”left ”- выравнивание таблицы по левому краю документа. Если этот параметр не
задан, то такое выравнивание будет произведено автоматически (по умолчанию)
- align=”center” – центрирование документа.
13
- align =” right ”- выравнивание таблицы по правому краю документ.
Этот параметр может быть использован и для выравнивания текста внутри ячеек таблицы.
Помимо функции выравнивания таблицы по горизонтали документа, параметр align позволяет получить эффект обтекания таблицы текстом.
Параметры width и height
Параметры width и height отвечают за ширину и высоту таблицы, соответственно. Значение этих параметров указывается в процентах или в пикселах. В последнем случае ширина
и высота таблицы будет фиксирована. При использовании в качестве единицы измерения
процентов размеры таблицы будут варьироваться в зависимости от размеров окна монитора.
Параметры тегов <tr>,<td>,<th>
Теги <tr>,<td>,<th> составляют внутреннюю структуру таблицы и могут содержать определенный набор параметров. Тег <tr> задает набор ячеек таблицы, тег <td> ячейку, а тег
<th> заголовок.
Параметр valign
Этот параметр, в отличии от align , выравнивает текст ячейки по вертикали.
• valign =” middle ” – выравнивание по середине ячейки (значение по умолчанию);
• valign =” top ” – выравнивание по верхнему краю ячейки;
• valign =” botton ” – выравнивание по нижней границе ячуйки;
• valign =” baseline ” – выравнивание по базовой линии (привязка текста одной строки к
единому уровню).
Параметры colspan и rowspan
Параметры colsoan и rowspan (объединение ячеек) применяются при необходимости объединения нескольких ячеек в одну.
- colspan – показывает, на какое количество ячеек по горизонтали необходимо расширить
<td> или <th>.
- rowspan - показывает, на какое количество ячеек по вертикали необходимо расширить <
td > или < th >.
При использовании параметров colspan и rowspan особое внимание следует уделять корректному объединению соседних ячеек таблицы, а также указанию закрывающихся тегов
< td > и < th >
Параметр frame
Часто требуется создать текст, которые состоит из колонок отстоящих друг от друга на
определенном расстоянии, или текст, заключенный в рамку и т.д. Для этого используется
тег frame с атрибутами:
• box – рамка с четырех сторон;
• border – рамка с четырех сторон;
• above – рамка только сверху;
• below – рамка только снизу;
• hsides – верхняя и нижняя части рамки;
• vside – левая и правая части рамки;
• lhs - только левая часть рамки;
• rhs – только правая часть рамки;
• void – нет рамки
Для правки вертикальных линий в таблицы применяется тег rules с атрибутами:
• al – отображение линейки целиком;
• groups – часть линейки, разделяющая сгруппированные данные;
• cols – часть линейки, разделяющая столбцы;
• rows – часть линейки, разделяющая строки;
• none - отсутствие линейки.
14
Цвет в таблицах
При составлении таблицы часто требуется задать различные цвета для элементов таблицы: фона, рамок, строк, ячеек и т.д.
Фон . Цвет фона в таблицах задается атрибутом bgcolor , который который может применяться в тегах:
- <table bgcolor="#00CC00"> -задается фон всей таблицы;
- <tr bgcolor="#FFCC00"> - задается фон строки;
- <td bgcolor="#00CCFF"> - задается фон данных ячейки;
- <th bgcolor="#00CCFF"> - задается фон заголовка
При задании цвета можно воспользоваться также каскадными стилевыми свойствами.
Например: <table style="background-color: aqua">
Для выделения цветом границы внешней рамки таблицы, в тег <table> вводится атрибуты
bordercolor и border. Например: <table bordercolor="green" border=5 >. Этим задали рамку
таблицы толщиной 5 пикселов, внутренние рамки равны 1 пикселу.
Цвет внутренних границ устанавливаются атрибутом bordercolor.
<tr bordercolor="#FF0000"> - задает красные границы ячеек строки, а синие границы ячеек
заголовков отределяются тегом - <th bordercolor="#0000 FF ">
В HTML рамке таблицы можно придать объемный вид. Такой эффект достигается за счет
разных цветов верхней и нижней линий, образующих рамку. Известно, что таблицы образуются двойными линиями. Если принять, что таблица освещается со стороны верхнего
левого угла экрана, то внешняя рамка имеет освещенную (верхние и левые линии) и затененную (нижние и правые линии) части, в то время как для внутренних рамок все наоборот - освещены нижние и правые линии, а затемнены верхние и левые линии.
Итак:
- атрибут bordercolordark -определяет цвет затененной части рамки;
- атрибут задает цвет bordercolorlight освещенной части рамки.
- <table bordercolordark="brown" bordercolorlight="yellow" border=5> - внешняя рамка имеет толщину 5 пикселов, при этом верхняя и левая части границ - желтые, а правые и нижние части - коричневые.
Группирование строк и столбцов.
Для удобства форматирования содержимого таблицы производят разбивку ее на три части: заголовочную, основную и нижнюю.
Приведем пример использования построчного группирования в таблице с помощью трех
элементов:
thead - определяет заголовочную часть таблицы. Начальный тег <thead> предшествует
первой строке в таблице, а конечный тег иногда не ставят, но желательно поставить
</thead>. В этом теге присутствуют атрибуты, которые позволяют задать фон и цвет
заголовка, а жирное начертание текста устанавливается автоматически. Фрагмент заголовочной части таблицы следующий:
<thead style="background-color:yellow">
<tr style="font-size:13px; font-weight:bold">
<td text-align:center colspan=2> Количество посетителей за неделю</td></tr></thead>
<tfoot> - задает нижнюю часть таблицы. Обычно этот атрибут применяется для форматирования последних строк таблицы. Начальный тег <tfoot> располагается непосредственно после тега <thead>.
Фрагмент нижней части:
<tfoot style="font:italic bold; color:wite; text-align:right; background-color:brown">
<tr><td>Итого</td><td>866</td></tr>
<tr><td>в том числе студентов</td><td>251</td></tr>
15
</tfoot>
<tbody> - задает основную часть таблицы, которая состоит из элементов строк <tr></tr> и
<td></td>, вложенных элементов ячеек.
Компоновка таблиц и текста
Часто в Web - страницы требуется размещать таблицу так, чтобы текст обтекал таблицу.
При включении в тег <table> атрибута align позволит тексту обтекать таблицу Такие таблицы называются плавающими. Можно использовать для этого и стилевой элемент float.
Основные теги, применяемые при создании таблиц.
<title> Создание таблиц </title>
<table border=1 cellspacing="0" cellpadding="0" align="center">
border=1-:- 15 – толщина рамки таблицы
cellspacing="0" (1-:-10) - толщина рамки ячеек
cellpadding ="0" (0-:-70) отступ от границы ячейки
align =” center ”( left , right ) – расположение текста в ячейке
<caption> название таблицы </caption>
<caption align=”center”(left, right)>
<caption valign="bottom"(top) align="center">Опросник</caption>
< tr > создание строки</ tr >
< td >создание ячейки</ td >
<th> заголовок </th>
width ="49%" ( table width =300) - размеры таблицы (ширина)
Атрибут frame задает границы таблицы и принимает следующие значения:
• border ( box ) – устанавливает все линии внешней рамки;
• void – внешняя рамка не отображается вообще;
• above – выводит только верхнюю (или нижнюю) границу таблицы;
• hsides – – выводит только верхнюю и нижнюю линии рамки
• vsides – выводит только левую и правую линии рамки;
• lhs – устанавливает только левую линию рамки;
• rhs - устанавливает только правую линию рамки;
Атрибут rules отображает внутренние границы таблицы и принимает следующие значения:
• none - все линии внутренней рамки не отображаются;
• groups - отображаются горизонтальные границы между группами;
• rows - отображаются только горизонтальные линии между строками;
• cols - отображаются только вертикальные линии между строками;
• all - отображаются все внутренние рамки.
<table align="center" border="1" cellspacing="0" cellpadding="4" width="100%" frame="box"
rules="groups">
• rowspan – тег предназначен для объединения ячеек смежных строк. Значение атрибута
задает количество объединенных ячеек. Например: элемент
< TH rowspan =3> объединяет три ячейки.
• colspan – тег предназначен для объединения столбцов. Например: для формирования
одной ячейки данных из трех ячеек смежных столбцов надо записать тег:
< TH colspan =3>
Объединение одной ячейки, расположенной на пересечении двух
строк и трех столбцов назначается контейнером:
<TD rowspan=2 colspan=3>
16
• < TABLE bgcolor =” red ”> - цвет фона всей таблицы красный;
• < TD bgcolor =” yellow ”> - цвет ячейки желтый;
• < TABLE style =” background - color : aqua ”> - применен каскадный стиль назначения
цвета фона. Отображается содержимое всех ячеек таблицы на бирюзовом фоне.
Пример прерывания обтекания таблицы текстом
<table border align="right" width=120
style="color: white; text-align; center; font-family: arial; font-weight: bold;
margin-left: 3mm; margin-bottom:3mm" >
<tr style="background-color: blue"><td>Синий</td>
<tr style="background-color: red"> <td>Красный</td>
<tr style="background-color: green"><td>Зеленый</td>
< KBD > align =" right "</ KBD > и обтекается текстом с левой
стороны. После элемента
< KBD >& lt ; br clear =" left "& gt ;</ KBD >
< br clear =" right "> обтекание прекращается, а продолжение текстовой строки размещается ниже таблицы.
< tr bordercolor =”00 FF 00”> - цвет внутренних границ
<tr style="background-color: blue"><td> Синий </td>
<tr style="background-color: red"> <td> Красный </td>
<tr style="background-color: green"><td> Зеленый </td>
или
<tr style="background-color: 0000FF"><td> Синий </td></tr>
<tr style="background-color: FF0000"> <td> Красный </td></tr>
<tr style="background-color: 00FF00"><td> Зеленый </td></tr>
“ Объемная ” рамка
<table bordercolordark="brown" bordercolorlight="yellow" border=5>
<tr style="background-color: 0000FF"><td> Синий </td></tr>
<tr style="background-color: FF0000"> <td> Красный </td></tr>
<tr style="background-color: 00FF00"><td> Зеленый </td></tr>
Лабораторная работа 1. Создание простейших таблиц.
Рассмотрим простейшую таблицу, которую можно представить следующим образом:
HTML–конструкция документа может содержать множество различных тегов и паСоздание простейших таблиц
раметров.
Эта таблица имеет рамку, состоит из двух ячеек. В первой ячейки представлен заголовок,
а во второй текст.
Коды этой таблицы приведены ниже.
Пример 1.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>
<title>Table1</title>
</head>
<body>
<table border=”1” width=”100%”>
<tr>
<th width=»50%»>Создание простейших таблиц</th>
<td width=»50%»>HTML–конструкция документа может содержать множество
различных тегов и параметров.</td>
</tr>
</table>
17
</body>
</html>
Ход работы
Задание:
13. Откройте шаблон документа (который создали лабораторной работе 1) в браузере
Internet Explorer;
14. Кликните левой кнопкой мыши на иконке “Вид” в главном меню,
15. кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа (document’s form.htm ) .
16. Между тегами <title>…</title> напишите название таблицы;
17. В шаблоне документа между тегами <body> …. </body> наберите предложенную
выше программу создания простейших таблиц.
18. Сохраните программу под именем table.htm . При этом учтите, что всегда имена папок должны:
называться с использованием английского алфавита и арабских цифр;
не должны содержать следующие символы:
пробел;
табуляцию;
новая строка;
возврат каретки;
символы.
19. Изменяя толщину рамки ( border =”1”) от 0 до 3, сохраните Web-страницу, в зависимости от толщины внешней рамки: table0.htm; table1.html; table2.htm; table3.htm.
Задание: раскройте значение тегов, используемых для создания таблиц
Теги
Значение
table
border
18
width
cellspacing
cellpadding
align="center"
tr
th
td
Лабораторная работа 2. Создание сложных таблиц
Задание:
1. Создать таблицу следующего вида:
ячейка 1
ячейка 2
ячейка 4
ячейка 5
ячейка 7
ячейка 8
ячейка 3
ячейка 6
ячейка 9
Для этого:
1. Откройте шаблон документа (document’s form.htm ) в браузере Internet Explorer;
2. Кликните левой кнопкой мыши на иконке “Вид” в главном меню,
3. Кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа.
4. Между тегами <title>…</title> напишите название таблицы;
5. В шаблоне документа между тегами <body> …. </body> наберите предложенную
ниже программу создания сложной таблицы.
6. В комментарии <!— Дальше продолжить составление таблицы самостоятельно--!>
предлагается самостоятельно написать теги для создания следующих столбцов таблицы.
7. Сохраните программу под именем table6.htm .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Создание сложных таблиц</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>
</head>
<table border=”1” width=900 cellspacing="0" cellpadding="0" align="center">
<tr>
<th width=300> ячейка 1</th>
<td width=300> ячейка 2</td>
<td width=300> ячейка 3</td>
</tr>
<!— Дальше продолжить составление таблицы самостоятельно--!>
</table>
19
</ body >
</html>
Лабораторная работа 3. Параметры внешних и внутренних границ
При выполнении лабораторной работы учтите:
Атрибут border позволяет отображением рамки таблицы по принципу “есть рамка – нет
рамки”. Более гибкие средства задания рамки представляют атрибуты frame и rules .
С их помощью можно убрать внешнюю рамку, оставив внутренние границы, или задать
отображение только горизонтальных линий.
Рассмотрим атрибут frame , который может принимать следующие значения:
• border – устанавливает все линии внешней рамки;
• void – внешняя рамка не отображается вообще;
• above – выводит только верхнюю (или нижнюю) границу таблицы;
• hsides – – выводит только верхнюю и нижнюю линии рамки
• vsides – выводит только левую и правую линии рамки;
• lhs – устанавливает только левую линию рамки;
• rhs - устанавливает только правую линию рамки.
Ход работы
1. Откройте шаблон документа (document’s form.htm ) в браузере Internet Explorer;
2. Кликните левой кнопкой мыши на иконке “Вид” в главном меню,
3. Кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа.
4. Между тегами <title>…</title> напишите название таблицы;
5. В шаблоне документа между тегами <body> …. </body> наберите предложенную
ниже программу создания таблицы с различными параметрами внешних и внутренних границ.
Ниже представлены таблицы и программа управления внутренними и внешними рамками таблицы.
Возможные значения атрибута frame
frame1
= border
frame2 = box
frame3 = above
frame4 = void
frame5 = hsides
frame6 = hsides
frame7 = vsides
frame8 = lhs
Обратите внимание на общее построение программы.
Программа создания таблицы с различными параметрами внешних и внутренних границ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
20
<html>
<head>
<title> FRAME</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<table border=0 widht=40%>
<caption align="left">
<strong>Возможные значения атрибута frame</strong>
</caption><br> <br>
<tr>
<td><table border=4 frame=”border”>
<tr><td width="49">frame1</td>
<td width="9">=</td>
<td width="55">border</td>
</tr></table><br>
<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="box"
rules="groups">
<tr><td width="7%">frame2</td>
<td width="3%">=</td>
<td width="90%">box</td>
</tr></table><br>
<br>
<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="above"
rules="all"><tr><td>frame3</td><td>=</td><td>above</td>
</tr></table> <br>
<br>
<table align="left" border="1" cellspacing="0" cellpadding="4" width="169" frame="void"
rules="none">
<tr><td width="49">frame4</td>
<td width="9" >=</td>
<td width="79">void</td>
</tr></table><br>
<br>
<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="hsides"
rules="all"><tr><td>frame5</td><td>=</td><td> hsides
</tr></table><br> <br>
<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="vsides"
rules="all"><tr><td>frame6</td><td class=”eq”>=</td><td> hsides
</tr>
</table><br><br>
<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="lhs"
rules="all"><tr><td>frame7</td><td class=”eq”>=</td><td> vsides </td>
</tr></table><br> <br>
<table align="left" border="1" cellspacing="0" cellpadding="4" width="14%" frame="rhs"
rules="all"><tr><td>frame8</td><td class=”eq”>=</td><td> lhs </td>
</tr></table>
21
</body>
</HTML>
6. Сохраните программу под именем table7.htm
Лабораторная работа 4. Объединение ячеек и столбцов таблиц
Часто необходимо создать таблицу, в которой смежные ячейки должны быть объединены.
Для этого в теги <TH> или <TD> вставляются атрибуты:
• rowspan - предназначен для объединения ячеек смежных строк. Значение атрибута
задает количество объединенных ячеек.
Например: элемент < TH rowspan =3> объединяет три ячейки,
• colspan – предназначен для объединения столбцов.
Например: для формирования одной ячейки данных из трех ячеек смежных столбцов надо
записать тег: <TH colspan =3>
• Объединение одной ячейки, расположенной на пересечении двух строк и трех
столбцов назначается контейнером: <TD rowspan=2 colspan=3>
Ход работы
1. Откройте шаблон документа (document’s form.htm ) в браузере Internet Explorer;
2. Кликните левой кнопкой мыши на иконке “Вид” в главном меню,
3. Кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа.
4. Между тегами <title>…</title> напишите название таблицы;
5. В шаблоне документа между тегами <body> …. </body> наберите предложенную
ниже программу объединения строк и столбцов
Задание. Создайте таблицу следующего вида:
Факультеты и кафедры АлПУ
Факультет
Технологии наноматериалов
Кафедры
Корпус
Высшая математика
1- 43 ауд
Сопротивления материалов
5 - 146 ауд
Наноматериаловы
7 - 143 ауд
Силикиатов
10 - 343
ауд
Количество сотрудников: 387
Механико-машиностроительный факультет (ММФ)
Кафедра сварочного производства (СП)
1- 76 ауд
Кафедра металлургии черных металлов(МЧМ)
3 - 9 ауд
Кафедра горно-шахтного оборудования
(ГШО)
3 - 110 ауд
Количество сотрудников: 281
Программа объединения строк и столбцов:
22
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>
<meta name=”GENERATOR” content=”Microsoft FrontPage 4.0”>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<title >Объединение ячеек</title >
</ head >
<body>
<h2>Факультеты и кафедры АлПУ</h2>
<table border=1 cellpadding=8>
<!—Формирование заголовков -->
<TR>
<TH width="354"> Факультет</TH>
<TH width="322">Кафедры</TH>
<TH width="81"> Корпус</TH>
</ TR >
<!-- Объединение 5-и столбцов -->
<TR>
<TD rowspan=5>Технологии наноматериалов</TD>
<td>Высшая математика</td>
<td>1- 43 ауд</td>
</TR>
<tr>
<td>Сопротивления материалов</td>
<td>5 - 146 ауд</TD>
</tr>
<tr>
<td>Наноматериаловы</td><td>7 - 143 ауд</TD>
</tr>
<tr>
<td>Силикиатов</td>
<td>10 - 343 ауд</TD>
</tr>
<tr>
<td colspan =2> <I>Количество сотрудников: 387</I></td>
</TR>
<TR><TD rowspan =4>Механико-машиностроительный факультет (ММФ) </TD>
<td>Кафедра сварочного производства (СП) </td>
<td>1- 76 ауд</td>
</TR>
<tr><td>Кафедра металлургии черных металлов(МЧМ) </td>
<td>3 - 9 ауд</TD>
</tr>
<tr><td>Кафедра горно-шахтного оборудования (ГШО) </td>
<td>3 - 110 ауд</TD>
</tr>
<tr>
<td colspan =2><I>Количество сотрудников: 281</I></td>
</TR>
</table>
</body>
</HTML>
23
6. Сохраните программу под именем table8.htm
Лабораторная работа 5. Цвет в таблицах
В таблицах можно задать цвет фона, рамки, ячейки, строки, заголовка и т.д.
Цвет фона задается атрибутом bgcolor . В зависимости от того. какой из тегов дополняется этим атрибутом, получится четыре варианта задания цвета:
• < TABLE bgcolor =” red ”> - цвет фона всей таблицы красный;
• < TD bgcolor =” yellow ”> - цвет ячейки желтый;
• < TABLE style =” background - color : aqua ”> - применен каскадный стиль назначения цвета
фона. Отображается содержимое всех ячеек таблицы на бирюзовом фоне.
Ход работы
1. Откройте шаблон документа (document’s form.htm ) в браузере Internet Explorer;
2. Кликните левой кнопкой мыши на иконке “Вид” в главном меню,
3. Кликните на строку “Источник”. После этого откроется “Блокнот” с шаблоном документа.
4. Между тегами <title>…</title> напишите название таблицы;
5. В шаблоне документа между тегами <body> …. </body> наберите предложенную
ниже программу применения атрибутов цвета к элементам таблицы.
Программа применения атрибутов цвета к элементам таблицы.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>LabTab55</title>
<!Зададим стиль для всей таблицы -->
<STYLE type="text/css">
table {font: bold 11pt Arial;
text-align: center;
background-color:#FF99FF;
color:blue}
tr{background-color:aqua}
</STYLE>
</head>
<body>
<h4 align="center"><b>Задание цветов для элементов таблицы</b></h4>
<p align="left"><br>
<table cellspacing=12 widht=550 border=5>
<TR>
<TD align="left">
<p align="left">Цвет фона всей таблицы</p>
</td><TD align="left">
<p align="left">фиолетовый</p>
</td>
</tr>
<TR>
<TD align="left">
<p align="left">Цвет фона строк</p>
</td><TD align="left">
<p align="center"> бирюзовый</p>
</td>
24
</tr>
<TR>
<TD align="left">
<p align="left">Цвет шрифта</p>
</td><TD align="left">
<p align="left"> синий</p>
</td>
</tr>
<TR>
<TD align="left">
<p align="left">Цвет линий рамки (по умолчанию)</p>
</td><TD align="left">
<p align="left">серый</p>
</td>
</tr>
</table>
</body>
</HTML>
6. Сохраните программу под именем table9.htm
Лабораторная работа 6. Обтекание таблицы текстом
При компоновке Web -страницы необходимо располагать ее, согласно общему дизайну
страницы, в определенном месте относительно текста, графики и т.д. Учитывая, что страница разрывает текст, необходимо тег < table > вводить атрибут align . В этом случае таблица не разрывает строк, и текст размещается вокруг таблицы. Атрибут align может принимать значения: left , right , center . Для прерывания текста, используется либо атрибут
clear в элементах абзацев <p>, либо разрыв строки <br >.
Например: <br clear="left"> указывает на то, что обтекание слева прекращается.
Программа обтекания таблицы текстом
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Обтекание</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<p>&nbsp;</p>
<table width="200" border="1" align="left">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
25
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>Заполняя таблицу текстом необходимо учитывать, что имеется много способов форматирования текста: <br>
•&nbsp; выделения текста ( подчеркивание , <em>курсив </em>, <strong>жирное начертание) </strong>; <br>
•&nbsp; выбор гарнитуры и размер шрифта ; <br>
•&nbsp; возможно изменять цвет букв и фона ; <br>
•&nbsp; межбуквенный и межстрочный интервал; <br>
•&nbsp; тип регистра &quot; (строчные и прописные буквы) и многое другое.
<p><br>
</p>
</HTML>
Ход работы
• Внимательно разберитесь с программой обтекание текстом таблиц.
• Откройте «Блокнот», наберите программу обтекание текстом таблиц.
• Озаглавьте правильно файл и сохраните его.
• Наберите свой текст в абзаце <p></p> и отформатируйте таблицу по своему усмотрению.
Представьте отчет в виде отформатированной таблицы.
На этом мы заканчиваем изучение темы “Создание таблиц в Web -страницы ”. Для усвоения материала, создайте свою собственную таблицу так, чтобы она радовала Ваш взор.
Лабораторная работа 7. Зачетная работа
В программе “Блокнот” запишите программу для создания предложенной ниже таблицы.
Сохраните в своей папке под именем Table.htm.
Самостоятельная работа
Задание: создать таблицу по виду приведенную ниже
26
Название таблицы
1
2
3
5
7
4
6
8
9
10
19
19
19
11
12
20
21
22
13
14
15
16
17
18
23
24
25
26
В “Блокноте” запишите эту программу и сохраните файл под именем her_Work.htm
Рабочая тетрадь
Таблица начинается тегом ___________ и заканчивается тегом ________.
Для создания строки применяются парные теги _____________________.
Для создания столбцов применяются парные теги ___________________.
Наличие атрибута border=1-:- 15 указывает, что __________________.
Атрибут тега table cellspacing="0" (1-:-10) задает __________________.
Атрибут тега table cellpadding ="0" (0-:-70) задает _________________.
Задание названия таблицы задается парным тегом __________________.
Теги <th> </th> задают заголовок _______________________________.
Заполните таблицу:
27
Атрибут frame задает границы таблицы и принимает следующие значения:
• border ( box ) –
• void • above –
• hsides –
• vsides –
• lhs –
• rhs
Заполните таблицу:
Атрибут rules отображает внутренние границы таблицы и принимает следующие значения:
• none • groups • rows • cols • all Тег < TH rowspan =3> указывает, что ______________________________.
Тег < TH rowspan =3> указывает, что ______________________________.
Тег < TABLE style =” background - color : aqua ”> отображается содержимое всех ячеек таблицы ________________________________________________.
Расшифруйте запись <table bordercolordark="brown" bordercolorlight="yellow" border=5>
Запишите программу для представления таблицы, приведенной ниже:
Запишите программу для представления таблицы, приведенной ниже:
Приложение 1
28
Таблица
Цветовая
гамма
Пурпурный
Раскладка цветовой гаммы по RGB-составляющим
RGB
Цветовая
RGB
Цветовая
RGB
гамма
гамма
ФиолетовоОрсель
A020F0
синий
8A2BE2
DA70D6
Темнофиолетовый
DDA0DD Фиолетовый
Темнобордовый
Светлорозовый
B03060
Темнокрасный
Оранжевокрасный
FFB6C1
Краснофиолетовый
Краснофиолетовый
бледный
Красный
FFA500
Светлый самон
FFA07A
Охра
A0522D
Фуксин
FF00FF
FFC0CB
Теплый розовый
FF7F50
Самон
FA8072
Шоколадный
B22222
Пшеничный
D2691E
Бежевый
F5DEB3
Кожанокоричневый
DEB887
Золотистоберезовый
FFD700
Темножелтый
Золотой
ADFF2F
EEE8AA
FFFF00
Зеленый
00FF00
7FFF00
Лимоннозеленый
Светложелтый золотистый
Весенний
зеленый
FF69B4
Коралловый
Кирпичный
D2B48C
Зеленоватожелтый
FF0000
F08080
Рыжеватокоричневый
800080
DB7093
FF4500
A52A2A
Фуксин темный
Розовый
Коралловый
светлый
Коричневый
Зеленожелтый
Бледнозолотистый
березовый
Желтый
D02090
800000
Оранжевый
Легкий желтый
EE82EE
F5F5DC
8B4513
Розовокоричневый
BC8F8F
DAA520
Светлозолотистый
FFEC8B
9ACD32
808000
Желтозеленый
Зеленый
лесной
СветлоFAFAD2 желтый
228B22
32CD32
FFFFE0
Зеленая лужайка
7CFC00
Нейтральный
зеленый
C0DCC0
Темнозеленый
008000
Зеленожелтый
Лимоннозеленый
00FF7F
ADFF2F
29
32CD32
Светлый циан
Аквамарин
E0FFFF
Темный циан
7FFFD4
Цвет морской волны
Бледнозеленый
98FB98
Синий
0000FF
Светлосиний
A6CAF0
Бирюзовый
40E0D0
Темно-серый
808080
Васильковый
Голубой королевский
Тусклорозовый
Полуночносиний
Грифельносиний
4169E1
Бледнолиловый
FFE4E1
Белый
696969
Серый
BEBEBE
Морская раковина
Синий с пороховым оттенком
Зеленоватоголубой
6495ED
Тусклосерый
Шелковый
оттенок
Светлый
небесноголубой
Небесноголубой
FFF8DC
Синеватосерый
Светлосерый
Серо-синий
008080
54FF9F
87CEFA
87CEEB
B0E0E6
00FFFF
Светлая
морская
волна
Синий со
стальным
оттенком
Голубой со
стальным
оттенком
Бледнобирюзовый
FFFAFA
Кремовый
20B2AA
4682B4
B0C4DE
AFEEEE
Серый
нейтральный A0A0A4
Темно-синий 000080
191970
6A5ACD Светлый
грифельносиний
E6E6FA Голубой с
красным отливом
Черный
FFFFFF
708090
C0C0C0
Слоновая
кость
FFFFF0
Медовый
F0FFF0
8470FF
FFF0F5
000000
Грифельносерый
778899
Белыйнавахо
FFDEAD
Лимонный
FFFACD
Лазурный
FFF5EE
Белоснежный
5F9EA0
F0FFFF
Призрачнобелый
Белый-антик
F8F8FF
Персиковый
FFDAB9
FFFBF0
30
FAEBD7
Бледнобирюзовый
AFEEEE
Таблица базовых цветов
Это основные цвета, используемые в HTML. Именно эти цвета используются дизайнерами
для создания страниц поисковых систем, а также в дизайне сайтов с огромной аудиторией,
то есть используются там, где нужна максимальная совместимость. Все они прекрасно
отображаются даже в 256-цветном режиме работы видеокарты. Несомненно, для оригинального цветового дизайна обычных сайтов их маловато.
Black
Navy
Gray
Blue
Silver
Aqua
White
Green
Red
Lime
Fuchsia
Teal
Maroon
Yellow
Purple
Olive
Аквамарин
Белый
Желтый
Зеленый
Золотистый
Индиго
Каштановый
Красный
Оливковый
Пурпурный
Светло-зеленый
Серебристый
Серый
Сизый
Синий
Ультрамарин
Фиолетовый
Фуксиновый
Черный
Для получения любого другого оттенка применяются комбинации RGB-значений цвета,
записанные в шестнадцатиричном формате. Приведенные ниже 216 цветов также счита31
ются "безопасными" (browser-safe). Для удобства "безопасные" цветарасположины в три
таблицы по 216 цветов, отсортированные по разным цветовым компонентам.
Красный и Синий – добавляем Зеленый
000000
000033 000066 000099 0000cc 0000ff
330000
330033 330066 330099 3300cc 3300ff
660000
660033 660066 660099 6600cc 6600ff
990000
990033 990066 990099 9900cc 9900ff
cc0000
cc0033 cc0066 cc0099 cc00cc cc00ff
ff0000
ff0033 ff0066 ff0099 ff00cc ff00ff
003300
003333 003366 003399 0033cc 0033ff
333300
333333 333366 333399 3333cc 3333ff
663300
663333 663366 663399 6633cc 6633ff
993300
993333 993366 993399 9933cc 9933ff
cc3300
cc3333 cc3366 cc3399 cc33cc cc33ff
ff3300
ff3333 ff3366 ff3399 ff33cc ff33ff
006600
006633 006666 006699 0066cc 0066ff
336600
336633 336666 336699 3366cc 3366ff
666600
666633 666666 666699 6666cc 6666ff
996600
996633 996666 996699 9966cc 9966ff
cc6600
cc6633 cc6666 cc6699 cc66cc cc66ff
ff6600
ff6633 ff6666 ff6699 ff66cc ff66ff
009900
009933 009966 009999 0099cc 0099ff
339900
339933 339966 339999 3399cc 3399ff
669900
669933 669966 669999 6699cc 6699ff
999900
999933 999966 999999 9999cc 9999ff
cc9900
cc9933 cc9966 cc9999 cc99cc cc99ff
ff9900
ff9933 ff9966 ff9999 ff99cc ff99ff
00cc00
00cc33 00cc66 00cc99 00cccc 00ccff
33cc00
33cc33 33cc66 33cc99 33cccc 33ccff
66cc00
66cc33 66cc66 66cc99 66cccc 66ccff
99cc00
99cc33 99cc66 99cc99 99cccc 99ccff
cccc00
cccc33 cccc66 cccc99 cccccc ccccff
ffcc00
ffcc33 ffcc66 ffcc99 ffcccc ffccff
00ff00
00ff33 00ff66 00ff99 00ffcc 00ffff
33ff00
33ff33 33ff66 33ff99 33ffcc 33ffff
66ff00
66ff33 66ff66 66ff99 66ffcc 66ffff
99ff00
99ff33 99ff66 99ff99 99ffcc 99ffff
ccff00
ccff33 ccff66 ccff99 ccffcc ccffff
ffff00
ffff33 ffff66 ffff99 ffffcc ffffff
Красный и Зеленый – добавляем Синий
000000
003300 006600 009900 00cc00 00ff00
330000
333300 336600 339900 33cc00 33ff00
660000
663300 666600 669900 66cc00 66ff00
990000
993300 996600 999900 99cc00 99ff00
cc0000
cc3300 cc6600 cc9900 cccc00 ccff00
ff0000
ff3300 ff6600 ff9900 ffcc00 ffff00
000033
003333 006633 009933 00cc33 00ff33
330033
333333 336633 339933 33cc33 33ff33
32
660033
663333 666633 669933 66cc33 66ff33
990033
993333 996633 999933 99cc33 99ff33
cc0033
cc3333 cc6633 cc9933 cccc33 ccff33
ff0033
ff3333 ff6633 ff9933 ffcc33 ffff33
000066
003366 006666 009966 00cc66 00ff66
330066
333366 336666 339966 33cc66 33ff66
660066
663366 666666 669966 66cc66 66ff66
990066
993366 996666 999966 99cc66 99ff66
cc0066
cc3366 cc6666 cc9966 cccc66 ccff66
ff0066
ff3366 ff6666 ff9966 ffcc66 ffff66
000099
003399 006699 009999 00cc99 00ff99
330099
333399 336699 339999 33cc99 33ff99
660099
663399 666699 669999 66cc99 66ff99
990099
993399 996699 999999 99cc99 99ff99
cc0099
cc3399 cc6699 cc9999 cccc99 ccff99
ff0099
ff3399 ff6699 ff9999 ffcc99 ffff99
0000cc
0033cc 0066cc 0099cc 00cccc 00ffcc
3300cc
3333cc 3366cc 3399cc 33cccc 33ffcc
6600cc
6633cc 6666cc 6699cc 66cccc 66ffcc
9900cc
9933cc 9966cc 9999cc 99cccc 99ffcc
cc00cc
cc33cc cc66cc cc99cc cccccc ccffcc
ff00cc
ff33cc ff66cc ff99cc ffcccc ffffcc
0000ff
0033ff 0066ff 0099ff 00ccff 00ffff
3300ff
3333ff 3366ff 3399ff 33ccff 33ffff
6600ff
6633ff 6666ff 6699ff 66ccff 66ffff
9900ff
9933ff 9966ff 9999ff 99ccff 99ffff
cc00ff
cc33ff cc66ff cc99ff ccccff ccffff
ff00ff
ff33ff ff66ff ff99ff ffccff ffffff
Зеленый и Синий – добавляем Красный
000000
000033 000066 000099 0000cc 0000ff
003300
003333 003366 003399 0033cc 0033ff
006600
006633 006666 006699 0066cc 0066ff
009900
009933 009966 009999 0099cc 0099ff
00cc00
00cc33 00cc66 00cc99 00cccc 00ccff
00ff00
00ff33 00ff66 00ff99 00ffcc 00ffff
330000
330033 330066 330099 3300cc 3300ff
333300
333333 333366 333399 3333cc 3333ff
336600
336633 336666 336699 3366cc 3366ff
339900
339933 339966 339999 3399cc 3399ff
33cc00
33cc33 33cc66 33cc99 33cccc 33ccff
33ff00
33ff33 33ff66 33ff99 33ffcc 33ffff
660000
660033 660066 660099 6600cc 6600ff
663300
663333 663366 663399 6633cc 6633ff
666600
666633 666666 666699 6666cc 6666ff
669900
669933 669966 669999 6699cc 6699ff
66cc00
66cc33 66cc66 66cc99 66cccc 66ccff
66ff00
66ff33 66ff66 66ff99 66ffcc 66ffff
990000
990033 990066 990099 9900cc 9900ff
993300
993333 993366 993399 9933cc 9933ff
996600
996633 996666 996699 9966cc 9966ff
33
999900
99cc00
99ff00
cc0000
cc3300
cc6600
cc9900
cccc00
ccff00
ff0000
ff3300
ff6600
ff9900
ffcc00
ffff00
999933 999966 999999 9999cc 9999ff
99cc33 99cc66 99cc99 99cccc 99ccff
99ff33 99ff66 99ff99 99ffcc 99ffff
cc0033 cc0066 cc0099 cc00cc cc00ff
cc3333 cc3366 cc3399 cc33cc cc33ff
cc6633 cc6666 cc6699 cc66cc cc66ff
cc9933 cc9966 cc9999 cc99cc cc99ff
cccc33 cccc66 cccc99 cccccc ccccff
ccff33 ccff66 ccff99 ccffcc ccffff
ff0033 ff0066 ff0099 ff00cc ff00ff
ff3333 ff3366 ff3399 ff33cc ff33ff
ff6633 ff6666 ff6699 ff66cc ff66ff
ff9933 ff9966 ff9999 ff99cc ff99ff
ffcc33 ffcc66 ffcc99 ffcccc ffccff
ffff33 ffff66 ffff99 ffffcc ffffff
Градации красного
Код
#010000
#100000
#200000
#300000
#400000
#500000
#600000
#700000
Цвет
Код
#800000
#900000
#A00000
#B00000
#C00000
#D00000
#E00000
#FF0000
Цвет
Градации зеленого
Код
#000100
#001000
#002000
#003000
#004000
#005000
#006000
#007000
Цвет
Код
#008000
#009000
#00A000
#00B000
#00C000
#00D000
#00E000
#00FF00
Градации синего
34
Цвет
Код
#000001
#000010
#000020
#000030
#000040
#000050
#000060
#000070
Цвет
Код
#000080
#000090
#0000A0
#0000B0
#0000C0
#0000D0
#0000E0
#0000FF
Цвет
А так может выглядеть компьютерная радуга:
К
О
Ж
З
Г
С
Ф
Варианты оранжевого цвета:
Необходимо, чтобы монитор воспроизводил режим HighColor (16 разрядов) или
TrueColor (24 разряда)
Код
#FFB000 1
#FFA800 2
#FFA000 3
#FF9800 4
#FF9000 5
#FF8800 6
#FF8000 7
#FF7800 8
#FF7000 9
#FF6800 10
#FF6000 11
#FF5800 12
Цвет
Горизонтальная линия в качестве цветного прямоугольника:
35
Литература
1. Язык XML - практическое введение
Александр Печерский
2. Язык XML - практическое введение. Часть 2
Александр Печерский
3. Изучение HTML 3.2 на примерах (13.04.1998)
Jukka Korpela. Перевод "АКДИ Экономика и жизнь".
4. Что такое cookies и как с ними работать (08.07.1998)
Андрей Аликберов, ЦИТ
5. Что такое Cookie и с чем их едят (13.04.1998)
Андрей Аликберов, ЦИТ
6. Формат и синтаксис Cookie (13.04.1998)
Андрей Аликберов, ЦИТ
7. Язык гипертекстовой разметки HTML (13.04.1998)
Павел Храмцов, из учебных материалов конференции Индустрия
программирования 96, Центр Информационных Технологий
8. Спецификация языка HTML (13.04.1998)
Р. Усманов, перевод, сервер FREEnet
9. Спецификация языка HTML 3.2 (CP1251, KOI8-r)
Р. Усманов, перевод
36
10.Краткое руководство по HTML (14.10.1998)
K.Werbach, перевод С.Малышева
11.Список элементов (english) (13.04.1998)
12.Таблица цветов (13.04.1998)
Е. Булах, Центр Информационных Технологий
13.Таблица спец. символов (13.04.1998)
14.Средства просмотра WWW-страниц (13.04.1998)
Павел Храмцов, статья из ComputerWorld
15.Руководство по стилям для создания online гипертекста (13.04.1998)
Тим Бернерс Ли, перевод, Петрозаводский Государственный Университет
16.Использование метаданных (HTTP-EQUIV, NAME, REL, REV,
BASE)
при
создании
HTML
документов (13.04.1998)
А. Аликберов, Центр Информационных Технологий В.В. Кручинин.
Разработка компьютерных учебных программ. – Томск. Из-во Том.
Гос. Университета, 1998. – 211 с.
17. Субботин М.М. Новая информационная технология: создание и обработка гипертекстов. М.: «Новинтех», 1992;
18.Поликохин А.В., Савин А.Ю. Гипертекст: сущность состояние, проблемы, перспективы. М.: 1993. 126 с.:
19.Приказ Минобразования России от 19 июня 1998 г. № 1646:
20.Гаевский А.Ю. 100% самоучитель по созданию Web-страниц и Webсайтов. HTML и JavaScript: учебное пособие для вузов - М.: ТЕХНОЛОДЖИ – 3000, 2005. - 464 с.
21.Кэмпбел Марк Строим Web-сайты. Дизайн: пер. с англ. яз. – М.:
Триумф, 2006.- 480с.
Комплекс лабораторных работ по дисциплине:
“Технология создания электронных учебных пособий” Часть 1
Методическое указание по лабораторному практикуму для слушателей
дополнительной образовательной программы
“Преподаватель высшей школы”.-Томск: Изд-во ТПУ, 2009.- с.
Составитель Иванов Геннадий Филиппович
Подписано к печати
37
Формат
Бумага офсетная
Печать RISO. Усл.печ. л.
Уч.-изд.л.
Тираж 50 экз. Заказ . Кена свободная.
Издательство ТПУ. 634050. Томск, пр. Ленина, 30.
38
