Тэги физического форматирования текста
Практическая работа №3
Форматирование текста. Атрибуты элементов.
Цель:обучить способам физического и логического форматирования текста на HTML-странице, научить использовать атрибуты HTML-элементов.
Программное обеспечение: браузер, текстовый редактор
Оснащение: персональный компьютер, практикум
Время проведения: 2 уч. часа
Литература:
1. Чиртик А.А. HTML: популярный самоучитель / А.А.Чиртик. – СПб: Питер, 2006.
2. Ташков П. Веб-мастеринг: HTML, CSS, JavaScript, PHP, CMS, графика, раскрутка. / П. Ташков, – СПб: Питер, 2010.
ВОПРОСЫ ВХОДНОГО КОНТРОЛЯ:
1. Назовите основные компоненты HTML.
2. Приведите структуру простейшего HTML-документа.
3. Назовите назначение метатегов.
4. Опишите метатег «description».
5. Опишите метатег «keywords».
6. Как задать автоматическую перезагрузку страницы каждые 5 минут?
7. Как задать кодировку веб-страницы?
8. Опишите понятие семантики.
9. Перечислите и опишите правила семантики кода.
10. Перечислите и опишите правила написания тегов.
КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
Логическое и физическое форматирование
Для форматирования текста HTML-документов предусмотрена целая группа тэгов, которую можно условно разделить на тэги логического и физического форматирования.
Тэги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тэг <CODE> ), цитата (тэг <СIТЕ> ), аббревиатура (тэг <ABBR> ) И Т. П.
|
|
|
С помощью тэгов <ЕМ> и <STRONG> можно, например, отметить отдельные фрагменты как выделенные,или сильно выделенные.Заметим, что речь идет о структурной разметке,которая не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической.
Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Вид отображения никак не связан со структурным типом фрагмента (т. е. именем тэга логического форматирования), но может быть легко переопределен.
Тэги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера.
Например, для отображения фрагмента курсивом можно использовать тэг курсива <i>.
Между разработчиками HTML-документов долгое время шли споры о преимуществах и недостатках того или иного подхода. С выходом спецификации HTML 4.0 эти споры завершились в пользу применения логического форматирования, поскольку был провозглашен принцип отделения структуры документа от его представления. Действительно, только на базе логического форматирования можно гибко управлять представлением документа, используя современные методы (основанные на таблицах стилей, динамически изменяющихся документах и т. д.).
|
|
|
Тем не менее, на настоящий момент может свободно использоваться и физическое форматирование. В спецификации HTML 4.0 некоторые тэги физического форматирования не рекомендуются для применения, однако, пока они все еще поддерживаются всеми браузерами. Заметим, что некоторые тэги логического форматирования, призванные заменить отдельные тэги физического форматирования, распознаются не всеми браузерами, что делает их применение крайне неудобным.
Тэги логического форматирования текста
Тэг < ABBR >
Тэг <ABBR> отмечает свой текст как аббревиатуру (ABBReviation).
Пример:
< p >
Язык
< abbr title =" HTML — стандартный язык разметки документов во Всемирной паутине.">
HTML
</ abbr >
был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах
в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария).
HTML создавался как язык для обмена научной и технической документацией,
пригодный для использования людьми, не являющимися специалистами в области вёрстки.
</ p >
В браузере это будет выглядеть так:
|
|
|
Тэг < ACRONYM >
Тэг <ACRONYM>. Так же, как и тэг <ABBR>, используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы,т. е. произносимые слова, состоящие из аббревиатур. Тэг <ACRONYM> возможно в будущем станет использоваться для невизуального отображения элементов, например при речевом синтезе.
Данный тэг удобно использовать в сочетании с параметром TITLE, в качестве значения которого можно указать полную версию аббревиатуры. Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом <ACRONYM>, будут выдавать полное наименование в виде появляющейся подсказки.
<ACRONYM TITLE="Новопольский государственный аграрно-экономический колледж"> НГАЭК </ACRONYM>.
Тег H 1... H 6
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <H1> представляет собой наиболее важный заголовок первого уровня, а тег <H6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <H1>... <H6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей.
|
|
|
<h1> Заголовок первого уровня </h1>
<h2> Заголовок второго уровня</h2>
<h3> Заголовок третьего уровня</h3>
В браузере это будет выглядеть так:
Тэг <С I ТЕ>
Тэг <CITE> используется для отметки цитат или названий книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно выводится курсивом.
< p >
< cite >
Нельзя сказать человеку: "Ты можешь творить.
Так давай, твори". Гораздо вернее подождать, пока он
сам не скажет: "Я могу творить, и я буду творить, хотите
вы этого или нет".
</ cite >
</ p >
< p > Айзек Азимов</ p >
Тэг < CODE >
Тэг <CODE> отмечает свой текст как небольшой фрагмент программного кода.Как правило, отображается моноширинным шрифтом. Этот тэг не следует путать с тэгом <PRE>, являющимся элементом уровня блока, который следует использовать для отметки больших фрагментов (листингов) кода.
< body >
< p >Код программы</ p >
<p>
<code>
function checkParent (src, dest) {<Br>
while (src != null) {<Br>
if (src.tagName == dest) return src<Br>
src = src.parentElement<Br>
}<Br>
return null<Br>
}
</code>
</p>
</body>
Тэг < DEL >
Тэг <DEL> отмечает свой текст как удаленный.Этот элемент полезно использовать для отметки изменений, вносимых в документ от версии к версии. Тэг <DEL> может использоваться как элемент уровня текста и как элемент уровня блока.
Тэг имеет два необязательных параметра: CITE и DATETIME. Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента.
Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD, определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс (Time Zone).
Тэг < EM >
<EM> - (от английского emphasis – акцент) используется для выделения важных фрагментов текста. Обычно браузеры отображают такой текст курсивом.
Тэг <STRONG>
<STRONG> - используется для выделения важных фрагментов текста, отображается полужирным шрифтом.
Тэги физического форматирования текста
Тег < B >
Заключенные между этими тег имеет свойства жирного текста. Имеет атрибут title - позывает текст в виде всплывающей подсказки.
< b > Пример физического форматирования </ b >
Тег < BIG >
Данный тег увеличивает размер отображения текста.Имеет атрибут title - позывает текст в виде всплывающей подсказки.
< big > Пример физического форматирования </ big >
Тег < FONT >
Служит для выбора шрифта для текста. Атрибуты:
· size - размер текста от 1 до 7
· color - цвет текста
<font size = 4 color = red>
Пример физического форматирования
</font>
Тег < HR >
Данный тег вставляет в страницу горизонтальную линию. Атрибуты:
· size - высота и толщина линии
· width - ширина линии
· noshade - создание линии без тени
· color - меняет цвет линии
<HR size = 1 width = 100 color = green>
Тег < I >
Данный тег позволяет сделать текст наклонным
< i >
Пример физического форматирования
</ i >
Тег < SMALL >
Уменьшает размер текста
< small >
Пример физического форматирования
</small>
Тег < SUB >
Данный тег приспускает текст
< sub >
Пример физического форматирования
</ sub >
Тег < SUP >
Этот тег приподнимает текст
< sup >
Пример физического форматирования
</ sup >
Тэг < BLOCKQUOTE >
Бывают случаи, когда в текст HTML-документа необходимо включить какую-либо длинную цитату. Для выделения цитат из основного текста существует тэг <BLOCKQUOTE>. Он является контейнером и может содержать любые тэги форматирования.
Текст, размеченный данным тэгом, при отображении отделяется от основного текста пустыми строчками и, как правило, выводится с небольшим отступом вправо.
< BLOCKQUOTE > Пример физического форматирования </ BLOCKQUOTE >
Разделение на абзацы
Любые тексты, будь то школьное сочинение, заметка в газете или техническое описание устройства имеют определенную структуру. Элементами такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др.
Одним из первых правил составления практически любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>. В HTML-документах символы перевода строки не приводят к образованию нового абзаца.
Язык HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Поскольку символы перевода строки оригинального документа игнорируются, то текст, отлично смотревшийся в окне редактора автора документа, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.
Избежать этой неприятности позволяет применение специального тэга разделения на абзацы <р>. Перед началом каждого абзаца текста следует поместить тэг <Р>.
Браузеры обычно интерпретируют несколько стоящих подряд тэгов абзаца <Р> как один. То же самое относится и к тэгу перевода строки <BR>. Поэтому создать несколько пустых строк при помощи этих тэгов не удается.
Перевод строки
При отображении текстовых документов в браузере место переноса строки в пределах абзаца определяется автоматически в зависимости от размера шрифтов и размера окна просмотра. Перенос строки может осуществляться только по символам-разделителям слов (например, пробелам). Иногда в документах требуется задать принудительный перевод строки, реализующийся независимо от параметров настроек браузера. Для этого служит тэг принудительного перевода строки <BR>. Включение тэга <BR> В текст документа обеспечит размещение последующего текста с начала новой строки. Например, такой подход может использоваться для создания структур типа списков без использования специальных тэгов разметки списка. Или, например, без данного тэга не обойтись для отображения стихотворений и т. п.
Тэги <NOBR> и <WBR>
Бывают ситуации, когда требуется выполнить операцию противоположного назначения - запретить перевод строки. Для этого существует тэг-контейнер <NOBR>. Текст, размеченный этим тэгом, будет гарантированно располагаться в одной строке, независимо от ее длины. Если при этом получающаяся строка будет выходить за пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки.
Размечая текст с помощью тэга неразрывной строки <NOBR> можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру читателя место возможного перевода строки, что будет выполнено только при необходимости (так называемый "мягкий" перевод строки). Это можно осуществить, поставив в нужном месте текста тэг <WBR> (Word BReak), который так же, как и тэг <BR>, не нуждается в закрывающем тэге.
Дата добавления: 2018-11-24; просмотров: 523; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!