|
Пожалуйста, уточните, кто автор курса Основы работы с HTML ? |
Инспектор
Вы можете этот курс.
Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 1:
Введение в HTML
Основные теги 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>
