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


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



ЗНАЕТЕ ЛИ ВЫ?

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



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

<FONT FACE = “Decor, Arial, New Times”

SIZE = +2 COLOR = “red”>

Вміст контейнера (текст)

</FONT>

Якщо на комп’ютері клієнта встановлено шрифт Decor, то він буде застосований до цього тексту, інакше браузер застосовує шрифт Arial чи New Times.

Розміри символів шрифту можуть бути від 1 до 7. Розмір 3 вважається стандартним, і він орієнтовно відповідає 10 пунктам. Розмір 7 – найбільший. Число 2 як значення параметра SIZE означає 2-й розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, аніж стандартний, тобто п’ятий. Для зміни стандартного розміру шрифту застосовують одинарний тег BASEFONT, який має ті ж самі параметри, що й FONT.

Основні кольори мають наступні назви:

black navy silver
blue maroon purple
red fushsia green
teal lime aqua
olive gray yellow
while    

Приклад 7.1. Розгляньте (повторіть на комп’ютері) html-файл (file3.htm)

<HTML>

<HEAD> <TITLE> My new Web-page </TITLE>

</HEAD> <! --текст в кодах можна записувати підряд -- >

<BODY BGCOLOR = “aqua” TEXT = “red”>

<H2> Це Web-сторінка Світлани Незалежної </H2> <HR>

<CENTER> < B> Привіт! </B>

Мене звати <B> Світлана </B>

</CENTER><P>

Я навчаюся на 3 курсі одній із найцікавіших спеціальностей НАУ – національного авіаційного університету у Києві. Ця спеціальність – туризм. Мені 21 рік. Інформатика та інформаційні системи і технології в туризмі - це мої найулюбленіші дисципліни. Я люблю слухати гарну музику, читати пригодницькі романи, подорожувати як влітку, так і взимку (особливо в теплі країни), але мені подобається кататися на гірських лижах та ходити на дискотеку будь-якої пори року. <BR>

Я відмінниця навчання. &quot;Мрію очолити власний бізнес, зустріти гарного хлопця, одружитися з ним та народити 3 дітей&quot;. <P>

<CENTER> Колись тут буде моє фото.

</CENTER> <P>

Моя адреса: <B> <I> 03670, Київ-70, п.с. 122 </I>

</B> <HR>

</BODY>

</HTML>

Рис. 7.1. Відображення файлу file3.htm у браузері

 

Зауваження: у тексті використано так званий мнемокод &quot, який відображує не екрані лапки. Замість мнемокоду можна скористатися числовим кодом &#34. Коди інших спецсимволів можна знайти у довідниках.

Створення списків

Існує 3 типи списків: 1) ненумерований; 2) нумерований; 3) тлумачення. Список може мати заголовок, який охоплюється тегами <LH> … </LH>, наприклад, так:

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

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

<LH> Мої улюблені університетські дисципліни: </LH>

<UL>

<LI> інформаційні системи і технології в туризмі;

<LI> іспанська та англійська;

<LI> країнознавство.

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

Списоктлумачень використовують для пояснення термінів, створення словників тощо. Його утворюють за допомогою парного тега <DL>…</DL> і двох одинарних тегів <DТ>…</DD> так:

<LH> Заголовок </LH>

<DL>

<DТ> термін

<DD> тлумачення 1

<DD> тлумачення 2 …

</DL>

Наприклад,

<LH> Я знаю наступні нові терміни: </LH>

<DL>

<DТ> HTML

<DD> <I> мова для розмічування гіпертекстових web-сторінок </I>

<DТ> бюраузер

<DD> <I> програма для перегляду web-документів </I>

<DТ> тег

<DD> <I> засіб для записування команд мовою HTML </I>

</DL>

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

 

 

Створення таблиць

У звичайних текстових редакторах таблиці використовують для наочного подання числової або текстової інформації. У web-дизайні таблиці відіграють більшу роль. Часто їх використовують для позиціювання графічних або інших об’єктів на екрані. Такі таблиці утворюють з невидимими межами (рамками), а в клітинках розташовують картинки, тексти тощо.

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

<TABLE параметри>

<ТС> заголовок таблиці </ТС>

В цьому місці пишемо теги для заповнення клітинок таблиці рядок за рядком

</TABLE>

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

<ТR>…</ТR> Формують рядок таблиці
<ТН>текст</ТН> Формують клітинку з заголовком рядка або стовпця
<ТD>текст</ТD> Формують текст кожної клітинки

 

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

Приклад 7.2. Створимо на web-сторінці таблицю-витяг із заліковки успішності Світлани за перші три модулі з 3-х навчальних дисциплін: інформатики, вищої математики та іноземної мови (рис. 7.2):

<CENTER>

<TABLE BORDER=3

BGCOLOR="yellow"

BORDER-COLOR="green">

<TC><I> Мої модульні бали за три перші модулі: </I></TC>

<TR> <TH> </TH>

<TH> І модуль </TH>

<TH> ІІ модуль </TH>

<TH> ІІІ модуль </TH>

</TR>

<TR> <TH ALIGN="left"> Інформатика </TH>

<TD> 83 </TD>

<TD> 92 </TD>

<TD> 97 </TD>

</TR>

<TR> <TH ALIGN="left"> Вища математика </TH>

<TD> 74 </TD>

<TD> 77 </TD>

<TD> 82 </TD>

</TR>

<TR> <TH ALIGN="left"> Іноземна мова </TH>

<TD> 78 </TD>

<TD> 89 </TD>

<TD> 94 </TD>

</TR>

</TABLE>

</CENTER> <P>

Рис. 7.2. Вигляд таблиці у браузері

 

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

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

 

 

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

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

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

Параметр SUMMARY= "текст" використовують для інформації про призначення і структуру таблиці для клієнтських браузерів, які здійснюють не візуальне подання сторінки для осіб із фізичними обмеженнями, синтезують звук чи базуються на принципах азбуки Бройля.

Для того, щоб створити заголовок таблиці, застосовують елемент CAPTION з параметром ALLIGN, наприклад, наступним чином: <CAPTION ALLIGN="bottom"> Це моя таблиця <CAPTION>.

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

 

Практичне робота 7.1

1. Створіть html-файл із розповіддю про себе. Для цього скористайтесь зразком прикладу 7.1. У списках зазначте власні уподобання, місця навчання, праці тощо.

2. Збережіть файл на диску як file3.htm та перегляньте його у браузері.

3. Переробіть файл file3.htm, скориставшись двома видами списків. Новий файл назвіть file4.htm. Перегляньте його.

4. Проведіть на сторінці лінії різної товщини.

5. У файлі file4.htm створіть таблицю з даними про себе. Новий файл назвіть file5.htm. Перегляньте його у браузері.

6. Поекспериментуйте з параметрами тега TABLE.

7. Об’єднайте деякі дві клітини таблиці в одну.

8. створіть ще одну таблицю без рамок, скориставшись тегом <PRE>…</PRE>.

9. Вдоскональте свою сторінку якнайліпше.

 



Поделиться:


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

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