Ћекции.ќрг


ѕоиск:




 атегории:

јстрономи€
Ѕиологи€
√еографи€
ƒругие €зыки
»нтернет
»нформатика
»стори€
 ультура
Ћитература
Ћогика
ћатематика
ћедицина
ћеханика
ќхрана труда
ѕедагогика
ѕолитика
ѕраво
ѕсихологи€
–елиги€
–иторика
—оциологи€
—порт
—троительство
“ехнологи€
“ранспорт
‘изика
‘илософи€
‘инансы
’ими€
Ёкологи€
Ёкономика
Ёлектроника

 

 

 

 


“аблицы. ќбойти это ограничение позвол€ют таблицы




ќбойти это ограничение позвол€ют таблицы. ƒл€ задани€ таблицы примен€етс€ тэг <TABLE>. ” этого тэга есть несколько необ€зательных атрибутов:

Ј BORDER Ц ширина рамки.

Ј CELLPADDING Ц рассто€ние между границей каждой €чейки и ее содержимым.

Ј CELLSPACING Ц рассто€ние между €чейками таблицы.

Ј WIDTH Ц ширина таблицы.

—троки таблицы задаютс€ тэговой парой <TR> </TR>, а столбцы Ц <TD> </TD>. —уществует еще пара <TH></TH> дл€ заголовков столбцов.

“эг <TR> может иметь следующие атрибуты:

ALIGN Ц контролирует горизонтальное размещени€ содержимого в €чейках и может принимать значени€: LEFT, RIGHT, CENTER.

VALING Ц контроль за вертикальным размещением, принимает значени€: TOP, MIDDLE, BOTTOM.

–ассмотрим шаблон дл€ любой таблицы, включаемой в HTML документ (в атрибуте WIDTH ширина таблицы не в пиксел€х, а в процентах относительно рабочего пол€ браузера). “акое указание разрешено дл€ любого атрибута, использующего числовые данные объекта.

Ћистинг 1.

<TABLE BORDER = У0Ф CELLPADDING= У0Ф CELLSPACING= У0Ф WIDTH =Ф100%>

<TR> <! Ц —трока заголовка Ц >

<TH>... </TH>

<TH>... </TH>

<TH>... </TH>

</TR>

<TR> <! Ц —трока 1 Ц >

<TD>... </TD>

<TD>... </TD>

<TD>... </TD>

</TR>

<TR> <! Ц —трока 2 Ц >

<TD>... </TD>

<TD>... </TD>

<TD>... </TD>

</TR>

</TABLE>

¬ листинге 1 приведен пример шаблона дл€ построени€ любой таблицы. ћожно добавл€ть строки или столбцы, измен€€ атрибуты тэга <TABLE>, можно несколько измен€ть ее внешний вид. Ћюбую €чейку (обрамленную парой <TD>... </TD>) можно рассматривать, как все рабочее поле и помещать в нее: любой текст, любые изображени€, списки, гиперссылки и так далее. Ѕолее того, в любую €чейку можно поместить другую таблицу. » таким образом можно создать Web Ц документ очень сложной структуры. ћожно добитьс€ внешнего вида газеты, с обилием колонок, рубрик, картинок. »спользу€ атрибуты BGCOLOR = У# цветУ и BACKGROUND=Ф файлФ, которые можно добавить к тэгу <TABLE> или <TR>, или даже <TD>, можно получить довольно сложное мозаичное изображение.

Ќа рисунке показано, чего можно добитьс€, использу€ тэг <TABLE> и приведен соответствующий листинг.

Ћистинг 2 (см. рис.11.1)

<HTML><HEAD><TITLE> ƒемонстраци€ возможностей таблиц

</TITLE></HEAD><BODY>

<!-ƒвойна€ горизонтальна€ лини€ красного цвета - >

<TABLE WIDTH=100%>

<TR><TD BGCOLOR=#FF0000 HEIGH=5></TD></TR>

<TR><TD></TD></TR>

<TR><TD BGCOLOR=#FF0000 HEIGH=1></TD></TR>

</TABLE>

<! Ц ќсновна€ таблица ->

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>

<TR VALING=TOP>

<!-1-й главный столбец - >

<TD WIDTH=260><FONT SIZE=2><IMG SRC=IMG_0185.JPG HEIGHT=227 WIDTH=260><BR><BR>

<B>ѕќЋ≈«Ќџ… —ќ¬≈“</B><BR>

ѕокупа€ компьютер, проверьте, сколько операций он совершает в секунду.

Ќе ленитесь, посчитайте! ѕроверка займет у вас всего одну секунду, зато вы будете уверены на все сто.

</FONT></TD>

<! Ц ¬ертикальна€ лини€ красного цвета - >

<TD WIDTH=5></TD>

<TD BGCOLOR=#FF0000 WIDTH=2></TD>

<TD WIDTH=5></TD>

<!-2-й главный столбец - >

<TD>

<FONT SIZE =2 FACE=ФTahoma, ArialФ><CENTER>

<B> ¬ подвале дома є120 по улице ѕодпольщиков ликвидировали интеллигентский притон. Ќенормальные интеллигенты читали по ночам ѕастернака, слушали ћалера, спорили о высоких матери€х до хрипоты, чем мешали соседнему наркопритону. </B></CENTER></FONT>

<! Ц ¬ертикальна€ лини€ красного цвета - >

<TABLE WIDTH=100%><TR><TD BGCOLOR=#FF0000 HEIGHT=2>

</TD></TR></TABLE>

<! Ц ¬нутренн€€ двух колоночна€ таблица ->

<TABLE>

<TR VALING=TOP>

<! Ц Ћева€ колонка ->

<TD WIDTH=40%><FONT SIZE=1><P><U> ≈сли </U> вы стоите в пробке и опаздываете на лекцию, расслабьтесь и подумайте о чем-нибудь хорошем. </P>

<P><U> ≈сли </U> вы проспали и не услышали будильник, так стоит ли просыпатьс€ все равно опоздали. </P>

<P><U> ≈сли </U> вы получили двойку за экзамен не стоит напиватьс€, лучше отоспатьс€ </P></FONT></TD>

<! Ц ¬ертикальна€ лини€ красного цвета - >

<TD WIDTH=5></TD><TD BGCOLOR=#FF0000 WIDTH=2></TD>

<TD WIDTH=5></TD>

<! Ц ѕрава€ колонка - >

<TD> “–ј√≈ƒ»» ћјЋ≈Ќ№ »’ „≈Ћќ¬≈„ ќ¬ <BR>

<FONT SIZE =2 FACE=ФTahoma, ArialФ><P>

¬ маленьком человечке все должно быть прекрасненько: и личико, и мыслишки, и одежонка .</P>

<P> ” большого человека все большое Ц и пузище, и деньжища и проблешищи. ” маленького Ц наоборот. ” него только одна проблемка замучили уменьшительно-ласкательные суффиксы. </P></FONT></TD>

<TR>

</TABLE>

</TD> <!- «авершение 2-го главного столбца ->

<! Ц ¬ертикальна€ лини€ красного цвета - >

<TD WIDTH=10></TD><TD BGCOLOR=#FF0000 WIDTH=1></TD>

<TD WIDTH=10></TD>

<! - 3-й √лавный столбец>

<TD>

<TD WIDTH=210><FONT SIZE = 2><CENTER><H3> ¬Ќ»ћјЌ»≈ !</H3></CENTER>

¬пишите в ниже предложенный типовой вариант анкеты свои пожелани€ вырежьте с сдайте преподавателю. </FONT>

<BR><BR>

<IMG SRC=123. jpg WIDTH=210>

</TD>

</TR>

</TABLE>

<!-√оризонтальна€ лини€ красного цвета завершающа€ таблицу ->

<TABLE WIDTH =100%><TR><TD BGCOLOR=#FF0000 HEIGHT=5>

</TD>

</TR></TABLE>

</BODY></HTML>

–ис. 11.1 ѕрименение тэга <TABLE>

ѕри всей кажущейс€ сложности HTML Ц документа, представленного на листинге, все довольно просто.

ƒл€ обрамлени€ таблицы, в котором размещен текст и фотографии, горизонтальными лини€ми красного цвета использованы две дополнительные таблицы. ѕерва€ Ц оформл€ет двойную линию, котора€ получена трем€ строками (тэг <TR>): в первой и третьей атрибутом HEIGHT задана высота линии в пиксел€х; втора€ Ц использована дл€ создани€ промежуточной линии цвета фона. Ќижн€€ горизонтальна€ лини€ получена аналогично, но таблица состоит всего из одной строки.

√лавна€ таблица разбита на три колонки, описывающие вертикальные линии Ц разделители (ширина линии задаетс€ атрибутом WIDTH тэга <TD>). ¬ среднем столбце, после текстового сообщени€ внедрено еще две таблицы: дл€ задани€ внутренней горизонтальной линии красного цвета и двух колоночна€ таблица (колонки в ней также разделены вертикальным разделителем).

¬се остальные элементы получены уже известными нами тэгами форматировани€ и внедрени€ изображений: <FONT>, <BR>, <P>, <CENTER>, <H>, <U>. ѕроанализируйте текст листинга, свер€€ его с рисунком, вы увидите, что все довольно просто, главное не запутатьс€ в замыкающих тэгах </TR> и </TD>. “аблицы дают разработчику полную свободу. ќднако, увлекатьс€ этим не стоит, потому что злоупотребление таблицами может привести к обратному эффекту, когда посетитель сайта просто не найдет информации запутавшись в колонках.

‘–≈…ћџ

—тандартный документ HTML Ц занимает всю рабочую область Web Ц браузера. ћанипул€ции с полосами прокрутки привод€т к скроллингу всего текста (и внедренного в него изображений). Ќо подчас требуетс€ какую-то часть документа сделать независимой от скроллинга всего остального текста, например, главные ссылки желательно всегда оставл€ть в пределах видимости.

HTML представл€ет возможность разбивать всю рабочую область Web Ц браузера на несколько независимых друг от друга пр€моугольных областей Ц так называемых фреймов (от англ. frame Ц рамка, кадр). — помощью тэга <TABLE> также как будто бы можно разбить окно браузера на р€д пр€моугольных областей, но все они будут существовать в рамках одного HTML Ц документа. ‘реймы позвол€ют не просто визуально поместить в одном окне несколько областей, но Ц что гораздо важнее, в каждую такую область загружать отдельный HTML Ц документ. »спользу€ фреймы, Web Ц разработчик имеет возможность в одну область поместить документ с кнопками навигации, а другую использовать дл€ загрузки необходимой информации.

ƒл€ установки правила разбивки существует тэгова€ пара <FRAMESET> </FRAMESET>, имеющие следующие атрибуты:

Ј ROWS, устанавливает разбивку по строкам.

Ј COLS, устанавливает разбивку по столбцам.

Ј BORDERS, задает толщину обрамл€ющей рамки между фреймами.

јтрибуты ROWS и COLS не могут быть использованы одновременно в одном тэге <FRAMESET>, то есть одним тэгом можно разбить экран только на строки, либо на столбцы. Ќо зато любую строку (или столбец), в свою очередь также можно Ђпорезатьї на части, что напоминает построение таблицы, внутри €чеек, которых могут быть другие вложенные таблицы. –азбивка задаетс€ как в пиксел€х, так и в процентах от размера разбиваемой области.

Ќе достаточно просто указать структуру разбиени€ рабочей поверхности Web Ц браузера, необходимо указать какой именно HTML Ц документ должен быть загружен в тот или иной фрейм. ƒл€ этого имеетс€ тэг <FRAME>, который используетс€ без закрывающейс€ пары. Ётот тэг имеет следующие атрибуты:

Ј SRC (об€зательный), задает URL загружаемого во фрейм документа.

Ј NAME (об€зательный), задает уникальное им€ фрейма, которое затем может быть использовано в атрибуте TARGET тэга <A>. »м€ фрейма может быть использовано, когда список ссылок расположен в одном фрейме, загружать документ требуетс€ в другой

Ј MARGINWIDTH, задает отступ по ширине.

Ј MARGINHEIGHT, задает отступ по высоте.

Ј SCROLLING, может принимать значени€ УNOФ или УAUTOФ, которые соответственно запрещают или разрешают скроллинг документа в этом фрейме.

Ј NORESIZE, запрещает изменение размера фрейма. ≈сли этот атрибут не указан, Web Ц браузер предоставл€ет возможность измен€ть размер фрейма приблизительно так же, как измен€етс€ размер окна Ц с помощью мыши.

ѕоскольку не все браузеры поддерживают фреймы, существует тэгова€ пара <NOFRAMES> </NOFRAMES>, которую можно использовать дл€ описани€ стандартного тела документа. Ќеобходимость такого описани€ возникает, если браузер не поддерживает фреймы, в противном случае весь текст, расположенный между этой тэговой парой будет проигнорирован.

Ћистинг 3 ѕример создани€ листинга дл€ ‘реймов

<HTML>

<HEAD><TITLE> ‘–≈…ћџ </TITLE></HEAD>

<FRAMESET BORDER =0 FRAMEBORDER=0 COLS=Ф30%,*Ф>

<FRAME SRC=06_left.htm NAME=MENU_FRAME MARGINWIDTH=0

MARGINHEIGHT=0 NORESIZE>

<FRAME SRC=06.htm NAME=WORK_FRAME MARGINWIDTH=0

MARGINHEIGHT=0 SCROLLING=AUTO>

</FRAMESET></HTML>

Ћистинг 4. (рис. 11.2)

<HTML>

<BODY BGCOLOR=#AA9900>

<BR><BR>

<FONT SIZE=4 FACE= УTahome ArialФ>

<CENTER>‘рейм: MENU_FRAME<BR><BR>

<A HREF=06_right.htm TARGET=ФWORK_FRAMEФ>

ѕ≈–¬јя —“–јЌ»÷ј </A><BR>

<A HREF=XXXXX.htm TARGET=ФWORK_FRAMEФ>

¬“ќ–јя —“–јЌ»÷ј </A><BR>

<A HREF=YYYY.htm TARGET=ФWORK_FRAMEФ>

“–≈“№я —“–јЌ»÷ј </A><BR>

</CENTER>

</FONT></BODY></HTML>

–ис. 11. 2 –езультат листинга HTML Ц документа 06_left.htm

Ћистинг 5 (см. рис 11.3)

<HTML>

<BODY BACKGROUND=Forest.jpg TEXT=#FFFFFF>

</BODY><CENTER>

<H1> ѕ–ј¬џ… ‘–≈…ћ WORK_FRAME </H1>

</CENTER></HTML>

–ис. 11. 3 –езультат листинга 5 HTML Ц документа 06.htm


 

Ћистинг 6 (см. рис. 11.4)

<HTML>

<HEAD><TITLE> ‘–≈…ћџ </TITLE></HEAD>

<FRAMESET BORDER=0 FRAMEBORDER=0 COLS=30%,*>

<FRAME SRC=06_left.htm NAME=MENU_FRAME MARGINWIDTH=0

MARGINHEIGHT=0 NORESIZE>

<FRAME SRC=06.htm NAME=WORK_FRAME MARGINWIDTH=0

MARGINHEIGHT=0 SCROLLING=AUTO>

</FRAMESET></HTML>

–ис. 11. 4 “ипова€ разбивка рабочей области браузера на два фрейма.

‘ќ–ћџ

HTML Ц это не €зык программировани€, но и он представл€ет возможность дл€ организации диалога между пользователем и сервером, позвол€€ организовать ввод некоторой информации передачу ее на сервер дл€ обработки. Ёту функцию берут на себ€ так называемые формы.

‘ормы в HTML аналогичны диалоговым панел€м в типовых программах, они имеют тот же набор, элементов: текст, строки ввода, кнопки, списки и так далее.

‘орма начинаетс€ с тэга <FORM>, а заканчиваетс€ </FORM>.

Ётот тэг имеет следующие атрибуты:

Ј NAME Ц им€ формы, которое может быть использовано дл€ обработки средствами €зыка JavaScript.

Ј ACTION Ц указывает действие, которое будет произведено над внедренными данными.

Ј METHOD Ц способ посылки данных серверу.

— помощью атрибута ACTION можно перенаправить введенные данные на собственный почтовый €щик. ƒл€ этого следует атрибут оформить следующим образом:

ACTION=mailto:name@mail.ru

јтрибут METHOD может принимать два значени€:

Ј METHOD=GET

Ј METHOD=POST

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

—трока ввода

‘ормат тэга дл€ получени€ строки ввода текста следующий

<INPUT TYPE=TEXT NAME=F1 SIZE=15 MAXLENGTH=50>

“о, что именно строка ввода, определ€етс€ значением атрибута TYPE. јтрибут NAME задает уникальное им€ пол€. „тобы оно было уникальным в пределах одной HTML Ц страницы не должно быть двух элементов с одним именем.

јтрибуты SIZE и MAXLENGTH задают ширину строки ввода и максимально допустимую длину вводимой строки соответственно. „астным случаем строки ввода €вл€етс€ строка ввода парол€, задаваема€ значением PASSWORD атрибута TYPE. ¬ этом случае при вводе вместо символов на экране будут отображатьс€ звездочки:

<INPUT TYPE=PASSWORD NAME=F2 SIZE=5 MAXLENGTH=7>

 нопки с зависимой фиксацией

«начение RADIO атрибута TYPE позвол€ет создать радио-кнопку. ѕри этом тэг использует дополнительные атрибуты VALUE и CHECKED:

<INPUT TYPE=RADIO NAME=R1 VALUE=ok CHECKED> ’орошо

<INPUT TYPE=RADIO NAME=R1 VALUE=bad> ѕлохо

<INPUT TYPE=RADIO NAME=R1 VALUE=null> Ќикак

¬ этом примере создаетс€ три радио-кнопки дл€ ввода ответа на некий вопрос (дл€ типовых ответов: Ђхорошої, Ђплохої, Ђникакї). ќбратите внимание, что атрибут NAME имеет во всех трех случа€х одинаковое значение. ¬ противном случае эти три кнопки не состав€т единую группу.  роме того, в первом тэге указан атрибут CHECKED, который задает первоначально выделенную кнопку.

 нопки с независимой фиксацией.

«начение атрибута CHECKBOX атрибута TYPE позвол€ет создать кнопку с независимой фиксацией.

<INPUT TYPE= CHECKBOX NAME=с1 VALUE=red CHECKED>  расный

<INPUT TYPE= CHECKBOX NAME=с1 VALUE=width> Ўирокий

¬ этом примере также значени€ атрибута NAME равны, а атрибут CHECKED устанавливает выделенную кнопку. ¬ данном случае можно было этот атрибут присвоить и второй кнопке или не ставить его вовсе.

 нопка выполнить

 ак уже было сказано выше, тэг <FORM> имеет атрибут ACTION, который указывает на то, какое действие необходимо произвести с заполненной формой. —амо действие начнет выполн€тьс€ только после, того, как пользователь нажмет на кнопку Ђ¬ыполнитьї. Ёта кнопка создаетс€ также при помощи тэга <INPUT>, атрибут которого TYPE имеет значение SUBMIT

<INPUT TYPE=SUBMIT VALUE=¬ыполнить>

«начение атрибута VALUE задает текст, который по€витс€ на кнопке.

 нопка восстановить значение по умолчанию.

»ногда, при слишком сложной форме, пользователь, запутавшись с вводом, может испытывать потребность восстановить ее первоначальное состо€ние. ƒл€ этого существует специальна€ кнопка. ƒл€ ее показа необходимо установить значение атрибута TYPE в RESET.

<INPUT TYPE= RESET VALUE=ќчистить форму>

—крытое поле

¬ форму можно включать пол€ ввода, которые имеют определенное значение и передаютс€ на сервер, но на экран не вывод€тс€. “акое поле используетс€ в р€де специфических случаев, например, когда сервер хочет проконтролировать очередной запрос пользовател€. —крытое поле получаетс€, если атрибут TYPE присвоить значение HIDDEN.

<INPUT TYPE= HIDDEN NAME=hidd VALUE=«апрос_2>

—писки

–аскрывающийс€ список создаетс€ парным тэгом <SELECT>.  ажда€ строка списка задаетс€ тэгом <OPTION>, причем элемента, который будет выбран первоначально, требуетс€ указать атрибут SELECTED/

<SELECT NAME=lst1 MULTIPLE>

<OPTION SELECTED>ѕервый</OPTION>

<OPTION>¬торой</OPTION>

<OPTION>“ретий</OPTION>

</SELECT>

¬ примере создаетс€ список из трех элементов (Ђѕервыйї, Ђ¬торойї, Ђ“ретийї). ѕричем первый элемент выбран по умолчанию. јтрибут MULTIPLE указывает на то, что возможен выбор более, чем одного элемента. ≈сли этого не требуетс€ Ц атрибут MULTIPLE можно опустить.

¬вод текстового массива

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

<TEXTAREA NAME=comml ROWS=5 COLS=50>

 омментарий.

¬ведите любую текстовую информацию

</TEXTAREA>

¬ созданном таким образом окне можно редактировать текст, как в стандартном текстовом редакторе.

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

Ћистинг 7

<HTML><HEAD>

<TITLE> ѕ–»ћ≈– ‘ќ–ћџ </TITLE></HEAD>

<!-“ело HTML-ƒокумента->

<BODY> <P ALIGN=LEFT>

<FORM NAME=talk ACTION=mailto:xxx_main@mail.ru METHOD=POST>

<HR>

<CENTER> ѕожалуйста, заполните мою анкету: </CENTER>

<HR> ¬аше им€:

<INPUT TYPE=TEXT NAME=name SIZE=35>

¬аш e-mail:

<INPUT TYPE=TEXT NAME= e-mail SIZE=35>

¬аш возраст (лет):

<INPUT TYPE=RADIO NAME=years VALUE=o-le15>ћладше 15

<INPUT TYPE=RADIO NAME=years VALUE=o-15-25 CHECKED> 15-25

<INPUT TYPE=RADIO NAME=years VALUE=o-26-35> 26-35

<INPUT TYPE=RADIO NAME=years VALUE=o-36-60> 36-60

<INPUT TYPE=RADIO NAME=years VALUE=o-old60> —тарше 60

<BR>

ћесто вашего проживани€

<SELECT NAME=city>

<OPTION SELECTED> ћосква </OPTION>

<OPTION SELECTED> —-ѕетербург </OPTION>

<OPTION SELECTED> —амара </OPTION>

<OPTION SELECTED>  урск </OPTION>

<OPTION SELECTED> Ѕрест </OPTION>

<OPTION SELECTED> Ќовосибирск </OPTION>

<OPTION SELECTED> ƒругое </OPTION>

</SELECT>

<HR>

¬ам понравилс€ мой сайт?

<INPUT TYPE CHECKBOX NAME=mark VALUE=Yes><BR><BR>

¬аши пожелани€: <BR>

<TEXTAREA NAME=comment ROWS=5 COLS=50>

“еперь осваивай CGI:))

</TEXTAREA>

<BR>

<INPUT TYPE=SUBMIT VALUE=ѕослать запрос>

<INPUT TYPE=RESET VALUE=ќчисть форму>

</FORM>

</P></BODY></HTML>

–ис. 11. 5 ѕример формы

— помощью такой формы можно собирать информацию о посетител€х сайта.





ѕоделитьс€ с друзь€ми:


ƒата добавлени€: 2015-01-29; ћы поможем в написании ваших работ!; просмотров: 1013 | Ќарушение авторских прав


ѕоиск на сайте:

Ћучшие изречени€:

—тремитесь не к успеху, а к ценност€м, которые он дает © јльберт Ёйнштейн
==> читать все изречени€...

433 - | 432 -


© 2015-2023 lektsii.org -  онтакты - ѕоследнее добавление

√ен: 0.114 с.