Создание Web-страниц
Цель: изучить язык гипертекстовой разметки (HyperText Markup Language), освоив таким образом, Web-технологию, на основе которой построена одна из популярнейших услуг Internet - Всемирная паутина(World Wide Web). Получить практические навыки по созданию собственных информационных ресурсов.
Как создаются Web-страницы?
Для создания Web-страниц используется язык HTML (HyperText Markup Language — язык гипертекстовой разметки), определяющий набор специальных команд, называемых тегами. Тег – это специальная HTML-метка, предназначенная для того, чтобы дать указание Web-браузеру, как именно необходимо интерпретировать расположенный после него текст. Особые теги применяются для размещения на Web-страницах графических изображений, аудио- и видеоклипов и прочих так называемых внедренных объектов. Web-страницы представляют собой текстовые файлы, созданные в стандартном Блокноте или аналогичном простейшем текстовом редакторе и содержат текст, который вы хотите поместить на страницы, только размеченный особым образом. Продемонстрируем это на следующем примере. На рисунке 1 представлена простейшая Web-страница, которая создана в обычном Блокноте. Чтобы увидеть эту страничку воочию, откройте Блокнот, наберите приведенный ниже код и сохраните его в файле с расширением .html. После этого откройте полученный файл в Web-обозревателе, дважды щелкнув по нему мышью.
 Рис. 1
Листинг кода Web-страницы:
<html> <head> <title>ПримерWeb-страницы</title > </head> <body> <h1>Наша первая Web-страница</h1> <p>Это простейшая Web-страничка, созданная в стандартном <i>Блокноте</i> и отображенная в <i>Microsoft Internet Explorer</i> </p> </body> </html>
Несмотря на ряд неизвестных слов, содержащихся в HTML-коде страницы, хорошо заметен текст, который отображен в окне Web-обозревателя (рис.1). Рассмотрим код HTML-страницы более подробно.
<h1>Наша первая Web-страница</h1 > <p> Это простейшая Web-страничка, созданная в стандартном <i>Блокноте</i> и отображенная в <i>Microsoft Internet Explorer</i> </p>
Вы видите какие-то слова, заключенные в угловые скобки < >. Это и есть теги HTML. Они задают форматирование текста. Скажем, строка <i>Блокноте</i> будет выведена курсивом, т. к. теги <i> и </i> задают курсивное начертание текста. Причем, тег <i> помечает начало курсивного фрагмента (открывающий тег), а тег </i> — конец (закрывающий тег). Это были теги физического форматирования текста, т. е. задающие, как текст должен выглядеть в окне Web-обозревателя. Теперь рассмотрим теги логического форматирования, которые позволяют разбить текст на отдельные логические единицы. В нашем небольшом фрагменте это теги <p> и <h1> (и соответствующие им закрывающие теги </p> и </h1>). Они задают соответственно <p> …</p> - текстовый параграф и <h1> </h1> - заголовок первого уровня. При этом Web-обозреватель будет знать, что <h1>Наша первая страница</h1> — это заголовок, и отобразит его соответствующим образом. Как и в предыдущем случае, открывающий тег помечает начало логической единицы текста, а закрывающий — конец. Здесь мы говорили о так называемых парных тегах, состоящих из открывающего и закрывающего тега (тем не менее, о них говорят как об одном теге).
HTML определяет также набор одинарных тегов. Один из них — это тег перехода к новой строке <br>.
Теперь рассмотрим теги, которые используются для служебных целей. Парный тег <body>. . .</body> применяется для выделения тела Web-страницы, т.е. той ее части, которая будет отображаться в окне Web-обозревателя. Кроме тела, Web-страница также должна содержать HTML-заголовок, который обрамляется теговой парой <head>…</head>.В нем помещается служебная информация. (Не путайте HTML-заголовок и обычный текстовый заголовок, задаваемый тегом <H1>!) Среди этой служебной информации может быть название страницы, показываемое в заголовке окна Web-обозревателя. Название страницы помечается тегами <title>…</title>. Заметьте, что тег <title> вложен внутрь парного тега <head>. Такая вложенность тегов в HTML встречается на каждом шагу. При этом тег <head> называется родительским тегом или родителем тега <title>, а тег <title> — соответственно, дочерним тегом, или потомком тега <head>. И если вы еще раз посмотрите на полный листинг кода нашей Web-страницы, то увидите, что весь HTML-код заключен внутрь парного тега <html>...</html>. Именно этим тегом начинается любая HTML-страничка. Следовательно, любой HTML-документ имеет следующую структуру.
Структура HTML-документа
<html> <head> <title>…</title> </head> <body> … </body> </html>
Обратите внимание на порядок вложенности тегов - закрывающие теги идут всегда в обратном порядке, например: <head> <title> . . . </title > </head>
Если же вы случайно допустите ошибку и поместите теги так: <head> <title> . . . </head> </title >, то Web-обозреватель может и не отобразить ваше творение.
Web-страницы сохраняются в текстовых файлах с расширением .htm или .html и публикуются на Web-сервере. Графические изображения, аудио- и видео ролики и прочие внедренные нетекстовые элементы сохраняются в виде отдельных файлов и помещаются там же. С термином Web-сервер существует определенная путаница. Во-первых, так называют компьютер, подключенный к Сети по быстрому каналу и хранящий на своих жестких дисках файлы Web-страниц. Во-вторых, так именуется программа, принимающая от Web-обозревателей (клиентов) запросы и выдающая им соответствующие файлы. Но чаще и компьютер и программу объединяют в единое целое и называют одним словом — Web-сервер. Так поступим и мы. Когда вы набираете в поле адреса Web-обозревателя какой-либо интернет-адрес, обозреватель обращается к соответствующему Web-серверу. Сервер же извлекает со своих дисков нужные файлы (Web-страницу, изображения, внедренные объекты) и отправляет их Web-обозревателю. Web-браузер считывает язык разметки гипертекста, указанный в HTML-документе и выводит ее в виде, задуманном автором. Форматирование текста
Web-документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 “Information processing. Text and office systems. Standard Generalized Markup Language (SGML)”. Рассмотрим теги, которые используются при работе с текстом. Добавим лишь, что некоторые теги имеют свои атрибуты. Атрибуты отделяются от тега пробелом и требуют указания некоторого значения. Приведем справочные таблицы по использованию тегов, (табл.1 и табл.2), которые позволят управлять внешним видом выводимого текста web-страницы.
Таблица 1. Основные теги языка HTML
Таблица 2. Теги форматирования текста
Цвета и цветовые триады
В атрибутах BGCOLOR, COLOR, TEXT любой цвет устанавливается, как комбинация красного, зеленого и синего (red, green, blue - RGB). Однако указывается не процент того или иного цвета, содержащегося в комбинации, а некое число от 0 до 255, которое характеризует процентное соотношение данного цвета в комбинации. Все числа указываются не в десятичном, а в шестнадцатеричном виде. Шестнадцатеричное число, это число, составленное из десяти цифр (от 0 до 9) и шести первых литер латинского алфавита (A, B, C, D, E, F). Атрибут BGCOLOR устанавливает цвет фона документа, а атрибут TEXT – цвет текста. Например, установка белого цвета символов на синем фоне для всего HTML-документа будет реализована следующим образом: <body bgcolor="#0000ff" text="white" >
В любом месте документа цвет символов можно изменить с использованием тега <font>, например:
<font color="#ff0000">Красный шрифт</font> или по другому:
<font color="red">Красный шрифт</font>
Следующий пример отображает буквы слова «текст» разными цветами:
<FONT size=8 color="blue"> <B>т </b></font> <FONT size=7 color="orange"> е </font> <FONT size=6 color="green"> к </font> <FONT size=5 color="maroon"> с </font> <FONT size=6 color="fuchsia"> т </font>
Таким образом, кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий, фона и других элементов страницы. В таблице 3 представлены допустимые названия цветов.
Таблица 3. Названия и коды цветов
ГИПЕРССЫЛКИСоздание гипертекстовых ссылок
Гипертекстовые ссылки связывают разрозненные Web-страницы, выложенные на Web-серверах, в одну гигантскую сеть, «паутину WWW». Гиперссылка состоит из двух частей: псевдокнопки и адресной части (уже известный нам URL). Псевдокнопка – это просто какой-либо текст или графическое изображение, по которому пользователь должен щелкнуть мышью. Текстовая псевдокнопка обычно выделяется в браузере подчеркиванием, а указатель мыши, “проходя” над ней, меняется на изображение указательного пальца. Весь процесс “виртуального путешествия по сети Интернет” заключается именно в многочисленных “щелканьях” мышью по ссылкам. Для создания гипертекстовой ссылки используется тег <A> следующего формата:
<A href=”url”> Любой текст </A>
Если в качестве псевдокнопки необходимо использовать изображение, тогда тег, описывающий графический объект, следует обрамить тегом гиперссылки:
<A href=”index.htm”> <imf src=”home.gif” alt=”На главную страницу”> </A>
В этом примере приведена ссылка на главную страницу (index.htm) Web-сайта. Предполагается, что на диске имеется gif-файл с именем home.gif, в котором хранится некое изображение.
Виды гиперссылок
Гиперссылки можно разделить на абсолютные, относительные и внутренние. Они отличаются тем, как представлен адрес URL. Рассмотрим каждый тип подробнее.
Абсолютные ссылки Абсолютные ссылки используются в случае, когда необходимо перейти на документ, адрес которого неизменен. Это, прежде всего, ссылки на внешние Интернет-ресурсы, например,
<А href=”http://www.ya.ru”>Поисковая система Яндекс </A>
создаст ссылку на страницу поисковой системы. А вот использование абсолютной ссылки, представленной ниже абсолютно неприемлемо:
<A href="file:///E:/eMIR/L-MIR/Part-1.doc"> Глава 1</A>
Здесь ссылка ведет на внутренний ресурс, расположенный на диске E, в каталоге eMIR. Именно такие ссылки пытаются создать визуальные редакторы. И на вашем локальном компьютере все будет работать правильно, но когда вы перенесете ваш документ на удаленный сервер, там уже не окажется ни диска E: ни каталога eMIR и мы получим «мертвую ссылку».
Относительные ссылки Для внутренних ресурсов необходимо использовать относительные ссылки. В них дорога к искомому документу считается относительно от того места, где вы сейчас находитесь. Примеры использования относительных ссылок:
<a href=”../index.htm”> На главную</a> - для перехода на главную страницу
<a href=”.. /info/doc/lec1.doc”> Лекция 1 </a> - для перехода к первой лекции.
В любом случае, куда бы мы ни переместили каталог с сайтом, все эти ссылки будут работать.
Внутренние ссылки Внутренние ссылки используются для быстрого перемещения внутри документа. Это особенно актуально, если ваша страница длинная, состоит из нескольких разделов. Для таких перемещений вам, во-первых, нужно создать внутри html-документа «именованные якоря» - точки, куда нужно совершить прыжок. («Именованный якорь» - это дословный перевод «Named Anchor» – именно так называются эти точки в литературе.) Они помечаются следующим фрагментом кода: <a name="metka"></a>. В качестве метки рекомендуется использовать короткий набор латинских букв или цифр. Этот фрагмент нужно поместить перед тем абзацем, куда нужно совершить переход. Теперь, чтобы совершить переход в произвольном месте страницы, нам нужно добавить следующую ссылку:
<a href="#metka">ключевое слово или заголовок раздела </a>
Знак решетка, сообщит браузеру, что переход совершается внутри страницы.
Шаблон гиперссылки
· для перехода к метке внутри текущей страницы: <a href=”#Метка”> текст для щелчка</a>
· к определенной части любого Web-документа: <a href=”http://Адрес/имя файла.html#Метка”> текст для щелчка</a>
Часто в сети Интернет можно встретить ссылки на электронный адрес человека. Для таких целей используется несколько измененный вид тега <a>:
<a href="mailto:user@server.ru ">текст ссылки</a>
Параметр mailto: является обязательным, он указывает на e-mail адресата. Также при необходимости через знак & указывается тема отправляемого сообщения. При щелчке на такую ссылку у пользователя загружается установленная почтовая программа.
ГРАФИКА НА WEB-СТРАНИЦЕФорматы графических изображений
Графические изображения называются внедренными элементами, т. к., они не помещаются в самом HTML-коде страницы, а берутся Web-обозревателем из отдельных файлов и внедряются на страницу в соответствии со значениями параметров используемых тегов. Это проистекает оттого, что графика принципиально отличается от текста, кодируется и хранится иначе, чем текст. Поэтому совместить в одном файле HTML - текст и графику невозможно. Для размещения на странице графического объекта, необходимо его предварительно подготовить. Для этого создаётся изображение в форматах GIF, JPG, JPEG или PNG. У каждого из них есть свои особенности: GIF – это графический формат, поддерживающий до 256 цветов и сжатие по алгоритму LZW. Его рационально применять в простых графических изображениях и навигации. Закодировать же фотографию, имеющую много цветов и большие габариты, с приличным качеством под силу только профессионалам. Стандарт GIF89a вводит дополнительные усовершенствования: прозрачность, чересстрочечная (Interlaced) развёртка и анимация. JPEG/JPG – это другой формат, специально разработан для передачи фотографий через сеть. Он содержит 24-битовую цветовую палитру и высокую (регулируемую при создании) степень сжатия (алгоритм JPG). Файлы данного формата могут быть сохранены с опцией «прогрессивный»: это значит, что изображение выводится на экран не сразу, а фрагментарно (через строку), по мере загрузки. Применяется для кодирования изображений любой сложности. PNG –формат, позволяющий задавать параметры прозрачности (как в GIF) и производит сжатие без потери качества. Поддерживает 24-, 32-, 48- битовую цветную палитры, 8- и 16- битовую палитру серого и 8-битовую пользовательскую палитру. Так же присутствуют механизмы чересстрочечной развёртки и контроля целостности файла при передаче через сеть. Данный формат используется реже.
Атрибуты тега <img>
Встраивание любого из описанных типов изображений в уже созданную страницу осуществляется при помощи непарного тега <Img>. Он вставляется в том месте, где по смыслу должна располагаться иллюстрация. За настройку внедренного изображения отвечает ряд атрибутов, указанных в приведенной таблице:
Пример внедрения рисунка с именем foto_author.jpg. Фотография находится в подкаталоге images.
<img src="images/foto_author.jpg" border="0" width="300" heght="240" alt="Фото автора сайта">
Требования по применению графики
Несмотря на то, что в последнее время скорость каналов возросла, выделенные линии, DSL-модемы перестали быть экзотикой, осталась потребность в том, чтобы графика занимала как можно меньше места. Поэтому использование графики на странице должно соответствовать некоторым требованиям:
· не создавайте больших фоновых изображений – это значительно понизит скорость загрузки HTML-страницы. Графика для web-страниц должна быть оптимизирована, максимальное качество изображения должно сохраняться при минимальном размере файла. Оптимизировать изображение можно с помощью программы Adobe Photoshop. · используйте графику только там, где это действительно необходимо; · желательно, чтобы объём загружаемой страницы не превышал 80-100 Кб (сюда включен сам html-документ, все изображения и скрипты); запомните: чем больше объем Web-страницы, тем меньше пользователей дождутся загрузки вашего HTML-документа.
ТАБЛИЦЫ
Таблицы – очень важный элемент web-страниц, они выполняют две функции. Первая - оформление табличной информации: различные экономические и бухгалтерские отчеты, итоговые ведомости, результаты экспериментов, расписания и т.п. Второе применение - позиционирование элементов страницы.
Приведем пример шаблона для любой таблицы.
Таблица начинается и заканчивается парным тегом <table></table>. В нашем случае – это видимая таблица, толщина ее границы равна одному пикселю (параметр border=”1”). Каждая строка начинается и заканчивается парным тегом <tr></tr>. Каждая столбец начинается и заканчивается парным тегом <td></td>. При построении таблиц часто используют комбинацию Комбинация символов nbsp – происходит от Non Break Space (неразрывный пробел). Эта комбинация символов – пробел. Обычные пробелы в языке HTML игнорируются. Если не вставить в ячейку никакой текстовой информации, то данная ячейка будет выбиваться на странице, у нее не будет границы.
В ячейку таблицы, обрамленную парой <td></td>, можно помещать: любой текст, любые изображения, списки, гиперссылки и так далее. Используя атрибуты bgcolor=”#цвет” и background=”файл”, которые можно добавить к тегу <table> или <tr>, или даже <td>, можно получить довольно сложное мозаичное изображение.
Систематизировать имеющиеся средства языка HTML для построения таблиц поможет таблица 1.
Таблица 1. Теги для создания таблиц
ФОРМЫ HTML – это не язык программирования, но и он предоставляет возможность для организации полноценного диалога между пользователем и сервером, то есть позволяет организовать ввод некоторой информации и передачу ее на сервер для обработки. Эту функцию берут на себя так называемые формы. Форма начинается с тега <form>, а заканчивается - </form>. Этот тег имеет обязательные атрибуты: § action – указывает действие, которое будет произведено над введенными данными. § method – способ посылки данных серверу.
В атрибуте action чаще всего указывается URL размещенного на сервере т.н. сценария-обработчика получаемых данных (CGI). Такие сценарии обычно пишут на языках PHP, Perl, Java опытные программисты. Но с помощью атрибута action можно перенаправить введенные данные на собственный почтовый ящик. Оформить это можно следующим образом: action=”mailto:электронный адрес”
Атрибут method может принимать два значения: § method=”get” § method=”post” Предпочтительнее использовать второй вариант, т.к. в этом случае данные будут посланы в скрытом виде. Теги для описания элементов формы приведены в таблице 1
Таблица 1. Формы
Теперь рассмотрим пример формы (рис.1), которую можно использовать для сбора данных о посетителях сайта. После ввода данные посылаются на некий гипотетический адрес yyyy@mail.ru.
Листинг кода html-страницы с формой
 Рис. 1. Форма для сбора данных о посетителях сайта
МЕТАТЕГИМетатеги никак не влияют на внешний вид вашей страницы в браузере, но, тем не менее, они важны. Все эти теги располагаются в описательной части Интернет-страницы (внутри блока <head> … </head>). Рассмотрим их подробней.
Заголовок страницы
<title>Заголовок страницы</title> Все, что вы поместите между тегами <title> … </title>, окажется в заголовке окна браузера. Но данный заголовок задается не для человека, а, прежде всего, для поисковых роботов. Заходя на ваш сайт по этому заголовку, они будут индексировать, то есть запоминать в своих базах данных информацию, о чем данная страница. Поэтому давайте вашим страницам осмысленные названия.
Кодировка страницы
<МЕТА http-equiv="Content-Type" content="text/html"; charset="windows-1251"> Для кодирования символов русского языка существует несколько кодовых таблиц. Самые распространенные русские кодировки в сети Интернет – windows-1251 и koi-8, а еще есть Mac, ISO, DOS, Unicode. Проблема заключается в том, что посетители часто об этом не подозревают, и, открыв страницу с бессмысленным набором символов, они не выбирают команду меню Вид/Кодировка/название кодировки, а навсегда уходят от вас. Поместив в метатеги информацию о кодировке вашей страницы (параметр charset=” ”), вы поможете браузеру посетителя вашего сайта правильно отобразить станицу на экране.
Ключевые слова
<МЕТА name="Keywords" content="ключевые слова вашей страницы"> Значение параметра content=”” предназначено для поискового робота. Вы должны написать те ключевые слова, которые характеризуют содержимое вашей страницы. Количество слов неограниченно и поэтому на некоторых сайтах можно увидеть десятки строк таких слов. Предположим, ваш сайт посвящен компьютерным играм, в таком случае смело помещайте в кавычки название игры, а также все, что относится к данной игре. Каждое слово робот поместит в свою базу данных и когда человек наберет в Яндексе или любой другой поисковой системе название вашей игры, он получит ссылку на ваш сайт.
Описание содержимого страницы
<МЕТА name="Description" content="Краткое описание страницы"> Текст, который вы напишете в данном метатеге, первым прочтет поисковый робот. Но после, вместе со ссылкой на ваш сайт Яндекс (Rambler, Google и т.д.) будет отображать именно эти два–три предложения. От того, насколько толково будет написана главная мысль, будет зависеть, захочет ли человек щелкнуть на ссылку и заглянуть к вам. |