Главная Обратная связь

Дисциплины:

Архитектура (936)
Биология (6393)
География (744)
История (25)
Компьютеры (1497)
Кулинария (2184)
Культура (3938)
Литература (5778)
Математика (5918)
Медицина (9278)
Механика (2776)
Образование (13883)
Политика (26404)
Правоведение (321)
Психология (56518)
Религия (1833)
Социология (23400)
Спорт (2350)
Строительство (17942)
Технология (5741)
Транспорт (14634)
Физика (1043)
Философия (440)
Финансы (17336)
Химия (4931)
Экология (6055)
Экономика (9200)
Электроника (7621)






Пример создания таблицы, элементы которой занимают несколько строк или столбцов



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

Заголовок таблицы  
ячейка 1 ячейка 2 ячейка 3  
объединенная ячейка ячейка 2 ячейка 3
ячейка 2 ячейка 3  

 

Создадим первую строку таблицы:

<TABLE BORDER="1"width="250">

<TR>

<TН colspan="3" align="Center">Заголовок таблицы</TН>

</TR>

построим вторую строку таблицы:

<TR>

<TD valign="top"><EM>ячейка 1</EM></TD> <TD>ячейка 2</TD> <TD>ячейка 3</TD>

</TR>

построим третью строку, причём укажем, что первая ячейка этой строки объединяется с ячейкой под ней:

<TR>

<TD rowspan="2"><EM>объединенная ячейка</EM> </TD><TD>ячейка 2 </TD> <TD>ячейка 3</TD>

</TR>

построим четвёртую строку таблицы и закроем тег таблицы:

<TR>

<TD>ячейка 2</TD> <TD>ячейка 3</TD>

</TR>

</TABLE>

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

Сохраните документ под именем “S_table” и проверьте результат.

Вложенные таблицы

Команды, управляющие созданием и отображением таблиц, допускают вложение одного тега <TABLE> внутрь другого. Эта особенность языка используется для представления на web-страницах так называемых «вложенных» таблиц, пример описания которых приведен ниже:

<TABLE BORDER="1" CELLPADDING =”6” WIDTH=”600”>

<CAPTION> <STRONG> Спряжение стандартного глагола <EM>to invite: </EM> </STRONG> </CAPTION>

<TR>

<TH WIDTH=”200”>Перевод </TH>

<TH WIDTH=”200”> Future </TH>

<TH WIDTH=”200”> Future-in-the-Past </TH>

</TR>

<TR>

<TD COLSPAN=”3” WIDTH=”588”>

<TABLE BORDER="1" CELLPADDING =”0” CELLSPACING=”0” WIDTH=”587”>

<TR>

<TD WIDTH=”194”> Я (мы) приглашу (-сим) </TD>

<TD WIDTH=”194”> I (we) shall invite </TD>

<TD WIDTH=”194”> I (we) should invite </TD>



</TR>

<TR>

<TD WIDTH=”194”> Он (Вы, они) пригласит (-ите, -ят) </TD>

<TD WIDTH=”194”> He (you, they) will invite </TD>

<TD WIDTH=”194”> He (you, they) would invite </TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

Сохраните файл под именем «V_table» и запустите для просмотра результата.

Самостоятельная работа

Задание. Создайте следующую таблицу:

Сетка игр Чемпионата мира

Чемпионат мира
Германия Германия Бразилия Бразилия
Франция
Россия Бразилия
Бразилия
Голландия Англия Италия
Англия
Испания Италия
Италия

 

Лабораторная работа № 6

Фреймы и формы

 

Цель: освоить теги html, синтаксис языка

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

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

При использовании фреймов раздел <BODY> заменяется на раздел <FRAMESET>. Все остальные документы, отображаемые в отдельных фреймах, имеют стандартное представление.

В общем виде синтаксис записи директивы <FRAMESET>выглядит следующим образом:

<FRAMESET ROWS= «значение» COLS= «значение» FRAMEBORDER= «значение» FRAMESPACING=«значение»>



<FRAME NAME= «имя» TARGET=«значение» SCROLLING=”yes, no или auto” SRC=”url” FRAMEBORDER=«значение» NORESIZE>

<NOFRAMES>

<BODY>

Текст, отображаемый в броузерах, не поддерживающих фреймы.

</BODY>

</NOFRAMES>

</FRAMESET>

Элементы для создания фреймов и работы с ними:

FRAMESET Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице
FRAME Определяет каждый отдельный фрейм и его свойства внутри FRAMESET-структуры
NOFRAMES Определяет что показывать, если браузер не поддерживает фреймы

Примечание: Внимательно следите, чтобы все вышеперечисленные элементы находились вне элемента BODY

Атрибуты команды <FRAMESET>:

FRAMEBORDER – определяет, надо ли отображать на экране пользователя границы фреймов. Может принимать одно из двух значений: 1 – если разделители нужны; 0 – если разделители невидимы.

FRAMESPACING – указывает на толщину разделителей в пикселах.

ROWS – определяет количество горизонтальных отрезков во фреймовом наборе

COLS - определяет количество вертикальных отрезков во фреймовом наборе.

Параметры атрибутов ROWS и COLS можно задавать различными способами: в пикселах, процентах и в относительных длинах. Если атрибут ROWS в теге <FRAMESET> не указан, то каждый столбец будет занимать всю длину страницы. Если не указан атрибут COLS, то каждая строка растянется на всю видимую ширину экрана. Параметры фреймов задаются слева направо для горизонтальных элементов и сверху вниз для вертикальных.

Например, запись

<FRAMESET COLS= «50%, 50%» - разделит страницу вертикально на две равные части.

А запись:

<FRAMESET ROWS= «250, 10%, *» - задаст горизонтальное разделение страницы на три участка: первый – с фиксированной высотой 250 пикселов, второй – высотой в 10% от оставшегося пространства, третий же займет все пространство, которое останется свободным после создания первых двух окон.

Например, для разделения страницы на сетку 2х3 ячейки, можно использовать следующие значения атрибутов:

<FRAMESET ROWS= «40%, 60%» COLS= «33%, 34%, *»>

Атрибуты команды <FRAME>:

NAME – задается уникальное имя для данного конкретного фрейма.

TARGET – содержит информацию о целевом фрейме (рекомендуется использовать значение по умолчанию – «contents».

SCROLLING – определяет наличие (yes), отсутствие (no) или отображение по мере необходимости (auto) полос прокрутки в текущем фрейме.

SRC – указывается адрес открываемой в данном фрейме страницы.

NORESIZE – устанавливает запрет на изменение пользователем размеров окна фрейма.

MARGINWIDTH – определяет размер в пикселах пустого пространства, оставляемого во фрейме в качестве левого и правого полей.

МARGINHEIGHT – задает верхний и нижний отступы.

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

<A HREF=”URL” TARGET=”_значение>Текст или элемент IMG </A>

Допустимые значения атрибута TARGET для применения тега </A> во фреймовых наборах следующие:

_self – документ, с которым установлена гиперсвязь, открывается в текущем фрейме;

_parent – отображение осуществляется в родительском окне фреймов, независимо от того,

какие параметры указаны в директиве <FRAMESET>;

_top – при активизации гиперссылки фреймы перестают отображаться, а содержимое

целевого документа выводится в отдельном окне.

Если вместо значения атрибута TARGET подставить имя фрейма, заданное Вами ранее в качестве параметра атрибута NAME тега <FRAME>, при активизации ссылки целевой документ загружается в окне с указанным именем.

Самостоятельная работа

Практикум

Создадим следующую Web-страницу, разбитую на фреймы:

<HTML>

<HEAD>

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

</HEAD>

<FRAMESET FRAMESPACING=”0” ROWS="64, *, 64" FRAMEBORDER =”0”>

<FRAME NAME = “top” SCROLLING=”no” TARGET=”” SRC="page_1.htm"> <FRAMESET COLS="150, *">

<FRAME NAME =”contents” SRC="page_2.htm" SCROLLING=”auto” >

<FRAME NAME =”main” SRC="page_3.htm" SCROLLING=”auto” >

</FRAMESET>

<FRAME NAME =”bottom” SCROLLING=”no” NORESIZE SRC="page_4.htm" >

<NOFRAMES>

<BODY>

<P ALIGN=”CENTER”>Эта страница содержит фреймы, но Ваш броузер не поддерживает их отображение </P>

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

Сохраните данный листинг документа под именем «fr_1» и сравните полученный результат:

 
 

 

 


Замечание

На первый взгляд, фреймы кажутся весьма привлекательными с точки зрения удобства обслуживания сайта. Однако на практике оказывается, что объективных недостатков у данной формы представления web – страниц значительно больше, чем достоинств.

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

Во-вторых, фреймы распознаются далеко не всеми броузерами.

В-третьих, применение фреймов существенно затрудняет управление навигацией сайта при помощи встроенных в броузер кнопок «Вперед» и «Назад», поскольку они расчитаны на работу с документами размером в целый экран.

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

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

FORM (Форма)

Формы применяются для передачи данных от HTML – документа интерактивным элементам сайта, например сценариям CGI. Эти данные претерпевают те или иные изменения, алгоритм которых записан в файле сценария CGI, например, встраиваются в другую web – страницу или передаются по электронной почте. Формы могут содержать широкий диапазон приемов разметки HTML, включая такие виды как однострочные или многострочные текстовые поля, группы радиокнопок, переключатели и меню.

Итак, общий вид записи директивы вызова формы представляется в следующем виде:

<FORM ACTION=”URL” METHOD=”значение”>

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

</FORM>

Необходимо присутствие начального и конечного тэгов. Внутри элемента FORM разрешается использовать большинство HTML-элементов. Вложенность тега FORM не допускается.

Используются атрибуты:

ACTION - определяет адрес, по которому будет отправлено содержимое формы. Это может быть либо адрес электронной почты, либо путь к CGI скрипту сервера, обслуживающему данную форму.

METHOD - определяет метод передачи данных из формы на сервер: GET (по умолчанию) – с помощью стандартного интерфейса HTTP; POSTпо каналам электронной почты.

ENCTYPE - определяет механизм кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded".

TARGET - определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна. Подробное описание значений смотрите в параметре TARGET элемента A.

Содержание формы описывается тегом <INPUT>, запись которого следующая:

<INPUT TYPE=”тип элемента” NAME=”имя” VALUE=”строка” CHECKED=”параметр”

SIZE=”целое число” MAXLENGTH=”целое число” ALIGN=”значение”>, где

ALIGN – определяет положение элементов формы на web-странице

MAXLENGTH – определяет максимально возможную длину текстового поля в символах для полей ввода текста

SIZE – видимая длина текстового поля в пикселах

CHECKED – устанавливает выделенный объект из нескольких в случае, если значением атрибута TYPE является RADIO или CHECKBOX

VALUE – указывает первоначальное значение текущего поля

NAME – задает уникальное имя для каждого элемента формы, записанное латиницей. Это имя служит для идентификации данных, передаваемых серверу из формы

TYPE – задает типы самого элемента формы.

Типы элементов формы

TYPE=”TEXT”

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

Например,

<INPUT TYPE =”TEXT” SIZE=”40” NAME=”user_name” VALUE=”Введите Ваше имя”>

 

TYPE=”PASSWORD”

Тип, полностью аналогичный предыдущему, за исключением того, что вводимая пользователем в текстовое поле информация будет отображаться на экране символами «*», чтобы скрыть текст от постороннего зрителя.

 

TYPE=”CHECKBOX”

Элемент, представляющий собой простую форму выбора, принимающую одно из двух устойчивых состояний: «отмечено» - «не отмечено». Данный элемент оперирует булевыми переменными, каждая из которых может принимать значение «ИСТИНА» или «ЛОЖЬ». Каждый элемент формы CHECKBOX создает логическую пару значений вида «имя_элемента – состояние» и передает и на сервер. Для установки первоначального состояния элемента (отмечен или нет) используют атрибут CHECKED.

Например,

<INPUT TYPE=”CHECKBOX” NAME=”C01” VALUE=”yes”

 

TYPE=”RADIO”

Так называемая радиокнопка применяется в случае, когда какая-либо логическая переменная может принимать только одно значение из множества возможных. Все элементы RADIO одной формы обозначаются одним и тем же значением атрибута NAME. Использование радиокнопок требует явного указания значений атрибута VALUE, одна из кнопок должна быть обязательно выделена атрибутом CHECKED.

Например,

<P ALIGN=”CENTER”> Пожалуйста, укажите Ваш возраст </P>

<CENTER>

<INPUT TYPE=”RADIO” NAME=”user-age” VALUE=”0-12”>

<INPUT TYPE=”RADIO” NAME=”user-age” VALUE=”13-17”>

<INPUT TYPE=”RADIO” NAME=”user-age” VALUE=”18-25”>

<INPUT TYPE=”RADIO” NAME=”user-age” VALUE=”26-35” CHECKED >

<INPUT TYPE=”RADIO” NAME=”user-age” VALUE=”36-” >

</CENTER>

 

TYPE=”BUTTON”

Отображает обыкновенную прямоугольную кнопку, нажатие на которую приводит к какому-либо действию сервера. С помощью атрибута NAME данному элементу присваивается уникальное имя, атрибут VALUE позволяет изменять надпись, отображаемую на кнопке.

Например, <INPUT TYPE=”BUTTON” VALUE=” Button” NAME=”B1”>

 

TYPE=”SUBMIT”

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

<INPUT TYPE=”SUBMIT” VALUE=”Отправить!”>

 

TYPE=”RESET”

Создает кнопку, которая очищает неправильно заполненную текстовую форму. Параметры из значения этой кнопки не передаются на сервер вместе с другими данными формы. Например, <INPUT TYPE=”RESET” VALUE=”Очистить форму”>

TYPE=”FILE”

Генерирует кнопку, при нажатии на которую на экране появляется Проводник Windows, позволяющий присоединить к отсылаемым на сервер данным любой файл с локального компьютера пользователя. Данный элемент применяется, в основном, для организации вложений электронной почты, а также для загрузки изображений на сервер. Обычно, рядом с кнопкой отображается текстовое поле, в которое автоматически заносится имя отсылаемого файла и путь к нему на локальном диске. Например,

<INPUT TYPE=”FILE” NAME=”picture”>

 

TYPE=”IMAGE”

Создает кнопку отсылки, аналогичную элементу SUBMIT, но с использованием графического изображения, созданного пользователем. URL к изображению, играющему роль кнопки, указывается атрибутом SRC, причем сам элемент может содержать собственные атрибуты, аналогичные применяемым в теге <IMG>. Атрибуты NAME и VALUE трактуются так же, как и у элемента SUBMIT.

Например,

<INPUT TYPE=”IMAGE” SRC=”images\button.gif” ALIGN=”BOTTOM” NAME=”submit”

VALUE=”Отправить!”>

 

Если перед web-мастером встала задача создать текстовое поле с большим числом вводимых символов, используется самостоятельный тег <TEXTAREA>, формирующий на экране одноименный элемент формы. Синтаксис записи данного тега следующий:

<TEXTAREA NAME= “имя элемента” ROWS=”целое число” COLS=”целое число”>

Текст, выводимый в текстовом поле по умолчанию

</TEXTAREA>

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

Например,

<TEXTAREA NAME= “message” ROWS =”25” COLS=”40”>

Введите сюда текст сообщения

</TEXTAREA>

 

Для создания меню выбора в форме web-мастер может использовать тег <SELECT>. Синтаксис записи тега следующий:

<SELECT NAME=”имя” MULTIPLE SIZE=”целое число”>

<OPTION VALUE=”Пункт 1”> Пункт 1</OPTION>

<OPTION VALUE=”Пункт 2”> Пункт 2</OPTION>

<OPTION VALUE=”Пункт 3”> Пункт 3</OPTION>

<OPTION VALUE=”Пункт N”> Пункт N</OPTION>

</SELECT>

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

<P ALIGN=”CENTER”> Пожалуйста, укажите Ваш город </P>

<CENTER>

<SELECT NAME=”city” MULTIPLE SIZE=”3”>

<OPTION VALUE=”a”> Санкт-Петербург</OPTION>

<OPTION VALUE=”b”> Москва </OPTION>

<OPTION VALUE=”c”> Ростов </OPTION>

<OPTION VALUE=”d”> Волгоград </OPTION>

<OPTION VALUE=”e”> Саратов</OPTION>

</SELECT>

</CENTER>

Самостоятельная работа

 

Задание: создать сайт-опросник

 

Лабораторная работа № 7

Каскадные таблицы стилей

 

Цель: освоить теги html, синтаксис языка

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

 

 

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

Параметры линии:

 

(1) <Hr align="right"> (center или left)

(2) <Hr width="30%"> (ширина линии в процентах/пикселях)

(3) <Hr size="6"> (толщина линии)

(4) <Hr NoShade> (отмена объемности)

(5) <Hr color="cc0000"> (цвет линии, только в IE)

 

 

Не злоупотребляейте параметром Color, т.к. он действует только в Интернет Иксплорер (если вам так хочется все же цветную линию, то сделайте, допустим красную картинку 1x1 пиксель и вставьте ее в свой документ. Тут вам приходятся параметры картинок height и width. Пусть height=1, а width=500 - вот вам и линия).

Каскадные таблицы стилей представляют собой описание различных элементов Web-страницы, с точки зрения внешнего вида, поведения и т.п. и являются альтернативным способом форматирования текста. Их основная задача состоит в отделении формата Web-страницы от её содержимого. Один раз, указав свойства каждого элемента в текстовом файле с расширением .css и назначив им свойства стиля, Вы можете подключить его к неограниченному количеству различных документов, раз и навсегда отказавшись от необходимости назначать свойства каждому конкретному объекту. И еще одно неоспоримое преимущество: для того, чтобы изменить стиль оформления какого-либо элемента всех страниц Вашего сайта, достаточно подправить одну строку кода в одном файле. Удобно!

Каскадные таблицы стилей стали доступны только с версии Netscape-Navigator 4.0 и IExplorer 4.0.

Селекторы

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

Название элемента { свойство: значение;}

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

H1 {color: blue; font-size: 20pt;}

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

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

Название Элемента 1, Название Элемента 2…Название элемента N {свойство: значение;}

Например, H1, H2, H3, H4 {font-family: Helvetica; color: red; font-size: 30pt;}

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

<H1>Каскадные таблицы стилей – это<STRONG> круто!</STRONG></H1>

В окне браузера слово «круто» отобразится жирным шрифтом зеленого цвета. То есть элемент <STRONG> унаследовал присвоенные тегу <H1> свойства, поскольку последний является «старшим» тегом, директивой более высокого уровня.

Именно на принципе наследования свойств одного элемента другим строится простой метод описания единых параметров отображения для всех видимых элементов web- страниц. Представьте, если Вы включите в листинг Вашего css-файла директиву:

BODY{background: white; color: black; font-family: sans-serif; font-size: 10pt;}

то все элементы web-страницы, так как они являются по умолчанию дочерними директивами тега <BODY>, будут автоматически наследовать его свойства.

Для практической реализации сказанного, создайте в блокноте Html-документ под именем five.html и внесите теги:

<Html>

<Head> <Title> Работа с каскадными таблицами </Title>

<Style type=”text/css”>

body {background-color:lime; color:white;}

p {font-size:300%; background-color:teal; text-align:right;}

</Style>

</Head>

<body>

<P > Любовь твоя жаждет так много

Рыдая, прося, упрекая </P>

</Body>

</Html>

В приведенном примере теги<Style type=”text/css”> и </Style> осуществляют интеграцию инструкций CSS непосредственно в web-страницу. Обратите внимание, что они являются составляющими заголовка документа <HEAD>.


Эта страница нарушает авторские права

allrefrs.ru - 2019 год. Все права принадлежат их авторам!