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

Введение в HTML

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

Основные теги HTML

Параграфы.

Прежде чем изучать теги форматирования HTML, посмотрим как введенный текст отобразится, если не будут применены никакие теги кроме тегов <html> и <body>. Следующий пример демонстрирует такой документ HTML

<html>
<body>
Этот текст будет показан в окне браузера. 
</body>
</html>

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

Этот простой пример документа HTML, который содержит минимальное количество тегов HTML и демонстрирует, как текст внутри элемента body отображается в браузере.

Если ввести большой объем текста таким способом, то читать его будет очень неудобно. Логичнее разбить его на параграфы, как в книге, которые повышают читабельность текста, и кроме того выделяют смысловые блоки.

Следующий пример показывает, как отображаются параграфы

<html>
<body>
<p>Это параграф 1.</p>
<p>Это параграф 2.</p>
<p>Это параграф 3.</p>
</body>
</html>

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

Этот пример демонстрирует, как в браузере выводится текст внутри элементов параграфа. Можно видеть, что по умолчанию текст каждого параграфа выводится в виде отдельного блока. Каждый из таких блоков отделяется от предыдущих и последующих блоков страницы пустой строкой. Однако отображение параграфа браузером может быть легко изменено посредством таблицы стилей.

Можно заметить, что параграфы можно записывать без закрывающего тега </p>, однако лучше этого не делать, в следующей версии HTML все теги нужно будет закрывать.

В разных браузерах на разных мониторах с разным разрешением страница будет отображаться по-разному, поэтому не стоит форматировать при помощи добавления пустых строк и пробелов. Любое число пробелов заменяется одним.

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

Заголовки.

Заголовки определяются с помощью тегов от <h1> до <h6>. <h1> определяет заголовок самого большого размера, а <h6> определяет заголовок самого маленького размера.

<h1>Это заголовок первого уровня</h1>
<h2>Это заголовок второго уровня</h2>
<h3>Это заголовок третьего уровня</h3>
<h4>Это заголовок четвертого уровня</h4>
<h5>Это заголовок пятого уровня</h5>
<h6>Это заголовок шестого уровня</h6>

Заголовки автоматически отделяются дополнительными промежутками от остальных элементов документа.

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

Для переноса внутри параграфа используется тег <br>, который выполняет принудительный перенос строки.

<html>
<body>
<p>Это <br>пара<br>граф с переносами строк</p>
</body>
</html>

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

Тег <br> не имеет закрывающего тега. Поэтому для совместимости с будущими версиями стандарта рекомендуется следующее написание тега <br/>

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

Разделять различные элементы можно при помощи горизонтальной линейки, для этого используйте тег <hr>:

<html>
<body>
<p>Этот параграф отобразится сверху горизонтальной полосы.</p>
<hr>
<p>Этот параграф отобразится снизу горизонтальной полосы.</p>
</body>
</html>

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

Тег <hr> не имеет закрывающего тега. Поэтому для совместимости с будущими версиями стандарта рекомендуется следующее написание тега <hr/>. Для этого тега определен ряд атрибутов, но они являются устаревшими. И хотя их применение возможно, но консорциум W3C их использовать не рекомендует. Вместо них следует использовать таблицы стилей.

Комментарии в HTML

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

<!-- Это комментарий -->

Вот пример:

<html>
<body>
Этот текст будет показан в окне браузера. 
<!-- Этот текст не будет показан, это комментарий. -->
</body>
</html>

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

Лекция 1: 1234 || Лекция 2 >
Дарья Федотова
Дарья Федотова
Мария Иванова
Мария Иванова
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989
Ольга Ремез
Ольга Ремез
Латвия, Рига