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

Содержание

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

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

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

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

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

name="метка1">Какой-то текст
...

Абзац


...

Ссылки. Элемент 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

Слайд 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"


//В заголовке!

href="http://mysite.ru" >

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Атрибуты, явно задающие цвета ссылок




Атрибуты :

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


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

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

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

Чересстрочная

развертка

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

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

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

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

PNG-24:

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

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







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





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

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

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










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

hspace="8">

hspace

hspace

vspace

vspace

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




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




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

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





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

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

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

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

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

Похожие презентации

Основные направления реализации Киотского протокола к Рамочной конвенции ООН об изменении климата в России 219
Механизм оценки профессионального риска методом расстановки приоритетов 229
Технологическая линия производства ликера “Сантарино” 289
Спонсорское предложение 580
ЛЕКЦИЯ 2 Основы термодинамики 335
Компоненты СКС PCnet 280

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика