Створення HTML-сторінок

1.doc (1 стор.)
Оригінал






Московського державного відкритого університету


по курсу «WEB - ПРОГРАМУВАННЯ»


Виконала: студентка 5 курсу

спеціальність 210100

шифр 602654

Токарєвої О.П.

Перевірив:
Москва

2009
Опис проекту

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

^ HTML-документи можна писати в звичайному «Блокноті» і зберігати з розширенням. Htm або. Html. Більш потужні редактори типу «Word» для цього не підходять!

Проект складається з двох HTML-сторінок, які містять інформацію про морських тварин - дельфінів, і мають посилання один на одного.

На першій сторінці (Text.html) розміщений гіпертекст, а також два посилання, на початку і в кінці документа, у вигляді текстового напису та іконки, на другу сторінку проекту (Images.html) з фотографіями.

Для розмітки документа застосовуються засоби мови HTML:

▫ <TITLE> ... </ TITLE> - тег заголовка, що дає назву всьому документу;

▫ Параметри тега <BODY> ... </ BODY>:

BGCOLOR = "F0F8FF" - визначає колір фону документа;

VLINK = "teal" - визначає колір не переглянутої посилання;

ALINK = "EE82EE" - визначає колір переглянутої посилання;

▫ Атрибут тега <font> ... </ font> - шрифт:

color = "# 4B0082" - визначає колір тексту документа;

▫ <H2 align="center"> ... </ H2> - тег заголовка статті з вирівнюванням по центру, де 2 - розмір шрифту;

▫ <em> ... </ em> - (EMphasis) тег виділення важливих фрагментів тексту;

▫ <br> - тег перекладу на новий рядок без створення абзацу;

▫ <HR> - (Horizontal Rule) тег вставки горизонтальної розділової лінії з атрибутами:

width = "80%" - визначає довжину лінії у відсотках від ширини вікна;

size = "2" - визначає товщину лінії в пікселях;

align = "center" - визначає вирівнювання лінії по центру;

color = "# 0000FF" - визначає колір лінії;

▫ <p> ... </ p> - тег створення нового абзацу з атрибутом:

align = "justify" - визначає вирівнювання тексту по ширині вікна;

▫ <i> ... </ i> - тег виділення тексту курсивом;

▫ <b> ... </ b> - тег виділення тексту напівжирним шрифтом;

▫ <A> ... </ A> - тег вставки покажчика посилання з параметрами:

href = "Images.html" - визначає URL-адресу файлу, на який вказує посилання;

title = "ФОТО" - визначає текст підказки, яка буде з'являтися при наведенні курсора на гіперпосилання;

▫ <IMG> - тег вставки зображення в ^ HTML-документ з параметром:

src = "icon.jpg" - визначає ім'я та URL-адресу файлу з графічним зображенням;

Лістинг (Text.html)

<HTML>
<HEAD>

<TITLE> Дельфіни </ TITLE>

</ HEAD>
<BODY BGCOLOR="F0F8FF" VLINK="teal" ALINK="EE82EE">
<font color="#FF00FF">

<H2 Align="center"> Дельфіни </ H2>

</ Font>
<em>

Всією шкірою, відчуваючи сіль вітрів, <br>

Дельфіни перестрибували хвилі. <br>

І спинами торкаючись хмар, <br>

Грали з сонячною пилком привільно ...

</ Em>
<HR Width="80%" size="2" align="center" color="#0000FF">
<A Href="Images.html" title="ФОТО"> <IMG src="Image/icon.jpg"> </ A> <br>

<A Href="Images.html"> Подивитися Фотографії </ A>
<font color="#4B0082">
<p align="justify"> Зустрічі з дельфінами залишають у кожного з нас незабутні враження. Блищачи пружними тілами, схожими на торпеди, дельфіни вистрибують з води і можуть подовгу супроводжувати прогулянкові катери і яхти. Раптом у різних місцях, ніби згідно нечутному сигналу, вони парами, трійками і цілими групами вистрибують на метр-два з води, описують плавну дугу, і врізаються у воду, щоб через секунду знову зметнутися вгору.
<p align="justify"> Їх блискучі тіла вражають ідеально обтічної формою. Морда витягнута в тісний рот, ніздрі злиті в одне "дихало", з якого тварина може вивергати фонтан бризок заввишки 1-1,5 м.
<p align="justify"> Найпоширеніші дельфіни <i> Афаліни </ i> у розмірі досягають 2,5-3 м., а їх вага може перевищити 200 кг. Дивно, як при таких габаритах дельфін розвиває велику швидкість. Найшвидші з них розвивають швидкість більше 50 км / годину і здатні обігнати корабель, а в хвилину особливої ​​небезпеки навіть більше. Живуть <i> афаліни </ i> до 25 років, триматися невеликими групами, харчуються рибою і безхребетними. За їжею цей дельфін може пірнати на глибину до 150 м., перебуваючи під водою 15 хвилин. Після шлюбного справно, а воно настає в теплу пору року, у самки дельфіна зазвичай народжується одне дитинча. Сьогодні фахівці налічують в Чорному морі приблизно 36 тисяч особин дельфінів.
<p align="justify"> Дельфіни - це найдрібніші китоподібні. Вони те саме і величезним <i> синім китам </ i>, і зубастим <i> кашалотам </ i>. Найбільш близькі родичи дельфінів - з того ж сімейства <i> білухи </ i>, поширені на півночі Росії, а також в Охотському і Японських морях. Довжиною вони бувають до 6 метрів, а вагою - близько тонни. Ці тварини тримаються зграями до 1000 одиниць. Новонароджені <i> білухи </ i> темно-сині і тільки після трьох років стають чисто білими. На півночі їх раніше промишляли у великих кількостях.
<p align="justify"> Дельфіни харчуються великої та дрібної рибою, молюсками, у тому числі і головоногими. Родючий дельфінів - великих <i> косаток </ i>, що досягають 5-10 метрів в довжину і ваги 8 тонн, люди називають <b> "китами-вбивцями" </ b>. Збираючись у зграї чисельністю до 200 особин, ці хижаки можуть напасти навіть на гіганта-кита, вириваючи гострими зубами шматки його м'яса. Люди нескінченно боялися і ненавиділи косаток. У наслідок виявилося, що ці "люті" звірі чудово звикають до людини, і в океанаріумі показують трюки не гірше, ніж ручні дельфіни. Просто у них такий спосіб полювання, схожий, як у вовків або у диких собак. Адже китоподібні - теж звірі, а не риби. Перша ознака цього - хвіст, розташований горизонтально. Але найголовніше і незаперечно - вони дихають повітрям і вигодовують дитинчат молоком. Вчені, вважають, що предки морських ссавців раніше жили на суші.
<p align="justify"> Дельфіни - високорозвинуті морські мешканці з найвищим для тварин інтелектом, чудово піддаються дресируванню і охоче вступають в контакт з людиною. Кількість звивин головного мозку дельфіна навіть більше, ніж у людини. Для дельфінів характерні допитливість, грайливість і доброзичливість.
<p align="justify"> Образ дельфінів увійшов до легенди і сказання багатьох народів світу. Були відомі випадки, коли дельфіни допомагали рятувати потопаючих в море людей. Дельфіни допомагають рибалкам заганяти рибу в мережі. А дельфін на кличку <i> Пелорус Джек </ i>, прозваний так англійськими моряками, протягом 30 років проводив суду через небезпечний протоку в Новій Зеландії, як справжній штурман. На його захист був виданий особливий закон.

<br> Був випадок, коли одне пасажирське судно зазнало аварії, і що залишилися в живих люди з жахом побачили, що їх оточує низка акул. Але раптом з відкритого моря примчала зграя дельфінів. Вони розігнали акул і навіть допомогли вибратися з води змученому людям, поки не прийшла допомога. Адже й самі вони дихають повітрям і часто допомагають пораненому побратимові виринути з глибини. Може бути, дельфіни просто беруть людей за "побратимів"?

</ Font>
<HR Width="50%" size="2" align="left" color="#000000">

<font color="#000000">

ЧОРНИЙ ГУМОР <br>

<em> А ви знаєте, чому всі люди, врятовані дельфінами, як один розповідають, що дельфіни штовхали їх до берега? <br>

Тому що всі ті, кого дельфіни штовхали від берега, потонули!

</ Em>

</ Font>

<HR Width="50%" size="2" align="left" color="#000000">
<font color="#4B0082">

<p align="justify"> Вчені встановили, що дельфіни за допомогою писку видають безліч різних звуків. Через спеціальні прилади ці сигнали вдалося не тільки почути, а й записати на плівку. Запас "слів" у дельфінів досить великий. Вони можуть передавати один одному складну інформацію. Їх вчать допомагати фахівцям при підводних водолазних роботах: подавати інструменти, доставляти листи і "посилки". Це вже не фокуси, а справжнє допомогу.

<br> Зовсім маленьких, новонароджених діточок навчають плавати в одному басейні з дельфінами, і ті дбайливо підтримують малюків у воді, ніби власних дельфінят. Така дружба з сильними, добрими тваринами виявляється досить доброчинної як для дітей, так і для дорослих.

<br> Зрозумівши розумність дельфінів, люди стали більше їх вивчати, намагаючись знайти з ними "спільну розмову". І можливо, ми ще дізнаємося чимало цікавого про цих граціозних тварин, які водяться у всіх морях світу. </ P>

</ Font>
<HR Width="80%" size="2" align="center" color="#0000FF">
<A Href="Images.html" title="ФОТО"> <IMG src="Image/icon.jpg"> </ A> <br>

<A Href="Images.html"> Подивитися Фотографії </ A>
</ BODY>

</ HTML>






На другій сторінці (Images.html) знаходиться галерея фотографій Дельфінів, розміщених в комірках таблиці, а також два посилання, на початку і в кінці документа, на першу сторінку проекту з гіпертекстом (Text.html) у вигляді текстових написів, також поміщених в осередках таблиці. В якості фонового зображення використаний графічний файл Water.jpg.

Для розмітки документа застосовуються засоби мови HTML:

▫ <TITLE> ... </ TITLE> - тег заголовка, що дає назву всьому документу;

▫ Параметри тега <BODY> ... </ BODY>:

background = "Image / Water.jpg" - визначає фонове зображення документа;

VLINK = "teal" - визначає колір не переглянутої посилання;

ALINK = "EE82EE" - визначає колір переглянутої посилання;

▫ <H2 align="center"> ... </ H2> - тег заголовка статті з вирівнюванням по центру, де 2 - розмір шрифту;

▫ <HR> - (Horizontal Rule) тег вставки горизонтальної розділової лінії з атрибутами:

width = "80%" - визначає довжину лінії у відсотках від ширини вікна;

size = "2" - визначає товщину лінії в пікселях;

align = "center" - визначає вирівнювання лінії по центру;

color = "# 0000FF" - визначає колір лінії;

▫ <TABLE> ... </ table> - тег створення таблиці з атрибутом:

align = "center" - визначає розташування таблиці по центру документа;

▫ <tr> ... </ tr> - (Table Row) тег, що визначає рядок таблиці;

▫ <td> ... </ td> - (Table Data) тег, що визначає клітинку в рядку таблиці з атрибутом;

align = "center" - визначає вирівнювання тексту по центру комірки;

▫ Атрибут тега <Font> ... </ Font> - шрифт:

size = "6" - визначає розмір шрифту;

▫ <IMG> - тег вставки зображення в ^ HTML-документ з параметром:

src = "Image/img1.jpg" - визначає ім'я та URL-адресу файлу з графічним зображенням;

▫ <A> ... </ A> - тег вставки покажчика посилання з параметром:

href = "Text.html" - визначає ^ URL-адресу файлу, на який вказує посилання;

Лістинг (Images.html)

<HTML>
<HEAD>

<TITLE> Фотографії дельфінів </ TITLE>

</ HEAD>
<BODY Background="Image/Water.jpg" VLINK="#3333FF" ALINK="#800080">

<H2 Align="center"> Фотогалерея </ H2>
<HR Width="80%" size="2" align="center" color="#0000FF">
<TABLE Align="center">

<tr>

<td align="center"> <Font size="6"> <A href="Text.html"> Опис </ A> </ Font> </ td>

<td> <img src="Image/img2.jpg"> </ td>

<td> <img src="Image/img3.jpg"> </ td>

</ Tr>

<tr>

<td> <img src="Image/img4.jpg"> </ td>

<td> <img src="Image/img5.jpg"> </ td>

<td> <img src="Image/img6.jpg"> </ td>

</ Tr>

<tr>

<td> <img src="Image/img7.jpg"> </ td>

<td> <img src="Image/img8.jpg"> </ td>

<td> <img src="Image/img9.jpg"> </ td>

</ Tr>

<tr>

<td> <img src="Image/img1.jpg"> </ td>

<td> <img src="Image/img10.jpg"> </ td>

<td align="center"> <Font size="6"> <A href="Text.html"> Опис </ A>

</ Font> </ td>

</ Tr>

</ Table>
<HR Width="80%" size="2" align="center" color="#0000FF">
</ BODY>

</ HTML>



ЛІТЕРАТУРА
1. Підручник html. - http :/ / v - vb. com / index. php

2. Підручник з JavaScript. - Http :/ / www. Html - consult. Net /

3. Підручник html. - Http://on-line-teaching.com/html/lsn012.html



Навчальний матеріал
© uadoc.zavantag.com
При копіюванні вкажіть посилання.
звернутися до адміністрації