Лабораторная работа №1 «Структура и форматирование HTML-документа»

Лабораторная работа №1 «Структура и форматирование HTML-документа»

Представление информации в сети Интернет

Вся информация в сети Интернет хранится в виде страниц с гипертекстовыми связями – ссылками на другие страницы. Такие страницы еще называют Интернет-страницами, web-страницами, HTML-страницами или HTML-документами.

Web-страничка – это обычный текстовый файл в соответствующей кодировке, с расширением *.htm, *.html, *.dhtml, *.shtml и т. д. В нем описывается вся страничка с помощью специального языка – HTML (hypertext mark-up language – гипертекстовый язык разметки документов).

В основе HTML лежат теги. Теги – это управляющие элементы, которые определяют параметры отображения той или иной части HTML-документа: размер, цвет и начертание символов, размеры рисунка, выравнивание абзацев, расположение объектов на странице и т. д.

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

Часто, говорят web-сайт и web-странички, чем же они отличаются? Web-страничка (иногда еще говорят, HTML-страничка) – это текстовый файл, написанный на языке HTML в определенной кодировке и с определенным расширением. Когда говорят о web-страничке, подразумевают один, два или три таких файла, которые могут быть связаны друг с другом или нет, иметь ссылки на другие ресурсы Интернета или нет.

А web-сайт содержит много (больше трех) файлов в формате HTML, обязательно связанных между собой гиперссылками. Как правило, все эти файлы оформлены в едином стиле, имеют одно и то же расширение и посвящены одной или нескольким связанным между собой темам.

Создавать web-странички можно как вручную – путем написания кода на HTML (в любом текстовом редакторе, например, «Блокноте»), так и с помощью специальных визуальных редакторов («Microsoft FrontPage», «Macromedia Dreamweaver»).

Каждый способ имеет ряд плюсов и минусов.

Визуальные редакторы позволяют создавать web-странички без особых знаний HTML. Кроме того, при создании странички более сложной структуры, гораздо удобнее «видеть» ее.

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

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

Как было сказано выше, чтобы создавать страничку вручную, нужны знания основ HTML.

Структура HTML-документа

HTML-документ (или web-страничка) создается в любом текстовом редакторе и представляет собой простой текстовый документ, в который вставлены флаги разметки – «теги» (markup tags).

Все теги записываются в угловых скобках - < >. Существуют теги парные (имеют открывающийся элемент, заключенный в угловых скобках < >, и закрывающийся, заключенный между < / > ) и непарные.

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

HTML-документ состоит из двух частей: голова (HEAD) и тело (BODY).

Голова HTML-документа заключается между парными тегами < HEAD> и < /HEAD>. В нем указывается заголовок (название) создаваемой web-странички (при просмотре в окне браузера оно отображается в заголовке окна браузера) и определяется кодировка страницы.

Заголовок странички располагается между парными тегами < TITLE> и < /TITLE>. Например,

< TITLE> Моя страничка < /TITLE>

Кодировка HTML-документа используется для отображения на странице символов кириллицы. Самые распространенные кодировки – это «Windows-1251» (стандарт Windows) и «KOI8-r» (стандарт UNIX и некоторых других систем). Соответственно символы кириллицы могут быть закодированы в одном из этих стандартов. Если кодировку не определить в коде странички, то браузер будет отображать ее в кодировке, установленной по умолчанию.

Для определения кодировки странички браузером между тегами < HEAD> и < /HEAD> нужно вставить одну из следующих строчек:

· < META http-equiv=" Content-Type" content=" text/html; charset=windows-1251" > – для Windows-1251 кодировки. В этой кодировке вы можете писать код странички в редакторе «Блокнот», используя как русский, так и английский язык; эта кодировка наиболее предпочтительна.

· < META http-equiv=" Content-Type" content=" text/html; charset=koi8-r" > – для KOI8-r кодировки. Как правило, эта кодировка используется визуальными HTML-редакторами, открыв документ этой кодировки в редакторе «Блокнот», вы увидите лишь непонятные символы, однако некоторые серверы работают лишь с этой кодировкой. В этом случае вам придется использовать специальные перекодировщики.

Тело HTML-документа находится между парными тегами < BODY> и < /BODY>. Здесь располагается информация, которую мы видим в окне браузера при просмотре странички: текст, кнопки, рисунки, списки и т. д.

Таким образом, структуру HTML-документа можно представить в виде схемы:

Для сохранения HTML -документа выполните команду Файл / Сохранить как, введите имя своего документа и обязательно укажите расширение.html. Например, index.html

Изменение HTML-документа происходит путем редактирования HTML-кода. Для открытия кода странички можно воспользоваться одним из следующих способов:

1-й способ. Через меню браузера – Вид / Просмотра HTML-кода;

2-й способ. Через меню текстового редактора – Файл / Открыть.

Если вы что-то изменили в HTML-коде документа то, чтобы посмотреть, как это выглядит в браузере, не забудьте нажать кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то ошиблись при написании кода, или забыли сохранить документ.

Задание 1.1. Создайте HTML-документ main.html с заголовком «Страничка Ивана Иванова» со следующим содержанием: «Здравствуйте, это моя первая страничка! ». Для этого:

· В любом текстовом редакторе ( «Блокнот», Notepad++ ) создайте новый документ.

· Внесите в документ следующий текст:

< HTML>

< HEAD>

< META http-equiv = " Content-Type" content = " text/html; charset = windows-1251" >

< TITLE> Страничка Ивана Иванова< /TITLE>

< /HEAD>

< BODY>

Здравствуйте, это моя первая страничка!

< /BODY>

< /HTML>

· Сохраните этот файл в папку « Лаб_№1 » под именем main.html. Просмотрите страничку в браузере.

Задание цвета фона и текста странички

Цвет можно задавать тремя способами:

1. Через английский эквивалент названия цвета. Например, < BODY bgcolor=″ red″ >

2. Через RGB-формат ″ #XXXXXX ″, где X – это число от 0 до F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F), первая пара цифр отвечает за насыщенность красного цвета, вторая пара – за насыщенность зеленого, третья пара – синего. Например, < BODY bgcolor=″ #FF0000″ >

3. Через RGB-формат rgb(Х, Х, Х), где Х – это число от 0 до 255, первая цифра отвечает за насыщенность красного цвета, вторая – за насыщенность зеленого, третья – синего.
Например, < BODY bgcolor=rgb(255, 0, 0) >

Для задания цвета фона и текста используйте параметры тега < BODY> – bgcolor и text:

< BODY bgcolor=″ #D2B48C″ text=″ darkgreen″ >

Примечание. Основные оттенки цветов web-палитры можно посмотреть в Приложении 1 «Web-палитра цветов».

Задание фонового рисунка

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

· Рисунок не должен быть очень контрастным, т. е. пестрым.

· Рисунок либо не должен обрываться на границе, либо его границы должны «сшиваться».

· Если рисунок яркий, то шрифт документа должен быть темным, и наоборот.

· Размер «плитки» текстуры выбирайте в пределах от 3х3 до 5х5 см.

Текстурный рисунок должен быть сохранен в формате GIF или JPG, после чего в параметре background тега < BODY> нужно указать путь к фоновому рисунку:

Путь к рисунку указывается в зависимости от его расположения:

1. если рисунок лежит в том же каталоге (директории, папке), в которой лежит и HTML-документ, то путь к ней будет выглядеть так: < BODY background=″ fon.gif″ >

2. если рисунок лежит в поддиректории (например, “images”), то путь к ней будет выглядеть так: < BODY background=″ images/fon.gif″ >

3. если рисунок лежит на уровень выше, а документ находится в поддиректории, то путь к ней будет выглядеть так: < BODY background=″../fon.gif″ >

4. если рисунок лежит на другом сайте, то путь прописывается полностью:

< BODY background=″ http: //www.mypage/images/fon.gif″ >

Задание полей странички

Поля страницы (отступы текста от границ окна браузера) задаются через параметры leftmargin, rightmargin, topmargin, bottommargin. Значения этих параметров указываются в пикселях. Например, < BODY leftmagin=″ 100″ topmargin=″ 40″ >

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

1. Задайте желтовато-коричневый цвет фона и темно-зеленый цвет текста. Используйте параметры тега < BODY> – bgcolor и text, для задания цвета фона используйте английский эквивалент названия цвета, а для цвета текста – RGB-формат;

2. В графическом редакторе «Paint» создайте простейший фоновый рисунок. Сохраните его в папку, где находится ваша страничка под именем fon.jpg. Для тега < BODY> задайте параметр background.

3. Установите поля страницы: левое – 100 пикселей, правое – 80 пикселей, верхнее и нижнее – 50 пикселей.

Работа со шрифтом

Некоторые теги вообще не имеет смысла применять без атрибутов. К таким тегам можно отнести тег < FONT> < /FONT>.

Тег < FONT> применяется при работе со шрифтом и имеет следующие параметры:

· size – задает размер шрифта (задается в пунктах; по умолчанию равен 3);

· face – задает тип шрифта. Очень аккуратно используйте этот атрибут, так как заданный шрифт должен присутствовать на компьютере пользователя – в противном случае браузер подставит шрифт, определенный по умолчанию (как правило, это Times New Roman). Применяйте шрифты, в наличии которых вы уверены, в противном случае пользователь увидит текст иначе, чем вы. К стандартным шрифтам можно отнести шрифты, поставляемые с Windows, MS Office;

· color – задает цвет шрифта. Способы задания цвета см. ранее.

Специальные символы

Некоторые символы невозможно просто набрать с клавиатуры: это буквы алфавитов части европейских языков, математические и некоторые другие символы. Некоторые символы, введенные в HTML-документ, могут быть неверно поняты браузером: например, символы «< » и «> » используются браузером для указания тегов и, возможно, могут быть интерпретированы только так.

Вместо символов этой группы необходимо использовать замену. Например, символ « < » - замена & lt; символ « > » - замена & gt;

Примечание. Полную таблицу специальных символов можно посмотреть в Приложении 2 «Таблица замены специальных символов».

Создание бегущей строки

Текст абзаца можно сделать «движущимся», т. е. оформить его в виде бегущей строки. Для этого используйте тег < MARQUEE>..< /MARQUEE>

Тег < MARQUEE> имеет следующие параметры:

· bgcolor – задает цвет фона;

· height – задает высоту фоновой полосы (в пикселях или процентах от высоты окна бруазера);

· width – ширина полосы бегущей строки (в пикселях или процентах от ширины окна браузера;

· direction – задает направление бегущей строки ( left – справа налево (используется по умолчанию), right – слева направо, up – снизу вверх, down – сверху вниз);

· behavior – управляет поведением бегущей строки ( scroll – дойдя до края, строка уходит из поля зрения, затем появляется с противоположной стороны, slide – строка, достигнув края окна, останавливается, alternate – строка, достигнув противоположного края окна, меняет свое направление);

· hspace, vspace – задает горизонтальный и вертикальный соответственно отступы у бегущей строки (в пикселях);

· loop – задает количество переходов строки по экрану;

· scrollamount – задает скорость движения строки (в пикселях в секунду);

· scrolldelay – определяет временной интервал (в миллисекундах) между шагами.

Параграфы

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

Тег < P> имеет следующие параметры:

· title – краткое описание параграфа (всплывает в виде подсказки при наведении на текст параграфа);

· align – задает выравнивание абзаца ( сenter – по центру, left – по левому краю, right – по правому краю, justify – по ширине экрана).

Заголовок

Большинство документов имеют заголовок. Для его создания используют теги < Hx> < /Hx>, где x – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок соответствующего уровня.

Текст с отступом

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

Предварительно форматированный текст

Как уже отмечалось ранее, браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение. Текст, заключенный между тегами < PRE> и < /PRE> (от англ. preformatted – предварительно форматированный), выводится браузером на экран как есть – со всеми пробелами, символами табуляции и конца строки.

Списки

Списки бывают: нумерованными, маркированными и смешанными.

В нумерованном списке (Оrdered List) каждому элементу предшествует его порядковый номер. Для организации нумерованного списка используются следующие теги:

< OL> – открывает нумерованный список

< LI> – задает элемент списка (List Item)

< /OL> – закрывает список

Тег < OL> имеет два параметра:

· start – задает число, с которого начинается нумерация (по умолчанию с 1);

· type – задает тип нумерации (по умолчанию арабская нумерация 1, 2, 3, …):

- type= " i" – нумерация римскими малыми (i, ii, iii, …);

- type= " I" – нумерация римскими заглавными (I, II, III, …);

- type= " a" – нумерация английскими малыми (a, b, c, …);

- type= " A" – нумерация английскими заглавными (A, B, C, …).

В маркированном списке (Unordered List) каждому элементу списка предшествует маркер. Для создания маркированного списка используют следующие теги:

< UL> – открывает список

< LI> – задает элемент списка

< /UL> – закрывает список

Тег < UL> тоже имеет параметр type, с помощью которого можно задавать вид маркера:

- type =" circle" – используется маркер ○;

- type=" square " - используется маркер ■;

- type=" disc " – используется маркер ● (этот маркер используется по умолчанию).

Задание 1.3. Создайте HTML-документ formatting.html по предложенному образцу.

Примечание:

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

2. Заголовок оформлен в виде бегущей строки: цвет - «красный», направление движения - «слева направо», поведение - «достигнув края окна, меняет свое направление на противоположное».

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

4. Заголовки должны быть оформлены с использованием соответствующих тегов.

Задание 1.4. Добавьте на вашу страничку стихотворение Маяковского, сохраняя все отступы и переносы, для сохранения отступов и переносов используйте тег < PRE>:

Только

солнце усядется,

канув

за опустевшие

фабричные стройки,

стонут

окраины

от хулиганов

вроде вот этой

милой тройки.

Владимир Маяковский

Горизонтальная линия

С помощью тега < HR > можно изобразить горизонтальную линию. Тег < HR> имеет следующие параметры, с помощью которых можно задать внешний вид линии:

· width – задает длину линии (измеряется в процентах от ширины окна браузера или пикселях);

· size – задает толщину линии (измеряется в пикселях);

· align – задает горизонтальное положение линии относительно окна браузера:

- right – размещение относительного правого края окна браузера;

- left – размещение относительно правого края окна браузера;

- center – размещение по центру окна браузера.

· color – задает цвет линии.

Задание 2.1. Создайте HTML-документ по образцу (рисунки выберите на ваше усмотрение, измените их размеры, так чтобы все используемые рисунки были одинакового размера). У каждого рисунка задайте альтернативный текст, отступы текста от рисунков.

Создание гиперссылки

Для добавления гиперссылки в HTML-документ используют парные теги < A> и < /A>:

< A href=”путь к документу”> текст ссылки (или рисунок) < /A>

Тег < А> имеет ряд параметров:

· href (обязательный параметр) определяет адрес документа, на который будет совершен переход, если щелкнуть мышью по объекту, находящемуся между тегами. Адресом может быть либо локальный документ, либо страничка в сети Интернет.

· title – текст подсказки, которая всплывает при наведении на ссылку;

· target – наличие или отсутствие этого параметра определяет, как открыть документ, на который ведет ссылка. Параметр target может иметь еще следующие значения:

- _self – документ будет загружаться в текущем окне, то есть в том же, что и ссылка на этот документ. По умолчанию присваивается это значение;

- _blank – документ будет открываться в новом окне;

- _parent – используется при работе с фреймами: документ будет загружаться во фрейм-родитель, если фреймов нет, то этот параметр работает как _self;

- _top – используется при работе с фреймами: документ загружается в полном окне без фреймов, если фреймов нет, то этот параметр работает как _self.

· name – используется при задании ссылки внутри текущего документа (метки) (см. далее).

Метки

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

Место, в которое пользователь будет перемещаться, щелкнув по ссылке, метится тегом < A> с параметром name:

< A name=" имя метки" > текст метки < /A>

Имя метки может быть любое: числа и буквы.

Ссылка на метку оформляется следующим образом:

< A href=" имя документа#имя метки" > текст ссылки < /A>

Примечание. Если ссылка ведет на место в этом же HTML-документе, то имя документа в параметре href можно не указывать.

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

Создание таблицы

Таблица описывается парными тегами < TABLE > и < / TABLE >:

< TABLE>

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

< /TABLE>

Тег < TABLE> имеет параметры, с помощью которых можно изменять внешний вид таблицы:

· border – ширина границы таблицы (при border= 0 таблица отображается без границы);

· bordercolor – цвет границы таблицы;

· width – ширина всей таблицы (в пикселях или процентах от ширины окна просмотра);

· height – высота всей таблицы (в пикселях или процентах от высоты окна просмотра);

· bgcolor – цвет фона таблицы;

· background – фоновый рисунок таблицы;

· align – расположение таблицы на странице (значения left, center, right );

· cellpadding – отступ текста от границ ячеек;

· cellspacing – отступ табличных объектов (ячейки, строки) друг от друга.

Структура таблицы

При описании структуры таблицы используются 4 элемента, которые располагаются между тегами < TABLE> и < /TABLE>, – это название, строка, ячейки-заголовки и ячейки с данными.

Название является необязательным элементом и задается парными тегами < CAPTION> < /CAPTION>

< CAPTION> Название таблицы < /CAPTION>

У тега < CAPTION> есть всего один параметр:

· align – задает положение названия таблицы относительно таблицы. Он может принимать значения:

- bottom – название таблицы будет расположено в центре под таблицей;

- left – название таблицы будет расположено над таблицей, слева;

- right – название таблицы будет расположено над таблицей, справа;

- top – название таблицы будет расположено над таблицей по центру (это значение задается по умолчанию).

Обязательный элемент Строка таблицы используется для формирования строк в таблице и задается парными тегами < TR> < /TR>:

< TR> Строка таблицы< /TR>

Тег < TR> имеет 4 параметра:

· align – задает выравнивание внутри строки (значения: left , right, center );

· valign – задает вертикальное выравнивание внутри строки (возможные значения: top , bottom, middle );

· bgcolor – задает цвет фона внутри строки;

· background – задает фоновый рисунок строки.

Внутри строки могут находиться ячейки с данными и ячейки-заголовки.

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

Ячейка-заголовок задается парными тегами < TH> < /TH>:

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

Обязательный элемент Ячейка таблицы служит для хранения данных таблицы и задается парными тегами < TD > < / TD >:

< TD> Ячейка с данными < /TD>

Теги < TH> и < TD> имеют несколько параметров:

· align – задает выравнивание внутри ячейки ( left , right, center );

· valign – задает вертикальное выравнивание внутри ячейки ( top , bottom, middle );

· colspan – растягивание ячейки на несколько столбцов;

· rowspan – растягивание ячейки-заголовка на несколько строк;

· height – задает высоту ячейки (в пикселях либо в процентах от высоты таблицы);

· width – ширина ячейки (в пикселях либо в процентах от ширины таблицы);

· bgcolor – задает цвет фона ячейки;

· background – задает фоновый рисунок ячейки;

· nowrap – наличие или отсутствие этого параметра обозначает запрет или разрешение на перенос строк внутри ячейки.

Объединение ячеек

Для объединения группы ячеек в таблице используются специальные параметры: rowspan («растягивает» ячейку таблицы на указанное количество строк) и colspan (растягивает ячейку таблицы на указанное количество столбцов).

Задание 4.1. Используя различные цвета фона и текста, создайте HTML-документ с таблицей по образцу:

Задание 4.2. Создайте HTML-документ по образцу:

Примечание. Картинки и подписи к картинкам размещены в разных ячейках с различным выравниванием.

Понятие формы

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

После того как пользователь заполнит форму и нажмет кнопку, внесенные им данные посылаются на сервер и обрабатываются специальной программой CGI (Common Gateway Interface) или PHP (Personal Hypertext Processor). Таким образом, пользователь может интерактивно взаимодействовать с web-сервером через Интернет.

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

Создание формы

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

Все формы создаются парными тегами < FORM > и < / FORM >, между которыми помещаются элементы формы:

< FORM method=" get/post" action=" URL программы" >

Элементы формы

< /FORM>

В параметре action указывается адрес (URL) программы, которая будет обрабатывать данные формы на сервере.

Параметр method определяет, каким путем данные будут посылаться на сервер:

· get: информация из формы добавляется в конец адреса, который был указан в параметре action. Опытные HTML-редакторы не рекомендуют использовать метод get.

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

Примечание. В рамках данной лабораторной работы будут рассмотрены только основы создания интерфейса для отправки данных – то есть структура и основные элементы форм, а изучение программ обработки данных формы на сервере здесь опустим, поэтому параметры method и action тега < FORM> при выполнении заданий могут быть опущены.

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

5.2.1. Элемент < INPUT>

Тег < INPUT > используется для ввода текстовой информации, пересылки файлов или управляющей информации.

Параметры тега < INPUT >:

· name – имя поля используется как уникальный идентификатор поля, по которому впоследствии программа обработки сможет получить данные, помещенные пользователем в это поле;

· size – определяет визуальный размер поля ввода на экране в символах (по умолчанию size=20);

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

· value – определяет начальное (по умолчанию) значение поля;

· type - определяет тип поля ввода. Может принимать значения:

- text - описывает однострочное поле ввода . Этот атрибут используется по умолчанию;

- password - отличается от атрибута text тем, что вводимое пользователем значение не отображается браузером на экране ;

- checkbox (флажок) - используется, когда необходимо ответить да или нет. В форме отображается в виде . Если в форме имеется несколько полей-флажков, то можно выбрать более одного поля. Каждое поле должно иметь свое имя (name) и значение (value). На сервере обрабатываются данные только у выбранных полей;

- radio - при использовании нескольких полей данного типа в одной форме пользователь может выбрать только одно поле. В форме отображается в виде . Поля должны иметь одинаковое имя (name), но разные значения (value). На сервер будет передано значение только выбранного поля;

- reset - данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию. Атрибут value может содержать текст, который будет высвечен на кнопке;

- submit - данный тип обозначает кнопку, при нажатии которой на сервере будет вызвана управляющая программа, описанная в параметре формы action. Атрибут value может содержать текст, который будет высвечен на кнопке;

- image - данный тип обозначает кнопку submit в виде рисунка. Путь к картинке указывается через атрибут src, а синтаксис совпадает с тегом < IMG >;

- file (файловое поле) - поле передачи файла на сервер.

5.2.2. Элемент < TEXTAREA>

Тег < TEXTAREA > используется для ввода большого количества текстовой информации (в несколько строк).

Атрибуты тега < TEXTAREA >:

· name - имя поля;

· cols - число колонок (символов) в текстовой области;

· rows - число видимых строк в текстовой области.

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

5.2.3. Элемент < SELECT>

Элемент < SELECT > дает возможность пользователю выбрать значение из фиксированного списка значений. Обычно этот элемент представлен выпадающим списком.

Для определения списка пунктов используются теги < OPTION > между < SELECT > и < /SELECT >.

< SELECT ….>

< OPTION> …

< OPTION> …

…

< /SELECT>

Параметры тега < SELECT >:

· name - имя объекта SELECT;

· multiple - позволяет выбрать более чем одно наименование;

· single – из списка можно выбрать только один вариант (задан по умолчанию);

· size - определяет число пунктов, видимых для пользователя. По умолчанию список на экране отображается в виде выпадающего списка (видно одно наименование), если size> 1, то браузер представляет на экране обычный список (число - количество видимых наименований).

Параметры тега < OPTION >:

· selected – указывает, какой пункт выбран по умолчанию;

· value – значение, которое передается на сервер для обработки. По умолчанию значение value равно элементу < OPTION >.

Задание 5.1. Создайте HTML-документ с формой по образцу (см. ниже). Элементы формы выровняйте путем размещения их в ячейках таблицы.

Лабораторная работа №6 «Каскадные таблицы стилей»

Классы стилей

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

Но иногда требуется использование нескольких вариантов отображения одного и того же элемента в HTML-документе. Например, несколько абзацев (тег < P> ) имеют вид, отличающийся от других.

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

P.zagolovok {text-align: center; font-weight: bold; font-size: 16px; },

В данном примере задан класс zagolovok, который описывает набор параметров форматирования тега < P>: выравнивание, полужирное начертание, размер шрифта 16 px.

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

P {text-align: center; font-weight: bold; font-size: 16px; }

.text {text-align: left; font-weight: normal; font-size: 12px; }

.right {text-align: right}

6.4. Способы задания классов стилей

Существует два способа задания классов:

1. Внутренний – в разделе < STYLE> < /STYLE>.

2. Внешний – в отдельном файле с расширением.css.

Применение класса в HTML-документе осуществляется с помощью параметра class. Например,

< P class=zagolovok>

Можно задать универсальный класс – класс, который можно применять не к одному, а к нескольким тегам. Этот класс описывается самым первым или после описания классов тега < BODY>, и при его задании тег не указывается. Например,

.left {text-align: left}

Созданный в примере класс left можно будет применить к тегу < P>, < TD>, < Hх> и другим тегам, где этот параметр форматирования применим.

Задание 6.1. Создайте HTML-документ inline.html, содержащий абзац с разреженным шрифтом и таблицу с жирной верхней границей (см. рис.). Для этого:

· Во-первых, без использования CSS здесь не обойтись, потому что разреженный интервал невозможно создать стандартными средствами HTML, следовательно, прибегнем к использованию CSS. Создаем стиль у тега < P>:

 

< P style=" letter-spacing: 12" > Разреженный текст в абзаце задан с помощью CSS< /P>

· Аналогично создаем стиль у тега < TABLE> (параметры, доступные без CSS описывает вне «style»):

< TABLE style=" border-top-width: 10px; border-color: blue; " border=1 cellspacing=0
cellpadding=0 bordercolor=blue >

· Во-вторых, будем использовать строчный способ задания CSS, так как стиль у каждого элемента (абзац и таблица) нужно применить единожды.

В данном примере описаны два стиля: стиль абзаца и стиль таблицы. При описании каждого стиля использовались стандартные и новые атрибуты.

Например, letter-spacing задает разреженность текста, border-top-width - толщину верхней границы, border-color – цвет границы таблицы.

Примечание. Если в описании стиля используются несколько атрибутов, то они должны быть перечислены через «; ».

Задание 6.2. Создайте HTML-документ seti.htmlпо образцу. Названия классификаций заданы тегом < P>, перечисления – элементы маркированного списка (тег < LI> ).

Тег < P>	Межсимвольный интервал – 10 px, начертание – полужирное, размер шрифта – 20 px
Тег < LI>	Начертание – нежирный курсив, размер шрифта – 18 px.

· Используйте CSS: вложенный способ описания стилей.

· Опишите стили в разделе < STYLE> < /STYLE>.

1234567Следующая ⇒

Поделиться: