
- •Тема 10. Основи Веб-дизайну
- •Основні поняття:
- •1. Етапи проектування та розробки веб-сайту
- •2. Структура веб-сторінки та її об’єкти
- •3. Основні теги мови html
- •4. Оформлення тексту, створення списків та заголовків
- •Для форматування тексту використовують парні теги:
- •Теги для створення списків
- •Теги для створення заголовків
- •5. Створення і форматування таблиць та графічних об’єктів
- •Розміщення графіки на Web-сторінці
- •Атрибути зображення
- •Посилання
- •Текстове посилання
Для форматування тексту використовують парні теги:
Тег |
Призначення тегу |
<B></B> |
Текст, поміщений в цей тег, буде відображено жирним шрифтом |
<I></I> |
Текст, поміщений в цей тег, буде відображено курсивом |
<U></U> |
Текст, поміщений в цей тег, буде відображено підкресленим шрифтом |
<S></S> |
Текст,
поміщений в цей тег, буде відображено
|
<U> <S> Чорний текст на синьому фоні </S> </U>
Теги для створення списків
<LI> створює елемент списку. Застосовується всередині контейнера <ul> (маркірований список) або <ol> (нумерований список).
<OL></OL> Цей тег створює нумерований список
Приклад
<ol> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> </ol> |
|
<UL></UL> Цей тег створює маркірований список
Приклад
<ul> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul> |
|
Теги для створення заголовків
<H1></H1> Тег, який визначає заголовок документа. Після букви H вказується вид заголовка від 1 до 6. Чим більша цифра, тим менший шрифт (рівень) заголовку.
5. Створення і форматування таблиць та графічних об’єктів
Комірки таблиці можуть містити в собі текст, графіку або іншу таблицю. Далі наведего деякі теги оформлення таблиць:
-
Тег
Форма запису
Примітка
TABLE
<TABLE>текст</TABLE>
Оголошення таблиць
TR
<TR>текст</TR>
Тег рядка
TD
<TD>текст</TD>
Тег комірки
TH
<TH> текст </TH>
Тег комірки-заголовка
Атрибути тегу <TABLE>
-
Атрибут
Форма запису
Примітка
BORDER
<TABLE BORDER=X>
Задає рамку навколо таблиці.
WIDTH
<TABLE WIDTH=XX%>
Задає ширину таблиці як ХХ% від ширини сторінки або як ХХ пікселів.
BGCOLOR
<TABLE BGCOLOR= "#RRGGBB">
Задає кольори фону таблиці.
CELLSPACING
<TABLE CELLSPACING = х
Задає відстань між зовнішніми границями комірок. Х- значення
CELLPADDING
<TABLE CELLPADDING = х
Задає відстань між границею комірки та її вмістом Х- значення
Приклад
<table
BORDER="1" width="300px">
<tr><th>№ п/п</th><th>Фамилия</th></tr>
<tr><td>1</td><td>Иванов</td></tr>
<tr><td>2</td><td>Петров</td></tr>
</table>
Розміщення графіки на Web-сторінці
Тег <IMG …> дозволяє вставити зображення в документ. Зображення з'явиться в тому місці документу, де записаний цей тег. Команда записується з непарним тегом, тобто закриваючий тег не застосовується.
Графіка в Web, як правило, поширюється в трьох форматах: GIF, JPG, PNG.
Тег <IMG …> має чимало атрибутів, які можна задавати додатково. Вони можуть розташовуватися де завгодно після тега IMG.