Лекція №3
Мова HTML
Камінський О.Є курс Веб-дизайн
Тіло документу складається з:
•ієрархічних контейнерів та заставок;
•заголовків (от Н1 до Н6);
•блоків (списки, форми, таблиці, малюнки та ін.);
•горизонтальних ліній;
•тексту, розбитого на блоки дії стилів (підкреслення, виділення, курсив);
•математичних описів, графіки и гіпертекстових посилань.
2
Формати графічних файлів
•GIF (Graphic Interchange Format)
–2, 4, 8, … 256 цветов
–стиснення без втрати якості
–прозрачний колір
–анімація
•JPEG (Joint Photographic Expert Group)
–16 млн. кольорів або 256 відтінків сірого
–стиснення з втратами
PNG (Portable Network Graphic)
–альтернатива GIF, 48-бит колір
–стиснення без втрат
- alpha-канал |
3 |
Таблиці
<TABLE BORDER> <TR>
<TD>A1</TD> <TD>B1</TD> <TD>C1</TD> </TR>
<TR>
<TD>A2</TD> <TD>B2</TD> <TD>C2</TD> </TR>
</TABLE>
A1 |
B1 |
C1 |
A2 |
B2 |
C2 |
4
Теги для створення таблиць
• TABLE Створення таблиці
•CAPTION Задає заголовок таблиці
•TR Створення нового рядка (строки) ячеєк таблиці
• TD и TH Створення ячейки з даними в поточній строці
Таблиці в HTML формуються построчно. Спочатку за допомогою елементу TR необхідно створити рядок таблиці, у якому потім елементом TD створюються ячейки.
5
Параметри тегів TR, TH, TD
•ALIGN - визначає спосіб горизонтального вирівнювання вмісту ячейки. Можливі значення: left, center, right. За умовчанням спосіб вирівнювання визначається значенням параметра ALIGN елементу TR. Якщо ж і він не заданий, то для TD виконується вирівнювання по лівому краю, а для TH - центрування.
•VALIGN - визначає спосіб вертикального вирівнювання вмісту ячейки.
Можливі значення: top, bottom, middle. За замовченням відбувається вирівнювання по центру (VALIGN="middle"), якщо значення цього параметра
не було задане раніше в елементі TR
•WIDTH - визначає ширину ячейки. Ширіна задається в пікселах або в процентному відношенні до ширини таблиці.
•HEIGHT - визначає висоту ячийки. Висота задається в пікселах або в процентному відношенні до ширини таблиці.
•COLSPAN - визначає кількість стовпців, на які розтягнеться дана ячейка.
•ROWSPAN - визначає кількість рядків, на які розтягнеться дана ячейка.
•NOWRAP - блокує автоматичне перенесення слів в межах поточної ячейки.
•BGCOLOR - визначає колір фону ячейки.
•BACKGROUND - заповнює ячейку фоновим малюнком. Необхідно вказати URL малюнка.
6
Злиття ячєєк
<TABLE BORDER> <TR>
<TH ROWSPAN=2>HDD</TH>
<TD>WD Caviar 3.1Gb</TD><TD ALIGN="right">85$</TD> </TR>
<TR>
<TD>Quantum FB ST 6.4Gb</TD><TD ALIGN="right">110$</TD> </TR>
</TABLE>
WD Caviar 30 Gb |
85$ |
HDD |
|
Quantum 40 Gb |
110$ |
7
Злиття ячєєк
<TABLE BORDER> <TR>
<TH COLSPAN=2>Video</TH> </TR>
<TR>
<TD>Matrox G400</TD><TD ALIGN="right">115$</TD> </TR>
<TR>
<TD>Voodoo III</TD><TD ALIGN="right">129.95$</TD> </TR>
</TABLE>
Video |
|
Matrox G400 |
115$ |
Voodoo III |
129.95$ |
8
Гіперпосилання <A HREF=“”>
•HREF - визначає текст, що знаходиться між початковим і кінцевим тегами, або зображення, як гіпертекстове заслання (URL, або лінк) на документ (і область документа), вказаний в значенні даного параметра. Можливі значення:
•http://... - створює посилання на www-документ;
•ftp://... - створює посилання на ftp-сайт або розташований на ньому файл;
•mailto:... - запускає поштову програму-клієнт із заповненим полем імені одержувача. Якщо після адреси поставити знак питання, то можна вказати додаткові атрибути, розділені знаком "&";
•news:.. - створює посилання на конференцію сервера новин;
•telnet://... - створює посилання на telnet-сессию з віддаленою машиною;
•wais://... - створює посилання на WAIS - сервер;
•gopher://... - створює посилання на Gopher - сервер;
Якщо тип з'єднання і адреса машини не вказані, як відправна крапка використовується адреса поточного документа. Це дозволяє використовувати відносні заслання. Наприклад, лінк
<A HREF="docs/title.html"> Документація </A>
посилатиметься на файл title.html у підкаталозі docs (відносно поточного).
Параметр TARGET
TARGET - визначає вікно(фрейм), на яке вказує гіпертекстове заслання. Цей параметр використовується лише спільно з параметром HREF. Як значення необхідно задати або ім'я якогось з існуючих фреймів, або одне з наступних зарезервованих імен:
•_self - вказує, що визначений в параметрі HREF документ повинен відображуватися в поточному фреймі;
_parent - вказує, що документ повинен відображуватися у фреймі- батьку поточного фрейма. Інакше кажучи, _parent посилається на вікно, FRAMESET, що містить, що включає поточний фрейм;
_top - вказує, що документ повинен відображуватися у вікні-батьку всієї поточної феймовой структури;
_blank - вказує, що документ повинен відображуватися в новому вікні.
Мітки в документі <A NAME=“”>
•NAME - визначає область документу, що знаходиться між початковим і кінцевим тегами, як можливий об'єкт для заслання. Як значення потрібно латиницею написати будь-яке слово-покажчик, унікальне для даного документа.
•Наприклад, мітка:
<A NAME="part">Раздел1</A>. Тепер ви можете посилатися на відмічену область простою вказівкою її імені після імені документа.
•Наприклад, лінк
<A HREF="document.html#part">Раздел1</A> відправить вас до розділу "part" файлу document.html,
•а лінк
<A HREF="#bottom">В кінець документа</A> - в розділ "bottom" поточного документа.