Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
Лабораторная работа №1 «Структура и форматирование HTML-документа»Стр 1 из 7Следующая ⇒
Лабораторная работа №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 и 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-документ с формой по образцу (см. ниже). Элементы формы выровняйте путем размещения их в ячейках таблицы. Классы стилей Итак, используя шаблоны стилей, можно настраивать теги по своему усмотрению. Благодаря стилям тег приобретает новые параметры форматирования. Но иногда требуется использование нескольких вариантов отображения одного и того же элемента в 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 · Во-вторых, будем использовать строчный способ задания CSS, так как стиль у каждого элемента (абзац и таблица) нужно применить единожды. В данном примере описаны два стиля: стиль абзаца и стиль таблицы. При описании каждого стиля использовались стандартные и новые атрибуты. Например, letter-spacing задает разреженность текста, border-top-width - толщину верхней границы, border-color – цвет границы таблицы. Примечание. Если в описании стиля используются несколько атрибутов, то они должны быть перечислены через «; ». Задание 6.2. Создайте HTML-документ seti.htmlпо образцу. Названия классификаций заданы тегом < P>, перечисления – элементы маркированного списка (тег < LI> ).
· Используйте CSS: вложенный способ описания стилей. · Опишите стили в разделе < STYLE> < /STYLE>. |
Последнее изменение этой страницы: 2017-03-14; Просмотров: 2026; Нарушение авторского права страницы