
- •Тема 10. Основи Веб-дизайну
- •Основні поняття:
- •1. Етапи проектування та розробки веб-сайту
- •2. Структура веб-сторінки та її об’єкти
- •3. Основні теги мови html
- •4. Оформлення тексту, створення списків та заголовків
- •Для форматування тексту використовують парні теги:
- •Теги для створення списків
- •Теги для створення заголовків
- •5. Створення і форматування таблиць та графічних об’єктів
- •Розміщення графіки на Web-сторінці
- •Атрибути зображення
- •Посилання
- •Текстове посилання
Атрибути зображення
Атрибут |
Формат |
Опис |
SRC |
<IMG SRC="Wagon.gif" > |
Адреса та назва файлу малюнку |
BORDER |
<IMG SRC="Wagon.gif" BORDER="3"> |
Задає товщину рамки навколо зображення. Вимірюється в пікселах. |
ALIGN |
<IMG SRC="Wagon.gif" ALIGN=TOP> |
Вирівнює зображення щодо тексту: по верхній частині зображення - TOP, по нижній - BOTTOM, по середній - MIDDLE. |
HEIGHT |
<IMG SRC="Wagon.gif" HEIGHT=111> |
Задає вертикальний розмір зображення усередині вікна браузера. |
WIDTH |
<IMG SRC="Wagon.gif" WIDTH=220 > |
Задає горизонтальний розмір зображення усередині вікна браузера. |
Приклад:
<IMG SRC="клевер красный.jpg">
Посилання
Наша сторіночка може складатися з декількох документів. Один з них головний (index.html) - він відкривається першим і повинен обов'язково лежати на вашому сайті в інтернеті. Інші документи ви можете називати як завгодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Вони всі можуть лежати в одній директорії (теці), а можуть в різних. За допомогою посилань ми зв'язуємо ці документи. Так з головної сторінки за допомогою посилань можна перейти на сторінку з фотографіями, з цією сторінки ми можемо перейти назад на головну сторінку, або, припустимо, на сторінку з нашими віршами, і так далі Посиланням на інші документи (частини нашої сторіночки) може бути текст (фраза, слово), а може бути і малюнок.
Текстове посилання
<a href="адреса">текст, що буде посиланням</a>
Тег <a></a> робить посиланням вкладену в нього картинку або фразу (текст). Принципи прописування шляху:
(1) - <а href="prf.html">мои фотографії</a>
(2) - <а href="photos/prf.html">мои фотографії</a>
(3) - <а href="http://www.homepage.ru/prf.html">мои фотографії</a>
У випадку (1) документ лежить в тій же директорії (теці), що і документ, в якому ми посилаємося на prf.html, у випадку (2) документ лежить в піддиректорії /photos, у випадку (3) ми посилаємося на сайт http://www.homepage.ru, де лежить потрібний нам документ.
Перші два приклади (1) і (2) – називають відносними шляхами. (3) – абсолютний, тобто вказаний повністю, включаючи ім'я сайту. Абсолютний шлях ми використовуємо, коли посилаємося на чужі сторіночки, відносний ми використовуємо, коли посилаємося на документи усередині нашого сайту.