МОУ Гімназія № 17
Сайт «Дикі кішки»
Атестаційна робота з інформатики та ІКТ
Корольов 2007
План:
1. Введення
2. Інтернет, WWW.
3. Створення Web-сторінки за допомогою мови HTML
Структура HTML документа
Форматування тексту
4. Зовнішній вигляд проекту
Фрейми
Скрипти
5. Особливості оформлення
Галерея фотографій
Цікаві рішення
6. Висновок
7. Список використаної літератури
1. ВСТУП
В даний час люди все частіше і частіше звертаються з різних причин до такого джерела інформації як Глобальна Комп'ютерна Мережа (World Wide Web).
World Wide Web - глобальна комп'ютерна мережа на сьогоднішній день містить мільйони сайтів, на яких розміщена всіляка інформація. Люди отримують доступ до цієї інформації за допомогою використання технології Internet.
Інтернет став невіддільною частиною сучасної цивілізації. Стрімко вриваючись у сфери освіти, торгівлі, зв'язку, послуг, він породжує нові форми спілкування та навчання, комерції та розваг.
Internet - це найбільша світова комп'ютерна мережа. Тепер Internet має приблизно 150 мільйонів користувачів більш ніж в 50 країнах. WWW доступний в основному через Internet; але кажучи WWW і Internet ми маємо на увазі не одне і те ж. WWW можна віднести до внутрішнього змісту, тобто це якийсь абстрактний мир знань, в той час як Internet є зовнішньою стороною глобальної мережі у вигляді величезної кількості кабелів і комп'ютерів.
У даному рефераті я розглянула те, що являє собою Веб - сайт в цілому, а так само докладно описала те, як і за допомогою яких засобів, додатків і програм я його створювала.
Тема, обрана мною для висвітлення в своєму проекті, на мій погляд, дуже цікава. Багато людей, як і я, люблять диких кішок і дику природу взагалі, але, на жаль, в даний час чисельність таких гарних і цікавих видів як тигри, леви, леопарди і інші скорочується, тому в моїй роботі відображені не тільки аспекти їх життя, їх зображення та типи поведінки, але так само описано те, яким чином слід захищати і охороняти цих прекрасних тварин.
Мені здається, що в моїй роботі найбільш повно відображені найцікавіші факти життя диких кішок. В Інтернеті є кілька сайтів подібного роду, але я спробувала зібрати максимально важливу і цікаву для читача інформацію для того, що б при пошуку наприклад доповіді на тему «Чим живляться рисі», користувач міг легко знайти те, що потрібно.
2. ІНТЕРНЕТ, WWW
Так що ж таке World Wide Web, або, як кажуть в просторіччі, WWW, the Web? WWW - це розподілена інформаційна система мультимедіа, заснована на гіпертексті.
Розподілена інформаційна система: інформація зберігається на величезній безлічі так званих WWW-серверів (servers). Тобто комп'ютерів, на яких встановлене спеціальне програмне забезпечення і які об'єднані в мережу Internet.
Інтернет (Internet = inter + net-об'єднання мереж) - всесвітня комп'ютерна мережа, що об'єднує мільйони комп'ютерів у єдину інформаційну систему. Інтернет пропонує широкі можливості вільного отримання та поширення наукової, ділової, пізнавальної і розважальної інформації. Глобальна мережа зв'язує практично всі великі наукові та урядові організації світу, університети та бізнес - центри, інформаційні агентства та видавництва, утворюючи гігантське сховище даних з усіх галузей людського знання. Віртуальні бібліотеки, архіви, стрічки новин містять величезну кількість текстової, графічної, аудіо та відео інформації.
Користувачі, які мають доступ до мережі, отримують цю інформацію за допомогою програм-клієнтів, програм перегляду WWW-документів. При цьому програма перегляду посилає по комп'ютерній мережі запит серверу, що зберігає файл з необхідним документом. У відповідь на запит сервер висилає програмі перегляду цей необхідний файл або повідомлення про відмову, якщо файл по тих або інших причинах недоступний. Взаємодія клієнт-сервер відбувається за певними правилами, або, як кажуть інакше, протоколу. Протокол, прийнятий в WWW, називається HyperText Transfer Protocol, скорочено - HTTP.
Для навігації в WWW використовуються спеціальні програми - Web-браузери, які суттєво полегшують подорож по безкрайніх просторах WWW. Вся інформація в Web-браузері відображається у вигляді Web-сторінок, які є основним елементом байтів WWW.
У свою чергу Веб - браузер - це програма-клієнт, що надає користувачеві можливості:
- Навігації та перегляду Веб - ресурсів;
- Скачування файлів і т.п.
Веб-сторінка - самостійна частина Веб - сайту; документ, забезпечений унікальною адресою (URL). Веб - сторінка може мати статичну або динамічну побудову. Зазвичай Веб - сторінки організовується у вигляді гіпертексту з включеннями тексту, графіки, звуку, відео або анімацію. У мережі Інтернет перегляд Веб - сторінок здійснюється за допомогою браузера.
Web-сторінки, підтримуючи технологію мультимедіа, об'єднують у собі різні види інформації: текст, графіку, звук, анімацію і відео. Від того, наскільки якісно і красиво зроблена та чи інша Web-сторінка, залежить багато в чому її успіх у Мережі. Користувачеві приємно відвідувати ті Web-сторінки, які мають стильне оформлення, не обтяжені надмірно графікою і анімацією, швидко завантажуються і правильно відображаються у вікні Web-браузера.
Що ж таке Web-сайт і для чого він потрібен?
Веб-сайт - сукупність Веб - сторінок з повторюваним дизайном, об'єднаних за змістом, навігаційно і фізично знаходяться на одному Веб - сервері.
3. Створення Web-сторінки за допомогою мови HTML
В якості стандарту існування Web-сторінки прийнятий мова HyperText Markup Language - мова розмітки гіпертекстів, призначений для створення форматованого тексту, насиченого зображеннями, звуком, анімацією, відео та гіпертекстовими посиланнями на інші документи, розкидані як по всьому Web-простору, так і що знаходяться на цьому ж сервері, або які є складовою частиною цього ж Веб - проекту. Можна працювати на Web без знання мови HTML, оскільки тексти HTML можуть створюватися різними спеціальними редакторами і конвертерами. Але писати безпосередньо на HTML неважко. Можливо, це навіть легше, ніж вивчати HTML-редактор або конвертер, які часто обмежені в своїх можливостях, містять помилки або проводять поганий HTML код, який не працює на різних платформах.
Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML швидше за все будуть використовуватися і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, які можуть бути переглянуті багатьма браузерами Web, як зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, що надається Netscape Navigator, Internet Explorer або деякими іншими програмами.
Робота по HTML - це спосіб засвоїти особливості створення документів у стандартизованому мовою, використовуючи розширення, тільки якщо це дійсно необходімо.HTML був ратифікований World Wide Web Consortium. Він підтримується декількома широко поширеними броузерами, і, можливо, стане підставою майже всього програмного забезпечення, яке має відношення до Web.
3.1 Структура HTML документа
Оскільки HTML-документи записуються в ASCII-форматі, то для її створення може використаний будь-який текстовий редактор. Зазвичай HTML-документ - це файл з розширенням. Html або. Htm, в якому текст розмічений HTML-тегами (англ. tag - спеціальні вбудовані вказівки). Засобами HTML задаються синтаксис і розміщення тегів, відповідно до яких браузер відображає вміст Веб-документа. Текст самих тегів Веб-браузером не відображається.
Всі теги починаються символом <. Зазвичай є пара тегів - стартовий (що відкриває) і завершальний (що закриває) тег (схоже на що відкриваються і закриваються дужки в математиці), між якими міститься розмічаємо інформація.
Завершальний тег відрізняться від стартового лише тим, що в нього перед текстом в дужках стоїть символ '/' (слеш). Браузер, який читає HTML-документ, відображає його у вікні, використовуючи структуру HTML-тегів. У кожному HTML-документі повинні бути присутніми три головні частини:
1) Оголошення HTML;
2) заголовної частини;
3) Тіло документа.
1) Оголошення HTML
<HTML> І </ HTML> Пара цих тегів повідомляє програмі перегляду (браузеру) що між ними укладено документ у форматі HTML, причому першим тегом в документі повинен бути тег (на самому початку документа), а останнім - (в самому кінці документа)
2) заголовної частини.
<HEAD> І </ HEAD> Між цими тегами розташовується інформація про документ (назва, ключові слова для пошуку, опис і т.д.). Однак найбільш важливим є назва документа, який ми бачимо у верхньому рядку вікна браузера верб списках "Вибране (BookMark)". Спеціальні програми-спайдери пошукових систем використовують назву документа для побудови своїх баз даних. Для того щоб дати назву своєму HTML-документу текст поміщається між тегами.
3) Тіло документа.
Третьою головною частиною документа є його тіло. Воно йде відразу за заголовком і знаходиться між тегами <BODY> і </ BODY>. Перший з них повинен стояти відразу після тега, а другий - перед тегом. Тіло HTML-документа - це місце, куди автор поміщає інформацію, відформатовану засобами HTML.
3.2 Форматування тексту
У розділі BODY всі символи табуляції і кінця рядків браузером ігноруються і ніяк не впливають на відображення сторінки. Тому переклад рядка в початковому тексті HTML-документа не призведе до початку нового рядка у видимій оглядачем тексті при відсутності спеціальних тегів. Це правило дуже важливо пам'ятати і не забувати ставити розділяють рядки теги, інакше у тексту не буде абзаців, і він стане непридатним.
Для початку нового рядка використовується тег <BR> (скор. від англ. Break - перервати). Цей тег призводить до відображення браузером подальшого тексту спочатку наступного рядка. Закриває для нього тег не використовується. Він зручний, якщо потрібно з якогось місця писати з нового рядка без початку нового абзацу, наприклад, у вірші. Повторне його використання дозволяє вставити одну або декілька порожніх рядків, відсунувши наступний фрагмент сторінки вниз.
Суцільний текст без проміжків читається не дуже легко, його незручно переглядати та знаходити потрібні місця. Розбитий на абзаци, текст сприймається набагато швидше. Для початку нового абзацу використовується тег <P> (англ. paragraph-абзац). Цей тег, крім початку нового рядка, вставляє один порожній рядок. Але багаторазове повторення <P>, на відміну від <BR>, не приведе до появи декількох порожніх рядків, залишиться все та ж один порожній рядок.
Усередині дужок тега окрім його назви можуть розміщуватися також атрибути <A> (англ. atributes - атрибути). Вони відділяються від назви і між собою пробілами (одним або кількома), а пишуться у вигляді ім'я _атрібута = "значення". Якщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується. Тег може містити атрибут ALIGN, що визначає вирівнювання абзацу. За замовчуванням абзац вирівняний ліворуч ALIGN = "left". Можливі також вирівнювання вправо ALIGN = "right" і по центру ALIGN = "center". При використанні
атрибутів, після форматіруемого тексту слід вживати закриває тег </ A>
У HTML-документі, крім тексту, можуть міститися горизонтальні розділові лінії. Вони, як і текст, не вимагають ніяких зовнішніх файлів. Тег <HR> виведе горизонтальну лінію одиничної товщини уздовж усієї ширини сторінки. Горизонтальна розділова лінія завжди призводить до розриву рядка, але порожніх рядків між лінією і текстом не з'являється. Тег <HR> може містити кілька атрибутів. і дають контурну лінію з тривимірним ефектом поглиблення. дає суцільну чорну лінію. Лінія може не тягнутися у всю ширину сторінки, а становити лише деяку частину. Атрибут WIDTH задає ширину лінії, у відсотках від ширини всієї сторінки або в пікселах. Наприклад, 50% - половина ширини сторінки, 400 - ширина в 400 пікселів.
4. Зовнішній вигляд проекту
Зручний інтерфейс мого сайту дозволяє вільно переміщатися по всьому проекту, що полегшує пошук інформації в ньому.
Інтерфейс - в широкому сенсі - певна стандартами межа між взаємодіючими незалежними об'єктами. Інтерфейс задає параметри, процедури і характеристики взаємодії об'єктів.
Зовнішній вигляд сайту відрізняється обраної кольоровою гамою відповідній темі. Для його створення я сконструювала кілька видів фонів у графічному редакторі Adobe Photoshop CS для того, щоб максимально "зблизити сайт з поняттям дикою природою».
Adobe Photoshop - на сьогоднішній день це самий потужний пакет для професійної обробки растрової графіки. Це цілий комплекс, що володіє численними можливостями модифікації растрового малюнка, що має величезний набір різних фільтрів і ефектів, причому є можливість підключати інструменти незалежних виробників.
Пакет пропонує, наприклад, засоби для відновлення пошкоджених зображень, ретушування фотографій або створення найфантастичніших колажів, які тільки може дозволити собі нашу уяву. Загалом, потенціал цього пакету по істині величезний.
4.1 Фрейм
Сайт виконано через фрейм, тобто кожна його сторінка розділена на 3 частини, що значно полегшує сприйняття тексту та інших даних.
Фрейм - елемент мови HTML версії 3.0 і вище. Фрейми дозволяють розділити Веб - сторінку на кілька незалежних вікон і в кожному з них розміщувати окрему Веб - сторінку. При цьому допускаються посилання з одного вікна до іншого вікна. Зазвичай фрейми застосовується для організації меню, що постійно знаходяться на екрані.
а. Банер
У верхній частині сторінки (фрейму) розміщується банер, який зображує і вказує на те, на якій сторінці ви знаходитеся в даний момент.
Банер - в Internet - графічне зображення або текстовий блок рекламного характеру, що є гіперпосиланням на Веб - сторінку з розширеним описом продукту або послуги. Банери розміщують на Веб - сторінках, для залучення відвідувачів (потенційних клієнтів) або для формування іміджу.
У моєму випадку банер є стильову забарвлення сторінки.
На головній сторінці розміщено банер з мультиплікацією. Він так само був зроблений в Adobe Photoshop CS як і решта графіка проекту, але при цьому оброблений у додатку COFEE CUP GIF ANIMATOR 7.5, що дозволило створити в ньому рух. Всі банери маю формат «. Jpg», крім анімованого, що має формат «. Gif».
Так само основна частина фрейму містить безліч фотографій. Взагалі основний акцент мого сайту був зроблений саме на зображення диких кішок.
в. Меню
З лівого або з правого боку на кожній сторінці мого сайту знаходиться меню, що полегшує пошук інформації.
Меню складається з кнопок, що знаходяться в таблиці. При натисканні на кожну з них кнопка міняє свій колір, при цьому в головному вікні фрейму відкривається потрібна сторінка.
Для того щоб кнопка поміняла колір, був використаний спеціальний скрипт, написаний на мові JavaScript.
4.2 Скрипти
5. Особливості оформлення
5.1 Галерея фотографій
У даному сайті міститься такий розділ як шпалери для робочого столу. Мені здалася, що багатьом користувачам після перегляду мого сайту захочеться завантажити собі на комп'ютер шпалери для робочого столу. Мною були розміщені в таблицю фотографії, при натисканні на які відкривається вікно із зображенням на весь екран. Це дає можливість зберегти собі на ПК зображення в повному обсязі.
Так само в сайті присутні такі цікаві рішення як календар, який дозволяємо користувачеві бачити сьогоднішню дату, а так само просто надає головній сторінці якусь індивідуальність.
Крім цього сайт «дає поради» відвідувачам сайту в залежність від дня тижня, це приємно дивує відвідувачів
При створенні даного проекту використовувалися додаткові інструменти Web - дизайну: об'єкти рухомого рядка, об'єкти GIF - анімації, спливаючі підказки, використання різних стилів зображення тексту, обтікання елемента текстом, впровадження звукових об'єктів у фоновому режимі (при відкритті кожної сторінки звучить відповідний музичний супровід) і ін На сторінці карти сайту та корисних посилань використовуються нумеровані списки.
Висновок
Список використовуваної літератури:
1. Е. Крамер. HTML - Наочний курс Web-дизайну. М.-СПб.-Київ: Діалектика, 2001;
2. Пол Макфедріс. Створення Web-сторінок. М.: АСТ Астрель, 2005;
3. Інтернет - ресурси:
Сайт «Дикі кішки»
Атестаційна робота з інформатики та ІКТ
| Виконав: | Єпішин Юлія Миколаївна |
| Клас: | 11Б |
| Керівник: | Шевякова Катерина В'ячеславівна |
План:
1. Введення
2. Інтернет, WWW.
3. Створення Web-сторінки за допомогою мови HTML
Структура HTML документа
Форматування тексту
4. Зовнішній вигляд проекту
Фрейми
Скрипти
5. Особливості оформлення
Галерея фотографій
Цікаві рішення
6. Висновок
7. Список використаної літератури
1. ВСТУП
В даний час люди все частіше і частіше звертаються з різних причин до такого джерела інформації як Глобальна Комп'ютерна Мережа (World Wide Web).
World Wide Web - глобальна комп'ютерна мережа на сьогоднішній день містить мільйони сайтів, на яких розміщена всіляка інформація. Люди отримують доступ до цієї інформації за допомогою використання технології Internet.
Інтернет став невіддільною частиною сучасної цивілізації. Стрімко вриваючись у сфери освіти, торгівлі, зв'язку, послуг, він породжує нові форми спілкування та навчання, комерції та розваг.
Internet - це найбільша світова комп'ютерна мережа. Тепер Internet має приблизно 150 мільйонів користувачів більш ніж в 50 країнах. WWW доступний в основному через Internet; але кажучи WWW і Internet ми маємо на увазі не одне і те ж. WWW можна віднести до внутрішнього змісту, тобто це якийсь абстрактний мир знань, в той час як Internet є зовнішньою стороною глобальної мережі у вигляді величезної кількості кабелів і комп'ютерів.
У даному рефераті я розглянула те, що являє собою Веб - сайт в цілому, а так само докладно описала те, як і за допомогою яких засобів, додатків і програм я його створювала.
Тема, обрана мною для висвітлення в своєму проекті, на мій погляд, дуже цікава. Багато людей, як і я, люблять диких кішок і дику природу взагалі, але, на жаль, в даний час чисельність таких гарних і цікавих видів як тигри, леви, леопарди і інші скорочується, тому в моїй роботі відображені не тільки аспекти їх життя, їх зображення та типи поведінки, але так само описано те, яким чином слід захищати і охороняти цих прекрасних тварин.
Мені здається, що в моїй роботі найбільш повно відображені найцікавіші факти життя диких кішок. В Інтернеті є кілька сайтів подібного роду, але я спробувала зібрати максимально важливу і цікаву для читача інформацію для того, що б при пошуку наприклад доповіді на тему «Чим живляться рисі», користувач міг легко знайти те, що потрібно.
2. ІНТЕРНЕТ, WWW
Так що ж таке World Wide Web, або, як кажуть в просторіччі, WWW, the Web? WWW - це розподілена інформаційна система мультимедіа, заснована на гіпертексті.
Розподілена інформаційна система: інформація зберігається на величезній безлічі так званих WWW-серверів (servers). Тобто комп'ютерів, на яких встановлене спеціальне програмне забезпечення і які об'єднані в мережу Internet.
Інтернет (Internet = inter + net-об'єднання мереж) - всесвітня комп'ютерна мережа, що об'єднує мільйони комп'ютерів у єдину інформаційну систему. Інтернет пропонує широкі можливості вільного отримання та поширення наукової, ділової, пізнавальної і розважальної інформації. Глобальна мережа зв'язує практично всі великі наукові та урядові організації світу, університети та бізнес - центри, інформаційні агентства та видавництва, утворюючи гігантське сховище даних з усіх галузей людського знання. Віртуальні бібліотеки, архіви, стрічки новин містять величезну кількість текстової, графічної, аудіо та відео інформації.
Користувачі, які мають доступ до мережі, отримують цю інформацію за допомогою програм-клієнтів, програм перегляду WWW-документів. При цьому програма перегляду посилає по комп'ютерній мережі запит серверу, що зберігає файл з необхідним документом. У відповідь на запит сервер висилає програмі перегляду цей необхідний файл або повідомлення про відмову, якщо файл по тих або інших причинах недоступний. Взаємодія клієнт-сервер відбувається за певними правилами, або, як кажуть інакше, протоколу. Протокол, прийнятий в WWW, називається HyperText Transfer Protocol, скорочено - HTTP.
Для навігації в WWW використовуються спеціальні програми - Web-браузери, які суттєво полегшують подорож по безкрайніх просторах WWW. Вся інформація в Web-браузері відображається у вигляді Web-сторінок, які є основним елементом байтів WWW.
У свою чергу Веб - браузер - це програма-клієнт, що надає користувачеві можливості:
- Навігації та перегляду Веб - ресурсів;
- Скачування файлів і т.п.
Веб-сторінка - самостійна частина Веб - сайту; документ, забезпечений унікальною адресою (URL). Веб - сторінка може мати статичну або динамічну побудову. Зазвичай Веб - сторінки організовується у вигляді гіпертексту з включеннями тексту, графіки, звуку, відео або анімацію. У мережі Інтернет перегляд Веб - сторінок здійснюється за допомогою браузера.
Web-сторінки, підтримуючи технологію мультимедіа, об'єднують у собі різні види інформації: текст, графіку, звук, анімацію і відео. Від того, наскільки якісно і красиво зроблена та чи інша Web-сторінка, залежить багато в чому її успіх у Мережі. Користувачеві приємно відвідувати ті Web-сторінки, які мають стильне оформлення, не обтяжені надмірно графікою і анімацією, швидко завантажуються і правильно відображаються у вікні Web-браузера.
Що ж таке Web-сайт і для чого він потрібен?
Веб-сайт - сукупність Веб - сторінок з повторюваним дизайном, об'єднаних за змістом, навігаційно і фізично знаходяться на одному Веб - сервері.
3. Створення Web-сторінки за допомогою мови HTML
В якості стандарту існування Web-сторінки прийнятий мова HyperText Markup Language - мова розмітки гіпертекстів, призначений для створення форматованого тексту, насиченого зображеннями, звуком, анімацією, відео та гіпертекстовими посиланнями на інші документи, розкидані як по всьому Web-простору, так і що знаходяться на цьому ж сервері, або які є складовою частиною цього ж Веб - проекту. Можна працювати на Web без знання мови HTML, оскільки тексти HTML можуть створюватися різними спеціальними редакторами і конвертерами. Але писати безпосередньо на HTML неважко. Можливо, це навіть легше, ніж вивчати HTML-редактор або конвертер, які часто обмежені в своїх можливостях, містять помилки або проводять поганий HTML код, який не працює на різних платформах.
Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML швидше за все будуть використовуватися і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, які можуть бути переглянуті багатьма браузерами Web, як зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, що надається Netscape Navigator, Internet Explorer або деякими іншими програмами.
Робота по HTML - це спосіб засвоїти особливості створення документів у стандартизованому мовою, використовуючи розширення, тільки якщо це дійсно необходімо.HTML був ратифікований World Wide Web Consortium. Він підтримується декількома широко поширеними броузерами, і, можливо, стане підставою майже всього програмного забезпечення, яке має відношення до Web.
3.1 Структура HTML документа
Оскільки HTML-документи записуються в ASCII-форматі, то для її створення може використаний будь-який текстовий редактор. Зазвичай HTML-документ - це файл з розширенням. Html або. Htm, в якому текст розмічений HTML-тегами (англ. tag - спеціальні вбудовані вказівки). Засобами HTML задаються синтаксис і розміщення тегів, відповідно до яких браузер відображає вміст Веб-документа. Текст самих тегів Веб-браузером не відображається.
Всі теги починаються символом <. Зазвичай є пара тегів - стартовий (що відкриває) і завершальний (що закриває) тег (схоже на що відкриваються і закриваються дужки в математиці), між якими міститься розмічаємо інформація.
Завершальний тег відрізняться від стартового лише тим, що в нього перед текстом в дужках стоїть символ '/' (слеш). Браузер, який читає HTML-документ, відображає його у вікні, використовуючи структуру HTML-тегів. У кожному HTML-документі повинні бути присутніми три головні частини:
1) Оголошення HTML;
2) заголовної частини;
3) Тіло документа.
1) Оголошення HTML
<HTML> І </ HTML> Пара цих тегів повідомляє програмі перегляду (браузеру) що між ними укладено документ у форматі HTML, причому першим тегом в документі повинен бути тег (на самому початку документа), а останнім - (в самому кінці документа)
2) заголовної частини.
<HEAD> І </ HEAD> Між цими тегами розташовується інформація про документ (назва, ключові слова для пошуку, опис і т.д.). Однак найбільш важливим є назва документа, який ми бачимо у верхньому рядку вікна браузера верб списках "Вибране (BookMark)". Спеціальні програми-спайдери пошукових систем використовують назву документа для побудови своїх баз даних. Для того щоб дати назву своєму HTML-документу текст поміщається між тегами.
3) Тіло документа.
Третьою головною частиною документа є його тіло. Воно йде відразу за заголовком і знаходиться між тегами <BODY> і </ BODY>. Перший з них повинен стояти відразу після тега, а другий - перед тегом. Тіло HTML-документа - це місце, куди автор поміщає інформацію, відформатовану засобами HTML.
3.2 Форматування тексту
У розділі BODY всі символи табуляції і кінця рядків браузером ігноруються і ніяк не впливають на відображення сторінки. Тому переклад рядка в початковому тексті HTML-документа не призведе до початку нового рядка у видимій оглядачем тексті при відсутності спеціальних тегів. Це правило дуже важливо пам'ятати і не забувати ставити розділяють рядки теги, інакше у тексту не буде абзаців, і він стане непридатним.
Для початку нового рядка використовується тег <BR> (скор. від англ. Break - перервати). Цей тег призводить до відображення браузером подальшого тексту спочатку наступного рядка. Закриває для нього тег не використовується. Він зручний, якщо потрібно з якогось місця писати з нового рядка без початку нового абзацу, наприклад, у вірші. Повторне його використання дозволяє вставити одну або декілька порожніх рядків, відсунувши наступний фрагмент сторінки вниз.
Суцільний текст без проміжків читається не дуже легко, його незручно переглядати та знаходити потрібні місця. Розбитий на абзаци, текст сприймається набагато швидше. Для початку нового абзацу використовується тег <P> (англ. paragraph-абзац). Цей тег, крім початку нового рядка, вставляє один порожній рядок. Але багаторазове повторення <P>, на відміну від <BR>, не приведе до появи декількох порожніх рядків, залишиться все та ж один порожній рядок.
Усередині дужок тега окрім його назви можуть розміщуватися також атрибути <A> (англ. atributes - атрибути). Вони відділяються від назви і між собою пробілами (одним або кількома), а пишуться у вигляді ім'я _атрібута = "значення". Якщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується. Тег може містити атрибут ALIGN, що визначає вирівнювання абзацу. За замовчуванням абзац вирівняний ліворуч ALIGN = "left". Можливі також вирівнювання вправо ALIGN = "right" і по центру ALIGN = "center". При використанні
атрибутів, після форматіруемого тексту слід вживати закриває тег </ A>
У HTML-документі, крім тексту, можуть міститися горизонтальні розділові лінії. Вони, як і текст, не вимагають ніяких зовнішніх файлів. Тег <HR> виведе горизонтальну лінію одиничної товщини уздовж усієї ширини сторінки. Горизонтальна розділова лінія завжди призводить до розриву рядка, але порожніх рядків між лінією і текстом не з'являється. Тег <HR> може містити кілька атрибутів. і дають контурну лінію з тривимірним ефектом поглиблення. дає суцільну чорну лінію. Лінія може не тягнутися у всю ширину сторінки, а становити лише деяку частину. Атрибут WIDTH задає ширину лінії, у відсотках від ширини всієї сторінки або в пікселах. Наприклад, 50% - половина ширини сторінки, 400 - ширина в 400 пікселів.
4. Зовнішній вигляд проекту
Зручний інтерфейс мого сайту дозволяє вільно переміщатися по всьому проекту, що полегшує пошук інформації в ньому.
Інтерфейс - в широкому сенсі - певна стандартами межа між взаємодіючими незалежними об'єктами. Інтерфейс задає параметри, процедури і характеристики взаємодії об'єктів.
Зовнішній вигляд сайту відрізняється обраної кольоровою гамою відповідній темі. Для його створення я сконструювала кілька видів фонів у графічному редакторі Adobe Photoshop CS для того, щоб максимально "зблизити сайт з поняттям дикою природою».
Adobe Photoshop - на сьогоднішній день це самий потужний пакет для професійної обробки растрової графіки. Це цілий комплекс, що володіє численними можливостями модифікації растрового малюнка, що має величезний набір різних фільтрів і ефектів, причому є можливість підключати інструменти незалежних виробників.
Пакет пропонує, наприклад, засоби для відновлення пошкоджених зображень, ретушування фотографій або створення найфантастичніших колажів, які тільки може дозволити собі нашу уяву. Загалом, потенціал цього пакету по істині величезний.
4.1 Фрейм
Сайт виконано через фрейм, тобто кожна його сторінка розділена на 3 частини, що значно полегшує сприйняття тексту та інших даних.
Фрейм - елемент мови HTML версії 3.0 і вище. Фрейми дозволяють розділити Веб - сторінку на кілька незалежних вікон і в кожному з них розміщувати окрему Веб - сторінку. При цьому допускаються посилання з одного вікна до іншого вікна. Зазвичай фрейми застосовується для організації меню, що постійно знаходяться на екрані.
а. Банер
У верхній частині сторінки (фрейму) розміщується банер, який зображує і вказує на те, на якій сторінці ви знаходитеся в даний момент.
Банер - в Internet - графічне зображення або текстовий блок рекламного характеру, що є гіперпосиланням на Веб - сторінку з розширеним описом продукту або послуги. Банери розміщують на Веб - сторінках, для залучення відвідувачів (потенційних клієнтів) або для формування іміджу.
У моєму випадку банер є стильову забарвлення сторінки.
На головній сторінці розміщено банер з мультиплікацією. Він так само був зроблений в Adobe Photoshop CS як і решта графіка проекту, але при цьому оброблений у додатку COFEE CUP GIF ANIMATOR 7.5, що дозволило створити в ньому рух. Всі банери маю формат «. Jpg», крім анімованого, що має формат «. Gif».
б. Основна частина
У головній частині фрейму розміщена інформація по темі. Вона також включає в себе посилання на невеликі статті та відеоролики.
На Web-сторінці сайту розміщена вбудована відеозапис. У даному випадку вона завантажується, коли користувач відкриває сторінку. Але для відеозапису можна задати два варіанти відтворення: відразу після відкриття сторінки або після клацання сторінки мишею. Так як не всі засоби перегляду Web передбачають можливість перегляду вбудованої відеозапису, буде корисним не поміщати важливі відомості у формі відеозапису, тому ролики просто дають загальне уявлення про деякі види кішок. Відвідувачі сайту можуть не тільки подивитися відео, як це відбувається на безлічі інших сайтах, але й скачати його.Так само основна частина фрейму містить безліч фотографій. Взагалі основний акцент мого сайту був зроблений саме на зображення диких кішок.
в. Меню
З лівого або з правого боку на кожній сторінці мого сайту знаходиться меню, що полегшує пошук інформації.
Меню складається з кнопок, що знаходяться в таблиці. При натисканні на кожну з них кнопка міняє свій колір, при цьому в головному вікні фрейму відкривається потрібна сторінка.
Для того щоб кнопка поміняла колір, був використаний спеціальний скрипт, написаний на мові JavaScript.
4.2 Скрипти
Скрипт - програма, що містить набір інструкцій для деяких додатків або утиліт. Семантика та синтаксис інструкцій в скриптах визначаються відповідними додатками. Зазвичай мова скриптів включає прості структури управління: лінійні послідовності, цикли і умовні вирази.
Скрипт-мова - в Інтернет - інтерпретована (об'єктно орієнтований) алгоритмічну мову, призначений для генерації динамічних веб-сторінок. Розрізняють скрипт-мови:
- Виконувані на стороні клієнта: JavaScript і VBScript; і
- Виконувані на стороні сервера: ASP, Perl, PHP і ін
JAVAScript - мова програмування, заснований на об'єктному поданні браузера. Текст програми вбудовується безпосередньо у HTML-документ і інтерпретується самим браузером.
JAVAScript застосовується для додання користувача інтерфейсу більшої інтерактивності в порівнянні зі статичним HTML, він дозволяє реалізувати: біжучий рядок, що змінюються малюнки і т.д.
Головний принцип роботи меню - гіперпосилання.
Гіперпосилання дозволяють перейти до іншого розділу поточного документа або Web-сторінки, до іншого документу Word або до іншої Web-сторінці або до файлу, створеному в іншій програмі. За допомогою гіперпосилань можна переходити також до файлів мультимедіа, у тому числі звукозаписів і відеозаписів. Гіперпосилання можна робити на закладки, вміщені в даному чи іншому документі. Це дозволяє перейти на потрібний розділ, не перегортаючи документ.
Місце призначення гіперпосилання, наприклад Web-сторінка, може розташовуватися на жорсткому диску того ж комп'ютера, в мережі Інтернет або в Інтернеті.
5. Особливості оформлення
5.1 Галерея фотографій
У даному сайті міститься такий розділ як шпалери для робочого столу. Мені здалася, що багатьом користувачам після перегляду мого сайту захочеться завантажити собі на комп'ютер шпалери для робочого столу. Мною були розміщені в таблицю фотографії, при натисканні на які відкривається вікно із зображенням на весь екран. Це дає можливість зберегти собі на ПК зображення в повному обсязі.
Так само в сайті присутні такі цікаві рішення як календар, який дозволяємо користувачеві бачити сьогоднішню дату, а так само просто надає головній сторінці якусь індивідуальність.
Крім цього сайт «дає поради» відвідувачам сайту в залежність від дня тижня, це приємно дивує відвідувачів
При створенні даного проекту використовувалися додаткові інструменти Web - дизайну: об'єкти рухомого рядка, об'єкти GIF - анімації, спливаючі підказки, використання різних стилів зображення тексту, обтікання елемента текстом, впровадження звукових об'єктів у фоновому режимі (при відкритті кожної сторінки звучить відповідний музичний супровід) і ін На сторінці карти сайту та корисних посилань використовуються нумеровані списки.
Висновок
Сайт займає на жорсткому диску 58 Мб, включаючи відео, фотографії і звукові файли.
Недоліком сайту є відсутність пошукової системи. При додаванні її в структуру сайту, його використання буде набагато більш зручним, тому що пошук інформації значно спроститься.
Сайт представлений для атестації повністю готовий, але не можна зупинятися на досягнутому. У нього можна додати додаткові види і породи диких кішок. Мені не представляється можливим розглянути всю інформацію з даної теми в одному проекті, тому на мій погляд краще було б створити ще один сайт, який став би «продовженням» попереднього. Надалі я постараюся розвинути тему диких кішок, а особливо їх захисту, в наступному проекті.
Список використовуваної літератури:
1. Е. Крамер. HTML - Наочний курс Web-дизайну. М.-СПб.-Київ: Діалектика, 2001;
2. Пол Макфедріс. Створення Web-сторінок. М.: АСТ Астрель, 2005;
3. Інтернет - ресурси: