Разобравшись со структурой HTML-документа, логично перейти к изучению того, как наполнять документ содержанием. В первую очередь, это текст. Как уже говорилось, текст в html-файл можно поместить и безо всякой структуры. Однако, если соблюдать правила, то следует выбрать для текста подходящий контейнер и разместить его в элементе body.
Рассмотрим наиболее важные текстовые контейнеры.
Заголовки имеют большое значение. Для пользователя они создают ориентиры в документе и проясняют его структуру, а поисковые серверы используют заголовки, чтобы индексировать структуру и содержание веб-страниц.
Элемент h1 определяет наиболее крупный заголовок; h6 - наименее крупный. Заголовки h1 должны использоваться как главные заголовки, сопровождаемые заголовками h2, затем менее важными заголовками h3, и так далее. Обычно авторы применяют h1 для названия документа, h2 для названий разделов и т.д.
<h1>
Это заголовок 1</h1>
<h2>
Это заголовок 2</h2>
<h3>
Это заголовок 3</h3>
<h4>
Это заголовок 4</h4>
<h5>
Это заголовок 5</h5>
<h6>
Это заголовок 6</h6>
(рис 2.1) Заголовки уровней 1-6Обратите внимание, что каждый заголовок располагается на новой строке и имеет вертикальный отступ от соседних элементов. Первое свидетельствует о том, что заголовок - элемент блочный, т.е. всегда вызывает разрыв строки до и после себя. Второе означает, что предопределённые значения отступов для этого элемента отличны от нуля (как их можно регулировать, далее будет рассматриваться).
Служит для смысловой разбивки текста. Браузеры, отображая содержимое этого элемента (также блочного), обычно вставляют перед ним вертикальный отступ, немного больший по высоте, чем одна строка - таким образом абзацы отделяются друг от друга по умолчанию. При помощи стилей можно достичь и более привычного, "книжного" вида - горизонтального отступа первой строки каждого абзаца. Возможны и другие варианты.
p {
text-indent: 2.5em;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
...
<p>
По умолчанию браузер визуально отделяет абзацы друг от друга вертикальным
отступом, что эквивалентно установке свойств margin-top и margin-bottom
в некоторое отличное от нуля значение.
</p>
<p>
В данном примере этим свойствам задано небольшое значение (0.2em, т.е.
20% высоты символа M).
</p>
<p>
Вместо этого абзацы разделены отступом первой строки, который задан CSS-свойством
text-indent.
</p>
(рис 2.3) Разделение абзацев отступом первой строки(рис 2.2) Разделение абзацев выделением первой буквыp { text-indent: 2.5em; margin-top: 0.2em; margin-bottom: 0.2em; } p:first-letter { font-weight: bold; font-size: 2em; color: Red; } ... <p> Буквица - ещё один эффект, применяемый для визуального выделения начала абзаца. В CSS он может быть достигнут путём применения специфического стиля к первой букве абзаца. </p> <p> Первой букве абзаца соответствует селектор псевдоэлемента p:first-letter. Для этого псевдоэлемента в данном примере назначена высота 2em и красный полужирный шрифт. </p>
(рис 2.3) Разделение абзацев выделением первой буквыКак видно из примеров, в теле HTML-документа расположены несколько абзацев, и никакого форматирования. Однако форматирование к абзацам всё же применяется, поскольку к HTML-документу подключена таблица стилей. Это достигается путём включения в "шапку" HTML-документа следующей ссылки:
<link rel="Stylesheet" href="Style.css" />
Подробно эта директива и другие способы подключения таблиц стилей описаны в лекции "Каскадные стили". Пока достаточно понять, что таблица стилей "Style.css" учитывается браузером при форматировании HTML-документа.
В таблице стилей содержится определение стиля элемента p (т.е. абзаца). Об определениях стилей также речь пойдёт позже, однако на текущий момент вполне достаточно понимания того, что свойства, указанные в стиле для элемента p, будут применены ко всем абзацам документа.
Остановимся подробно на этих свойствах:
margin-top Верхнее поле, т.е. расстояние от верхней границы элемента (в данном случае, абзаца) до других элементов.margin-bottom Нижнее поле, т.е. расстояние от нижней границы элемента до других элементов.Единица измерения, использованная в данном примере для задания высоты поля - em, что означает "равна высоте шрифта" ( em - латинская буква m, напечатанная шрифтом Cicero - стандартная единица измерения в полиграфии) . Соответственно, 0.5em означает "равно половине высоты шрифта".
Попробуйте уменьшать и увеличивать значения margin-top и margin-bottom, наблюдая за результатом.
Затем уберите совсем объявления полей. В результате поля увеличатся! Это происходит потому, что браузеры используют по умолчанию не нулевые значения полей, а такие, как вы увидели, проделав это упражнение.Позволяют акцентировать отдельные фрагменты текста (как правило, слова и фразы) при помощи форматирования. Элемент strong по умолчанию делает вложенный текст полужирным, em - курсивом, но при помощи стилей такое поведение легко переопределяется. Элемент span по умолчанию никак не влияет на вложенный в него текст - к нему всегда нужно применять стиль.
strong {
color: Red;
}
.accent {
background: #BFFFBF;
color: Blue;
font-weight: bold;
}
...
<p>
Элемент strong по умолчанию делает вложенный текст полужирным, em - <em>
курсивом</em>, но при помощи стилей такое поведение <strong>легко переопределяется</strong>.
Элемент span по умолчанию никак не влияет на вложенный в него текст -
к нему всегда нужно <span class="accent">применять стиль</span>.
</p>
(рис 2.4) Переопределение поведения элемена strong - выделение цветомОчевидно, одних и тех же результатов можно добиться, назначая стили любому из контейнеров em, strong, span (и многих других). Однако, хотя и на экране результат будет одинаков, с точки зрения программного анализатора структуры документа (каковым является, например,
| Элемент | Описание |
|---|---|
abbr |
Указывает, что заключённый в нём текст является сокращением |
|
Указывает, что заключённый в нём текст является акронимом (сокращением, составленным из заглавных букв) |
address |
Определяет контактный адрес автора документа - например, e-mail |
blockquote |
Определяет блочную цитату (длинную выдержку из другого документа), которая отображается, как правило, со специальным отступом и курсивом |
cite |
Указывает, что заключённый в нём текст является библиографической ссылкой |
code |
Используется для показа программного кода (как правило, отображается моноширинным шрифтом) |
del |
Указывает, что заключённый в нём текст автор исключил из текущей редакции документа - отображается, как правило, зачёркнутым текстом |
dfn |
Употребляется для выделения термина, впервые появившегося в тексте (как правило, отображается курсивом) |
em |
Логическое ударение (как правило, отображается курсивом) |
ins |
Указывает, что заключённый в нём текст автор добавил в текущую редакцию документа - отображается, как правило, подчёркнутым текстом |
kbd |
Используется для показа текста, который пользователь должен вводить с клавиатуры (как правило, отображается моноширинным шрифтом) |
q |
Определяет короткую цитату |
strong |
Ещё более сильное логическое ударение (как правило, отображается полужирным шрифтом) |
В элементы сокращений ( abbr и title, определяющий расшифровку сокращения. Значение атрибута title появляется на экране только тогда, когда на элемент наводится указатель.
Пример определения сокращения при помощи элемента abbr:
<abbr title="World Wide Web">WWW</abbr>
Другая группа текстовых контейнеров определяет физическое форматирование текста:
| Элемент | Описание |
|---|---|
b |
Определяет полужирный текст |
big |
Определяет крупный текст |
i |
Определяет текст курсивом |
small |
Определяет мелкий текст |
sub |
Определяет текст – нижний индекс |
sup |
Определяет текст – верхний индекс |
tt |
Определяет текст телетайпа (моноширинный) |
Как видите, одних и тех же визуальных результатов можно добиться при помощи разных элементов. Делая выбор, следует руководствоваться не только тем, как элемент будет отображаться на экране, но и тем, как, например, произнёс бы его синтезатор речи или как бы мог его интерпретировать
<p>
<b>полужирный текст</b></p>
<p>
<i>курсив</i></p>
<p>
<u>подчёркнутый текст</u></p>
<p>
<tt>моноширинный текст</tt></p>
<p>
<big>на 1 пункт крупнее</big></p>
<p>
<small>на 1 пункт мельче</small></p>
<p>
Верхний и нижний индексы:
<i>c</i><sub>0</sub> + <i>c</i><sub>1</sub><i>x</i>+ <i>c</i><sub>2</sub><i>x</i><sup>2</sup>
</p>
(рис 2.5) Элементы физического форматирования текстаКак уже говорилось, разбивка на строки кода HTML-разметки не влечёт разбивки браузером на строки документа. Один из способов разрыва строки - применение блочного элемента, например, абзаца. Другой способ (исключающий добавление дополнительных отступов) - это вставка в текст элемента разрыва строки br. Существует и элемент nobr (нестандартный), имеющий противоположное назначение: текст, заключённый в него, не будет разбит браузером на строки, независимо от количества символов.
<title>Untitled Page</title>
</head>
<body>
<p>
Этот абзац будет разбит на строки
<br />
здесь и
<br />
здесь.</p>
<p>
<nobr>Этот очень длинный абзац вообще не будет разбит на строки -
пользуйтесь горизонтальной прокруткой.
Curabitur vitae tincidunt lorem... </nobr>
</p>
(рис 2.7) Применение элементов HTML для разбивки текста на строки(рис 2.6) Пример для элемента pre<title>Пример для элемента pre</title> </head> <body> <p> Далее приведён листинг программного кода, помещённый в HTML-элемент <code> pre</code>, и он отображается с теми же отступами, как в Visual Studio:</p> <pre> oDigits.onmousedown = oSigns.onmousedown = function(e) { var elem = null; if (e) elem = e.target; else elem = window.event.srcElement; elem.style.color = 'red'; } oDigits.onmouseup = oSigns.onmouseup = function(e) { var elem = null; if (e) elem = e.target; else elem = window.event.srcElement; elem.style.color = ''; } </pre>
Элемент pre (преформатированный вывод) выделяет в разметке фрагмент, который браузер должен отобразить "как есть", теми же символами и с тем же разбиением на строки, включая все пробелы.
Текст внутри элемента pre может содержать физическую и логическую разметку, а также якоря, изображения и горизонтальные линейки. Весь текст в элементе будет отображен моноширинным шрифтом.
Чаще всего преформатированный вывод используется для представления исходных кодов программ, как в следующем примере.
(рис 2.7) Пример для элемента pre
Не несёт никакой логической нагрузки и используется, как правило, в качестве строительного элемента при вёрстке страницы. Здесь важно провести следующее разделение между всеми элементами тела HTML-документа: строчные ( inline ) элементы могут занимать часть строки, а блочные ( block ) всегда занимают целое число строк. Большинство HTML-элементов - строчные; к блочным относятся заголовок, абзац, секция, список и таблица (а также некоторые другие элементы, которые будут рассмотрены особо).
Таким образом, с точки зрения представления на экране секция ничем не отличается от абзаца. Главное различие состоит в том, что в абзац нельзя поместить другой абзац (и вообще блочный элемент), а в секцию разрешается помещать любые другие элементы, включая секции. Поэтому в качестве универсального контейнера обычно используется именно секция. При проектировании макета веб-страницы обычно мыслят блоками: блок колонтитула, блок меню, блок основного содержимого и т.д. Как правило, каждый блок реализуется при помощи секции либо списка. Подробно использование блоков рассмотрено в лекциях "Позиционирование" и "Табличная и бестабличная вёрстка"
Используется для нумерации или маркировки последовательности элементов. В следующем примере показаны основные приёмы разметки списков.
ol {
list-style-type: upper-roman;
}
...
<p>
Первый список:</p>
<ol>
<li>Пункт</li>
<li>Ещё один пункт</li>
<li>Последний пункт</li>
<li>Вложенный список:
<ul>
<li>Пункт</li>
<li>Ещё один пункт</li>
<li>Последний пункт</li>
</ul>
</li>
</ol>
(рис 2.9) Вложенный список(рис 2.8) Изображение в качестве маркераul li { list-style-type: disc; list-style-image:url(write.gif); padding-left:10px; } ... <ul> <li>Пункт</li> <li>Ещё один пункт</li> <li>Последний пункт</li> </ul>
(рис 2.9) Изображение в качестве маркераКак видно из примера, пункты в списке должны обрамляться элементами li ( list item - элемент списка), которые, в свою очередь, погружаются в элемент ol или ul.
Специфические свойства элементов ol и ul:
list-style-image list-style-type ol или ul (списку в целом), так и к элементу li (отдельным элементам списка).first-letter, измените цвет и размер начальных букв пунктов списка.list-style: square inside;Назначение этого элемента очевидно, и он является самым сложным по структуре и возможностям форматирования. Подробно он рассмотрен в отдельной лекции.
Служит для определения гиперссылки либо точки назначения ("якоря") гиперссылки. В документе HTML гиперссылкой может являться фрагмент текста или изображение, помещённые в элемент a. Браузер, отображая элемент a, по умолчанию (т.е. если не задать других правил) обычно выделяет текст синим цветом и подчёркиванием, а также отображает курсор в виде указателя, когда он проходит над ссылкой - будь то текст или изображение. При нажатии на гиперссылку она активизируется, и браузер выполняет переход по URL (универсальному локатору ресурса), указанному в атрибуте href элемента a.
Вот типичный пример текстовой гиперссылки:
<a href="http://intuit.ru">Интернет Университет Информационных Технологий</a>
URL может указывать как на веб-страницу (документ HTML), так и на содержимое какого-либо другого типа. Браузеры умеют отображать, кроме HTML-документов, текстовые файлы и файлы изображений некоторых типов (jpg, png, gif). Другое содержимое (аудио, видео, документы Word и Acrobat, архивы) будет загружено браузером как файл и сохранено на компьютере пользователя. Впрочем, к браузеру могут быть подключены дополнительные программы (плагины - plugins ), открывающие различное медиа-содержимое непосредственно в окне браузера. К популярным плагинам такого рода можно отнести
Составные части URL имеют следующий смысл (здесь показаны только наиболее простые, необходимые элементы):
протокол://сервер/файл#якорь
Элемент сервер определяет, к какому компьютеру отправляется запрос: любой компьютер имеет свой уникальный числовой адрес в рамках сети ( IP-адрес ), а многие компьютеры-сервера (компьютеры, предназначенные для обработки запросов) имеют также доменное имя, такое как ya.ru. В URL указывается либо доменное имя, либо IP-адрес.
Элемент протокол определяет, какая программа на сервере будет обрабатывать запрос - веб-сервер (такой как Apache, IIS, Tomcat и др.), служба FTP или другая. Также от этого зависит, по какому протоколу будут передаваться данные от сервера клиенту (браузеру). Если указан протокол file, то браузер прочитает файл с локального компьютера. Псевдопротокол javascript при активизации ссылки вызовет указанную функцию, например: <a href="javascript:history.back();">Назад</a>. При активизации ссылки с псевдопротоколом mailto откроется почтовый клиент и создастся письмо с указанным адресом, например: <a href="mailto:admin@site.com">Написать письмо</a>.
Элемент файл определяет путь к файлу на сервере - к документу HTML, изображению, архиву или, может быть, к серверной странице (php, aspx, jsp и т.п.), которая по запросу генерирует HTML-документ. Разумеется, разновидностей серверных программ и типов документов довольно много, и полное их описание не является задачей данной лекции.
И, наконец, якорь означает идентификатор элемента внутри документа, на который направлена ссылка. Если якорь в URL не указан, то документ открывается сначала, иначе - в верхней строке окна оказывается начало некоторого HTML-элемента, имеющего указанный идентификатор (т.е. атрибут id или name). Впрочем, если высота содержимого от якоря до конца документа меньше высоты окна браузера, то, естественно, якорь окажется не вверху окна, а ниже.
<style type="text/css">
a:link {
color: #33ccff;
}
a:visited {
color: #cecece;
}
a:hover {
color: #336666;
}
a:active {
color: #339999;
}
</style>
…
<a id="start"></a>
<a href="#div2">К секции div2</a>
<a href="#end">В конец документа</a>
<a href="http://ya.ru">На Яндекс</a>
<div id="div1">
<strong>Это текст в секции div1 </strong> - Lorem ipsum dolor sit amet...
<a id="anchor1"></a>
Lorem ipsum dolor sit amet…
</div>
<div id="div2">
<strong>Это текст в секции div2 </strong> - Lorem ipsum dolor sit amet...</div>
<a id="end"></a>
<a href="#start">В начало документа</a>
<a href="#div1">К секции div1</a>
<a href="http://ya.ru">На Яндекс</a>
(рис 2.10) Стили ссылокСодержащиеся в документе символы, не являющиеся при этом частью тегов, обычно отображаются браузером "как есть". Некоторые символы, однако, имеют специальное значение и прямо не выводятся, другие же невозможно набрать со стандартной клавиатуры. Для включения специальных символов в документ требуется их кодирование: либо с помощью специальных названий, либо с помощью числовой кодировки Latin-1. В таблице 2.3 приведены названия некоторых специальных символов, а также их номера в кодировке Latin-1
| Результат | Описание | Стандартное название | Номер символа |
|---|---|---|---|
| Неразрывный пробел | nbsp; | #160; | |
| < | меньше чем | lt; | #60; |
| > | больше чем | gt; | #62; |
| амперсанд | amp; | #38; | |
| $$\text{\textcent}$$ | cent; | #162; | |
| $$\pounds$$ | фунт | #163; | |
| $$\yen$$ | иена | yen; | #165; |
| $$\text{\texteuro}$$ | евро | euro; | #8364; |
| $$\S$$ | раздел | sect; | #167; |
| $$\copyright$$ | авторское право | copy; | #169; |
| $$\text{\textregistered}$$ | зарегистрированная торговая марка | reg; | #174; |
| " | левая угловая кавычка | laquo; | #171; |
| " | правая угловая кавычка | raquo; | #187; |
Примеры:
copy; #174;
div?Разобравшись со структурой HTML-документа, логично перейти к изучению того, как наполнять документ содержанием. В первую очередь, это текст. Как уже говорилось, текст в html-файл можно поместить и безо всякой структуры. Однако, если соблюдать правила, то следует выбрать для текста подходящий контейнер и разместить его в элементе body.
Рассмотрим наиболее важные текстовые контейнеры.
Заголовки имеют большое значение. Для пользователя они создают ориентиры в документе и проясняют его структуру, а поисковые серверы используют заголовки, чтобы индексировать структуру и содержание веб-страниц.
Элемент h1 определяет наиболее крупный заголовок; h6 - наименее крупный. Заголовки h1 должны использоваться как главные заголовки, сопровождаемые заголовками h2, затем менее важными заголовками h3, и так далее. Обычно авторы применяют h1 для названия документа, h2 для названий разделов и т.д.
<h1>
Это заголовок 1</h1>
<h2>
Это заголовок 2</h2>
<h3>
Это заголовок 3</h3>
<h4>
Это заголовок 4</h4>
<h5>
Это заголовок 5</h5>
<h6>
Это заголовок 6</h6>
(рис 2.1) Заголовки уровней 1-6Обратите внимание, что каждый заголовок располагается на новой строке и имеет вертикальный отступ от соседних элементов. Первое свидетельствует о том, что заголовок - элемент блочный, т.е. всегда вызывает разрыв строки до и после себя. Второе означает, что предопределённые значения отступов для этого элемента отличны от нуля (как их можно регулировать, далее будет рассматриваться).
Служит для смысловой разбивки текста. Браузеры, отображая содержимое этого элемента (также блочного), обычно вставляют перед ним вертикальный отступ, немного больший по высоте, чем одна строка - таким образом абзацы отделяются друг от друга по умолчанию. При помощи стилей можно достичь и более привычного, "книжного" вида - горизонтального отступа первой строки каждого абзаца. Возможны и другие варианты.
p {
text-indent: 2.5em;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
...
<p>
По умолчанию браузер визуально отделяет абзацы друг от друга вертикальным
отступом, что эквивалентно установке свойств margin-top и margin-bottom
в некоторое отличное от нуля значение.
</p>
<p>
В данном примере этим свойствам задано небольшое значение (0.2em, т.е.
20% высоты символа M).
</p>
<p>
Вместо этого абзацы разделены отступом первой строки, который задан CSS-свойством
text-indent.
</p>
(рис 2.3) Разделение абзацев отступом первой строки(рис 2.2) Разделение абзацев выделением первой буквыp { text-indent: 2.5em; margin-top: 0.2em; margin-bottom: 0.2em; } p:first-letter { font-weight: bold; font-size: 2em; color: Red; } ... <p> Буквица - ещё один эффект, применяемый для визуального выделения начала абзаца. В CSS он может быть достигнут путём применения специфического стиля к первой букве абзаца. </p> <p> Первой букве абзаца соответствует селектор псевдоэлемента p:first-letter. Для этого псевдоэлемента в данном примере назначена высота 2em и красный полужирный шрифт. </p>
(рис 2.3) Разделение абзацев выделением первой буквыКак видно из примеров, в теле HTML-документа расположены несколько абзацев, и никакого форматирования. Однако форматирование к абзацам всё же применяется, поскольку к HTML-документу подключена таблица стилей. Это достигается путём включения в "шапку" HTML-документа следующей ссылки:
<link rel="Stylesheet" href="Style.css" />
Подробно эта директива и другие способы подключения таблиц стилей описаны в лекции "Каскадные стили". Пока достаточно понять, что таблица стилей "Style.css" учитывается браузером при форматировании HTML-документа.
В таблице стилей содержится определение стиля элемента p (т.е. абзаца). Об определениях стилей также речь пойдёт позже, однако на текущий момент вполне достаточно понимания того, что свойства, указанные в стиле для элемента p, будут применены ко всем абзацам документа.
Остановимся подробно на этих свойствах:
margin-top Верхнее поле, т.е. расстояние от верхней границы элемента (в данном случае, абзаца) до других элементов.margin-bottom Нижнее поле, т.е. расстояние от нижней границы элемента до других элементов.Единица измерения, использованная в данном примере для задания высоты поля - em, что означает "равна высоте шрифта" ( em - латинская буква m, напечатанная шрифтом Cicero - стандартная единица измерения в полиграфии) . Соответственно, 0.5em означает "равно половине высоты шрифта".
Попробуйте уменьшать и увеличивать значения margin-top и margin-bottom, наблюдая за результатом.
Затем уберите совсем объявления полей. В результате поля увеличатся! Это происходит потому, что браузеры используют по умолчанию не нулевые значения полей, а такие, как вы увидели, проделав это упражнение.Позволяют акцентировать отдельные фрагменты текста (как правило, слова и фразы) при помощи форматирования. Элемент strong по умолчанию делает вложенный текст полужирным, em - курсивом, но при помощи стилей такое поведение легко переопределяется. Элемент span по умолчанию никак не влияет на вложенный в него текст - к нему всегда нужно применять стиль.
strong {
color: Red;
}
.accent {
background: #BFFFBF;
color: Blue;
font-weight: bold;
}
...
<p>
Элемент strong по умолчанию делает вложенный текст полужирным, em - <em>
курсивом</em>, но при помощи стилей такое поведение <strong>легко переопределяется</strong>.
Элемент span по умолчанию никак не влияет на вложенный в него текст -
к нему всегда нужно <span class="accent">применять стиль</span>.
</p>
(рис 2.4) Переопределение поведения элемена strong - выделение цветомОчевидно, одних и тех же результатов можно добиться, назначая стили любому из контейнеров em, strong, span (и многих других). Однако, хотя и на экране результат будет одинаков, с точки зрения программного анализатора структуры документа (каковым является, например,
| Элемент | Описание |
|---|---|
abbr |
Указывает, что заключённый в нём текст является сокращением |
|
Указывает, что заключённый в нём текст является акронимом (сокращением, составленным из заглавных букв) |
address |
Определяет контактный адрес автора документа - например, e-mail |
blockquote |
Определяет блочную цитату (длинную выдержку из другого документа), которая отображается, как правило, со специальным отступом и курсивом |
cite |
Указывает, что заключённый в нём текст является библиографической ссылкой |
code |
Используется для показа программного кода (как правило, отображается моноширинным шрифтом) |
del |
Указывает, что заключённый в нём текст автор исключил из текущей редакции документа - отображается, как правило, зачёркнутым текстом |
dfn |
Употребляется для выделения термина, впервые появившегося в тексте (как правило, отображается курсивом) |
em |
Логическое ударение (как правило, отображается курсивом) |
ins |
Указывает, что заключённый в нём текст автор добавил в текущую редакцию документа - отображается, как правило, подчёркнутым текстом |
kbd |
Используется для показа текста, который пользователь должен вводить с клавиатуры (как правило, отображается моноширинным шрифтом) |
q |
Определяет короткую цитату |
strong |
Ещё более сильное логическое ударение (как правило, отображается полужирным шрифтом) |
В элементы сокращений ( abbr и title, определяющий расшифровку сокращения. Значение атрибута title появляется на экране только тогда, когда на элемент наводится указатель.
Пример определения сокращения при помощи элемента abbr:
<abbr title="World Wide Web">WWW</abbr>
Другая группа текстовых контейнеров определяет физическое форматирование текста:
| Элемент | Описание |
|---|---|
b |
Определяет полужирный текст |
big |
Определяет крупный текст |
i |
Определяет текст курсивом |
small |
Определяет мелкий текст |
sub |
Определяет текст – нижний индекс |
sup |
Определяет текст – верхний индекс |
tt |
Определяет текст телетайпа (моноширинный) |
Как видите, одних и тех же визуальных результатов можно добиться при помощи разных элементов. Делая выбор, следует руководствоваться не только тем, как элемент будет отображаться на экране, но и тем, как, например, произнёс бы его синтезатор речи или как бы мог его интерпретировать
<p>
<b>полужирный текст</b></p>
<p>
<i>курсив</i></p>
<p>
<u>подчёркнутый текст</u></p>
<p>
<tt>моноширинный текст</tt></p>
<p>
<big>на 1 пункт крупнее</big></p>
<p>
<small>на 1 пункт мельче</small></p>
<p>
Верхний и нижний индексы:
<i>c</i><sub>0</sub> + <i>c</i><sub>1</sub><i>x</i>+ <i>c</i><sub>2</sub><i>x</i><sup>2</sup>
</p>
(рис 2.5) Элементы физического форматирования текстаКак уже говорилось, разбивка на строки кода HTML-разметки не влечёт разбивки браузером на строки документа. Один из способов разрыва строки - применение блочного элемента, например, абзаца. Другой способ (исключающий добавление дополнительных отступов) - это вставка в текст элемента разрыва строки br. Существует и элемент nobr (нестандартный), имеющий противоположное назначение: текст, заключённый в него, не будет разбит браузером на строки, независимо от количества символов.
<title>Untitled Page</title>
</head>
<body>
<p>
Этот абзац будет разбит на строки
<br />
здесь и
<br />
здесь.</p>
<p>
<nobr>Этот очень длинный абзац вообще не будет разбит на строки -
пользуйтесь горизонтальной прокруткой.
Curabitur vitae tincidunt lorem... </nobr>
</p>
(рис 2.7) Применение элементов HTML для разбивки текста на строки(рис 2.6) Пример для элемента pre<title>Пример для элемента pre</title> </head> <body> <p> Далее приведён листинг программного кода, помещённый в HTML-элемент <code> pre</code>, и он отображается с теми же отступами, как в Visual Studio:</p> <pre> oDigits.onmousedown = oSigns.onmousedown = function(e) { var elem = null; if (e) elem = e.target; else elem = window.event.srcElement; elem.style.color = 'red'; } oDigits.onmouseup = oSigns.onmouseup = function(e) { var elem = null; if (e) elem = e.target; else elem = window.event.srcElement; elem.style.color = ''; } </pre>
Элемент pre (преформатированный вывод) выделяет в разметке фрагмент, который браузер должен отобразить "как есть", теми же символами и с тем же разбиением на строки, включая все пробелы.
Текст внутри элемента pre может содержать физическую и логическую разметку, а также якоря, изображения и горизонтальные линейки. Весь текст в элементе будет отображен моноширинным шрифтом.
Чаще всего преформатированный вывод используется для представления исходных кодов программ, как в следующем примере.
(рис 2.7) Пример для элемента pre
Не несёт никакой логической нагрузки и используется, как правило, в качестве строительного элемента при вёрстке страницы. Здесь важно провести следующее разделение между всеми элементами тела HTML-документа: строчные ( inline ) элементы могут занимать часть строки, а блочные ( block ) всегда занимают целое число строк. Большинство HTML-элементов - строчные; к блочным относятся заголовок, абзац, секция, список и таблица (а также некоторые другие элементы, которые будут рассмотрены особо).
Таким образом, с точки зрения представления на экране секция ничем не отличается от абзаца. Главное различие состоит в том, что в абзац нельзя поместить другой абзац (и вообще блочный элемент), а в секцию разрешается помещать любые другие элементы, включая секции. Поэтому в качестве универсального контейнера обычно используется именно секция. При проектировании макета веб-страницы обычно мыслят блоками: блок колонтитула, блок меню, блок основного содержимого и т.д. Как правило, каждый блок реализуется при помощи секции либо списка. Подробно использование блоков рассмотрено в лекциях "Позиционирование" и "Табличная и бестабличная вёрстка"
Используется для нумерации или маркировки последовательности элементов. В следующем примере показаны основные приёмы разметки списков.
ol {
list-style-type: upper-roman;
}
...
<p>
Первый список:</p>
<ol>
<li>Пункт</li>
<li>Ещё один пункт</li>
<li>Последний пункт</li>
<li>Вложенный список:
<ul>
<li>Пункт</li>
<li>Ещё один пункт</li>
<li>Последний пункт</li>
</ul>
</li>
</ol>
(рис 2.9) Вложенный список(рис 2.8) Изображение в качестве маркераul li { list-style-type: disc; list-style-image:url(write.gif); padding-left:10px; } ... <ul> <li>Пункт</li> <li>Ещё один пункт</li> <li>Последний пункт</li> </ul>
(рис 2.9) Изображение в качестве маркераКак видно из примера, пункты в списке должны обрамляться элементами li ( list item - элемент списка), которые, в свою очередь, погружаются в элемент ol или ul.
Специфические свойства элементов ol и ul:
list-style-image list-style-type ol или ul (списку в целом), так и к элементу li (отдельным элементам списка).first-letter, измените цвет и размер начальных букв пунктов списка.list-style: square inside;Назначение этого элемента очевидно, и он является самым сложным по структуре и возможностям форматирования. Подробно он рассмотрен в отдельной лекции.
Служит для определения гиперссылки либо точки назначения ("якоря") гиперссылки. В документе HTML гиперссылкой может являться фрагмент текста или изображение, помещённые в элемент a. Браузер, отображая элемент a, по умолчанию (т.е. если не задать других правил) обычно выделяет текст синим цветом и подчёркиванием, а также отображает курсор в виде указателя, когда он проходит над ссылкой - будь то текст или изображение. При нажатии на гиперссылку она активизируется, и браузер выполняет переход по URL (универсальному локатору ресурса), указанному в атрибуте href элемента a.
Вот типичный пример текстовой гиперссылки:
<a href="http://intuit.ru">Интернет Университет Информационных Технологий</a>
URL может указывать как на веб-страницу (документ HTML), так и на содержимое какого-либо другого типа. Браузеры умеют отображать, кроме HTML-документов, текстовые файлы и файлы изображений некоторых типов (jpg, png, gif). Другое содержимое (аудио, видео, документы Word и Acrobat, архивы) будет загружено браузером как файл и сохранено на компьютере пользователя. Впрочем, к браузеру могут быть подключены дополнительные программы (плагины - plugins ), открывающие различное медиа-содержимое непосредственно в окне браузера. К популярным плагинам такого рода можно отнести
Составные части URL имеют следующий смысл (здесь показаны только наиболее простые, необходимые элементы):
протокол://сервер/файл#якорь
Элемент сервер определяет, к какому компьютеру отправляется запрос: любой компьютер имеет свой уникальный числовой адрес в рамках сети ( IP-адрес ), а многие компьютеры-сервера (компьютеры, предназначенные для обработки запросов) имеют также доменное имя, такое как ya.ru. В URL указывается либо доменное имя, либо IP-адрес.
Элемент протокол определяет, какая программа на сервере будет обрабатывать запрос - веб-сервер (такой как Apache, IIS, Tomcat и др.), служба FTP или другая. Также от этого зависит, по какому протоколу будут передаваться данные от сервера клиенту (браузеру). Если указан протокол file, то браузер прочитает файл с локального компьютера. Псевдопротокол javascript при активизации ссылки вызовет указанную функцию, например: <a href="javascript:history.back();">Назад</a>. При активизации ссылки с псевдопротоколом mailto откроется почтовый клиент и создастся письмо с указанным адресом, например: <a href="mailto:admin@site.com">Написать письмо</a>.
Элемент файл определяет путь к файлу на сервере - к документу HTML, изображению, архиву или, может быть, к серверной странице (php, aspx, jsp и т.п.), которая по запросу генерирует HTML-документ. Разумеется, разновидностей серверных программ и типов документов довольно много, и полное их описание не является задачей данной лекции.
И, наконец, якорь означает идентификатор элемента внутри документа, на который направлена ссылка. Если якорь в URL не указан, то документ открывается сначала, иначе - в верхней строке окна оказывается начало некоторого HTML-элемента, имеющего указанный идентификатор (т.е. атрибут id или name). Впрочем, если высота содержимого от якоря до конца документа меньше высоты окна браузера, то, естественно, якорь окажется не вверху окна, а ниже.
<style type="text/css">
a:link {
color: #33ccff;
}
a:visited {
color: #cecece;
}
a:hover {
color: #336666;
}
a:active {
color: #339999;
}
</style>
…
<a id="start"></a>
<a href="#div2">К секции div2</a>
<a href="#end">В конец документа</a>
<a href="http://ya.ru">На Яндекс</a>
<div id="div1">
<strong>Это текст в секции div1 </strong> - Lorem ipsum dolor sit amet...
<a id="anchor1"></a>
Lorem ipsum dolor sit amet…
</div>
<div id="div2">
<strong>Это текст в секции div2 </strong> - Lorem ipsum dolor sit amet...</div>
<a id="end"></a>
<a href="#start">В начало документа</a>
<a href="#div1">К секции div1</a>
<a href="http://ya.ru">На Яндекс</a>
(рис 2.10) Стили ссылокСодержащиеся в документе символы, не являющиеся при этом частью тегов, обычно отображаются браузером "как есть". Некоторые символы, однако, имеют специальное значение и прямо не выводятся, другие же невозможно набрать со стандартной клавиатуры. Для включения специальных символов в документ требуется их кодирование: либо с помощью специальных названий, либо с помощью числовой кодировки Latin-1. В таблице 2.3 приведены названия некоторых специальных символов, а также их номера в кодировке Latin-1
| Результат | Описание | Стандартное название | Номер символа |
|---|---|---|---|
| Неразрывный пробел | nbsp; | #160; | |
| < | меньше чем | lt; | #60; |
| > | больше чем | gt; | #62; |
| амперсанд | amp; | #38; | |
| $$\text{\textcent}$$ | cent; | #162; | |
| $$\pounds$$ | фунт | #163; | |
| $$\yen$$ | иена | yen; | #165; |
| $$\text{\texteuro}$$ | евро | euro; | #8364; |
| $$\S$$ | раздел | sect; | #167; |
| $$\copyright$$ | авторское право | copy; | #169; |
| $$\text{\textregistered}$$ | зарегистрированная торговая марка | reg; | #174; |
| " | левая угловая кавычка | laquo; | #171; |
| " | правая угловая кавычка | raquo; | #187; |
Примеры:
copy; #174;
div?
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.