Украшение веб-страницы и размер шрифта в HTML

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

С форматированием связаны несколько тегов. Чаще всего используется "p"– абзац. У него есть необязательные параметры, задающие внешний вид текста.

размер шрифтаПервый и основной параметр – это "align". Он определяет выравнивание текста и может принимать значения "left", "right", "center" и "justify" –равнение по левой стороне, по правой, по центру и по всей ширине блока соответственно. Заметьте, что положение текста задаётся не относительно границ экрана, а в пределах абзаца.

Далее следуют параметры "class&rdquo- и "id". Они определяют, к какому классу принадлежит данный объект и его идентификатор. Сюда же можно отнести и атрибут "style"-он задаёт встроенный стиль блока. Все эти свойства связаны с CSS, речь о котором пойдёт чуть ниже.

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

html размер шрифтаПервый атрибут этого тега – "color". Как вы уже догадались, в нём задаётся цвет. Этот параметр может принимать как названия ("white", "yellow", "magenta"), так и значения в системе RGB. Это делается так: сначала ставится знак #, а потом указываются три числа в шестнадцатеричной системе счисления от 00 до ff или от 0 до 255 - в десятичной – количество красного, зелёного и синего в конечном цвете. Например, для использования красного цвета нужно написать "#ff0000", жёлтого - "#ffff00".

Следующий атрибут – "face". Он определяет гарнитуру шрифта. Например, ему можно задать значение "Times New Roman" или "Tahoma".

Видео: HTML3. Размер шрифта и заголовки.

И, наконец, за размер шрифта в HTML отвечает параметр "size". Он принимает числовое значение – кегль.




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

Видео: Основы HTML. Как изменить размер текста на интернет-странице

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="myclass"



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

А чтобы создать идентификатор с названием "myid", нужно в "style" записать:

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

а в теге "p" задать атрибут "id" со значением "myid".

Класс и идентификатор – это практически одно и то же. При этом у одного тега может быть объявлен как первый, так и второй:

Видео: Урок 3. Оформление текста

class="myclass" id="myid"

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

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



Внимание, только СЕГОДНЯ!


Поделись в соцсетях:
Оцени статью:


Похожее
» » » Украшение веб-страницы и размер шрифта в HTML