Опубликован: 25.10.2006 | Доступ: свободный | Студентов: 22133 / 9136 | Оценка: 4.30 / 4.02 | Длительность: 08:22:00
Лекция 1:

Введение в HTML

Лекция 1: 1234 || Лекция 2 >

Дополнительные примеры

Лучшим способом изучения HTML является работа с примерами. Рассмотрим несколько примеров, которые иллюстрируют некоторые элементы форматирования документов.

Дополнительные параграфы

Этот пример демонстрирует некоторые особенности поведения по умолчанию элементов параграфа.

<html>
<body>

<p>
Этот параграф 
содержит много строк 
в исходном коде,
но браузер 
это игнорирует.
</p>

<p>
Этот параграф 
содержит     много пробелов
в исходном    коде,
но     браузер 
это игнорирует.
</p>

</body>
</html>

Пример выполнения данного HTML-кода

Перенос строк

Этот пример демонстрирует использование переноса строк в документе HTML.

<html>
<body>

<p>
Чтобы выполнить перенос<br>строк<br>в 
<br>параграфе,<br>используйте тег br.</p>
</body>
</html>

Пример выполнения данного HTML-кода

Этот пример демонстрирует некоторые проблемы с форматированием HTML. Попробуем сформатировать стихи:

<html>
<body>

<p>
  В лесу родилась елочка.
  В лесу она росла.
  Зимой и летом стройная, 
  Зеленая была.
</p>

<p>Обратите внимание, что браузер просто проигнорировал использованное форматирование!</p>

</body>
</html>

Пример выполнения данного HTML-кода

Заголовки

Этот пример демонстрирует теги, которые выводят заголовки в документе HTML.

<html>
<body>

<h1>Это заголовок уровня 1</h1>
<h2>Это заголовок уровня 2</h2>
<h3>Это заголовок уровня 3</h3>
<h4>Это заголовок уровня 4</h4>
<h5>Это заголовок уровня 5</h5>
<h6>Это заголовок уровня 6</h6>

<h1 align="center">Это заголовок 1, он выровнен по центру страницы.</h1>

<p>Используйте теги заголовков только для заголовков. 
Не используйте их просто для того, чтобы выделить что-то жирным шрифтом. 
Используйте для этого другие теги.</p>

</body>
</html>

Пример выполнения данного HTML-кода

Горизонтальная линейка

Этот пример демонстрирует, как использовать горизонтальную линейку.

<html>
<body>
<p>Тег <hr> определяет горизонтальную линейку :</p>
<hr>
<p>Это параграф</p>
<hr>
<p>Это параграф</p>
</body>
</html>

Пример выполнения данного HTML-кода

Комментарий

Этот пример демонстрирует, как использовать комментарий в исходном коде HTML.

<html>
<body>

<!--Этот комментарий выводиться не будет-->
<p>Это обычный параграф.</p>

</body>
</html>

Пример выполнения данного HTML-кода

Фоновый цвет

Этот пример демонстрирует использование цветного фона на странице HTML. При выборе фона всегда проверяйте, чтобы текст был хорошо читаем!

<html>
<body bgcolor="yellow">
<h2>Смотри: Цветной фон!</h2>
</body>
</html>

Пример выполнения данного HTML-кода

Таблица основных тегов HTML

Тег Описание
<html> Определяет документ HTML
<body> Определяет основную часть или тело документа
<h1> -- <h6> Определяет заголовки с 1 по 6
<p> Определяет параграф
<br> Вставляет единичный перенос строки
<hr> Определяет горизонтальную линейку
<!--> Определяет комментарий
Лекция 1: 1234 || Лекция 2 >
Дарья Федотова
Дарья Федотова
Мария Иванова
Мария Иванова
Бахтиёр Рустамов
Бахтиёр Рустамов
Узбекистан
Асмик Гаряка
Асмик Гаряка
Армения, Ереван