Вычислительная техника Лабораторный практикум (стр. 2 )

Партнерка на США и Канаду по недвижимости, выплаты в крипто

30% recurring commission
Выплаты в USDT
Вывод каждую неделю
Комиссия до 5 лет за каждого referral

&emsp-создаёт em - пробел.

&nbsp-создаёт неразрывный пробел.

Указатель объекта всегда записывают строчными буквами.

-----

ТЕГ ПРИМЕРОВ (HTML 2.0)

------

Теги <XMP></XMP> представляют фрагмент программы на HTML не как код, а как текст. Броузер в этом случае покажет всё, что заключено между тегами. Это удобно в учебных целях.

------

ТЕГ <BLINK> (NETSCAPE NAVIGATOR И MICROSOFT INTERNET EXPLORER)

------

Обеспечивает мигание. Чтобы объект мигал, заключите его в теги <BLINK> и </BLINK>.

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

Изучение команд языка HTML(продолжение 3)

HTML (HyperText Markup Languag)- язык разметки гипертекста или язык описания документов системы WWW(WORLD WIDE WEB)- гипертекстовой системы поиска ресурсов Internet и доступа к ним.

Цель работы: Получить дополнительные навыки работы с командами языка HTML - тегами и атрибутами.

------

ФОРМЫ

------

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

Многие старые броузеры не поддерживают тег <mailto:>, поэтому создать форму и заставить её работать, не одно и то же.

------

КАК СДЕЛАТЬ, ЧТОБЫ ВАША ФОРМА ХОРОШО СМОТРЕЛАСЬ

------

Проблема элегантности не имеет простого решения. Проще всего, разместить область ввода и все ниспадающие меню слева, а весь сопроводительный текст справа. Ширина области ввода задаётся атрибутом SIZE=. Это упрощает выравнивание. Следует оставить промежуток между левой и правой областями.

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

------

Пример № 1. Программа.

<HTML>

<BODY>

<FORM>

<CENTER><H1>текст заголовка</H1>

<TABLE>

<TR>

<TD>

First<INPUT NAME="First" SIZE="20"><BR>

Last<INPUT NAME="Last" SIZE="20"><BR>

Address<INPUT NAME="Adress" SIZE="20"><BR>

City<INPUT NAME="City" SIZE="20"><BR>

State<INPUT NAME="State SIZE="20"><BR>

ZIP<INPUT NAME="ZIP" SIZE="20"><BR>

<TD>

<INPUT NAME="First" SIZE="20">First<BR>

<INPUT NAME="Address" SIZE="20">Address<BR>

<INPUT NAME="State" SIZE="20">State<BR>

</TR>

</TABLE>

</FORM>

</CENTER>

</BODY>

</HTML>

-----

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

------

В ВЫПАДАЮЩИХ МЕНЮ ЗАДАВАЙТЕ ПО УМОЛЧАНИЮ ПУСТОЕ ПОЛЕ

-------

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

------

Пример № 2. Программа.

<HTML>

<BODY>

Please select the type of dog you fancy.<BR>

<OPTION>Bluetick coonhound

<OPTION>Toy poodle

<OPTION>Australian shephard

<OPTION>Blue heeler

<OPTION>Pembroke welsh corgi

</SELECT>

<P>

НЕ нашли? Не то? Что вы ищете?

</FORM>

</BODY>

</HTML>

-----

Пример № 3. Программа.

Эта программа практически полностью совпадает с предыдущей за исключением первой строки с тегом <OPTION> в которой после <OPTION> должно быть набрано - No Selection без чёрточки.

------

КАК ЗАСТАВИТЬ ФОРМУ РАБОТАТЬ

------

Как сделать так, чтобы она отсылала на сервер введенные данные. Это делается просто. Формально достаточно написать в теге <FORM> атрибут ACTION= и сделать ссылку на URL программы, которая способна обработать входные данные и сделать с ними что-нибудь полезное.

------

КУДА ПЕРЕСЫЛАТЬ ДАННЫЕ

------

Для этого есть несколько возможностей. Полученные данные должны быть переданы программе, поддерживающей Common Gateway Interface (CGI). Она находится где-то в Web, необязательно в одном Web - сервере с самой формой. Если нельзя запустить приложение CGI на своём узле и в вашем Web - мастере нет средств для работы с формами, есть возможность найти, кто произведёт необходимую обработку. В этом направлении действуют несколькими способами:

1. Пользуются сервисом обработки форм.

2. Инсталлируют написанную кем-то программу CGI.

3. Создают собственную программу CGI.

УСЛУГИ ПО ОБРАБОТКЕ ФОРМ

-------

Самый простой путь - найти в Internet человека, который выполнит для Вас обработку форм. За это платят. Недорого. Им может быть Ваш собственный Web- провайдер.

Если Вы договорились, остаётся указать в атрибуте ACTION= соответствующий URL. После этого все данные, введенные пользователями в Ваши формы. будут упакованы в электронное сообщение и отправлены Вам.

Для каждой заполненной формы Вы получите по одному сообщению:

To:<*****@***com>

From: "Bubba`s Form Hadlin` Service" <*****@***com>

Subject: краткая аннотация.

Если у Вас несколько заполненных форм, желательно сортировать заполненные формы. Для этого хорошо иметь скрытое поле имени, например, "Formname". По нему легко разобраться в формах.

Полученное письмо удобно обработать автоматическим почтовым фильтром, например, procmail или slocal для UNIX или Windovs. Обработанные сообщения сравниваются и помещаются в базу данных. Их используют, также, для корректировки исходной Web - страницы.

------

ИСПОЛЬЗОВАНИЕ ЧУЖОЙ ПРОГРАММЫ CGI

------

В Web очень много программ для обработки форм. Они делают то-же самое, что и службы по обработке форм. Есть специальные сценарии по отправке форм. Главное заключено в способности Вашего Web-допускать использование программ CGI. Некоторые провайдеры такое разрешение могут не дать. Придётся обращаться за услугами со стороны. Есть и определённые трудности.

------

СОЗДАНИЕ СОБСТВЕННОЙ ПРОГРАММЫ (CGI)

------

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

-----

Задание. Изучить предложенные примеры. Предложить варианты их модификации.

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

Изучение команд языка HTML(продолжение 4)

HTML(HyperText Markup Languag)- язык разметки гипертекста или язык описания документов системы WWW(WORLD WIDE WEB)- гипертекстовой системы поиска ресурсов Internet и доступа к ним.

Цель работы: Получить дополнительные навыки работы с командами языка HTML - тегами и атрибутами.

------

ТАБЛИЦЫ

------

WEB-дизайнеры нашли массу способов применения таблиц. Тег <TABLE> стал мощным орудием компоновки объектов на странице. Он применим для размещения текстов и графики в разных местах страницы. Раньше это делали только с помощью подпольного HTML.

-----

ОСНОВНЫЕ МЕТОДЫ СОЗДАНИЯ ТАБЛИЦ

------

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

------

ТЕГИ <TABLE> и </TABLE>

----

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

------

ТЕГИ <TR> и </TR>

------

Эти теги (сокращение от Table Row - строка таблицы) должны окружать каждую строку таблицы. Две строки таблицы программируются двумя наборами тегов. Если наборов восемь, в таблице будет восемь строк.

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

-----

Пример № 1. Программа.

<HTML>

<BODY>

<H1 ALIGN=CENTER>текст заголовка</H1>

<TR>

<TD COLSPAN=3>текст</TD>

</TR>

<TR>

<TD>текст</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Эта программа отобразит на экране заголовок и таблицу с двумя строками. Последняя строка распадётся на три части - ячейки.

------

ТЕГИ <TD></TD>

------

В пределах таблицы размещаются ячейки с данными. В ячейках размещают текст или рисунки. Любая ячейка окружается тегами <TD></TD>. Число пар тегов определяет число ячеек. Строка с пятью парами тегов состоит из пяти ячеек.

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

------

Пример № 2. Программа.

<HTML>

<BODY>

<TR>

<TD>текст</TD>

</TR>

<TR>

<TD>текст</TD>

</TR>

</TABLE>

</BODY>

</HTML>

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

------

ТЕГИ <TH></TH>

------

Пары тегов <TH> (Table Header, заголовок таблицы) используют при создании заголовков столбцов и строк в пределах таблиц. Текст между тегами автоматически записывается жирным шрифтом и по умолчанию располагается в середине ячеек. Аналогичный эффект достигается с помощью пары тегов <TD></TD>, тега <B> и атрибута <ALIGN=CENTER>.

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

В следующем примере встречаются атрибуты COLSPAN= и ROWSPAN=. Они будут обсуждены ниже.

------

Пример № 3. Программа.

<HTML>

<BODY>

<TR>

<TH>текст</TH>

<TH COLSPAN=2>текст</TH>

</TR>

<TR>

<TH>текст</TH>

<TD>текст</TD>

</TR>

<TR>

<TH ROWSPAN=3>текст</TH>

<TD>текст</TD>

</TR>

<TR>

<TD>текст</TD>

</TR>

<TR>

<TD>текст</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Эта программа сроит таблицу, в которой жирным шрифтом выделены заголовки строк и столбцов.

-----

АТРИБУТ NOWRAP

-----

Если текст не вмещается в одну строку ячейки, делается переход на следующую строку. Предлагаемый атрибут с тегами <TH></TH> и <TD></TD> длину ячейки расширяет на столько, что заключённый в ней текст размещается в одной строке. Он полезен, например, в рекламе.

------

АТРИБУТ COLSPAN= (COLUMN SPAN, СОЕДИНЕНИЕ СТОЛБЦОВ)

------

Такой атрибут модифицирует теги <TH></TH> и <TD></TD>. Он позволяет делать любую ячейку шире, чем верхняя или нижняя.

------

АТРИБУТ ROWSPAN=

------

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

------

АТРИБУТ WIDTH=

------

Применяется в двух случаях. В первом, его включают в тег <TABLE> и задают ширину всей таблицы.

Во втором, его используют в тегах <TR></TR> или <TH></TH> управляя шириной ячеек или группы ячеек.

Ширина указывается в пикселях или процентах. Если в теге <TABLE> WIDTH=250, таблица будет шириной 250 пикселей независимо от ширины страницы на реальном мониторе.

Размер WIDTH=50% в теге <TABLE> задаст таблицу шириной в половину страницы при любом изображении на экране.

В случае пикселей возможно автоматическое появление полосы прокрутки внизу экрана, если таблица оказывается шире области просмотра.

------

Пример № 4. Программа.

------

<HTML>

<BODY>

<TR>

<TD ALIGN=CENTER>текст</TD>

</TR>

</TABLE>

or<BR>

<TR>

<TD ALIGN=CENTER>текст</TD>

</TR>

</TABLE>

or<BR>

<TR>

<TD ALIGN=CENTER>текст</TD>

</TR>

</TABLE>

or<BR>

<TR>

<TD ALIGN=CENTER>текст</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Некоторые броузеры не воспринимают знак %. при задании размеров. Эта проблема решается заданием в атрибуте UNIT= единиц измерения, например, RELATIVE (относительно). Атрибут используется в теге <TABLE>.

------

АТРИБУТ UNIT=

------

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

1. UNIT=EN-присваивается по умолчанию. Задаёт единицу измерения равную EN-пробелу. Его ширина равна ширине буквы "n" и зависит от размера шрифта, т. е. его высоты. С другой стороны, EN - пробел равен половине высоты шрифта. Для 12- пунктового шрифта он равен 6 пунктам, для 8- пунктового – четырём пунктам. Это типографская единица измерения.

2. UNIT=RELATIV задаёт ширину столбцов в процентах относительно общей ширины таблицы. Это избавляет от необходимости определять сами проценты. Поддерживается большим количеством броузеров. Вводимые числа воспринимаются как ширины столбцов в процентах.

3. UNIT=PIXELS-применяется, когда необходимо знать ширину столбцов точно. Тег <TABLE UNIT=PIXELS WIDTH=340> образует таблицу с шириной 340 пикселей. В мониторах с разным разрешением таблица, измеренная в пикселях, будет занимать разное место.

------

АТРИБУТ COLSPEC=

------

Используется совместно с атрибутом UNIT=. Определяет, сколько места занимает каждый столбец таблицы, как в нём выравниваются данные. Применяется только в теге <TABLE>.

COLSPEC= описывает все столбцы. Для каждого из них он задаёт способ выравнивания и размер. Существует пять способов выравнивания: L-по левому краю, С - по центру, R - по правому краю, J-по правому и левому краю, D - по десятичной запятой. Например, для пяти столбцов ширина столбца и тип выравнивания задаются следующим образом:

Числа после типов выравнивания показывают ширины столбцов в пикселах.

------

АТРИБУТ DP=

------

DP= (Decimal Point, десятичная запятая) определяет символ, который отделяет целые от дробных в десятичных дробях. DP="."(по умолчанию) задаёт точку, DP="," задаёт запятую.

------

ПУСТЫЕ ЯЧЕЙКИ

------

Без данных ячейка не будет иметь границ. Чтобы ячейка имела границы, но не имела содержимого, в неё должно быть помещено, нечто не видимое при воспроизведении. Например, следует воспользоваться пустой строкой или неразрывным пробелом(&nbsp). Пустота содержимого столбцов обеспечена и в том случае, если задать их ширину в пикселях или относительных единицах и не ввести в полученные ячейки никаких данных. Используют, также, пустые GIF-изображения.

Однако, лучше использовать неразрывные пробелы или атрибут WIDTH=. Страница загружается и отображается быстрее.

------

АТРИБУТ CELLPADDING=

------

Задаёт поля внутри ячейки - пространство между содержимым и границами ячейки.

------

Пример № 5. Программа.

<HTML>

<BODY>

<TR>

<TD>текст</TD>

</TR>

<TR>

<TD>текст</TD>

</TR>

</TABLE>

<BR>

<TR>

<TD>текст</TD>

</TR>

<TR>

<TD>текст</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

В тегах <TABLE></TABLE> отцентрирована вся таблица. Содержимое центрируется отдельно.

-----

АТРИБУТЫ ALIGN= и VALIGN=

------

Позволяют модифицировать теги <TR>,<TD> и <TH>.Тег <ALIGN> определяет выравнивание текста и графики по горизонтали(по левому или правому краю и центру).Горизонтальное выравнивание задаётся несколькими способами:

ALIGN=BLEEDLEFT - прижимает содержимое ячейки вплотную к левому краю.

ALIGN=LEFT - выравнивает содержимое ячейки по левому краю с учётом отступа, задаваемого атрибутом CELLPADDING=.

ALIGN=CENTER - помещает содержимое ячейки по центру.

ALIGN=RIGHT - выравнивание по правому краю ячейки с учётом отступа, задаваемого атрибутом CELLPADDING=.

------

Пример № 6. Программа.

<HTML>

<BODY>

<TR>

<TD ALIGN=LEFT>текст</TD>

<TD ALIGN=CENTER>текст</TD>

<TD ALIGN= RIGHT>текст</TD>

</TR>

<TR>

<TD ALIGN=RIGHT>текст</TD>

<TD ALIGN=CENTER>текст</TD>

<TD ALIGN=LEFT>текст</TD>

</TR>

<TR>

<TD ALIGN=RIGHT>текст</TD>

<TD ALIGN=RIGHN>текст</TD>

<TD ALIGN=RIGHT>текст</TD>

</TR>

<TR>

<TD ALIGN=CENTER>текст</TD>

</TR>

<TR>

<TD ALIGN=LEFT>текст</TD>

<TR>

</TABLE>

</BODY>

</HTML>

-----

Атрибут VALIGN= выравнивает текст и графику в ячейках по вертикали. Выравнивание задаётся несколькими способами:

VALIGN=TOP - по верхней границе ячейки.

VALIGN=MIDDLE - центрирование содержимого ячейки.

VALIGN=BOTTOM - по нижней границе ячейки.

------

Пример № 7. Программа.

<HTML>

<BODY>

<TR>

<TD WIDTH=100>текст</TD>

<TD VALIGN=TOP>текст</TD>

<TD VALIGN=MIDDLE>текст</TD>

<TD VALIGN=BOTTOM>текст</TD>

</TR>

<TD>текст</TD>

</TR>

<TD>текст</TD>

</TR>

<TD>текст</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

-----

ТЕГ <CAPTION>

------

Позволяет задавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над таблицей(<CAPTION=TOP>), либо под таблицей(<CAPTION=BOTTOM>)

------

Пример № 8. Программа.

<HTML>

<BODY>

<CAPTION ALIGN=TOP>текст</CAPTION>

<TR>

<TD>текст</TD>

</TR>

</TABLE>

<CAPTION ALIGN=BOTTOM>текст</CAPTION>

<TR>

<TD>текст</TD>

</TR>

</TABLE>

</BODY>

</HTML>

------

Заголовок разрешается составлять из любого текста и изображений. Текст разбивается на строки по ширине таблицы. В некоторых случаях тег <CAPTION> используют для подписей под рисунками. Для этого описывают таблицу без границ.

------

Пример № 8. Программа.

<HTML>

<BODY>

<TABLE>

<CAPTION ALIGN=BOTTOM>текст</CAPTION>

<TR>

<TD>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

------

АТРИБУТ BORDER=

------

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

Если в теге <TABLE> не задать рамку, то получится таблица без линий. Только под линии будет отведено пустое место. Такой же результат получается, если задать <TABLE BORDER=0>.

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

------

Пример № 9. Программа.

<HTML>

<BODY>

<TR>

<TD ALIGN=CENTER><H2>текст</H2>

<TR>

<TD ALIGN=CENTER COLSPAN=4><H3>текст</H3></TD>

</TR>

<TR>

<TD ALIGN=CENTER>текст</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

------

АТРИБУТ CELLSPACING=

------

Определяет в пикселях ширину промежутков между ячейками. По умолчанию задаётся величина равная двум пикселям. Пустое место в ячейке получают вписывая в ячейку пробел.

------

Пример № 10. Программа.

<HTML>

<BODY>

<TR>

<TD>текст</TD>

</TR>

<TR>

<TD>текст</TD>

</TR>

</TABLE>

<TR>

<TD>текст</TD>

</TR>

<TR>

<TD>текст</TD>

</TR>

</TABLE>

<TR>

<TD>текст</TD>

</TR>

<TR>

<TD>текст</TD>

<TD>текст</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

-----

С помощью CELLSPACING= рисуют, например, толстые рамки вокруг текста или графики.

-----

Пример № 11. Программа.

<HTML>

<BODY>

<CAPTION ALIGN=BOTTOM>текст</CAPTION>

<TR>

<TD>

<TR>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

------

ТВОРЧЕСКОЕ ИСПОЛЬЗОВАНИЕ ТАБЛИЦ

------

Тег <TABLE> позволяет создавать рамки с тенью. Ячейки получаются выпуклыми.

------

Пример № 12. Программа.

<HTML>

<BODY>

<TR>

<H1>текст</H1>

<H3>текст</H3>

<TR>

<TD ALIGN=><I>текст</I></TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Ячейка получается выпуклой.

------

РАЗБИЕНИЕ ТЕКСТА НА КОЛОНКИ

------

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

------

Пример № 13. Программа.

<HTML>

<BODY>

<TR>

<H2>текст</H2>

<H3>текст</H3>

</TD>

</TR>

<TR>

текст

</TD>

текст

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Здесь запрограммирован текст с заголовками, набранный в две колонки.

------

Использование колонок позволяет избавиться от прокрутки.

------

Пример № 14. Программа.

<HTML>

<BODY>

<TD><FONT FACE="ARIAL" COLOR=WHITE SIZE=2>текст </FONT></TD>

<TD><FONT FACE="ARIAL" COLOR=WHITE SIZE=2>текст</FONT></TD>

</TR>

<TR>

<FONT FACE="ARIAL SIZE=2">текст</FONT></TD>

<FONT FACE="ARIAL" SIZE=2>текст</FONT></TD>

<FONT FACE="COURIER NEW" SIZE=2>текст</FONT></TD>

<FONT FACE="ARIAL" SIZE=2>текст</FONT></TD>

</TR>

</TABLE>

</BODY>

</HTML>

Здесь текст распределён в четырёх колонках с заголовками. Это позволяет обойтись без прокрутки.

------

ИСПОЛЬЗОВАНИЕ ТАБЛИЦ В ДИЗАЙНЕ СТРАНИЦ

------

Возможность делать границы таблиц невидимыми является приятным свойством таблиц. Это позволяет с помощью тега <TABLE> красиво размещать на странице текст и графику так, что читатель не будет знать об этом. Тег <TABLE> незаменим при форматировании в HTML.

Из за большого объема этот материал размещен на нескольких страницах:
1 2 3

Вычислительная техника Лабораторный практикум (стр. 2 )

Партнерка на США и Канаду по недвижимости, выплаты в крипто

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы