Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Задачи и упражнения по JavaScript. Учебное пособие
.pdf
Пример 2
1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки
Пример 3
1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки
Пример 4
1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки
Пример 5
1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки
Пример 6
2 ячейка 1 строки
1 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки
2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
Пример 7
1 ячейка 1 строки 2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки
11
Пример 8
2 ячейка 1 строки
2 ячейка 1 строки
2 ячейка 1 строки
1 ячейка 1 строки
1 ячейка 2 строки 2 ячейка 2 строки
2 ячейка 1 строки
Пример 9
1 ячейка
1 строки
1 ячейка
2 строки
2 ячейка 1 строки
2 ячейка 2 строки
Задание 2. Записать код на языке HTML, объединяющий
ячейки таблиц.
Пример 1
1 и 2 ячейки вместе 3 ячейка 4 ячейка
1 ячейка 2 ячейка 3 ячейка 4 ячейка
1 ячейка 2 ячейка 3 ячейка 4 ячейка
Пример 2
1 и 2 ячейки вместе 3 ячейка 4 ячейка
1 ячейка 2 ячейка 3 ячейка 4 ячейка
1 ячейка 2 ячейка 3 ячейка 4 ячейка
12
Пример 3
1-е
ячейки
двух
строк
1 ячейка 2 ячейка 3 ячейка 4 ячейка
2 ячейка 3 ячейка 4 ячейка
2 ячейка 3 ячейка 4 ячейка
Пример 4
2 ячейка 3 ячейка
1-е ячейки
3 строк
2 ячейка 3 ячейка
2 ячейка 3 ячейка
4-е ячейки
3 строк
Пример 5
1 ячейка 2 ячейка 3 ячейка 4 ячейка
1 ячейка
2 и 3-я ячейка
2 строк
4 ячейка
1.4. Организация списков
Списки бывают двух типов: маркированные и нумерованные.
Внутри парного тега Ul размещают маркированный список.
Имеет атрибут Type.
Type позволяет задать значок, которым помечаются
строки списка. Может принимать следующие значения:
disc – значки в форме кружков с заливкой;
circle – значки в форме кружков без заливки;
square – значки в форме квадрата с заливкой.
Внутри парного тега Оl размещают нумерованный список.
Имеет два параметра: Type и Start.
Type позволяет задать формат, которым нумеруются
13
строки списка. Параметр может принимать следующие
значения:
A – пункты нумеруются прописными латинскими
буквами;
a – пункты нумеруются строчными латинскими
буквами;
I – пункты нумеруются прописными римскими
цифрами;
i – пункты нумеруются строчными римскими цифрами;
1 – пункты нумеруются арабскими цифрами (по
умолчанию).
Start задает номер, с которого будет начинаться нумера-
ция строк.
Тег Li помещается перед каждым пунктом списка. Имеет па-
раметр Value.
Value позволяет изменить номер данного элемента
списка для нумерованных списков.
Лабораторная работа
Задание 1. Записать код на языке HTML, создающий нумеро-
ванные списки.
Пример 1
A. Текст списка 1
B. Текст списка 2
C. Текст списка 3
D. Текст списка 4
Пример 2
a. Текст списка 1
b. Текст списка 2
c. Текст списка 3
d. Текст списка 4
14
Пример 3
I. Текст списка 1
II. Текст списка 2
III. Текст списка 3
IV. Текст списка 4
Пример 4
i. Текст списка 1
ii. Текст списка 2
iii. Текст списка 3
iv. Текст списка 4
Пример 5
1. Текст списка 1
2. Текст списка 2
3. Текст списка 3
4. Текст списка 4
Пример 6
E. Текст списка 1
F. Текст списка 2
G. Текст списка 3
H. Текст списка 4
Пример 7
1. Первый пункт
1. Первый пункт
4. Первый пункт
5. Первый пункт
2. Второй пункт
3. Третий пункт
второй пункт
1. Первый пункт
2. Первый пункт
второй пункт
15
1.5. Работа с изображениями
В HTML документ изображения вставляются с помощью тега Img. Закрывающий тег отсутствует. Имеет следующие атрибуты:
Src – URL-адрес файла графического изображения.
Width и Height указывают высоту и ширину изображе-
ния в пикселях.
Hspace и Vspace определяют отступ картинки в пиксе-
лях по горизонтали и по вертикали соответственно от
других объектов документа.
Align указывает способ выравнивания изображения в
документе. Может принимать следующие значения:
left выравнивает изображение по левому краю документа, прилегающий текст обтекает изображение справа;
right выравнивает изображение по правому краю
документа, прилегающий текст обтекает изображение слева;
top изображение выравнивается по верху текущей
строки;
middle центр изображения выравнивает по базовой
линии текущей строки;
bottom изображение выравнивается по низу теку-
щей строки;
border – толщина границы изображения;
alt – текст всплывающей подсказки.
16
Лабораторная работа
Задание 1. Записать код на языке HTML, располагающий
изображение следующим образом относительно текста.
Пример 1
Загрузить изображение на страницу, задав значения параметрам его размера и ширину рамки.
Пример 2
Выравнивает изображение по левому
краю документа. Прилегающий текст обтекает изображение справа. Выравнивает
изображение по левому краю документа.
Выравнивает изображение по левому краю
документа. Прилегающий текст обтекает
изображение справа. Выравнивает изобра-
жение по левому краю документа. Выравнивает изображение
по левому краю документа. Прилегающий текст обтекает
изображение справа. Выравнивает изображение по левому
краю документа.
Пример 3
Выравнивает изображение по правому краю документа. Текст обтекает
изображение слева. Выравнивает изображение по правому краю документа. Текст
обтекает изображение слева. Выравнивает изображение по правому краю документа. Текст обтекает изображение слева.
Выравнивает изображение по правому
краю документа. Текст обтекает изображение слева.
17
Пример 4
Выровнять базовую линию текущей текстовой строки с центром изображения.
Пример 5
Выравнивает нижнюю кромку изображения с нижней линией текущей текстовой строки. Выравнивает нижнюю кромку
изображения с нижней линией текущей
текстовой строки. Выравнивает нижнюю
кромку изображения с нижней линией текущей текстовой строки.
Задание 2. Создать карту-изображение.
1.6. Гиперссылки
Гиперссылки позволяют нажатием кнопки мыши быстро
перемещаться от одного документа к другому. Именно гиперссылки связывают все Web-страницы в единую сеть.
Гиперссылки между собой разделяются на внешние и
внутренние, а также на текстовые и графические. Нажатие
кнопки мыши на внешней ссылке ведет за «пределы» htmlстраницы, внутренние – на различные части этой же страницы. Текстовые ссылки представляют собой текст. По умолчанию он выделен синим цветом и подчеркнут. Графические
ссылки – это какие-либо картинки.
Для
создания ссылок используется тег <А>. Между те-
гами <А> и </А> располагается видимая часть ссылки.
Тег A имеет следующие атрибуты:
Namе задает имя указателя на часть текущей страницы.
Href создает ссылку на другой документ, тогда адрес
этого документа является значением атрибута href. Если
значением href является имя указателя перед которым
стоит #, то создается внутренняя гиперссылка.
18
Target указывает, где открывать документ. Имеет сле-
дующие несколько стандартных значений. Их описание
см. в разделе формы.
Лабораторная работа
Задание 1. Записать код на языке HTML, создающий
следующий документ, где гиперссылки Глава 1–4 внешние,
остальные ссылки внутрение.
Глава 1
Глава 2
Глава 3
Глава 4
19
1.7. Создание фреймовой структуры
Фреймы позволяют разбить окно браузера на несколько
прямоугольных областей, в каждую из которых можно загрузить отдельный HTML-документ.
Парный тег Frameset описывает фреймовую структуру.
Он имеет следующие параметры:
Rows описывает разбиение на строки.
Cols описывает разбиение на столбцы.
В качестве значений параметров rows и cols указываются
размеры фреймов. Должно быть указано как минимум два значения. Все значения в списке разделяются запятыми. Размеры
могут быть указаны в пикселях, в процентах или *, которая
означает, что под фрейм нужно отвести все оставшееся пространство.
Внутри этой пары тегов могут находиться только другой
набор тегов frameset и теги frame.
Тег Frame описывает каждое отдельное окно. Он имеет
следующие параметры:
Src определяет адрес документа, который должен
быть загружен во фрейм;
Name задает уникальное имя фрейма;
Scrolling управляет отображением полос прокрутки.
Имеет следующие значения:
auto – полосы отображаются, только если содержимое не помещается во фрейме;
yes – полосы отображаются в любом случае;
no – полосы не отображаются в любом случае;
Marginwidth задает расстояние в пикселях между гра-
ницей фрейма и его содержимым по горизонтали;
Marginheight указывает расстояние в пикселях между
границей фрейма и его содержимым по вертикали;
Frameborder включает (значение 1) или отключает
(значение 0) показ границы между фреймами;
20
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]