Статичний або динамічний сайт?

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

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

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

Програми для створення html-файлів

Отже, документ, складений за допомогою мови розмітки HTML, являє собою текстовий файл. Такий файл можна набрати і відредагувати в звичайному текстовому редакторі, наприклад, в додатках Блокноті або WordPad, які входять до складу ОС Windows. Проте в даний час існують більш зручні та досконалі програми підготовки HTML-документів. Їх умовно можна розділити на візуальні редактори HTML і редактори HTML-текстів.

При роботі у візуальному HTML-редакторі користувач має справу з графічними образами елементів HTML, а не з кодом документа. Він може шляхом перетягування мишею і простими операціями в інтерфейсі розміщувати на сторінці необхідні елементи. Завдяки цьому навіть користувачеві що, не знає мови HTML, під силу створювати прості Web-сторінки. До візуальних редакторів HTML відносяться програма FrontPage фірми Microsoft, Macromedia Dreamveawer, Netscape Navigator Gold і ін

Редактори власне HTML-текстів, серед яких найбільш відомі HomeSite і HotDog, мають основні можливості текстових редакторів (використання буфера обміну, засоби пошуку слів та ін.) Але, на відміну від звичайних редакторів тексту, ці додатки надають у розпорядження розробника візуальне середовище програмування (типу Visual Basic або Delphi) і дозволяють автоматизувати створення HTML-коду. Редактори HTML-текстів дають можливість користувачу швидко і легко вставляти в документ елементи HTML, перевіряти синтаксис команд, виконувати запуск і налагодження сторінки, не залишаючи вікна редактора.

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

Web-сторінка зберігається як HTML-документ. Головна мета HTML – описати зовнішній вигляд документу. Для цього в текст документу уставляють спеціальні коди – дескриптори або як їх ще називають, теги (від. англ.- tag – етикетка, бірка, мітка, покажник). Вони визначають способи форматування тексту і дозволяють зв`язати слова та фрази документу з іншими документами в Internet. Створити Web-сторінку можливо в будь-якому текстовому редакторі, хоч існують також спеціальні HTML- редактори для створення HTML-документів.

Щоб розрізнити дескриптори від тексту документу, їх замикають в кутові дужки <…>. Дескриптори можливо записувати як малими, так і великими літерами.

Тег – це фрагмент коду, що описує певні елементи документа HTML і вміщений у кутові дужки < > .

Елементи HTML – це пари тегів і символьні дані ( текст або код ), вміщені між ними.

Елемент називається звичайно за іменем тегу (без кутових дужок).

Усі елементи, передбачені в HTML, можливо поділити на кілька категорій:

• структурні – елементи, обов’язкові для документа, що відповідає стандарту HTML (наприклад, HTML, HEAD, BODY, TITLE );

• блокові – елементи, призначені для форматування цілих текстових блоків (наприклад, DIV, H1, H2, H3, H4, H5, H6, P, PRE); часто блокові елементи відокремлюються переведенням рядка від іншої частини документа;

• текстові – елементи, що задають розмітку шрифту ( I, B, U, BIG, SMALL і ін.), розмітку тексту (STRONG, CODE, VAR, CITE і ін.);

• спеціальні – елементи порожнього рядка ( BR, HR ), якірний елемент A, впроваджені елементи (IMG, OBJECT, MAP і ін.), елементи таблиці (TABLE) тощо.

Отже, випробуємо себе в створенні Web-сторінок.

Всі Web- сторінки мають однакову структуру. Дескриптори <HTML> та </HTML> є самими “зовнішніми”, вони замикають в себе решту тексту та інші дескриптори. Зверніть увагу: більшість дескрипторів мови – парні: відчиняючий та замикаючий.

Замикаючий має теж ім`я, що і відчиняючий, але перед ним стоїть коса риска (“/”). Всередині “зовнішніх” дескрипторів знаходяться заголовок та тіло HTML-документів. Заголовок обмежується дескрипторами <HEAD> та </HEAD> (від. англ. head -заголовок), а тіло – дескрипторами <BODY> та </BODY> (від. англ. body - тіло). В заголовку природно розташувати назву Web-сторінки. Вона обмежується дескрипторами <TITLE> та </TITLE> (від. англ. title - назва). Крім назви, в заголовку можуть знаходитися і інші елементи з додатковою інформацією про Web-сторінку. Тіло містить текст Web-сторінки, елементи мультимедіа, гіперпосилання.

Зручно один раз підготувати файл, який потім використовувати як шаблон – основу для створення інших Web-сторінок. Такий файл має містити наступний текст:

<HTML>

<HEAD>

<TITLE> Назва Web-сторінки </TITLE>

</HEAD>

<BODY>

Зміст Web-сторінки: текст, графіка, посилання…

</BODY>

</HTML>

Складаючи тіло WEB-сторінки звичайно розпочинають з заголовків та підзаголовків, тому що саме вони задають чітку структуру документу. Існує шість рівнів заголовків, кожному з яких відповідає свій розмір шрифту. Використовується такий же принцип, що і в книжках: заголовки глав виділяються крупним шрифтом, заголовки розділів – меншим, заголовки підрозділів – ще більш мілким і т.д. Для виокремлення заголовків на Web- сторінці використовують дескриптори <H1>, </H1> - для заголовка першого рівня ( H від Head), <H2>, </H2> - для заголовків другого рівня і т.д.

Наприклад, створимо таку Web-сторінку:

<HTML>

<HEAD>

<TITLE> Оформлення заголовків різних рівнів </TITLE>

</HEAD>

<BODY>

<H1> Заголовок першого рівня </H1>

<H2> Заголовок першого рівня </H2>

<H3> Заголовок першого рівня </H3>

<H4> Заголовок першого рівня </H4>

<H5> Заголовок першого рівня </H5>

<H6> Заголовок першого рівня </H6>

</BODY>

</HTML>

Розглянемо теги, які використовують для форматування тексту. Спочатку розглянемо основні одинарні теги для розміщення тексту.

Для того, щоб розділити текст на абзаци, використовують дескриптор <P> . Він розміщується на початку кожного нового абзацу. Закриваючий дескриптор необов`язковий. Такий дескриптор дає команду браузеру завершити поточний абзац та вставити пустий рядок перед наступним. Якщо потрібно перейти на новий рядок, не вставляючи пустий, слід використати дескриптор розриву рядків <BR>.

<HR> - буде проведена горизонтальна лінія.

Це одинарні дескриптори (теги) для розміщення тексту : вони не мають замикаючої пари.

Часто теги , окрім імені, містять додаткові елементи, які називаються атрибутами. Наприклад, якщо в тег тіла документу <BODY> ввести додатковий елемент:

<BODY bgcolor=”yellow”>

то це означатиме, що документ має відображатися на жовтому тлі. Слово bgcolor є атрибутом, а yellow – значенням атрибуту.

Атрибути – це компоненти тегу, що містять вказівки про те, як браузер має сприйняти й обробити тег. Атрибут записується після імені тегу перед дужкою > і складається, як правило, із пари « ім`я атрибуту - значення ».

Значення атрибута записується після імені атрибуту через знак рівності = . Всі значення атрибутів за умовчанням мають братися в подвійні (“) або одинарні (`) лапки. Імена атрибутів можуть набиратися як малими, так і великими літерами, - браузер інтерпретуватиме їх однаково. У тега може бути кілька атрибутів, тоді вони відокремлюються один від одного пробілами.

Основна сила мови HTML – у можливості зв’язувати документи між собою за допомогою посилань.

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

Для визначення посилань використовують дескриптор <А> , </A >.

Загальний формат посилання такий:

<A HREF= “шлях або URL” текст посилання </A >.

Значенням атрибуту HREF є URL адреса Web- сторінки або шлях до файлу, на який робиться посилання.

Посилання в межах одного документу робиться за допомогою атрибуту NAME (значення) дескриптора <А>.

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

Абзаци та заголовки можливо вирівнювати по центру, по лівому краю та по правому краю. Спосіб вирівнювання задається в дескрипторі заголовку або абзацу за допомогою параметра ALING (вирівняти), який може приймати три значення : CENTER (по центру), LEFT (по лівому краю), та RIGHT (по правому краю).

Наприклад:

<P ALIGN=RIGHT> цей абзац буде вирівняний по правому краю.

<H2 ALIGN=CENTER> цей заголовок буде розташований у центрі сторінки.