Ознайомлення з мовою HTML

Тема 11. Структура документа HTML. Елементи HTML

При вивченні теми студенти повинні:

Ключові слова: World Wide Web; проект глобального телекомунікаційного середовища; CERN; Web-сторінка; гіпертекст; канали Інтернет; Internet Explorer; браузер; тег.

Лекція 11-12

Структура документа HTML. Елементи HTML

11.1 Ознайомлення з мовою HTML

11.2 Мова HTML

11.3 Тегова модель файла.

11.4 Елемент (тег) BODY

11.5 Форматування тексту для web - сторінок

11.6 Заголовки і теги вирівнювання

Ознайомлення з мовою HTML

Текстові документи створюють за допомогою текстових редакторів, наприклад, MS Word, WordStar тощо, зберігають у файлах, виводять на екран для візуального перегляду і видруковують на папері. Гіпертекстові документи, на відміну від звичайних текстових документів, не призначені для виведення на папір. Головне їхнє застосування – подання інформації на екран комп'ютера.

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

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

Гіпертекст – це електронний документ, який містить гіперпосилання на інші документи. Термін " гіпертекст" у 1969 p. запровадив Тед Нельсон, хоча принцип організації інформації з використанням посилань відомий віддавна. Візьмемо для прикладу енциклопедичний словник. Він складається з коротких статей. Однак читач, якщо потрібно, може отримати додаткову інформацію завдяки словам, що набрані курсивом. У словниках ці слова служать посиланнями на інші статті. Ідею гіпертекстових інформаційних систем на теоретичному рівні сформулював В. Буш у 1945 році.

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

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

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

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

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

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

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

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

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

Текстові блоки є трьох головних типів: короткі (по два - три речення) текстові абзаци, списки, таблиці.

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

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