HTML Temelleri anlatımımda bir html dosyası oluştururken kullanılacak olan temel öğelere değinecek ve özelliklerini elimden geldiğince anlatacağım.
<p> Öğesi
Bir paragraf oluşturmak için, açılıp kapanan bir öğe olan <p> tagları kullanılmaktadır:
<html>
<head>
<title>İlk Web Sayfam</title>
</head>
<body>
<p>Bu bir paragraftır.</p>
<p>Bu başka bir paragraftır.</p>
</body>
</html>
Tarayıcıda şöyle görünür:
Tek satır atlama
Başka bir paragrafa başlamadan bir satır alta inmek için <br/> tagı kullanılır.
<html>
<head>
<title>İlk Web Sayfam</title>
</head>
<body>
<p>Bu bir paragraftır.</p>
<p>Bu başka bir paragraftır.</p>
<p>Bu bir diğer paragrafta <br/>tek satır atlamadır.</p>
</body>
</html>
Bu tagı kullandığımızda ise sayfamızın görüntüsü şu şekilde olur:
elementinin kapanış tagı yoktur.
Metin Biçimlendirme Öğeleri
HTML’de özel metin türlerini görüntülemek için tasarlanan tagların listesini şöyle açıklayabiliriz:
<b>: Yazıyı kalınlaştırmak için kullanılan bir tagdır. birde kapanış tagı kullanılır.
<big>: Yazıyı daha büyük bir boyutta yazmak için kullanılan, kapanış tagı olan bir tagdır.
<i>: İtalik (eğik) yazı yamak için kullanılan ve kapanış tagı olan bir tagdır.
<small>: Yazıyı daha küçük bir boyutta yazmak için kullanılan, kapanışı olan bir tagdır.
<strong>: Yazıyı daha koyu yazmak için kullanılan, kapanışı olan bir tagdır.
<sub>: Yazıyı subscript biçiminde yazmak için kullanılan, kapanışı olan bir tagdır.
<sup>: Yazıyı superscript biçiminde yazmak için kullanılan, kapanışı olan bir tagdır.
<ins>: Yazıyı altı çizili biçimde yazmak için kullanılan, kapanışı olan bir tagdır.
<del>: Yazının üstü çizili biçimde yazmak için kullanılan, kapanışı olan bir tagdır.
<html>
<head>
<title>İlk Web Sayfam</title>
</head>
<body>
<p>Bu normal bir yazıdır.</p>
<p><b>Bu kalın yazıdır.</b></p>
<p><big>Bu büyük yazıdır.</big></p>
<p><i>Bu italik (eğik) bir yazıdır.</i></p>
<p><small>Bu küçük yazıdır.</small></p>
<p><strong>Bu koyu yazıdır.</strong></p>
<p><sub>Bu subscript yazıdır.</sub></p>
<p><sup>Bu superscript yazıdır.</sup></p>
<p><ins>Bu altı çizili yazıdır.</ins></p>
<p><del>Bu silinmiş (üstü çizilmiş) yazıdır.</del></p>
</body>
</html>
Bu kodların ve tagların tarayıcılardaki görüntüsü ise şu şekildedir:
HTML Başlık Tagları
HTML’in önem sırasına göre sıralanmış altı seviye başlık tagları mevcuttur. Bunlar <h1>, <h2>, <h3>, <h4>, <h5> ve <h6> taglarıdır. Bu tagların yine kapanış tagları da vardır.
Sitemizde bir yazının içerisindeki başlık ve alt başlıkları bu başlık taglarıyla olduğu gibi boyut ve koyulaştırma gibi stil kodlarını kullanarak da aynı görünüme sahip <p> tagları içerisinde de oluşturabilirsiniz. Fakat bu stil kodlarıyla oluşturduğunuz başlıklar, arama motorları tarafından paragraf olarak algılanır. Ancak HTML başlık taglarıyla oluşturduğunuz başlıklar arama motorları botları tarafından başlık olarak algılanır ve bu sitenizin arama motorları tarafından indexlenmesinde size avantaj sağlar.
<html>
<head>
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>Bu başlık 1 tagı ile yazılan başlıktır.</h1>
<h2>Bu başlık 2 tagı ile yazılan başlıktır.</h2>
<h3>Bu başlık 3 tagı ile yazılan başlıktır.</h3>
<h4>Bu başlık 4 tagı ile yazılan başlıktır.</h4>
<h5>Bu başlık 5 tagı ile yazılan başlıktır.</h5>
<h6>Bu başlık 6 tagı ile yazılan başlıktır.</h6>
<p>Bu bir paragraftır.</p>
<hr />
<p>Bu bir paragraftır.</p>
</body>
</html>
Yatay Çizgi (Horizontal Lines)
Yatay çizgi oluşturmak için <hr /> tagı kullanılır.
<html> <head> <title>İlk Web Sayfam</title> </head> <body> <h1>Bu başlık 1 tagı ile yazılan başlıktır.</h1> <h2>Bu başlık 2 tagı ile yazılan başlıktır.</h2> <h3>Bu başlık 3 tagı ile yazılan başlıktır.</h3> <h4>Bu başlık 4 tagı ile yazılan başlıktır.</h4> <h5>Bu başlık 5 tagı ile yazılan başlıktır.</h5> <h6>Bu başlık 6 tagı ile yazılan başlıktır.</h6> <p>Bu bir paragraftır.</p> <hr /> <p>Bu bir paragraftır.</p> </body> </html>
Yorumlar
Kodladığınız HTML sayfalarının içerisine çeşitli açıklamalar, hatırlatmalar, ve diğer notlarınızı eklemek için kullanabileceğiniz bir koddur. Bu kodlar tarayıcılarda sitenizi ziyaret eden kişiler tarafından görünmezler.
<!-- Yorumunuzu buraya yazabilirsiniz -->
Örneğin:
<html> <head> <title>İlk Web Sayfam</title> </head> <body> <p>Bu bir paragraftır.</p> <hr /> <p>Bu bir paragraftır.</p> <!-- Bu kodlama esnasında bana hatırlatıcı bir not--> </body> </html>
Gördüğünüz üzere kodlarda kendim için yazdığım not tarayıcıda görünmüyor.
HTML öznitelikleri ve bu özniteliklere atanan değerler ile ilgili ders için buraya tıklayınız.
