Infoland: Код будущего

HTML элементы могут иметь атрибуты. Атрибуты предназначены для добавления дополнительной информации об элементе и/или для изменения его стандартного поведения. Атрибуты всегда указываются внутри открывающего тега. В большинстве случаев атрибуты являются необязательными и указываются только при необходимости. Один элемент никогда не должен содержать в себе два и более атрибутов, имеющих одинаковое имя. Синтаксис элемента с атрибутом:

Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента.

Задать тип шрифта и цвет

style="font-family: verdana; color: red;"

Задать размер шрифта

style="font-size:30px;"

Задать цвет фона и цвет шрифта

style="background-color: DarkGray;"

Пример

<html>

<h1 style="font-family: verdana;">Заголовок</h1>

<p style="font-size: 10px;">Очень маленький размер текста.</p>

<p style="text-align: right;">Этот текст будет выровнен по правому краю.</p>

<p style="text-align: left;">Этот текст будет выровнен по левому краю.</p>

<p style="width: 300px; margin: 7px; padding: 10px; background: LightPink; ">Этот текст будет иметь ширину 300 пикселей, внешние отступы 7 пикселей, внутренние отступы 10 пикселей и цвет фона розовый.</p>

<p style="text-align: left; border: 4px solid black; ">Этот текст выровнен по левому краю и имеет сплошную черную рамку шириной 4 пикселя.</p>

</body>

</html>

width: 300px; /* Ширина блока */
height: 50px; /* Высота блока */
margin: 7px; /* Значение отступов */
padding: 10px; /* Поля вокруг текста */
border: 4px solid black; /* Параметры границы */
background: #fc0; /* Цвет фона */

Тег <div>

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей.

Списки

Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

Синтаксис

<ul>

<li>элемент маркированного списка</li>

</ul>

<ol>

<li>элемент нумерованного списка</li>

</ol>

Атрибуты

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

Создание нумерованного списка

<li style="font-size: 18px;">Первый пункт списка</li>

<li style="font-size: 16px;">Второй пункт списка</li>

<li style="font-size: 14px;">Третий пункт списка</li>

</ol>

Создание маркированного списка

<ul>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

</ul>

Добавление изображений в качестве маркеров списка

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

</ul>

Добавление изображений в HTML

Для вставки изображений в HTML используется тег <img>.

Тег <img> требует обязательного атрибута src, который указывает путь к изображению.

Можно добавить альтернативный текст с помощью атрибута alt, который отображается, когда изображение недоступно или не загружено.

Атрибуты width и height позволяют указать размеры изображения в пикселях или процентах.

Также рекомендуется использовать атрибут alt для описания изображения, что особенно важно для доступности и поисковой оптимизации.

Выравнивать изображения по горизонтали или вертикали можно, используя атрибут align.

Атрибуты

align Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt Альтернативный текст для изображения.
border Толщина рамки вокруг изображения.
height Высота изображения.
hspace Горизонтальный отступ от изображения до окружающего контента.
lowsrc Адрес изображения низкого качества.
src Путь к графическому файлу.
vspace Вертикальный отступ от изображения до окружающего контента.
width Ширина изображения.

Создание стилей с помощью тега style

Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег STYLE</title>
  <style type="text/css">
   h1 { 
    font-size: 120%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #333366;
   }
  </style>
 </head> 
 <body>

   <H1>Hello, world!</H1>

 </body>
</html>

Создание стилей с помощью CSS

Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между <head> и </head> тегами:
<link href="styles/style.css" rel="stylesheet" type="text/css" />

Теория