Главная Коллекция "Revolution" Программирование, компьютеры и кибернетика Розробка web-сайту

Розробка web-сайту

Основи Web-програмування. Використання мови HTML. Базові елементи HTML: заголовок, назва, тіло документу. Форматування тексту. Вирівнювання тексту та горизонтальна лінія. Таблиці та списки. Створення посилань на документи і файли. Опис створення сайту.

Рубрика	Программирование, компьютеры и кибернетика
Вид	дипломная работа
Язык	украинский
Дата добавления	27.02.2013
Размер файла	446,2 K

посмотреть текст работы

скачать работу можно здесь

полная информация о работе

весь список подобных работ

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Размещено на http://www.allbest.ru

Вступ

Ця робота присвячена мові HTML. За допомогою цієї мови створюються файли з розширенням *. Htm і *. Html, які є Web-сторінками. З них складаються сайти мережі Інтернет.

До роботи прикріплений сайт, як приклад того, що можна створити за допомогою мови HTML.

Вся робота розділена на 2 розділу. Перший розділ повністю присвячений опису основних тегів HTML. В ньому ви знайдете всю необхідну інформацію про те, як створювати прості Web-сторінки. А другий розділ містить опис того, як створювався сайт, прикріплений до цієї роботи. У ньому докладно описані нелегка роботу зі створення сайту.

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

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 - вказує колір для тексту.

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

Таблиця 1 - Назви і коди кольорів

Українська назва	Англійська назва	Код
Аквамарин	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) кольорів, взятих в певних пропорціях.

Таблиця 2 - Значення RGB- коду

Колір як рядковий літерал	Червоний	Зелений	Синій
aliceblue		F0	F8	FF
antlquewhite		FA	EB	07
aqua		00	FF	FF
Продовження таблиці 2 - Значення RGB- коду
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
Продовження таблиці 2 - Значення RGB- коду
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
Продовження таблиці 2 - Значення RGB- коду
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
Продовження таблиці 2 - Значення RGB- коду
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
Продовження таблиці 2 - Значення RGB- коду
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
Продовження таблиці 2 - Значення RGB- коду
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
Продовження таблиці 2 - Значення RGB- коду
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 Таблиці та списки

Таблиці

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

Створюється таблиця за допомогою такої конструкції:

<CAPTION>Заголовок</CAPTION>

<TR >

<TD >

...

</TD>

....

</TR>

</TABLE>

Властивості тегу <TABLE>.

Тег TABLE починає опис таблиці і може мати наступні параметри:

BORDER - визначає товщину рамки таблиці. Якщо вказано нульове значення, то рамка не відображається. Якщо цей параметр не вказаний, його значення вважається нульовим(рамка не відображається).

WIDTH, HEIGHT - вказують розміри таблиці, якщо вони повинні бути чітко заданими.

ALIGN - визначає, як повинна бути вирівняна таблиця: справа (RIGHT), зліва (LEFT) або по центру (CENTER) сторінки.

CELLSPACING - число точок між окремими ячейками в таблиці.

CELLPADDING - число точок між рамкою і змістом ячейки.

За допомогою тегу <TR >...</TR> оформлюються рядки таблиці. Він може мати наступні параметри:

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

VALIGN - використовується для задання вертикального форматування даних в середині ячейок: вони можуть вирівнюватися по верхній (TOP), нижній (BOTTOM) межам, по центру (MIDDLE) або мати загаль-ну базову лінію (BASELINE).

Конкретні ячейки задаються за допомогою тегу <TD >...</TD>, де параметри можуть бути наступними:

WIDTH - задає ширину ячейки.

COLSPAN - визначає, скільки колонок таблиці ячейка буде перекривати.

ROWSPAN - визначає, скільки рядків таблиці ячейка буде перекривати.

NOWRAP - якщо цей параметр вказаний, то зміст ячейок не буде переноситися, для того щоб влізти в ширину ячейки.

BGCOLOR - параметр, який підтримується сучасними браузерами: вказує колір фону ячейки у вигляді RGB-триплету або символьного іме-ні.

Ще один тег для для оформлення ячейок таблиць- тег <TH>...</TH> - потрібен для задання ячейок-заголовків. Він в усьому співпадає з тегом <TD>, але на відміну від нього, зміст виділяється жирним шрифтом і розміщується по центру.

Якщо потрібно задати заголомок УСІЄЇ таблиці, то використовуєть-ся тег <CAPTION >...</CAPTION>. Він має бути в середині тегу <TABLE>, але поза описом ячейок. У нього є лише один параметр:

ALIGN - вказує положення заголовку: він може бути в верхній (TOP) або нижній (BOTTOM) частині таблиці.

Списки

Списки в HTML бувают двох видів: впорядковані (пронумеровані)і невпорядковані (непронумеровані). Відрізняються вони лише способом оформлення. Перед пунктами невпорядкованих списків звичайно ставлять символи-булети(bullets), наприклад, точки, ромбики і т.п., в той час, як пунктам впорядкованих списків передують їх номера.

Впорядкований (пронумерований) список.

В HTML список складається з тегу-контейнеру списку, який визначає його тип і стандартних тегів <LI>, що передують кожному пункту списку. Коли броузер зустрічає тег впорядкованого списку, він послідовно нумерує пункти списку: 1, 2, 3 і т. д. Впорядкований список відкривається тегом <OL>, а кожен його пункт починається стандартним тегом <LI>. Для створення заголовку списку використовується спеціальний тег <LH>. Список закриваєтся тегом </OL>. Відкриваючий і зачиняючий теги забезпечують переведення рядка до і після списку, відділяючи таким чином список від решти тексту, тому тут немає необхідності використовувати теги абзацу <P>. Впорядковані списки дозволяють вкладення одне в одного.

Атрибути тегу <OL>.

Вони дозволяють встановлювати вид маркерів елементів списку, а також задавати початковий маркер списку. Наприклад:

-- TYPE=А - встановлює маркер у вигляді прописних літер;

-- TYPE=а -- встановлює маркер у вигляді малих прописних літер;

-- TYPE=I - маркер у вигляді великих римських цифр;

-- TYPE=i -- маркер у вигляді маленьких римських цифр;

-- TYPE=1 -- маркер у вигляді арабських цифр;

Невпорядкований (маркирований) список.

Це список, у якому відношення між пунктами невизначені. Маркирований список замість буквенної або числової нумерації передбачає використання різних символів, які називаються маркерами. Список розміщується всередині контейнера <UL>. Браузер створює автоматичний доступ для вкладених списків.

Можна встановити вид маркерів в невпорядкованих списках за допомогою атрибута TYPE, який може набувати трьох значень: DISC, SQURE, CIRCLE. Тег <UL> має атрибут COMPACT, який дозволяє виводити список в більш компактному вигляді.

Меню

Список, який визначається <MENU> виводиться більшістю браузерів тими ж шрифтами і в тому ж стилі, що і невпорядкований список. Як і попередні типи списків, список-меню автоматично відокремлюється від решти тексту кодами переведення рядка.

Список типу <DIR>

Елемент типу DIR схожий на елемент MENU і використовується для ідентифікації певної частини документу. Список контейнера, що по-чинається тегом <DIR>, виводиться броузером аналогічно невпорядко-ваним спискам. Довжина кожного пункту цього типу списків обмежена 24 символами. Список потребує зачиняючого тегу </DIR>.

Список визначень.

Це особливий вид списків HTML. Вони подають текст у вигляді словникової статті, що складається з певного терміну та абзацу, який розкриває його значення. Елемент списку визначень DL є контейнером і забезпечує відокремлення списку від іншого тексту порожніми рядками. Всередині контейнеру тегом <DТ> помічається термін, що визнача-ється, а тегом <DD> -- абзац з його визначенням. Теги <DT> и <DD> не є контейнерами. Текст після тегу <DT> повинен міститися в одному ряд-ку. Якщо ця вимога не виконана або якщо рядок виходить за межі вікна браузера, то відбувається переведення рядку , але без відступу. Текст, що стоїть за тегом <DD> виводиться окремим абзацом з відступом вниз на один або два рядки відносно цього терміну.

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

Посилання складається з двох частин. Перша з них - це те, що ми бачимо WEB-сторінці; вона називається вказівник (anchor). Друга частина, яка дає інструкцію браузеру -- адресна частина посилання (URL - адресою).

Вказівники бувають 2 типів -- текстові та графічні. Текстовий вказівник--це слово або слова, що підкреслені прямою лінією. Колір вказівника може регулюватися автором або настройками програми перегляду. Текстові вказівники можуть бути безпосередньо частинами тексту, наприклад: <A HREF=“vero.html”> Привіт </A> або бути списком посилань, з яких потрібно зробити вибір. Графічні не підкреслюються і не виділяються кольором, проте навколо них можна зробити рамку. Багато авторів HTHL-документів використовують графічні вказівники у вигляді кнопок, характерних для Windows. Такі кнопки можна досить часто побачити на початкових сторінках Web-сайтів. Вони слугують свого роду змістом сайту і ведуть до різних сторінок, наприклад: <HREF=“whatsnew.htm”> <IMG SRC=”whatsnew.gif” BORDER=0> </A>.

Використання зображення у якості посилання.

Для використання зображення в якості посилання на інший документ, достаточньо включити ім'я файлу зображення в тег <A>:

Тег BASE

Вказує базову адресу даного документа (URL), який стане відправною точкою для розрахунку відносних адрес всередині документу. Елемент не має кінцевого тегу. Обов'язкова наявність хоча б одного з параметрів. Параметри:

HREF - визначає базову адресу (URL) даного документу. TARGET - визначає ім'я фрейму, яке буде використовуватися в гіперпосиланнях по замовчуванню. Пример:

<HEAD>

<TITLE>Руководство по эксплуатации</TITLE>

</HEAD>

...

<A HREF="../list.html">Список</A>

...

Створення посилань на документи і файли

Потрібно повідомити браузеру, який елемент сторінки є вказівником, і вказати адресу документа, на який робите посилання. Обидві дії виконуються за допомогою тегу <A>. Тег <A> має єдиний атрибут HREF, в якому розміщується URL - адреса. Тег є контейнером, тобто потребує </A>. Атрибут HREF вказує на абсолютну адресу сторінки. Вказівником можуть бути слова, які браузер виділяє підкресленням та кольором. Текст поза контейнером </A> не є вказівником і не буде підкресленим. Коли читач клікає мишкою на цих словах, браузер загружає його сторінку.

Тег LINK

Елемент LINK описує взаємозв'язок документу з іншими документами на сайті, вказуючи його місце в ієрархічній структурі сайту. Елемент не має кінцевого тегу. В заголовку може міститися декілька елементів LINK. Параметри:

HREF-- визначає URL об'єкту.

REL--визначає тип взаємозв'язку даного документу з об'єктом, який визначений параметром HREF. Можливі значення:

Stylesheet-- вказує на файл, який містить таблицю стилів (CSS) для даного документу. Браузер загрузить css-файл з вказаної в параметрі HREF адреси та застосує його до даного документу;

home - вказує на головну сторінку вашого сайту;

toc, contents--вказують на файл, який містить зміст даного документу;

index - вказує на файл, який містить інформацію для індексного пошуку в даному документі;

glossary--вказує на файл, який містить перелік термінів,що відносяться до даного документу;

up, parent--вказує на "батьківську" сторінку (документ, що стоїть на сходинку вище у ієрархічній структурі вашого сайту);

child-- вказує на "дочірню" сторінку (документ, що стоїть на сходинку нище у ієрархічній структурі вашого сайту);

next - вказує на наступну сторінку у послідовності документів (напр. наступну сторінку електронного каталогу, документації або словника);

previous--вказує на попередню сторінку в послідовності документів;

last, end-- вказує на останню сторінку в послідовності документів;

first-- вказує на першу сторінку в послідовності документів;

help - вказує на сторінку з підказкою.

TYPE - визначає MIME-тип для об'єкту, вказаного в параметрі HREF.

Приклад:

<HEAD>

<TITLE>Елемент DIV</TITLE>

</HEAD>

Додаткові відомості про тег А.

1)Елемент A не може бути вкаледеним сам у себе, тобто неможливі конструкції:

Перший лінк

<A HREF="link2.html">Другий лінк</A>

Продовжуємо перший лінк

</A>

2) За допомогою елементу BASE можна вказати значення TARGET для всех гіперпосилань в даному документі.

1.5 Основи css

Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) -- спеціальна мова, що використовується для відображення сторінок, написаних мовами розмітки даних. Найчастіше CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до інших видів XML-документів.

Специфікації CSS були створені та розвиваються Консорціумом Всесвітньої мережі.

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

CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки -- розділення змісту сторінки (даних) та їх візуальної презентації.

CSS використовується авторами та відвідувачами веб-сторінок для того щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з головних переваг -- можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS).

Таке розділення може покращити сприйняття та доступність контенту, забезпечити більшу гнучкість та контроль за відображенням контенту в різних умовах, зробити контент більш структурованим та простим, прибрати повтори та ін. CSS також дозволяє адаптувати контент до різних умов відображення (на екрані монітора, мобільного пристрою (КПК), у роздрукованому вигляді, на екрані телевізора, пристроях з підтримкою шрифту Брайля або голосових броузерах та ін.)

Один і той самий HTML або XML документ може бути відображенний по-різному в залежності від використаного CSS.

2. Опис створення сайту

Як приклад створення Web-документу наведемо наступний алгоритм.

Cторінка--“index.html” має наступну структуру:

<title>Radio</title>

</head>

<tr>

<table>

<tr>

</tr>

</table></td>

</tr>

<tr>

<table>

<tr>

<tr>

<table>

<tr>

<center><h6>RADIO- PARAD <font color="red"> RADIO FM </font></h6></center>

</center>

</div></td>

</tr>

</table></td>

</tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

</tr>

</table></td>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

Як виглядає ця web-сторінка в браузері:

Документ CSS--“ style.css ” має наступну структуру:

body{margin:0; padding:0; background:url(images/tl_fll.jpg) top repeat-x #FFFFFF;}

table, td{border-collapse:collapse;}

table, td, img{border:0;}

form, td{margin:0; padding:0;}

td, div{font:10px/12px Arial, helvetica, sans-serif; color:#0a0c0e; vertical-align:top; text-align:left; padding:0; margin:0;}

.clear{clear:both; line-height:0px;}

input, textarea, select{font:10px Arial, helvetica, sans-serif; color:#0a0c0e; padding:2px 0 0 2px; text-transform:none; border: 1px solid #0081db; background:0; vertical-align:middle;}

ul{list-style:none; line-height:0; padding:0; margin:0}

.tar{text-align:right;}

.menu_left{width:214px; height:190px; background:url(images/menu_left_bg.jpg) top left no-repeat; padding:24px 0 0 54px;}

.logo{width:234px; background:url(images/logo_bg.jpg) top left no-repeat;}

.logo img{margin:61px 0 0 36px;}

.menu_right{width:264px; background:url(images/menu_right_bg.jpg) top left no-repeat; padding-top:24px;}

.menu_right img{margin-right:32px;}

.mp{width:372px; height:610px; background:url(images/mp_bg.jpg) top left no-repeat;}

b{color:#0081db; font-size:11px;}

strong{font-size:11px;}

b a{color:#0081db; font-size:11px; text-decoration:underline;}

b a:hover{text-decoration:none;}

a{color:#0081db; text-decoration:underline; font-size:11px;}

a:hover{text-decoration:none;}

li a{color:#0081db; line-height:14px; text-decoration:underline;}

li a:hover{text-decoration:none;}

span{color:#0081db;}

.content{height:542px; padding-bottom:60px;}

.cnt{width:367px; height:419px; background:url(images/cnt_fll.gif) top left repeat-y;}

.cnt .top{background:url(images/cnt_top.jpg) top left no-repeat; padding:0 30px 1px 26px; width:367px; height:419px;}

.cnt_bot{background:url(images/cnt_bot.gif) bottom left no-repeat; height:37px;}

#form div{height:32px;}

#form input{width:140px; height:22px;}

#form textarea{width:141px; height:118px; overflow:auto; margin-bottom:10px;}

.footer{width:394px; color:#8d93a2; text-align:center;}

.footer a{color:#8d93a2; text-decoration:none;}

.footer a:hover{text-decoration:underline;}

Висновки

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

Web-сторінка - це обличчя тієї фірми, того закладу, людини, яка розмістила її в WWW. Саме тому сьогодні Web-дизайну приділяється така велика увага, оскільки від нього безпосередньо залежить популярність того чи іншого інформаційного ресурсу Сітки. Недарма нині професія Web-дизайнера є однією з економічно найвигідніших професій.

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

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

Список використаної літератури

1) Рамський Ю.С., Іваськін І.С., Ніколаєнко О.Ю. Вивчення Web-програмування в школі. Навчальний посібник. Тернопіль:Навчальна книга-Богдан,- 2004.- 200с.

2) Гаевский А.Ю., Романовский В.А. Самоучитель по созданию Web-страниц: HTML, JavaScript и Dynamic HTML.-К.: А.С.К.,-2002.- 472с.

3) Гончаров А. Самоучитель HTML.Питер.-1999.-239с.

4) Будилов В.А. Практические занятия по HTML. Краткий курс. Санкт-Петербург: Наука и техника,-2001.-256с.

5) Смит Бад, Бибек Артур. Создание Web-страниц для «чайников».:Пер. с англ. :Уч. Пос.М.: Издательский дом «Вильямс»,-2001.-256с.

6) www.webschool.narod.ru

Размещено на Allbest.ru

...

дипломная работа "Розробка web-сайту" скачать

Подобные документы

Створення Web-документів. Використання мови HTML
Основи Web-програмування. Використання мови HTML. Базові елементи HTML. Форматування тексту. Вирівнювання тексту та горизонтальна лінія. Значення RGB- коду. Таблиці та списки, посилання та робота з ними. Створення посилань на документи і файли.

курсовая работа [40,9 K], добавлен 12.02.2009
Розробка електронного підручника на мові HTML
Історія розвитку та теорія Web-дизайну. Ефективність програмно-апаратних засобів. Створення Web-сторінки за допомогою мови HTML. Розробка концептуальної моделі підручника. Структура HTML документу, його інформаційних потоків. Форматування тексту, фрейми.

курсовая работа [1,3 M], добавлен 29.05.2012
Мова PHP. Розробка сайту для туристичного агентства
Поняття мови РНР - скриптової мови програмування, яка була створена для генерації HTML-сторінок на стороні веб-серверу. Можливості і використання PHP, її переваги і недоліки. Розроблення сайту для турагенства за допомогою гіпертекстової розмітки HTML.

контрольная работа [11,2 M], добавлен 21.04.2015
Методи оцінювання якості web-ресурсів
Розробка сайту-візитки компанії, яка надає послуги в ІТ-галузі та оцінювання створеного сайту. Структурне розположення усіх html, css—файлів та зображень. Створення текстового документу з іменем index та розширенням .html. Тестування сторінки в браузері.

курсовая работа [1,9 M], добавлен 25.06.2015
Створення простої web-сторінки
Вступ в мову HTML. Структура HTML-документа. Встановлення кольору фону та тексту, створення заголовка. Графіка і посилання на WEB-сторінці, вставка малюнків. Оформлення таблиць та форматування комірок. Комплексна лабораторна робота "Створення HTML-файла".

методичка [147,3 K], добавлен 15.06.2009
Створення веб-сайту засобами HTML
Проектування технологій навчання з теми "Створення веб-сайту засобами HTML". Організація та методика проведення лекційного, лабораторного та практичного (семінарського) заняття. Розробка дидактичних матеріалів до інноваційних технологій навчання.

курсовая работа [2,3 M], добавлен 21.12.2013
Розробка сайту "Портал Новин" як віртуальна подія в інформаційному суспільстві
Види сайтів та характеристика сайту-візитки, сайту-магазину, новинного сайту та соціальних мереж. HTML та CSS як основа шаблону сайту та стилю оформлення. Розробка структури та вибір дизайну порталу новин, його програмний код та вигляд у браузері.

дипломная работа [2,4 M], добавлен 20.10.2013
Електронні публікації
Принципи створення WEB-сторінок. Правила і програми для створення електронних публікацій. Гіперпосилання. Використання JAVA-скриптів при створенні HTML документу. Графіка у HTML-документах. Утворення та відправлення повідомлень електронної пошти.

реферат [177,1 K], добавлен 19.10.2007
Редагування та форматування тексту в Word
Видалення, додавання та упорядкування тексту. Установка позицій символів і міжсимвольної відстані. Зміна регістру символів. Вставка символів та форматування абзаців. Вибір теми та шаблону. Створення документу з кількох колонок. Створення буквиці у тексті.

реферат [804,0 K], добавлен 09.08.2011
Створення сайту дистанційного навчання
Створення дистанційного навчального курсу за темою "Граматика англійської мови". Особливості використання каскадних таблиць стилю CSS. Функціональні можливості мови розмітки даних HTML. Інструкція для користувача, вимоги до програмного забезпечення.

курсовая работа [2,2 M], добавлен 06.06.2013
Створення Інтернет-ресурсу для інформаційного забезпечення пілотного інвестиційного проекту "Агрогород. Луганск"
Мова розмітки гіпертекстових сторінок HTML. Каскадні таблиці стилів CSS. Розробка інформаційного Web-сайту: меню навігації, структура та інтерфейс сайту. Тестування, впровадження та тестування розробленого проекту. Безпека умов праці при використанні ПК.

дипломная работа [1,3 M], добавлен 20.05.2012
Розробка сайту сприяння працевлаштуванню
Сайт як інформаційна одиниця мережі Інтернет. Просування сайту за допомогою дошок оголошень. Створення web-сторінок за допомогою мови HTML. Послуги, які надають web-ресурси з пошуку роботи. Пошукові системи, сайти та портали з працевлаштування.

курсовая работа [59,3 K], добавлен 02.10.2014
Механізм створення динамічних Web-сторінок
Розробка web-сайту "Творча майстерня SakhNYAsha design studio". Сучасні технології розробки Web-додатків. Наповнення сайту інформацією та елементами. Структурування інформації та її стилізація. Введення елементів HTML 5, контроль відповідності стандартам.

курсовая работа [992,7 K], добавлен 30.01.2014
Створення сайту для викладачів інформатики та комп’ютерних дисциплін
Поняття про сайт, огляд його основних функцій і класифікація видів. Розробка сайту з використанням мов HTML, PHP, CSS та з базою даних MySQL, готового для розміщення в інтернеті. Засоби полегшення спілкування та обміну інформацією між викладачами.

дипломная работа [1,6 M], добавлен 26.08.2014
Інструментальна система створення електронних підручників
Розрахунок собівартості інструментальної системи створення електронних підручників. Вибір технології та мови програмування. Загальна характеристика програми і принцип роботи. Вибір мови програмування. Опис тегів, які підтримуються HTML-редактором.

дипломная работа [112,7 K], добавлен 04.06.2010
Розробка інформаційного веб-сайту з використанням мови програмування PHP
Структура інформаційної системи веб-сайту. Узагальнена архітектура кластерної структури. Вимоги до хостингу. Встановлення та налаштування програмного забезпечення. Функція перенаправлення посилань. Система керування базою даних основного кластера.

дипломная работа [871,3 K], добавлен 02.07.2015
Використання комп'ютерної графіки під час розробки сайту міста Жмеринки
Розробка динамічних та статичних зображень для сайту за допомогою відеоредактора Adobe After EffectCS6 та графічного редактора Adobe Photosop CS6. Розробка структури сайту. Багатоваріантний аналіз розв’язку задачі. Створення анімованого логотипу.

курсовая работа [1,8 M], добавлен 07.12.2014
Розробка web-сайту "Персональний сайт трейдера"
Особливості програмування web-орієнтованих інформаційних систем. Етапи створення web-сайту, вибір домену та хостингу. Опис програмного та апаратного середовища функціонування об’єкта проектування. Аналіз і вибір засобів для проектування web-додатків.

курсовая работа [11,2 M], добавлен 03.06.2019
Електронний щоденник загальноосвітньої школи
Основи використання інформаційних технологій у галузі освіти. Створення електронного щоденника мовою програмування. Вибір середовища розробки. Установка, налаштування та проектування шаблону програми. Наповнення сайту інформацією та створення бази даних.

магистерская работа [3,9 M], добавлен 25.02.2014
Розробка сайту інтернет-портфоліо
Дослідження та аналіз об’єкту програмування. Основні архітектурні риси JavaScript. Переваги CSS розмітки. Структура HTML-документа. Вимоги до апаратного та програмного забезпечення. Опис програми та її алгоритмів. Оцінка вартості програмного продукту.

дипломная работа [1,0 M], добавлен 01.09.2016

Другие документы, подобные "Розробка web-сайту"

весь список подобных работ

скачать работу можно здесь

сколько стоит заказать работу?

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.