Преглед на урок

Работа с изображения

Работа с изображения




Работа с изображения


С този урок ще се запознаете с основните методи и техники за работа с изображения в HTML

Предполагам знаете, че има много различни видове изображения, във формати като GIF, JPH, PNG, BMP и още много други. За интернет сайтове обаче е повече от препоръчително да ползвате GIF или JPG изображения. Някои сайтове ползват PNG също. НЕ ползвайте BMP в никакъв случай, защото файловете в BMP формат са огромни. За Уеб ние се стремим да направим всяко едно изображение по-малко като обем и въпреки това да се запази качеството. За това за мен най-подходящи са JPG.

Добавяне на изображение към HTML файл

Добавянето на изображение става чрез тага <img>
Ето как изглежда в най-прост вариант <img src="url_na_izobrajenieto">...

Например:

Код
<img src="http://itschool.bg/application/uploads/tutorials/gallery/tutorials/661/1.jpg">

Ще покаже:




Как да направим дадено изображение да е линк

За да направите изображението да е линк просто ползвайте следния код:

Код
<a href="URL"><img src="URL_kum_izobrajenieto"></a>

Примерно:

Код
<a href="http://photoshop-bg.com"><img src="http://itschool.bg/application/uploads/tutorials/gallery/tutorials/661/1.jpg"></a>

Резултат:



Забележка: ако рамката не ви харесва, просто сложете атрибута border - <img src="URL" border="0">. Така можете да направите рамката и по-голяма, всичко зависи от вас!


Използване на title

Можете да добавите описание за всяко едно изображение. Това описание се изписва след като потребителя сложи мишката върху изображението.
Описанието се добавя чрез атрибута title

Пример: <img src="URL" title="Snimka 1!">


Промяна размера на изображение

За да променяте размера можете да използвате атрибутите width (за широчина) и height (за височина).
Двата атрибута могат да бъдат използвани с 2 вида стойности - проценти или пиксели.

Пример:
<img src="URL" width="75%" height="50%">
<img src="URL" width="100" height="200"> (тези стойности са пикселни)

Това са основите за работа с изображения. По-напредналите потребители могат да разгледат уроците за CSS, чрез него се борави с изображения по-лесно.

Автор: GeorgeSG

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: GeorgeSG

Коментари

rusakov

А как мога да я сложа в центъра снимката?

acid007

offf neshto nerazbrah :( sorry 4e pi6a na ENGLISH

e!ns7e!n

така:

Код
<center><a href="URL"><img src="URL_kum_izobrajenieto"></a></center>

Ne7WoRK

Също освен централно може и в дясно и в ляво с тези тагове <left></left> и <right></right>

talismana

Ето ви един пример... ПЪЛЕН ПРИМЕР за хиперлинк със снимка :)

Код
<a href="http://www.abv.bg"><img src="link" border=1 alt="abv.bg vashiq email address">
Бордера ще ви очертае снимката като в рамка :) и рамката ще е дебеза според т'фа какъв бордер сте и сложили:)
"alt="blqblq"" Като дадете на снимката с мишката ще и излезне това което сте написали в "alt" и принципно верния код е така ;)

talismana

пропуснал съм да сложа "</a>" в края на кода, но се надявам да се сетите :)

Psyke

Може ли само да попитам каде се слагат тези тагове ???

Psyke

Много ви моля кажете каде се слагат тези тагове ако искате скайп моя е eminem_niki !!!!

kokokj

Psyke... Слагат се в <body> ето ти пример:
<html>
<head
<title>тест</title>
</head>
<body>
<img src="http://www.photoshop-bg.com/gallery/tutorials/661/1.jpg"></a>
</body>
<html>

kokokj

Ау.. Sry, изпуснах и обарках някой неща да видя дали ще се сетите :P

Sinnister

<html>
<head>
<title>тест</title>
</head>

<body>

<img src="http://www.photoshop-bg.com/gallery/tutorials/661/1.jpg"></a>


</body>
</html>

Аз лично обичам да си оставям повечко разстояния между таговете в кода или да ги измествам напред за по лесна навигация :)

WALLReTuRn

Добре но не срешнах това описание !!!!!!!

Има нчколко Варианта !!!
1-ви-Снимката е динамична и не е на локалната ви машина

Код
<html>
<head>
</head>
<body>
<img src="Адреса на снимката от Друг сайт или на http://photoshop-bg.com">
</body>
 </html>              
2-ри-Когато е на локалата ви машина но не е в Папката с основничт html документ(За което ще стане Ясно в 3-ти вариант)
Код

<html>
<head>
</head>
<body>
//
"ОТ Вашата машина(Пример)"
//
<img src="D://Pictures//Snimka.това е разширенито(jpeg,bmp,gif.png) ">
</body>
 </html>   


3-ти ако снимката се намира в папката с основният html документ

Код
<head>
</head>
<body>
"ОТ Вашата машина(Пример)"
//
"(Достатачно е да напишете името на картинката снимката и Нейното разширение)"
//
<img src="snimka.(jpeg,bmp,gif.png)">
</body>
 </html>

DuReX

img src="http://www.photoshop-bg.com/forum/index.php?act=UserCP&CODE=24.jpg">

kireza

"НЕ ползвайте BMP в никакъв случай, защото файловете в BMP формат са огромни"

Абсолютно правилно,още повече че безплатните сървъри предоставят малък обем за сайтове и трябва да се вместваме някак си.Затова е добре и формата JPG да се мине през фотошопа със Save for Web за да намалим обема ако не искаме да намалим размера на снимката,но често се налагат и двете ограничения.

jerry

искам да по питам как мога да си кача .swf формат в HTML помогнете спешно ми трябва !!! 10х

prostyle252

сори за тъпия въпрос ама как да сложа бекграунд на сайта

pg7777

за центъра е <center> СНИМКАТА </center

gamesgames

Много добър урок за начинаещи.Перфектно обяснено.Даже и най-големия новак който започва да изучава HTML би го разбрал.Лично мое мнение.

shooky

Защо не си показал и използване на "alt", та това е много важно, принципно ботовете на търсачките немогат да "виждат" изображения, за това те го правят чрез атрибута alt. В него се поставя описание на изображението, ако нямате alt таг дори и бот на търсачка да е "минал през сайта ви", то вашето изображение няма да излезе при търсенето на изображения.
Така ще вмъкнеш флаш в сайта си:

Код
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="flash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="дължина на обекта" height="височина на обекта">
	<param name="movie" value="име_на_файла.swf">
	<param name="quality" value="High">
	<embed src="име_на_файла.swff" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="flash" width="дължина на флаша" height="височина на флаша"></object>
Малко е стар начин, но пак работи ;)
фон на страницата се слага така:
За изображение:
Код
<html>
<head>
</head>
<body style="background: url(линк до изображението.формат) no-repeat;">
</body>
</html>
или за цвят:
Код
<html>
<head>
</head>
<body style="background: #000000;">
</body>
</html>
Може и да ги комбинирате, ако се използва прозрачно изображение примерно:
Код
<html>
<head>
</head>
<body style="background: #FFFFFF url(линк до изображението.формат) no-repeat;">
</body>
</html>

Това е html+css като css-а не е в отделен стилов файл.

shooky

Опа забравих да напиша, при фона за повторението на изображението тук съм показал no-repeat, но може да бъде repeat за да повтаря изображението по вертикала и хоризонтала, repeat-x за да повтаря изображението по хоризонтал, repeat-y за да повтаря изображението по вертикал.
Извинявам се за двато поредни коментара.

icettt

Страхотен урок - GeorgeSG!!
Благодаря!!

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.