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

cd41b9466400f2e9e4e2a68fabd508f4.ppt

  • Количество слайдов: 29

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

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

Ссылка 1 Линк" src="https://present5.com/presentation/cd41b9466400f2e9e4e2a68fabd508f4/image-3.jpg" alt="Ссылки. Элемент A (якорь, anchor). . . Ссылка 1 Линк" /> Ссылки. Элемент A (якорь, anchor). . . Ссылка 1 Линк 2 Переход 3. . . Переход браузера. . . Некоторый заголовок. . . Какой-то текст. . .

Абзац

. . . метка 3

Лабораторная работа n Создание и использование якорей 1 Откройте файл lab-2 -1. html 2 Лабораторная работа n Создание и использование якорей 1 Откройте файл lab-2 -1. html 2 Создайте оглавление (строки в блоке div). С каждого пункта осуществляется переход к нужной статье (начинается с заголовка h 3)

текст. . . Это ссылка" src="https://present5.com/presentation/cd41b9466400f2e9e4e2a68fabd508f4/image-5.jpg" alt="Переход к другому документу. . . текст. . . Это ссылка" /> Переход к другому документу. . . текст. . . Это ссылка на 1. html Это ссылка на 2. html Это ссылка на 3. html Это ссылка на 1. html Это ссылка на 2. html Это ссылка на 3. html 2. html 1. html 3. html

Лабораторная работа n Создание и использование гиперссылок 1 2 3 4 Откройте файл index. Лабораторная работа n Создание и использование гиперссылок 1 2 3 4 Откройте файл index. html Оформите меню (строки в блоке div) в виде гиперссылок на файлы, соответствующие названиям пунктов меню Список файлов: centernews. html certificat. html events. html test. html distance. html Из всех файлов сделайте гиперссылки на файл index. html

текст Пример Ссылка" src="https://present5.com/presentation/cd41b9466400f2e9e4e2a68fabd508f4/image-7.jpg" alt="Переход к другому документу с меткой текст Пример Ссылка" /> Переход к другому документу с меткой текст Пример Ссылка на файл 1. html с меткой "а" В этом месте поставлена метка 1. html Ссылка на файл 1. html с меткой "а" Какой-то текст. . . В этом месте поставлена метка Сюда будет осуществлен переход

Лабораторная работа n Создание и использование гиперссылок и якорей 1 В любом файле, например, Лабораторная работа n Создание и использование гиперссылок и якорей 1 В любом файле, например, в index. html сделайте однудве гиперссылки на файл lab-2 -1. html с переходом к статье (заголовки h 3, имеющие якоря).

Примеры абсолютных ссылок на различные файлы по разным протоколам: протокол: //имя_сервера: порт/путь Ссылка по Примеры абсолютных ссылок на различные файлы по разным протоколам: протокол: //имя_сервера: порт/путь Ссылка по протоколу HTTP на стартовую страницу сайта: Пример 1 Ссылка на HTML файл по протоколу HTTP: Пример 2 Ссылка на PDF файл по протоколу HTTP: Пример 3 Ссылка на ZIP файл по протоколу HTTP с указанием порта: Пример 4 Ссылка на EXE файл по протоколу FTP: Пример 5 Ссылка на e-mail, при помощи протокола mailto: name@site. ru

Лабораторная работа n Создание и использование абсолютных гиперссылок 1 Используйте файл index. html 2 Лабораторная работа n Создание и использование абсолютных гиперссылок 1 Используйте файл index. html 2 Создайте гиперссылку ведущую на сайт www. specialist. ru 3 Создайте ссылку, которая позволит пользователю отправить email, используя почтовый клиент поумолчанию

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

Несколько типичных вариантов относительных ссылок href= Несколько типичных вариантов относительных ссылок href=". . /target. html" root target. html root folder current. html target. html folder 1 href=". . /folder/target. html" current. html

Примеры относительных адресов Примеры относительных адресов "info. html" "manual/info. html" "manual" ". . /help. html" ". . /project/first. html" ". . /about/contact. html" public_html about contacts. html manual demo index. html help. html images pic. gif manual info. html test. html "/" - корень сайта "/demo/" "/images/pic. gif" images //В заголовке! pic. gif project first. html index. html info. html

ссылка ссылка" src="https://present5.com/presentation/cd41b9466400f2e9e4e2a68fabd508f4/image-14.jpg" alt="В каком окне открывать ссылку? ссылка ссылка" /> В каком окне открывать ссылку? ссылка ссылка ссылка

Цвет ссылок • цвет неотработанной ссылки (пользователь еще не Цвет ссылок • цвет неотработанной ссылки (пользователь еще не "кликал" на ссылке). • цвет ссылки после щелчка (пользователь "кликнул" на ссылке; документ, на который указывает ссылка, грузится по сети). • цвет отработанной ссылки (пользователь "ходил" по этой ссылке). Цвета ссылок по-умолчанию: синий — цвет неотработанной ссылки красный — цвет активной ссылки пурпурный — цвет отработанной ссылки

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

Формат GIF-формат имеет три дополнительные возможности: • Мультипликация • Прозрачная графика • Чересстрочная развертка Формат GIF-формат имеет три дополнительные возможности: • Мультипликация • Прозрачная графика • Чересстрочная развертка

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

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

Как показать файл? <img src= Как показать файл?

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

Лабораторная работа n Вставка иллюстраций 1 Используйте любой файл, например, index. html 2 Вставьте Лабораторная работа n Вставка иллюстраций 1 Используйте любой файл, например, index. html 2 Вставьте изображения logo. gif и sticker 1. jpg 3 Подпишите изображения, используя атрибуты alt и title элемента img 4 Вставьте изображение mouslogo. gif, находящееся в папке images

Картинка как ссылка <img src= Картинка как ссылка

Задаем размеры и выравниваем картинку <img src=img. gif width= Задаем размеры и выравниваем картинку left - горизонтальное выравнивание изображения по левому краю right - горизонтальное выравнивание изображения по правому краю vspace hspace hspace vspace

" src="https://present5.com/presentation/cd41b9466400f2e9e4e2a68fabd508f4/image-25.jpg" alt="Фоновое изображение документа " /> Фоновое изображение документа

Лабораторная работа n Использование иллюстраций 1 Создайте гиперссылку на сайт http: //specialist. ru , Лабораторная работа n Использование иллюстраций 1 Создайте гиперссылку на сайт http: //specialist. ru , используя изображение logo. gif в качестве ссылки 2 Создайте гиперссылку на изображение images/b 3. jpg , используя изображение images/b 3 mini. jpg в качестве ссылки 3 Сделайте файл fon. gif фоном страницы

Карты изображений (опционально) <img src=img. gif usemap= Карты изображений (опционально) rect — прямоугольник. circle — окружность. poly — многоугольник. default — оставшаяся область. Дополнительные атрибуты: nohref alt title

Допустимые формы рабочих полей 0, 0 100 200 300 400 500 Допустимые формы рабочих полей 0, 0 100 200 300 400 500

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