ПРАКТИЧНЕ ЗАНЯТТЯ-1

ПРАКТИЧНЕ ЗАНЯТТЯ № 1
Мова розмітки гіпертексту – HTML документів. Поняття тегу

Мета заняття – набуття навичок у створенні простих HTML-
документів. Ознайомити студентів з мережею Інтернет, всесвітньою
павутиною, набути вміння використання програмного забезпечення,
призначеного для роботи в Інтернеті. Інтернет – мета-мережа, яка
складається з багатьох мереж, що працюють згідно з протоколами
родини TCP/IP, об'єднані за допомогою шлюзів та використовують
єдиний адресний простір і простір імен.
Протокол – сукупність визначень (угод, правил), які
регламентують формат і процедури обміну інформацією між двома
незалежними пристроями або процесами.
Протоколи можна умовно віднести до певних рівнів OSI (Open
Source Interconnection, міжнародний стандарт взаємодії відкритих
систем): протоколи фізичного рівня, канального рівня, мережного
рівня, транспортного рівня та прикладного рівня, який об'єднує
сеансовий рівень, рівень відображення і прикладний рівень OSI. Стек
протоколів TCP/IP – це низка мережних протоколів, на яких
базується Інтернет. Протокол IP (Internet Protocol) – це протокол
мережного рівня, який відповідає за передавання пакета від одного
вузла до іншого. Протокол TCP (Transmission Control Protocol) –
один з основних мережних протоколів Інтернету, призначений для
управління передачею даних у мережах і підмережах TCP/IP.
Протокол HTTP (Hypertext Transfer Protocol) – мережний протокол
прикладного рівня для передавання файлів. Основним призначенням
протоколу є передавання Web-сторінок та пов'язаних із ними об'єктів
(зображення, звук тощо).
Основні теоретичні положення

Три основних компоненти мови HTML – це дескриптори,
атрибути та значення.
Дескриптор – це елемент HTML, що визначає зміст документа.
Усі стандартні дескриптори знаходяться між символами "менше" (<) і
"більше" (>), наприклад: <HTML>. В основному дескриптори
складаються з компонентів, що відкриваються і закриваються. Перед
дескриптором компоненту, що закривається, додається пряма коса
риска (/): </HTML>. Це означає, що більшість стандартних дескрип-
торів, після того як їх відкрили, в певному місці коду необхідно
закрити.
Атрибут визначає властивість дескриптора. Атрибути повинні
знаходитись лише в компоненті дескриптора, що відкривається. У
дескрипторі може бути декілька атрибутів, а може не бути жодного.
Атрибут розташовується після дескриптора і пробілу з вказуванням
значення атрибута.
Значення є невід'ємною частиною атрибутів, вони визначають
сам дескриптор. Задаючи якісні та кількісні показники, значення
уточнюють спосіб відображення змісту документа. Спеціальні
символи використовують для створення стандартних чи спеціальних
символів і букв. Знак & означає початок спеціального символу, а
крапка з комою (;) – його кінець, наприклад – це нерозривний
пробіл, a § – знак параграфа.
Документ HTML позначений дескрипторами <HTML> і
</HTML> містить заголовок – <HEAD></HEAD> і тіло –
<BODY></BODY>. Загальна схема коду документа HTML:
<HTML> <HEAD>
службові дескриптори </HEAD> <BODY>
текст та інші дескриптори </BODY> </HTML>
Для опису формату документа використовують наступні
дескриптори:
♦ <HTML> ... </HTML> – дескриптор HTML, визначає межі
документа.
♦ <HEAD> ... </HEAD> – дескриптор заголовка, визначає
загальну структуру документа, його глобальні властивості.
Дескриптор <HEAD> дозволяє вкладення інших дескрипторів:
<TITLE> – дескриптор назви документа, створює коротку
однорядкову назву сторінки, яка виводиться у заголовку вікна
браузера, <BASE> – повна базова URL-адреса документу, <LINK>
вказує на зв'язок даного документа чи іншого документа або об'єкта,
<МЕТА> вказує кодування тексту, ключові слова тощо, <STYLE>
блок правил каскадної таблиці стилів, <SCRIPT> дескриптор-
контейнер операторів мови сценаріїв тощо.
♦ <BODY> ... </BODY> – дескриптор тіла документа, в якому
перебуває вся інформація, що виводиться на екран.
Структурне форматування тексту. Для форматування тексту
можна використовувати ряд дескрипторів.
♦ <Р> ... </Р> (або <Р>) – дескриптор абзацу, задає один із
способів розбиття тексту на абзаци.
♦ <BR> – дескриптор розриву, задає розрив тексту з переходом
на новий рядок.
♦ <Н 1 > ... </Н 1 > – <Н6> .,. </Н6> – діапазон дескрипторів
заголовків.
♦ <HR> – дескриптор роздільної лінії, використовується для
проведення горизонтальної риски в документі.
♦ <DIV> ... </DIV> – дескриптор розділу, дозволяє виділити
у структурі документа декілька розділів.
♦ <PRE> ... </PRE> – текст між компонентами цього
дескриптора буде відображатись браузером як у вихідному коді
документа, тобто міститиме пробіли, символи табуляції.
♦ <BLOCKQUOTE> ... </BLOCKQUOTE> – дескриптор
тексту з відступом.
Форматування символів. Під фізичним стилем прийнято
розуміти пряму вказівку браузеру на модифікацію шрифту.
Наприклад, все, що знаходиться між дескрипторами <В>...</В>, буде
написано жирним шрифтом. Текст між дескрипторами <І>...</І> буде
написано похилим шрифтом (курсивом). Текст, набраний між
дескрипторами <ТТ>...</ТТ> буде відображатись як шрифт, що імітує
друкарську машинку, тобто має фіксовану ширину символів. Існує
також логічний стиль форматування, з допомогою якого виділяють
особливим шрифтом слово чи текст. Дескриптори логічного
форматування позначають структурні типи своїх текстових
фрагментів, такі як, наприклад, програмний код <CODE>, цитата
<СІТЕ>, визначення <DFN> тощо.
Розглянемо деякі інші дескриптори фізичного форматування тексту:
♦ <U >... </U > – дескриптор використовують для
підкреслення тексту;
♦ <SUP> ... </SUP> – дескриптор перетворює текст у надрядковий;
♦ <SUB> ... </SUB> – дескриптор перетворює текст у підрядковий;
♦ <SPAN>...</SPAN> – дескриптор виділення, дозволяє
виділити деяку частину тексту, але не починає новий абзац.
Зупинимось на самому уживаному дескрипторі форматування тексту,
а саме –<FONT> ... </FONT>.
Дескриптор <FONT> ... </FONT>. Форматування тексту, тобто
визначення шрифту, розміру й кольору букв, можна здійснювати за
допомогою атрибутів дескриптора <FONT> ... </FONT>.
♦ size – атрибут, що визначає розмір шрифту;
♦ color – атрибут, що визначає колір шрифту у вигляді назви
кольору, кольору у форматі RGB чи у 16-ричному вигляді;
♦ face – атрибут, що визначає назву шрифту (Arial, Courier і
т.д.). Наприклад, необхідно відобразити текст розміром 10, червоного
кольору, шрифт –Arial:
<DІV><FОNT size=10 color=rgb(30,20,155) face='arial'>
Текст </FONT></DIV>
Для того, щоб вказати розмір, тип і колір шрифту, що
використовується у документі по умовчанню, користуються
дескриптором <BASEFONT>. Задані значення є обов'язковими для
всього документа, але можуть бути перевизначені за допомогою
дескриптора <FONT>. Після закриття цього дескриптора дія
дескриптора <BASEFONT> поновлюється.
Спосіб виведення тексту на екран дуже важливий з точки зору
читабельності та естетики. Вирівнювання відіграє важливу роль,
визначаючи яким чином текст розташовується на сторінці відносно
інших об'єктів. Атрибут "align" можуть містити багато дескрипторів,
у тому числі <Р>, <DIV>, <SPAN> та інші. Існують такі типи
вирівнювання: за замовчуванням (не вказують), по лівому краю
(align=left), по правому краю (align=right), по центру (align=center),
по ширині (align=justify). Наприклад, наступний абзац буде
відображатись з вирівнюванням по центру:
<Р align=center> Текст абзацу </Р>
Хід заняття
1. Ознайомитись з темою та метою заняття, вивчити основні
теоретичні положення.
2. Отримати у викладача індивідуальне завдання за своїм варіантом.
Приклад №1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-
1251"><TITTLE>
<META content="MSHTML 6.00.2900.2180"
name=GENERATOR></HEAD>
<BODY text=#00ffff background=АСТРО.files/CHAP_02.jpg>
<H1>
<CENTER><B>PRESENTATION </H1></B></CENTER></TITTLE>
<MARQUEE>
<P><A href="file:///E:/Информация/Презентация0gf">
<IMG src="АСТРО.files/135087.jpg"
width="10%"></A></P></MARQUEE><BR>
<HR width="100%" color=red SIZE=10>
<H3>
<CENTER>Астрономія </CENTER>З усіх картин природи, що
розгортаються перед нашими очима, сама велична – картина зоряного
неба. Ми можемо облетіти або об'їхати всю земну кулю, наш світ, у
якому ми живемо. Зоряне ж небо – це неозорий, нескінченний
простір, заповнений інший світами. Кожна зірочка, навіть ледь
помітно мерехтлива в темному небі, являє собою величезне світило,
часто більш гаряче й яскраве, ніж Сонце. Тільки всі зірки знаходяться
дуже далеко від нас і тому світяться слабко. Що це за світи, як вони
рухаються? Як далекі вони від нас? Як створилися небесні Світила?
Як улаштовані зірки? Що було з ними в минулому і що відбудеться з
ними в майбутньому? Усі ці питання вивчає астрономія – наука про
Всесвіт. Учені змогли визначити відстані до зірок, вагу Сонця і його
хімічний склад, пророчити майбутні затьмарення Місяця й Сонця, час
появи хвостатих світил – комет . Але пройшли багато століть, перш
ніж це удалося зробити.</H3></BODY></HTML>
Приклад№2
<HTML>
<HEAD>
<TITLE>Домашня сторінка Андрія Сергієнка</TITLE>
</HEAD>
<BODY BGCOLOR=0099ff>
<H1><FONT COLOR=007875><Center>Ласкаво просимо до
Андрія</Center></FONT></H1>
<HR SIZE=7 NOSHADE WIDTH=50%>
<H2>Запрошуються всі бажаючі!</H2>
Я радий вас вітати на моїй Web-сторінці.
Я постійно працюю над цією сторінкою і вона постійно
поновлюється. Я намагаюсь, щоб нова інформація з’являлась на ній
приблизно кожні два місяці. Я люблю вивчати комп’ютери, читати
книги та слухати сучасну музику. Я і моя родина живемо на
Київщині.<P>
<ADDRESS>Андрій Cергієнко-Аndrey@academy.kiev.ua</ADDRESS>
</BODY>
</HTML>
Створити цю просту сторінку можна, наприклад, так:

1. Запустити текстовий редактор Блокнот.
2. Ввести текст HTML-документа.
3. Зберегти під деяким іменем з розширенням .htm (наприклад,
Struktura.htm). При збереженні, у вікні «Сохранение документа» слід
поміняти тип файлу з «Текстовые документы» на «Все файлы». Інакше
редактор у кінець назви файлу автоматично додасть розширення .txt.
4. Запустити Internet.
5. За допомогою меню «Файл -> Открыть» відкрити створений
файл (Struktura.htm).
Контрольні запитання
1. Поняття компонентів – дескриптор, атрибут і значення.
2. Структура HTML-документа.
3. Дескриптори структурного форматування.
4. Дескриптори фізичного форматування.
5. Дескриптори <FONT> та <BASEFONT>, їх атрибути.

ПРАКТИЧНЕ ЗАНЯТТЯ-1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ПРАКТИЧНЕ ЗАНЯТТЯ-1

Uploaded by

Copyright:

Available Formats

ПРАКТИЧНЕ ЗАНЯТТЯ № 1

Мова розмітки гіпертексту – HTML документів. Поняття тегу

Основні теоретичні положення

Створити цю просту сторінку можна, наприклад, так:

You might also like