- •Конспект лекцій з дисципліни
- •Лекція 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. Об'єктна модель броузера.
Зображення в мініатюрі
Часто для ілюстрації якоїсь теми потрібні зображення великого розміру, завантажуватися вони будуть досить довго. У тому місці, де потрібно розмістити великий малюнок, можна помістити маленьку його копію і зробити посилання на повномасштабне зображення. Ті відвідувачі, яким це дійсно цікаво, зможуть подивитися зображення повністю, а всі інші прогорнути сторінку, не затримуючись. Такая методика особенно хороша для обложек книг, фотографий, рекламных листков, которые не все читатели захотят изучить в деталях.
Лекція 6. Таблиці html.
Засоби опису таблиць в HTMLs
Створення таблиць в HTML
Створення рядка таблиці - тег <ТR>
Визначення елементів таблиці - тег <ТD>
Заголовки стовпців таблиці - тег <ТН>
Використання заголовків таблиці - тег <САРТIОN>
Атрибут NOWRAP
Атрибут СОLSPAN
Атрибут ROWSPAN
Атрибут WIDТН
Застосування порожніх клітинок
Атрибут СЕLLРАDDING
Атрибути АLIGN і VALIGN
Атрибут BORDER
Атрибут CELLSPACING
Атрибут BGCOLOR
Атрибут BACKGROUND
Використання таблиць в дизайні сторінки
У цій лекції докладно розглядаються принципи застосування таблиць в HTML-розмітки. Це і таблична організація тексту, і таблична координатна сітка, і організована в таблиці графіка.
Засоби опису таблиць в html
У міру розвитку WWW стало ясно, що коштів, які закладені в НТМL, недостатньо для якісного відображення різного типу документів. Недоліком НТМL була відсутність в його складі засобів відображення таблиць. Для цієї мети зазвичай використовувався предформатірованний текст (тег <PRE>), в якому таблиця окреслювалися символами АSСII. Але така форма представлення таблиць була недостатньо високої якості і вибивалася із загального стилю документа. Після введення таблиць в HTML в Web-майстрів з'явився не просто інструмент для розміщення текстових і числових даних, а потужний засіб дизайну для розміщення в потрібному місці екрану графічних образів і тексту.
Створення таблиць в html
Для опису таблиць використовується тег <ТАВLЕ>. Тег <ТАВLЕ>, як і багато інших, автоматично переводить рядок до і після таблиці.
Створення рядка таблиці - тег <ТR>
Тег <ТR> (Таble Row, рядок таблиці) створює рядок таблиці. Весь текст, інші теги і атрибути, які потрібно помістити в один рядок, повинні розміщатися між тегами <ТR> </ ТR>.
Визначення елементів таблиці - тег <ТD>
Всередині рядки таблиці зазвичай розміщуються осередки з даними. Кожна клітинка, яка містить текст або зображення, повинна бути оточена тегами <ТD> </ ТD>. Число тегів <ТD> </ ТD> у рядку визначає число осередків
<HTML>
<BODY>
<H1 ALIGN=center> Таблиця </ H1>
<CENTER>
<TABLE BORDER>
<TR>
<TD COLSPAN=3> Якщо в таблиці два тега TR, то в ній два рядки. </ TD>
</ TR>
<TR>
<TD> Якщо в рядку три тега TD, </ TD>
<TD> то в ній </ TD>
<TD> три стовпці . </ TD>
</ TR>
</ TABLE>
</ CENTER>
</ BODY>
</ HTML>
Рис. 4.1. Використання таблиць в дизайні
Заголовки стовпців таблиці - тег <ТН>
Заголовки для стовпців і рядків таблиці задаються за допомогою тега заголовка <ТН> </ ТН> (Таblе Неаder, заголовок таблиці). Ці теги подібні <ТD> </ ТD>. Відмінність полягає в тому, що текст, укладений між тегами <ТН> </ ТН>, автоматично записується жирним шрифтом і за замовчуванням розташовується посередині комірки. Центрування можна скасувати і вирівняти текст по лівому або правому краю. Якщо скористатися <ТD> </ ТD> з тегом <В> і атрибутом <АLIGN = center>, текст теж буде виглядати як заголовок. Проте слід мати на увазі, що не всі браузери підтримують у таблицях жирний шрифт, тому краще ставити заголовки таблиць за допомогою <ТН>.
<HTML>
<BODY>
<TABLE BORDER>
<TR>
<TH> Тема центрований за замовчуванням
</ TH >
<TH COLSPAN=2> Заголовок може об'єднувати
стовпці </ TH>
</ TR>
<TR>
<TH> Заголовок може бути розташований
перед стовпцями </ TH>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
</ TR>
<TR>
<TH ROWSPAN=3> Заголовок може об'єднувати
рядка </ TH>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
</ TR>
<TR>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
</ TR>
<TR>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
</ TR>
</ TABLE>
</ BODY>
</ HTML>
Використання заголовків таблиці - тег <САРТIОN>
Тег <CAPTION> дозволяє створювати заголовки таблиці. За замовчуванням заголовки центруються і розміщуються або над (<САРТION АLIGN = top>), або під таблицею (<САРТION ALIGN = bottom>). Заголовок може складатися з будь-якого тексту і зображень. Текст буде розбитий на рядки, відповідні ширині таблиці. Іноді тег <САРТION> використовується для підпису під малюнком. Для цього досить описати таблицю без кордонів.
<HTML>
<BODY>
<TABLE BORDER>
<CAPTION ALIGN=top> Тема над таблицею
</ CAPTION>
<TR>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
</ TR>
</ TABLE>
<TABLE BORDER>
<CAPTION ALIGN=bottom> Тема під таблицею
</ CAPTION>
< TR>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
<TD> Текст або дані </ TD>
</ TR>
</ TABLE>
</ BODY>
</ HTML>