Dobri-porady.pp.ua
Поради для маленьких і великих

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

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

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

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

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

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

html размер шрифтаПерший атрибут цього тега - "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"

размер шрифта в htmlТакож існує кілька тегів, що дозволяють задати один конкретний вид форматування: "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" зі значенням того класу, який ви хочете використовувати.

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

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

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

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

id="myid"

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

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