Лабораторна робота 1 Тема. Створення
найпростішої Web-сторінки. Мета. Навчитись
створювати найпростішу Web-сторінку. Теоретичні відомості HTML – це набір угод для
розмітки документів, що визначають зовнішній вигляд документів на екрані
комп'ютера при доступі до них із використанням програми броузера. Документ, складений за допомогою мови
розмітки HTML, являє собою текстовий файл, який можна набрати і відредагувати в
звичайному текстовому редакторі, наприклад, у додатках Блокнот чи WordPad. Документ розбивається на елементи:
заголовки, абзаци, малюнки, таблиці та інші. Для кожного елементу задається
команда мови HTML, названа тегом. Ця команда містить інформацію про те, який
вигляд повинен мати даний елемент на Web-сторінці, які зв'язки він має з іншими
елементами або документами. У мові HTML є багато тегів, серед яких теги
створення заголовка документа, задання параметрів шрифту, креслення ліній,
вставки гіперпосилань, вставки графічних елементів тощо. Web-сторінка, окрім
тексту і посилань, може вміщувати графіку, звуки, відео, тобто мати такий
вигляд, який ви бачимо на екрані комп'ютера. Тег – це фрагмент коду, що описує певні елементи
документа HTML і вміщений у кутові дужки < >. HTML-документ умовно можна розбити на три
частини: Службова інформація для браузера, що вміщена
у рядок з
тегом <!DOCTYPE>. Заголовна частина документа, до якої вміщена
назва документа, а також службова інформація для серверів, описи невеликих
програм-сценаріїв. Ця частина документа міститься між тегами <HEAD> і
</HEAD>. Тіло документа, що обмежене тегами
<BODY>... </BODY>. Часто теги, окрім імені, містять додаткові
елементи, які називаються атрибутами. Атрибути – це компоненти
тегу, що містять вказівки про те, як броузер має сприйняти й обробити тег. Атрибут записується після імені тегу перед
дужкою і складається, як правило, із пари «ім'я атрибута = значення». Значення атрибута записується після імені
атрибута через знак рівності =. Всі значення атрибутів за умовчанням беруться в
подвійні (") або одинарні (') лапки. Імена атрибутів можуть набиратися як
малими, так і великими літерами, броузер інтерпретуватиме їх однаково. У тега
може бути кілька атрибутів, тоді вони відокремлюються один від одного
пробілами. Часто при створенні Web-сторінок виникає
необхідність пояснити ту або іншу особливість HTML-коду або наміри розробника,
але так, щоб ці пояснення не відображалися у вікні броузера. У таких випадках
використовується коментар. Коментар – це фрагмент коду,
що не виконується і розташований між групами символів <! >. Наприклад, на екрані не відображатимуться
такі елементи: <!—
Коментар, що займає один
рядок —> або <!—
Коментар можна розташовувати в двох рядках —>. Хід роботи 1.
Відкрийте текстовий редактор Блокнот, наберіть в
ньому даний текст. <HTML> <HEAD> <TITLE> Моя перша Web-сторінка
</TITLE> </HEAD> <BODY> Мій перший HTML-документ </BODY> </HTML> 2.
Збережіть файл як текстовий, вказавши назву base.html в
своїй папці. Закрийте Блокнот. 3.
Відкрийте збережений файл, двічі клацнувши на його
імені. У вікні броузера з’явиться створена Web-сторінка.
4.
Виконайте команду Вид/Источник. На екрані
з’явиться створений текст мовою HTML, відкритий в текстовому редакторі Блокнот.
Цю команду слід використовувати завжди, коли треба переглянути HTML-код
відкритої Web-сторінки. 5.
Закрийте файл з HTML-кодом. Закрийте Web-сторінку. Контрольні запитання 1) Що являє собою мова
розмітки HTML? 2) Як можна
відредагувати документ, написаний мовою HTML? 3) З яких частин
складається документ, складений мовою HTML? 4) Які елементи може
містити HTML-документ? 5) Що таке тег? 6) Для чого
використовуються атрибути тегів? 7) Що таке коментар в
HTML-документі?
Лабораторна робота 2 Тема. Оформлення
тексту Web-сторінки. Мета. Дати поняття про
найпростіше оформлення Web-сторінки. Теоретичні відомості Для поділу HTML-документа на логічно
закінчені блоки використовують заголовки. Завдяки заголовкам відвідувач
Web-сторінки може отримати уявлення про її вміст. Для задання заголовків на Web-сторінці
використовується парний тег: <Hn> заголовок текста </Hn>
, де де n = 1, 2, 3, 4, 5, 6. Існує шість рівнів заголовків – від H1
(найбільш важливий) до H6 (найменш важливий). Програма броузера відображає
заголовки більшим (напівжирним) шрифтом. Чим вище рівень заголовка, тим більший
розмір шрифту. Заголовки відокремлюються порожніми рядками від іншого тексту. Наприклад: <Н1> Джерельце </НІ> Для поділу HTML-документа на абзаци
використовують теги: <Р> текст <Р> – абзац.
Можна використовувати тільки відкриваючий тег. <ВR> – початок нового рядка (але не
абзаца). Теги <BR> зручні при оформленні поштових адрес, наборі віршів
тощо. <HR> – вставка горизонтальної лінії. Абзаци, що задаються тегами <Р> і
<BR>, за умовчанням вирівнюються по лівому краю сторінки. Змінити таке
вирівнювання можна за допомогою атрибута align. align= "center" – вирівнювання по
центру; alіgn= "right" - вирівнювання по
правому краю сторінки; align="left") - вирівнювання по лівому краю сторінки. Наприклад, заголовок <НІ
аlign="сеnter">Джерельце</Н1> розташовуватиметься по центру
сторінки. Параметри шрифту, який використовується для
відображення тексту на Web-сторінках, найпростіше визначити за допомогою
елемента FONT. Для цього елемента передбачені такі атрибути: face (гарнітура шрифту або список допустимих
шрифтів); color (колір шрифту); size (розмір
шрифту). Наприклад, для виведення слова "Вода” шрифтом
Arial червоного кольору, потрібно ввести в документ параметри: <FONT face="Arial" со1ог="red"> Вода
</FONT> Для оформлення шрифтів на Web-сторінки
використовуються теги, які задають вигляд абзацу та шрифту. Деякі з них: <B>текст</B> – напівжирний; <I>текст</I> – курсив; <U>текст</U> – підкреслювання; <FONT SIZE = n > текст </FONT>
- задання розміру шрифта. (n=1,2,3, ..., 7); <FONT COLOR = кольорова специфікація >
текст </FONT> - задання кольору шрифта Кольорова специфікація
 Black
(Чорний) = "#000000"
 Green
(Зелений) = "#008000"
 Silver
(Срібло)= "#C0C0C0"
 Lime (Лимон) = "#00FF00"
 Gray
(Сірий) = "#808080"
 Olive
(Оливковий) = "#808000"
 White
(Білий) = "#FFFFFF"
 Yellow
(Жовтий)= "#FFFF00"
 Maroon
(Темно-бордовий) = "#800000"
 Navy
(Темно-синій) = "#000080"
 Red
(Червоний) = "#FF0000"
 Blue
(Синій) = "#0000FF"
 Purple
(Фіолетовий) = "#800080"
 Teal
(Бірюзовий) = "#008080"
 Fuchsia
(Фуксія) = "#FF00FF"
 Aqua
(Блакитний) = "#00FFFF"
Увага! При використанні
парних тегів потрібно слідкувати за їх правильним "вкладанням” , наприклад: <НІ аlign="сеnter"> <FONT
COLOR = "#000000> <B> Джерельце </B> </FONT>
</Н1> Хід роботи 1. Відкрийте створений
раніше файл base.html. 2. Відкрийте HTML-код
цієї Web-сторінки (Вид/Источник) 3. Збережіть файл з
назвою text.html. 4. Змініть HTML-код
документа: <HTML> <HEAD> <TITLE> Загадка </TITLE> </HEAD> <BODY> <h1> Бігли діти
повз ялинку </h1> Бігли діти повз ялинку і побачили хатинку, лісова пустунка там оселилась – і діткам чемно лапку подавала, ківш грибів подарувала, а тоді – себе назвала. Оксана Сенатович </BODY> </HTML> 5.
Збережіть файл
з HTML-кодом та закрийте його. На панелі інструментів натисніть кнопку Обновить. В результаті повинна вийти
сторінка, як на малюнку. 6. Текст потрібно розбити
на рядки. Знову відкрийте HTML-код цієї Web-сторінки та в кінці кожного рядка
вставте тег <ВR>. 7. Збережіть файл з
HTML-кодом та закрийте його. На панелі інструментів натисніть кнопку Обновить. В результаті повинна вийти
сторінка, як на малюнку.
8. Змініть шрифт
першого рядка на напівжирний оливкового кольору. Для цього
відкрийте HTML-код цієї Web-сторінки та встановіть параметри: <B><FONT COLOR = #808000> Бігли
діти повз ялинку </FONT> </B>
9. Збережіть та
закрийте HTML-код. На панелі інструментів натисніть кнопку Обновить. В результаті повинен змінитися шрифт першого
рядка. 10. Відкрийте файл з
HTML-кодом. Встановіть такі параметри: •
для заголовку – вирівнювання по центру, зелений
колір, відділити від наступного тексту горизонтальною лінією; •
для всього вірша – вирівнювання по лівій стороні,
напівжирний шрифт, бірюзовий колір; •
для останнього рядка – вирівнювання по правій
стороні, курсивний шрифт, синій колір. 11. Закрийте файл з
HTML-кодом. Закрийте Web-сторінку. Контрольні запитання 1) Для чого використовуються
заголовки? 2) Як можна поділити
текст в HTML-документі на абзаци? 3) Як в HTML-документ
вставити горизонтальну лінію? 4) Що таке парні і
непарні теги? 5) Які є атрибути для
встановлення параметрів шрифтів? 6) Якими тегами можна
змінити колір шрифту?
Лабораторна робота 3 Тема. Використання
внутрішніх та зовнішніх посилань у Web-сторінки. Мета. Навчити створювати
внутрішні та зовнішні посилання у Web-сторінках.
|