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:цвет ширина тип).

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

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

девочка

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

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

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

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

Красный - red.

Жёлтый - yellow.

Синий - blue.

Зелёный - green.

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

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

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

Сплошная - solid.

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

Штрихами - dashed.

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

<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сли вы хотите отблагодарить их за работу и поддержать наш проект, вы можете перевести любую, не обременительную для вас сумму на счет сайта.
Заранее Вам спасибо!!!

К списку новостей