HTML Temelleri – HTML Dersleri – 3

0
50
görüntülenme
HTML Öğreniyorum
HTML Öğreniyorum Görseli

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:

<p> etiketi görüntüsü
Tarayıcılar bir paragraftan sonra otomatik olarak boş bir satır ekler.

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:

Tek satır atlama görüntüsü <br/> etiketi

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:

Metin biçimlendirme ögeleri görüntüsü
Tarayıcılar tagıyla tagını, tagıyla tagını aynı biçimde gösterir. Ancak bu tagların anlamları farklıdır. ve tagları sırasıyla kalın ve italik (eğik) metinleri tanımlarken, ve tagları metnin “önemli” olduğunu belirtir.

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>
Başlık etiketleri görüntüsü
Metinleri büyük veya kalın yaparak başlık oluşturmanız önerilmez, çünkü arama motorları web sayfası yapısını ve içeriğini indekslemek için başlık taglarını kullanır

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>
yatay çizgi görüntüsü

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>
Kod arası yorumlar görüntüsü

Gördüğünüz üzere kodlarda kendim için yazdığım not tarayıcıda görünmüyor.

Yorum kodlarının açılışında ünlem işareti (!) var fakat kapanış bölümünde yok.

HTML öznitelikleri ve bu özniteliklere atanan değerler ile ilgili ders için buraya tıklayınız.

CEVAP VER

Lütfen yorumunuzu yazınız
Lütfen isminizi buraya yazınız