Логическое форматирование контента (содержимого).

↑

▷ Содержание

⇐ ПредыдущаяСтр 2 из 3Следующая ⇒

Замечание: все символы переноса строк исходного документа, хранящегося на сервере, при показе браузером клиента игнорируются.

Логическое форматирование – разбиение текста на осмысленные логические фрагменты.

Для выделения заголовков в HTML существуют 6 заголовков <h1> …. </h1> и до 6. В разных браузерах отображение заголовков разное, чем выше уровень заголовка, тем крупнее и жирнее текст в заголовке.

Align – выравнивание (center, right, left(по умолчанию)). Пример <H1 align = center> …. </H1>.

Абзац – определяется тэгом <P> … </P>. Атрибуты – выравнивание align. Принудительный разрыв строки: <BR>. Пример:<P> текст<BR> текст</P>. Несколько таких тэгов подряд перенесут только на 1 строку! Запрет разрыва <NOBR>текст …. </NOBR>. Вставка горизонтальных линий (подчеркивание) <HR>.

Физическое форматирование.

Физическое форматирование - Управление начертанием символов. Все тэги парные, могут вкладываться друг в друга.

<B> … </B> - жирный текст.

<I>… </I> - курсив.

<u> … </u> - подчеркнутый

<del>… </del> - зачеркнутый

<big>…</big> - на уровень выше (текст)

<small>…</small> - уменьшенный на 1 пункт

_… - нижний индекс

^… - верхний индекс

<font>…</font> - предполагает обязательное наличие атрибутов:

· Face = «Arial, Curior, …» если у клиента нет заданного шрифта, то откроется со стандартным.

· Size = 1 …. 7 – 3 стандартный размер.

· Color = … - цвет который будет применять в данном блоке.

Формирование списков.

3 вида списков (до начала и и в конце вставляются пустые строки):

· Маркированный. Комбинация тэгов:

<ul>

<li> строка</li>

<li> строка </li>

…

</ul>

· Нумерованный. Атрибуты: type – вид цифры (римские или арабские); start – начальный номер списка (по умолчанию с 1); reversed – обратная нумерация. Для нумерованного списка имеется возможность вставки атрибута в строку value – конкретное значение элемента (явное указание номера строки списка). Пример: <li value=5> … </li>

<ol>

<li> строка</li>

<li> строка </li>

…

</ol>

· Список определений.

<dl>

<dt> название

<dd> значение

<dt>…

…

</dl>

Создание карт на странице.

Карта – какое-то изображение внедренное браузером, на котором имеются активные области и щелчок по этой области осуществляет переход на странице.

<img> само изображение

<map> наложение карты на изображение

<area> выделение активной области

Пример:

<img src=”my.jpg” Usemap=”#mn1” - имя карты >

<map name=”mn1”>

<area shape=”rect” coord=”0,0,5,10” href=”адрес (URL)”>

</map>

Лекция №3

«Создание таблиц HTML».

Таблица – ключевой элемент в веб-программировании.

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

Шаги создания таблиц в HTML:

· дается описание таблицы,

· логическая структуризация

· формирование строки

· разбиение строки на ячейки

· повторение с 3 шага, пока не построена таблица полностью

Ключевые тэги для построения таблицы:

· <TABLE> … </TABLE> - объявление, атрибут: border 0 – нет линий (1,2,3 – толщина линии).

· <CAPTION> … </CAPTION> - заголовок таблицы

· <TR>…</TR> - объявление строки

· <TH>…</TH> - ячейки шапки (заголовочные ячейки)

· <TD>…</TD> - выделение обычных ячеек

· Тэги TD и TH допускают использовать 2 атрибута: <colspan> - слияние ячеек (строка), <rowspan> - слияние по строкам (столбец). <TD colspan = 2> … </TD>

Пример простейшей таблицы:

<TABLE border =2>

<CAPTION> Личности</CAPTION>

<TR>

<TH>Фамилия</TH>

<TH>Имя</TH>

</TR>

<TR>

<TD>Петров</TD>

<TD>Вася</TD>

</TR></TABLE>

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

3 дополнительных тэга объявления таблиц:

<THEAD>…</THEAD> - заголовок

<TBODY>…</TBODY> - тело, то что будет прокручиваться

<TFOOT>…</TFOOT> - подвал

Эти тэги должны объявляться в таблице до начала разбиения на строки.

<table >

<caption> … </caption>

<thead>

<TR> <TH> …</TH></TR>

</thead>

<tfoot> … </tfoot>

<tbody>

<TR><TD> … </TD></TR>

</tbody></table>

«Блоки или блочные элементы»

Блок – прямоугольная область с произвольным содержимым.

Padding – расстояние от содержимого до рамки в блоке.

Margin – отступ от содержимого страницы до рамки в блоке.

Положением блока на странице можно управлять с точностью до пикселя.

Блок объявляется тэгом: <DIV> … </DIV>, атрибут style – стиль.

«Вставка объектов в документ».

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

Для вставки используется тэг: <OBJECT атрибуты > замещающий текст </OBJECT>, сам объект описывается в атрибутах тэга.

Атрибуты:

· Height, width – размер, который занимает объект на странице.

· Data – имя ресурса.

· Type - тип данных.

Пример, добавление флэш-ролика:

<object Width = 300 Height = 300 Data = “my.swf”> Не показывает!</object>

Видео-ролики вставляются специальным (отдельным) тэгом: <video атрибуты> замещающий текст </video>.

Атрибуты:

· Height, width

· Autoplay – по кнопке, или автоматический запуск видео

· Controls –

· Loop – цикличное проигрывание (бесконечно, однократно)

· Src - источник, откуда будет браться файл

· Muted – будет ли автоматически сопровождаться звуком, либо надо нажать кнопку

Лекция №4

«Стили в HYML».

Для описания стиля веб-страницы создан специальный язык CSS (каскадные таблицы стилей). Стили позволяют более гибко и эффективно управлять положением и поведением элемента веб-страницы.

Синтаксис языка:

· Селектор (имя стиля) – соответствует имени тэга, которому будет применяться

· {имя – свойства: “значения”; имя – свойства: “значения”; …}

Пример: body {background – color: “black”;}

Допускается группирование свойств: P,H1 {background – color: “red”}

3 понятия: класс, псевдокласс и псевдоэлементы.

Класс – вариант оформления элемента. Класс отделяется от имени стиля точкой. Пример: H1.red {text – color: “red”} H1.green {text – color: “green”}

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

Пример:.red {…} в коде <p class = red>

Псевдокласс – определяет вид элемента в зависимости от действия пользователя. В отличие от классов, псевдоклассы прописаны в стандарте (их нельзя создавать, но можно использовать).

Имена псевдоклассов:

· Active: создается для активного элемента

· Focus: для элементов в фокусе

· Hover: для элементов которые под указателем мыши

· Link: для не посещенных ссылок

· Visited: для посещенных ссылок

· First-child:для первого потомка

Пример: H1:hover {…}

Псевдоэлемент – позволяют управлять частью какого-то элемента на веб-страницы.

Псевдоэлементы описываются как псевдоэлементы:

· First-letter: оформление первого элемента строки

· First-line: оформление для первой строки

· Before: вставка специального объекта перед элементом

· After: вставка специального объекта после элемента

Пример: P:after {content: url (img.img)}

«Оформление фона».

Эти свойства присущи всем элементам для которого существует понятие фон.

Background-position: задает местоположение базовой точки (фонового изображения) через:. “Top left”, “top right”, … “x y”, “x% y%”

Background –attachment: это свойство может принимать одно из двух значений (зафиксировано, либо прокручиваться вместе с основным текстом). “fixed”, “scroll”

Background – color: создается цвет, который желаете. “transparent” - прозрачный

Background – image: размещение картинки

Background – repeat: способ заполнения всю площадь объекта картинкой. “repeat”заполнить, “no-repeat” не заполнить, “repeat x(y)” заполнить по осям.

«Свойства оформления текста».

Color: задание цвета

Letter-spacing: расстояние пробела между буквами, принимает 2 значения: “normal”-нормальный пробел, “length” длинный пробел.

Vertical-align: вертикальное выравнивание текста.

Text-align: горизонтальное выравнивание текста.

Text-ident: красная строка.

Direction: направление текста (горизонтальное (обычное) либо вертикальное).

Word-spasing: расстояние между словами.

Line-height: межстрочное расстояние (поставить нормальное, либо указать в пикселях).

«Свойства работы со шрифтом».

Font-size: задание размера шрифта.

Font-weight: ширина символов.

Font-variant: символы либо заглавными либо строчными. (big, small, normal)

Font-stile: стиль текста.

Font-family: начертание текста (тип шрифта: Times New Roman, Arial и т.д.)

Лекция №5

В настоящее время верстка страниц жестко реализуется через блочные элементы. <div> </div>

Познавательные статьи:



Как правильно слушать собеседника

Типичные ошибки при выполнении бросков в баскетболе

Принятие христианства на Руси и его значение

Средства массовой информации США