Атрибути на тага 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>
Може да комбинирате няколко шрифта, размера и цвята в едно изречение или дори в една дума, стига да укажете съответните стойности на атрибутите за всяка една дума или буква поотделно и да не пропуснете затварящите тагове.
Инструменти за допълнително въздействие върху вида на текста
Основните инструменти за преправяне вида на текста са таговете <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 < >
|
