Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Лабораторная работа № 1. Основы языка HTML.
Цель работы: Изучить основы языка HTML. Создать домашнюю страницу.
Базовые сведения:
Немного истории. Всемирная информационная сеть (World Wide Web далее Web) имеет недолгую, по людским меркам, историю. Годом рождения Web считается 1992 год, а отцом основателем был некто Tim Berners-Lee, который сумел, используя новые сетевые технологии и опыт своих предшественников, сделать Web приятным и удобным средством распространения информации во всемирной сети компьютерных сетей Internet (Internet существует с середины 60-х годов).
Толчок для своего стремительного и победного шествия по планете Web получила в 1993 году, когда Mark Andressen с группой студентов университета Иллинойса, разработали бесплатно распространяемую (вот истинная причина бурного развития Web) программу Mosaic для просмотра Web-страниц.
HTML был разработан на основе мощного языка разметки SGML, путем переноса некоторых его функций разметки данных в сетевую среду для разметки гипертекста. Одновременно с развитием Web технологий, насыщением Web новыми сервисами и возможностями, развивался и язык разметки гипертекста. С момента своего появле-ния стандарт HTML претерпел множество изменений, последнее из которых это спецификация HTML 4.01, анонсированная консорциумом W3C 24 декабря 1999 г.
Суть и составные части Web технологии.
Выделим базовые элементы технологии Web:
Основы языка разметки гипертекста - HTML.
Базовым элементом языка разметки гипертекста является - ТЕГ (дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид: <ТЕГ параметр1="ЗНАЧЕНИЕ" ... параметрN=``ЗНАЧЕНИЕ''>
Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий <ТЕГ> и закрывающий </ТЕГ>.
<ТЕГ> Содержимое контейнера </ТЕГ>
Открывающий тег служит для указания программе-браузеру начала какого-либо объекта или задания свойств объектов помещенных в контейнер. Закрывающий тег служит для указания программе-браузеру о конце объекта или окончания применения свойств, заданных в открывающем теге. Параметры(атрибуты) тега задают значения свойств данного объекта или объектов помещенных в контейнер. Значения свойств, содержащие пробелы, берутся в кавычки, в остальных случаях кавычки можно опустить.
HTML документ представляет собой обычный текстовый файл, содержащий маркированный тегами форматирования текст, а так же заданные специальными тегами ссылки на графические и прочие файлы мультимедиа, ссылки на другие документы HTML и ресурсы Internet.
Документ HTML начинается открывающим тегом <HTML> и заканчивается закрывающим тегом </HTML>. Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок заключенный в контейнер <HEAD>...</HEAD> и тело документа в контейнере <BODY>...</BODY>. Таким образом структура простого HTML документа выглядит примерно так:
Структура HTML-документа
<! DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2 // EN" >
<HTML>
<HEAD> Заголовок документа </HEAD>
<BODY> Тело документа </BODY>
</HTML>
Объявление <!DOCTYPE>.
Элемент <!DOCTYPE> должен первым указываться в документе HTML (теоретически). Он сообщает серверу WEB способ обработки документа и то, какие дескрипторы могут находиться на странице, хотя чаще всего он игнорируется браузерами. Поэтому его применение строго не обязательно.
Синтаксис: <!DOCTYPE HTML "текст""URL">
Здесь текст определяет версию HTML , а URL позволяет браузерам пользователей загрузить DTD например:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN"
"http://WWW.W3.ORG/TR/REC-HTML40/strict.dtd">
Тэг <HTML>.
Тэг <HTML> определяет границы документа HTML, ему соответствует конечный тэг </HTML>. Между этими двумя тэгами располагается собственно весь документ. Как и <!DOCTYPE> тэги <HTML> и </HTML> - не являются строго обязательными. Но, все-таки, их использование является правилами хорошего тона т.к. браузеры у пользователей могут быть всякие и не известно - насколько корректно они визуализируют такой код.
В дополнение к обязательной структуре настоятельно рекомендуется вставлять различные структурные детали.
Каждый HTML документ должен содержать основную информацию о его происхождении.
Если Вы стремитесь к тому, чтобы люди отыскали Ваш документ по соответствующим связям, важность предоставления информации о его происхождении становится очевидной. Когда пользователь найдет Ваш документ с помощью, например, поискового ресурса AltaVista, он, вероятнее всего, захочет узнать, к какому виду относится документ. Поэтому каждый файл HTML должен предоставлять самую основную информацию (или связи к информации) о его происхождении и природе. Например, в собрании книгоподобных документов, разделенных на малые файлы, каждый файл должен содержать, по крайней мере, связь к "первой странице" "книги" (home page).
О происхождении документа должна быть представлена, по крайней мере, следующая информация:
Автор документа, имеющий уникальное имя. При этом должна быть задана связь с домашней страницей автора. Если у документа несколько авторов, определите их всех, а также роль каждого из них; например, ведущего автора, редактора, действующего спонсора, а также лиц, формально отвечающих за документ. Дата создания документа или его последней модификации, или и та и другая. Представляемая дата должна быть понятна во всем мире; в частности, название месяца лучше писать словом, а не цифрой. Контекст документа и его статус, например: часть официальной документации компании об одном из ее продуктов, или часть личной информации о хобби автора, или что-то другое. Адрес (URL) документа. Такая информация зачастую чрезмерна, однако она может быть очень полезной, когда кому-то нужна копия именно того документа, который он нашел. Лучше не полагаться на браузер (и пользователя), добавляющих такую информацию, когда сделана копия документа.
Элемент <BODY>.
Элемент <BODY> предназначается для выделения той части документа, которая будет визуализирована для пользователя. Он имеет как начальный, так и конечный теги. Начальный тег <BODY> может иметь несколько атрибутов .
Вложенные атрибуты элемента <BODY>:
Заголовочные тэги.
Элемент <HEAD> </HEAD> определяет заголовок документа.
BASE - базовый, основной URL Цель Задание базового URL для относительных URL в документе (например, в атрибутах HREF элемента A). Этот элемент часто используется для отображения документов. Например: <BASE href="http://foo.com/index.html">.
Элемент BASE непосредственно не отображается в документе. Основной синтаксис <BASE HREF="URL">. Так как в документе допускается только один элемент BASE, Вы не можете иметь различные базовые URL в различных частях файла HTML. При отсутствии элемента BASE в документе URL самого документа становится базовым в пределах документа.
META - метаинформация.
Используется для задания метаинформации (информации о документе), т.е. пар имя/значение, описывающих свойства документа, например, авторство, истечение даты, список ключевых слов и т.д. Типичное отображение Элементы META не влияют на отображение самого документа. Они могут давать некоторый эффект при представлении информации о документе, например, в верхнем окне браузера или в ответе на запрос от поискового средства.
Cинтаксис
<META NAME=имя элемента метаинформации CONTENT=содержимое информации> или
<META HTTP-EQUIV=имя элемента метаинформации CONTENT=содержимое информации>.
Примеры <META NAME=DESCRIPTION CONTENT= "An extensive guide to writing HTML 3.2 documents, with ../../examples and practical advice.">
<META NAME=KEYWORDS CONTENT= "structural HTML, logical markup">.
Тег META влияет на индексирование документа, когда он включается в базу данных поискового сервера.
TITLE - "внешний" заголовок (титул).
Используется для задания обязательного "внешнего" заголовка документа.
Титул может выводиться в окне заголовка программы просмотра; в списке результатов поиска, возвращаемых поисковым сервером; в горячем списке, определяемом пользовате-лем; списке истории и т.д.
Основной синтаксис <TITLE>последовательность символов</TITLE>
В TITLE можно использовать escape последовательности, например, < (для <) и ä (для д), но никакие теги HTML не разрешены, поэтому Вы не можете задавать в заголовке размеры шрифтов или выделения.
Примеры <TITLE>A study of population dynamics</TITLE> Примечания Написать хорошее заглавие - очень важно, так как списки результатов поиска, возвращаемые поисковым сервером, могут использовать его.
Комментарии
Файл HTML может содержать комментарии, дающие пояснения для человека, читающего HTML код. Комментарии не влияют каким-либо образом на представление документа, т.е. они игнорируются браузером. Вы можете начать комментарии с четырехсимвольной последовательности <!- (знак "меньше чем", восклицательный знак, два дефиса) и завершить его трехсимвольной последовательностью -> (два дефиса, знак "больше чем"). Например: <!- Написано Иваном Ивановым ->.
Оформление текста
Элемент <EM> Элемент <EM> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <EM> Текст </EM>
Элемент <CODE> Элемент <CODE> используется с целью дополнительного выделения фрагментов программного кода. По умолчанию он отображается телетайпным шрифтом. Данный элемент предпочтительнее, чем элемент <TT> (телетайпный шрифт). Поскольку расположение пробелов существенно для чтения программного кода, элемент <CODE> целесообразно употреблять в сочетании с элементом <PRE>. Синтаксис: <CODE> листинг кода </CODE>
Элемент <DFN> Элемент <DFN> используется с целью обозначения терминов и определений по типу словарей или глоссариев. Синтаксис: <DFN> Текст </DFN>
Элемент <CITE> Элемент <CITE> используется с целью обозначения источника информации ,из которого взята цитата. Синтаксис: <CITE> Текст </CITE>
Элемент <STRONG> Элемент <STRONG> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <STRONG> Текст </STRONG>
Элемент <I> Элемент <I> используется с целью выделения курсивным шрифтом слова или текста. Синтаксис: <I> Текст </I>
Элемент <B> Элемент <B> используется с целью выделения полужирным шрифтом слова или текста. Синтаксис: <B> Текст </B>
Элемент <U> Элемент <U> используется с целью выделения подчеркиванием слова или текста. Синтаксис: <U> Текст </U>
Элемент <SUP> Элемент <SUP> используется с целью выделения надстрочных слова или текста. Синтаксис: <SUP> Текст </SUP>
Элемент <SUB> Элемент <SUB> используется с целью выделения подстрочных слова или текста. Синтаксис: <SUB> Текст </SUB>
Элемент <BIG> Элемент <BIG> используется с целью выделения крупным шрифтом слова или текста относительно ос-новного текста. Синтаксис: <BIG> Текст </BIG>
Элемент <SMALL> Элемент <SMALL> используется с целью выделения мелким шрифтом слова или текста относительно основного текста. Синтаксис: <SMALL> Текст </SMALL>
Элемент <FONT> Элемент <FONT> используется с целью изменения выделения шрифтом слова или текста. С ним применяются два атрибута size и coloR. Некоторые браузеры поддерживают атрибут face, позволяющий задать любой из перечня шрифтов, если браузер не находит заданный шрифт - то используется шрифт, заданный по умолчанию. Синтаксис: <FONT size=n color="цвет">Текст </FONT> или <FONT face="имя" color="цвет">Текст </FONT>
Элемент <BASEFONT> Элемент <BASEFONT> используется как альтернатива атрибуту size элемента <FONT>, он позволяет задать базовый размер шрифта во всем документе и не имеет конечного тега. По умолчанию значение его задается равным 3 ,значение size может выражаться так же и относительным размером, например, размер -1 означает размер на один меньший, чем по умолчанию. Синтаксис: <BASEFONT size=n>
Шесть уровней заголовков <Hn> Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера, стилю <H1> назначается самый большой и самый жирный шрифт, а стилю <H6> назначается самый маленький и самый невзрачный шрифт. Элемент может иметь атрибут align, который указывает отступ left, centeR или Right. Синтаксис: <Hn align=отступ> Текст заголовка </Hn>
Разделительные линии <HR> Элемент <HR> используется для проведения горизонтальной черты в документе, он может иметь атрибуты : coloR, задающий цвет линии, size высота в пикселах Width ширина в пикселях или процентах от ширины экрана, align режим выравнивания, и не имеет конечного тега. Синтаксис: <HR align="centeR" size=n Width=n coloR="цвет">
Элемент <P> Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут align, который указывает отступ left, center, right, justify. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение align. Синтаксис: <P align=отступ> Текст абзаца </P>
Элемент <BR> Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут cleaR, который может принимать значения left, all или Right тем самым указывать обтекание текста вокруг плавающих изображений вставленных в текст нестандартным способом. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение cleaR. Синтаксис: <BR cleaR=обтекание> Текст Может быть отменен тэгами <NOBR> и </NOBR>
Элемент <PRE> Весь текст, заключенный в тэги <PRE> и </PRE> будет визуализирован браузером точно так, как он визуализирован в исходном коде документа, кроме того текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Элемент поддерживается не всеми браузерами, он может иметь атрибут Width, который задает ширину отводимого пространства под текст в символах. Элемент сменил собой устаревшие элементы <XMP>, <LISTING> и <PLAINTEXT> Синтаксис: <PRE Width=число символов >...текст.. .</PRE>
Элемент <DIV> Элемент <DIV> позволяет выделить в структуре документа несколько разделов. Он является блочным элементом, функционирующим во многом подобно элементу <P>. Если закрывающий тэг </P> опущен, то <DIV> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, который указывает отступ left, centeR или Right. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align. Синтаксис: <DIV align=отступ> Текст раздела </DIV>
Элемент <ADDRESS> Элемент <ADDRESS> используется для оформления контактной информации текущего документа, будь то адрес электронной почты или полный почтовый адрес с номером телефона. Синтаксис: < ADDRESS>контактная информация </ADDRESS>
Элемент <BLOCKQUOTE> Элемент <BLOCKQUOTE> позволяет выделить обьемный текст-цитату из общего текста. Синтаксис: <BLOCKQUOTE> Текст </BLOCKQUOTE>
Списки
Элемент <OL> используется с целью задания нумерованных списков, имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и staRt для указания, с какого индекса начинается нумерация списка.
Элемент <OL> включает в себя дополнительный элемент <LI>, который задает элементы списка. Синтаксис: <OL type=1 start=1 > <LI> элемент списка <LI> элемент списка </OL>
Пример:
1. элемент списка
2. элемент списка
Элемент <UL>, по сути, является аналогом <OL> без дополнительных элементов <LI>, он используется с целью задания ненумерованых списков, имеет атрибут type=ciRcle, squaRe, или disc для задания вида маркера. Элемент <UL> включает в себя дополнительный элемент <LI>, который задает элементы списка. Синтаксис: <UL type=circle > <LI> элемент списка <LI> элемент списка </UL>
Пример:
o элемент списка
o элемент списка
Элемент <DL> используется с целью задания словарей, глоссариев и прочих перечней. Элемент <DL> включает в себя дополнительные элементы <DT> и <DD>, которые обозначают соответственно термин и определение. Синтаксис: <DL > <DT> термин 1 <DD>определение 1 <DT> термин 2 <DD>определение 2 </DL>
Пример:
термин 1 определение 1
термин 2 определение 2
Задание на лабораторную работу
Создание домашней страницы содержащей информацию о студенте.
Обязательное содержание:
В оформлении страницы следует использовать максимальное количество вышеперечисленных тегов HTML.
Люди обмениваются визитными карточками. В виртуальном мире визитная карточка - ваша домашняя страничка. Как и визитки, личные сайты встречаются простые в оформлении, довольно вычурные.
Главное, чтобы оформление и содержание соответствовало цели, для которой ваш Home page появился на сетевых просторах.
Фирмы заводят себе сайты в Интернете, чтобы найти новых клиентов и рассказать о своем товаре. Через Интернет люди могут рекламировать и себя, то есть рассказывать потенциальному работодателю, какой вы замечательный.
Например, Артемий Лебедев, вебмастер, работы которого во многом определяют внешний вид всего русскоязычного Интернета (Рунета), поместил на свою домашнюю страничку (http://www.tema.ru/) длинный список сайтов, которые он оформлял, и прикольные графические работы.
"Некто" напишет, какой он замечательный физик, бухгалтер, переводчик или врач. Когда человек хочет найти новых друзей, единомышленников, он рассказывает о своем увлечении. При этом он не забудет поместить ссылку на свой e-mail или гостевую книгу, чтобы посетители могли оставить сообщение, комментарии. О чем бы ни была домашняя страница нельзя указывать ваш адрес, телефон, подробности биографии.
Лабораторная работа № 2. Гиперссылки. Внедрение изображений.
Цель работы: Изучить основы организации гиперссылок в HTML. Создать каркас домашнего сайта пользователя с использованием изображений и гиперссилок.
Базовые сведения:
Гипертекстовые ссылки.
Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно. Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки.
Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по FTP-протоколу для отображения его браузером.
URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.
URL.
HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слэша после двоеточия обозначают имя машины:
Uniform Resource Locator имеет следующий формат:
method://servername:port/pathname#anchor.
Опишем каждый из компонентов URL:
METHOD
Имя операции, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы:
SERVERNAME
Необязательный параметр, описывающий полное сетевое имя машины. Например: www.softexpress.com - полное сетевое имя сервера фирмы Софт Сервис. Если имя сервера не указано, то ссылка считается локальной, и полный путь, указанный далее в URL вычисляется на той машине, с которой взят HTML-документ, содержащий данную ссылку. Вместо символьного имени машины может быть использован IP-адрес, однако это не рекомендуется из-за возможного пересечения с фиксированными локальными адресами внутренней сети.
PORT
Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.
PATHNAME
Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: http://www.softexpress.com/cgi-win/handle.exe В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.softexpress.com. Заметьте, что при описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слэши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (что чаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL заканчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.html).
#ANCHOR
Данный элемент является ссылкой на именованный объект внутри HTML-документа. Большинство браузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна браузера. Создание именованных ссылок описывается далее.
Структура ссылок в HTML-документе.
Пока что мы рассмотрели только внешний вид URL. Для того, чтобы браузер отобразил ссылку на URL, необходимо отчетить URL специальными тэгами в HTML-документе.
Синтаксис HTML, позволяющий это сделать - следующий:
<A HREF="URL" >текст-который-будет-подсвечен-как-ссылка </A>
Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчеркнутым и выделенным синим (или другим заданным пользователем) цветом.
Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).
Ссылки на точки внутри документа.
Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя скроллирование экрана. Как только вы щелкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера). Для создания такой ссылки необходимо выполнить следующие шаги:
Графика внутри HTML-документа.
Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.
Существует два способа использования графики в HTML-документах.
Первый
- это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тэга:
<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2
ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom
BORDER=n3 VSPACE=n4 HSPACE=n5 ISMAP>
Фоновые рисунки
Большинство браузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов. Описание фонового рисунка включается в тэг BODY и выглядит следующим образом: <BODY BACKGROUND="URL">
Задание на лабораторную работу
Обязательные страницы:
|
|
|
Figure: Разбитое изображение. |
Лабораторная работа № 3. Оформление HTML документа.
Таблицы.
Цель работы: Изучить основы организации таблиц в HTML.
Базовые сведения:
Средства описания таблиц в HTML.
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег <PRE>), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.
Создание таблиц в HTML.
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы — тег <ТR> Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR></ТR>.
Определение ячеек таблицы - тег <ТD> Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Число тегов <ТD></ТD> в строке определяет число ячеек (открыть)
<TABLE>
<TR>
<TD COLSPAN=3>Если в таблице два тега TR, то в ней две строки.</TD>
</TR>
<TR>
<TD>Если в строке три тега TD,</TD>
<TD>то в ней</TD>
<TD>три столбца.</TD>
</TR>
</TABLE>
Заголовки столбцов таблицы — тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
<TABLE >
<TR>
<TH>Заголовок центрирован по умолчанию</TH>
<TH COLSPAN=2>Заголовок может объединять столбцы</TH>
</TR>
<TR>
<TH>Заголовок может быть расположен перед столбцами</TH>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TH ROWSPAN=3>Заголовок может объединять строки</TH>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
Использование заголовков таблицы — тег <САРТIОN>
Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.
<TABLE>
<CAPTION ALIGN=top>Заголовок над таблицей</CAPTION>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
<TABLE>
<CAPTION ALIGN=bottom>Заголовок под таблицей </CAPTION>
<TR>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
<TD>Текст или данные</TD>
</TR>
</TABLE>
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
<TABLE BORDER="3">
<TR>
<TD>Если вы хотите сделать какую-нибудь
ячейку шире, чем верхняя или нижняя,
</TD>
<TD>можно воспользоваться атрибутом
СОLSPAN=, </TD>
</TR>
<TR>
<TD BGCOLOR=white COLSPAN="2" > чтобы
растянуть ее над любым количеством
обычных ячеек.</TD>
</TR>
</TABLE>
Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТR> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в пикселах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТR> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в пикселах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPASING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN.
Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.
Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением.
Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Задание на лабораторную работу
|
Figure: Таблица №1. |
|
Figure: Таблица №2. |
|
Figure: Таблица №3. |
|
Figure: Таблица №4. |
Создайте таблицу 6x6 с простой однопиксельной рамкой.