- •Московская финансово-юридическая академия
- •Учебное пособие
- •Современные средства эвм и телекоммуникаций
- •Предисловие
- •Оглавление
- •Тема 1. Общие сведения об Internet
- •1.1. Информационные технологии и общество.
- •1.2. Основные понятия, связанные с передачей данных в Internet.
- •1.3. Компьютерные сети.
- •1.1.2. Internet как глобальная информационная среда.
- •1.1.3. Internet и информационные технологии.
- •1.1.4. История возникновения сети Internet.
- •1.2. Основные понятия, связанные с передачей данных в Internet.
- •1.2.1. Пакеты данных (информационные пакеты).
- •1.2.2. Протоколы.
- •1.2.3. Информационные уровни. Стеки протоколов.
- •1.2.4. Стандартная модель стека протоколов (модель osi).
- •1. Физический уровень.
- •2. Канальный уровень.
- •3. Сетевой уровень.
- •4. Транспортный уровень.
- •5. Сеансовый уровень.
- •6. Уровень представления.
- •7. Прикладной уровень.
- •1.2.5. Упрощенная (трехуровневая) модель стека протоколов.
- •1.2.6. Клиенты и серверы.
- •1.2.8. Протоколы системного уровня. Протокол tcp/ip.
- •1.2.9. Система доменных имен (dns).
- •1.2.10. Определение сети Internet.
- •1.2.11. Прикладной информационный уровень. Прикладные ресурсы.
- •1.2.12. Электронная почта.
- •1.2.13. Структура адреса электронной почты.
- •1.2.14. Электронная почта через Web.
- •1.2.15. Ресурс www.
- •1.2.16. Структура url - адреса.
- •1.3. Компьютерные сети.
- •1.3.1. Классификация компьютерных сетей.
- •1.3.2. Компьютерные коммуникации. Использование телефонных сетей для передачи данных.
- •Тема 2. Работа с броузером.
- •2.1. Начало работы в Internet.
- •Окно броузера содержит ряд кнопок, приведённых в Таблице 2.1. Пример окна броузера показан на Рис. 2.2.
- •2.2. Навигация в Internet.
- •2.3. Поиск в Internet.
- •2.4. Сохранение результатов поиска.
- •2.5. Закладки.
- •Тема 3. Работа с электронной почтой.
- •3.1. Основы электронной почты.
- •3.1.1. Настройка программы для работы с электронной почтой.
- •3.1.2. Работа с программой электронной почты.
- •3.1.3. Создание электронной Web-почты.
- •3.2. Обмен сообщениями.
- •3.2.1. Получение и отправка электронной почты с применением Outlook- Express.
- •3.2.2. Получение и отправка Web-почты.
- •3.3. Работа с адресной книгой.
- •3.3.1.Внесение адреса в адресную книгу электронной почты.
- •3.3.2. Создание сообщения с использованием адресной книги.
- •Тема 4. Создание html-документов
- •4.1. Элементы языка html.
- •4.1.1. Html-документы и Web-страницы.
- •4.1.2. Структура языка html.
- •4.1.3. Форматирование текста.
- •4.1.4 Анимация текста
- •4.1.5. Вставка рисунков.
- •4.1.6. Вставка гиперссылок.
- •4.1.7. Рисунки -гиперссылки.
- •4.1.8. Списки.
- •4.1.8. Таблицы.
- •4.1.9. Фреймовые структуры.
- •4.2. Публикация и использование Web-страниц.
- •4.2.1. Компоновка сайта.
- •Персональная
- •Ссылки Страница 1
- •4.2.2. Размещение сайта на сервере.
- •4.2.3. Регистрация сайта в поисковых системах и каталогах.
- •4.2.4. Коммерческое использование Web-страниц.
- •4.2.5. Баннеры и баннерная реклама.
- •4.2.6. Электронная коммерция.
- •4.2.7. Электронный документооборот.
- •4.2.8. Электронная подпись.
- •4.2.9. Электронные деньги.
- •Вопросы по теме 1.
- •Какие модемы называются звуковыми ?
- •Вопросы по теме 2.
- •Вопросы по теме 3.
- •Вопросы по теме 4.
- •Основные термины
- •Учебная литература.
4.1.3. Форматирование текста.
В HTMLпредусмотрено 6 стандартных размеров шрифта для оформления заголовков. Они устанавливаются при помощи тегов:
<H1>Заголовок стиля 1</H1>;
<H2>Заголовок стиля 2</H2>;
<H3>Заголовок стиля 3</H3>;
<H4>Заголовок стиля 3</H4>;
<H5>Заголовок стиля 3</H5>;
<H6>Заголовок стиля 6</H6>.
Пример 1.
<HTML>
<HEAD>
<TITLE>
Первый пример простого документа на языке гипертекстовой разметки
</TITLE>
</HEAD>
<BODY>
Стили форматирования в HTML
<H1>Стиль заголовка первого уровня. Самый крупный и тяжёлый
</H1>
<H2>Стиль заголовка второго уровня с меньшими размерами и толщиной шрифта
</H2>
<H3>Стиль заголовка третьего уровня ещё меньше
</H3>
<H4> Стиль заголовка четвёртого уровня
</H4>
<H5> Стиль заголовка пятого уровня
</H5>
<H6> Стиль заголовка шестого уровня. Самый маленький и светлый из базовых шрифтов
</H6>
<P>Тег для выделения абзаца. Его можно использовать без завершающего тега, так как новый тег Р по смыслу означает не только начало, но и конец предыдущего абзаца. Грамотно с точки зрения языкаHTMLи удобно для броузера завершать абзац закрывающим тегом
</P>
</BODY>
</HTML>
Для форматирования абзаца используются теги <P> - создание нового абзаца и <Br> - код пропуска строки или большой отступ.
Для выравнивания, видоизменения и выделения текста используются теги <P>с атрибутами ALIGN. Теги <P ALIGN="right"> . . </P> выполняют выравнивание по правому краю. При задании выравнивания по правому краю концы строк находятся на одном уровне, а начало на разных.
При задании выравнивания по левому краю с помощью тегов<PALIGN="left"> . . </P> начальные элементы строк находятся на одном уровне, а концы на разных. Этот вид выравнивания часто используется при написании эпиграфов или просто для оригинальности.
Теги < P ALIGN="center"> . . </P> выполняют выранивание по центру.
Форматирование шрифта выполняют теги: <B> </B> - жирный текст; <I> </I> - курсив;<U> </U> - подчеркнутый текст.
Вид шрифта - очень важная часть дизайна Web-страниц. Он позволяет придавать тексту определенную выразительность, эмоциональность. Строгие шрифты показывают важность текста, его официальность. Рукописные шрифты придают тексту некоторую красоту, поэтичность и т.д. Существует огромное множество шрифтов, но HTML сейчас только начинает развиваться в области использования шрифтов. В классической версии языка HTML 3.0 эта проблема решена единственным образом - доступны шрифты, установленные в системе пользователя с помощью атрибута FACE= в теге FONT. Сейчас появляются новые технологии. Например, загрузка шрифтов из Интернета или встраивание шрифтов непосредственно в документ. Ещё одной новаторской идеей в этой области является использование графических литер с определенным начертанием вместо текста. После загрузки 2-3 листов, написанных таким методом, почти все буквы оказываются загруженными в кеш броузера, и открытие последующих страниц происходит очень быстро.
Для задания размера шрифта используется атрибут SIZE= в теге FONT. Можно задавать базовый размер шрифта тегом <BASEFONT SIZE=x> для использования на всей странице, а в нужных участках текста использовать атрибут SIZE= для задания размера определенного участка. По умолчанию используется тег <BASEFONT SIZE=3>. Заголовок <H1> имеет размер 6. Чтобы сделать шрифт больше, чем <H1>, можно выбрать размер шрифта, равный 7. Основное отличие тега <FONT> от <Hx> заключается в том, что он не разбивает строку. В HTML можно использовать вышеуказанный список шрифтов в теге <FONT>. Можно перечислить в этом списке несколько шрифтов, из которых броузер выберет первый, установленный в системе, и использует его для отображения текста. Например <FONT FACE=" Arial, COMIC SANS MS, Tahoma, AG_Cooper"> текст</FONT>.
Размеры символов (1,3,5,7) в тексте указываются тегами:
<FONT SIZE="1">, < FONT SIZE="3">, < FONT SIZE="5">, < FONT SIZE="7">. Поместив текст между каким-либо из этих тегов и закрывающим тегом </FONT> получим шрифт нужного размера.
Вид шрифта в тексте:
<FONT FACE="Times New Roman">ABC</FONT>.
<FONT FACE="System">DEF</FONT>.
<FONT FACE="Arial">GHI</FONT>.
<FONT FACE="Courier">xyz</FONT> .
Для задания размера текста существуют и другие теги. Это теги <BIG> </BIG> и <SMALL> </SMALL>. Заключенный между ними текст будет соответственно больше или меньше окружающего текста.
Можно использовать все виды красок на странице, применяя тег <FONT> с атрибутом COLOR=.
Цвета текста в документе задаются в кодировке RGB - шестью шестнадцатеричными числами или именованными цветами, например:
<FONTCOLOR="#FF0000"> Красный текст</FONT>.
< FONTCOLOR="#CF2CD4">Лиловый текст</FONT>
<FONT COLOR ="#0000FF"> Синий текст </FONT>
< FONT COLOR="#00FF00"> Зелёный текст</FONT>
<FONT COLOR="#808080"> Серый текст</FONT>
<FONT COLOR="silver"> Серебряный текст </FONT>
<FONTCOLOR="green"SIZE="4"> Зелёный текст с размерами шрифта 4.</FONT>
Наименования цветов приведены в Таблице 4.1.
Атрибуты тега <BODY> для задания цвета фона документа -BGCOLOR; цвета текста -TEXT; цвета ссылок - LINK; цвета просмотренных ссылок – VLINK; ссылок в момент нажатия на них правой кнопкой – ALINK. Цвета текста, ссылок и фона задаются в кодировке RGB - шестью шестнадцатеричными числами или именованными цветами, например:
<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " LINK="# FF0000 " VLINK="# CF2CD4 " ALINK="# C033FF ">
С помощью атрибута BACKGROUND тега <BODY> можно вставить небольшие рисунки (размножаемые Web-броузером) в формате gif (файл - background.gif) или jpg (файл - background.jpg), т.е. создать графический фон:
<BODY BACKGROUND="background.gif"> - размноженный рисунок возникает на заднем плане.
Для наилучшего усвоения информации используют различные способы выделения абзацев. Тег списка <DL> (DefinitionList) позволяет создавать списки определений, т.е. отдельные абзацы с отступом без нумерации или маркеров. В конце определения необходимо поместить закрывающий тег </DL>. Списки состоят из двух частей: определения (DT) и описания (DD). Атрибут title показывает текст в виде всплывающей подсказки.
Таблица 4.1.
|
Именованные |
цвета |
|
black |
|
|
Maroon |
|
|
Green |
|
|
Olive |
|
|
Navy |
|
|
Purple |
|
|
Teal |
|
|
Gray |
|
|
Silver |
|
|
Red |
|
|
Lime |
|
|
Yellow |
|
|
Blue |
|
|
Fuchsia |
|
|
Aqua |
|
|
White |
|
Пример 2.
<HTML>
<BODY>
<DLtitle= «это список»>
<DT>HTML
<DD>Это язык разметки гипертекста
<DT>Броузер
<DD> Это программа для просмотра гипертекста в интернете
</DL>
</BODY>
</HTML>
В результате такого форматирования получим определения следующего вида.
HTML
Это язык разметки гипертекста
Броузер
Это программа для просмотра гипертекста в интернете
Тег <BLOCKQUOTE> создает поля слева и справа от текста.
Атрибуты LEFTMARGIN=n, RIGHTMARGIN=n, TOPMARGIN=n, где n - ширина поля в пикселях, указываются в теге <BODY> для задания левого, правого и верхнего полей для всей страницы.
Теги <PRE> и </PRE> используются для отображения текста точно так, как он записан в HTML (заранее отформатированного текста).
Теги <MULTICOL> и </MULTICOL> выводят текст в несколько колонок (используются только для броузера Netscape 3.0 и выше).
Они имеют следующий полный формат: <MULTICOL COLS="x" GUTTER="у"> текст </MULTICOL>, где x - количество столбцов, у - расстояние между столбцами.
Размещение текста в одну строку с добавлением в нижней части окна горизонтальной полосы прокрутки выполняется следующим образом
поместить текст между тегами <NOBR>;
если надо оборвать строку в определенном месте, - поставить там тег <BR>;
если надо задать места переноса текста - поставить там тег <WBR>.
Для задания отступа перед новым абзацем используется тег <TAB INDENT=n>, где n - число так называемых n-пробелов.
Установка пяти подряд расположенных пробелов между буквами А и Я с применением символа неразрушающего пробела -  :
А Я
Для создания линий используется тег <HR> с атрибутами SIZE=, WIDTH=, ALIGN=, задающими соответственно высоты в пикселях, ширины в пикселах или в процентах от размера окна и выравнивание. Дополнительный атрибут NOSHADE создает линию без рельефности. С помощью этих атрибутов можно создавать очень разнообразные размещения текста. Например, тег <HRNOSHADESIZE=30WIDTH="30%"ALIGN=LEFT> создаёт толстую линию на треть страницы, расположенную слева.