Форма отчетности

Инструкция

Цвета фруктов

· Яблоки зеленые

· Бананы желтые

· Апельсины оранжевые

1. Запустите программу.

2. Введите имя файла.

3. Нажмите кнопку ОК.

А это код HTML, который создает подобный список:

<dl>

<dt><strong>Types of Fruit</strong></dt>

<dd>

<ul>

<li>Яблоки зеленые</li>

<li>Бананы желтые</li>

<li>Апельсины оранжевые</li>

</ul>

</dd>

<dt><strong>Firework Instructions</strong></dt>

<dd>

<ol>

<li>Запустите программу.</li>

<li>Введите имя файла.</li>

<li>Нажмите кнопку ОК.</li>

</ol>

</dd>

</dl>

1. Загрузите страницу в браузер и посмотрите, что получилось.

Задание 6. Создание таблиц

Цель работы: Научиться создавать таблицы в HTML. Овладеть навыками работы с различными элементами таблицы.

Таблицы на HTML-страницах обычно используются для представления данных и/или для позиционирования на странице других элементов.

Основные элементы таблицы следующие:

§ Ячейка (cell) – отдельный неделимый блок таблицы.

§ Строка (row) - горизонтальная последовательность ячеек.

§ Столбец (column) – вертикальная последовательность ячеек.

Важно, что каждая ячейка может объединять более одну строку или более, чем один столбец. Рассмотрим пример:

Эта таблица имеет 2 столбца, 4 строки и 6 ячеек. При этом, Ячейка C включает в себя два столбца одной строки, а Ячейка D включает в себя две строки одного столбца. Остальные ячейки занимают один столбец одной строки.

Основные тэги таблицы – это <table> и </table>. Они используются для определения начала и конца таблицы. Синтаксис этих тэгов следующий:

<table border="width" cellpadding="padding"

cellspacing="spacing" width="width">

...

</table>

Атрибут border определяет ширину рамки таблицы в пикселях, рамка обрамляет каждую ячейку. Если рамка не нужна, то поставьте border="0".

Атрибут cellpadding определяет расстояние (в пикселях) между содержимым ячейки и границей ячейки..

Атрибут cellspacing определяет расстояние (в пикселях) между соседними ячейками.

Атрибут width может определять горизонтальный размер таблицы (в пикселях) при ее размещении на странице. Однако, для динамического изменения ширины таблицы в зависимости от изменения ширины окна браузера, можно указывать ширину таблицы в процентах от ширины окна браузера. Например, width="50%".

Каждая строка таблицы должна быть определена тэгами <tr> и </tr>, которые размешенвы между <table> и </table>. А внутри <tr> и </tr> должны быть помещены тэги <td> и </td> для определения ячеек в строке. Синтаксис тэга <td> следующий:

<td rowspan="n" colspan="n" width="n"

align="center|right" valign="top|bottom" bgcolor="n">

<содержимое ячейки>

</td>

Если ячейка объединяет несколько строк, то следует использовать <td rowspan="n">, где n -это количество объединяемых строк.

Если ячейка объединяет несколько столбцов, то следует использовать <td colspan="n">, где n -это количество объединяемых столбцов.

Заметим, что объединение ячеек происходит вниз и вправо от той ячейки, для которой мы указали атрибуты rowspan и colspan.

Для каждой ячейки можно специфицировать ширину width в пикселях или процентах (аналогично ширине таблицы). Только проценты будут определять часть ширины таблицы, а не окна браузера.

Атрибуты align и valign определяют правила горизонтального и вертикального позиционирования содержимого ячейки. По умолчанию, позиция текста или изображения внутри ячейки принимается: по горизонтали – левая сторона, по вертикали - середина. Поэтому, если Вы хотите, чтобы Ваш текст был размещен, выравненным по правой стороне ячейки, укажите align="right". А если Вы хотите, чтобы текст был прижат к верхней стороне ячейки, укажите valign="bottom".

Атрибут bgcolor позволяет определить цвет фона ячейки.

1. Постройте на своей HTML-странице следующую таблицу:

<table border="1" cellpadding="20" cellspacing="0">

<tr>

<td colspan="3">A</td>

<td colspan="4">B</td>

</tr>

<tr>

<td colspan="7">C</td>

</tr>

<tr>

<td rowspan="2" colspan="6">D</td>

<td>E</td>

</tr>

<tr>

<td>F</td>

</tr>

</table>

2. Загрузите страницу в браузер. Вы должны увидеть приблизительно следующую таблицу:

3. Измените ширину таблицы, указав значение атрибута width в пикселях в тэге <table>.

4. Измените ширину ячейки А, указав значение атрибута width в пикселях в соответствующем тэге <td>.

5. Измените ширину ячейки А, указав значение атрибута width в процентах в соответствующем тэге <td >.

6. Измените значение атрибута border, указав border="3".

7. Измените значение атрибута cellpadding, указав cellpadding ="3".

8. Измените значение атрибута cellspacing, указав cellspacing ="20".

9. После каждого изменения загружайте страницу в браузер и обращайте внимание на изменения.

10. Поместите в ячейку C еще одну таблицу. Например, так:

...

<tr>

<td colspan="7">

<table border="1">

<tr>

<td>С1</td>

<td>С2</td>

</tr>

<tr>

<td>С3</td>

<td>С4</td>

</tr>

</table>

</td>

</tr>

...

11. Загрузите страницу в браузер и посмотрите, что получилось.

12. Создайте на своей HTML-странице следующую таблицу для отображения данных:

13. Позиционируйте с помощью таблицы на своей странице текст и изображение следующим образом:

14. Создайте таблицу и раскрасьте некоторые ячейки следующими образом:

Задание 7. Построение Web-форм

Цель работы: Научиться конструировать и обрабатывать Web-формы, а также применять различные типы элементов форм: поля для ввода данных, кнопки и т.п.

Формы позволяют сделать сайт интерактивным – организовать Ваше взаимодействие с пользователями (отсылку электронной почты, голосование, навигацию между страницами и т.п.).

Все формы в HTML создаются с помощью тэгов <form>:

<form method="xxxx" action="xxxx">

(поля формы)

</form>

Атрибут method указывает каким образом информацию из полей формы посылать на сервер. Значения этого атрибута следующие:

Атрибут action указывает на обработчик формы на сервере. Например, http://www.yoursite.ru/cgi-bin/feedback.cgi or http://www.yoursite.ru/poll.asp.

Поля формы представляют собой такие элементы, как текстовые поля для водда данный, кнопки, выпадающие списки и т.п. Каждое поле имеет имя (атрибут name) и значение (атрибут value). Имя используется для идентификации поля, а значение вводится пользователем.

1. Поля для ввода текстовых данный создаются с помощью следующего тэга:

<input type="text" name="xxxx" value="xxxx" size="xxxx" maxlength="xxxx">

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

Создайте текстовае поле:

Адрес e-mail: <input type="text" name="email_address" value="" size="30" maxlength="50">

2. Поля-"флажки" имеют только два значения (включен и выключен). Формат тэга для создания такого поля следующий:

<input type="checkbox" name="xxxx" value="xxxx" checked>

Атрибут checked (если указан) определяет, что поле-"флажок" включено.

Создайте такое поле:

Хотите ли Вы быть включенным в список рассылки?

<input type="checkbox" name="mailing_list" value="yes" checked> Да

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

<input type="radio" name="xxxx" value="xxxx" checked>

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

Создайте группу полей-переключателей:

Какой Ваш любимый цвет?

<input type="radio" name="colour" value="red" checked> Красный

<input type="radio" name="colour" value="orange"> Оранжевый

<input type="radio" name="colour" value="green"> Зелёный

4. Поля-списки позволяют выбирать один или более элементов. Они имеют следующий формат:

<select name="xxxx" size="xxxx" multiple>

<option value="xxxx" selected>Выводимый текст</option>

<option value="xxxx">Выводимый текст</option>

...

</select>

Тэги <select></select> определяют список.

Атрибут size определяет количество видимых элементов в списке. Если это значение равно 1, то список будет создан, как выпадающий.

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

Внутри тэгов <select></select> размещается один или более тэгов <option>, каждый из которых представляет элемент списка. Между тэгами <option></option> может быть размещен текст, который буде отображен на странице.

4.1. Создайте выпадающий список:

Какой Ваш любимый вид спорта?

<select name="favourite_sport" size="1">

<option value="all" selected>Мне нравятся все виды!</option>

<option value="chess">Шахматы</option>

<option value="football">Футбол</option>

<option value="ice_hockey">Хоккей</option>

</select>

4.2. Создайте список из трех видимых строк:

Какой Ваш любимый вид спорта?<br>

<select name="favourite_sport" size="3">

<option value="all" selected>Мне нравятся все виды!</option>

<option value="chess">Шахматы</option>

<option value="football">Футбол</option>

<option value="ice_hockey">Хоккей</option>

</select>

5. Область для ввода и просмотра большого объема текста создается следующим образом:

<textarea name="xxxx" rows="xxxx" cols="xxxx" wrap="xxxx">

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

</textarea>

Атрибут rows определяет высоту области в строках, а атрибут cols определяет ширину области в символах.

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

Создайте область для ввода текстовых данных:

Введите Ваши комментарии:<br>

<textarea name="comments" rows="5" cols="50" wrap="soft">

Мне нравится этот сайт!

</textarea>

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

<input type="hidden" name="cart_id" value="1234">

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

Пароль: <input type="password" name="password" size="20">

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

Создайте такое поле:

Пошлите нам свою фотографию:

<input type="file" name="photo">

9. Кнопки типа submit используются для пересылки данных формы на сервер. Эти данные должны быть обработаны: компонентом сайта, указанным как значение атрибута action тэга form.

Создайте на вашей странице кнопку типа submit:

<input type="submit" value="Послать данные">

10. Кнопки типа image также используются для пересылки данных формы на сервер. Однако они имеют вид не стандартных кнопок, а представляются как изображение (файл с изображением должен быть подготовлен Вами). Другое отличие заключается в том, что на сервер пересылаются координаты точки, куда пользователь "кликнул" мышью (эти координаты формируются как значения полей name.x и name.y). Тэг для данного типа кнопки имеет следующий формат:

<input type="image" name="xxxx" src="xxxx" width="xxxx"

height="xxxx" border="xxxx" align="xxxx" hspace="xxxx"

vspace="xxxx" alt="xxxx">

Атрибуnы src, width, height, border, align, hspace, vspace и alt имеют тот же смысл, как и соответствующие атрибуты тэга <img>.

Создайте на Вашей странице кнопку типа image, использовав доступный Вам файл с изображением:

<input type="image" name="img_button" value="Кнопка-изображение"

src="images/mypicture.gif" width="170" height="23" alt="Кнопка-изображение">

11. Кнопка типа reset используется для установки первоначальных значений полей формы (то есть тех значений, которые были установлены при загрузке страницы).

Создайте такую кнопку:

<input type="reset" value="Очистка данных формы">

12. Имеется возможность создать кнопку, которая не будет делать ничего до тех пор, пока Вы не напишете какого либо кода (например, обработчик событий onClick на языке JavaScript).

Создайте такую кнопку:

<input type="button" name="mybutton" value="Нажми меня!" onclick="javascript:onClick()">

<br>

<script language="JavaScript">

function onClick() {

alert("Кнопка нажата! ");

}

</script>

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

Задание 8. Работа с фреймами

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

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

Два вида тэгов используются для создания фреймов: <frameset> и <frame>. Первый из них определяет характеристики набора используемых фреймов, а второй – характеристики каждого фрейма.

Синтаксис тэга <frameset> следующий:

<frameset rows|cols="a,b,c,..." border=n frameborder="1|0"

framespacing=n>

...

</frameset>

Атрибуты rows и cols определяют, как должны располагаться фреймы в этом наборе фреймов: строками или столбцами. Если необходимо и то и другое, следует использовать вложенные наборы фреймов. Каждое из значений "a, b, c, …" может быть следующим:

Атрибут border определяет ширину рамки фреймов.

Атрибут frameborder определяет, должны ли фреймы иметь рамку. Если указано frameborder="0", то рамки не будет.

Атрибуты framespacing и border (используются для разных браузеров) определяет ширину рамки фреймов. Полезно их использовать одновременно.

Синтаксис тэга <framet> следующий:

<frame src="framesource" name="framename"

scrolling="yes|no|auto" frameborder="1|0"

noresize marginwidth="n" marginheight="n">

...

</frame>

Атрибут src определяет HTML-страницу, загружаемую во фрейсм. Например, <frame src="main.html">.

Атрибут name задает имя фрейма.

Атрибут scrolling определяет, должен ли фрейм иметь полосы прокрутки содержания.

Атрибут frameborder определяет, должен ли фрейм иметь рамку. Если указано frameborder="0", то рамки не будет.

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

Атрибуты marginwidth и marginheight определяют расстояние (в пикселях) между содержимым фрейма и рамкой.

Часто необходимо загрузить во фрейм страницу, а гиперссылка для выполнения этой операции расположена в другом фрейме. В этом случае Вы должны использовать в тэге <a> атрибут target и указать в качестве его значения имя фрейма. Например, для того, чтобы загрузить во фрейм main из фрейма menu страницу services.htm, разместите во фрейме menu следующую ссылку:

<a href="services.html" target="main">Наши услуги</a>

Ниже перечислены специальные значения, которые можно использовать для атрибута target:

Не все браузеры могут поддерживать фреймы. Для таких браузеров предусмотрено использование тэгов <noframes> и </noframes>, которые должны быть размещены перед тэгом </frameset>. Например, так:

...

<noframes>

<center><b>spoil yourself - get a new browser!</b></center>

</noframes>

</frameset>

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

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

<html>

<head>

<title>Пример набора из двух фреймов</title>

</head>

<frameset cols="140,*">

<frame name="menu" src="menu.htm">

<frame name="main" src="welcome.htm">

</frameset>

</html>

2. Загрузите страницу в браузер и посмотрите, что получилось.

3. Измените значения атрибутов тэгов <frameset> и <frame> и посмотрите, как изменяется внешний вид фреймов, загружая страницу в браузер.

4. Создайте страницы menu.htm и welcome.htm для более наглядной работы этого примера.

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

<html>

<head>

<title>Пример набора из двух фреймов</title>

</head>

<frameset cols="*,150">

<frameset rows="104,*">

<frame name="top" src="top.htm" noresize scrolling=no

marginheight=5 marginwidth=5>

<frame name="main" src="welcome.htm" noresize scrolling=auto marginheight=5 marginwidth=5>

</frameset>

<frame name="right" src="right.htm">

</frameset>

</html>

6. Создайте страницы top.htm и right.htm для более наглядной работы этого примера.

Задание 9. Использование элементов META

Цель работы: Усвоить цели применения элементов META и научиться их использовать при проектировании HTML-страниц.

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

<META NAME="name" CONTENT="content">

или

<META HTTP-EQUIV="name" CONTENT="content">

Здесь важно запомнить следующее: если Вы хотите, чтобы Ваша информация обрабатывалась Web-сервером, то используйте атрибут HTTP-EQUIV; если Ваша информация предназначена для редактора HTML-страниц или поисковой системы – используйте NAME.

Далее предлагается несколько заданий, выполнение которых поможет усвоить назначение тэгов META.

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

<head>

<title>Моя страница </title>

<meta name="description" content="Эта страница разработана для иллюстрации использования тэгов META.">

<meta name="keywords" content="Тэг, META, страница, поиск, описание, сервер">

</head>

2. Зафиксируйте информацию об авторе страницы, которая может использоваться поисковой системой, такой как Google.com. Например, следующим образом:

<meta name="author" content="В.К.Иванов">

3. Сделайте так, чтобы после загрузки Вашей страницы в браузер, через 7 секунд загрузилась новая страница, newpage.htm. Это можно сформулировать следующим образом:

<meta http-equiv="refresh" content="7;url=newpage.htm">

4. Другое использование тэгов META – сообщить поисковой системе Интернет, регистрировать ли Вашу страницу в этой системе или нет. Это делается так:

<meta http-equiv="robots" content="noindex">

5. А так Вы можете сообщить поисковой системе, что не стоит дальше просматривать Ваш сайт на предмет включения страниц в каталог поисковой системы:

<meta http-equiv="robots" content="nofollow">

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

<meta http-equiv="pragma" content="nocache">

7. Сообщите браузеру когда следует обязательно загрузить Вашу страницу. Например, 4.07.2016:

<meta http-equiv="expires" content="Mon, 4 Jul 2016 15:00:00 GMT">

Задание 10. Некоторые рекомендации

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

1. Всегда используйте закрывающие тэги. В следующих примерах попробуйте удалить закрывающие тэги </b>, </p> и </center>.

<b> Мои любимые животные – кошки. </b>

<center> Мои любимые животные – кошки. </center>

<p> Мои любимые животные – кошки. </p>

Однако, некоторые тэги могут быть использованы без соответствующих закрывающих тэгов. Это, например:

<br> - перевод строки.

<img> - вставка изображения.

1. Используйте комментарии в текстах HTML. Например, так:

<!-- Пример использования тэга FONT -->

<font size="3" face="Times, Palatino, serif"

color="#FF0000">Это пример № 1</font>

<br>

<!-- Пример использования тэга заголовка H1 -->

<h1>Заголовок 1</h1>

3. Ниже перечислены некоторые рекомендации (с примерам) по правильному указанию файлов изображений в тэгах <img>. Проверьте каждую из этих рекомендаций.

A. Если возможно, используйте относительные ссылки.

Если файл изображения лежит в том же самом каталоге (папке), что и Ваша Web страница, то используйте:

<img src="myphoto.jpg">

Если файл изображения лежит в каталоге (папке) images на том же уровне, что и Ваша Web страница, то используйте:

<img src="images/myphoto.jpg">

Если файл изображения лежит в каталоге (папке) images на уровень выше, чем Ваша Web страница, то используйте:

<img src="../images/myphoto.jpg">

Если файл изображения лежит в каталоге (папке) images на самом верхнем уровне сайта, то используйте:

<img src="/images/myphoto.jpg">

(это справедливо только тогда, когда Ваша страница загружается через Web сервер).

B. Старайтесь не использовать абсолютных ссылок! Например, тэг

<img src="file://C:/mywebsite/images/myphoto.jpg">

должен быть заменен на

<img src="myphoto.jpg">

или (возможно) на

<img src="../images/myphoto.jpg">

C. Специфицируйте, если необходимо, значения атрибутов width и height в тэгах <img>. Например,

<img src="myphoto.jpg" width="234" height="123">

Это ускорит загрузку Вашей страницы в браузер.

D. Применяйте тэг для неразрываемых пробелов, который в HTML выглядит так: &nbsp;

Например, в предложении:

<p>Этот мешок весит 50 кг</p>

слова "50" и "кг" могут оказаться на разных строках. Однако, нам желательно, чтобы они всегда были на одной строке. Для этого может быть использован тэг &nbsp;:

<p>Этот мешок весит 50&nbsp;кг</p>

E. Для разметки Вашей страницы используйте таблицы.

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

<td>&nbsp;</td>

Не оставляйте пустыми тэги <td></td> в таблице – они будут портить изображение таблицы (проверьте это).

G. Для точной разметки страницы можно использовать файл GIF с прозрачным изображением 1 x 1 пиксел. Он будет невидим при отображении страницы, а для регулирования промежутков между элементами страницы можно использовать атрибуты width и height. Например, код:

<img src="photo1.gif" width="20" height="20" border="0">

<img src="space.gif" width="10" height="1" border="0">

<img src="photo2.gif" width="20" height="20" border="0">

создаст горизонтальный промежуток в 10 пикселей между двумя изображениями, photo1.gif и photo2.gif.

H. Используйте таблицы стилей (CSS) везде, где это возможно.

I. Используйте программы для проверки корректности написания HTML-страниц.

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

Дата добавления: 2017-02-01; Просмотров: 99; Нарушение авторских прав?; Мы поможем в написании вашей работы!