- •Лекція 1
- •Універсальна адреса ресурсу
- •Коди спеціальних символів
- •Базові елементи
- •Гіперпосилання
- •Форматування документа
- •Графіка
- •Приклади програм.
- •Лекція №2
- •Програма Microsoft FrontPage. Режими роботи
- •Основи web-дизайну у програмі FrontPage
- •Лабораторна робота №1
- •Теоретична частина
- •Хід роботи
- •3. Відкрийте файл file1.Htm у броузері.
- •4. Поекспериментуйте з різними значеннями кольорів (green, white, yellow, blue, #ffaa55 тощо) параметрів bgcolor і text.
- •Основна література
- •Алексеев а.П. Информатика 2001. – м., «солон-р», 2001. – 353 с.
- •Безручко в.Т. Практикум по курсу «Информатика». Работа в Windows, Word, Excel: Учебное пособие. – м.: Финансы и статистика, 2002. – 272 с.
- •Питання та завдання для самоконтролю та самоперевірки
- •Завдання для самостійної роботи з теми:
- •«Створення Web-документів»
- •Контрольні питання
- •Лабораторна робота №2
- •Методичні вказівки для студентів
- •Уміст контейнера (текст)
- •Хід роботи:
- •Основна література
- •Питання та завдання для самоконтроля та самоперевірки
- •Лабораторна работа№3
- •Методичні вказівки для обговорення
- •А тепер можна перейти на початок сторінки.
- •Хід роботи:
- •Основна література
- •Питання та завдання для самоконтролю та самоперевірки
Коди спеціальних символів
КОДИ |
СИМВОЛИ |
©, ® |
, |
¼, ½, ¾ |
¼, ½, ¾ |
&pi |
Π |
&le, &ge |
<, > |
& |
& |
Базові елементи
Тип документа |
<HTML> </HTML> |
Початок і кінець файлу |
Заголовок документа |
<HEAD> </HEAD> |
Опис документа, наприклад, його ім’я |
Ім’я документа |
<TITLE>*** </TITLE> |
Повинно бути в заголовку |
Тіло |
<BODY> </BODY> |
Вміст сторінки |
Гіперпосилання
Зовнішнє гіперпосилання |
<A HREF= “URL”> ***</A> |
|
Внутрішнє гіперпосилання (посилання на вкладку) |
<A HREF= “#***”> </A> <A NAME= “***”> </A> |
визначення закладки |
Відносне гіперпосилання |
<A HREF= “ім’я файлу”>
<BASE HREF= “URL”> |
|
Посилання на адресу E-Mail |
<A HREF= “mailto: адреса”>***</A> |
|
Форматування документа
Заголовок |
<H?>*** </H?> |
Визначено 6 рівнів |
Заголовок із вирівнюванням |
<H? ALIGN=LEFT | RIGHT |CENTER> </H? > |
|
Символ розриву абзацу |
<P > |
|
Вирівнювання тексту абзацу |
<P ALIGN=LEFT | RIGHT |CENTER> |
|
Зберегти форматування вже набраного тексту |
<PRE> *** </PRE> |
|
Символ розриву рядка |
<BR> |
|
Напівжирний шрифт |
<B> |
|
Курсив |
<I> |
|
Підкреслення |
<U> |
|
Моноширинний текст |
<TT> |
|
Перекреслення |
<STRIKE> |
|
Верхній індекс |
<SUP> |
|
Нижній індекс |
<SUB> |
|
Розмір шрифту |
<FONT SIZE=?> |
(від 1 до 7) |
Змінити розмір шрифту |
<FONT SIZE= “+ | -?” > |
|
Базовий розмір шрифту (основного тексту) |
<BASEFONT SIZE=?> |
(від 1 до 7; стандартний розмір 3) |
Графіка
Вбудоване зображення |
<IMG SRC=”URL”> |
|
Плаваюче зображення |
<IMG SRC=”URL” ALIGN=TOP | BOTTOM | MIDDLE | LEFT> |
|
Зображення гіперпосилання |
<A HREF=”URL”> <IMG SRC=”URL зображення”> </A> |
|
Зображення мініатюра |
<A HREF=”URL - оригіналу”> <IMG SRC=”URL зображення мініатюра”> </A> |
|
Фонове зображення |
<BODY BACKGROUND= =”URL зображення”> |
|
Зміна кольору фону |
<BODY BGCOLOR> = = “$$$$$$” |
порядок: червоний/ зелений/ синій |
Списки
Мова HTML підтримує п'ять видів списків, з яких два (списки меню і списки каталогів) вважаються застарілими і не рекомендуються до застосування. три типи, що залишилися — це упорядковані списки, неупорядковані списки і списки означень. Усі списки являють собою блокові елементи.
Упорядковані (нумеровані) і неупорядковані (маркіровані) списки оформляються однаково. Вони створюються за допомогою парних тегів: <OL> для упорядкованого списку і <UL> для неупорядкованого. Ці списки можуть містити тільки елементи списку, обумовлені парним тегом <LI>. Закриваючий тег </LI> можна опускати, тому що його місцезнаходження легке відновити. Відкриваючі теги можуть містити атрибути, що визначають вид маркера (для неупорядкованого списку), спосіб і послідовність нумерації (для упорядкованого). Дозволяється вкладення списків друг у друга.
Список визначень задається парним тегом <DL>. Він містить елементи двох типів: визначаємі терміни (парний тег <DT>) і визначення (парний тег <DD>). Закриваючі теги </DT> і </DD> можна опускати. Звичайно обумовлені терміни і визначення чергують, хоча це ніде не обговорено. Визначення відображаються на екрані з відступом від лівого краю. Такий список може бути сформований у такий спосіб:
<DL>
<DT> Поршень
<DD> Суцільний циліндр або диск, що щільно входить усередину порожнього циліндра
</DL>
Таблиця. Типи нумерації у впорядкованих списках
ФОРМАТ ДЕСКРИПТОРА |
СПОСІБ НУМЕРАЦІЇ |
<OL TYPE =1> |
стандартний спосіб нумерації за допомогою арабських цифр |
<OL TYPE =a> |
нумерація за допомогою малих букв алфавіту |
<OL TYPE =A> |
нумерація за допомогою великих букв алфавіту |
<OL TYPE =I> |
нумерація за допомогою римських цифр |
СПИСКИ
Нумерований |
<OL> <LI> </OL> |
<LI> перед кожним елементом |
Тип нумерації |
<OL TYPE =A|a |I |i |1> |
|
Маркірований (невпорядкований) |
<UL TYPE = DISC | CIRCLE |SQUARE> <LI> </UL> |
<LI> перед кожним елементом |
Список визначень |
<DL> <DT> <DD> <DL> |
<DT> - термін <DD> - визначення |
Таблиці
Таблиці зручні для представлення великих обсягів даних, а багато Web-дизайнерів використовують їх також для точного розміщення елементів Web-сторінок. Таблиця в мові HTML задається за допомогою парного тегу <ТАВLЕ>. Вона може містити заголовок таблиці, означаємий парним тегом <CAPTION>, і рядки таблиці, що задаються за допомогою парних тегів <TR>. Закриваючі теги </ TR > можна опускати.
Кожен рядок таблиці містить комірки таблиці, що можуть відноситися до двох різних типів. Комірки у заголовках стовпців і рядків задають парним тегом <ТН>, а звичайні комірки — парним тегом <TD>. Закриваючі теги < /TH> і </ TD> можна опускати. Наприклад, «порожня» таблиця з двома рядками і двома стовпцями може бути задана наступним чином:
<ТАВLЕ>
<САРТION> Пуста таблиця </САРТION>
<TR><TD><TD>
<TR><TD><TD>
</TABLE>
Кожна комірка може містити довільний текст, а також будь-які теги HTML, припустимі в «тілі» документа. Зокрема, комірка таблиці може містити вкладену таблицю або зображення.
При відображенні таблиці на екрані комп'ютера відбувається її автоматичне форматування з підбором розмірів комірок відповідно до обсягу розташовуваної інформації і заданих атрибутів. Атрибути елементів дозволяють як завгодно вигадливо оформити таблицю за своїм смаком. У таблиці наведене коротке зведення припустимих атрибутів.
Таблиця. Атрибути елементів, які використовуються при створенні таблиці
Атрибут |
Елемент |
Призначення |
ALIGN= |
Таблиця, заголовок, рядок, комірка |
Вирівнювання таблиці по горизонталі; вирівнювання даних по горизонталі, розміщення заголовка над чи під таблицею |
VALIGN= |
Рядок, комірка |
Вирівнювання по вертикалі |
WIDTH= |
Таблиця, комірка |
Ширина |
HEIGHT= |
Комірка |
Висота |
COLSPAN= |
Комірка |
Довжина в кілька стовпців |
ROWSPAN= |
Комірка |
Довжина в кілька рядків |
BGCOLOR= |
Таблиця, комірка |
Колір фону |
CELLSPACING= |
Таблиця |
Зазор між комірками |
CELLPADDING= |
Таблиця |
Зазор між вмістом комірки і її границею |
BORDER= |
Таблиця |
Відображення границь комірок і зовнішньої рамки таблиці |
ТАБЛИЦІ
Визначити таблицю |
<TABLE> </TABLE> |
|
Таблиця з рамкою |
<TABLE BORDER=?> </TABLE> |
?- товщина рамки в пікселях |
Таблиця фіксованої ширини |
<TABLE WIDTH=?> |
у точках |
Ширина у відсотках |
<TABLE WIDTH=%> |
у відсотках від ширини сторінки |
Рядок у таблиці |
<TR> </TR> |
|
Вирівнювання |
<TR ALIGN=LEFT | RIGHT | CENTER | MIDDLE | BOTTOM> |
|
Комірка таблиці |
<TD> </TD> |
повинна бути всередині рядка |
Розтягування по стовпцю |
<TD COLSPAIN=?> |
|
Розтягування по рядку |
<TD ROWSPAIN=?> |
|
Заголовок таблиці |
<CAPTION> *** </CAPTION> |
|