Як без проблем вставити картинку в HTML

Як без проблем вставити картинку в HTML

Для створення веб-сторінок і навіть цілих сайтів, як відомо, використовується спеціальна мова розмітки HTML (Hypertext Markup Language), але без фотографій і різних зображень кожен сайт являв би собою просто структурований і нудний текст. Саме тому для додавання зображень на сайт використовується спеціальний код, який гранично простий у використанні і дозволяє як вставити картинку в HTML в конкретне місце на сторінці, так і використовувати її в якості фону.

З чого почати?

Для того щоб написати код, потрібно визначитися, в якій програмі це зробити. Зараз їх існує величезна кількість, однією з найвідоміших є NotePad++. Вона володіє низкою функцій, дуже корисних при написанні коду, дозволяє виявляти помилки і не заплутатися в тегах. Однак якщо у вас немає можливості вдатися до допомоги спеціалізованих програм, можете скористатися простим блокнотом, код від цього не зміниться.


Який тег нам знадобиться

Визначившись з програмою для написання коду, потрібно зрозуміти, що в ній писати, як вставити картинку в HTML в блокноті або будь-якій іншій програмі. Почати слід з теґу < img/>. Саме цей тег оголошує картинку в HTML-документі, він одиночний і не вимагає закриття.

А що далі?

Ми оголосили в коді, що збираємося використовувати зображення, але ми його ще не вказали. Так як вставити картинку в HTML? Для цього нам знадобиться атрибут src, який використовується з нашим тегом. Цей атрибут задає місцезнаходження нашої картинки незалежно від того, чи знаходиться вона на якомусь сайті або на нашому комп 'ютері.

  • Якщо зображення розташовуватиметься на сторонньому сайті, то наш код буде виглядати наступним чином:

<img src="/"//coder-booster.ru/images/main-logo.png"" />

  • У разі ж знаходження картинки в тій же папці, що і наш HTML-файл, код виглядатиме так:

<img src="/"название картинки.jpg"" />

<img src="/"название картинки.jpg"" alt=""описание картинки"" />

<img src="/"название картинки.jpg""
alt=""описание картинки"" title=""всплывающее описание""  />


<img src="/"название картинки.jpg"" width=""100px"" height=""25%"" />

<body background=""изображение для фона.jpg"">
...
</body>

<img src="/"название картинки.jpg"" align=""left"" />
или
<img src="/"название картинки.jpg"" align=""right"" />

<img src="/"первая картинка.jpg"" align=""left"" />
<img src="/"вторая картинка.jpg"" align=""right"" />