- •Современные средства эвм и телекоммуникаций
- •Тема 1. Общие сведения об Internet
- •1.1.1. Понятие "информационное общество"
- •1.1.2. 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.3 Компьютерные вирусы
- •Тема 2. Работа с браузером
- •2.1. Начало работы в Internet
- •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.9. Таблицы
- •4.1.10. Фреймовые структуры
- •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. Электронные деньги.
- •Тема 5. Интернет и общество
- •5.1 Социальные сети
- •5.2 Услуги социальных сетей
- •Вопросы для самоконтроля Вопросы по теме 1
- •Вопросы по теме 2.
- •Вопросы по теме 3.
- •Вопросы по теме 4.
- •Вопросы по теме 5.
- •Список терминов
- •Список литературы
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> выполняют выравнивание по правому краю. При задании выравнивания по правому краю концы строк находятся на одном уровне, а начальные символы строк - на разных уровнях.
При задании выравнивания по левому краю с помощью тегов<P ALIGN="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>. Заключенный между ними текст будет соответственно больше или меньше окружающего текста.
Можно использовать все виды красок на странице, задавая цвет в атрибуте COLOR= тега <FONT>.
Цвета текста в документе задаются в кодировке RGB - шестью шестнадцатеричными числами или именованными цветами, например:
<FONT COLOR="#FF0000"> Красный текст</FONT>.
< FONT COLOR ="#CF2CD4">Лиловый текст</FONT>
<FONT COLOR ="#0000FF"> Синий текст </FONT>
< FONT COLOR="#00FF00"> Зелёный текст</FONT>
<FONT COLOR="#808080"> Серый текст</FONT>
<FONT COLOR="silver"> Серебряный текст </FONT>
<FONT COLOR="green" SIZE="4"> Зелёный текст с размером шрифта 4. </FONT>
Наименования цветов приведены в Таблице 4.1.
Атрибуты тега <BODY> для задания цвета фона документа - BGCOLOR; цвета текста - TEXT; цвета ссылок - LINK; атрибутом COLOR= просмотренных ссылок – 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> (Definition List) позволяет создавать списки определений, т.е. отдельные абзацы с отступом без нумерации или маркеров. В конце определения необходимо поместить закрывающий тег </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>
<DL title = «это список»>
<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 создает линию без рельефности. С помощью этих атрибутов можно создавать очень разнообразные размещения текста. Например, тег <HR NOSHADE SIZE=30 WIDTH="30%" ALIGN=LEFT> создаёт толстую линию на треть страницы, расположенную слева.