Методичні вказівки до лабораторної роботи на тему Мова HyperText Markup Language (HTML)
« Назад
Лабораторна робота. Мова HyperText Markup Language (HTML) і його використання для структурованого подання інформаціїЦіль роботи: навчитися використовувати мову розмітки гіпертексту html для структурованого подання різних видів текстової і графічної інформації. Завдання 1. Ознайомитися з теоретичним матеріалом про призначення гіпертексту, областях його застосування і засобах подання гіпертекстової інформації). Завдання 2. Вивчити синтаксис мови html, елементи, використовувані в цій мові для розмітки тексту, і їхні параметри (текст, виділений синім кольором). Для отримання додаткової інформації рекомендується використовувати інформаційні ресурси Інтернет. Завдання 3. Виконати навчальні вправи 1-16 (при необхідності) і практичні завдання, результати зберегти. Завдання 4. Оформити звіт про виконання лабораторної роботи у виді документа MS Word. Завдання 5. Відповісти на контрольні питання, відповіді включити в звіт по лабораторній роботі. Гіпертекст Інструкції HTML, у першу чергу, призначені для керування процесом виведення вмісту документа на екрані програми-клієнта і визначають цим самим спосіб подання документа, але не його структуру. HTML припускає, що документ складається зі стандартних елементів розмітки, що відображаються стандартним образом. Набір цих елементів – це типізація компонентів звичайного документа: заголовок, автори, параграфи, таблиці, цитування і т.д. Як елемент гіпертекстової БД, описуваної HTML, використовується текстовий файл, що може легко передаватися по мережі з використанням протоколу HTTP. Ця особливість, а також те, що HTML є відкритим стандартом і величезна кількість користувачів має можливість застосовувати можливості цієї мови для оформлення своїх документів, безумовно, вплинули на ріст популярності HTML і зробили його сьогодні основним механізмом подання інформації в Інтернет. Документ, написаний на HTML, являє собою текстовий файл, що містить власне текст, що несе інформацію, і теги розмітки (markup tags). Теги являють собою визначені стандартом HTML послідовності символів, що знаходяться між знаками < і >. Відповідно до тегів розмітки програма розташовує текст на екрані, включає в нього рисунки, що зберігаються в окремих графічних файлах, і формує гіперзв'язки з іншими документами чи ресурсами Internet. Файл мовою HTML приймає "гіпертекстовий вигляд" тільки тоді, коли він інтерпретується програмою перегляду - броузером. Синтаксис html Існує 2 види тегів: парні і непарні. Дія будь-якого парного тега починається з того місця, де зустрівся відкриваючий тег і закінчується після відповідного закриваючого тега (ознакою якого є символ /, що йде відразу після < ) чи кінця файлу. Наприклад, текст, що йде за тегом курсиву <I> , виводиться на екран курсивом до його закриваючого парного тега </I> . Непарний тег викликає "одиничну" дію в тому місці, де він зустрічається. Наприклад, тег <BR> служить для переходу на новий рядок при виведенні тексту. Багато тегів можуть включати додаткові параметри, що модифікують ефект даного тега, наприклад <P ALIGN=CENTER> - тег початку параграфа, який вирівнюється по центру вікна. Структура HTML документа Документ починається з тега <HTML>, що повідомляє програмі перегляду, що даний файл - це документ мовою HTML. Закінчується документ тегом </HTML>, що є закриваючим тегом, парним тегу <HTML>. Заголовок документа виділяється тегами <HEAD> і </HEAD>. Кожен HTML документ повинний мати рядок заголовка, який визначається в такий спосіб: <TITLE> Ім'я заголовка </TITLE>. Цей рядок ідентифікує документ і відображається навігатором не тільки в заголовку головного вікна, але й в інших місцях, наприклад, у списку посещенных сторінок. Тіло документа знаходиться між тегами <BODY> і </BODY> і відображається у внутрішній області вікна. Тіло документа може містити один чи кілька рядків. Найпростіший HTML-документ має вид: <HTML> <HEAD> <TITLE> Найпростіший HTML документ </TITLE> </HEAD> <BODY> Ласкаво просимо! </BODY> </HTML> Далі - між тегами <HEAD> і </HEAD> - знаходиться головна частина документа, усередині якої, між тегами <TITLE> і </TITLE>, знаходиться назва документа. Назва виводиться не разом із самим документом, а в заголовку вікна програми перегляду (title bar), а також використовується і для інших цілей. Потім - між тегами <BODY> і </BODY> - міститься основна частина документа, так називане тіло. Заголовки усередині документа У мові HTML можливе використання заголовків шести рівнів. Заголовок першого рівня вважається самим головним і використовується як перший заголовок документа. Заголовки можуть виділятися кольором і/чи жирним шрифтом. Приклад: <Hx> Текст заголовка </Hx>, де х - число від 1 до 6, що вказує рівень заголовка. Між тегами <H1> і </H1> розташовується заголовок (heading), що програма перегляду виводить великим і/чи жирним шрифтом. Вирівнювання параграфів тексту Для розбивки документів на параграфи в HTML-документах використовуються спеціальні теги <P> і </P>. Без них текст стає одним великим параграфом. Помітимо, що закриваючий тег може бути опущений, тому що браузер розуміє, що коли відкривається новий <Р>, те це означає кінець попереднього параграфа. У стандарті HTML версії 3.2 визначений параметр ALIGN, за допомогою якого можна задати вирівнювання параграфа по горизонталі. Даний параметр може приймати наступні значення: LEFT, RIGHT, CENTER. Однак для вирівнювання по центрі можна скористатися також спеціальним тегом <CENTER>. Нижче приведений фрагмент програми, що використовує даних тегів: <P ALIGN=LEFT>Параграф вирівняний по лівому краї <P ALIGN=RIGHT>Параграф вирівняний по правому краї <P ALIGN=CENTER>Параграф вирівняний по центру <P><CENTER>Параграф також вирівняний по центру</CENTER> Тег <P> відзначає початок параграфа, текст якого виводиться з нового рядка. Кожному параграфу передує порожній рядок. Варто звернути увагу на те, що довжина рядка тексту, виведеного програмою перегляду, у загальному випадку, не збігається з довжиною рядка у вихідному HTML-файлі і визначається розміром вікна програми перегляду і розміром символів шрифту, що ця програма використовує для виведення тексту. ОРГАНІЗАЦІЯ СПИСКІВ Списки зустрічаються в документах дуже часто. Звичайно списки бувають нумерованими і ненумерованими (неупорядкованими). В останньому випадку кожен елемент списку виділяється яким-небудь символом, звичайно - жирною крапкою. Теги <UL> і </UL> позначають початок і кінець так називаного ненумерованого списку (unnumbered list), кожному елементу якого передує тег <LI> (list item). Кожен елемент списку програма перегляду виводить з нового рядка і позначає символом . Неупорядковані списки Для створення неупорядкованого списку призначений тег <UL>, що використовується в парі з </UL>, що закриває список . Кожен рядок списку позначається тегом <LI>. Для даного тега можна додати параметр TYPE, що визначає зовнішній вигляд символу, що використовується для виділення рядка в списку, і може мати наступні значення. Значення параметра TYPE
Нижче розглянемо приклад неупорядкованого списку, використовуючи всі значення параметра TYPE. <UL> <LI TYPE=DISK>Перший рядок <LI TYPE=CIRCLE>Другий рядок <LI TYPE=SQUARE>Третій рядок </UL> Нумеровані списки Для створення нумерованих списків призначений тег <OL>, який необхідно використовувати разом з тегом </OL>. Нумерований список створюється аналогічно неупорядкованому списку. Кожен рядок у списку повинний бути відзначений тегом <LI>. У тегу <OL> можна вказувати перераховані нижче параметри
Список визначень Якщо необхідно розмістити в документі HTML список визначень яких-небудь термінів, то можна скористатися для цього тегами:
Наступний фрагмент програми ілюструє список визначень: <DL> <DT><B>HTTP</B> <DD> Протокол передачі гіпертексту (HyperText Transfer Protocol) <DT><B>HTML</B> <DD>Мова розмітки гіпертексту (HyperText Mark-up Language) </DL> РОЗМІЩЕННЯ ГРАФІЧНИХ ЗОБРАЖЕНЬ Для розміщення зображення в документі треба пам'ятати, що в HTML використовується тільки два графічних формати. Перший формат - це формат обміну графікою GIF (Graphics Interchange Format), другий - JPEG. Для того, щоб помістити зображення усередині тексту, треба скористатися тегом <IMG>. Параметри тега <IMG>.
Тег <IMG SRC="face.gif" ALT="Face"> (image source) включає в документ зображення, що зберігається у файлі face.gif. Атрибут ALT="Face" задає так називаний альтернативний текст (у даному випадку, Face), що неграфічні програми перегляду виводять на екран замість відповідного малюнка. Цей же текст буде видний, якщо в графічній програмі перегляду відключити автоматичне завантаження зображень. ВИКОРИСТАННЯ ПОСИЛАНЬ У ГІПЕРТЕКСТОВИХ ДОКУМЕНТАХОсновна особливість мови HTML полягає в можливості зв'язку окремих частин тексту й ілюстрацій з іншими документами. Гіпертекстові посилання виділяються в тексті документа спеціальним кольором (і/чи підкресленням), і, активізувавши їхньою мишею, без праці можна переміститися по чи документах частинам одного документа. Посилання створюється за допомогою тега <A>, що використовується в парі з тегом </A>. Між ними розташовується текст посилання, що відображається у вікні перегляду навігатора. Приклад посилання на інший документ: <A HREF=”http://www.glasnet.ru/~frolov/index.html”> Домашня сторінка </A> Локальні посилання усередині документа Якщо довжина документа велика, має сенс організувати посилання на його окремі логічні самостійні частини, розташувавши їх, наприклад, на початку документа. Такі посилання називаються локальними. Нехай необхідно створити документ з ім'ям book.htm, що складається з декількох глав. На початку документа бажано розмістити зміст, що містить посилання на окремі глави. Насамперед визначимо на початку кожної глави локальні мітки. Для цього необхідно використовувати тег <A> з параметром NAME, як показано нижче: <H2><A NAME=”Chap1”>Перший розділ</A></H2> . . . . . Зміст глави . . . . . <H2><A NAME=”Chap2”>Другий розділ</A></H2> . . . . . Зміст глави . . . . . Посилання на створені в такий спосіб локальні мітки виконуються за допомогою тега <A>, що має параметр HREF: <A HREF=”book.htm#Chap1”>Перший розділ</A> <A HREF=”book.htm#Chap2”>Другий розділ</A> Логічне форматування символів Теги логічного форматування призначені для вказівки семантичного призначення оформлюваного тексту. Вони визначають не конкретний спосіб оформлення, а вказують навігатору тип інформації, що підлягає виділенню. Спосіб виділення вибирається навігатором.
Таблиця 2 - Теги логічного форматування
Теги логічного і фізичного форматування застосовуються однаково. ВИДІЛЕННЯ ПАРАГРАФА ГОРИЗОНТАЛЬНОЮ ЛІНІЄЮ Для того, щоб включити в документ HTML горизонтальну розділову лінію, ви повинні використовувати тег <HR>. Цей тег має ряд параметрів, що визначають зовнішній вигляд лінії (таблиця 4). Наприклад, щоб розмістити лінію висотою 8 пікселів, шириною, рівній половині ширини вікна навігатора, вирівняну по лівому краї, необхідно написати: <HR SIZE=8 WIDTH=50% ALIGN=LEFT> Примусовий поділ рядків Для примусової розбивки рядків використовується тег <BR>. Рядки, розділені цим тегом, йдуть один під іншим. У випадку ж застосування тега <P> між рядками виводиться порожній рядок.
ТАБЛИЦІ В ДОКУМЕНТАХ HTML Дуже часто в документі HTML потрібно розміщати табличні дані. Для цього існують спеціальні теги, що призначені для створення таблиць. Вони відкривають широкі можливості: можна використовувати рамки навколо всіх чи тільки деяких комірок і рядків таблиці, створювати таблиці, що мають заголовки і підписи, розміщати в осередках таблиці текст, графіку чи довільні об'єкти, використовувати як фон для комірок растрові графічні зображення. У тексті документа HTML таблиця визначається між тегами <TABLE> і </TABLE>. У найпростішому випадку рядка таблиці обмежені тегами <TR> і </TR>, а стовпці - тегами <TD> і </TD>, наприклад: <TABLE> <TR> <TD>123</TD><TD>234</TD><TD>345</TD> </TR> <TR> <TD>523</TD><TD>634</TD><TD>745</TD> </TR> </TABLE> Параметри для тега <TABLE>
Параметри для тега <TR>
Звичайно перший рядок таблиці використовується для розміщення заголовків стовпців. За допомогою тега <TH> можна створити такий рядок. Параметри цього тега аналогічні вище розглянутому тегові <TD>. За допомогою тега <CAPTION> можна супроводити таблицю підписом, розташованої над чи під таблицею. Для цього існує параметр ALIGN, що може приймати значення: TOP (угорі) чи BOTTOM (унизу). Параметри для тега <TD>
Елементи html, які можна використовувати надалі для керування Кнопка <input type="button" value="Вiддiл1")> Поле введення <input name="s_y" maxlength="20" size="4" value=2001> Вибір варіанта <select name="s_m" size="1" onclick=ff()> <option selected value="1"> сiчень</option> <option value="2"> лютий</option> <option value="3">березень</option> <option value="4">квiтень</option> <option value="5">травень</option> <option value="6">червень</option> <option value="7">липень</option> <option value="8">серпень</option> <option value="9">вересень</option> <option value="10">жовтень</option> <option value="11">листопад</option> <option value="12">грудень</option> </select> приклад Переглянете цей html-документ за допомогою броузера <html> <head> <title>bgcolor</title> </head> <body text=000000 bgcolor=ffffff> <table border=0 align=center> <tr><td><form> <input type=button value="червоний" onClick="document.bgColor='ff0000'"> <input type=button value="жовтий" onClick="document.bgColor='ffff00'"> <input type=button value="синій" onClick="document.bgColor='0000ff'"> <input type=button value="голубой" onClick="document.bgColor='87ceeb'"> <input type=button value="кораловий" onClick="document. bgColor = 'ff7f50'"> </form></td> </table> </body> </html> ПРАКТИЧНЕ ЗАВДАННЯ Вправа 1. Викличте текстовий редактор БЛOКНОТ, що знаходиться в групі "Стандартні". Наберіть наступний нижче текст і збережіть під ім'ям web1.html в особистій папці. <HTML> <HEAD> <TITLE>Моя персональна сторінка (заголовок)</TITLE> </HEAD> <BODY> ПРИВІТ! Це моя особиста домашня сторінка! (Укажіть своє прізвище). </BODY> </HTML> Викличте тепер Internet Explorer. Використовуючи меню FILE (Файл), команду Open File (Відкрити), відкрийте свій файл web1.html і відзначте, як він буде виглядати в браузері. Вправа 2. Відкрийте файл web1.html у БЛOКНОТ і змініть його так, як показано нижче. Після редагування файл web1.html збережіть під ім'ям web2.html. <HTML> <HEAD> <TITLE>Моя персональна сторінка (заголовок)</TITLE> </HEAD> <BODY> <H1 ALIGN = Center> ПРИВІТ! Це моя особиста домашня сторінка! Мене кличуть (Укажіть своє прізвище, ім'я і по батькові). </H1> <hr> <H2> Моє місто </H2> <p>Я ... <H3 ALIGN =Left> Моє навчання </H3> <p align = left> Я учуся в...... <p align = center> Мої захоплення ‑ …… <p align = right> Мої колеги ..... </p> <br> <HR> <H6 ALIGN = Center> Design "BelSUT" </H6> </BODY> </HTML> Вправа 3. Створіть за допомогою графічного редактора рисунок і збережіть його в той же каталог, що і документи web.html і web1.html. Відкрийте файл web2.html у БЛОКНОТІ і відредагуйте його, як показано нижче. Після редагування файлу web2.html збережете під ім'ям web3.html <HTML> <HEAD> <TITLE> Моя персональна сторінка </TITLE> </HEAD> <BODY> <H1 ALIGN = Center> ПРИВІТ! Це моя особиста домашня сторінка! Мене кличуть (Укажіть своє прізвище, ім'я і по батькові). </H1> <hr> <H2> Моє місто </H2> <p>Я живу в <FONT SIZE = +2>Києві</FONT> <H3> Моя робота </H3> <p> Я працюю в...... <H4> Мої захоплення </H4> <p> Мої захоплення ‑ <B>музика</B>, спорт. <H5 > Мої колеги </H5> <p> <U> Мої колеги</U> в усьому мені <I>допомагають</I>. </p> <Img SRC="ім'я малюнка.jpg"> <H6 ALIGN = Center> Design "NIHE" </H6> </BODY> </HTML> Вправа 4. Створіть HTML-документ наступного виду: <HTML> <HEAD> <TITLE>Поради по виготовленню сторінок</TITLE> <HEAD> <BODY> <PRE> Гарні поради!!!!! ‑ Використовуйте відповідну мову; ‑ Не перевантажуйте сторінку великими зображеннями; ‑ Перевіряйте якнайчастіше посилання на вашій сторінці. </PRE> </BODY> </HTML> Збережете даний документ під ім'ям web4.html. Порівняєте написаний Вами текст (між тегами <PRE> і </PRE>) із зображенням на екрані, отриманим за допомогою програми перегляду. Вправа 5. Створіть документ, у якому текст буде організований за допомогою списків трьох видів (див. табл. 1), і збережете під ім'ям web5.html. Оператори HTML для опису списку:
<HTML> <HEAD> <TITLE>Сторінка зі списками</TITLE> </HEAD> <BODY> <H2 ALIGN = Left>Сторінка зі списками</H2> <ol> <li>По можливості намагайтеся уникати піктограми "У процесі виробництва"; <li>Використовуйте відповідну мову; </ol> <ul> <li>Не перевантажуйте сторінку великими зображеннями; <li>Перевіряйте якнайчастіше посилання на вашій сторінці. </ul> <ol> <li>Перед тим як покласти готову сторінку на сервер випливає: <ul> <li>Перевірити граматичні помилки; <li>Переглянути свою сторінку в різних програмах перегляду. </ul> <li>Для реклами сторінки необхідно: </ol> </BODY> </HTML> Вправа 6. Створіть у текстовому редакторі файл web6.html наступного змісту: <HTML> <HEAD> <TITLE>Терміни </TITLE> </HEAD> <BODY> <dl> <dt>Web Server <dd><p>Web-сервер. Сервер, що зберігає HTML-документи, і інші інформаційні ресурси Інтернет з використанням протоколу HTTP. Його називають також HTTP-сервером</p> <dt>HOME PAGE <dd><p> "Домашня сторінка". Головна, початкова сторінка, локальний архів. Перша сторінка якого-небудь чи Web-сервера логічно зв'язаної групи HTML-документів</p> </dl> </BODY> </HTML> Вправа 7. Створіть у текстовому редакторі HTML-документ web7.html, використовуючи параметри для тега <BODY Примітка. Колір указується шестнадцатеричным числом имеющим наступну структуру: RED – GREEN – BLUE чи RGB (червоний – зелений ‑ синій). На кожен колір приділяється 256 значень обозначающих присутність того чи іншого компонента в результуючому кольорі. Наприклад, максимум червоного – FF, інші два кольори – 00, результат – "#FF0000" <HTML> <HEAD> <TITLE>Моя персональна сторінка </TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> <p>На даній сторінці текст і зображення будуть розташовуватися на білому тлі. </p> <p>Шрифт може бути <FONT COLOR="#0000A0">різного</FONT> кольору. </p> </BODY> </HTML> Вправа 8. Створіть за допомогою графічного редактора файл з ім'ям pic2.jpg, у якому будуть знаходитися «обої» – фон для документа. Створіть файл з ім'ям web8.html наступного змісту: <HTML> <HEAD> <TITLE>Моя персональна сторінка </TITLE> </HEAD> <BODY background =pic2.jpg> <p><FONT SIZE=+3><b> На даній сторінці текст і зображення будуть розташовуватися на фоні</b> </FONT></p> </BODY> </HTML> Вправа 9. Відкрийте гіпертекстовий документ web8.html у текстовому редакторі, вставте в нього графічне зображення з файлу ag00001_.gif визначеного розміру і збережете під ім'ям web9.html. Примітка 1. Графічне зображення може мати кілька додаткових параметрів: Width – ширина; Height – висота; Align ‑ вирівнювання Absmiddle чи center – центрування; Left – по лівому краї; Right – по правому краї. Примітка 2. Якщо графічне зображення потрібно розташувати усередині параграфа, то його можна вирівняти: по лівому полю – ALIGN=left; по правому полю – ALIGN=right; по верхній границі – ALIGN=top; по нижній границі – ALIGN=bottom; по центрі – ALIGN=middle чи center. <HTML> <HEAD> <TITLE>Моя персональна сторінка </TITLE> </HEAD> <BODY background =pic2.jpg> <p><FONT SIZE=+3><b> На даній сторінці текст і зображення будуть розташовуватися на тлі "шпалери"</b> </FONT></p> <center> <img src="ag00001_.gif "></center> <p>Зображення в натуральну величину – WIDTH = 150 pix., HEIGHT=100 pix. </BODY> </HTML> Вправа 10. Відкрийте в текстовому редакторі файл web9.html і збережете його під ім'ям web10.html. У новому документі змініть розміри рисунка в два рази. <HTML> <HEAD> <TITLE>Моя персональна сторінка </TITLE> </HEAD> <BODY background =pic2.jpg> <p><FONT SIZE=+3><b> На даній сторінці текст і зображення будуть розташовуватися на тлі "шпалери"</b> </FONT></p> <center> <img src="pic3.jpg" width=250 height=150></center> <p>Зображення збільшене в три рази – WIDTH = 250 pix., HEIGHT=150 pix. </BODY> </HTML> Подивіться, як виглядає зображення на екрані. Примітка. На розмір графічного файлу в байтах не накладається ніяких обмежень, але все-таки необхідно пам'ятати, що передача великого графічних (та й текстового) файлу може зайняти дуже багато часу, особливо при низькій пропускній здатності мережі. Пропонуючи файл розміром більш 100 кбайт, рекомендуємо Вам попередити про це одержувача, указавши довжину файлу в гіперпосиланні. Вправа 11. Створіть новий гіпертекстовий документ наступного змісту, збережіть його у файлі під ім'ям web11.html і перевірте його програмою перегляду: <HTML> <HEAD> <TITLE>Welcome to our web-site</TITLE> </HEAD> <BODY bgcolor ="#F0F0F0"> <H3 align=center>Запрошуємо Вас відвідати наш Web-сервер!</H3> <img src="pic3.jpg " align=left hspace=70> <p>Слово "Інтернет" часто зустрічається. <p>Сьогодні об Інтернет говорять, як про засіб, що змінюж не тільки умови життя, але і світогляд людини. <p>Зароджується нове покоління, що зможе спілкуватися в новому інформаційному просторі, чи в новій віртуальній реальності. </BODY> </HTML> Вправа 12. Підготуйте в текстовому редакторі документ наступного виду з табличними елементами, використовуючи атрибути для тега TABLE (таблиця)і інших тегів, і збережете його під ім'ям web12.html. <HTML> <HEAD> <TITLE>Таблиця</TITLE> </HEAD> <BODY> <H2 ALIGN =Center> Простий варіант таблиці</H2> <TABLE BORDER> <TR><TD>комірка A :-)</TD> <TD>комірка таблиці B :-)</TD> <TD>комірка C :-)</TD></TR> <TR><TD>комірка D :-)</TD> <TD>комірка таблиці E :-)</TD> <TD>комірка F :-)</TD></TR> </TABLE> </BODY> </HTML> Вправа 13. Відкрийте в текстовому редакторі файл web12.html і задайте заголовки для рядків і стовпців. Збережете змінений файл під ім'ям web13.html. <HTML> <HEAD> <TITLE>Таблиця</TITLE> </HEAD> <BODY> <H2 ALIGN =Center> Простий варіант таблиці заголовками</H2> <TABLE BORDER> <TR><TH>Заголовок 1</TH> <TH> Заголовок 2</TH> <TH> Заголовок 3</TH></TR> <TR><TD>комірка A :-)</TD> <TD>комірка таблиці B :-)</TD> <TD>комірка C :-)</TD></TR> <TR><TD>комірка D :-)</TD> <TD>комірка таблиці E :-)</TD> <TD>комірка F :-)</TD></TR> </TABLE> </BODY> </HTML> Вправа 14. У текстовому редакторі створіть HTML-документ нижченаведеного змісту і збережете його у виді файлу під ім'ям web14.html. <HTML> <HEAD> <TITLE>Таблиця</TITLE> </HEAD> <BODY> <H2 ALIGN =Center>Таблиця</H2> <TABLE BORDER> <TR> <TD ALIGN=Center ROWSPAN=2 COLSPAN=2>Великий комірка A</TD> <TD>Маленький комірка 1</TD> <TD>Маленький комірка 2</TD> </TR> <TR> <TD>Маленький комірка 3</TD> <TD>Маленький комірка 4</TD> </TR> <TR> <TD ALIGN=Center ROWSPAN=2 COLSPAN=2>Великий комірка C</TD> <TD ALIGN=Center ROWSPAN=2 COLSPAN=2>Великий комірка D</TD> </TR> <TR></TR> </TABLE> </BODY> </HTML> Вправа 15. Створіть наступний документ, збережете його під ім'ям web15.html. <HTML> <HEAD> <TITLE>Таблиця</TITLE> </HEAD> <BODY> <H2 ALIGN =Center>Таблиця</H2> <TABLE BORDER WIDTH="50%"> <TR> <TD WIDTH=80%>Таблиця, ширина якої 50% ширини екрана. Стовпець, ширина якого 80% ширини таблиці</TD> <TD>комірка 2</TD> </TR> <TR> <TD>комірка 3</TD> <TD>комірка 4</TD> </TR> </TABLE> </BODY> </HTML> Вправа 16. Створіть документ із гіперпосиланнями на раніше створені документи і збережете його. <HTML> <HEAD> <TITLE>Моя персональна сторінка (заголовок)</TITLE> </HEAD> <BODY> Щоб перейти на документ із красивим тлом, клацніть <a href=web8.html> СЮДИ</a>. <br>А щоб перейти на документ із таблицями, клацніть <a href=web12.html> СЮДИ </a>. <br>Нарешті, щоб перейти на документ із фреймами, клацніть <a href=web16.html> СЮДИ</a>. </BODY> </HTML> Практичне завдання. Створіть HTML-документ, що буде мати наступну структуру: Документ складається з 3 сторінок: 1я сторінка Заголовок - назва документа (розташувати по центрі, виділити кольором) - наприклад, "лабораторна робота" Зображення (розташувати по центрі) Текст - теоретичні дані з попередньої лабораторної роботи (вирівнювання по краях, кожен параграф - окремим кольором. Таблиця з попередньої лабораторної роботи, що описує властивості пошукових систем. 1й стовпчик - зображення з пошукових систем. Текст таблиці - більш дрібний у порівнянні з основним. Кнопки з написами "кнопка1", "кнопка2" для вибору кольору тла Поле, у яке можна вводити текст Поле, у якому можна вибрати один з варіантів (зима, весна, літо, осінь) Посилання, що вказують: 1 - на сторінку, що містить нумерований список відповідей на контрольні питання 1й лабораторної роботи 2 - на сторінку, що містить нумерований список відповідей на контрольні питання цієї лабораторної роботи обидві ці сторінки мають заголовки і посилання, що дозволяють повернутися на 1ю сторінку 2я сторінка містить нумерований список відповідей на контрольні питання 1й лабораторної роботи 3я сторінка містить нумерований список відповідей на контрольні питання цієї лабораторної роботи Контрольні питання
З повагою ІЦ "KURSOVIKS"! |