1.1. Структура HTML-документа
Первичная структура документа выглядит следующим образом:
<HTML>
<HEAD>
<TITLE> название документа</TITLE>
</HEAD>
<BODY> сам документ</BODY>
</HTML>
Тэги <HTML> и </HTML> задают формат документа: если их не поставить, не будет распознаваться формат HTML. Открывающий тэг <HTML> задает начало HTML-документа, закрывающий тэг </HTML> — конец документа.
Тэги <HEAD> и </HEAD> определяют заголовок документа. В заголовке указывается различная служебная информация. Одним из ее параметров является название документа. Название документа высвечивается в титульной строке браузера (на самом верху экрана при просмотре через браузер). Тэги этого параметра <TITLE> и </TITLE>. Например, чтобы на титульной строке браузера было написано: «Персональная страница », в коде HTML необходимо написать следующее:
<HEAD>
<TITLE>Персональная страница </TITLE>
</HEAD>
Тэги <BODY> и </BODY> определяют тело (содержание) документа. Между этими тэгами будет помещен текст и графика, отформатированные тэгами.
Таким образом, структура HTML-документа подразделяется на две части:
1) заголовок;
2) содержание документа.
Упражнение. Откройте программу «Блокнот», напишите в ней первичную структуру документа:
<HTML>
<HEAD>
<TITLE> название документа</TITLE>
</HEAD>
<BODY> сам документ</BODY>
</HTML>
Сохраните файл в формате. txt для дальнейшей правки, а также в формате. htm и откройте сохраненный в формате. htm файл с помощью браузера (например, с помощью Internet Explorer). Созданный файл будет содержать название (в верхней строке окна браузера) и тот текст, который был написан между тэгами <BODY> и </BODY>.
1.2. Форматирование шрифта в HTML-документе
Шрифт HTML-документа можно изменять по следующим параметрам: размер, начертание, гарнитура. От настроек этих параметров во многом зависит, будет ли текст читабельным. Визуализация текста влияет на его содержание. Не рекомендуется:
— делать шрифт очень маленьким (за исключением тех случаев, когда информация не имеет особого значения): чтение текста с таким шрифтом может утомить пользователя со слабым зрением;
— делать шрифт очень большим (за исключением тех случаев, когда нужно выделить какой-либо информативный фрагмент): текст, написанный большим шрифтом, создает впечатление кабинета офтальмолога и за редким исключением ухудшает дизайн сайта;
— делать шрифт разнородным по стилю, это утомляет читающего.
Гарнитуру шрифта лучше подбирать согласно тематике сайта. Например, научные тексты не будут смотреться, если они отображены шрифтом Comic, а молодежный сайт будет диссонировать со шрифтом Bookman Old Style.
Шрифты делятся на шрифты с засечками (serif) и рубленые шрифты (sans serif). Шрифты с засечками характеризуются маленькими декоративными элементами у каждой буквы, которые и называются засечками. Примером шрифта с засечками может служить шрифт Times. Рубленые шрифты засечек не имеют (пример — Helvetica).
Принято считать, что рубленые шрифты сильнее утомляют глаза, чем шрифты с засечками, так как засечки помогают вести взгляд читающего по тексту. По этой причине при публикации больших объемов текста используются шрифты с засечками. Более четкие, заметные и менее загруженные дополнительными элементами формы рубленых шрифтов используются, как правило, для заголовков статей или дисклаймеров.
Использовать подчеркивание, выделение жирным и курсивом необходимо также в разумных пределах; насыщение этими эффектами может отвлечь от сути передаваемой информации. Курсив смотрится особенно плохо при маленьком размере шрифта из-за сложности его визуализации с помощью квадратной пиксельной сетки. Если курсив необходим, надо стараться оформлять им только небольшие объемы текста.
Не следует увлекаться эффектом бегущей строки — это заставляет читателя ждать, пока будет выдана полная информация, что часто раздражает в связи с лимитом времени, выделенного на просмотр.
По сути, это общие рекомендации, но не аксиомы. Право выбора всегда остается за автором сайта.
Размер
Существует несколько способов изменения размера шрифта:
1. С помощью тэгов <Hi> и </Hi>, где i принимает значение от 1 до 6
(1 — самый крупный, 6 — самый мелкий).
Пример. Чтобы написать более крупными буквами фамилию человека и более мелкими какие-нибудь данные о нем c помощью <Hi>, необходимо поставить следующие тэги: <H2></H2><H4>родился в 1959 году</H4> |
Тэги <Hi> и </Hi> созданы для выделения заголовков; их характерной чертой является то, что все, написанное после закрывающего тэга </Hi>, переходит на следующую строку.
2. С помощью тэгов <FONT SIZE=±i> и </FONT>, где i принимает значение от 1 до 7. 1 — наименьший размер, 7 — наибольший, 3 — нормальное значение (размер шрифта в браузерах — по умолчанию); каждый следующий размер на 20% больше предыдущего.
Пример. Чтобы написать более крупными буквами фамилию человека и более мелкими какие-нибудь данные о нем с помощью <FONT SIZE>, необходимо поставить следующие тэги: <FONT SIZE=+1></FONT><FONT SIZE=-1>родился в 1959 году </FONT> |
Тэги <FONT SIZE=±i> можно использовать и в заголовках, и в простом тексте; перенос на другую строку после закрывающего тэга </FONT> не осуществляется.
3. Тэги <BIG> и </BIG> немного увеличат текст относительно заданного по умолчанию. С помощью тэгов <SMALL> и <SMALL> можно уменьшить текст относительно заданного по умолчанию.
Упражнение. Откройте сохраненный в блокноте файл со структурой HTML-документа. Отформатируйте по своему усмотрению текст, вставленный между тэгами <BODY> и </BODY>. Сохраните файл в формате. htm и посмотрите его через браузер. В окне браузера должен появиться текст соответственно различного размера.
Начертание
Для изменения начертаний текста существует целый ряд тэгов:
тэги <B> и </B> делают текст жирным;
тэги <I> и </I> выделяют текст курсивом;
тэги <U> и </U> делают текст подчеркнутым;
тэги <STRIKE> и </STRIKE> делают текст перечеркнутым;
тэги <SUP> и </SUP> делают текст верхним индексом;
тэги <SUB> и </SUB> делают текст нижним индексом;
тэги <MARQUEE> и </MARQUEE> задают бегущую строку.
Фрагмент текста можно выделить сразу несколькими тэгами, в том числе и тэгами размера. При этом последовательность открывающих и закрывающих тэгов не принципиальна.
Пример. Для того, чтобы написать текст «Использование данных в коммерческих целях допустимо.» жирным, маленьким, перечеркнутым курсивом, необходимо поставить следующие тэги: <B><SMALL><STRIKE><I>Использование данных в коммерческих целях допустимо. </B></I></SMALL></STRIKE> |
Упражнение. Откройте сохраненный в блокноте файл и отформатируйте текст, вставленный между тэгами <BODY> и </BODY>, по начертанию. Сохраните документ в формате. htm и посмотрите через браузер, что получилось.
Гарнитура
Гарнитура шрифта задается следующими тэгами:
<FONT FACE="..."> и </FONT>
Вместо многоточия ставится название шрифта: Arial Cyr, Arial, Times New Roman или какой-либо другой понравившийся. Если этот шрифт стандартный, то он правильно отобразится на любом компьютере со стандартной операционной системой, но если поставить какой-либо оригинальный шрифт, не имеющийся в перечне стандартных, то он не отобразится. Для адекватного просмотра документа придется скачивать этот шрифт на компьютер пользователя. Можно задать целый список шрифтов: <FONT FACE=="Arial Cyr, Arial, Times New Roman">. В таком случае браузер пользователя выберет из них первый шрифт, а если его нет на компьютере пользователя, то следующий и т. д. Если не окажется ни одного из шрифтов, браузер выберет шрифт, который в нем выставлен по умолчанию.
Упражнение. Откройте сохраненный в блокноте файл и отформатируйте гарнитуру текста, вставленного между тэгами <BODY> и </BODY>. Сохраните документ в формате. htm и посмотрите через браузер, что получилось.
1.3. Форматирование текста в HTML-документе
Форматирование текста — один из способов улучшения его визуального восприятия. Аккуратный текст (разбитый на абзацы, выровненный, с однородными знаками препинания и отступами и т. д.) воспринимается гораздо лучше, чем текст в виде бесконечного потока. Считается, что выравнивание текста по левому краю увеличивает скорость чтения, так как ровный левый край помогает найти начало новой строки.
Основываясь на гипотезе о том, что человеческий глаз мгновенно может сфокусироваться примерно на не более чем 7,5 см строки текста, считается, что строка длиною в 8-10 слов (в среднем) увеличивает скорость чтения и восприятия материала.
Если не ставить специальных тэгов, то текст HTML-документа будет идти сплошным широким потоком, независимо от вводов, поставленных для обрыва строки.
Для того, чтобы разбить текст на абзацы, существуют специальные тэги:
<P> и </P>
Для того, чтобы оборвать строку и перейти на следующую, необходимо поставить тэг <BR> (он существует без парного закрывающего тэга).
Абзац можно отформатировать по ширине, по центру, по правому или левому краю:
<P AlIGN=JUSTIFY> и </P> — текст, помещенный между этими тэгами, будет отформатирован по ширине;
<P AlIGN=CENTER> и </P> — текст, помещенный между этими тэгами, будет отформатирован по центру;
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 12 |
