Лого www.SiteHere.ru

Урок 4. Изображения

lesson4

Здравствуй, уважаемый читатель.

В данной статье мы поговорим о изображениях. После прохождения урока вы узнаете как вставить изображение на сайт, изменить его положение относительно текста, а также изменять его размер.


Это четвертая статья, посвященная изучению html. Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки

Теория и практика

Благодаря изображениям наша страница становится красочной и привлекательной. Изображений на сайте очень много. Но не все изображения оптимальны для сайта. Некоторые необходимо оптимизировать, чтобы они загружались максимально быстро. Но об этом мы поговорим в следующих статьях. Изображение вставляется с помощью тега <img>. Но также при вставке изображения необходимо указывать его параметры(ширину и высоту) и адрес где лежит изображение.

Сначала посмотрим как это выглядит в коде:

1
<img src="fruits.jpg" alt="Фрукты" width="246" height="205">

Как картинка выглядит в браузере:

Изображение в Firefox

Сейчас давайте разберемся с атрибутами по порядку:

src="fruits.jpg" — указывает где находится изображение. Обязательно необходимо указывать с расширением изображения! У нас расширение это ".jpg". В данном случае оно находится в одной папке с html страницей. Если бы это изображение было в папке images, то в данном атрибуте необходимо было написать src="images/fruit.jpg".

width="246" — указывает ширину изображения в пикселях.

height="205" — указывает высоту изображения в пикселях.

alt="Фрукты" — это альтернативный текст для изображения. Он очень важен при индексировании вашего сайта роботом. !!! Обязательно прописывайте его для каждого изображения, не ленитесь!

Мы рассмотрели как вставляются изображения. А сейчас посмотрим как изображение может менять положение относительно текста. Добавим немного текста.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ul type="disc">
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
    <img src="fruits.jpg" alt="Фрукты" width="246" height="205">
    <p>Morbi quis rutrum nulla. Quisque lacinia turpis nisl, non mollis nisl vestibulum at. Duis neque leo, congue at ultricies non, pharetra sed mauris. Proin elementum fringilla quam, non viverra justo luctus id. In ipsum lacus, commodo in porta ac, ultrices ac leo. </p>
</body>
</html>

У тега <img> есть такой атрибут align. Он может принимать значения: bottom, left, middle, right, top.

Ниже представлены изображения страница с разными значениями параметра align.

bottomДанный параметр выравнивает нижнюю границу изображения по окружающему тексту.Align=bottom в Firefox
leftПри использовании значения left он выравнивает изображение по левому краю окна.Align=left в Firefox
middleСередина изображения находится по базовой линии текущей строки.Align=middle в Firefox
rightПри использовании значения right он выравнивает изображение по правому краю окна.Align=right в Firefox
topВыравнивается по самому высокому элементу текущей строки.Align=right в Firefox

Сегодня мы рассмотрели как вставляются изображения. Всё очень просто. Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.

Больше практикуйтесь!

Урок 4. Изображения 5.00/5 (100.00%) 3 голос(ов)

Понравилась статья - расскажи друзьям! :)

4 комментария к записи
  • Дмитрий

    Здравствуйте!Не могли бы Вы показать как прописывается код.После фразы «Сначала посмотрим как это выглядит в коде:» нету никакого кода.Исправьте пожалуйста,а то мое обучение на этом остановилось((

     
    • Юрий

      Дмитрий, приношу свои извинения. Исправил 🙂 !

       
  • Дмитрий

    У меня еще вопрос)А куда именно в текстовом редакторе нужно прописывать код изображения?

     
    • Юрий

      Дмитрий, код необходимо вставлять между тегами <body> </body>.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *