Сегодня, мы поговорим с вами о присоединении картинок.
Картинки можно вставить в любoe место, между тагами <body> и </body>. Количество вставляемых картинок не ограничено, однако, если вы хотите, чтобы ваша страница быстро грузилась, постарайтесь сделать свои картинки по-меньше размером и весом. Под размером я подразумеваю физический размер в пикселях (точках) – pixels, т.е. заданные длина на ширину. А под весом – сколько килобайтов занимает картинка.
Если картинка сохранена у вас на компьютере, вы легко можете проверить размер (вес) картинки. Для этого, наведите мышкой на местоположение картинки, нажмите на ПРАВУЮ кнопку мышки. В появившимся меню выберите “Properties”. Нажмите на “Properties” ЛЕВОЙ кнопкой мышки. В числе прочей информации, вы узнаете Size (размер, вес) картинки.
Если же картинка лежит где то в дебрях интернета, то проверить эту информацию еще легче: Наведите мышку на картинку и нажмите на ПРАВУЮ кнопку мышки. В появившимся меню выберите “Properties”. Нажмите на “Properties” ЛЕВОЙ кнопкой мышки. Вы не только знаете размер в килобайтах, но и габариты в пикселях “Dimensions” .
Хотите «содрать» чужую картинку и сохранить ее у себя на компьютере? Нет ничего проще! Наведите мышку на картинку и нажмите на ПРАВУЮ кнопку мышки. В появившимся меню, путем нажатия ЛЕВОЙ кнопки вы можете выбрать одно из действий – либо сохранить картинку на компьютере “Save Picture As”, либо распечать ее на принтере “Print Picture”, либо переслать ее кому нибудь по мылу, через Outlook “E-mail Picture”. Остальные возможности малозначительны на первых порах.
Итак, для того, чтобы прицепить картинку, надо знать ее таг:
<img src="something.jpg"> or <img src="http://www.something.com>
<img src="yourPicture.jpg"> (относительный адрес) или <img src="http://www.zhensovet.com/yourPicture.jpg"> (абсолютный адрес)
Закрывающего тага нет. Но есть всякие маленькие хитрости, без знания которых, вставление картинки покажется вам сущим адом.
Например, вы вставили картинку, сохранили, пошли смотреть ее в IE браузер – и вдруг видите, что картинка у вас как будто бы в рамочке, в большинстве случаев, синей и страшной. Вы – бегом назад, потому что знаете, что рамочки/таблички мы еще не учились с вами создавать – в чем же проблема? А проблема в том, что по умолчанию (by default) браузер приставляет к каждой картинке рамочку, и если вы хотите ее избежать, вам нужно поставить специальный атрибут в таг картинке.
Попробуйте сначала без всего, и посмотрите в браузере, что получается:
Теперь давайте посмотрим, что будет если мы поместим атрибут исключающий возможность рамки:
<html><head></head>
<body> <img src=”http://www.geocities.com/mcsyu/html/revenge.gif” border=0> </body>
</html>
А теперь наоборот – давайте сделаем большой бордюр вокруг картинки:
<html><head></head>
<body> <img src=”http://www.geocities.com/mcsyu/html/revenge.gif” border=10> </body>
</html>
Если у вас не получается, попробуйте убрать кавычки – во всяком случае, для тренировочных моментов. Иногда компьютерное обеспечение так построено, что если вы вставите в кавычки абсолютный линк в обычный файл, который храниться у вас на компьютере, а не на сервере, ваш браузер расценит это как то, что картинка находится у вас на компьютере. Вобщем, учитесь обходить такие мелочи. Веб девелопмент это не точная наука, как, скажем математика.
Допустим, что у вас много картинок, или «толстая» картинка, которая долго грузится на интернете. Что видит пользователь, пока картинка загружается? Если вы просто включите таг картинки – то пока идет загрузка, пользователь видит пустой квадрат с красным крестиком в левом вернем углу. Если картинка так и не загрузилась, то пользователь так и остается, с крестиком, и не знает, что же там за картинка.
Поэтому, особенно если картинка что-то да значит, или куда то ведет при нажатии, хорошо бы поместить альтернативный таг. alt – один из атрибутов тагов картинки. Тогда, даже при долгой загрузке, пользователь будет видеть что загружается. И даже загрузившись, наведя мышку на картинку, можно под мышкой увидеть появившуюся надпись.
Вот, как это работает:
<html><head></head>
<body> <img src=”http://www.geocities.com/mcsyu/html/revenge.gif” border=0 alt=”class 04”>
</body>
</html> Теперь сохраните файл и откройте его в браузере, чтобы посмотреть, что получилось.
Девочки ( и мальчики) не забывайте ставить пробел между атрибутами тагов и самими тагами!!!
А хотите, чтобы ваша картинка куда-то вела? Нет ничего проще! Обрамите ее в линк таг! Вот так!
<html><head></head>
<body>
<a href="http://eyeoftheart.com/page.artwork.search.php?PHPSESSID=acda6db1db3fec81966c738c39a41d91&limit%5Btitle%5D%5B%5D=art4yourhome" target=_blank>
<img src="http://www.geocities.com/mcsyu/html/revenge.gif" border=0 alt=”Click here to see my Eye of the Art
collection!”> </a>
</body>
</html>
И последнее, что мы сегодня будем изучать – это атрибуты картинки, позволяющие ей находиться в разных сторонах от текста
Такой атрибут называется “align” и вписывается в таг картинки вместе с направлением:
Align=top - текст вверху
Align=middle – текст в середине
Align=left – текст слева
Align=right – текст справа
Align=bottom – текст внизу
Текст вокруг (align top, middle, bottom, left)
Давайте посмотрим, что из этого получается:
<html>
<head></head>
<body>
<img src=http://www.geocities.com/mcsyu/html/revenge.gif border=0 align=top>
This is where the text located <BR><BR>
<img src=http://www.geocities.com/mcsyu/html/revenge.gif border=0 align=bottom>
This is where the text located <BR><BR>
<img src=http://www.geocities.com/mcsyu/html/revenge.gif border=0 align=middle>
This is where the text located <BR><BR>
<img src=http://www.geocities.com/mcsyu/html/revenge.gif border=0 align=right>
This is where the text located <BR><BR>
<img src=http://www.geocities.com/mcsyu/html/revenge.gif border=0 align=left>
This is where the text located <BR><BR>
</body>
</html>
Сохраните этот файл и посмотрите его в браузере.
Whew! Вот и все на сегодня. Счас отпишу домашку, и свободна!!!!
0
УРОК № 4
Started by Pervoklashka, Dec 10 2004 06:21 AM
18 replies to this topic
#1
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 10 December 2004 - 06:21 AM
#2
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 10 December 2004 - 06:25 AM
Домашка. Знаете, с чего начинается каждый рецепт в книге о вкусной и здоровой пище Цыган? Нет?
«Укради кастрюлю....»
Мы сейчас займемся примерно тем же.
Итак, вы идете на вот этот сайт, и «крадете» там адрес картинки (любой, но абсолютный). Не саму картинку, а только адрес! http://www.animation...com/animations/
После этого, вы приготовляете мне следующее блюдо:
Вот этот текст должен будет находиться в середине от картинки:
Get it for FREE!
Receive Essential Collection 2.0 for free when you purchase or renew a one year membership to Animation Factory
Дальше, сама картинка должна веcти на вот этот адрес:
http://www.animation...com/animations/
У нее не должно быть обрамления, и новый линк должен открываться в ТОМ же окне, а не в новом. У картинки должно быть описание – вот этот текст
If you succeed on HTML class, I will teach you animations as well
Дальше, в тексте, в слове «membership» сделайте все согласные фонтом Verdana и 5-тым размером,
Слова purchase or renew сделайте жирным, наклонным, и зеленым, а слова Get it for FREE! – красным, жирным и размер 3, остальной текст пусть будет размер 2 и обычного, дефолтного цвета. Не забудьте разделять текст по строчкам, как это указано.
Yammi!
#3
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 10 December 2004 - 06:31 AM
Пояснение к краже
#4
-
- Members
-
- 6,735 posts
Авторитет
- Location:USA
Posted 10 December 2004 - 11:29 AM
<<Вот этот текст должен будет находиться в середине от картинки: >>
Первоклашка, что значит
Вот этот текст должен будет находиться в середине от картинки: ?
справа или слева?
Первоклашка, что значит
Вот этот текст должен будет находиться в середине от картинки: ?
справа или слева?
#5
-
- Members
-
- 6,735 posts
Авторитет
- Location:USA
Posted 10 December 2004 - 12:05 PM
Первоклашка, как сделать, чтобы весь текст, а не только фраза, описывающаая картинку, был справа от нее?
#6
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 11 December 2004 - 07:10 PM
ты начни делать, сама увидишь.
#7
-
- Members
-
- 787 posts
Старожил
- Gender:Female
- Location:Russia
Posted 13 December 2004 - 12:02 AM
Первоклашка, большое спасибо за уроки!
У меня 3 вопроса:
1) Почему появляется черточка возле картинки? Потому что есть линк?
2) Как сделать, чтобы не только первая строчка была посередине и справа от картинки, т.е. чтобы не было такого большого расстояния между Get it for free и остальным текстом, а то две последние строчки появляются внизу под картинкой? Я пробовала вставить текст до тага вставки картинки, все равно получается, что только одна из строчек идет в одной строке с картинкой, только картинка справа.
3) Как прикреплять картинки, которые сохранены на диске С в своем компьютере, чтобы потом просматривать файл на другом компьютере?? Или это невозможно, т.е. картинки обязательно должны быть в интернете?
Спасибо.
У меня 3 вопроса:
1) Почему появляется черточка возле картинки? Потому что есть линк?
2) Как сделать, чтобы не только первая строчка была посередине и справа от картинки, т.е. чтобы не было такого большого расстояния между Get it for free и остальным текстом, а то две последние строчки появляются внизу под картинкой? Я пробовала вставить текст до тага вставки картинки, все равно получается, что только одна из строчек идет в одной строке с картинкой, только картинка справа.
3) Как прикреплять картинки, которые сохранены на диске С в своем компьютере, чтобы потом просматривать файл на другом компьютере?? Или это невозможно, т.е. картинки обязательно должны быть в интернете?
Спасибо.
#8
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 13 December 2004 - 04:46 PM
бабулька
Отвечаю по порядку:
1. наверное, потому что вы между внутри тага или рядом с картинкой лишний пробел сделали - и линк распространился не только на картинку но и на этот разнесчастный пробел. Пришлите код - я посмотрю
2. Об этих хитростях мы начнем говорить на следующем уроке, т.е. в Пятницу
3. Чтобы потом просматривать картинки на другом компьютере, они должны лежать на независимом сервере, или на совместном нетворке. Пока они лежат просто на вашем С драйве, они видны только вам.
Пожалуйста
Отвечаю по порядку:
1. наверное, потому что вы между внутри тага или рядом с картинкой лишний пробел сделали - и линк распространился не только на картинку но и на этот разнесчастный пробел. Пришлите код - я посмотрю
2. Об этих хитростях мы начнем говорить на следующем уроке, т.е. в Пятницу
3. Чтобы потом просматривать картинки на другом компьютере, они должны лежать на независимом сервере, или на совместном нетворке. Пока они лежат просто на вашем С драйве, они видны только вам.
Пожалуйста
#9
-
- Members
-
- 787 posts
Старожил
- Gender:Female
- Location:Russia
Posted 14 December 2004 - 04:44 AM
Спасибо 
1) На имейл можно выслать?
2) Ясно
3) А как их на независимый сервер положить?
Ой, опять вопросы..
1) На имейл можно выслать?
2) Ясно
3) А как их на независимый сервер положить?
Ой, опять вопросы..
#10
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 14 December 2004 - 01:36 PM
1) бабулька - вы как с луны свалились. Мне все все присылают на мыло - об этом договоренность была с самого начала. Только ник свой не забудьте указать да номер урока
2) Это хорошо, а вот у нас сумерки
3) Бабулька, для начала можете открыть где-нибудь бесплатный ящик, вот например, здесь (бесплатно):
http://sitecity.ru
или
http://geocities.yahoo.com/
или
http://www.tripod.lycos.com/
И тогда у вас появится место выставлять странички на интернет и делиться фотками
Первоклашка
2) Это хорошо, а вот у нас сумерки
3) Бабулька, для начала можете открыть где-нибудь бесплатный ящик, вот например, здесь (бесплатно):
http://sitecity.ru
или
http://geocities.yahoo.com/
или
http://www.tripod.lycos.com/
И тогда у вас появится место выставлять странички на интернет и делиться фотками
Первоклашка
#11
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 16 December 2004 - 10:51 AM
Вдогонку к домашке 04
Девочки, ну проявляйте же хоть немного смекалки! Самое главное в НТМЛ - умение избавляться от казалось бы совсем не значительных или совсем не-ошибок!!! Причем таких, которые в одних браузерах действительно ошибки, а в других совсем нет.
Если вы все сделали правильно, и вдруг видете лишнюю черточку между вашей картинкой, которая куда то ведет при клике, и надписью "Get it for free!" - посмотрите, может вы сделали лишний пробел, лишняя пустая строчка между отрывающими и закрывающими тагами.
Вас смущает, что только одна строчка в середине, а все остальные- внизу под картинкой? А почему вас совсем не смутило, что сама картинка сбоку а не в середине? Пытайтесь задавать себе такие вопросы, и пытайтесь на них отвечать.
Попробуйте поставить какой нибудь неотформатированный (для экономии времени) текст перед тем как вы ввели картинку с линком - еще ДО линка! Всю остальную часть домашки оставьте неизменной, сохраните - и посмотрите, что получится! ВЫ увидите картинку в центре, а текст первой строчки - по бокам.
Дальше, почему вы не захотели для себя попробовать, что будет, если выравнять картинку налево, а не в центре? Попробуйте - и весь текст, котрый у вас в домашке - будет справа от картинки, а не внизу. Попробуйте добавить текста, чтобы количество строчек превышало вышину картинки, и увидите, что вас ждет.
Експерементируйте, а то мы с вами далеко не уедем. Не ограничивайтесь домашкой - ведь это не на оценку!!!! Никто же вас не держит в классе насильно - но уж если приходите - старайтесь сделать как можно больше!!!
Первоклашка
Девочки, ну проявляйте же хоть немного смекалки! Самое главное в НТМЛ - умение избавляться от казалось бы совсем не значительных или совсем не-ошибок!!! Причем таких, которые в одних браузерах действительно ошибки, а в других совсем нет.
Если вы все сделали правильно, и вдруг видете лишнюю черточку между вашей картинкой, которая куда то ведет при клике, и надписью "Get it for free!" - посмотрите, может вы сделали лишний пробел, лишняя пустая строчка между отрывающими и закрывающими тагами.
Вас смущает, что только одна строчка в середине, а все остальные- внизу под картинкой? А почему вас совсем не смутило, что сама картинка сбоку а не в середине? Пытайтесь задавать себе такие вопросы, и пытайтесь на них отвечать.
Попробуйте поставить какой нибудь неотформатированный (для экономии времени) текст перед тем как вы ввели картинку с линком - еще ДО линка! Всю остальную часть домашки оставьте неизменной, сохраните - и посмотрите, что получится! ВЫ увидите картинку в центре, а текст первой строчки - по бокам.
Дальше, почему вы не захотели для себя попробовать, что будет, если выравнять картинку налево, а не в центре? Попробуйте - и весь текст, котрый у вас в домашке - будет справа от картинки, а не внизу. Попробуйте добавить текста, чтобы количество строчек превышало вышину картинки, и увидите, что вас ждет.
Експерементируйте, а то мы с вами далеко не уедем. Не ограничивайтесь домашкой - ведь это не на оценку!!!! Никто же вас не держит в классе насильно - но уж если приходите - старайтесь сделать как можно больше!!!
Первоклашка
#12
-
- Members
-
- 597 posts
Старожил
- Location:Florida
Posted 16 December 2004 - 11:03 AM
Опа! Учитель бал зол! Первоклашка, мы пробуем. Я раньше вообще ничего не умела, только письма писать. А сейчас .... Спасибо тебе большое. Очень тебе благодарна за все то, что ты для на сделаешь.
Ты хочешь , что бы мы тебе всю ту фигню которую делаем присылали? По мимо домашки? Хорошо, в следующий раз все сохраню и вышлю!
Ты хочешь , что бы мы тебе всю ту фигню которую делаем присылали? По мимо домашки? Хорошо, в следующий раз все сохраню и вышлю!
#13
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 16 December 2004 - 11:21 AM
Нет, я просто хочу, чтобы вы ПРОБОВАЛИ для себя - НЕ ДЛЯ меня!!! и сами пытались найти ответы на вопросы. На сегодняшний день, пробуют что-то помимо домашки, очень немногие. А попробовав - половина вопросов, заданных мне по мылу - просто исчезнет!!!
#14
-
- Members
-
- 184 posts
Золотко
- Location:Dedham, MA
- Interests:Фотография, книги, фехтование, гитара, кино, музыка, испанский язык
Posted 06 April 2005 - 10:21 AM
Pervoklashka, on Dec 10 2004, 09:21 AM, said:
Сегодня, мы поговорим с вами о присоединении картинок.
Спасибо.
МТ
#15
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 06 April 2005 - 11:15 AM
Shame on you:)
почитай первые пару уроков, где я учу, как определить, на каком языке написана страница.
Форум написан на PHP, поэтому к НТМЛ тагам, а значит, к урокам, не имеет отношения.
Но вобще, (чтоб ты не посчитал себя слишком бедным) было решено отключить возможность такого присоединения, for security reasons, просто кнопку еще не убрали. Почитай топики в Книге Жалоб
почитай первые пару уроков, где я учу, как определить, на каком языке написана страница.
Форум написан на PHP, поэтому к НТМЛ тагам, а значит, к урокам, не имеет отношения.
Но вобще, (чтоб ты не посчитал себя слишком бедным) было решено отключить возможность такого присоединения, for security reasons, просто кнопку еще не убрали. Почитай топики в Книге Жалоб
#16
-
- Members
-
- 184 posts
Золотко
- Location:Dedham, MA
- Interests:Фотография, книги, фехтование, гитара, кино, музыка, испанский язык
Posted 06 April 2005 - 11:27 AM
Pervoklashka, on Apr 6 2005, 02:15 PM, said:
Shame on you:)
почитай первые пару уроков, где я учу, как определить, на каком языке написана страница.
Форум написан на PHP, поэтому к НТМЛ тагам, а значит, к урокам, не имеет отношения.
почитай первые пару уроков, где я учу, как определить, на каком языке написана страница.
Форум написан на PHP, поэтому к НТМЛ тагам, а значит, к урокам, не имеет отношения.
Спасибо.
МТ
#17
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 06 April 2005 - 12:10 PM
я знаю, что ты знаешь. Просто, дурачусь... Don't take it personally
#18
-
- Members
-
- 770 posts
Старожил
- Location: WA
Posted 21 July 2006 - 11:59 AM
первоклашка, у меня интернетно правовой вопрос. Вот если я на своей страничке (которую собираюсь использовать в коммерческих целях) помещу картинку , которую я нашла в дебрях инета на каком то сайте . То что мне за это будет и можно ли так делать. И еще я видела на некоторых картинках адрес сайта где они были взяты это как то влияет на что нить или нет?
#19
-
- Members
-
- 9,132 posts
Ты - прав... а я - Лев!!!
- Gender:Female
- Location:Sherborn, MA
- Interests:travel, marketing, family, friends
Posted 21 July 2006 - 04:14 PM
если в дебрях интернета написано, что картинки бесплатны - бери не хочу. А ежели нет - могут взять тебя за грудки. Как правило, в коммерческих целях, бесплатных завтраков не бывает
Но - любую картинку можно взять с интернета, и немного видоизменить в Fireworks, например, или в Photoshop. Маленький коммерческий сайт с измененными картинками трогать не будут. Это если что -то большое и многомиллионное, тогда конечно лучше так не экономить - а хотя бы подписаться на сайт, где пока платишь, имешь доступ ко всем картинкам
Но - любую картинку можно взять с интернета, и немного видоизменить в Fireworks, например, или в Photoshop. Маленький коммерческий сайт с измененными картинками трогать не будут. Это если что -то большое и многомиллионное, тогда конечно лучше так не экономить - а хотя бы подписаться на сайт, где пока платишь, имешь доступ ко всем картинкам
3 user(s) are reading this topic
0 members, 3 guests, 0 anonymous users
