Основы HTML и CSS Ссылки и иллюстрации

Содержание

1. Основы HTML и CSS Ссылки и иллюстрации
2. Ссылки и иллюстрации: Механизмы адресации на ресурсы
3. Переход браузера...Ссылка 1 Линк 2Переход 3.........Некоторый заголовок......Какой-то текст...Абзац...Ссылки. Элемент A (якорь, anchor) метка3
4. Лабораторная работаСоздание и использование якорей
5. Переход к другому документуЭто ссылка на 1.htmlЭто
6. Лабораторная работаСоздание и использование гиперссылок
7. Переход к другому документу с меткойтекст ПримерСсылка
8. Лабораторная работаСоздание и использование гиперссылок и якорей
9. Примеры абсолютных ссылок на различные файлы по
10. Лабораторная работаСоздание и использование абсолютных гиперссылок
11. Несколько типичных вариантов относительных ссылок href="/target.html"href="folder/target.html"
12. Несколько типичных вариантов относительных ссылок href="/../target.html"folder1href="../folder/target.html"
13. Примеры относительных адресов "info.html""manual/info.html""manual""../help.html""../project/first.html""../../about/contact.html" "/" - корень сайта"/demo/" "/images/pic.gif" //В заголовке!public_htmlabout contacts.html manualdemo index.html help.html images pic.gif manual info.html test.htmlimages pic.gifproject first.htmlindex.htmlinfo.html
14. В каком окне открывать ссылку?ссылка ссылка
15. Цвет ссылок цвет неотработанной ссылки (пользователь еще
16. Атрибуты, явно задающие цвета ссылок Атрибуты
17. Формат GIF GIF-формат имеет три дополнительные возможности: Мультипликация Прозрачная графика Чересстрочная развертка
18. Формат JPG Размер 600х450 пикселейКачество высокое (High
19. Формат PNG PNG-8: индексированная цветовая палитра.поддержка прозрачности.PNG-24:полноцветный.полупрозрачность задается альфа-каналом.
20. Как показать файл?
21. Подписываем картинку Да, и ссылка тоже...
22. Лабораторная работаВставка иллюстраций
23. Картинка как ссылка
24. Задаем размеры и выравниваем картинку hspacehspacevspacevspaceleft -
25. Фоновое изображение документа
26. Лабораторная работаИспользование иллюстраций
27. Карты изображений (опционально) rect — прямоугольник.circle — окружность.poly — многоугольник.default — оставшаяся область.Дополнительные атрибуты:nohref alttitle
28. Допустимые формы рабочих полей
29. ИтогиМеханизм адресации на ресурсы в internet в
30. Скачать презентанцию

Ссылки и иллюстрации: Механизмы адресации на ресурсы в Internet. Реализация механизма в языке HTML Создание гиперссылок с помощью элемента A и его атрибутов. Типы ссылок Размещение иллюстрации на web-странице. Типы файлов

Главная
Разное
Основы HTML и CSS Ссылки и иллюстрации

Слайды и текст этой презентации

Слайд 1Основы HTML и CSS Ссылки и иллюстрации

Слайд 2Ссылки и иллюстрации:
Механизмы адресации на ресурсы в Internet. Реализация

механизма в языке HTML
Создание гиперссылок с помощью элемента A

и его атрибутов. Типы ссылок
Размещение иллюстрации на web-странице. Типы файлов иллюстраций. Элемент IMG и его атрибуты
Распределение иллюстраций по страницам сайта: приемы и советы

Ссылки и иллюстрации: Механизмы адресации на ресурсы в Internet. Реализация механизма в языке HTML Создание гиперссылок с

Слайд 3Переход браузера
...
Ссылка 1
Линк 2
Переход 3
...
...
...
Некоторый

заголовок
...
...
Какой-то текст
...
Абзац
...
Ссылки. Элемент A (якорь, anchor)
метка3

Слайд 4Лабораторная работа
Создание и использование якорей

Слайд 5Переход к другому документу
Это ссылка на 1.html

Это ссылка на 2.html

Это

ссылка на 3.html
1.html
3.html
2.html
... текст ...

Это ссылка на

1.html
Это ссылка на 2.html
Это ссылка на 3.html

Слайд 6Лабораторная работа
Создание и использование гиперссылок

Слайд 7Переход к другому документу с меткой
текст
Пример

Ссылка

на файл 1.html с меткой "а"
В этом месте

поставлена метка

Ссылка на файл 1.html с меткой "а"

Какой-то текст...
...
...
...
В этом месте поставлена метка

1.html

Сюда будет осуществлен переход

Слайд 8Лабораторная работа
Создание и использование гиперссылок и якорей

Слайд 9Примеры абсолютных ссылок на различные файлы по разным протоколам:

протокол://имя_сервера:порт/путь

Ссылка по

протоколу HTTP на стартовую страницу сайта: Пример 1

Ссылка на HTML

файл по протоколу HTTP: Пример 2

Ссылка на PDF файл по протоколу HTTP: Пример 3

Ссылка на ZIP файл по протоколу HTTP с указанием порта: Пример 4

Ссылка на EXE файл по протоколу FTP: Пример 5

Ссылка на e-mail, при помощи протокола mailto: name@site.ru

Примеры абсолютных ссылок на различные файлы по разным протоколам:протокол://имя_сервера:порт/путьСсылка по протоколу HTTP на стартовую страницу сайта: Пример

Слайд 10Лабораторная работа
Создание и использование абсолютных гиперссылок

Слайд 11Несколько типичных вариантов относительных ссылок
href="target.html"
href="folder/target.html"

Слайд 12Несколько типичных вариантов относительных ссылок
href="../target.html"
folder1
href="../folder/target.html"

Слайд 13Примеры относительных адресов
"info.html"
"manual/info.html"
"manual"
"../help.html"
"../project/first.html"
"../../about/contact.html"

"/" - корень сайта
"/demo/"
"/images/pic.gif"

//В

заголовке!

public_html
about
contacts.html
manual
demo
index.html
help.html
images
pic.gif
manual
info.html
test.html
images
pic.gif
project
first.html
index.html
info.html

Слайд 14В каком окне открывать ссылку?
ссылка

ссылка

Слайд 15Цвет ссылок
цвет неотработанной ссылки (пользователь еще не "кликал" на

ссылке).

цвет ссылки после щелчка (пользователь "кликнул" на ссылке; документ,

на который указывает ссылка, грузится по сети).

цвет отработанной ссылки (пользователь "ходил" по этой ссылке).

Цвета ссылок по-умолчанию:

синий — цвет неотработанной ссылки красный — цвет активной ссылки пурпурный — цвет отработанной ссылки

Цвет ссылок цвет неотработанной ссылки (пользователь еще не

Слайд 16Атрибуты, явно задающие цвета ссылок

vlink="purple">

Атрибуты :

link

— цвет неотработанной ссылки alink — цвет активной ссылки vlink — цвет отработанной ссылки

Атрибуты, явно задающие цвета ссылок Атрибуты : link — цвет неотработанной ссылки alink — цвет активной

Слайд 17Формат GIF
GIF-формат имеет три дополнительные возможности:

Мультипликация

Прозрачная графика

Чересстрочная развертка

Слайд 18Формат JPG
Размер 600х450 пикселей
Качество высокое (High 60)
Файл - 44

КБ
Качество низкое (Low 5)
Файл - 14 КБ

Слайд 19Формат PNG
PNG-8:

индексированная цветовая палитра.
поддержка прозрачности.

PNG-24:

полноцветный.
полупрозрачность
задается альфа-каналом.

Формат PNG PNG-8: индексированная цветовая палитра.поддержка прозрачности.PNG-24:полноцветный.полупрозрачность задается альфа-каналом.

Слайд 20Как показать файл?

Слайд 21Подписываем картинку

глобус">

Да, и ссылка тоже...

Подписываем картинку Да, и ссылка тоже...

Слайд 22Лабораторная работа
Вставка иллюстраций

Слайд 23Картинка как ссылка

Слайд 24Задаем размеры и выравниваем картинку

align="left" hspace="8">
hspace
hspace
vspace
vspace
left - горизонтальное выравнивание изображения по левому краю

right - горизонтальное выравнивание изображения по правому краю

Задаем размеры и выравниваем картинку hspacehspacevspacevspaceleft - горизонтальное выравнивание изображения по левому краю right - горизонтальное выравнивание

Слайд 25Фоновое изображение документа

Слайд 26Лабораторная работа
Использование иллюстраций

Слайд 27Карты изображений (опционально)

href="file1.html">

rect — прямоугольник.
circle — окружность.
poly — многоугольник.
default — оставшаяся

область.

Дополнительные атрибуты:
nohref
alt
title

Слайд 28Допустимые формы рабочих полей

Слайд 29Итоги
Механизм адресации на ресурсы в internet в языке HTML реализован

в виде ссылок.
Гиперссылки могут осуществлять адресацию внутри файла или на

внешний ресурс.
Гиперссылки на внешний файл бывают абсолютные и относительные.
Используется три графических формата: gif, jpg, png.
Изображение может быть ссылкой.
Карты изображений - сочетание использования одного изображения и нескольких ссылок.

ИтогиМеханизм адресации на ресурсы в internet в языке HTML реализован в виде ссылок.Гиперссылки могут осуществлять адресацию внутри

Скачать презентацию

Разделы презентаций

Основы HTML и CSS Ссылки и иллюстрации

Содержание

Слайды и текст этой презентации

Слайд 1Основы HTML и CSS Ссылки и иллюстрации

Слайд 2Ссылки и иллюстрации: Механизмы адресации на ресурсы в Internet. Реализация

механизма в языке HTML Создание гиперссылок с помощью элемента A

Слайд 3Переход браузера...Ссылка 1 Линк 2Переход 3.........Некоторый

заголовок......Какой-то текст...Абзац...Ссылки. Элемент A (якорь, anchor) метка3

Слайд 4Лабораторная работаСоздание и использование якорей

Слайд 5Переход к другому документуЭто ссылка на 1.htmlЭто ссылка на 2.htmlЭто

ссылка на 3.html1.html3.html2.html... текст ... Это ссылка на

Слайд 6Лабораторная работаСоздание и использование гиперссылок

Слайд 7Переход к другому документу с меткойтекст ПримерСсылка

на файл 1.html с меткой "а" В этом месте

Слайд 8Лабораторная работаСоздание и использование гиперссылок и якорей

Слайд 9Примеры абсолютных ссылок на различные файлы по разным протоколам:протокол://имя_сервера:порт/путьСсылка по

протоколу HTTP на стартовую страницу сайта: Пример 1Ссылка на HTML

Слайд 10Лабораторная работаСоздание и использование абсолютных гиперссылок

Слайд 11Несколько типичных вариантов относительных ссылок href="target.html"href="folder/target.html"

Слайд 12Несколько типичных вариантов относительных ссылок href="../target.html"folder1href="../folder/target.html"

Слайд 13Примеры относительных адресов "info.html""manual/info.html""manual""../help.html""../project/first.html""../../about/contact.html" "/" - корень сайта"/demo/" "/images/pic.gif" //В

заголовке!public_htmlabout contacts.html manualdemo index.html help.html images pic.gif manual info.html test.htmlimages pic.gifproject first.htmlindex.htmlinfo.html

Слайд 14В каком окне открывать ссылку?ссылка ссылка

Слайд 15Цвет ссылок цвет неотработанной ссылки (пользователь еще не "кликал" на

ссылке). цвет ссылки после щелчка (пользователь "кликнул" на ссылке; документ,