- •«Разметка html – документов»
- •Содержание
- •Структура html-документа
- •Заголовок документа
- •Тело документа
- •Заголовки внутри документа
- •Параграфы
- •Принудительное разбиение строк
- •Комментарии
- •Оформление нтмl-документов
- •Горизонтальные разделители
- •Простые списки
- •Нумерованные списки
- •Списки с определениями
- •Вложенные списки
- •Добавление бегущей строки
- •Унифицированный адрес ресурсов
- •Ссылки на фрагменты документов
- •Ссылки на части одного документа
- •Посылка электронной почты
- •Преформатированный текст
- •Форматирование символов
- •Использование тэгов форматирования
- •Специальные символы
- •Использование графических изображений
- •Встроенные изображения, звуки и анимация
- •Ссылки на изображения, звуки и анимацию
- •Таблицы
- •Простейшая однострочная таблица
- •Приемы ускорения создания таблиц
- •Создание строки надписей
- •Включение названия
- •Выравнивание текста внутри клеток
- •Пустые клетки
- •Перекрытие текстом нескольких строк или столбцов
- •Средства таблиц
- •Задания к лабораторной работе
- •Содержание отчета по лабораторной работе
- •Приложение б Константы для представления цветов
- •Продолжение приложения б
- •Издательство «нефтегазовый университет»
- •625000, Г. Тюмень, ул. Володарского, 38
- •625039. Г.Тюмень. Ул. Киевская, 52
ФЕДЕРАЛЬНОЕ АГЕНСТВО ПО ОБРАЗОВАНИЮ
ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
«ТЮМЕНСКИЙ ГОСУДАРСТВЕННЫЙ НЕФТЕГАЗОВЫЙ УНИВЕРСИТЕТ»
ИНСТИТУТ НЕФТИ И ГАЗА
Кафедра «Автоматизация и управление»
МЕТОДИЧЕСКИЕ УКАЗАНИЯ
к лабораторной работе
«Разметка html – документов»
по дисциплине «Компьютерно – телекоммуникационные сети»
для студентов специальности 220301 - «Автоматизация технологических процессов и производств (нефтегазодобыча)»
очной, заочной и заочной сокращённой форм обучения
Тюмень 2007
Утверждено редакционно – издательским советом
Тюменского государственного нефтегазового университета
Составитель: к.т.н., доц. Ведерникова Ю.А.
©Государственное образовательное учреждение высшего профессионального образования
«Тюменский государственный нефтегазовый университет», Тюмень 2007г.
Содержание
1. Что такое HTML-документ 4
2. Структура HTML-документа 4
3. Оформление НТМL-документов 8
4. Ссылки 11
5. Использование графических изображений 15
6. Таблицы 16
ЗАДАНИЯ К ЛАБОРАТОРНОЙ РАБОТЕ 20
СОДЕРЖАНИЕ ОТЧЕТА ПО ЛАБОРАТОРНОЙ РАБОТЕ 21
КОНТРОЛЬНЫЕ ВОПРОСЫ 21
РЕКОМЕНДУЕМАЯ ЛИТЕРАТУРА 21
Приложение A 22
Приложение Б 26
Цель работы: Освоение приемов создания WEB-страниц с использованиемHTML(HyperTextMarkupLanguage) - языка гипертекстовой разметки документов.
Что такое HTML-документ
HTML-документ отличается от обычного текстового файла тем, что в нем присутствуют специальные команды - тэги, которые указывают правила форматирования документа. Тэги заключаются в треугольные скобки и, как правило, являются парными. Например:
<CENTER> обозначает вывод текста по центру
Этот текст будет расположен в середине экрана
</CENTER> обозначает окончание вывода текста по центру
В тэгах HTML не различают символы верхнего и нижнего регистров: тэг <CENTER> эквивалентен тэгу <center> или <Center>.
Тэгу могут присваиваться атрибуты. Атрибуты указываются в треугольных скобках сразу после имени тэга. Значение атрибута определяется после знака равенства. Например, с тэгом <FONT> (шрифт) может использоваться атрибут SIZE, задающий размер шрифта:
<FONT SIZE=5>
Этот тэг задает размер шрифта - 5.
</FONT>
Структура html-документа
Обычно HTML-документ обрамляется тэгами <HTML> и </HTML>.
Метка <HTML> сообщает броузеру WEB о считывании HTML-файла, а метка </HTML> обозначает конец HTML-файла.
Документ HTML состоит из двух частей: заголовок и тело.
Заголовок эквивалентен введению и используется для сбора информации о странице. Для определения заголовка применяются метки <HEAD> и </HEAD>. Применять метку <HEAD> следует сразу после метки <HTML>.
В секцию тело вводится текст и другие объекты, которые фактически являются страницей WEB. Для определения тела применяются метки <BODY> и </BODY>, которые идут сразу за меткой <HEAD>.
Таким образом, структура HTML-документа выглядит следующим образом:
<HTML>
<HEAD>
Заголовок документа
</HEAD>
<BODY>
Тело (основная часть документа)
</BODY>
</HTML>
Заголовок документа
Основное назначение элементов заголовка - это описание общего для всего документа параметров отображения. К таким параметрам можно отнести стиль отображения документа, общий базовый адрес гипертекстовых ссылок, общие гипертекстовые ссылки идентификатор и имя документа и т.п.
Наиболее часто используемым элементом заголовка является имя документа:
<TITLE> Название документа </TITLE>
Содержание элемента <TITLE> отображается в поле названия документа браузера.
Тег <МЕТА>также используется в пределах заголовка страницы и предназначен для того, чтобы включить любую полезную информацию, не определенную другими HTML тегами. Такая информация может быть извлечена серверами/клиентами для использования в идентификации, индексации и создании каталогов просматриваемых страниц.
Тег <МЕТА>не виден в браузере при просмотре страницы, но значительно увеличивает размер страницы. Если Вы хотите, чтобы Ваш сайт находился в числе первых, выдаваемых поисковыми машинами при запросах пользователей, то Вам нельзя игнорировать использование МЕТА - тега. Кроме того, необходимо правильно заполнять содержимое МЕТА - тегов.
Атрибуты МЕТА-тега: HTTP-EQUIV, Name и CONTENT.
HTTP - EQUIV.Этот атрибут определяет заголовок HTTP, которому принадлежит информация. Если семантика заголовка HTTP, названного этим атрибутом известна, то содержание может быть обработано на основании записанных здесь данных. Заголовки HTTP не чувствительны к регистру.
NAME.МЕТА - информационное имя. Если признак NAME - отсутствует, то данный атрибут может получить значение, равное значению HTTP-EQUIV.
CONTENT.МЕТА - информационное содержание, которое будет связано с данным именем и/или заголовком HTTP.
Типичные примеры использования МЕТА – тегов описаны ниже:
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=Windows-1251"> - используется браузерами для определения кодировки, с помощью которой была написана данная страница. "charset=koi8-r" - альтернативная кодировка. Существуют также кодировки ISO, LAT, DOS.
Внимание: не рекомендую вставлять на Вашу страничку данный код, потому что большинство серверов хранят данные в одной кодировке (например, koi8-r) и преобразуют их по запросу пользователя в нужную кодировку. Если сервер исправит Вашу первую кодировку во вторую, а пользователю выдаст третью, как смесь первой и второй, то никакие перекодировщики не смогут восстановить первоначальный текст на странице.
<META Name="author" Content="Ваши Ф.И.О., E-Mail"> - идентификация автора страницы.
<META Name="copyright" Content="Информация о вашей фирме"> - сохранение авторских прав, информация о Вашей фирме и тд.
<META Name="keywords" Content="Ваши ключевые слова"> -определяет список ключевых слов, используемых на данной странице. Необходим для поисковых машин.
<META Name="description" Content="Описание Вашей страницы"> - Краткое описание содержимого данной страницы. Необходим для поисковых машин.
<META HTTP-EQUIV="Expires" Content="Mon, 11 Jun 1998 00:00:01 GMT"> - предназначен для того, чтобы браузер брал страницу не из кэша, а по настоящему адресу.
<META Name="Publisher-Email" Content="Ваш_e-mail@сервер.домен"> - адрес издателя страницы (Ваш адрес).
<META Name="Publisher-URL" Content="Адрес Вашего сайта http://www.Ваш_сайт/"> - адрес Вашего сайта в сети Интернет.
<META Name="Generator" Content="Microsoft Notepad"> - описывается средство, с помощью которого была создана данная страница.
<META Name="revisit-after" Content="10 days"> - (не точно!) как часто обновляется информация на странице.
<META Name="ROBOTS" Content="Index,follow"> - (не точно!) предназначен для поисковых машин, постоянно сканирующих просторы сети Интернет.
<META HTTP-EQUIV="Refresh" Content="2"> - страница перечитывает сама себя через время x (в нашем случае x=2 секунды).
<META HTTP-EQUIV="Refresh" Content="x; URL=http://где.то/что-то.html" - этот вариант прочитает другую страницу через время x.
<META HTTP-EQUIV="pragma" Content="no-cache"> - запрещает кэширование страницы на локальном компьютере пользователя.
<META HTTP-EQUIV="Page-Enter" Content="BlendTrans(Duration=2.0)"> - Эффект появления страницы при входе на на неё..
<META HTTP-EQUIV="Page-Exit" Content="BlendTrans(Duration=2.0)"> - Эффект исчезания страницы при переходе по ссылке..