Служба рассылок "Рассылки@Mail.Ru"

С╦ма.Ру | Профессиональная разработка веб-сайтов
"С╦ма.Ру" создала веб-сайты известным федеральным, промышленным и банковским структурам. Выбирая "С╦ма.Ру" в качестве подрядчика Вы не разочаруетесь в сво╦м выборе. Ваш веб-сайт будет эффектным, а изготовлен он будет профессионально и точно в срок.
Есть проекты, а есть internet-проекты
Дизайн, создание и сопровождение web-сайтов и порталов, полный комплекс услуг. БИАТ. Консалтинг.
"Сетевая Академия ЛАНИТ" - ведущий центр обучения по информационным технологиям.
Авторизованные курсы Microsoft, Novell, SCO, Intel, Oracle. Обучение по программам Certified Internet Webmaster, Security Certified Program, управлению проектами, ISO9000, системам управления предприятиями, управлению финансами, пользователей MSOffice.

Строим сайт от А до Я. Седьмой выпуск.
Строим сайт от А до Я. Седьмой выпуск.


Седьмой выпуск. От 15.07.2003
Ведущий рассылки: Troitskaya Ketee
Написать мне stroimsait@front.ru
Архивы рассылки:Здесь
Содержание рассылки:

Изучаем HTML

  1. Рисунки на WEB-страничке
  2. Контакты

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

1.Рисунки на WEB-страничке

На Web-страницах можно использовать только те типы рисунков, которые могут выводить на экран браузеры.
Допускается вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные).

Для вставки рисунка используем элемент img (от английского image - изображение). Элемент img не имеет конечного тэга.

1). Допустим нам надо вставить рисунок с названием 1.jpg находящийся в том же каталоге (директории, папке). Сделаем мы это так:
<img src="1.jpg">

То что написано между кавычками (после src=) является адресом или URL (путь к картинке). src - от английского source - источник


2). Теперь рассмотрим как вставить ту же самую картинку находящиеся в поддиректории cat.
<img src="cat/1.jpg">

Теперь путь к картинке выглядит так: cat/1.jpg


3). Вставим ту же самую картинку которая лежит на уровень выше.
<img src="../1.jpg">

Теперь путь к картинке выглядит так: ../1.jpg


4). Если картинка лежит на другом сайте, то путь прописывается полностью:
<img src="img src="http://stroimsait.h10.ru/1.jpg">


Проведем эксперимент. Нажмите на эту картинку правой кнопкой мыши, выберете пункт меню свойства и найдите строчку Адрес (URL). Вы увидите адрес этой картинки.





Практика:

1).Создадим папку под названием site. Создадим в этой папке документ с расширением html или используйте ранее созданный файл Текстовый документ.html (см. как это делалось ранее).

2).Вставляем туда.
<html>
<head>
<title>Изучаем HTML </title>
</head>
<body><p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

3).Положим в папку site рисунок 1.jpg; Сделаем это так:

  1. нажмите на эту ссылку (откроется новое окно)
  2. нажмите правой кнопкой мыши на рисунок и выберете пункт меню сохранить рисунок как:
  3. найдите папку site и сохраните рисунок там под именем 1.jpg .

4).Теперь вставим сам рисунок.
<html>
<head>
<title>Изучаем HTML </title>
</head>
<body>
<img src="1.jpg">
<p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

5). Теперь сохраните эти изменения и посмотрите результат. Вы должны увидеть текст и рисунок.


Еще один пример:
1). Создадим еще одну папку в папке site. И назовем ее cat.
2). Перемести туда наш файл 1.jpg
3). Откроем файл Текстовый документ.html; Если Вы теперь не видите рисунок значит Вы все сделали правильно.
4). Для того что бы увидеть рисунок необходимо правильно написать путь. Для нашего примера он будет выглядеть cat/1.jpg


<html>
<head>
<title>Изучаем HTML </title>
</head>
<body>
<img src="cat/1.jpg">
<p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

Надеюсь понятно как правильно написать путь.

Рассмотрим возможные атрибуты у элемента img.

SRC- указывает адрес (URL) файла с изображением.

HEIGHT и WIDTH- определяют ширину и высоту изображения. Если указанные значения не совпадают с реальным размером изображения, он будет сжат или растянут. Рекомендуется всегда указывать размеры рисунка, поскольку это позволяет браузеру сразу определить размеры области, не скачивая рисунок.

ALIGN- обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

left- выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right- выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop- выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle- выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle- выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline- выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom- выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

ALT- текстовое описание. Описание рисунка в параметре ALT появляется в виде всплывающей подсказки при наведении курсора мыши на этот рисунок. Кроме того, если у пользователя отключен вывод рисунков (для ускорения работы), на месте рисунка выводится текст, заданный в параметре ALT. Этот параметр, так же, как и размеры рисунка, обязательно указывается на всех серьезных сайтах.

HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

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

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


Пример:

В этом примере мы задали ширину и высоту изображения (width="189" и height="316" ), выровняли по правому краю (align="right"), определили текст который должен отображаться на месте изображения (alt="Прикольная картинка"), задали отступ картинки от других объектов документа (hspase="10" и vspace="10") и наконец определили ширину рамки (border="5").


<html>
<head>
<title>Изучаем HTML </title>
</head>
<body>
<img src="1.jpg" width="189" height="316" align="right" alt="Прикольная картинка" hspase="10" vspace="10" border="5" >
<p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

Попробуйте поэкспериментировать с параметрами у атрибутов и посмотрите, что будет меняться с каждым Вашим изменением.

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

На сегодня все.

2. Контакты

Задать свои вопросы
Поделиться мнением, успехами и неудачами Вы можете по адресу stroimsait@front.ru
Основные вопросы будут рассматриваться в следующих рассылках.


© 2003 Troitskaya Ketee


Типография ИРМ-1: дизайн полиграфической продукции
Принимаем заказы на дизайн художественной продукции: поздравлений, приглашений, дипломов, календарей и др. по вашим предложениям. Работает профессиональный художник-дизайнер. В типографии ИРМ-1: новый Speedmater - качественная полноцветная печать.
AGAVA.ru - вы полюбите наш хостинг
Тариф Normal. 300Мб от $7.2/мес. Домены .ru, .com и другие бесплатно при оплате хостинга от 3х месяцев. CGI, Perl, PHP, MySQL. Любой способ работы с почтой. Тариф Lite. 100Мб от $4/мес. Нет CGI. Домены .com бесплатно при оплате хостинга от года.

 Поиск: 
В Интернете  В Каталоге

Новости · Деньги · Спорт · Авто · Погода · Афиша · Музыка · ТВ · Софт
Аукцион · Покупки · Путешествия · Сувениры · Мой сайт · Работа
Знакомства · Открытки · Анекдоты · Гороскопы · Форумы · Чаты
Рейтинг · Каталог · Рассылки · Баннерные сети · Реклама на Mail.ru


Архив рассылки Редактирование подписки Помощь

Отписаться : Нажмите и отправьте это письмо, заменив pwd на свой пароль и сохранив кавычки. Узнать пароль можно здесь