03
2008
Meta İmlerinin Kullanımı
Bu imler dedik ya arama motorları için önemlidir.Yani sizin sitenizin başkaları tarafından bulunmasını saylayan kodlardır.
En önemlileri <META NAME=”keywords” CONTENT=”Kelimeler yazılacak”> ‘dir. Bu imdeki kelime yazılacak yere bir ziyaretçinin arama motorunda yazabileceği kelimeler yazılmalıdır.Tabii ki bunu yazarken sitenizle ilgili olan kelimeler olmalı. Gereksiz yere kelime yazılmamalıdır.
Örneğin; bir ziyaretçi arama motoruna “kişisel siteler” yazdığında arama motoru hem “kişisel” hem “siteler” hem de “kişisel siteler” kelimelerinin geçtiği siteleri arar.Tabii ki kendi veritabanında olan sitelerde. Bunun için o arama motoruna kayıt olmalısınız. Eğer sizin siteniz bir kişisel site ise sitenizin bu imine bu kelimeleri eklemelisiniz ki arama sonuçlarında olabilesiniz.Eğer yazmazsanız sonuçlarda olmayabilirsiniz.
Kelimeleri yazarken ziyaretçinin arama motoruna yazabileceği kelimeleri düşünerek yazmalısınız.Kelimeler arasında bir virgül( ,) ve bir boşluk olmalıdır.
Örneğin;
<META NAME=”keywords” CONTENT=”kişisel siteler, kişisel, siteler, ………”> gibi.
Bazı yerlerde Türkçe karakter kullanmayın denilir. Ama siz yine de kullanın.En iyisi hem Türkçe olan hem de Türkçe karaktersiz kelimeleri yazmanızdır.Bir kelimeyi gereksiz yere tekrar tekrar yazmanızın bir anlamı yoktur.Bunu arama motorları yemez.
Meta İmlerinin Arama Motorları ile İlişkisi(Önemi)
Bir çok kez belirttiğimiz gibi arama motorları aramayı kendi veritabanındaki sitelerde yapar. Bu sitelerin meta imlerine, title kodlarına ve sitenin içeriğine bakarlar. Öncelik, title kodlarındadır. Daha sonra meta imleri ve en son da içerik gelir.
Ben sitemde her zaman title kodları arasına <META NAME=”keywords” CONTENT=” “> iminde yazdığım bütün kelimeleri yazarım ve gayet de işe yarar. Siz de böyle yaparsanız göreceksiniz ki işe yarayacak.
Meta imlerini ne kadar iyi ve ziyaretçinin umduğuna göre yazarsanız arama motorlarında bulunmanız o kadar kolay olur.Unutmayın ki sitenizi ziyaretçi arayacaktır.Onun gibi düşünmelisiniz.
Google Sonuç Listesinin En Başında Olabilme
Meta imlerini ve title kodlarını en iyi bir şekilde(yukarıda anlattığım gibi) hazırladıktan sonra sitenizi yayınlamanız durumunda google arama motorunun en başlarında olabilirsiniz. Ama bu yine de garanti değildir.
Ayrıca ne kadar çok site sizin sitenize link verirse sitenizin arama motorunda listelenmesi de o kadar çok olacaktır. Yani mümkün olduğu kadar sitenizi diğer sitelerle bağlayın, sitenizi onların sitelerine ekleyin. Arama sonucunda sizin siteniz çıkmasa bile onların siteleri çıkacak ve sizin sitenizin linki de belirecek.
Şuna tanık oldum ki bir çok siteye kullanıcı olmak bile o sitenin arama motorlarında listelenmesine sebep oluyor. Böyle benim sayemde kullanıcı adımı aradığımda bir çok site arama motorlarında listelendi ve benim kullanıcı adım sonuçlarda çıktı. Sizde bir siteye kayıt olurken kullanıcı adı o kadar önemli değil de mutlaka sitenizin adresini yazın.
Google’ a Kayıt Olma
Arama motorlarının sonuç listelerinde nasıl listeleneceğinizi anlattık.Ama siteniz arama motoruna kayıtlı değilse sonuç listesinde olmanız mümkün değil. Bunun için arama motorlarına kayıt yaptırmalısınız. Aşağıdaki adresi tıkla***** Google arama motoruna kayıt yaptırabilirsiniz.
http://www.google.com.tr/add_url.html
Kayıt işlemi iki hafta gibi bir zaman sürer.Bu sürede arama motoru sitenizi araştırır ve sitenizi veritabanına yükler. İki hafta sonra imlerin arasına yazdığınız bir kelimeyi aratınız. Kelimler arasına çok özel bir kelime ko***** (sadece sizin kullanabileceği türden bir kelime) aramayı o kelime ile yaparsanız daha iyi olur.Eğer sonuç listesinde varsanız iyi, yoksanız sitenizi tekrar kayıt edin.
AltaVista’ ya Kayıt Olma
AltaVista bir çok ziyaretçinin arama yaptığı bir site.Bu yüzden bu siteye de sitenizi kayıt yaptırmanız iyi olacaktır.Aşağıdaki adresle bunu yapabilirsiniz.
http://addurl.altavista.com/addurl/new
Body İmi Hakkında
Web sayfamızın içeriğini <body></body> imleri arasında oluşturacağımızı söylemiştik. Ayrıca <body> imi içinde kullanılan bazı kodlar(öznitelikler) olacak. Bunlar bazı işlerimize yarayacak. Javascript kodlarının bazıları da bu im içine yazılır
______________________
Merhaba Web Tasarımı”
Bu kadar şeyden sonra kaydettiğimiz web sayfamıza bir şeyler yazdırmaya ve içeriğin ilk adımını atmaya ne dersiniz.
Şimdi bir not defteri uygulaması açın ve içine web sayfamızın temel yapı taşları olan
Kod:
<html><head><title>Web Tasarımı</title></head><body></body></html>
kodlarını yazın ve merhaba.html diye kaydedin. Sonra merhaba.html dosyasını açın. Başlık kısmının “Web Tasarımı” olduğunu görün. Sayfada başka hiç bir şey yok değil mi? Hadi “Merhaba Web Tasarımı” yazdıralım.
Not defterine yazdığınız yukarıdaki kodların <body></body> imleri arasına “Merhaba Web Tasarımı” yazın.
Yani <body>Web Tasarımı</body> ….
Sonra kaydedin ve web sayfasını açın. Başlığının yine “Web Tasarımı” olduğunu ve içine “Merhaba Web Tasarımı” yazdığını görüyorsunuz değil mi? Görmeniz lazım.Göremiyorsanız yanlış bir şeyler yapmış olmalısınız, kontrol edip düzeltin.
_____________________________________________
Sayfa Rengini Ayarlamak
Yukarıdaki gibi yaptığımız web sayfasına baktığınızda sayfa renginin beyaz olduğunu göreceksiniz. Bu renk hoşunuza gitmeyebilir ve değiştirmek isteyebilirsiniz değil mi? Bu nasıl olacak peki.Şimdi sıra buna geldi…
Hani demiştik ya <body> iminin içine bazı şeyler yazılacak ve bunlar işimize çok yarayacak diye. İşte sayfamızın rengini de <body> iminin içine bir öznitelik yazarak değiştirebiliyoruz.
Bu öznitelik BGCOLOR=”Renk Adı” dır.
Kullanımı <body BGCOLOR=”Renk Adı”> şeklindedir.
Buradaki “Renk Adı” yazdığımız yere ya İngilizce renk adları yazılır(kırmızı=red, siyah=black vb…) ya da renk kodları(kırmızı=red=#FF0000) yazılır. Bu renk kodlarının bütün listesini yandaki ipuçları bölümündeki renk kodları linkine tıkla***** erişebilirsiniz.
Dikkat edilmesi gereken bir husus, body ile BGCOLOR arasında bir boşluğun olmasıdır.Bu boşluk mutlaka olmalı yoksa kod çalışmaz.
_______________________________________________
Sayfa Rengini Resim Olarak Ayarlamak
Sayfamızın rengini değiştirmek için sadece renk adları ve kodları kullanmayız. Belki bu renkleri beğenmeyebiliriz ve istediğimiz bir resmi sayfanın arka planına yerleştirebiliriz.Tıpkı bilgisayarınızın masa üstündeki resmi değiştirmek gibi. Bunlar aynı şeylerdir .Bu kod da <body> imi içrisine yerleştirilir.
Bu öznitelik BACKGROUND=”Resim Adı”> dır.
Kullanımı <body BACKGROUND=”Resim Adı”> şeklindedir.
“Resim Adı” yazdığımız yere sayfanın arka planını hangi resimle değiştirmek istiyorsak bu resmin adını yazmalıyız.
Dikkat edilmesi gereken husus bu resim adının ve uzantısının doğru yazılmasıdır.
Örneğin; resim.jpg, resim.gif, resim.bmp vb. Bir de resmin adresinin doğru yazılması gerekir. Eğer resim web sayfamızın bulunduğu dizinin içinde ise sadece resmin adını yazmamız yeter.Ama sayfanın içinde bulunduğu dizin içindeki bir dizinde ise bu sefer ./dizin adı/resim adı şeklinde olmalıdır.
Örneğin; sayfamız WEB klasörü içinde olsun. WEB klasörü içinde de biR “resimler” klasörü olsun, resmimizin adı benimresmim.jpg olsun ve resmimiz resimler klasörünün içinde olsun.
O zaman <body BACKGROUND=”./resimler/benimresmim.jpg”> yazmamız gerekir.
Ayrıca dikkat edilmesi gereken diğer bir hususta body ile BACKGROUND arasında bir boşluğun olmasıdır. Bu boşluk olmazsa kod çalışmaz.
_________________________________________-
Metni Kalın, Italic, Altı ve Üstü Çizili Yapmak
Word programını hepiniz kullanmışsınızdır. Metninizi biçimlendirmek için metni seçer ve kalın için K, italic için T, altını çizmek için de A yı tıklardınız.
Web sayfasını tasarlamada ise metni kalın yapmak için <B>, italik yapmak için <I>, altı çizili yapmak için <U> ve üstü çizili yapmak için de <STRIKE> imleri kullanılır.
Kalın Yapmak: kalın olmayacak metin(şart değil) <B>Kalın yapılacak metin</B> kalın olmayacak metin(şart değil).
Italik Yapmak: Italic olmayacak metin(şart değil) <I>Italik olacak metin</I> Italic olmayacak metin(şart değil).
Altı Çİzmek: Çizgisiz metin(şart değil) <U>Altı çizilecek metin</U> Çizgisiz metin(şart değil).
Üstü Çizmek: Çizgisiz metin(şart değil) <STRIKE>Üstü çizilecek metin</STRIKE> Çizgisiz metin(şart değil).
Bunları hepsi de istenilen kadarı da birlikte kullanılır.
Örneğin;
<B><I><U><STRIKE>Metin</STRIKE></U></I></B>
Örneğin;
<STRIKE><I>metin</I></STRIKE>
Dikkat edilmesi gereken husus ilk başa yazılan im bitişte en sona yazılıyor.Yani 1.2.3 şeklinde başlayan sayılar 3.2.1 şeklinde bitmeli(İmleri bunlara benzettiğimizi düşünelim).
________________________________
Altindis ve Üstindis Eklemek
Kimya derslerinde bileşik veya element sembolleri gördük. Örneğin H2O, H+1 vb. Bunları da web de yazabiliriz.
Altindis Eklemek: Normal Yazı(şart değil) <SUB>Altindis için değer</SUB> normal yazı(şart değil)
Üstindis Eklemek: Normal yazı(şart değil) <SUP>Üstindis için değer</SUP> normal yazı(şart değil).
Örnek:
H<SUB>2</SUB>O , H<SUP>+1</SUP> vb…
__________________________________
Metin(Yazı) Tipini Ayarlamak
Web sayfanızın içeriğini hazırlarken yerleştireceğiniz metinlerin yazı tiplerini ayarlamak isteyebilirsiniz.Word kullanırken metni seçip biçimlendirme araç çubuğundaki yazı tiplerinden birini seçtiğinizde metninizin yazı tipi değişir ve istediğiniz gibi olur.Bunu tabii ki de html ile kullanarak yapabilirsiniz.Html ‘nin asıl amacı metin biçimlendirmektir.
Bu <FONT> imi ile yaparız.Tabii ki bu im tek başına işe yaramaz bunun öznitelikleri vardır.Bu öznitelikler metnin tipini, rengini ve boyutunu ayarlamaya yarar ve hepsi birbirinden farklı olmalarına rağmen aynı im içinde kullanılırlar.
Metnin Tipini Değiştirmek: <FONT FACE=”yazı tipi adı”>Yazılacak Metin</FONT>
FONT ile FACE arasında bir boşluğun olduğuna dikkat edin.Bu diğerleri gibidir.Boşluk olmazsa çalışmaz.
“Yazı tipi adı” yazdığımız yere yazı tiplerinin adlarını yazmalısınız.Bunları bilgisayarınızdaki word programını açarak öğrenebilirsiniz.
Örneğin;<FONT FACE=”tahoma”>Merhaba web tasarımı.Web sitesi tasarlamak eğlenceli</FONT>
Birden çok yazı tipi yazabilirsiniz.Bunun için her yazı tipi arasına virgül(,) koymalısınız.
Böyle yaparsanız metniniz sadece ilk yazdığınız yazı tipi ile biçimlendirilecektir.Diğerleri ne olur ne olmaz misalidir.
_______________________________________
Metin Boyutunu Ayarlamak
Yazdığınız metnin boyutunu da ayarlamak isteyebilirsiniz.Metninizin ne kadar küçük ya da büyük olmasına karar verebilirsiniz.
Bunu yine font iminin içine yazılan size özniteliği ile sağlarız.
Metin Boyutunu Ayarlamak: <FONT SIZE=”boyut”>metniniz</FONT>
FONT ile SIZE arasında boşluk var.
“boyut” yazdığımız yere 1 den 7 ye kadar sayı yazabilirsiniz(1 ve 7 dahil).
Örneğin: <FONT SIZE=”5″>merhaba web tasarımı</FONT>
____________________________________
Metin Rengini Ayarlamak
Sayfanızın rengini değiştirmeyi isteyebileceğiniz gibi metninizin rengini de değiştirmek isteyebilirsiniz.Hep siyah yazmaktan bıkmış olmalısınız değil mi?
Bunun için yine font imini ve onun özniteliği olan COLOR ‘u kullanacağız.
Metin Rengini Ayarlamak: <FONT COLOR=”renk adı”>Metniniz</FONT>
FONT ve COLOR arasında boşluk var.
“renk adı” yazdığımız yere sayfa rengini değiştirmek için kullandığımız renkler vardı ya işte onlar yazılmalıdır.Ya renk adının İngilizce kendisi yada kodu kullanılmalıdır.
Her defasında metinlerin renklerini yazmaktan hoşlanmayabilir ve metin rengini bir kerede de ayarlamak isteyebilirsiniz. Bu durumda sayfanızdaki tüm metinlerin rengi aynı olacaktır.
Bunun için <BODY> iminin bir özniteliği olan TEXT imi kullanılır.
Kullanımı:
<BODY TEXT=”renk adı yada kodu”>
Metin rengini bir resim olarak belirleyemezsiniz.
______________________________________
Yorum Yazısı Eklemek
Bazen sayfanızın içerisine eklediğiniz yorumlar size neyi nerde nasıl ve ne zaman yaptığınızı hatırlatabilir ve yarım kaldığınız işi bitirebilirsiniz.Bu yorum yazıları sayfanın içindedir ama ziyaretçi bunları göremez.İçi açılıp bakıldığında görülebilir.
Yorum Yazısı Eklemek: <!– yorumunuz yada her hangi bir şey –>
Örneğin; <!– bu belgenin sahibi Mu®tazA[forumay]‘dır.Kimse izinsiz kullanamaz –>
_____________
Alt Satıra Geçmek
Şu ana kadar yazdığınız bütün metinler hep yan yana yazıldı.Pencereye sığmadığı için de alt satıra otomatik olarak kaydırıldı.Ama siz istediğiniz yerde bir alt satıra geçmek istersiniz mutlaka değil mi?
Alt Satıra Geçmek: Metniniz <BR>Alt Satıra Geçecek olan Metniniz
Bunun sonucu şöyle olacaktır.
Metniniz
Alt Satıra Geçecek olan Metniniz
_____________________________________
Paragraf Oluşturmak ve Alt Paragrafa Geçmek
Yazılarınız mutlaka paragraflardan oluşacaktır.Her bir paragraf arasında belli bir boşluk olacaktır.Bu boşluk satır boşluğundan daha fazladır.Bu imle metinler arasında daha fazla boşluk bırakabilirsiniz.
Bu imler arasına yazılan metin tarayıcı tarafından bir paragraf olarak algılanır ve diğerlerine göre daha fazla boşluk yer açar.
Bu imler <P>yazılacak metin</P> imleridir.
Örneğin; Normal metin yazılır <P>paragraf olacak metin yazılır</P>
Bunun sonucu şöyle olacaktır.
Normal metin yazılır
paragraf olacak metin yazılır
Görüldüğü gibi <BR> iminden daha fazla boşluk bırakır
______________________________________________
Birden Fazla Boşluk Eklemek
Bazen kelimeler ya da karakterler arasına birden çok boşluk ekleyebilirsiniz.Yani şöyle yazmak isteyebilirsiniz: W e b tasa rı mı
Eğer not defterinde eklemek istediğiniz kadar boşluğu boşluk çubuğuna(spacebar) basarak yaparsanız sadece tek bir boşluk olur.Böyle yapılan boşluklar boşluk olarak değerlendirilmez.
Örneğin siz not defterinde şöyle yazarsanız: “w e b” sonuç olarak “w e b” alırsınız.
Bu kadar boşluk eklemek için kodunu kullanmalısınız.Boşluk eklemek istediğiniz yere ne kadar boşluk eklemek istiyorsanız o kadar ; koymalısınız.
Örneğin; w e b&nb sp ;
sonucunda w e b alırsınız.Yani 3,4,1 boşluk…
DİKKAT:Bu imler büyük yazılırsa çalışmaz ona göre….
______________________________________________
Başlık Eklemek
Siteniz için yazdığınız bir yazının başlıkları olacaktır. Sayfanıza koyacağınız başlıkların boyutları diğer yazılara göre daha büyük olacaktır.
Başlık eklemek için <Hn></Hn> imleri kullanılır.
Buradaki n 1 den 6 ya kadardır.(1ve 6 dahil).Ancak burada yazı ne kadar büyük yapmak isterseniz “n” i o kadar küçük yapmalısınız.Yani 1>6 burada geçerlidir.
Kullanımı:
<Hn>Başlığınız</Hn>
Örneğin; <H1>Web Tasarımı</H1>
<h2>web tasarımı2</h2>
Sayfadaki Öğeleri Ortalamak
Sayfanıza koyacağınız metin ya da resimleri ortalamak isteyebilirsiniz.Bunun için kullanılan im <CENTER>Ortalanmak istenen öğe yada öğeler</CENTER> imidir.
Bu imler arasında kalan öğeler sayfanıza göre ortalanacaktır.Diğer öğeler ise sola hizalanacaktır(eğer değiştirilmemişse).
Örneğin;
Merhaba web tasarımı<CENTER>web tasarlamak çok eğlenceli</CENTER>
Sonuç:
Merhaba web tasarımı web tasarlamak çok eğlenceli
Bu şekilde bir hizalama fazladan boşluk oluşmasına neden olacağından hoşunuza gitmeyebilir.
Metni Sağa, Sola ve Ortaya Hizalamak
Biz bir paragraf oluşturmayı <P></P> imiyle gerçekleştirdiğimizi öğrenmiştik. Metinleri ve diğer öğeleri hizalamak için de bu imi kullanabiliriz. Öğeleri sağa, sola ve ortaya hizalamak için <P> iminin ALIGN özniteliğini kullanırız.ALIGN hizalama anlamında kullanılır.İlerde çokça kullanacağız.
Öğeleri Sağa Hizalamak:RIGHT
Kullanımı:
<P ALIGN=”RIGHT”>Sağa Hizalanacak Öğeler</P>
Öğeleri Sola Hizalamak:LEFT
Kullanımı:
<P ALIGN=”LEFT”>Sola Hizalanacak Öğeler</P>
Öğeleri Ortalamak:CENTER
Kullanımı:
<P ALIGN=”CENTER”>Ortalanacak Öğeler</P>
Sayfanın Kenar Boşluklarını Ayarlamak
Sayfanızı tasarladığınızda yukarıda ve aşağıda kalması gereken boşlukları ayarlamak isteyebilirsiniz.Benim tercihim her zaman hiç boşluğun olmamasıdır.Sayfa tamamen üste ve alta, sağ ve sola yapışır,hiç boşluk kalmaz.
Bu kodlar <BODY> imi içinde kullanılan özniteliklerdir.
Bunlar;
TOPMARGIN=”n”
LEFTMARGIN=”n”
MARGINHEIGHT=”n”
MARGINWIDTH=”n”
dir.
Kullanımı:
<BODY TOPMARGIN=”n” LEFTMARGIN=”n” MARGINHEIGHT=”n” MARGINWIDTH=”n”> şeklindedir.
Her özniteliğin ve BODY ile aralarında bir boşluğun olduğuna dikkat edin.Bu boşluk hep olmalı, bu kuraldır.Boşluk yoksa yanlış olur.Yani olmaaaaaaaaaaz.
Diğer önemli olan şey ise ” “(tırnak işaretleri) kullanmalısınız.Ya kullanmayacaksınız ya da iki tırnak işaretini de yazacaksınız.Siz en iyisi kullanmaya alışın.
Yanlış bir kullanıma örnek: <BODY TOPMARGIN=”1> görüldüğü gibi bir tırnak işareti unutulmuş.Bu olmamalıdır.Tıpkı boşluk gibi.
Buradaki “n” yerine istenilen sayı yazılabilir.Tabii ki ne kadar boşluk bırakılmasını istiyorsanız o kadar büyüklükte sayı yazmalısınız.
Hiç boşluğun olmamasını istiyorsanız “n” yerine sıfır(0) yazmalısınız.
Satırları Bir Arada Tutmak
Bir alt satıra geçme imi olan <BR> yi kullanmazsanız ve metninizi çok uzun yazarsanız metniniz tarayıcınızın boyutuna göre alt satıra ya geçecektir ya da geçmeyecektir.
Örneğin siz 15 cm lik bir metin yazdınız.Ama tarayıcınızın boyutu 10 cm. Bu durumda metninizin 5 cm lik kısmı alt satıra geçecek.Yani kaydırma çubukları olamayacaktır.Ama isterseniz alt satıra geçmeyip dümdüz ileride durmasını sağlayabilirsiniz tarayıcınızın boyutu küçük olsa bile.
Bunu <NOBR> Dümdüz olacak metin</NOBR> imi le yapabiliriz.
Bu şekilde yazılan metin tarayıcınızın boyutu küçük olsa bile düz olacak ve altta kaydırma çubuğu oluşacaktır.
Satırları Sonlandırmak___
Yukarıda kullandığımız <NOBR> imi ile birlikte kullanılmak zorunda olunan bu im <WBR> imidir.
<BR> imine çok benzemektedir.
<NOBR> ile oluşturulan düz metinin istenilen bir yerinden keser ve alt satıra geçer.<BR> den farkı tarayıcı penceresini ne kadar küçültürse küçültsün <NOBR> imi kullanıldığı için yine dümdüz olacaktır.
Kullanımı:
<NOBR>dümdüz olacak metin satırı<WBR>Kesilip alt satıra geçilecek metin</NOBR>
Bu im <NOBR> imi olmadan çalışmaz.Ben şuana kadar bu imleri hiç kullanmadım doğrusu
Blok Alıntılar Kullanmak
Hani word programında biçimlendirme araç çubuğunda “Girintiyi Arttır” ve “Girintiyi Azalt” vardır ya işte bu im “Girintiyi Arttır” ın yaptığı işi yapar.
Kullanımı:
<BLOCKQUOTE>Girintili Olacak metin</BLOCKQUOTE>
Ön Biçimlenmiş Metin Kullanmak
Bir şiir yazdığınızı düşünün ve çok fazla mısrası olsun.Siz her mısra sonuna mutlaka <BR> imini koymak zorunda kalacaksınız.Şiirinizi normal olduğu gibi yazıp (<BR> imi kullanmadan) öylece kalmasını sağlayabilirsiniz.
Bu im <PRE>Ön Biçimlenecek metin</PRE> imidir.
Ya da cep telefonlarında karakterlerden yapılmış mesajlar olur ya bunları işte bu <PRE> imi ile çok rahat yapabilirsiniz.Başka şekilde uğraşsanız günler alır belki de yapamazsınız.
Örneğin;
-_o/
\ Hey sen!
JL
Seni ne
o kadar mi
< > Seviyorum?
JL
-___o____-
/
Bu
kadar!
Bu sms <PRE> ile Yapılmıştır.
Bunu yapabilmek için yukarıdaki gibi şekli oluşturup başına ve sonuna <PRE></PRE> imlerini koyun.
Resimlerin Avantaj ve Dezavantajları
Resimler sitenizin güzel görünmesi ve sitenizi daha estetik yapabilmenizi sağlar.Ancak resimler siteye ekstra yük getirir.Yani resimlerin yüklenmesi uzun sürer.Tabii bu süre resmin boyutuna bağlıdır.
Bir web sitesi 20 saniyeden daha uzun bir sürede açılıyorsa bu site çok ziyaretçi kaybeder veya hiç ziyaretçi çekemez.Resimler sitenizin geç açılmasına neden olan etmenlerden sadece bir tanesidir.
Bu yüzden resimlerin kullanımı büyük dikkat ve hesaplama ister.Siz siz olun sitenize fazla resim koymayın.
Sayfaya Resim Koymak
Resimler de metinlere benzer. Yani istediğiniz yere istediğiniz resmi koyamazsınız. Metinleri her bir karakter aralığına yazıyoruz. Resimleri de bu karakter aralarından bir tanesine yerleştiririz.
Resimleri sayfaya koymak: <IMG src=”resim adı”>
IMG ile SRC arasında bir boşluk vardır.SRC resminizin adını ve resmin tam yolunu belirtmeye yarar.
Burada dikkat edilmesi gereken husus resmin adının, uzantısının ve yolunun doğru yazılmasıdır.Daha önce bu yol ve resim adı bilgisini vermiştim.
Örneğin; <IMG src=”./resimlerim/ben.gif”>
Resmin Kenarlığını ve Rengini Ayarlamak
Bazen resminizin güzel sağlamasını, ilgi çekmesini ve vurgulu olmasını isteyebilirsiniz.Bunun için resminize kenarlık ekleyebilirsiniz. Bunu <IMG> iminin özniteliği olan BORDER ile yapabiliriz.
Kullanımı: <IMG src=”resim adı” BORDER=”n”>
BORDER ‘ ı yazarken de bir önceki nitelikten bir boşluk ile ayırdığıma dikkat edin. Bu çok önemli.
Buradaki “n” resminize vermek istediğiniz kenarlığın büyüklüğüdür ve istediğiniz sayıyı verebilirsiniz. Tabii vereceğiniz kenarlığın rengini de belirlemek daha güzel olmasına neden olabilir.
Bunu da BORDERCOLOR ile sağlıyoruz.BORDERCOLOR BORDER olmadan çalışmaz.
Kullanımı:
<IMG src=”resim adı” BORDER=3 BORDERCOLOR=”renk adı yada kodu”>
Her nitelik arasında bir boşluk mutlaka olmalı bunu kesinlikle unutmayın.
Ama bazen de bu kenarlığı tamamen kaldırmak isteyebilirsiniz.Çünkü bazı durumlarda resminizin güzelliğini bozabilir.Bunun için yapmanız gereken sizin de tahmin edebileceğiniz gibi(eğer tahmin edemiyorsanız biraz daha html yi anlamaya çalışın) kenarlık sayısını sıfır(0) yapmaktır.
Yani BORDER=”0″ . Bunu kullanırsanız kenarlık olmayacağına göre kenarlık rengi de olmayacaktır.
Resmi Hizalamak
Biz daha önceki konularımızda <P> imini görmüş ve içinde ALIGN özniteliğini kullanmıştık.Bu niteliği de çokça kullanacağımızı belirtmiştik.İşte o kullanacağımız yerlerden bir tanesi.
Burada ALIGN özniteliğini tabii ki <IMG> imi ile yapacağız.
Resmi Sağa Hizalamak: <IMG src=”resim adı” ALIGN=”RIGHT”>
Resmi Sola Hizalamak: <IMG src=”resim adı” ALIGN=”LEFT”>
Resmi Ortalamak: <IMG src=”resim adı” ALIGN=”CENTER”>
RIGHT, LEFT ve CENTER metinden önce yada sonra kullanılır.Metnin içinde kullanılmazlar.
<IMG src=”resim adı” ALIGN=”TOP”> Resmin üstü metnin üst kısmı ile aynı hizaya gelir.
<IMG src=”resim adı” ALIGN=”BOTTOM”> Resmin tabanı ile metnin tabanı aynı hizaya gelir.
<IMG src=”resim adı” ALIGN=”MIDDLE”> Metin resmin tam ortasına gelir.
TOP, BOTTOM, MIDDLE ise metinden önce yada sonra kullanılabileceği gibi özellikle metin içinde kullanılabilir.Metnin içinde kullanılmak içindirler.
Her nitelik arasında boşluk var.
Resmin Boyutlarını Belirtmek
Resminizin aslı küçük ama sayfanızda büyük olmasını istiyor olabilirsiniz.Küçük bir resmin boyutunu büyütürseniz çözünürlüğü bozulur.Yani eski hali kadar net ve güzel olmaz.
Resmin boyutlarını belirtmek daha kolay yüklenmelerini sağlar.Bu da size zamandan tasarruf sağlayabilir.
Bunun için <IMG> iminin WIDTH ve HEIGHT öznitelikleri kullanılır.
Kullanımı: <IMG src=”resim adı” WIDTH=”n” HEIGHT=”n”> şeklindedir.
Her nitelik arasında boşluk var.
“n” resminizin boyutunu belirtmek için kullanılan sayıdır.Buraya iki tane n koymam WIDTH ve HEIGHT değerlerinin aynı olacağı anlamını vermez.Yani değerleri farklı olabilir.
WIDTH yatay uzunluğunu belirtir.
HEIGHT ise dikey uzunluğunu belirtir.
Bir benzetme: Bir dikdörtgenin kısa kenar uzunluğu HEIGHT, uzun kenar uzunluğu ise WIDTH ‘dir.
Resme Alternatif Bir Metin Eklemek
Resimlerinizi web alanınıza yüklediniz ancak bir hata oldu ve gözükmediler.Bu durumda resmin yerine bir şey yazarak bir şeyler belirtebilirsiniz.
Ayrıca bununla ziyaretçi resminizin üzerine fareyi getirdiğinde yazmış olduğunuz bu alternatif metin görünür.
Örneğin; resmin adını yada buraya tıklayın gibi şeyler yazabilirsiniz.Bu metinler resmin yüklenmemesi ve ziyaretçinin faresini resmin üzerine getirdiği durumlarda görünür.Başka bir şekilde görünmez.
Bu <IMG> iminin ALT özniteliği ile yapılır.
Kullanımı: <IMG src=”resim adı” ALT=”Resim için tanıtıcı bir cümle yada kelime”>
Boşluk tabii ki var.Buraya istediğiniz her hangi bir şey yazabilirsiniz.
Resimlerin Çevresine Metin Yerleştirmek
Saf resim bir işe yaramaz.Bunun çevresine metin yerleştirmeniz gerekir.Biz daha önce resimlerinde bir karakter olarak düşünülmesi gerektiğini söylemiştik.Resmi yerleştirdikten sonra hemen sonra metin yazarsanız metin resmin yanına gelecektir.Metin bir alt satıra kaydığında ise resmi atlayacaktır.Çünkü resim üst satırın bir karakterlik yerine oturmuştu.
Resminizin 5 cm büyüklüğünde olduğunu düşünün ve yanına bir metin yazın ve bu metin uzun bir metin olsun.Ne olacaktır.Resimden sonra bir satır metin yazılacak ve alt satıra geçildiğinde 5 cm lik alan boş kalacaktır.Bunu önlemek için <IMG> iminin ALIGN özniteliği kullanılır.
Kullanımı: <IMG src=”resim adı ve yolu” ALIGN=”RIGHT, LEFT”>
Yukarıda anlattığın gibi resmi hizaladığımızda metin resmin çevresine yerleşecektir.Yani bir satırdan sonra 5 cm atlamayacak resmin hemen yanından devam edecek.Yani metin resme sarılacaktır.
Metin Sarımını Durdurmak
Resmimizin çevresine metin sarmayı öğrendik değil mi?
Küçük bir resim kullandığınızı ve sarım yapmamayı düşünün.Bu resmin tek başına daha güzel görünmesini sağlayabilir.
Bunu <BR> iminin CLEAR özniteliği ile yapabiliriz.
Kullanımı:
<IMG src=”resim adı” ALIGN=”LEFTya da RIGHT”><BR CLEAR=”LEFT, RIGHT ya da ALL”> şeklindedir.
Önce resim sonra <BR CLEAR=”">
LEFT resim solda ve metin sağda ise sağ taraf boş kalır ve metin resmin bittiği yerden devam eder.
RIGHT resim sağda ve metin solda ise sol taraf boşalır.
ALL ile resmin her iki tarafını boşaltabiliriz.
Bu özniteliklerden biri kullanılır.Hepsi birden kullanılmaz.
Yatay Çizgi Eklemek
İstediğiniz her hangi bir yere bir çizgi eklemek isteyebilirsiniz.Ancak bu çizgi sadece yatay olabilir.Dikey olamaz.Dikey için bir resim kullanabilirsiniz.
Yatay Çizgi Eklemek: <HR> imleri ile olur.
İsterseniz çizginin rengini, yatay ve dikey uzunluğunu ve hizalamasını belirtebilirsiniz.
Çizginin rengini ayarlamak: <HR COLOR=”renk adı”>
Çizginin yatay uzunluğunu ayarlamak: <HR WIDTH=”n”>
Çizginin dikey uzunluğunu ayarlamak: <HR SIZE=”n”> HEIGHT değil bilemediniz.
Çizginin hizalaması: <HR ALIGN=”LEFT, RIGHT ya da CENTER”>
Bunların hepsi birlikte kullanılabilir.
Örneğin; <HR ALIGN=”CENTER” COLOR=”#fefe00″ WIDTH=”300″ SIZE=”5″> Destekleri için www.petekbilgisayar.com teşekkürler.
« buz devri kayseri şivesi dublaj | Plesk Panel Map Path Ayarı »
Etiketler:
Yorumlar





