- •Конспект лекцій з дисципліни
- •Лекція 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. Об'єктна модель броузера.
Теги управління відображенням символів
Всі ці теги можна розбити на два класи: теги, керуючі формою відображення (font style), і теги, що характеризують тип інформації (information type). Часто зовні різні теги при відображенні дають однаковий результат. Це залежить головним чином від налаштувань интерпретирующей програми і смаків користувача.
Теги, що управляють формою відображення
Курсив, посилення, підкреслення, верхній індекс, нижній індекс, шрифт великий, маленький, червоний, синій, різні комбінації - усе це робить сторінки більш цікавими. Агенти дозволяють визначити шрифт за допомогою тега FONT. Тепер можна поєднувати на одній сторінці кілька видів шрифтів, незалежно від того, який з них заданий за замовчуванням у браузері користувача.
Теги <ВIG> і <SMALL> - зміна розмірів шрифту
Текст, розташований між тегами <ВIG> </ ВIG> або <SMALL> </ SMALL>, буде, відповідно, більше або менше стандартного.
Верхні і нижні індекси
За допомогою тегів <SUР> і <SUВ> можна задавати верхні і нижні індекси, необхідні для запису торгових знаків, символів копірайту, посилань і виносок . Розглянуті теги дозволяють створити всередині текстової області верхні або нижні індекси будь-якого розміру. Щоб вони здавалися меншими навколишнього тексту, можна використовувати теги <SUР> і <SUВ> з атрибутом FONT SIZE =- 1, що зменшує розмір шрифту.
Атрибут sizе
Атрибут SIZЕ тега <FОNТ> дозволяє задавати розмір тексту в даній області. За замовчуванням приймається 3. Деякі браузери тег <FONТ> не підтримують, тому бажано вживати його тільки всередині текстової області. В інших випадках краще використовувати теги <Н1>, <Н2>, <НЗ> і т.д. Головна перевага тега <FONТ> полягає в тому, що після закінчення дії він не розбиває рядок, як теги <Нn>. Тому тег <FONТ> буває дуже корисний для зміни розміру шрифту в середині рядка.
Атрибут соlоr
Якщо ви хочете зробити свою сторінку більш барвистою, можете скористатися атрибутом СОLОR в тезі FONТ, і тоді єдиним обмеженням буде колірна палітра на комп'ютері користувача.
Теги, що управляють формою відображення, наведені в таблиці.
Таблиця 3.3. Теги, що управляють формою відображення
Тег |
Значення |
<I> ...</ I> |
Курсив (Italic) |
<B> ...</ B> |
Посилення (Вold) |
<TT> ...</ TT> |
Телетайп |
<U>. .. </ U> |
Підкреслення |
<S> ...</ S> |
Перекреслений текст |
<BIG> ...</ BIG> |
Збільшений розмір шрифту |
<SMALL> ...</ SMALL> |
Зменшений розмір шрифту |
<SUB> .. . </ SUB> |
нижні індекси символи |
<SUP> ...</ SUР>> |
Надрядкові символи |
Таблиця 3.4. Теги, що характеризують тип інформації
Тег |
Значення |
<EM> ...</ EM> |
Типографське посилення |
<CITE> ...</ CITE> |
Цитування |
<STRONG> ...</ STRONG> |
Посилення |
<CODE> ...</ CODE > |
Відображає приклади коду (наприклад, "коди програм") |
<SАМР> ...</ SАМР> |
Послідовність літералів |
<КВD >...</ КВD> |
Приклад введення символів з клавіатури |
<VAR> ...</ VAR> |
Змінна |
<DFN> ...</ DFN> |
Визначення |
<Q> ...</ Q> |
Текст, укладений у подвійні лапки |
Блоки цитат - елемент <ВLОСKQUOTE>
Тег додає поля ліворуч і праворуч від тексту. Це корисний тег, оскільки він дозволяє компактно розташувати текст в центрі сторінки. При неодноразовому використанні <ВLОСKQUOTE> текст все більше стискується до центру.
Рис. 3.2.
