HTML (HyperText Markup Language) – це спеціальна мова форматування текстових документів (його ще називають мовою розмітки документів – програма перегляду WWW документів). HTML є досить простим набором команд, які описують структуру документа. HTML дозволяє виділити в тексті окремі логічні частини (заголовки, абзаци, списки тощо), помістити на Web-сторінку окремо підготовлену фотографію або картинку, організувати на сторінці посилання для зв'язку з іншими документами.

HTML не визначає конкретні та точні атрибути форматування документа, як, наприклад, Microsoft Word. Конкретний вид документа остаточно визначає лише програма- браузерна вашому комп'ютері. Необхідність саме такого підходу пов'язана з різнорідністю апаратного та програмного забезпеченнякомп'ютери, підключені до Інтернету. HTML також не є мовою програмування, але web-сторінки можуть включати вбудовані програми. скриптимовами Javascript та Visual Basic Script та програми- аплетимовою Java.

З точки зору користувача Windows, Web-сторінка – це просто файл типу *.htm або *.html, що знаходиться на сервері Інтернет, в локальної мережіабо на жорсткому диску Вашої машини.

Запам'ятайте, що HTML не є мовою програмування, вона призначена лише для розмітки документів. Тобто. по суті, створюючи HTML сторінку, ви просто редагуєте текст за допомогою тегів приблизно так само, як у звичайному текстовому редакторі. Кожен тег має свою властивість, але всі вони полягають між кутовими дужками.<" и ">", наприклад, , .

Усі теги в HTML поділяються на два типи – це парні та непарні. Парними вважаються ті, у яких тег, що відкривається, вимагає наявності тега, що закривається. Теги, що закриваються в html, позначаються слішем і пишуться так . Непарні ж теги не вимагають тега, що закривається. Прикладом таких тегів є тег перенесення на наступний рядок
. Також існують теги обов'язкові, які повинні обов'язково використовуватися на всіх сторінках, і необов'язкові, які використовуються побажанням.

Основна маса контенту, представленого в інтернеті, – це веб-сторінки. Це історично найперший тип документів, призначених для розміщення у віртуальному мережевому просторі, але досі зберіг актуальність і практично не має конкуруючих форматів. Яка структура веб-сторінок? За допомогою яких засобів веб-розробки вони створюються?

Що таке Web-сторінка?

"Перелічіть основні елементи Web-сторінки" - каже нам екзаменатор на уроці інформатики. Що ми зможемо сказати йому у відповідь? Насамперед оповідаємо про те, що являє собою веб-сторінка в принципі.

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

Місце та роль веб-сторінок у структурі сайтів

Чи можна сказати, що веб-сторінка є основним компонентом веб-сайту? Частково це правильно. Однак, як ми зазначили вище, веб-сторінка — це лише текстовий документ. На сайті ж, як правило, також розміщуються картинки, відео та інші мультимедійні елементи. Веб-сторінка вмістити їх у себе не може, проте у своїй структурі вона може містити посилання на них. Таким чином, веб-сторінку можна назвати основним компонентом сайту в аспекті чільної ролі у відображенні віртуального контенту перед користувачами.

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

Принцип застосування гіпертексту

Отже, Web-сторінкою називається документ, складений мовою HTML, з допомогою якого здійснюється розмітка гіпертексту. Але що за явище? Що таке гіпертекст? Не заглиблюючись в теорію, відзначимо, що це текст, який тим чи іншим чином дозволяє отримати швидкий доступдо іншого - за допомогою посилань. У звичайній книзі це неможливо – там «простий текст». Для отримання доступу до потрібній сторінцічитач повинен зробити кілька перегортань, до цього ознайомившись із змістом чи виносками. У режимі «гіпертексту» основну частину роботи здійснює комп'ютер за рахунок відомостей, що відображаються в HTML-елементах сторінки.

Якщо викладач інформатики каже нам: "Перерахуйте основні елементи Web-сторінки", ми цілком коректним чином можемо почати розповідь про компоненти відповідного документа, які створюються з допомогою мови розмітки HTML. Тому спочатку розглянемо деякі теоретичні моменти, що стосуються HTML.

Структура мови HTML: теги

Як браузер зчитує потрібні дані про веб-сторінку з документа, складеного на мові HTML? Дуже просто.

Основні елементи даної мови- Це теги. Вони в більшості випадків парні - є відкриває, а є закриває. Перші позначаються лише за допомогою кутових дужок. Другі – аналогічно, але перед другою дужкою ставиться слеш – символ /. Браузер вміє їх розпізнавати, і тому без проблем відображає вміст веб-сторінок відповідно до алгоритмів, які створюють розробник документа.

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

Атрибути

Інші найважливіші елементи HTML-мови – атрибути. З їх допомогою творець веб-сторінки може задавати властивості контенту - наприклад, висоту шрифту, його колір, положення щодо сторінки. Те саме стосується картинок, відео та інших мультимедійних компонентів. Атрибути пишуться в межах тега, що відкриває.

Вміст

Між тегом, що відкриває та закриває, розміщується наступний ключовий компонент веб-сторінки — вміст. Це, власне, той самий контент, який має відображатись перед користувачем на екрані. Це може бути текст, посилання, зображення, відео або інший мультимедійний елемент.

Елементи веб-сторінок

"Так перерахуйте основні елементи Web-сторінки, нарешті!" – повторює викладач. "Із задоволенням," - відповідаємо ми йому. Що ж входить у структуру типу документів, що розглядається? Умовимося, що розглядатимемо цей аспект саме в контексті HTML-елементів веб-сторінки. Тобто їх відображення у браузері – те, що користувач бачить на екрані – нас буде цікавити меншою мірою. Справа в тому, що відповідні HTML-алгоритми, на основі яких програма відображає контент однаково, можуть бути різними. І це особливість мови HTML: потрібне зображення на Web-сторінці можна вивести різними способами. При цьому вони можуть бути як рівнозначними з точки зору трудовитрат творця веб-сторінки методами, так і припускати різний обсяг зусиль і часу на їх здійснення.

Елементи веб-сторінок: заголовок

Стандартні елементи Web-сторінки, як би це не дивно звучало, представлені в дуже невеликій кількості. По суті їх лише два — заголовок і основна частина документа. Водночас кожен із них може мати досить складну структуру.

Яка специфіка заголовка? Розташовується він у верхній частині веб-сторінки. HTML-код, який формує заголовок, як правило, передбачає «шифрування» тільки тексту, але при необхідності у відповідному елементі можна також розміщувати невеликі графічні вставки. І це, власне, все, що можна сказати про заголовок. Здавалося б, його роль структурі відповідного документа незначна. Але це не так. Заголовки веб-сторінок дуже значні з погляду індексації сайтів у пошукових системах - Яндексі, Google. Цей елементмає бути повністю релевантним змісту веб-сторінки, а також тематичній специфіці сайту.

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

Заголовок веб-документа може містити ряд додаткових елементів. Іноді формат веб-сторінки може вимагати відображення тексту у конкретному кодуванні. Як забезпечити відповідність веб-документу цьому критерію? Дуже просто. У структурі заголовка документа мають бути розміщені HTML-алгоритми, що наказують браузеру використовувати конкретне кодування мови - наприклад, кириличну. Відповідні команди розміщуються у межах тега META, Який, так само як і інші, буває відкриває і закриває.

Основна частина веб-сторінки

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

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

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

Базові HTML-теги

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

Досить поширений тег P. Він, як і інші аналогічні елементи мови гіпертекстової розмітки, може бути відкриваючим і закриваючим. Цей тег дозволяє форматувати окремо взятий абзац документа. Можна, наприклад, задавати певний тип шрифту або його колір. Однак це здійснюється за допомогою додаткового тега – FONT. При цьому він розміщуватиметься всередині того, який позначає межі абзацу — це дозволить не розповсюджувати HTML-команду, що відображає тип кращого шрифту, на інші елементи веб-сторінки.

За допомогою тега TABLE створюються таблиці. За допомогою відповідних атрибутів можна визначати необхідну кількість стовпців і рядків, задавати їх ширину, специфіку кордонів, розмір і колір шрифту тексту в таблиці.

Відповідає за обробку браузером картинок. У ньому також можна розміщувати різні атрибути, що регулюють розмір картинки, її положення на сторінці.

Посилання на інші веб-документи або файли вказуються за допомогою тега A. Як правило, всередині нього розміщуються атрибути, які позначають той факт, що в структурі веб-сторінки гіперпосилання. При цьому вказується документ, файл чи сайт, на який вона веде.

Поширений такий тег як FRAMESET. З його допомогою можна розділити простір веб-сторінки на кілька областей — кадрів. У кожному їх можна на окремі веб-документи. Тобто кадри дозволяють коректно розташувати на одному екрані одночасно дві і більше сторінки.

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

Специфіка інструментів веб-розробки

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

Корисно буде додати, що веб-розробник може задіяти у своїй роботі повноцінні мови програмування, такі як Perl, PHP, Java, Python, за допомогою яких можливості роботи з гіпертекстовими документами стають ще ширшими. Необхідність у цьому може бути пов'язана з тим, що галузі застосування веб-технологій сьогодні — різні. Завдання, які стоять перед сучасними розробниками можуть бути досить складними. Наприклад, іноді потрібно здійснити переклад Web-сторінок, написаних російською мовою, англійською. У цьому випадку інструментарій розробника буде найрізноманітнішим.

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

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

Веб-с айт (від англ. website: web- «павутина, мережа» та site- "місце", буквально "місце, сегмент, частина в мережі") - сукупність електронних документів (файлів) приватної особи або організації в комп'ютерної мережі, об'єднана під однією адресою (доменним ім'ям або IP-адресою).

Усі сайти в сукупності складаютьВсесвітнє павутиння , де комунікація (павутина) поєднує сегменти інформації світової спільноти в єдине ціле - базу даних та комунікації планетарного масштабу. Для прямого доступу клієнтів до сайтів на серверах було спеціально розроблено протокол HTTP .

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

Програма, що показує веб-сторінку, називається веб-браузер.

Створення Web-сайтів реалізується за допомогою мови розмітки гіпертекстових документів HTML. Технологія HTML полягає в тому, що в звичайний текстовий документ вставляються символи керування (теги) і в результаті ми отримуємо Web-сторінку. Браузер при завантаженні Web-сторінки представляє її на екрані у вигляді, який задається тегами.

HTML дозволяє:

· Форматувати текст;

· Включати в документ зображення, мультимедіа;

· За допомогою цієї мови створюються гіпертекстові посилання на інші Web-сторінки.

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

Для створення Web-сторінок використовуються найпростіші текстові редактори, які не включають у документ, що створюється, керуючі символи форматування тексту. Як такий редактор у Windows можна використовувати стандартний додаток"Блокнот".

Зазвичай файл веб-сторінки має розширення.html або.htm.

Крім того, існує багато технологій, в яких основні дії щодо створення сайтів вже автоматизовані, залишається лише внести зміни відповідно до своєї тематики.

Для того, щоб переглянути HTML-сторінку, достатньо просто ввести її URL-адресу в рядку адреси Web-браузера, а потім слідувати за посиланнями. Але саме в цьому і полягає основна проблема – як дізнатися адресу сторінки? Найчастіше буває так, що відомо те, що необхідно знайти, але невідомо, де саме шукати. Для вирішення цієї проблеми існують спеціальні пошукові системи. З погляду користувача, Пошукова система- це звичайний сайт на головній сторінці якого знаходяться розбиті за рубриками («Спорт», «Бізнес», «Комп'ютери» тощо) посилання на інші сайти. Крім того, пошукова система дозволяє користувачу ввести декілька ключових слівта повертає посилання на сторінки, які містять ці ключові слова.

Веб сайт

Веб-сайт (англ. Website, від web - павутиння та site - "місце") - у комп'ютерній мережі об'єднана під однією адресою сукупність документів приватної особи чи організації. За умовчанням мається на увазі, що сайт розташовується в мережі Інтернет. Всі веб-сайти Інтернету разом складають Всесвітню павутину. Для прямого доступу клієнтів до веб-сайтів на серверах було розроблено протокол HTTP. Веб-сайти інакше називають Інтернет-представництвом людини чи організації. Коли кажуть "своя сторінка в Інтернеті", то мається на увазі цілий веб-сайт або особиста сторінка у складі чужого сайту. Крім веб-сайтів у мережі Інтернет, також доступні WAP-сайти для мобільних телефонів.

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

Найчастіше в Інтернеті одному веб-сайту відповідає одне доменне ім'я. Саме за доменними іменами сайти ідентифікуються у глобальної мережі. Можливі інші варіанти: один сайт на кількох доменах або кілька веб-сайтів під одним доменом. Зазвичай кілька доменів використовують великі сайти (веб-портали), щоб логічно відокремити різні видипослуг, що надаються (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Непоодинокі і випадки виділення окремих доменів для різних країнчи мов. Наприклад, google.ru та google.fr логічно є сайтом Гугла різними мовами, але технічно це різні сайти. Об'єднання кількох сайтів під одним доменом характерне для безкоштовних хостингів. Для ідентифікації сайтів на адресі після вказівки хоста стоїть тильда та ім'я сайту: example.com/~my-site-name/.

Перед тим, як ми розпочнемо нашу подорож по уроках створення сайтів на HTML та CSS, важливо розуміти різницю між двома мовами, синтаксис кожної мови та деяку основну термінологію.

Що таке HTML та CSS?

HTML (HyperText Markup Language, мова розмітки гіпертексту) задає структуру вмісту та його зміст, визначаючи такий контент як, наприклад, заголовки, абзаци чи зображення. CSS (Cascading Style Sheets) або каскадні таблиці стилів - це мова презентацій, створена для оформлення зовнішнього вигляду контенту, яка використовує, наприклад, шрифти або кольори.

Ці дві мови - HTML і CSS незалежні одна від одної і повинні такими залишатися. CSS не повинен бути написаний усередині HTML-документа і навпаки. Як правило, HTML завжди представлятиме вміст, а CSS завжди визначатиме його оформлення.

При такому розумінні різниці між HTML і CSS давайте поринемо в HTML докладніше.

Основні терміни HTML

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

Елементи

Елементи вказують, як визначити структуру та вміст об'єктів на сторінці. Деякі з часто використовуваних елементів включають кілька рівнів заголовків (визначені як елементи з

до

) та абзаців (визначені як

); до списку можна включити елементи ,

, , і і багато інших.

Елементи ідентифікуються за допомогою кутових дужок<>, що оточують ім'я елемент. Таким чином, елемент виглядатиме так:

Теги

Додавання кутових дужок< и >довкола елемента створює те, що відомо як тег. Теги найчастіше зустрічаються в парах тегів, що відкривають і закривають.

Відкриваючий тег вказує на початок елемента. Він складається із символу<, затем идёт имя элемента и завершается символом >; наприклад,

.

Закриває тег відзначає кінець елемента. Він складається із символу< с последующей косой чертой и именем элемента и завершается символом >; наприклад,

.

Вміст, що знаходиться між тегами, що відкриває і закриває, є вмістом цього елемента. Посилання, наприклад, матиме тег, що відкриває та закриваючий тег. Що знаходиться між цими двома тегами буде вміст посилання.

Так, теги посилань виглядатимуть приблизно так:

...

Атрибути

Атрибути є властивостями, які застосовуються для надання додаткової інформаціїпро елемент. Найбільш поширені атрибути включають атрибут id , який ідентифікує елемент; атрибут class, який класифікує елемент; атрибут src, який визначає джерело вбудованого вмісту; атрибут href , який вказує посилання на пов'язаний ресурс.

Атрибути визначаються у тезі, що відкриває, після імені елемента. Загалом, атрибути включають в себе ім'я та значення. Формат для цих атрибутів складається з імені атрибута зі знаком рівності за ним, а потім у лапках йде значення атрибута. Наприклад, елемент з атрибутом href буде виглядати так:

Shay Howe

Демонстрація основних термінів HTML

Цей код відображатиме текст "Shay Howe" на веб-сторінці і при натисканні на цей текст веде користувача на http://shayhowe.com. Елемент посилання оголошено за допомогою тега, що відкриває і закриває тегаохоплюючих текст, а також атрибуту та значення адреси посилання оголошеної через href="http://shayhowe.com" у тезі, що відкриває.

Мал. 1.01. Синтаксис HTML у вигляді схеми включає елемент, атрибут та тег

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

Налаштування структури документа HTML

HTML-документи є прості текстові документи, збережені з розширенням.html, а не.txt. Щоб почати писати HTML спочатку потрібно текстовий редакторякий вам зручний у використанні. На жаль, сюди не входить Microsoft Word чи Pages, оскільки це складні редактори. Двома найбільш популярними текстовими редакторами для написання HTML та CSS є Dreamweaver та Sublime Text. Безкоштовні альтернативитакож Notepad++ для Windows та TextWrangler для Mac.

Усі HTML-документи містять обов'язкову структуру, яка включає такі декларації та елементи: , , і .

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

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

Весь видимий вміст веб-сторінки перебуватиме в елементі . Структура типового HTML-документа виглядає так:

Привіт світ!

Це веб-сторінка.

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

Цей код показує документ, починаючи з оголошення типу документа,потім відразу йде елемент . Усередині йдуть елементи і . Елемент містить кодування сторінки через тег та назва документа через елемент

Час для перевірки нашої роботи та перегляду, як уживаються разом наші HTML та CSS. Відкриття файлу index.html (або оновлення сторінки, якщо вона вже відкрита) у браузері має показати трохи інший результат, ніж раніше.

Мал. 1.04. Наш сайт Styles Conference зі скиданням CSS

Демонстрація та вихідний код

Нижче ви можете переглянути сайт Styles Conference у його нинішньому стані, а також завантажити вихідний кодсайту зараз.

Резюме

Отже, все гаразд! Ми зробили кілька великих кроків у цьому уроці.

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

Нагадаємо, що ми розглянули таке:

• Різниця між HTML та CSS.
• Знайомство з елементами HTML, тегами та атрибутами.
• Налаштування структури першої веб-сторінки.
• Знайомство з селекторами CSS, властивостями та значеннями.
• Робота із селекторами CSS.
• Вказівник на CSS з HTML.
• Важливість CSS скидання.

Тепер давайте ближче розглянемо HTML і познайомимося трохи із семантикою.

Ресурси та посилання

• Common HTML terms via Scripting Master
• CSS Terms & Definitions via Impressive Webs
• CSS Tools: Reset CSS via Eric Meyer

Створити якісну web-сторінку непросто, для цього потрібні не лише навички дизайнера для красивого та стильного оформлення, а й досвід програмування. Складність та обсяг програм, необхідних для створення того чи іншого сайту, залежать від багатьох факторів, таких як структура, мета, функціональність, забезпечення надійності та система захисту сайту від інформаційних атак з боку інформації-«прилипали» (спам, сміття) та вірусів.

Web-технологія (технологія гіпертексту) дозволила пов'язати всю сукупність опублікованих в Інтернеті документів у єдину систему – WWW. Гіпертекстовий документ містить гіперпосилання. Їх зазвичай виділяють кольором та підкресленням. Гіперпосилання дозволяють користувачеві негайно перейти до потрібного документа незалежно від місця його фізичного розташування. Це значно полегшує пошук інформації в Інтернеті.

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

Якщо говорити про створення документів HTML, можна уявити два способу формування.

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

Принципи іншого підходу можна зрозуміти з урахуванням вивчення роботи текстових процесорів. Інформацію про форматування документа також можна розглядати як «розмітку», яка додається до форматованого документа. Однак для використання текстового процесора не потрібно знати про формат документа та «мову розмітки»: зміни, що відображаються на екрані, вносяться в документ автоматично. Такий принцип відповідності екранного зображення реальному отримав назву WYSIWYG (вайсевег) (від англійської What You See Is What You Get (наочний ісоччу гат) - Що бачите, те і отримуєте).

Вони дозволяють створювати цілі web-вузли (портали) та використовують усі сучасні технології. Такі web-редактори підходять і професіоналам. Якщо ви користуєтеся MS Office, можете використовувати FrontPage з цього комплекту. Є також Netscape Composer у складі Netscape Communicator. Також можна скористатися демонстраційною версією web-редактора Macromedia HomeSite, отримавши її на офіційному сайті компанії Adobe: www.adobe.com.

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

Отже, для створення web-сторінок вам знадобиться текстовий чи web-редактор. Слід зазначити, що всі web-редактори обов'язково містять і текстовий редактор, web-редакторів зараз існує велика кількість, Але найпотужнішими визнано три:

1. Macromedia Dreamweaver (макромедіа дрімвіваф);

2. Allaire HomeSite (алер хом сайт);

3. Microsoft FrontPage(Майкрософт фонт пейдж).

Вони дозволяють створювати цілі web-вузли (портали) та використовують усі сучасні технології. Такі web-редактори підходять і професіоналам. Якщо ви користуєтеся MS Office, можете використовувати FrontPage з цього комплекту. Є також Netscape Composer у складі Netscape Communicator. Також можна скористатися демонстраційною версією web-редактора Macromedia HomeSite, отримавши її на офіційному сайті компанії Adobe (едобі): www.adobe.com. За допомогою браузера слід зайти на вказаний сайт у розділі Downloads/Trial Downloads та вибрати Macromedia, HomeSite.

Можна скористатися російською версією FrontPage Express із локалізованого Internet Explorer – це скорочений варіант FrontPage, але дуже зручний для початку. Російською мовою також відомий web-редактор Visual Workshop (http://www.snkey.net/download/products/index.html).

Сучасні послуги в Інтернеті пропонують готові конструктори сайтів. Розглянемо їх з прикладу конструктора сайтів «Мій сайт» (www.narod.yandex.ru). З його допомогою можна отримати місце під свій сайт ( домашню сторінку) і за 5 хв створити свій web-сайт з картинками, фотографіями та ін.

Процес конструювання сайту включає три етапи:

1. вхід у конструктор сайту;

2. реєстрація, призначення імені сайту;

3. конструювання сайту із використанням заготовок.

Для створення рукотворного сайту, єдиного свого роду, потрібні інші web-інструменти.

Крім HTML та конструкторів сайтів можна скористатися й іншими засобами програмування web-сторінок. Одним із засобів програмування сайтів є CGI (сі джі ай) (Common Gateway, комон гейтвай).

Принцип CGI простий і природний: програма за сервера приймає деякі дані, обробляє їх і видає у вигляді web-сторінки. Це дуже часто явище на сьогоднішній день, і часом навіть не підозрюєш, що маєш справу не зі звичайною сторінкою, а з результатом роботи CGI-скрипту (коду). Область використання CGI широка, а цілі різноманітні. Мова програмування, на якому пишеться скрипт, має бути гнучкою і в той же час потужною, оскільки має бути не тільки постійна робота з файлами, але і з БД, ОС та web-сервером. Найкращими мовами для CGI-програмування є Сі (C++) і Perl. Останній найчастіше використовується для цих цілей через свою простоту, надійність і широту можливостей.

Мова Сі по праву вважається універсальною і знайшла своє місце в середовищі CGI. Його застосування природно в рідній стихії - Unix, на основі якої в більшості випадків і будується веб-сайт.

Для CGI-програмування використовується також мова C++, який передбачає створення і знищення деяких об'єктів, що реалізуються через класи, - по суті типів користувача даних. Природно створити, наприклад, клас Guestbook чи DataBaseEntry, який містив би необхідні змінні та функції. Варто зауважити, що багато нових мов програмування (Java, JavaScript, Perl) містять конструкції, схожі з конструкціями Сі або є їх точними копіями. Тому рекомендується спочатку вивчити саме цю фундаментальну мову.

Мова Perl унікальна. По-перше, у ньому відсутні типи даних, що сприятливо впливає написання CGI-скриптів. По-друге, дуже багато конструкцій взято із Сі. Слід зазначити, що у Perl часто використовуються регулярні висловлювання, схожі ті, що застосовуються у сценаріях Unix Shell. Є зручний цикл foreach та красиві, по суті, модифікатори виразів. Perl має стандартну бібліотеку, в якій є функції пошуку, роботи з web-сервером, графікою і т.п. З цього можна зробити висновок, що для програміста, знайомого з Unix, не важко вивчити Perl. Для написання такої програми достатньо вміти працювати з файлами з Perl і, небагато, зі змінними оточення web-сервера.

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

Запитання для самоконтролю:

1. Що означає поняття HTML-документу?

2. Які переваги цього виду документа?

3. Що означає поняття «тег»?

4. Які різновиди тегів існують?

5. Що входить до складу об'єктів керування тэгами?

www.univer.omsk.su/omsk/Edu/htmlbook/school/index2.htm

http://dvo.sut.ru/libr/ite/i280levc/index.htm Ю.П. Левчук, Є.П. Охінченко, О.Д. Сотніков, Т.А. Фоменко ІНФОРМАТИКА Частина 2 ІНТЕРНЕТ-ТЕХНОЛОГІЇ

1. Web-сторінка ( документ HTML) являє собою:

а) текстовий файл із розширенням.txt або.doc;

б) текстовий файл із розширенням.htm або.html;

в) двійковий файл із розширенням.com або.exe;

г) графічний файл з розширенням.gif чи.jpg.

2. Для перегляду Web-сторінок в Інтернеті використовуються програми:

а) Microsoft Word чи Word Pad;

б) Microsoft Accessабо Microsoft Works;

в) Internet Explorer чи NetScape Navigator;

г) HTMLPad чи Front Page.

3. Тег – це:

а) інструкція браузеру, що вказує спосіб відображення тексту;

б) текст, у якому використовуються спецсимволи;

в) покажчик на інший файл чи об'єкт;

г) фрагмент програми, що включена до складу web-сторінки.

4. Гіпертекст – це:

а) текст дуже великого розміру

б) текст, у якому використовується шрифт великого розміру