Самоучитель по HTML, урок №6

В этом уроке научимся работать с изображениями.
Для интернета ипользуются три типа расширения:".jpg", ".gif", ".png" все остальные просто игнорируются браузерами, более детально описывать не буду, единственое: "jpg" имееть самое большее количиство цветов и оттенков,
при сохранении того-же рисунка в ".gif", изображение получается более размытым, но с учетом того,что ".gif" может принимать анимационый эфект - размытости не видно, о ".png" почти ни чего не скажу по качеству равен ".gif", а по объёму(кБайт) = ".jpg", и я его почти не использую... Ну хватит пустых разговоров! Тем более, что они не касаются HTML
Перейдём к делу, для начала нам нужно обзавистись картинками, если у вас их нет, то я об этом позаботился:
Вам нужно cкачать архив с картинками. Далее распаковать архив в нашу учебную папку.

Теперь мы в полном снаряжении и приступаем грызть "гранит науки" дальше...
Картинки в HTML-документ вставляются при помощи тега IMG с атрибутом: SRC:
<img src="путь/имя картинки">
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" >
        <div align="center"><img src="logo.gif"> </div>
        </body>
        </html>

Далее помотрим что получилось:
моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|
пример как вставить картинку



готово

Добавим ещё одну картинку и много текста
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" >
        <div align="center"><img src="logo.gif"> </div><br>
        <img src="walfi.jpg">Текст... Текст... Текст...
        Текст... Текст... Текст... Текст... Текст... Текст...
        Текст... Текст... Текст...
        </body>
        </html>

Далее помотрим что получилось:
моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|
пример как вставить картинку с текстом
пример как вставить картинку с текстом Текст... Текст... Текст... Текст... Текст... Текст...Текст... Текст... Текст... Текст... Текст... Текст...
готово

Итак, мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. Давайте вспомним об атрибуте align, который отвечает за выравнивание. Атрибут align есть и у картинок:

<img src="fon_3.jpg" align="left">

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:

<img src="fon_3.jpg" align="right">

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

<img src="fon_3.jpg" align="bottom">
<img src="fon_3.jpg" align="middle">
<img src="fon_3.jpg" align="top">


Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов:
(1) - <img src="fon_3.jpg" vspace="10">
(2) - <img src="fon_3.jpg" hspace="30">
(3) - <img src="fon_3.jpg" alt="моя фотография">
(4) - <img src="fon_3.jpg" width="100">
(5) - <img src="fon_3.jpg" height="200">
(6) - <img src="fon_3.jpg" border="5">


Теперь последуют объяснения по пунктам.

(1) - атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.

(2) - атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза - "моё фото". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего картинка предназначена.

(4) атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).

(5) атрибут height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, те же умные люди говорят, ч то размеры картинок следует задавать, для тех же особенных людей с отключенной графикой...

(6) атрибут border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда и равна 1 пикселю. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.

Как мы помним, атрибуты для одного тэга могут употребляться одновременно друг с другом, чтобы избежать каламбура продемонстрирую наглядно на нашей страничке. Введем следующие атрибуты для нашей картинки:

<img src="fon_3.jpg" align="left" hspace="30" vspace="5" alt="моё авто">
Далее помотрим что получилось:
моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|
пример как вставить картинку с текстом
моё фото Текст... Текст... Текст... Текст... Текст... Текст...Текст... Текст... Текст... Текст... Текст... Текст... Текст... Текст... Текст... Текст... Текст... Текст...Текст... Текст... Текст... Текст... Текст... Текст...
готово

Далее советую самостоятельно попробовать поиграться с атрибутами, больше внимания удилите width(ширина) и height(высота), попробуйте логотипу 687на83 задать значения 500 на 200, или только задать высоту 500 или 900, а потом только ширину 50 или 130, поймёте о чём я говорил... Также перепишите код:
<body bgcolor="#ffffff" text="#000000" > на <body background="fon_2.gif" text="#000000" >
Мы изменим фон нашей страницы
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  background="fon_2.gif"  text="#000000" >
        <div align="center"><img src="logo.gif"> </div><br>
        <img src="walfi.jpg" align="left" hspace="30" vspace="5">
        <img src="Best_friend.gif" align="right" hspace="5" vspace="5"> 
        Текст... Текст... Текст...Текст... Текст... Текст...
         Текст... Текст... Текст... Текст... Текст... Текст...
        </body>
        </html>

моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|
пример как вставить картинку с текстом
моё авто моё фото Текст... Текст... Текст... Текст... Текст... Текст...Текст... Текст... Текст... Текст... Текст... Текст...
готово

Так-же поиграйтесь с атрибутом text="#000000" тега body(я имел ввиду цвета, поменяйте цифры или буквы), и если у вас на компьютере есть маленькие картинки или фотографии, на пример для "мобилки" поподставляйте их, предварительно скопируйте их в нашу папку, это будет ваше домашнее задание, а я вас жду на следующем уроке!!!
Перейти к выбору следующей страницы