Размещение и форматирование текста
Занятие 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; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!