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ızın yapısını ve içeriğini indekslemek için adresleri kullandığını bilmelisiniz ve bu, gelecekteki projelerinizin 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.
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çe 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ığınızda 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: Metnin bir sonraki satıra başlamak için <br/> kullanın.
metnin yerini değiştirme
Bir paragrafın yönünü belirtmek için <p> etiketindeki align özelliğini kullanın.
altında eklediğim kod eklersen, kod sol tarafta olacaktır.
- <p align="left">Sola hizalanmış paragraf </p>
altında eklediğim kod eklersen, kod sağ tarafta olacaktır.
- <p align="right">Sağa hizalama paragrafı</p>
altında eklediğim kod eklersen, kod ortada olacaktır.
- <p align="center">ortalanmış paragraf</p>
Not: Ayrıca href özelliğine #top koyarak kullanıcıyı sayfanın en üstüne yönlendirebilirsin.örnek yukarı
mesela <a href='#top'> yukarı </a>
font etiketi
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 belirtebilirsin.
- 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 ekledik ve renk kodunu color picker sayfasından alabilirsiniz.
- This is <font color="#A3B6FF">sky</font>
- This is <font color="#ff0000">red</font>
Ve burada tüm paragrafın rengini seçtik
- <p style="color:#ff0000;"> marketten süt aldım </p>
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ız, yazı tipi boyutunu belirli bir miktarda artırmak veya azaltmak için size özelliği olan yazı tipi etiketini kullanın. 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ırabilirsiniz ve en küçük yazı boyutu olan 1 olacak şekilde iki kez azaltabilirsiniz, değiştirmediğiniz 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ız tarayıcı 7, boyutunu 1'den küçük koyarsanız tarayıcı 1 olarak kabul eder, en küçük yazı tipi hangisi
size kelimesinin yazı tipi boyutu anlamına geldiğini unutmayın.
- <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> eklerseniz 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>
- <small>size 2</small>
- <small> <small> size 1 </small> </small>
- <!−− not size 1 en küçük"tür−−>
Kodu bir kez eklediğinizde yazı tipi bir derece küçülür ve kodu iki kez eklerseniz yazı tipi iki kat küçülür.