Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

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

↑

⇐ ПредыдущаяСтр 3 из 5Следующая ⇒

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

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

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

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

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

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

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

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

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

<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 = +2 COLOR = "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>

<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><TC> Моя успішність:</TC></CENTER>

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

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

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

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

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

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

</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"> замість звичайної лінії визначає червону лінію завтовшки ЗО пікселів.

⇐ Предыдущая 1 234 5 Следующая ⇒

Познавательные статьи:

Формы дистанционного обучения

Передача мяча двумя руками снизу

Значение правильной осанки для жизнедеятельности человека

Основные ошибки при выполнении передач мяча на месте

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

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.145.107.223 (0.011 с.)