Реферат на тему:
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 окремі користувачі.
HTTP
HTTP розшифровується як 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 і помістити його між відкриваючою і
закриваючою кутовою дужками дескриптора :
Друга сторінка
Якщо рядок значення параметра містить пробіли, її необхідно записувати в
одинарних або подвійних лапках. Наприклад, .
Структура документів HTML
Кожен файл HTML має однакову базову структуру. Умовно його можна розбити
на дві частини – заголовок і тіло. Відповідно є дескриптори які
відносяться до заголовка і тіла html-документу, але крім цього, як ми
говорили, існують ще загальні дескриптори. Тому, структуру html,
розглядають поряд з структурою дескрипторів.
В загальному кожен html-файл починається з дескрипторів і
закінчується дескриптором . Усередині цього контейнера вкладені
два інші: і
про документ, а контейнер вміст документа. В загальному ж
структура html-файлу така:
Текст заголовку html-документа
Текст html-документу
Розглянемо більш детальніше дескриптори, які відносяться до кожної
частини html-документу.
Загальні дескриптори і коментарі.
До загальних дескрипторів можна віднести:
1) – дескриптор-контейнер, повідомляє браузеру, що вся
інформація, яка знаходиться між і є текстом, закодованим
у відповідності із форматом HTML.
2)
який міститься між цими дескрипторами є коментарем. Коментарі, так як і
коментарі в будь-якій мові програмування, на екран не виводяться.
3) – ще один вид дескриптора-коментаря.
Дескриптори заголовку HTML-документа
Заголовок html-документа задається за допомогою дескриптора-контейнера
для програми-браузера. Елементи, які розміщені всередині цього
контейнера, в вікні браузера не відображаються.
Цей дескриптор може містити в собі такі дескриптори (використовуються
тільки між парою
1)
буде відображатись в рядку заголовку вікна браузера.
Приклад:
Головна сторінка нашої організації
В вікні браузера це буде виглядати наступним чином:
Рис. 9.2 – Використання заголовків.
????¤?¤?$???????AE?)
Використовується для вказування відносних URL. Має один обов’язковий
атрибут HREF, який задає повний URL документа.
3) – надає інформацію про документ для браузера, пошукових
серверів і інших додатків.
Синтаксис:
,
де
CONTENT – вміст дескриптора, в поєднанні з HTTP-EQUIV може
використовуватися для автоматичного пере завантаження документа.
HTTP-EQUIV – забезпечує браузеру супровідну інформацію про документ.
Якщо його значення рівно REFRESH, то документ перезавантажується через
вказане в якості значення атрибута CONTENT.
NAME – ім’я дескриптора.
URL – URL завантажувального документа, після вказання інтервалу в
секундах в якості значення атрибута CONTENT.
Примітка: Цей дескриптор дуже важливий при роміщенні головних
Web-сторінок (зазвичай сторінок з назвами index.html) на
Internet-сайтах. В цьому дескрипторі вказується ключові слова для пошуку
пошуковими сторінками, а також короткий опис документа. Можна,
наприклад, в документ вставити такі рядки.
Дескриптори тіла HTML-документа
Найголовнішою частиною HTML-документу все ж можна назвати тіло
HTML-документу, саме в цій частині використовується найбільша частина
дескрипторів, записуються сценарії, аплети тощо. Повністю про всі
дескриптори та їх структуру, як вже було сказано, можна дізнатися за
адресою: HYPERLINK “http://www.w3c.org/” http://www.w3c.org . Ми ж
розглянемо найбільш часто вживані дескриптори HTML.
Форматування символів у HTML
Нижче приведені деякі дескриптори форматування символів, підтримувані
HTML. Кожен дескриптор, приведений тут є контейнером, тобто необхідно
також використовувати завершальні дескриптори для завершення
відповідного форматування.
Серед цих дескрипторів розглядають фізичні та логічні. Фізичні
дескриптори конкретно вказують, як необхідно форматувати текст.
Наприклад, дескриптор форматує текст напівжирним шрифтом.
Дескриптори , , , , , , і
також є фізичними. Логічні дескриптори визначають не те, як відображати
текст, а що він собою представляє, залишаючи Web-браузеру можливість
“вирішувати”, як відображати даний текст. Дескриптори, що залишилися в
таблиці, є логічними.
Таблиця 9.1 – Дескриптори форматування символів.
Дескриптор Опис
Напівжирний
Курсив
Підкреслений
Перекреслений
Перекреслений
Нижній індекс
Верхній індекс
Більший
Маленький
Приклад коду
Виділення (зазвичай курсив)
Використання визначеного шрифту
Приклад
Виділення (звичайно напівжирний)
Телетайп
Ім’я перемінної або параметра
Приклад
Приклад використання дескрипторів форматування символів:
Напівжирний
Курсив
Підкреслений
Перекреслений
Перекреслений
Нижній індекс
Верхній індекс
Більший
Меншиий
Виділення (зазвичай курсив)
У Web-браузері Microsoft Internet Explorer, цей текст буде відображатись
так, як показано на Рис.9.3.
Рис.9.3 – Приклад форматування символів.
Використання шрифтів
Кожний браузер для відображення використовує свій шрифт, тому одна і таж
сторінка в різних браузерах буде відображатись різними шрифтами. Але,
якщо нам потрібно використовувати визначений шрифт, то можна вказати,
який шрифт слід використовувати. Крім цього можна задати розмір і колір
шрифту.
Для того щоб визначити шрифт тексту, його розмір і колір, використовуйте
дескриптор разом з атрибутами COLOR, FACE і SIZE. Можна вибрати
будь-яку комбінацію цих атрибутів. Атрибут COLOR задає колір тексту.
Колір можна вказувати буквеним, або числовим значенням (Див. Табл. 9.2)
Атрибут FACE задає назву шрифту і задається одним або декількома назвами
шрифтів, розділених комами. Якщо Web-браузер не знайде на машині перший
зазначений шрифт, вона спробує відобразити текст другим і т.д. Атрибут
SIZE задає відносний розмір шрифту: +1 позначає на один розмір більше,
+2 — на два розміри більше, а -1 — на один розмір менше.
Шрифт, що вказується вами, у дескрипторі повинен існувати на
комп’ютері користувача і мати те ж ім’я. У противному випадку браузер
спробує відобразити його альтернативним шрифтом або шрифтом за
замовчуванням.
Приклади зміни
шрифту:
Приклади зміну шрифту
Цей приклад демонструє, як змінювати шрифт
для блоку тексту.
Цей приклад демонструє, як змінювати розмір
для блоку тексту.
Цей приклад демонструє, як змінювати шрифт, розмір і колір блоку тексту.
Цей текст в браузері 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
SILVER Cрібний (ясно-сірий) #C0C0C0
TEAL Темно-зелений #008080
WHITE Білий #FFFFFF
YELLOW Жовтий #FFFF00
Форматування абзаців у HTML
Нижче приведена більшість дескрипторів форматування абзаців,
підтримуваних HTML. Кожен дескриптор, крім
приведений у
цій таблиці, є контейнером.
Таблиця 9.3 – Дескриптори форматування абзаців
Дескриптор Опис
Поштова адресаВідступ вправо
Цитата
. . . Заголовок (з першого по шостий рівні)
Елемент списку Упорядкований список (використовується разом з
- )
Неупорядкований список (використовується разом з
Звичайний абзац
Неформатированный текст (зберігає пробіли)
Використовується для розриву рядка і відступу.Створення звичайних абзаців
У текстовому процесорі для створення нового абзацу необхідно просто
натиснути клавішу. В HTML для цього можна використовувати
дескриптор
. Але абзац — це щось ціле, до чого можна застосувати
безліч операцій форматування. У Web-браузері абзаци відокремлюються один
від одного порожнім рядком. У HTML абзац позначається за допомогою
дескриптора .Наприклад:
Абзаци
І-й абзац
ІІ-й абзац
ІІІ-й абзац
Організація структури документа за допомогою заголовків
У HTML існує шість рівнів заголовків, відмічуваних дескрипторами від
по . Розглянемо це на такому прикладі.
Заголовки
h1 – Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6
Рис.9.5 – Приклад форматування тексту заголовками.
У заголовку кожного рівня використовується той самий шрифт, але різного
розміруСписки
У HTML існує два різних типи списків — маркіровані і нумеровані.
Маркіровані списки не упорядковані, тому що для інформації, що вони
представляють, — це просто довільний набір речей. Для створення
маркірованого списку використовується дескриптор. Після цього для
додавання кожного елемента списку використовується дескриптор- , як
показано в наступному прикладі:
Маркірований список
Маркірований список:
- 1-й елемент списку
- 2-й елемент списку
- 3-й елемент списку
- 4-й елемент списку
На мал. видно як маркірований список відображається в браузері.
Рис.9.6 – Приклад маркірованого списку.
Для зміни маркера, що використовується для відображення маркірованого
списку, необхідно скористатися атрибутом TYPE дескриптора. Йому
можна привласнювати значення CIRCLE, DISC або SQUARE. Однак поводження
цього атрибута в різних броузерах відрізняється.Нумеровані списки впорядковані, тому що в них відображається
послідовність чисел. Нумеровані списки використовуються для опису
інструкцій або представлення списку ідей у порядку пріоритету. Для
створення нумерованого списку застосовується дескриптор, як
показано в слідуючому прикладі. Елементи в список додаються за допомогою
дескриптора- , так само, як і в попередньому прикладі.
Нумерований список
Нумерований список
- 1-й елемент списку
- 2-й елемент списку
- 3-й елемент списку
- 4-й елемент списку
Рис.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-тексту у браузері всі зайві пробіли ігноруються.
Так, якщо ви вставити між двома словами три пробіли, то все одно буде
відображатися тільки один. Якщо ви вставите три порожніх рядки між двома
рядками тексту, то всі ці порожні рядки заміняться одним пробілом, а
текст розірветься по границі вікна.Для того щоб точно розташувати окремі елементи форми на сторінці,
використовуйте контейнер. При цьому залишаться всі пробіли,
табуляції, переведення рядків і також оригінальний шрифт.Приклад:
Збереження форматування
При відображенні файлу HTML у браузері всі зайві пробіли
ігноруються.Так, якщо ви вставити між двома словами три пробіли, то все
одно буде відображатися тільки один.Якщо ви вставите два порожніх рядки між двома рядками тексту, то всі ці
порожні рядки заміняться одним пробілом, а текст розірветься по границі
вікна.Цей самий текст, але з дескриптором pre При відображенні файлу HTML у браузері всі зайві пробіли ігноруються. Так, якщо ви вставити між двома словами три пробіли, то все одно буде відображатися тільки один. Якщо ви вставите два порожніх рядки між двома рядками тексту, то всі ці порожні рядки заміняться одним пробілом, а текст розірветься по границі вікна.В браузері MS Internet Explorer цей текст набуде такого вигляду:
Рис. 9.8. Збереження форматування з допомогою дескриптора
Таблиці
Досить велика кількість документів, з якими ми зустрічаємось щодня
містить таблиці, відповідно і в HTML-коді не обійшлось без дескрипторів
які дозволяють створювати таблиці.Таблиці створюються дескриптором-контейнером
.
Таблиця вводиться по рядкам, а відповідно кожний рядок складається із
клітинок. Всередині нього використовуються дескриптори-контейнери,
записані в таблиці 9.5.Таблиця 9.5. Дескриптори побудови таблиць.
Дескриптор Опис
заголовок таблиці. рядок таблиці. клітинка заголовку. В кожній такій клітинці текст
виділений напівжирним шрифтом з вирівнюванням по центру.клітинка таблиці. Розміщення зображень на Web-сторінці
Як правило, Web-сторінки складаються з зображень і тексту, що доповнюють
один одного. Для вставки в Web-сторінку зображення використовується
дескриптор . Єдиним обов’язковим атрибутом є атрибут SRC, якому
привласнюється URL файлу, що містить зображення. Необхідно також
використовувати атрибути WIDTH і HEIGHT для визначення ширини і висоти
зображення, щоб браузер “знав”, скільки місця на сторінці виділити для
зображення. Завдяки цьому користувач бачить вашу сторінку швидше.Якщо вказати ширину і висоту зображення менше дійсних розмірів,
Web-браузер всерівно завантажить весь файл із зображенням, а потім
стисне його до зазначених розмірів.У HTML можна керувати вирівнюванням зображення із супровідним текстом,
привласнивши атрибут ALIGN дескриптора значення 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-сторінку за допомогою контейнера
. Текст,
поміщений усередині контейнера міститься у форму для створення підказок.
Дескрипториіуказують браузерові на те, що текст
відформатований, і його потрібно зберегти точно в такому виді, як він
набраний, без видалення пробілів і порожніх рядків.Приклад. Проста форма з текстовим полем
Пpocтa форма з текстовим пoлeм
Поля у форму додаються за допомогою безлічі дескрипторів. Найпоширенішим
дескриптором є . У приведеному вище прикладі браузер відобразить
запитання Як Вас звати:, а потім створить текстове поле у відповідності
з дескриптором . Атрибут NAME дескриптора привласнює полю
ім’я, щоб його можна було ідентифікувати при відправленні форми. В
атрибуті TYPE зазначено, що потрібно створити текстове поле, а атрибут
SIZE визначає, яку ширину в символах повинне мати текстове поле.На рис. 9.9 показано, як ця форма виглядає в браузері після заповнення
тестових полів.Рис.9.9 – Документ з формою
Насправді користувач не може відправити дані цієї форми, тому що немає
кнопки для відправлення, а також не зазначений метод пересилання даних.Способи передачі даних форми
Для того щоб одержати інформацію, введену користувачем, форму необхідно
відправити деякій програмі на сервері або поштою на визначену адресу.Для вказівки способу передачі форми в дескрипторі
Зверніть увагу на атрибути METHOD і ACTION дескриптора
Нашли опечатку? Выделите и нажмите CTRL+Enter