Прикраса веб-сторінки і розмір шрифту в HTML

Початківцям веб-дизайнерам корисно буде знати про способи оформлення тексту веб-сторінки. До них відносяться вирівнювання, колір, розмір шрифту та багато іншого.

З форматуванням пов`язані кілька тегів. Найчастіше використовується "p" - абзац. У нього є необов`язкові параметри, що задають зовнішній вигляд тексту.

Перший і основний параметр - це "align". Він визначає вирівнювання тексту і може приймати значення "left", "right", "center" і "justify" - рівняння по лівій стороні, по правій, по центру і по всій ширині блоку відповідно. Зауважте, що положення тексту задається не відносно кордонів екрану, а в межах абзацу.

Далі йдуть параметри "class" і "id". Вони визначають, до якого класу належить даний об`єкт і його ідентифікатор. Сюди ж можна віднести і атрибут "style" - він задає вбудований стиль блоку. Всі ці властивості пов`язані з CSS, мова про який піде трохи нижче.

У тега "p" є один недолік - з його допомогою можна задати зовнішній вигляд шрифту, наприклад, його колір або розмір. Для цих цілей призначений інший тег - "font". Всі його параметри визначають, як буде виглядати текст.

Перший атрибут цього тега - "color". Як ви вже здогадалися, в ньому задається колір. Цей параметр може приймати як назви ("white", "yellow", "magenta"), так і значення в системі RGB. Це робиться так: спочатку ставиться знак #, а потім вказуються три числа в шістнадцятковій системі числення від 00 до ff або від 0 до 255 - в десяткового - кількість червоного, зеленого і синього в кінцевому кольорі. Наприклад, для використання червоного кольору потрібно написати "# ff0000", жовтого - "# ffff00".

Наступний атрибут - "face". Він визначає гарнітуру шрифту. Наприклад, йому можна задати значення "Times New Roman" або "Tahoma".

І, нарешті, за розмір шрифту в HTML відповідає параметр "size". Він приймає числове значення - кегль.

Наприклад, щоб вивести текст блакитним кольором і шрифтом "Comic Sans MS" п`ятнадцятого кегля, потрібно визначити тег "p" з параметрами:

color = "# 6666ff" face = "Comic Sans MS" size = "15"

Також існує декілька тегів, що дозволяють задати один конкретний вид форматування: "b" - виділення жирним, "i" - курсивом, "u" - підкреслення. Всі вони не мають параметрів.

Задавати атрибути тексту в HTML - розмір шрифту, гарнітуру - досить незручно. Уявіть, що вам потрібно чергувати блоки з різним оформленням тексту. Тоді до кожного з тегів вам доведеться визначати одні й ті ж атрибути. Значно зручніше це можна реалізувати за допомогою CSS-каскадних таблиць стилів. Наприклад, щоб створити клас картинок під назвою "myclass" з таким оформленням, як у попередньому прикладі, потрібно додати в тег "style" такий рядок:

#myclass {font: rgb (102,102,255) "Comic Sans MS" 15pt-}

Тут "rgb (102,102,255)" задає колір, "Comic Sans MS" - гарнітуру, а "15pt" - розмір шрифту. Колір також можна задавати назвою, а шрифт - як в кеглях, так і в пікселях (для цього потрібно написати, наприклад, "20px").

Для застосування цього оформлення потрібно в тезі "p" написати:

class = "myclass"

Таким же способом можна оформити будь-який інший текст. Досить поставити параметр "class" зі значенням того класу, який ви хочете використовувати.

А щоб створити ідентифікатор з назвою "myid", потрібно в "style" записати:

#myid {font: rgb (102,102,255) "Comic Sans MS" 15pt-},

а в тезі "p" задати атрибут "id" зі значенням "myid".

Клас і ідентифікатор - це практично одне і те ж. При цьому в одного тега може бути оголошений як перший, так і другий:

class = "myclass" id = "myid"

Існує два способи зміни зовнішнього вигляду тексту - HTML і CSS. Якщо вам потрібно оформити один-два блоки, то використовуйте HTML. А для великої кількості абзаців з однаковим форматуванням більш зручним є CSS.

Як бачите, змінити розмір шрифту в HTML зовсім нескладно. Головне в програмуванні - це практика, тому намагайтеся більше тренуватися, і у вас все вийде!