Розробка інформаційного web-сайту

Автор: Пользователь скрыл имя, 03 Января 2012 в 22:14, курсовая работа

Описание работы

World Wide Web - глобальна комп'ютерна мережа на сьогодні містить мільйони сайтів, на яких розміщена всіляка інформація. Люди дістають доступ до цієї інформації за допомогою використання технології Internet. Для навігації в WWW використовуються спеціальні програми - Web- браузери, які істотно полегшують подорож по безкрайніх просторах WWW. Уся інформація в Web- браузері відображається у вигляді Web- сторінок, які є основним елементом байтів WWW.

Содержание

Вступ 3
1.Теоритичні відомості 4
1.1. Концепція World Wide Web 5
1.2. Створення Web- сторінки за допомогою мови HTML 7
1.2.1 Мова HTML 7
1.2.2. Структура HTML документу
1.2.3 Форматування тексту

Работа содержит 1 файл

Курс САЙТ.doc

— 57.50 Кб (Скачать)

Міністерство  освіти і науки України

Одеський  національний політехнічний  університет

Інститут  комп'ютерних систем

Кафедра інформаційних систем 
 
 
 
 
 
 
 

КУРСОВА РОБОТА 

з дисципліни “ Технологія програмування та створення програмних продуктів 

Тема  “ Розробка інформаційного web-сайту “                                                               
 
 
 

ВИКОНАВ: 

Студентка групи  ________________________  

(підпис) 

                  ПЕРЕВІРИВ: 

Керівник ________________________                       

(підпис) 

  • Одеса 2011
  • Міністерство  освіти і науки України

    Одеський  національний політехнічний  університет

    Інститут  комп'ютерних систем

    Кафедра інформаційних систем 
     
     
     

      • ЗАВДАННЯ

        • НА КУРСОВУ  РОБОТУ
         
         

        (прізвище, ім’я, по батькові)                                                                                      (група) 

        1. Тема роботи _____________________________________________ ________________________________________________________________________________________________________________________________________________

        2. Термін  здачі студентом закінченої роботи        __________ 

        3. Початкові  дані до проекту (роботи)

        Программа повинна виконувати: _____________________________ ________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ 

        4. Зміст  розрахунково-пояснювальної записки  (перелік питань, які належить  розробити)____________________________________________________ ____________________________________________________________________________________________________________________________________________

        5. Перелік  графічного матеріалу (з точним  зазначенням обов’язкових креслень)

        ____________________________________________________________________________________________________________________________________________ 

          • Завдання видано                              _____________  ______________
           

          Завдання прийнято до виконання  _____________  ______________

              Зміст

          Вступ 3

          1.Теоритичні  відомості 4

          1.1. Концепція World Wide Web 5

             1.2. Створення Web- сторінки за допомогою мови HTML 7

            1.2.1 Мова HTML 7

            1.2.2. Структура HTML документу 

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

              Вступ

              World Wide Web - глобальна комп'ютерна мережа  на сьогодні містить мільйони  сайтів, на яких розміщена всіляка  інформація. Люди дістають доступ  до цієї інформації за допомогою використання технології Internet. Для навігації в WWW використовуються спеціальні програми - Web- браузери, які істотно полегшують подорож по безкрайніх просторах WWW. Уся інформація в Web- браузері відображається у вигляді Web- сторінок, які є основним елементом байтів WWW.

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

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

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

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

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

            1.Теоритичні відомості

            1.1.Концепція World Wide Web

           
           

              Internet - це найбільша світова комп'ютерна  мережа. Тепер Internet має приблизно  150 мільйонів користувачів більш ніж в 50 країнах. WWW доступний в основному через Internet; але кажучи WWW і Internet ми  маємо на увазі не одне і те ж. WWW можна віднести до внутрішнього змісту, тобто це який-небудь абстрактний світ знань, тоді як Internet є зовнішньою стороною глобальної мережі у вигляді величезної кількості кабелів і комп'ютерів.

              Так що ж таке World Wide Web,  або, як говорять в просторіччі, WWW, the Web,  або ще простіше - 3W? WWW - це розподілена інформаційна система мультимедіа, заснована на гіпертексті. Давайте розберемо це визначення по порядку.

              Розподілена інформаційна система: інформація зберігається на величезній великій кількості  так званих WWW- серверів(servers). Тобто  комп'ютерів, на які встановлене  спеціальне програмне забезпечення і яке об'єднані в мережу Internet. Користувачі, які мають доступ до мережі, отримують цю інформацію за допомогою програм-клієнтів, програм перегляду WWW- документів. При цьому програма перегляду посилає по комп'ютерній мережі запит серверу, який зберігає файл з необхідним документом. У відповідь на запит сервер висилає програмі перегляду цей необхідний файл або повідомлення про відмову, якщо файл з тих або інших причин недоступний. Взаємодія клієнт-сервер відбувається за певними правилами, або, як говорять інакше, протоколам. Протокол, прийнятий в WWW, називається HyperText Transfer Protocol,  скорочено - HTTP.

              Мультимедіа: інформація включає не лише текст, але  і двох- і тривимірну графіку, відео  і звук.

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

              Такі  посилання називають гіперпосиланнями або гіперзв'язками. На екрані комп'ютера у вікні програми перегляду посилання виглядають як виділені яким-небудь чином(наприклад, іншим кольором і/або підкресленням) ділянки тексту або графіки. Вибираючи гіперпосилання, користувач програми перегляду може швидко переміщатися від однієї частини документу до іншої, або ж від одного документу до іншого. При необхідності програма перегляду автоматично зв'язується з відповідним сервером в мережі і просить документ, на який сделанна посилання. До речі, ідея гіпертекстового представлення інформації має вже бути добре знайома користувачам різних версій системи Microsoft Windows. Саме за цим принципом построенна в Windows система підказок(Help), з тією лише різницею, що гіпертекстова система підказок Windows не є розподіленою.

              Отже, Web- сторінка може містити стилізований і форматований текст, графіку і гіперзв'язки з різними ресурсами Internet. Щоб реалізувати усі ці можливості, була розроблена спеціальна мова, названа HyperText Markup Language(HTML), тобто, Мова Розмітки Гіпертексту. Документ, написаний на HTML, є текстовим файлом, який містить власне текст, що несе інформацію читачеві, і прапорами розмітки. Останні є певними послідовностями символів, які є інструкціями для програми перегляду; відповідно до цих інструкцій програма розташовує текст на екрані, включає в нього малюнки, які зберігаються в окремих графічних файлах, і формує гіперзв'язки з іншими документами або ресурсами Internet. Таким чином, файл на мові HTML набуває вигляду WWW- документу тільки тоді, коли він інтерпретується програмою перегляду. Про мову HTML буде детально розказане в наступному розділі, оскільки без знання основ цієї мови неможливо створити Web- сторінку  для публікації в WWW.

              1.2. Створення Web- сторінки за допомогою мови HTML

            • 1.2.1 Мова HTML

                Web- сторінки можуть існувати у будь-якому форматі, але як стандарт прийнятий Hyper Text 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.

              • 1.2.2. Структура HTML документу
               

                  Оскільки HTML- документи записуються в ASCII- форматі, то для її створення може використаний будь-який текстовий редактор.

                  Зазвичай HTML- документ - це файл з розширенням .html або .htm, в якому текст розмічений HTML- тегами(англ. tag -  спеціальні вбудовані  вказівки). Засобами HTML задаються синтаксис  і розміщення тегів, відповідно до яких браузер відображає вміст Веб-документу. Текст самих тегів Веб-браузером не відображається.

                    Усі теги починаються символом '<' і закінчуються символом '>'. Зазвичай є пара тегів - стартовий(що відкриває) і завершальний(що закриває) тег(схоже на дужки, що відкриваються і закриваються, в математиці), між якими поміщається інформація, що розмічається : 

                  <p>Інформація</p>  

                  Тут стартовим тегом є тег <P>, а  що завершує - </P>. Завершальний тег  відрізняться від стартового лише тим, що у нього перед текстом в дужках <> коштує символ '/'  (слэш).

                  Браузер, HTML- документ, що читає, відображає його у вікні, використовуючи структуру HTML- тегів. У кожному HTML- документі  мають бути присутніми три головні  частини:  

                  A) Оголошення HTML; 
                  B) Заголовачная частина; 
                  C) Тіло документу.
                   

                    A) Оголошення HTML

                  <HTML> і </HTML>. Пара цих тегів повідомляє  програму перегляду(браузеру) що  між ними ув'язнений документ  у форматі HTML, причому першим  тегом в документі має бути  тег <HTML> (на самому початку  документу)а останнім - </HTML> (у самому кінці документу).

                   
              <HTML>  
              .  
              .  
              .  
              </HTML>
               

                  B) Заголовна частина. 

                  <HEAD> і </HEAD>. Між цими тегами розташовується  інформація про документ(назва,  ключові слова для пошуку, опис  і так далі). Проте найбільш  важливою є назва документу,  яку ми бачимо у верхньому рядку вікна браузеру і в списках "Обране(BookMark) ". Спеціальні программы-спайдеры пошукових систем використовують назву документу для побудови своїх баз даних. Для того, щоб дати назву своєму HTML- документу текст поміщається між тегами <TITLE> і </TITLE>.  

              <HTML>  
              <HEAD>  
              <TITLE>Моя перша сторінка</TITLE>  
              </HEAD>  
              </HTML>
               

                  C) Тіло документу. 

                  Третьою головною частиною документу є його тіло. Воно йде відразу за заголовком і знаходиться між тегами <BODY> і </BODY>. Перший з них повинен стояти відразу після тега </HEAD>, а другий - перед тегом </HTML>. Тіло HTML- документу - це місце, куди автор поміщає інформацію, що відформатувала засобами HTML.  

                   
              <HTML>  
              <HEAD>  
              <TITLE> Моя перша сторінка</TITLE>  
              </HEAD>  
              <BODY>  
              .....................................  
              </BODY>  
              </HTML>
               

              Тепер ми можемо написати HTML- код нашої  сторіночки :  

              <HTML>  
              <HEAD>  
              <TITLE>Моя перша сторінка</TITLE>  
              </HEAD>  
               
              <BODY>  
              Тут будуть мої сторінки!  
              </BODY>  
               
              </HTML>
               

                • 1.2.3 Форматування тексту
                 

                    У розділі BODY усі символи табуляції і кінця рядків браузером ігноруються і ніяк не впливають на відображення сторінки. Тому переклад рядка в початковому тексті HTML- документу не приведе до початку нового рядка в тексті, що відображається оглядачем, за відсутності спеціальних тегів. Це правило дуже важливо пам'ятати і не забувати ставити теги, що розділяють рядки, інакше у тексту не буде абзаців, і він стане нечитаним.

                    Для початку нового рядка використовується тег <BR> (сокр. від англ. break - перервати). Цей тег призводить до відображення браузером подальшого тексту з початку наступного рядка. Тег, що закриває для нього, не використовується. Він зручний, якщо вимагається з якогось місця писати з нового рядка без початку нового абзацу, наприклад, у вірші. Повторне його використання дозволяє вставити одну або декілька порожніх рядків, відсунувши наступний фрагмент сторінки вниз.

                    Суцільний текст без проміжків читається  не дуже легко, його незручно переглядати  і знаходити потрібні місця. Розбитий на абзаци, текст сприймається набагато швидше. Для початку нового абзацу використовується тег <P> (англ. paragraph - абзац). Цей тег, окрім початку нового рядка, вставляє один порожній рядок. Але багатократне повторення <P>, на відміну від <BR>, не приведе до появи декількох порожніх рядків, залишиться все той же один порожній рядок.

                    Усередині дужок тега окрім його назви можуть розміщуватися також атрибути(англ. atributes - атрибути). Вони відділяються від  назви і між собою пропусками(одним  або декількома), а пишуться у  виді ім'я_атрибуту="значення". Якщо значення не містить пропусків, то лапки можуть бути опущені, але так робити не рекомендується. Тег <P> може містити атрибут ALIGN, що визначає вирівнювання абзацу. За умовчанням абзац вирівнюється вліво ALIGN="left". Можливі також вирівнювання управо ALIGN="right" і по центру ALIGN="center". При використанні атрибутів, після тексту, що форматується, слід використати закриваючий тег </P>. Якщо його немає, то новий тег <P> означає закриття попереднього, відповідно вкладені <P> неможливі. Выравнить текст по центру можливо також тегом <CENTER>.

                    Тепер ми можемо помістити на нашу Web- сторінку деякий текст з різним вирівнюванням: 

                <HTML> 
                 
                <HEAD> 
                <TITLE>Моя перша сторінка</TITLE> 
                </HEAD> 
                 
                <BODY> 
                 
                <P align=center>Тут будуть мої особисті сторінки! 
                <P align=left>На них Ви зможете знайти:<BR>- розповідь про мене і про мої захоплення;<BR>- мої фотографії. 
                <P align=right>З однією з моїх сторінок можна буде<BR>відправити мені електронний лист. 
                 
                </BODY> 
                </HTML> 
                 

                    Окрім використання цих тегів, для розриву рядків можливе використання символів кінця рядків і табуляцій в самому HTML- документі. Для цих цілей існує тег <PRE>. Увесь текст, поміщений між тегами <PRE> і </PRE> виводитиметься без змін, тобто з усіма кінцями рядків і табуляціями.

                    Наприклад: 

                <PRE>Це текст  написаний 
                у два рядки.</PRE>
                 

                    У HTML- документі, окрім тексту, можуть міститися горизонтальні розділові  лінії. Вони, як і текст, не вимагають  ніяких зовнішніх файлів. Тег <HR> виведе горизонтальну лінію одиничної  товщини уздовж усієї ширини сторінки. Горизонтальна розділова лінія завжди призводить до розриву рядка, але порожніх рядків між лінією і текстом не з'являється. Тег <HR> можнт містити декілька атрибутів. <HR SHADE> і <HR> дають контурну лінію з тривимірним ефектом поглиблення. <HR NOSHADE> дає суцільну чорну лінію. Лінія може не тягнутися в усю ширину сторінки, а складати лише деяку частину. Атрибут WIDTH задає ширину лінії, у відсотках від ширини усієї сторінки або в пікселах. Наприклад, 50% - половина ширини сторінки, 400 - ширина в 400 пікселів. Атрибут ALIGN може набувати значень, аналогічних його значенням для тега <P>, але вирівнювання за умовчанням - по центру. Атрибут SIZE задає товщину лінії в пікселах від 1 до 175; за умовчанням 1, але якщо <HR SHADE>, (лінія - контурна)то додається товщина, необхідна для тривимірного ефекту поглиблення.

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

                    Висновки

                    Таким чином, ми вивчили можливості мови HTML для створення Web- сторінок, дізналися, які HTML - і графічні редактори краще  використати в Web- дизайні, які переваги і недоліки тих або інших програмних пакетів. І, нарешті, ми з'ясували, які можливості для створення Web- сторінок має Word'97 з пакету Microsoft Office.

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

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

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

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

                Список  використаних джерел 

                1. Левин "Internet для "чайников", Москва 1996.
                2. Рассохин і Лебедев "World Wide Web - глобальная информационная паутина в сети Internet", Москва 1997.
                3. Перрі "Секреты World Wide Web", Москва 1996.
                4. Уолл "Использование WWW", Москва 1997.
                5. Хеслоп "HTML з самого начала", СПб: Санкт-Петербург, 1995
                6. Kevin Werbach. Перевод: Станислав Малишев. - Краткое пособие          по HTML, Москва 1998.
                7. Гультяев Уроки Web-мастера
                8. Кирсанов Веб-дизайн
                9. www.webschool.narod.ru
                10. www.pronet.ru
                11. www.lib.toxy.cv.ua
                12. www.education.kulichki.net
                13. www.gor.h1.ru
                14. www.infocity.kiev.ua

    Информация о работе Розробка інформаційного web-сайту