Структура контента. Форматирование

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

Контент – содержимое веб-страницы с какой-либо информацией (текстовой, графической и т.д.), которое обновляется чаще всего, по отношению к остальным компонентам содержимого веб-страницы. Для построения и организации контента, разберем ряд простых свойств:

· < p> Текст< /p> - определяет текстовый параграф. Тег < P> является блочным элементом, поэтому он начинается с новой строки, параграфы текста, идущие друг за другом, разделяются между собой вертикальным промежутком. Величиной промежутка можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента; Параметр align определяет выравнивание текста. Применяемые значения (аргументы):

· Left - выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается лесенкой. Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.

· Center - выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.

· Right - выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый располагается лесенкой. Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк.

· Justify - выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

· Текст< br> текст - устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа < P>, использование тега < BR> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью параметра clear тега < BR> можно сделать так, чтобы следующая строка начиналась ниже элемента. Тег не требует закрывающего;

· < div>...< /div> - является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора. О теге < div>...< /div> поговорим подробно чуть позже;

· < h1> Заголовок 1-го уровня< /h1> < h2> Заголовок 2-го уровня< /h2> ... < h6> Заголовок 6-го уровня< /h6> - HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег < H1> представляет собой наиболее важный заголовок первого уровня, а тег < H6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги < H1>...< H6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей;

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=windows-1251" >

< title> Тег H1 и H2< /title>

< /head>

< body>

< h1> Lorem ipsum dolor sit amet< /h1>

< p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem

nonummy nibh euismod tincidunt ut lacreet dolore magna

aliguam erat volutpat.< /p>

< h2> Ut wisis enim ad minim veniam< /h2>

< p> Ut wisis enim ad minim veniam, quis nostrud exerci tution

ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat.< /p>

< /body>

< /html>

Листинг использования контентов < h1> < /h1> …< h6> < /h6>

Рис.2. Результат использования заголовков

· < hr> - рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег < HR> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке;

· < marquee>...< /marquee> - создает бегущую строку на странице. На самом деле содержимое контейнера < MARQUEE> не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

· < pre> Текст< /pre> - определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов, идущих в коде подряд, на веб-странице показывается как один. Тег < PRE> позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега < PLAINTEXT>, использование которого осуждается в HTML 4, внутри контейнера < PRE> допустимо применять любые теги. Следующие теги не должны размещаться внутри контейнера < PRE>: < APPLET>, < BASEFONT>, < BIG>, < FONT>, < IMG>, < OBJECT>, < SMALL>, < SUB> и < SUP>;

· < span>...< /span> - предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как < TABLE>, < P> или < DIV>, с помощью тега < SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри параграфа (тега < P> ) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег < SPAN> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.

< body>

< p> < Span class=" letter" > L< /Span> orem ipsum dolor

sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt

ut lacreet dolore magna aliguam erat volutpat.< /p>

< p> < Span class=" letter" > U< /Span> t wisis enim ad

minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl

ut aliquip ex ea commodo consequat.< /p>

< /body>

< /html>

Листинг примера использования < span> < /span>

 

Рис. 3. Результат использования тега

 

Вы познакомились с основными свойствами, использование которых формирует контент страницы. Используйте их, комбинируйте с другими тегами и редактируйте текстовое содержимое

 

Списки в html

Ещё одним из основных элементов в языке разметки является список. Список представляет собой упорядоченный вертикальный массив данных с порядковым или маркированным указателем. Для понимания определения списка поможет пример, приведенный ниже.

Рис. 4.Список в html (слева – результат, справа – листинг кода).

Пояснение к листингу:

1) Блок < ul> < /ul> является определяющим– в зоне его действия будут находиться пункты списка. В зависимости от параметра-содержимого тегов, тип маркера будет меняться. Существуют: маркированные, числовые, порядковые списки;

2) Блок < li> < /li> - является элементом списка. Между открывающим и закрывающим тегом находится содержимое элемента;

Свойства определяющих блоков:

1) < ul> < /ul> - создает маркированные списки дискового типа;

2) < ol> < /ol> - создает числовые списки порядкового типа;

3) < dl> < /dl> - создает логические списки для глоссариев и словарей (примечание: вместо < li > < /li> здесь будет использоваться схема: < DT> термин 1 < DD> определение 1 < DT> термин 2 < DD> определение 2).

 

Работа с изображениями

В html поддерживается возможность использования графики, изображений. Существует два способа внедрения:

1) Позиционирование изображения (помещение изображение в нужное место документа);

2) Использование изображения в качестве фона;

Разберем данные пункты:

1) Для того, чтобы позиционировать изображение в html, создадим тег в удобном для вас месте документа по схеме:

 

< img src=”url” alt=" text" height= “n1” width= “n2”

align=top|middle|bottom|texttop|absmiddle|baseline|absbottom

border= “n3 vspace=n4 hspace=n5 >

 

· Параметр src=” url” задает местонахождение вашего изображения в каталоге. Для этого вместо слова url используется ссылки (о них – в следующем разделе);

· alt – позволяет создавать подпись к рисунку (при наведении на изображение из курсора «выпадает» текст, заключенный в значение alt);

· height – задает высоту изображения, width – его длину

· align – осуществляет выравнивание изображения в зависимости от назначаемых параметров;

· border – позволяет применять границу в виде рамки изображению;

· vspace - позволяет установить размер в пикселях пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ; hspace – такая же функция, только применяется по вертикали;

Данные параметры не обязательны к применению, кроме src=”url”.

2) Для того, чтобы задать фоновый рисунок ко всей странице, блоковым элементам, в тегах необходимо записать параметр: backgrond=”url”; к примеру, для того, чтобы применить фоновое изображение для всего документа:

 

< body background=”url” >

 

⇐ Предыдущая123456Следующая ⇒

Поделиться: