Методичні вказівки до лабораторних робіт за темою «Мова html» за курсом «інформатика та комп'ютерна техніка»



Скачати 257,18 Kb.
Дата конвертації15.08.2017
Розмір257,18 Kb.
ТипМетодичні вказівки


МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ОДЕСЬКИЙ НАЦІОНАЛЬНИЙ

ПОЛІТЕХНІЧНИЙ УНІВЕРСИТЕТ

МЕТОДИЧНІ ВКАЗІВКИ

ДО ЛАБОРАТОРНИХ РОБІТ ЗА ТЕМОЮ



«Мова HTML»

ЗА КУРСОМ «ІНФОРМАТИКА ТА КОМП'ЮТЕРНА ТЕХНІКА»

для студентів спеціальності 6.020101

Одеса ОНПУ 2009

МІНЕСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ОДЕСЬКИЙ НАЦІОНАЛЬНИЙ

ПОЛІТЕХНІЧНИЙ УНІВЕРСИТЕТ

Затверджено

на засіданні кафедри ІММЗІС

протокол №2 від 29 вересня 2009р.


МЕТОДИЧНІ ВКАЗІВКИ

ДО ЛАБОРАТОРНИХ РОБІТ ЗА ТЕМОЮ

«Мова HTML»

ЗА КУРСОМ «ІНФОРМАТИКА ТА КОМП'ЮТЕРНА ТЕХНІКА»

Одеса ОНПУ 2009

Методічні вказівки до лабораторних робіт за темою «Мова HTML» за курсом «Інформатика та комп'ютерна техніка». / Укл. О.В. Ніколаєнко - Одеса: ОНПУ, 2009 — с.
Укладач: О.В. Ніколаєнко

Теоретичні відомості
Основні теги

Тег означення початок та кінець html-файлу



<HTML>web-сторінкаHTML>

Пара тегів які описують за­головок документа



текст

<TITLE>текстTITLE> - заголовок Windows-вікна.
Введення коментарів

текст-коментар -->

або у середині парного тега



<COMMENT> текст-коментар COMMENT>
Введення тексту на сторінку

<BODY BACKGROUND="шлях/адреса файла зображення для тла"

BGCOLOR = "колір тла" TEXT = "колір символів" >

Текст

BODY>

Теги форматування символів тексту

<В> текст В>

Товстий шрифт тексту

<І> текст I>

Шрифт- курсив

<U> текст U>

Підкреслений шрифт

<SUB> текст SUB>

Нижній індекс.

<SUP> текст SUP>

Верхній індекс

<BIG> текст BIG>

ВЕЛИКИЙ шрифт

<SMALL>текстSMALL>

Малий шрифт

Створення абзаців

<P [Align={left|right|center|justify}]>

Означає початок нового абзацу.

На­ступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок

<BR>Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка
Заголовки

<Н№>ЗаголовокН№
> - де № - це число яке змінюється від 1 до 6, визначає розмір символів Заголовка (за зменьшенням). Починається з абзацу та вирівнюється до лівого краю.
Теги вирів­нювання

<CENTER>текст по центруCENTER
>

<LEFT>текст до лівого краю (за умовчанням)LEFT>

<RIGHT>текст до прапвого краюRIGHT>
Рисування гортзонтальної лінії

<HR WIDTH =”довжина у пікселяхSIZE=”товшина лінії” COLOR="колір лінії">
Шрифти

<FONT FACE = "назва шрифта" SIZE = розмір шрифта COLOR = "колір">

текст

FONT>

розміри символів шрифту можуть бути від 1 до 7. (Роз­мір 3 вважається стандартним, він орієнтовно відповідає 10 пунктам).


Тег з фідформатованим текстом

<PRE>текст відображатиметься у броузері так як записаний у коді (перехід на рядки, пропуски тощо)PRE
>

Скорочення

текст розшифровки”> скорочення
Основні кольори

black - чорний

#000000

green - зелений

#008000

navy - темно-синій

#000080

teal - бірюзовий

#008080

silver - сірий

#C0C0C0

lime - яскраво-зелений

#C0FF00

blue - синій

#0000FF

aqua - блакитний

#00FFFF

maroon - малиновий

#800000

olive - темно-зелений

#808000

purple - бузковий

#800080

gray - темно-сірий

#808080

red - червоний

#FF0000

yellow - жовтий

#FFFF00

fushsia - рожевий

#FF00FF

while - білий

#FFFFFF


Службові та непечатні символи

<

<

>

>

 

Неразривний пробіл

&

&

« » "

« » “

&ndash

-

&mdash

--- подовжине тире

&pi




Створення списків

Маркований список:

<LH> заголовок спискуL
Н>

<UL [TYPE={disc|circle|square} ]>

<LI> елемент списка

<LI> елемент списка . . .

UL
>

Нумерований список:

заголовок списку


    "значение параметра" [START={0|1}]>

  1. [TYPE="значение параметра"]>елемент списка

  2. елемент списка . . .

де значення параметра TYPE задають зображення нумерації списку:

"і" - римськими малими (і, іі, ііі, iv, ...),

"І" - римськими великими (І, II, III, IV, ...) цифрами,

"а" - латинськими малими (a, b, c, d, ...),

"А" - латинськими великими (А, В, С, ...) літерами.


Список визначень


<LH>3aголовок

<DL>

<DT> термін

<DD> визначення 1

<DD> визначення 2 ...

DL
>
Створення таблиць

<TABLE параметри>
[<ТС> Заголовок таблиці ТС
>]
<TR><ТН>текст заголовок у клітинкіТН> <ТD>текст у клітинкіТD> … TR>

<TR><ТН>текст заголовок у клітинкіТН> <ТD>текст у клітинкіТD> … TR>

………………….


TABLE>

Порожню клітинку описують, як D>D> абоD>&nbsp;D> .

Деякі параметри



BORDERCOLOR = "колір рамки"





BGCOLOR= "колір тла"





BORDER=товщина рамки




ROWSPAN=n

COLSPAN=n


n – кілкість об’єднаних послідовних клітинок у рядку (у стовпці) у відповідних тегах <ТН> чи <TD>

Графічні об'єкти


<IMG SRC="адpeca графічного файлу.bmp або jpg або gif "

ALT = "альтернативний текст"

ALIGN="вирівнювання "

WIDTH=ширина у пікселях HEIGHT=висота BORDER=товщина рамки в пікселях>
Гіперпосилання

Гіперпосилання на файл.



<А HREF = "адреса файлу"

NАМЕ="#позначка"

TAGET={_blank|_self}> вікно для тексту – у новому або у тому самому-- >

текст-гіперпосилання А
> .

Гіперпосилання на деяке графічне зображення.



HREF = " адреса файлу "> <IMG SRC = " адреса графічного файлу "> A
>

Гіперпосилання в межах сто­рінки.

Визначається місце позначки у файлі

<А NАМЕ="#імя позначки">А
>

та гіперпосилання на створену позначку



<A HREF="#імя позначки"> текст гіперпосилання А>

Змінити колір гіперпосилання – у тегі :



LINK = "колір"

Колір гіперпосилання

VLINK="кoлip"

Змінює колір гіперпосилання після першого його використання

ALINK="колір"

Змінює колір активізованого гіперпосилання

Динамічні ефекти

<MARQUEE HEIGHT = висота смуги в пікселях

BGCOLOR = "колір тла смуги"

LOOP= число кількісті проходів>

Текст, що рухається

MARQUEE>

Навігаційна карта

Опис самого зображення карти має обов’язковий параметр:



<IMG USEMAP = "#назва карти">,
Карту у цілому описується

<МАР NAME ="#назва карти">

<AREA параметри> Для опису окремих зон зображення -->

...

Па­раметри тега <AREA>:



HREF = "адреса ресурсу, який викликають"

ALT = "альтернативний текст-підказка"

TAGET=”{_blank|_self}” вікно для тексту – у новому або у тому самому-- >

SHAPE=”{rect|circ|poly|default}“ тип форми області (прямо­кутником за умовчанням, колом, багатокутником, все зображення ).

COORDS = "список координат області"
Створення сайтів

Для поділу вікна броузера на фрейми



розмір лівой обл.,розмір правої обл.,...”>

<FRAME параметри>

<FRAME параметри>

...

FRAMESET
>

Розміри областей задають: відносно у % або фіксовано - у пікселях та розєднуються ,.

Параметри <FRAME >

SRC =Url стартового html-файлу

NAME=назва фрейма - значенням якого є назва фрейму, цю назву придумує користувач, вона використовуватиметься далі як значення па­раметра TARGET тега <А>.

Параметри для тегів FRAMESET та FRAME



FRAMEBORDER={0|1} Задає наявність рамок фреймів (0 за умовчанням) або no|yes

BORDER =ширину межі між фреймами у пікселях

BORDERCOLOR=колір межи (за умовчаннямсірий)

Тільки для FRAME

MARGINHIGHT=величину відступів зверху у пікселях

MARGINWIDTH=величину відступів від бокових

SCROLLING =”{no|yes|auto}” Задає наявність чи відсутність смуг прокручування у вікні

NORESIZE (Забороняє змінювати розміри фрей­му у вікні броузера (без значень))
Форми

Тег для опису форми



<FORM ACTION=”url обработчика даних”

METHOD={Get|Post} способ передачі даних по посиланню або за значенням

ENCTYPE={application/x-www-form-urlencoded або text/plain} - тип кодування для обрабки програмою або для передачі по електроної пошті

[TARGET=значение]>

елементи форми



Поле введення: тексту, пороля, вибір файла, сритий текст:

<INPUT TYPE={Text | Password | File | Hidden }

NAME=ім’я элемента

VALUE=текст за умовчанням

SIZE=кількість видімих символів рядка

MAXLENGTH=максимальна кількість символів рядка>

Кнопки: посилання даних, кнопки-картинки, відміни:

<INPUT TYPE={Submit | Image | Reset}

VALUE=название на кнопке>
Список варіантів

<INPUT TYPE=checkbox NAME=значение1 [CHECKED]>

<INPUT TYPE=checkbox NAME=значение2 >

………………..


<INPUT TYPE=checkbox NAME=значениеN>
Список перемикачів:

<INPUT TYPE=radio NAME=значение1 [CHECKED]>

<INPUT TYPE=radio NAME=значение2>

………………..


<INPUT TYPE=radio NAME=значениеN>
Список, що випадає:

<SELECT NAME=імя списка

SIZE=висота видимої частини списка (у рядках)

MULTIPLE (без значень) > - вибір декількох пунктів

<OPTION VALUEпередаваєме значення»

SELECTED (без значень)> за умолчанням

……………




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

<TEXTAREA NAME=ім’я

ROWS=висота (у рядках)

COLS =довжина (у символах)>

Текст TEXTAREA
>.

Таблиці стилів

Впроваджена таблиця:

<STYLE TYPE="text/css">

{Список тегів|.клас} {властивість1:значення1;



властивість2:значення2; властивість3:значення3; . . . STYLE
>

Загальні властивості стилів та їхні значення

Властивість


Значення

Пояснення

Border-color

red, green, #ffcc55

Колір рамки

Border-style

none, dotted, dashed, solid, double, groove, ridge, inset, outset

Стиль рамки

Border-width

2mm, 3mm

Товщина рамки

Font-family

Arial, «Times New Roman», Serif

приоритетний список шрифтів

ІFont-size

12pt, 16pt

Розмір шрифта

Font-style

normal, oblique, italic

Стиль шрифту

Font-weight

normal, bold, bolder

Товщина шрифта

Word-spacing

число у mm

Відстань між словами

Letter-spacing

число у mm

Відстань між символами

Line-height

число у mm

Відстань між рядками

Background-attachment

Fixed, scroll

Тло фіксоване,прокручується

Background-color

red, green, #ffcc55

Колір тла

Background-image

URL("aдрeca графічного файлу для тла")

Color

red, green, #ffcc55

Колір елемента

Text-align

Left, right, center, justify

Вирівнювання тексту

Text-decorate

none, underline, overline, line-through, blink

Оформлення тексту


Text-indent

Число

Абзацний відступ

Vertical-allign

top, super, middle, sub, bottom

Вертикальне вирівнювання

Margin або

Margin-top

Margin-right

Margin-bottom

Margin-left


Число1 число2 число3 число4

Відступи зверху, справа, знизу, зліва

Padding або

Padding-top

Padding-right

Padding-bottom



Padding-left

Число1 число2 число3 число4

Величина вільного простору між стороною рамки і елементом у рамці

Height

Число

Висота елемента

Width

Число

Ширина елемента

Float

none, left, right

Обтікання об'єкта текстом

List-style-image

URL("aflpeca графічного маркера списку")

List-style-type

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none

Вигляд маркера списку (диск, круг, квадрат, арабські цифри, малі чи великі римські тощо)

List-style-position

inside, outside

Позиція маркера

Зв’язана таблиця стилів:

Таблиця є самостіний файл.css, а у html-файлі створюється запис у тегі <HEAD>:


<LINK HREF ="адреса таблиці стилів (наприклад, styles.css)"

TYPE = "text/css" REL = "stylesheet" TITLE = "URL таблиці стилів">
Лабораторна робота № 1

Тема «HTML. Створення простої web-сторінки та її форматування, створення списків»

Мета Уміти створювати прості web-сторінки та надавати їм певного вигляду, використовуя для цього основні команди мови HTML.

Послідовність виконання роботи


  1. Відкрийте редактор NotePad. Як це зробити?

  2. Створіть за допомогою текстового редактора html-файл з особистими данними о собі.

Текст повинен мати заголовок, складатися з декількох абзаців, мати коментарі. Який тег використовується для введення тексту?

  1. Задайте назву вікна web-сторінки. Який тег це робить?

filel.htm -->



Особисті данні



Я Сідор Сідорович Сідоренко. Народився 12 квітня 198...р.

у м.Одеса.

В 200... році закінчив школу №... м.Одеса.

Моя адреса: індекс, місто, вулиця,будинок,квартира.





  1. Збережіть його під назвою filel1.htm у власній папці.

  2. Відкрийте файл file1.htm у броузері Internet Explorer.

Для цього відкрийте свою робочу папку і двічі клацніть мишею на назві файлу.

  1. Відредагуйте сторінку. Для того щоб відредагувати файл, треба спочатку відкрити програму NotePad, а потім файл і кожного разу після редагування треба зберегати файл.

Задайте колір фона та текста. Змінювайте відповідні параметри тега BODY - BGCOLOR і TEXT (назви кольорів: red, green, white, yellow, blue, #ffaa55 тощо).

  1. Виконайте форматування тексту у файлі filel.htm. Застосуйте у тексті різні накреслення літер (жирний, курсив, підкреслений).

Заголовок тексту відцентруйте та відокремти від іншого тексту порожнім рядком.

Кожний абзац розташуйте з нового рядка.



У кінці всього текста наведіть черту. Які теги використали для форматування?



  1. Створіть ще один html-файл з розповіддю про себе.

Поекспериментуйте з тегами форматування тексту. Використайте якнайбільше тегів форматування і надайте своїй сторінці якнайліпшого вигляду.

  1. Збережіть файл із назвою file2.htm.

  2. Перегляньте цей файл за допомогою броузера і поекспериментуйте з розмірами вікна, в якому демонструється документ.



  1. Удоскональте свою попередню web-сторінку та додайте до текста список своїх уподобань.

  2. Відкрийте file2.htm із розповіддю про себе. Список уподобань створіть як нумерований чи ненумерований список. Чим відрізняється створення цих списків?

  3. Збережіть файл на диску і перегляньте його у броузері.



  1. Проведіть на сторінці лінії різної ширини, довжини та кольорів. Як це зробити?

  2. Виокремти список у тексті іншим шрифтом. Який тег змінює тип шрифта?

  3. Додайте список тлумачення.

Відкрийте file1.htm із особистими данними та створить список про своїх близьких.




Контрольні питання


  1. Що таке web-документ?

  2. Для чого призначена програма-броузер?

  3. Що таке web-вyзoл (web-сайт)?

  4. Яка структура простого web-документа?

  5. Для чого призначена мова HTML?

  6. Що таке тег і які є теги?

  7. Які параметри може мати тег BODY?

  8. Який тег позначає початок нового абзацу?

  9. Які теги позначають товстий, курсивний і підкреслений шрифти?

  10. Які теги призначені для вирівнювання елементів на сторінці?

  11. Яке призначення тега FONT, параметри тега FONT?

  12. Які є типи списків?

  13. Як створити ненумерований список?

  14. Як створити нумерований список?

  15. Як створити список означень?


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

Тема «HTML.Створення web-сторінки з таблицями, гіперпосиланнями та динамічними ефектами»

Мета. Уміти додавати на сторінку таблицю, графічні та відіо-зображення, створювати динамічні ефекти, використовувати теги для створення різних гіперпосиланнь.

Послідовність виконання роботи


  1. На новій web-сторінці створить таблицю з даними про свій рейтинг.

Таблиця буде складатися з 3 стовпців та 4 рядків.

Задайте заголовок таблиці “Результати рейтінга”.

Задайте заголовкі стовпців та рядків.

Заповніть таблицю оцінками. Які теги для цього використували?





  1. Новий файл збережіть під назвою file3.htm. Перегляньте його у броузері.

  2. Змінить вигляд таблиці.

Задайте товщину рамки таблиці, на приклад, 3, задайте кольори рамки та фона таблиці. Як це зробили?

  1. Вирівнюйте текст у клітинках таблиці.

У заголовках – по центру, в інших клітинках – на ваш смак.

  1. Поекспериментуйте з параметрами тега TABLE. Об'єднайте деякі дві клітинки таблиці в одну. Удоскональте свою сторінку якнайліпше.

  2. Створіть ще одну таблицю.

Відкрийте свою web-сторінку file2.htm та створіть таблицю для розміщення фотографії та текста.

Таблиця повинна складатися з одного рядка та двох стовпців: у першому - фото, у другому – текст, наприклад, “Це я!”. (Графічні файли повинні мати розширення bmp, jpg, gif).З допо­могою якого тега?



  1. Відредагуйте графічне зображення..

Встановіть розміри фотографії, візміть її у рамку. Як це зробили?

  1. Зробіть фотографію як гіперпосиланням до файлу file1.htm з особистими даними. Як це зробити?



  1. Змініть таблицю.

Зробіть її без рамки. З допомогою якого параметра це можна зробити ?

  1. Вставте у свій файл гіперпосилання на html-файл, наприклад, на файл з таблицею.

У кінці сторінки після черти введіть речення: Мої успіхи і зробіть його гіперпосиланням на файл з таблицею file3.htm. Як це зробили?

  1. Створить гіперпосилання у вигляді графічного зображення.

Клацнувши на web-сторінці на фотографії, повинен від­криватися файл з особистими данними file1.htm. Як це зробили?

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

В кінці сторінки розташуйте рядок з гіперпосиланням: Перехід к початку сторінки для переходу у початок стороінки. Як це зробити?



  1. Застосуйте до заголовку динамічний ефект.

У файлі file2.htm зробіть рядок Ця сторінка створена Прізвище І.П. рухомим у смузі будь-якого коліру. Який тег для цього використовується?

Контрольні питання


  1. Яке призначення тега TABLE, параметри тега TABLE?

  2. Які теги формують у таблиці рядки, клітинки-заголовки і звичайні клітинки?

  3. Як у таблиці об'єднати декілька клітинок в одну?

  4. Який параметр використовують для вирівнювання елементів?

  5. Яка особливість пари тегів
    ...
    ?

  6. Як вставити графічне зображення у web-сторінку?

  7. Які параметри може мати тег IMG?

  8. За допомогою якого тега вставляють гіперпосилання?

  9. Яке призначення параметрів LINK, VLINK, ALINK?

  10. Як деяке графічне зображення зробити гіперпосиланням?

  11. Які є види посилань у межах одної web-сторінки?

  12. Що таке якори?

  13. Як запустити звук одночасно з відкриванням сторінки?

  14. Як створити динамічний ефект рухомого тексту?

  15. Які ви знаєте параметри рухомого тексту?



Лабораторна робота № 3


ТемаHTML.Створення сайтів”.

Мета. Вміти створювати сайти, розподіляти їх на фрейми, створівати текстові та графічні навігаційні панелі.
Послідовність виконання роботи

  1. Створіть сайт про себе. Складіть основний файл, який запускатиме сайт та розподіляти його на фрейми. Який тег виконує розподіл на фрейми?

Сайт поділить на два вертикальних фрейма, лівий – вузший та правий. Лівий фрейм матиме зміст сайту у вигляді гіперпосилань для навігації по сайту, правий – як початкова сторінка та для перегляду сторінок сайту. Який тег та які параметри описують фрейми?

  1. Збережіть основний файл під назвою frame1.html.



  1. Складіть файл для опису лівого фрейму.

Він повинен містити: заголовок, наприклад, Сайт Прізвище І.П. та 4 гіперпосилання на файли, які мають містити інформа­цію про вас особисто, вашу родину, друзів, місце навчання, ваші захоплення, успіхі у навчанні, адресу тощо (можно скористатися файлами, які були створені у лабораторних роботах №1,2 ).

Забезпечте відображення сторінок у правому фреймі. Який параметр це виконує і у якому тезі він містится?



  1. Збережіть файл під назвою leftframe.html.

  2. Складіть файл для опису правого фрейму. Він має вигляд початковою сторінки сайту, наприклад, слідуючого змісту: Запрошуємо на сайт Прізвище І.П.

  3. Збережіть його під назвою rightframe.html.

  4. Розташуйте інформацію у фреймах як найкраще, відформатуйте тексти, задайте необхідні параметри.

Задайте фон фреймам. Відкрийте почергово файли leftframe.html та rightframe.html . Який тег та параметр це робить? Наприклад, жовтий фон у лівому фреймі і зелений — у правому.

Заберіть межу між фреймами. Як це зробити?

Задайте смуги прокручування лише для правого фрейму. Який параметр?


  1. Скопіюйте основний файл під назвою frame2.html.

  2. Створіть початкову сторінку більш цікавою. Виконайте відповідні зміни у файлі.

Поділіть правий фрейм на два горизонтальних фрейма. У вузькому верхньому фреймі розташуйте особисту емб­лему з деякого графічного файлу або фотографію. Як це зробили?

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



  1. Збережіть зміни у файлі frame2.html.

  2. Удоскональте сайт, щоб він виглядав як найліпше. Перегляньте його у броузері.

Сайт з розкритою сторінкою Моя біографія.



  1. Створіть рисунок для графічної навігаційної панелі за допомогою графічного редактора Paint.

Підберіть у бібліотеці, що є на комп'ютері рисунок, який може бути основою навігаційної карти.

Рисунок модифікуйте за допомогою графічного редактора, наприклад, створіть текстові написи на ньому. Розташуйте елементи для гіперпосиланнь та уточніть координати гарячих областей.



Збережіть рисунок як файл з розширенням ris.bmp.

  1. Запишіть html-файл для навігаційної карти. Як описати рисунок як навігаційну карту?

Задайте відповідні розміри карти. Опишить горячі області карти. Зробіть їх як коло, прямокутник та трикутник. У якому тезі робиться опис? Який тег та параметри для цього використовується?

  1. Збережіть під назвою karta.html.. Виконайте його. Поекспериментуйте з картою

  2. Скопіюйте основний файл під назвою frame3.html.

  3. У лівому фреймі для попереднього сайту розташуйте графічну навігаційну карту.

Змініть основний файл так щоб замість файла leftframe.html використовувался файл karta.html.. Збережіть файл.

  1. Забезпечте відображення сторінок у правому фреймі.

Який парамет використовується для цього у тезі ?.


Контрольні питання


  1. Що таке фрейми?

  2. Яке призначення основного html-файлу?

  3. Які параметри може мати тег ?

  4. Які параметри може мати тег ?

  5. Як створюються складні конфігурації фреймів?

  6. Яке призначення параметра TARGET?

  7. Яке призначення тега-контейнера NOFRAME?

  8. Що таке навігаційна карта?

  9. Що таке гаряча область?

  10. Які форми можуть мати гарячі області?

  11. Який тег задає рисунок для навігаційної карти?

  12. Який тег призначений для опису гарячих областей карти?

  13. Яке призначення параметра NAME?

  14. Яку будову має тег-контейнер <МАР>?

  15. Що таке холодний фрагмент на карті?



Лабораторна робота № 4


ТемаHTML. Таблиці стилів та елементи форми”.

Мета. Вміти створювати сторінки з кнопками, списками, полями введення тощо, оформляти сторінки, використовуя таблиці стилів.
Послідовність виконання роботи

  1. Скористайтеся існуючим сайтом . Додайте до нього ще одну сторінку Анкета.

  2. Створіть сторінку Анкета.htm. Ведений текст на сторінці не форматуйте, тільки зробіть заголовок №1 та курсив де потрібно.

  3. Для введення Імені додайте Поле введення з текстом-підказкою у рядку ФИО.

  4. Додайте Поле для введення особистого поролю , який буде складатися з 5 символів.

  5. Розташуйте Список перемикачів з 2 елементів для опису статі.

  6. Для ознаки діяльності створіть Список варіантів з 5 елементів, розташованих по різному. З обраним за умовчанням елементом Студент..

  7. Створіть Відкриваючий список з 5 елементів (наприклад, науково-познавальна, фантастика, фентезі, пртгоди, історічні), 3 елемента з яких є видимими. Останній елемент (історічні) оберіть за умовчанням. Передбачти многоваріантний вибір.

  8. Розташуйте Текстове поле з 5 рядків та 40 символів вздовжки, з вспливаючою підказкою Смелее! .

  9. У кінці сторінки додайте дві кнопки. Першу Кнопку відміни з підписом Отмена, другу Кнопку Подачи з підписом Готово.

  10. Додайте гіперпосилання на якусь адресу.





  1. Відформатуйте цю сторінку, застосувавши внутрішню таблицю стилів, яка зробить курсив на всієї сторінки – бузкового кольору, заголовки №1 зробить шрифтом Arial, розміром 12pt, червоного кольору.

  2. Додайте вбудований стиль у тег курсива для визначення статі, як напівжирний.

  3. Для всього сайту зробіть зовнішню таблицю стилів з іменем mystyle.css, яка для всього кода встановить колір тла – сірий, шрифти обиратиме Times New Roman або Serif, кольор символів – бордовий, відступи текста верхнє та нижнє було по 20, ліве та праве – по 10, також передбачити, щоб колір гіперпосилання до використання та після був відповідно червоним та зеленим.


Контрольні питання


  1. Для чого використовуються форми?

  2. З дпопомогою яких тегів створюються форми?

  3. Чим відрізняються ведення різних варіантів Кнопки?

  4. Як ввести пороль?

  5. У чому різниця між описом елементів списка перемикачів та списка варіантів?

  6. У списку, що розгартається, як обрати декілько варіантів?

  7. Як у списках встановити значення за умовчанням?

  8. Яке призначення таблиці стилів?

  9. Які є способи взаємодії таблиці стилів і html-файлу?

  10. З чого складається таблиця стилів?

  11. Які одиниці вимірювання застосовують у мові CSS?

  12. Для чого групують властивості?

  13. Що таке успадковування властивостей?

  14. Яке призначення тега DIV?

  15. Яке призначення тега SPAN?



Каталог: 2010
2010 -> Ахматова Анна Андріївна Робота Учениці 11 класу Березанської зош
2010 -> Лауреат міжнародної літературної премії «Етна-Таорміна» (Італія, 1962). Почесний доктор літератури Оксфордського університету
2010 -> Креативний підхід вчителя до підготовки уроків читання
2010 -> Знаменних та пам’ятних дат на 2011 рік дніпропетровськ  2010
2010 -> Народної творчості І культурно-освітньої роботи семен гулак-артемовський – гордість української музичної культури
2010 -> Том Гуманітарні науки Бердянськ 2010 (06) ббк 74я5


Поділіться з Вашими друзьями:

Схожі:

Методичні вказівки до лабораторних робіт за темою «Мова html» за курсом «інформатика та комп\Методичні вказівки до виконання лабораторних та самостійних робіт з дисципліни «Практикум з інформатики»
Методичні вказівки до виконання лабораторних та самостійних робіт на тему “Створення презентацій в ms powerPoint” з дисципліни «Практикум...
Методичні вказівки до лабораторних робіт за темою «Мова html» за курсом «інформатика та комп\Методичні вказівки до виконання лабораторних робіт з дисципліни «Процеси І технології цифрового друку»
Методичні вказівки до виконання лабораторних робіт з дисципліни «Процеси І технології цифрового друку» для студентів напряму підготовки...
Методичні вказівки до лабораторних робіт за темою «Мова html» за курсом «інформатика та комп\Конспект лекцій, інструкції з лабораторних робіт, методичні вказівки, індивідуальні завдання
Прошу розмістити на сайті дну у розділі «Методичні матеріали для самостійної роботи студентів» наступні матеріали
Методичні вказівки до лабораторних робіт за темою «Мова html» за курсом «інформатика та комп\Методичні вказівки до виконання контрольних робіт з дисципліни «Українська мова
«Українська мова (за професійним спрямуванням)» для студентів усіх спеціальностей
Методичні вказівки до лабораторних робіт за темою «Мова html» за курсом «інформатика та комп\Методичні вказівки до практичних занять І самостійних робіт для студентів 5-го курсу
Методичні вказівки з дисципліни “Риторика” / Укладач І. Р. Жиленко. – Суми: Вид-во СумДУ, 2009. – 42 с
Методичні вказівки до лабораторних робіт за темою «Мова html» за курсом «інформатика та комп\С. В. Харченко Виробничий тренінг з управління персоналом Методичні вказівки
Методичні вказівки побудовані відповідно до діючої програми проведення практичних занять у навчально-тренувальній фірмі І охоплюють...
Методичні вказівки до лабораторних робіт за темою «Мова html» за курсом «інформатика та комп\Методичні рекомендації для проведення семінарських занять з навчальної дисципліни «історія І культура україни»
Програмна інженерія, 123 Комп‘ютерна інженерія, 151 Автоматизація та комп‘ютерно-інтегровані технології, 163 Біомедична інженерія,...
Методичні вказівки до лабораторних робіт за темою «Мова html» за курсом «інформатика та комп\Методичні вказівки для виконання курсових та маґістерських (дипломних) робіт з історії світової літератури
Методичні вказівки для виконання курсових та маґістерських (дипломних) робіт з історії світової літератури та національної літератури....


База даних захищена авторським правом ©biog.in.ua 2019
звернутися до адміністрації

    Головна сторінка
Інформації
Інформація
Автореферат
Диплом
Довідка
Додаток
Закон
Звіт
Картка
Книга
Конкурс