Створення 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 > є останнім тегом коду і позначає закінчення всього документу. Таким чином, елемент HTML є найзовнішнім і не входить до складу інших елементів, тобто з елементом HTML не пов'язаний жоден з об'єктів, які відображаються у вікні браузера.

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

< HTML >

···

<! -- Тут розміщуються елементи заголовку і основної частини документу -- >

···

 < /HTML >

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

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

< HTML >

<HEAD>

<! -- Тут розміщується заголовок документу -- >

</HEAD>

···

 < /HTML >

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

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

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

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

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

< HTML >

<HEAD>

<TITLE >Назва Web-сторінки</TITLE>

 ···

</HEAD>

···

 < /HTML >

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

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

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

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

< HTML >

<HEAD>

<TITLE >Назва Web-сторінки</TITLE>

 </HEAD>

 <BODY>

 <!- - Зміст документу -->

···

 </BODY>

< /HTML >

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

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

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

Для того, щоб вставити розрив рядка, необхідно скористатися тегом <BR> . Якщо потрібно зробити так, щоб в певному місці текст НЕ МІГ бути розірваним, необхідно написати тег <NOBR>. Для розбиття тексту на параграфи використовується тег <P>ТЕКСТ</P>

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

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

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

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

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

Коментар.

Коментар міститься між послідовностями < !-- текст коментаря -- >

Заголовок.

Для їх створення використовуються теги <Н1>...</H1>,...,

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

найменшому.

Шрифти

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

Тег	Відповідний тегу шрифт
<TT>	Телеграфний курсив
<I>	Курсив
<b>	Жирний шрифт
<big>	Великий шрифт
<small>	Маленький шрифт
<STRIKE> або <S>	Перекреслений шрифт
<u>	Підкреслений шрифт

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

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