• Авторизация
Дневник Angellight777 Лента друзей - Дневник - Полная версия


Работаем с изображением - Часть 1 в HTML 26-03-2012 18:43 к комментариям - к полной версии - понравилось!

Это цитата сообщения merlinwebdesigner Оригинальное сообщение

Работаем с изображением - Часть 1в HTML

ВСТАВЛЯЕМ КАРТИНКИ - HTML

[250x250]

В данном посте, мы рассмотрим, каким образом вставляется изображения в html документ, научимся производить его позиционирование, а также узнаем как установить изображение в виде фона.

КАК ВСТАВЛЯТЬ КАРТИНКИ И ОСУЩЕСТВЛЯТЬ ИХ ПОЗИЦИОНИРОВАНИЕ В HTML ДОКУМЕНТЕ

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

Основные форматы изображений, которые используются при создании web страниц, это: JPG, GIF и PNG. Для работы с изображениями и подготовки их к публикации в Сети Интернет, можно пользоваться графическим редактором Photoshop. В нем имеются практически все средства с помощью, которых очень легко можно пережать изображение и уменьшить его размер, но при этом сохранить качество.Это очень важно для изображений, при публикации в Интернет.

И наконец, о том каким образом нам вставить картинку в html документ. Для вставки изображений используется тег <img>.  Этот тег не имеет закрывающего тега. Вставка изображений при помощи его осуществляется следующим образом:

<img src= "адрес изображения">

 

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

Если изображение лежит в той же папке что и страница, в которую оно вставляется, то это будет выглядеть так:

<img src= "foto.jpg">

 

Если же изображение лежит, например, в папке images то путь к нему будет выглядеть так:

<img src= "images/foto.jpg">

 

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

3996605_foto (96x72, 8Kb)Для того чтобы вы лучше поняли как это работает я предлагаю вам в какую либо папку на вашем компьютере сохранить изображение которое вы видите слева. И создать в той же папке html документ, содержащий код расположенный ниже.

<html>
<head>
<title>Мой первый HTML документ title>
head>
<body>
<img src= "foto.jpg">
body>
html>

После того как вы откроете созданную страницу в браузере то увидите что картинка располагается не совсем красиво. Поэтому далее мы разберем, каким образом можно позиционировать изображение. Здесь нам на помощь приходит уже знакомый Вам  атрибут align="".

Существуют следующие значения этого атрибута:

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

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

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

Использую данный атрибут, картинка будет прижата к правому краю, а текст будет обтекать ее слева.

<img src= "foto.jpg" align="bottom">

В этом случае текст будет располагаться внизу картинки. Так он располагается по умолчанию, если атрибут align не прописан.

<img src= "foto.jpg" align="middle">

Текст будет располагаться по середине картинки. Это позиционирование хорошо использовать, если нужно маленькое изображение позиционировать по центру строки текста, например кнопку.

<img src= "foto.jpg" align="top">

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

Следующий атрибут, определяющий положение изображения называется vspace="". Он определяет расстояние между текстом и изображением по вертикали. В кавычках указывается любое необходимое значение в пикселях.

Например:

<img src= "foto.jpg" align="left" vspace="10">

Расстояние между текстом и изображением по горизонтали определяется атрибутом hspace="".

Например:

<img src= "foto.jpg" align="left" vspace="10" hspace="20">

Следующие атрибуты это width="" определяет ширину картинки и height="" определяет высоту картинки. Если вы их не пропишите картинка все равно отобразится и будет того размера как она и есть. Но лучше всего прописывать ширину и высоту картинки. Например, для нашей картинки это будет выглядеть так:

<img src= "foto.jpg" align="left" width="96" height="72"

Атрибут, котрый мы рассмотрим следующим, очень важен в поисковой оптимизации Вашей страницы. Это атрибут alt="" где в кавычках указывается описание картинки. Поисковые системы обращают внимание на то, что написано между кавычек. Это описание будет отображаться, если подержать курсор над картинкой несколько секунд. Для нашей картинки можно прописать так:

<img src= "foto.jpg" align="left" width="96" height="65" alt=”Фотография девушки”>

Ну и ещё один атрибут,  это border="" определяет ширину рамки вокруг картинки. В кавычках указывается ширина рамки, например, так:

<img src= "foto.jpg" align=”left” width="96" height="72" alt=”Фотография девушки” border="2">

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

<img src= "foto.jpg" align="left" width="96" height="72" vspace="10" hspace="20" alt="Фотография девушки" border="2">

Кроме этого изображение можно не просто вставлять на страницу но и использовать его в качестве фона для страницы. Для того чтобы определить картинку в качестве фона для нашей страницы в открывающем теге <body> необходимо прописать атрибут background="" где в кавычках указать адрес картинки подобно тому как мы это рассматривали выше.

3996605_fon_1_ (96x96, 1Kb)К примеру зададим фон для вашей картинки. Для этого сохраните изображение фона, которое вы видите с лева, в ту папку где лежит ваша ранее созданная страница. Затем в теге <body> пропишите следующее:

<body background="fon.gif">

Полный код страницы будет следующий:

<html>
<head>
<title>Мой первый HTML документtitle>
head>
<body background="fon.gif">
<img src= "foto.jpg" align="left" width="96" height="65" vspace="10" hspace="20" alt="Фотография девушки" border="2">
body>
html>

Таким образом, мы расположили наше первое изображение слева, тест его обтекает справа, задали отступы между изображением и текстом в 10 пикселей, указали его высоту и ширину, а в качестве фона задали еще одно изображение.

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

Успехов, и всего Вам доброго.

 

Серия сообщений "Теги HTML":
Часть 1 - Бесплатные библиотеки, огромный выбор.
Часть 2 - В помощь работе с HTML кодами (тегами)
...
Часть 46 - Списки в HTML - Часть 2
Часть 47 - Атрибуты HTML
Часть 48 - Работаем с изображением в HTML - Часть 1
Часть 49 - Работаем с изображением в HTML - Часть 2
вверх^ к полной версии понравилось! в evernote
Комментарии (1):
merlinwebdesigner 26-03-2012-18:47 удалить
Полезная информация. Успехов Вам во всех начинаниях, и всего Вам доброго...)
Обратиться - Ответить - К полной версии


Комментарии (1): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Работаем с изображением - Часть 1 в HTML | Angellight777 - Дневник Angellight777 | Лента друзей Angellight777 / Полная версия Добавить в друзья Страницы: раньше»