Основы языка гипертекстовой разметки документов
1. Web-сайты и Web-страницы
HTML (Hyper Text Markup Language) означает язык разметки гипертекста.
Этот язык был разработан Тимом Бернерсом-Ли в рамках создания проекта распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW) или Всемирная паутина.
HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.
Сайт является интерактивным средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может зарегистрироваться на сайте, заполнить анкету и так далее.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.
Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.
Web-страницы сайта могут содержать динамические объекты (исполнимые модули), созданные с использованием сценариев на языках JavaScript и VBScript или элементов управления ActiveX.
Расположенные на сайте управляющие элементы (например, кнопки) позволяют пользователю запускать те или иные динамические объекты.
Web-сайт состоит из Web-страниц, объединенных гиперссылками.
Web-страницы могут быть интерактивными
и могут содержать мультимедийные и динамические объекты.
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу.
Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.
Основными достоинствами HTML-документов являются:
• малый информационный объем;
• возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста.
В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Рассмотрим, как создаются Web-сайты, на примере разработки тематического сайта «Компьютер».
Сначала необходимо разработать проект сайта, то есть определить, сколько Web-страниц будет входить в сайт, какова будет их тематика и как они будут связаны между собой.
2. Форматирование текста и размещение графики
Создание структуры Web-страницы
Приступим к созданию титульной Web-страницы сайта.
Для этого используем привычный и достаточно удобный для этих целей текстовый редактор Блокнот.
¦Создание Web-сайта « Петербург »
1. Открыть окно текстового редактора Блокнот.
Вид Web-страницы задается тэгами, которые заключают ся в угловые скобки.
Тэги могут быть одиночными или парными ными, для которых обязательно наличие открывающего и закрывающего тегов (такая пара тэгов называется контейнером).
Закрывающий тэг содержит прямой слэш перед обозначением.
Тэги могут записываться как прописным так и строчными буквами.
задание 1 : открыть Блокнот и написать английскими буквами теги
Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать.
Web-страница разделяется на две логические части:
заголовок и содержание.
Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отобра жения.
Основное содержание страницы помещается в контейнер и может включать
текст,
таблицы,
бегущие строки,
ссылки на графические изображения и звуковые файлы и так далее.
Простейший способ создать текстовую веб-страницу — это набрать её код в каком-нибудь текстовом редакторе, который работает с простым текстом без оформления («только текст», англ. plain text) и сохранить в файле с расширением htm или html. В операционной системе для этих расширений, как правило, установлена связь (ассоциация) с браузером, так что при двойном щелчке на имени файла веб-страница открывается в браузере в режиме просмотра.
Для изменения страницы можно использовать любой текстовый редактор. После записи изменений на диск нужно обновить страницу в браузере <чаще всего для этого используется клавиша F5).
Кроме того, существуют специальные редакторы, предназначенные для разработки веб-страниц. Многие из них поддерживают режим WYSIWYG (англ. What You See Is What You Get — что видишь, то и получишь), т. е. при редактировании документ выглядит так же, как при просмотре в браузере. Изменять содержание и оформление веб-страницы можно точно так же, как и в текстовых процессорах (с помощью мыши, меню и командных кнопок), при этом пользователю не нужно знать язык HTML — все необходимые команды (тэги) программа добавляет автоматически. В то же время профессиональные веб-дизайнеры редко используют WYSIWYG-редакторы, потому что для точной вёрстки (размещения материала на странице) практически всегда приходится вручную редактировать HTML-код.
Даже если редактор поддерживает режим WYSIWYG, очень полезно изучать код построенной в нём веб-страницы для того,чтобы в будущем вы смогли легко перейти к созданию динамических сайтов.
Первая веб-страница
Разберём теперь более сложный пример. Ниже мы веб-страницы, а на рис. 4.2 — её вид в браузере.
Тест «Веб-сайты и веб-страницы»
Тест «Веб-сайты и веб-страницы»
для 11 класса углубленного уровня к УМК Полякова К. Ю. и Еремина Е. А.
(рекомендуемое время выполнения – 1 урок)
Указание: в заданиях 1, 3-7, 9, 10, 16, 27 впишите ответ; в задании 23 установите соответствие; в остальных заданиях выберите один или несколько ответов.
За каждый верный ответ в заданиях 1, 3-7, 9, 10, 16, 27 добавляется по 1 баллу; в остальных заданиях – за каждый правильно выбранный ответ добавляется по 0,5 балла. Максимальная сумма баллов равна 31.
Оценка «5» соответствует 27-31 баллам;
Оценка «4» соответствует 21-26 баллам;
Оценка «3» соответствует 12-20 баллам;
Оценка «2» соответствует 0-11 баллам.
а)хранятся на сервере в готовом виде;
б)создаются сервером в момент запроса;
д)могут выбирать информацию из баз данных.
а)служба мгновенных сообщений;
в)система управления содержимым динамического сайта;
г)система управления содержимым статического сайта;
е)каскадные таблицы стилей;
ж)язык разметки веб-страниц.
а)в заголовке веб-страницы;
б)в заголовке окна браузера;
в)нигде не выведется.
а)элемент маркированного списка;
б)переход на новую строку;
г)для создания гиперссылки.
а)служба мгновенных сообщений;
б)система управления содержимым динамического сайта;
в)система управления содержимым статического сайта;
д)каскадные таблицы стилей;
е)язык разметки веб-стран
а)для горизонтального и вертикального отступа фотографии от текста;
б)для вертикального и горизонтального отступа фотографии от текста;
в)для указания браузеру размеров рисунка.
а)для воспроизведения видеофайлов;
б)для воспроизведения аудиофайлов;
в)для воспроизведения флэш-роликов;
г)для добавления на веб-страницу «нестандартных» данных;
д)для добавления на веб-страницу баз данных.
а)технология создания интерактивных сайтов;
б)расширенный язык разметки;
в)язык подключения «плавающих» блоков;
г)язык автоматического подключения плагинов.
а)сложно описать структуры данных, отличающиеся от иерархии;
б)не различаются типы данных;
в)неудобен для представления многоуровневых списков;
Контейнерный Web-дизайн
Освоим дополнительные атрибуты стилей, применяемых для задания параметров блочных контейнеров (их размеры и местоположение на Web-странице).
А в завершение получим от CSS средства управления переполнением.
Блочные контейнеры
В блочном контейнере могут быть размещены от одного до нескольких блочных элементов таких как заголовок, абзац, таблица и др.
Для создания блочного контейнера применяется парный тег
В этом блочном контейнере размещен заголовок и два абзаца.
Блочные контейнеры используются чаще, чем встроенные.
Web-дизайн прошедшего времени и его недостатки
Web-страница делится на четыре части: заголовок, полоса навигации, основной контент, сведения об авторе. Во всех страницах сайта все одинаково за исключением основного контента, которое должно быть уникальным.
Вот эту проблему текстовый Web-дизайн и не решает.
Страница сайта — набор фреймов. Некоторые участки содержимого выводились в отдельные Web-страницы, адреса которых прописывались в параметрах их фреймов. В других страницах размещался лишь основной материал. Преимущество фреймового контейнерного web-дизайна — повысилась скорость загрузки страницы. Но есть и минусы: фреймы не стандартизированы и нет возможности изменить их структуру. Позже появилась новая разновидность web-дизайна — табличный.
Табличный контейнерный Web-дизайн. При создании web-страницы применяется таблица. Заголовок, авторские права, полоса навигации размещались по отдельным ячейкам этой таблицы. В дальнейшем табличный web-дизайн стал более популярным, чем фреймовый.
— возможность одинакового отображения web-страниц во всех web-браузерах.
— форматирование таблиц и их ячеек стилями CSS.
— все страницы опять имели повторяющиеся части html-кода, что отразилось на снижении загрузки страницы.
— большой и сложный html-код.
Так давайте же перейдем к изучению новой разновидности web-дизайна.
Сущность контейнерного Web-дизайна
Контейнерный Web-дизайн для размещения отдельных фрагментов содержимого Web-страниц использует блочные контейнеры, с которыми мы познакомились в начале этой главы. Отдельные контейнеры создаются для заголовка Web-сайта, полосы навигации, основного содержимого и сведений об авторских правах. Если основное содержимое имеет сложную структуру и состоит из множества независимых частей, для каждой из них создают отдельный контейнер.
Для задания различных параметров блочных контейнеров предусмотрены специальные атрибуты стиля CSS. К таким параметрам относятся размеры (ширина и высота), местоположение контейнеров и их поведение при переполнении. Также мы можем задать для контейнеров цвет фона, создать отступы и рамки, чтобы их выделить (о параметрах отступов и рамок речь пойдет в главе 11).
И что, контейнерный Web-дизайн так уж хорош? Давайте рассмотрим недостатки трех старых принципов Web-дизайна и выясним, сможет ли он их решить.
— Непритязательный вид и линейное представление Web-страниц — у текстового Web-дизайна. Мы можем расположить контейнеры на Web-странице практически как угодно и поместить в них произвольное содержимое: текст, таблицы, изображения, аудио- и видеоролики и даже другие контейнеры. А CSS позволит нам задать для них практически любое представление.
— «Монолитность» Web-страниц — у текстового и табличного Web-дизайна. Современные Web-обозреватели позволяют с помощью специально созданного поведения загрузить в контейнер Web-страницу, сохраненную в отдельном файле, т. е. организовать подгружаемое содержимое. Мы займемся этим в главе 18.
— «Нестандартность» фреймов — у фреймового Web-дизайна. Контейнеры и соответствующие теги официально стандартизированы комитетом W3C и обрабатываются всеми Web-обозревателями одинаково.
— Громоздкость HTML-кода — у табличного Web-дизайна. HTML-код, формирующий контейнеры, исключительно компактен. Как мы уже знаем, блочный контейнер формируется всего одним парным тегом
— Медленная загрузка Web-страниц — у табличного Web-дизайна. Все Web-обозреватели отображают содержимое контейнеров прямо в процессе загрузки, так что Web-страницы визуально загружаются очень быстро.
И что, контейнерный Web-дизайн так хорош? И он совсем не имеет недостатков? Увы, ничего совершенного в мире нет.
Контейнерный Web-дизайн проигрывает табличному в возможности реализации сложного дизайна Web-страниц. Таблица позволяет создать на Web-странице множество колонок разной ширины, содержащих разное содержимое. Чтобы сделать это с помощью контейнеров, скорее всего, придется применять вложенные друг в друга контейнеры, сложные стили и, возможно, поведение, которое уже после окончания загрузки Web-страницы располагает контейнеры в нужных местах. Это, пожалуй, единственный недостаток контейнерного Web-дизайна.
Что ж, с контейнерным Web-дизайном все в основном ясно. Давайте попрактикуемся. Переделаем наши Web-страницы с применением контейнерного Web-дизайна — «легкого», простого, современного.
Представление для нашего Web-сайта
Сначала разработаем схему расположения на Web-страницах соответствующих контейнеров. Лучше всего нарисовать ее на бумаге или в программе графического редактора.
Классическая схема контейнерного Web-дизайна (и не только контейнерного) показана на рис. 10.1. Как видим, в самом верху располагается заголовок Web-сайта, ниже него в одну линию по горизонтали выстроились полоса навигации и основное содержимое, а под ними пристроились сведения об авторских правах. Давайте используем именно эту схему.
Откроем в Блокноте Web-страницу index.htm. Найдем в ее HTML-коде четыре важных фрагмента любой Web-страницы: заголовок Web-сайта, полосу навигации, ос новное содержимое и сведения об авторских правах. Поместим их в блочные контейнеры.
На рис. 10.1 показано, что заголовок Web-сайта предшествует полосе навигации, а не наоборот. Поэтому поменяем местами фрагменты HTML-кода, создающие эти контейнеры и их содержимое.
Впоследствии мы привяжем к созданным контейнерам стили, задающие их размеры и местоположение на Web-странице. Поскольку каждый из этих контейнеров присутствует на каждой Web-странице в единственном экземпляре, применим для этого именованные стили. Дадим им такие имена:
— cheader — стиль для контейнера с заголовком Web-сайта;
— cnav — стиль для контейнера с полосой навигации;
— cmain — стиль для контейнера с основным содержимым;
— ccopyright — стиль для контейнера со сведениями об авторских правах.
Здесь буква «c» обозначает «container» — контейнер. Так мы сразу поймем, что данные стили применяются именно к контейнерам.
Привязка именованного стиля к тегу выполняется путем указания имени этого стиля в качестве значения атрибута тега ID. Сделаем это для всех контейнеров.
Внутри какого контейнера располагается код веб страницы
Основными достоинствами Web-страниц являются:
— малый информационный объем;
— возможность просмотра в различных операционных системах.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д.
Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.
Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?
2. Каким образом Web-страницы объединяются в Web-сайты?
Структура Web-страницы
Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.
Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером).
Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.
Отображаемое в браузере содержание страницы помещается в контейнер (рис. 6.26):
Компьютер
Компьютер и ПО
| Рис. 6.26. Заготовка Web-страницы «Компьютер» |
Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, «Компьютер»), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.
1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы?
6.10. Практическое задание. Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере.
Форматирование текста на Web-странице
Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.
Заголовки. Размеры шрифтов заголовков задаются парами тэгов от (самый крупный) до (самый мелкий).
Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R=»blue»). Значение атрибута COLOR можно задать либо названием цвета (например, «red», «green», «blue» и т. д.), либо его шестнадцатеричным значением.
Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN=»left», выравнивание по правой границе: ALIGN=»right», выравнивание по центру: ALIGN= «center».
Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:
Домашняя страница сайта. На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта «Компьютер» текст, разбитый на абзацы с различным выравниванием:
Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
Таким образом, домашняя страница сайта «Компьютер» будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27):
Компьютер и ПО
Ha этом сайте.
Терминологический словарь
.
| Рис. 6.27. Web-страница «Компьютер» с отформатированным текстом |
1. Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Ввода абзацев?
6.11. Практическое задание. Создать Web-страницу «Компьютер» с отформатированным текстом и просмотреть ее в браузере.
Вставка изображений в Web-страницы
Вставка изображений. Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например:
Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
На домашней странице сайта «Компьютер» логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28):
| Рис. 6.28. Вставка изображения в Web-страницу «Компьютер» |
Вставка альтернативного текста. Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.
Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?
6.12. Практическое задание. Вставить в Web-страницу «Компьютер» изображение и просмотреть ее в браузере.
Гиперссылки на Web-страницах
Гиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.
Гиперссылка создается с помощью универсального тэга и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница:
Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:
Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:
Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.
Гиперссылки могут содержать адреса не только Web-страниц, но и файлов других типов. Активизация таких гиперссылок будет приводить:
Панель навигации по сайту. Создадим папку сайта «Компьютер» и добавим в сайт пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета». Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие «пустые» страницы должны иметь заголовки, но могут пока не иметь содержания:
На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.
Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:
Теперь по щелчку по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке Кому будет указан заданный в ссылке адрес.
Итак, созданная домашняя страница Web-сайта «Компьютер» содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты (рис. 6.29).
| Рис. 6.29. Готовая домашняя страница сайта «Компьютер» |
1. Какой тэг и его атрибуты используются для создания гиперссылок?
6.13. Практическое задание. Создать Web-страницу «Компьютер», содержащую панель гиперссылок на другие страницы сайта, и просмотреть ее в браузере.
Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.
Системные программы
Прикладные программы
Системы программирования
текстовые редакторы;
графические редакторы;
электронные таблицы;
системы управления базами- данных.
На Web-страницу «Программы» поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера.
Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).
| Рис. 6.30. Web-страница «Программы», которая содержит нумерованный список с вложенным маркированным списком |
Web-страницу «Словарь» мы представим в виде словаря компьютерных терминов (рис. 6.31):
Процессор
Центральное устройство компьютера, производящее обработку информации в двоичном коде.
Оперативная память
Устройство, в котором хранятся программы и данные.
| Рис. 6.31. Web-страница «Словарь», содержащая словарь терминов |
1. Какие тэги используются для создания нумерованных списков? Маркированных списков?
