Создание сайта
Регистрация
Продвижение
Монетизация
Облако тегов

Требуется для просмотраFlash Player 9 или выше.

Показать все теги

Главная » Создание сайта » HTML » Учебник HTML для начинающих. Блочная верстка

Учебник HTML для начинающих. Блочная верстка
Раздел: Создание сайта » HTML  
14 июня 2009   |   автор: admin Оставить комментарий



 

 

 Урок 8. Вставляем изображение

 

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

 

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

 

Чтобы поместить ее на сайт необходим, как всегда - тэг.

 

Выглядит он следующим образом:

 

<img src="Закат.jpg" alt="Закат" />


И в браузере:

 

 alt

 

Попробовали?

 

Получилось?

 

Теперь давайте разберемся, что есть что в данном тэге.

 

Для того чтобы сообщить браузеру, что вы вставляете изображение, служит тэг «img» (сокр. от image)? Затм указывается его размещение «src»
(сокращение для "source"). Далее имя файла «Закат.jpg» и его название - alt="Закат", которое отображается, пока картинка не закачана либо на ее месте, если в браузере отключена функция показа изображений.

 

Обратите внимание, что тэг «img» не требует наличия закрывающего тэга.

 

 

Кое-что еще про изображения.

 

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


Пример:

 

<img src="images/header.gif">

 


Пример:

 

<img src="http://www.web-lesson.ru/header.gif">


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

 

Пример

 

<a href="http://www.web-lesson.ru"><img src="header.gif"></a>


В браузере это будет выглядеть примерно так (попробуйте щёлкнуть на изображении):

 

Учебник HTML для начинающих. Блочная верстка 

 

 

 

С целью дать изображению краткое описание используется атрибут «title».

 

Пример

 

<img src="header.gif" title="В помощь вебмастеру">


Еще два важных атрибута - «width» и «height» (ширина и высота изображения):

 

Пример

 

<img src="header_1.gif" width="480" height="75">


В браузере получим:

 

Учебник HTML для начинающих. Блочная верстка

 

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

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

 

А атрибуты «width» и «height» полезно применять, чтобы браузер еще до загрузки изображения мог определить его размер на странице, что позволит быстрее и качественнее загружать их.

 

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

 

 


Далее... Урок 9. Верстка с помощью блоков.

 

 

Вернуться к Оглавлению 

 


Ключевые теги: Учебник HTML, Блоки, div, блочная верстка
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-lesson.ru
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код:
Введите код