HTML dilinde bir çok metin ve görünüm etiketi bulunur; alt satır , başlık , paragraf , yazı biçimlendirme, işaretleme, indisli yazı, çizgi etiketleri vb gibi.. Tek tek bakalım...
BR - SATIR SONU ETİKETİ
HTML kodlarını yazarken , bıraktığımız boşluklar yada satır kesmeleri (yeni satıra geçmek) tasarımda dikkate alınmayacaktır. Eğer alt satıra geçmeniz gereken bir yazı yazıyorsanız , tasarımda alt satıra geçmesini istediğiniz yerde <br> etiketini kullanmanız gerekir. Tarayıcı, html kodlarını okurken <br> etiketini gördüğü yerde alt satıra geçilmesi gerektiğini anlayacaktır. Ayrıca sadece alt satıra geçmek için değil , satır boşlukları bırakmak için de <br> etiketini kullanırız.
Örneğin; alt alta yazmak istediğimiz şehir isimleri olsun. Kodları yazarken BR etiketi kullanmadan alt satıra geçersek, tasarımda şehir resimleri yanyana görüneceklerdir.
<body>
İZMİR
ANKARA
İSTANBUL
</body>
Ekran Görüntüsü
Ancak şehir isimlerinden sınra <br> etiketlerini eklersek , bu kez tasarımdada alt alta görüneceklerdir.
<body>
İZMİR <br>
ANKARA <br>
İSTANBUL<br>
</body>
Ekran Görüntüsü
Bazı HTML etiketleri , yapıları gereği yanlarına başka bir etiketin yada yazının gelmesine izin vermez ve alt satıra iterler. Dolayısıyla bu etiketlerden sonra alt satura geçmek için <br> etiketi kullanmaya gerek kalmayacaktır. H, P, DIV gibi bu etiketlere BLOK etiketler denir. CSS ile müdahale edilmediği sürece bulundukları satırı tamamen kaplarlar.
H - BAŞLIK ETİKETLERİ
HTML'de tanımlı 6 adet başlık etiketi bulunur..
- <H1> .... <H1>
- <H2> .... <H2>
- <H3> .... <H3>
- <H4> .... <H4>
- <H5> .... <H5>
- <H6> .... <H6>
En büyük başlık H1 iken , H6'ya doğru gidildikçe yazı boyutu küçülür. Tüm başlık etiketleri kalın yazılır. H1 başlığı etiketi genellikle sayfada bir kez kullanılır ve tüm sayfanın başlığı olur. SEO için önemlidir.
Tüm H etiketleri blok elemanlardır. Bulundukları satırı komple kaplarlar. Ayrıca H etiketleri kendilerinden önce ve sonra satır boşluğu bırakırlar.
<h1> Bu başlık H1 etiketi ile yazıldı </h1>
<h2> Bu başlık H2 etiketi ile yazıldı </h2>
<h3> Bu başlık H3 etiketi ile yazıldı </h3>
<h4> Bu başlık H4 etiketi ile yazıldı </h4>
<h5> Bu başlık H5 etiketi ile yazıldı </h5>
<h6> Bu başlık H6 etiketi ile yazıldı </h6>
Ekran Görüntüsü
Başlık etiketleri içerisindeki yazılar "align" parametresi ile hizalanabilir. Align parametresi ;
- left (sol)
- right (sağ)
- center (ortalı)
- justify ( iki yana yaslı)
olmak üzere 4 değer alır. Örneğin, başlığı ortalamak için H etiketi içerisine aşağıdaki gibi align parametresini eklemeniz gerekir.
<h2 align="center"> Başlık yazısı ortalandı.. </h2>
P - PARAGRAF ETİKETİ
Paragraf tanımlamak için kullanılan etikettir. P etiketleri, H etiketleri gibi blok elemanlardır. Bulundukları satırı komple kaplarlar. Ayrıca yine H etiketlerinde olduğu gibi kendilerinden önce ve sonra satır boşluğu bırakırlar.
<p> Paragraf 1 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur pariatur omnis, a perferendis quam fugit fugiat delectus tempora quae, esse impedit neque? Aliquid autem illo ratione qui recusandae dolores corporis.</p>
<p> Paragraf 2 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur pariatur omnis, a perferendis quam fugit fugiat delectus tempora quae, esse impedit neque? Aliquid autem illo ratione qui recusandae dolores corporis.</p>
Ekran Görüntüsü
Paragraf etiketi içindeki yazılar , başlık (H) etiketlerinde olduğuğ gibi "align" parametresi ile hizalanabilir. Align parametresi ;
- left (sol)
- right (sağ)
- center (ortalı)
- justify ( iki yana yaslı)
olmak üzere 4 değer alır. Örneğin, paragraf içindeki yazıyı iki yana yaslamak için P etiketi içerisine aşağıdaki gibi align parametresini (justify) eklemeniz gerekir.
<p align="justify">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum incidunt laborum et aliquam, perspiciatis, eaque iste harum quas animi consequuntur a dolor, magni fuga similique? Reiciendis dolor eos ipsa? Blanditiis! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum incidunt laborum et aliquam, perspiciatis, eaque iste harum quas animi consequuntur a dolor, magni fuga similique? Reiciendis dolor eos ipsa? Blanditiis!
</p>
Ekran Görüntüsü
B,STRONG - KALIN YAZI ETİKETİ
<b> ve <strong> etiketleri içlerine aldıkları metni kalınlaştırırlar. Strong, arama motorlarının sayfada vurgulanan metinleri bulabilmesi için tercih edilir.
<b> Bu kalın bir yazıdır </b>
<strong> Bu kalın bir yazıdır </strong>
Ekran Görüntüsü
i,em - İTALİK YAZI ETİKETİ
<i> ve <em> etiketleri içlerine aldıkları metni italik (eğik) yaparlar. em, arama motorlarının sayfada vurgulanan metinleri bulabilmesi için tercih edilir.
<i> Bu eğik bir yazıdır </i>
<em> Bu eğik bir yazıdır </em>
Ekran Görüntüsü
U,ins - ALTI ÇİZİLİ YAZI ETİKETLERİ
<u> etiketi adını ingilizcedeki underlined (altı çizilmiş) kelimesinin ilk harfinden alır ve içine aldığı metnin altını çizer.
<u> Bu altı çizili bir yazıdır </u>
<ins> Bu altı çizili bir yazıdır </ins>
Ekran Görüntüsü
Del - ORTASI ÇİZİLİ YAZI ETİKETİ
<del> etiketi , yazıların ortasını çizer. Genelde iptal edilen değerler için kullanılır. 999TL gibi...
<del> Bu ortası çizili bir yazıdır </del>
Ekran Görüntüsü
FONT - YAZI BİÇİMLENDİRME ETİKETİ
HTML sayfalarda yazıları biçimlendirmek için <font> etiketi kulalınılır. Font etiketi ile yazının rengi,tipi ve boyutu belirlenebilir. bunun içi n 3 parametre kullanılır. HTML 5 sürümünde desteklenmez.
size : yazının boyutunu belirler. 1 ile 7 punto arasında değer alabilir. Daha büyük yazılar için css kullanılır.
face : yazının tipini belirler.
color : yazının rengini belirler.
<font size="4"> Ben 4 punto boyutunda bir yazıyım</font><br>
<font size="7"> Ben 7 punto boyutunda bir yazıyım</font><br>
<font color="orange"> Ben turuncu bir yazıyım</font><br>
<font face="verdana"> Ben verdana tipinde bir yazıyım</font><br>
<font face="calibri"> Ben calibri tipinde bir yazıyım</font><br>
<font size="4" color="orange" face="verdana"> Ben 4 punto boyutunda , turuncu ve verdana tipinde bir yazıyım</font>
Ekran Görüntüsü
mark - İŞARETLEME ETİKETİ
<mark> etiketi, vurgulanmasını istediğimz yazıları işaretlemek için kullanılır. <mark> etiketleri arsına yazılan yazıların arka plan rengi sarı olacaktır.
Html'de işaretleme için <mark>mark</mark> etiketi kullanılır.
Ekran Görüntüsü
sup,sub - İNDİS ETİKETLERİ
sup ve sub etiketleri indisli yazılar için kullanılır. <sup> etiketi içine aldığı yazıyı üst indise çevirirken , <sub> etiketi ise içine aldığı yazıyı alt indise çevirir.
4'ün karesi : 4<sup>2</sup>=16 olur. <br>
Suyun formülü H<sub>2</sub>O'dur.
Ekran Görüntüsü
small - KÜÇÜK YAZI ETİKETİ
small etiketi ile yazılar bir miktar küçük yazılır. Alıntılar ,dipnotlar gibi daha küçük yazılması gereken yazılar için kullanılabilir.
Bu yazı varsayılan büyüklükte iken <br>
<small> bu yazı small etiketi ile yazılmıştır.</small>
Ekran Görüntüsü
Hr - ÇİZGİ ETİKETİ
HTML sayfalarda çizgi eklemk için <hr> etiketi kullanılır. Arasına yazı yada nesne almadığı için Br etiketi gibi kapanmayan bir etikettir. H ve P gibi blok bir elemandır. Kendinen sonra satır atlar. Parametresiz kullanılabileceği gibi , genişlik,renk,hizalama,kalınlık gibi özellikleride belirtilebilir.
width : çizginin piksel cinsinden genişliğini (uzunluğunu= belirtir.
size : çizginin piksel cinsinden yükseliğini belirtir.
color : çizginin rengini belirler.
align : çizginin rhizalamasını belirtir. (H ve P etiketlerindeki kullanımına bakabilirsiniz.)
<hr> <!-- Parametresiz Çizgi -->
<hr width="500px" size="10" align="left" color="orange">
<hr width="600px" size="25" align="center" color="pink">
<hr width="700px" size="50" align="right" color="gray">
Ekran Görüntüsü
Görüşmek üzere..
