Дизайн тексту для Web-сторінок

Спочатку розглянемо основні одинарні теги для розміщення тексту:

<Р> — цей тег означає початок нового абзацу, але його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного по лівому краю, абзацу без відступу.

<BR> — наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка.

<HR> — буде проведена горизонтальна лінія.

Розглянемо парні теги форматування символів тексту:

<В> текст </В> — жирний шрифт тексту;

<І> текст </І> — шрифт-курсив;

<U> текст </U>підкреслений шрифт;

<SUB> текст </SUB> — нижній індекс, наприклад, Н20;

<SUP> текст </SUP> — верхній індекс;

<BIG> текст </ВIG> — великий шрифт;

<SMALL> текст </SMALL> — малий шрифт;

<ЕМ> текст </ЕМ> — виділений курсивом текст (те саме, що тег І);

<В> <І> текст </І></В>жирний курсив. Цей приклад демонструє застосування принципу вкладення тегів.

Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>.Теги заголовків наведені у табл.9.1.

Таблиця 9.1
Теги Результат у вікні
<Н1>Заголовок 1</Н1> Заголовок 1
  <Н2>Заголовок 2</Н2> Заголовок 2  
  <Н3>3аголовок 3</Н3> Заголовок 3  

Заголовок за замовчуванням вирівнюється по лівому краю вікна.

Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:

<CENTER>елемент </CENTER>— вирівнювання по центру;
<LEFT>елемент </LEFT> — вирівнювання по лівому краю;

<RIGHT>елемент </RIGHT>— вирівнювання по правому краю.

Тег задання параметрів шрифту FONT

Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT з параметрами

FACE-тип шрифту,

SIZE- розмір шрифту,

COLOR – колір шрифту.

Наприклад,

<FONT FACE = "Monotype Corsiva,Verdana, Courier" SIZE =+2COLOR ="green"> текст</FONT>.

Якщо на комп'ютері клієнта встановлено шрифт Monotype Corsiva, то він буде застосований до даного тексту, якщо цей шрифт відсутній - браузер застосує шрифт Verdana,далі - Courier, інакше — деякий стандартний шрифт, наприклад, Times New Roman.

Розміри символів шрифту можуть бути від 1 до 7. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, ніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифту — на дві одиниці менший, ніж стандартний. Колір тексту буде зелений.Імена основних кольорів мовою HTML наведені у табл.9.2.

Таблиця 9.2
Ім’я кольору Назва кольору українською мовою
black чорний
green зелений
navy темно-синій
teal бірюзовий
silver сірий
lime яскраво-зелений
blue синій
aqua блакитний
magenta малиновий
olive темно-зелений
purple бузковий
gray темно-сірий
red червоний
yellow жовтий
fushsia рожевий
white білий

Колір можна задавати шістнадцятковими кодами, особливо відтінки в графічних редакторах прийнято задавати шістнадцятковими кодами, наприклад, один з відтінків сірого кольору має код #ff7800.



Вправа 2. Створіть текстовий файл file1.htm такого змісту.

<HTML>

<HEAD> <TITLE> Веб-сторінка Ваше прізвище та ім’я</TITLE> </HEAD>

<BODY BGCOLOR ="yellow" TEXT = "navy">

<CENTER><H1><B> Привіт!</В> </Н1>

<H2> <I>Я студент (введіть назву вузу)</I></Н2><P>

<H3><B> Навчаюсь на (введіть назву факультету, дайте характеристику факультету, спеціальності, чому ви навчаєтесь саме на цьому факультеті - 20 речень )</B></НЗ><HR>

Група (введіть назву групи)<P>

Моя e-mail адреса: <FONT SIZE = +3 COLOR = "magenta"> <B><I> s_nesterenko @ukr.net </FONT></I></B></CENTER><HR>

</BODY> </HTML>

Перегляньте файл як веб-сторінку. Виправте помилки. Збережіть зміни.

Створення списків та їх дизайн

Є три типи списків: маркований, нумерований, означення. Список може мати заголовок, який охоплюють тегами <LH>...</LH>, наприклад,

<LН> Це заголовок списку </LН>.

Маркований список утворюють за допомогою парного тега <UL> ...</UL> і одинарних тегів <LІ>, наприклад, так:

<LH> Мої улюблені предмети: </LH>

<UL>

<LI> економічна інформатика

<LI> англійська мова

<LI> вища математика

</UL>

На екрані отримаємо:

Мої улюблені предмети:

• економічна інформатика

• англійська мова

• вища математика

Нумерований список створюють за допомогою парного тега <OL>... </OL> з необов'язковим параметром TYPE і одинарних тегів <LI> так:

<LH> Мої улюблені предмети: </LH>

<OL TYPE="1">

<LI> економічна інформатика

<LI> англійська мова

<LI> вища математика

</OL>

На екрані отримаємо:

Мої улюблені предмети:

1. основи інформатики і ОТ

2. англійська мова

3. вища математика

Значення "і" чи "І" параметра TYPEзадає нумерацію римськими малими (і, іі, ііі, iv,...) чи великими (І, II, III, IV, ...) цифрами, а значення "а" чи "А" — латинськими малими (a, b, c, d, ...) чи великими (А, В, С,...) літерами.

Створення таблиць та їх дизайн

Таблиці створюють за допомогою таких тегів:

<TABLE параметри> <ТС> Заголовок таблиці </ТС>

Теги рядків і комірок

</TABLE>

Для заповнення комірок таблиці використовують такі парні теги (зауважимо, що закриваючі теги можна опускати):

<TR>...</TR> — формують рядок таблиці;

<ТН> текст </ТН> — формують комірку - заголовок рядка чи стовпця;

<ТD> текст </ТD> — формують текст кожної комірки.

Заголовки рядків та стовпців виводитимуться жирнішим шрифтом.

Щоб об’єднати у рядку декілька послідовних комірок, наприклад, дві в одну, у відповідному першому тезі <ТН> чи <TD> записують параметр ROWSPAN=2.

Щоб об’єднати у стовпці дві комірки в одну, використовують параметр COLSPAN=2.

Колір рамки таблиці задають параметром BORDERCOLOR= "колір рамки", а колір фона комірок — параметром BGCOLOR="колір фону". Товщину рамки в пікселах задають параметром BORDER="товщина рамки, наприклад, 3". Якщо значенням параметра є число нуль або параметра немає, то рамка буде невидимою.

Вправа 3. Створіть на Web-сторінці таблицю-витяг з табеля успішності за два перші семестри з трьох предметів: інформатики, англійська мова та вища математика, вносячі такі зміни у файл file1.htm перед тегом </BODY>.

<CENTER>

<TABLE BORDER=6 BGCOLOR="aqua" BORDERCOLOR="red" >

<CENTER><TC> Моя успішність:</TC></CENTER>

<TR BGCOLOR="white"> <TH> Назва дисципліни</TH>

<TH>І семестр </TH>

<TH>II семестр </TH> </TR>

<TR> <TH>Основи інформатики і ОТ </TH>

<TD ALIGN="center">5</TD>

<TD ALIGN="center">4</TD></TR>

<TR> <TH>Англійська мова</ТН>

<TD ALIGN="center">4</TD>

<TD ALIGN="center">5</TD></TR>

<TR> <TH>Вища математика</TH>

<TD ALIGN="center">4</TD>

<TD ALIGN="center">5</TD></TR>

</TABLE></CENTER><HR>

Збережіть змінений файл з ім’ям file1.htm у своїй папці Лабораторна_№4_Прізвище Перегляньте цей файл, у разі необхідності усуньте помилки. Проаналізуйте зміни.

Вирівнювання елементів

За замовчуванням більшість елементів на сторінці, наприклад, текст, таблиці, списки, текст у комірках таблиці, браузер вирівнює по лівому краю вікна документа чи комірки. Часто тип вирівнювання потрібно змінити. Лінії можна вирівнювати по центру екрана чи по правому краю. Таблиці вирівнюють відносно положення на екрані або відносно тексту, який її оточує. Текст у комірках таблиці вирівнюють по центру, по лівому чи правому краю у горизонтальному чи вертикальному напрямках. Для цього до об’єктів застосовують теги вирівнювання CENTER, LEFT, RIGHT або втегах <HR>, <TABLE>, <TH>, <TD> та в інших використовують параметр ALIGN зі значеннями "left" — зліва, "center" — по центру, "right" — справа, "top" — вгорі, "middle" — посередині, "bottom" — внизу. Останні три значення може мати також параметр VALIGN.

Для вдалого розташування таблиць чи рисунків варто проекспериментувати з параметрами WIDTH і HEIGHT, які задають ширину і висоту елемента в пікселах або відсотках до розмірів усього екрана, наприклад, <TABLE WIDTH=300> задає ширину таблиці 300 пікселів; <TABLE WIDTH=50%> задає ширину таблиці у півсторінки у горизонтальному напрямку.

Для проведення ліній різної довжини і товщини застосовують параметри WIDTH і SIZE, наприклад, тег <HR SIZE=30 COLOR="red"> замість звичайної лінії визначає червону лінію завтовшки ЗО пікселів.









Последнее изменение этой страницы: 2016-04-18; Нарушение авторского права страницы

infopedia.su не принадлежат авторские права, размещенных материалов. Все права принадлежать их авторам. Обратная связь