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

 Структура Web-сторінки.

Типовий Web-документ складається з текстових блоків, рисунків, таблиць, ліній, гіперпосилань. Більш складні Web-документи містять фрейми (вкладені Web-сторінки), елементи керування та вводу інформації(кнопки, перемикачі, поля вводу тексту), динамічні об"єкти (Java Applet, Java Script, ActiveX).

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

 HTML-файл.

Широке розповсюдження HTML-документи одержали завдяки різноманітним можливостям представлення інформації, легкістю написання та сумісністю з різними операційними системами. Спочатку нагадаємо, що команди мови HTML називають тегами. Теги бувають одинарними і парними. Більшість тегів є парними, наприклад, тег означення HTML-файлу: :. Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках, причому той тег, що закриває область дії, має косу риску (слеш/slash). Тег може містити параметри, які користувач записує у першому тезі через пропуск, наприклад, .

Всі програми, написані мовою HTML (HTML-файли) мають однакову структуру. Можна зекономити час при створенні своїх Web-сторінок, якщо використовувати цю структуру як еталон. Зокрема, обов"язково повинні бути такі команди(теги):

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

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

На завершення звернемо увагу, що для створення Web-сторінок дизайнери використовують гіпертекстові редактори, наприклад, Macromedia Dreamweaver, Microsoft FrontPage та інші, хоча за достатнього володіння мовою HTML можна писати Web-сторінки в будь-якому текстовому редакторі, наприклад, Блокнот(NotePad). Після написання програм файл потрібно зберегти на диску з певною назвою та розширенням .html чи .htm.

Сучасні текстові процесори, наприклад, MS Word, Lotus WordPerfect дають змогу створити Web-сторінки методом конструювання без застосування команд HTML, оскільки вони генерують ці команди автоматично. Загальна назва таких програм, які мають можливість автоматизованого створення Web-сторінок без явного застосування користувачем мови HTML - Web-композери.

Розглянемо дещо детальніше можливості композера, які має програма MS Word. Щоб створити Web-сторінку або цілий Web-сайт, потрібно під час створення нового документу перейти на закладку Web-сторінки і скористатись Майстром Web-сторінки чи створити нову сторінку. У другому випадку алгоритм дій дизайнерів такий:

·    Командою меню Формат->Фон задають колір фону чи спосіб замальовування екрана певною текстурою.

·    Уводять текст, вибираючи шрифт, його розмір, колір, вирівнювання тощо.

·    Створюють списки, як у звичайному текстовому редакторі.

·    Вставляють горизонтальні лінії командою меню Вставка->Горизонтальная линия, і вибирають тип лінії.

·    За допомогою команди Таблица створюють і форматують таблиці.

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

·    Записують створений файл як Документ HTML, і перглядають його браузером

2. Правила і програми, для створення  електронних публiкацiй

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

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

HTML-конвертери.

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

Наприклад, такі фільтри включені у FrameMake 5 для Windows. Вони до того ж перетворюють зображення у формат GIF і автоматично створюють посилання на одержані файли зображень. FrameMake 5 крім цього, включає до себе фільтр, який забеспечує перетворення документів з посиланнями у формат перенесених документів Adobe Acrobat. В Internet можна знайти деякі макроси і утіліти, які призначені для перетворення документів з популярних редакторів, таких як Word Perfect, MS Word у формат HTML.

Web Publisher

Цей конвертор здатний перетворювати документи з форматів текстових процесорів у формат HTML. Він дозволяє користувачу визначити правила і параметри перетворення та зберігати їх у спеціальному шаблоні. Після цього Web Publisher може конвертувати документи, установлювати між ними зв"язки і доповнювати розмітку у відповідності з вищезазначеними у цьому шаблоні правилами. Кінцевий вигляд сторінок визначається заданими користувачем установками. Web Publisher працює з документами MS Word, WordPerfect, Lotus AmiPro i Frame Maker. Він автоматично перетворює зображення у форматі GIF, будує таблиці у стилі браузера Netscape, створює зміст документа, зв"язує його пункти з відповідними заголовками розділів і перетворює пронумеровані і непронумеровані списки. Режим обробки перетворює всі вказані документи за правилами, вказаними у шаблоні.

RTF to HTML.

Практично усі текстові процесори можуть експортувати документи у вигляді форматованого тексту. RTF (Rich Text Format) конвертер дуже добре продуманий і пропонує великі можливості для роботи навіть з документами, в яких використовуються надто екзотичні методи форматування. Як зазначалося раніше, цей конвертор обмежений можливостями HTML. Нижче наведені основні можливості конвертера:

Напівжирний (курсивним), підкреслений текст буде перетворений у відповідні теги

Courier перетворюється в шрифт Teletype.

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

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

Підтримуються стилі документа за допомогою спеціального файла за назвою HTML-TRA (для Windows 3.1) або HTML-TRANS (для Windows NT & Windows 95). У цьому файлі заздалегідь визначена велика кількість стандартних стилів, що використовуються в Word для Windows. Користувач може визначити в цьому файлі свої власні стилі, які використовуються в його документах.

Зображення , що були вмонтовані в RTF-файл будуть збережені в окремих файлах в одному із таких форматів: Windows MetaFile (. WMF), Windows Bitmap (. BMP) або Macintosh PICT. Формат зображення визначається тим, у якому вигляді воно зберігалося в RTF-файлі. Ці файли згодом повинні бути перетворені у формат GIF, який підтримується більшістю web-браузерів.

Текст, що був вставлений у документ за допомогою команд Copy і Paste Link, буде пов"язаний із документом гіпертекстовим посиланням.

Конвертер підтримує вкладені списки.

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

Конвертер RTF to HTML є дуже потужним засобом, що варто впровадити у свій набір інструментів для створення HTML-документів.

PostScript to HTML.

Цей пакет, який може бути використаний як вхідні PostScript-файлів, створені Windows-драйвером принтера HP LaserJet IIP PostScript, можливо, є найбільше гнучким із всіх доступних засобів. За винятком того, що вихідний файл у форматі PostScript повинен бути створений тільки визначеним драйвером принтера для Windows, теоритично немає ніяких обмежень для того яким додаток буде цей файл робити.

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

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

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

текстові

графічні

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

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

У багатьох редакторах використовуються два типи інтерфейсу, між якими можна легко переключатися. (Яскравим прикладом служить HotDog, FrontPage98)

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

Редактори HTML, що поставляються у вигляді надбудов, являють собою додаткові програми, що функціонують у якості розширень існуючих додатків (як правило, текстових процесорів). У будь-якому випадку використання надбудов має як сильні, так і слабкі сторони.          Коли стандарт HTML уперше став використовуватися в Internet, існували тільки HTML-редактори, які підтримували лише стандартні HTML-коди (їх називали тестовими або ASCII-редакторами). Текстові редактори і в даний час залишаються самими популярними інструментами створення web-документів. Як правило, такі редактори можуть оперувати тільки деяким набором регулярних кодів. Список цих кодів для більшості редакторів приведений у меню дескрипторів. Як приклади текстових редакторів можна навести Notepad і WordPad (Windows,) vi та paco (UNIX) і SimpleText(Macintosh).

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

3. Гіперпосилання

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

Для встановлення гіперпосилання треба виокремити текстовий або графічний фрагмент і виконати команду Insert/Вставка и Hyperlink/Гиперссылка або натиснути на кнопку .

В діалоговому вікні Insert Hyperlink/Добавление гиперссылки у віконці Text to Display/Текст потрібно ввести назву гіперпосилання або залишити текст виокремленого фрагменту та зафіксувати ліворуч одну з категорії, до якої посилається гіперпосилання:

·           Exicting File or Web Page/Имеющимся файлом, Web-страницей - посилання на існуючий файл або Web-сторінку;

·           Place in This Document/Местом в этом документе - посилання у відкритому документі;

·           Create New Document/Новым документом - посилання на новий документ;

·           E-mail Address/Электронной почтой - посилання на адресу електронної пошти.

У випадку посилання на інший файл його треба вибрати, натиснувши на відповідні кнопки File/Файл або Web-page/Web-страница для пошуку їх розташування.

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

Посилання на електронну адресу полегшує зв"язок з автором документа або Web-сторінки.

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

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

Зв"язування файлів

Зв"язувати файли можна кількома способами. Коли файлі-приймач відкритий потрібно виконати команду Insert/Вставка File/Файл.

У діалоговому вікні Insert File/Вставка файла вибирають файл-джерело і розкривають меню кнопки Insert/Вставить. Якщо вибрати пункт Insert as link/Вставить как ссылку, то файл буде уставлений в документ як файл-джерело.

Якщо файл-джерело є файлом редактора Excel, треба натиснути на кнопку Range/Диапазон. У діалоговому вікні Set Range/Задание диапазона вказують позначку або діапазон комірок файлу Excel для уставляння таблиці у файл-приймач.

Інший спосіб зв"язування файлів забезпечується командою Insert/Вставка  Object/Обьект. У діалоговому вікні Object/ Вставка обьекта на закладці Create from File/Создание из файла за допомогою кнопки Browse/Обзор формують назву файла-джерела. Для зв"язування файлів потрібно активізувати можливість Link to file/Связь с файлом. Якщо активна можливість Display as icon/В виде значка, то замість вмісту файла-джерела буде логотип редактора цього файлу. Клацнувши на логотипі, файл-джерело відкривається в новому вікні.

Можна зв"язати файли і за допомогою спеціального уставляння. У файлі-джерелі виокремлюють певний фрагмент і виконують команду Edit/Правка Copy/Копировать. У файлі-приймачі фіксують курсор у потрібному місці і виконують команду Edit/Правка  Paste Special/Специальная вставка. У діалоговому вікні Paste Special/Специальная вставка можна вибрати, яким чином буде уставлений вміст буфера. Параметр Paste link/Связать забезпечує зв"язок між файлами.

Для редагування, оновлення або знищення зв"язків, користуються командою Edit/Правка  Links/Связи. У діалоговому вікні Links/Связи можна побачити всі зв"язки, наявні у файлі-приймачі.

Зв"язки можна редагувати за допомогою таких функцій.

·           Update Now/Обновить - оновлення зв"язку;

·           Open Sourse/Открыть источник - відкривання файла-джерела в окремому вікні;

·           Change Sourse/Сменить источник - зміна файла-джерела;

·           Break Link/Разорвать связь - вилучення зв"язку, за умови, що дані файлу-джерела залишаються у файлі-приймачі.

Параметри поля Item/Элемент визначають параметри оновлення даних з файлу-джерела:

·           Automatic/Автоматическое - автоматичне оновлення;

·           Manual/По запросу - оновлення за запитом;

·           Locked/Не обновлять связь - без оновлення;

·           Save picture in document/Хранить в документе - зберігати об"єкт в документі.

4. ВИКОРИСТАННЯ JAVA-СКРИПТІВ ПРИ СТВОРЕННІ HTML ДОКУМЕНТА

При розробці сучасного сайта не завжди можна обійтись лише можливостями мови розмітки HTML. З метою надання веб-сторінкам привабливого вигляду і створення у відвідувача відчуття взаємодії із сайтом використовують додаткові можливості, доступні при вико­ристанні Java-скриптів. Діапазон їх застосування досить широкий: це і елементи інтерактивності, які можуть містити складні процедури обробки, і просто декоративні елементи, які надають привабливості сайту. Мова javascript була розроблена спільно компаніями Sun Microsystems і Netscape на синтаксичній основі мови Java

Java-скрипт вбудовується в HTML-документ і взаємодіє з ним. Скрипти можуть знаходитись у будь-якому місці HTML-документа. Однак теги HTML не можна вміщувати всередині Java-скрипт-програми Java-скрипт-програма вміщується між тегами , виняток становлять «обробники подій»

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

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

Синтаксис тега:

Слід мати на увазі, що слово «javascript» записується із дотриманням регістру символів. Багато з об"єктів мови javascript відповідають тегам, які формують HTML-документи. Деякі об"єкти мови javascript мають наслідування. Зокрема, гіпер-зв"язок є об"єктом, який наслідується з об"єкта document. У мові Java-скрипт об"єкти, які наслідуються, також мають назву властивостей. Наприклад, множина гіперзв"язків є властивістю об"єкта document, a links - ім"ям цієї властивості.

ОБ"ЄКТИ