
- •Тема 1. Технології Internet та основи створення Web-вузлів
- •2, Загальні принципи створення комерційних Web-сайтів
- •3. Загальні принципи створення окремої сторінки Web-сайту "
- •4. Розміщення Web-вузла в Internet та вивір провайдера
- •Тема 2. Структура html-документа й елементи розмітки заголовка документа
- •1. Історія розвитку мови розмітки гіпертексту html
- •2. Принципи гіпертекстової розмітки. Структура html-документа
- •3. Тега, що визначають структуру документа
- •4. Призначення та основні контейнери заголовка
- •Тема 3. Мова розмітки гіпертексту html
- •5. Федорчук а. Как создаются Web-сайты: краткий курс- сПб: Питер, 2000.-224с: ил.
- •1. Теги управління розміткою
- •2. Теги керування відображенням символів
- •3. Організація тексту всередині документу
- •4. Засоби опису таблиць у html
- •Тема 4. Топологія Web-сайту. Навігація на Web-сайті. Створення гіпертекстових переходів засобами html
- •1. Топологія Web-сайту
- •2. Створення загальних посилань засобами html
- •3. Створення контекстних посилань засобами html
- •4. Створення гіперпосилань засобами html
- •5. Html форми
- •Тема 5. Основи Web-дизайну
- •2. Офермлеяня Web-сторінки. Типи фонів. Текстури. Правила
- •3. Логотип
- •4. Шрифт і текст у Web-дизайні
- •5. Кольорове коло. Системи представлення кольорів. Підбір
- •Тема 6. Кольорове оформлення сторінок засобами html. Web-графіка План лекції
- •1. Атрибути body для кольерового оформленим Web-сторінок
- •2. Оформлення таблиць
- •3. Використання графіки в html
- •Тема 7. Каскадні таблиці стилів css (Cascading Style Stoeets)
- •1. Основи css
- •1.1. Призначення css
- •1.2. Додавання стилів на web-сторінку
- •1.3. Присвоєння стилів
- •2. Властивості елементів, керованих за допомогою css
- •2.2. Текст
- •2.3. Шрифти
- •1. Пошук інформації у Internet Повнота, достовірність та швидкість пошуку
- •Тема 1. Технології Internet та основи створення Web-вузлів
3. Організація тексту всередині документу
HTML дозволяє визначати вигляд цілих абзаців тексту. АбзаиД
можна організовувати в списки, виводити їх на екран у відформатованому'
вигляді тощо. І
Маркіровані списки: <UL> ... </Vb>. Текст, розташований між мітками <ul> і </ul>, сприймається як маркірований список. Кожний] новий елемент списку починається з тегу <LI>. Наприклад, щоб створити] маркірований список:
• 1 елемент списку;
• 2 елемент списку;
• 3 елемент списку.
необхідно записати такий HTML-текст: . sj
<ul>
<^1і>1 елемент списку;
<1і>1 елемент списку;
<1і>1 елемент списку;
</ul>
У тега <LI> немає парного закриваючого тегу. Тег <UL> може містити атрибут, що визначає формат маркерів: <ul type=disk> Тег створює суцільні маркери такого типу, якГ у списках першого рівня.
< ul type =circle> Тег створює маркери у вигляді кола.
< ul type =square> Тег створює суцільні квадратні маркери.
Можна змішувати різні типи марки: рів в одному списку.
Нумеровані списки: <OL> ... </OL>. Текст, розташований між мітками <ol> і </ol>, сприймається як Егумерований список. Кожен новий елемент списку починається з тегу <1і>. Наприклад, щоб створити нумерований список-;
1 елемент списку;
2 елемент списку;
3 елемент списку.
Необхідно записати такий HTML-текст:
<ol>
<1і>1 елемент списку;
<1і>2 елемент списку;
<1і>3 елемент списку;
</ol>
Тег <ol> може містити атрибут, щ» визначає формат нумерації: <0І type=l> Тег створює список із нумерацією у форматі 1., 2., 3., 4. і т.д. <ol type=A> Тег створює список із нумерацією у форматі А., В., С. і т.д.
< ol type =а> Тег створює список із нумерацією у форматі а., Ь., с і т.д.
< ol type =І> Тег створює список із нумерацією у форматі І., II., ПІ. і т.д.
При необхідності можна змішувати ці типи нумерації в одному
списку. ,
Список визначень - тег <DL>..,«i®L>
Теги списку (Definition List: <DL>, <DT>, <DD>) використовують для створення списку термінів та їх визначень. Схема використання тега наступна.
<DL><DT>TepMiH</DT> <DD>BHMa4emw</DD></DL>
4. Засоби опису таблиць у html
Таблиці застосовуються для представлення інформації у табличному вигляді, а також для розміщення тексу та рисунків на сторінках.
Таблиця починається з тегу <TABLE> і закінчується тегом </TABLE>. Тег <TABLE> може включати атрибути:
- ALIGN - установлює розташування таблиці відносно полів
документа. Допустимі значення: ALIGN=LEFT (вирівнювання вліво),
ALIGN=CENTER (вирівнювання ло центру), ALIGN=RIGHT
(вирівнювання вправо);
- WIDTH — визначає ширину таблиці. її можна задати в пікселях
(наприклад, WIDTH=400) або у відсотках від ширини сторінки
(наприклад, WIDTH=80%);
- BORDER - встановлює ширину зовнішньої рамки таблиці й комірок у пікселях (наприклад, BORDER=4). Якщо атрибут не встановлений, таблиця показується без рамки;
- CELLSPACING - встановлює відстань між рамками комірок таблиці в пікселях (наприклад, CELLSPACING=2);
- CELLPADMN - встановлює відстань між рамкою комірки таї текстом у пікселах (наприклад, CELLPADDING=10).
Таблиця може мати заголовок (<CAPTION> ... </CAPTION>), хоча] заголовок не є обов'язковим. Ter <CAPTION> може включати атрибут ALIGN. Припустимі значення: <CAPTION ALIGN=TOP> (заголовок міститься над таблицею) і <CAPTION ALIGN=BOTTOM> (заголовок міститься під таблицею).
Кожен рядок таблиці починається з тега <TR> і закінчується тегом </TR>. <TR> може включати наступні атрибути:
- ALIGN - встановлює вирівнювання тексту в комірках рядка. Припустимії
значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTERJ
(вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо);
- VALIGN - установлює вертикальне вирівнювання тексту в комірках
рядка. Припустимі значення: VALIGN=TOP (вирівнювання по верхньоД
краю), VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTToffl
(вирівнювання по нижньому краю).
Кожна комірка таблиці починається з тегу <TD> і закінчуєтьси тегом </TD>. Ter <TD> може включати наступні атрибути:
- NOWRAP - присутність цього атрибута означає, що вміст комірки повинен бути показаний в один рядок;
- COLSPAN - встановлює "розмах" комірки по горизонталі. Наприклад, COLSPAN=3 означає, що комірка поширюється на-три стовпчики;
- KOWSPAN - встановлює "розмах" комірки по вертикалі. Наприклад, ROWSPAN=2 означає, що комірка займає два рядки;
- ALIGN - встановлює вирівнювання* тексту в комірці. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо);
- VALIGN - встановлює вертикальне вирівнювання тексту в комірі™ Припустимі значення: VALIGN=TOP (вирівнювання по верхньому крага), VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTTOM (вирівнювання по нижньому краю);
- WIDTH - встановлює ширину комірки в пікселях (наприклад, WIDTH=200);
- HEIGHT - встановлює висоту комірки в пікселях (наприклад, HEIGHT=40).
Якщо комірка таблиці порожня, навколо неї не малюється рамка, Якщо комірка порожня, а рамка потрібна, в комірку можна ввести символьний об'єкт «fenbsp; (non-breaking space - пробіл, що не розриває). Комірка як і раніше буде порожньою, а рамка навколо неї буде. Можна задати порожні стовпці, визначивши їх ширину в пікселях або відносних одиницях, і не ввівши в отримані комірки ніяких даних. Цей засіб може виявитися корисним при розміщенні на сторінці тексту та графіки. Будь-яка комірка таблиці може містити в собі іншу таблицю.
Контрольні питання
1. Назвіть теги управління розміткою HTML-документа.
2. Назвіть теги керування відображенням символів.
3. Назвіть теги, що керують формою відображення символів.
4. Назвіть теги, що задають логічний стиль оформлення тексту.
5. Як створити маркірований список у web-документі?
6. Як створити нумерований список у web-документі?
7. Як створити багаторівневий список у web-документі?
8. Як створити список визначень у web-документі?
9. З якого тега починається опис таблиці у web-документі?
10. З яїсого тега починається опис рядка таблиці у web-документі?
11. З якого тега починається опис стовбця таблиці у web-документі?
12. Назвіть абрибути тегів <table>, <tr>, <td>.