- •Современные средства эвм и телекоммуникаций
- •Тема 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.8. Списки
Заголовок списка создаётся тегом <LH>, за которым следует текст.
Теги <LI> и </LI>обозначают элемент списка.
Для создания ненумерованного списка используется тег <OL TYPE=x>. Значение х определяет вид значка маркера. Возможно задание значка маркера одним из трех стандартных видов:
<UL TYPE=DISC>
<LI>Первая строка
<LI>Вторая строка
</UL>
<UL TYPE=CIRCLE>
<LI> Первая строка
<LI>Вторая строка
</UL>
<UL TYPE=SQUARE>
<LI> Первая строка
<LI>Вторая строка
</UL>
<PLAIN> - атрибут для создания ненумерованного списка без маркера.
Задание значка маркера допускается в виде любой картинки:
<UL SRC=картинка с изображением маркера >
<LI> Первая строка
<LI>Вторая строка
</UL>
Этот атрибут можно задавать в теге <UL>, определив сразу все маркеры списка, а можно использовать разные файлы с расширением gif для разных пунктов списка, помещая атрибут SRC= в каждом теге <LI>. Для использования этого атрибута нужно задать атрибут PLAIN=.
Для создания нумерованного списка используется тег <OL TYPE=x>. Значение х = 1, если требуется создать список с нумерацией в виде последовательности арабских цифр, т.е. в формате 1,2,3,4.… Значение х = А создает список вида А,В,С,D.… Значение х = а - список вида а,b,c,d.… Значение х = I - список вида I, II, III, IV…. Значение х = i - список вида i, ii, iii, .…Таким образом, для получения нумерованного списка необходимо написать последовательность тегов:
<OL TYPE=1>
<LI><FONT SIZE="4">Первая строка </FONT></LI>
<LI>< FONT SIZE="4">Вторая строка </FONT></LI>
</OL>
<OL TYPE=A>
<LI><FONT SIZE="4">Первая строка </FONT></LI>
<LI><FONT SIZE="4">Вторая строка </FONT></LI>
</OL>
<OL TYPE=a>
<LI><FONT SIZE="4">Первая строка </FONT></LI>
<LI><FONT SIZE="4">Вторая строка </FONT></LI>
</OL>
Для смены порядка нумерации используются атрибуты SKIP=, START= и VALUE= в теге <LI> или <OL>.
Атрибут SKIP= пропускает заданное число пунктов нумерации.
START= используется для указания места, с которого в заданном типе нумерации (числа, буквы, римские цифры) следует начать нумеровать список.
Атрибут VALUE= присваивает определенный номер данному пункту нумерованного списка. После задания этого атрибута последующие пункты будут нумероваться, начиная с заданного в этом атрибуте номера. Например:
<OL TYPE="1" SKIP=2>
<LI>Первая строка </LI>
<LI>Вторая строка </LI>
<LI>3-я строка </LI>
<LI>4-я строка </LI>
</OL>
Если на странице мало места под списки, то удобно использовать атрибут COMPACT=. Он показывает списки в сжатом виде за счет уменьшения межстрочных интервалов, использования меньшего размера шрифта и других методов.
Пример 4.
<HTML>
<HEAD>
<TITLE>
Списки
</TITLE>
</HEAD>
<BODY>
<P>
<H1>Посмотрим, как выглядит упорядоченный список</H1>
<P>
<H2>Каждое утро я кладу в свой портфель:</H2><Br>
<OL TYPE=1 START=1>
<LI>Тетради
<LI>Книги
<LI>Карандаши
<LI>Ручку
<LI>Линейку
<LI>Пакет с завтраком
<LI>Кошелёк
</OL>
</BODY>
</HTML>
4.1.9. Таблицы
На данном этапе развития методов форматирования Web-страниц таблицы являются мощнейшим средством компоновки контента. Края таблицы могут быть невидимыми, тогда пользователь даже не понимает, что использованы таблицы.
Для создания таблицы используются теги <TABLE> и </TABLE>. Между этими тегами располагаются теги <TR> и </TR>. Они окружают каждую строку таблицы. Если необходимо создать несколько строк в таблице, используется столько же тегов <TR> и </TR>. В каждой строке таблицы обычно отображаются ячейки. Каждая ячейка должна быть окружена тегами <TD> и </TD>. Количество этих тегов в строке определяет количество ячеек. Число ячеек в строках не обязательно должно быть одинаковым.
Для создания заголовков столбцов и строк вместо простой строки, создается заголовок и текст его размещается между тегами <TH> и </TH>. Этот текст будет отображен жирным шрифтом и отцентрирован. Разрешается применить некоторые атрибуты.
Атрибут NOWRAP. Он используется в тегах <TH> и </TH> или <TD> и </TD> для того, что бы текст помещался в одной строке (ячейка при этом расширяется).
Атрибут COLSPAN=x. Если какая-нибудь ячейка должна быть шире вышерасположенных или нижерасположенных, то используется этот тег. Величина х указывает количество объединяемых горизонтальных ячеек.
Атрибут ROWSPAN=x. Этот атрибут аналогичен предыдущему, только он объединяет x вертикальных ячеек.
Атрибут WIDTH=x. Этот атрибут определяет ширину таблицы, если он задан в теге <TABLE>, ширину группы ячеек или ширину отдельной ячейки, если указан в тегах <TR> и </TR> или <TH> и </TH>. Величина х указывает ширину в пикселях или в процентах. Оптимальным значением является WIDTH=50%.
Атрибут UNIT=. Он применяется в теге <TABLE> для определения единицы измерения размеров в таблице. Атрибут принимает следующие значения:
UNIT=EN - в en-пробелах,
UNIT=RELATIVE - относительные значения в процентах от общей ширины таблицы,
UNIT=PIXELS - в пикселях, например <TABLE UNIT=PIXELS WIDTH=200> создает таблицу шириной в 200 пикселей.
Атрибут COLSPEC=. Используется с атрибутом UNIT=. Он определяет, сколько места занимает каждый столбец таблицы и тип выравнивания данных. Применяется только в теге <TABLE>. В атрибуте COLSPEC= перечисляются все столбцы. Для каждого задаётся выравнивание одним из пяти типов: L - по левому краю, С - по центру, R - по правому краю, J - по правому и левому краю, D - по десятичной запятой. Размер задаётся в пикселях. Например, тег <TABLE UNIT=PIXELS COLSPEC="L10 C20 R10"> определяет таблицу, в которой первая ячейка имеет ширину в 10 пикселей и выравнивание по левому краю, вторая - 20 пикселей и выравнивание по центру, третья - 10 пикселей, выравнивание по правому краю.
Атрибут DP=. Определяет символ, используемый для отделения целой части десятичной дроби. По умолчанию используется тег DP=".", определяющий в качестве разделителя точку. Атрибут DP="," задает запятую.
Атрибут CELLPADDING=x. Определяет поле вокруг содержимого ячейки. Величина х задает число пикселей.
Атрибут ALIGN=. Используется в тегах <TR>, <TD>, <TH>. Он определяет выравнивание содержимого по горизонтали. Значения атрибута могут быть следующими:
ALIGN=LEFT - выравнивает содержимое ячейки по левому краю,
ALIGN=CENTER - по центру,
ALIGN=RIGHT - по правому краю,
ALIGN=BLEEDLEFT - предыдущие значения учитывали отступ, заданный атрибутом CELLPADDING. При задании этого атрибута содержимое ячейки прижимается вплотную к левому краю.
Атрибут VALIGN=. Сходен с предыдущим, но задает выравнивание по вертикали. Значения:
VALIGN=TOP - выравнивание содержимого по верхней границе,
VALIGN=MIDDLE - центрирует по вертикали,
VALIGN=BOTTOM - выравнивает по нижней границе.
Для создания заголовков таблицы существует тег <CAPTION>. Заголовок может быть над таблицей (<CAPTION ALIGN=TOP>), или под таблицей (<CAPTION ALIGN=BOTTOM>). Заголовком может быть текст или графика. Этот тег хорош для создания подписей под рисунками, заключенными в таблицу без границ.
Основной частью таблицы являются границы ячеек. Для управления толщиной границ используется атрибут BORDER=x. Можно сделать таблицу вообще без границ, задав атрибут в теге <TABLE BORDER=0>. Читатель страницы даже не будет знать, как получена такая точная компоновка содержимого. Напротив, толстые границы привлекают внимание к таблице. Можно задать красивую толстую рамку вокруг картинки, она будет похожа на настоящую рамку.
Для задания толщины промежутков между ячейками используется атрибут CELLSPACING=x. По умолчанию x=2 пикселям. Этот атрибут хорошо использовать вместе с атрибутом BORDER= для задания красивых рамок вокруг изображений.
С помощью таблиц можно сделать красивые выпуклые панели с графикой или текстом.
Пример 5.
<HTML>
<HEAD>
<TITLE>
Простая таблица
</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<CAPTION ALIGN=CENTER>Мои друзья</ CAPTION>
<TR>
<TH>Имя</TH>
<TH>Год рождения</TH>
<TH>Курс</TH>
</TR>
<TR>
<TD>Ольга</TD>
<TD>1980</TD>
<TD>5</TD>
</TR>
<TR>
<TD>Марина</TD>
<TD>1982</TD>
<TD>3</TD>
</TR>
<TR>
<TD>Игорь</TD>
<TD>1982</TD>
<TD>4</TD>
</TR>
</TABLE>
</BODY>
</HTML>