Створення власних Web-сторінок
Мета роботи:
опанування головних принципів створення Web-сторінок;
використання головних елементів мови HTML;
набуття практичних навичок по створенню Web-сторінок.
8.1 Короткі теоретичні відомості
Що таке HTML? Термін HTML (HyperText Markup Language) означає "мова маркування гіпертекстів". Першу версію HTML розробив співробітник Європейської лабораторії физики елементарних часток Тім Бернерс-Ли.
З часу створення першої версії HTML перетерпів деякі зміни. Как і багато чого іншого в комп'ютерному світі, версії, чи специфікації, HTML виявилися пронумерованими. Відомі специфікації 2.0, 3.0 і 3.2. Поточну специфікацію HTML завжди можна знайти на сервері W3C ().
Що Вам знадобиться для освоєння HTML?
Для освоєння HTML по даній лабораторній роботі Вам знадобляться дві речі:
Любий браузер, тобто, програма, придатна для перегляду HTML-файлів. Мені особисто дуже подобається Internet Explorer, тому саме його команди я і буду приводити, описуючи операції з браузером.
Любий редактор текстових файлів, що підтримує російську мову в обраному Вами кодуванні. Якщо на Вашому комп'ютері встановлений Windows, цілком підійде Notepad.
Ми будемо використовувати текстовий редактор для підготовки HTML-файлів, а браузер — как інструмент контролю за зробленим.
Свої перші HTML-файли Ви будете розробляти в себе на локальному диску. Іншими словами, комп'ютер, на якому Ви будете займатися, може і не мати підключення до Інтернет. При цьому той самий *.htm-файл може бути одночасно відкритий і в Notepad, і в Internet Explorer. Зберігши файл в Notepad, просто натисніть кнопку "Просмотр в виде HTML" в Internet Explorer, щоб побачити ці зміни реалізованими в HTML-документе.
Створення професійної Web-сторінки, безумовно, вимагає найрізноманітніших знань у таких областях, як Web-програмування, комп'ютерна графіка, дизайн, психологія сприйняття, реклама і т.д. Проте, дедалі більше і більше людей створюють, і часом цілком успішно, свої Web-сторінки для самих різних цілей - професійного спілкування і публікації результатів своїх наукових чи творчих пошуків, реклами, пошуку друзів.
Організувати публікацію своєї Web-сторінки можна безко-штовно на таких серверах, як yandex.ru, geocities.com і ряді інших.
Засоби створенняWEB-сторінок
Умовно інструменти створення HTML сторінок можна розділити на 3 групи.
Модулі розширення - це програмні компоненти (plug-ins), що вмонтовуються в розповсюджені програмні продукти для конвертування даних, створених у цих продуктах, у HTML формат. Приклади таких модулів: Microsoft Word Viewer для перегляду документів у doc форматі, Microsoft Excel Viewer, Adobe PDF Viewer для перегляду файлів у форматі PDF.
Автономні редактори HTML. Цю групу засобів створення HTML сторінок можна умовно розділити на дві великі категорії: графічні і програмні редактори. Працюючи з графічними інструментами, ви маєте справу зі сторінкою в режимі відповідності (WYSIWIG - What You See Is What You Get; Що ви бачите, те й одержите) - вона з'являється такою, якою буде у вікні браузера. Програма вбудована в сторінку, але схована від автора, що не працює з нею прямо. У свою чергу програмні редактори виводять на екран як основне представлення сторінки вихідний текст мовою HTML, надаючи при цьому в розпорядження автора могутні засоби генерації коду, що рятують від необхідності писати його вручну.
Приклади засобів: FrontPage (Microsoft), Netscape Navigator Gold, Netscape Communicator (Netscape CommunicationsCorp.), HoTMetaL Pro (SoftQuad Inc.), WebEdit Professional Edition (SmartDesk Inc.).
Спеціалізовані засоби створення Web-сторінок
Створення професійних HTML-сторінок вимагає використання спеціальних засобів редагування. Сучасні вимоги, пропоновані до засобів розробки Web-сайтів, містять у собі:
Повну візуальну розробку Web-сторінок.
Підтримку каскадних таблиць стилів.
Використання сучасних скриптових мов, таких як JavaScript і т.д.
Генерацію Dynamic HTML для різних браузерів.
Засобу наочного дизайну таблиць і фреймів.
Динамічне відображення створюваної сторінки в браузері.
Шаблони WWW-сторінок або спеціальні програми – "майстра" по їхньому створенню.
Засоби по керуванню Web-сайтом (відстеження зв'язків і перевірка посилань між сторінками).
Приклади таких засобів: Dreamweaver (Macromedia), HomeSite, (Allaire).
Как я уже говорила, нам для вивчення HTML знадобиться тільки текстовий редактор і браузер. Коли Ви освоїте HTML у мінімальному об’ємі, Ви самі зможете підібрати собі редактор по смаку.
Як влаштований HTML-документ
HTML-документ — це просто текстовий файл із розширенням *.htm (Unix-системи можуть містити файли з розширенням *.html). От найпростіший HTML-документ:
<HTML>
<HEAD>
<TiTLE>Test 1</TiTLE >
</HEAD>
<BODY>
<Hl>Привіт, PC World!</Hl>
</BODY>
</HTML>
Как видно з приклада, вся інформація про форматування документа зосереджена в його фрагментах, укладених між знаками "<" і ">". Такий фрагмент (наприклад, <html>) називається міткой (по-англійському — tag, читається "тег").
Більшість HTML-міток — парні, тобто на кожну відкриваючу мітку виду <tag> є закриваюча мітка виду </tag> з тим же ім'ям, але з додаванням "/".
Мітки можна вводити як великими, так і маленькими буквами. Наприклад, метки <body>, <BODY> і <Body> будуть сприйняті браузером одинаково.
Багато міток, крім імені, можуть містити атрибути — елементи, що дають додаткову інформацію про те, як браузер повинний обробити поточну мітку. У нашому найпростішому документі, однак, немає атрибута. Але ми обов'язково зустрінемося з ними.
Обов'язкові мітки
<html> ... </html>
Мітка <html> повинна відкривати HTML-документ. Аналогично, мітка </html> повинна завершувати HTML-документ.
<head> ... </head>
Ця пара міток вказує на початок і кінець заголовка документа. Крім найменування документа (див. опис мітки <title> нижче), у цей розділ може включатися безліч службової інформації.
<title> ... </title>
Усе, що знаходиться між мітками <title> і </title>, тлумачиться браузером как назва документа. Рекомендується назва не довше 64 символів.
<body> ... </body>
Ця пара міток вказує на початок і кінець тіла HTML-документа, це тіло, власне, і визначає зміст документа.
<H1> ... </H1> — <H6> ... </H6>
Мітки виду <Hi> (де i — цифра від 1 до 6) описують заголовки шести різних рівнів. Заголовок першого рівня — самий великий, шостого рівня — самий дрібний.
<P> ... </P>
Такая пари міток описує