Урок "Теги html-зображення"

Post on 27 грудня 2017

by Super User

in Уроки HTML

Урок "Теги html-зображення"

Зображення додаються на веб-сторінку за допомогою непарного тегу <img>. Цей тег має один обов'язковий атрибут src, який вказує на файл-зображення - де він знаходиться і його назву.

Приклад:

<img src=″images/kartinka.jpg">

де images/ - папка, де знаходиться зображення, kartinka.jpg - назва зображення

Щоб змінити розмір зображення, вказати назву малюнка, вказати рамку, вказати місце на сторінці та ін., використовуються атрибути:

alt="Дід Мороз" 

width="200px" 

height="100px" 

align="bottom|left|middle|right|top" 

border="1px" 

hspace="5px" 

vspace="5px"

Приклад:

УВАГА! Важливо відрізняти, коли потрібно вказувати ВИРІВНЮВАННЯ і ОБТІКАННЯ!

Вирівнювання - використовується рідко і зачіпає лише один рядок тексту. Задається атрибутом align

Обтікання - використовується ДУЖЕ ЧАСТО і зачіпає абзац тексту. Задається атрибутом style="float:left" ( або right (вправо), none (без обтікання), inherit (обтікання як у зовнішнього елемента))

Приклад:

Завдання 1.

1. Створити веб-файл з іменем novy_rik.html

2. Вказати ім'я сторінки З Новим 2018 роком!

3. Набрати такий код:

<!DOCTYPE HTML>

<html>

<head>

<title>З Новим 2018 роком!</title>

</head>

<body>

<h1>З Новим роком</h1>

<p>Мама, тато, бабуся, дідусь!</p>

<p>Поздоровляю Вас з<br>

Новим 2018 роком!<br>

Бажаю щастя, здоров"я, всього найкращого!<br></p>

<p align="right">It-Scouts Олексій</p>

</body>

</html>

4. Подивитись у Хром, що вийшло.

Завдання 2.

1. Створити веб-файл з іменем novy_rik2.html Скопіювати в нього вміст файлу novy_rik.html із Завдання 1

2. Вирівняти по центру заголовок "З Новим роком" (атрибут align="center").

3. Після заголовка створити розділяючу горизонтальну лінію. Зробити її шириною 80% кольору Red товщиною 4 (тег <hr> з атрибутами width, color, size).

4. Текст "Мамо, тато, бабуся, дідусю!" зробити заголовком <h2></h2> і вирівняти по центру.

5. Після цього тексту створити розділяючу горизонтальну лінію. Зробити її шириною 80% кольору Red товщиною 4 (тег <hr> з атрибутами width, color, size).

6. Вказати фон сторінки GreenYellow (атрибут bgcolor). Можна, за бажанням, вказати інший колір зі сторінки https://colorscheme.ru/html-colors.html

7. Замість зображення 1.jpg вказати 1-2.png

7. Покращити заголовок "З Новим роком"

а) кожну літеру зробити іншим кольором, обравши колір зі сторінки https://colorscheme.ru/html-colors.html

б) вказати шрифт Comic Sans MS

8. Зробити підпис червоного кольору.

Завдання 3.

1. Скопіювати код із Завдання 2 у файл під назвою novy_rik3.html

2. Після заголовка "З Новим роком" створити 2 посилання: "Вітання" на файл novy_rik3.html, "Подарунки" на файл podarunki3.html (тег <a href="/...">...</>). Вирівняти їх по центру.

3. Скопіювати код із novy_rik3.html у файл під назвою podarunki3.html

4. Вказати назву сторінки "Подарунки - З Новим роком!". Замість тексту "Мама, тато, бабусь, дідусь" написати "Подарунки"

5. Знайти в Інтернет зображення з подарунками, які можна подарувати батькам. Зберегти їх у папку images

6. Вказати на сторінці, який подарунок кому хотілося б подарувати.

Див. Зразок: