Завдання до лабораторної роботи №4 для самостійного виконання

1. Створити HTML-документ, застосувавши у ньому:

§ нумерований список дисциплін, які вивчаються у цьому семестрі;

§ маркований список ваших улюблених страв.

2. Основна частина документа повинна бути організована як таблиця, що складається з двох колонок. У лівій колонці розміщується список (гіперпосилання на інші сторінки сайта), а в правій — основний зміст. Ширину лівої колонки виберіть у межах 150-200 пікселів, ширину усієї таблиці – 90-100% від ширини вікна броузера. Бордюри таблиці мають бути відключені. Наприклад, таблиця може виглядати так:

На головну... Гіперпосилання

Основна частина документа буде знаходитися у правій колонці!

3. Зробіть перелік гіперпосилань із документа links.html маркованим списком із маркерами у вигляді квадрата. Додайте до документа links.html список із 4-5 визначень, що складається з гіперпосилань та коментарів до них. Приклад елемента такого списку:

Яndex

Яndex — один із популярних у Росії пошукових серверів.

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

Тема: Гіпертекстові посилання.

1. Постановка задачі: Створити документ links.html із заголовком “Мої гіперпосилання” і збережіть його у тій самій папці, що і документ myself.html (лабораторна робота №1). Додайте в links.html перелік гіперпосилань на різні ресурси Інтернету. Наприклад:

Поштова служба http:/www.mail.ru/

Пошуковий сервер http:/www.rambler.ru/ і т.ін. — всього 6-8 гіперпосилань.

При зверненні до них документи повинні відкриватися у новому вікні.

2. Додайте у верхню частину документа links.html гіперпосилання “на головну сторінку”, яке повертає назад до документа myself.html.

3. Додайте у документ myself.html строку “Мої гіперпосилання”, що адресує документ links.html. Документ має відкриватися у поточному вікні.

4. Зробіть підпис із файла myself.html гіперпосиланням на вашу електронну адресу.

Додайте у нижню частину файла myself.html гіперпосилання “у початок сторінки”, котре адресує перший рядок документа

Гіпертекстовими посиланнями (або hiperlink) називаються виділені області документа, що дозволяють перейти до іншої його частини або до іншого документа у мережі. Гіперпосилання складаються із "внутрішньої" частини, тобто адреси документа, на котру ми посилаємося, і "зовнішньої" частини, яку видно на екрані і яку називають якорем гіперпосилання. Якір може являти собою слово або групу слів, графічне зображення або його частину. Текстові гіперпосилання виділені іншим кольором і досить часто підкреслені. Графічні гіперпосилання часто обведені рамкою того ж кольору, яким виділяються текстові гіперпосилання. Для створення гіперпосилань служить тег виду:

<A HREF="адрес" TARGET="вікно">текст посилання</A>

Опція TARGET може бути не вказана. У цьому випадку документ відкривається у поточному вікні броузера. Якщо вказано, що TARGET=¢¢_BLANK¢¢, тоді документ відкривається у новому вікні. Текст гіперпосилань тега <A> може бути довільним.

Гіперпосилання бувають: абсолютні, відносні, внутрішні. Повна адреса документа в мережі називається URL. Гіперпосилання, у якому вказаний повний URL документа, називається абсолютним і використовується для зв¢язку із зовнішніми ресурсами Інтернету. Наприклад:

<A HREF="http://www.mail.ru/index.html" TARGET="_BLANK">російський сервер</A>

Відносне гіперпосилання вказує на документ, в якому опускається загальна адресна частина. Наприклад, із документа index.html посилаємося на test.html:

<A HREF="test.html" TARGET="_BLANK">документ test.html</A>

При використанні відносного гіперпосилання можна звертатися до папок, котрі є вкладеними або батьківськими по відношенню до папки, у якій розміщений вихідний документ. Наприклад, гіперпосилання на малюнок з іменем my.jpg, що знаходиться у папці images:

<A HREF="images/my.jpg">погляньте на малюнок</A>

Дуже часто у ролі гіперпосилання виступає малюнок, тоді можемо записати:

<A HREF=¢¢page2.html¢¢><IMG src=¢¢hyperpic.gif¢¢></A>

Внутрішні гіперпосилання призначені для навігації у межах документа. Вони мають вигляд:

<A HREF="#закладка">якір посилання</A>

а для створення закладки служить тег такого вигляду:

<A NAME="закладка">якір закладки</A>

Імена закладок повинні бути унікальними у межах документа. Наприклад, якщо перше слово документа помістити у тег:

<A NAME=¢¢start¢¢>…</A>

У нижній частині документа можна розмістити гіперпосилання:

<A HREF=¢¢#start¢¢>до початку сторінки...</A>

Гіперпосилання виділяються кольором або підкреслюванням залежно від того, як налаштований броузер. Для цього використовують атрибути LINK= та VLINK= тега <BODY>. Наприклад:

<BODY LINK=¢¢pink¢¢ VLINK=¢¢green¢¢ ALINK=¢¢red¢¢>

Жоден сайт не обійдеться без гіперпосилання типу “Написати веб-майстеру”, “Моя електронна адреса”. Таким чином, веб-майстер розраховує отримувати листи електронною поштою від вдячних відвідувачів. Для цього записують таким чином:

<A HREF="mailto:[e-mail]">Написати мені листа</A>

Завдання 1. Створити гіперпосилання у межах поточного документа.

<HTML>

<HEAD>

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

<TITLE>Розклад занять груп

</TITLE>

</HEAD>

<BODY BGCOLOR="#90EE90">

<FONT COLOR="RED" SIZE="7" FACE="ARIAL">

<TABLE WIDTH=100%>

<TR>

< TD ><A HREF="#ПН">Понеділок</А></ TD >

<TD>Вівторок</ТD>

<TD>Середа</ТD>

<TD>Четвер</TD>

<TD>П’ятниця</TD>

<TD>Cyбoтa</TD>

</TR>

</TABLE>

<BR><BR><BR><BR><BR><BR>

<P ALIGN=CENTER>

<FONT COLOR="RED" SIZE="6" FACE="ARIAL">

<B> Розклад занять груп

</B></FONT><BR></P>

<FONT COLOR="BLUE"SIZE="4" FACE="COURIER">

<A NAME="ПН"> Понеділок </A>< /B></FONT><BR>

<table width="100%" border="1" cellspacing="0" cellpadding="0"bordercolorlight="#009966" bordercolordark="#9999FF">

<tr bgcolor="#9999FF">

<td> Урок</td>

<td> 1 група</td>

<td> 2 група</td>

<td> 3 група</td>

</tr>

<tr bgcolor="#33CCCC">

<td> 1</td>

<td> Інформатика</td>

<td> Історія</td>

<td> Математика</td>

</tr>

<tr bgcolor="#33CCCC">

<td> 2</td>

<td> Фізика</td>

<td> Література</td>

<td> Англійська мова</td>

</tr>

<tr bgcolor="#33CCCC">

<td> 3</td>

<td> Математика</td>

<td> Математика</td>

<td> Історія</td>

</tr>

</table>

</BODY>

</HTML>

Зберегти документ під іменем hiper_link.html.

Завдання 2. Створити гіперпосилання на попередній документ link1.html.

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR= "#008080" SIZE="7">

<B> Розклад </B></FONT><BR>

<FONT SIZE="6"> <I> занять на понеділок </I>

</FONT><BR><BR>

<IMG SRC="CLOCK.JPG">

</P>

<CENTER>

<TABLE WIDTH=60%>

<TR><TD> <A HREF=" hiper_link.html ">1 група </А></TD>

<TD>2 група </TD> </TR>

<TR><TD>3 група </TD>

<TD>4 група </TD> </TR>

<TR><TD>5 група</TD><TD>6 група </TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Завдання до лабораторної роботи №5 для самостійного виконання

5. Створити документ links.html із заголовком “Мої гіперпосилання” і збережіть його у тій самій папці, що і документ myself.html (лабораторна робота №1). Додайте в links.html перелік гіперпосилань на різні ресурси Інтернету. Наприклад:

Поштова служба http:/www.mail.ru/

Пошуковий сервер http:/www.rambler.ru/ і т.ін. — всього 6-8 гіперпосилань.

При зверненні до них документи повинні відкриватися у новому вікні.

6. Додайте у верхню частину документа links.html гіперпосилання “на головну сторінку”, яке повертає назад до документа myself.html.

7. Додайте у документ myself.html строку “Мої гіперпосилання”, що адресує документ links.html. Документ має відкриватися у поточному вікні.

8. Зробіть підпис із файла myself.html гіперпосиланням на вашу електронну адресу.

9. Додайте у нижню частину файла myself.html гіперпосилання “у початок сторінки”, котре адресує перший рядок документа.

10.

Лабораторна робота 7

Тема: Створення і використання форм.

1. Постановка задачі: Створити документ HTML, котрий містить форму для заповнення замовлення на товар. Форма передбачає поле вводу номера банківського рахунку, поле вводу особистого номера користувача, список товарів (можна вибрати як один, так і декілька товарів), поле вводу довільних коментарів користувача. Також користувач повинен вказати один із двох видів оплати: готівковий чи безготівковий розрахунок. Користувач повинен мати можливість вказати, яку додаткову інформацію він бажає одержати при відповіді — дані про залишки на рахунку та/або список останніх виплат по рахунку. Будь-яка із цих двох опцій може бути включена або виключена.

Форми — це фрагменти HTML-документа, що “відповідають” за введення інформації клієнтом. За допомогою HTML можна створювати як прості форми (пропонується вибрати одну або декілька відповідей), так і складні (для тестів, замовлень тощо). Форми розміщуються у контейнері <FORM>…</FORM>. Даний тег повинен містити атрибут ACTION, який вказує на адресу серверного з¢єднання та є обов¢язковим. Найпростіша форма має таку структуру:

<form action="адреса серверного сценарію">

....Різні елементи форми (серед них обов¢язково присутній SUBMIT).....

</form>

Елемент INPUT створює поле форми (кнопку, поле вводу, чекбокс тощо), він повинен розміщуватися всередині елемента FORM. Всі елементи форм створюються тегами, що мають початок: <input type=¢¢…¢¢>, де виставляється значення атрибута TYPE і визначається тип елемента. Можливі такі значення цього атрибута:

TEXT (текстове поле) — створює поле вводу для одного рядка тексту;

<input type=¢¢text¢¢ name=¢¢ім¢я поля¢¢ valur=¢¢початковий текст¢¢ align=¢¢LEFT¢¢ size=¢¢число символів¢¢ maxlength=¢¢максимальне число символів¢¢>

Наприклад:

<INPUT NAME = "FIO" VALUE=" Іванов Іван Іванович " ALIGN="CENTER" SIZE="23" MAXLENGTH="30">

TEXTAREA ( текстова область ) — створює поле для вводу декількох рядків тексту. Цей елемент повинен розміщуватися всередині блоку FORM.

<textarea name="ім¢я" cols="число стовпців" rows="число строчок" wrap="спосіб переносу строчок"> текст, розміщений у текстовій області </textarea>

Наприклад:

<FORM>

<TEXTAREA NAME="address" WRAP="virtual" COLS="40" ROWS="3">

Ваша адреса...

</TEXTAREA>

</FORM>

SELECT (поле списку) — дозволяє створити вибір одного пункту або багатьох пунктів із заданого списку. При цьому елемент OPTION описує окремі пункти меню. Структура HTML- коду, що визначає поле списку, така:

<select name="ім¢я списку" size="число видимих опцій" multiple>
<option value="значення" selected>текст
<option value="значення">текст
...... і так далі......
<option value="значення">текст
<option value="значення">текст
</select>

Наприклад:

<select name="week" size="7">

<option value="1">Понеділок</option>

<option value="2">Вівторок</option>

<option value="3">Середа</option>

<option value="4">Четвер</option>

<option value="5">П¢ятниця</option>

<option value="6">Субота</option>

<option value="7">Неділя</option>

</select>

CHECKBOX (прапорець) — створює поле вводу для типу Boolean (так/ні)

<input type="Checkbox" name="ім¢я прапорця" value="значення" checked> текст, який, як правило, розміщують поряд із прапорцем

Наприклад:

Вкажіть Ваші навички: <BR>

<input type="checkbox" name="skill" value="1" checked>HTML<BR>

<input type="checkbox" name="skill" value="2">JavaScript<BR>

<input type="checkbox" name="skill" value="3">Perl<BR>

<input type="checkbox" name="skill" value="4">XML<BR>

<input type="checkbox" name="skill" value="5">FLASH<BR>

RADIOBUTTON (радіокнопка) — створює поле вводу для атрибутів, що приймають значення одне із декількох можливих. Радіокнопка створюється за допомогою коду:

<input type="radio" name="ім¢я радіокнопки" value="значення" checked> текст, який, як правило, розміщують поряд із радіокнопкою

Часто використовують декілька радіокнопок, наприклад:

Вкажіть Ваші навички: <BR>

<input type="radio" name="skill" value="1" checked>HTML<BR>

<input type="radio" name="skill" value="2">JavaScript<BR>

<input type="radio" name="skill" value="3">Perl<BR>

<input type="radio" name="skill" value="4">XML<BR>

<input type="radio" name="skill" value="5">FLASH<BR>

BUTTON (кнопка) — створення кнопок. Код має такий вигляд:

<input type="submit" name=" ім¢я кнопки" value=" надпис на кнопці ">

Наприклад:

<input type="submit" name="subm" value=" Відправити дані ">

Щоб передбачити можливість скидання усіх введених користувачем даних, використовується кнопка reset.

Наприклад:

<INPUT NAME = "FIO" VALUE=" Іванов Іван Іванович " ALIGN="CENTER" SIZE="23" MAXLENGTH="30">

<BR>

<TEXTAREA NAME="address" WRAP="virtual" COLS="30" ROWS="3">

Ваша адреса...

</TEXTAREA>

<BR>

<input type="reset" name="name" value=" ВІДМІНИТИ ВВЕДЕННЯ">

Поряд із кнопками submit та reset використовуються ¢¢звичайні¢¢ кнопки, з якими пов¢язують ту чи іншу дію:

<input type="button" name="ім¢я кнопки" value=" надпис на кнопці" onclick="дія, що пов¢язана з кнопкою ">

Наприклад:

<input type="button" value=" Показати сьогоднішнє число" onclick="alert(Date());">

PASSWORD (приховування змісту тексту) – створює поле вводу для одного рядка тексту, однак текст відображається у вигляді знака ¢¢*¢¢:

<input type="password" value=" значення за замовчуванням" size=" довжина поля (у символах)" maxlength=" максимальна допустима кількість введених символів ">

Наприклад:

<input type="password" value="123456" size="6" maxlength="8">

FILE (прикріплення файлів) — дозволяє користувачу прикріпити файл і відправити його на сервер разом із змістом текстових полів та інших елементів форми. Багато існує сайтів, де передбачено реєстрацію користувачів, а також відправку фото, текстових файлів із резюме, файлів із текстами статей та ін.

<input type="file" name="ім¢я елемента" size=" довжина адресного поля у символах" accept=" допустимий тип файла ">

Наприклад:

<input type=¢¢file¢¢ size=¢¢50¢¢ >

Завдання 1. Створити форму.

<HTML>

<HEAD>

<TITLE>Навчальний файл HTML</TITLE>

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

</HEAD>

<BODY>

<form method="post" action="mailto:[e-mail]?subject=Information">

<pre>Ваше ім¢я: <input name="name" type="text" maxlength="40" size="40" value="">

Ваша стать: <input type="radio" name="pol" value="male">Чоловіча

<input type="radio" name="pol" value="female">Жіноча

На якому курсі Ви навчаєтесь? <select name="curs" size="1">

<option value="1" selected> Перший </option>

<option value="2">Другий</option>

<option value="3">Третій</option>

<option value="4">Четвертий</option>

<option value="5">П¢ятий </option>

</select>

Які мови програмування Ви знаєте?

<input type="checkbox" name="pascal" value="yes" checked> Паскаль

<input type="checkbox" name="c" value="yes">Сі

<input type="checkbox" name="asm" value="yes"> Асемблер

Напишіть декілька слів про себе: </pre>

<textarea name="about" rows="6" cols="60" wrap="off"></textarea>

<p><input type="submit" value=" Відіслати дані ">

<input type="reset" value=" Очистити форму ">

</form>

</BODY>

</HTML>

Дата добавления: 2015-10-02