Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Основы создания Web – страниц

↑

Стр 1 из 6Следующая ⇒

Основы создания Web – страниц

На языке HTML

Практическое пособие

Минск 2004

Авторы:

Молчина Л.И., Александрович З.А.

Рецензенты:

Тонкович И.Н., кандидат химических наук, доцент кафедры Информационных технологий Минского института управления

Ванькевич И.Е., начальник вычислительного центра Минского государственного автомеханического колледжа

В данном пособии в доступной форме излагаются основы работы с языком разметки гипертекстовых документов HTML: форматирование текста, построение таблиц, списков, форм, фреймов, гиперссылок. Приведены примеры, поясняющие основные приемы работы в HTML. Для закрепления пройденного материала предлагаются практические задания для самостоятельной работы.

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

Введение

Для того чтобы публиковать информацию в Интернете, необходимо иметь вариант родного издательского языка, который был бы понятен всем компьютерам. Издательский язык, используемый на службе Интернета World Wide Web, называется HTML (от английского Hyper Text Markup Language - язык разметки гипертекста).

HTML предназначен для создания форматированного текста, который включает в себя изображение, звук, анимацию и ссылки на другие объекты, графические файлы и т.д., разбросанные по всему пространству Web-серверов.

HTML дает авторам следующие возможности:

o издавать сетевые документы с заголовками, текстом, таблицами, списками, фотографиями, и т.п.;

o получать информацию из сети через ссылки гипертекста по нажатию кнопки;

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

o включать электронные таблицы, видео клипы, аудио клипы, и другие программные приложения непосредственно в их документы.

HTML был разработан Тимом Бернерс-Ли (Tim Berners-Lee) в 90 -х годах на основе работ Теда Нельсона (Ted Nelson) и концепции гипертекста. HTML широко распространился благодаря взрывообразному росту сети Internet.

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

В пособии рассматриваются основные возможности языка разметки гипертекстовых документов HTML. Предлагаемые в пособии конструкции языка HTML достаточно стандартны и связаны, в основном, с версиями HTML 3.х и HTML 4.х.

Основные понятия

Язык HTML (Hyper Text Markup Language) — это язык разметки гипертекста. Разметка заключается в том, что в обычный текст добавляются специальные команды HTML, описывающие, как должен выглядеть данный текст. Гипертекст – это расширенный текст, содержащий дополнительные элементы. Главный из них – это гипертекстовая ссылка (гиперссылка), щелчок на которой позволяет перейти к другому документу или к другому фрагменту того же документа. Вставные объекты (рисунки, видеоролики и т.д.) также рассматриваются как элементы гипертекста.

В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например <html>, <head>, <title>, </title>. Такие элементы разметки называются тегами.

Теги могут быть одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:

§ левой угловой скобки<;

§ необязательного символа слэш /, который означает, что тег является конечным тегом, закрывающим некоторую структуру, например </title>;

§ имени тега, например, html;

§ необязательных атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например, align="center";

§ правой угловой скобки >.

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

Большинство тегов могут иметь один или несколько атрибутов — параметров, дающих дополнительную информацию о том, как браузер[1] должен обрабатывать текущий тег. Атрибут тега состоит из имени, знака равенства и значения, которое задается строкой символов. Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить.

Язык HTML не различает большие и малые буквы, так, что теги <HEAD>, <head> и <Head> эквивалентны. Далее мы будем использовать написание тегов в нижнем регистре.

В любом документе HTML существуют элементы, определяющие его структуру, — это структурные теги.

Структурные теги

<html>...</html> - теги, являющиеся признаком начала и конца документа. Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ.

<head>...</head> - эта пара тегов указывает на начало и конец заголовка документа (Web-страницы). Помимо наименования документа (см. описание тега <title> ниже), в этот раздел может включаться множество служебной информации.

<title>...</title> - все, что находится между тегами <title> и </title>, толкуется браузером как название документа. Текст, размещенный за тегом <title>, отображается в заголовке окна браузера.

<body>...</body> - эта пара меток указывает на начало и конец тела HTML-документа и определяет содержание документа (Web-страницы).

Элементы форматирования на уровне блоков

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

Заголовок первого уровня — самый крупный, шестого уровня, естественно, самый мелкий.

<p>...</p> - такая пара тегов описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац. Закрывающий тег может быть опущен.

Поскольку НТМL документы это текстовые файлы, для их создания можно воспользоваться любым текстовым редактором, например Notepad (Блокнот). Все НТМL – файлы следует сохранять с расширением.htm или.html. Это укажет компьютеру, что файл не просто текстовый, а содержит коды НТМL.

Вот самый простой HTML-документ:

<html>

<head>

<title>

пример1

</title>

</head>

<body>

<h1>

Давайте познакомимся

</h1>

<p>

Давайте познакомимся

Сегодня я решил создать свою страницу

Мой девиз: "Дорогу осилит идущий". Это позволит мне учиться, учиться, учиться везде всегда и всему…

Теги <h > и <p> могут содержать дополнительный атрибут align, обычно указывается одно из трех значений этого атрибута:

align=center – выравнивание по центру;

align=left – выравнивание по левому краю;

align=right – выравнивание по правому краю.

Например: <h1 align=center>

Подытожим все, что мы знаем, с помощью примера:

<html>

<head>

<title>Пример 2</title>

</head>

<body>

<h1 ALIGN=CENTER>Ну вот! Я уже кое-чему научился</h1>

<h2>Умею располагать абзацы </h2>

<p>Знаю, что абзацы можно выравнивать не только влево, </p>

<p ALIGN=CENTER>но и по центру</p> <p ALIGN=RIGHT>или по правому краю.</p>

</body>

</html>

Работа с текстом

В этом разделе мы поговорим о том, как можно улучшить наш простой HTML-документ.

Форматирование текста

<br> - этот тег используется, если необходимо перейти на новую строку, не прерывая абзаца. Удобен при публикации стихов (см. Пример 3).

<html>

<head>

<title>Пример 3</title>

</head>

<body>

<h1> "Вредные советы"</h1>

<h2> Григорий Остер </h2>

<p> Главным делом жизни вашей<br>

Может стать любой пустяк.<br>

Надо только твердо верить,<br>

Что важнее дела нет.</p >

<p> И тогда не помешает<br>

Вам ни холод, ни жара,<br>

Задыхаясь от восторга,<br>

Заниматься чепухой.</p>

</body> </html>

<hr> - тег, который описывает вот такую горизонтальную линию:

Тег <hr> может дополнительно включать разные атрибуты, например:

<hr align=right> (center или left)

<hr width=50%> - ширина линии в процентах/пикселях

<hr size=8> - толщина линии

<hr Noshade> - отмена объемности

Вышеприведенные атрибуты могут употребляться одновременно.

В примере приведена небольшая коллекция горизонтальных линий.

<html>

<head>

<title>Пример 4</title>

</head>

<body>

<h1>Коллекция горизонтальных линий</h1>

<hr size=2 width=100%><br>

<hr size=4 width=50%><br>

<hr size=8 width=25%><br>

<hr size=16 width=12%><br>

</body>

</html>

&-последовательности

Поскольку символы < и > воспринимаются браузерами как начало и конец тегов, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ <, когда встречает в тексте последовательность < (по первым буквам английских слов less than — меньше, чем). Знак > кодируется последовательностью > (по первым буквам английских слов greater than — больше, чем).

Символ & кодируется последовательностью &

Двойные кавычки (" ") кодируются последовательностью "

þ Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Не допускается использование меток типа &QUOT; или &AMP;.

Комментарии

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

Например: <--! этот текст является комментарием-->

Форматирование шрифта

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

Физические стили

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

<b>... </b > полужирный текст;

<i >... </i > наклонный текст (курсив);

<tt>... </tt> телетайпный текст (пишущая машинка);

<u >... </u> подчеркивание;

Логические стили

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

<em>...</em> - курсивное начертание (от английского emphasis — акцент);

<strong>...</strong> - полужирное начертание (от английского strong emphasis — сильный акцент)

<cite>... </cite> - цитированный текст

<sup>...</sup> - ^{верхний индекс}

<sub>...</sub> - _{нижний индекс}

<big>...</big> - увеличить размер шрифта

<small>...</small> - уменьшить размер шрифта

Подытожим наши знания о логических и физических стилях с помощью примера.

<html>

<head>

<title>Пример 5</title>

</head>

<body>

<h1>Шрифтовое выделение фрагментов текста</h1>

<p>Теперь мы знаем, что фрагменты текста можно выделять

<b>жирным</b> или <i>наклонным</i> шрифтом. Кроме того, можно

Он запрещает форматирование

Списки

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

Ненумерованные списки: <ul>... </ul>

Текст, расположенный между тегами <ul> и </ul>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с тега <li>. Например, чтобы создать вот такой список:

· Текст один;

· Текст другой;

· Текст такой;

· Текст эдакий

необходим вот такой HTML-текст:

<ul>

<li> Текст один;

<li> Текст другой;

<li> Текст такой;

<li> Текст эдакий

</ul>

þ Обратите внимание: у тега <li> нет парного закрывающего тега.

Вид маркера можно изменить с помощью параметра TYPE в теге <li>.

Например: <li type="circle">- полный кружок

<li type="square">- квадрат

Нумерованные списки: <ol>... </ol>

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

<ol>

<li> Текст один;

<li> Текст другой;

<liLI> Текст такой;

<li> Текст эдакий

</ol>

получится вот такой список:

1. Текст один;

2. Текст другой;

3. Текст такой;

4. Текст эдакий

Списки определений: <dl>... </dl>

Список определений несколько отличается от других видов списков. Вместо меток <li> в списках определений используются теги <dt> (от английского definition term — определяемый термин) и <dd> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:

<dl>

<dt>HTML

<dd>Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

<dt>HTML-документ

<dd>Текстовый файл с расширением *.htm или *.html

</dl>

Этот фрагмент будет выведен на экран следующим образом:

HTML

Термин HTML (HyperText Markup Language) означает язык маркировки гипертекстов. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

HTML-документ

Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).

þ Обратите внимание: точно так же, как теги <li>, теги <dt> и <dd> не имеют парных закрывающих меток.

Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <dl compact>. Например, вот такой фрагмент HTML-текста:

<dt>А

<dd>Первая буква алфавита

<dt>Б

<dd>Вторая буква алфавита

<dt>В

<dd>Третья буква алфавита

</dl>

будет выведен на экран примерно так:

Первая буква алфавита

Вторая буква алфавита

Третья буква алфавита

Вложенные списки

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

Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.

Наши знания о списках можно свести в пример:

<html>

<head>

<title>Пример 8</title>

</head>

<body>

<h1>HTML поддерживает несколько видов списков </h1>

<dl>

<dt>Ненумерованные списки

<dd>Элементы ненумерованного списка выделяются специальным

символом и отступом слева:

<ul>

<li>Элемент 1

<li>Элемент 2

<li>Элемент 3

</ul>

<dt>Нумерованные списки

<dd>Элементы нумерованного списка выделяются отступом слева, а

также нумерацией:

<ol>

<li>Элемент 1

<li>Элемент 2

<li>Элемент 3

</ol>

<dt>Списки определений

<dd>Этот вид списков чуть сложнее, чем два предыдущих, но и

Выглядит более эффектно.

<p>Помните, что списки можно встраивать один в другой, но не

следует закладывать слишком много уровней вложенности. </p>

<p>1ё Обратите внимание, что внутри элемента списка может находиться

Таблицы

В устройстве таблицы легче всего разобраться на простом примере.

<html>

<head>

<title>Пример 11</title>

</head>

<body>

<h1>Простейшая таблица </h1>

<table border=1> 

<caption> 

Формы

Формы (формуляры) превращают WWW в интерактивную среду. Они реализуют простейший способ связи пользователя и сервера.

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

Как устроена форма

Форма открывается меткой <form> и заканчивается меткой </form>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая теги, может размещаться внутри форм без ограничений.

Тег < form > может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:

action обязательный атрибут. Определяет, где находится обработчик формы.

method определяет метод, используемый для передачи набора данных формы на сервер

enctype определяет, каким образом данные из формы будут закодированы для передачи обработчику

Простейшая форма

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

<input type=submit>

Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью submit, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <form>.

Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута value ="Надпись", например:

Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута name =[имя] (читается "нэйм", от английского "имя"), например:

При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением “Поехали”!.

В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.

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

<html>

<head>

<title>Пример 14</title>

<body>

</head>

<h1>Простейшая форма </h1>

<form action="pr0008.htm"> 

<input type=submit value="Назад, к главе 7...">

</form> 

</body>

</html>

Этот фрагмент на экране будет выглядеть так:

Простейшая форма

Как форма собирает данные

Существуют и другие типы элементов <input>. Каждый элемент <input> должен включать атрибут name=”имя”, определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов <input> должны включать атрибут value="значение", определяющий значение, которое будет передано обработчику под этим именем. Для элементов <input tupe=text> и <input type=password>, однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.

Основные типы элементов <INPUT>:

TYPE=text - определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах).

Пример: <INPUT TYPE=text SIZE=20 NAME=user VALUE="Иван">

Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user.

TYPE=password - определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*).

Пример: <INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10>

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pw.

TYPE=radio - определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка.

Пример: <INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с
<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с
<INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с

Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.

TYPE=checkbox - определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов.

Пример: <INPUT TYPE=checkbox NAME=comp VALUE="PC"> Персональные компьютеры
<INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Рабочие станции
<INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных сетей
<INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Серверы Интернет

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS.

TYPE=hidden - определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие возможные варианты использования Вы вполне можете придумать сами.

Пример: <INPUT TYPE=hidden NAME=version VALUE="1.1">

Определяет скрытую переменную version, которая передается обработчику со значением 1.1.

TYPE=reset - определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name.

Пример: <INPUT TYPE=reset VALUE="Очистить поля формы">

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

Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и поля для ввода текста <TEXTAREA>.

Меню <SELECT> из n элементов выглядит примерно так:

<OPTION VALUE="[значение 1]">[текст 1]

<OPTION VALUE="[значение 2]">[текст 2]

...

<OPTION VALUE="[значение n]">[текст n]

</SELECT>

Как Вы видите, меню начинается с тега <SELECT> и заканчивается меткой </SELECT>. Тег <SELECT> содержит обязательный атрибут NAME, определяющий имя переменной, которую генерирует меню.

Тег <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]). Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню.

Тег <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег <OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.

Разберем небольшой пример.

<OPTION VALUE="option1" checked>Вариант 1

<OPTION VALUE="option2">Вариант 2

<OPTION VALUE="option3">Вариант 3

</SELECT>

Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и Вариант 3. По умолчанию выбран элемент Вариант 1. Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию), option2 или option3.

После всего, что мы уже узнали, элемент <TEXTAREA> может показаться совсем простым.

Например: <TEXTAREA NAME=address ROWS=5 COLS=50>

А здесь - Ваш адрес...

</TEXTAREA>

Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере — address). Атрибут ROWS устанавливает высоту окна в строках (в примере — 5). Атрибут COLS устанавливает ширину окна в символах (в примере — 50).

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

Важно знать, что русские буквы в окне <TEXTAREA> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.

Для примера http://206.31.82.215/hp/nc/fd-win.pht – адрес программы, где используются данные формы.

Исходные данные в эту программу передаст форма, описанная в примере 12:

<HTML>

<HEAD>

<TITLE>Пример 15</TITLE>

</HEAD>

<H1>Несколько более сложная форма </H1>

<H2>Расскажите немного о себе...</H2>

<P>Указывать подлинные данные совсем не обязательно.

Для целей демонстрации вполне подойдут и вымышленные. </P>

Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR>

Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской

<INPUT TYPE=radio NAME=gender VALUE="female">женский<BR>

Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR>

</FORM>

</BODY>

</HTML>

Этот фрагмент на экране будет выглядеть так:

Несколько более сложная форма

Расскажите немного о себе...

Указывать подлинные данные совсем не обязательно. Для целей демонстрации вполне подойдут и вымышленные.

Имя:
Фамилия:
Пол: мужской женский
Возраст: лет

Фреймы

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

Фреим – область гипертекстового документа со своими полосами прокрутки.

Для создания страниц с фреймами необходимо обязательное построение двух групп HTML-файлов.

o к первой группе относятся документы содержания (content), которые обеспечивают заполнение информацией каждой области страницы.

o ко второй группе относят документы-раскладки (layout), которые применяются для разделения Web-страницы на области.

Разделение Web-страницы на области (фреймы) определенных типов осуществляется в документах-раскладках с помощью тегов <Frameset></frameset> и внутреннего тега <Frame>.

В теге <Framese > за горизонтальное деление экрана отвечает атрибут rows, а за вертикальное деление — атрибут cols. Значение этих атрибутов выражается в пикселях, процентах или с помощью * для обозначения оставшейся части экрана.

Например:

cols = 40%, 60% — деление области просмотра по вертикали в отношении два к трем;

rows = 100, 40%, * — верхняя горизонтальная область имеет размер 100 пикселей, 40% доступного пространства под среднюю область, а все остальное — под нижнюю.

Внутри тега <Frameset> </frameset> устанавливается тег <Frame>, который предназначен для организации ссылок на документы содержания. I'

Тег <Frame> имеет собственные атрибуты:

< src = "имя файаа-Ыт" — для вызова документа содержания;

scrolling = "yes" — обеспечивает прокрутку внутри области;

scrolling = "по" — запрещает прокрутку внутри области;

scrolling = "Auto" — разрешает построение полос прокрутки при необходимости.

Тег < Noframes ></ noframes > применяется для ситуации, когда браузер не поддерживает фреймы.

Типовое задание

Проанализируйте решение приведенной ниже задачи.

Разместите на Web-странице пять областей (фреймов), сопроводив центральный фрейм вертикальной полосой прокрутки, как показано ниже:

Верхняя часть страницы
Левый фрейм	Центральный фрейм	Правый фрейм

Для выполнения данного задания сначала необходимо описать пять отдельных документов содержания для каждой из областей (фреймов).

ü Документ содержания верхнего фрейма:

<Html>

<Head>

<Title> Верхний фрейм</Тitlе^>

<Meta http-equiv='"Content-Type^tt content="text/html;

charset=windows-1251">

</head>

<Body bgcolor='"pink">

<Center><Font size=5 color="blue ">

Верхняя часть страницы</font></сепtеr>

</body>

</html>

ü Документ содержания нижнего фрейма (bottomfr.htm):

<Html>

<Head>^<

<Title> Нижний фрейм</Тitle>

<Meta http-equiv= "Content-Type " content="text/html;

charset=windows-1251 ">

</head>

<Body bgcolor= "yellow">

<Center> <Font size=5 color= "indigo ">

Нижняя часть страницы</Fопt></сепtеr>

</body></html>

ü Документ содержания левого фрейма (lefthtm):

< Html>

<Head>

<Тitle>Левый фрейм</Title>

<Meta http-equiv="Content-Type" content="text/html;

sharset=windows-1251 ">

</head>

<Body bgcolor="white">

<Center><Font size=5 со1оr="blие">Левый фрейм</fопt></сепter>

</body></html>

ü Документ содержания центрального фрейма (centerfr.htm):

<Html>

<Head> -,

<Title>Фрейм</title>

<Meta http-equiv="Content-Type" content="text/html,

charset=windows-1251">

</head>

<Body bgcolor= "lime ">

<Font size=4 со1оr="bluе">Центральный фрейм</fопt>-

</center>,,

</body></html>

ü Документ содержания правого фрейма (rightfr.htni):

<Html>

<Head>

<Тitle>Правый фрейм</title>

<META http-equiv="Content-Type" content="text/html;

charset=windows-1251"

</head>

<Centeт><Font size=5 color="blue">

Правый фрейм <font></font></center>

</body></html>

После построения документов содержания строится документ-раскладка:

<Html>

<Head>

<Title> Организация фреймов </title>

<Meta http-equiv="Content-Type" content=text/html;

charset=windows-1251">

</head>

<! горизонтальное деление экрана>

<! вставка документа "topfr. htm " в верхний фрейм>

<! вертикальное деление центральной области экрана>

<! вставка документа "leftfr.htm" в левый фрейм>

<! вставка документа "centerfr.htm" в центральный фрейм>

<! вставка документа "rightfr.htm" в правый фрейм>

</frameset>

<! вставка документа "bottomfr.htm" в нижний фрейм>

<Frame src = "bottomfr. htm ">

</frameset>

<Noframes>

<Center><Font size=6>Фреймы</font></center>

<Hr color="blue">

Этот браузер не может воспроизводить фреймы

</noframes>

</frameset>

</html>

Практические задания

œ Задание 1

Форматирование текста

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

Разработан тест на интернет-зависимость

¾ ¹ Чрезмерное пристрастие к интернету психиатры уже много лет считают симптомом психического заболевания.

¾ ²Учеными предложен тест, позволяющий быстро определить, не злоупотребляете ли Вы

12 3 4 5 6 Следующая ⇒

Познавательные статьи:

Где возникла философия и почему?

Относительная высота сжатой зоны бетона

Сущность проекции Гаусса-Крюгера и использование ее в геодезии

Тарифы на перевозку пассажиров

Последнее изменение этой страницы: 2016-08-01; просмотров: 927; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.221.217.100 (0.017 с.)