WEB – ПРОГРАМУВАННЯ

1. Базові відомості про Internet та WEB

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

Інтернет можна розглядати в широкому та вузькому розумінні. Найбільш вузький погляд – Інтернет, це мережа мереж, всесвітня комп'ютерна мережа в вузькому розумінні, але більш ширший погляд – Інтернет це кіберпростір, що народжує кіберкультуру зі своїми думками, своєю мовою, своєю етикою.

Отже Інтернет це мережа мереж, яка містить велике число серверів, таких як WWW, електронна пошта, мережні новини USENET, пошукова система WAIS, сервіси: Gopher, FTP, IRC, MUD, MOO, ICQ та інші. Найбільший з цих серверів це WWW – World Wide Web (Всесвітня павутина), який коротко ще називають Web. Web настільки популярний серед людей, що деякі люди, думають, що Web — це і є Internet. Але це невірно, тому що Web — тільки одна з багатьох служб, що використовуються в Internet.

Web була винайдена в 1980 році в CERN (європейської лабораторії фізики елементарних часток). Співробітник цієї лабораторії Тім Бернерс Лі створив програму за назвою Enquire Within Upon Everything (Enquire), щоб відстежити зв'язки між документами, включивши в них посилання один на одного. І, як сказав Тім у 1994 році, даючи інтерв'ю кореспондентам видання Internet World, він хотів знайти більш зручний і логічний спосіб представлення інформації. У 1989 році Бернерс Лі запропонував глобальне узагальнення цієї ідеї — зв'язати гіпертекстові документи в усьому світі. Інформація повинна міститися на серверах, а для її перегляду потрібно використовувати особливі програми-браузери. З тих пір почався бурхливий розвиток Web.

Для роботи в Web необхідна спеціальна програма-клієнт, що називається Web-браузером. Одним з перших браузерів була програма Mosaic, розроблена засновником фірми Netscape Марком Ендрісеном (Магc Andreesen). Перша версія Mosaic була випущена центром NCSA (National Center for Supercomputing Applications — Національний центр суперкомп'ютерних додатків) у 1993 році. У 1994 році Ендрісен залишив NCSA, щоб заснувати фірму Mosaic Communications, на якій почали розробляти браузер Netscape Navigator, який в даний час є найбільшим конкурентом браузера Internet Explorer фірми Microsoft.

2. Основні принципи роботи Web

Теоретично гіпертекст — це усього лише зручний спосіб представлення інформації. Але на практиці гіпертекст — це можливість зробити посилання на інші документи за допомогою слів, фраз, малюнків. Ім’я кожного з цих місць можна зв'язати з іншим документом, у якому міститься більш докладна інформація. Коли користувач вибирає посилання в першому документі, браузер відкриває другий документ із більш докладними даними.

У гіпертексту є дві важливі особливості.

1. Інформація ніяк не впорядковується — документи просто зв'язуються один з одним за допомогою посилань. Хоча головною метою багатьох методів є саме впорядкування інформації тим або іншим способом (наприклад, у виді ієрархії), у гіпертексті основна увага приділяється створенню інформаційних зв'язків. Таким чином, гіпертекст — це спроба створення моделі, що описує спосіб представлення інформації в мозку людини.

2. Інформаційні зв'язки можуть існувати між самими різними документами. Створюючи впорядкований список або схему, ви поміщаєте на кожне місце в списку або ієрархії (тобто в структурі) тільки один елемент. А в гіпертексті кожен інформаційний фрагмент (або елемент) може знаходитися в багатьох, причому зовсім різних, місцях структури.

Термін гіпермедіа (hypermedia) використовується для опису того, що ви знаходите в Web. Гіпермедіа — це природне узагальнення поняття гіпертексту, що відноситься до документів, у яких розміщується не тільки текст, але і мультимедіа, тобто зображення, відеозаписи і звук. Ці елементи також можна зв'язувати з іншими документами гіпермедіа. Наприклад, на Web-сторінці можна зв'язати зображення з документом таким чином, що якщо користувач клацне на зображенні, браузер відкриє відповідний документ.

Документи HTML.HTML (Hypertext Markup Language — мова гіпертекстової розмітки) служить для опису Web-сторінки, що зберігається у виді звичайного текстового файлу з розширенням *.htm або *.html. Головна мета HTML — описати формат вмісту Web-сторінки, він описується з допомогою дескрипторів (tag) HTML. Дескриптори визначають способи форматування тексту, служать розпізнавальними знаками зображень або таблиць, дозволяють зв'язувати слова або фрази з іншими документами в Internet.

Якщо дати коротке означення Web-сторінки, то це комбінація тексту і дескрипторів HTML, що описують способи форматування цього тексту.

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

Як ми говорили вище, Web-сторінки зберігаються у файлах з розширенням * .htm або *.html. Але якщо на Web-сервері використовується технологія ASP (Active Server Page — активні сторінки сервера) чи технологія PHP(Personal Home Page), то замість HTML-сторінок на сервері зберігаються ASP-файли чи PHP файли. ASP-файл чи PHP-файл, містить сценарій, по якому Web-сервер динамічно створює HTML-сторінку в момент звертання до нього броузера. Технології ASP і PHP дозволяють представляти інформацію в більш динамічному виді, даючи можливість звертатися до баз даних або до іншої інформації, що неможливо представити у виді звичайних HTML-документів.

Технологія ASP створена фірмою Microsoft на основі мови програмування Visual Basic і відповідно вбудована в офісні додатки Microsoft Office. Тому для людей, які не знайомі з Web-програмуванням, але знайомі з принципами роботи додатків Microsoft Office кращим рішенням при створенні Web сторінок використовувати HTML в поєднанні з технологією ASP.

HTML — це стандарт, прийнятий Консорціумом Всесвітньої інформаційної мережі (W3C — World Wide Web Consortium). Остання рекомендація HTML (W3C не використовує термін "стандарт") має номер 4.1. (Багато фірм-виготовлювачів, наприклад Microsoft і Netscape, визначають власні розширення для HTML-файлів.) Асоціація W3C несе також відповідальність за визначення таких стандартів, як

Рис. 9.1 – HTML-текст та його інтерпретація в браузері

Продовження рис. 9.1 – HTML-текст та його інтерпретація в браузері

HTTP (Hypertext Transport Protocol — протокол передачі гіпертексту) і PICS (Platform for Internet Content Selection — платформа вибору інформації в Internet). Діяльністю W3C керує Тім Бернерс Лі, винахідник гіпертексту. Більш докладну інформацію про цю організацію можна знайти на її Web-сервері за адресою http//www.w3.org.

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

Уніфіковані локатори ресурсів (URL)

Однією з головних понять HTML є також URL. Для звертання до ресурсу використовується його адреса, або URL. URL — це стандарт, прийнятий для визначення місцезнаходження будь-якого ресурсу в Internet, будь це документ або служба. URL складається з трьох частин.

Схема. Схема описує протокол, що повинний використовувати клієнт для доступу до ресурсу. За протоколом звичайно ставляться символи ://. Але з цього правила є виключення. Якщо ресурсом є файл, то схема має вигляд file://, якщо адреса електронної пошти, то — mailto:, а якщо новини — то news:.

Хост. Хост — це доменне ім'я комп'ютера (або сервера) у Internet, на якому знаходиться ресурс. Домен третього рівня в імені хоста звичайно говорить про те, якого роду інформація знаходиться на сервері. Наприклад, на сервері www.host.com знаходяться Web-сторінки, а на сервері ftp. host. com — файли, які можна завантажити через FTP.

Шлях. Ця частина URL являє собою повний шлях до документа і, можливо, ім'я файлу. На відміну від протоколу і хоста, шлях не є обов'язковим елементом URL. Якщо ввести URL Web-сервера, не вказавши при цьому шлях на HTML-документ, то сервер відкриє свою початкову сторінку, що з'являється за замовчуванням при звертанні до цього сервера.

Термін "Web-сторінка" в однаковій мірі підходить для всіх HTML-документів у Internet. A термін "початкова сторінка" має два різних визначення. По-перше, початкова сторінка — це сторінка самого верхнього рівня на великому Web-сервері. Саме ця Web-сторінка відкривається у випадку, якщо користувач уводить URL без вказівки шляху або імені файлу. У подібному випадку Web-cepвep відкриває файл з ім'ям lndex.htm або default.htm і відображає початкову сторінку. По-друге, термін "початкова сторінка" використовується для опису персональних Web-сторінок, що поміщають у Internet окремі користувачі.

HTTPHTTP розшифровується як Hyper Text Transport Protocol (протокол передачі гіпертексту) і використовується в Web з 1990 року. Він служить для визначення способів формування запитів клієнтів і способів відповіді Web-серверів на ці запити. Коротше кажучи, HTTP описує способи передачі Web-сторінок.

HTTP — це простий текстовий протокол, тобто ви можете прочитати і зрозуміти кожну команду, що посилається на сервер (спробуйте зв'язатися з портом 80 Web-сервера за допомогою telnet). Броузер посилає на Web-сервер запит, а той, у свою чергу, видає відповідь. Першим рядком запиту є команда, звичайно GET (Одержати) або POST (Послати), що містить URL ресурсу (файлу, сценарію, програми і т.д.) і версію HTTP, використовувану броузером. За командою випливають заголовки, у яких утримується додаткова інформація, необхідна Web-серверові. Усі заголовки мають однаковий формат: ім'я: значення.

Відповідь сервера починається з указівки версії HTTP і коду повернення. Код повернення час від часу з'являється на екрані вашого броузера, коли сервер повертає помилку.

Протокол HTTP не підтримує функції збереження інформації про користувача або про його браузері. Для постійного збереження інформації про користувача використовуються розширення, прийняті фірмою Netscape (або службові індексні файли) cookies. Зараз ця технологія визнана в усім світі. Файли cookies зберігаються на комп'ютері користувача. Сервер визначає cookie у заголовку відповіді Set-cookie. І з кожним наступним запитом браузер повертає cookie на сервер у заголовку запиту Cookie. Таким чином, сервер зберігає інформацію на комп'ютері користувача, а потім прочитує неї при одержанні чергового запиту.

Запуск програм на сервері

При обробці запиту Web-сервер аналізує URL, у якому може утримуватися звертання до файлові або програмі. Іноді розробники Web-сторінок доповнюють їх службовими програмами, що виконують, наприклад, перевірку даних, введених користувачем, або обробку замовлення в режимі online. HTTP не визначає способи виконання сервером подібних операцій. Якщо ж URL указує на файл, сервер просто повертає його вміст браузеру.

Якщо URL указує на програму, то сервер запускає її з параметрами, переданими браузером. У деяких випадках на сервері є спеціальні каталоги, такі як CGI-BIN. Це віртуальний каталог із програмами. Запис у URL типу host/cgi-bin/prog змушує Web-сервер викликати програму prog з каталогу cgi-bin. В інших випадках у URL указується конкретний шлях до програми, наприклад, host/prog. dll, що є ISAPI-фільтром, що використовується разом з Internet Information Server.

Незалежно від того, яким способом сервер визначає, що URL посилається на програму, HTTP указує метод передачі параметрів цій програмі (або сценарієві), що знаходиться на сервері. Броузер додає наприкінці URL знак питання (?), а за ним — рядок запиту. Усі параметри, яким у рядку запиту привласнюються значення, повинні розділятися знаками амперсанда (&): url?a=b&c=d&e=f. У рядку запиту може бути не більш 255 символів. Крім того, у ній не можуть утримуватися пропуски.

Використання Web-броузера

Програма-клієнт, що використовується для звертання до Web-сервера, називається Web-броузером. Два самих популярних броузера на сьогоднішній день — це Internet Explorer і Netscape.

По своїй суті Web-браузери — неймовірно складні програми. Вони підтримують безліч стандартів, що визначають усе, що тільки можна: починаючи від способів передачі Web-сторінок за допомогою HTTP і відображення HTML-документа і закінчуючи захистом транзакцій за допомогою SSL. Але зовні Web-браузери здаються надзвичайно простими, тому що ними легко користуватися. Розглянемо можливості, якими володіє більшість Web-броузеров.

Ідентифікація Web-сторінок за допомогою URL. В усіх Web-браузерах реалізовані однакові методи відкривання Web-сторінок. Ви можете клацнути на посиланні, набрати URL-адресу Web-сторінки в адресному полі, скористатися меню, вибрати сервер у списку Обране (Favorites) і т.д.

Можливості Web-браузерів не обмежуються одним тільки відображенням HTML-документів. За допомогою Web-браузера можна, наприклад, переглянути Gopher-сервер або завантажити файли з FTP-сервера.

Використання елементів керування, надбудов і Java-аплетів

Раніш на Web-сторінці можна було знайти тільки текст і зображення. А тепер до ваших послуг усілякі мультимедійні об'єкти, а також об'єкти-додатки, наприклад, надбудови (plug-ins), елементи керування Active і аплети написані мовою Java. У будь-якого типу об'єкта, що знаходиться на Web-сторінці, є власний користувальницький інтерфейс. Наприклад, при натисненні правої кнопки миші на одних об'єктах на екрані з'являється контекстне меню, у якому можна вибрати команду. А інші об'єкти відображають елементи керування прямо на Web-сторінці.В даний час у Web можна знайти об'єкти трьох різних типів: надбудови Netscape, елементи керування Active і Java-аплеты. Але розходження між цими типами об'єктів, взагалі ж, несуттєві. Усі вони виконують одне основне призначення: розширюють можливості Web-браузера. Одні об'єкти додають браузеру мультимедійні можливості, яких у нього не було, а інші — можливості відображення вмісту бази даних.

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

Робота з динамічними даними

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

3. Створення WEB – сторінок

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

Гіпертекстові Web-сторінки зберігаються в звичайних текстових файлах з розширенням НТМ або HTML. HTML – мова розмітки гіпертекстових документів, призначена для створення та написання гіпертекстів. HTML – базується на стандартній мові узагальненої розмітки (SGML - Standard Generalized Markup Language) та призначений для опису взаємопов'язаних документів у розподіленій мережевій інформаційній системі WWW. HTML описує не тільки структуру документів, а й зв'язок між ними. У загальному вигляді HTML – це набір стилів (tags), які виділяють різні компоненти WWW-документів.

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

Мова HTML є лінійною мовою й у стандартному варіанті не підтримує циклів або розгалужень, при умові, що не використовуються технології SSI (Server Side Includes), DHTML (Dynamic HTML) або ASP (Active Server Pages) чи PHP. Браузер передивляється документ від початку і до кінця, одразу форматуючи сторінку. Використання програм, які мають назву CGI-script (VB-Script, JAVA-Script), а також використання мов серверного програмування (включаючи SSI, ASP, PHP, JAVA) змінилося уявлення про HTML документ, як про статичний текст з елементами гіпертекстової розмітки. Нові технології дозволяють генерувати активні документи і використовувати всю техніку програмування для їх створення.

Чистий HTML— це мова, що описує, як повинен виглядати документ. Його також можна назвати мовою розмітки.

Основним елементом HTML є дескриптори або теги. Документ форматується при додаванні дескриптора, що точно вказує, як повинен виглядати текст. Дескриптори HTML розташовані у кутових дужках <>. Умовно дескриптори модна розбтити на три частини:

• Дескриптори, які інформують браузер про те, що документ є HTML-документом, і дескриптори коментарів.

• Дескриптори заголовків HTML-документа.

• Дескриптори тіла HTML-документа.

Розрізняють два тири дескрипторів: дескриптори-контейнери і прості дескриптори.

Дескриптори-контейнери обмежують текст із двох сторін. Завершальний дескриптор відрізняється від починаючою тільки косою рисою – . Між ними може знаходитися як текст, так і інші дескриптори.

Наприклад: дескриптор <В> включає режим напівжирних символів, а дескриптор — виключає. Усередині цієї фрази дескриптор <І> включає режим курсиву, а дескриптор — виключає. Тобто наступний вираз записаний мовою HTML -

Це <В>реченнямістить фразу , надруковану курсивом .

На екрані браузера буде виглядати таким чином:

Це речення містить фразу, надруковану курсивом.

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

Атрибути HTMLБезліч дескрипторів HTML також приймають параметри, які називаються атрибутами. Атрибути використовуються для вказівки додаткової інформації Web-браузерові про те, як застосовувати цей дескриптор. Якщо ви додасте дескриптор, що створює посилання, то атрибути будуть використовуватися для вказівки URL зв'язаної Web-сторінки. Атрибути — це імена, яким через знак рівності (=) привласнюються визначені значення. Наприклад, для зв'язку з файлом HTML необхідно атрибутові HREF привласнити URL цього файлу — HREF=document2.htm і помістити його між відкриваючою і закриваючою кутовою дужками дескриптора <А>:

<А HREF=index2.htm>Друга сторінка

Якщо рядок значення параметра містить пробіли, її необхідно записувати в одинарних або подвійних лапках. Наприклад, <А HREF="Web Page FBS.htm">.

Структура документів HTML

Кожен файл HTML має однакову базову структуру. Умовно його можна розбити на дві частини – заголовок і тіло. Відповідно є дескриптори які відносяться до заголовка і тіла html-документу, але крім цього, як ми говорили, існують ще загальні дескриптори. Тому, структуру html, розглядають поряд з структурою дескрипторів.

В загальному кожен html-файл починається з дескрипторів і закінчується дескриптором . Усередині цього контейнера вкладені два інші: <НЕАD> і . Контейнер містить заголовну інформацію про документ, а контейнер вміст документа. В загальному ж структура html-файлу така:

Текст заголовку html-документа

Текст html-документу

Розглянемо більш детальніше дескриптори, які відносяться до кожної частини html-документу.

Загальні дескриптори і коментарі.

До загальних дескрипторів можна віднести:

1) - дескриптор-контейнер, повідомляє браузеру, що вся інформація, яка знаходиться між і є текстом, закодованим у відповідності із форматом HTML.

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

3) - ще один вид дескриптора-коментаря.

Дескриптори заголовку HTML-документа

Заголовок html-документа задається за допомогою дескриптора-контейнера . Цей дескриптор не є обов’язковим, проте дає необхідну інформацію для програми-браузера. Елементи, які розміщені всередині цього контейнера, в вікні браузера не відображаються.

Цей дескриптор може містити в собі такі дескриптори (використовуються тільки між парою :

1) - дескриптор контейнер, який служить для задання тексту, що буде відображатись в рядку заголовку вікна браузера. Приклад: <html> <head> <title> Наша організація

Головна сторінка нашої організації

В вікні браузера це буде виглядати наступним чином:

Рис. 9.2 – Використання заголовків.

2) - задає повний URL документа. Використовується для вказування відносних URL. Має один обов’язковий атрибут HREF, який задає повний URL документа.

3) - надає інформацію про документ для браузера, пошукових серверів і інших додатків.

Синтаксис:

CONTENT=desription

HTTP-EQUIV=response

NAME=text

TITLE=text

URL=url>,

де

CONTENT – вміст дескриптора, в поєднанні з HTTP-EQUIV може використовуватися для автоматичного пере завантаження документа.

HTTP-EQUIV – забезпечує браузеру супровідну інформацію про документ. Якщо його значення рівно REFRESH, то документ перезавантажується через вказане в якості значення атрибута CONTENT.

NAME - ім’я дескриптора.

URL – URL завантажувального документа, після вказання інтервалу в секундах в якості значення атрибута CONTENT.

Примітка: Цей дескриптор дуже важливий при роміщенні головних Web-сторінок (зазвичай сторінок з назвами index.html) на Internet-сайтах. В цьому дескрипторі вказується ключові слова для пошуку пошуковими сторінками, а також короткий опис документа. Можна, наприклад, в документ вставити такі рядки.

Дескриптори тіла HTML-документа

Найголовнішою частиною HTML-документу все ж можна назвати тіло HTML-документу, саме в цій частині використовується найбільша частина дескрипторів, записуються сценарії, аплети тощо. Повністю про всі дескриптори та їх структуру, як вже було сказано, можна дізнатися за адресою: http://www.w3c.org. Ми ж розглянемо найбільш часто вживані дескриптори HTML.

Форматування символів у HTML

Нижче приведені деякі дескриптори форматування символів, підтримувані HTML. Кожен дескриптор, приведений тут є контейнером, тобто необхідно також використовувати завершальні дескриптори для завершення відповідного форматування.Серед цих дескрипторів розглядають фізичні та логічні. Фізичні дескриптори конкретно вказують, як необхідно форматувати текст. Наприклад, дескриптор <В> форматує текст напівжирним шрифтом. Дескриптори , , , , , _{, ^{і також є фізичними. Логічні дескриптори визначають не те, як відображати текст, а що він собою представляє, залишаючи Web-браузеру можливість "вирішувати", як відображати даний текст. Дескриптори, що залишилися в таблиці, є логічними.

Таблиця 9.1 - Дескриптори форматування символів.

ДескрипторОпис

Напівжирний

Курсив

Підкреслений

Перекреслений

Перекреслений

_{Нижній індекс

^{Верхній індекс

Більший

Маленький

Приклад коду

<ЕМ>Виділення (зазвичай курсив)

Використання визначеного шрифту}}}}

Моношириний <SAMP>Приклад Виділення (звичайно напівжирний) <ТТ>Телетайп <VAR>Ім'я перемінної або параметра <ХМР>Приклад Приклад використання дескрипторів форматування символів: <html> <head> <title>Форматування символів</title> </head> <body> Напівжирний Курсив Підкреслений <S>Перекреслений</S> <STRIKE>Перекреслений</STRIKE> Нижній індекс Верхній індекс <BIG>Більший</BIG> Меншиий Виділення (зазвичай курсив) </body> </html> У Web-браузері Microsoft Internet Explorer, цей текст буде відображатись так, як показано на Рис.9.3. Рис.9.3 – Приклад форматування символів. Використання шрифтів Кожний браузер для відображення використовує свій шрифт, тому одна і таж сторінка в різних браузерах буде відображатись різними шрифтами. Але, якщо нам потрібно використовувати визначений шрифт, то можна вказати, який шрифт слід використовувати. Крім цього можна задати розмір і колір шрифту. Для того щоб визначити шрифт тексту, його розмір і колір, використовуйте дескриптор разом з атрибутами COLOR, FACE і SIZE. Можна вибрати будь-яку комбінацію цих атрибутів. Атрибут COLOR задає колір тексту. Колір можна вказувати буквеним, або числовим значенням (Див. Табл. 9.2) Атрибут FACE задає назву шрифту і задається одним або декількома назвами шрифтів, розділених комами. Якщо Web-браузер не знайде на машині перший зазначений шрифт, вона спробує відобразити текст другим і т.д. Атрибут SIZE задає відносний розмір шрифту: +1 позначає на один розмір більше, +2 — на два розміри більше, а -1 — на один розмір менше. Шрифт, що вказується вами, у дескрипторі повинен існувати на комп'ютері користувача і мати те ж ім'я. У противному випадку браузер спробує відобразити його альтернативним шрифтом або шрифтом за замовчуванням. Приклади зміни шрифту: <html> <head> <title> Приклад зміни шрифту</title> </head> <body> Приклади зміну шрифту Цей приклад демонструє, як змінювати шрифт для блоку тексту. Цей приклад демонструє, як змінювати розмір для блоку тексту. Цей приклад демонструє, як змінювати шрифт, розмір і колір блоку тексту. </body> </html> Цей текст в браузері Microsoft Internet Explorer буде виглядати так:в Рис 9.4. Приклад зміни шрифту. Кольори в HTML Кольори в HTML можна задавати назвами та в шіснадцядковому RGB-форматі. В RGB-форматі форматі кольори задаються за допомогою шаблону #RRGGBB, де RR – дві шістнадцядкові цифри, які задають інтенсивність червоного кольору, GG - дві шістнадцядкові цифри, які задають інтенсивність зеленого кольору, BB - дві шістнадцядкові цифри, які задають інтенсивність синього кольору. Наприклад, #FFOOOO — це червоний, тому що інтенсивність синьої і зеленої складових на нулі, а червоної — на максимумі. Проте найпростіше вказувати колір за назвою. Існує шістнадцять визначених назв кольорів: Таблиця 9.2 - Базові кольори HTML КонстантаКолірЗначення AQUAБірюзовий(Аквамарин)#00FFFF BLACKЧорний#000000 BLUEСиній(Голубий)#0000FF FUCHSIAБузковий#FF00FF GRAYСірий#808080 GREENЗелений #008000 LIMEСалатовий (Світло-зелений)#00FF00 MAROONКаштановий(Темно-бордовий)#800000 NAVYТемно-синій#000080 OLIVEМаслиновий#808000 PURPLEФіолетовий #800080 REDЧервоний#FF0000 SILVERCрібний (ясно-сірий)#C0C0C0 TEALТемно-зелений#008080 WHITEБілий#FFFFFF YELLOWЖовтий#FFFF00 Форматування абзаців у HTML Нижче приведена більшість дескрипторів форматування абзаців, підтримуваних HTML. Кожен дескриптор, крім <LI>, та приведений у цій таблиці, є контейнером. Таблиця 9.3 - Дескриптори форматування абзаців ДескрипторОпис <ADDRESS>Поштова адреса <BLOCKQUOTE>Відступ вправо <СІТЕ>Цитата <Н1>. . . <Н6>Заголовок (з першого по шостий рівні) <LI>Елемент списку <OL>Упорядкований список (використовується разом з <LI>)<UL>Неупорядкований список (використовується разом з <LI> <Р>Звичайний абзац <PRE>Неформатированный текст (зберігає пробіли) Використовується для розриву рядка і відступу. Створення звичайних абзаців У текстовому процесорі для створення нового абзацу необхідно просто натиснути клавішу <Enter>. В HTML для цього можна використовувати дескриптор . Але абзац — це щось ціле, до чого можна застосувати безліч операцій форматування. У Web-браузері абзаци відокремлюються один від одного порожнім рядком. У HTML абзац позначається за допомогою дескриптора <Р>. Наприклад: <html> <head> <title>Абзаци</title> </head> <body> І-й абзац ІІ-й абзац ІІІ-й абзац </body> </html> Організація структури документа за допомогою заголовків У HTML існує шість рівнів заголовків, відмічуваних дескрипторами від <Н1> по <Н6>. Розглянемо це на такому прикладі. <html> <head> <title>Заголовки</title> </head> <body> <h1>Заголовок 1</h1><style> .responsive_1 { width: 320px; height: auto; } .responsive_2 { width: 700px;} @media(min-width: 345px) { .responsive_1 { width: 320px; height: auto;} .responsive_2 { width: 700px;} } @media(min-width: 500px) { .responsive_1 { width: 320px; height: auto; float:left;} .responsive_2 { width: 700px;} } @media(min-width: 800px) { .responsive_1 { width: 338px; height: 282px; float:left;} } </style> <div style="margin:35px 35px 15px 0px;" class="responsive_1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3017271769063749" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3017271769063749" data-ad-slot="8088532211" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="uk-text-justify"> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6> </body> </html> Рис.9.5 – Приклад форматування тексту заголовками. У заголовку кожного рівня використовується той самий шрифт, але різного розміру Списки У HTML існує два різних типи списків — маркіровані і нумеровані. Маркіровані списки не упорядковані, тому що для інформації, що вони представляють, — це просто довільний набір речей. Для створення маркірованого списку використовується дескриптор <UL>. Після цього для додавання кожного елемента списку використовується дескриптор <LI>, як показано в наступному прикладі: <html> <head> <title>Маркірований список</title> </head> <body> Маркірований список: <ul> <li>1-й елемент списку</li> <li>2-й елемент списку</li> <li>3-й елемент списку</li> <li>4-й елемент списку</li> </ul> </body> </html> На мал. видно як маркірований список відображається в браузері. Рис.9.6 – Приклад маркірованого списку. Для зміни маркера, що використовується для відображення маркірованого списку, необхідно скористатися атрибутом TYPE дескриптора <UL>. Йому можна привласнювати значення CIRCLE, DISC або SQUARE. Однак поводження цього атрибута в різних броузерах відрізняється. Нумеровані списки впорядковані, тому що в них відображається послідовність чисел. Нумеровані списки використовуються для опису інструкцій або представлення списку ідей у порядку пріоритету. Для створення нумерованого списку застосовується дескриптор <OL>, як показано в слідуючому прикладі. Елементи в список додаються за допомогою дескриптора <LI>, так само, як і в попередньому прикладі. <html> <head> <title>Нумерований список </title> </head> <body> Нумерований список <ol> <li>1-й елемент списку</li> <li>2-й елемент списку</li> <li>3-й елемент списку</li> <li>4-й елемент списку</li> </ol> </body> </html> Рис.9.7 – Приклад нумерованого списку. Нумерація в нумерованому списку змінюється за допомогою атрибутів START і TYPE. Початковий номер привласнюється атрибутові START. Наприклад, для того щоб почати нумерацію з 5, необхідно привласнити атрибутові START значення 5: START=5. Можна також змінити тип нумерації, привласнивши атрибутові TYPE одне зі значень. Таблиця 9.4 - Коди TYPE для нумерованого списку КодОпис АПрописні букви (А, У, З, ...) АМалі літери (а, Ь, з,...) IПрописні римські числа (I, II, III, ...) IРядкові римські числа (i, ii, iii, ...) 1Числа(1,2,3,..) Попереднє форматування тексту на Web-сторінці При відображенні HTML-тексту у браузері всі зайві пробіли ігноруються. Так, якщо ви вставити між двома словами три пробіли, то все одно буде відображатися тільки один. Якщо ви вставите три порожніх рядки між двома рядками тексту, то всі ці порожні рядки заміняться одним пробілом, а текст розірветься по границі вікна. Для того щоб точно розташувати окремі елементи форми на сторінці, використовуйте контейнер <PRE>. При цьому залишаться всі пробіли, табуляції, переведення рядків і також оригінальний шрифт. Приклад: <html> <head> <title>Збереження форматування</title> </head> <body> При відображенні файлу HTML у браузері всі зайві пробіли ігноруються. Так, якщо ви вставити між двома словами три пробіли, то все одно буде відображатися тільки один. Якщо ви вставите два порожніх рядки між двома рядками тексту, то всі ці порожні рядки заміняться одним пробілом, а текст розірветься по границі вікна. <pre>Цей самий текст, але з дескриптором pre При відображенні файлу HTML у браузері всі зайві пробіли ігноруються. Так, якщо ви вставити між двома словами три пробіли, то все одно буде відображатися тільки один. Якщо ви вставите два порожніх рядки між двома рядками тексту, то всі ці порожні рядки заміняться одним пробілом, а текст розірветься по границі вікна.</pre> </body> </html>В браузері MS Internet Explorer цей текст набуде такого вигляду: Рис. 9.8. Збереження форматування з допомогою дескриптора <PRE> Таблиці Досить велика кількість документів, з якими ми зустрічаємось щодня містить таблиці, відповідно і в HTML-коді не обійшлось без дескрипторів які дозволяють створювати таблиці. Таблиці створюються дескриптором-контейнером <TABLE>. Таблиця вводиться по рядкам, а відповідно кожний рядок складається із клітинок. Всередині нього використовуються дескриптори-контейнери, записані в таблиці 9.5. Таблиця 9.5. Дескриптори побудови таблиць. ДескрипторОпис <CAPTION>заголовок таблиці. <TR>рядок таблиці. <TH> клітинка заголовку. В кожній такій клітинці текст виділений напівжирним шрифтом з вирівнюванням по центру. <TD>клітинка таблиці. Розміщення зображень на Web-сторінці Як правило, Web-сторінки складаються з зображень і тексту, що доповнюють один одного. Для вставки в Web-сторінку зображення використовується дескриптор <IMG>. Єдиним обов'язковим атрибутом є атрибут SRC, якому привласнюється URL файлу, що містить зображення. Необхідно також використовувати атрибути WIDTH і HEIGHT для визначення ширини і висоти зображення, щоб браузер "знав", скільки місця на сторінці виділити для зображення. Завдяки цьому користувач бачить вашу сторінку швидше. Якщо вказати ширину і висоту зображення менше дійсних розмірів, Web-браузер всерівно завантажить весь файл із зображенням, а потім стисне його до зазначених розмірів. У HTML можна керувати вирівнюванням зображення із супровідним текстом, привласнивши атрибут ALIGN дескриптора <IMG> значення TOP, MIDDLE або BOTTOM. Можна також змусити зображення вирівнятися по лівому або правому краї вікна, привласнивши атрибутові ALIGN значення LEFT або RIGHT, відповідно Працюйте з зображеннями GIF і png. Більшість браузерів Web відображати зображення саме в цих форматів. Якщо використовувати формат зображення, невідомий браузеру, то користувачеві знадобиться додаткова програма, щоб переглянути це зображення. Зв'язування тексту і зображень з іншими Web-сторінками. Для зв'язування тексту і зображень з іншими Web-сторінками використовується дескриптор <А>. Цей дескриптор є контейнером. Коли користувач клацне на посиланні, броузер відкриє сторінку, зазначену в атрибуті HREF дескриптора <А>. Якщо ви вставляєте посилання на Web-сторінки свого ж Web-вузла, указуйте відносні URL, а не ім'я вузла або повний шлях. Укажіть тільки необхідний шлях, по якому броузер знайде файл щодо поточного шляху. Якщо на сторінці за адресою http://www.sait.com/ ви створите посилання на img/pic1.gif, те Web-броузер зрозуміє це як http://www.sait.com/img/pic1.gif. Форми на Web-сторінках Форми додаються на Web-сторінку за допомогою контейнера <F0RM>. Текст, поміщений усередині контейнера міститься у форму для створення підказок. Дескриптори <PRE> і </PRE> указують браузерові на те, що текст відформатований, і його потрібно зберегти точно в такому виді, як він набраний, без видалення пробілів і порожніх рядків. Приклад. Проста форма з текстовим полем <html> <head> <title>Пpocтa форма з текстовим пoлeм</title> </head> <body> <form> Ведіть свої дані: Ім’я <input name=Name type=text size=30> Прізвище <input name=fam type=text size=30> Адреса <input name=adr type=text size=30> </form> </body> </html> Поля у форму додаються за допомогою безлічі дескрипторів. Найпоширенішим дескриптором є <INPUT>. У приведеному вище прикладі браузер відобразить запитання Як Вас звати:, а потім створить текстове поле у відповідності з дескриптором <INPUT>. Атрибут NAME дескриптора <INPUT> привласнює полю ім'я, щоб його можна було ідентифікувати при відправленні форми. В атрибуті TYPE зазначено, що потрібно створити текстове поле, а атрибут SIZE визначає, яку ширину в символах повинне мати текстове поле. На рис. 9.9 показано, як ця форма виглядає в браузері після заповнення тестових полів. Рис.9.9 – Документ з формою Насправді користувач не може відправити дані цієї форми, тому що немає кнопки для відправлення, а також не зазначений метод пересилання даних. Способи передачі даних форми Для того щоб одержати інформацію, введену користувачем, форму необхідно відправити деякій програмі на сервері або поштою на визначену адресу. Для вказівки способу передачі форми в дескрипторі <FORM> використовуються два атрибути. Перший атрибут, ACTION, містить URL, по якому необхідно відправити форму. Якщо форма передається програмі на сервері, то вказується URL цієї програми. Якщо форма посилається по електронній поштовій адресі, то привласнюється URL поштової адреси (наприклад, mailto:stud@mail.ru).Другий атрибут, METHOD, указує браузеру на те, як відправляти дані. Якщо ви привласните цьому атрибутові значення POST, то браузер відокремить дані від URL. Якщо ж привласнити цьому атрибутові значення GET, то дані форми будуть додані в кінець URL. При відправленні форми по поштовій адресі необхідно привласнити атрибутові METHOD значення GET. Додавання кнопки відправлення Вказавши спосіб відправлення форми, необхідно вибрати кнопку, при натискані на якій дані дійсно будуть відправлені. <html> <head> <title>Пpocтa форма з текстовими пoлями</title> </head> <body> <form action=”doc2.html” method=post> Ведіть свої дані: Ім’я <input name=Name type=text size=30> Прізвище <input name=fam type=text size=30> Адреса <input name=adr type=text size=30> <input type=submit value=Відправити> </form> </body> </html> Зверніть увагу на атрибути METHOD і ACTION дескриптора <FORM>. Ці атрибути вказують, що форма буде відправлятися поштою (не забудьте вставити mailto: у URL). Другий дескриптор <INPUT> описує кнопку відправлення. Рис.9.10 – Форма з кнопкою для передачі даних Коли користувач клацне на кнопці, Web-броузер відправить дані з форми у документ doc2.html. Радіокнопки Під радіокнопками розуміють можливість вибрати яку завгодно з цих кнопок, але не дві одночасно. Щоб створити залежну кнопку, потрібно привласнити атрибутові TYPE дескриптора <INPUT> значення RADIO і привласнити всім кнопкам у групі одне ім'я. Наприклад: <INPUT NAME=YESORNO TYPE=RADIO VALUE="Так" CHECKED> <INPUT NAME= YESORNO TYPE=RADIO VALUE="Ні"> <INPUT NAME=YESORNO TYPE=RADIO VALUE="Незнаю"> Оскільки всі дескриптори <INPUT> мають одне ім'я YESORNO, і їх атрибутам: TYPE привласнене значення RADIO, вони належать до однієї групи залежних кнопок. Для того щоб вказати обрану кнопку, коли броузер завантажує Web-сторінку, додайте до відповідної кнопки атрибут checked. Використання фреймів За допомогою фреймів (кадрів) вікно Web-броузера поділяється на самостійні вікна. У кожному кадрі міститься окрема Web-сторінка. За допомогою кадрів вікно можна спочатку розділити на рядки, а потім на стовпчики, або, навпаки, спочатку на стовпчики, а потім на рядки. Наприклад: <html> <head><title>Кадри</title></head> <body> <framset rows=”25%,75%”> <frame scr=”1.html> <framset cols=”25%,75%”> <frame scr=”2.html> <frame scr=”3.html> </framset> </framset> </body> </html> Для того щоб сховати границі кадрів, необхідно вказати параметри Set FRAMEBORDER="NO" MBORDER="0" У дескрипторі <FRAMESET>. Робота з кадрами починається дескрипторів <FRAMESET>, а закінчується </FRAMESET>. Між цими дескрипторами вказуються кадри і відповідні їм файли HTML. Для розбивки на рядки використовується атрибут ROWS, а для розподілу на стовпці — COLS. Цим атрибутам привласнюється список розділених комами значень, що задають розмір відповідного стовпчика або стовпця. Значення можна вказувати в пікселях або відсотках. Якщо ви задали три рядки або стовпчики, то кожен наступний визначений за допомогою дескриптора <FRAME> кадр буде займати наступну позицію. У дескрипторі <FRAME> указується файл HTML, що буде використовуватися в цьому кадрі. Для вказівки імені файлу (повний або відносного) використовується атрибут SRC. Розподіл на кадри можна продовжити й усередині вже створених рядків або стовпчиків. Для цього також використовується дескриптор <FRAMESET> . Так зовнішній дескриптор <FRAMESET> розбиває вікно на рядки, а внутрішній дескриптор <FRAMESET> поділяє середній рядок на двох стовпчиків — шириною 25% і 75%. Броузер завантажує файл HTML, зазначений у першому дескрипторі <FRAME>, у перший стовпчик, а зазначений у другому дескрипторі — у другий стовпчик. Файли HTML, поміщені в кадри, не повинні містити дескриптори <HEAD> і <BODY>. Це повинні бути прості файли HTML, що починаються дескриптором <HTML> і закінчуються </HTML>. Усе, що знаходиться між цими двома дескрипторами, відображається в кадрі. ЛІТЕРАТУРА 1.Бухвалов А.В. и др. Финансовые вычисления для профессионалов.- СПб.: БХВ-Петербург, 2001.-320с. ил. 2.Гарнаев А.Ю. Excel, VBA, Internet в экономике и финансах.- СПб.: БХВ-Петербург, 2001.- 816с.:ил. 3.Евдокимов В.В. и др. Экономическая информатика. Учебник для вузов. Под ред. Д.э.н., проф. В.В.Евдокимова. – СПб.: Питер, 1997. – 592с. 4.Згуровський М.З., Коваленко І.І., Міхайленко В.М. Вступ до комп’ютерних інформаційних технологій: Навч.посіб. – К.: Вид-во Європ. ун-ту (фінанси, інформ. системи, менеджм. і бізнес), 2000.- 265 с. 5.Информатика. Базовый курс/ Симонович С.В. и др.- СПб.: Питер, 2000.- 640с.:ил. 6.Карлберг, Конрад. Бизнес-анализ с помощью Excel.: Пер с англ.- К.: Диалектика, 1997.- 448с.: ил. 7.Лук‘янова В.В. Комп‘ютерний аналіз даних: Посібник. – К.: Видавничий центр „Академія”, 2003. – 344с. (Альма-матер)</div> <hr /> <div style="margin:0px 0px 0px 0px;" class="responsive_1_"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3017271769063749" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3017271769063749" data-ad-slot="8886608564" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </article> </div> <div class="uk-width-1-4@m"> <div style="margin:0px 0px 15px 0px;" class="uk-text-center"> <div uk-alert> <h3>Реферати!</h3> У нас ви зможете знайти і ознайомитися з рефератами на будь-яку тему. </div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3017271769063749" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3017271769063749" data-ad-slot="6775450545" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div uk-sticky="offset: 100" class="scrollspy uk-sticky uk-active uk-card uk-card-small uk-card-body uk-padding-remove-top uk-visible@m uk-text-center"> </div> </div> </div> </div> </div> <div class="uk-section uk-padding-remove-top uk-padding-remove-bottom"> <div class="uk-container"> <hr> </div> </div> <div class="uk-section uk-padding-remove section-cta uk-background-blend-lighten uk-background-center-center uk-background-cover uk-text-center" style="background-image: url(/assets/img/home-office.jpg)" > <div class="uk-background-muted1 uk-border-rounded1 uk-padding-large"> <h2>Не знайшли потрібний реферат ?</h2> Замовте написання реферату на потрібну Вам тему <a href="/go/referat/2" target="blank" class="uk-button uk-button-primary uk-button-large">Замовити реферат</a> </div> </div> <footer id="footer" class="uk-section uk-margin-remove uk-section-xsmall uk-text-small uk-text-muted border-top"> <div class="uk-container"> <div class="uk-text-center"> <a href="/" title="Реферат на тему">Реферати на тему</a> | <a href="/" title="Реферати українською мовою безкоштовно">Реферати українською мовою безкоштовно</a> | <a href="/" title="Скачати бесплатно реферати українською мовою">Скачати бесплатно реферати українською мовою</a> </div> <div class="uk-text-center"> © 2011 - 2023 - Українські реферати </div> </div> </footer> <link rel="stylesheet" href="/assets/fa/css/font-awesome.min.css"> </body> </html>