Размещение и форматирование текста

Занятие 1. Введение в HTML

Для создания Web-страницы можно воспользоваться специальными программами редактирования документов Всемирной паутины. Другой способ подготовки Web-страниц заключается в «ручном» создании кода документов на языке HTML – HyperText Markup Language – Язык разметки гипертекста. Данный язык представляет собой довольно простой набор команд, описывающий структуру документа. Язык HTML позволяет выделить в документе отдельные элементы – заголовки, абзацы, таблицы и т.д. Файлы с текстом кода на языке HTML имеют расширение .html или .htm.

HTML является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный файл, с добавленными в него управляющими НТМL-кодами (тегами).

Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки ("<" и ">"). Простейший вариант тега — имя, заключенное в угловые скобки, например <HEAD> или <I>. Для ряда тегов характерно наличие атрибутов (т.е. параметров тега), которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега.

Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:

<TABLE align=center cellpadding=10 cellspacing=2 border=16>

Эта запись означает следующее: таблица шириной 570 пикселов, выровнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пиксела, ширина бордюра 16 пикселов.

Атрибуты тега следуют за именем и отделяются друг от друга пробелами. Порядок записи атрибутов в теге значения не имеет. Атрибут тега состоит из имени, знака равенства и значения – language=“JavaScript”. В тегах могут использоваться только символы латинского алфавита, а в значениях атрибутов – любые символы. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Теги принято писать заглавными буквами, а атрибуты и их значения – прописными (например: <BODY text=black>), это не учитывается программой , но облегчает прочтение кода.

Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив <I> закрывающая пара представляет собой </I>, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Атрибуты прописываются в начальных тегах. Конечные теги никогда не содержат атрибутов. Теги определяют область действия правил интерпретации текстовых документов.

Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным элементам разметки также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например тег <META> В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров устроено так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. Самый распространенный тег такого типа — тег абзаца <Р>. Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий тег <Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тегом конца абзаца не пользуются.

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

Общая схема построения контейнера в формате HTML может быть записана в следующем виде:

"контейнер"= <"имя тега" "список атрибутов"> содержание контейнера </"имя тега">

Гипертекст породил много специальных терминов:

Элемент– конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста – возможность вложения элементов.

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

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

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

Структура Web-страницы

Структура HTML-документа позволяет задействовать вложенные друг в друга контейнеры. Собственно, сам документ — это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>. Он указывает браузеру, что данный текст представляет собой HTML-документ и, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать.

Типичная Интернет-страница состоит из двух частей: головная часть* (HEAD) и тела (BODY). Эту базовую структуру в простейшем виде можно представить следующим образом:

<HTML>	Начало HTML-документа
<HEAD>	Начало головной части
<TITLE>	Начало строки названия страницы
…	Строка названия страницы
</TITLE>	Конец строки названия страницы
</HEAD>	Конец головной части
<BODY>	Начало тела документа
…
</BODY>	Конец тела документа
</HTML>	Конец HTML-документа

<HTML> </HTML>

Элемент является самым внешним, так как между его начальным и конечным тегами должна находится вся страница. Этот элемент можно рассматривать как формальность.

<HEAD> </HEAD>

Область заголовка Wеb-страницы. Служит для формирования общей структуры документа. Должен включать элемент TITLE и допускает вложение элемента META.

<TITLE></TITLE>

Элемент разметки TITLE служит для именования документа в World Wide Web. Более прозаическое его назначение — именование окна браузера, в котором просматривается документ. Наличие конечного тега обязательно.

Синтаксис контейнера TITLE в общем виде выглядит следующим образом:

<TITLE>название документа</TITLE>

Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Web-узла.

Нужно позаботиться о том, чтобы это строка, не будучи слишком длинной, достаточно точно отражала назначение документа. Если тег <TITLE></TITLE> отсутствует, в заголовке браузера выводится реальный адрес и имя просматриваемого html-файла.

<META></META>

Содержит служебную информацию, которая не отражается при просмотре. Внутри нет текста, поэтому он не имеет конечного тега. Этот тег специально рассчитан на программу поискового сервера, индексирующую web-страницы. Секция заголовка может содержать несколько элементов <META>, каждый из которых отвечает за определенный набор параметров.

Может содержать:

срок годности документа;
адрес электронной почты;
имя автора страницы;
набор ключевых слов для поиска;
краткое описание содержания Web-страницы;
Описание типа и характеристик Web-страницы;
Указание приложения, в котором была создана Web-страница;
URL

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

<BODY></BODY>

Это собственно тело документа. Это та произвольная часть документа, которую разрабатывает автор страницы и которая отображается браузером. Конечный тег этого элемента располагается в конце html-кода. В этом элементе могут использоваться все элементы, предназначенные для дизайна web-страницы. Внутри начального тега <BODY> можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком, такие как, цвет фона, фоновую картинку, цвет текста и гиперссылок и т.д.

Создание Web-страницы

Так как все html-документы имеют одинаковую структуру, рекомендуется создать общий шаблон, в котором будут меняться только название (содержимое тега <TITLE>…</TITLE>) и содержательная часть документа (содержимое контейнера <BODY>…</BODY>.

Параметры страницы

Описание тегов тела документа следует начать с тега <ВОDY>. В отличие от тега <НEАD>, тег <BОDY> имеет атрибуты. Они задают параметры, распространяющиеся на весь документ, такие, как цвет фона, шрифта, гиперссылок и размеры полей страницы.

Цвета зависят от настроек браузера. Когда в HTML-программе цвета явно не заданы, браузер использует свои установки по умолчанию. Стандартные цвета Windows – черные буквы на белом фоне. Изменить эти настройки можно установив свои цвета для работы по умолчанию в меню Сервис/Свойства обозревателя/Общие/Цвета.

В теге <BОDY> можно задать свои цветовые параметры документа, используя атрибуты:

bgcolor=цвет фона

tехt=цвет текста

vlink =цвет пройденных гипертекстовых ссылок

link =цвет гипертекстовой ссылки

alink=цвет активной гипертекстовой ссылки

Цвет можно задать просто написав его название на английском языке, или используя RGB-код, который состоит из # и шестизначного кода цвета.

Название	Код	Описание
aqua	#00FFFF	Голубой
black	#000000	Черный
blue	#0000FF	Синий
fuchsia	#FF00FF	Сиреневый
gray	#808080	Серый
green	#008000	Зеленый
lime	#00FF00	Светло-зеленый
maroon	#800000	Коричневый
navy	#000080	Темно-синий
olive	#808000	Оливковый
purple	#800080	Темно-сиреневый
red	#FF0000	Красный
silver	#C0C0C0	Серебряный
teal	#008080	Сизый
white	#FFFFFF	Белый
yellow	#FFFF00	Желный
gold	#FFD700	Золотой
indigo	#4B0080	Индиго
purple	#800080	Пурпурный
orange	#FFA500	Оранжевый
violet	#EE80EE	Фиолетовый

Если в качестве атрибутов тега <ВОDY> указать:

<ВОDY вgcolor=#FFFFFF техт=#0000FF vlink=#FF0000 link=#00FF00>,

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

В теге <BODY> можно задать также поля страницы.

При выводе Web-страницы на экран браузер автоматически оставляет небольшие поля (примерно 10 пикселе) вдоль левого и вдоль верхнего краев рабочего окна. Эти поля автоматически же заполняются указанным для данной страницы фоновым цветом и/или фоновым изображением, но никакие элементы страницы не могут заходить на эти поля. Если же требуется изменить размеры полей или убрать их совсем, нужно включить в тег <BODY> атрибуты leftmargin (размер полей слева) и topmargin (размер полей сверху). В качестве значений для них после знака равенства указывается количество пикселей или нуль, чтобы отменить поля.

Например, тег <ВОDY leftmargin=40> создаст на всей странице левое поле шириной 40 пикселей. При n, равном 0, левое поле отсутствует.

Размещение и форматирование текста

Текст – единственный объект Web-страницы, который не требует специального определения. Иными словами, произвольные символы интерпретируются по молчанию как текстовые данные. Но для форматирования текста существует большое количество элементов: выделение фрагментов курсивом, полужирным, выбирать шрифт и т.д.

Заголовки <Нn>…</Нn>,

Чтобы объявить выбранный абзац заголовком (тем самым задав для него более крупный и жирный шрифт, чем для остального текста), достаточно заключить его в контейнер <Нn>…</Нn>, где n – размер шрифта. В стандарте определено 6 уровней заголовков: от 1 до 6. Текст, окруженный тегами <Н1></Н1>, получается большим — это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 — крайне редко.

Пример:

<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>

На экране браузера будет выглядеть:

Выравнивание заголовков, если не указано, дается по левому краю. Если же нужно задать выравнивание заголовка, необходимо использовать атрибут align (горизонтальное выравнивание, который имеет следующие значения:

align=left – выравнивание по левому краю;

align=right – выравнивание по правому краю;

align=center – выравнивание по центру;

align=justify – выравнивание по ширине.

Предположим, что нам нужно задать подзаголовок и выровнять его по центру:

<H2 align=center>Подзаголовок (H2) по центру</H2>

Абзац <P>…</P>

Элемент абзаца (paragraph) – один из самых полезных, применяется для разделения текста на параграфы. Он позволяет использовать только начальный тег, так как следующий элемент Р обозначает не только начало следующего абзаца, но и конец предыдущего.

Браузер использует для отделения одного абзаца от другого пустую строку.

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

Например:

<P>Текст первого абзаца.

<P>Текст второго абзаца</P>

Текст третьего абзаца. <P>

Браузер выполняет команду<P> следующим образом:

! перед абзацем выводится пустая строка,

! абзац выравнивается по левому краю,

! между словами помещается ровно по одному пробелу, независимо от того, сколько пробелов проставлено в HTML-коде,

! перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда новая строка начинается в HTML-программе.

Вместе с элементом абзаца можно использовать атрибут выравнивания align:

align=left – выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы — на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут аlign=left можно опустить.

align=right – выравнивание по правому краю;

align=center – выравнивание по центру;

align=justify – выравнивание по ширине.

Например, для форматирования абзаца по ширине следует использовать такую конструкцию:

<P align=right>Текст абзаца выровнен по правому краю

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

Обрыв строки <BR>

Элемент обеспечивает принудительный переход на новую строку. Он имеет только начальный тег. Отличие тега <BR> от тега <P> состоит в том, что браузер не создает пустой строки между строками.

Элемент разметки <NOВR>

Тег <NОВR>(Nо Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в теги <NОВR>, не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там тег <ВR>.

Дата добавления: 2018-04-05; просмотров: 420; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 3 Следующая ⇒

Мы поможем в написании ваших работ!