11-01-2021, 20:21

Урок №4. Вставка изображений

 Тема урока - вставка картинок на сайт. 

Иллюстрации в тексте делают документ более привлекательным. Однако графические изображения довольно медленно загружаются, поэтому будьте аккуратны при вставке большого числа изображений.

Повторение

На прошлом уроке вы научились создавать списки.

В качестве домашнего задания было предложено написать код для этого списка:

Маркированный список

  • Чтение
  • Рисование
  • Музыка
  • Математика
  • Физкультура

Если вы всё сделали, у вас должен был получиться вот такой код:

<h4>Маркированный список</h4>
<ul>
<li>Чтение</li>
<li>Рисование</li>
<li>Музыка</li>
<li>Математика</li>
<li>Физкультура</li>
</ul>

Конечно, заголовок мог быть выделен любым из 6 возможных вариантов заголовков - от h1 до h6.

Если вы хотите изучать языки программирования, зайдите на сайт онлайн курсов программирования - onlineitea.com. Там вы найдёте не только курсы по HTML+CSS, но и курсы jаvascript, Java, Python и так далее. Онлайн курсы программирования дадут возможность найти своё предназначение в сфере IT-технологий.

Тема урока: Вставка изображений

   

Для вставки изображений на сайт используется тег IMG.

Тег непарный, в отличие от большинства тегов. 

Общий вид тега:

<IMG src="адрес картинки" style="стили картинки" />

Какие стили можно задать картинке

Ширина (width:число;) задаётся в пикселях или процентах.

Высота (height:число;) задаётся в пикселях или процентах.

Выравнивание относительно других элементов (float:left/right;).

Отступы от края картинки до других элементов (margin:сверху справа снизу слева;) задаётся в пикселях.

Рамка вокруг (border:цвет ширина тип).

Разберем на примерах.

Выводим одну и ту же картинку разного размера.

<img src="girl.jpg" style="width:50px;" />

<img src="girl.jpg" style="width:60px;" />

<img src="girl.jpg" style="width:70px;" />

девочка девочка девочка 

Добавляем картинкам рамку.

Стиль записывается следующим образом.

border:цвет ширина тип.

Цвет указывается английским названием цвета.

Красный - red.

Жёлтый - yellow.

Синий - blue.

Зелёный - green.

Полный перечень найдёте в конце урока.

Ширина указывается в пикселях - 1px. Число может быть любым.

Тип рамки - это вид линии - сплошная, пунктирная и так далее.

Сплошная - solid.

Пунктирная - dotted.

Штрихами - dashed.

<img src="boy.jpg" style="width:70px;border:green 2px solid;" />

<img src="boy.jpg" style="width:90px;border:blue 3px dotted;" />

<img src="boy.jpg" style="width:80px;border:gred 1px double;" />

Добавим картинку с текстом и выровняем картинку по правому краю.

<img src="egik.gif" style="float:right;">

<p>-Что ж ты Ёж, такой колючий?<br>
-Это я на всякий случай:<br>
Знаешь кто мои соседи?<br>
Лисы, волки и медведи!</p>

Обратите внимание на вывод стихотворения.

Весь текст взят в парных тег <p>. А для того, чтобы строчки четверостишия выводились с новой строки поставлен специальный тег <br>, означающий разрыв строки.

-Что ж ты Ёж, такой колючий?
-Это я на всякий случай:
Знаешь кто мои соседи?
Лисы, волки и медведи!

Подведём итоги:

Для вывода изображений используется тег  <IMG /> со стилями.

Таблица цветов:

Название HEX RGB Цвет
black #000000 0,0,0
silver #C0C0C0 192,192,192
gray #808080 128,128,128
white #FFFFFF 255,255,255
maroon #800000 128,0,0
red #FF0000 255,0,0
purple #800080 128,0,128
fuchsia #FF00FF 255,0,255
green #008000 0,128,0
lime #00FF00 0,255,0
olive #808000 128,128,0
yellow #FFFF00 255,255,0
navy #000080 0,0,128
blue #0000FF 0,0,255
teal #008080 0,128,128
aqua #00FFFF 0,255,255

Домашнее задание

Создайте небольшую веб-страничку с текстом и картинками.


Уважаемые читатели!

Все материалы с сайта можно скачивать абсолютно бесплатно. Все материалы проверены антивирусом и не содержат скрытых скриптов.

Материалы в архиве не помечены водяными знаками!

Если материал нарушает чьи-то авторские права, просьба написать нам по обратной связи, указав авторство материала. Мы обязуемся либо убрать материал, либо указать прямую ссылку на автора.

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




Уважаемые посетители! Все комментарии проходят модерацию. Поэтому ваше сообщение появится через некоторое время.

Добавление комментария
Имя:* E-Mail: