Online-учебник по HTML

Автор учебника: Евгений Андросов


Урок 5. Двигаемся дальше


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

Таким же образом, как мы делали текст жирным шрифтом с помощью тэга <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 сантиметрам экрана.


Предыдущий урок    | К началу урока | К оглавлению |     Следующий урок




Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Назир
Дата: 01.03.2019

Я пользуюсь сайтом и хочется выброть несколько тегов, например авто, б/У, красного цвета. Как это делается ((( я не разбираюсь в этом я всего то врач

Комментарий добавил(а): Олег
Дата: 11.06.2012

Как зделать текстову онлайн игру?

Комментарий добавил(а): Инна
Дата: 20.04.2012

Все доступно и ясно! Нравится что пишете от каких слов пошли названия тегов,так легче запоминается.Большое спасибо!!!

Комментарий добавил(а): Марина
Дата: 07.11.2011

Спасибо за уроки! Всё очень понятно и легко.

Комментарий добавил(а): Евгений
Дата: 12.09.2011

Всё это не так сложно как кажется, главное иметь цель и голову на плечах, тогда всё получится))

Комментарий добавил(а): Юрий Серёгин
Дата: 04.04.2011

Вопросов нет. Потрясён простотой и доступностью изложения. Спасибо.

Комментарий добавил(а): Евгений Андросов
Дата: 29.03.2011

Ирина!
Мне такие справочники не встречались. На первое время подойдет шпаргалка. Если часто будете с ними работать, через месяц не будет нужна и она :) А вообще любой тег с возможными атрибутами к нему и подробным описанием всегда можно найти в Интернете по мере надобности.

Комментарий добавил(а): IRINA
Дата: 29.03.2011

Вероятно есть справочники по таким тегам, да? или их не так много и нужно просто шпаргалку завести?

Комментарий добавил(а): Евгений Андросов
Дата: 17.01.2011

Валерий! Что значит "как обычный текст"? Если открывается в браузере, это значит, что у вас работает html-документ. Вероятно документ просто не содержит кода разметки - заголовки, жирный шрифт, цвет шрифта и т.д. Этот текст вы ведь тоже видите, как обычный текст, но это html-страница :)

Комментарий добавил(а): Валерий
Дата: 17.01.2011

Уменя та же проблема в Оpere открывается как обычные текст,скопировал верхнюю часть служебного кода и попробовал вставить свой текст не получилось,сохранял как html

Комментарий добавил(а): Евгений Андросов
Дата: 30.10.2010

Roma! Ответ на вопрос как сделать фон в одноименном уроке "Учебника по CSS" - Как сделать фон. Однако, для того, чтобы ориентироваться в этом вопросе, я рекомендовал бы вам изучить все уроки Учебника по CSS.

Комментарий добавил(а): roma
Дата: 30.10.2010

как сделть фон

Комментарий добавил(а): Анжела
Дата: 26.03.2010

Спасибо! Все получилось!

Комментарий добавил(а): Евгений Андросов
Дата: 26.03.2010

Анжела! Вероятно, вы забыли поменять расширение файла, перед тем, как его сохранять. Попробуйте еще раз: нажмите на "Сохранить как" и назовите файл index.html, после этого нажмите "Сохранить". Все должно получиться!

Комментарий добавил(а): Анжела
Дата: 26.03.2010

когда я сохранила сайт,который предложили вы,у меня все получилось,и под значком стояло HTML-документ. когда я попробовала сделать все сама,у меня получился не HTML-документ,а текстовый документ. Вы не могли бы подсказать почему?

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.


Введите число, которое вы видите на картинке