Инфоурок / Информатика / Презентации / Презентация по информатики и ИКТ на тему "Создание фреймов. Организация ссылок" (11 класс)
Обращаем Ваше внимание: Министерство образования и науки рекомендует в 2017/2018 учебном году включать в программы воспитания и социализации образовательные события, приуроченные к году экологии (2017 год объявлен годом экологии и особо охраняемых природных территорий в Российской Федерации).

Учителям 1-11 классов и воспитателям дошкольных ОУ вместе с ребятами рекомендуем принять участие в международном конкурсе «Я люблю природу», приуроченном к году экологии. Участники конкурса проверят свои знания правил поведения на природе, узнают интересные факты о животных и растениях, занесённых в Красную книгу России. Все ученики будут награждены красочными наградными материалами, а учителя получат бесплатные свидетельства о подготовке участников и призёров международного конкурса.

ПРИЁМ ЗАЯВОК ТОЛЬКО ДО 15 ДЕКАБРЯ!

Конкурс "Я люблю природу"

Презентация по информатики и ИКТ на тему "Создание фреймов. Организация ссылок" (11 класс)




Московские документы для аттестации!

124 курса профессиональной переподготовки от 4 795 руб.
274 курса повышения квалификации от 1 225 руб.

Для выбора курса воспользуйтесь поиском на сайте KURSY.ORG


Вы получите официальный Диплом или Удостоверение установленного образца в соответствии с требованиями государства (образовательная Лицензия № 038767 выдана ООО "Столичный учебный центр" Департаментом образования города МОСКВА).

ДИПЛОМ от Столичного учебного центра: KURSY.ORG


библиотека
материалов
Создание фреймов. Организация ссылок
Основные тэги. Структура web-страницы.    название страницы     содержание ст...
Фреймы Для быстрой загрузки html-документа иногда его разделяют на части (2,...
Создание фрейма – для описания структуры документа используются теги: Контейн...
Атрибуты: 	cols – количество и ширина колонок при разбиении 	(пиксели, %, *);...
Атрибуты: 	name – имя фрейма; 	src – url документа, который будет загружаться...
Структура документа, разбитого на 4 фрейма:
Организация ссылок: гиперссылки и якоря Отличительная черта гипертекстовых до...
Создание гиперссылок и якорей – Парный тэг  - от англ. anchor – якорь. Атрибу...
Создание гиперссылок и якорей – Парный тэг  - от англ. anchor – якорь. атрибу...
Определение цвета гиперссылки – По умолчанию ссылки выделяются синим цветом и...
Использование карт-изображений для задания гиперссылок Замечание: В качестве...
Использование карт-изображений для задания гиперссылок Замечание: В качестве...
Использование карт-изображений для задания гиперссылок  - Создание карты изоб...
Создание карт изображений (на стороне клиента) Атрибуты 	src - задает url-адр...
Создание карт изображений (на стороне клиента) Атрибуты 	alt - альтернативный...
Структура документа, содержащего карту изображения:
Пример. Карта изображений и фреймы
18 1

Описание презентации по отдельным слайдам:

№ слайда 1 Создание фреймов. Организация ссылок
Описание слайда:

Создание фреймов. Организация ссылок

№ слайда 2 Основные тэги. Структура web-страницы.    название страницы     содержание ст
Описание слайда:

Основные тэги. Структура web-страницы. <html> <head> <title> название страницы </title> <meta content=“text/html; charset=windows-1251” http-equiv=“content-type”> </head> <body> содержание страницы </body> </html>

№ слайда 3 Фреймы Для быстрой загрузки html-документа иногда его разделяют на части (2,
Описание слайда:

Фреймы Для быстрой загрузки html-документа иногда его разделяют на части (2, 3 и так далее). Одна такая часть – фрейм (от англ. frame - рамка). В каждом фрейме отображается отдельная web-страница. Страница второго фрейма html-документ

№ слайда 4 Создание фрейма – для описания структуры документа используются теги: Контейн
Описание слайда:

Создание фрейма – для описания структуры документа используются теги: Контейнер <frameset> - Разбивает окно браузера на несколько фреймов; <frame> - Задание фрейма; Замечание: В отличие от обычной web-страницы, код html-страницы, содержащей информацию о разбивке документа на фреймы, не содержит элемента body!

№ слайда 5 Атрибуты: 	cols – количество и ширина колонок при разбиении 	(пиксели, %, *);
Описание слайда:

Атрибуты: cols – количество и ширина колонок при разбиении (пиксели, %, *); rows – количество и ширина горизонтальных блоков при разбиении (пиксели, %, *); frameborder – устанавливает или убирает разделительную линию между фреймами (0 или 1); border – задает толщину разделительной полосы; bordercolor – задает цвет разделительной полосы. Пример: <frameset rows=«20%,80%" cols=«20%,*" frameborder="1" border=«3" bordercolor=”blue”>…</frameset> Парный тэг <frameset> - разбивка на фреймы

№ слайда 6 Атрибуты: 	name – имя фрейма; 	src – url документа, который будет загружаться
Описание слайда:

Атрибуты: name – имя фрейма; src – url документа, который будет загружаться во фрейме первоначально (обязателен); marginheight – задает верхнее и нижнее поля для фрейма (пиксели); marginwidth – задает левое и правое поля для фрейма (пиксели). Пример: <frame src=“фон1.html” name=“frame1” marginheight=“10” marginwidth=“10”> Одиночный тэг <frame> - определение фрейма

№ слайда 7 Структура документа, разбитого на 4 фрейма:
Описание слайда:

Структура документа, разбитого на 4 фрейма: <frameset rows="30%,*" cols="60%,40%" frameborder="1" border="5" bordercolor=”blue”> <frame src="фон1.html" name="frame1" > <frame src="фон2.html" name="frame2" marginheight="10" marginwidth="30"> <frame src="фон3.html" name="frame3" marginheight="10" marginwidth="20"> <frame src="фон4.html" name="frame4 “ marginheight="20" marginwidth="20"> </frameset>

№ слайда 8 Организация ссылок: гиперссылки и якоря Отличительная черта гипертекстовых до
Описание слайда:

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

№ слайда 9 Создание гиперссылок и якорей – Парный тэг  - от англ. anchor – якорь. Атрибу
Описание слайда:

Создание гиперссылок и якорей – Парный тэг <a> - от англ. anchor – якорь. Атрибуты href – url источника, на который указывает ссылка; target –указатель, где открывается документ, на который указывает ссылка: _blank (в новом окне), _self (в том же фрейме) и другие (например, в созданном на странице фрейме – frame1 (имя фрейма)); name – имя якоря, для создания закладок в документе. Пример: <a href=”страница.html” target=”_blank”>новая страница </a>

№ слайда 10 Создание гиперссылок и якорей – Парный тэг  - от англ. anchor – якорь. атрибу
Описание слайда:

Создание гиперссылок и якорей – Парный тэг <a> - от англ. anchor – якорь. атрибут href <a href=“…”> текст ссылки </a> Гиперссылка (переход на другую страницу) Закладка (работа с одной страницей) атрибут target атрибут name <a href=”папка/страница1.html” target=”frame1 ”><img src=“рисунок.png”> </a> <a href=”#пример1”>смотрите пример1</a> … <a name=”пример1”> пример1</a>…

№ слайда 11 Определение цвета гиперссылки – По умолчанию ссылки выделяются синим цветом и
Описание слайда:

Определение цвета гиперссылки – По умолчанию ссылки выделяются синим цветом и подчеркиваются. Посещенные ссылки выделяются фиолетовым цветом. Однако цвет ссылок можно самостоятельно менять в атрибутах тэга <body>: link – цвет обычной ссылки; alink – цвет активной ссылки; vlink – посещенной ссылки. Например: <body bgcolor="aqua" text="blue" vlink="brown" alink="magenta">

№ слайда 12 Использование карт-изображений для задания гиперссылок Замечание: В качестве
Описание слайда:

Использование карт-изображений для задания гиперссылок Замечание: В качестве основы для создания карты-изображения можно использовать любой графический объект. Для создания гиперссылок можно использовать карты-изображения, на которых выделены области – указатели гиперссылок. С каждой такой «областью» связывают переход на определенный объект (например, новую web-страницу, отображаемую в соседнем фрейме).

№ слайда 13 Использование карт-изображений для задания гиперссылок Замечание: В качестве
Описание слайда:

Использование карт-изображений для задания гиперссылок Замечание: В качестве основы для создания карты-изображения можно использовать любой графический объект. Для создания гиперссылок можно использовать карты-изображения, на которых выделены области – указатели гиперссылок. С каждой такой «областью» связывают переход на определенный объект (например, новую web-страницу, отображаемую в соседнем фрейме).

№ слайда 14 Использование карт-изображений для задания гиперссылок  - Создание карты изоб
Описание слайда:

Использование карт-изображений для задания гиперссылок <map> - Создание карты изображений; <area> - Задание области на карте, которая будет являться ссылкой; Замечание: Элемент <area> содержится внутри элемента <map>. <image> - Вставка изображения (которое будет основой для карты изображений); для работы с картами-изображениями используются основные парные тэги:

№ слайда 15 Создание карт изображений (на стороне клиента) Атрибуты 	src - задает url-адр
Описание слайда:

Создание карт изображений (на стороне клиента) Атрибуты src - задает url-адрес графического файла ; usemap – определяет изображение как клиентскую карту изображений, обращается к имени карты (атрибут name элемента map). Пример: <img src="image1.jpg" align="right” alt=“ТПТТ” border =“1” usemap="#карта"> <map name=“карта”>… </map> Одиночный тэг <img> - Вставка изображения (формат gif, jpg, png) Парный тэг <map> - Создание карты изображений Атрибут name - имя карты изображения.

№ слайда 16 Создание карт изображений (на стороне клиента) Атрибуты 	alt - альтернативный
Описание слайда:

Создание карт изображений (на стороне клиента) Атрибуты alt - альтернативный текст для области; shape – задает форму области: rect (прямоугольник), circ (окружность), poly (многоугольник); coords – задает координаты области (пиксели): для shape=”rect” cords=”left,top,right,bottom”; для shape=”circ” cords=”centerX, centerY, radius”; для shape=”poly” cords=”x1,y1,x2,y2,…,xn,yn”; href – задает гиперссылку для данной области; target – указатель, где открывается документ. Парный тэг <area> - Задание области на карте для ссылки

№ слайда 17 Структура документа, содержащего карту изображения:
Описание слайда:

Структура документа, содержащего карту изображения: <img src="изображение.png" usemap="#карта"> <map name="карта"> <area alt="о Москве" shape="poly" coords=“400,450,500,450,400,350,350,350" href="Москва.html" target="frame2"> <area alt="о Питере" shape="circ" coords="100,100,40" href=“Питер.html" target="frame3"> </map>

№ слайда 18 Пример. Карта изображений и фреймы
Описание слайда:

Пример. Карта изображений и фреймы

Самые низкие цены на курсы переподготовки

Специально для учителей, воспитателей и других работников системы образования действуют 50% скидки при обучении на курсах профессиональной переподготовки.

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Обучение проходит заочно прямо на сайте проекта "Инфоурок", но в дипломе форма обучения не указывается.

Начало обучения ближайшей группы: 13 декабря. Оплата возможна в беспроцентную рассрочку (10% в начале обучения и 90% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru


Краткое описание документа:

Данная презентация предназначена для сопровождения лекционной теоретической части по теме «Фреймы. Организация ссылок» раздела «Язык разметки гипертекста HTML» (так же может быть использована для обобщения уже имеющихся знаний по указанной теме).

В презентации представлен базовый материал, необходимый для понимания ключевых понятий темы: фрейм, ссылка, якорь, карта-изображение. Здесь же описаны основные тэги и их атрибуты для создания фреймов и организации гиперссылок в HTML-документах, приведены примеры использования соответствующих элементов.

Общая информация

Номер материала: 264070
Курсы профессиональной переподготовки
133 курса

Выдаем дипломы установленного образца

Заочное обучение - на сайте «Инфоурок»
(в дипломе форма обучения не указывается)

Начало обучения: 13 декабря
(набор групп каждую неделю)

Лицензия на образовательную деятельность
(№5201 выдана ООО «Инфоурок» 20.05.2016)


Скидка 50%

от 13 800  6 900 руб. / 300 часов

от 17 800  8 900 руб. / 600 часов

Выберите квалификацию, которая должна быть указана в Вашем дипломе:
... и ещё 87 других квалификаций, которые Вы можете получить

Похожие материалы

Получите наградные документы сразу с 38 конкурсов за один орг.взнос: Подробнее ->>