- •Конспект лекцій з дисципліни
- •Лекція 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-документа, тобто всередині елемента розмітки HEAD.
Ми розглянемо декілька елементів розмітки, включаючи сам елемент розмітки HEAD:
HEAD (елемент розмітки HEAD);
TITLE (заголовок документа);
BASE (база URL);
ISINDEX (пошуковий шаблон);
META (метаінформація);
LINK (загальні посилання);
STYLE (описатели стилів);
SCRIPT (скрипти).
Найчастіше застосовуються елементи TITLE, SCRIPT, STYLE. Використання елемента META говорить про обізнаність автора про правила індексування документів в пошукових системах і можливості управління HTTP-обміном даними. BASE таISINDEXостаннім часом практично не застосовуються. LINK вказують тільки при використанні зовнішніх щодо даного документа описувачів стилів.
Елемент розмітки head
Елемент розмітки HEAD містить заголовок HTML-документа. Даний елемент розмітки не є обов'язковим. При наявності тега початку елемента розмітки бажано використовувати і тег кінця елемента розмітки. За замовчуванням елемент HEAD закривається, якщо зустрічається або тег початку контейнера BODY, або тег початку контейнера FRAMESET. Атрибутів у тега початку контейнера немає, хоча в DTD HTML один необов'язковий атрибут прописаний. Синтаксис контейнера HEAD в загальному вигляді виглядає таким чином:
<HEAD profile="http://www.snu.edu.ua/help">
Це приклад з документації по сайту
Схудноукраїнського національного університету
</ HEAD>
Контейнер заголовка служить для розміщення інформації, що відноситься до всього документа в цілому. Необов'язковий атрибут PROFILE вказує на зовнішній файл META-тегів. Як значення цього атрибуту вказується URL даного файлу.
Елемент розмітки title
Елемент розмітки TITLE служить для іменування документа в World Wide Web. Складається контейнер з тега початку, змісту і тега кінця. Наявність тега кінця обов'язково. Тег початку елемента не має специфічних атрибутів.
При виборі тексту для вмісту контейнера TITLE слід враховувати, що відображається він системним шрифтом, так як є заголовком вікна браузера.
Синтаксис контейнера TITLE у загальному вигляді виглядає таким чином:
<TITLE> назва документа </ TITLE>
Тема не є обов'язковим контейнером документа. Його можна опустити. Роботи багатьох пошукових систем використовують зміст елемента TITLE для створення пошукового образу документа. Слова з TITLE потрапляють в індекс пошукової системи.
Елемент розмітки base
Елемент розмітки BASE служить для визначення базового URL для гіпертекстових посилань документа, заданих в неповній (часткової) формі. Крім того, BASE дозволяє визначити мішень (вікно) завантаження документа за замовчуванням, коли гіпертекстового посилання поточного документа.
Розмітка гіпертекстових посилань зазвичай виконується як розмітка у частково заданих (відносних) адресах, коли URL задається щодо поточного місцезнаходження документа.
<A HREF =.. / next_level / document.html >...</ A>
У цьому випадку в якості бази за умовчанням вибирається каталог, в якому розміщений HTML-документ (../). Такий стиль розмітки зручний тим, що при перенесенні всього дерева документів в інше місце не потрібно міняти систему гіпертекстових посилань усередині документів. Крім того, розповсюдженню цього стилю сприяє і сама архітектура World Wide Web. Найбільш тісні зв'язки між документами задаються тільки в рамках одного Web-вузла. Зв'язків даного вузла з іншими істотно менше, і їх можна прописати безпосередньо в посиланнях в повній формі.
Контейнер BASE можна використовувати за межами документа, в заголовку або тілі документа. При цьому область дії базового адреси визначається від місця розміщення контейнера до наступного контейнера BASE.
<BASE HREF=http://snu.edu.ua/start/>
<HTML>
<HEAD>
<BASE HREF = http://snu.edu.ua/cgi-bin/>
... </ HEAD>
<BODY>
<BASE HREF=http://snu.edu.ua/start/>
... </ BODY>
</ HTML>
Тег початку контейнера містить один обов'язковий атрибут HREF, і може містити один необов'язковий атрибут TARGET. Синтаксис контейнера BASE у загальномувигляді виглядає таким чином:
<BASE HREF="http://snu.edu.ua/intro.html">
<BASE HREF = http://snu.edu.ua/intro.html
TARGET = new >
Застосування BASE у сучасних документах обмежена в силу різних причин. У складних випадках можна користуватися вказівками URL в повній формі.
