Функции с переменными числовыми аргументами 2 страница
Цветовая гамма HTML-документа
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <body>. Вот список этих атрибутов:
bgcolor - определяет цвет фона документа;
text - определяет цвет текста документа;
link - определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке;
vlink - определяет цвет ссылки на документ, который уже был просмотрен ранее;
alink - определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Например:
bgcolor=#FFFFFF цвет фона - белый цвет.
text=#000000 цвет текста - черный цвет.
link=#FF0000 цвет гипертекстовой ссылки - красный цвет.
Кроме того, метка <body> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).
Задание
Используя результаты первой лабораторной работы, а именно подборку ресурсов, преждевременно сформировав их каталог, создайте HTML-документ с ссылками на эти ресурсы. Кроме того представьте в этом документе алфавитный словарь, используя внутренние метки. Цветовую гамму гиперссылок и их размер согласно вариантам таблицы 6 столбца «Часть 1».
Контрольные вопросы
1. Что такое гиперссылка?
2. Чем отличаются внешние и внутренние ссылки?
3. Как можно организовать переход внутри документа?
4. Как организовывается ссылка на изображение?
5. Для чего используются гиперссылки?
6. На какие ресурсы можно использовать ссылки в HTML?
7. Какой тег применяется для создания гиперссылки?
8. Какие атрибуты используются при создании гиперссылки?
9. Как указать URL-адрес ресурса при вызове гиперссылки?
10. Как настроить открытие гиперссылки в отдельном окне?
Лабораторная работа 4
Тема: Язык гипертекстовой разметки страниц HTML. Создание списков. Нумерованные, маркированные списки. (2 часа)
Цель работы:научиться создавать в HTML-документах списки различных форматов.
Теоретический материал
HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле [3].
Ненумерованные списки: <ul>…</ul>
Текст, расположенный между тегами <ul> и </ul>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с тега <li>, у которой нет парной закрывающей метки. Например, чтобы создать вот такой список:
необходим вот такой HTML-текст:
<ul>
<li>Первый;
<li>Второй;
<li>Третий;
</ul>
Нумерованные списки: <ol>…</ol>
Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. Если слегка модифицировать наш предыдущий пример:
<ol>
<li>Первый;
<li>Второй;
<li>Третий;
</ol>
получится вот такой список:
Списки определений: <dl>…</dl>
Список определений несколько отличается от других видов списков. Вместо тегов <li> в списках определений используются теги <dt> (от английского definition term — определяемый термин) и <dd> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:
<dl>
<dt>HTML
<dd>Термин HTML (HyperText Markup Language) означает
'язык маркировки гипертекстов'.
<dt>HTML-документ
<dd>Это текстовый файл с расширением *.html
</dl>
Этот фрагмент будет выведен на экран следующим образом:
Обратите внимание: точно так же, как теги <li>, теги <dt> и <dd> не имеют парных закрывающих меток.
Если определяемые термины достаточно коротки, можно использовать модифицированную открывающий тег <dl compact>. Например, вот такой фрагмент HTML-текста:
<dl compact>
<dt>А
<dd>Первая буква алфавита
<dt>Б
<dd>Вторая буква алфавита
<dt>В
<dd>Третья буква алфавита
</dl>
будет выведен на экран примерно так:
Вложенные списки
Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует. Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.
Задание
Согласно вариантам таблицы 8 создать список. Кроме того, разместить его на странице, созданной в лабораторной работе 2, во второй части. Стиль текста такой же как и основной текст этой части.
Таблица 8. Варианты лабораторной работы 4
| № | Задание |
| С маркером ¨ | |
| С маркером · | |
| Тип нумерации: 1. | |
| Тип нумерации: А. | |
| С маркером © | |
| Без нумерации и маркера | |
| С маркером - | |
| Тип нумерации: а. | |
| Тип нумерации (вложенный список): 1.а. | |
| Тип нумерации (вложенный список): 1.1. | |
| С маркером Ö | |
| Тип нумерации: 1) | |
| С маркером # | |
| Тип нумерации: А) | |
| С маркером Ø | |
| Тип нумерации (вложенный список): 1)а) | |
| С маркером ü | |
| Тип нумерации (вложенный список): 1. А) | |
| С маркером p | |
| С маркером ◊ |
Контрольные вопросы
1. В чем основное назначение списка?
2. Какие списки бывают?
3. Какие основные теги используются для создания списка?
4. Как определяются уровни в списке?
Лабораторная работа 5
Тема: Язык гипертекстовой разметки страниц HTML. Создание таблиц. Оформление таблиц. (6 часов)
Цель работы:научиться создавать в HTML-документах таблицы и их оформлять.
Теоретический материал
Основным тегом для создания таблиц является <table>, в котором размещается содержимое таблицы. Таблица строится по строкам: для обозначения строки используется контейнер <tr>, для обозначения заголовков столбцов (строк) – контейнер <th>, а для данных в ячейках – контейнер <td>. Заголовки выделяются полужирным шрифтом и центрируются в своих ячейках [4].
В таблице 9 приведен список основных тэгов таблиц.
Таблица 9. Основные теги таблиц
| Теги | Описание |
| <table>…</table> | Контейнер таблицы. |
| <tr>…</tr> | Контейнер строки таблицы. Допускается отсутствие закрывающего тэга. |
| <td>…</td> | Контейнер ячейки таблицы. В ячейку можно включить другую таблицу. Закрывающий тэг может быть опущен. |
| <th>…</th> | Контейнер заголовка, располагающегося обычно в первой строке, либо в первом столбце таблицы. Закрывающий тэг также необязателен. |
В дополнение к этим тэгам используются следующие атрибуты:
border - для определения рамки таблицы (ширина рамки устанавливается в пикселях, например, border=1. значение, равное нулю, означает отсутствие рамки);
align - для выравнивания таблицы в окне браузера.
Заголовки столбцов и строк выводятся полужирным шрифтом и располагаются по центру своей ячейки. Данные имеют обычный шрифт и выравниваются по левой стороне ячейки.
Наличие в ячейках данных необязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (<td></td>), либо заполнить ее специальным символом пустого пространства (<td> </td>).
Нет надобности отдельно создавать пустые ячейки, если планируется, что все оставшиеся в строке ячейки не будут заполнены. Так как тэг <tr> сигнализирует о начале новой строки, пустые ячейки будут добавлены браузером автоматически.
Таблицы всегда должны быть прямоугольными. Другие формы не допускаются.
При помощи атрибутов align и valign можно по-разному размещать данные относительно границ ячейки. Эти атрибуты используются совместно с элементами <caption>, <tr>, <th> и <td> в самых различных комбинациях. В таблице 10 приведены значения атрибутов для перечисленных элементов.
Таблица 10. Значения атрибутов <caption>, <tr>, <th> и <td>
| Теги | Описание |
| <caption> | Атрибут align может иметь значения top и bottom (по умолчанию – top); размещает заголовок таблицы сверху или снизу. |
| <tr> | Атрибут align может принимать значения left, center и right (по умолчанию – left для данных и center для заголовков). Он определяет горизонтальное выравнивание данных в ячейках и действует на всю строку, если не отменяется тем же атрибутом в отдельной ячейке. Атрибут valign может иметь значения top, bottom, middle и baseline (по умолчанию – middle). Он регулирует положение данных относительно верхней и нижней границ ячейки и влияет на всю строку, если не отменяется таким же атрибутом в отдельной ячейке. baseline применяется ко всем элементам строки и выравнивает их по базовой линии. |
| <th> | Атрибут align может принимать значения left, center и right (по умолчанию – center). Атрибут valign может иметь значения top, bottom и middle (по умолчанию – middle). |
| <td> | Атрибут align может принимать значения left, center и right (по умолчанию – left). Атрибуту valign может иметь значения top, bottom и middle (по умолчанию – middle). |
В HTML таблицы применяются не только для представления табулированных данных. Они дают возможность гибкого группирования и форматирования информации. Смежные ячейки таблицы могут объединяться с целью размещения большего количества данных. Например, в таблице из пяти строк и пяти столбцов все ячейки первой строки можно объединить и поместить в этой строке красивый заголовок таблицы. Возможно также объединение нескольких строк или создание пустой прямоугольной области.
Для соединения двух смежных ячеек в одном столбце нужно использовать атрибут rowspan тэга <th> или <td>, например:
<td rowspan =2>
Для объединения двух смежных ячеек в одной строке нужно использовать атрибут colspan тех же тэгов, например:
<td colspan =2>
Еще некоторые атрибуты, используемые при создании таблиц (см. таблицу 11).
Таблица 11. Атрибуты тега <table>, <td>, <th> и <tr>
| Атрибут | Описание |
| width | Определяет ширину всей таблицы в пикселах, либо в процентах от ширины окна браузера. Может также использоваться для отдельной ячейки. |
| height | Определяет высоту всей таблицы в пикселах, либо в процентах от высоты окна браузера. Может также использоваться дня отдельной ячейки. |
| cellpadding и cellspasing | Добавляют свободное пространство между данными внутри ячейки и ее границами и, соответственно, между ячейками внутри всей таблицы. Если рамка отсутствует, то результат их действия одинаков. |
| bgcolor, bordercolor | Для изменения цвета фона ячейки и цвета рамки соотвественно |
Задание
В третью часть HTML-документа, созданного в лабораторной работе 2 вставить таблицу согласно вариантам (см. таблицу 12).
Таблица 12. Варианты заданий лабораторной работы 5
| № | Задание | ||
| Количество строк | Количество столбцов | Объединение | |
| 2 и 3 столбцы имеют объединение в 3 строке | |||
| 4 и 5 строки имеют объединение в 2 столбце | |||
| 1 и 2 столбцы имеют объединение в 6 строке | |||
| 4 и 5 строки имеют объединение в 3 столбце | |||
| 6,7 и 8 столбцы имеют объединение в 5 строке | |||
| 2,3,4 и 5 строки имеют объединение в 1 столбце | |||
| 3 и 4 столбцы имеют объединение в 5 строке | |||
| 4,5 и 6 строки имеют объединение в 5 столбце | |||
| 2 и 3 столбцы имеют объединение в 7 строке | |||
| 10 и 11 строки имеют объединение в 1 столбце | |||
| 3 и 4 столбцы имеют объединение в 3 строке | |||
| 2 и 3 строки имеют объединение в 8 столбце | |||
| 6 и 7 столбцы имеют объединение в 3 строке | |||
| 4, 5 и 6 строки имеют объединение в 2 столбце | |||
| 2 и 3 столбцы имеют объединение в 4 строке | |||
| 1 и 2 строки имеют объединение в 2 столбце | |||
| 2 и 3 столбцы имеют объединение в 6 строке | |||
| 3 и 4 строки имеют объединение в 4 столбце | |||
| 5,6 и 7 столбцы имеют объединение в 3 строке | |||
| 7,8,9 и 10 строки имеют объединение в 3 столбце |
Контрольные вопросы
1. Как организуются строки и столбцы в таблице?
2. Какие теги используют для наполнения таблицы?
3. Как определяется рамка таблицы и ячеек?
4. Можно ли определить цвет отдельных ячеек?
Лабораторная работа 6
Тема: Язык гипертекстовой разметки страниц HTML. Создание фреймов. (6 часов)
Цель работы:научиться создавать в HTML-документах фреймы.
Теоретический материал
Бродя по Интернету, наверняка не раз видели странички разбитые на несколько частей. Эти части и называются фреймами. Программно разбиение окна браузера на фреймы реализуется так:
1. Создается html файл (обычно это первая страничка сервера по имени index.htm) в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма.
2. Создаются отдельные html странички для каждого фрейма.
Создадим html файл реализующий разбиение экрана на две части. Для этого нам понадобится два обычных html файла с именами homepage.htm и menu.htm. Главный файл обзовем к примеру index.htm, вот как он должен выглядеть:
<html>
<title>Название вашей странички</title>
<frameset cols="*,140">
<frame src="homepage.htm" name="frame1">
<frame src="menu.htm" name="frame2">
</frameset>
</html>
Рассмотрим каждый тэг по отдельности:
<html></html> и <title><title> - стандартные тэги для всех html файлов
<frameset> в этом тэге задается количество рядов или столбцов rows и cols соответственно, а также их размеры и расположение. Существует три способа задания их размера:
по пикселям - просто напишите высоту или ширину в пикселях.
процентами - пишите сколько процентов от окна браузера вы хотите отдать фрейму и после цифр ставите знак % Также позаботьтесь чтобы все ваши %`ы в суме составляли 100%.
звездочка - все оставшееся место в окне равняется значку *. Например вы можете написать 20%,20%,60% или 20%,20%,* и никакой разницы не будет.
В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами frameborder="X" и border="Y" где x и y толщина в пикселях.
В нашем случае (<frameset cols="*,140">) разделяем окно на два столбца, правое шириной в 140 пикселов, а левое шириной во весь оставшийся экран
<frame> - здесь задаются атрибуты для каждого фрейма персонально.
Команда src задает имя файла который загрузится в этом фрейме, в нашем случае имя файла homepage.htm (<frame src="homepage.htm" ...).
Команда name задает имя данного фрейма, в нашем случае имя "frame1" . Имя необходимо для того чтобы в последствии указать к какому фрейму использовать ссылку. К примеру хотим чтобы нажимая на ссылку в фрейме содержащем файл menu.htm содержимое файла ссылки показывалось в фрейме содержащем файл homepage.htm. Для этого нам необходимо откорректировать html код ссылки:
<a href="file.htm">file</a> - что было
<a href="file.htm" target="frame1">file</A> - что должно быть
А если хотите чтобы файл загрузился в главном окне браузера то напишите в ссылке target="_top"
Также в этом тэге можно задать величину границ и фрейма. Это делается командами marginwigth="x" и marginheight="y", где x и y величина в пикселях.
</frameset> закрывающий тэг.
Рассмотрим несколько пример использования фреймов.
Расположим документы в окне следующим образом:
В первом ряду будет располагаться logo.html, а второй ряд поделим на две колонки, в которых будут располагаться документы menu.html и content.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<???>
</frameset>
</head>
</html>
Принцип построения ясен, только вот как обозначить ряд, разбитый на две колонки? Тут нам поможет господин Frameset.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
</html>
С помощью параметра cols тэга <frameset></frameset> делим второй ряд на две колонки (первая шириной 150 пикселов, вторая по ширине занимает все оставшееся пространство). А тэги <frame>, которые содержит <frameset></frameset> определяют какие документы будут показаны в колонках (menu.html и content.html).
Теперь разберем другой вариант:
Здесь будем делить окно на колонки. Вторая колонка будет содержать в себе документ content.html (содержание), а первую колонку мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html>
Далее избавимся от полосы прокрутки (скрулинга) во фрейме с logo.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html>
Scrolling - параметр тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появиться только тогда, когда она нужна.
Собственно, параметр scrolling="auto", можно не прописывать, т.к. если параметр scrolling не задан, то полоса прокрутки появиться, если она нужна, а если нет - ее не будет.
Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым раньше уже встречались. Итак, border="0".
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html>
Прижмем картинку в левый верхний угол:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html>
Marginheight определяет ширину (в пикселах) верхнего и нижнего полей фрэйма, а marginwidth определяет ширину левого и правого полей фрэйма. В нашем примере избавились от полей во фрейме, содержащим logo.html, задав значение marginheight и marginwidth равное нулю.
Задание
Согласно вариантам в таблице 11 лабораторной работе 5 создать HTML-документ, в которой строки – горизонтальные фреймы, столбцы – вертикальные. Размеры строк и столбцов, ссылки, а также обрамление произвольное.
Контрольные вопросы
1. Что такое фрейм?
2. Зачем используют фреймы при создании HTML-страниц?
3. Какие существуют способы задания фреймов?
4. Приведите примеры использования фреймов.
Лабораторная работа 7
Тема: Создание стилей. CSS. Границы и рамки. (6 часов)
Цель работы:научиться создавать стили CSS, используя таблицы стилей и использовать в HTML-документах.
Теоретический материал
Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента Web страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.
Существует три вида таблиц стилей,
Внутренние таблицы стилей (Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги.
Глобальные (Global Style Sheets) определяют стиль элементов во всем документе.
Связанные (Linked Style Sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле.
Селекторы (Selectors):
селектор {свойства}
Любой элемент HTML - это возможный CSS селектор. Свойства селектора определяют стиль элемента, для которого он определен.
Например:
h1 {color:red; size:20pt;}Все элементы h1 в документе будут красного цвета, размером в 20 точек (pt, point).
Классовые селекторы (Class Selectors):
селектор.класс {cвойства}
class - атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.
Например:
h1.blue {color:blue; size:20pt;}Все элементы h1 с атрибутом class="blue" станут синими.
ID селекторы (ID Selectors):
#id {свойства}
ID - индивидуально именованный стиль. C его помощью можно создавать стилистические исключения среди элементов одного класса.
Например:
<html><head><title> Пример CSS </title></head><style>.blue {color:blue; font-style:italic}#boldunderline {text-decoration:underline; font-weight:bold}</style><body><p class="blue"> Здравствуйте, это моя домашняя страница. </p><p class="blue" id="boldunderline"> Пока еще в стадии разработки ... </p><p id="boldunderline">... Но скоро откроется </p></body></html>Как видно из примера, атрибут ID может быть использован без указания класса (последний параграф примера. Тогда параграф будет обладать только свойствами ID "boldunderline" (в примере - жирный, подчеркнутый текст).
Контекстуальные селекторы (Contextual Selectors):
Контекстные селекторы - это сочетания нескольких обыкновенных селекторов. Стиль задается только элеметнам в заданной последовательности в зависимости от каскадного порядка.
Например:
p EM {color:silver;}В данном примере все элементы EM внутри элементов p будут иметь заданный стиль.
Внутренние таблицы стилей
Как уже говорилось, использование Внутренних стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута style в HTML теге.
Например: <font color="blue" size="3" face="Arial"> Вперед в будущее </font>.
Например Inline Style Sheet:
<font style="color:blue; font-size:12pt; font-family:Arial"> Вперед в будущее </font>.Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать только если необходимо задать определенному элементу свой индивидуальный стиль, существующий в классификации CSS и нереализованный в HTML. Или же при необходимости абсолютно позиционировть данный элемент.