Урок "html-фрейми"

Post on 26 грудня 2017
by Super User

Як створити сторінку із фреймами? Хоча тег <frame> застарілий, його варто вивчити, щоб зрозуміти будову html-сторінок.

Детальніше про створення фреймів: http://s5.skill.in.ua/HTML_Zavdania/help/help_16.html

Фрейми - застарілий тег, не використовується у HTML5.

Завдання "Новорічна листівка"

Крок 1.
Створюємо файл index.html, у якому вікно броузера ділимо на два горизонтальні фрейми:
- верхній фрейм містить файл "up.html" (його потрібно створити) і має ширину 100 пікселів
- нижній фрем - файл "down.html", який займає всю частину вікна, що залишилась.

Верхній фрейм містить:
- текст "З новим роком!" тегом заголовка першого рівня (<h1>) і посиланням на нижній фрейм
- два посилання на html-файли: файл з привітанням happy-new-year2018.html і файл з подарунками present2018.html
Вміст вирівняти по центру.
Вказати базовий фрейм для відкриття посилань  <base target="down">
Фон сторінки GreenYellow

Нижній фрейм down.html (головний) містить зображення 1-2.png, яке вирівняно по центру і має розмір 500px.
Фон сторінки GreenYellow

Результат:


Крок 2.
Створюємо вміст файлів happy-new-year2018.html і файл з подарунками present2018.html

happy-new-year2018.html - файл з привітанням.
У ньому розмістити:
1) зображення 1-2.png з атрибутами: обтікання тексту зліва, розмір 300px
2) абзац "Вітаю з Новим 2018 роком";
3) у абзаці 2018 замінено на зображення 3.png , яке має вирівнювання middle;
4) внизу - підпис "Від ... ", вирівнювання вправо.
Результат:


present2018.html - файл з подарунками. Він містить:
зображення подарунка для члена сім'ї і текст - для кого подарунок призначений.
Результат:

 

Свіже