N/Спейсследващ слайд

Pпредишен слайд

Oвсички слайдове

ctrl+left clickувеличава елемента

If you want print version => add '?print-pdf'
at the end of slides URL (remove '#' fragment) and then print.
Like: https://wwwcourses.github.io/...CourseIntro.html?print-pdf

HTML Iframes

Създаден за

Създаден от

Ива Е. Попова

2015 - 2025,

Какво е iframe?

Дава възможност за вмъкване на друга HTML страница в нашия документ.
Не бива да се бърка с frameset елемента, който не се поддържа вече в HTML 5!

Demo

Общ синтаксис


            <iframe src="URL">
                Съобщение, което ще се изпише ако браузъра не поддържа iframes.
            </iframe>

HTML <iframe> Tag (w3schools)

Основни атрибути

src: задава URL на документа, който ще се зареди във фрейма.
height: Задава височината на фрейма. В пиксели.
width: Задава широчината на фрейма. В пиксели.
name: Задава име на фрейма. Използва се за да отворим линк в дадения фрейм.
sandbox: Задава ограничения върху поведението на документа, който се зарежда във фрейма.

Iframe, в който се отваря съдържанието на различни линкове

Вмъкване на карта от Google Maps

За да намерим URL-а на отрязъка от картата, която желаем:

Намираме желания адрес в maps.google.com
От менюто избираме: "Share"
В показания модален прозорец избираме таба "Embed"
Копираме HTML кода даден в текстовото поле.
В нашия HTML файл, поставяме копираният код и редактираме атрибутите на iframe-a (ако е необходимо).

Резултат

Вмъкване на YouTube Видео

Кликваме с десния бутон на мишката, върху youtube видеото, което желаем да използваме.
От появилото се меню избираме: "Copy embed code"
В нашия HTML файл, поставяме копираният код и редактираме атрибутите на ifram-a
За да има възможност видеото да се гледа на цял екран, трябва да присъства атрибута allowfullscreen

Повече настройки за това как да се изобрази YouTube видео: YouTube Embedded Players and Player Parameters

Пример

iframe, в който се отваря съдържанието на различни видео клипове:

See the Pen youtubeTargetedInFrame by Iva Popova (@webdesigncourse) on CodePen.

Вмъкване на Pen от codepen.io

Влезте във страницата на избрания Pen.
В долния ляв край на страницата има бутон 'Embed', който натискате.
За да ползвате генериран от codepen.io iframe елемент, изберете таба
```
iframe
```
Копирате кодът във полето и го поставяте на желаното от вас място в страницата.

Повече информация за вграждане на Pens :

Embedded Pens - CodePen Blog

Упражнения

Задача 1: SelectedCodepens

Условието на задачата е дадено тук: SelectedCodepens
Работете във файл selectedCodepens.html в папка /pages:
Добавете линк към решението във файла index.html


            ipHW/
            ├── images
            │   └── ..
            ├── index.html
            ├── pages
            │   ├── CV.html
            │   ├── personalPage.html
            │   └── selectedCodepens.html

These slides are based on

customised version of

Hakimel's reveal.js

framework