Урок 4. Добавление изображения.

Вторник, 9 августа 2011 г.
Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 272
Подписаться на комментарии по RSS

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

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

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

Основной код будем использовать из предыдущего урока.

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

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

В дальнейшем пояснять код мы будем именно таким образом.

Приступим!

<html>
<head>
<meta http-eguiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="keywords" content="Ключевые слова"> <title>Заголовок документа</title>
</head>
<body>
<font fece="Verdana,Sans-serif"  color="#FF0000">
<br>
<center>
<b>
<h1>Название раздела</H1>
</b>
</center>
</br></font><left>
<i>
<p>Здравствуйте!</p>
<p>Это мой первый сайт! </p>
<!-- Это коментарий-->
 <p>Я начал изучать HTML совсем недавно, но уже делаю успехи!</p>
<p>Здравствуйте! Это мой первый сайт! Я начал изучать HTML совсем недавно, но уже делаю успехи!</p>
</i>
</left>
<p><img src="имя изображения.формат" /></p><!--тег добавления изображения-->
</body>
</html>

На данный момент поддерживаются форматы файлов GIF, JPG, JPEG, PNG.

Очень важно! Изображение должно находиться в одном каталоге с Вашим html файлом. Можно поместить его в другую папку этого каталога, например папку “images”, при этом изменить к нему путь так:

Но просто вставить картинку – это скучно, не так ли? Поэтому давайте посмотрим что еще можно сделать с изображениями в HTML.

Для обработки изображения, вставленного на страницу тэгом <img/> существует набор атрибутов (свойств):

Scr – обязательный атрибут, указывающий путь рисунка;

Align – выравнивает изображение к:

Left – левому краю;

Right – правому краю;

Center – по центру;

Bottom – по нижнему краю;

Top – по верхнему краю;

Middle – по середине.

Alt - выводит альтернативный текст картинки, который будет виден тогда, когда изображение по каким-то причинам не загружается;

Border – толщина рамки вокруг изображения в пикселях;

Height – высота картинки в пикселях или процентах;

Width – ширина картинки в пикселях или процентах;

Hspace – размер свободного места в пикселях слева и справа от изображения;

Vspace – размер свободного места в пикселях сверху и снизу изображения.

Примером может стать следующий код:

<img src="путь " alt="альтернативный текст" vspace="10">

Попрактикуйтесь, подставляя разные варианты параметров изображения для более быстрого усвоения материала и получения опыта!

Изображение можно сделать фоном страницы:

<html>
<head>
<meta http-eguiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="keywords" content="Ключевые слова"> 
<title>Заголовок документа</title>
<!--Задаём параметры фона без повторения-->
<style type="text/css">
body
background-image: "путь";
background-repeat: no-repeat;</style></head>
<!--делаем изображение фоном страницы-->
<body background=" путь ">
<font fece="Verdana,Sans-serif"  color="#FF0000">
<br>
<center>
<b>
<h1>Название раздела</h1>
</b>
</center>
</br>
</font>
<left>
<i>
<p>Здравствуйте!</p>
<p>Это мой первый сайт! </p><!-- Это коментарий--> 
<p>Я начал изучать HTML совсем недавно, но уже делаю успехи!</p>
<p>Здравствуйте! Это мой первый сайт! Я начал изучать HTML совсем недавно, но уже делаю успехи!</p>
</i>
</left>
</body>
</html>

Обратите особое внимание на то, что для использования изображения, как фона страницы, необходимо задавать параметры body! Важно! Эти параметры всегда задаются в <head> </head>. С повторением или без – это уже решать Вам. Вот варианты повторения:

Repeat - повторение;

Repeat-x – повторение по оси х;

Repeat-y – повторение по оси у;

Попробуйте различные варианты и подберите подходящий.

На этом наш урок закончен. Всем удачи! До встречи на следующем уроке!

Поделиться...

Урок 1. Знакомство с HTML. Теория.

Еще записи по теме

Комментариев: 3

2011-09-08 в 14:17:54 | Сергей

Очень интересный и доступный урок.Очень понравился.Читается быстро и понятно.Давно хотел научиться созданию сайтов,но не мог найти подходящие уроки.Набрел на ваши уроки.Получаю первые навыки.Спасибо людям написавшим уроки.
2011-09-30 в 10:55:32 | kostay

благодарю за предоставленную информацию, урок мне очень понравился, много узнал нового о добавлении изображений, хотя считал, что знаю уже всю.
2011-10-01 в 08:43:58 | axper4ik

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

Оставьте свой комментарий!

Не регистрировать/аноним

Ваше имя

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

Зарегистрирован или новая регистрация

E-mail
Пароль

Если вы уже зарегистрированы как комментатор, укажите пароль и свой действующий email.

Ваш комментарий

Введите нижние символы

Защита от спама: введите только нижние символы

(обязательно)

Опрос

**Оказался ли для Вас полезным наш сайт?**
Всего достаточно! Даже очень! (19) 59.38%

Хотелось бы больше готовых решений... (10) 31.25%

Можно бы было более подробно объяснять учебный материал... (3) 9.38%

Всего проголосовало: 32 чел
Архивы голосований