Вы находитесь на странице: 1из 3

ОИП Тема 2. Контейнеры тела документа.

Графика
 Понятие гиперссылок в www
 Внешние и внутренние гиперссылки
 Типы адресов в www
 Дополнительные атрибуты гиперссылок
 Типы изображений используемые в WWW
 Вставка изображений на страницу
 Атрибуты элемента img
 Новые элементы для изображений

Понятие гиперссылок в www


 Модель галстук-бабочка

Внешние и внутренние гиперссылки


Внутренняя (метка)
<div id=‘abc’>...</div>
id – Общий атрибут
<a href=‘#abc’>Прыгаем внутри</a>

Внешняя
<a href=‘file.html’>Загрузи файл</a>

Смешанная
<a href=‘file.html#abc’>Нажми меня</a>

Абсолютные
http://www.site.ru/index.html
ftp://site.ru/pub/install.exe
mailto:john@smith.com

Относительные
file.html
folder/file.html
../file.html
../folder/file.html
/images/logo.gif (только на сервере!)

Гиперссылки в новом окне


<a href=‘file.html’ target=‘_blank’>
Открываем ссылку в новом окне
</a>

Базовый target
<head> <base target=‘_blank’> </head>
<a href=‘file.html’ href=‘_self’> Нажми меня</a>

Типы изображений используемые в WWW


Формат Пример Использование
файла

GIF Анимированны
е изображения
на странице,
иконки,
пиктограммы,
логотипы

JPG Фотографии,
рендеры

PNG Схемы,
малоцветные
рисунки,
чертежи

Вставка изображений на страницу


Обязательные атрибуты
<img src=‘logo.gif’ alt=‘Логотип’ />

Другие атрибуты
width=‘100’
height=‘100’
border=‘1’

Общий атрибут
title=‘Логотип нашей компании’
Новые элементы для изображений
figure
figcaption

<figure>
<img src=‘logo.gif’ alt=‘Логотип’ />
<figcaption>
Логотип нашей компании
</figcaption>
</figure>

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

Создайте в текстовом редакторе файл index.html


Создайте навигационное меню на файлы в content/ (можно использовать файл заглушку zagl.html)
Пункт «Наш адрес» должен вести на адрес, указанный внизу страницы
Оформите текст «webmaster@surm.md» в виде ссылки на email адрес
Добавьте перед тэгом h1
imgs/logo.gif
логотип университета
Перед заголовком «Ближайшие курсы»
Добавьте картинку imgs/migrant.jpg с описанием
Используйте новые элементы HTML 5
Сделайте логотип ссылкой на сайт университета
Примерный результат можно увидеть: lab-2.png