2015-09-06
1184Как известно, основной объем информации, доступной в сети Интернет, размещается во «всемирной паутине» - World Wide Web (WWW) - информационной системе, подобной гигантской библиотеке. В этой библиотеке информация представлена в виде связанных между собой документов, которые называются Web-страницами. Каждая Web-страница может содержать текст, рисунки, видео, звукозаписи и др. Такие страницы могут размещаться на компьютерах в любой части света.. Собрание страниц, объединенных некоторой общей темой и помещенных, как правило, на одном компьютере, называется Web-узлом или сайтом. Web-узлы подобны книгам, а Web-страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами. На одном сервере может размещаться множество Web-узлов или сайтов.
Чтобы опубликовать в Интернете документ, содержащий некоторую информацию, достаточно поместить файл с этим документом на сервер, постоянно подключенный к Интернету. Сервер должен «уметь» общаться с другими серверами с помощью специального протокола передачи гипертекста HTTP - HyperText Transfer Protocol. Множество таких серверов и образует «всемирную паутину» - World Wide Web.
|
|
|
Разработку Web-документов можно проводить на компьютере, не имеющем выхода в Интернет. Создать собственную Web-страницу совсем не сложно. Это можно сделать или «вручную» или с помощью специальной программы для создания Web-страниц.
Занятие №1. Моя первая Web-страница
Для создания Web-документов нам понадобится браузер - Internet Explorer, браузер Internet Explorer входит в состав операционной системы Windows. Однако необходимо помнить, что многие элементы HTML по-разному отображаются в существующих программах просмотра. Весьма желательно контролировать эту разницу, просматривая разрабатываемую Web-страницу с помощью браузеров Opera, Mozilla или Netscape. Последние бесплатные версии браузеров Opera, Mozilla и Netscape можно найти в Интернете на сайте www.opera.com, www.mozilla.org и www.netscape.com.
Кроме браузера нам нужен будет любой текстовой редактор, например, Блокнот (Notepad) из Windows. Программа Блокнот (Notepad) нужна для подготовки HTML-файлов, а браузер - для просмотра и контроля сделанного. С помощью этих инструментов мы создадим сайт на своем локальном компьютере.
В качестве примера подготовим Web-страницы нашей кафедры. Ее полное название «Кафедра информатики и вычислительной техники». Цель сайта – дать представление о деятельности кафедры, о ее учебно-методической и научной работе, ознакомить с преподавательским составом кафедры.
Для файлов нашего сайта нужна отдельная папка.
>• Создайте папку с именем Web на жестком диске вашего компьютера.
|
|
|
Теперь запустим программу Блокнот (Notepad) и приступим к работе.
> Откройте программу Блокнот (Notepad), нажав кнопку Пуск (Start) на Панели задач (Taskbar) и выбрав из появившегося меню команду Программы ♦ Стандартные ♦ Блокнот (Programs ♦ Accessories ♦ Notepad).
Вы можете использовать любой другой текстовый редактор. Однако в этом случае следует сохранять файл как простой текст, чтобы избежать включения в Web-документ посторонних символов форматирования.
Сначала введем в окне программы Блокнот (Notepad) теги, определяющие структуру любого HTML-документа. Напомним, что в HTML-коде допускается использовать любой регистр символов - верхний или нижний,
>• Введите с клавиатуры следующие основные теги, поместив каждый из них, кроме закрывающего тега </title>, в новой строке.
Для ввода парных тегов вы можете использовать операции копирования и вставки через буфер обмена Windows с последующим добавлением символа слэш /.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Напомним, что первый <html> и последний </html> теги означают соответственно начало и конец документа, элемент <head> … </head> определяет заголовок Web-страницы, элемент <body>... </body> - тело документа, а в элементе <title> </title> мы сейчас укажем название Web-страницы.
Между открывающим <title> и закрывающим </title> тегами вставьте название документа - Кафедра информатики и вычислительной техники. Этот элемент должен выглядеть следующим образом:
< title > Кафедра информатики и вычислительной техники </title>
Напомним, что название Web-страницы должно быть коротким и в максимальной степени отображать ее содержание.
Наша следующая задача - вставить в тело документа между тегами <body>... </body> короткий текст-приветствие посетителям Web-страницы.
>• Вставьте пустую строку между тегами <body> и </body> и введите в ней следующий текст:
Добро пожаловать на страничку кафедры информатики и вычислительной техники! Здесь Вы узнаете о деятельности кафедры, о ее учебно-методической и научной работе, ознакомить с преподавательским составом кафедры.
Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это выполняется с помощью атрибутов bgcolor и text открывающего тега <body>. Для определения цвета как значения атрибутов существует два варианта:
• словесное указание имени цвета, например, white (белый). В языке HTML предусмотрено шестнадцать таких имен;
• цифровое обозначение в шестнадцатеричной записи, например, "#ffffff" - белый, которое указывает, каким образом цвет формируется из основных цветов - красного, зеленого и синего.
Конечно, словесное указание цвета более удобно и понятно. С другой стороны, числовые обозначения дают больше возможностей, так как позволяют указать практически любой из 16 777 215 оттенков, тогда как словесные обозначения ограничены только шестнадцатью цветами.
Полный перечень цветовых имен и их цифровых эквивалентов приведен в справочной литературе. Здесь же перечислим только некоторые цветовые имена: black (черный), gray (серый), red (красный), green (зеленый), аquа (голубой).
Используем в качестве примера для фона нашей Web-страницы синий цвет (blue), а для текста - желтый (yellow).
> Вставьте в открывающий тег <body> атрибуты bgcolor=blue и text=yellow. Этот тег должен принять вид:
<body bgcolor=blue text=yellow>
Ваш текстовый файл должен выглядеть примерно так, как на Рис. 1.3.
Рис. 1.3. Код HTML первой Web страницы в окне программы Блокнот (Notepad)
Кроме указания цвета, для фона Web-страницы можно использовать также заранее подготовленный рисунок. Но об этом мы поговорим в дальнейшем.
Теперь документ следует сохранить.
> В окне программы Блокнот (Notepad) выберите команду меню Файл ♦ Сохранить
(File ♦ Save). На экране появится диалог Сохранение (Save As).
|
|
|
>• Откройте созданную ранее папку Web, в которой должны сохраняться все файлы сайта.
>• В поле ввода Имя файла (File name) введите ivt-1.html - так мы назовем этот файл.
Обратите внимание: вы обязательно должны указать расширение имени файла .html или .htm, чтобы браузер смог его открыть.
>• Нажмите кнопку Сохранить (Save). Диалог Сохранение (Save As) закроется. Файл будет сохранен в указанной папке, и его имя появится в заголовке окна программы Блокнот (Notepad).
Теперь можно просмотреть результаты нашей работы.
> Не закрывая, сверните окно программы Блокнот (Notepad), нажав кнопку [Г] в правом верхнем его углу.
> Откройте с помощью программы Проводник (Windows Explorer) папку Web, в которой вы сохранили файл ivt-1.html, и дважды щелкните мышью на его значке. Будет запущен браузер, установленный по умолчанию, и в его окне откроется документ ivt-1.html (Рис. 1.4).
Рис.1.4. Текст Web-страницы в окне браузера
Как видите, в заголовке окна браузера указывается название документа, которое мы ввели в элементе <title></title>, а цвет фона и текста страницы - такие, как указаны в теге <body>. Текст отображается в одном абзаце и выровнен влево.
Возможно, в вашем браузере размер шрифта текста будет крупнее или мельче, чем на рисунке. В таком случае выберите команду меню Вид ♦ Размер шрифта ♦ Средний (View ♦ Text Size ♦ Medium) в браузере Internet Explorer, чтобы установить средний размер шрифта..
Так как в элементе <body></body> мы ввели текст без разбивки на абзацы, то в браузере он отображается в виде одного абзаца и выровнен влево. Теперь следует придать тексту более наглядный вид.
Занятие №2. Задаем стили текста
Чтобы наша Web-страница выглядела более привлекательно, разделим текст на абзацы и выделим заголовок. HTML имеет шесть уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тегов с номерами, соответствующими уровню, например, <h1></hl> - заголовок раздела первого уровня, a <h6></h6> - заголовок раздела шестого уровня. От нормального текста заголовки отличаются размером и толщиной букв. Заголовок первого уровня h1 отображается обычно очень крупным шрифтом, в то время как заголовок шестого уровня h6 - очень мелким.
|
|
|
Не следует путать заголовки разделов документа с рассмотренным ранее заголовком документа, определяемым элементом <head></head>.
В качестве заголовка текста используем первое предложение - Добро пожаловать на Web-страничку кафедры информатики и вычислительной техники! Для этого достаточно ограничить его тегами <hl> и </h1>.
Окно программы Блокнот (Notepad) с открытым файлом ivt-1.html свернуто, и его кнопка находится на Панели задач (Taskbar).
> Нажмите кнопку Блокнот (Notepad) на Панели задач (Taskbar), чтобы восстановить окно текстового редактора.
> Вставьте в текст файла ivt-1.html теги <hl> и </ hl > так, чтобы они ограничивали первое предложение текста, и этот фрагмент кода принял следующий вид:
<hl> Добро пожаловать на страничку кафедры информатики и вычислительной техники!</hl>
> Сохраните файл, выбрав команду меню программы Блокнот (Notepad) Файл ♦ Сохранить (File ♦ Save).
Просмотрите полученный результат.
Воcстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).
> Нажмите клавишу - Обновить (Refresh) на панели инструментов
рабочего окна программы Internet Explorer. Файл ivt-1.html будет перезагружен, и вы увидите в окне браузера, как выглядит заголовок первого уровня (Рис. 1.5).
Рис.1.5. Заголовок первого уровня
> Просмотрите, как будут выглядеть заголовки остальных пяти уровней, изменяя в тегах номера: h2, h3 и т.д. После каждого изменения не забывайте сохранять файл и обновлять изображение в окне браузера.
> Когда вы закончите эксперименты, снова восстановите в файле ivt-1.html теги <hl></hl>.
Используя шесть уровней заголовков, которые предоставляет в ваше распоряжение язык HTML, можно создать легко читаемый документ с интуитивно ясной структурой. Помните, что ваш документ всегда будет читаться значительно лучше, если в нем будет четкое разделение на разделы и подразделы.
По умолчанию заголовок выравнивается по левому краю страницы. Но его можно также выровнять по правому краю или центрировать. Для правостороннего выравнивания в теге <hl> используется атрибут align=right, а для центрирования - align=center. Допускается также явное указание левостороннего выравнивания - align=left.
>• Добавьте в тег <hl> атрибут align=center, чтобы центрировать заголовок. Этот элемент должен принять следующий вид:
<hl> align=center> Добро пожаловать на страничку кафедры информатики и вычислительной техники!</hl> Результат будет выглядеть примерно так, как на Рис. 1.6.
Рис.1.6. Заголовок центрирован
Теперь займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания используются парные теги <b></b>. Курсивное начертание устанавливается с помощью тегов <i></i>.
> Вставьте в файле ivt-1.html теги <b></b> и <i></i> так, чтобы они ограничили текст Здесь Вы узнаете... Этот элемент должен принять следующий вид:
<b><i> Здесь Вы узнаете о деятельности кафедры, о ее учебно-методической и научной работе, ознакомить с преподавательским составом кафедры.</i></b>.
Просмотрите результат в браузере, результат будет выглядеть примерно так, как на Рис. 1.7.
Элементы разметки могут быть вложенными, как в данной структуре, где элемент <i>.. .</i> вложен в элемент <b>... </b>. Современные браузеры способны правильно обрабатывать вложенные теги. Поэтому вам необходимо следить за тем, чтобы не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. Например, такая запись будет неправильной: <b><i>... </b></i>. Соблюдение вложенности - очень важная часть общей культуры написания HTML-кода.
С помощью пары тегов <u></u> можно установить подчеркнутое начертание текстового фрагмента, ограниченного данными тегами, а с помощью пары тегов <tt></tt> -отобразить текст телетайпным шрифтом.
Увеличить размер шрифта текста можно разными способами.
Теги <big></big> увеличивают размер шрифта текста, заключенного между ними. С помощью тегов <small></small> вы можете уменьшить размер шрифта текста по сравнению с исходным.
Другой способ указания размера шрифта - с помощью тегов <font></font> с атрибутом size. В качестве значений этого атрибута используются целые числа от 1 до 7. Причем значение 1 соответствует минимальному размеру шрифта, а значение 7 -максимальному.
Рис.1.7. Курсивное полужирное начертание текста
> Используя теги <big></big>, а затем теги вида <font size=l></font>, просмотрите как изменяется размер шрифта текста при разных значениях атрибута size - от 1 до 7. В тегах <font></font> может использоваться также атрибут color для указания цвета шрифта, ограниченного тегами текста. Значения этого атрибута такие же, как и для рассмотренных ранее атрибутов, описывающих цвет фона и текста документа. Например, установите 5 в качестве значения атрибута size для рассматриваемого фрагмента текста: <font color=white size=5></font>. HTML-код этого фрагмента должен быть таким:
<center><font color=white size=5><b><i> Здесь Вы узнаете о деятельности кафедры, о ее учебно-методической и научной работе, ознакомить с преподавательским составом кафедры </i></b></font></center>.
Просмотрите результат в браузере, результат будет выглядеть примерно так, как на Рис. 1.8.
Рис.1.8. Размер и цвет шрифта изменен с помощью тегов <font> и <color>
Вы можете также выровнять абзац по правому краю страницы с помощью тегов <right></right> или по левому - с помощью тегов <left></left>.
Обратите внимание, что для центрирования абзаца мы использовали теги <сеnter></center>, в отличие от атрибута align=center, который использован нами в тегах <hl></hl>.
Язык HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста может быть полужирным или курсивным, т.е. явно указать начертание шрифта текста, как мы это делали в данном опыте. С другой стороны, можно пометить любой фрагмент текста, как имеющий некий, отличный от нормального, логический стиль, предоставив интерпретацию этого стиля браузеру. Таким образом, логический стиль указывает роль текстового фрагмента, например, большую значимость по сравнению с обычным текстом или то, что данный фрагмент является цитатой. В своей работе вы можете использовать следующие теги, определяющие логические стили. Проверьте, как они работают в разных браузерах.
<dfn></dfn> - применяется для определения слова. Текст обычно выводится курсивом.
<em></em> - для выделения слов и усиления. Отображается курсивом.
<cite></cite> - для выделения названий книг, фильмов, спектаклей и т.д. Выводится курсивом.
<code></code> - для фрагментов кода программ. Показывается на экране шрифтом фиксированной ширины.
<kbd></kbd> - используется для текста, который пользователь вводит с клавиатуры. В разных браузерах может отображаться разными шрифтами.
<samp></samp> - служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины.
<strong></strong> - для особо важных фрагментов. Обычно выделяется полужирным начертанием.
<var></var> - используется для указания, что часть текста или слово является символьной переменной, т.е. текстом, который может быть заменен различными выражениями. Отображается курсивом.
Спецификация HTML 4.0 предлагает более прогрессивный способ указания стилей текста, и других элементов - с помощью специального языка каскадных таблиц стилей CSS (Cascading Style Sheets). Таблицы стилей - это большое достижение в области Web-дизайна, расширяющее возможности улучшения внешнего вида страниц. Таблицы стилей упрощают определение интервалов между строками, отступов, цветов, используемых для текста и фона, размера и стиля шрифтов и т.д. Стиль большинства элементов HTML может описываться с помощью атрибута style, который располагается внутри открывающего тега элемента. В качестве значения атрибута style используются пары вида «свойство: значение». Например, во фрагменте кода, описывающего заголовок раздела, <hl style="color: blue"> атрибут style="color: blue" определяет, что свойство color (цвет) имеет значение blue (синий), т.е. текст заголовка первого уровня должен отображаться синим цветом.
Посмотрим, как с помощью языка каскадных таблиц стилей указать стиль текстового фрагмента.
Для указания толщины шрифта используется свойство font-weight со значениями lighter (тонкий), bold (полужирный), bolder (жирный), например, style="font-weight: old".
Для определения курсивного начертания применяется свойство font-style со значением italic. Поэтому, чтобы придать тексту полужирное курсивное начертание, следует атрибут style определить так: style="font-weight: bold; font-style: italic". Обратите внимание: свойства могут располагаться в любом порядке и обязательно должны разделяться точкой с запятой.
Если требуется указать размер шрифта, то следует воспользоваться свойством font-size, значения которого можно указать в относительных или абсолютных величинах. Относительные величины - это проценты, а в качестве абсолютных величин используются пункты (pt), пиксели (рх), сантиметры (cm), миллиметры (mm). Например:
style="font-size: 200%"
style="font-size: I6pt"
style="font-size: 100рх"
Указывая абсолютные, а не относительные размеры, вы лишаете пользователей, просматривающих ваши страницы, возможности увеличивать или уменьшать размер шрифтов с помощью команды меню браузера в соответствии с их зрением и разрешением монитора. Шрифты будут отображаться только такого размера, который вы указали. Поэтому желательно указывать размер шрифта в процентах. В этом случае размер шрифта будет меньше или больше на указанное количество процентов, чем при оформлении его с помощью HTML-тега по умолчанию.
Для определения способа выравнивания текста по горизонтали используется свойство text-align со значениями left (влево), right (вправо), center (по центру), justify (по ширине). Таким образом, чтобы указать, что текст Здесь Вы узнаете о деятельности... должен быть оформлен полужирным курсивным начертанием с размером 150% от исходного и выровнен по центру, следует его стиль определить следующим образом:
style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center"
Этот атрибут мы применим в тегах <p></p>, которые позволяют представить текст в виде отдельного абзаца.
> Отредактируйте элемент HTML, включающий текст Здесь Вы узнаете о деятельности..., удалив теги <center></center>, <font size=5></font>, <b></b>, <i></i> и вставив теги <p> и </p> с атрибутом style так, чтобы этот элемент принял следующий вид:
<p style="font-weight: lighter; font-style: italic; font-size: 150%; text-align: justify">Здесь Вы узнаете о деятельности кафедры, о ее учебно-методической и научной работе, ознакомитесь с преподавательским составом кафедры </p>
Код HTML в файле ivt-1.html должен иметь вид как на Рис. 1.9.
Рис.1.9. Код HTML после применения языка каскадных таблиц стилей
Как видите, язык HTML позволяет использовать разные способы стилевого оформления. Вместе с тем, применение языка каскадных таблиц стилей CSS является более предпочтительным.
Мы рассмотрели только один вариант использования языка таблиц стилей, когда определение стиля располагается непосредственно внутри тега элемента, который вы описываете.
Это делается с помощью атрибута style, используемого с большинством стандартных тегов HTML. Но есть и другие варианты использования CSS.
В стандартном HTML, без применения таблиц стилей, для присвоения какому-либо элементу определенных свойств, таких как цвет, размер, положение на странице и т. п., приходится каждый раз описывать эти свойства для каждого элемента, даже если на одной странице должны располагаться десятки таких элементов, не отличающихся один от другого. Приходится десятки раз вставлять один и тот же фрагмент HTML-кода в страницу,, увеличивая размер файла и время его загрузки из сети.
Таблицы стилей действуют другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Более того, вы можете сохранить описание стиля не в тексте вашей Web-страницы, а в отдельном файле - это позволит использовать описание стиля на любом количестве Web-страниц. И еще одно, связанное с этим преимущество - возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном отдельном файле.
Кроме того, язык таблиц стилей позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML.
В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Применяя «безопасные», т.е. совместимые с максимальным количеством браузеров элементы CSS - свойства шрифта, цвета элементов и фона, свойства текста и границ - вы можете значительно облегчить свою работу и сделать ваши Web-страницы более привлекательными в плане оформления текста.
Занятие №3. Вставляем рисунок
На каждую Web-страницу можно поместить любое количество рисунков. Вы можете использовать готовые графические изображения или создать их сами.
Графические изображения, которые вы вставляете в свои Web-документы, должны быть созданы в таком графическом формате, который поддерживается браузером. Стандартные форматы Web-графики - GIF, JPG и PNG. Размеры их файлов минимальны по сравнению с другими форматами, что значительно сокращает время загрузки из сети.
Вставим на первую страницу нашего сайта рисунок nout.jpg прежде всего, этот файл следует скопировать в папку Web, которую мы создали для хранения файлов сайта.
Для вставки изображения в Web-документ используется одиночный тег <img> с атрибутом src, значение которого соответствует имени вставляемого файла или его адресу в Интернете. С помощью необязательного атрибута <border> можно включить отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст рамку толщиной 1 пиксель. Таким образом, тег, вставляющий и центрирующий рисунок, должен выглядеть следующим образом:
<center><img src=nout.jpg border=2></center>
Вставим его перед заголовком Добро пожаловать на Web-страничку кафедры информатики и вычислительной техники!
> Вставьте пустую строку перед элементом <body bgcolor=blue text=yellow>, и введите в ней тег <center><img src=sis648-150.jpg border=2></center> для включения изображения в документ. Просмотрите результат в браузере, результат будет выглядеть примерно так, как на Рис. 1.10.
Рис.1.10. Рисунок вставлен и выровнен по центру
При подготовке Web-документов недопустимо использовать рисунки, фотографии и прочие изображения, взятые с других сайтов, так как это нарушает авторские права их создателей. Если рисунки вам все же необходимы, то следует получить разрешение автора на их использование.
Занятие №4. Создаем список
Для наглядного представления информации на Web-страницах часто используются списки. Списки могут быть нумерованными и ненумерованными. Создадим новую страницу нашего сайта, на которой вставим ненумерованный список.
> В окне программы Блокнот (Notepad) выберите команду меню Файл ♦ Создать (File ♦ New). Окно очистится. Будет создан новый файл.
> Создайте структуру Web-документа, напечатав основные теги:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
В качестве заголовка документа в теге <title></title> введите: ИСТОРИЯ КАФЕДРЫ ИВТ:
<title> ИСТОРИЯ КАФЕДРЫ ИВТ </ title >
> Заголовок Основные этапы становления и развития кафедры ИВТ для списка введите в теле документа между тегами <body> и </body>, использовав для его отображения теги <h2></h2> с атрибутом align=center, выравнивающим заголовок по центру страницы:
<h2 align=center>Основные этапы становления и развития кафедры ИВТ</h2>
► Самостоятельно подберите цвет фона страницы и цвет текста, указав соответствующие значения для атрибутов bgcolor и text в открывающемся теге <body>, например, так:
<body bgcolor=aqua text=navy>
Помните, однако, что цвет текста должен быть таким, чтобы текст хорошо читался на выбранном фоне. Если атрибуты цвета не указывать, то по умолчанию текст будет отображаться черным цветом на белом фоне.
Теперь вставим на страницу ненумерованный список основных этапов становления. Ненумерованные списки создаются с помощью пары тегов <ul></ul>, которые ограничивают список. Между ними располагается столько элементов, начинающихся с тега <li>, сколько элементов в списке.
Вставьте пустую строку под строкой с кодом:
<h2 align=center>Основные этапы становления и развития кафедры ИВТ</h2> и введите в теле документа следующий код:
<ul>
<li>1987 год - приказ ректора о создании кафедры ИВТ.
<li>1988 год - первые компьютерные классы "Электроника" и КУВТ "Yamaha"
<li>1989 год - создание лаборатории основ микропроцессорной и вычислительной техники
<li>1990 год - создание центра телекоммуникаций и новых информационных технологий
<li>1991 год - значительное оснащение компьютерных классов новой техникой
<li>1992 год - защиты кандидатских диссертаций наших преподавателей
Обратите внимание: тег <li> может использоваться как одиночный, т.е. без парного, закрывающего тега </li>.
Полный HTML-код документа должен иметь вид как на Рис. 1.11.
Рис.1.11. Полный HTML-код документа со списком
> Когда ввод кода будет закончен, сохраните документ в папке Web под именем histori.html.
> Воспользовавшись командой меню Файл ♦ Открыть (File ♦ Open) в браузере Internet Explorer, откройте файл histori.html из папки Web (Рис. 1.12).
Рис.1.12. Список в окне программы просмотра
Как видите, каждый элемент ненумерованного списка выделяется специальным маркером. В нумерованном списке каждый элемент будет, отмечаться его порядковым номером. Для создания нумерованных списков используются теги <ol></ol>, между которыми помещаются элементы <li>.
Занятие №5. Вставляем гипертекстовые ссылки
Мы уже упоминали в начале главы, что аббревиатура HTML означает «Язык разметки гипертекста». Что же такое гипертекст?
В отличие от простого текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Справочные системы многих программных продуктов построены именно по принципу гипертекста. При щелчке левой кнопкой мыши на некотором выделенном цветом и подчеркнутом фрагменте текущего документа - гипертекстовой ссылке происходит переход к заранее назначенному документу или фрагменту документа. На Web-страницах гипертекстовые ссылки широко используются для перехода к определенному фрагменту текущей страницы, к следующей или любой странице сайта или к документу другого сайта.
Для задания перехода по гиперссылке в языке HTML используются теги <а></а> с атрибутом href, значением которого является адрес перехода. В качестве адреса может использоваться имя файла другого документа или URL-адрес.
Каждый компьютер, подключенный к Интернету, имеет свой уникальный адрес. Этот адрес может быть представлен или в числовом виде, например, 204.146.46.133, или определенным сочетанием символов, например, www.microsoft.com. Поскольку каждый компьютер имеет свою уникальную структуру каталогов и файлов, то и каждая Web-страница также имеет уникальный адрес, называемый URL (Uniform Resource Locator - Унифицированный указатель ресурсов). Как видно из названия, URL может указывать не только на страницы Web, но также и на другие ресурсы Интернета, например, FTP (File Transfer Protocol - Протокол передачи файлов) - хранилища файлов. В самом общем виде URL включает в себя указатель на протокол, который применяется для доступа к ресурсу - http, ftp и др. - и символьный адрес компьютера в сочетании с именем конкретного файла в структуре каталогов этого компьютера. Например, URL-адрес http://www.chat.ru/user/faq.html состоит из указателя на протокол http, который применяется для доступа к Web, имени компьютера www.chat.ru и имени файла-документа faq.html, который находится в каталоге user.
Из сказанного следует, что каждой Web-странице соответствует свой HTML-файл. Однако вы можете заметить, что во многих URL-адресах отсутствует имя файла, например, http://www.microsoft.com. Тем не менее, в окне браузера все же появляется конкретная страница. Дело в том, что администраторы Web-серверов могут указать на своих узлах некоторые HTML-файлы, которые выводятся по умолчанию, если имя файла в URL явно не задано. Обычно эти файлы имеют имена index.html или index.htm.
Посмотрим, как создать переход по ссылке с конца текущего документа histori.html на первую страницу нашего сайта, т.е. к файлу ivt-1.html. Чтобы сообщить посетителю сайта о возможности вернуться к первой странице, необходимо предусмотреть между открывающим <а> и закрывающим </а> тегами соответствующий текст, например:
<а href="ivt-1.html">Ha первую страницу</а>
Обратите внимание, что адрес ссылки должен быть заключен в кавычки, так как некоторые браузеры могут не понять его без кавычек.
Чтобы ссылка На первую страницу была центрирована, следует ограничить элемент <а>... </а> тегами <center> и </center>.
> Вставьте в файле histori.html пустую строку перед закрывающим тегом </body> и введите в ней следующий код:
<center><a href="ivt-1.html">Ha первую страницу</а></center >
В окне браузера вы увидите результат примерно такой, как на Рис. 1.13. Ссылка На первую страницу будет подчеркнута и выделена другим цветом - таким, который предусмотрен в вашем браузере для не просмотренных ссылок.
Рис.1.13.
Установите указатель мыши в окне браузера на ссылке На первую страницу. Указатель мыши, который обычно имеет форму стрелки или текстового курсора, примет форму ладони-указателя.
>• Щелкните мышью на этом месте. В окне браузера появится первая Web-страница из файла ivt-1.html. Таким образом, мы осуществили переход по ссылке на другую страницу сайта.
Теперь создадим гиперссылку для перехода с первой страницы – ivt-1.html - на вторую - histori.html. Для ссылки логичней всего будет использовать текстовый фрагмент о этапах становления, так как список на второй странице раскрывает содержание именно этого фрагмента текста. Поэтому нам нужно в файле ivt-1.html поместить открывающий тег <а> с атрибутом href="histori.html" перед фрагментом текста о этапах становления, а закрывающий тег </а> - после него.
>■ Откройте в программе Блокнот (Notepad) файл ivt-1.html.
>• Отредактируйте этот файл, вставив тег <a href="histori.html"> перед текстом о этапах становления, а закрывающий тег </а> - после него. Код HTML в файле ivt-1.html должен принять вид, как на Рис. 1.14.
Рис.1.14. Код HTML файла ivt-1.html после вставки ссылки
Возможно, что когда вы просмотрите результат в браузере, вы обнаружите, что ссылка о этапах становления видна очень плохо или вообще не видна. Это связано с тем, что цвет, которым браузер отображает не просмотренные ссылки, совпадает с цветом фона вашего документа. В таком случае цвет ссылок можно изменить, воспользовавшись атрибутами link и vlink тега <body>. Атрибут link определяет цвет не просмотренной ссылки, a vlink - просмотренной. Еще один атрибут - alink определяет цвет ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка.
При необходимости установите для не просмотренной ссылки белый цвет (white), для просмотренной - светло-зеленый (lime), а для ссылки в момент щелчка мышью - красный (red).
Если вы устанавливаете какой-либо из атрибутов: bgcolor, text, link, vlink, alink -то устанавливайте их все. Иначе, например, установленный вами фоновый цвет может совпасть с цветом текста, установленным пользователем в браузере.
>При необходимости отредактируйте файл ivt-1.html, добавив в тег <body> атрибуты link=white, vlink=lime, alink=red так, чтобы этот тег имел следующий вид:
<body bgcolor=blue text=yellow link=white, vlink=lime, alink=red>
> Щелкните мышью на ссылке о этапах становления. В окно браузера будет загружен файл histori.html.
> Перейдите в конец этой страницы, чтобы отобразить на экране ссылку На первую страницу.
Если ссылка плохо видна, вы можете вставить для текущей страницы в теге <body> атрибуты link, vlink и alink с подходящими значениями цветов.
Щелкните мышью на ссылке На первую страницу. В окне браузера опять появится документ ivt-1.html.
Вставить переход в документе можно не только с текстовой ссылки, но также и с рисунка. Посмотрим, как вставить переход с рисунка на вторую страницу. Обратите внимание: пока переход не вставлен, указатель мыши при установке на рисунке имеет форму стрелки.
Для создания такой ссылки достаточно в файле ivt-1.html вставить открывающий тег <а hre£="histori.html"> перед тегом <img src=sis648-150 border=l> и закрывающий тег </а> после него.
Занятие №6. Создаем таблицу
До сих пор мы создавали документы, в которых текст располагался в одной колонке. На практике иногда бывает необходимо расположить текст в двух или трех колонках. Помочь в этом может таблица. Кроме того, таблица, состоящая из одной ячейки, может эффектно выделить фрагмент текста, на который вы хотите обратить внимание читателя. Очень удобно чередовать в ячейках таблицы рисунки и текст. Ну, и конечно же, таблица нужна для отображения информации в табличном виде. Часто таблица используется для представления меню.
Создадим в новом файле таблицу из одной колонки, в ячейках которой, как в меню, представим ссылки на имеющиеся и другие, еще не созданные страницы сайта. Ведь сайт может содержать десятки страниц. Поэтому очень важно иметь возможность быстро выбирать нужную страницу из меню. Это меню мы затем поместим у левого края экрана так, чтобы оно постоянно оставалось в поле зрения пользователя.
> Создайте новый текстовый файл, выбрав в меню программы Блокнот (Notepad) команду Файл ♦ Создать (File ♦ New).
> Введите основные теги, создающие структуру документа. В заголовке документа укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, чтобы ссылки были хорошо видны:
<html>
<head>
<title>Меню </title>
</head>
<body bgcolor=silver>
</body>
</html>
Каждая таблица начинается тегом <table> и заканчивается тегом </table>. Строки таблицы образуются парой тегов <tr></tr>, между которыми располагаются пары тегов <td></td>. Каждая пара этих тегов образует один столбец. Между открывающим <td> и закрывающим </td> тегами помещается текст или любое другое содержимое ячейки.
Учитывая сказанное, код HTML, описывающий нашу таблицу, состоящую из одного столбца и содержащую пункты меню с названиями страниц сайта, должен иметь следующий вид:
<table>
<tr><td>Главная страница</td></tr>
<tr><td>История</td></tr>
<tr><td>Учебная работа</td></tr>
<tr><td>Научная работа</td></tr>
<tr><td>Культура, спорт </td></tr>
<tr><td>Новости</td></tr>
<tr><td>Расписание</td></tr>
<tr><td>Форум</td></tr>
</table>
> Вставьте пустую строку между открывающим <body> и закрывающим </body> тегами и, начиная с нее, введите указанный код.
> Сохраните документ в папке Web под именем table.html, выбрав из меню программы Блокнот (Notepad) команду Файл ♦ Сохранить (File ♦ Save).
> Откройте в окне браузера файл table.html. Таблица будет иметь примерно такой вид, как на Рис. 1.15.
Рис. 1.15. Главное меню
Созданная нами таблица располагается у левого края экрана. Это положение можно изменить, использовав в открывающем теге <table> атрибут align=center для выравнивания таблицы по центру или атрибут align=right - для выравнивания по правому краю окна браузера. Пункты меню расположены один под другим, а края таблицы и ячеек не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Чтобы включить их отображение, следует использовать в теге <table> атрибут border, указав в качестве его значения толщину рамки в пикселях.
>■ Добавьте в тег <table> атрибут border=l, чтобы показать рамку и ячейки таблицы толщиной 1 пиксел:
<table border=l>
Теперь таблица отображается с рельефными границами (Рис. …….).
Размер таблицы обычно устанавливается браузером автоматически так, чтобы отображалось все ее содержимое. Однако вы можете установить фиксированную ширину таблицы в пикселах с помощью атрибута width.
► Установите для таблицы ширину 140 пикселов, добавив атрибут width=l40 в открывающий тег <table> так, чтобы он принял вид:
<table border=1 width=140>
В окне браузера ширина таблицы уменьшится так, что в большинстве ячеек текст будет отображаться в двух.строках (Рис. ……).
При использовании для формирования столбцов таблицы тегов <td></td> данные в ячейках представляются шрифтом нормального текста и по умолчанию выравниваются по левому краю ячеек. Если же требуется выделить данные в ячейках, например, заголовки столбцов или строк таблицы, то вместо гегов <td></td> удобно использовать теги <th></th>. Текст в элементах <th></th> обычно выделяется полужирным начертанием и выравнивается по центру ячеек.
Наше меню будет выглядеть лучше, если его пункты будут центрированы в ячейках и выделены полужирным шрифтом. Поэтому заменим в HTML-коде элементы <td></td> элементами <th></th>.
► Отредактируйте файл menu.html, заменив теги <td> и</td> соответственно тегами <th> и </th>. КодHTML должен принять вид, как на Рис. 1.16, а таблица -как на Рис. 1.15.
В тегах <td> и <th> вы можете использовать следующие атрибуты:
• align - для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;
• width - для указания ширины ячейки в пикселах;
• height - для определения высоты ячейки;
• valign - для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign=middle.
>• Проверьте, как работают эти атрибуты, после чего верните таблицу в прежнее состояние.
Рис. 1.16. HTML-код таблицы для главного меню.
Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вставив атрибут bgcolor соответственно в тег <th>, <tr> или <table>.
>• Поэкспериментируйте с цветами и подберите подходящие, с вашей точки зрения, для таблицы.
Нам осталось теперь создать ссылки из двух первых пунктов меню на соответствующие страницы нашего сайта. Так как остальные страницы еще не созданы, то ограничимся этими двумя ссылками. Как и прежде, воспользуемся тегами <а></а> с атрибутом href. В качестве значения этого атрибута для первого пункта меню - Главная страница - следует указать файл ivt-1.html, т.е. href="ivt-1.html", а для второго - История — файл histori.html, т.е. href="histori.html".
В следующем опыте мы разделим экран по вертикали на два окна так, чтобы у левого края экрана постоянно отображалась таблица с меню, а справа от нее - страницы нашего сайта, которые пользователь сможет выбирать из меню. Обычно при переходе по ссылке новый документ отображается в том же окне, что и исходный, в котором была ссылка. Чтобы отобразить его в другом окне, необходимо в открывающем теге <а> использовать атрибут target, параметром которого должно быть имя того окна, в которое будет загружен документ. В следующем опыте мы подробнее поговорим об этом и присвоим соответствующему окну имя "frame", а сейчас укажем это имя как значение атрибута target в ссылке: target="frame". Еще раз подчеркнем, что в этом опыте Web-страница будет загружаться в то же окно браузера, в котором находится ссылка, а атрибут target позволит загружать документ в другое окно, которое мы создадим в следующем опыте.
> Отредактируйте в файле menu.html строки кода, содержащие названия пунктов меню Главная страница и История, вставив вышеуказанные ссылки соответственно на файлы ivt-1.html и histori.html так, чтобы эти строки приняли следующий вид:
<tr><th><a href="ivt-1.html" target="frame">Главная страница</a></th></tr>
<tr><th><a href ="histori.html" target="fгате">История</а> </thx/tr>
Окончательный вид файла menu.html с HTML-кодом показан на Рис. 1….., а таблицы в браузере - на Рис. 1……. Теперь первые два пункта меню выделены цветом и подчеркнуты как ссылки. Проверим, как работают эти ссылки.
Щелкните мышью на первой ссылке - Главная страница. В зависимости от версии браузера, файл ivt-1.html будет загружен либо в новое отдельное, либо в то же самое окно браузера
> Если файл был загружен в то же самое окно браузера, то нажмите кнопку Назад (Back) на панели инструментов или просто закройте окно, если файл был загружен в новое окно. На экране снова отобразится файл table.html.
>• Щелкните мышью на второй ссылке - История В окне браузера появится файл histori.html.
Итак, на основе таблицы мы создали меню и убедились, что ссылки в нем работают.
Занятие №7. Создаем страницу с фреймами
Значительно улучшить внешний вид и функциональность сайта можно, используя фреймы. С помощью фреймов экран разделяется на несколько окон, в каждом из которых отображается содержимое отдельной страницы. Используя подобным образом технологию фреймов, можно одновременно загрузить в одно окно браузера несколько Web-страниц.
На Рис. 1….. приведен типичный пример применения фреймов. Окно браузера разбито по вертикали на два фрейма. В левом отображается диалог поисковой системы, а справа -наша первая Web-страница. Размер фрейма может изменяться пользователем прямо на экране с помощью мыши. Каждый фрейм имеет собственный адрес, что позволяет отображать его независимо от других фреймов, и собственное имя, позволяющее переходить к нему из других фреймов. Такие свойства фреймов позволяют размещать в одном фрейме информацию, которую автор считает необходимым постоянно показывать пользователю. Это может быть логотип фирмы, набор управляющих кнопок, меню и т.д. С помощью фреймов можно создавать также окна запросов, когда в одном фрейме находится собственно запрос, а в другом - его результаты.
Посмотрим, как с помощью фреймов поместить в окне браузера меню для перехода на другие страницы сайта и сами страницы.
Для описания фреймов используется специальный HTML-файл. В окне программы Блокнот (Notepad) создайте новый файл.
> Введите основные теги, кроме тегов <body></body>, которые в файле, описывающем фреймы, не используются. В тегах <title></title> заголовка укажите – РГУ КАФЕДРА ИВТ:
<html>
<head>
<title> РГУ КАФЕДРА ИВТ </title>
</head>
</html>
Вместо тегов <body></body> в файле, описывающем фреймы, используется пара тегов <frameset></frameset> с атрибутами rows или cols, определяющими, как делится экран - по горизонтали или по вертикали. В качестве значений этих атрибутов можно использовать числовое значение высоты или ширины фрейма в пикселях или в процентах от 1% до 100%. Например, если вы хотите разделить окно браузера по горизонтали на два равных по размеру фрейма, то код HTML должен быть таким:
<frameset rows="50%,50%">
Обратите внимание: значения атрибутов отделяются один от другого запятой.
Чтобы разделить окно браузера по вертикали на два фрейма шириной 200 и 600 пикселов, следует написать:
<frameset cols="200,600">
Однако фактическая ширина и высота окна фрейма зависит от текущего разрешения монитора. Поэтому, если у пользователя установлено разрешение, например, 1024x768 пикселов, т.е. ширина экрана - 1024 пикселя, то часть экрана может остаться незаполненной. Поэтому рекомендуется задавать размеры фреймов в процентах так, чтобы их сумма была равна 100%. Если все же необходимо для одного из окон указать фиксированный размер в пикселях, то размер другого окна можно не указывать, заменив его значение символом *. В этом случае браузер сам подберет нужный размер для второго окна.
Создадим для отображения нашего сайта два вертикальных фрейма. Для первого фрейма, в котором будет выводиться меню, установим фиксированную ширину - 160 пикселов, а размер второго предоставим определить браузеру, заменив его звездочкой *.
В окне программы Блокнот (Notepad) вставьте пустую строку после закрывающего тега </head> и введите следующий код:
<frameset cols="180,*">
</frameset>
Таким образом, мы указали, что окно браузера должно быть разделено по вертикали на два фрейма. Для описания каждого фрейма в отдельности используются одиночные теги <frame>, которые должны находиться внутри элемента <frameset>...</frameset>. Обязательным атрибутом тега <frame> является src, значение его - адрес документа, который должен находиться в данном фрейме. Так как в первом фрейме будет находиться файл table.html, то данный тег следует записать так:
<frame src= "table.html">
> Вставьте в окне программы Блокнот (Notepad) пустую строку после открывающего тега <frameset> и введите указанный тег.
Во второй фрейм должен загружаться файл ivt-1.html, поэтому второй тег <frame> будет таким:
<frame src="ivt-1.html">
Чтобы во второй фрейм могли загружаться также и все остальные страницы сайта - histori.html и другие, которые, возможно, будут созданы, - необходимо с помощью атрибута name присвоить данному фрейму имя, которое, будучи указано в ссылках любого документа в качестве значения атрибута target, определит, в какой именно фрейм следует загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый документ открывается в том же окне. Именно для того, чтобы при переходе по ссылкам нашего меню страницы открывались не в первом фрейме, в котором расположено меню, а во втором, мы использовали в предыдущем опыте в ссылках меню атрибут target со значением "frame": target="frame", где "frame" - это имя второго фрейма. И теперь имя "frame" следует присвоить второму фрейму, в котором должен открываться файл ivt-1.html. Поэтому второй тег <frame> в окончательном виде должен быть записан так:
<frame src="ivt-1.html" name="frame">
>• Введите этот код, вставив пустую строку перед закрывающим тегом </frameset>.
>- Сохраните файл в папке Web под именем index.html.
Окончательный код файла index.html в окне программы Блокнот (Notepad) должен быть таким, как на Рис. …...
Имя index.html должно обязательно присваиваться файлу с главной страницей каждого сайта. Именно этот файл открывается по умолчанию при обращении к Web-узлу, если не указано другое имя файла.
Теперь можно просмотреть, как выглядят созданные фреймы.
► Откройте в браузере файл index.html из папки Web. Вы увидите, что окно программы просмотра разделено по вертикали на два фрейма. В левом фрейме отображается меню (файл table.html), а в правом - файл ivt-1.html (Рис. ……).
Проверим, как работают ссылки меню.
>• Щелкните мышью на ссылке меню История В правом фрейме будет открыт файл histori.html.
> Щелкните мышью на ссылке меню Главная страница. В правом фрейме снова появится файл ivt-1.html.
Обратите внимание, что каждый фрейм имеет свои полосы прокрутки. При необходимости их отображение можно отменить. Для этого достаточно в теге <f rame> указать атрибут scrolling=no.
> Добавьте в тег, описывающий первый фрейм, атрибут scrolling=no: <frame src="table.html" scrolling=no>
В окне браузера Web-страница примет вид примерно как на Рис. 1.
Как видите, фреймы - удобное и эффективное средство для размещения информации на Web-страницах. Однако, используя его, не следует терять чувства меры. Слишком большое количество окон на экране не улучшает восприятие информации. Не располагайте на экране более трех фреймов и старайтесь не применять их без необходимости.
Итак, первый этап нашей работы закончен - мы создали сайт из двух Web-страниц.
