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

CSS и HTML » HTML

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

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

• Това е текст, писан на courier, courier new.
• Това е текст, писан на impact.
• Това е текст, писан на comis sans, comic sans ms
• Това е текст, писан на times new roman, georgia, timoku.
• Това е текст, писан на arial, helvetica, verdana, sans-sherif.

Това е заглавие с размер 1

Това е заглавие с размер 2

Това е заглавие с размер 3

Това е заглавие с размер 4

Това е заглавие с размер 5

Това е заглавие с размер 6

• <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>
• ^{^{Изписва текста като горен индекс}}
• _{_{Изписва текста като долен индекс}}
• <tt>Изписва текста в шрифт като на пишеща машина подобен на Courier</tt>
• <code>Изписва текста в шрифт като на пишеща машина подобен на Courier</code>
• <samp>Изписва текста в шрифт като на пишеща машина подобен на Courier</samp>
• <kbd>Изписва текста в шрифт като на пишеща машина подобен на Courier</kbd>
• <acronym> </acronym> Този таг не се възпроизвежда от графичните браузъри, а само от аудио-браузърите, където задава изговаряне на всяка буква поотделно.

• Параграфи
  
  Тага за параграф е <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 при писане с малки букви на латиница (редовете следват редовете на клавиатурата от ляво на дясно)
  
  ` 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 при писане с малки букви на латиница (редовете следват редовете на клавиатурата от ляво на дясно)
  
  ` 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 < >