Сьогодні на уроці ми будемо вчитися створювати сайт у програмі Блокнот. Спочатку перегляньте навчальну презентацію:
За допомогою якої ж команди можна
помістити графічний елемент на html-сторінку?
Усі картинки, фотографічні знімки, ілюстрації, графіки, схеми вставляються
в документ за допомогою такого тега, який не вимагає закриваючої частини:
<img src="image.jpg">
Де «image.jpg» - це власне картинка-об’єкт з її іменем і розширенням.
Уся інформація, розташована між лапками є посиланням (тобто, шляхом до
картинки).
Порівняй!
Також важливо знати, що IMAGE.jpg, image.JPG, image.jpg і IMAGE.JPG - це
різні імена файлів і регістр імен завжди потрібно враховувати.
Після вставки картинки виникає питання: що потрібно зробити, аби увесь
текст розташовувався поруч із картинкою, а не тільки один його рядок?
Згадаємо про атрибут ALIGN, який відповідає за вирівнювання і
використовується з багатьма іншими тегами.
Атрибут «align» є і у картинок:
<img src="image.jpg" align="left">
У такому випадку картинка буде притиснута до лівого краю екрана, а текст
буде обтікати її праворуч.
Щоб розмістити картинку праворуч, а текст обтікав її ліворуч, треба
прописати Right":
<img src="image.jpg" align="right">
Але це ще не всі параметри. Текст може розташовуватися:
внизу картинки - <img src="image.jpg"
align="bottom">
посередині - <img src="image.jpg" align="middle">
вгорі - <img src="image.jpg" align="top">
Крім параметра «ALIGN» для тега < img > є ще кілька атрибутів:
VSPACE - визначає відстань між текстом і малюнком по вертикалі; задається в
пікселях.
Наприклад: <img src="image.jpg" vspace="20">, де
20 – це кількість пікселів екрана монітора.
HSPACE - задає відстань між текстом і малюнком по горизонталі. Відстань
задається теж у пікселях.
Наприклад: <img src="image.jpg" hspace="30">.
WIDTH - ширина самої картинки в пікселях. Якщо ширину не задавати, то вона
буде дорівнювати реальній ширині картинки.
HEIGHT - висота самої картинки в пікселях. Якщо висоту не задавати, то вона
буде дорівнювати реальній висоті картинки.
За допомогою тега IMG можна вставити також відеофільм, який запускатиметься
в момент відкриття web-сторінки:
<IMG DYNSRC=" адреса відеофайлу">.
Або
<video><source
src="URL"></video>
Для того, щоб задати фонове зображення додаємо атрибут background у
<BODY>
<BODY background="phone.gif">
Тег «audio» створює на сторінці блоковий елемент. За замовчуванням браузер
не буде відтворює аудіоролик. Що б він це зробив, в тезі audio необхідно
вказати особливий атрибут autoplay. Особливий, бо він не має значення. Досить
одного присутності цього атрибута в тезі, щоб він почав діяти.
ДОМАШНЄ ЗАВДАННЯ
1. Створити сайт "10 клас" у Блокноті (див. слайд 7 у презентації).
2. Додати текст та зображення.
Немає коментарів:
Дописати коментар