Навигация:

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

Топ:

История развития методов оптимизации: теорема Куна-Таккера, метод Лагранжа, роль выпуклости в оптимизации...

Генеалогическое древо Султанов Османской империи: Османские правители, вначале, будучи еще бейлербеями Анатолии, женились на дочерях византийских императоров...

Динамика и детерминанты показателей газоанализа юных спортсменов в восстановительном периоде после лабораторных нагрузок до отказа...

Интересное:

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

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

Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

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

2020-04-03

106

0.00 из 5.00 0 оценок

Заказать работу

⇐ ПредыдущаяСтр 4 из 4

По умолчанию маркером каждого элемента маркированного списка является кружок темного цвета.

Как изменить маркер?

С помощью параметра type. Он определяет вид маркера.

В HTML предусмотрено 3 вида маркеров:

● - кружки;

○ - окружности;

■ - квадратики.

Рассмотрим пример (Внимательно разберите этот пример!).

Введем в редакторе следующий HTML-код:

<html>

В HTML есть только 3 вида маркеров:<br>

<li>кружочки;</li>

</ul>

<li>окружности;</li>

</ul>

<li>квадратики;</li>

</ul>

</html>

Получим следующий вид:

Задание для самостоятельной работы.

Создать HTML-документ, при просмотре которого в браузере информация будет воспроизводиться следующим образом

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

Если необходимо, чтобы элементы списка находились в строгом порядке, то следует использовать тег нумерованного списка <ol></ ol >.

HTML-код нумерованного списка выглядит следующим образом:

< ol >

< li > первый элемент списка </ li >

< li > второй элемент списка </ li >

< li > третий элемент списка </ li >

</ ol >

Хотя тег < li ></ li > - парный, но закрывать его не обязательно.

Рассмотрим пример.

Введем в редакторе следующий HTML-код:

<html>

Для того, чтобы создать список, необходимо:

<ol>

<li>Терпение.

<li>Внимание.

</ol>

</html>

Каждый элемент списка нумеруется автоматически арабскими цифрами.

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

Задание

Добавить третий элемент списка: Желание научиться.

Форматирование нумерованных списков

В HTML предусмотрено 5 стилей нумерации элементов списка.

С помощью параметра type можно изменить тип нумерации, а параметр start позволит изменить начальное значение нумерации.

В HTML нет способа автоматической разметки списка пронумерованного кириллицей
(а, б, в, г, …)

Примечание.

После буквы или цифры всегда стоит точка (.).

Рассмотрим пример

При просмотре данного документа в браузере элементы списка будут пронумерованы римскими цифрами.

<html>

<head>

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

</head>

<body>

<li> Первый элемент нумерованного списка.

<li> Второй элемент нумерованного списка.

</ol>

</body>

</html>

Начальный номер списка

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

Рассмотрим пример:

<html>

<head>

<title>Продолжение нумерованного списка</title>

</head>

<body>

<p>Последовательная нумерация элементов списка</p>

<li> Первый элемент нумерованного списка.

<li> Второй элемент нумерованного списка.

<li> Третий элемент нумерованного списка.

</ol>

<p>Дополнительная информация</p>

<ol>

<li value="4"> Четвертый элемент нумерованного списка.</li>

</ol>

</body>

</html>

Задание для самостоятельной работы.

Создать HTML-документ, при просмотре которого в браузере информация будет воспроизводиться следующим образом

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

Помимо обычных списков существуют списки определений.

Часто списки строятся по принципу: сначала – короткая фраза или слово (как правило, выделенное полужирным шрифтом или как-нибудь иначе), потом – более подробное разъяснение.

В HTML такие фрагменты можно организовать как список определений.

Каждый элемент такого списка состоит из некоторого термина и его определения.

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

Разметка списка определений осуществляется с помощью трех тегов < dl >, < dt > и < dd >.

< dl > - описывает весь список в целом;

< dt > - определяет термин;

< dd > - определение.

Пример (список определений)

<html>

<h4>Пример списка определений</h4>

<dl>

<dt>Полка</dt>

<dd>Предмет мебели</dd>

<dt>Самолет</dt>

<dd>Летающее средство транспорта</dd>

<dt>Незабудка</dt>

<dd>Красивый цветок</dd>

<dd>Хвойное дерево</dd>

<dt>Родник</dt>

<dd>Природный источник подземной воды</dd>

<dt>Облако</dt>

<dd>Скопление водяного пара в атмосфере</dd>

</dl>

</html>

Задания для самостоятельной работы:

1. Создать HTML-документ:

В MS ACCESS при заполнении таблиц можно вводить данные следующих типов:

a) текстовый;

b) поле MEMO;

c) числовой;

d) дата и время;

e) денежный;

f) логический;

g) поле объекта OLE;

h) гиперссылка.

2. Создать HTML-документ:

- фон страницы – голубой;

- заголовок "Считалка" разметить как заголовок 2 уровня; цвет шрифта – зеленый;

- элементы маркированного списка сделать полужирным

Считалка

На золотом крыльце сидели:

· из царей:

1. царь;

2. царевич;

· из королей:

3. король;

4. королевич;

· из прочего люда:

5. сапожник;

6. портной…

3. Создать HTML-документ, применяя теги списка определений. После заголовка провести линию на длину заголовка (это значит подобрать параметр width). Названия знаков зодиака сделать разными цветами.

ГОРОСКОП

____________

Водолей

Начните неделю с оказания помощи детям.

Рыбы

Начните активно заниматься квартирным вопросом.

Овен

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

Телец

Срочно подключайте к процессу повышения своего материального уровня деловых партнеров.

Близнецы

Нужно много трудиться и меньше руководить другими людьми.

Рак

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

Лев

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

Дева

Непременно отдохните, чтобы восстановить силы.

Весы

Вам нужно руководить идущими процессами и окружающими людьми.

Скорпион

Необходимо принимать активное участие в коллективном или общественно полезном труде.

Стрелец

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

Козерог

Вам необходимо проявлять инициативу.

ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЙ

Internet не был бы столь популярен в мире, если бы Web-страницы содержали только текст. Мир Internet – это мир красок, фотографий, анимационных эффектов, видео и аудиоклипов. Благодаря использованию графики удается сообщить посетителю Web-страницы необходимый эмоциональный настрой и представить информацию более наглядно.

Рисунки, фотографии и декоративные графические элементы наиболее часто используются на Web-страницах.

Из множества форматов графики в Internet используются всего лишь три:

· JPEG – файлы этого формата сохраняются с расширением. jpg.

· GIF – файлы этого формата сохраняются с расширением. gif.

· PNG – файлы этого формата сохраняются с расширением. png. (Не все обозреватели могут поддерживать этот формат).

Для размещения рисунков в HTML-документе служит одиночный тег

< IMG SRC ="имя файла">

Этот тег должен всегда содержать параметр src, значением которого будет абсолютный или относительный путь к графическому файлу. Абсолютный путь начинается с указания буквы диска и всех вложенных папок (например, "C:\Моя_папка\Мой_файл.jpg"). Относительный путь указывается следующим образом: "имя файла.jpg". Но в этом случае рисунок должен обязательно находиться в той же папке, что и Web-страница.

Рассмотрим пример использования рисунка в HTML-документе.

1. Найдем на своем компьютере какой-нибудь рисунок с расширением. jpg или. gif. (Например, в папке HTML \Images-Anim\ dog. gif)

2. Скопируем его к себе в папку.

3. В редакторе наберем следующий HTML-код:

<HTML>

<HEAD>

<TITLE> Использование изображений</TITLE>

</HEAD>

<BODY>

<H2 align=center> Пример вставки рисунка </H2>

<IMG SRC="dog.gif"

</BODY>

</HTML>

4. Получим следующее:

Так будет выглядеть страничка, если путь к рисунку указан неверно или рисунка нет в текущей папке.

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

Добавим в предыдущем документе следующее:

<IMG SRC="dog.gif" border=10>

Получим рисунок в рамке, толщиной 10 пикселей.

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

Добавим в предыдущем документе следующее:

< IMG SRC =" dog. gif " border =10 alt ="Это замечательный добрый песик">

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

Для выравнивания рисунков в тексте Web-страницы используется параметр align.

По умолчанию обозреватели оставляют лишь несколько пикселей между текстом и рисунком. Увеличение отступа может усилить зрительный эффект. Отступ текста от рисунка контролируется параметрами hspace – отступы слева и справа от рисунка, и vspace – над и под рисунком.

С помощью параметров width и height можно изменять размер изображения, увеличив или уменьшив его. Если размер изображения устанавливается в %, то при просмотре рисунок всегда будет занимать размер в % относительно окна обозревателя. В этом случае можно указывать только один параметр.

Задание для самостоятельной работы:

Оформить Web-страницу, содержащую заголовок, рисунок и текст.

1. Требования к заголовку:

· расположить по центру;

· назначить 2 уровень заголовка.

· название – "Наша Брестчина".

2. Требования к вставляемому рисунку:

· должен быть выровнен по левому краю;

· отступ справа от рисунка – 40, под рисунком – 20;

· установить ширину рисунка – 45%;

· предусмотреть ввод альтернативного текста (например, "Это древнее Берестье" или "Это Беловежская пуща")

3. Требования к тексту:

· выровнять текст по ширине;

· для первого слова первого абзаца установить размер шрифта =5 и цвет шрифта – красный.

ВНЕШНИЕ И ВНУТРЕННИЕ ССЫЛКИ

Самое ценное программное средство HTML – гиперссылки.

Только благодаря ссылкам посетители Web-страниц могут быстро открыть нужную Web-страницу или мгновенно просмотреть отдельные фрагменты емкого HTML‑документа.

У каждой Web-страницы, любого Internet ресурса, файлов есть свой собственный адрес.

Такой адрес называется универсальным указателем информационного ресурса, или URL. (Uniform Resource Location).

Для того чтобы подключиться к Internet-ресурсу (или открыть Web-страницу), в окне Web-браузера в поле со списком Адреса необходимо ввести соответствующий URL.

Гиперссылка – фрагмент текста HTML–документа, с помощью которого осуществляется переход на другую Web-страницу.

Для того чтобы создать гиперссылку, нужно использовать тег <а>.

Тег <а> имеет обязательные атрибуты.

Для того чтобы создать ссылку на заданный элемент внутри Web-страницы, на другую Web-страницу, Internet-ресурс, тег <а> используют с параметром href:

<а href = URL объекта (адрес), на которой надо сделать ссылку> гиперссылка </ a >

Если же необходимо сделать закладку (якорь), на которую затем будет сделана ссылка, тег <а> необходимо использовать с параметром name:

< а name = "элемент документа, на который нужно сделать ссылку”> гиперссылка </ a >

Тег < a ></ a > парный.

Все, что находится между начальным и конечным тегом и есть «якорь» или гиперссылка.

Между < a ></ a > можно вставлять любой текст, состоящий из одного или нескольких абзацев, предложение, слово, отдельные символы или буквы в слове (такие гиперссылки называются текстовыми) или графические объекты, включая рисунки, фотографии и другую графику, добавляемую с помощью тега <IMG>, а также отдельные области внутри рисунка (такие гиперссылки называются графическими). Текстовые гиперссылки выделяются синим цветом и подчеркиванием. Цвет текста меняется на фиолетовый после посещения документа по гиперссылке. Графические гиперссылки выделяются синей рамкой. Указатель при наведении на гиперссылку принимает вид руки.

Рассмотрим пример. Ссылка одной Web -страницы на другую (внешняя гиперссылка).

1. Введем в редакторе первый HTML-документ, сохраним как page 1. htm.

<HTML>

Хотите увидеть, как работает гиперссылка? <BR>

Щелкните

<a href="page2.htm"> здесь! </a>

</HTML>

2. Введем в редакторе второй HTML-документ, сохраним как page 2. htm.

<HTML>

<H2> Вот так и работает! </H2>

</HTML>

3. Просмотрим в браузере как работает гиперссылка. Откроем файл page1.html, затем подведем указатель мыши к слову здесь! и щелкнем мышкой – в окне браузера отобразится содержимое второй страницы.

Рассмотрим пример. Ссылка в нужную точку в тексте документа (внутренняя гиперссылка).

Для того чтобы организовать переход не только на нужную страницу, но и в нужную точку страницы, используют закладки. Закладки – это некие именованные метки, по которым можно отыскать соответствующую им точку документа. Закладка в тексте, так же как и гиперссылка создается с помощью тега < a ></ a >, отличие в том, что вместо параметра href устанавливается параметр name. С помощью этого параметра устанавливается имя закладки (это имя может содержать любые латинские буквы, а также цифры). Затем в документе создается гиперссылка, нацеленная на данную закладку. Щелчок по такой гиперссылке приведет не к открытию новой страницы, а прокручиванию текущего документа до указанной закладки.

1. Введем в редакторе следующий HTML-документ:

<HTML>

Одна из прекрасных дочерей Атласа – ее упорно преследовал Аполлон своими жгучими лучами – воззвала к Зевсу о помощи. Вняв мольбам красавицы, Громовержец превратил ее в < a href ="# m 1"> фиалку </ a > и спрятал в тени небесных кущ. Там цветок остался бы и навечно, если бы Персефону, дочь Зевса и Деметры, однажды не похитил Аид – в то время как Персефона собирала фиалки. И теперь каждую весну они расцветают уже на Земле – как весточка, которую владычица преисподней посылает своей матери, богине плодородия и земледелия…

<a name="m1"><b> Фиалка </b></a>

С одной стороны - знак траура, с другой – символ оживающей природы. Служила эмблемой города Афины. У галлов она служила символом скоромности, девственности и невинности.

</HTML>

2. Сохраним документ под именем фиалка.

3. Откроем этот документ в окне браузера. Уменьшим размеры окна так, чтобы текст последнего абзаца скрылся из области просмотра. Затем щелкнем по выделенному слову фиалка – в окне браузера текст поднимется и мы должны увидеть тот текст, куда была назначена гиперссылка.

Задание для самостоятельной работы

1. Используя файл предыдущего задания (Наша Брестчина) организовать внутренние гиперссылки в документе (на свое усмотрение).

2. Составить HTML-документ, в котором использованы внешние гиперссылки

2.1. На первой страничке перечислить дни недели (в виде списка). Для каждого элемента списка сделать внешнюю гиперссылку на другую страничку, на которой вывести расписание на этот день.

На каждой странице с расписанием сделать гиперссылку на страницу с днями недели

Задания для самостоятельной работы:

Создать HTML-документ с внешними гиперссылками:

Содержимое первого документа:

Распорядительные документы:

Приказ

Распоряжение

Указание

Постановление

Решение

Содержимое второго документа:

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

Содержимое третьего документа:

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

Содержимое четвертого документа:

Указание – это правовой акт, издаваемый преимущественно по вопросам информационно-методологического характера, а также по вопросам, связанным с организацией выполнения приказов, инструкций и других актов данной организации (предприятия) или вышестоящих органов управления.

Содержимое пятого документа:

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

Содержимое шестого документа:

Решение – это правовой акт, применяемый местными органами власти в коллегиальном порядке в целях разрешения наиболее важных вопросов, находящихся в их компетенции.

В созданных документах установить фон страниц, предусмотреть гиперссылки с первой страницы на каждую из шести документов и из каждого документа – возврат на первую страницу, оформить текст документов (начертание, выравнивание текста и т.д.).

ГИПЕРССЫЛКИ ИЗОБРАЖЕНИЙ

Гиперссылки можно назначать не только тексту, но и графическим изображениям, добавленным с помощью тега <IMG>

Создадим документ, в котором изображение будет использоваться как внешняя гиперссылка. Перед созданием файлов скопируем к себе в папку файлы bckgrd 115. gif, bdblue. gif и button 52. gif.

Создадим файл с именем c 1. htm

<HTML>

<HEAD>

<TITLE> Гиперссылка на изображение </TITLE>

</HEAD>

<BODY>

<A HREF="a1.htm"><IMG SRC=BDBLUE.gif></A>

</BODY>

</HTML>

Создадим файл с именем a 1. htm

<HTML>

<HEAD>

</HEAD>

</BODY>

</HTML>

Просмотрим фал с1. htm в браузере. Мы видим, что рисунок обрамлен синей рамкой. Двойной щелчок мыши на этом рисунке позволит перейти на другую страницу.

В папке HTML находится коллекция различных рисунков – кнопок, которые можно использовать в качестве гиперссылок.

Для сведения:

Можно создать гиперссылку на звуковой файл, содержащий музыкальное произведение, звуковой эффект или голосовое сообщение, записанное в файл с помощью средств цифровой звукозаписи. Обозреватели поддерживают воспроизведение звуковых файлов следующих форматов:

MIDI – музыкальные произведения в файлах с расширением. mid;

MP 3 - музыка, песни и звуковые сообщения в файлах с расширением. mp 3;

RealAudio – интерактивное радио и звукозапись в файлах с расширением. ra;

Wav – звуковые эффекты в файлах с расширением. wav.

Обозреватели также поддерживают просмотр видеоклипов следующих форматов:

AVI – файлы с расширением. avi;

MPEG - файлы с расширением.mpg или. mpeg;

QuikTime – небольшие клипы в файлах с расширением. mov или. gt.

Для воспроизведения фоновой музыки применяют тег <BGSOUND>

ТАБЛИЦЫ

В HTML ячейки таблицы могут содержать любую информацию (в том числе и другие таблицы).

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

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

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

Для добавления на web-страницу таблицы используется тег < table ></ table >.

Элементы таблицы задаются с помощью 3-х тегов:

< th > - определяет заголовок столбцов;

< tr > - для задания строк таблицы;

< td > - для задания ячеек, принадлежащих строке.

Пример ( таблица 2х2 с заголовками)

<html>

<table>

<th>Столбец 1</th>

<th>Столбец 2</th>

<tr>

<td>Строка1, столбец 1</td>

<td>Строка1, столбец 2</td>

</tr>

<tr>

<td>Строка2, столбец 1</td>

<td>Строка2, столбец 2</td>

</tr>

<table>

</html>

С помощью тегов < col > и < colgroup > можно задать форматирование всех ячеек столбца.

< col > - форматирование одного столбца;

< colgroup > - объединяет несколько столбцов в одну группу.

Пример (Стандартная таблица).

<html>

<h2>Стандартная таблица</h2>

<caption> Заголовок таблицы </caption>

<tr><th bgcolor="yellow">Заголовок 1

<th bgcolor="yellow">Заголовок 2

<tr><td>Ячейка 1

<td>Ячейка 2

<tr><td>Ячейка 3

<td>Ячейка 4

</table>

</html>

Пример

<html>

<h2>Табличка</h2>

<tr>

<td bgcolor="yellow">Петровым 2 звонка

</table>

</html>

Пример

<html>

<h2>Использование элементов THEAD, TBODY и TFOOT</h2>

<thead>

<tr> <td>Заголовок 1<td>Заголовок 2

<tfoot>

<tr> <td>Нижний блок таблицы<td> 

<tbody>

<tr> <td>Строка 1 <td>Ячейка 1.2

<tr> <td>Строка 2 <td>Ячейка 2.2

<tbody>

<tr> <td>Строка 3 <td>Ячейка 3.2

<tr> <td>Строка 4 <td>Ячейка 4.2

<tr> <td>Строка 5 <td>Ячейка 5.2

</table>

</html>

Пример

<html>

<h2>Объединение ячеек</h2>

<tr><td bgcolor="yellow"><b>Заголовок 1</b>

<td bgcolor="yellow"><b>Заголовок 2</b>

<tr><td rowspan=3 bgcolor="lime">Ячейка 1

<td>Ячейка 2

<tr><td>Ячейка 3

<tr><td>Ячейка 4

Ячейка 5

</table>

<h2>Объединение ячеек</h2>

<h3>(Вариант 2)</h3>

<tr><td bgcolor="yellow"><b>Заголовок 1</b>

<td bgcolor="yellow"><b>Заголовок 2</b>

<td bgcolor="yellow"><b>Заголовок 3</b>

<tr><td rowspan=4 colspan=2 bgcolor="lime">Ячейка 1

<tr><td>Ячейка 2

<tr><td>Ячейка 3

<tr><td>Ячейка 4

<tr><td colspan=3 bgcolor="aqua" align="center">Ячейка 5

</table>

</html>

ФРЕЙМЫ

Благодаря фреймам в одном окне Web-браузера можно отобразить сразу два (или более) HTML-документа.

Каждый фрейм предназначен для отображения отдельного документа.

Фрейм – это отдельный законченный - документ, который в месте с другими HTML-документами может быть отображен в окне Web-браузера.

Эти HTML-документы могут быть либо связанными друг с другом, либо автономными.

Чаще всего фреймы используют для создания навигационной панели Web-браузера.

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

В большинстве случаев используют 2 или 3 фрейма. Содержимое отдельных фреймов может просматриваться независимо от других частей окна браузера. Для каждого фрейма могут выводиться отдельные полосы прокрутки.

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

Управляющий файл – это особый тип HTML-документа, в котором указывают сколько документов откроется в окне браузера, сколько места будет занимать каждый, каким образом они будут располагаться. Такой документ не содержит тела документа и не содержит какого либо текста вообще. Вместо этого он содержит описание фреймов, заключенное между тегами <FRAMESET> … </FRAMESET>. В этом описании указывают размеры и порядок размещения областей в окне браузера, а также задают документы, которые будут загружаться в каждую область.

Структура управляющего файла:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<HTML>

<HEAD>

<TITLE> Untitled </TITLE>

</HEAD>

</FRAMESET>

</HTML>

Тег < FRAMESET > должен содержать обязательный атрибут cols или rows, определяющий способ разбиения окна (cols – вертикально, rows – горизонтально).

Тег < FRAME > определяет документы, загружаемые в отдельные области. Число элементов, вложенных между тегами <FRAMESET> должно соответствовать числу вложенных областей. Тег <FRAME> должен содержать обязательный параметр SRC ="имя файла. htm ", определяющий документ, загружаемый в данную область. Параметр NAME задает имя фрейма. Имя фрейма используется для создания ссылок между фреймами.

Создадим фреймовую структуру, делящую окно браузера на две вертикальные области (одна из которых будет занимать 40% окна, другая – оставшиеся 60%) и просмотрим как это будет выглядеть в окне браузера. Затем создадим фреймовую структуру, которая делит окно браузера на две равные горизонтальные области и просмотрим как это будет выглядеть в окне браузера.

Рассмотрим пример вертикальных фреймов Содержимое файла фреймы1. htm <HTML> <HEAD> <TITLE>Документ с фреймами </TITLE> </HEAD> <FRAMESET COLS="40%,*"> <FRAME SRC="левый.htm"> <FRAME SRC="правый.htm"> </FRAMESET> </HTML> Содержимое файла левый. htm <HTML> <HEAD> <TITLE> Левый фрейм</TITLE> </HEAD> <BODY bgcolor=#A68064> <H1 align=center>Это левый фрейм</H1> </BODY> </HTML> Содержимое файла правый. htm <HTML> <HEAD> <TITLE> Правый фрейм</TITLE> </HEAD> <BODY bgcolor=#db9370> <H1 align=center>Это правый фрейм</H1> </BODY> </HTML>

Рассмотрим пример горизонтальных фреймов Содержимое файла фреймы2. htm <HTML> <HEAD> <TITLE>Документ с фреймами </TITLE> </HEAD> <FRAMESET ROWS="50%,*"> <FRAME SRC="верхний.htm"> <FRAME SRC="нижний.htm"> </FRAMESET> </HTML> Содержимое файла верхний. htm <HTML> <HEAD> <TITLE> Левый фрейм</TITLE> </HEAD> <BODY bgcolor=#6F4242> <H1 align=center>Это верхний фрейм</H1> </BODY> </HTML> Содержимое файла нижний. htm <HTML> <HEAD> <TITLE> Правый фрейм</TITLE> </HEAD> <BODY bgcolor=#CFB53B > <H1 align=center>Это нижний фрейм</H1> </BODY> </HTML>

Создадим фреймовую структуру, которая делит область окна браузера на три части, одна из которых – верхняя.

Содержимое файла Организация фреймов. htm

<HTML>

<HEAD>

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

</HEAD>

</FRAMESET>

</HTML>

Теперь просмотрим в окне браузера и сделаем выводы.

Задание для самостоятельной работы

Создать фреймовую структуру, включающую в себя следующее разбиение

ФОРМЫ

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

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

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

Форма позволяет получить ту или иную информацию от пользователя. Реализация любой формы требует наличия двух компонентов:

1. HTML-кода, описывающего форму;

2. сценария обработки вводимых пользователем данных.

В качестве элементов формы могут использоваться кнопки, переключатели, флажки, текстовые области, списки, меню.

Форма на Web-странице должна быть простой и понятной для пользователей. Вся форма должна умещаться в окне обозревателя, поэтому нужно следить, чтобы ширина формы не превышала 75 символов, а высота формы была в пределах 40 строк. Подписи элементов управления должны быть короткими, но понятными. Используйте также экранные подсказки (параметр title).

Формы создаются с помощью тега < FORM ></ FORM >.

Объект формы не отображается в окне обозревателя до тех пор, пока в него не будут добавляться элементы формы.

С помощью параметров тега < FORM > можно настроить общие параметры работы формы:

METHOD — определяет метод передачи данных формы на Web-сервер

NAME — имя формы, по которому к форме и к ее элементам можно обращаться в коде сценария на JavaScript.

ACTION — адрес сценария обработки данных формы. Это может быть адрес URL ресурса в Интернет или адрес электронной почты, как в следующем примере:

<FORM METHOD="post" ACTION="mailto:[email protected]" ENCTYPE="text/plain" >

Для установки адреса электронной почты используется ключевое слово mailto:, как и при создании гиперссылки на адрес электронной почты.

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

ENCTYPE — формат данных формы. В том случае если данные формы предназначены для передачи по адресу электронной почты поэтому атрибуту следует присвоить значение "plain/text".

ACCEPT - CHARSET — поддерживаемая кодировка текста. Если в полях формы предполагается ввод текста с использованием символов кириллицы, следует установить поддержку соответствующей кодировки текста, например: KOI 8- R.

Теги < FORM >…</ FORM > могут находиться в любой части основного раздела документа HTML, заключенного между тегами < BODY >...</ BODY >. Если в документе предполагается использование элементов управления формы, тег <FORM> может следовать сразу за тегом <BODY>, как в следующем примере:

< BODY >< FORM >...</ FORM ></ BODY >.

TARGET – указывает окно, в котором будут отображаться результаты обработки формы.

После того, как объект формы будет добавлен, его следует наполнить содержимым – элементами управления формы. Многие элементы управления формы создаются с помощью тега <INPUT> по следующей схеме: < INPUT TYPE ="тип" NAME ="имя">.

Параметр TYPE указывает тип создаваемого элемента:

text – создает строку для ввода текста;

password – создает строку для ввода пароля, все вводимые символы заменяются звездочками;

checkbox – создает флажок;

radio – создает переключатель;

button –создает кнопку произвольного значения;

submit – создает кнопку "Отправить";

reset – создает кнопку "Сбросить";

image – создает кнопку-изображение.

Рассмотрим пример:

<HTML>

<BODY>

<FORM>

<INPUT TYPE="text" NAME="last_name" SIZE="30">Фамилия<BR>

<INPUT TYPE="text" NAME="birthday" SIZE="5" MAXLENGTH="4">Год рождения<ВR>

Введите пароль<INPUT TYPE="password" NAME="pass" SIZE="1O" MAXLENGTH="10"><BR>

Укажите путь к файлу:<BR><INPUT TYPE="file" SIZE="17">

</FORM></BODY></HTML>

Рассмотрим второй пример:

<H2>Цвет фона страницы</H2>

<INPUT TYPE="radio" NAME="color" VALUE="white" CHECKED ACCESSKEY="Б"><FONT COLOR="red" >Б</FONT></U>елый

⇐ Предыдущая 1 2 34

Поделиться с друзьями:

Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...

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

Историки об Елизавете Петровне: Елизавета попала между двумя встречными культурными течениями, воспитывалась среди новых европейских веяний и преданий...

Типы сооружений для обработки осадков: Септиками называются сооружения, в которых одновременно происходят осветление сточной жидкости...