- •Конспект лекцій з дисципліни
- •Лекція 1. Принципи організації глобальної мережі Інтернет. Введення в Веб-технології: структура та принципи Веб.
- •Предмет курсу
- •Характеристика Інтернет
- •Стек протоколів tcp / ip
- •Система доменних імен dns
- •Структура і принципи www
- •Проксі-сервери
- •Протоколи Інтернет прикладного рівня
- •Лекція 2. Принципи побудови Веб-сайтів. Структура Веб застосуваннь. Характеристика мови html.
- •Історія розвитку html
- •Принципи гіпертекстової розмітки
- •Групи тегів нтмl
- •Лекція 3. Структура html-документа і елементи розмітки заголовка документа.
- •Призначення заголовка
- •Відображення змісту елемента title
- •Основні контейнери заголовка
- •Елемент розмітки head
- •Елемент розмітки title
- •Елемент розмітки base
- •Елемент розмітки meta
- •Елемент розмітки link
- •Елемент розмітки style
- •Елемент розмітки script
- •Лекція 4. Контейнери тіла документа.
- •Теги тіла документа
- •Тіло документа - контейнер body
- •Теги управління розміткою Заголовки
- •Атрибут аlign
- •Теги управління відображенням символів
- •Теги, що управляють формою відображення
- •Верхні і нижні індекси
- •Атрибут sizе
- •Атрибут соlоr
- •Створення списків в html
- •Атрибути маркерів у ненумерований списку
- •Коментарі в мові html
- •Гіпертекстові посилання
- •Лекція 5. Графіка.
- •Використання графіки в html.
- •Атрибут src
- •Атрибут alt
- •Атрибут аlign
- •Формати графічних файлів
- •Активні зображення
- •Зображення в мініатюрі
- •Лекція 6. Таблиці html.
- •Засоби опису таблиць в html
- •Створення таблиць в html
- •Атрибут nowrap
- •Атрибут соlspan
- •Атрибут rowspan
- •Атрибут widтн
- •Застосування порожніх клітинок
- •Атрибут сеllраdding
- •Атрибути аlign і valign
- •Атрибут border
- •Атрибут cellspacing
- •Атрибут bgcolor
- •Атрибут background
- •Використання таблиць в дизайні сторінки
- •Лекція 7. Використання html-форм
- •Html-Форми
- •Завдання форми - елемент form
- •Атрибут cols
- •Атрибут name
- •Атрибут rows
- •Алгоритм роботи фреймів
- •Створення простої сторінки з фреймами
- •Завдання фреймової структури
- •Підготовка вмісту фрейма
- •Підготовка фрейму main
- •Атрибути rows і соls
- •Атрибут rows
- •Атрибут сols
- •Атрибут nаме
- •Атрибут маrginwidth
- •Атрибут маrginheight
- •Атрибут scrolling
- •Атрибут noresize
- •Атрибут srс
- •Атрибут таrgет
- •Вкладені і множинні кадрові структури
- •Лекція 9. Призначення і застосування каскадних таблиць стилів css
- •Призначення css
- •Способи застосування css
- •Перевизначення стилю
- •Елемент style
- •Посилання на зовнішній опис
- •Імпорт опису стилів
- •Селектор - ім'я елемента розмітки
- •Селектор - ім'я класу
- •Селектор - ідентифікатор об'єкта
- •Спадкування й перевизначення
- •Лекція 10. Блокові і стрічкові елементи css
- •Блокові і стрічкові елементи
- •Елемент div
- •Елемент span
- •Властивості блоків
- •Відступи (margin)
- •Набивання (padding)
- •Рамка (border)
- •Обтікання блоку тексту
- •Лекція 11.Позиціонування у css
- •Координати і розміри
- •Абсолютні координати
- •Відносні координати
- •Лінійні розміри блоку
- •Управління видимістю
- •Порядок накладення і область видимості
- •Порядок накладення блоків. Z-index
- •Область видимості блоку. Clip
- •Лекція 12. Призначення та застосування JavaScript.
- •Метод join ()
- •Метод reverse ()
- •Метод sort ()
- •Оператори мови
- •Лекція 14. Об'єктна модель броузера.
Коментарі в мові html
При розмітці документів HTML виникає необхідність у використанні коментарів, які браузер не виводить на екран, але інший фахівець, редагує даний документ, може прочитати. У таких примітках можна знайти інформацію про те, хто є автором документа, де і чому використовується конкретний елемент HTML і тому подібне Коментарі HTML починаються з символу "<!--" і закінчуються символом "-->". Можна вставляти текст з будь-якими символами. Коментарі можуть складатися з декількох рядків тексту. Загалом і в цілому вони нічим не відрізняються від аналогічних коментарів у інших мовах програмування, так як видимі тільки тоді, коли це необхідно. Наприклад, браузер ігнорує їх. При створенні файлу HTML можна розмістити в ньому коментарі про його структуру. Крім того, там можна розміщувати інформацію про те, які складні операції здатний виконувати цей документ.
Гіпертекстові посилання
Всі розглянуті вище засоби керування відображенням тексту, безумовно, важливі, але вони лише доповнюють основний тег HTML-документа - гіпертекстове посилання. Для запису гіпертекстового посилання використовується тег <А>, який називають "якір" (аnchor). Якір має декілька атрибутів, головним з яких є НREF. Просту посилання можна записати у вигляді
<А НREF = "http://www. snu.edu.ua / ../index.html">
Коротка назва гіпертекстового посилання
</ А>,
де значення атрибута HREF - адреса документа "index.htm" на машині "www. snu.edu.ru", доступ до якої здійснюється по протоколу НТТР. Форма запису цієї адреси називається універсальним локатором ресурсів URL і є складовою частиною технології WWW.
Згідно зі схемою HTTP нотації URI, повну адресу інформаційного ресурсу, доступного за протоколом HTTP, слід записувати в такий спосіб:
http://user:password @ domain.ua: port / path /
some.html? query_string,
де http - протокол обміну даними; user - ідентифікатор користувача; password - пароль; domain.ru - доменне ім'я сервера; port - номер TCP-порту, на якому веде обслуговування сервер; path - шлях в кореневому каталозі сервера до файлу ресурсу; some. html - файл ресурсу; query_string - пошукове припис.
Поставлене у такому вигляді адресу ресурсу називається абсолютним або повною адресою ресурсу. На практиці рідко використовують всі компоненти повної адреси схеми HTTP. Найчастіше перші компоненти опускають. Наприклад, звернення до документа в тому ж каталозі в гіпертекстове посилання буде записано просто як ім'я даного файлу. Звернення до CGI-скрипту може виглядати наступним чином:
<A HREF=../scripts/my_script?query_string>
Ім'я протоколу, ім'я домену, номер порту і інші компоненти початку URL опущені. У цьому випадку говорять, що посилання задана частково певної або неповної формою URL.
Природно, що браузер при зверненні до сервера буде відновлювати повну форму URL, спираючись на деяку схему за замовчуванням, яка називається базовим URL. Іноді неповну форму URL називають відносним URL, маючи на увазі, що адреса задається щодо деякого базового адреси.
За умовчанням як базового використовується URL каталогу, в якому знаходиться поточний документ. Якщо URL починається з символу "." або "..", то це означає числення від поточного каталогу. Якщо URL починається з символу "/", то відносний URL береться від кореня каталогів сервера.HTML є елемент розмітки BASE (розглянутий раніше), який дозволяє задати або перевизначити базовий адресу. Спочатку цей контейнер використовувався тільки в заголовку HTML-документа. Зараз його застосовують як за межами документа (наприклад, при створенні документів HTML-редакторами), так і в тілі документа.
Зміст контейнера гіпертекстового посилання, укладену між тегом початку і тегом кінця, виділяється в тексті кольором, визначеним для контекстних гіпертекстових посилань. У атрибутах тега <ВОDY>:
Таблиця 3.5.
Атрибут |
Значення |
ТЕХТ = #000000 |
Колір тексту (чорний) |
ALINK = #FF0000> |
Колір "активних" гіпертекстових посилань (червоний) |
VLINK = # FF00FF |
Колір пройдених гіпертекстових посилань (пурпурний) |
LINK = # 0000FF |
Колір гіпертекстового посилання (синій) |
Одна з особливостей створення Web-сайту полягає в тому, що представлену на ньому інформацію бажано розбити на окремі частини, які можуть бути виведені на екран без необхідності його прокручування. Організація зв'язків між окремими частинами здійснюється за допомогою гіпертекстових посилань.
<A HREF="http://www.snu.edu.ua/help/../index.html">
Допомога </ A>
При натисканні на посилання в вікно браузера буде завантажений новий документ.
Іншою формою використання тега <А> є визначення точок всередині тексту, на які можна послатися. Такий метод застосовується в тому випадку, коли документ не можна поділити на частини і необхідно швидко переміщатися зі змісту у текст:
<А NАМЕ = "роint">
Для посилання на таку точку використовують наступну форму URL:
<А НREF = "http://www.snu.edu.ua/
../index.html # роint"> Посилання на точку "роint" в
документі "../index.html" </ А >
На описі простих гіпертекстових посилань огляд засобів мови НТМL, орієнтованих на текстове представлення інформації і організацію гіпертекстових баз даних, можна закінчити.
