Главная » Статьи » Программирование » Уроки HTML

Добавление картинок

В прошлой статье вы узнали как оформлять текст. Но согласитесь , что текст без картинок очень скучен. В этой статье вы узнаете о теге <img>, он предназначен для вывода на страницу изображений в формате JPEG, PNG и GIF.

Тег <img> немного не стандартен и не требует закрывающих тегов. То есть для вывода изображения , вам нужно написать примерно следующее :

<img src=»диск Д / изображение 1″>

И вы увидите изображение.

Поговорим об атрибутах тега , наверное я буду перечислять их табличным способом , как в прошлой статье про текст. Так ведь удобнее , не правда ли ?

Heigth=»100px» Высота изображения. Указывается в пикселях и в процентах , в данный момент я указал 100 пикселей.
Width=»95%» Ширина изображения. Указана в процентах.
hspase = «2» Горизонтальный отступ от изображения до окружающего контента.
src=»путь к изображению» Путь к изображению.
Думаю что на данном этапе вам будет достаточно этих атрибутов.

Давайте добавим несколько картинок в Html файл. Для этого создадим какую-то папку, я к примеру назову ее Image to html .

Создадим в этой папке еще одну папку с названием Img , зальем в нее несколько картинок с интернета.

Затем в папке «Image to html» с помощью блокнота создадим страницу с названием «index.html»

В нее нужно записать следующий код :



<html>

<head><title> тест тега </title></head>

<body>

<img src=»img/1.jpeg»>

<br>

<img src=»/img/2.jpeg»>

</body>

</html>

За счет того что у меня картинки изначально разного размера , они смотрятся не красиво.

Давайте это исправим. У меня вторая картинка меньше, а значит первую картинку нужно тоже уменьшить. Поэтому я смотрю ширину второй картинки.

Сделать это можно в проводнике предварительно кликнув мышкой по картинке.

Затем я захожу в редактор и исправляю наш код :

<html>

<head><title> тест тега </title></head>

<body>

<img width =»750px» src=»img/1.jpeg»>

<br>

<img src=»/img/2.jpeg»>

</body>

</html>

Таким образом я запрещаю расширяться нашей картинке более чем на 750 пикселей. И вот результат :

На этот раз все вышло четко , картинки сравнялись. Попрактикуйтесь , поэксперементируйте, ведь все приходит с опытом. До следующих статей.

Категория: Уроки HTML | Добавил: Nikitos (2017-11-05)
Просмотров: 120 | Теги: оформление сайта, Добавляем картинки | Рейтинг: 0.0/0

Поддержите проэкт комментариями, покажите что мы не зря стараемся. Добавив нам мотивации писать больше и чаще. Мы тратим средства на содержание ресурса,но ничего с этого не имеем. У вас есть возможность поучаствовать в финансировании проэкта ;)

Имя *:
Email *:
Код *:
Всего комментариев: 0