Опубликован: 25.10.2006 | Доступ: свободный | Студентов: 23168 / 9743 | Оценка: 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 >
Ольга Чернявская
Ольга Чернявская

Я заканчиваю проходить курс переподготовки Программирование. Как мне получить документ по окончанию обучения?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989
Ольга Ремез
Ольга Ремез
Латвия, Рига