Лабораторная работа 1

Работа добавлена на сайт samzan.net:

Лабораторная работа № 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:

Internet это всемирная сеть разнородных компьютерных сетей, взаимодейст-вующих по протоколу TCP/IP.
Web является одним из приложений Internet (наряду с электронной почтой, но-востями и прочими электронными сервисами), предназначенным для массового распространения разнообразной информации.
Носителями информации в Web служит Web-страницы, содержащие текст, графику, мультимедиа элементы и гиперссылки на другие ресурсы Web или Internet.
Для передачи гипертекста Web-страниц в Internet используется специально разработанный протокол HTTP (Hyper Text Transfer Protocol).
Для разработки Web-страниц используется специальный язык разметки гипер-текста HTML (Hyper Text Markup Language).
Для просмотра Web-страниц используется специальная клиентская программа Web-броузер. В окне Web-броузера отображаются результаты интерпретации языка HTML с 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>:

BACKGROUND Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Синтаксис: <BODY BACKGROUND="(URL)(путь) имя файла">
BGCOLOR Этот атрибут задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов RGB , или при помощи строчного литерала, соответствующего названию цвета. Синтаксис: <BODY BGCOLOR="#ff0000">или <BODY BGCOLOR="RED">
TEXT Этот атрибут задает используемый по умолчанию цвет текста, который не является гиперссылкой. По умолчанию такой текст будет черным. Синтаксис: <BODY TEXT="цвет">
LINK Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно синим. Синтаксис: <BODY LINK="цвет">
ALINK Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью, не желательно задавать ему цвет фона по понятным причинам. · Синтаксис: <BODY ALINK="цвет">
VLINK Этот атрибут задает цвет посещенной гиперссылки, не желательно задавать ему цвет фона и цвет атрибута LINK по понятным причинам. Синтаксис: <BODY VLINK="цвет">

Заголовочные тэги.
Элемент <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. Наиболее часто используемые методы:

file: чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/alex/index.html - отображает файл index.html из каталога /home/alex на пользовательской машине
http: доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети). Например: http://www.softexpress.com/ - доступ к Home-странице компании SoftExpress
ftp: запрос файла с анонимного FTP-сервера.
Например: ftp://hostname/directory/filename
mailto: активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:info@softexpress.com - активизирует сессию посылки сообщения пользователю info на машине softexpress.com, если броузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указания слэшей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента)
telnet: обращение к службе telnet
news: вызов службы новостей, если браузер ее поддерживает.
Например: news:relcom.www.support

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, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).

Ссылки на точки внутри документа.
Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя скроллирование экрана. Как только вы щелкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера). Для создания такой ссылки необходимо выполнить следующие шаги:

Создайте маркер раздела. Синтаксис данного маркера следующий:
<A NAME="NamedAnchor" >Текст </A>
Создайте ссылку на данный маркер:
<A HREF="#NamedAnchor" >Текст </A>

Графика внутри 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>

URL Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.
ALT="text" Данный необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения.
HEIGTH=n1 и WIDTH=n2 Данные параметры используется для указания высоты и ширины рисунка. Явное указание размеров рисунка позволит браузеру расположить рисунок и текст оптимальным образом, и даст возможность избежать "прыгающей" загрузки страниц.
ALIGN Данный параметр используется, чтобы сообщить броузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство броузеров располагает изображение в левой части экрана, а текст справа от него.
ISMAP Этот параметр сообщает броузеру, что данное изображение позволяет пользователю выполнять какие-либо действия, щелкая мышью на определенном месте изображения. Данная возможность является расширением HTML.
BORDER Данный параметр позволяет автору определить ширину рамки вокруг рисунка.
VSPACE Позволяет установить размер в пикселах пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.
HSPACE То же самое, что и VSPACE, но только по горизонтали.

Фоновые рисунки

Большинство браузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов. Описание фонового рисунка включается в тэг BODY и выглядит следующим образом: <BODY BACKGROUND="URL">

Задание на лабораторную работу

Преобразуйте домашнюю страницу в простой домашний сайт, связав отдельные части с помощью гиперссылок. Необходимо использовать все виды гиперссылок

Обязательные страницы:

Об авторе.
- Мой ВУЗ.
- Моя группа.
- Моя будущая профессия.
- Мои увлечения или хобби.
- Любая другая информация.

Добавьте на ваши страницы следующие изображения, использовав различные значения параметров тега <IMG>.
Дорогие ребята! У программиста Васи возникла серьезная проблема. Он загрузил свой любимый графический файл в ультра новый графический редактор GigaPaint, который сразу же выполнил недопустимую операцию и закрылся, а картинка разбилась на кусочки. Помогите Васе собрать исходное изображение.

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>

</TR>

</TABLE>

Заголовки столбцов таблицы — тег <ТН>

Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

<TR>

<TH>Заголовок центрирован по умолчанию</TH>

<TH COLSPAN=2>Заголовок может объединять столбцы</TH>

</TR>

<TR>

<TH>Заголовок может быть расположен перед столбцами</TH>

<TD>Текст или данные</TD>

</TR>

<TR>

<TH ROWSPAN=3>Заголовок может объединять строки</TH>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

</TR>

</TABLE>

Использование заголовков таблицы — тег <САРТIОN>

Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

<TABLE>

<CAPTION ALIGN=top>Заголовок над таблицей</CAPTION>

<TR>

<TD>Текст или данные</TD>

</TR>

</TABLE>

<TABLE>

<CAPTION ALIGN=bottom>Заголовок под таблицей </CAPTION>

<TR>

<TD>Текст или данные</TD>

</TR>

</TABLE>

Атрибут NOWRAP

Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.

Атрибут СОLSPAN

Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

<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ТН

Атрибут СЕLLРАDDING

Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.

Атрибут CELLSPACING

Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPASING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

Атрибуты АLIGN и VALIGN

Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN.

Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
- ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
- ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
- АLIGN=сеnter располагает содержимое ячейки по центру.
- АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
- VALIGN=top выравнивает содержимое ячейки по ее верхней границе.
- VALIGN=middle центрирует содержимое ячейки по вертикали.
- VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.

Атрибут BORDER

В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.

Атрибут BGCOLOR

Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

Атрибут BACKGROUND

Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением.

Атрибут BORDER

Задание на лабораторную работу

Постройте таблицу следующего вида:

Figure: Таблица №1.

Постройте таблицу следующего вида:

Figure: Таблица №2.

Постройте таблицу следующего вида:

Figure: Таблица №3.

Постройте таблицу следующего вида:

Figure: Таблица №4.

Использование стандартного параметра BORDER приводит к неоднозначности отображения границы таблицы. Точнее каждый браузер интерпретирует вид границы по своему. Для устранения подобного разночтения создают таблицу с простой однопиксельной рамкой. Последовательность действий такова:
1. Создать таблицу "подложку", состоящую из одной строки и одного столбца. Залить ее требуемым цветом.
2. Далее в эту таблицу помещаем вложенную, заливая каждую ячейку нужным цветом.
3. Устанавливаем свойство CELLSPACING вложенной таблицы равным 1, торда нижняя таблица будет просвечивать и образует рамку толщиной 1 пиксель.

Создайте таблицу 6x6 с простой однопиксельной рамкой.

Создайте для таблицы № 4 простую однопиксельную рамку.

1. О создании Союзного государстваРоссия и Беларусия 8 декабря 1999 года Российская Федерация и Республика Бе
2. темах управления качеством изделий является стандартизация ~ нормотворческая деятельность которая находит
3. Практика возведения таможенных барьеров во внешнеэкономических отношениях привела в XX в
4. Европейское средневековье по курсу
5. Сети 1 стр. 58 январь 1997 Факсимильная связь на базе компьютерной телефонии А.
6. ПРОЕКТИРОВАНИЕ И КОНСТРУИРОВАНИЕ СВЧ ИНТЕГРАЛЬНЫХ УСТРОЙСТВ
7. реферат дисертації на здобуття наукового ступеня кандидата медичних наук Київ 2005 Дисер
8. вариант Часть 1 При выполнении заданий этой части в бланке ответов ’ 1 под номером выполняем.html
9. Гипотензивные средства (антигипертензивные средства)
10. письменного рождения от первого упоминания в Ипатьевской летописи
11. Волки воспитание потомства
12. метиловый оранжевый
13. п Интерферон в нос 2 раза в день по 5 капель в каждую ноздрю Смазывание тыльной стороны кистей рук
14. річчю з дня заснування Уманського національного університету садівництва Шановні друзі Фа
15. Тарас Бульба Гоголя и нравоописательное содере История одного города СЩ
16. реферат дисертації на здобуття наукового ступеня кандидата медичних наук Київ ~
17. 98 4 ЗАРЕГИСТРИРОВАНО в Министерстве юстиции Украины 10
18. дитель Цена руб
19. Наиболее частая причина развития железодефицитной анемии а дефицит витаминов б хронические кровопоте
20. .1.Проблема воспитания патриотизма в отечественной дошкольной педагогике

Материалы собраны группой SamZan и находятся в свободном доступе