Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Методичні вказівки
до лабораторної роботи
Створення документів HTML
Мета роботи Навчитися розробляти документи, призначені для публікації в Internet.
Завдання Знайомство з мовою розмітки гіпертекстових документів HTML Написання простих документів.
Порядок виконання роботи
На своєму диску створити вкладену папку, для збереження усіх файлів, створених при виконанні завдання. У текстовому процесорі (Notepad) створити перший текстовий Web-документ. Переглянути документ у коді HTML і в програмі Internet Explorer.
Включити малюнок у раніше створений файл. Переглянути змінений файл у Internet Explorer
Включити в документ фрагмент з розміткою таблиці переглянути його в Internet Explorer.
Включити в документ фрагмент з розміткою списку переглянути його в Internet Explorer.
Включити в документ фрагмент посиланнями на інші сайти переглянути його в Internet Explorer.
Створити з файл c гіперпосиланнями на раніше створені документи. Переглянути в Internet Explorer, за допомогою гіперпосилань по черзі вивести вміст документів.
Створити файл, що розмічає фрейми, у яких показати раніше створені документи. Переглянути розмітку фреймів у Internet Explorer.
Результати роботи показати викладачу, виконати зміни в документах на вимогу викладача
.
Теоретичні положення
Створення Web-документів
Розміщення власних матеріалів в Інтернет включає два етапи: підготовку матеріалів і їхню публікацію. Підготовка матеріалів складається в створенні документів, що мають формат, прийнятий в Інтернет, тобто Web-сторінок, написаних мовою HTML. Публікація матеріалів, тобто відкриття до них доступу, здійснюється після рішення організаційних питань, зв'язаних з одержанням дискового простору на Web-сервері для їхнього розміщення.
Для створення Web-документів використовується мова HTML (HyperText Markup Language - мова розмітки гіпертексту). Гіпертекст, тобто розширений текст, включає додаткові елементи: ілюстрації, посилання, вставні об'єкти.
Основні теги
Поняття тегів, їхні види, правила запису
Документ, що написаний мовою HTML являє собою простий текст, у який вставлені теги (прапори розмітки). Теги вказують як повинний бути розташований текст на екрані, у якому місці повинні знаходитися малюнки, що зберігаються в інших файлах і т.д. За допомогою тегів формуються зв'язки з іншими ресурсами Інтернет.
Теги – це визначені послідовності символів, укладені між знаками < (менше) і > (більше). Прописні і малі літери при написанні тегів значення не мають.
Теги бувають парні (наприклад, <TITLE> і </TITLE>) і непарні (наприклад, <BR>), що відкривають і закривають. Ознакою закриваючого тега є символ /.
Структура документа HTML
Документ HTML завжди повинний починатися з тега <HTML> і закінчуватися відповідно тегом </HTML>. В середині документу виділяються два основних розділи: розділ заголовку і тіла документа. Розділ заголовку містить інформацію, що описує документ у цілому, і обмежується тегами <HEAD> і </HEAD>. Зокрема, розділ заголовку повинний містити заголовок назву web-сторінки, що при перегляді в броузері з'явиться в заголовку вікна документа. Назва web-сторінки розташовується між тегами <TITLE> і </TITLE>.
Наприклад,
<TITLE> Моя сторінка </TITLE>
Основний зміст розміщується в тілі документу, що обмежується парним тегом <BODY>.
Приклад 1 . Найпростіший документ HTML,
Загрузити Notepad та набрати текст прикладу
<html>
<head>
<title> Наша перша сторінка </title>
</head>
<body> Ми написали першу сторінку </body>
</html>
Записати приклад на диск в файл index.htm
Загрузити файл в Internet Explorer (подвійний клік на імені файлу)
В заголовку Internet Explorer побачите запис Наша перша сторінка,
а в вікні Ми написали першу сторінку
В вікні Internet Explorer клікнути правою клавішею миші і вибрати пункт меню View Source , відкиється Notepad з текстом написаного документу, в якому виконуються зміни в документі. Після змін файл записати на диск та перезагрузити в Internet Explorer натиснувши кнопку і побачити змінену сторінку
Використані дескриптори:
<html> </html> сторінка на html
<head></head> текст, який виводится в заголовок Internet Explorer
<body></body> текст (тіло) сторінки
Приклад 2 Зробити копію файлів з диску сервера в свою папку запусти в браузері та визначити відповідність запису тегів та зображенню на екрані
<html>
<head>
<title>Наша перша робота</title>
</head>
<body bgcolor="#00ff00">
<a name=bob>
<hr>
<h2>Перша робота студента РТАгрупи ****</h2>
<p> нам необхідно навчитись писати прості сторінки на HTML</p>
<p>щоб подивитись як написана ця сторінка необхідно</p>
<p>на полі натиснути праву клавішу миші </p>
<p>та вибрати в меню </p>
<p>Просмотр HTML-кода </p>
<p>відкриється вікно текстового редактора з текстом сторінки </p>
<h1><div style="color:blue" align="center"> <u><i> РТФ </i></u></div> </h1>
<div align="center"><img src="../files/199/roma.jpg" align=top width=100 heigt=100></div>
<h2>Заголовок по h2</h2>
<h6>Заголовок по h6 </h6>
<div align="right">вирівнювання по правому краю<p>
<div style="color:green"><u><big>слово підкреслили написали жирно </big></u></div></div>
<hr>
<p><size=+8>Провели лінію hr </p>
<MARQUEE height=20 bgcolor="#ff0000" behavior="scroll">СТРОЧКА яка БІЖИТЬ</MARQUEE>
<font face="Verdana" color="red" size=+3>
<br> напишемо першу </p>ТАБЛИЦЮ </font>
<p>
<table border="6" align="center">
<CAPTION><font color="#0000ff" > ***Таблиця****</caption>
<tr>
<td colspan=3 align="center"><font color="#ffffff"><a href="tab.htm">перша Клітинка посилання</a>
<font></td>
<td>друга Клітинка посилання</td><td><a href ="SPISOK.htm"><img src="../files/199/COLOR.GIF" align=top width=100 heigt=120>
</a></td>
</tr>
<tr>
<td align="right">222 клітинка</td>
<td>2333 клітинка</td><td>6565 клітинка</td>
</tr>
<tr><td> сточка таблиці</td></tr>
</table>
<a href="http://rtf.ntu-kpi.kiev.ua"> посилання на сайт РТФ</a>
<p></p>
</body>
<a href="#bob">bob
Приклад 3 Список
<hml>
<head>
<title>Cписок співробітників лаб 202-17</title>
</head>
<body>
<h3> Cписок співробітників лаб 202-17<h3>
<h4>Складено 2.12.202</h4>
В списку записані призвіща, імена співробітників<p>
Список використовувати в службових цілях<p>
<ol>
<li>
Керівництво операційними системами
<ul>
<li>Луніх І.І.
<li>Юніх П.П.
</ul>
<li>
Відділ керівництва персональними комп’ютерами
<Ul>
<li>
Куллер С.С
<li>
Драйвер Д.Д.
</ul>
</ol>
</body>
</html>
Приклад 3. Таблиця
<html>
<head>
<title> ТАБЛИЦЯ</title>
<body>
<TABLE border=4 cellspacing=3>
<br>
<CAPTION> НАША ТАБЛИЦЯ</CAPTION>
<TR><TH bgcolor="white">Резистори
<TH bgcolor="white">Транзистори
<TR><TD>20КОМ <TD>кт315
<TR><TD>4.7кОМ <TD>ВС107
</TABLE>
</html>
Основні теги HTML і їхні можливі параметри приведені в додатку А.
Створення фреймів
Використовуючи фрейми, що дозволяють розбивати Web-сторінки на множинні подокна, можна значно поліпшити зовнішній вигляд і функціональність Web-додатків. Кожне підвікно, або фрейм має свій URL-адресу, що дозволяє завантажувати його незалежно від інших фреймів.
Кожен фрейм має власне ім'я (параметр NAME), що дозволяє переходити до нього з іншого фрейму. Фрейми можуть використовуватися
– для розміщення інформації, яку необхідно показувати постійно (логотип фірми, копирайт, набір керуючих кнопок і т.п.);
– для розміщуння змісту усіх або частини Web-документів, що утримуються на Web-сервері, що дозволяє користувачеві швидко знаходити цікавлячу його інформацію;
– для створення вікон результатів запитів, коли в одному фреймі знаходиться власне запит, а в іншому результат запиту;
– для створення форми типу «майстер-підлеглий» для Web-додатків, що обслуговують бази даних.
Фрейм-документ - це специфічний вид HTML-документа. Його структура не містить тега <BODY> і, відповідно, не несе інформаційного навантаження. Він описує тільки підвікна (фрейми), що будуть містити інформацію.
Структура HTML-документу, що описує фрейми:
<HTML>
<HEAD>…</HEAD>
<FRAMESET>
…
</FRAMESET>
</HTML>
Тег <FRAMESET> описує усі фрейми, на які поділяється екран. Можна розділити екран на кілька вертикальних або горизонтальних фреймів.
Параметр тега <FRAMESET> ROWS визначає горизонтальні підвікна, а COLS - вертикальні підвікна.
Опис підвікон розділяються комами. Для опису підвікон використовується:
– Просте числове значення, визначає фіксовану висоту (ширину) підвікна в пікселах;
– Значення величини подвікна у відсотках від 1 до100;
– Символ «*», указує, що все місце, що залишилося, буде належати даному фреймові, цифра перед зірочкою вказує пропорцію для даного фрейму.
Приклади
<FRAMESET COLS=”50, *,50” > - описує три фрейми, два по 50 пікселів праворуч і ліворуч, і один усередині цих смуг.
<FRAMESET ROWS =”20%,3*,*” > - описує три фрейми, перший з яких займає 20% площі вікна броузера зверху, другий - 3/4 місця, що залишився від першого фрейму, 60% усієї площі вікна.
У тезі <FRAME> задаються параметри для кожного фрейму окремо.
Параметр SRC задає ім'я файлу, що завантажиться в цьому фреймі. Параметр NAME задає ім'я даного фрейму. Ім'я фрейму може бути використане для визначення дії з даним фреймом з іншого HTML-документа або фрейму (як правило, із сусіднього фрейму того ж документа). Ім'я обов'язкове повинно починатися із символу.
Наприклад
<FRAME SRC =”homepage.htm” NAME=”frame1”>
Ім'я фрейму необхідно задавати для того, щоб згодом указати, до якого фрейму використовувати гіперпосилання. У документі HTML, у цьому випадку, у тезі <A HREF> (опис гіперпосилання) повинний бути присутнім параметр TARGET. Цей параметр визначає фрейм, у якому показується вміст Web-сторінки. Наприклад,
<A HREF=”file.htm” TARGET=”frame1”> file </A>
У цьому випадку, після вибору гіперпосилання file, у фреймі з ім'ям frame1 буде показаний зміст документу file.htm.
Приклад. Створення двох фреймів, один із яких займає 50% площі вікна зверху, на другому виділяється вся частина, що залишилася.
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=1 BORDER=2 ROWS=50%,*>
<FRAME SCROLLING="YES" NORESIZE SRC="tab.htm" NAME="1">
<FRAME SCROLLING="YES" NORESIZE SRC="spisok.htm" NAME="2">
</FRAMESET>
</HTML>
Результат такої розбивки на фрейми приведений на рис. 1.
Рис.1 Розбивка на фрейми
Контрольні питання
Додаток А
Таблиця А1
|
Теги, параметри, значення параметрів |
Призначення |
|
1 |
2 |
|
<A HREF=”адреса”> Текст гіперпосилання </A> |
Вставка гіперпосилання |
|
<B> і </B> |
Початок і кінець тексту, виділеного напівжирним шрифтом |
|
<BASEFONT> |
Установлення стандартного розміру шрифту, гарнітури і кольори тексту у всьому документі |
|
<BODY BACKGROUND= “ім'я_файлу”> |
Вставка фонової шпалери з файлу |
|
<BODY> і </BODY> |
Початок і кінець тіла HTML-документа |
|
<BR> |
Перехід на новий рядок у межах одного абзацу |
|
<CAPTION> і </CAPTION> |
Початок і кінець заголовка таблиці |
|
<FONT> і </FONT> |
Початок і кінець тексту, параметри якого відрізняються від заданих за замовчуванням |
|
<FRAME SRC= ”ім'я_файлу”> і </FRAME> |
Початок і кінець опису окремого підвікна (фрейму) |
|
<FRAMESET ROWS > |
Визначає горизонтальні підвікна |
|
<FRAMESET COLS > |
Визначає вертикальні підвікна |
|
<FRAMESET> і </FRAMESET> |
Початок і кінець створення підвікна |
|
від <H1> ... </H1> до <H6> … </H6> |
Заголовки 6-ти рівнів |
|
<HEAD> і </HEAD> |
Початок і кінець заголовка документу |
|
<HR> |
Горизонтальна лінія, обмежник абзаців |
|
<HTML> і </HTML> |
Початок і кінець документуа HTML |
|
<I> і </I> |
Початок і кінець тексту, виділеного курсивом |
|
<IMG SRC =”ім'я_файлу> |
Вставка малюнка з іншого файлу |
|
<MARQUEE> і </MARQUEE> |
Початок і кінець біжучого рядка |
|
<META> (входить у розділ HEAD) |
Дозволяє визначити зовнішню інформацію, розташовану поза HTML |
|
<OL> і </OL> |
Початок і кінець нумерованого списку |
|
<P> і </P> |
Початок і кінець абзацу |
|
<PRE> і <PRE> |
Початок і кінець відформатованного тексту |
|
<TABLE> і</TABLE> |
Початок і кінець таблиці |
|
<TD> і </TD> |
Початок і кінець клітинкі таблиці в рядку |
|
<TH> і </TH> |
Початок і кінець у заголовка стовпця або рядка таблиці |
|
<TITLE> і </TITLE> (входять у розділ HEAD) |
Початок і кінець назви web-сторінки |
|
<TR> і </TR> |
Початок і кінець рядка таблиці |
|
<U> і </U> |
Початок і кінець тексту, виділеного підкресленням |
|
ALIGN |
Вирівнювання |
|
ALIGN= bottom |
Вирівнювання по нижній границі |
|
ALIGN= LEFT |
Вирівнювання по лівому краю |
|
ALIGN= middle |
Вирівнювання по середині |
|
ALIGN=CENTER |
Вирівнювання по центру |
|
ALIGN= RIGHT |
Вирівнювання по правому краю |
|
ALIGN= top |
Вирівнювання по верхній границі |
|
АLINK |
Колір активного гіпертекстового зв'язку |
|
ALT=²текст² |
Альтернативний текст |
|
BGCOLOR |
Колір тіла |
|
BORDER |
Ширина бордюру таблиці |
|
COLSPAN=х |
Об'єднання клітинок х стовпців |
|
COLOR |
Колір. Значенням може бути текст (наприклад, BGCOLOR=”YELLOW”) або шістнадцяткове число, яке має наступну структуру: RED-GREEEN-BLUE або RGB (червоний-зелений-синій). На кожен колір приділяється 256 значень, що позначають присутність того або іншого компонента в результуючому кольорі. Наприклад, максимум червоного - “#FF0000”. |
|
DIRECTION=left |
Напрямок руху рядка, що біжить, праворуч ліворуч |
|
DIRECTION=right |
Напрямок руху рядка, що біжить, ліворуч праворуч |
|
FACE |
Назва шрифту |
|
HEIGHT |
Висота |
|
LINK |
Колір гіпертекстового посилання |
|
LOOP=n |
Число повторень циклів руху рядка, що біжить |
|
ROWSPAN=х |
Об'єднання клітинок х рядків |
|
SCROLL |
Стандартний рух рядка, що біжить, від правого краю екрана до лівого. Нескінченний цикл |
|
SCROLLING=auto |
Зображення на екран смуг прокручування тільки в разі потреби |
|
SCROLLING=no |
Заборона зображення на екрані смуг прокручування |
|
SCROLLING=yes |
Постійне зораження смуг прокручування |
|
SIZE |
Розмір |
|
SLIDE |
Рух рядка, що біжить, від правого краю екрана до лівого. Напис зупиняється в лівого краю екрана. |
|
TARGET |
Завантаження посилання |
|
ТЕХТ |
Колір тексту |
|
VALIGN |
Вертикальне вирівнювання усередині рядка таблиці |
|
VLINK |
Колір уже відвіданого посилання |
|
WIDTH |
Ширина |