Поиск

Полнотекстовый поиск:
Где искать:
везде
только в названии
только в тексте
Выводить:
описание
слова в тексте
только заголовок

Рекомендуем ознакомиться

'Методичні рекомендації'
Мета – підвищити рівень педагогічної майстерності вчителів щодо реалізації компетентнісного підходу в навчально-виховному процесі початкової школи за...полностью>>
'Документ'
Комитет по муниципальному заказу администрации города Невинномысска (уполномоченный орган на размещение заказа) приглашает принять участие в открытом ...полностью>>
'Документ'
Введение Пшеница является важнейшей продовольственной и кормовой культурой. Она занимает лидирующее место среди возделываемых во всём мире культур по...полностью>>
'Документ'
Вероятно, вы вспомните те дни вашей юности, когда вы вставали рано утром и шли пешком с ощущением, что как будто лучи встающего солнца проникают вам ...полностью>>

Создание простейшей Web страницы

Главная > Лабораторная работа
Сохрани ссылку в одной из сетей:

ВВЕДЕНИЕ

Изучение дисциплины «Информационные технологии» является составной частью фундаментальной подготовки студентов специальности 071900. Она преподается в течение пятого и шестого семестров. В данной методичке изложены правила создания гипертекстовых документов на языке HTML, описаны распространенные программные продукты для подготовки документов на HTML.

Выполнив лабораторную работу, студент должен знать структуру соответствующего программного обеспечения, его основные функции, правила использования его по назначению.

Технология выполнения лабораторных работ единообразна и включает в себя следующие этапы:

  • теоретическое усвоение материала в объеме данных методических указаний и соответствующих разделов курса лекций;

  • получение задания на работу, осмысление его и проведение необходимых подготовительных работ;

  • выполнение задания с использованием вычислительной системы;

  • оформление отчета;

  • защиту выполненной лабораторной работы в виде теста.

Каждая лабораторная работа рассчитана на два или четыре аудиторных часа.

ЛАБОРАТОРНАЯ РАБОТА №1

Тема: Создание простейшей Web - страницы.

Цель работы: Изучить структуру HTML документа, научиться практически применять полученные знания при создании Web - страницы.

  1. Структура HTML-документа

Документ HTML начинается с <HTML>, заголовок (HEAD) и тело (BODY) документа:

<HTML>

<HEAD>

<TITLE>Наименование документа</TITLE>

... Заголовок документа

</HEAD>

<BODY>

... Тело документа

</BODY>

</HTML>

На практике, элементы HTML, HEAD и BODY не являются обязательными.

    1. Заголовок (элемент HEAD)

Метки <HEAD> и </HEAD> указывать не обязательно. Заголовок может содержать в любом порядке любые из указанных ниже элементов:

  1. Title - определяет наименование документа (обязательный элемент)

  2. Style - зарезервирован для будущего использования со списками стилей

  3. Script - зарезервирован для будущего использования со скриптами

  4. IsIndex - предназначен для организации простого поиска по ключевому слову;

  5. Base - определяет базовый ресурс, относительно которого происходит адресация по относительным ссылкам

  6. Meta - содержит мета-информацию в виде пар имя/значение

  7. Link - определяет отношение к другим документам

Элементы TITLE, SCRIPT и STYLE должны иметь открывающую и закрывающую метки. Для остальных элементов закрывающие метки запрещены. Обратите внимание: содержимое элементов SCRIPT и STYLE в настоящее время не стандартизовано.

TITLE

Документ HTML должен содержать один элемент TITLE в заголовке. В наименовании документа могут использоваться символьные объекты. Метки внутри элемента TITLE, запрещены.

Пример элемента TITLE:

<TITLE>Заголовок документа HTML 3.2</TITLE>

STYLE и SCRIPT

Зарезервированы для использования со списками стилей и скриптами, исполняемыми клиентом, в будущих версиях HTML. Могут содержать только латинские буквы и разделители ETAGO ("/>").

ISINDEX

Элемент ISINDEX показывает, что документ представляет собой оглавление, в котором можно производить поиск по ключевому слову. Ограничений на длину запроса нет. Для определения текста подсказки можно использовать атрибут PROMPT

например:

<ISINDEX PROMPT="Поиск по ключевому слову:">

Семантика элемента ISINDEX в настоящее время определена только для случая, когда в качестве базового ресурса указан ресурс, доступный по протоколу передачи гипертекстов (http://). Как правило, когда пользователь нажимает клавишу Enter (Return), на сервер, определенный как базовый ресурс, отправляется соответствующий запрос. Например, если пользователь ввел запрос "ten green apples", а в качестве базового ресурса указано:

/

генерируется вот такой запрос:

/?ten+green+apples"

Обратите внимание: пробелы конвертируются в плюсы (+).

BASE

Элемент BASE указывает базовый ресурс, относительно которого выполняются относительные ссылки, например:

<BASE href="/intro.html">

...

<IMG SRC="icons/logo.gif">

В этом случае изображение загружается из файла /icons/logo.gif

В отсутствие элемента BASE в качестве базы используется местонахождение текущего документа. Обратите внимание: фактическое местонахождение документа может отличаться от имени ресурса, к которому был адресован HTTP-запрос, поскольку базовое местонахождение может быть переопределено заголовком HTTP, сопровождающим документ.

META

Элемент META определяет пару имя/значение, описывающую некоторое свойство документа: информацию об авторе, список ключевых слов и т.п. Атрибут NAME указывает имя переменной, а атрибут CONTENT — значение переменной.

<META NAME="Author" CONTENT="Dave Raggett">

Вместо атрибута NAME можно использовать атрибут HTTP-EQUIV. Серверы протокола передачи гипертекстов (HTTP) могут использовать свойства, определенные атрибутом HTTP-EQUIV для создания заголовка в соответствии с RFC 822, хотя некоторые элементы заголовков HTTP таким образом создать нельзя. Более подробную информацию можно найти в спецификации HTTP.

Пример:

<META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT">

приведет к генерации заголовка HTTP:

Expires: Tue, 20 Aug 1996 14:25:27 GMT

Такая переменная может использоваться в кэше для определения того, до какого времени действительна кэшированная копия документа.

LINK

LINK позволяет определять отношение текущего документа к другим документам и ресурсам. LINK входит в спецификации HTML уже очень давно, хотя очень немногие браузеры поддерживают этот элемент (большинство все еще его игнорирует).

В принципе, элемент LINK можно использовать:

- для навигации (создание меню или кнопок),

- для контроля за печатью HTML-файлов,

- для компоновки дополнительных ресурсов (списков стилей и скриптов),

- для показа альтернативных форм текущего документа.

Допустимые атрибуты элемента LINK:

Href - Указывает ресурс для компоновки.

Rel - Прямое отношение, или "тип связки". Определяет отношение текущего документа к ресурсу, указанному в атрибуте HREF. Отношения в HTML пока не стандартизованы, хотя уже существуют некоторые соглашения на этот счет.

Rev - Определяет обратное отношение. Связка от документа A к документу B с указанием REV=отношение отражает то же самое отношение, что связка из B к A with REL=отношение. Иногда для указания автора (домашней страницы или адреса электронной почты в виде ресурса типа mailto:) используется отношение REV=made.

Title - Необязательное наименование скомпонованного ресурса.

Вот некоторые предлагаемые отношения:

rel=top (Ссылка на вершину иерархии: первую или заглавную страницу в коллекции).

rel=contents (Ссылка на документ, выполняющий функции оглавления коллекции).

rel=index (Ссылка на документ, выполняющий функции оглавления текущего документа).

rel=glossary (Ссылка на документ, в котором находится словарь терминов, относящихся к текущему документу).

rel=copyright (Ссылка на документ, в котором находится информация об авторском праве на текущий документ).

rel=next (Ссылка на следующий документ в последовательности).

rel=previous (Ссылка на предыдущий документ в последовательности).

rel=help (Ссылка на документ, содержащий систему помощи: описание более широкого контекста и дополнительные ссылки).

rel=search (Ссылка на поисковый механизм, связанный с коллекцией).

Примеры элементов LINK:

<LINK REL=Contents HREF=toc.html>

<LINK REL=Previous HREF=doc31.html>

<LINK REL=Next HREF=doc33.html>

<LINK REL=Chapter REV=Contents HREF=chapter2.html>

1.2. Основные атрибуты метки <BODY>

  1. bgcolor - Определяет цвет фона документа. Синтаксис цвета см. ниже.

  2. text - Определяет цвет текста.

  3. link - Определяет цвет гипертекстовых ссылок.

  4. vlink - Определяет цвет использованных гипертекстовых ссылок.

  5. alink - Определяет цвет гипертекстовой ссылки в момент нажатия на нее.

  6. background - Определяет изображение, служащее фоном.

Цвета определяются в формате RGB в виде шестнадцатеричных чисел (например, COLOR="#C0FFC0"); существует также 16 распознаваемых имен цветов:

Black = "#000000"

Green = "#008000"

Silver = "#C0C0C0"

Lime = "#00FF00"

Gray = "#808080"

Olive = "#808000"

White = "#FFFFFF"

Yellow = "#FFFF00"

Maroon = "#800000"

Navy = "#000080"

Red = "#FF0000"

Blue = "#0000FF"

Purple = "#800080"

Teal = "#008080"

Fuchsia = "#FF00FF"

Aqua = "#00FFFF"

Пример:

<body bgcolor=white text=black link=red vlink=maroon alink=fuchsia>

2.Специальные элементы уровня текста

2.1.Элемент A (анкер)

Анкеры не могут находиться один внутри другого. Открывающая и закрываюшая метки обязательны. Анкеры используются для определения гипертекстовых ссылок, например,

Путь к <a href="hands-on.html">с частью </a>, а также конкретных точек внутри документа, на которые могут указывать гипертекстовые ссылки, например, <H3><a name=mit>Тек-Сквер 545 - рай для хакера</a></H3>.

Name - Строка, определяющая имя анкера. Имена анкеров в одном документе не должны повторяться.

Href - Указывает адрес ресурса, на который будет производиться переход по гипертекстовой ссылке. Это может быть другой HTML-документ, PDF-файл, изображение и т.п.

Title - Указывает наименование ресурса, на который сделана ссылка.

2.2. IMG – изображения

Используется для вставки изображений. Закрывающая метка запрещена. Изображения можно либо выравнивать вертикально по отношению к текущей строке, либо выравнивать по правому или левому полю. Информацию об управлении потоком текста можно найти в разделе, описывающем атрибут CLEAR метки BR.

<IMG SRC="canyon.gif" ALT="Большой Каньон">

Для элементов IMG допустимы следующие атрибуты:

Src - Обязательный атрибут. Указывает путь к изображению - файлу формата GIF, JPEG или PNG.

Alt - Содержит текстовое описание изображения, очень важное для совместимости с речевыми и текстовыми браузерами.

Align - Устанавливает позиционирование изображения по отношению к текущей строке:

align=top (Выравнивает верхний край изображения по верхнему краю текущей строки).

align=middle (Выравнивает центр изображения по базовой линии текущей строки).

(Выравнивает изображение по левому полю. Текст, следующий за изображением, "обтекает" изображение справа).

Обратите внимание: некоторые браузеры не обеспечивают адекватного показа документов, в которых содержится несколько изображений, выравненных по левому или правому краю. В результате авторы не могут быть уверены, что документ, содержащий такие изображения, будет выглядеть одинаково на разных браузерах.

Width - Указывает предполагаемую ширину изображения в пикселах. При указании высоты позволяет браузеру зарезервировать место на экране до того, как изображение будет передано по сети.

Height - Указывает предполагаемую выстоу изображения в пикселах. При указании ширины позволяет браузеру зарезервировать место на экране до того, как изображение будет передано по сети.

Border - Когда элемент IMG входит в состав гипертекстовой ссылки, бруазер, как правило, показывает это отрисовкой цветной окантовки вокруг изображения. Этот атрибут устанавливает ширину окантовки в пикселах. Чтобы отменить окантовку, можно использовать атрибут border=0. Разработчикам браузеров рекомендуется вводить дополнительные средства, которые показывали бы, что изображение является ссылкой, например, изменение формы курсора мыши при его прохождении над изображением.

Hspace - Используется для указания ширины поля слева и справа от изображения. Атрибут HSPACE устанавливает ширину такого поля в пикселах. По умолчанию HSPACE - небольшое положительное число.

Vspace - Используется для указания ширины поля сверху и снизу от изображения. Атрибут VSPACE устанавливает ширину такого поля в пикселах. По умолчанию VSPACE - небольшое положительное число.

Usemap - Используется для присвоения идентификатора фрагменту изображения-карты, определенного элементом MAP.

Ismap - Когда элемент IMG входит в состав гипертекстовой ссылки, атрибут ISMAP служит браузеру указанием передать обработчику координаты точки, на которой пользователь щелкнул мышью. Такой механизм вызывает проблемы у текстовых и речевых браузеров. Рекомендуется использовать элемент MAP.

Пример использования ISMAP:

<a href="/cgibin/navbar.map"><img src=navbar.gif ismap border=0></a>

Браузер осуществляет переход по ссылке, добавляя к адресу, указанному в атрибуте HREF, знак вопроса (?), координату x, запятую (,) и координату y. Координаты указываются в пикселах. Например, если пользователь указал точку с координатами x=10, y=27, адрес перехода в приведенном выше примере будет: "/cgibin/navbar.map?10,27". Рекомендуется отключать рисование окантовки.

2.3. APPLET (Java-апплеты)

Открывающая и закрывающая метка обязательны. Этот элемент поддерживается всеми браузерами, допускающими работу с Java. Элемент позволяет встроить Java-апплет в HTML-документ. APPLET передает апплету переметры с помощью элементов Param. После элементов PARAM содержимое элемента APPLET должно представлять альтернативу апплету для браузеров, не поддерживающих Java. Допускаются только элементы уровня текста, определенные объектом text в определении типа документа (DTD). Java-совместимые браузеры игнорируют этот дополнительный HTML-текст. Это можно использовать, чтобы показать изображение работающего апплета и текст, объясняющий назначение апплета. Кроме того, в этом разделе можно поместить ссылки на страницу, более информативную для браузера, не поддерживающего Java, или текст, высмеивающий пользователя за использование браузера, несовместимого с Java.

Вот простой пример Java-апплета:

<applet code="Bubbles.class" width=500 height=500>

Java-апплет, рисующий всплывающие пузырьки.

</applet>

Еще один пример, на сей раз с использованием элемента PARAM:

<applet code="AudioItem" width=15 height=15>

<param name=snd value="Hello.au|Welcome.au">

Java-апплет, проигрывающий приветственный звук.

</applet>

Codebase = базовый адрес.

Этот необязательный атрибут указывает базовый адрес апплета - каталог, где находится код апплета. Если этот атрибут не указан, используется каталог, где находится текущий документ.

Code = файл апплета.

Этот обязательный атрибут указывает имя файла, в котором находится откомпилированный подкласс Applet. Имя файла должно быть указано относительно базового адреса. Его нельзя указывать как абсолютный адрес.

Name = имя экземпляра апплета.

Этот необязательный атрибут присваивает имя данному экземпляру апплета, что позволяет апплетам, находящимся на одной и той же странице, отыскивать друг друга и обмениваться информацией.

Width = число пикселов.

Height = число пикселов.

Эти обязательные атрибуты указывают первоначальную ширину и высоту апплета в пикселах, не считая окон и иных элементов интерфейса, которые создает апплет.

Align = выравнивание,

Этот атрибут устанавливает выравнивание апплета. Допустимые значения: top, middle, bottom, left и right. По умолчанию принято bottom.

Vspace = число пикселов,

Hspace = число пикселов,

Эти необязательные атрибуты устанавливают верхнее и нижнее (VSPACE) и правое и левое (HSPACE) поля вокруг апплета. Браузеры показывают их аналогично атрибутам VSPACE и HSPACE элемента IMG .

Элемент PARAM используется для передачи параметров апплету:

<PARAM NAME = параметр VALUE = значение>

Элементы PARAM - единственный способ указать параметры, присущие только конкретному апплету. Апплеты считывают переданные пользователям значения с помощью метода getParameter().

Name = имя параметра,

Value = значение параметра.

Символьные объекты SGML (&eacute;, &#185; и т.п.) передаются апплету в "длинном" виде. При необходимости передать апплету символ & можно воспользоваться объектом &amp;.

Обратите внимание: элементы PARAM следует помещать в начале элемента APPLET element. Это требование не включено в определение типа документа (DTD) в связи с техническими особенностями моделей смешанного содержания в SGML.

2.4. FONT

FONT - Открывающая и закрывающая метки обязательны. Позволяет изменить размер и/или цвет текста. Атрибуты: SIZE и COLOR. Размеры шрифта даются в условных единицах без прямой привязки к фактическому размеру шрифта. Элемент FONT может быть упразднен в будущих версиях HTML.

Size - Устанавливает размер шрифта внутри элемента FONT. Размер устанавливается цифрой от 1 до 7 или относительно текущего размера с использованием целого числа со знаком, например, size="+1" или size="-2".

Color - Устанавливает цвет шрифта. Цвета устанавливаются в шестнадцатиричной нотации RGB.

2.5. BASEFONT

BASEFONT - Используется для установки базового размера шрифта. Закрывающая метка запрещена. Атрибут SIZE - целое число от 1 до 7. Базовый размер шрифта используется для нормального и предварительно форматированного текста, но не для заголовков, за исключением случаев, когда заголовки модифицируются с использованием элемента FONT с относительным размером шрифта.

2.6.BR

BR - Используется для разрыва строки. Закрывающая метка запрещена. Атрибут CLEAR используется для перемещения ниже изображений, выравненных по правому или левому полю. <BR CLEAR=LEFT> переводит текст ниже изображений, выравненных по левому полю, <BR CLEAR=RIGHT> делает то же самое для изображений, выравненных по правому полю, <BR CLEAR=ALL> переводит текст независимо от выравнивания изображений.

2.7. MAP

MAP - Элемент MAP позволяет создавать изображения-карты (image maps). Открывающая и закрывающая метки обязательны. Внутри элемента MAP находится один или более элементов AREA, которые определяют "горячие" области на указанном изображении и связывают эти области с адресами ресурсов.

Вот простой пример средства навигации:

<img src="navbar.gif" border=0 usemap="#map1">

<map name="map1">

<area href=guide.html alt="Доступ" shape=rect coords="0,0,118,28">

<area href=search.html alt="Поиск" shape=rect coords="184,0,276,28">

<area href=shortcut.html alt="Перейти" shape=rect coords="118,0,184,28">

<area href=top10.html alt="Десятка лучших" shape=rect coords="276,0,373,28">

</map>

Элемент MAP включает единственный атрибут NAME, определяющий имя карты. Имя используется атрибутом USEMAP элемента IMG. Обратите внимание: значение атрибута NAME чувствительно к регистру.

В элементе AREA запрещена закрывающая метка. Возможные атрибуты: SHAPE, COORDS, HREF, NOHREF и ALT. Атрибуты SHAPE и COORDS определяют области на изображении. Если атрибут SHAPE опущен, предполагается SHAPE="RECT".

shape=rect coords="лево-x, верх-y, право-x, низ-y"

shape=circle coords="центр-x, центр-y, радиус"

shape=poly coords=" x1,y1, x2,y2, x3,y3, ..."

Координаты x и y измеряются в пикселах от левого верхнего угла изображения. Если значения x и y даны в процентах, они интерпретируются как проценты ширины и высоты изображения. Пример:

SHAPE=RECT COORDS="0, 0, 50%, 100%"

Атрибут HREF указывает адрес перехода по гипертекстовой ссылке. Атрибут NOHREF используется, когда необходимо определить область, которая не является "горячей". Это полезно, когда необходимо "прорезать дыру" в "горячей" области.

Если две или более области перекрываются, регион, определенный первым, имеет преимущество. Это означает, что элементы AREA с атрибутом NOHREF следует помещать перед элементами с атрибутом HREF.

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

Контрольные вопросы:

  1. Опишите основные элементы заголовка HTML-документа

  2. Какие управляющие последовательности могут быть использованы в теле HTML-документа

  3. Перечислите специальные элементы уровня текста, их назначение.

Задание:

  1. Используя любой текстовой редактор, создайте Web – страницу.



Скачать документ

Похожие документы:

  1. Ё лаб №8 Создание простейшей Web-страницы

    Курсовая
    Внутри документа выделяются два основных раздела: раздел заголовков и тело документа, – идущие именно в таком порядке. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами и .
  2. Создание собственной web-страницы в Internet

    Документ
    Это загадочное слово "WWW". Что такое HTML. Как обратиться к файлу в Internet. Понятие URL. Визуальные редакторы или Блокнот. Структура HTML-документа.
  3. Создание Web-страниц. Изучение языка html

    Документ
    HTML - Hyper Text Markup Language. Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW).
  4. Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура html документа 7 (1)

    Документ
    World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet.
  5. Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура html документа 7 (2)

    Документ
    World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet.

Другие похожие документы..