Sayfa içeriği
Başlıklar
Not: Daha önce başlıklar dersin'de anlatım.
Başlıklar altı seviyelidir, birincisi h1, ikincisi h2, üçüncüsü h3, dördüncüsü h4, beşincisi h5 ve altıncısı h6'dır.
H1 etiketi genellikle ana sayfanın başlığı veya daha büyük (ana) makalenin başlığı için kullanılır ve tek başına kullanılır, ancak başlık etiketinin tek bir sayfada birden fazla kullanılmasından zarar görme korkusu yoktur. Ancak, <h1> etiketinin sayfa başına bir kez kullanılması önerilir.
Arama motorlarının, web sayfalarını yapısını ve içeriğini indekslemek için adresleri kullandığını bilmelisin ve bu, gelecekteki projelerini arama motorlarında ön planda olması ve bunlara kolay erişim için çok önemlidir.
İster arama motorunda olsun ister sayfa açıldıktan sonra okuyucunun gözüne ilk çarpan sayfa başlığıdır, bu yüzden başlık eklemek çok önemlidir.
Arama motorunun üst sıralarında yer almak için siteni SEO ile tam uyumlu olması gerekir ve bu genellikle programcının işi değildir, ancak şimdi kendi siteni oluşturursan nasıl yönlendirileceğini dikkat etmemelisin, bunun yerine sadece öğrenmeye odaklanmanı dikkat etmelisin.
Sayfa başına bir kez <h1> kullanmak neden daha iyidir?
Tarayıcı üzerindeki yükü azaltmak için Tarayıcılar genellikle h1 etiketlerini işlerken zorluklarla karşılaşır, bu nedenle diğer h2, h3, h4, h5, h6 etiketlerinin aksine çok fazla <h1> etiketinden kaçınmak tercih edilir.
İster yabancı ister türk olsun, programlama sitelerinde h1 etiketini birden fazla kullanmanın arama motorlarını engelleyebileceğine inandıkları birçok söylenti var, ancak bu doğru değil.
Sayfa başına birden fazla h1 kullanan birçok büyük web sitesi vardır ve bu, h1 kullanmanın sitenin arama motorundaki gücünü azalttığı veya tam tersi anlamına gelmez. Bu doğru değil ama H1 kullandığında sayfa ağırlaşacak ve yavaşlayacaktır, bu yüzden site ziyaretçisiz kalır ve dolayısıyla arama motorundaki gücünü kaybeder.
- <h1>Sayfa başına bir kez kullanılan bir başlık </h1>
- <h2>Bu başlık sayfada birkaç kez kullanılmış ve ardından bir grup paragraf takip edilmiştir </h2>
- <h3> Ayrıca başlığın alt başlığı olarak kullanılan metin H2 alt başlığının paragrafları da olabilir </h3>
Not: Mevcut metni kesmek ve metnin yeni bir satırda başlamasını istiyorsan, <br> etiketini kullanabilirsin.
Metnin yerini değiştirme
Metnin konumunu değiştirmenin genel konsept, metni ekranın ortasında veya ekranın solunda veya sağında görüntüleyerek, görüntüsünün konumunu değiştirmektir.
Bir paragrafın yönünü belirtmek için <p> etiketindeki align özelliğini kullanabilirsin.
Altında eklediğim kod eklersen, kod sol tarafta olacaktır.
- <p align="left">Sola hizalandı paragraf</p>
Altında eklediğim kod eklersen, kod sağ tarafta olacaktır.
- <p align="right">Sağa hizalandı paragraf</p>
altında eklediğim kod eklersen, kod ortada olacaktır.
- <p align="center">ortalandı paragraf</p>
font etiketi
Önemli Uyarı: <font> etiketi artık HTML5'in en son sürümünde kullanılmamaktadır ve her özelliğin yerini alan çeşitli başka etiketler vardır.
Bu etiketi dil öğrenirken kullanabilirsin ancak ileride bir web sitesi veya proje üzerinde çalışmaya başladığında kullanmanı tavsiye etmem.
Metin yazı tipi
Font etiketi her zaman bir dizi özellikle çalışır, kendi başına herhangi bir etkisi yoktur ve en önemli özellikleri yazı tipini belirlemek, rengini değiştirmek ve boyutunu belirleyen özelliklerdir.
Font etiketinin ilk özelliği, kullanılan yazı tipini belirleyen face özelliğidir ve 2 temel yazı tipi vardır.
- <font face="verdana">Verdana yazı</font>
Verdana yazı kod dene
- <font face="Courier New">Courier yeni yazı</font>
Courier yeni yazı kod dene
Metin rengini seçmek
Ardından, yazı tipinin rengini belirtmek için kullanılan color özelliği var.
Bu örnekte olduğu gibi font etiketine color özelliğini ve rengin adını İngilizce olarak ekleyerek yazının rengini belirttim.
- This is <font color="red">Red</font>
- and this is <font color="blue">Blue</font>
- and this is <font color="yellow">yellow</font>
Bu örnekte rengi kodu ile ekledim ve renk kodunu color picker sayfasından alabilirsin.
- This is <font color="#A3B6FF">sky</font>
- This is <font color="#ff0000">red</font>
Ve burada tüm paragrafın rengini belirtledim.
- <p style="color:#ff0000;"> marketten süt aldım </p>
Not: Yukarıdaki örnekte kullandığımız style özelliğinin CSS'de kullanıldığını ve buna dikkat etmemelisin olduğunu unutma, çünkü CSS değilde HTML öğreniyorsun.
Yazı tipi boyutunu seçmek
Size özelliği yazı tipi boyutunu belirtir. Yedi yazı tipi boyutu vardır.
Sayfadaki ana yazı tipi bu boyutlardan birini alır ve belirli bir kelimede veya metnin bir bölümünde yazı tipi boyutunu değiştirmek istiyorsan, yazı tipi boyutunu belirli bir miktarda artırmak veya azaltmak için size özelliği olan yazı tipi etiketini kullan.
Mesela:
- <p> çok <font size="+4">büyük </font> yeni bir gömlek aldım </p>
Temel yazı tipi 3 ise, yazı tipini en büyük yazı tipi olan 7'ye ulaşana kadar 4 kat artırabilirsin ve en küçük yazı boyutu olan 1 olacak şekilde iki kez azaltabilirsin, değiştirmediğin sürece standart taban yazı tipi 3'tür.
Sayının etkisi, artırılacak sayının önüne + ve azalacak sayının önüne - eklenerek ve 7 boyutun üzerine çıkarken, tarayıcı metni 7 boyutunda ve aynı zamanda 1'den küçükse 1 kabul edilir. Örneğin yazı tipi boyutunu 7'den büyük koyarsan tarayıcı 7, boyutunu 1'den küçük koyarsan tarayıcı 1 olarak kabul eder.
Not: size kelimesinin yazı tipi boyutu anlamına geldiğini unutmayalım.
- <font size="+4">Size 7</font> <br>
- <font size="+3">Size 6</font> <br>
- <font size="+2">Size 5</font> <br>
- <font size="+1">Size 4</font> <br>
- <font size="0">Size 3</font> <br>
- <font size="−1">Size 2</font> <br>
- <font size="−2">Size 1</font> <br>
<big> ve <small> etiketlerini kullanarak bir yazı tipini bir adım büyütüp küçültmenin hızlı bir yolu da vardır.
<big> kodunu ekledikten sonra yazı tipi boyutu bir derece büyüyecek ve tekrar <big> eklersen iki derece büyüyecektir.
Örnek:
- <big>size 4</big>
- <big> <big> size 5 </big> </big>
- <big> <big> <big> size 6 </big> </big> </big>
Yazı tipi boyutunu küçültmek için <small> koduyu kullanabilirsin.
- <small>size 2</small>
- <small> <small> size 1 </small> </small>
- <!−− not size 1 en küçük'tür−−>
Kodu bir kez eklediğinde yazı tipi bir derece küçülür ve kodu iki kez eklersen yazı tipi iki kat küçülür.
<font> etiketinin artık html5'te desteklenmediğini ve kullanmanı önermediğimden daha önce bahsetmiştim, sadece öğrenme süreni boyunca kullanabilirsin ve öğrendiğin diğer kodları istediğin zaman ve istediğin sitede kullanabilirsin.
Sadece <font> etiketinin tavsiye edilmediğini kastettim ve bu, bugün öğrendiğin diğer etiketleri kullanamayacağın anlamına gelmez.