Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Российский государственный университет туризма и сервиса

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Лабораторные работы / HTML_Лаб_2

.doc

Скачиваний:

Добавлен:

17.04.2015

Размер:

65.02 Кб

Скачать

☆

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

Знакомство с языком HTML. Ссылки, таблицы, формы

Цель: знакомство с построением таблиц, форм и гиперссылок в языке HTML.

Использование ссылок

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

<A HREF=URL> - </A> — вставка ссылки в документ (между тэгами необходимо вписать текст ссылки).

HREF — адрес страницы или ресурса;

URL — унифицированный адрес ресурса: service://server[:port][/path], где

service — наименование протокола (HTTP — доступ к HTML – документу, FTP запрос файла с FTP-сервера, FILE-доступ к файлу на локальной машине);

server —указание имени ресурса;

port — номер порта, на котором функционирует Web-сервер;

path — каталог, в котором находится ресурс.

<A HREF=#имя закладки> - <|A> — вставка локальной ссылки (между тэгами необходимо вписать текст ссылки).

<A NAME=имя закладки> - <|A> — задание закладки, на которую будет осуществляться ссылка.

Создайте новый текстовый файл HTML4.htm:

<HTML>

<HEAD>

<TITLE> Использование ссылок</TITLE>

</HEAD>

<BODY>

<P>

<A HREF=HTML1.htm>Текст1 </A>

<P>

<A HREF=HTML2.htm>Текст2 </A>

</BODY>

</HTML>

Сохраните файл HTML4.htm. Просмотрите его с помощью Internet Explorer. Проверьте работу гиперссылок.

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

Скопируйте в рабочую директорию файл Ris_1.jpg и файл Ris_2.jpg. Названия Ris_1.jpg и Ris_2.jpg условны. Выберите любые рисунки, имеющиеся в компьютере, или рисунки, предложенные преподавателем. Внесите изменения в файл HTML4.htm:

<HTML>

<HEAD>

<title>Использование ссылок</title>

</HEAD>

<BODY>

<p>

<a href=html1.htm>

<img src=" Ris_1.jpg" alt="Подсказка1" Heigt=60 width=60/>

</a>

<p>

<a href=html2.htm>

<img src=" Ris_2.jpg" alt="Подсказка2" Heigt=60 width=60/>

</a>

</BODY>

</HTML>

Сохраните файл под именем HTML5.htm. Просмотрите его с помощью Internet Explorer. Проверьте работу гиперссылок.

Создайте документ, в котором будет осуществляться переход внутри одной страницы. Создайте новый текстовый файл HTML6.htm:

<HTML>

<HEAD>

<title>Таблицы</title>

</HEAD>

<BODY>

<h1>Щелкните по ссылке для перехода к следующему куплету </h1>

<p>

<a href="#red">Первый</a><p>

<a href="#Green">Второй</a><p>

<h2><a name="red">Первый</a></h2>

<br><br><br><br><br><br><br><br><br><br><br><br>

<p>

У Танюши дел немало,<br>

У Танюши много дел:<br>

Утром брату помогала-<br>

Он с утра конфеты ел.<br>

</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

<h2><a name="Green">Второй</a></h2>

<p>

Вот у Тани сколько дела:<br>

Таня ела, чай пила,<br>

Села, с мамой посидела,<br>

Встала, к бабушке пошла.<br>

</p>

</BODY>

</HTML>

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

Сохраните файл. Просмотрите файл с помощью Internet Explorer. Проверьте работу гиперссылок.

Использование таблиц

<TABLE > - </TABLE> — задание таблицы. Параметры:

ALIGN — задание выравнивания таблицы;

BORDER — ширина границы таблицы в пикселях;

WIDTH — ширина таблицы в пикселях или в процентах от ширины окна браузера;

BACKGRAOUND=”имя_файла” — задание рисунка, используемого в качестве фона таблицы;

BACKCOLOR — цвет фона таблицы;

<CAPTION> - </CAPTION> — заголовок таблицы.

<TR> - </TR> — задание строки таблицы.

<TD> - </TD> — задание столбца таблицы (задается внутри каждой строки).

<TH> - </TH> — задание заголовков столбцов.

COLSPAN — объединение нескольких ячеек по горизонтали.

ROWSPAN — объединение нескольких ячеек по вертикали.

Создайте новый текстовый файл HTML7.htm:

<HTML>

<HEAD>

<title>Таблицы</title>

</HEAD>

<BODY bgcolor="#ffffff">

<h2>Таблицы </h2>

<hr>

<h3>Таблицы №1 </h3>

<Table bgcolor=Write border=2 borderColor=black>

<tr>

<td>Строка 1, Столбец 1

<td>Строка 1, Столбец 2

<tr>

<td>Строка 2, Столбец 1

<td>Строка 2, Столбец 2

</table>

</hr>

</BODY>

</HTML>

Сохраните файл и просмотрите с помощью Internet Explorer.

Скопируйте в рабочую папку файл Gif_01.Gif. Добавьте в файл HTML7.htm описание таблицы №2:

<HTML>

<HEAD>

<title>Таблицы</title>

</HEAD>

<BODY bgcolor="#ffffff">

<h2>Таблицы </h2>

<hr>

<h3>Таблицы №2 </h3>

<Table border=1 backGround=" Gif_01.Gif" height=240>

<tr>

<td><b>Строка 1, Столбец 1</b>

<td><b>Строка 1, Столбец 2</b>

<td><b>Строка 1, Столбец 3</b>

<tr>

<td><b>Строка 2, Столбец 1</b>

<td><b>Строка 2, Столбец 2</b>

<td><b>Строка 2, Столбец 3</b>

</table>

</hr>

</BODY>

</HTML>

Сохраните файл под именем HTML8.htm и просмотрите с помощью Internet Explorer.

Использование форм

<FORM> - </FORM> — задание формы:

ACTION — URL приложения, взаимодействующего с формой;

METHOD — метод передачи данных из формы в приложение:

METHOD=GET — информация перемещается в переменную среды с именем QUERY_STRING;

METOD=POST — программа получает данные через стандартный поток ввода;

<INPUT> — задание элемента управления:

TYPE — тип элемента управления:

RADIO — переключатели, зависимые друг от друга;

CHECKBOX — переключатели, независимые друг от друга;

TEXT — ввод текстовой информации;

PASSWORD — ввод пароля (скрывает вводимую информацию);

BUTTON — кнопка;

RESET — кнопка, сбрасывающие введенные значения в элементах управления;

SUBMIT — кнопка, предназначенная для посылки данных формы в приложение;

NAME — имя элемента управления;

VALUE — начальное значение элемента управления;

SIZE — ширина поля ввода для текстовых элементов управления;

MAXLENGTH — максимальное количество символов, которое можно ввести в это поле;

<SELECT> - </SELECT> — задание выпадающего списка:

NAME — имя списка;

SIZE — высота списка в строках;

<OPTION> — задание строк выпадающего списка.

<OPTION SELECTED> — отметка строки, выбираемой по умолчанию.

Создайте новый текстовый файл HTML8.htm:

<HTML>

<HEAD>

<TITLE> Проектирование форм</TITLE>

</HEAD>

<BODY>

<FORM>

<P>

Ввод строки:

<INPUT TYPE=TEXT NAME=”edit” VALUE=”По умолчанию”>

<P>

Текстовое поле:

<TEXTAREA NAME=”edit2”ROWS=3 COL=25>Текст по умолчанию</TEXTAREA>

<P>

Пароль

<INPUT TYPE=PASSWORD NAME=”pass”>

<P>

Выпадающий список:

<SELECT NAME=”combo” SIZE=1>

<OPTION VALUE=One”>Один</OPTION>

<OPTION VALUE=”Two”>Два</OPTION>

<OPTION VALUE=”Three”>Три</OPTION>

</SELECT>

<P>

Флажки

<P>

<INPUT TYPE=CHECKBOX NAME=Chek1 VALUE=”check1” CHECKED>

Альтернатива1

<INPUT TYPE=CHECKBOX NAME=Chek2 VALUE=”check2” CHECKED>

Альтернатива2

<INPUT TYPE=CHECKBOX NAME=Chek3 VALUE=”check3” CHECKED>

Альтернатива3

<P>

<INPUT TYPE=SUBMIT NAME=send VALUE=”Отослать>

<INPUT TYPE=RESET NAME=ResetBut VALUE=”Обновить”>

</FORM>

</BODY>

</HTML>

Сохраните файл. Просмотрите файл через браузер Internet Explorer. Проверьте работу элементов управления.

Форма начинается с элемента Form, в котором могут быть заданы следующие атрибуты:

ACTION=url	Определяет URL, который обычно указывает на исполняемую программу (например, CGI — сценарий).
MEYHOD=value	Определяет способ передачи данных серверу. Принимает значение либо POST, либо GET.
OnSubmit=event	Определяет функцию Jscript или VBScript,вызываемую при отправке формы.
TARGET=window	Определяет, где будет отображаться ответ на полученную сервером форму. По умолчанию принимается загрузка результатов непосредственно в окно, в котором отправлялась форма. Другими значениями могут быть: имя конкретного окна, _blank, _parent, _self, _top.

В рассмотренном примере эти атрибуты не используются.

Соседние файлы в папке Лабораторные работы

#
17.04.201541.47 Кб27HTML_Лаб_1.doc
#
17.04.201565.02 Кб27HTML_Лаб_2.doc
#
17.04.201568.1 Кб32HTML_Лаб_3.doc
#
17.04.201563.49 Кб36HTML_Лаб_4_Сценарии.doc
#
17.04.201589.09 Кб49HTML_Лаб_5.doc
#
17.04.201553.76 Кб29Лаб_6.doc
#
17.04.201579.36 Кб27Лаб_7.doc

Лабораторные работы / HTML_Лаб_2

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

Знакомство с языком HTML. Ссылки, таблицы, формы

Использование ссылок

Использование таблиц

Использование форм