<head></head> kodları arasında <title>Sayfanın Başlığı</title> kodları ve <meta> imlerinin olduğunu ve bunların sayfa için büyük önem taşır.<title></title> kodlarını da anlatıp meta imlerini sonraya bırakmıştım.
Şimdi meta imlerini tanıyalım.
<META Sitedeki Linkleri Sadece Üyelerimiz Görebilir.."Content-Type" CONTENT="text/html; charset=windows-1254"> Kodu sayfanızda ne tür bir metnin olduğunu(text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi kodlama(windows-1254 yazmakla) ile yapıldığını gösterir.
<META Sitedeki Linkleri Sadece Üyelerimiz Görebilir.."Content-Language" CONTENT="tr"> Kodu sayfanızın dilinin Türkçe(tr yazmakla.İstenirse değiştirilebilir.) olduğunu gösterir.
<META NAME="author" CONTENT="SERKAN ASLAN"> Kodu sayfanın tasarımcı kimliğini gösterir.
<META NAME="copyright" CONTENT="© 2003 SERKAN ASLAN"> Kodu sayfanın telif hakkının kime ait olduğunu gösterir.
<META NAME="keywords" CONTENT="Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın."> Kodu sayfanın hangi kelimeleri içerdiğini gösterir.Burası arama motorları için çok önemlidir.!!!!!
<META NAME="Description" CONTENT="Sayfanızın Kısa tanıtımını buraya yapın."> Kodu sayfanın kısa tanımı yapılmak için kullanılır.
<META name="GENERATOR" CONTENT="Microsoft FrontPage 5.0"> Kodu sayfanın hangi editörle yapıldığını gösterir.
<META NAME="ROBOTS" CONTENT="ALL,FOLLOW,INDEX"> Kodu sayfanızı tüm arama motorlarının veri tabanına kaydolabilme hakkının verilmiş olduğunu gösterir.
<META NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir.GENERAL yazmakla bütün katagoride olduğu belirtilmiş oldu.
__________________________________________________ ___
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.
Sitedeki Linkleri Sadece Üyelerimiz Görebilir..
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.
Sitedeki Linkleri Sadece Üyelerimiz Görebilir..
_________________________________________________
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 sitesi </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ı EklemekBazen 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 costantine[hacktürkiye]'ye aiddir.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çmekYazı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 EklemekBazen 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 ;
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 EklemekSiteniz 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>
Merhaba html kodlarl ile nasıl site yapıldığı ile ilgili sorularınız varsa bu konu altında belirtebilirsiniz.Linkback: https://www.buyuknet.com/html-kodlari-notepad-de-site-yapin-t22040.0.html