Робимо сайт на html: як вставити картинки. Урок 3.

Відео: Урок по створенню сайту в блокноті (додаємо посилання і картинку)

У минулій статті ми розібралися, як можна створити таблицю і вставити малюнки фоном таблиці або окремих осередків, але часто малюнки це не тільки фон, а ще, і сам зміст сайту - фотографії, скріншоти, шпалери для робочого столу комп`ютера. Нам по кайфу навчитися вставляти малюнки в сторінки сайту і ми навчимося, всього за один урок.

Перше, що потрібно згадати з минулого уроку, це шляхи до файлів.
Ми не знаємо, як буде називатися наш сайт (раптом то доменне ім`я, яке ми хочемо, вже зайнято) і тому будемо використовувати тільки відносні посилання - вони вкорочені тобто відсутня ім`я нашого сайту із зазначенням протоколу.
Приклад абсолютної посилання: https://vash-sait.xosting.ru/images/kartinka.jpg
Приклад відносної посилання: images / kartinka.jpg
Легко бачити, що від адреси в другому випадку просто відрізана частина, де було ім`я сайту - використовувати відносні посилання потрібно завжди, абсолютні посилання тільки для обміну банерами тобто якщо ваша посилання вставлятиметься на чужому сайті вона повинна бути повною - абсолютної, а для свого сайту робите укорочені - відносні посилання.
Сподіваюся ви звернули увагу на посилання: https://vash-sait.xosting.ru/images/kartinka.jpg і вже можете сказати де малюнок ... можете? Спробую прояснити, на вашому сайті є папка images в цій папці є файл kartinka з розширенням .jpg

Якщо файл в кореневому каталозі, то шлях до файлу буде виглядати так - kartinka.jpg
А якщо в папці images є папка diz то шлях до файлу який лежить в папці diz буде виглядати так: images / diz / kartinka.jpg

Тег вставки зображень:
- це не парний тег, закривати нічого не потрібно, а шлях до картинки пишеться всередині лапок.
наприклад: gt; (Постарайтеся без зайвих пробілів до тегів і в лапках).

Відео: Як зробити свій сайт. Html (Урок 2) Вставляти фото

Ось тільки якщо ви на цьому зупиніться, то будете здивовані - чому картинка така велика? Як зменшити розмір картинки? Як зробити щоб не було рамки навколо картинки?

Все дуже просто - потрібно прописати ще й параметри малюнка.

1. Ширина: Width - означає те ж, що і для таблиці - довжина об`єкта, в нашому випадку зображення. Одиниці виміру раджу вибирати пікселі.
2. Висота: Height - висота зображення ..
приклад:
3. Align - вирівнювання, в основному використовується вирівнювання по центру align = center і top
4. border - рамка навколо малюнка, в деяких браузерах показується за замовчуванням, тому завжди ставимо нульову ширину рамки border = 0
5. ALT - текст який буде видно якщо в браузері відключені малюнки.
приклад:
Інші теги освоюйте в разі, якщо збираєтеся освоювати HTML професійно.

Отже ми отримали рядок для вставки в документ HTML - вашу сторінку з таблицею - можливо ваш логотип. Включаємо перегляд HTML - коду (1 урок) і вставляємо свій логотип в першу комірку таблиці.

Чи не показується картинка?
Натисніть оновити сторінку (Ctrl + R).

Так і не показується картинка?
А розширення точно jpg? Справа в тому, що розширень
зображень дуже багато, можливо, якщо ви малювали в Paint вставляєте свій диво-малюнок збережений у форматі jpg він теж не вставиться - його розширення записано великими літерами - JPG а для комп`ютера це вже різні імена файлів kartinka.jpg і kartinka.JPG

Як перевірити розширення файлу - якщо у вас не комп`ютері на включена функція показу розширень їх можна подивитися другим способом.

1. Натискаємо правою кнопкою миші на малюнку і вибираємо «властивості»

Робимо сайт: вибираємо «властивості»

2. У вікні натискаємо «змінити»

3. У вікні дивимося інформацію про файл.

Відео: Уроки по CSS / CSS3. Частина 10. Фон і множинні фони

Ось і все - дивимося розширення і записуємо правильне на адресу малюнка.

приклад:

Відео: How to HTML&CSS. Урок 3. Як використовувати зображення в якості посилання?

Прошу не відмовчуватися, якщо є питання, задавайте, якщо є розумні думки приєднуйтесь.