Головна Реєстрація Вхід
Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика
Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук
Вітаю Вас, Гість · RSS 23.12.2024, 20:14
На головну » Підручники » Підручник HTML » Урок 6: Ще трохи HTML-тегів - Підручник HTML
Урок 6: Ще трохи HTML-тегів

Ви вже зробили кілька сторінок? Якщо ні, ось приклад:

           <html>

           <head>
           <title>My web-сайт</title>
           </head>

           <body>
           <h1>A Heading</h1>
           <p>text, text text, text</p>
           <h2>Subhead</ h2>
           <p>text, text text, text</p>
           </body>

           </html>

Тепер що?

Тепер вивчимо сім нових тегів.

Таким же чином, як ви робили текст жирним шрифтом за допомогою тега <b>, ви можете надати йому характер курсиву / italic тегом <i>. І звичайно, "i" це скорочення від "italic".

Приклад 1:

<i>Це має бути виведено курсивом.</i>

буде виглядати в браузері:

Це має бути виведено курсивом.

Аналогічно можна зменшити розмір шрифту тегом <small>:

Приклад 1:

<small>Це буде виведено зменшеним шрифтом.</small>

буде виглядати в браузері:

Це буде виведено зменшеним шрифтом.

Чи можу використовувати кілька тегів одночасно?

Так, виключаючи перекривання тегів. Це простіше побачити на прикладі:

Приклад 3:

Якщо ви хочете вивести текст bold і italic, це потрібно зробити так:

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

а НЕ так:

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

Різниця в тому, що, в першому випадку, ми закрили перший тег в останню чергу. Так ми уникаємо конфліктів в браузері.

Ще тегів!

Як сказано в Уроці 4, є теги, які є одночасно відкриваючими і закриваючими. Ці теги містять команди, які не пов'язані з конкретними літерами, є ізольованими командами. Приклад - тег <br />, який створює перенесення рядка:

Приклад 4:

Деякий текст <br /> і ще текст, вже на новому рядку

буде виглядати в браузері:

Деякий текст
і ще текст, вже на новому рядку

Зауважте, що цей тег записаний як гібрид відкриваючих і закриваючих тегів з пропуском і слешем: <br />. У принципі, його можна записувати <br> </ br>, але навіщо ускладнювати?

Інший такий тег - <hr /> - малює горизонтальну лінію ("hr" від "horizontal rule"):

Приклад 5:

<hr />

буде виглядати в браузері:


Приклади тегів, що вимагають наявності і закриває тега: <ul> , <ol> і <li>. Ці теги використовуються для виведення списків.

<ul> - скорочення від "unordered list / невпорядкований список" - вставляє значок кнопки для кожного елемента списку. <ol> - скорочення від "ordered list / упорядкований список" - нумерує кожен елемент списку. Для створення елемента списку використовуйте тег <li> ("list item / елемент списку"). Незрозуміло? Див. приклади:

Приклад 7:

      <ul>
           <li>Елемент списку</li>
           <li>Інший елемент списку</li>
      </ul>

виглядає в браузері:

  • Елемент списку
  • Інший елемент списку

Приклад 8:

      <ol>
           <li>Перший елемент списку</li>
           <li>Другий елемент списку</li>
      </ol>

виглядає в браузері:

  1. Перший елемент списку
  2. Другий елемент списку

Фе! І це все?

Все на сьогодні. Отже, експериментуйте і створюйте ваші власні сторінки з сімома новими тегами, вивченими на цьому уроці:

           <i>Italic</i>
           <small>Зменшений шрифт</small>
           <br />перенесення рядка
           <hr />Горизонтальна лінія
           <ul>Список</ul>
           <ol>Упорядкований список</ol>
           <li>Елемент списку</li>

<< Урок 5: Що ми вже знаємо?
Всього коментарів: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]