49153 (Створення Web-документів. Використання мови HTML)

Міністерство освіти і науки України

Національний педагогічний університет імені М.П.Драгоманова

Фізико-математичний факультет

Кафедра основ інформатики та обчислювальної техніки

Курсова робота з інформатики на тему:

"Створення Web-документів. Використання мови HTML"

Автор: студентка 41МІ групи

фізико-математичного факультету

Бондар Наталія Петрівна

Науковий керівник: професор

Морзе Наталія Вікторівна

Робота захищена "___"________2004року

Оцінка _______________

Комісія: 1.

2.

3.

Київ-2004

План

I. Вступ.

II. Основна частина.

1. Основи Web-програмування. Використання мови HTML.

1.1. Базові елементи HTML.

1.2. Форматування тексту.

1.3. Таблиці та списки.

1.4. Посилання та робота з ними.

2. Створення Web-документу.

III. Висновки.

IV.Література.

Вступ

Internet має кілька служб, зокрема, електронну пошту, телеконференференції (дискусійні групи), передавання файлів тощо. Більшість документів із різноманітною інформацією з різних галузей знань мають гіпертекстовий формат. Службу Інтернет, яка управляє передаванням таких документів, називають World Wide Web (Web, WWW). Цим же термином або простором Web називають обширну сукупність Web-документів, між якими існують гіпертекстові зв'язки.

Поняття «гіпертекст» має досить давню історію. Воно виникло на стику філософії та комп'ютерних технологій ще у середині XX ст. Теоретичною основою гіпертексту стали сформульовані В.Бушем (1945 р.) принципи нелінійного письма, які він докладно висвітлив у роботі «Як ми могли б мислити». У 60-х роках Т.Нельсон і Д. Енгельбарт, застосовуючи комп’ютерні технології опрацювання інформації, розробили нову технологію, яку назвали «гіпертекст».У гіпертексті є посилання на інші сторінки або документи. В більшості броузерів(програм для завантаження та перегляду Web- документів) ці посилання підкреслюються або виділяються іншим кольором. Якщо клацнути лівою кнопкою миші на гіперпосиланні, то програма перегляду гіпертексту завантажить документ, на який вказує посилання. Таким чином, сторінка набуває властивості інтерактивності. У деякому розумінні, завдяки гіпертексту, інформація у WWW організована за тим самим принципом, що і в людському мозку.

Окремі документи, які складають простір Web, називають Web-сторінками. Web- сторінки зберігаються на жорстких дисках Web-серверів. Web-сервери — це спеціалізовані комп’ютери з відповідним програмним забезпеченням, яке дає можливість доступу користувачів до Web-сторінок; це програмне забезпечення також називається Web-сервером.

Групу сторінок, присвячену певній темі та розміщену в певному каталозі Web-сервера, називають Web- вузлом або Web-сайтом. Один фізичний Web- сервер може містити кілька Web-сайтів.

Web-сторінки мають вигляд звичайних текстових документів, в які введено вказівки форматування. Принцип роботи браузера полягає в інтерпретації цих вказівок. При відображенні таких документів браузером самі вказівки не відображаються, проте впливають на спосіб відображення решти частини документу. Згадані вказівки називаються дескрипторами або тегами. З їх допомогою текст можна робити кольоровим, використовувати шрифти різного розміру, вбудовувати мультиплікацію, відео фрагменти тощо. Формат дескрипторів задається в описі спеціальної мови розмітки. Вона називається мовою розмітки гіпертексту-HTML( Hyper Text Markup Language).

Документи, розмічені за допомогою цієї мови, називаються HTML- документами. HTML- документи мають розширення .html або .htm. Інколи процес розробки Web- документів засобами мови HTML називають Web- програмуванням. Проте слід розуміти, що HTML не є мовою програмування у звичайному розумінні, а є мовою розмітки(опису). Термін Web- програмування мовою HTML має історичне походження.

Мова HTML розроблена спеціально для Web. Її популярність забезпечують зокрема такі властивості:

—документ, створений за допомогою деякої програми, наприклад текстового редактора, часто важко(а іноді і неможливо) використовувати в іншій програмі; HTML у цьому відношенні є універсальною;

—HTML — це відкритий стандарт;

— HTML не є власністю якої-небудь фірми;

— можливість використання гіпертексту;

• HTML підтримує мультимедіа.

Гіпертекстовий зв'язок між сотнями мільйонів документів, які зберігаються на серверах Інтернету, є основою існування логічного простору World Wide Web. Проте такий зв'язок не міг би існувати, якщо б кожен документ у цьому просторі не мав своєї унікальної адреси. Адреса будь-якого ресурсу в мережі повинна записуватись відповідно до певного стандарту. Саме таким стандартом є URL (Uniform Resourse Locator, уніфікований вказівник ресурсів), згідно з яким адреса найчастіше має такий формат:

протокол://доменне і'мя//каталог/файл

Р.1. Основи Web-програмування. Використання мови HTML

1.1.Базові елементи HTML

Елемент HTML

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

До складу контейнеру HTML входять два структурні елементи: HEAD (елемент заголовку) та BODY (основна частина або тіло документу). Таким чином, документ HTML має вигляд:

···

···

Заголовок документу(елемент HEAD)

Заголовок HTML-документу визначається елементом HEAD. Тег не має атрибутів. Елемент HEAD розміщується одразу після тегу , перед основною частиною Web-сторінки:

···

Елемент HEAD (як і елемент HTML) не відображається при перегляді Web-сторінки, він надає браузеру загальну інформацію про HTML-файл.

Назва документу(елемент TITLE)

До заголовку документу входить обов'язковий елемент, який представлений контейнером . Все, що знаходиться між парою тегів і , інтерпретується браузером як назва Web-сторінки.

Якщо в документі є гіперпосилання, то назва документу, на який вказано посилання, буде з'являтися у вигляді плаваючої підказки при на-веденні на посилання вказівника миші.

Елемент TITLE по відношенню до елемента HEAD є дочірнім,тобто вкладеним у контейнер :

···

···

Тіло документу(елемент BODY)

Елемент BODY є наступним компонентом Web- сторінки. Парні теги і вказують на початок і кінець тіла документа. Весь зміст документа міститься в елементі BODY.

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

Тег розміщується безпосередньо після елементу HEAD, а кінцевий тег є передостаннім тегом документу:

···

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

1.2.Форматування тексту

Вирівнювання тексту та горизонтальна лінія

Для того, щоб вставити розрив рядка, необхідно скористатися тегом
. Якщо потрібно зробити так, щоб в певному місці текст НЕ МІГ бути розірваним, необхідно написати тег . Для розбиття тексту на параграфи використовується тег

ТЕКСТ

Тег

має один параметр ALIGN, який вказує на спосіб вирівнювання тексту в параграфі: текст може бути вирівнений по правій (RIGHT), лівій (LEFT) межах або по центру (CENTER). Якщо параметр пропущено, то текст вирівнюється по лівому краю. Щоб розмістити параграф по центру можна також використовувати тег

…

Ще одним способом розбиття тексту на частини можна назвати горизонтальну лінію. Вона є елементом мови HTML і вставляється в текст за допомогою тегу

---

, де параметри можуть бути наступними:

WIDTH – задає ширину лінії

SIZE – задає товщину лінії

NOSHADE – лінія не матиме тіні.

Коментар.

Коментар міститься між послідовностями

Заголовок.

Для їх створення використовуються теги ...,...,

...

. Розмір 1 відповідає найбільшому шрифту, а розмір 6—

найменшому.

Шрифти

Основні шрифти, які використовуються в HTML можна подати за допомогою наступної таблиці:

Тег	Відповідний тегу шрифт
	Телеграфний курсив
	Курсив
	Жирний шрифт
	Великий шрифт
	Маленький шрифт
або	Перекреслений шрифт
	Підкреслений шрифт

Іншим засобом логічного виділення можна вважати тег .... Зміст тегу звичайно відображається жирним шрифтом. Змінити розмір і колір шрифтів можна за допомогою тегу .... Параметри тегу можуть бути наступними:

SIZE=``value або value'' – задає абсолютний або відносний розмір шрифту. Відносний розмір задається по відношенню до базового розміру. Діапазон можливих значень від 1 до 7.

SIZE - задает размір шрифта.

COLOR – вказує колір для тексту.

Наведемо тепер таблицю з деякими назвами і кодами кольорів.

Українська назва	Англійська назва	Код
Аквамарин	Aqua	#00FFFF
Білий	White	#FFFFFF
Жовтий	Yellow	#FFFF00
Зелений	Green	#008000
Золотий	Gold	#FFD700
Індіго	Indigo	#4B0080
Каштановий	Maroon	#800000
Червоний	Red	#FF0000
Оливковий	Olive	#808000
Помаранчевий	Orange	#FFA500
Пурпуровий	Purple	#800080
Світло-зелений	Lime	#00FF00
Сріблястий	Silver	#C0C0C0
Сірий	Gray	#808080
Сизий	Teal	#008080
Синій	Blue	#0000FF
Ультрамарин	Navy	#000080
Фіолетовий	Violet	#EE80EE
Фуксиновий	Fuchsia	#FF00FF
Чорний	Black	#000000

Під кодом розуміємо RGB- код. Будь-який колір в цьому випадку відображається як комбінація червоного (R), зеленого (G) та синього (B) кольорів, взятих в певних пропорціях.

Значення RGB- коду

Колір як рядковий літерал		Червоний		Зелений		Синій
aliceblue			F0		F8		FF
antlquewhite			FA		EB		07
aqua			00		FF		FF
aquamarine			7F		FF		D4
azure			F0		FF		FF
beige			F5		F5		DC
bisque			FF		E4		C4
black			00		00		00
blanchedalmond			FF		EB		CD
blue			00		00		FF
btueviolet			8A		2B		E2
brown			A5		2A		2A
burlywood			DE		B8		87
cadetbluc			5F		9E		A0
chartreuse			7F		FF		00
chocolate			02		69		1E
coral			FF		7F		50
cornflowecblue			64		95		ED
cornsilk			FF		F8		DC
crimson			DC		14		3C
cyan			00		FF		FF
darkblue			00		00		88
darkcyan			00		8B		8B
darkgoldenrod			B8		86		0B
darkgray			A9		A9		A9
darkgreen			00		64		00
darkkhaki			B0		87		6B
darkmagenta			8B		00		8B
darkofivegreen			55		6B		2F
darkorange			FF		8C		00
darkorchid			99		32		CC
darkred			8B		00		00
darksalmon			E9		96		7A
darkseagreen			8F		BC		8F
darkslateblue			48		3D		8B
darkslategray			2F		4F		4F
darkturquolse			00		CE		D1
darkviolet			94		00		D3
deeppink			FF		14		93
deepskyblue			00		BF		FF
dimgray			69		69		69
dodgerblue			1E		90		FF
firebrick			B2		220		22
floralwhite			FF		FA		F0
forestgreen			22		8B		22
fuchsia			FF		00		FF
gainsboro			DC		DC		DC
ghostwhite			F8		F8		FF
gold			FF		D7		00
goldenrod			DA		A5		20
gray			80		80		80
green			00		80		00
greenyeflow			AD		FF		2F
honeydew			F0		FF		F0
hotpink			FF		69		B4
indianred			CD		5C		5C
indigo			4B		00		82
ivory			FF		FF		F0
khaki			F0		E6		8C
lavender			E6		E6		FA
lavenderblush			FF		F0		F5
lawngreen			7C		FC		00
lemonchiffon			FF		FA		CD
lightblue			AD		D8		E6
lightcoral			F0		80		80
lightcyan			E0		FF		FF
lightgoldenrodyellow			FA		FA		D2
lightgreen			90		EE		90
lightgrey			D3		D3		D3
lightpink			FF		B6		C1
lightsalmon			FF		A0		7A
lightseagreen			20		B2		AA
lightskyblue			87		CE		FA
lightslategray			77		88		99
lightsteelblue			B0		C4		DE
lightyellow			FF		FF		E0
lime			00		FF		00
limegreen			32		CD		32
linen			FA		F0		E6
magenta			FF		00		FF
maroon			80		00		00
mediumaquamarine			66		CD		AA
mediumblue			00		00		CD
mediumorchid			BA		55		D3
mediumpurple			93		70		DB
mediumseagreen			3C		B3		71
mediumslateblue			7B		68		EE
mediumspringgreen			00		FA		9A
mediumturquoise			48		D1		CC
mediumvioletred			C7		15		85
midnightblue			19		19		70
mintcream			F5		FF		FA
mistyrose			FF		E4		E1
moccasin			FF		E4		B5
navajowhite			FF		DE		AD
navy			00		00		80
oldlace			FD		F5		E6
olive			80		80		00
olivedrab			6B		8E		23
orange			FF		A5		00
orangered			FF		45		00
orchid			DA		70		D6
palegoldenrod			EE		E8		AA
palegreen			98		FB		98
paleturquoise			AF		EE		EE
palevioletred			DB		70		93
papayawhip			FF		EF		D5
peachpuff			FF		DA		B9
peru			CD		85		3F
pink			FF		C0		CB
plum			DD		A0		DD
powderblue			B0		E0		E6
purple			80		00		80
red			FF		00		00
rosybrown			BC		8F		8F
royalblue			41		69		E1
saddlebrown			8B		45		13
salmon			FA		80		72
sandybrown			F4		A4		60
seagreen			2E		8B		57
seashell			FF		F5		EE
sienna			A0		52		2D
silver			C0		C0		C0
skyblue			87		CE		EB
slateblue			6A		5A		CD
slategray			70		80		90
snow			FF		FA		FA
sprlnggreen			00		FF		7F
steelblue			46		82		B4
tan			02		84		8C
teal			00		80		80
thistle			D8		BF		D8
tomato			FF		63		47
turquoise			40		E0		D0
violet			EE		82		EE
wheat			F5		DE		B3
white			FF		FF		FF
whitesmoke			F5		F5		F5
yellow			FF		FF0		00
yellowgreen			9A		CD		32

1.3. Таблиці та списки