49965 (597468)
Текст из файла
СТВОРЕННЯ ПРОСТОЇ WEB-СТОРІНКИ
Методичні вказівки, вправи, лабораторні роботи, питання для самоконтролю
ЗМІСТ
ВСТУП
ВСТУП В МОВУ HTML
СТРУКТУРА HTML-ДОКУМЕНТА
ВСТАНОВЛЕННЯ КОЛЬОРУ ТЕКСТУ
ВСТАНОВЛЕННЯ КОЛЬОРУ ФОНУ
ПАРАГРАФ
СТВОРЕННЯ ЗАГОЛОВКА
ПИТАННЯ ДЛЯ САМОКОНТРОЛЮ
ГРАФІКА I ПОСИЛАННЯ НА WEB-СТОРІНЦІ
ВСТАВКА МАЛЮНКІВ
ПОСИЛАННЯ
СПИСКИ
ВІДСТУПИ
ПИТАНИЯ ДЛЯ САМОКОНТРОЛЮ:
КОМПЛЕКСНА ЛАБОРАТОРНА РОБОТА "СТВОРЕННЯ HTML-ФАЙЛА"
ОФОРМЛЕНИЯ ТАБЛИЦЬ
ВИРІВНЮВАННЯ ВМICТУ КОМІРОК
ФОРМАТУВАННЯ КОМІРОК
ПІДСУМКОВА ЛАБОРАТОРНА РОБОТА "ВЛАСНА WEB-СТОРІНКА"
СПИСОК ЛІТЕРАТУРИ
ВСТУП
Web-сторінка - це створений за допомогою мови HTML текстовий файл, який можна відобразити у вікні Web-броузера.
Для створення i редагування HTML-файла можна скористатися будь-яким текстовим редактором. Якщо HTML-файл відкрити за допомогою засобів перегляду, наприклад, Internet Explorer, він відображає текст, графіку i гіперпосилання на інші Web-сторінки.
Гіперпосилання - це фрагменти тексту або зображення на Web-сторінці, які дозволяють клацанням на них відкривати інші Web-сторінки.
Гіперпосилання виглядає, як підкреслений текст. Курсор миші на гіперпосиланні набуває форми руки. При клацанні на гіперпосиланні відкривається зв'язаний з ним документ. Якщо е доступ до Internet, гіперпосилання на Web-вузли відкриють Internet Explorer i доступ до відповідного Web-вузла. Гіперпосилання дають можливість користувачу переходи на Web-сторінках вад одного матеріалу до іншого.
Користувачі WWW можуть не тільки переглядати чужі Web-сторінки, але и створювати свої. Щоб створювати Web-сторінки, нема необхідності вивчати мову HTML. Можна конвертувати у Web-сторінки документи, створенні за допомогою текстового процесора Word, або за допомогою засобу Prints Page Express, що є в складі Windows'98.
Проте конвертуванні документи містять, як правило, багато зайвих чи нераціонально використаних елементів, що значно сповільнює роботу з ними, особливо в умовах несучасних каналів зв'язку.
ВСТУП В МОВУ HTML
Мова HTML (мова гіпертекстової розмітки) призначена для опису Web-сторінок i не є мовою програмування. Вона призначена для розмітки текстових документів, тобто для їх форматування. Всі Web-сторінки, які є в Internet, створені за допомогою мови HTML.
Керуючим елементом мови HTML є тег, який визначає, як буде виглядати відповідний фрагмент на екрані броузера.
Тег - це команда HTML формування вигляду фрагменту Web-сторінки, яка завжди записується в кутові дужки.
Наприклад, <I> - почати виводити текст курсивом, <B> - почати виводити текст напівжирним.
Закриваючий тег, який припиняє дію відповідної команди, починається з “/”. Наприклад, (або ) - припинити виведення тексту курсивом (або напівжирним). Ці теги можна використовувати комбіновано.
Наприклад,так:
напівжирнийнапівжирний+кусивнапівжирний
Теги типу i ще називають контейнерами, бо між ними знаходиться фрагмент тексту. Не всі теги є контейнерами. Наприклад, тег - розміщує на сторінці зображення.
HTML-тег може мати параметри, ям називаються атрибутами.
Атрибут повідомляє броузеру додаткову інформацію про особливості застосування даного тега.
Наприклад, тег, який створює гіпертекстове посилання, повинен мати атрибут, що визначає URL Web-сторінки, на яку вказує посилання. Атрибут може мати значення. Ім'я атрибуту i значення розділяються знаком "=". Нехай треба створити гіпертекстове посилання на HTML-файл, для чого вказується URL цього файла як значення атрибута HREF. Атрибут разом з наданим йому значенням розташовується перед закриваючою кутовою дужкою тега :
<А HREF=example.htm>
СТРУКТУРА HTML-ДОКУМЕНТА
Bci HTML-документа будуються за визначеними правилами:
-
текст документа починаеться тегом i заюнчуеться тегом ;
-
всередині контейнера знаходяться ще два контейнери <HEAD> (заголовок Web-сторінки) і <BODY> (її вміст);
-
всередині; контейнера знаходяться інші контейнери, серед них (рядок символів заголовка вікна броузера).
Web-сторінка зберігається в текстовому файл з розширенням HTML або НТМ.
Наприклад, закінчений HTML-файл може мати такий вигляд:
Mій перший крок
Привіт, це моя перша сторінка.
Треба набрати цей текст будь-яким редактором (наприклад, "Блокнот"), зберегти його з довільним іменем, але обов'язково з розширенням .html або .htm (наприклад, prikladl.html). Якщо тепер відкрити програму Internet Explorer i виконати команду "Файл" -> "Открыть" -> кнопка "Обзор..." -> prikladl.html, на екрані броузера цей HTML-файл буде мати наведений вигляд (Рисунок 1) (зверніть увагу на розташування текстів "Мій перший крок" i "Привіт, це моя перша сторінка").
Рисунок 1. Результат виконання файлу prikladl.html
При відображенні HTML-файла броузером зайві пропуски ігноруються. Якщо розділити два слова трьома пропусками, то на екрані між словами залишиться один пропуск, а кілька порожніх рядків на екрані броузера будуть замінені на один. Коли текст досягає правої границі вікна, він автоматично переходить на новий рядок.
Все, що розташовано між тегами , - це службова інформація.
Все, що розташовано між тегами , - це безпосередній вміст документа.
ВСТАНОВЛЕННЯ КОЛЬОРУ ТЕКСТУ
| #000000 | Чорний | #000080 | Темно-синій |
| #0000FF | Блакитний | #800080 | Пурпуровий |
| #FF00FF | Бузковий | #FF0000 | Червоний |
| #808080 | Сірий | #C0C0C0 | Срібний |
| #008000 | Зелений | #008080 | Темно-зелений |
| #00FF00 | Яскраво-зелений | #FFFFFF | Білий |
| #800000 | Каштановий | #FFFF00 | Жовтий |
Наведемо кілька базових кольорів HTML.
Щоб задати колір для всього документа, треба дати відповідну команду в . Наприклад, так:
Teг - багатофункціональний. За його допомогою можна задавати не тільки колір тексту в конкретній частині документа, але й розмір i вид шрифту (про це далі).
ВСТАНОВЛЕННЯ КОЛЬОРУ ФОНУ
Колір фону встановлюється за допомогою знайомого тега . Наприклад, чорний фон встановиться командою:
Якщо колір в не вказувати, то з мовчазної згоди він буде білим (або будь-яким іншим). Тому краще колір фону встановлювати, щоб не було не передбачуваного кольору фону.
Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad2.html:
Мій перший крок
Привіт, це моя перша сторінка.
<br>
Ласкаво просимо!
Зверніть увагу: в тезі одночасно встановлюється колір тексту документа i колір фону.
Це означає, що весь текст сторінки буде сірим, крім тексту, для якого спеціально встановлёно інший колір. Якщо колір тексту в не задавати, то "з мовчазної згоди" він буде чорним.
Рекомендується за допомогою броузера переглянути цей HTML-файл, для чого досить двічі клацнути на його піктограмі, можна встановлювати інші кольори для тексту i фону, спостерігати результат.
Якщо змін не видно, то це означає, що зміни внесені неправильно, або ви забули зберегти документ.
Можна переглянути за допомогою броузера HTML-файл, двічі клацнувши на його піктограмі
ПАРАГРАФ
Параграфи вводяться тегом . За допомогою параграфів можна вирівнювати текст:
по центру
текст
по лівому краю
текст
по правому краю
текст
по ширині
<р align="justify">текст
Якщо не встановлювати параграф, текст "з мовчазної згоди" вирівнюється по лівому краю.
Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad3.html:
Mій перший крок
Привіт, це моя перша сторінка.
Ласкаво просимо!
Шановний колего! Я вивчаю мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями i знайомими.
Щоб вони могли подивитися мою фотокартку, прочитати про мене, написати кілька рядків в мою книгу для гостей.
Рекомендується за допомогою броузера переглянути цей HTML-файл, для чого досить двічі клацнути на його піктограмі. Можна встановлювати інші вирівнювання тексту i подивитися результат.
СТВОРЕННЯ ЗАГОЛОВКА
Щоб виділити текст, використовують теги заголовків Н1-Н6. Наприклад, так: 3 Новим роком! .
Заголовки призначені для виділення невеликої частини тексту (рядок, фраза). Щоб виділити великий фрагмент тексту або тільки одне слово, треба скористатися відомими тегом за зразком:
TEKCT
size="+3"> ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
текст
текст
Параметр size задає розмір шрифту, але, на відміну від заголовків, текст не виділяється жирним шрифтом i немає примусового перенесення. Написання тексту задається за допомогою тегів:
Жирний текст
<i> Текст курсивом
Підкреслений текст
Для фрагмента тексту можна застосовувати кілька meгів. Наприклад: <i> Жирний курсив
Назва шрифту задається за допомогою тегів:
шрифт Arial
Тут за допомогою атрибута face задано шрифт Arial.
Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad4.html:
Mій перший крок
Привіт, це моя перша сторінка.
Ласкаво просимо!
> Шановний колего! Я вивчаю мову
size="+l"> HTML, щоб створити власну домашню Web-сторінку </i> для спілкування з друзями i знайомими. Щоб вони могли подивитися мою фотокартку </i> b>, прочитати про мене, написати кілька рядків в мою <u> книгу для гостей. u>
Якщо за допомогою броузера переглянути цей HTML-файл, двічі клацнувши на його піктограмі, на екрані він буде мати наведений вигляд (Рисунок 2) (зверніть увагу на розміри i написання шрифтів текстів "Привіт, це моя перша сторінка", "Ласкаво просимо!" i "Шановний колего!...", а також інші фрагменти тексту).
Рисунок 2. Результат виконання файлу priklad4.html
Питання для самоконтролю
-
Якою мовою створюється Web-сторінка i яким чином відображується?
-
Що таке "гіперпосилання"? Який воно має вигляд i як ним користуватися?
-
Що таке "тег"? Для чого теги використовуються?
-
Яку структуру має HTML-документ?
-
Як відобразити на екрані HTML-документ?
-
Як мовою HTML встановити колір тексту?
-
Яким тегом одночасно встановити колір тексту i фону?
-
Як вирівняти текст по центру, по ширині, по лівому або правому краю?
-
Якими засобами мови HTML виділити фрагменти тексту?
-
Якими засобами мови HTML задати написання тексту або (i) вид шрифту?
ГРАФІКА I ПОСИЛАННЯ НА WEB-СТОРІНЦІ
Вставка малюнків
Щоб вставити малюнок, треба скористатися тегом:
,
де my.jpg -ім'я файла, що містить малюнок. Замість my.jpg можна вставити ім'я будь-якого іншого малюнка (з розширенням jpg, gif, png, bmp). Головне, щоб між лапками стояв шлях та ім’я файла малюнка (у наведеному прикладі малюнок знаходиться в одній папці з файлом HTML-документа).
Якщо малюнок знаходиться в іншій папці, то його краще переписати в папку, де знаходиться HTML-документ.
Для "співіснування" малюнка (наприклад, pr1.png) i тексту документа використовують теги:
малюнок з лівого краю, текст його обтікає справа:

малюнок з правого краю, текст його обтікає зліва:

Kpiм параметрів align, існують ще кілька параметрів:
відстань між текстом i мапюнком по вертикалі (тут 10 пікселів):

відстань між текстом i малюнком по горизонталі (30 пікселів):

опис малюнка (якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст - тут "моя фотокартка"):

ширина малюнка (тут 100 пікселів):

висота малюнка (тут 200 пікселів):

рамка навколо малюнка (тут товщина лінії 5 пікселів):

Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:

Малюнок буде притиснутий до лівого краю екрана, текст буде його обтікати справа, ввдстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів, при встановленні курсору миші на малюнку з'явиться напис "моя фотокартка".
Спробуйте в папку з HTML-файлом переписати довільний малюнок (наприклад, з ім'ям photo.jpg). В HTML-файл за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad5.html:
Мій перший крок
Привіт, це моя перша сторінка.
Ласкаво просимо!

alt="моя фотокартка" WIDTH=80 HEIGHT=80>
Шановний колего ! Я вивчаю
мову HTML, щоб створити власну <i> домашню Web-сторінку для спілкування з друзями i знайомими. Щоб вони могли <i>подивитися мою фотокартку, прочитати про мене, написати
кілька рядків в мою книгу для гостей.