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

Вид материала

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

Содержание Лабораторная работа №1 Структура HTML-документа Заголовок (элемент HEAD) STYLE и SCRIPT В принципе Href - Указывает ресурс для компоновки. Rel 1.2. Основные атрибуты метки 2.Специальные элементы уровня текста Тек-Сквер 545 - рай для хакера 2.2. IMG – изображения Src - Обязательный атрибут. Указывает путь к изображению - файлу формата GIF, JPEG или PNG. Alt Usemap - Используется для присвоения идентификатора фрагменту изображения-карты, определенного элементом MAP. Ismap Пример использования ISMAP 2.3. APPLET (Java-апплеты) Color - Устанавливает цвет шрифта. Цвета устанавливаются в шестнадцатиричной нотации RGB. 2.5. BASEFONT Shape=rect coords="0, 0, 50%, 100%" Лабораторная работа №2 Списки определений имеют вид Предварительно форматированный текст To a Skylark ... Полное содержание

Подобный материал:

• Ё лаб №8 Создание простейшей Web-страницы, 55.8kb.
• План занятий Web взгляд изнутри. Вводная часть в курс. Web-страницы, web-сайты, web, 11.42kb.
• Моу сош №18 г. Новотроицк, моу сош, 95.86kb.
• Программа для просмотра web-страниц, которая преобразует тэги html-документа в соответствующее, 47.68kb.
• Сценарий занятия «html-проектирование: Достопримечательности Мурманской области», 72.96kb.
• Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 214.3kb.
• Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 213.14kb.
• Концепция www 5 Создание Web-страницы с помощью языка html 7 1 Язык html 7 Структура, 217.81kb.
• «Создание и использование таблиц на Web-страницах», 223.42kb.
• Тема урока: Создание Web страниц с помощью html, 39.83kb.

ВВЕДЕНИЕ

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

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

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

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

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

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

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


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

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

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







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





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





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

1. Заголовок (элемент 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:

STYLE и SCRIPT

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

ISINDEX

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

например:



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

com/

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

com/?ten+green+apples"

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

BASE

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



...



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

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

META

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



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

Пример:



приведет к генерации заголовка 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:

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

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"

Пример: