Рисунки и гиперссылки

Содержание

Слайд 2

Рисунки на Web-странице -------------------------------- Все понимают, что рисунки оживляют страницы сайта,

Рисунки на Web-странице --------------------------------

Все понимают, что рисунки оживляют страницы сайта, однако «все

хорошо в меру»
-у этого тэга нет конечного тэга, вся необходимая информация задается с помощью атрибутов.
Атрибуты:
Src – указатель на графический файл
Alt – выводит текст в тех местах, где должен располагаться рисунок
Height – высота области, где будет располагаться рисунок (в пикселах)
Width - ширина области, где будет располагаться рисунок
Border – задает рамку вокруг рисунка (в пикселах)
Примеры:

портрет

“большая
!!! В имени файла обязательно указывать расширение
Слайд 3

Рисунки на Web-странице ------------------------------ Примеры (если картинка лежит в вашей папке)

Рисунки на Web-странице ------------------------------

Примеры

(если картинка лежит в вашей папке)

(если

картинка лежит в поддиректории)

(Если картинка лежит на другом сайте, то путь прописывается полностью)
Слайд 4

Обтекание рисунков текстом Атрибут align есть и у картинок: Это означает,

Обтекание рисунков текстом
Атрибут align есть и у картинок:

align=left> Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.
Текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):
(1) -
(2) -
(3) -
Слайд 5

Обтекание рисунков текстом Кроме атрибута align для тэга можно ввести еще

Обтекание рисунков текстом
Кроме атрибута align для тэга можно ввести еще

несколько атрибутов:

(vspace - задает расстояние между текстом и рисунком в пикселях(по вертикали)

(hspace - тоже расстояние между текстом и рисунком, но по горизонтали.)
моя
(атрибут alt - краткое описание картинки.)

(атрибут width - ширина самой картинки (в пикселях)

(атрибут height - высота самой картинки (тоже в пикселях).

(атрибут border - рамка вокруг самой картинки (в пикселях).
Слайд 6

Практическая работа №5 (обтекание картинок текстом) Создайте новую Web-страницу в редакторе

Практическая работа №5 (обтекание картинок текстом)

Создайте новую Web-страницу в редакторе Блокнот
В

элементе Title укажите название Практическая работа №5
Цвет странички задайте на свой вкус
Заголовки страницы сделайте по образцу
Вставьте горизонтальные линии для разделения текстов
Картинки и тексты разместите, используя разные варианты выравнивания!!!
Слайд 7

Образец (для практической работы №5) ------------------------------------------------------

Образец (для практической работы №5) ------------------------------------------------------

Слайд 8

Гиперссылки ----------------------------- Наш сайт будет состоять из нескольких страниц и, конечно,

Гиперссылки -----------------------------

Наш сайт будет состоять из нескольких страниц и, конечно, нам придется

их связывать с помощью ссылок.
Первая страница имеет имя index.html и она открывается первой. С главной страницы по ссылкам мы можем перейти на следующие страницы и обратно.
Ссылкой на эти документы (или части нашей странички) может быть текст (фраза, слово), а может быть и картинка.
Можно выделить несколько видов гиперссылок:
Внутренние – связывают документы внутри одного и того же узла.
Внешние - связывают Web-страницу с документами другого Web-узла
Гиперссылка может указывать на почтовый адрес
Гиперссылка может указывать на метки (якоря) для перехода внутри документа
Слайд 9

Гиперссылки ------------------------- Тэг делает ссылкой заключенную в него картинку или фразу

Гиперссылки -------------------------

Тэг делает ссылкой заключенную в него картинку или фразу (текст).


(1) - мои фотографии
(2) - мои фотографии
(3) - мои фотографии
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html,
в случае (2) документ лежит в поддиректории /photos,
в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Слайд 10

Гиперссылки (ссылки на почтовый ящик) --------------------------- Ссылка на ваш почтовый ящик

Гиперссылки (ссылки на почтовый ящик) ---------------------------

Ссылка на ваш почтовый ящик прописывается немного иначе,

чем ссылка на другой документ (страницу, сайт):
pochta@mail.ru
Запомните это раз и навсегда и не пытайтесь ее прописать по другому.
У mailto есть еще некоторые опции:
?subject = Тема пиcьма
&Body = Текст вашего сообщения
&cc = copy@mail.ru,copy2@mail.ru (копии письма через запятую)
&bcc = hidden_copy@mail.ru,hidden_copy2@mail.ru
(скрытые копии письма через запятую)
Все вместе это будет выглядеть так:

pochta@mail.ru
Слайд 11

Гиперссылки (ссылка - рисунок) Принцип ссылки тот же, что и в

Гиперссылки (ссылка - рисунок)

Принцип ссылки тот же, что и в случае с

текстом, только в тэг вставляется не текст, а картинка:

Можно ссылаться не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:)
Например:
скачать песню
В этом случае у пользователя появится окошко, предлагающее сохранить ему музыкальный файл на его компьютере.
Слайд 12

Гиперссылки (ссылка на закладку в документе) Иногда необходимо создать ссылку внутри

Гиперссылки (ссылка на закладку в документе)

Иногда необходимо создать ссылку внутри Вашего документа

- закладку, в народе называемую якорем. Создаваться она может двумя способами.
Способ первый –
с помощью атрибута name (имя закладки) тэга A

Григорий Остер, "Вредные советы.


Ссылка на стих первый

Ссылка на стих второй

Ссылка на стих третий

Стих первый


текст стиха1

Стих второй


 текст стиха2

Стих третий


... текст стиха3

Слайд 13

Гиперссылки (ссылка на закладку в документе) Способ второй –атрибут - id,

Гиперссылки (ссылка на закладку в документе)


Способ второй –атрибут - id, который назначает

тэгу (элементу) уникальное имя в пределах одного документа

Григорий Остер, "Вредные советы.


Ссылка на стих первый

Ссылка на стих второй

Ссылка на стих третий

Стих первый


текст стиха1

Стих второй


 текст стиха2

Стих третий


... текст стиха3

Слайд 14

Гиперссылки ------------------------ Внутри тэга используются атрибуты, определяющие цвет гиперссылок. Link –

Гиперссылки ------------------------

Внутри тэга используются атрибуты, определяющие цвет гиперссылок.
Link – задает цвет

гиперссылок на всей Web-странице
Vlink - задает цвет посещенных гиперссылок
Alink - задает цвет активных гиперссылок
Пример:

Слайд 15

Практическая работа №6 задание1 Создайте текстовые гиперссылки на страницах Вашего сайта.

Практическая работа №6

задание1
Создайте текстовые гиперссылки на страницах Вашего сайта.
Убедитесь, что можно

перейти с любой стр на любую другую.
Проверьте в браузере работу гиперссылок
В тэге на каждой стр определите цвет гиперссылок:
Все гиперссылки на стр – белые; активные ссылки – красные; посещенные – серые
Задание2
Создайте страницу с несколькими текстовыми фрагментами,(файл «Григорий Остер»), озаглавьте их и создайте ссылки на эти фрагменты внутри этой страницы
Задание3
Замените текстовые ссылки на изображение цветных кнопок. Картинки кнопок возьмите в коллекции на диске F:/demo/pic/для www/кнопки
Пример

Задание4
Найдите информацию о тэге 
 и разместите ее на вашей странице
Слайд 16
Бегущая строка --------------------------------- Для формирования бегущей строки в HTML-документах используется тег
Бегущая строка
---------------------------------
Для формирования бегущей строки в HTML-документах используется тег …
.
Текст или картинка, находящийся внутри этого контейнера, перемещается по области прокрутки в соответствии с правилами, установленными атрибутами тэга.
 желаю счастья< /marquee >
Задание: 
Разместите на своей странице бегущие строки с различными атрибутами и различными текстами. 
Вместо текста можно использовать рисунки.
!!! Перечень атрибутов бегущей строки см далее.
- Предыдущая
Белорусская экономическая модель компонент идеологии Белорусского государства
Следующая -
Извлечение как единство процессов десорбции, растворения и диффузии. Теоретические основы извлечения
Похожие презентации
 Команда Бригантина. 5 ступень
 Язык и коммуникация в новых СМИ
 Введение в шаблоны и их классификация
 Дон Жуан. Основная концепция
 WORD-тын графикалык мумкіндіктері
 Программирование циклических алгоритмов
 Технология печатных процессов
 Своя игра: история ЭВМ. Интернет. Автомобиль и компьютер. Устройство ПК
 Маруся для уроков в начальной школе
 Обработка информации. Кодирование информации
 Логика и компьютер. Логические операции. Диаграммы Эйлера-Венна
 Научно-техническая информация
 Перевод чисел из позиционных систем счисления в десятичную
 Мой безопасный Интернет
 Состав компонентов ОС
 Лабораторная работа №7. Анализ статистических данных
 Интернет и его влияние на молодое поколение в эпоху иновационных технологий
 Язык Python в школьном курсе информатики
 Социальные сети - чума XXI века
 Структуры и модели данных (Лекция 3)
 Умножение решеткой и палочки Непера
 Технология MPLS
 Теоретические основы информатики
 Логические связки
 Этапы развития вычислительной техники
 Широкополостный доступ в Ка-диапазоне
 Презентация "Действия с фрагментом текста" - скачать презентации по Информатике
 Динамические массивы. Динамическая память на С++
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
 Обратная связь
Для правообладателей
 Email: Нажмите что бы посмотреть