HTML
Оформлення тексту в HTML-сторінці
HTML – це мова
розмітки гіпертекстових документів.
Для підготовки html-файлу можна використати текстовий редактор NotePad. Після написання html-файл потрібно зберегти на диску з деякою назвою з
розширенням назви htm чи html. Структура html-файлу:
<HTML>
<HEAD>
<TITLE>
Назва Web-сторінки </TITLE>
<!-- Тут
задаються вид кодування, підключення CSS, JavaScript -->
</HEAD>
<BODY параметри>
Це відображається на сторінці.
<!-- Задається оформлення тексту -->
<!--
Задаються 3 види списків, таблиці,
малюнки 2 види гіперпосилань -->
<!-- Задається підключення JavaScript -->
</BODY>
</HTML>
Команди мови HTML називаються тегами. Теги
бувають одинарними і парними.
У середині пари
тегів <BODY параметри>...</ВODY> записують те, що
має відображатися у вікні браузера.
Основні параметри
тега BODY:
BACKGROUND = "шлях до графічного файлу"— задає картинку для тла;
BGCOLOR = "white" —
задає білий колір тла, якщо не використовується
тло-картинка;
TEXT = "black" — задає чорний колір тексту
на сторінці.
Для
форматування тексту використовуються такі теги:
<P> текст </Р> - задання нового абзацу
<BR> - перехід на новий рядок
<В> текст
</В> — товстий шрифт
тексту
<I> текст </I> — шрифт-курсив
<U> текст </U> — підкреслений текст
<SUB> текст </SUB> - нижній індекс
<SUP> текст </SUP> -
верхній індекс
<В> <І>
текст </І></В> — товстий курсив (застосовується принцип вкладення
тегів).
Є
шість видів заголовків, які відрізняються розмірами символів.
<Н1>Заголовок </H1> - найбільшого розміру символу
,
Заголовки <Н2>,<НЗ>,<Н4>, <Н5>,<Н6> - щоразу менших
розмірів.
По замовчуванню текст на сторінці вирівнюється до лівого
краю вікна.
<CENTER> елемент </CENTER> — вирівнювання до центру
<LEFT> елемент </LEFT> — вирівнювання до лівого
краю
<RIGHT> елемент </RIGHT> — вирівнювання до правого
краю
Щоб задати назву
конкретного шрифта, його розмір і
колір, використовують парний тег FONT з параметрами FACE, SIZE та COLOR,
наприклад,
<FONT FACE = "Decor, Arial " SIZE =
+2 COLOR = "red">
текст </FONT>
Якщо на комп'ютері встановлено шрифт Decor, то він буде використаний до
цього тексту, в іншому разі браузер застосує шрифт Arial, інакше - деякий свій
стандартний шрифт, наприклад, Times New Roman.
Розміри символів шрифту можуть бути
від 1 до 7. Розмір З вважається стандартним, він відповідає приблизно 10
пунктам. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий поточний розмір шрифта, число +2
означає, що розмір шрифта має бути на дві
одиниці більший, ніж поточний, відповідно число -2 означатиме на дві
одиниці менший, ніж поточний.
Основні кольори мають такі назви:
black - чорний, blue - синій,
red -
червоний, green - зелений,
yellow - жовтий,
white - білий та інші.
Різні відтінки кольорів можна задати шістнадцятковими кодами, наприклад, , червоний колір задається так #ff0000.
Є три типи списків: ненумероваций,
нумерований, означення.
Список може мати заголовок,
який охоплюють тегами <LH>...</LH>
Ненумерований список утворюють
за допомогою парного тега <UL> ...</UL> і одинарних
тегів <LI>:
<LH> Мої улюблені предмети:</LН>
<UL>
<LI>інформатика
<LI>алгебра
<LI>геометрія
</UL>
Нумерований список створюють за допомогою парного
тега <OL>... </OL> з
необов'язковим параметром TYPE і одинарних
тегів <LI> :
<LH> Мої улюблені предмети :</LH>
<OLTYPE="1">
<LI>інформатика
<LI>алгебра
<LI>геометрія
</OL>
Значення "і" чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv,...) чи великими (І, II, III, IV, ...) цифрами,
а значення "а" чи "А" — латинськими малими (а, b, c,...) чи
великими (А, В, С,...) літерами.
Список означень використовують для пояснення термінів, створення словників і т.д. Його
утворюють за допомогою парного тега <DL>...</DL> і двох одинарних тегів <DT> і <DD> :
<LH>Класи</LH>
<DL>
<DT> 10 А
<DD> Андрій
<DD> Костя
<DT> 10 Г
<DD> Оксана
<DD> Ірина
</DL>
Таблиці створюють за допомогою
таких тегів:
<TABLE параметри>
<ТС>Заголовок таблиці</ТС>
</TABLE>
<TR>...</TR> - формують рядок таблиці
<TH>текст</TH> - формують клітинку-заголовок
рядка чи стовпця (зображаються товстішим шрифтом)
<TD>текст</TD> - формують текст кожної клітинки
Наприклад:
<TABLE BORDER=3 BGCOLOR="yellow" BORDERCOLOR="green" >
<ТС><І>Мої оцінки за два
семестри:</І></ТС>
<TR> <TH></TH>
<ТН>І cеместр </ТН>
<ТН>IІ cеместр </ТН>
</TR>
<TR>
<TH >Інформатика</ТН>
<TD>11</TD>
<TD>12</TD>
</TR>
<TR> <TH ALIGN="сenter">Математика</TH>
<TD ALJGN="center">9</TD>
<TD ALJGN="center">10</TD>
</TR>
<TR> <TH ALIGN="right">Фізика</TH>
<TD ALJGN="right">7</TD>
<TD ALJGN="right">8</TD>
</TR>
</TABLE>
Щоб об'єднати у рядку декілька
послідовних клітинок, наприклад, дві в одну, у відповідному першому тезі <ТН> чи <TD>
записують параметр ROWSPAN=2. Щоб об'єднати у стовпці дві клітинки в одну,
використовують параметр COLSPAN=2.
Колір рамки таблиці задають параметром BORDERCOLOR ="колір рамки", а колір тла клітинок -
параметром BGCOLOR ="колір тла". Товщину рамки в пікселях задають
параметром BORDER ="товщина рамки, наприклад, 3". Якщо значенням параметра є число нуль або параметра немає, то
рамка буде невидимою.
Графічні зображення (фотографії, картинки) можна вставити на Web-сторінку за допомогою тега <IMG> з
параметрами:
<IMG SRC="aдpeca графічного файлу" ALT=”альтернативний текст" ALIGN="center" WIDTH=50% HEIGHT=200>
Обов'язковим є лише перший параметр SRC. Альтернативний — це текст, який виводитиметься замість
картинки, якщо браузер не може прийняти
графічний файл (неправильний шлях до файлу чи назва файлу) або якщо режим відображення графіки
вимкнено. Параметр ALIGN задає місце розташування
картинки на екрані, а параметри WIDTH і HEIGHT — її розміри за шириною і висотою у пікселях або
відсотках. Зображення можна подати в рамці. Для створення
рамки навколо зображення призначений параметр BORDER="товщина рамки в пікселях".
Як "aдpeca графічного файлу" використовують URL-адреси файлів ( файлів,
які є на серверах у мережі Інтернет) або задають повний або відносний шлях до файлу на на локальному диску.
Гіперпосилання є двох видів:
1) на файл;
2)
на деяке місце на певній сторінці.
Гіперпосилання вставляють за допомогою парного тега
<А>...</А> з параметром HREF = "адреса файлу".
Гіперпосиланням може бути текст
<А HREF = "http://www.lider.com">
Танцювальний колектив</А>
або графічне зображення
<А HREF = "
http://www.lider.com">
<IMG SRC - "dance.gif" BORDER =5 > </A>
Колір гіперпосилання визначається у тезі BODY параметром LINK =
"колір". Параметри: VLINK=
"інший колір" — змінює колір гіперпосилання на інший після першого
використання; ALINK = "ще інший
колір" — змінює колір щойно
активізованого гіперпосилання на ще інший.
Другий тип гіперпосилань — посилання в межах сторінки. Спочатку потрібно позначити місце на сторінці, куди відбуватиметься перехід
<А NAME="#назва"></A>.
На сторінці розміщують гіперпосилання на позначку:
<А
HREF="#назва">
текст гіперпосилання або малюнок</А>.
