Html ile Resim - grafik ekleme Nasıl yapılır?

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

Çevrimdışı gece_mavisi

  • *****
  • Join Date: Eyl 2008
  • Yer: Bursa
  • 3684
  • +299/-0
  • Cinsiyet: Bay
    • Uyanan Gençlik
Html ile Resim - grafik ekleme Nasıl yapılır?
« : 16 Aralık 2010, 03:21:46 »
Sayfalarımızın daha güzel görünmesi için grafiklere ihtiyacımız vardır.
Bu grafiklere biz resim diyelim.
Mesela buttonlar yaptık bunları nasıl yerleştireceğiz?
Gelin şimdi bunu öğrenelim.

Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src="resmin adı" etiketidir.
Tırnak işaretlerinin arasına koyacağımız resmin adını yazarız.
Şimdi bunu bir örnekle gösterelim:

[code]<html>
<head>
<title>Sayfamızda Resim </title>
</head>
<body>
<p><img src="http://www.uyanangenclik.com/resimlerim/Gul/01.gif">
</body>
</html>[/code]

Explorer Görünümü:

[html][/html]

Gördüğümüz gibi resmimiz geldi.

[b][color=blue]RESMİN BOYUTUNU BELİRLEME:[/color][/b]

Resmimizin boyutlarını küçültelim.

Bunun için resmin genişliğini ve yüksekliğini yazmamız gerekir.

            "width=230 height=130" etiketlerini kodumuza ekleriz.

[code]<html>
<head>
<title>Sayfamızda Resim </title>
</head>
<body>
<img src="http://www.uyanangenclik.com/resimlerim/Gul/01.gif" width=230 height=130>
</body>
</html>[/code]

explorer görünümü:

[html][/html]


[b][color=blue]RESMİN ORTALANMASI[/color][/b]

[code]<center>......</center> [/code] kodu kullanılır

<img src="http://www.uyanangenclik.com/resimlerim/Gul/01.gif" align="center">


[b][color=blue]RESMİN SAĞA HİZALANMASI:[/color][/b]

[code]<right>......</right>[/code] kodu kullanılır.

<img src="http://www.uyanangenclik.com/resimlerim/Gul/01.gif" align="right">



[b][color=blue]RESMİN SOLA HİZALANMASI:[/color][/b]

[code]<left>......</left>[/code] kodu kullanılır.

<img src="http://www.uyanangenclik.com/resimlerim/Gul/01.gif" align="left">


[b][color=blue]RESMİN AÇIKLAMA METNİ:[/color][/b]

Mouse'umuzu yani faremizi sayfamızdaki bir resmin ya da grafik unsurun üstüne getirdiğimizde görünen açıklama
metni koyabiliriz. Bu metinde resmin adı, sitemiz hakkında bilgi bulunabilir.

<img src="http://www.uyanangenclik.com/resimlerim/Gul/01.gif" width=230 height=130 alt=" hoşgeldin>



[color=blue]Başka sitedeki bir resmi arka planda kullanmak:[/color]

Html sayfamız ile aynı dizinde olan bir resmi arka plan resmi olarak ayarlayabileceğimiz gibi başka bir sitedeki resimi de arka plan resmi olarak kullanabiliriz.
Bunun için resmin tam olarak bulunduğu adresi yazmalıyız.

[code]<html>
<head>
<title>Arka planda resim</title> 
</head>
<body  background="http://www.uyanangenclik.com/resimlerim/0arkaplan0.jpg">
</body> 
</html>[/code]


[color=blue][b]Forum Kategosirine resim eklemek için:[/b][/color]

Aşağıdaki örnek kodu kendinize göre düzenleuin.

[code]<a href="http://www.uyanangenclik.com/index.php/board,437.0.html" target="_blank" /><img src="http://www.uyanangenclik.com/Themes/default/menu/oyun.png" title="oyun" alt="oyun" height="50" width="100" />[/code]