Атрибути на тага FONT: face (вид на шрифта)
Задава се със следния код:
<font
face="Название на шрифта">Тук се пише текст</font>
По отношение използването на
шрифтовете запомнете следното:
1. За да види даден потребител
използвания от вас шрифт той също трябва да го има на своя компютър. В
противен случай браузъра ще му покаже вашия текст в шрифт по подразбиране.
2. Не с всички шрифтове може да се пише на кирилица.
Съществуват два основни и най-често използвани шрифта -
times new roman и arial.
- Шрифта на който е написана настоящата страница е arial. Задаването
му става по следния начин:
<font
face="arial">Това е текст, написан на arial.</font>
Ефекта в прозореца на
браузъра е: Това е текст, написан на arial.
- Другия популярен шрифт е times new roman:
<font face="times new roman">Това е текст,
написан на times new roman.</font>
Ефекта в прозореца на браузъра е: Това е текст, написан на times new roman.
Обикновено шрифта times new roman е зададен като шрифт
по подразбиране.
Тези два шрифта са инсталирани на голяма част от
компютрите в света. Препоръчително е поне за основната част от текста във
вашата HTML-страница да използвате някой от тях.
Още нещо много
важно при указване на шрифтовете: едни и същи или много близки
шрифтове имат различни названия в различните компютърни системи.
Поради това е препоръчително да се указва не едно, а няколко названия на
близки шрифтове, отделени със запетаи. Това увеличава шанса потребителя да
види вашия текст точно в шрифта, в който сте го поднесли на страницата си.
Така например кодовете от горните примери трябва да изглеждат по
следния начин:
<font face="arial,
helvetica, verdana, sans-sherif">Това е текст, написан на arial,
helvetica, verdana, sans-sherif.</font>
<font face="times new roman, georgia,
timoku">Това е текст, написан на times new roman, georgia,
timoku.</font>
Както разбирате -
шрифтовете arial, helvetica, verdana и sans-sherif не се различават
особено, както и times new roman, georgia и timoku.
Ето още
няколко популярни шрифта, с които може да се пише на кирилица - courier
(courier new), impact и comic sans (comic sans ms), а под тях - отново
arial и times new roman, за да имате възможност да ги сравните по-добре:
- Това е текст, писан на
courier, courier new.
- Това е текст, писан на impact.
- Това е текст, писан на
comis sans, comic sans ms
- Това е текст,
писан на times new roman, georgia, timoku.
- Това е текст, писан на arial, helvetica, verdana, sans-sherif.
Атрибути на тага FONT: size (размер на шрифта)
<font size="цифра от 1 до 7">Тук
се пише текста</font>
Size е
атрибута за размер (големина) на текста и може да приема стойности от 1 до
7 включително. Например:
<font
size="2">Това е текст с големина 2</font>
Ето как изглежда в различните
размери текст, писан на arial:
Това е текст с размер
1
Това е текст с размер 2
Това е текст с размер 3
Това е текст с
размер 4
Това е текст с размер 5
Това е текст с размер 6
Това е текст с
размер 7
Освен твърдо зададен размер на шрифта е възможно
да се укаже и относителен размер.
Браузърите показват
големина на шрифта по подразбиране с размер 3. За да напишем текст с един
размер по-малък от подразбиращия се трябва да използваме следния код:
<font size="-1">Това е текст с
един размер по-малък от подразбиращия се.</font>
За текст с един размер по-голям
от подразбиращия се трябва да напишем следния код:
<font size="+1">Това е текст с един размер
по-голям от подразбиращия се.</font>
Ето няколко примера за това как изглежда относително зададен
размер:
Това е текст с два размера по-малък от
подразбиращия се.
Това е текст с един размер
по-малък от подразбиращия се.
Това е размера на
текста по подразбиране.
Това е текст с един
размер по-голям от подразбиращия се.
Това е текст
с два размера по-голям от подразбиращия се.
В HTML
съществува специален таг за задаване на заглавия - това е тага <h>
придружен с някаква цифра от 1 до 6 включително. Той има и краен таг -
</h>, който трябва да включва същата цифра. Например:
<h4>Това е заглавие с размер 4</h4>
При използването на този таг
автоматично се добавя по един празен ред над и под текста на заглавието.
Ето как изглеждат всички размери на заглавия:
Това е заглавие с размер 1
Това е заглавие с размер 2
Това е заглавие с размер 3
Това е заглавие с размер 4
Това е заглавие с размер 5
Това е заглавие с размер 6
Атрибути на тага FONT: color (цвят на шрифта)
Задаването на цвят става като се присвои някаква стойност
на атрибута color, например:
<font
color="blue">Това е син текст</font>
<font
color="green">Това е зелен текст</font>
и т.н.
Пример за комбинирано използване на атрибутите на тага за
шрифт
Всички указани атрибути могат да се използват както
поотделно (както беше показано в примерите), така и комбинирано, например:
<font face="arial, helvetica, verdana,
sans-sherif" size="4" color="green">Това е
текст в шрифт arial и подобните му, с размер 4 и зелен цвят</font>
Може да комбинирате няколко
шрифта, размера и цвята в едно изречение или дори в една дума, стига да
укажете съответните стойности на атрибутите за всяка една дума или буква
поотделно и да не пропуснете затварящите тагове. Ето един пример за
преливащи се цветове:
<font face="impact"
size="5">
<font color="#0000ff">H</font>
<font
color="#0700f7">T</font>
<font
color="#0f00f0">M</font>
<font
color="#1600e8">L</font>
<font
color="#1e00e1">L</font>
<font
color="#2500d9">E</font>
<font
color="#2d00d2">S</font>
<font
color="#3400ca">S</font>
<font
color="#3c00c3">O</font>
<font
color="#4300bb">N</font>
<font
color="#4b00b4">S</font>
<font
color="#5200ac">.</font>
<font
color="#5a00a5">H</font>
<font
color="#61009d">I</font>
<font
color="#690096">T</font>
<font
color="#780087">.</font>
<font
color="#870078">B</font>
<font
color="#8e0070">G</font>
<font
color="#960069">-</font>
<font
color="#9d0061">T</font>
<font
color="#b4004b">H</font>
<font
color="#bb0043">E</font>
<font
color="#c3003c">B</font>
<font
color="#cA0034">E</font>
<font
color="#d2002d">S</font>
<font
color="#d90025">T</font>
<font
color="#e80016">H</font>
<font
color="#f0000f">E</font>
<font
color="#f70007">L</font>
<font
color="#ff0000">P</font>
</font>
Ако вкарате
горния код в Notepad ще получите следния резултат в прозореца на браузъра:
H T M L L E S S O N S . H I T . B G - T H E B E S T H E L P
Ако желаете да направите подобен
ефект на текста няма нужда да пишете кода на ръка - може да го генерирате
автоматично online на следния адрес: www.webpage-tools.com/textgrad.asp
Инструменти за допълнително въздействие върху вида на текста
Основните инструменти за преправяне вида на текста са
таговете <b>, <i> и <u>.
Всеки от тях има и завършващ таг с наклонена черта.
Тага <b>
служи за удебеляване на текста, например: Този текст е затворен между
таговете <b> и </b> и затова е удебелен.
Тага
<i> прави текста курсивен (наклонен), например: Този текст е
затворен между таговете <i> и </i> и затова е наклонен.
Тага <u> прави текста подчертан, например: Този текст е
затворен между таговете <u> и </u> и затова е подчертан.
Ето пример за комбинирано използване на таговете: Този
текст е едновременно удебелен, наклонен и подчертан.
Внимание: В урока за основните понятия в езика HTML
беше подчертано, че таговете се затварят последователно и винаги
тага, който се отваря първи, се затваря последен. Отнесено към
горния пример това означава, че кода трябва да изглежда по следния начин:
<b> <i> <u>Този текст
е едновременно удебелен, наклонен и подчертан.</u> </i> </b>
Неправилно е
кода да се напише например така:
<b>
<i> <u>Този текст е едновременно удебелен, наклонен и
подчертан.</i> </b> </u>
Освен тези основни три тага в HTML съществуват и още много
възможности за променяне на вида на текста. Ето списък на тези
възможности:
- <strong> Удебелява текста
подобно на тага <b></strong>
- <ins>Подчертава текста подобно
на тага <u></ins>
- <em> Показва текста наклонен
подобно на тага <i></em>
- <cite> Показва текста
наклонен подобно на тага <i></cite>
- <dfn>Показва текста наклонен
подобно на тага <i></dfn>
- <var>Показва текста наклонен
подобно на тага <i></var>
- <big> Увеличава големината на
шрифта с един размер на всяко изписване на тага</big>
- <small> Намалява големината
на шрифта с един размер на всяко изписване на тага</small>
- <strike>
Зачертава
текста</strike>
- <s>
Зачертава текста</s>
- <del>
Зачертава
текста</del>
- <sup> Изписва текста като
горен индекс</sup>
- <sub>Изписва текста като долен
индекс</sub>
- <tt>Изписва текста в шрифт
като на пишеща машина подобен на Courier</tt>
- <code>
Изписва текста в
шрифт като на пишеща машина подобен на Courier
</code>
- <samp>Изписва текста в
шрифт като на пишеща машина подобен на Courier</samp>
- <kbd>Изписва текста в
шрифт като на пишеща машина подобен на Courier</kbd>
- <acronym> </acronym> Този таг
не се възпроизвежда от графичните браузъри, а само от аудио-браузърите,
където задава изговаряне на всяка буква поотделно.
Разполагане на текста по страницата и подравняване на текст
Положението на текста в една HTML-страница трябва изрично
да се укаже. Ако отворите един текстов редактор и започнете да пишете в
него само текст, без никакви команди за указване на разположението на
текста по страницата, текста ви ще се появи в прозореца на браузъра
подравнен по най-горната и най-лявата му част и без никакви интервали
между отделните редове, независимо дали при писането в
текстовия редактор сте оставили такива или не.
Разполагането на текста
по страницата става чрез следните тагове:
- Параграфи
Тага за параграф е <p>. Той има и завършващ таг - </p>
Текстовия блок затворен между таговете <p> и </p> ще се
появи на страницата на един ред разстояние от предходния и следващия го
текст, както е разположен настоящия текстов блок.
Ако изпишете
няколко тага за параграф един след друг това ще има същия ефект както от
един таг.
- Преминаване на следващ ред
Тага за преминаване на следващ
ред е <br /> и той няма затварящ таг.
Но тъй като XHTML изисква затваряне на всички тагове, в тага за
преминаване на следващ ред се поставя наклонена завършваща черта на един
интервал разстояние от буквите br - както е показано в примера.
На
страницата ви ще се появят толкова свободни редове, колкото пъти
изпишете тага <br /> Ако напишете например <br /> <br
/> <br /> <br /> <br /> <br /> това ще
предизвика следния ефект:
- Отстъп на блоков текст
Ако искате един блоков текст
(например дълъг цитат) да се открои от останалия текст трябва да
използвате тага <blockquote> Той има
затварящ таг </blockquote>
Текста заключен между тези два тага ще се появи като абзац
с отстъп и със свободен ред над и под него, точно както е в абзаца,
който четете в момента. Ако в една двойка тагове се вмъкне и втора ще
се получи още по-голям отстъп.
- Показване на текст така, както е изписан в Notepad
Както
беше споменато в началото - ако изрично не укажете чрез съответния таг
начина на разположение на текста, то браузъра ще го покаже като един
компактен блок. Докато пишете кода в Notepad може например многократно
да натискате Enter и да оставяте неограничено количество свободни редове
- за браузъра това няма да има никакво значение и той ще показва текста
компактно, без да прескача на следващ ред, докато не използвате тага
<br> Същото се отнася и за оставянето на множество интервали с
дългия клавиш (space) - браузъра ще отчита само една стъпка разстояние
между думите.
За да преодолеете това и да видите текста точно както
сте го написали трябва да използвате тага <pre> Той има затварящ таг </pre>
Например текста ви ще може да
изглежда така:
Този текст може да се изпише с повече
паузи и празни редове, но въпреки това ще се
в и ж д а както е написан в Notepad, защото
е затворен между таговете <pre> и </pre>
Ако
изпишете само таговете <pre> и </pre>, то текста, затворен
между тях ще се появи в шрифт, подобен на Courier (както е в примера
горе), независимо какъв шрифт сте указали преди това. За да използвате
друг шрифт ще трябва да го вмъкнете между таговете <pre> и
</pre>, например:
<pre> <font face="arial">Това е текст, написан на A R I A L</font> </pre>
Въпреки удобството, което предлага на пръв
поглед, не е препоръчително да използвате често тага <pre>, тъй
като е възможно различните марки и версии браузъри да покажат страницата
ви по различен начин.
- Оставяне на по-голям интервал
Вече знаете, че ако не
използвате тага <pre> браузъра показва само по една стъпка
интервал между думите, независимо колко интервала сте оставили докато
сте писали кода в Notepad. Понякога се налага да се остави по-голям
интервал между две думи или да се започне новия ред с отстъп. Тогава се
използва кода за интервал Той
оставя по една стъпка интервал всеки път, когато се изписва.
За да започнете нов ред с
отстъп от например 6 интервала - както е започнат настоящия ред - ще
трябва шест пъти да изпишете кода
преди да започнете да пишете текста на реда. Не забравяйте да изписвате
точката и запетаята, с които всеки код завършва.
- Интервал, който не позволява разделяне на две думи чрез пренасяне на
друг ред
Тази роля се изпълнява отново от кода . Когато един ред изпълни прозореца на
браузъра от лявото до дясното поле, браузъра автоматично пренася
следващата дума на следващия ред. Понякога обаче е наложително две думи
задължително да се появят заедно, една до друга, а не да се разположат
на съседни редове. За да е сигурно, че те ще се изобразят на един и същ
ред между тях трябва да се вмъкне кода
Понякога е
необходимо не две думи, а цяло изречение непременно да се изобрази на
един ред, без да се разделя на два и повече реда. В този случай имаме
три възможности:
1. Изречението се огражда с таговете <pre> и </pre>, като в текстовия редактор непременно
се изписва на един ред.
2. Изречението се огражда с таговете <nobr> и </nobr>
3. Между всички думи на
изречението се вмъква кода
Имайте предвид, че във всеки от тези случаи, ако изречението е
толкова дълго, че не се вмества в прозореца на браузъра, то ще продължи
вдясно от екрана, а в долната част на браузъра ще се появи лента за
превъртане, чрез която страницата да се придвижва наляво и надясно, за
да е възможно да се чете целия текст.
- Подравняване на текст вляво, вдясно и центриране на текст
По
подразбиране браузъра показва текста подравнен към лявата част на
страницата. Но ако желаете да зададете някакво друго положение на текста
трябва да използвате тага div и атрибута му
align със съответните стойности. Например:
<div align="left">
Подравнява текста вляво
</div>
<div
align="right">
Подравнява текста вдясно
</div>
<div
align="center">
Центрира текста
</div>
Не забравяйте всеки път да
поставяте завършващия таг </div>
За да центрирате текст може да ползвате и тага <center>, който има завършващ таг </center> Но е препоръчително все пак да се
ползва тага div, тъй като тага center не се възприема от браузърите във
всички случаи.
- Подравняване на текст едновременно вляво и вдясно
Подредено
и красиво изглежда текст, който е подравнен едновременно и към лявата и
към дясната част на страницата. Това се постига, като на атрибута align на тага div се
зададе стойност justify. Например:
<div align="justify">
Този текст е подравнен едновременно вляво и вдясно.
Този текст е подравнен едновременно вляво и вдясно. Този текст е
подравнен едновременно вляво и вдясно. Този текст е подравнен
едновременно вляво и вдясно. Този текст е подравнен едновременно вляво и
вдясно. Този текст е подравнен едновременно вляво и вдясно. Този текст е
подравнен едновременно вляво и вдясно. Този текст е подравнен
едновременно вляво и вдясно. Този текст е подравнен едновременно вляво и
вдясно. Този текст е подравнен едновременно вляво и вдясно. Този текст е
подравнен едновременно вляво и вдясно. Този текст е подравнен
едновременно вляво и вдясно. Този текст е подравнен едновременно вляво и
вдясно. Този текст е подравнен едновременно вляво и вдясно. Този текст е
подравнен едновременно вляво и вдясно. Този текст е подравнен
едновременно вляво и вдясно.
</div>
Подравняването на текст в
параграф и заглавие може да стане и като стойностите на атрибута align
се зададат директно в таговете за параграф и заглавие, например:
<p align="justify">Текст на
параграф...<p>
<h2 align="center">Текст на заглавие...<h2>
и т.н.
Символни шрифтове (Webdings и Wingdings)
Съществуват 2 шрифта, които ви дават възможност да
добавите всевъзможни символи към страницата си. Това са шрифтовете
Webdings и Wingdings. За да видите всички
символи, които те предоставят, трябва да напишете например:
<font face="webdings" size="6">Тук вкарайте
всички символи от клавиатурата - цифри, букви и т.н.</font>
<font
face="wingdings" size="6">Тук вкарайте всички символи от
клавиатурата - цифри, букви и т.н.</font>
Имайте предвид, че при включен бутон Caps Lock (главни
букви) се изписват едни символи, а при писане с малки букви - други
символи. Различни символи се появяват и при писане на кирилица и
латиница.
Ето какъв резултат се получава при изписване на
всички символи от клавиатурата, като се започне от най-горния ляв бутон
(бутона със символ "~", намиращ се под бутон Escape) и се завърши с
най-долния десен бутон, изобразяващ въпросителен знак и наклонена черта.
Webdings
- Символи на Webdings при писане с малки букви на латиница (редовете
следват редовете на клавиатурата от ляво на дясно)
` 1 2 3 4 5 6 7 8 9 0 - =
q w e r t y u i o p [
]
a s d f g h j k l ; '
z x c v b n m , . /
- Символи на Webdings при писане с големи букви на латиница (редовете
следват редовете на клавиатурата от ляво на дясно)
` 1 2 3 4 5 6 7 8 9 0 - =
Q W E R T Y U I O P [
A S D F G H J K L ; '
Z X C V B N M , . /
- Символи на Webdings при писане с малки букви на кирилица - БДС
(редовете следват редовете на клавиатурата от ляво на дясно)
` 1 2 3 4 5 6 7 8 9 0 - .
, у е и
ш щ к с д з ц ;
ь я а о ж г т н в м ч (
ю й ъ э ф х п р л б
- Символи на Webdings при писане с големи букви на кирилица - БДС
(редовете следват редовете на клавиатурата от ляво на дясно)
` 1 2 3 4 5 6 7 8 9 0 - .
, У Е И
Ш Щ К С Д З Ц ;
Ь Я А О Ж Г Т Н В М Ч (
Ю Й Ъ Э Ф Х П Р Л Б
- Символи на Webdings при изписване на символите от клавиатурата ~ ! @
# $ % ^ & * ( ) _ + { } §
~ ! @ #
$ % ^ & * ( ) _ + { } §
- Символи на Webdings при изписване на символите от клавиатурата ` ? +
" % = : / _ № І V < >
` ? + " %
= : / _ № І V < >
Wingdings
- Символи на Wingdings при писане с малки букви на латиница (редовете
следват редовете на клавиатурата от ляво на дясно)
` 1 2 3 4 5 6 7 8 9 0 - =
q w e r t y u i o p
[ ]
a s d f g h j k l ; '
z x c v b n m , . /
- Символи на Wingdings при писане с големи букви на латиница (редовете
следват редовете на клавиатурата от ляво на дясно)
` 1 2 3 4 5 6 7 8 9 0 - =
Q W E R T Y U I O P
[
A S D F G H J K L ; '
Z X C V B N M , . /
- Символи на Wingdings при писане с малки букви на кирилица - БДС
(редовете следват редовете на клавиатурата от ляво на дясно)
` 1 2 3 4 5 6 7 8 9 0 - .
, у е
и ш щ к с д з ц ;
ь я а о ж г т н в м ч (
ю й ъ э ф х п р л б
- Символи на Wingdings при писане с големи букви на кирилица - БДС
(редовете следват редовете на клавиатурата от ляво на дясно)
` 1 2 3 4 5 6 7 8 9 0 - .
, У Е
И Ш Щ К С Д З Ц ;
Ь Я А О Ж Г Т Н В М Ч (
Ю Й Ъ Э Ф Х П Р Л Б
- Символи на Wingdings при изписване на символите от клавиатурата ~ !
@ # $ % ^ & * ( ) _ + { } §
~ !
@ # $ % ^ & * ( ) _ + { } §
- Символи на Wingdings при изписване на символите от клавиатурата ` ?
+ " % = : / _ № І V < >
` ? +
" % = : / _ № І V < >
Коментари (8)