Html

   Основы создания сайтов

 

В этом уроке мы пройдем еще несколько основных тегов, а также поймем, что применительно к одному тексту (слову, фразе) может использоваться несколько тегов одновременно.

Таким же образом, как мы делали текст жирным шрифтом с помощью тэга <b>, вы можете придать ему характер курсива тегом <i>. "i" - это сокращение от "italic".

Пример № 1:

<i>Текст, выделенный курсивом.</i>

В Интернет-браузере будет выглядеть следующим образом:

Текст, выделенный курсивом

Так же можно уменьшить размер шрифта тегом small:

Пример № 2:

<small>Этот текст уменьшен.</small>

в браузере:

Этот текст уменьшен.

 

Использование  нескольких тегов одновременно.

Если вы хотите, чтобы текст  был одновременно жирным курсивом, вы заключаете его сразу в два соответствующих тега.

Пример № 3:

<b><i>Текст bold и italic</i></b>

в браузере:

Текст bold и italic

Обратите внимание: тег, который идет первым, закрывается последним! Если вы поставите его при закрытии так же первым, конструкция не будет работать.

Теги, не содержащие в себе текста.

Как уже было сказано, есть тэги, которые являются одновременно открывающими и закрывающими. Эти тэги содержат команды, которые не связаны с конкретным текстом, они являются изолированными командами. Пример - тег <br>, который создаёт перевод строки:

Пример № 4:

Пример текста,<br>который мы переносим на новую строку.

И как это будет выглядеть в браузере:

               Пример текста,
               который мы переносим на новую строку.

Другой такой тег - <hr> - рисует горизонтальную линию ("hr" - от англ. "horizontal rule"):

Пример № 5:

<hr width="650">

(где атрибут «width» - указывает длину линии в пикселях (при построении сайтов обычно используется единица измерения длины, ширины и высоты – пиксели,  а не сантиметры, но к этому легко привыкнуть)*.

И как это будет выглядеть в браузере:

Еще теги.

Примеры тегов, требующих наличия закрывающего тэга: <ul>, <ol> и <li>. Эти тэги используются для вывода списков.

<ul> - сокращение от "unordered list - неупорядоченный список" - вставляет некий значок (кружочек, кнопка или даже маленькая картинка) для каждого элемента списка. <ol> - сокращение от "ordered list - упорядоченный список" - нумерует цифрами каждый элемент списка. Для создания элемента списка используется тэг <li> ("list item - элемент списка"). Примеры:

Пример № 6:

<ul>
<li>Огурец</li>
<li>Помидор</li>
<li>Кабачок</li>
<li>Баклажан</li>
</ul>

И как это будет выглядеть в браузере:

  • Огурец
  • Помидор
  • Кабачок
  • Баклажан

Пример № 7:

 <ol>
<li>Огурец</li>
<li>Помидор</li>
<li>Кабачок</li>
<li>Баклажан</li>
</ol>

И вот что мы видим в  браузере:

  1. Огурец
  2. Помидор
  3. Кабачок
  4. Баклажан


Итак, повторим изученные в этом и предыдущих уроках теги:

<html>Тело документа</html>
<body>Тело сайта</body>
<p>Абзац</p>
<a>Ссылка</a>
<h1>Самый большой заголовок</h1>
<h2>Большой заголовок</h2>
<h3>Средний заголовок</h3>
<h4>Небольшой заголовок</h4>
<h5>Маленький заголовок</h5>
<h6>Самый маленький заголовок</h6>
<b>Жирный шрифт</b>
<i>Курсив</i>
<small>Уменьшенный шрифт</small>
<br>Перевод строки
<hr>Горизонтальная линия
<ul>Список</ul>
<ol>Упорядоченный список</ol>
<li>Элемент списка</li>

Обратите внимание, что «тело документа» и «тело сайта» – не одно и то же. Тело документа – более широкое понятие и оно может содержать массу дополнительных параметров, которые влияют на работу сайта, но не отражаются на экране.

Дополнительная информация к уроку:

*Пиксель - это единица для измерения разрешения экрана.  В отличие от сантиметров, пиксели являются относительными единицами, которые зависят от разрешения данного экрана. Для пользователя, у которого высокое разрешение экрана, 25 пикселей могут выглядеть как 1 сантиметр. Эти же 25 пикселей при низком разрешении экрана могут соответствовать 1.5 или даже 2 сантиметрам экрана.

 
Создать бесплатный сайт с uCoz