| Önceki başlık :: Sonraki başlık |
| Yazar |
Mesaj |
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
 Tarih: 2007-10-14, 03:24:54 Mesaj konusu: Sayfamızda Renkler ve Resimler |
 |
|
Şimdiye kadar olan kısımlarda html ile yazı yazdık ve yazılarımızın ebatları biçimi rengi gibi ayarları ile uğraştır.Bundan sonra ki ilk adım sanırım sitemizin arka planını renkelndirmek.Bu şekilde sitemizde daha güzel bir hava katmış olabiliriz.
sayfayı renklendirmek ile yazıyı renklendirmek arasında hiç bir fark yoktur.Aynı renk kodları burada da geçerlidir.ancak kullanırken body bgcolor=#xxxxxx etiketini kullanıyoruz. Daha doğrusu sayfamızın gövdesini belirtmek için yazdığımız body etiketini, body bgcolor=#xxxxxx şeklinde değiştiriyoruz.
| Kod:
|
<html>
<head>
<title>Arka Plan rengi polibo</title>
</head>
<body bgcolor="#ffcc00"> <font face="verdana" size="4" color="#ffffff"> <ol><h2><u>Günler</u></h2> <font color="#0000ff"> <li>Pazartesi <li>Salı <li>Çarşamba <li>Perşembe <li>Cuma </font> <font color="#ff0000"> <li>Cumartesi <li>Pazar </font> </ol> </font></body>
</html>
|
bu örnekte daha önce anlattığımız listeleme metotunun arka planını değiştirdik.Bu işlemi;
| Kod:
|
|
<body bgcolor="#ffcc00">
|
komutu ile yaptığımızı dikkat edelim.İlk derste body için gövde demiştik. arkaplan rengi kelimesinin ingilizce karşılığı ise background colour olduğunu söylersek öğrenilmesi daha kalıcı olur sanırım.İşte yaptığımız tek şey....tasarımcı olarak tarayıcıya "gövdenin arka kısmının rengi xxxx dir" demek.
Bu konu üzerinde fazla durmayacağım.örneklerde zaten el alışkanlığı kazanacaktır.Unutulmaması gereken bir husus renk kodlarını girerken diez(#) işaretini her zaman kullanacağımızdır |
|
| Başa dön |
|
 |
Bu Site Google Adsense ile Gelir Elde Ediyor
|
| Tarih: 2024-11-23, 09:59:58 Mesaj konusu: Forum Arası Reklamlar |
|
|
|
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-10-14, 03:34:37 Mesaj konusu: Re: Sayfamızda Renkler ve Resimler |
|
|
İşte geldik en zevk verici yere.Sitemize resim eklemek.Sitede resim ne işe yarar diye kısaca anlatacak olursam.Site ziyaretçilerinin gözünde güzel bir yer edinirsiniz.Kısacası siteyi site yapan resimlerdir.İşte bu yüzden en zevkli yere geldik diyorum.
Sayfamızda resim kullanabilmemiz için öncelikle resim formatlarını bilmemiz gerekiyor.Grafiker olmanıza gerek yok.Bilirseniz çokbüyük yararı olur ama photshop uzmanı olmasanızda png dedikleri zaman fransız kalmamanız lazım.
html sayfalarında .jpg ve .gif resimleri sık kullanılır.Çünkü .jpg ebat oalrak küçüktür.(aynı resim kalitesi bitmap özellikteki resimde ebatı çok büyük olabilir bu da sayfanın açılma süresini uzatır.) .gif ise harektli olduğu için sıklıkla kullanılmaktadır.Unutmayın sayfanızı resim çöplüğüne döndürmeniz sitenizin kalitesini artırmaz tam tersi kalitesini düşürür. Tarayıcılar yazıları çok hızlı bir şekilde okurken resim yükleme kullanıcının internet hızına bağlı olmaktadır. sayfanızda toplam 3 mb lık resim kullanmanız demek.Ziyaretçinin sizin sayfayı tıkladığı an 3 mb download yapmadan sayfayı göremeyeceği anlamındadır.O yüzden küçük ebatlarda görsellik olarak büyük özellikteki resimleri tercih etmeliyiz.
size tavsiyem hareketsiz resimlerde .jpg hareketli animasyonlar için .gif ve küçük ikonlar için yine .gif resimlerini kullanmanızdır |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-10-14, 13:13:21 Mesaj konusu: Re: Sayfamızda Renkler ve Resimler |
|
|
Sitemize resim eklemek çok koaydır.yapmamız gereken adresin yerini tarayıcıya söylemek.Onun dışında isteğe bağlı olarak yükesklik ve genişlik ebatlarınıda söyleyebiliriz, sayfadaki düzeniniede söyleyebiliriz yine isteğe bağlı olarak.Şimdi tarayıcımıza nasıl resimin yerini söyliyeceğimize bakalım
<img src="resmin bulunduğu yer ve adı" width="x" height="y">Burada x resmin enini y ise boyunu belirtiyor. Bu bilgileri, resmi herhangi bir grafik editörüyle açarak öğrenebilirsiniz.
img etiketi tahmin edebileceğiniz gibi image(resim) kısaltılmasıdır.
bir örnek verecek olursak;
| Kod:
|
<html>
<head>
<title>polibo06</title>
</head>
<body>
<p>
<img src="http://misilleme.net/images/poli1.gif"></p>
bu resmin linki aklımda olduğu için yazdığım reklam kokmuyor
</body>
</html>
|
işte sayfamızda başrılı bir şekilde resim ekledik. |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-10-14, 13:34:29 Mesaj konusu: Re: Sayfamızda Renkler ve Resimler |
|
|
resim eklemek bu kadar kolay olmakla beraber dikkat edilmesi gereken bir kaç husus bulunmaktadır.Bunları en ince detaylarına kadr okumanız gerekmektedir.Bu küçük kodlar gözle görülür bir fark etmesede usta kod yazarı ile yeni başlayanları birbirinden ayırır. dediğimiz gibi 0 dan başlayarak ilerliyoruz ama artık sizin yeni başlayan bir kod yazarı olduğunuzu kabul ediyorum(şimdiye kadar anlatılanları okumuşsanız)
şimdi bu resmimizi sayfamıza ekleyelim.
Localde çalıştığımızı düşünürek ilk önce harekete başlayalım.
diyelim ki bu resimin adı avatar.gif olsun vede bilgisayarımın c bölümünde olan html klasörünün içindeki resim klasöründe olsun.O zaman bunu nasıl tanıtacağız?
| Kod:
|
|
<img src "c:\html\resim\avatar.gif">
|
bunu önizlme yaptığımızda hiç bir sorun olmayacaktır çünkü tarayıcı c:\html\resim klasörünü kök dizin oalrak kabul edecektir ve resimi bulacaktır.Bu sayfayı hostumuza uplaod edip yayınladığımız anda siteyi ziyart eden kişiler resimi göremez çünkü tarayıcıları kendi bilgisayarındaki c bölümünde html dosyasını arayacaktır bulamadığında ünlü 404 hatasını verecektir(aradığınız dosya bulunamıyor)
o zaman burada dikkat etmemiz gereken bir terim var KÖK DİZİNİ
eğer biz kök dizinini c:\html\resim diye tarif edersek ve sonra da bu klasörü sayfa ile birlikte hostyumuza atarsak yapmamız gerekn işlem bu şekilde olacaktır
| Kod:
|
|
<img src "avatar.gif">
|
şeklinde olacaktır.
burada aklınıza takılması gereken bir soru olması gerekir.
"resmin direk linkini yazarsak ne olur?(http://siteismi/resim/resminadı)"
tarayıcımız bu şekilde bir işlemde ilk önce http kısmını ziyaret eder.sonra www (dünya ağı) dünya ağında sizinsitenizi bulur.Sitenizdeki resim klasörüne giriş yapar sonra resminizi arar bulur ve ekrana getirir.
kök dizinine direk "avatar.gif" diye yazarsak tarayıcımızın nereye başvuracağı bellidir.hemen gider bulur resmi ve ekrana getirir.
benzetme ne kadar doğru olur bilemiyorum ama bu;
bir adamın eline adresi verip hiç tanımdaığı bir yerde hiç tanımadığı bir adamı bulmasını istemek olur.
diğer işlem ise siz adamı alıp eve götürüyorsunuz. ona diyorsunuz ki git evin içinde avatar.gifi getir.
hak verirsiniz ki ikinci işlem daha hızlı olur.Unutmayın iyi bir sitenin 3 önemlki hususu vardır
1.)hız
2.)güven
3.)içerik
bu şekilde önemsiz olan kodlar sitenizin hızlı çalışmasını sağlamaktadır |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-10-15, 19:08:09 Mesaj konusu: Re: Sayfamızda Renkler ve Resimler |
|
|
kök dizini ile iligli bir küçük detay daha var oda sıklıkla karşılaştığınız bir kod olduğunu düşünüyorum.
şimdi resim.html diye bir dosyamız var onun ftpnizdeki yolu şu olsun;
ftp:******\html\sayfalar\resim.html
avatar resmimizin adresi şöyle olsun ;
ftp:******\html\resim\avatar.gif
bu durumda kök diznimiz \sayfalar\ klasörüdür. yani html dosyamızın bulunduğu yer kök dizinimizdir.Şimdi resimi iki farklı şekilde çağırabiliriz.ilki tam linkini yazarak (http://www.******.com/html/resim/avatar.gif)
ancak bunu mecbur kalmadığınız müddetçe yapmamanız gerektiğinden bahsetmiştim.ikinci metot ise kök dizininden çağırmak.Yukarıda ki örnek ile bu örnek arasındaki fark kök dizinleri farklı.Dikkat ederseniz sayfalar klasörü içerisinde herhangi bir resim bulunmamaktadır. O yüzden kök dinzimizden başlayarak önce bir adım yukarı( bir üst klasör) çıkıp resmin ylunu göstermeliyiz.Bunu
komutu ile yapabiliriz.Örneğimiz için resim yolu;
| Kod:
|
|
<img src"../resim/avatar.gif">
|
şeklinde olur.Kodumuzu incelersek;
1.) (..) ile kök dizininden bir adım geri gittik( kök dizini sayfalardı.Bir adım gittiğimzide artık html klasörü içerisindeyiz)
2.) / işareti ile kök dizininde bir dosya bulması gerektiğini söyledik
3.) resimler/ ile resimler klasörüne girdik ve bu klasörde yine bulması gerektiğini söyledik
4.)avatar.gif yazarak resmimizi tarayacımıza göstermiş olduk |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-10-15, 19:13:40 Mesaj konusu: Re: Sayfamızda Renkler ve Resimler |
|
|
Resmin Ebatını değiştirmek ve hizalamak
resmimizin ebatlarını ilk mesajda söylediğimiz gibi width ve height komutları ile gerçekleştirmekteyiz.Bir örnek ile geçeceğim
| Kod:
|
|
<img src="resim.jpg" width="25" height="25" >
|
burada resim.jpg resmimizin ebatı ne olursa olsun tarayıcı bu resmin yüksekliğini ve boyunu 25 pixel algılayacak ve o şekilde gösterecektir
hizalamak ise daha önce cümlelerde kullandığımız align komutunu aynı şekilde resimler içinde kullanacaz.örnek
| Kod:
|
|
<img src="resim.jpg" width="25" height="25" align="right">
|
resim.jpg sayfamızın sağ kenarında 25*25 pixel ebatında duracaktır. |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-10-15, 19:19:40 Mesaj konusu: Re: Sayfamızda Renkler ve Resimler |
|
|
Arka Plana Resim Eklemek
İlk mesajda arka plan rengini anlatmıştık.Bunu yaparken
| Kod:
|
|
<body bgcolor="#....">
|
komutu ile gerçekleştirmekteydik şimdi ise arka plana renk değilş resim ekliyeceğiz.
| Kod:
|
|
<body background="../resim/avatar.gif">
|
şeklinde arka planda istediğimiz resmi gösterebiliriz |
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-10-15, 21:47:35 Mesaj konusu: Re: Sayfamızda Renkler ve Resimler |
|
|
Resimde Anahtar Kelime ( SEO için)
Arkadaşlar her şey bir tarafa olmazsa olmazlardan seoyu unutarak sitemizi hazırlamamız...hiç bir anlam ifade etmez.
Bilgisayar öğretmenliğinde okuyan arkadaş bana google amcanın nasıl resimleri bulduğunu sormuştu?Google yapay zekaya mı sahip diyordu.Evet eğer webmasterlar google amcaya yol göstermemiş olsaydı ve google amca buna rağmen fotograf ara diye bir bölüm açabilseydi yapay zekaya sahip olmuş olacaktı.Örneğin araba diye aradığınızda botlar resmi incelyecek ve bu resmin araba olduğuna karar verip arama sonuçlarında gösterecekti ancak bunu yapmak ne bugün nede gelecekte yapmak imkansız.O zaman google amcaya biz yol göstereceğiz.Sitemzideki resimlerin ne olduğunu açıklamamız lazım.Bu açıklamanın ziyaretçi için dğeil seo için olduğunu unutmayın.Ancak ziyaretçiyede güzel bir göz zevki verir.
Fare resmin üzerine geldiğinde resim çin açıklama satırı açılır ve orada gösterir. Yine aynı resim üzerinde çalışmaya devam edelilm örnek olarak
| Kod:
|
|
<img src="avatar.gif" alt="avatar">
|
resmi bu şekilde kullandığımızda google amca sitemizi indexlediğinde sizin sayfanızda avatar resmi olduğunu anlayacaktır.Ziyaretçilerinizde eğer tarayıcıyı sadece metinleri göster şeklinde ayaralamışsa bu resim yerine avatar yazacaktır. |
|
| Başa dön |
|
|
Bu Site Google Adsense ile Gelir Elde Ediyor
|
| Tarih: 2024-11-23, 09:59:59 Mesaj konusu: Forum Arası Reklamlar |
|
|
|
|
| Başa dön |
|
|
polibo06
Site Yöneticisi
Kayıt: Nov 01, 2006
Mesajlar: 2412
Konum: izmirimi özledim
|
| Tarih: 2007-10-15, 21:57:38 Mesaj konusu: Re: Sayfamızda Renkler ve Resimler |
|
|
Gelişmiş Sayfa
Son bir örnek ile konuyu bitireceğim arkadaşlar aklıma şimdilik bu kadar geliyor.Sormak istediğiniz bir şey olursa cevpalamaya hazırımdır ;)
şimdi resim ve renkler ile gelişmiş bir sayfa hazırlıyalım.
Bir tane saydam resmi arka plan yapalım.Bunun üzerine de bir resim ekliyelim.
1.) resmimiz saydam ise arka plana bir renk vermemiz gerekmektedir
2.) arka plan diye belirlediğimiz resimi arka plan haline getirmek
3.) resmimizi eklemek
| Kod:
|
1.) <body bgcolor="#666dfe">
2.)<body bgcolor="#666dfe" background="bulut.jpg">
3.)<body bgcolor="#666dfe" background="bulut.jpg">
<center>
<img src="world.gif" width="360" height="170" alt="harita">
</center>
|
Arkadaşlar resim adreslerini değiştirerek bilgisayarınızda bu kodları deneyiniz. |
|
| Başa dön |
|
|
yenibir
Mesaj: 500+
Kayıt: Nov 08, 2005
Mesajlar: 757
Konum: Sivas
|
| Tarih: 2007-10-16, 01:18:05 Mesaj konusu: |
|
|
Bir ipucuda benden Olsun
Bu uygulamayı archive eklentisinde gördünüz aslında ama farketmeyenler için tekrar olsun
Ziyaret edilmiş ve normal linklere standart değer vermek için ;
/head> sonrasında ekleyin
<body Link="#0000FF" VLink="#0000FF"> <-- ziyaret edilmiş ve edilmemiş linkler mavi tondadır -->
style.css de tanımlı link renginiz ne olursa olsun otomatikman değişecek yeni verdiğiniz renkler geçerli olacaktır |
|
| Başa dön |
|
|
c0der
Mesaj: 1+
Kayıt: Nov 13, 2005
Mesajlar: 27
|
| Tarih: 2007-11-15, 02:50:27 Mesaj konusu: Re: Sayfamızda Renkler ve Resimler |
|
|
Teşekkurler..!,
EDİT ( site linkini sildim lütfen reklamı doğru başlıklarda yapalım. mesajınız içerikle uyumlu olmasına dikkat ediniz)(polibo06) |
|
| Başa dön |
|
|
CLaS_PaTRoN
Mesaj: 1+
amele
Kayıt: Jan 02, 2008
Mesajlar: 15
|
| Tarih: 2008-01-17, 20:52:07 Mesaj konusu: Re: Sayfamızda Renkler ve Resimler |
|
|
c0der senin sayende ßizde ßilgilenizoru tşk
saygılarimla netopsiyon ailesine herşey için tşk
(reklam amaçlı link yasaktır) |
|
| Başa dön |
|
|
|
Arama
Rütbeliler
Profil
Giriş
