Яка мова використовується для опису гіпертекстових документів. Основи HTML, мова гіпертекстової розмітки Hyper Text Markup Language. А) Редактори растрової графіки

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

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

Мова гіпертекстової розмітки HTML

Популярність Internet багато в чому викликана появою World Wide Web (WWW), тому що це перша мережева технологія, яка надала користувачеві простий сучасний інтерфейсдля доступу до різноманітних мережних ресурсів. Простота та зручність застосування привели до зростання кількості користувачів WWW та привернули увагу комерційних структур. Далі процес зростання числа користувачів став лавиноподібним, і так продовжується досі. На основі необхідності об'єднати всю безліч інформаційних ресурсів почала розвиватися технологія за допомогою якої визначається гіпертекстова навігаційна система. Цією технологією стала мова HTML. Технологія HTML на початковому етапібула надзвичайно проста, і практично всі користувачі мережі одночасно отримали можливість спробувати себе як творці та читачі інформаційних матеріалів, опублікованих у Всесвітньому павутинні. Справа в тому, що при розробці різних компонентів технології передбачалося, що кваліфікація авторів інформаційних ресурсів та їх оснащеність засобами обчислювальної технікибудуть мінімальними.

Мова HTML (HyperText Markup Language, мова розмітки гіпертексту) відноситься до так званих мов розмітки тексту (markup languages). Під терміном "розмітка" розуміється загальна службова інформація, яка не виводиться разом із документом, але визначає; як мають виглядати ті чи інші фрагменти документа. Наприклад, ви можете зажадати, щоб будь-яке слово виводилося жирним або курсивним шрифтом, вивести окремий абзацспеціальним шрифтом або оформляти заголовки збільшеним шрифтом.

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

1) мова визначає синтаксис розмітки;

2) мова визначає зміст розмітки.

Найбільш поширеною мовою розмітки Web-сторінок є HTML. Ця мова розмітки була створена і рекламована як одна з конкретизацій SGML. Вперше запропонований у 1974 році Чарльзом Голдфарбом і надалі після значного доопрацювання прийнятий як офіційний стандарту ISO SGML (Standard Generalized Markup Language, Стандартна узагальнена мова розмітки) являє собою метамову - систему для опису інших мов.

Поява стандарту SGML була зумовлена ​​необхідністю спільного використанняданих різними додатками та операційними системами. Навіть у далеких 60-х роках у користувачів комп'ютерів виникало чимало проблем із сумісністю. Проаналізувавши недоліки багатьох нестандартних мов розмітки, троє вчених з IBM - Чарльз Гольдфарб (Charles Goldfarb), Ед Мошер (Ed Mosher) і Рей Лорі (Ray Lorie) - сформулювали три загальні принципи, що забезпечують можливість спільної праціз документами у різних операційних системах.

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

2) Спеціалізація мов форматування. Завдяки можливості побудови спеціалізованої мови на базі набору стандартних правил програміст перестає залежати від зовнішніх реалізацій та їх уявлень про потреби кінцевого користувача

3) Чітке визначення формату документа. Правила, що визначають формат документа, задають кількість та маркування мовних конструкцій, що використовуються у документі. Застосування стандартного форматугарантує, що користувач точно знатиме структуру вмісту документа. Зверніть увагу: йдеться не про формат відображення документа, а про його структурний формат. Набір правил, що описують цей формат, називається "визначенням типу документа" ( document type definition, DTD).

Ці три правила було закладено основою попередника SGML - GML (Generalized Markup Language). Дослідження та розробка GML тривали близько десяти років, поки в результаті угоди, укладеної міжнародною групою розробників, не з'явився стандарт SGML.

HTML (Hypertext Markup Language, Мова розмітки гіпертексту) - це комп'ютерна мова, що лежить в основі World Wide Web. HTML заснований на стандарті SGML гіпертекстова мова розмітки документів для їх подання до Web. Стандарти мови HTML, одного з ключових стандартів Web, розробляються та підтримуються консорціумом W3C. Засновником цього міжнародного консорціуму є Тім Бернес Лі (Tim Berners-Lee). Консорціум, крім створення стандартів форматування, є центром розробки Semantic Web (семантична мережа). Засобами мови HTML забезпечується форматна розмітка документів, визначаються гіперзв'язки між документами та їх фрагментами.

Як основу написання коду HTML було обрано звичайний текстовий файл. p align="justify"> Таким чином, гіпертекстова база даних в концепції WWW - це набір текстових файлів, розмічених на мові HTML, який визначає форму подання інформації (розмітка) і структуру зв'язків між цими файлами та іншими інформаційними ресурсами (гіпертекстові посилання).

Розробники HTML змогли вирішити два завдання:

· Надати дизайнерам гіпертекстових баз даних простий засіб створення документів;

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

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

Другим важливим моментом, що вплинув на долю HTML, стало те, що в якості основи було обрано звичайний текстовий файл. Середа редагування HTMLє нейтральною смугою між найпростішим текстовим файлом та додатком WYSIWYG (what you see is what you get – що ви бачите, те й отримуєте). Вибір середовища редагування дає всі переваги текстового редагування.

Гіпертекстові посилання, що встановлюють зв'язки між текстовими документами, Поступово стали об'єднувати різні інформаційні ресурси, в тому числі звук і відео. Система гіперпосилань HTMLдозволяє побудувати систему взаємозалежних документів за різними критеріями. Мова HTML містить команди (теги), що дозволяють керувати формою та розміром шрифтів, розміром та розташуванням ілюстрацій, дозволяє здійснювати перехід від фрагмента тексту або ілюстрації до інших html – документом – так зване гіпертекстове посилання. Документ у html - форматі є текстовим файлом, що містить все необхідні відомостіпро інформацію, що виводиться на екран. Для керування сценаріями перегляду сторінок Website (гіпертекстової бази даних, виконаної у технології World Wide Web) можна використовувати мови програмування цих сценаріїв, наприклад, JavaScript, Java та VBScript. Форми для введення користувачем даних, які пізніше піддаються обробці та іншу інформацію можна обробляти за допомогою спеціальних серверних програм (наприклад, на мовами PHPчи Perl). Мова HTML дозволяє поміщати на сторінки гіпертекстові посилання та інтерактивні кнопки, які поєднують ваші Web-сторінки з іншими сторінками того ж Web-сайту, так само як і з іншими Web-сайтами по всьому світу.

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

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

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

Динамічний та статичний HTML-документи

Розрізняють два види html-документів – статичні та динамічні. Статичні документи зберігаються у файлах тієї файлової системи, яка використовується web-сервером або браузером під час перегляду локальних файлів. При розміщенні інформації на web-сервері можна використовувати динамічні документи - такі, які не існують постійно як файли, а генеруються в момент запиту клієнта. Причому кінцевого користувача немає значення динамічний чи статичний спосіб подання документів.

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

Динамічний спосіб визначає зберігання даних у формалізованому вигляді, наприклад, у базі даних.

Якщо ж дані зберігаються у формалізованому вигляді, то, використовуючи шаблони документів, у яких було зроблено зміни, генеруються статичні документи. Для генерування статичних документів можна використовувати будь-які засоби звітів, що є в системі управління баз даних (СУБД), якою оброблені і формалізовані дані.

Перспективи HTML

Нових версій мови HTML не буде, проте існує подальше розвиток HTMLпід назвою XHTML (англ. Extensible Hypertext Markup Language - мова розмітки гіпертексту, що розширюється). Поки XHTML за своїми можливостями можна порівняти з HTML, проте висуває більш суворі вимоги до синтаксису. Як і HTML, XHTML є підмножиною мови SGML, проте XHTML, на відміну попередника, відповідає специфікації XML. Варіант XHTML 1.0 був схвалений як Рекомендація Консорціуму Всесвітньої павутини(W3C) 26 січня 2000 року. Необхідно, однак, врахувати одну серйозну деталь – у цьому форматі створено велика кількістьінформаційних ресурсів, що вони ще довго "розуміються" web-браузерами і використовуватимуться у своєму первозданному вигляді. Крім того, нові формати будуть розроблятися (і вже розробляються - наприклад XML) з підтримкою технологій HTML.

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

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

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

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

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


Всі документи HTML мають ту саму структуру, що визначається фіксованим набором тегів структури. Документ HTML завжди повинен починатися з тега< HTML >і закінчуватися відповідним закриваючим тегом (). Усередині документа виділяються два основні розділи: розділ заголовків і тіло документа, що йдуть саме в такому порядку. Розділ заголовків містить інформацію, що описує документ в цілому, та обмежується тегами<НЕАD>і. Зокрема, розділ заголовків має містити загальний заголовок документа, обмежений парним тегом<ТITLE>.

). Тим не менш, під час створення документа HTML опускати структурні теги не рекомендується. Найпростіший правильний документ HTML, що містить усі теги, що визначають структуру, може виглядати так:

< TITLE >Заголовок документа< /TITLE >

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

HTML елементи.

Для парних тегів область впливу визначається частиною документа між тегом, що відкриває і закриває. Така частина документа розглядається як елемент мови HTML. Так, можна говорити про «елемент BODY», що включає тег, основний зміст документа та закриваючий тег. Весь HTML документ. можна розглядати як "елемент HTML.". Для непарних тегів елемент збігається з тегом, що його визначає.

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

Тепер можна сформулювати правила вкладання елементів.

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

Блокові елементи можуть містити вкладені блокові та текстові елементи.

Текстові елементи можуть містити вкладені текстові елементи.

Текстові елементи не можуть містити вкладені блокові елементи.

Функціональні блокові елементи.

У більшості документів основними функціональними елементамиє заголовки та абзаци. Мова HTML. підтримує шість рівнів заголовків. Вони задаються за допомогою парних тегів від<Н1>до<Н6>. При відображенні Web-документи ються за допомогою таким чином; тегом (документа на екрані комп'ютера ці елементи відображаються за допомогою шрифтів різного розміру).

Звичайні абзаци задаються за допомогою парного тега <Р>. Мова HTML. не містить засобів для створення абзацного відступу(«червоного рядка»), тому при відображенні на екрані комп'ютера абзаци розділяються порожнім рядком. Закриваючий тегсприймається як необов'язковий. Очевидно, що він стоїть перед тегом, який задає початок чергового абзацу документа. Наприклад:

Заголовок

<Р>Перший абзац<Р>Другий абзац

Заголовок другого рівня

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

Як обмежувач абзаців може також використовуватися горизонтальна лінійка. Цей елемент задається непарним тегом


. Під час відображення документа на екрані лінійка розділяє частини тексту один від одного. Її довжина та товщина задається атрибутами тега
.


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


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

Для створення сайту насамперед необхідний сервер, підключений до Інтернету, на якому можна розмішати необхідні гіпертексти. Крім того, потрібна реєстрація імені сайга у провайдера, який обслуговує обраний сервер.

В Інтернеті можна знайти провайдерів, які пропонують безкоштовне відкриттясайтів на серверах. Безкоштовні сайти можна відкрити на вітчизняних серверах narod.ru, boom.ru, hotmail.ru та на зарубіжних серверах, наприклад geocities.com, tripod.com.

На вказаних серверах можна зареєструвати доменні імена:

<имя>. narod.ru

ім'я>.boom.ru,

Приклади зареєстрованих доменних імен:

wdu.da.ru-сайт електронного університету;

wduniv.newmail.ru – сайт розподіленого університету.

Після реєстрації доменного імені сайту на ньому можна розміщувати гіпертексти. Розміщення гіпертекстів на сайті проводиться за допомогою спеціальних програм, що дозволяють створювати, редагувати, накопичувати та копіювати різні гіпертексти. Відразу після розміщення найпершої (головної) гіпертекстової сторінкиїї інформація може читатись за допомогою браузера в будь-якій країні з будь-якого комп'ютера, підключеного до Інтернету. Для цього у вікні браузера вказується адреса сайту в Інтернеті. Наприклад: http://bak.boom.ru

Усі файли повинні бути гіпертекстами, записаними у форматі HTML і мають ідентифікатори виду<имя>.html.

HTML – це мова розмітки гіпертекстів (hypertext markup language).

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

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

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

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

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

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

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

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

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

СХІДНОУКРАЇНСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ

імені Володимира Даля

Кафедра комп'ютерних наук

З дисципліни

Комп'ютерний дизайн та мультимедія

Студент Болдакова І.В.

1. Вступ

3.1 HTML-редактори

Література

1. Вступ

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

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

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

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

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

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

2. Розглянемо мову гіпертекстової розмітки HTML

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

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

Мова HTML існує у кількох варіантах і продовжує розвиватися, але конструкції HTML швидше за все будуть використовуватись і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, які можна переглянути багатьма браузерами Web, як, і у майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, який надається Opera, Google Chrome, Internet Explorer або іншими браузерами.

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

HTML було ратифіковано World Wide Web Consortium. Він підтримується усіма браузерами.

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

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

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

Інформація

Тут стартовим тегом є тег

А завершальним –

. Завершальний тег відрізнятиметься від стартового лише тим, що в нього перед текстом у дужках<>стоїть символ " / (Слеш).

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

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

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

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

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

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

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

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

Моя перша сторінка

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

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

Моя перша сторінка ..........

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

Моя перша сторінка Тут будуть мої сторінки!

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

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

Суцільний текст без проміжків читається не дуже легко, його незручно переглядати та знаходити потрібні місця. Розбитий на абзаци текст сприймається набагато швидше. Для початку нового абзацу використовується тег

(англ. paragraph – абзац). Цей тег, крім початку нового рядка, вставляє один порожній рядок. Але багаторазове повторення

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

Усередині дужок тега, крім його назви, можуть розміщуватися також атрибути (англ. atributes - атрибути). Вони відокремлюються від назви і між собою пробілами (одним або декількома), а пишуться у вигляді ім'я_атрибута ="значенняЯкщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується.

Може містити атрибут ALIGN, що визначає вирівнювання абзацу. За промовчанням абзац вирівняно ліворуч ALIGN="left". Можливі також вирівнювання вправо ALIGN="right" та по центру ALIGN="center". При використанні атрибутів, після форматованого тексту слід використовувати тег, що закриває

. Якщо його немає, то новий тег

означає закриття попереднього, відповідно вкладені

Неможливі. Вирівняти текст по центру можна також тегом

.

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

Моя перша сторінка

Тут будуть мої особисті сторінки!

На них Ви зможете знайти: - розповідь про мене та про мої захоплення; - мої фотографії.

З однієї з моїх сторінок можна буде
надіслати мені електронного листа.

3. Інструментарій для створення Web-сторінок

3.1 HTML-редактори

Кожен вибирає свій інструмент для створення веб-сторінок. Це може бути MS FrontPage або Macromedia DreamWeaver, Allaire HomeSite або 1st Page. А хтось користується простим текстовим редактором, наприклад, Блокнотом (Notepad).

Текстові редактори можна використовувати тільки для створення невеликих сторінок, так як у них є багато мінусів: не підтримуються проекти, відсутня "підсвічування" тексту. Загалом працювати вкрай незручно.

Основним недоліком MS FrontPage є те, що він генерує дуже великий HTML-код (занадто багато зайвого), тому сторінки виходять більшими, що позначається на швидкості завантаження. Більше того, при створенні Web-сторінок у цьому редакторі бачиш одне, а у вікні браузера зовсім інше. Сторінки виходять якимись кривими, тому для створення якісних Web-сторінок рекомендується використовувати пакети, які будуть розглянуті нижче.

Почнемо ми із популярного Macromedia DreamWeaver. Компанія Macromedia вважається лідером у виробництві програм для створення веб-сайтів, а також законодавцем моди в цій галузі.

DreamWeaver 3.0

Але DreamWeaver на кілька кроків випереджає інші редактори, що використовують технологію WYSIWYG, насамперед тим, що генерує дуже чистий HTML-код. DreamWeaver дозволяє позбавитися однотипної роботи при створенні сторінок (наприклад, верстка тексту) за допомогою використання опції "запис послідовності команд" (ви записуєте послідовність команд, що ви вами, потім натискаєте, наприклад, CTRL+P, і DreamWeaver відтворює все в тій же послідовності.

HomeSite 4.0

Наступний редактор - HomeSite 4 - створення сторінок вручну, тобто. для знавців HTML. Ви отримуєте повний контроль над HTML-кодом, причому існує можливість оптимізувати свою сторінку під один із трьох популярних браузерів(MSIE, Google Phrome, Opera).

HomeSite містить два основні режими: Edit та Design. Режим Design - це подоба WYSIWYG-редактора, що видає HTML-код, причому, якщо ви завантажите чужий HTML-код, HomeSite все перепише по-своєму.

Ще одна відмінна риса HomeSite - це його "склейка" з Dreamweaver. HomeSite має кнопку "Dreamweaver", а також входить у його стандартний пакет поставки. Втім, і DreamWeaver має можливість підключення HomeSite як редактора для коригування HTML-коду.

Одним із останніх HTML-редакторів є EVR Soft 1st Page v2.

Його гасло - "Create 1st class websites!" ("Створюйте першокласні веб-сайти!"). Редактор містить кілька режимів - Normal, Easy, Advanced/Expert та Hardcore, тобто ви можете вибрати свій рівень, а згодом перейти на вищий. Ще одна особливість – досить велика колекція скриптів на JavaScript та DHTML. Все це досить зручно розбите за категоріями.

3.2 Графічні редактори

Створення та оптимізація графіки - складне та примхливе завдання. Безумовно, можливе створення Web-сторінки і без використання графіки – за допомогою шрифтів, скриптів та таблиць стилів (CSS) – і це буде красиво та стильно. Але остаточний вигляд документа залежить від великої кількості різних факторів, таких як: ширина вікна браузера, попередні налаштування браузера, прийняті за умовчанням розмір шрифту, його ім'я та колір. До того ж не всі скрипти та стилі підтримуються всіма браузерами. Якщо ж буде використана графіка, то відвідувач вашої сторінки побачить її такою, якою зробили і бачите її ви.

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

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

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

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

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

Для зображення растрової графіки завжди використовується фіксована кількістьпікселів, тобто. Якість растрового зображення безпосередньо залежить від роздільної здатності обладнання. Це означає, що будь-яка зміна зображення (поворот, збільшення тощо) призводить до незмінного спотворення картинки та межі об'єктів виходять нерівними.

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

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

Графічні пакети (редактори) теж поділяються на два типи: растрові та векторні. Давайте тепер розглянемо найпопулярніші з них.

А) Редактори растрової графіки

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

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

Пакет пропонує, наприклад, засоби для відновлення пошкоджених зображень, ретушування фотографій або створення найфантастичніших колажів, які тільки можуть дозволити собі уяву. Загалом, потенціал цього пакету справді величезний. Починаючи з версії 5.5, у пакет включена програма Adobe ImageReady, що надають величезні можливостіз обробки графіки під WEB (оптимізація зображень, створення анімованих gif, "Різання" картинок на більш дрібні і т.д.). Девіз розробників Adobe Photoshop - "Camera of your mind" - передбачає не лише технічну досконалість, а й повну свободу творчості, на яку людина, яка працює з цією програмою, просто приречена.

PhotoPaint- ще один не менш відомий графічний редактор (з пакету Corel Draw) для обробки растрової графіки, що конкурує з Adobe Photoshop. Тут також є всі необхідні інструменти обробки графіки, різноманітні фільтри, текстури. Різниця лише у зручності роботи, інтерфейсі та швидкості накладання фільтрів - накладання відбувається трохи повільніше.

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

Існує ще ряд редакторів ( Microsoft Photo Editor, Microsoft Photo DRAW), що також дозволяють реалізувати найпростіші завдання, але не задовольняють запитам професіоналів.

B) Редактори векторної графіки

Adobe Illustrator- пакет дозволяє створювати, обробляти та редагувати векторну графіку. За своєю потужністю він еквівалентний

растровому редактору Adobe Photoshop: має аналогічний інтерфейс, дозволяє підключати різні фільтри та ефекти. графічні форматинавіть такі як. cdr (Corel Draw) в. SWF (Flash).

CorelDraw- безумовно, такий відомий графічний пакетне міг обійтися без засобів для обробки векторної графіки. Пакет за своєю потужністю практично не поступається графічним редакторам Adobe Photoshop та Adobe Illustrator. Крім обробки векторної графіки, у цьому пакеті існує обробник растрової графіки (Photo Paint), трасувальник зображень, редактор шрифтів, підготовки текстур та створення штрих-кодів, а також величезні колекції із зображеннями (CorelGallery).

Adobe Streamline- ще один продукт фірми Adobe, призначений для трасування (переведення) растрової графіки у векторну. Це невеликий, але дуже корисний та потужний продукт. Особливо корисний, якщо ви створюєте Web-сторінки за допомогою векторної графіки, наприклад, технології Flash.

4. Створення сайту за допомогою CMS Joomla 1.5.7

Плавно, за принципом від простого до складного, переходимо від статичних сторінок WWW до динамічних. Щоб це здійснити, нам знадобиться знання Web - мов PHP, Jscript, Perl, jQueryі хоча б мову структурну запитів MySQL. Нічого страшного, лише якісь пару років і ви профі, здатні робити такі багатофункціональні сайти, у яких сторінки генеруються на льоту, в яких присутні бази даних кліетів форумів, логіни, паролі, ідентифікація, аутентифікація, підключення анімації та багато іншого.

Але не обов'язково мати знання всіх мов, щоб зробити динамічний багатофункціональний сайт. Мені вистачило знання HTML, SCC, PHP, 3Ds Max, Photoshop та SMC Joomla.

Joomla - система керування вмістом, написана на мовах PHP і JavaScript, що використовує як сховище базу даних MySQL. Є вільним програмним забезпеченням, що розповсюджується під ліцензією GNU GPL.

Основні можливості:

1. Функціональність можна розширювати за допомогою додаткових модулів (розширень, плагінів).

2. Модуль безпеки для багаторівневої автентифікації користувачів та адміністраторів.

3. Система шаблонів дозволяє легко змінювати зовнішній виглядсайту.

4. Настроювані схеми розташування модулів, включаючи лівий, правий та центральний блоки меню.

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

Можна працювати з Joomla на сервері хостера в інтернеті (додаткові витрати, а також залежить багато від швидкості інтернету). Я волію працювати на локальному сервері. Для цього вибрала Apache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8d PHP/5.2.4 Server at 127.0.0.1 Port 80.

Отже, встановили локальний сервер. У директорії localhost/home/www/ створюємо папку, в яку вміщуємо саму Joomla. Хочу зауважити, що під PHP5.3.1 Joomla працює неправильно. Постійно компоненти форумів FireBoard та Kunena видає помилки на сайті, доводиться редагувати файл php. ini і відключати висновок про помилки, що сама дія обіцяє непередбачені обставини для сайту. Тому рекомендую вибирати версію PHP 5.2.4, робота стабільна для всіх плагінів, модулів та компонентів. Після встановлення Joomla через браузер створюємо в MySQL користувача-адміна і під його логіном та паролем заходимо на адмін панель. Далі потрібно вибрати шаблон для веб-сайту. З першого погляду здасться, що це дуже легко, але крапнувши глибше переконуєшся, що 80% часу йде для модернізації цього шаблону. Тому рекомендую вибирати максимально підходящий шаблон під потреби, не забуваючи про модулі, що виводяться. Далі підключаємо весь функціонал сайту: реєстрацію, форум, слайд-шоу, банери, файли для скачок, відео on line, аудіо, редагуємо всі сторінки, що виводяться. Працюємо в основному із файлом Index. php та template. css і звичайно конфігуруємо під себе всі підключені розширення яких близько 6000 для Joomla. Далі залишається найприємніше – це дизайн сайту. За допомогою растрової програми Photoshop та 3Ds Max (повнофункціональна професійна програмна системадля створення та редагування тривимірної графікита анімації, розроблена компанією Autodesk, містить найсучасніші засоби для художників та фахівців у галузі мультимедіа) створюємо дизайн шаблону. Редагуємо header, робимо необхідний вигляд.

Висновок

У зв'язку зі швидким розвитком Web-програмування та створення множинних CMS, було полегшено роботу Web-дизайнера. Тепер для створення багатофункціонального потужного динамічного web порталу достатньо освоїти кілька мов програмування (якщо дописуватимемо розширення та скрипти), вміло володіти графічними та растровими програмами, трохи натхнення, інновацій та майстерності.

Література

1. Которєв Д. В, Костарєв А.Ф. "PHP 5 або найбільш повний посібник у оригіналі." Петербугр 2005

2. А. Гончаров "Самовчитель HTML".

3. А. Матросов, А. Сергєєв, М. Чаунін "HTML 4.0 у оригіналі"

4. Айзекс С. "Dynamic HTML"

5. Байєнс Дж. "Примочки програмування в WEB"

6. Бурсов М.В. та ін. "Основи роботи з HTML-редактором Dreamweaver. Навчально-методичний посібник"

7. Веліхов В. "Довідник з HTML 4.0"

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

СХІДНОУКРАЇНСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ

імені Володимира Даля

Кафедра комп'ютерних наук

З дисципліни

Комп'ютерний дизайн та мультимедія

Студент Болдакова І.В.

1. Вступ

3.1 HTML-редактори

4. Створення сайту за допомогою CMS Joomla 1.5.7

Література

1. Вступ

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

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

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

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

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

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

2. Розглянемо мову гіпертекстової розмітки HTML

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

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

Мова HTML існує у кількох варіантах і продовжує розвиватися, але конструкції HTML швидше за все будуть використовуватись і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, які можна переглянути багатьма браузерами Web, як, і у майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, який надається Opera, Google Chrome, Internet Explorer або іншими браузерами.

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

HTML було ратифіковано World Wide Web Consortium. Він підтримується усіма браузерами.

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

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

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

Інформація

Тут стартовим тегом є тег

А завершальним –

. Завершальний тег відрізнятиметься від стартового лише тим, що в нього перед текстом у дужках<>стоїть символ " / (Слеш).

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

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

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

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

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

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

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

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

Моя перша сторінка

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

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

Моя перша сторінка ..........

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

Моя перша сторінка Тут будуть мої сторінки!

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

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

Суцільний текст без проміжків читається не дуже легко, його незручно переглядати та знаходити потрібні місця. Розбитий на абзаци текст сприймається набагато швидше. Для початку нового абзацу використовується тег

(англ. paragraph – абзац). Цей тег, крім початку нового рядка, вставляє один порожній рядок. Але багаторазове повторення

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

Усередині дужок тега, крім його назви, можуть розміщуватися також атрибути (англ. atributes - атрибути). Вони відокремлюються від назви і між собою пробілами (одним або декількома), а пишуться у вигляді ім'я_атрибута ="значенняЯкщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується.

Може містити атрибут ALIGN, що визначає вирівнювання абзацу. За промовчанням абзац вирівняно ліворуч ALIGN="left". Можливі також вирівнювання вправо ALIGN="right" та по центру ALIGN="center". При використанні атрибутів, після форматованого тексту слід використовувати тег, що закриває

. Якщо його немає, то новий тег

означає закриття попереднього, відповідно вкладені

Неможливі. Вирівняти текст по центру можна також тегом

.

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

Моя перша сторінка

Тут будуть мої особисті сторінки!

На них Ви зможете знайти: - розповідь про мене та про мої захоплення; - мої фотографії.

З однієї з моїх сторінок можна буде
надіслати мені електронного листа.

3. Інструментарій для створення Web-сторінок

3.1 HTML-редактори

Кожен вибирає свій інструмент для створення веб-сторінок. Це може бути MS FrontPage або Macromedia DreamWeaver, Allaire HomeSite або 1st Page. А хтось користується простим текстовим редактором, наприклад, Блокнотом (Notepad).

Текстові редактори можна використовувати тільки для створення невеликих сторінок, так як у них є багато мінусів: не підтримуються проекти, відсутня "підсвічування" тексту. Загалом працювати вкрай незручно.

Основним недоліком MS FrontPage є те, що він генерує дуже великий HTML-код (занадто багато зайвого), тому сторінки виходять більшими, що позначається на швидкості завантаження. Більше того, при створенні Web-сторінок у цьому редакторі бачиш одне, а у вікні браузера зовсім інше. Сторінки виходять якимись кривими, тому для створення якісних Web-сторінок рекомендується використовувати пакети, які будуть розглянуті нижче.

Почнемо ми із популярного Macromedia DreamWeaver. Компанія Macromedia вважається лідером у виробництві програм для створення веб-сайтів, а також законодавцем моди в цій галузі.

Internet Engineering Task Force) опублікував чернетку пропозиції за стандартом HTML

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

Документ HTML 4 складається з трьох частин:

  • рядок, що містить інформацію про версію HTML,
  • оголошує розділ header/"шапка" (обмежений елементом HEAD),
  • тіло, що містить власне сам документ.

Тіло може бути в елементах BODY або FRAMESET . Пробільні символи (прогалини, символи нового рядка, символи табуляції та коментарі) можуть з'являтися до або після цього розділу.

Simple page

Hello world!

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

Після цього можна бачити тег елемента html , що відкриває . Це оболонка довкола всього документа. Закриваючий тег html є останнім об'єктом у будь-якому документі HTML.

Всередині елемента html є елемент head. Він містить інформацію про документ (метадан). Всередині head знаходиться елемент title, який визначає заголовок "Simple page" в панелі меню.

Після елемента head слід елемент body , який є оболонкою, що містить реальний вміст сторінки - у разі лише елемент заголовка першого рівня (h1 ), який містить текст " Hello world!" .

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

Розділи сторінки створюють загальну структуру документа і можуть містити підрозділи. Вони можуть містити заголовки , параграфи, списки тощо. Параграфи можуть містити елементи, які створюють посилання інші елементи, цитати, виділення тощо.

Синтаксис елементів HTML

Базовий елемент HTML складається з двох тегів навколо блоку тексту. Існують елементи, які є оболонкою для тексту, і майже кожному разі елементи можуть містити поделементи (як html містить head і body у прикладі вище).

Елементи можуть також мати атрибути, які можуть модифікувати поведінку елемента та вводити додаткове значення .

Основи HTML

У цьому прикладі елемент div (розділ сторінки, спосіб розбиття документів на логічні блоки) має доданий атрибут id для якого задано значення masthead. Елемент div містить елемент h1 (заголовок першого або найважливішого рівня), який у свою чергу містить деякий текст. Частина цього тексту упакована в елемент abbr(який використовується для визначення розширення скорочень), який має атрибут title, значення якого задано як Hypertext Markup Language.

Багато атрибутів HTML є спільними для всіх елементів, але деякі є специфічними для даного елемента або елементів. Усі вони мають форму:

ключове_слово="значення"

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

Атрибути та їх можливі значення визначаються переважно специфікаціями HTML (http://www.w3.org/TR/html401/index/attributes.html), тому - не можна створювати свої власні атрибути. Єдиними реальними винятками є атрибути id і class , значення яких повністю призначені для додавання в документи вашого власного значення і семантики.

Елемент всередині іншого елемента називають "нащадком"цього елемента. У прикладі вище abbrє нащадком h1, який у свою чергу є нащадком div. І навпаки, div є "предком" елемента h1.

Елементи блочного рівня та рядкові елементи

Є дві основні категорії елементів у HTML , які відповідають типам контенту та структурі, яку представляють ці елементи - елементи блокового рівня та рядкові елементи.

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

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

Заголовок

Заголовок HTML-документа є необов'язковим елементом розмітки. Спочатку існування заголовка визначалося необхідністю іменування вікна браузер. Це досягалося за рахунок елемента розмітки TITLE :

Це заголовок ... ...

Ще однією функцією заголовка HTML-документа є управління HTTP-обміном через елемент розмітки META. При сучасній практиці розміщення веб-вузлів компаній на серверах провайдерів адміністратори цих вузлів можуть не мати можливості керувати програмою-сервером. У цьому випадку для управління обміном залишається лише одна можливість – через заголовок HTML-документа.

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

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

  • TITLE (назва документа);
  • BASE (база URL);
  • ISINDEX (пошуковий шаблон);
  • META (метаінформація);
  • LINK (загальні посилання);
  • STYLE (описувачі стилів);
  • SCRIPT (сценарії).

Найчастіше застосовуються елементи TITLE, SCRIPT, STYLE. Використання елемента META говорить про поінформованість автора про правила індексування документів у пошукових системах та можливості управління HTTP-обміном даними. BASE та ISINDEX останнім часом практично не застосовуються. LINK вказують лише при використанні зовнішніх щодо даного документа описувачів таблиць стилів.

Елемент розмітки HEAD містить заголовок HTML-документа. Даний елемент розміткине є обов'язковим. За наявності тега початку елемента розміткибажано використовувати і тег кінця елемента розмітки. За замовчуванням елемент HEAD закривається, якщо зустрічається або тег початку контейнера BODY або тег початку контейнера FRAMESET .

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

Елемент розмітки TITLE служить для іменування документа в World Wide Web. При виборі тексту для вмісту контейнера TITLE слід враховувати, що він відображається системним шрифтом , так як заголовок вікна браузера.

Синтаксис контейнера TITLE в загальному виглядівиглядає наступним чином:

назва документу

Заголовок не є обов'язковим контейнером документа. Його можна опустити. Роботи багатьох пошукових систем використовують зміст елементу TITLE для створення пошукового документа. Слова з TITLE потрапляють до індексу пошукової системи. З цих міркувань елемент TITLE завжди рекомендується використовувати на сторінках веб-сайту.

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

Тег початку контейнера містить один обов'язковий атрибут HREF і може містити один необов'язковий атрибут TARGET. Синтаксис контейнера BASE у загальному вигляді виглядає так:

Елемент розмітки ISINDEX використовується для вказівки пошукового шаблону та успадкований від ранніх версій HTML. У HTML 4.0 цей контейнер не визначено.

Елемент розмітки META

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

За допомогою META також можна задати й інші оператори. Наприклад, заборонити кешування документа. Для заборони кешування достатньо вставити в заголовок META – тег виду:

У новій версії протоколу HTTP (HTTP 1.1) керування кешуванням здійснюється через оператор Cache-Control. Для отримання такого ж результату, як у випадку з Pragma, у заголовку HTML-документа достатньо вказати:

Забороняється зберігати документ після пересилання.