Структура HTML документов

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

HTML. Использование списков и таблиц

Цель работы

Создание HTML-страницы с использованием материала прочитанных лекций (использование списков и таблиц).

Теоретические сведения

Основные понятия и определения

Гипертекст и гипермедиа.

Гипертекст представляет собой тот же текст, что и, например, текст MS Word 6.0-7.0, но отличается тем, что некоторые его части (символы, слова, фразы, рисунки) являются интерактивными ссылками на другие документы. Теперь большой документ можно разбить на отдельные темы и связать их через ключевые фрагменты (символы, слова, фразы или рисунки). Эти фрагменты, выделенные в документе особым образом для их идентификации, служат для перехода на связанные с ними по смыслу другие темы, или содержат в себе вызов других приложений. Таким образом, можно сказать, что гипертекст представляет собой содержание, внедрённое непосредственно в документ. Упрощая чтение, делая информацию нагляднее и понятнее, гипертекст создаёт комфортную работу с документом, выполняя многие действия, которые пользователю приходилось делать до этого, автоматически.

Термин гипертекст был введён Тедом Нельсоном (Ted Nelson) ещё в 60-х годах.

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

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

История World Wide Web.

Проект WWW был начат в 1989 году Тимом Бернерс-Ли (Tim Berners-Lee) в лаборатории физики высоких энергий CERN. Целью проекта являлась разработка метода обмена исследовательскими данными и идеями с учёными, разбросанными по всему миру. В первоначальном варианте Web называлась “ гипертекстовым проектом ”.

Понятие WWW относится к абстрактному информационному киберпространству. Под словом Internet обычно подразумевают физический уровень сети, то есть аппаратное обеспечение, состоящее из компьютеров и кабелей. Основой WWW и Internet является использование протоколов, то есть языка и правил, посредством которых компьютеры “общаются” между собой. Например, TCP/IP (Transmission Control Protocol/ Internet Protocol), представляет собой набор сетевых протоколов, которые позволяют компьютерам различной архитектуры соединяться друг с другом. Он является базовым протоколом сети Internet. WWW - это больше, чем просто один из протоколов. Подобно мозаике, Web объединяет несколько протоколов, в том числе FTP (File Transfer Protocol), telnet, WAIS (Wide-Area Information Servers) и другие.

Telnet, File Transfer Protocol, E-Mail, HyperText Transfer Protocol, Gopher, Wide-Area Information Servers, USENET News - протоколы, предназначенные для предоставления доступа к информации и обмена ею. Поскольку WWW использует стандартные протоколы Internet для передачи файлов и документов, термин Web часто используется как синоним понятия Internet и относится как к всемирной сети компьютеров, так и собственно к информации.

Создание в ноябре 1992 г. Национальным центром суперкомпьютеров (NCSA) первой программы просмотра (браузера) Web под названием Mosaic ознаменовало собой начало популярности WWW. В начале 1993 года в мире насчитывалось всего лишь 130 узлов Web, а уже через полгода после появления Mosaic их число возросло более чем до 10 000. Сеть Internet последние годы росла экспоненциально, приблизительно удваивая свои размеры ежегодно.

Публикации в WWW.

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

Чтобы опубликовать документы в Web, Вы должны расположить их на постоянно доступном сервере. При этом постоянное подключение к Internet стоит дорого, а скорости модема явно недостаточно для поддержания трафика. Однако для публикаций в Internet совсем необязательно иметь свой собственный Web - сервер с постоянным подключением к сети. Многие провайдеры Internet включают возможность публикации Web - документов в основной набор своих услуг или предлагает это за небольшую дополнительную плату. Стоимость таких публикаций зависит от поставщика и, конечно же, от того, что именно Вы хотите опубликовать. Сумма может варьироваться от нескольких десятков долларов в месяц за простую домашнюю страницу до нескольких тысяч - за интерактивный “виртуальный магазин”.

URL.

В Web - браузере можно ввести специальную строку - URL (Uniform Resource Locator - универсальный указатель ресурса) и соединиться с документом или ресурсом. Когда Вы указываете на гипертекстовую ссылку в Web - документе, на самом деле производится запрос на открытие URL. Почти любой файл или услугу Internet можно представить в виде URL. Web - браузер может действовать также в качестве клиента FTP, Gopher или telnet. Существует возможность устанавливать гиперссылки не только на другие Web - документы, но и на различные сетевые услуги. Используя разные типы URL, пользователь может получить доступ к различным ресурсам.

Структура HTML документов

Понятие тэга и элемента

HTML - это язык тэгов.

Тэг (дескриптор) - специальный код, вставляемый в текст для форматирования элементов HTML-документа. Это основной элемент кодирования, принятый в стандарте HTML. Тэг заключаются в угловые скобки < >. Например тэгом абзаца является < P>, а тэгом горизонтальной линии - < HR>.

Существует два типа тэгов: контейнеры и одиночные тэги.

Контейнер. Это дескрипторная пара, состоящая из начального (или открывающего) и конечного (или закрывающего) тэгов. Начальный тэг имеет вид < TAG>, где TAG - это имя реального HTML - тэга. Конечный тэг имеет вид < /TAG>. Контейнеры предназначены для хранения некоторой информации, например текста или других HTML - тэгов. Поэтому между начальным и конечным тэгами заключено содержимое контейнера. Например, элемент, представляющий собой отформатированный текст, заключается между тэгами < PRE> и < /PRE>.

Пустой дескриптор. Отличается от контейнера тем, что не содержит никакой информации. У него есть только начальный тэг. Пустой дескриптор обычно выполняет самостоятельную задачу, не связанную с конкретным текстом. Например, тэг < HR> создаёт горизонтальную линию.

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

Замечание: Язык HTML не чувствителен к регистру. Тэги могут набираться как прописными, так и строчными буквами, т.е. команда < title> эквивалентна команде < TITLE> или < TiTlE>. Не все тэги поддерживаются всеми браузерами. Если браузер не поддерживает тэг, он его просто игнорирует.

Границы документа

Самым главным из тэгов HTML является одноименный тэг < HTML>. Он должен всегда открывать документ, также как тэг < /HTML> должен обязательно стоять в последней его строке. Эти тэги означают, что находящиеся между ними строки представляют собой единый HTML документ. Это важно, так как сам по себе документ является обычным текстовым файлом ASCII. Без этих тэгов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.

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

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

· Дать документу название

· Определить отношения между несколькими документами

· Дать указание браузеру создать форму для поиска

· Определить метод посылки специальных сообщений определенному браузеру или другой программе просмотра

Раздел HEAD открывается тэгом < HEAD>. Обычно этот тэг следует сразу же за тэгом < HTML>. Закрывающий тэг < /HEAD> показывает конец этого раздела. Между упомянутыми тэгами располагаются остальные тэги раздела заголовка документа.

Название документа

Раздел TITLE является единственным обязательным элементом заголовка документа и служит для того, чтобы дать документу название. Оно обычно показывается в заголовке окна браузера. Содержимое раздела TITLE нельзя путать с названием файла документа. Оно представляет собой текстовую строку, совершенно не зависящую от имени и местоположения файла. Имя же файла жестко определяется операционной системой того компьютера, на котором храниться.

Название документа записывается между тэгами < TITLE> и < /TITLE> и представляет собой текстовую строку. Не следует заключать его в кавычки, если вы хотите, чтобы на экране их тоже не было. В большинстве случаев раздел TITLE занимает не более одной строки.

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

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

Хотя в WWW и наметилась тенденция к увеличению “активного” содержания, большинству читателей все же интересна текстовая часть страниц. Поэтому независимо от того пишется ли новый текст или конвертируется старый, процесс работы над телом документа отнимает немалое количество времени.

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

< HTML>
< HEAD>
< TITLE> This is an example document< /TITLE>
< /HEAD>
< BODY>
Enter body text here
< /BODY>
< /HTML>

Шаблон открывается тэгом < HTML>, который, как мы уже знаем, необходим для каждого HTML - документа. Следующим идет тэг < HEAD>, начинающий заголовок документа. Заголовок содержит элемент TITLE, вводящий название документа, в нашем случае “This is an example document”. Заголовок закрывается тэгом < /HEAD>. Далее идет тэг < BODY>, после которого помещается текст (тело) документа. Тэг < /BODY> означает конец тела, а тэг < /HTML> - конец всего документа.

Атрибуты элемента BODY

Элемент BODY может содержать большое количество атрибутов. Все они важны, так как определяют общий облик документа. Эти атрибуты приведены в таблице.

Рассмотрим эти атрибуты подробнее.

Определение цвета составных частей документа - первый шаг к его созданию. Если это не сделано, используются цвета по умолчанию. Они определяются установками программы просмотра.

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

В HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах - красном, синем и зеленом. Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, что соответствует диапазону 0-255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Для простоты в HTML 3.2 определены 16 стандартных цветов, которые вместе с их шестнадцатеричными кодами приведены в нижеследующей таблице.

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

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

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

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

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

Одним ид популярных способов украсить HTML - страницу является размещение на ней фоновой графики, видимой под основным текстом (атрибут BACKGROUND). Такой прием помогает подчеркнуть целостность документа либо. наоборот, разделить его на логические части.

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

Атрибуты LEFTMARGIN и TOPMARGIN служат для установки расстояния между левым и верхним краями текста и соответствующими краями окна браузера. Местоположение других краев текста не регулируется. Это сделано для того, чтобы обеспечить возможность просмотра страницы любым браузером. Невозможно заранее знать, какой размер окна у программы читателя документа.

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

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

Включение комментариев

В HTML - документы можно включать комментарии, которые не будут видны читателю. Они должны начинаться тэгом <! -- и заканчиваться тэгом -->. Все, что заключено внутри этих тэгов, при просмотре страницы остается невидимым.

Элемент Address

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

Элемент ADDRESS состоит из текста, помещенного между тэгами < ADDRESS> и < /ADDRESS>. Текст, заключенный между этими тэгами обычно показывается в окне браузера курсивом.