Помогни ни да направим Uroci.net по - богат! Добави урок

HTML Урок №5 Текст

MasteR95   трудност:    видян: 37074

Атрибути на тага 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 < >



Коментари (7)

koko700 на 02.04 2010 в 13:27ч.
Здравейте, съжалявам за невежеството но съм още нов в правене на сайтове с HTML, CSS и други такива езици, затова искам да попитам какъв шрифт да използвам зада ми се показва текстта на гръцки език.Благодаря предварително.
duka на 14.04 2010 в 13:21ч.
Това за гръцкия език не е до шрифт а encoding. В head-a сложи този израз:


Използвай който си искаш шрифт :)
script на 24.08 2010 в 23:37ч.
Абе как запомняте всичко, имам предвид как тренирате за да запомните всичко това. Аз прочетох всички урози преди този, но някой неща почват да ми се губят, аз си ги записвам на един текстов файл на компа и си преглеждам по-някога. Някой ако може да предложи някакъв начин за по-добро запомняне, ще съм му благодарен. Някой ако има опит, да сподели.
script на 07.09 2010 в 21:57ч.
Аз съм с notepad++ и като напиша ми пропуска ред както на а не ми пропуска място (интервал)! Защо така?
pepepepe42 на 07.08 2011 в 18:44ч.
Здравейте!..имам проблем с изписването на български- гърми и ми изкарва някакви непрочитаеми символи.. на англиийски не е така!:)..ще се радвам да помогнете!:)
Hristak на 10.01 2014 в 13:09ч.
Добър ден! Бих искал да попитам, дали е възможно да ми кажете с какъв таг бих могъл да Не оставям голямо разтояние на междуредието на даден текст, тъй като админ панела, с който работя оставя голямо разтояние на всеки нов ред от предходния. Благодаря :)
Hristak на 10.01 2014 в 13:25ч.
Здравейте, знае ли някой, как да премахна междуредието на текст на HTML, тъй като админ панела с който работя оставя голямо междуредие? Благодаря предварително :)

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com