Опубликован: 17.06.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Саратовский государственный университет им. Н.Г. Чернышевского
Лекция 6:

Разметка текста в HTML

< Лекция 5 || Лекция 6: 123 || Лекция 7 >
Аннотация: В лекции рассматриваются основные блочные и строковые элементы HTML, используемые для структурирования и форматирования текста.

Структурирование текста

Как было отмечено в "Введение в HTML" , все элементы HTML делятся на блочные и строковые. Блочный элемент обычно информирует о структуре документа, начинается с новой строки и отделяется от предыдущего и последующего блока пустой строкой определенной ширины. Блочные элементы могут содержать строковые элементы. В данном разделе будут рассмотрены основные блочные элементы, предназначенные для структурирования текста.

Заголовки разделов страниц: элементы H1…H6

HTML предлагает шесть заголовков разного уровня, для задания которых используются элементы H1, H2, …, H6. Заголовки различных уровней призваны показать относительную важность секции, расположенной после заголовка и, по умолчанию, отображаются браузером различным размером шрифта. Так, элемент H1 представляет собой наиболее важный заголовок первого уровня, который, по умолчанию, отображается самым крупным шрифтом жирного начертания. А элемент H6 служит для обозначения заголовка шестого уровня, является наименее значительным и отображается самым мелким шрифтом. Таким образом, использование заголовков разного уровня позволяет структурировать документ по разделам, главам, параграфам и т.п., облегчая чтение, делая документ более понятным для считывателей экрана, а также для некоторых автоматических процессов. Следующий пример показывает создание заголовков различных уровней:

<H1>Заголовок 1-го уровня</H1>
<H2>Заголовок 2-го уровня</H2>
<H3>Заголовок 3-го уровня</H3>
<H4>Заголовок 4-го уровня</H4>
<H5>Заголовок 5-го уровня</H5>
<H6>Заголовок 6-го уровня</H6>

А на рисунке 6.1 представлен вид заголовков различного уровня в браузере.

Вид различных заголовков в браузере

Рис. 6.1. Вид различных заголовков в браузере

Стандартные параграфы: элемент P

Неприятной особенность браузеров является то, что они не обрабатывают символы перевода строки. Т.е. текст, который разработчик набрал на своем компьютере, одновременно форматируя его, разделяя на абзацы и придавая ему какое-то логическое деление, браузер сначала преобразует, удалив все подряд идущие пробелы и переводы строк, а затем выведет на экран. При этом информация об абзацах будет утеряна. Чтобы этого не произошло, для логической организации абзацев используется специальный элемент P. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента. Например, оформить анекдот, приписываемый Даниилу Хармсу, в виде параграфа можно следующим образом:

<P>Гоголь только под конец жизни о душе задумался, 
 а смолоду у него вовсе совести не было. 
   Однажды невесту в карты проиграл. И не отдал.</P>

Предварительно форматированный текст: элемент PRE

Элемент PRE определяет блок предварительно форматированного текста. По умолчанию, любое количество пробелов, идущих в коде подряд, на веб-странице показывается как один. Элемент PRE позволяет обойти эту особенность и отображать текст так, как требуется разработчику. В большинстве браузеров текст, помеченный как предварительно форматированный, будет выводиться с помощью моноширинного шрифта (т.е. шрифта фиксированной ширины), что придает тексту вид как бы отпечатанного на машинке. Это является наследием программистов, которые использовали ранее шрифты фиксированной ширины для представления предварительно форматированного текста. Например, представленный ниже фрагмент кода выводит отрывок из стихотворения Владимира Маяковского "Блек энд Уайт" с помощью элементов P и SAMP. Результат представлен на рисунке 6.2.

Если
     Гаванну
             окинуть мигом -
рай-страна,
       страна что надо.



<PRE>
Если
     Гаванну
             окинуть мигом -
рай-страна,
       страна что надо.

</PRE>
Пример использования элементов P и SAMP

Рис. 6.2. Пример использования элементов P и SAMP

Внутри контейнера PRE допустимо применять любые теги, кроме тегов IMG, OBJECT, SMALL, SUB и SUP.

< Лекция 5 || Лекция 6: 123 || Лекция 7 >
Сергей Крупко
Сергей Крупко

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

Абылайхан Каби
Абылайхан Каби

interface IЧеловек { string Фамилия(); string Должность(); } class Человек { public string фамилия; } class Сотрудник : IЧеловек,Человек { public string должность; public string Фамилия() {return фамилия;} public string Должность() { return должность; } } class Program { static void Main() { Сотрудник с = new Сотрудник(); с.фамилия = "Иванов"; с.должность = "Инженер"; System.Console.Write(с.Фамилия()+с.Должность()); } }

Виктория Шевченко
Виктория Шевченко
Россия
Имиль Шахмаев
Имиль Шахмаев
Россия, г. Зеленодольск