/
Tags: інформатика лабораторні роботи
Year: 2010
Similar
Text
1
Міністерство освіти і науки України
Національний педагогічний університет імені М.П. Драгоманова
Інститут гуманітарно-технічної освіти
Кафедра інформаційних систем і технологій
Основи HTML
Методичні рекомендації до виконання лабораторних робіт
Київ 2010
2
3
Лабораторна робота №1
Основи HTML
Прочитайте і запам’ятаєте наступну інформацію.
Вся інформація про форматування документа зосереджена в його фрагментах,
розміщена між знаками "<" і ">". Такий фрагмент (наприклад, <html>)
називається міткою (по-англійськи — tag, читається "тег").
Більшість HTML-міток — парні, тобто на кожну відкриваючу мітку виду <tag> є
закриваюча мітка виду </tag> з тим же ім’ям, але з додаванням "/".
Мітки можна вводити як великими, так і маленькими буквами. Наприклад, мітки
<body>, <BODY> і <Body> будуть сприйняті браузером однаково.
Багато міток, окрім імені, можуть містити атрибути — елементи, що дають
додаткову інформацію про те, як браузер повинен обробити поточну мітку.
Обов’язкові мітки
<html> ... </html> – Мітка <html> повинна відкривати HTML-документ. Аналогічно,
мітка </html> повинна завершувати HTML-документ.
<head> ... </head> – Ця пара міток указує на початок і кінець заголовка документа.
Окрім найменування документа (див. опис мітки <title> нижче), в цей розділ може
включатися безліч службової інформації.
<title> ... </title> – Все, що знаходиться між мітками <title> і </title>, тлумачиться
браузером як назва документа. Рекомендується назва не довше 64 символів.
<body> ... </body> – Ця пара міток указує на початок і кінець HTML-документа і
визначає вміст документа.
<H1> ... </H1> – <H6> ... </H6> – Мітки виду <Hi> (де i – цифра від 1 до 6)
описують заголовки шести різних рівнів. Заголовок першого рівня – найбільший,
шостого рівня, відповідно – найдрібніший.
<P> ... </P> – Така пара міток описує абзац. Все, що поміщене між <P> і </P>,
сприймається як один абзац.
Мітки <Hi> і <P> можуть містити додатковий атрибут ALIGN (читається "элайн",
від англійського "вирівнювати"), наприклад:
<H1 ALIGN=CENTER>Вирівнювання заголовка по центру</H1>
або
<P ALIGN=RIGHT>Зразок абзацу з вирівнюванням по правому краю</P>
Приклад 1
На диску D:\ створіть папку з Вашим ім’ям і номером групи.
Запустіть програму Блокнот. Наберіть текст вказаний нижче:
<html>
<head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
</head>
<body>
<H1>Привіт!</H1>
<P>Це простий приклад HTML-документа.</P>
<P>Це моя перша веб-сторінка.</P>
</body>
</html>
4
Збережіть Файл на диску D:\ в папці з Вашим ім’ям і номером групи. Спочатку
збережіть в текстовому форматі (з розширенням *.txt) під ім’ям Приклад1. Потім
виконайте команду Зберегти як і вкажіть розширення HTML (Приклад1.html).
Згорніть Блокнот на Панель завдань. Відкрийте файл Приклад1.html за допомогою
браузера.
Перевірте як виглядає веб-сторінка.
Примітка.
Якщо в документі була допущена помилка її можна виправити в готовому HTML-
документі. Для цього необхідно відкрити Приклад1.html за допомого браузера.
Потім в меню Вигляд браузера Internet Explorer вибрати команду перегляд HTML-
коду. У відкритому вікні текстового документа виправте допущену помилку,
закрийте текстовий документ, а в браузері натисніть кнопку Обновити.
Приклад 2
Відкрийте текстовий файл Приклад1 введіть текс вказаний нижче:
<html>
<head>
<title> Національний педагогічний університет імені М.П. Драгоманова</title>
</head>
<body>
<H1 ALIGN=CENTER>Привіт!</H1>
<H2>Це трохи складніший приклад HTML-документа</H2>
<P>Тепер ми знаємо, що абзац можна вирівнювати не лише по лівому краю,
</P>
<P ALIGN=CENTER>але і по центру</P>
<P ALIGN=RIGHT>або по правому краю.</P>
</body>
</html>
Збережіть файл під ім’ям Приклад2.html з розширенням HTML. Відкрийте файл
Приклад2.html за допомогою браузера.
Перевірте як виглядає веб-сторінка, при необхідності зробіть виправлення
використовуючи метод описаний в Примітці Прикладу 1.
Лабораторна робота №2
Основи HTML
&-послідовності
Оскільки символи "<" і ">" сприймаються браузерами як початок і кінець HTML-
міток, виникає питання: а як показати ці символи на екрані? У HTML це робиться з
допомогою &-послідовностей (їх ще називають символьними об’єктами або эскейп-
послідовностями). Браузер показує на екрані символ "<", коли зустрічає в тексті
послідовність < (по перших буквах англійських слів less than – менше, ніж). Знак
">" кодується послідовністю > (по перших буквах англійських слів greater than –
більше, ніж).
Символ "&" (амперсанд) кодується послідовністю &
Подвійні лапки (") кодуються послідовністю "
Пам’ятаєте: крапка з комою обов’язковий елемент &-послідовностей. Крім того,
всі букви, складові послідовності, мають бути в нижньому регістрі (тобто, маленькі).
Використання міток типу " або & не допускається.
5
Непарні мітки
<BR>
Ця мітка використовується, якщо необхідно перейти на новий рядок, не
перериваючи абзацу. Дуже зручно при публікації віршів.
Приклад 3
Відкрийте текстовий файл Приклад1, введіть (відредагуйте) текс вказаний нижче:
<html>
<head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
</head>
<body>
<H2>"Чорнобривці"</H2>
<H3>на вірші М. Сингаївського</H3>
<P>Чорнобривців насіяла мати<BR>
У моїм світанковім краю,<BR>
Та й навчила веснянки співати<BR>
Про квітучу надію свою.</P>
<P> <I>Приспів:</I> </P>
<P>Як на ті чорнобривці погляну,<BR>
Бачу матір стареньку,<BR>
Бачу руки твої, моя мамо,<BR>
Твою ласку я чую рідненька.</P>
</body> </html>
Збережіть файл під ім’ям Приклад3.html з розширенням HTML. Відкрийте файл
Приклад3.html за допомогою браузера.
Перевірте як виглядає веб-сторінка, при необхідності зробіть виправлення
використовуючи метод описаний в Примітці Прикладу 1.
Горизонтальна лінія
<HR> – Мітка <HR> описує таку горизонтальну лінію:
Мітка може додатково включати атрибути SIZE (визначає товщину лінії в пікселах)
і/або WIDTH (визначає розмах лінії у відсотках від ширини екрану). Далі приведена
невелика колекція горизонтальних ліній.
Приклад 4
Відкрийте текстовий файл Приклад1 введіть (відредагуйте) текс вказаний нижче:
<html>
<head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
</head>
<body>
<H1>Колекція горизонтальних ліній</H1>
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=16 WIDTH=12%><BR>
</body>
</html>
6
Збережіть файл під ім’ям Приклад4.html з розширенням HTML. Відкрийте файл
Приклад4.html за допомогою браузера.
Перевірте як виглядає веб-сторінка, при необхідності зробіть виправлення
використовуючи метод описаний в Примітці Прикладу 1.
Коментарі
Браузери ігнорують будь-який текст, поміщений між <!-- і -->. Це зручно для
розміщення коментарів. <!-- Це коментар -->
Форматування шрифту
HTML допускає два підходи до шрифтового виділення фрагментів тексту. З одного
боку, можна прямо вказати, що шрифт на деякій ділянці тексту має бути жирним або
похилим, тобто змінити фізичний стиль тексту. З іншого боку, можна помітити
деякий фрагмент тексту як що має деякий відмінний від нормального логічний
стиль, залишивши інтерпретацію цього стилю браузеру.
Фізичні стилі
Під фізичним стилем прийнято розуміти пряму вказівку браузеру на модифікацію
поточного шрифту. Наприклад, все, що знаходиться між мітками <B> і </B>, буде
написано жирним шрифтом. Текст між мітками <I> і </I> буде написаний похилим
шрифтом.
<TT> і </TT>. Текст, розміщений між цими мітками, буде написаний шрифтом, що
імітує друкуючу машинку, тобто що має фіксовану ширину символу.
Логічні стилі
При використанні логічних стилів автор документа не може знати заздалегідь, що
побачить на екрані читач. Різні браузери тлумачать одні і ті ж мітки логічних стилів
по-різному. Деякі браузери ігнорують деякі мітки взагалі і показують нормальний
текст замість виділеного логічним стилем. Ось найпоширеніші логічні стилі.
<EM> ... </EM> – Від англійського emphasis – акцент.
<STRONG> ... </STRONG> – Від англійського strong emphasis – сильний акцент.
<CODE> ... </CODE> – Рекомендується використовувати для фрагментів
початкових текстів.
<SAMP> ... </SAMP> – Від англійського sample – зразок. Рекомендується
використовувати для демонстрації зразків повідомлень, що виводяться на екран
програмами.
<KBD> ... </KBD> – Від англійського keyboard – клавіатура. Рекомендується
використовувати для вказівки того, що потрібно ввести з клавіатури.
<VAR> ... </VAR> – Від англійського variable – змінна. Рекомендується
використовувати для написання імен змінних.
Приклад 5
Підсумуємо наші знання про логічні і фізичні стилі. Заразом Ви зможете побачити,
як Ваш браузер показує ті або інші логічні стилі.
Відкрийте текстовий файл Приклад1 введіть текс вказаний нижче:
<html>
<head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
7
</head>
<body>
<H1>Шрифтовое виділення фрагментів тексту</H1>
<HR SIZE=2 WIDTH=100%><BR>
<P>Тепер ми знаємо, що фрагменти тексту можна виділяти <B>жирним</B>
або <I>похилим</I> шрифтом.
Крім того, можна включати в текст фрагменти з фіксованою шириною символу
<TT>(імітація пишучої машинки) </TT></P>
<P>Крім того, існує ряд логічних стилів:</P>
<P><EM>EM – від англійського emphasis – акцент</EM><BR>
<STRONG>STRONG – від англійського strong emphasis – сильний
акцент</STRONG><BR>
<CODE>CODE – для фрагментів початкових текстів</CODE><BR>
<SAMP>SAMP – від англійського sample – зразок</SAMP><BR>
<KBD>KBD – від англійського keyboard – клавіатура</KBD><BR>
<VAR>VAR – від англійського variable – змінна</VAR></P>
</body>
</html>
Збережіть файл під ім’ям Приклад5.html з розширенням HTML.
Відкрийте файл Приклад5.html за допомогою браузера. Перевірте як виглядає веб-
сторінка, при необхідності зробіть виправлення використовуючи метод описаний в
Примітці Прикладу 1.
Лабораторна робота №3
Основи HTML
Організація тексту в середині документа
HTML дозволяє визначати зовнішній вигляд цілих абзаців тексту. Абзаци можна
організовувати в списки, виводити їх на екран у відформатованому вигляді.
Ненумеровані списки: <UL> ... </UL>
Текст, розташований між мітками <UL> і </UL>, сприймається як ненумерований
список. Кожен новий елемент списку слід починати з мітки <LI>.
Приклад 6
Відкрийте текстовий файл Приклад1. Щоб створити список необхідно вести такий
HTML-текст:
<html> <head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
</head> <body>
<H1>Ваше прізвище ім’я і номер групи</H1>
<UL> <LI>5 клас <LI>6 клас <LI>7 клас<LI>8 клас <LI>9 клас </UL>
</body> </html>
Зверніть увагу: біля мітки <LI> немає парної закриваючої мітки.
Збережіть файл під ім’ям Приклад6.html з розширенням HTML на диску D:\ в папці
з Вашим ім’ям і номером груп.
8
Відкрийте файл Приклад6.html за допомогою браузера. Перевірте як виглядає веб-
сторінка, при необхідності зробіть виправлення використовуючи метод описаний в
Примітці Прикладу 1.
Нумеровані списки: <OL> ... </OL>
Нумеровані списки влаштовані точно так, як і ненумеровані, тільки замість
символів, що виділяють новий елемент, використовуються цифри.
Приклад 7
Відкрийте текстовий файл Приклад1. Щоб створити нумерований список необхідно
вести такий HTML-текст:
<html> <head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
</head> <body>
<H1>Ваше прізвище ім’я і номер групи</H1>
<UL> <LI>5 клас <LI>6 клас <LI>7 клас
<OL> <LI>Малювання <LI>Історія
<LI>Математика <LI>Українська мова </OL>
<LI>7 клас <LI>8 клас </UL>
</body> </html>
Збережіть файл під ім’ям Приклад7.html з розширенням HTML.
Відкрийте файл Приклад7.html за допомогою браузера. Перевірте як виглядає веб-
сторінка, при необхідності зробіть виправлення використовуючи метод описаний в
Примітці Прикладу 1.
Списки визначень: <DL> ... </DL>
Список визначень відрізняється від інших видів списків. Замість міток <LI> в
списках визначень використовуються мітки <DT> (від англійського definition term –
визначуваний термін) і <DD> (від англійського definition definition – визначення).
Зверніть увагу: точно так, як і мітки <LI>, мітки <DT> і <DD> не мають парних
закриваючих міток.
Якщо визначувані терміни досить короткі, можна використовувати модифіковану
відкриваючу мітку <DL COMPACT>.
Приклад 8
Відкрийте текстовий файл Приклад1 введіть текс вказаний нижче:
<html> <head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
</head> <body>
<H1>Ваше прізвище ім’я і номер групи</H1>
<UL> <LI>5 клас <DL COMPACT> <DT>5-А <DD>Нижник Марія
<DT>5-Б <DD>Кравчук Олександр
<DT>5-В <DD>Мазур Ірина </DL>
<LI>6 клас
<LI>7 клас
<OL> <LI>Математика <LI>Читання <LI>Малювання <LI>Українська мова
</OL>
<LI>8 клас </UL>
</body> </html>
Збережіть файл під ім’ям Приклад8.html з розширенням HTML.
9
Відкрийте файл Приклад8.html за допомогою браузера. Перевірте як виглядає веб-
сторінка, при необхідності зробіть виправлення використовуючи метод описаний в
Примітці Прикладу 1.
Відформатований текст
<PRE> ... </PRE> – Хоч браузери і ігнорують пропуски і символи закінчення рядка,
але з цього правила є виключення.
Текст розміщений між мітками <PRE> і </PRE> (від англійського preformatted –
заздалегідь відформатований) виводиться браузером на екран як є – зі всіма
пропусками, символами табуляції і закінченням рядка.
Текст з відступом
<BLOCKQUOTE> ... </BLOCKQUOTE> – Текст, розміщений, між мітками
<BLOCKQUOTE> і </BLOCKQUOTE> виводиться браузером на екран із
збільшеним лівим полем.
Гіпертекст
Перш за все, що ж таке гіпертекст? На відміну від звичайного тексту, який можна
читати тільки від початку до кінця, гіпертекст дозволяє здійснювати миттєвий
перехід від одного фрагмента тексту до іншого. Пошукові системи влаштовані саме
за гіпертекстовим принципом. При натисненні лівою кнопкою миші на деякий
виділений фрагмент поточного документа відбувається перехід до деякого
заздалегідь призначеного документа або фрагмента документа.
У HTML перехід від одного фрагмента тексту до іншого задається за допомогою
мітки:
<A HREF="[адреса переходу]"> виділений фрагмент тексту</A>
Як параметр [адреса переходу] може використовуватися декілька типів аргументів.
Найпростіше – це задати ім'я іншого HTML-документа, до якого потрібно перейти.
Наприклад:
<A HREF="index.html">Перейти до заголовку</A>
Такий фрагмент HTML-тексту приведе до появи в документі виділеного фрагмента.
Перейти до змісту, при натисненні на який в поточне вікно буде завантажений
документ index.html.
Зверніть увагу: якщо в адресі переходу не вказаний каталог, перехід буде виконаний
усередині поточного каталогу. Якщо в адресі переходу не вказаний сервер, перехід
буде виконаний на поточному сервері.
З цього виходить, що група HTML-документів, які посилаються один на одного
тільки по імені файлу і знаходяться в одному каталозі на Вашому комп'ютері
працюватиме так само, якщо її помістити в будь-який інший каталог на будь-який
інший комп’ютер, на локальній мережі або в Інтернет! Таким чином можливо
розробляти цілі колекції документів без підключення до Інтернет, і лише після
остаточної готовності, підтвердженої випробуваннями, поміщати колекції
документів в Інтернет.
Іноді буває необхідно розмістити посилання на документ, що знаходиться на
іншому сервері. В такому випадку необхідно шлях до файлу ввести відповідно до
URL-адреси. Наприклад:
<A HREF="http://www.yi.com/home/ChuvakhinNikolai/index.html">
10
На практиці також часто використовується посилання не тільки на HTML-
документи але і на інші види ресурсів:
<A HREF="ftp://server/directory/file.ext">
Таке посилання запустить протокол передачі файлів і розпочнеться завантаження
файлу file.ext, що знаходиться в каталозі directory на сервері server, на локальний
диск користувача.
<A HREF="mailto:user@mail.box">Відправити листа</A>
Якщо користувач зробить перехід по такому посиланні, у нього на екрані
відкриється вікно введення вихідного повідомлення його поштової програми. В
полі: "Куди" вікна поштової програми буде вказано user@mail.box
Приклад 9
Відкрийте текстовий файл Приклад1 введіть текс вказаний нижче:
<html> <head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
</head> <body>
<H1>Ваше прізвище ім’я і номер групи</H1>
<p>За допомогою посилань можна переходити до інших файлів
(наприклад, до <a href="Приклад6.html">Приклад 6</a>).</p>
<p>Можна створити гіперпосилання на інший веб-документ, що знаходиться
на іншому сервері (наприклад <a href="http://nbuv.gov.ua">Національна
бібліотека України імені В.І. Вернадського</a>) </p>
<p>Можна надати користувачеві можливість надіслати пошту
(наприклад, <a href="mailto:user@ukr.net">Електронна пошта </a>) </p>
</body> </html>
Збережіть файл під ім’ям Приклад9.html з розширенням HTML.
Відкрийте файл Приклад9.html за допомогою браузера. Перевірте як виглядає веб-
сторінка, при необхідності зробіть виправлення використовуючи метод описаний в
Примітці Прикладу 1.
Лабораторна робота №3
Основи HTML
Зображення в HTML-документе
Вбудувати зображення в HTML-документ дуже просто. Для цього потрібно мати
зображення у форматі GIF (файл з розширенням *.gif) або JPEG (файл з
розширенням *.jpg або *.jpeg).
Мітка <IMG SRC="[ім'я файлу]"> може також включати атрибут ALT="[текст]",
наприклад:
<IMG SRC="picture.gif" ALT="Картинка">
Файл із зображенням може знаходитися в іншому каталозі або навіть на іншому
сервері. В цьому випадку варто вказати його повне ім’я (див. розділ "Гіпертекст").
При відображенні картинки браузер за замовчуванням використовує його реальний
розмір. Якщо малюнок необхідно масштабувати, тоді використовуються атрибути
WIDTH= і HEIGHT=, які задають ширину і висоту малюнка в пікселях.
Розберемо все, що ми знаємо про зображення, за допомогою Прикладу 10.
11
На початку за допомогою системи пошуку Windows знайдіть 3 малюнки з
розширенням JPG або GIF. Скопіюйте їх у вашу папку з номер групи та ім’ям.
Перейменуйте їх: 020, 021, 022.
При наборі необхідного тексту замість "020.jpg" вказуйте їхні імена і розширення.
Приклад 10
Відкрийте текстовий файл Приклад1 введіть текс вказаний нижче:
<html> <head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
</head> <body>
<H1>Ваше прізвище ім’я і номер групи</H1>
<p>Зображення можна вбудувати дуже просто: </p>
<p><img src="020.jpg" width=200></p>
<p>Крім того, зображення можна зробити "гарячим" тобто здійснювати
перехід при натисненні на зображення:</p>
<p><a href="Приклад7.html"><img src="021.gif" width=100> </a></p>
<p>Зображення можна розмісти в різних положення відносно тексту і з різних
країв сторінки. </p>
<p>Для цього використовуються різноманітні атрибути, наприклад :
<img src="022.gif" ALIGN=MIDDLE ALIGN=RIGHT width=100></p>
</body> </html>
Збережіть файл під ім’ям Приклад10.html з розширенням HTML.
Відкрийте файл Приклад10.html за допомогою браузера. Перевірте як виглядає веб-
сторінка, при необхідності зробіть виправлення використовуючи метод описаний в
Примітці Прикладу 1.
У другій частині прикладу посилання на зображення знаходиться між мітками <A
HREF="..."> і </A> фактично стає кнопкою, при натисненні на яку відбувається
перехід по гіперпосиланню.
Колірна схема HTML-документа
Колірна схема HTML-документа визначається атрибутами, розміщеними усередині
мітки <BODY>. Ось список цих атрибутів:
bgcolor – визначає колір фону документа.
text – визначає колір тексту документа.
link – визначає колір виділеного елементу тексту, при натисненні на який
відбувається перехід по гіпертекстовому посиланню.
vlink – визначає колір посилання на документ, який вже був переглянутий раніше.
alink – визначає колір посилання в мить, коли на неї указує курсор миші і натискує
її права кнопка, тобто безпосередньо перед переходом по посиланню.
Колір кодується послідовністю з трьох пар символів. Кожна пара є шістнадцяти
розрядним значенням насиченості заданого кольору одним з трьох основних
кольорів (червоним, зеленим і синім) в діапазоні від нуля (00) до 255 (FF).
Розберемо декілька прикладів.
bgcolor=#FFFFFF – Колір фону. Насиченість червоним, зеленим і синім однакова
— FF (це шістнадцяти розрядне представлення числа 255). Результат – білий колір.
text=#000000 – Колір тексту. Насиченість червоним, зеленим і синім однакова — 00
(нуль). Результат – чорний колір.
12
link=#FF0000 – Колір гіпертекстового заслання. Насиченість червоним — FF (255),
зеленим і синім, — 00 (нуль). Результат – червоний колір.
Крім того, мітка <BODY> може включати атрибут background="[ім'я файлу]", який
задає зображення, що служить фоном для тексту і інших зображень. Як і будь-яке
інше зображення, фон має бути представлений у форматі GIF (файл з розширенням
*.gif) або JPEG (файл з розширенням *.jpg або *.jpeg).
Приклад 11
Створіть і збережіть у своїй папці на диску D:/ два файли у форматі HTML. Вкажіть
ім’я Приклад11.html і Приклад12.html відповідно
<html> <head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
</head> <body>
<BODY bgcolor=#00FF00 text=#000000 link=#FF0000>
<H1>Слайд-демонстрация колірних схем <BR>
наведена в Прикладі 11 </H1>
<STRONG>Чорний текст на зеленому фоні із сильним акцентом</STRONG>
</body>
</html>
Приклад 12
<html> <head>
<title>Національний педагогічний університет імені М.П. Драгоманова</title>
</head> <body>
<BODY bgcolor=#C0C0C0 text=#0000FF link=#FF0000 vlink=#FF0000>
<H1>Слайд-демонстрація колірних схем <BR>
Наведена в Прикладі 12 </H1>
</p> <a href=http://www.npu.edu.ua> НПУ ім. М.П. Драгоманова</a> </p>
</p> <a href=http://www.ukr.net> ukr.net это – мой интернет</a> </p>
</body> </html>
Відкрийте файл Приклад11.html і Приклад12.html за допомогою браузера.
Перевірте як виглядає веб-сторінка, при необхідності зробіть виправлення
використовуючи метод описаний в Примітці Прикладу 1. У даному прикладі змініть
ще три колірні схеми для фону, тексту, гіперпосилання і збережіть ці документи під
ім’ям Приклад12а.html, Приклад12б.html, Приклад12в.html.