Учітесь научайтесь і чужого не цурайтесь: 11 клас

ПРОграма

довідник з про зображення

с <H1><A HREF="l.html">Наш а продукція</АХ/Н1>

<H1><A HREF="2.html">Наш і замовники</АХ/Н1>

</BODY>

</HTML>

Створіть HTML-документ, в якому за допомогою атрибута

BACKGR0UND="1. jpg " тегу <BODY> оформіть тло сторінки.

<HTML>

<ТІТLЕ>Моя фірма</ТІТLЕ>

<Н1><А HREF="l.html">Наша продукція</А></Н1>

<H1><A HREF="2.html">Haші замовники</А></Н1>

</BODY>

</HTML>

Розглянемо HTML-документ, в якому використаємо малюнок fla-

mingo.jpg, де зображено фламінго. У тегу <IMG> задамо атрибути

WIDTH,HEIGHT та ALT.

<HTML>

<TITLE>Малюнок</TITLE>

<ВООУ BACKGROUND="flamingo.jpg">

</BODY>

</HTML>

left — зображення розміщене в лівій частині сторінки, текст

обтікає його з правого боку;

• righ t — зображення розміщене у правій частині сторінки,

текст обтікає його з лівого боку;

• top — обтікання немає, зображення розміщене в тексті, відпо-

відний рядок якого вирівняно за верхньою межею малюнка;

• bottom — обтікання немає, зображення розміщене в тексті,

відповідний рядок якого вирівняно за нижньою межею ма-

люнка;

• middle — обтікання немає, зображення розміщене в тексті,

відповідний рядок якого вирівняно по середній лінії малюнка.

За умовчанням атрибут ALIGN має значення left.

HSPASE-відступи бокових полів

VSPASE для верхнього і нижнього

полів.

<HTML>

<TITLE>МАЛЮНОК</TITLE>

Блакитні води океану та коралові рифи, ласкаве сонце і білосніжний прибережний пісок, фантастичний підводний світ і казкові птахи,

буяння барв сходів і заходів, непрохідні ліси і п'янкий запах орхідей...

Сприятливий клімат Острова Свободи дає можливість туристам відвідувати його цілий рік. Тут немає зайвої вологості, а спека не така страшна завдяки постійним подувам бризів із океану. Середньорічна температура повітря й води становить + 26—28°С.

</BODY>

</HTML>

Графічні гіперпосилання

Зображення, як і текст, можна використовувати як посилання.

Для цього тег <IMG> необхідно помістити між тегами <А> і </А>.

Зображення-посилання має синю рамку, а після наведення на нього вказівника миші той набуває такої самої форми, що й у ви-

падку текстового посилання.

Приклад 3.1. Використання зображень як посилань

Розглянемо приклад веб-сторінки, що містить малюнки, які

є гіперпосиланнями.

<HTML>

<TITLE>Птахи</TITLE>

<А HREF="gorobci.html"><IMG SRC="gorobci.jpg"></A>

</BODY>

</HTML>

Малюнок gorobci.jpg пов'язаний із файлом gorobci.html, а малюнок

flamingo.jpg — із файлом flamingo.html. На рис. 3.8 показано, який

вигляд має ця веб-сторінка у вікні браузера.

· disk - маркер у вигляді закрашеного кола;

· circle - маркер у вигляді незаповнених кола;

· square - маркер у вигляді закрашеного квадрата;

· decimal - звичайні десяткові числа, наприклад 1,2,3,4,5 і т. д.;

· upper-roman - великі римські цифри, типу I, II, III, IV, V і т.д. ;

· lower-roman - маленькі римські цифри типу i, ii, iii, iv, v і т.д.

· upper-alpha - великі літери A, B, C, D, E і так далі;

· lower-alpha - малі літери типу a, b, c, d, e і т.д .;

· none - маркер списку відсутнній.

створіть сторінку
Додайте зображення до веб-сторінки

Покрокова інструкція
Знайдіть зображення, яке можна використати для тла.
Вкажіть атрибут background для тегу body (ст.98).
 До проекту додайте файл bembi.jpg. Розмістіть це зображення на своїй сторінці, скориставшись різними варіантами розташування та вирівнювання зі ст.103

Бібліотеки зображень:

http://thepatternlibrary.com/

http://www.freepik.com/

http://www.designerspics.com/

http://www.pexels.com/

http://stokpic.com/

https://www.iconfinder.com/free_icons

Орієнтовний вигляд веб-сторінки

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Бембі</title>
  </head>
  <body background="flora.jpg">
    Мультфільм розпочинається з народження нового Принца лісу — оленятка Бембі. Разом зі своїми першими друзями — Топотуном і його сестрами — він вчиться ходити, говорити і знайомиться з іншими мешканцями лісу. Несподіваній для нього стає зустріч з Феліно — маленькою оленихою, яка вважає спілкування з Бембі дуже цікавим і веселим. Бембі, проте, зовсім не розділяє радості Фелін. Намагаючись наздогнати настирливу знайому, Бембі зустрічається зі своїм батьком — Великим Князем лісу — найповажнішим оленем у всьому лісі. 
  </body>
</html>

або


Практична робота 3


«Створення веб-сторінки з використанням каскадних



 аркушів стилю»




папка із матерілами до роботи 






Вариант 1





Відформатувати текст і картинки, використовуючи опис стилів:


Заголовок: колір – DarkGreen, розмір 40 пт, отступ 150 пікселів; тип шрифту Verdana 
Основний текст: колір – Navy, розмір 45 пт, тип шрифту Arial
Картинка : положення у тексті 










Вид документу:


















Вариант 2







Відформатувати текст і картинки, використовуючи опис стилів:








Заголовок: колір – BlueViolet, розмір 48 пт, отступ 200 пікселів;  тип шрифту Tahoma



Основной текст:   колір – Chocolate, розмір 34 пт,   тип шрифту Comic Sans MS




Картинка : положення у тексті




Вид документу:

Учітесь научайтесь і чужого не цурайтесь

Сторінки

середа, 23 жовтня 2019 р.

11 клас

Орієнтовний вигляд веб-сторінки

Немає коментарів:

Сторінки

середа, 23 жовтня 2019 р.

11 клас

Орієнтовний вигляд веб-сторінки

Немає коментарів:

середа, 23 жовтня 2019 р.