- •Конспект лекцій з дисципліни
- •Лекція 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. Об'єктна модель броузера.
Атрибут nowrap
Зазвичай будь-який текст, не поміщається в один рядок комірки таблиці, переходить на наступний рядок. Однак при використанні атрибуту NOWRAP з тегами <ТН> або <ТD> довжина комірки розширюється настільки, щоб укладений у ній текст помістився в один рядок.
Атрибут соlspan
Теги <ТD> та <ТН> модифікуються за допомогою атрибуту СОLSPAN (Column Span, з'єднання стовпців ). Якщо ви хочете зробити яку-небудь клітинку ширше, ніж верхня або нижня, можна скористатися атрибутом СОLSPAN, щоб розтягнути її над будь-якою кількістю звичайних комірок.
<HTML>
<BODY>
<CENTER>
<TABLE BORDER=3>
<TR>
<TD> Якщо ви хочете зробити яку-небудь
клітинку ширше, ніж верхня або нижня,
</ TD>
<TD> можна скористатися атрибутом
СОLSPAN = 2, </ TD>
</ TR>
<TR>
<TD BGCOLOR=white COLSPAN=2> щоб
розтягнути її над будь-якою кількістю
звичайних комірок. </ TD>
</ TR>
</ TABLE>
</ CENTER>
</ BODY>
</ HTML>
Атрибут rowspan
Атрибут ROWSPAN, використовуваний в тегах <ТD> та <ТН>, подібний атрибуту СОLSPAN =, тільки він задає кількість рядків, на які розтягується осередок. Якщо ви вказали в атрибуті ROWSPAN = s число, більше одиниці, то відповідна кількість рядків має перебувати в розтягуючої осередку. Внизу таблиці її помістити не можна.
Атрибут widтн
Атрибут WIDТН застосовується в двох випадках. Можна помістити його в тег <ТАВLЕ>, щоб дати ширину всієї таблиці, а можна використовувати в тегах <ТD> або <ТН>, щоб задати ширину клітинки або групи комірок. Ширину можна вказувати в пікселах або у відсотках. Наприклад, якщо ви задали в теге <ТАВLЕ> WIDTH = 250, ви отримаєте таблицю шириною 250 пікселів незалежно від розміру сторінки на моніторі. При завданні WIDТН = 50% в теге <ТАВLЕ> таблиця буде займати половину ширини сторінки при будь-якому розмірі зображення на екрані. Так що, вказуючи ширину таблиці у відсотках, майте на увазі, що якщо у користувача вузька область перегляду, ваша сторінка може виглядати дещо дивно. Якщо ви користуєтеся пікселями, і таблиця виявляється ширше області перегляду, внизу з'явиться смуга прокрутки для переміщення вправо і вліво по сторінці. У залежності від поставлених завдань і той, і інший спосіб завдання ширини таблиці може виявитися корисним.
<HTML>
<BODY>
<TABLE BORDER WIDTH=100%>
<TR>
<TD ALIGN=center> Текст або дані -
ширина 100% </ TD>
</ TR>
</ TABLE>
або <BR>
<TABLE BORDER WIDTH=50%>
<TR>
<TD ALIGN=center> Текст або дані -
ширина 50% </ TD>
</ TR>
</ TABLE>
або <BR>
<TABLE BORDER WIDTH=200>
<TR>
<TD ALIGN=center> Текст або дані -
ширина 200 пікселів </ TD>
</ TR>
</ TABLE>
або <BR>
<TABLE BORDER WIDTH=100>
<TR>
<TD ALIGN=center> Текст або дані -
ширина 100 пікселів </ TD>
</ TR>
</ TABLE>
</ BODY>
</ HTML>
Застосування порожніх клітинок
Якщо осередок не містить даних, вона не матиме меж. Якщо потрібно, щоб у осередки були кордону, але не було вмісту, необхідно помістити в неї щось, що не буде видно при перегляді. Можна скористатися порожній рядком <ВR>. Можна навіть поставити порожні стовпці, визначивши їх ширину в пікселах або відносних одиницях і не ввівши в отримані осередку ніяких даних. Цей засіб може виявитися корисним при розміщенні на сторінці тексту і графіки.
