Варна - 2006

Съдържание:

HTML - Въведение
HEAD
BODY - фон, текст, цветове на връзките
FONT - работа с текстове
Форматиране на параграфи
Цветове
Хипервръзки
IMG - Изображения
Таблици
Списъци
Формуляри
Линии
Фреймове
Музикален фон

Работа с текстове. Тагът <FONT>

За разлика от тага <body> той не може да се ползва без нито един атрибут, но също има затварящ таг </font>

Атрибута FACE

  • Задава външния вид на шрифта.
  • <font face="Название на шрифта">Тук се пише текст </font>
  • По отношение използването на шрифтовете запомнете следното:
    • За да види даден потребител използвания от вас шрифт той също трябва да го има на своя компютър. В противен случай браузъра ще му покаже вашия текст в шрифт по подразбиране.
    • Не с всички шрифтове може да се пише на кирилица.

Пример: <font face="arial">Това е текст, написан на arial.</font>

Атрибута SIZE

  • Size е атрибута за размер (големина) на текста и може да приема стойности от 1 до 7 включително.
  • <font size="2">Това е текст с големина 2 </font>
  • Освен твърдо зададен размер на шрифта е възможно да се укаже и относителен размер.
    Браузърите показват големина на шрифта по подразбиране с размер 3.
  • < font size="-1">Това е текст с един размер по-малък от подразбиращия се.</font>
  • <font size="+1">Това е текст с един размер по-голям от подразбиращия се.</font>

Атрибута COLOR

  • Задава цвета на текста в страницата.
  • <font color="red"> Този текст ще бъде червен. </font>

Тагове за допълнително въздействие върху вида на текста

  • Тага <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>
    • <cite> Цитат - Показва текста наклонен подобно на тага <i> </cite>
    • <strike> Зачертава текста </strike>
    • <sup> Изписва текста като горен индекс </sup>
    • <sub> Изписва текста като долен индекс </sub>
    • <tt> Изписва текста в шрифт като на пишеща машина подобен на Courier </tt>

Заглавия <H>

  • Тага <h> е придружен с някаква цифра от 1 до 6 включително. Той има и съответния затварящ таг.
  • <h4>Това е заглавие от ниво 4 </h4>
  • При използването на този таг автоматично се добавя по един празен ред над и под текста на заглавието.
  • В Dreamweaver заглавията се дефинират в Modify/Page Properies - Headings

Упражнение 4:

а) Копирайте следния текст в лявата част на прозореца по-долу и натиснете бутона над него.

<html>
<body>

<b>This text is bold</b>

<br>

<strong>
This text is strong
</strong>

<br>

<font color="red"> Този текст ще бъде червен. </font>
<br>

<font size="+2"> Този текст ще е по-голям с <b> 2 </b> пункта от основния. </font>
<br>

<em>
This text is emphasized
</em>

<br>

<font face="Ariel" color="blue" > Това е текст с различен шрифт </font>
<br>

</body>
</htm>

б) Заменете текста със следния:

<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>

</body>
</html>

в) Пробвайте различни варианти за форматиране на произволен текст.

Упражнение 5:

Създаване на web-страница с Macromedia Dreamweaver - текстове

  1. Отворете документ в Macromedia Dreamweaver.
  2. Когато сте в режим Design и въвеждате някакъв текст, панела Properties e най-отдолу. Разгледайте елементите, които съдържа.
  3. Format - тук може да изберете заглавия или да посочите даден текст, че е в нов параграф.
  4. Font - избор на шрифт
  5. Style - набор от стилови формати. Тези стилове се задават в частта HEAD и служат за по-добро управление на текстовете в страницата.
  6. Size - размер.
  7. Квадратчето до размера служи за избор на цвят. След като посочите цвят, неговия код се добавя в атрибутите на тага font автоматично.
  8. Ако някакъв текст ще служи за хипервръзка, добавяме URL в полето Link. (повече в частта за хипервръзки)
JDJ © 2006 Всички права запазени.