Міністерство освіти і науки України
Національний педагогічний університет імені М.П.Драгоманова
Фізико-математичний факультет
Кафедра основ інформатики та обчислювальної техніки
Курсова робота з інформатики на тему:
"Створення 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 |
... -узла необхідно залишити ім'я і місце знаходження вузла. Потім необхідно підтвердити вибір шаблона натисненням кнопки Ок. В робочому вікні FrontPage2003 з'явиться представлення Папки, яке показує файлову структуру створеного Web-вузла. В ньому знаходиться один файл Index. htm для відображення домашньої сторінки і дві пусті папки для збереження файлів, створених в процесі створення Web-вузла. 4. ...
... в даній роботі, була опробована й досліджена в реальних умовах моєї професійної діяльності й показала свою працездатність і ефективність. 3. Розробка системи керування та актуалізації інформації web-сайту національного оператора Енергоринка 3.1 Вибір інструментарію для створення web-сайту та системи керування Перед тим, як безпосередньо перейти до створення Web-сайту Національного ...
... · пошуковий механізм, який користувачі використовують як інтерфейс для взаємодії з базою даних. Засоби пошуку типу агентів, павуків, кроулерів і роботів використовуються для збору інформації про документи, які знаходяться в мережі Інтернет. Це спеціальні програми, які займаються пошуком сторінок в мережі, збирають гіпертекстові посилання з цих сторінок і автоматично індексують інформацію, яку ...
... та початкові домени різних країн. Послідовність доменів розділяють крапкою. Наприклад, univer.Lviv.ua – кореневий рівень – ua (Україна), проміжковий рівень – Lviv, нижній рівень- univer.Адреса користувача мережі Internet складається з двох чатин: його власного індетифікатора та доменного імені його комп’ютера, які розділяються знаком @. Наприклад, pavlo@letz..lviv.ua, де pavlo- власний індетифі ...
0 комментариев