МУ_Интернет-технологии
.pdf
11
align
Если атрибут align присутствует внутри тэгов <caption> и </caption>, то он определяет положение подписи для таблицы (сверху или снизу).
По умолчанию align="top".
Если атрибут align встречается внутри <tr>, <th> или <td>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).
valign
Данный атрибут встречается внутри тэгов <tr>, <th> и <td>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline это выравнивание по базовой линии, при этом происходит привязка содержимого колонки к одной линии.
nowrap
Данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.
colspan
Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию – 1.
rowspan
Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию – 1.
Содержание работы
1.Ознакомиться с теоретическим материалом.
2.Загрузить программу Блокнот.
3.Создать HTML-документ, который в окне Web-браузера отобразится так, как показано на примере.
Рис. 2. Пример HTML-документа
12
<html>
<head>
<title>Пример работы с таблицами</title> </head>
<body>
<table border="3" align="center" cellpadding="3"> <caption>Таблицы <i>is</i><br />singular</caption> <tr><th></th><th>neuter</th><th>masc.</th> <th>fem.</th></tr>
<tr><th>nom.</th>
<td rowspan="2" valign="middle"><i>id</i></td> <td><i>is</i></td>
<td><i>ea</i></td></tr>
<tr><th>acc.</th><td><i>eum</i></td><td><i>eam</i>
</td></tr>
<tr><th>gen.</th>
<td colspan="3" align="center"><i>eius</i></td> </tr>
<tr><th>dat.</th><td colspan="3" align="center"><i>ei</i></td></tr> <tr><th>abl.</th><td colspan="2" align="center"><i>eo</i></td> <td><i>ea</i></td></tr>
</table>
</body>
</html>
4.Сохранить набранный текст в файл с расширением *.html.
5.Открыть файл в окне браузера и, если есть недостатки, устранить
их.
6. Создайте HTML-документ. В котором разместите таблицу расписания вашей группы. В таблице должны быть объединенные ячейки по строке и столбцу. Наиболее интересные дисциплины выделите зеленым цветом, а дисциплины, по которым есть задолженности – зеленым. Открыть файл в окне браузера.
Контрольные вопросы
1.Какие теги позволяют создать нумерованные и маркированные списки?
2.Для чего используется тег <li> в списках?
3.Какие теги используются для создания таблиц и определения количества строк и столбцов в таблице?
4.Как объединить ячейки в таблице?
13
5.Как задать шрифт для текстов внутри ячеек таблицы.
6.Какой тег задает границу таблицы и как изменить ее толщину?
7.Как задать фоновый цвет ячейкам таблицы?
8.Какие атрибуты тега <table> позволяют задать количество строк и столбцов в таблице?
ЛАБОРАТОРНАЯ РАБОТА № 3 СОЗДАНИЕ ГИПЕРССЫЛОК. РАБОТА С ГРАФИКОЙ
В HTML-ДОКУМЕНТАХ
Цель работы: Создание и тестирование HTML-файла. Гипертекстовые ссылки. Работа с рисунками
Краткие теоретические сведения
Чтобы вставить в документ изображение, необходимо воспользоваться тегом <img>, который, например, может выглядеть следующим образом.
<img src="название_файла_с_рисунком.gif" width="ширина" height="высота" />
Параметр src= задает имя файла с изображением, которое должно быть задано обязательно, а width= и height= – соответственно ширину и высоту изображения. Если они не совпадают с реальными размерами картинки, то браузер перемасшабирует изображение. Если эти параметры вообще не заданы, то будут использованы реальные размеры изображения.
Чтобы изображение примыкало к границе страницы и обтекалось текстом документа, следует указать также атрибут align="left" align="right. Пример:
<img src="название_файла_с_рисунком.gif" width="ширина" height="высота" align="left" />.
Гипертекстовые ссылки
Гипертекстовые ссылки, представляющие собой основной инструмент перехода от одной страницы к другой, задаются при помощи специального парного тега. Соответствующий фрагмент документа должен выглядеть следующим образом.
<a href="имя_файла.html"> текст ссылки </a>
В качестве значения параметра href= используется имя файла, который должен быть открыт при щелчке на ссылку. Текст, находящийся на экране между открывающим тегом <a> и закрывающим </a>, выделяется другим цветом и подчеркивается, так что наличие ссылки легко заметить. Обычно этот текст как раз и объясняет, что
14
содержится на той странице, куда перейти, если щелкнуть на ссылке. Нет необходимости добиваться того, чтобы каждая ссылка непременно указывала на другой файл. В частности, допустимо создавать очень длинные страницы, занимающие много экранов. Для перемещения по такой странице, помимо использования полос прокрутки, могу использоваться и гипертекстовые ссылки. С их помощью можно очень быстро перейти к нужному месту страницы.
Для реализации такого перехода нужны два элемента: ссылка, указывающая, куда надо перейти, и якорь, фиксирующий место перехода.
Ссылка выглядит почти так же, как это было указано выше.
<a href="#название_якоря"> текст ссылки </a>
В качестве якоря можно использовать любой тег с атрибутом id="название_якоря", например: <h2 id="название_якоря">Якорь</h2>
Название якоря это произвольный текст, который никогда не появляется на экране и однозначно определяет место перехода. Если на одной странице имеется несколько якорей, все они должны иметь различные названия. Символ "#" при задании ссылки указывает, что дальше следует не имя файла, а название якоря. При клике на ссылку, указывающую на якорь, текст страницы автоматически прокрутится до заданного якоря.
Можно сочетать оба способы задания ссылки. Например: <a href="имя_файла#название_якоря"> текст ссылки </a>
Использование изображений ссылок, ссылки на другие элементы.
В качестве гипертекстовой ссылки может использоваться не только строка текста, но и изображение. Если поместить тег изображения <img> между тегами <a> и </a>, задающими ссылку.
<a href="имя_файла.html">
<img src="имя_файла_с_изображением.gif" /></a>
На экране такое изображение выделяется специальной рамкой. В документ можно включить и подсказывающий текст, что данное изображение является ссылкой (с помощью атрибута title="вспомогательный текст" тега <img>)
Гипертекстовая ссылка может указывать также не на другой документ HTML, а на звуковой или видеоролик.
<a href="music.wav"> послушайте музыку </a>
При щелчке на выделенном цветом (как ссылка) слове "послушайте музыку" начнется воспроизведение звукового файла "music.wav" Браузер распознает такие файлы по их расширениям. Это позволяет
15
включить в состав одной web-страницы несколько мудьтимедийных фрагментов.
Содержание работы
1.Открыть программу Блокнот. Создать html файл, присвоив ему имя *.html. В области основного текста страницы (тела веб-документа) задать цвет фона и текста. Для задания цвета использовать текстовый формат: red, green, blue, yellow, black, white и т.д.
2.Между тэгами области основного текста вставить заголовки
3.1-го уровня: Фамилия Имя;
4.2-го уровня: Биографическая справка, Профессиональные
интересы, Хобби.
5.В разделе Профессиональные интересы написать текст,
отформатировав его аналогичным образом, например: Работаю:…Учусь на факультете… Специальность:… Специализация:… Владею иностранным языком:…Имею опыт:… Особые умения:… Хочу получить работу:…
6.В разделе Хобби создать несколько разделов в виде маркированного списка, например:
Спорт; Искусство; Рукоделие.
7.Создать в своей папке файлы: Sport.html; skilful.html; fancy-work. html, кратко написав в них о своих увлечениях.
8.Слова раздела Хобби сделать гиперссылками на одноименные файлы.
9.Сохранить полученную страницу. Закрыть созданные файлы. Проверить работоспособность ссылок в браузере.
10.В конце раздела вставить свою фотографию.
11.Сохранить последний раз полученную страницу. Предъявить работу преподавателю. Открыть файл в окне браузера.
Контрольные вопросы
1.Что такое гипертекст?
2.Укажите составные части всякой ссылки?
3.C помощью какого атрибута тега<body> можно разместить на веб-странице фоновый рисунок?
4.Какой вид имеет обычная гиперссылка?
5.Какие типы гиперссылок вы знаете?
6.Как сделать ссылку на почтовый ящик lud@mail.ru ?
7.Как изменить размер файла изображения?
16
8.Какой атрибут тега <img> задает текст для всплывающей подсказки.
9.Что произойдет, если файл на который вы ссылаетесь отсутствует?
ЛАБОРАТОРНАЯ РАБОТА № 4 ТЕХНОЛОГИЯ CSS.
ПРОЕКТИРОВАНИЕ ОФОРМЛЕНИЯ WEB-САЙТА
Цель работы: изучить и приобрести навыки работы с основами технологии CSS на примере разработки сайта.
Краткие теоретические сведения
Каскадные таблицы стилей (Cascading Style Sheets) – это технология управления дизайном web-страницы, которая существенно увеличивает диапазон возможностей описания внешнего вида страницы и упрощает сам процесс редактирования и форматирования ее содержимого.
Стиль – набор параметров, задающий внешнее представление объекта. Набор стилей всех элементов называют таблицей стилей.
Существует различные методы, которыми это можно сделать:
Внутренние таблицы стилей задают внутри элемента HTML, при помощи атрибута style. Практически каждый тег HTML может иметь этот атрибут. Это говорит о том, что к этому тегу применяется некое стилевое описание
Пример:
<h1 style="">………</h1>
Все что написано между кавычками и будет являться стилевым описанием.
<p style="color: #ff0000; font-size:12px"> это параграф со стилем </p>
Встроенные таблицы стилей при таком способе таблица стилей встраивается в заголовок html-страницы. Для этого в HTML существуют теги <style></style>, с параметром type, который указывает, что подключается именно таблица стилей CSS.
<html>
<head>
<title>таблица стилей в заголовке html-страницы </title> <style type="text/css">
h1{
color:red
}
17
</style>
</head>
………..
</html>
Внешние таблицы стилей находится во внешнем файле и присоединяется к HTML-документу через элемент link. При этом CSSфайл с внешней таблицей стиля всегда сопровождает HTML-файл документа.
Пример: <html> <head>
<title>Пример подключения внешней таблицы стиля </title> <link rel="stylesheet" type="text/css" href="file_of_style.css"> </head>
………..
</html>
Для подключения внешнего CSS используется тег link. Тег устанавливает связь с внешними документами, чаще всего с таблицами стилей, должен располагаться в секции head, в одном документе может быть несколько тегов link.
У тега link используются три атрибута:
rel – отвечает за установку взаимосвязи и в данном случае имеет значение "stylesheet";
type – MIME-тип подключаемого объекта. У нас это таблица стилей – значит тип "text/сss";
href – абсолютный или относительный путь к самому CSS-файлу.
Правила и селекторы CSS
CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки:
Блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой.
body{
background:black;
18
color:white}
Одно и то же правило стиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:
body,td,h1{
background:black;
color:white
}
Селекторы CSS
Селекторы по идентификатору.
Ранее в качестве селекторов использовались теги, например: body, h1, h2. Но если мы хотим в html-странице использовать несколько одинаковых элементов (например, параграфов), и чтобы текст всех параграфов был черным, а одного из них - другим цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.
В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:
<p id="pink"> параграф с идентификатором (id).</p>
Имена можно присваивать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS).
p{
color:black;
}
p#pink
{
color:pink;
}
Селектор состоит в данном случае из элемента (p), разделителя (#) имени идентификатора (pink).
На странице может быть только один идентификатор (id) с таким значением. Но каждый параграф может иметь свой идентификатор, например, можно создать параграф с id="green" и задать стиль для этого параграфа в таблице стилей.
Селекторы по классу
Если на странице будет несколько элементов с одинаковым стилем, то им присваивается класс (class) и разделителем в таблице стилей является знак точки (.), например:
p#pink{
color:pink;
}
19
p.black{
color:black;
}
<p id="pink"> параграф с идентификатором (id) розового цвета.</p> <p class="black"> параграф с классом (class). Черного цвета</p>
Существуют, также и универсальные классы.
Это классы, которые можно использовать не только для определенного, а для любого тега.
Синтаксис таких классов достаточно прост: сначала идет точка, затем имя класса, и в фигурных скобках определения.
Пример:
<style type="text/css">
.red {color:#FF0000;} </style>
.…
<body>
<h1 class="red"> Текст заголовка 1-го уровня,
класса red</h1>
<h2 class="red"> Текст заголовка 2-го уровня,
класса red </h2>
<p class="red"> Текст параграфа класса red </p>
.…
</body>
Также существуют и универсальные идентификаторы. Их синтаксис аналогичен универсальным классам, за исключением использования знака # вместо точки.
Основные свойства CSS, используемые для управления стилями элементов
Свойства шрифта
font-family – определяет используемый элементом шрифт. Если указать URL(file), то шрифт автоматически установится на компьютер пользователя;
font-style – стиль шрифта (normal, italic);
font-variant – варианты отображения шрифта (normal, small-caps); font-weight – жирность шрифта (normal, bold, bolder, lighter, значение
от 100 до 900);
font-size – размер шрифта (размер, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger);
20
font – обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений).
Свойства фон и цвет
color – цвет элемента (значение); backgroung-color – цвет фона элемента (значение); background-image – изображение фон (none, URL);
background-repeat – варианты повторения фонового изображения
(repeat, repeat-x, repeat-y, no-repeat);
background-attachment – возможность прокрутки фонового изображения (scroll, fixed);
background-position – положение фонового изображения
(%ширины%высоты, top, middle, bottom, left, center, right);
background – обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений).
Свойства блока
margin-top – определяет отступ сверху (значение, %, auto); margin-right – определяет отступ справа (значение, %, auto); margin-bottom – определяет отступ снизу (значение, %, auto); margin-left – определяет отступ слева (значение, %, auto); margin – обобщает все вышеперечисленные свойства; padding-top – отступ от верхнего border'а (значение, %); padding-right – отступ от правого border'а (значение, %); padding-bottom – отступ от нижнего border'а (значение, %); padding-left – отступ от левого border'а (значение, %); padding – обобщает все вышеперечисленные свойства.
Содержание работы
1.Ознакомиться с теоретическим материалом.
2.Загрузить программу Блокнот.
3.Создать HTML-документ с различными стилями для оформления web-сайта отработать примеры.
4.Создайте стилевой файл, содержащий оформление web-сайта. Обязательно определение оформления следующих элементов:
Заголовки 1-4 уровней. Пункты меню 1-4 уровней. Гиперссылки.
Основной текст.
Контрольные вопросы
1.Какие основы технологии CSS вам известны?
2.Что определяет таблица стилей?
3.Что определяет свойство в заголовке документа?