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:
 
Kod: You are not allowed to view links. Register or Login
<html>
<head>
<title>Sayfamızda Resim </title>
</head>
<body>
<p><img src="http://www.uyanangenclik.com/resimlerim/Gul/01.gif">
</body>
</html>

Explorer Görünümü:


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

RESMİN BOYUTUNU BELİRLEME:

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.

Kod: You are not allowed to view links. Register or Login
<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>

explorer görünümü:

 

RESMİN ORTALANMASI

Kod: You are not allowed to view links. Register or Login
<center>......</center> kodu kullanılır
 
<img src="You are not allowed to view links. Register or Login" align="center">
 

RESMİN SAĞA HİZALANMASI:

Kod: You are not allowed to view links. Register or Login
<right>......</right> kodu kullanılır.
 
<img src="You are not allowed to view links. Register or Login" align="right">



RESMİN SOLA HİZALANMASI:

Kod: You are not allowed to view links. Register or Login
<left>......</left> kodu kullanılır.
 
<img src="You are not allowed to view links. Register or Login" align="left">
 

RESMİN AÇIKLAMA METNİ:

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="You are not allowed to view links. Register or Login" width=230 height=130 alt=" hoşgeldin>



Başka sitedeki bir resmi arka planda kullanmak:

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.

Kod: You are not allowed to view links. Register or Login
<html>
<head>
<title>Arka planda resim</title> 
</head>
<body  background="http://www.uyanangenclik.com/resimlerim/0arkaplan0.jpg">
</body> 
</html>


Forum Kategosirine resim eklemek için:

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

Kod: You are not allowed to view links. Register or Login
<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" />