Верстка_Лекция2

Ссылки и иллюстрации,
Списки и таблицы

Ссылки
Механизмы адресации на ресурсы в Интернет.

Стр.1 Стр.2

<a href="URL">текст ссылки</a>

<a href = “1.html”>
<a href = “http://supersite.ru/1.html”>
<a href = “http://supersite.ru/1.html#super_mesto”>

Ссылки
Механизмы адресации на ресурсы в Интернет.
• Использование абсолютных ссылок
<a href="http://htmlbook.ru">Изучение HTML</a>

• Ссылки относительно текущего документа
<a href="Ссылаемый документ.html">Ссылка</a>
или
<a href=“../../Ссылаемый документ.html">Ссылка</a>

• Ссылки относительно корня сайта

<a href="/course/">Курсы</a>

Ссылки
Виды ссылок
Непосещенная ссылка. Такое состояние характеризуется для ссылок, которые еще не
открывали. По умолчанию непосещенные текстовые ссылки изображаются синего
цвета и с подчеркиванием.

Активная ссылка. Ссылка помечается как активная в момент ее открытия. Поскольку
время между нажатием на ссылку и началом загрузки нового документа достаточно
мало, подобное состояние ссылки весьма кратковременно. Активной ссылка
становится также, при ее выделении с помощью клавиатуры. Цвет такой ссылки по
умолчанию красный.

Посещенная ссылка. Как только пользователь открывает документ, на который
указывает ссылка, она помечается как посещенная и меняет свой цвет на
фиолетовый, установленный по умолчанию.

Ссылки
Правило вложения ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Ошибки при использовании ссылок</title>
</head>
<body>
<a href="lion.html"><h1>Охота на льва</h1></a>
<h1><a href="lion.html">Как поймать льва в пустыне</a></h1>
</body>
</html>

Ссылки
Атрибуты ссылок
<a target="имя окна">...</a>
target
•_blank — загружает страницу в новое окно браузера.
•_self — загружает страницу в текущее окно (это значение задается по умолчанию).
•_parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как
_self.
•_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то
это значение работает как _self.

<a title="текст">...</a>

<a href="mailto:vlad@htmlbook.ru">электронной почте</a>

Ссылки
Якоря

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Быстрый переход внутри документа</title>
</head>
<body>
<p><a name="top"></a></p>
<p>...</p>
<p><a href="#top">Наверх</a></p>
</body>
</html>

Изображения
Размещение иллюстрации на веб-странице

Типы файлов иллюстраций:

•GIF (Graphics Interchange Format) — формат графических файлов, широко применяемый при
создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные
области, при этом сохраняя детали изображения.

•JPEG (Joint Photographic Experts Group) — популярный формат графических файлов, широко
применяемый при создании сайтов и для хранения изображений. JPEG поддерживает 24-
битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными.

•PNG-8 (Portable Network Graphics) — формат по своему действию аналогичен GIF. По заверению
разработчиков использует улучшенный формат сжатия данных, но как показывает практика, это
не всегда так.

•PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета Подобно
формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8,
сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или
иллюстрациях

Изображения
Добавление изображения на страницу

Формат
<img src="URL" alt="альтернативный текст">

Размеры рисунка
<img src="URL" width="100" height="100" alt=«Описание">

Таблицы
Использование таблиц.

Таблицы
Создание таблиц

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
<html>
<head>
<title>Тег TABLE</title>
</head>
<body>
<table border="1" width="100%" cellpadding="5">
<tr> <th>Ячейка 1</th> <th>Ячейка 2</th> </tr> <tr>
<td>Ячейка 3</td> <td>Ячейка 4</td> </tr>
</table>
</body>
</html>

Таблицы
Атрибуты тега <table> и <td>

<table> <td>
align align
bgcolor bgcolor
border colspan
cellpadding height
cellspacing cellspacing
cols rowspan
rules valign
width width

Таблицы
Вложенные таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Вложенные таблицы</title>
</head>
<body>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="150" valign="top" bgcolor="#f0f0f0">
<table width="100%" cellpadding="2" cellspacing="1">
<tr><td bgcolor="#ffffff">Lorem</td></tr>
<tr><td bgcolor="#ffffff">Ipsum</td></tr>
<tr><td bgcolor="#ffffff">Dolor</td></tr>
<tr><td bgcolor="#ffffff">Sit</td></tr>
<tr><td bgcolor="#ffffff">Amet</td></tr>
</table>
</td>
<td valign="top" bgcolor="#ffffee">Lorem ipsum …</td>
</tr>
</table>
</body>
</html>

Таблицы
Особенности таблиц

Вложенные таблицы
Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для
представления сложных данных или в том случае, когда одна таблица выступает в роли
модульной сетки, а вторая, внутри нее, в роли обычной таблицы.

Размеры таблицы
Размеры таблицы изначально не устанавливаются и вычисляются на основе содержимого ячеек.
В итоге суммарная ширина таблицы складывается из следующих параметров:
ширина содержимого ячеек;
толщина всех границ между ячеек;
поля вокруг содержимого, устанавливаемые через атрибут cellpadding;
расстояние между ячейками, которое определяется значением cellspacing.

Порядок ячеек
Основой таблицы выступает строка и ячейка, формирование таблицы происходит слева направо

Верстка_Лекция2

More Related Content

What's hot

Viewers also liked

Similar to Верстка_Лекция2

More from itc73

Верстка_Лекция2