logo

Практическое применение атрибутов к тегам

Давайте на практике применим атрибуты к каким-нибудь тегам и посмотрим, что получится.

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Ура!!! Получилось!!!

Можно развивать страницу дальше!
</body>
</html>

Для примера выделим текст Ура!!! Получилось!!! красным цветом. Для этого нам необходим тег <font>, который отвечает за характеристику шрифта, в данном случае за его цвет. А сам цвет задаётся атрибутом color, который прописывается следующим образом — color="#код цвета". Все коды цветов Вы найдёте в интернете, и сохраните файлик с кодами цвета, он Вам не раз еще пригодится.

В конечном итоге наш код примет такой вид:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<font color="#ff000">Ура!!! Получилось!!!</font>

Можно развивать страницу дальше!
</body>
</html>

Теперь я быстренько сохраню этот файл и посмотрим, как это будет выглядеть в браузере…

Выделение текста цветомРассмотрим еще один небольшой пример. Наш текст располагается с левой стороны в браузере. Сейчас мы выставим его по центру. Для того, чтобы весь текст выставить по центру, воспользуемся тегом <div> с атрибутом align, который отвечает за выравнивание элемента страницы.

Атрибуту align присваиваются следующие значения:

center — выравнивание текста по центру
left — выравнивание текста по левому краю
right — выравнивание текста по правому краю
justify — выравнивание по левому и правому краю.

Нам нужно выравнять по центру — <div align="center">

Для выравнивания всего текста тег <div> устанавливается в начале документа и в конце обязательно закрывается. Наш код примет следующий вид:

<html>
<div align="center"><head>
<title>Моя первая страница</title>
</head>
<body>
<font color="#ff000">Ура!!! Получилось!!!</font>

Можно развивать страницу дальше!

</div>
</body>
</html>

Теперь текст передвинется в середину браузера:

Выравнивание текста по центруДля лучшего освоения таких уроков, я советую Вам скачать и установить программу Nvu — html редактор с официального сайта, программа бесплатная. У программы большие возможности. Например Вы пишете код, переключили в режим просмотра и видите, что у Вас получилось. Очень удобно!

Практическое применение атрибутов к тегам обновлено: Июль 9, 2017 автором: admin

Оставить комментарий

▲Вверх