- ВЕСНА
- Упражнение 3. Рисунки
- Упражнение 4. Гиперссылки.
- Упражнение 5. Оформление электронной книги
- Упражнение 6. Фреймы
- Пример 6.1
- Пример 6.2
- Текст главного HTML-документа для примера 6.2
- Текст HTML-документа frameMenu.html
- ТЕМА 7.3. ТЕХНОЛОГИЯ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ
- Оглавление
- 7.3.1. Принципы гипертекстовой разметки
- 7.3.2. Структура документа
- Заголовок первого уровня
- Заголовок документа
- Основная часть документа
- Оформление документа
- 7.3.3. Форматирование текста
- текст
- 7.3.4. Вставка изображений
- 7.3.5. Таблицы
- 7.3.6. Гиперссылки
- 7.3.7. Навигационные карты
- 7.3.8. HTML формы
- 7.3.9. Среда приложения для создания гипертестовых страниц Micromedia Dreamweaver
- Вопросы для закрепления материала
- Версия для печати
- Хрестоматия
- Практикумы
ВЕСНА
| Месяц | Средние показатели | |
|---|---|---|
| Температура | Атмосферное давление | |
| Март | -3 | 754 |
| Апрель | +1 | 758 |
| Май | +10 | 763 |
Заголовок «ВЕСНА» набран крупными буквами, расположен посередине строки и имеет специфический цвет (темно-красный?) . Для вывода заголовков используются теги
. Чем больше цифра, тем мельче шрифт. Для размещения заголовка посередине строки используется атрибут align со значением «center».
Для задания цвета используется тег с атрибутом «color». Строка, задающая заголовок, размещается сразу после открывающего тега и выглядит так:
Введите эту строку.
Примечание. Параметры шрифта можно задавать с помошью каскадных таблиц стилей (см. Упражнение 7. Каскадные таблицы стилей).
Требует пояснение способ задания цвета. В HTML цвет задаётся тремя способами. Наиболее распространённые цвета указываются по имени, например,
Чтобы передать один из 16777217 возможных оттенков цветов, используется шестнадцатеричный код. Например, код самого яркого оттенка жёлтого цвета — #FFFF00. Примеры задания различных оттенков приведены в приложении.
Удобно задавать цвет с помощью функции rgb(красный, зелёный, синий), где красный, зелёный, синий — оттенки красного, зелёного или синого цветов, задаваемые десятичным числом в диапазоне от 0 до 255. Например, жлтый задаётся так:
Описание таблицы начинается тегом
Атрибуты border и cellspacing задают толщину и форму рамки. После окончания формирования данного документа поэкспериментируйте со значениями этих атрибутов. Атрибут bgcolor задаёт цвет фона таблицы.
В HTML-файле таблица описывается последовательно строка за строкой, а внутри строки – клетка за клеткой. Строка начинается тегом
Для объединения клеток по вертикали, т.е. клеток соседних строк, используется атрибут тегов
Для объединения клеток одной строки используется атрибут тегов
Пользуясь полученными сведениями, закончите создание таблицы «Погода». Сохраните получившийся документ в вашем каталоге под именем Упр2.htm и откройте любым браузером. Проверьте правильность отображения таблицы.
Упражнение 3. Рисунки
Откройте в редакторе «Блокнот» файл Упр1.htm, созданный в упражнении 1, и вставьте в этот документ заголовок и два рисунка так, чтобы документ приобрёл вид
Заголовок «Из Евгения Онегина» вставьте так же, как и заголовок «ВЕСНА» в упражнении 2.
Для добавления рисунков нужно создать таблицу из одной строки и трёх столбцов. Чтобы рамки были невидимыми, задайте параметры таблицы
Во вторую клетку таблицы поместите текст отрывка. В первую и третью клетки нужно поместить ссылки на рисунки. Оба рисунка находятся в том же каталоге, что и файл, который вы сейчас читаете. Чтобы проще были ссылки на рисунки в HTML-документе скопируйте файлы Pushkin.jpg и Balet.jpg в свой каталог (туда где находятся файлы Упр1.htm и Упр3.htm).
В первую клетку поместите ссыку:
Атрибут hspace задаёт отступ рисунка от края клетки.
В третью клетку поместите ссылку на Balet.jpg.
Сохраните получившийся документ в вашем каталоге под именем Упр3.htm и откройте любым браузером . Проверьте правильность отображения таблицы.
Упражнение 4. Гиперссылки.
В этом упражнении нужно создать HTML-документ, содержащий ссылки на документы, созданные в предыдущих упражнениях. Документ должен иметь примерно такой вид:
В трёх первых упражнениях были рассмотрены структура HTML-документа, способы создания таблиц и вставки в документ таблиц. Были созданы следующие документы:
- Простейший документ
- Таблица
- Картинки
При щелчке левой кнопкой мышки по выделенному синим цветом названию документа этот документ появится в окне браузера. Гиперссыка на «Простейший документ» в HTML-документе описана так:
Здесь используется пара тегов . Атрибут HREF= «имя файла» служит для задания имени открываемого файла. Между тегами помещается текст или ссылка на рисунок, при щелчке по которому происходит переход к указанному файлу.
Все три ссылки объединены в ненумерованный список. Весь ненумерованный список ограничивается тегами
- Разделы 1-6 в файле FORTRAN1.txt
- Разделы 7-9 в файле FORTRAN2.txt
- вставка обязательных тегов («скелета»),
- разметка заголовков и текстов разделов и подразделов,
- создание ссылок,
- придание документу окончательного вида.
- Вставить открывающий и закрывающий документ теги и .
- После тега вставить теги заголовка и открывающий тег тела:
. - В конце документа перед тегом вставить тег .
- ознакомиться с основами языка разметки гипертекста HTML;
- ознакомиться с принципами создания гипертекстовых страниц с помощью текстового редактора и с помощью редактора гипертекстовых страниц Dreamweaver;
- научиться создавать сайт, состоящий из нескольких страниц.
- текст, который отображается в окне браузера в соответствии с форматированием, заданным в кодах HTML;
- коды разметки, определяющие форматирование элементов документа;
- коды разметки, обеспечивающие вставку различных элементов в документ;
- коды, определяющие структуру связей с другими информационными ресурсами (гипертекстовые ссылки). Эти связи могут объединять документы с самыми разными информационными ресурсами, в том числе содержащими звуки, видео. Поэтому гипертекстовые документы называются еще и гипермедиальными.
- WIDTH — ширину таблицы;
- ALIGN — расположение таблицы относительно других объектов страницы;
- BORDER — ширину границы;
- BGCOLOR — цвет таблицы.
- тэги формирования структуры документа;
- тэги оформления страниц (вид текста, списки, изображения, списки, таблицы, картинки);
- тэги гипертекстовых ссылок и закладок;
- тэги интерактивных форм;
- тэги внедренных объектов, например, вызова программ.
- TITLE (заглавие документа или его тема);
- META (метаинформация);
- STYLE (описатели стилей);
- SCRIPT (скрипты).
- Контейнер SCRIPT содержит код JavaScript, VBScript или JScript.
- Он не обязательно должен находиться в заголовке, а может быть также и в теле документа.
- Если открыт тэг начала, то должен быть тэг конца контейнера.
- В общем виде запись контейнера выглядит следующим образом:
- WIDTH – ширина изображения, значение которой задается в пикселях или в процентах от экрана. Важно предусмотреть, чтобы изображение не было слишком большим, если будет открываться на маленьком экране;
- HEIGHT – высота изображения, значение которой задается в пикселях или процентах;
- ALIGN – выравнивание, расположение относительно текста. Задаются такие значения атрибута как: слева, справа, по центру;
- BORDER – ширина рамки. Значение задается в пикселях. Если рисунок является ссылкой и цвет его рамки не соответствует стилю остальных элементов страницы, можно задать рамку равной нулю;
- ALT – альтернативный текст, представляющий собой фразу, комментирующую изображение;
- HSPACE – расстояние между изображением и текстом по горизонтали в пикселях;
- VSPACE – расстояние между изображением и текстом по вертикали в пикселях.
Чтобы вставить изображение таким образом, как на рис.2
Указанное изображение находится в одной папке со страницей. Его имя — paris_photo.jpg. Ширина изображения меняется в зависимости от размеров экрана и составляет 70% от его ширины (рис.2). Изображение имеет альтернативный текст. Рамка изображения отсутствует.
Рис. 2. Фрагмент гипертекстовой страницы с изображением
7.3.5. Таблицы
Широко применимым является тэг
, с помощью которого можно задавать расположение элементов на странице, создавать панель навигации, представлять табличную информацию.
Таблица задается тэгом-контейнером:
Таблица состоит из строк и столбцов (ячеек), которые указываются следующими тэгами:
— столбец (ячейка) таблицы.
Для лучшего результата таблицу предварительно стоит нарисовать на бумаге. В ячейках таблицы могут находиться изображения, текст, гиперссылки, а также другие таблицы. Следующий HTML-код задает таблицу. Браузер преобразует код в таблицу, представленную на рис. 3.
Рис. 3. Представление изображений в таблице
Некоторые атрибуты таблицы, рядов и ее ячеек:
- WIDTH – ширина;
- HEIGHT — высота;
- ALIGN – выравнивание;
- VALIGH – расположение текста в ячейке по вертикали, возможные значения: top, bottom;
- ROWSPAN — объединение рядов, указывается числом (количество);
- COLSPAN – объединение столбцов (ячеек);
- BGCOLOR – цвет ячейки, ряда, таблицы;
- CELLSPACING – расстояние между ячейками;
- CELLPADDING – расстояние между содержимым и границами ячейки.
Атрибут CELLSPACING задает пространство между ячейками в пикселях.
Если нужно избавиться от пространства между ячейками значение атрибута CELLSPACING приравнивается нулю:
Атрибут CELLPADDING задает пространство между содержимым ячейки и ее границами, и также может быть использован для его уменьшения.7.3.6. Гиперссылки
Сайт представляет собой набор связанных гипертекстовых документов. Самая главная страница сайта, которая загружается первой, имеет, как правило, имя index.html или main.html. Она содержит ссылки на другие страницы. Они могут быть оформлены в виде панели навигации. Имена страниц сайта могут иметь любые имена, но нужно помнить, что система различает строчные и заглавные буквы. Например, photos.html и Photos.html – это разные файлы. Страницы сайта могут находиться в одном каталоге (папке) или — в разных, или — на удаленном компьютере.
Чтобы документы связать, необходимо определить, какие элементы страницы будут использованы в качестве гиперссылок и какие страницы будут загружаться при активизации этих ссылок.
Гипертекстовая ссылка — это адрес другого документа или информационного ресурса Internet, который связан с документом посредством ссылки. Щелчок по ней позволяет загрузить этот документ в окно браузера или скопировать на локальный компьютер, или открыть окно приложения для создания сообщения электронной почты.
Гиперссылка активизируется благодаря атрибуту HREF ( hypertext reference – гипертекстовая ссылка), задающему адрес документа.
Например, имеется документ с фотографиями, имя которого paris.html. Он находится в одной папке с главным документом index.html.
Для создания гиперссылки нужно выбрать фразу или слово, например «Поездка в Париж», поместить их в тэг-контейнер , называемый якорем. HTML-код этой ссылки выглядит так:
Тэг делает ссылкой не только текст, но и изображения, и адреса электронной почты. Адрес документа задается по тем же принципам, что и для изображений:
- Поездка в Париж — файл находится в одной папке с текущей страницей;
- Впечатления — файл находится в папке pages;
- Фотоальбом — файл находится на удаленном компьютере.
Ссылкой может быть текст (фраза или слово), изображение, анимация, адрес электронной почты.
Адрес ссылки (URL) может быть указанием на:
Ссылка может быть не только текстом, но и изображением.
IMG — это тэг вставки изображения;
SRC — атрибут указания файла с изображением. Само изображение — гиперссылка.
Гиперссылка может вызывать загрузку не только гипертекстовых документов, но и других файлов (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:)
Закладки
Иногда важно сделать ссылку не на другую страницу, а на определенный текст текущей страницы. Место, к которому нужно перейти называют закладкой. Ему задают имя:
Гиперссылки на нужные закладки оформляются следующим образом:
7.3.7. Навигационные карты
Навигационная карта — это изображение, на котором определены геометрические области, являющиеся гиперссылками. Это дает возможность переходить с одного изображения к разным страницам, в зависимости от выбранной области.
Навигационная карта задается тэгом-контейнером MAP, описывающим ее. Геометрические области изображения определяются тэгом AREA.
Форма области задается атрибутом SHAPE:
- Прямоугольник — SHAPE=»rect»;
- Круг — SHAPE=»circle»;
- Многоугольник — SHAPE=»poly».
и соответствующими координатами. Их определяет атрибут COORDS. Число координат и порядок их значений зависят от выбранной формы (рис.4).
Рис. 4. Координаты геометрических областей навигационной карты
Левый верхний угол изображения (рис.4) имеет координаты (0;0). При задании координат прямоугольной области задаются координаты верхнего левого и нижнего правого углов области. Порядок записи координат для параметра coords следующий:
Предположим, что на рис. 4 x1=25, y1=36; x2=114, y2=98.
Пример кода навигационной карты, на которой задана эта прямоугольная область:
К описанию областей нужно добавить гиперссылки:
Это только описание карты. Кроме описания необходимо вставить в документ изображение с картинкой, выполняющей роль карты. Поскольку в документ может быть включено множество изображений, нужно определить имя того самого изображения, для которого сделано описание карты. Для этого используется атрибут NAME, задающий имя карты, например, тэг:
Для того, чтобы связать карту с изображением, необходимо в тэге вставки изображения использовать атрибут usemap=»#имя_карты» для картинки:
Для создания круглой области задаются координаты ее центра (x и y) и длина радиуса (R) в пикселях:
Допустим, координаты круга будут такие: x=46, y=48; а длина радиуса — R=35. Тогда:
Описание карты может находиться в любом месте страницы. При вставке рисунка, это описание определяется по имени карты, указанному в тэге вставки рисунка.
Для задания многоугольной области используются координаты углов и атрибут POLY.
Координаты задаются подряд через запятые:
В карте также можно одновременно использовать разные области, например круг и многоугольник.
7.3.8. HTML формы
Формы задаются для того, чтобы пользователь мог выполнять какие-либо действия на сайте.
Обмен информацией с пользователем возможен с помощью таких экранных элементов как поля ввода текста, кнопки альтернативного выбора, флажки, выпадающие меню, прокручиваемые списки, кнопки. Для отправки информации, введенной пользователем существуют кнопки submit.
Для управления этими элементами динамических web-страниц, необходимо обрабатывать информацию пользователя или с помощью Java скриптов, или Visual Basic скриптов в браузере пользователя, или с помощью компонента программного обеспечения Web-сервера CGI (Common Gateway Interface).
Форма создается тэгом-контейнером .
Атрибут METHOD указывает один из двух возможных методов отправки данных, введенных в форму:
GET — информация из формы добавляется в конец URL, указанного в описании тэга ;
POST — информация из формы пересылается по указанному адресу.
Атрибут ACTION указывает URL, вызываемый для обработки формы. Как правило, это адрес CGI-программы, обрабатывающей форму.
Тэги формы
TEXTAREA – этот тэг позволяет пользователю вводить более одной строки информации в текстовое поле. Пример:
Платонов, Юрий Петрович,
Санкт-ПетербургГде: NAME — имя поля ввода; ROWS — высота поля ввода в символах; COLS — ширина поля ввода в символах.
INPUT — тэг используется для ввода одной строки текста или одного слова. Атрибуты тэга:
- CHECKED — подтверждение , что CHECKBOX (флажок) или RADIOBUTTON (кнопка альтернативного выбора) будут выбраны;
- MAXLENGTH — количество символов, которое пользователи могут ввести в поле ввода;
- NAME — имя поля ввода, идентификатор позволяющий получить данные, помещенные пользователем в это поле;
- SIZE — размер поля в символах;
- SRC — URL, указывающий на изображение;
- TYPE — тип поля ввода. По умолчанию это простое поле ввода для одной строки текста.
Другие типы элементов формы:
- CHECKBOX — флажок, задает одно из значений ON или OFF (логические).
- HIDDEN – поле, не отображаемое браузером, не позволяет делать изменения, передает длину логина или пароля.
- PASSWORD – текстовое поле, не отображаемое браузером на экране.
- RADIO — поле выбора одной из альтернативных возможностей. Альтернатива обеспечивается созданием нескольких полей ввода с атрибутом TYPE=»RADIO» с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.
- RESET — кнопка, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
- SUBMIT — кнопка, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.
- TEXT — текстовое поле одной строки. Атрибуты MAXLENGTH и SIZE определяют максимальную длину вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов). VALUE – атрибут, присваивающий полю значение по умолчанию или значение, которое будет выбрано при использовании элементов разного типа.
- LISTBOX — меню выбора.
Формы можно использовать для отправки не только небольших информационных сообщений в виде параметров, а также и для отправки файлов.
Рис. 5. Форма для отправления файла
HTML-код формы выглядит следующим образом:
Отправить данный файл :
7.3.9. Среда приложения для создания гипертестовых страниц Micromedia Dreamweaver
В окне редактора (рис. 6) строка заголовка отображает название страницы и имя файла.
Рис. 6. Окно приложения Micromedia Dreamveawer
Под окном заголовка — строка меню.
Слева — панель объектов, при помощи которой можно создавать различные объекты: таблицы, слои, вставлять картинки и многое другое.
Справа можно открывать дополнительные окна, например (рис.6), «HTML style», «Behaviors «, «CSS styles» и т.д.
Рис. 7. Окно параметров
Перед работой в приложении необходимо сделать начальные установки. Команда Preferences/General открывает окно, в котором можно задать необходимые параметры. Например, чтобы отображался и русский и английский текст нужно выбрать категорию Fonts/Encoding и правильно настроить Default Encoding, выбрав из набора шрифт, содержащий кириллицу. Здесь же можно задать другие параметры шрифта.
Рис. 8. Панель объектов.
В рабочем поле окна приложения можно создавать документ, вводя текст, в нужных местах можно вставлять объекты, используя меню INSERT и панель объектов (рис. 8).
Для изменения свойств объектов вызывается специальная панель properties (свойства), в полях которой задаются конкретные параметры объекта (рис.9).
Рис. 9. Панель свойств таблицы.
В приложении можно вызывать окно, отображающее HTML-код создаваемой страницы и окно просмотра страницы в браузере.
При создании сайта рекомендуется продумать его структуру. Затем создать папку, в которой будут располагаться все файлы сайта. В ней можно создать отдельные папки для используемых файлов с изображениями, например, IMAGES.
Команда Site>Define sites откроет окно настройки параметров сайта. Категория Local info позволяет задать имя сайта (рис.10), местный адрес папки с сайтом, а также HTTP Address – адрес сайта в Интернет.
Рис. 10. Окно настройки параметров сайта. Категория Local Info
Категория Remote Info позволяет задать адрес FTP сервера, в графе HOST Directory нужно указать папку на удаленном компьютере (рис.11), в которую Dreamweaver будет перемещать файлы созданного сайта.
Рис. 11. Настройки сайта Remote Info
В поле Login ввести логин пользователя на удаленном компьютере. В поле Password — пароль.
Вопросы для закрепления материала
- Что представляет собой файл с гипертекстом?
- Что такое тэг? Автономный тэг? Тэг-контейнер?
- В каком приложении можно создать гипертекстовую страницу?
- Какие расширения имеют файлы с гипертекстом?
- Какова структура гипертекстовой страницы?
- Что такое Фрейм (кадр)?
- Для чего используются тэги , ?
- Как задается цвет элементов гипертекстовой страницы?
- Каким образом форматируется текст гипертекстовой страницы?
- Как создать гиперссылку?
- Какие атрибуты могут менять изображения гипертекстовых страниц?
- Для чего используются таблицы?
- Что такое карта?
- Каковы принципы создания гипертекстовых страниц в приложении Micromedia Dreamweaver ?
Версия для печати
Хрестоматия
Практикумы
Название практикума Аннотация В рамках данной работы Вы должны будете освоить технологию:
Источник
от всего
бассейна
Бассейн реки Волхов
Упражнение 5. Оформление электронной книги
С книгой, хранящейся в электронном виде, удобно работать (особенно, если это учебник или техническая документация) , если эта книга снабжена гиперссылками, позволяющими мгновенно переходить от одного раздела книги к другому. Небольшая книга может храниться в одном файле. Для того чтобы загрузка файла длилась не слишком долго, большую книгу делят на несколько файлов.
В этом упражнении предстоит разметить первую часть описания языка ФОРТРАН, состоящую из девяти небольших разделов. Разделы 2 и 3 делятся на подразделы. Документ хранится в двух файлах:
Откройте, щёлкнув по ссылке, и скопируйте оба файла в свой каталог. Переименуйте их в FORTRAN1.htm и FORTRAN2.htm.
Разделим процесс разметки на 4 этапа:
Первый и второй этапы одинаковы для обоих файлов
Первый этап. Порядок разметки на первом этапе:
Второй этап. Заголовки данного документа делятся на 3 уровня. Название документа – заголовок первого уровня. Все названия разделов и заголовок «Содержание» отнесём ко второму уровню, а названия подразделов – к третьему. Вставьте перед началом заголовка i-го ( i =1,2,3) уровня тег , а после конца — . Заголовки первого и второго уровня разместите по центру строки. Разметка названия документа выглядит так:
Перед началом текста каждого раздела и подраздела вставьте тег .
Сохраните размеченные файлы и просмотрите их любым браузеромом. Если заголовки слишком крупные, поменяйте цифру в теге заголовка на большую, например
Третий этап. Сначала нужно расставить метки в тех местах документа, в которые нужно переходить по гиперссылкам. Эти места – заголовки разделов и подразделов. Примеры вставки меток в заголовки (выделено жирным курсивом) :
Для удобства имена меток составлены из буквы m и номера раздела или подраздела (без точки).
После расстановки меток в обоих файлах нужно все пункты оглавления (содержания) превратить в гиперссылки. Нам понадобятся гиперссылки на метки, расположенные в том же фале, что и сама гиперссылка, и гиперссылки на метки в другом файле. Примеры гиперссылок (выделено жирным курсивом) :
а) в том же файле
б) в другом файле
После создания гиперссылок документом удобно пользоваться. Снова сохраните размеченные файлы и просмотрите их любым браузеромом, пользуясь гиперссылками.
Четвёртый этап. Теперь нужно разметить две таблицы и несколько нумерованных и ненумерованных списков.
Разметка таблиц:
В начале и в конце таблицы поставьте соответственно теги
В начале строки поставьте тег
В начала клеток шапки (заголовка) таблицы. поставьте теги
Перед элементом списка ставится тег
. Виды нумерации приведены в таблице:
| тип нумерации | Последовательность нумерации |
|---|---|
| type=”1” | 1, 2, 3, 4, |
| type=”i” | i, ii, iii, iv, . |
| type=”I” | I, II, III, IV, . |
| type=”a” | a, b, c, d, . |
| type=”A” | A, B, C, D, . |
После разметки таблиц и списков тщательно проверьте (отладьте) ваш сайт и покажите преподавателю.
Упражнение 6. Фреймы
Во всех предыдущих упражнениях в рабочую область окна браузера загружался только один HTML-документ. Можно разделить рабочую область окна браузера на несколько прямоугольных частей (фреймов) и в каждую часть загружать свой HTML-документ. Каждый фрейм можно рассматривать как клетку таблицы, занимающей всю рабочую область. Для задания расположения и размеров фреймов служит тег . В каждый фрейм с помощью тега загружается HTML-документ.
Для формирования страницы, состоящей из N фреймов, требуется не менее N+1 HTML-документов: хотя бы по одному на каждый фрейм и главный HTML-документ, в котором задаётся разбиение на фреймы.
Пример 6.1
Пример 6.2
Создадим четыре фрейма: два горизонтальный во всю ширину экрана, и между ними — два вертикальных так, как показано на рисунке:
| Фрейм 1 | |
| МЕНЮ Фрейм 3 Фрейм 4 Фрейм 5 | Фрейм 3 |
| Фрейм 6 | |
Для решения этой задачи потребуется два тега . С помошью первого тега задаются три строки. В первой и третьей строках размещается по одному HTML-документу (frame1.html,frame6.html). Вторая строка с помощью вложенного тега разбивается на две колонки (клетки). В левую колонку при открытии страницы загружается HTML-документ frameMenu.html , содержащий меню для загрузки в правую колонку HTML-документов frame3.html, frame4.html, frame5.html. Ниже приведены тексты главного HTML-документа и frameMenu.html.
Текст главного HTML-документа для примера 6.2
Текст HTML-документа frameMenu.html
Самостоятельно создайте сайт, отличающийся от рассмотренного в упражнении 4 сайта «Река Нева» тем, что HTML-документы с описанием Невы, картой и описанием бассейна Невы поочерёдно загружаются в один фрейм. Рабочая область браузера должна быть разделена на три фрейма и выглядеть сразу после загрузки сайта примерно так:
Источник
ТЕМА 7.3. ТЕХНОЛОГИЯ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ
Оглавление
7.3.1. Принципы гипертекстовой разметки
Гипертекстовые страницы создаются с помощью языка разметки гипертекста HTML (HyperText Markup Language) в текстовом редакторе или в среде специальных редакторов web-страниц.
Гипертекстовый документ содержит:
Коды разметки представляют собой символы ASCII. Поэтому страницы можно создавать в текстовых редакторах.
Существующие редакторы web-страниц позволяют пользователю создавать и форматировать элементы страницы с помощью меню, кнопок панелей инструментов.
Язык разметки HTML представляет собой описание документов с помощью указателей HTML-кодов, называемых также тэгами. Тэги гипертекстового документа представляют собой варианты сокращений слов английского языка, регистр букв не имеет значения.
Текст тэга заключается в угловые скобки, например, ), разрыва строки(
), вставки изображения .
Контейнер – это пара тэгов, начального и конечного, между которыми содержатся другие элементы документа, например текст или другие тэги. Указания тэгов применяются к расположенному между ними объекту.
Тэг-контейнер имеет следующую структуру:
Имя конечного тэга идентично имени начального, но перед ним ставится знак «/».
Действие начального тэга применяется к тому, что находится за ним, и прекращается конечным тэгом. Например, чтобы выделить текст жирным шрифтом нужно расположить его между тэгами:
Обязательный компонент тэга — его имя и, иногда, указание адреса используемого ресурса, или гиперссылки. За ними может следовать необязательный список атрибутов тэга и их значений, которые могут задаваться автором. Значение атрибута следует за знаком равенства после имени атрибута. Атрибуты перечисляются в тэге в свободном порядке.
Например, при описании таблицы, открывающий тэг может выглядеть так:
Но он может содержать атрибуты, задающие:
Тогда тэг-контейнер, задающий вид таблицы, выглядит следующим образом:
Приведенный тэг задает ширину таблицы 780 пикселей, выравнивание — по левому краю, ширину рамки — 1 пиксел, цвет фона таблицы – слоновой кости.
Значения атрибутов принято заключать в одинарные или двойные кавычки, особенно, если они содержат несколько слов, разделенных пробелами. Длина значения атрибута ограничена 1024 символами.
Вставка специальных символов — CER (Character Entity Reference)
Специальные сочетания символов позволяют отображать на web –страницах те символы, которые могут быть неверно обработаны браузером. Например, символы, используемые тэгами (угловые скобки, двойные кавычки). Некоторые из них приведены в Таблице 1. Эти сочетания вводятся в нужном месте гипертекста без угловых скобок.
Таблица 1. Вставка специальных символов.
Символ
Имя
Описание
Больше
пробел
Пробел
Амперсанд
Фунт
Копирайт
Регистрированная торговая марка
Тэги можно разделить по назначению:
7.3.2. Структура документа
Основная часть документа
HTML-документ позволяет вкладывать контейнеры друг в друга. Документ начинается с тэга — контейнера и заканчивается конечным тэгом .
В гипертекстовом документе определяется его заголовок (HEAD), и основная часть, называемая телом (BODY).
Пример структуры документа:
Заголовок первого уровня
Наряду с простой структурой гипертекстовой разметки существует фреймовая структура. Фреймы (кадры), на которые делится окно браузера, могут содержать одновременно разные гипертекстовые документы. Гиперссылки в этих документах позволяют указывать тот кадр, в который нужно загрузить новый документ. Например, один фрейм отображает содержание сайта в виде гиперссылок, а в другом загружаются последовательно страницы, вызываемые этими гиперссылками (рис. 1).
Если используется фреймовая структура, то документ не имеет тэга . На случай браузера, который не поддерживает загрузку фреймов в коде разметки указывается тэг и вариант описания параметров для обычной структуры страницы.
Для создания структуры (рис. 2) должно быть 3 файла. Файл с определением набора фреймов, который описывает количество кадров, их имена, размеры, наличие линеек прокрутки. Чтобы заполнить кадры нужно в тэге frame определить, какие файлы будут в них загружаться.
На рис. 2 в левом фрейме отображен список банков, каждый элемент которого является гиперссылкой. Щелчок по гиперссылке загружает в правый фрейм нужный файл. Атрибут Name задает имена кадров. Левый кадр имеет имя topics, правый — docum. Они задаются для управления загрузкой документов в нужный кадр. Файл, задающий фреймы выглядит следующим образом:
Заголовок документа
Элемент разметки HEAD–контейнер не является обязательным тэгом. В заголовке часто располагаются элементы разметки, задающие параметры документа, такие как:
Элемент разметки TITLE
Контейнер TITLE служит для задания темы документа в World Wide Web. Так же именуется окно браузера, в котором документ просматривается. Слова из контейнера TITLE попадают в индекс поисковой системы.
Элемент разметки META
Тэг META позволяет хранить список ключевых слов и описание документа, которые используются для составления индекса поисковой системы.
Атрибут CONTENT отображает содержание описания документа.
При индексировании документы, в которых задана тема в тэгах TITLE, ключевые слова и описание документа в атрибутах тэга META, попадут в индекс некоторых поисковых машин.
Элемент разметки STYLE
Предназначение тэга разметки STYLE — размещение описания стилей. Описание стиля может встречаться и в теле страницы, но если оно находится в заголовке – правила отображения стиля действуют для всей страницы.
Атрибут тэга – TYPE задает тип стиля. Это может быть либо text/css, либо text/javascript:
Элемент разметки SCRIPT
При использовании элемента разметки SCRIPT в заголовке определяется зона видимости функций и переменных во всем документе, т.е. они определяются как глобальные переменные.
Основная часть документа
Оформление документа
Цвет элементов
Основная часть документа начинается с тэга .
Он может содержать атрибуты, которые определяют параметры всего документа, например, цвет текста, ссылки, цвет фона.
Цвета задаются названиями цветов, которые можно найти в специальных таблицах или шестнадцатиричными кодами, в которых каждые две цифры задают значения трех составляющих цвета – RGB (красного, зеленого, синего). Например, код цвета фона bgcolor =»# FF 0000″ задает максимальное значение красного (FF) и минимальные зеленого и синего.
Таблица 2. Цвета, используемые в Internet
Данные Таблицы 2 скопированы с сайта известного дизайнера А.Лебедева.
Белый цвет задается смешением максимальных значений красного, зеленого и синего цветов. Код его FFFFFF. Черный – наоборот все нули.
В тэге BODY можно задавать цвет фона страницы, текста, гиперссылок.
Пример определения цвета разных элементов страницы:
TEXT – цвет текста страницы;
BGCOLOR – цвет фона страницы;
LINK – цвет ссылок;
VLINK – цвет посещенных ссылок.
Другие элементы оформления
Горизонтальная линия часто используется для раздела логических частей страницы. Линия выглядит в виде канавки. Задается тэгом . Атрибуты тэга :
— выравнивание (center или left);
— ширина линии в процентах или пикселях;
— толщина линии в пикселях;
— задание цвета линии, действует в только в Internet Explorer.
7.3.3. Форматирование текста
Текст, представленный на странице, может иметь различное форматирование. Основные тэги, используемые для оформления текста, приведены в Таблице 3.
Таблица 3. Тэги, оформляющие текст.
Назначение тэга
Имя
Атрибуты
Пример
Шрифт (задание размеров, цвета, вида)
Параграф (Начало нового абзаца)
Возможные значения – left; right; justify; center
Заголовок. Объявление текста заголовком. Можно задать заголовки шести уровней.
color – цвет align – выравнивание
текст
Полужирный текст
Верхний индекс, например для задания степеней
Type – тип маркера :.
Начало списка маркированного
Начало списка нумерованного
Перевод следующего за тэгом текста на новую строку
Встает заря во мгле холодной. На нивах шум работ умолк.
7.3.4. Вставка изображений
Тэг вставки изображения в простейшем варианте выглядит так:
SRC – обязательный атрибут, указывающий на файл–источник изображения, в данном случае — «photo.jpg». Предполагается, что файл находится в той же папке, что и страница, куда вставляется изображение. Если это другая папка, например, images, то ее имя необходимо указать:
Если же изображение находится в папке images на удаленном компьютере, то тэг выглядит так:
Тэг вставки изображения может иметь такие атрибуты как:
