- •Конспект лекцій з дисципліни
- •Лекція 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. Об'єктна модель броузера.
Атрибут border
У теге <ТАВLЕ> часто визначають, як будуть виглядати рамки, тобто лінії, що оточують осередки таблиці і саму таблицю. Якщо ви не поставите рамку, то отримаєте таблицю без ліній, але простір під них буде відведено. Того ж результату можна домогтися, задавши <ТАВLЕ ВОRDER = 0>. Іноді хочеться зробити кордон товстіший, щоб вона краще виділялася. Можна для залучення уваги до малюнка або тексту задати виключно жирні кордону. При створенні вкладених таблиць доводиться робити для різних таблиць кордону різної товщини, щоб їх легше було розрізняти.
Атрибут cellspacing
Атрибут СЕLLSPACING визначає ширину проміжків між осередками в пікселах. Якщо цей атрибут не вказаний, за замовчуванням задається величина, що дорівнює двом пікселів. За допомогою атрибута СЕLLSPACING = можна розміщувати текст і графіку там, де вам потрібно. Якщо ви хочете залишити порожнє місце, можна вписати в клітинку пробіл.
<HTML>
<BODY>
<CENTER>
<TABLE BORDER CELLSPACING=20>
<TR>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
</ TR>
<TR>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
< / TR>
</ TABLE>
<TABLE BORDER CELLSPACING=10>
<TR>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
</ TR >
<TR>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
</ TR>
</ TABLE>
<TABLE BORDER CELLSPACING=0>
< TR>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
</ TR>
<TR>
<TD> Текст або дані </ TD>
< TD> </ TD>
<TD> Текст або дані </ TD>
</ TR>
</ TABLE>
</ CENTER>
</ BODY>
</ HTML>
Атрибут bgcolor
Даний атрибут дозволяє встановити колір фону. У залежності від того, з яким тегом (TABLE, TR, TD) він застосовується, колір фону може бути встановлений для всієї таблиці, для рядка або для окремої клітинки. Значенням даного атрибуту є RGB-код або стандартну назву кольору.
<HTML>
<BODY>
<CENTER>
<TABLE BORDER BGCOLOR=yellow>
<TR BGCOLOR=blue>
<TD> Текст або дані </ TD>
<TD BGCOLOR=red> Текст або дані
</ TD>
<TD> Текст або дані </ TD>
</ TR>
<TR BGCOLOR=green>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
<TD BGCOLOR = lime> Текст або дані
</ TD>
</ TR>
</ TABLE>
</ CENTER>
</ BODY>
</ HTML>
Атрибут background
Даний атрибут задає фонове зображення для таблиць. Застосуємо до тегам TABLE і TD. Його значенням є URL файлу з фоновим зображенням. Застосування цього атрибуту розглядається нижче.
Використання таблиць в дизайні сторінки
Таблиці хороші тим, що при бажанні можна зробити їх межі невидимими. Це дозволяє за допомогою тега <ТАВLЕ> красиво розміщувати на сторінці текст і графіку. Поки тег <ТАВLЕ> залишається єдиним потужним засобом форматування в HTML. Дизайнери Web-сторінок зараз мають практично тієї ж свободою щодо використання "порожнього простору", що і творці друкованих сторінок. Таблиці найкраще допомагають відійти від ієрархічного розміщення тексту на Web-сторінках.
Якщо браузер підтримує таблиці, він зазвичай правильно відображає найбільш цікаві ефекти, отримані з їх допомогою
<HTML>
<BODY>
<CENTER>
<TABLE CELLPADDING = "10" CELLSPACING = " 0
"BORDER=" 16 ">
<TR>
<TD ALIGN="center">
<H2> Інтернет-Університет
Інформаційних Технологій </ H2>
<H3> Ласкаво просимо! </ H3>
<TABLE BORDER WIDTH =" 100% " >
<TR>
<TD ALIGN="center"> <I> Навчальний курс
"Основи Web-технологій" </ I> </ TD>
</ TR>
</ TABLE>
</ TD>
</ TR>
</ TABLE >
</ CENTER>
</ BODY>
</ HTML>
Рис. 4.2. Використання таблиць в дизайні
