Створення простої web-сторінки (стр. 1 из 3)

СТВОРЕННЯ ПРОСТОЇ 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 <В> ще називають контейнерами, бо між ними знаходиться фрагмент тексту. Не всі теги є контейнерами. Наприклад, тег <IMG> - розміщує на сторінці зображення.

HTML-тег може мати параметри, ям називаються атрибутами.

Атрибут повідомляє броузеру додаткову інформацію про особливості застосування даного тега.

Наприклад, тег, який створює гіпертекстове посилання, повинен мати атрибут, що визначає URL Web-сторінки, на яку вказує посилання. Атрибут може мати значення. Ім'я атрибуту i значення розділяються знаком "=". Нехай треба створити гіпертекстове посилання на HTML-файл, для чого вказується URL цього файла як значення атрибута HREF. Атрибут разом з наданим йому значенням розташовується перед закриваючою кутовою дужкою тега <А>:

<А HREF=example.htm>

СТРУКТУРА HTML-ДОКУМЕНТА

Bci HTML-документа будуються за визначеними правилами:

-текст документа починаеться тегом <HTML> i заюнчуеться тегом </HTML>;

-всередині контейнера <HTML> знаходяться ще два контейнери <HEAD> (заголовок Web-сторінки) і <BODY> (її вміст);

-всередині; контейнера <HEAD> знаходяться інші контейнери, серед них <TITLE> (рядок символів заголовка вікна броузера).

Web-сторінка зберігається в текстовому файл з розширенням HTML або НТМ.

Наприклад, закінчений HTML-файл може мати такий вигляд:

<html>

<head>

<title>Mій перший крок</title>

</head>

<body>

Привіт, це моя перша сторінка.

</body>

</htmlt>

Треба набрати цей текст будь-яким редактором (наприклад, "Блокнот"), зберегти його з довільним іменем, але обов'язково з розширенням .html або .htm (наприклад, prikladl.html). Якщо тепер відкрити програму Internet Explorer i виконати команду "Файл" -> "Открыть" -> кнопка "Обзор..." -> prikladl.html, на екрані броузера цей HTML-файл буде мати наведений вигляд (Рисунок 1) (зверніть увагу на розташування текстів "Мій перший крок" i "Привіт, це моя перша сторінка").

Рисунок 1. Результат виконання файлу prikladl.html

При відображенні HTML-файла броузером зайві пропуски ігноруються. Якщо розділити два слова трьома пропусками, то на екрані між словами залишиться один пропуск, а кілька порожніх рядків на екрані броузера будуть замінені на один. Коли текст досягає правої границі вікна, він автоматично переходить на новий рядок.

Все, що розташовано між тегами <head> </head>, - це службова інформація.

Все, що розташовано між тегами <body> </body>, - це безпосередній вміст документа.

ВСТАНОВЛЕННЯ КОЛЬОРУ ТЕКСТУ

#000000	Чорний	#000080	Темно-синій
#0000FF	Блакитний	#800080	Пурпуровий
#FF00FF	Бузковий	#FF0000	Червоний
#808080	Сірий	#C0C0C0	Срібний
#008000	Зелений	#008080	Темно-зелений
#00FF00	Яскраво-зелений	#FFFFFF	Білий
#800000	Каштановий	#FFFF00	Жовтий

Наведемо кілька базових кольорів HTML.

Щоб задати колір для всього документа, треба дати відповідну команду в <body>. Наприклад, так:

Teг - багатофункціональний. За його допомогою можна задавати не тільки колір тексту в конкретній частині документа, але й розмір i вид шрифту (про це далі).

ВСТАНОВЛЕННЯ КОЛЬОРУ ФОНУ

Колір фону встановлюється за допомогою знайомого тега <body>. Наприклад, чорний фон встановиться командою:

Якщо колір в <body> не вказувати, то з мовчазної згоди він буде білим (або будь-яким іншим). Тому краще колір фону встановлювати, щоб не було не передбачуваного кольору фону.

Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad2.html:

<html>

<head>

<ы1е>Мій перший крок</title>

</head>

<body text="#336699" bgcolor="#FFFFFF">

Привіт, це моя перша сторінка.

Ласкаво просимо!

</body>

</html>

Зверніть увагу: в тезі <body> одночасно встановлюється колір тексту документа i колір фону.

Це означає, що весь текст сторінки буде сірим, крім тексту, для якого спеціально встановлёно інший колір. Якщо колір тексту в <body> не задавати, то "з мовчазної згоди" він буде чорним.

Рекомендується за допомогою броузера переглянути цей HTML-файл, для чого досить двічі клацнути на його піктограмі, можна встановлювати інші кольори для тексту i фону, спостерігати результат.

Якщо змін не видно, то це означає, що зміни внесені неправильно, або ви забули зберегти документ.

Можна переглянути за допомогою броузера HTML-файл, двічі клацнувши на його піктограмі

ПАРАГРАФ

Параграфи вводяться тегом <р></р>. За допомогою параграфів можна вирівнювати текст:

по центру

<р align="center">текст

по лівому краю

<р align="left">текст

по правому краю

<р align="right">текст

по ширині

<р align="justify">текст

Якщо не встановлювати параграф, текст "з мовчазної згоди" вирівнюється по лівому краю.

Спробуйте до попереднього HTML-файла за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad3.html:

<html>

<head>

<title>Mій перший крок</title>

</head>

<center

Привіт, це моя перша сторінка.

Ласкаво просимо!

</center >

<р align="justify">

Шановний колего! Я вивчаю мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями i знайомими.

Щоб вони могли подивитися мою фотокартку, прочитати про мене, написати кілька рядків в мою книгу для гостей.

</р>

</body>

</html>

Рекомендується за допомогою броузера переглянути цей HTML-файл, для чого досить двічі клацнути на його піктограмі. Можна встановлювати інші вирівнювання тексту i подивитися результат.

СТВОРЕННЯ ЗАГОЛОВКА