Разработка электронного портала (2011), страница 3
Описание файла
PDF-файл из архива "Разработка электронного портала (2011)", который расположен в категории "". Всё это находится в предмете "информатика" из 1 семестр, которые можно найти в файловом архиве НИУ «МЭИ» . Не смотря на прямую связь этого архива с НИУ «МЭИ» , его также можно найти и в других разделах. .
Просмотр PDF-файла онлайн
Текст 3 страницы из PDF
Подготовка страницы в текстовомредакторе типа MS Word не допускается, т.к. он вставляет в тест свои специальные коды,которые браузер отобразит некорректно.Браузер пропускает «лишние» пробелы (из последовательности пробелов останетсяодин) и символы перевода строки.<HTML><HEAD><TITLE>Заголовок</TITLE></HEAD><BODY>Некоторыйтекст</BODY></HTML>Рисунок 2.1.Для создания нового абзаца используется тег-контейнер <P>.<HTML><HEAD><TITLE>Заголовок</TITLE></HEAD><BODY>Абзац 1Абзац 2<P>Абзац 3</P></BODY></HTML>Рисунок 2.2.Отметим, что первые два абзаца, несмотря на написание в текстовом редакторе наразных строках, отобразились браузером на одной строке. Абзац 3 расположился наследующей строке благодаря тегу <P>.
Тэг </P> завершает абзац.Однако не всегда удобно таким образом начинать новый абзац, т.к. браузер,встречая тег <P>, пропускает одну строку. Чтобы перейти на новую строку бездополнительной пустой строки используется тег <BR> (от brake). Этот тег не являетсяконтейнером, поэтому не требует закрывающего тега.Язык HTML позволяет вставлять комментарии в текст следующим образом:<!-закомментированный текст-->Форматирование текстаСтилиСуществует четыре основных стиля, которыми HTML предлагает форматироватьтекст. Полужирный, курсив, подчеркнутый и моноширинный.
В таблице представленытеги, позволяющие изменить стиль шрифта.Таблица 2.1.СтильТеготкрывающий закрывающийАльтернативаПолужирный (Bold)<B></B><STRONG>Курсив (Italic)<I></I><EM>, <CITE>,<ADRES>Подчеркнутый (Underline)<U></U>Моноширинный<TT></TT><CODE>, <KB>(TrueType)Подчеркнутый текст, однако, похож на ссылку, поэтому не всегда уместно егоиспользование.Моноширинный шрифт – это шрифт, в котором каждый символ имеет одинаковуюширину.
Часто его называют машинописным шрифтом или шрифтом пишущей машинки.HTML позволяет комбинировать стили. Например, полужирный курсивный текствыделяется следующим образом:<B><I>Полужирный курсивный текст</I></B>Специальные символыС клавиатуры можно вводить только определенные символы. Чтобы использоватьна странице нестандартные символы, в HTML применяются специальные коды, которыеназываются символьными объектами.
Символьные объекты задаются в двух форматах: ввиде ссылки на символ и в виде имени объекта. Ссылка на символ представляет собойнекоторое число, а имя объекта – мнемоническое обозначение символа.Например, знак copyright (©) можно представить в виде кода - © - или в видеимени объекта - ©.Ссылка на символ и имя объекта, всегда начинаются со знака амперсанда (&) изаканчиваются точкой с запятой (;).Приведем таблицу наиболее популярных символов.Таблица 2.2.СимволСсылка на символИмя объекта<<<>>>Неразрывный пробел £££©©©®®®°°°÷¼¼…¾¾×××Обратим внимание на символ «неразрывный пробел».
Как описывалось выше,браузер пропускает лишние пробелы и переходы на новую строку. Напомним, что абзацыформируются при помощи тега <P>, а нужное количество пробелов можно вставить припомощи символа неразрывного пробела. Также при помощи этого символа можновыравнивать изображения.Пример: Абзац с отступом в три пробела.ЗаголовкиДля разделения страницы на разделы используются заголовки. В HTMLпредусмотрено шесть типов готовых заголовков, каждый из которых отображает текстполужирным шрифтом различного размера. Это теги от <H1> с самым большим шрифтом,до <H6> с наименьшим размером шрифта.Т.е. название книги можно вывести заголовком <H1>, название главы - <H2>,параграфа - <H3> и т.д.Приведем пример:<HTML><HEAD><TITLE>Пример заголовков</TITLE></HEAD><BODY><H1>Учебное пособие</H1><H2>Глава 1.
Основы HTML</H2><H3>Параграф 1. Базовые теги</H3></BODY></HTML>Рисунок 2.3.ВыравниваниеВыравнивание абзацев осуществляется при помощи атрибута ALIGN, которыйможет принимать три значения: LEFT, CENTER, RIGHT. Этот атрибут можноиспользовать в теге <P> или других тегах.Пример: <P ALIGN=right>Подпись</P>.Также существует способ выровнять текст, графику или заголовки по центру припомощи тега <CENTER>.Пример: <CENTER>Учебное пособие</CENTER>.Также для форматирования текста можно использовать тег-контейнер <PRE>(preformatted – предварительно отформатированный), который позволяет отображатьтекст в том виде, в котором он задан в текстовом редакторе, т.е.
браузер не будетпропускать «лишние» пробелы и переходы на новую строку.Приведем пример:<H4>Текст без <PRE></H4>Здесьразмещенпредварительноотформатированныйтекст<H4>Текст c <PRE></H4><PRE>Здесьразмещенпредварительноотформатированныйтекст</PRE>Рисунок 2.4.Отметим, что предварительно отформатированный текст отображается браузероммоношириннымшрифтом.Длязаданиядругихшрифтоввпредварительноотформатированном тексте используются таблицы стилей, которые будут рассмотреныниже.ЛинииДля вставки на странице горизонтальной линии используется тег <HR> (horizontalrule). У этого тега существует несколько атрибутов, которые описаны в таблице 2.3.Таблица 2.3.АтрибутОписаниеWIDTH=”x”Задает ширину лини в пикселяхWIDTH=”y%”Задает ширину линии в процентном содержании от ширины экранаSIZE=”n”Задает толщину линии в n пикселей (по умолчанию толщина линииравна 1 пикселю)ALIGN=”LEFT”Выравнивает линию по левому краюALIGN=”CENTER”Выравнивает линию по центруALIGN=”RIGHT”Выравнивает линию по правому краюNOSHADEОтображает толстую линиюВ одном теге <HR> можно комбинировать несколько атрибутов, например:<HR WIDTH=70% ALIGN=center>Изменение шрифтаДля изменения размера и гарнитуры шрифта используется тег-контейнер <FONT>.Значение его атрибута SIZE будет определять размер шрифта для текста,расположенного внутри этого тега.
Его размер может меняться в интервале от 1 до 7. Чембольше значение, тем крупнее шрифт.Пример: <FONT SIZE=4> Текст, с измененным шрифтом</FONT>Кроме того, можно изменить размер шрифта, используемого по умолчанию. Дляэтого используется тег <BASEFONT>. Например: <BASEFONT SIZE=5>. Этот тегвставляется в начале страницы, сразу после тега <BODY>.Кроме этого тег <BASEFONT> позволяет при помощи тега <FONT> задаватьотносительный размер шрифта.Пример:<BASEFONT SIZE=5><FONT SIZE=”-2”>Шрифт текста равен 3</FONT><FONT SIZE=”+2”>Шрифт текста равен 7</FONT>Подобная схема очень удобна для настройки нужного размера текста, чтобы неизменять размер во многих местах.Чтобы изменить гарнитуру шрифта используется атрибут FACE.
Его значениембудет название нужной гарнитуры.Пример: <FONT FACE=”Courier New”>Гарнитура Courier New</FONT>Если в качестве значения атрибута перечислено несколько гарнитур, то браузербудет пытаться использовать следующую по приоритету гарнитуру, если предыдущая неустановлена на компьютере.<FONT FACE=”Courier New, Arial, Verdana”>ЦветВобщемслучаецветзадаетсяшестизначнымцифровымкодомвшестнадцатиричной системе счисления: RRGGBB, где RR означает красную часть цвета(red), GG – зеленую (green) и BB – голубую (blue).
Такие коды называются «значениямиRGB». Некоторые цвета уже имеют стандартные названия, которые можно использоватьвместо кода. Поскольку коды написаны в шестнадцатиричной системе, поэтому счет идетсначала от 0 до 9, а затем от A до F. Соответственно, чем меньше какой-либо из трехсоставляющий в цвете, тем меньше будет его значение. Поэтому «00» в значении означаетполное отсутствие в данном цвете этого компонента.Приведем таблицу с некоторыми наиболее популярными цветами:Таблица 2.4.КодНазвание цвета#000000Черный#FFFFFFБелый#FF0000Красный#00FF00Зеленый#0000FFСиний#FF00FFФуксия#00FFFFГолубой#FFFF00ЖелтыйПримерами названий цветов являются: blue, red, navy, olive и т. д.Изменение цвета текстаЧтобы изменить цвет текста для всей страницы необходимо добавить атрибутTEXT к тегу BODY, где значением будет название цвета или код RGB.Пример: <BODY TEXT=”grey”>.Для изменения цвета ссылок используется атрибут LINK, VLINK и ALINK того жетега <BODY>.
Значение атрибута LINK определяет цвет для новых ссылок, VLINK - ужепосещенных ссылок, а ALINK – цвет ссылки, по которой уже кликнули, носоответствующая ей страница еще не открылась.Пример: <BODY LINK=”red” VLINK=”blue” ALINK=”green”>.Кроме того, можно использовать атрибут COLOR в теге <FONT>. В этом случаецвет будет применяться только к тесту, заключенному в этом теге.Пример: <FONT COLOR=”navy”>.Изменение цвета фонаЧтобы изменить цвет фона страницы (по умолчанию он белый), используетсяатрибут BGCOLOR тега <BODY>. Значением атрибута будет код RGB, либо названиецвета.Пример: <BODY BGCOLOR=”yellow”>.Тема 4.
Работа со списками, ссылками, изображениямиСпискиВ языке HTML предусмотрено три типа списков – нумерованные, маркированные исписок определений.Нумерованные списки создаются при помощи тега-контейнера <OL> (ordered list –упорядоченный список), в котором каждый пункт списка заключен в контейнер <LI>.Нумерованный список можно сделать нескольких видов, где меняться будет типнумерации.
