на тему рефераты Информационно-образоательный портал
Рефераты, курсовые, дипломы, научные работы,
на тему рефераты
на тему рефераты
МЕНЮ|
на тему рефераты
поиск
Створення простої web-сторінки

Створення простої web-сторінки

СТВОРЕННЯ ПРОСТОЇ 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> (або </B>) - припинити виведення тексту курсивом (або напівжирним). Ці теги можна використовувати комбіновано.

Наприклад,так:

<В>напівжирний<I>напівжирний+кусив</I>напівжирний</В>

Теги типу <I> 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>. Наприклад, так:

<body text="#336699">

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

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

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

<body bgcolor="#000000">

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

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

<html>

<head>

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

</head>

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

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

<br>

<font со1ог="#ССОООО"> Ласкаво просимо! </font>

</body>

</html>

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

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

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

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

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

ПАРАГРАФ

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

по центру

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

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

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

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

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

по ширині

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

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

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

<html>

<head>

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

</head>

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

<center

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

<br>

<font color="#CCOOOO"> Ласкаво просимо! </font>

</center >

<р align="justify">

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

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

</р>

</body>

</html>

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

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

Щоб виділити текст, використовують теги заголовків Н1-Н6. Наприклад, так: <НЗ>3 Новим роком! </Н3>.

Заголовки призначені для виділення невеликої частини тексту (рядок, фраза). Щоб виділити великий фрагмент тексту або тільки одне слово, треба скористатися відомими тегом <font> </font> за зразком:

<font size="+4"> TEKCT </font>

<font size="+3"> ТЕКСТ </font>

<font size="+2"> ТЕКСТ </font>

<font size="+l"> ТЕКСТ </font>

<font size="+0"> ТЕКСТ </font>

<font size="-l"> текст </font>

<font size="-2"> текст </font>

Параметр size задає розмір шрифту, але, на відміну від заголовків, текст не виділяється жирним шрифтом i немає примусового перенесення. Написання тексту задається за допомогою тегів:

<b> Жирний текст </b>

<i> Текст курсивом </i>

<u> Підкреслений текст </ u >

Для фрагмента тексту можна застосовувати кілька meгів. Наприклад: <b> <i> Жирний курсив </i> </b>

Назва шрифту задається за допомогою тегів:

<font face="ARIAL"> шрифт Arial </font>

Тут за допомогою атрибута face задано шрифт Arial.

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

<html>

<head>

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

</head>

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

<center>

<НЗ>Привіт, це моя перша сторінка.</НЗ>

<br>

<font color="#CCOOOO"> <H1> Ласкаво просимо! </H1> </font>

</center >

<p align="justify">

<font size="+2"> Шановний колего! </font> Я вивчаю мову

<font size="+l"> HTML, </font> щоб створити власну <i> домашню Web-сторінку </i> для спілкування з друзями i знайомими. Щоб вони могли <b> <i> подивитися мою фотокартку </i> </b>, прочитати про мене, написати кілька рядків в мою <u> книгу для гостей. </u>

Страницы: 1, 2


© 2003-2013
Рефераты бесплатно, курсовые, рефераты биология, большая бибилиотека рефератов, дипломы, научные работы, рефераты право, рефераты, рефераты скачать, рефераты литература, курсовые работы, реферат, доклады, рефераты медицина, рефераты на тему, сочинения, реферат бесплатно, рефераты авиация, рефераты психология, рефераты математика, рефераты кулинария, рефераты логистика, рефераты анатомия, рефераты маркетинг, рефераты релиния, рефераты социология, рефераты менеджемент.