42241

Вставка изображений, списков и гипертекстовых ссылок в Web-страницы

Лабораторная работа

Информатика, кибернетика и программирование

Адресатом ссылки может быть: начало какоголибо раздела данного документа HTML другой документ HTML изображение звуковой клип видеоклип программа и т. Атрибут nme и id используется для создания внутренних ссылок меток или якорей в документе к разделам документа таблицам рисункам терминам и т. например: nme= P01 Раздел 1.1 Тот же пример с использованием атрибута id рекомендуется использовать именно этот атрибут: id= P01 Раздел 1.

Русский

2013-10-28

432.5 KB

1 чел.

 17 -

Лабораторная Шонин В.А. работа 2-05

Вставка изображений, списков и гипертекстовых ссылок в Web-страницы 

1. Цель работы

Целью работы является знакомство элементами и стилями для вставки изображений и гипертекстовых ссылок в Web-страницы.

2. Состав рабочего места

2.1. Оборудование: IBM-совместимый   персональный компьютер (ПК).

2.2. Программное обеспечение: операционная система Windows, Web-браузер Internet Explorer версии 6.0 и выше.

3. Краткие теоретические сведения

3.1. Модуль Image

Для вставки изображений в Web-страницу используется модуль Image, который содержит одиночный элемент <img>.

3.1.1. Основные атрибуты элемента <img>

Помимо общих атрибутов class, dir, id, lang, style и title, для элемента <img> можно задать основные атрибуты, приведенные в табл. 5.1.

Таблица 5.1. Основные атрибуты элемента <img>

Имя атрибута

Что определяет

Значение по умолчанию

align

Вертикальное или горизонтальное выравнивание изображения (рекомендуется вместо этого атрибута использовать свойства float и vertical-align).

bottom

alt

Текст, выводимый вместо изображения, если вывод графики в Web-браузере отключен или недоступен (в Internet Explorer, кроме того, действует аналогично атрибуту title).

ничего не выводится

border

Рамку вокруг изображения с заданной толщиной (в пикселях).

0

height

Высоту изображения (в пикселях).

берется из характеристик изображения

hspace

Пустое пространство справа и слева от изображения (в пикселях).

0

ismap

Указатель на карту-изображение с обработкой на сервере (атрибут задается по имени, без значения).

нет

name

Имя изображения.

нет

src

Местонахождение (URL) графического файла (обязательный атрибут).

нет

usemap

Определение внутренней ссылки на имя карты ссылок (атрибут name в элементе <map>).

нет

vspace

Пустое пространство сверху и снизу от изображения (в пикселях).

0

width

Ширину изображения (в пикселях).

берется из характеристик изображения

Вставляемое изображение имеет определенный размер по вертикали и горизонтали в пикселях. Если атрибуты width и height в элементе <img> не заданы, то изображение будет выведено в масштабе 1:1. Если значения width и height отличаются от размеров изображения, то изображение будет увеличено или уменьшено по горизонтали и/или по вертикали. При этом, если ширина и высота были изменены непропорционально, изображение будет искажено.

3.1.2. Свойства, используемые в элементе <img> 

3.1.2.1. Свойство float

Свойство float элемента задает принудительное выравнивание элемента страницы относительно родителя. Это свойство может иметь одно из значений, представленных в табл. 5.2.

Таблица 5.2. Допустимые значения свойства float

Значение свойства

float 

Что задает

inherit

Наследование значения свойства от родительского элемента.

left

Принудительное выравнивание элемента страницы  по левому краю.  

none

Появление элемента страницы там, где он задан (значение по умолчанию).

right

Принудительное выравнивание элемента страницы  по правому краю.  

3.1.2.2. Свойство vertical-align

Свойство vertical-align определяет вертикальное выравнивание элемента (в том числе и изображения) относительно родительского блока.  Возможные значения этого представлены в табл. 5.3.

Таблица 5.3. Допустимые значения свойства vertical-align

Значение свойства

vertical-align

Что задает

baseline

Выравнивание базисной линий блока относительно базисной линии его родительского блока (значение по умолчанию).

inherit

Наследование значения свойства от родительского элемента.

middle

Выравнивание блока посередине относительно его родительского блока.

sub

Смещение базовой линии блока вниз до уровня, отведенного для нижних индексов.  

super

Смещение базовой линии блока вверх до уровня, отведенного для верхних индексов.

text-top

Выравнивание верхней границы блока относительно верхней кромки шрифта родительского элемента.

text-bottom

Выравнивание нижней границы блока относительно нижней кромки шрифта родительского элемента.

число

Смещение блока на заданную величину вверх (положительное число) или вниз (отрицательное число).  

процент

Смещение блока на заданный процент вверх (положительное значение) или вниз (отрицательное значение).

3.1.2.1. Свойство clear

Если в Web-странице используется обтекание изображения текстом, то имеется возможность в правиле для селектора <br> задать свойство clear. Допустимые знаяения для этого свойства представлены в табл. 5.4.

Таблица 5.4. Допустимые значения свойства clear

Значение свойства

clear 

Что задает

both

Помещение генерируемого блока ниже всех перемещаемых блоков, которые были сгенерированы в исходном документе предыдущими элементами.

left

Увеличение верхнего поля генерируемого блока до тех пор, пока верхний сегмент края его границы не окажется ниже нижнего сегмента внешнего края любого левостороннего перемещаемого блока, который был сгенерирован в исходном документе предыдущим элементом.  

inherit

Наследование значения свойства от родительского элемента.

none

Отмену ограничений на положение блока относительно перемещаемых объектов (значение по умолчанию).

right

Увеличение верхнего поля генерируемого блока до тех пор, пока верхний сегмент края его границы не окажется ниже нижнего сегмента внешнего края любого правостороннего перемещаемого блока, который был сгенерирован в исходном документе предыдущим элементом.   

3.2. Модуль List

В модуле List содержатся элементы <dd>, <dl>, <dt>, <li>, <ol> и <ul>, описывающие различные типы списков.

В HTML определены три основных типа списков:

  •  упорядоченные (нумерованные) списки;
  •  неупорядоченные (маркированные) списки;
  •  списки определений.

3.2.1. Нумерованные списки

Нумерованный список создается с помощью контейнера <ol>…</ol>. Каждый элемент списка определяется внутри этого контейнера с помощью контейнера <li>…</li>.

Для элементов <ol> и <li> определены общие атрибуты class, dir, id, lang, style и title. Дополнительными атрибутами для элемента <ol> являются атрибуты type и start.

При выводе Web-страницы на экран элементы списка последовательно нумеруются арабскими цифрами. С помощью атрибута type в элементе <ol> можно задать другой способ нумерации (например, с помощью строчных или заглавных букв), однако для этих целей рекомендуется использовать рассматриваемое ниже свойство стиля list-style-type.

Атрибут start элемента <ol> позволяет задать номер начальной буквы или цифры нумерации. Значение этого атрибута определяет индекс буквы или цифры, которая нумерует первый элемент списка. Для цифровой нумерации этот индекс совпадает с цифрой в первом элементе списка, например, для значения атрибута

start="4"

первый элемент списка будет иметь номер 4.

Для буквенной нумерации для этого же значения атрибута start первый элемент списка будет иметь номер D или d.

3.2.2. Маркированные списки

Для создания маркированных списков используются контейнер <ul>…</ul>, а элементы списка так же, как и для нумерованных списков, задаются с помощью элемента <li>…</li>. В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка. Помимо общих атрибутов class, dir, id, lang, style и title, для маркированного списка можно задать в атрибуте type вид маркера элемента <ul>, однако, так же, как и для нумерованного списка, рекомендуется использовать рассматриваемое ниже свойство стиля list-style-type.

Определять тип нумерации с помощью стиля list-style-type можно непосредственно в элементе <li>.

В Web-страницах можно организовать вложенные списки, т.е. списки, элементами которых также могут быть списки (как нумерованные, так и маркированные).

3.2.3. Списки определений

Списки определений отличаются   от рассмотренных типов списков тем,  что в них каждому термину соответствует абзац определения, расположенный с отступом. Такого рода списки довольно часто используются в учебных материалах, например, при пояснении компонент какого-либо выражения. Список определений содержится в контейнере <dl>…</dl>, а термин и его определение задаются с помощью контейнеров <dt>…</dt> и <dd>…</dd> соответственно. Для элементов <dl>, <dt> и <dd> определены только общие атрибуты class, dir, id, lang, style и title.

3.2.4. Свойства, используемые в списках

3.2.4.1. Свойство list-style-type

Свойство list-style-type задает вид маркера элемента списка. Основные значения для этого свойства представлены в табл. 5.5.

Таблица 5.5. Основные значения свойства list-style-type

Значение свойства

list-style-type

Что задает

circle

Маркер в виде не закрашенного кружка.

decimal

Нумерацию десятичными арабскими цифрами.

disc

Маркер в виде закрашенного кружка (значение по умолчанию).

lower-alpha

Нумерацию маленькими латинскими буквами.  

lower-roman

Нумерацию маленькими римскими цифрами.

inherit

Наследование значения свойства от родительского элемента.

none

Отсутствие маркера.  

square

Маркер в виде закрашенного квадратика.  

upper-alpha

Нумерацию большими латинскими буквами.

upper-roman

Нумерацию большими римскими цифрами.

3.2.4.2. Свойство list-style-image

Свойство list-style-image определяет графический объект, используемый в качестве маркера элемента списка (если этот объект доступен, он заменяет маркер, определенный в list-style-type). Для свойства list-style-image определены следующие значения none (маркер не используется – значение  по умолчанию) и url("URL") (адрес ресурса, описывающего маркер списка).

3.2.4.2. Свойство list-style-position

Свойство list-style-position определяет положение маркера в списке и может иметь следующие значения: inside (блок маркера находится в составе абзаца пункта списка) и outside (блок маркера выдвинут влево от абзаца пункта списка – значение  по умолчанию).

3.2.4.2. Интегральное свойство list-style

Интегральное свойство list-style задает значения типа, изображения маркера и позиции в списке (значения могут задаваться в любом порядке). Если какое-либо значение опущено, для данного свойства принимается значение по умолчанию. Кроме того, для list-style можно задать значение inherit, что назначает наследование всех свойств списка из родительского элемента.

3.4. Модуль Hypertext

Для определения гиперссылок в документе HTML используются модуль Hypertext, содержащий элемент <a>.

3.4.1. Элемент <a>

Ссылка HTML имеет два конца и направление. Она начинается в источнике и указывает на адресата. Источник определяется по месту размещения определения ссылки, а адресат задается в качестве атрибута в этом определении.  Адресатом ссылки может быть: начало какого-либо раздела данного документа HTML, другой документ HTML, изображение, звуковой клип, видеоклип, программа и т.д. Адресатом ссылки может также являться именованная зона – элемент привязки или «якорь» (anchor element) внутри данного документа HTML.

Контейнер <a>…</a> определяет отношение между зоной внутри данного документа и другим объектом. Помимо общих атрибутов class, dir, id, lang, style и title, для элемента <a> определены основные атрибуты, представленные в табл. 5.6.

Таблица 5.6. Основные атрибуты элемента <a>  

Имя атрибута

Что определяет

Значение по умолчанию

accesskey

«Горячую» клавишу для данной гиперссылки (переход по ссылке выполняется при одновременном нажатии клавиши Alt и заданной клавиши и, в Internet Explorer, после нажатия клавиши Enter).

нет

disabled

Запрещение доступа к ссылке (ссылки выводятся светло-серым цветом).

Доступ разрешен

href

URL ссылки.

нет

name

Имя элемента привязки (задается в том случае, если элемент <a> используется как элемент привязки)

нет

tabindex

Номер в последовательности обхода ссылок при нажатии клавиши Tab.

нет

target

Имя фрейма или окна Web-браузера, куда будет загружена Web-страница, указанная в гиперссылке. Атрибут будет рассмотрен в модуле Frames.

нет

Элемент <a> используется как для именования ссылок (с атрибутами name или id), так и для вставки гиперссылок в Web-страницу (с атрибутом href).

Атрибут name и id используется для создания внутренних ссылок (меток, или «якорей») в документе (к разделам документа, таблицам, рисункам, терминам и т.д.), например:

<a name="P01">Раздел 1.1</a>

Тот же пример с использованием атрибута id (рекомендуется использовать именно этот атрибут):

<a id="P01">Раздел 1.1</a>

Ссылки к разделу 1 в этом же документе задается с помощью контейнера:

<a href="#Part01">Раздел 1.1</a>

При ссылке на данный раздел из другого документа перед символом "#" надо указать URL документа, например:

<a href="http://www.telecom.edu/manual_1/Chap01.html#P01">

Раздел 1.1 в главе 1</a>

Если вместо текста в элементе <a> задать элемент <img>, то изображение будет служить ссылкой.

3.4.2. Использование псевдоклассов для гиперссылок

Псевдоклассами называют селекторы, которые связаны с гиперссылками на Web-странице.  Эти псевдоклассы представлены в табл. 5.7.

Таблица 5.7. Псевдоклассы таблиц стилей

Наименование псевдокласса

Что задает

:link

Задает правило стилей для отображения не просмотренных гиперссылок.

:visited

Задает правило стилей для отображения  просмотренных гиперссылок.

:hover

Задает правило стилей для отображения выделенной (с помощью некоторого указывающего устройства, например мыши) гиперссылки, если эта гиперссылка еще не активизирована.

:active

Задает правило стилей для отображения активизированной гиперссылки.  

Поскольку псевдоклассы связаны с элементом <a>, у в качестве имени элемента в этих селекторах используется a, например, a:hover.

4. Порядок выполнения работы

  1.  Откройте созданную в лабораторной работе 2-04 Web-страницу для вашего варианта.
  2.  Задайте класс (значение атрибута class) для блоковых и строковых элементов вашего варианта в соответствии с табл. 5.8. Для строковых элементов имя класса или классов (через пробел) задается в атрибуте class контейнера <span>…</span>, в который помещается указанный в варианте фрагмент текста.

Таблица 5.8. Задание классов для блоковых и строковых элементов Web-страницы

Вариант

Наименование класса

Местонахождение элемента

1

selected

Второй абзац во введении (начинается со слова "Компьютерные").

Третий абзац в разд. 3.8 (начинается со слов "При увеличении").

def

Третий абзац в разд. 3.11 (начинается со слова "Маршрутизаторы").

Второй абзац в разд. 3.13 (начинается со слова "В феврале").

bold

Все термины в списке в разд. 3.3.

italic

Все слова и сокращения на английском языке.

underline

Первое предложение во втором абзаце разд. 3 (начинается со слова "Стандарты").

Первое предложение в разд. 3.1 (начинается со слова "Ethernet").

color

Все сокращения LAN и WAN в разделе 2.

italic color

Для сокращений LAN и WAN в разделе 4.3. Для сокращений в элементе <span> задается также атрибут title со значением "Local Area Network – локальная сеть" (для LAN) и "Wide Area Network – глобальная сеть" (для WAN).

2

selected

Второй абзац в разд. 3 (начинается со слова "Обеспечение").

Второй абзац в разд. 4.1 (начинается со слов "В некоторых").

def

Первый абзац в разд. 2 (начинается со слов "С первого").

Последний абзац в разд. 5 (начинается со слов "CMTS может").

bold

Слова "Кабельные модемы"в разд. Введение.

italic

Все слова и сокращения на английском языке (кроме CMTS).

underline

Второе предложение во втором абзаце разд. 2 (слова "коаксиальный кабель"), а также слова "волоконно-оптический кабель" в следующем предложении.

color

Слова " В системе кабельного TV" в начале второго абзаца раздела 2.

italic color

Для всех сокращений CMTS в тексте. Для каждого из этих сокращений, кроме первого в разд. 3 в элементе <span> задается также атрибут title со значением "Cable Modem 

Termination System – система окончания кабельного модема".

3

selected

Второй абзац в разд. Введение (начинается со слов "При передаче").

Второй абзац в разд. 3 (начинается со слов "Модем со скоростью").

def

Последний абзац в разд. 4 (начинается со слов "Принципы технологии").

Последний абзац в разд. 5 (начинается со слов "Маршрутизация этих пакетов").

bold

Слова "При передаче модем" и "При приеме модем" в  разд. Введение.

italic

Все слова и сокращения на английском языке (кроме ADSL).

underline

Конец второго абзаца разд. 3 (слова "дуплексным режимом"), а также слова "полудуплексными" в последнем предложении абзаца.

color

Слова "модем" и "модулятор-демодулятор" в начале раздела Введение.

italic color

Для всех сокращений ADSL в тексте. Для каждого из этих сокращений, кроме первого в конце разд. 2 в элементе <span> задается также атрибут title со значением "Asymmetric Digital Subscriber Line – ассиметричные цифровые пользовательские линии".

4

selected

Последний абзац в разд. 1.3.1 (начинается со слов "Последнее поколение").

Последний абзац в разд. 4 (начинается со слов "Общей чертой").

def

Последний абзац в разд. 1.1 (начинается со слов " Т.к. не требуется").

Последний абзац в разд. 3 (начинается со слов "Существует два типа").

bold

Слово "преимущества" во втором абзаце разд. 1.2,  слово "недостатков" в абзаце после первого списка разд. 1.2 и слово "преимущества" перед третьим списком разд. 1.2,

italic

Все слова и сокращения на английском языке (кроме OFDM).

underline

Слова ""никаких новых проводов"" в первом предложении разд. 1.1.

color

Слова "самый дешёвый способ создания домашней сети" в конце раздела 1.1.

italic color

Для всех сокращений OFDM в тексте. Для каждого из этих сокращений, кроме первого (в первом абзаце разд. 1.3.1) в элементе <span> задается также атрибут title со значением "Orthogonal Frequency - Division Multiplexing – ортогональное частотное разделение".

5

selected

Последний абзац в разд. 3.1.1 (начинается со слов "Хорошим примером").

def

Последний абзац в разд. 5 (начинается со слов "Туннелирование можно").

bold

Слово "интрасети" и слова "виртуальные частные сети" в последнем абзаце разд. Введение,

italic

Все слова и сокращения на английском языке (кроме VPN).

underline

Слова "быстрая, надёжная и безопасная связь" в конце первого абзаца разд. Введение.

color

Слово "Брандмауэр" в начале раздела 4.1, слово "Шифрование" в начале раздела 4.2, слова "Безопасный протокол Интернет - IPSec" в начале раздела 4.3 и слова "Сервер  аутентификации, авторизации и учета использования ресурсов - AAA" в начале раздела 4.4.

italic color

Для всех сокращений VPN в тексте (кроме заголовков и подписей под рисунками). Для каждого из этих сокращений, кроме первого (в последнем абзаце разд. Введение) в элементе <span> задается также атрибут title со значением "Virtual Private Network – виртуальные частные сети".

6

selected

Абзац в разд. 1 (начинается со слов "В выполнении этих двух функций").

def

Первый абзац в разд. 3 (начинается со слов "Концентраторы, коммутаторы и маршрутизаторы").

bold

Слово "Маршрутизаторы" и слова "специализированные компьютеры" во втором абзаце разд. Введение.

italic

Все слова и сокращения на английском языке (кроме MAC).

underline

Слова "таблица маршрутизации" в предложении, начинающемся со слов "Одно из средств, которые" в разд. 1.

color

Слова "Cisco Systems, Inc" и слова "*Gigabit Cisco 12000*" в начале раздела 6.

italic color

Для всех сокращений MAC в тексте. Для каждого из этих сокращений, кроме первого (в середине разд. 3) в элементе <span> задается также атрибут title со значением "Media Access Control – управление доступом к среде".

7

selected

Абзац в разд. 4 (начинается со слов "QAM - это технология").

def

Первый абзац в разд. 4 (начинается со слов "Существуют два").

bold

Слово "трансивер" и слова "доступ к мультиплексору DSL" в первом списке разд. 1.

italic

Все слова и сокращения на английском языке (кроме DSL).

underline

Слова "Стандартный телефон" в начале разд. 1 и слова "Оборудование ассиметричной цифровой абонентской линии" в начале второго абзаца разд. 1.

color

Слова "Технология VDSL" в начале раздела 2.

italic color

Для всех сокращений DSL в тексте (кроме заголовков и подписей под рисунками). Для каждого из этих сокращений, кроме первого (в разд. Введение) в элементе <span> задается также атрибут title со значением "Digital Subscriber Line – цифровая абонентская линия".

8

selected

Второй абзац в разд. 3.2 (начинается со слов "Концентратор оцифровывает").

def

Предпоследний абзац в разд. 4.2 (начинается со слов "В современных телефонных системах").

bold

Слова "полная телефонная сеть" и во втором абзаце разд. Введение и слова  "громкоговоритель" и "микрофон" в первом списке разд. 1.

italic

Слова "Телефонная сеть"  в начале разд. 3.1 и слово  "Концентратор"  "  в начале разд. 3.2.

underline

Слова "Вот и все!" в последнем абзаце разд. 1 и слова "Простейшим путем создания собственной телефонной сети" в последнем абзаце разд. 4.1.

color

Все ссылки ни рисунки, например, рис. 1 и т.д.

italic color

Для всех сокращений Гц  в тексте (кроме заголовков и подписей под рисунками). Для каждого из этих сокращений в элементе <span> задается также атрибут title со значением "Гц - герц".

9

selected

Первый абзац в разд. 2 (начинается со слов "Большинство домов").

def

Первый абзац в разд. 4.1 (начинается со слов  "Существуют два").

bold

Слова "DSL с очень высокой битовой скоростью",  "Симметричная DSL" и "Адаптивная по скорости DSL" в списке разд. 2.

italic

Все слова и сокращения на английском языке (кроме DSL).

underline

Слова "два вида оборудования" в первом абзаце разд. 5, слова "модемами DSL" в первом абзаце разд. 5.1 и слова "DSLAM провайдера доступа" в первом абзаце разд. 5.2.

color

Слова "принципы работы DSL" во втором абзаце разд. 1 и слова "маленькие фильтры" в первом абзаце разд. 4.3.

italic color

Для всех сокращений DSL в тексте (кроме заголовков и подписей под рисунками). Для каждого из этих сокращений, кроме первого (в разд. Введение) в элементе <span> задается также атрибут title со значением "Digital Subscriber Line – цифровая абонентская линия".

10

selected

Последний абзац в разд. 3 (начинается со слов "Единственный способ").

def

Последний абзац в разд. 4 (начинается со слов  "В трехуровневой иерархической").

bold

Слова "В децентрализированных алгоритмах маршрутизации" и "В глобальных алгоритмах маршрутизации" в конце разд. 1.

italic

Все слова и сокращения на английском языке (кроме LS и DV).

underline

Слова "следующие шаги:" в первом абзаце разд. 2.1 и слова "следующие шаги (рис. 2):" перед вторым списком разд. 2.1.

color

Слова "В алгоритмах LS" в начале разд. 2.1 и слова "Алгоритмы DV" в начале разд. 3.

italic color

Для всех сокращений LS и DV в тексте (кроме заголовков и подписей под рисунками). Для каждого из этих сокращений, кроме первого (в разд. Введение) в элементе <span> задается также атрибут title со значением "Distance Vector – алгоритм дистанционного вектора" и "Link State – алгоритм состояния соединения".

11

selected

Первый абзац в разд. 1 (начинается со слов "Волоконная оптика").

def

Четвертый абзац в разд. 6 (начинается со слов  "В оптическом кабеле").

bold

Слова "сердцевины", "оболочки" и "специального покрытия" в первом списке разд. 1.

italic

Все слова и сокращения на английском языке (кроме MCVD).

underline

Слова "оптических волокон", слово "жгуты"  и слово "рубашкой" в третьем абзаце разд. 1.

color

Слова "Одномодовое оптоволокно",  "Многомодовое оптоволокно" и "пластика" в последних трех абзацах разд. 1.

italic color

Для всех сокращений MCVD в тексте (кроме заголовков и подписей под рисунками). Для каждого из этих сокращений, кроме первого (в начале разд. 5.1) в элементе <span> задается также атрибут title со значением "Modified Chemical Vapor Deposition – модифицированное химическое вакуумное осаждение".

12

selected

Второй абзац в разд. 1 (начинается со слов "Internet - это").

def

Второй абзац в разд. 3 (начинается со слов  "Это началось в").

Первый абзац в разд. 5 (начинается со слов  "В будущем").

bold

Слова "Электронная почта", во втором абзаце разд. 4, слова   "службу новостей" после рис. 4 в разд. 4,  слова в начале абзаца   "Обмен файлами" перед рис. 5 в разд. 4,  слова   в начале абзаца   "Компьютерная телефония" в разд. 4 и слово "WWW" перед рис. 6 в разд. 4.

italic

Все слова и сокращения на английском языке (кроме WWW).

underline

Слова "два основных метода:" и слова "двумя основными причинами:" в разд. 4.

color

Слова ""информационной магистралью"" и ""дорожной карты"" в третьем абзаце разд. 1.

italic color

Для всех сокращений WWW в тексте (кроме заголовков и подписей под рисунками). Для каждого из этих сокращений, кроме пояснения термина (перед рис. 6 в разд. 4) в элементе <span> задается также атрибут title со значением " World Wide Web - всемирная паутина".

  1.   Занесите в таблицу стилей правило для селектора div.imgcenter со значениями свойства выравнивания текста по центру и шириной поля (со всех сторон) – 20pt.
  2.  Занесите в таблицу стилей правило для селектора div.imgleft со значениями свойства выравнивания текста по центру, шириной поля (со всех сторон) – 20pt и с принудительным выравнивание элемента влево.
  3.  Занесите в таблицу стилей правило для селектора p.img со значениями свойства выравнивания текста по центру, с той же гарнитурой и размером шрифта, что и в элементе p, а также весом для жирного шрифта.
  4.  Занесите в таблицу стилей правило для селектора br.clear со значением свойства clear, равным all.
  5.  Откройте в своей папке папку images и переместите туда из своей папки все изображения.
  6.  Вставьте в Web-страницу рисунки с помощью элемента <img> (значение атрибута src должно содержать путь к изображению, и, следовательно, иметь вид "images/имя-изображения"). Подписи под рисунком задаются с помощью элемента <p> класса img. Элементы <img> и <p> для рисунков, приведенных в табл. 5.9, должны быть заключены в элемент <div> класса imgleft, а для всех остальных рисунков – в элемент <div> класса imgcenter.

Таблица 5.9. Рисунки, вставляемые в Web-страницу с обтеканием текста

Вариант

Имя файла с рисунком

Примечание

1

ethernet3.gif

Вставка элемента <br> класса clear перед последним предложением во втором абзаце разд. 3.10 (начинается со слов "Коммутатор пропускает").

2

CableModem4.jpg

Вставка элемента <br> класса clear перед последним предложением во втором абзаце разд. 5 (начинается со слов "Деление приема").

3

Modem3.jpg

Вставка элемента <br> класса clear перед последним предложением во втором абзаце разд. 5 (начинается со слов "Если автоматическая").

4

PowerNetwork2.gif

Вставка элемента <br> класса clear после последнего предложения разд. 1.3.1.

PowerNetwork3.gif

Вставка элемента <br> класса clear перед последним предложением во втором абзаце разд. 3 (начинается со слов ""Дуплексная" в данном случае").

5

VPNNetwork1.gif

Вставка элемента <br> класса clear перед последним предложением во втором абзаце разд. 1 (начинается со слов "В этой статье").

6

Router3.png

Вставка элемента <br> класса clear перед последним предложением во втором абзаце разд. 1 (начинается со слов "Например:").

Router4.png

Вставка элемента <br> класса clear после последнего предложения последнего абзаца разд. 3.

7

VDSL1.gif

VDSL2.jpg

Вставка элемента <br> класса clear перед предложением во втором абзаце разд. 2 (начинается со слов "Шлюз выполняет").

8

Telephone5.gif

Вставка элемента <br> класса clear перед последним предложением в разд. 4.1 (начинается со слов "Простейшим путем").

9

DSL3.gif

Вставка элемента <br> класса clear перед последним предложением в разд. 4.2 (начинается со слов "Контроль и сортировка").

DSL5.gif

Вставка элемента <br> класса clear перед последним предложением в разд. 5.1 (начинается со слов "Сравнительные характеристики").

10

RoutingAlgorithm1.png

Вставка элемента <br> класса clear перед предпоследним предложением в разд. 1 (начинается со слов "В глобальных алгоритмах").

11

Fiber2.jpg

Вставка элемента <br> класса clear перед предложением третьего абзаца в разд. 1 (начинается со слов "Существует два типа").

Fiber6.jpg

Вставка элемента <br> класса clear перед первым предложением третьего абзаца в разд. 5.2 (начинается со слов "Оператор наматывает").

12

Internet4.gif

Вставка элемента <br> класса clear перед предложением в разд. 4 после рис. 4 (начинается со слов "Для тиражирования").

Internet5.png

  1.  Занесите в таблицу стилей правило для селектора ol с значением свойства, задающего   вид   маркера  элемента  списка, равным decimal.
  2.  Занесите в таблицу стилей правило для селектора ul с значением свойства, задающего   вид   маркера  элемента  списка  для  своего  варианта: 1) disc; 2) circle; 3) square; 4) disc; 5) circle; 6) square; 7) disc; 8) circle; 9) square; 10) disc; 11) circle; 12) square.
  3.  Занесите в таблицу стилей правило для селектора ul.img с значением свойства, задающего имя файла с изображением маркера элемента списка для своего варианта:   

1) marker01.gif;    2) marker02.gif;    3) marker03.gif;                       

4) marker04.gif; 5) marker05.gif; 6) marker06.gif;

7) marker07.gif; 8) marker08.gif; 9) marker09.gif;

10) marker10.gif; 11) marker11.gif; 12) marker12.gif.

  1.  Создайте (используя ImageReady) маркер списка  для своего варианта, используя инструменты группы прямоугольник и группы закладка (изображение должно иметь прозрачный фон и иметь размер приблизительно 40×20 пикселей):

1)  (стиль Green Gel);

2) (стиль Red Paper Clip);

3) (стиль Button-Wood);

4) (стиль New Style 1);

5) (стиль Green Paper Clip);

6) (стиль Blueberry);

7) (стиль Tortoise Shell);

8) (стиль Button-Shiny);

9) (стиль Button-Stone);

10) (стиль Glass Table Cool);

11) (стиль Chromed Satin);

12) (стиль Red Gel).

 

  1.  Сохраните полученный рисунок в файле с именем для своего варианта в папке images.
  2.  Вставьте элементы <ol> или <ul> и, внутри них, пункты списка (элементы <li>) в соответствии со своим вариантом (табл. 5.10). Если пункты списка уже размечены с помощью элемента <p>, удалите этот элемент. Для элементов списка <ol> удалите номера пунктов и точки (если они есть) – пункты будут пронумерованы Web-браузером.

Таблица 5.10. Вставка списков в Web-страницу

Вариант

Элемент

Местонахождение списка

1

<ol>

В разд. 4.1, начиная со слова "Кольцо" и кончая словом "далее".

<ul> класса img

В разд. 3.3, начиная со слова "среда" и кончая словом "информации".

2

<ol>

В разд. 4.1, начиная со слова "Тюнер" и кончая словом "Микропроцессор".

<ul> класса img

В разд. 3.3, начиная со слова "блока" и кончая словом "Converter).".

3

<ul> класса img

Перед последним абзацем  разд. 2, начиная со слов "300 бит/с" и кончая словами " в 1998 году.".

4

<ol>

В разд. 1.2, начиная со слова "Дешевизна" и кончая словами "в компьютер".

<ul>

В разд. 1.2, начиная со слов "маленькая скорость" и кончая словами "качество связи".

<ul> класса img

В разд. 1.2, начиная со слов "она более" и кончая словами "качество передачи.".

5

<ol>

В разд. 2, начиная со слова "Безопасность" и кончая словами "в сети".

В разд. 3.3.2, начиная со слова "На основе" и кончая словом "среде.".

В разд. 4.4, начиная со слов "Кто вы?" и кончая словом"ресурсов).".

<ul>

В разд. 1, начиная со слова "главной" и кончая словом "пользователей".

В разд. 4.2, начиная со слова "шифрование" и кончая словами "с общедоступным ключом.".

В разд. 4.2, начиная со слова " туннельный" и кончая словами "только данных пакета).".

<ul> класса img

В разд. 2, начиная со слова "обеспечить" и кончая словом "окупаемость.".

В разд. 4, начиная со слов "брандмауэры" и кончая словом "AAA.".

В разд. 4.3, начиная со слова  "маршрутизатор" и кончая словом " сервер.".

В разд. 5, начиная со слова "протокол" и кончая словами "протокол IP.".

6

<ol>

В разд. 1, начиная со слов "Маршрутизатор гарантирует" и кончая словом "адресату.".

В разд. 1, начиная со слова "Если вы" и кончая словами "с суперкомпьютерами.".

<ul>

В разд. 1, начиная со слов "сеть может" и кончая словами "всего сообщения.".

В разд. 3, начиная со слов "Joe Smith" и кончая словами "FL45678.".

<ul> класса img

В разд. 1, начиная со слов "данные, на основе" и кончая словами "для различных подсетей.".

В разд. 5, начиная со слов "сколько времени занял" и кончая словами "до компьютера.".

7

<ol>

В разд. 1, начиная со слов "Ответвления моста" и кончая словами "извилистому пути.".

В разд. 4, начиная со слов "Преобразование речи" и кончая словами "1,5 МГц).".

<ul>

В разд. 1, начиная со слов "трансивер" и кончая словами "клиентов.".

В разд. 4, начиная со слов "квадратурно-амплитудную" и кончая словами "Phase).".

<ul> класса img

-В разд. 3, начиная со слов "ассиметричная DSL" и кончая словами "возможность передачи данных.".

8

<ol>

В разд. Введение, начиная со слова "Домашние соединения" и кончая словами "трансконтинентальные соединения.".

<ul>

В разд. 4.1, начиная со слов "2 телефона" и кончая словами "300-омный резистор".

<ul> класса img

В разд. 1, начиная со слов "переключатель для соединения" и кончая словами "через микрофон.".

9

<ol>

В разд. 2, начиная со слов "DSL с очень высокой" и кончая словами "качества линии.".

<ul>

В конце разд. 3, начиная со слов "мостовые ответвления" и кончая словами "к этому офису.".

<ul> класса img

В разд. Введение, начиная со слов "обыкновенного телефонного" и кончая словами "Line).".

В разд. 1, начиная со слов "вы можете" и кончая словами "часть подключения.".

В разд. 1, начиная со слов "соединение DSL" и кончая словами "не везде.".

10

<ol>

В разд. 2.1, начиная со слов "Определить маршрутизаторы" и кончая словами "вес меньше.".

В разд. 2.1, начиная со слов "Маршрутизатор строит граф" и кончая словами "от V1 к V2.".

<ul>

В разд. 2.1 (внутри второго нумерованного списка), начиная со слов "поле предшественника" и кончая словами "или "пробное".".

<ul> класса img

В разд. 3, начиная со слов "Он рассчитывает вес" и кончая словами "обновляет свою.".

11

<ol>

В разд. 1, начиная со слова "Одномодовое оптоволокно." и кончая словами "Многомодовое оптоволокно.".

В конце разд. 5, начиная со слов "Выработка заготовочного" и кончая словами "Проверка волокна.".

<ul>

В разд. 4 (внутри второго списка с изображением в качестве маркера), начиная со слов "медицинские обследования" и кончая словами "канализационных труб.".

В разд. 5.1, начиная со слов "кремний и германий" и кончая словами "формируя стекло.".

В разд. 5.3, начиная со слов "предел прочности" и кончая словами " подводных кабелей).".  

<ul> класса img

В конце разд. 3, начиная со слова "передатчика" и кончая словами "световые сигналы.".

В начале разд. 4, начиная со слов "менее дорогие" и кончая словами "канализационных труб.".

12

<ol>

В разд. 4 под рис. 4, начиная со слова "Отправка статей" и кончая словами "системы UseNet.".

<ul>

В разд. 4 перед рис. 6, начиная со слов "протоколы сети Internet" и кончая словами "участков сети.".  

<ul> класса img

В начале разд. 4, начиная со слова "электронная почта" и кончая словами "технологии WWW.".

  1.  Занесите в таблицу стилей правило для селектора h2.content с теми же значениями свойств, что и для селектора h2, но с добавлением выравнивания текста по центру.  
  2.  Занесите в таблицу стилей правило для селектора p.ref1 с теми же значениями свойств гарнитуры, размера шрифта и отступа текста в первой строке, что и для селектора p, но с добавлением высоты строки, равной 5pt.
  3.  Занесите в таблицу стилей правило для селектора p.ref2 с теми же значениями свойств гарнитуры, размера шрифта, что и для селектора p, но с увеличением  отступа текста в первой строке в два раза и добавлением высоты строки, равной 5pt.
  4.  Занесите в таблицу стилей правило для селектора p.ref3 с теми же значениями свойств гарнитуры, размера шрифта, что и для селектора p, но с увеличением  отступа текста в первой строке в три раза и добавлением высоты строки, равной 5pt.
  5.  Занесите в таблицу стилей правила для селекторов псевдоклассов a:link с, a:visited и a:hover (именно в указанной последовательности)  с указанными в табл. 5.11 свойствами для своего варианта (прочерк означает отсутствие свойства в правиле).

Таблица 5.11. Свойства псевдоклассов для гиперссылок

Вариант

Псевдокласс

Значение свойства

font-size

background-color

color

1

a:link

green

a:visited

brown

a:hover

larger

yellow

red

2

a:link

darkgreen

a:visited

red

a:hover

larger

lightyellow

indigo

3

a:link

darkolivegreen

a:visited

fuchsia

a:hover

smaller

aliceblue

firebrick

4

a:link

darkgreen

a:visited

hotpink

a:hover

larger

gainsboro

red

5

a:link

olivedrab

a:visited

orangered

a:hover

larger

mintcream

black

6

a:link

darkcyan

a:visited

darkorange

a:hover

smaller

oldlace

darkred

7

a:link

blueviolet

a:visited

crimson

a:hover

larger

moccasin

olive

8

a:link

cornflowerblue

a:visited

tomato

a:hover

larger

lemonchiffon

plum

9

a:link

mediumpurple

a:visited

maroon

a:hover

larger

indigo

indigo

10

a:link

teal

a:visited

darkgrey

a:hover

larger

indigo

white

11

a:link

darkcyan

a:visited

indianred

a:hover

smaller

green

yellow

12

a:link

darkslategray

a:visited

chocolate

a:hover

larger

azure

indigo

  1.  Пометьте наименования всех разделов, подразделов и пунктов. Для этого поместите заголовки (вместе с начальными и конечными элементов заголовков) в контейнер <a id="имя-метки"></a>. В качестве имени метки для раздела можно задать, например, Intro (для введения), Part01 – для первого раздела,   Part02 – для второго и т.д. В качестве метки подраздела можно задать, например,  Part01-01 – для первого подраздела первого раздела,   Part01-02 – для второго подраздела первого раздела и т.д. Имя метки для пункта можно задать, например, как Part01-01-01 – для первого пункта первого подраздела первого раздела,   Part01-02 – для второго пункта первого подраздела первого раздела и т.д.
  2.  Задайте после заголовка слово "Оглавление" как заголовок второго уровня класса Content.
  3.  Скопируйте последовательное содержимое заголовков всех разделов, подразделов и пунктов (без начального и конечного элементов заголовка) после слова "Оглавление" (каждое содержимое заголовка в отдельной строке).
  4.  Поместите каждую строку заголовка в контейнер  

<a href="#имя-метки">…</a>.

где имя-метки – имя метки заголовка данного раздела, подраздела или пункта.

  1.  Поместите полученный контейнер еще в один контейнер абзаца класса ref1 – для заголовков разделов, класса ref2 – для заголовков подразделов и класса ref3 – для заголовков пунктов.
  2.  Проверьте правильность вывода элементов Web-страницы в Web-браузере Internet Explorer. Покажите созданную вами Web-страницу преподавателю.
  3.  Сохраните созданный вами документ HTML для Web-страницы. Этот документ будет использоваться в лабораторных работах 2-06 и 2-07.

5. Содержание отчета

В отчете должен быть представлено содержимое файла с исходным текстом документа HTML для вашего варианта.  

6. Вопросы для самоконтроля

  1.  Как вставляется изображение в Web-страницу?
  2.  Как задается выравнивание изображения, и какие значения оно может принимать?
  3.  Как можно прервать «обтекание» изображения текстом в нужном месте?
  4.  Какие типы списков определены в языке HTML?
  5.  Какие символы нумерации можно задать в упорядоченных списках?
  6.  Как можно задать продолжение нумерации в упорядоченных списках?
  7.  Какие типы маркеров можно задать в неупорядоченных списков?
  8.  Как в списках определений задается определение и его расшифровка?
  9.  Как описываются метки в документе HTML?
  10.  Как формируются ссылки на внешний документ HTML?
  11.  Как можно сформировать гиперссылку на фрагмент документа?
  12.  Как сделать изображение гипертекстовой ссылкой?

Файл: file:///web/5fan/public_html/www/files/8/5fan_ru_42241_96c1b01940bbdd5a18e1d1ac75e15889.doc   Создан: 2007-02-25T17:08:00Z Модифицирован: 2007-02-25T17:08:00Z     Автор:


 

А также другие работы, которые могут Вас заинтересовать

74549. BSD (Berkeley Software Distribution) 15.56 KB
  BSDLite были созданы несколько операционных систем с открытыми исходными кодами. Вот что такое собственно операционная система BSD: Ядро BSD отвечающее за планировку процессов управление памятью поддержку многопроцессорных систем SMP работу с устройствами и так далее. В отличие от Linux существует несколько ядер BSD отличающихся возможностями. Библиотека C в BSD основывается на коде из Беркли а не из Проекта GNU.
74551. Пакетный файл 20.46 KB
  После запуска пакетного файла программаинтерпретатор как правило COMMND. Командный интерпретатор в MSDOS а следом и в семействе Windows 9x имеет название COMMND.BT который автоматически исполняется COMMND.exe который частично совместим с COMMND.
74553. Теорія двоїстості 764 KB
  Економічну інтерпретацію кожної з пари таких задач розглянемо на прикладі виробничої задачі п.6 є двоїстою або спряженою до задачі 5. Як у прямій так і у двоїстій задачі використовують один набір початкових даних. Крім того вектор обмежень початкової задачі стає вектором коефіцієнтів цільової функції двоїстої задачі і навпаки а рядки матриці А матриці коефіцієнтів при змінних з обмежень прямої задачі стають стовпцями матриці коефіцієнтів при змінних в обмеженнях двоїстої задачі.
74554. Аналіз лінійних моделей оптимізаційних задач 408.5 KB
  Оцінка рентабельності продукції яка виробляється і нової продукції. Використання двоїстих оцінок уможливлює визначення рентабельності кожного виду продукції яка виробляється підприємством. Водночас можна оцінити інтервали можливої зміни цін одиниці кожного виду продукції що дуже важливо за ринкових умов. Це дає змогу перевірити
74555. Аналіз коефіцієнтів лінійних моделей 196 KB
  1 Аналіз коефіцієнтів цільової функції Під впливом різних обставин ціна виробленої на підприємстві одиниці продукції може змінюватися збільшуватися чи зменшуватися. Нехай змінюється ціна на одиницю продукції виду С тобто початкове значення 3 ум. подамо як де – величина зміни ціни одиниці продукції виду С. Отже ціна одиниці продукції виду С може збільшуватися чи зменшуватися на 1ум.
74556. КОНЦЕПТУАЛЬНІ АСПЕКТИ МАТЕМАТИЧНОГО МОДЕЛЮВАННЯ ЕКОНОМІКИ 262.5 KB
  Сутність методології математичного моделювання полягає в заміні досліджуваного об’єкта його образом математичною моделлю і подальшим вивченням дослідженням моделі на підставі аналітичних методів та обчислювальнологічних алгоритмів які реалізуються за допомогою комп’ютерних програм. Другий етап вибір чи розроблення алгоритму для реалізації моделі на комп’ютері. Зумовленість моделі об’єктом. Як модель для об’єкта так і об’єкт для даної моделі семантично та інтерпретаційно багатозначні: об’єкт описується не однією а...
74557. ОПТИМІЗАЦІЙНІ ЕКОНОМІКО-МАТЕМАТИЧНІ МОДЕЛІ 661.5 KB
  Постановка задачі економіко-математичного моделювання. Приклади задач економіко-математичного моделювання. Задача визначення оптимального плану виробництва. Задача про «дієту». Транспортна задача.