Temel HTML Etiketleri

Temel HTML etiketleri Web tasarım yaparken Web sitesinde kullanması gereken en temel ihtiyaçlardan biridir. Bu makalemizde sizlere en temelde kullanılan HTML etiketlerini örnekli bir şekilde en Html temel düzeyde anlatmaya çalışacağım. En temelden başlayacak olursan bir Web sitesinde olması gereken dosyalardan ve klasörlerden bahsedelim. Bununda nedeni Web sitemizin içerisindeki dosyalar ve klasörlerin arama motoru optimizasyonunda önemli olması ve bir düzene sahip olmamız açısından kesinlikle çok önemlidir.

HTML Etiketleri
HTML Etiketleri

Web Sitesinde olmazsa olmaz dosyalar ve Klasörler;

  • /img : bu klasör içerisinde fotoğrafları bulundurmanız için olmalıdır.
  • /js : JavaScript dosyalarımızı barındırdığımız klasör.
  • /css : Stil Dosyalarımızı barındırdığımız klasör.
  • /index.html : Web sitemizin ana sayfasını olurşturan sayfa.
  • /about.html : Hakkımızda sayfasının bulunduğu sayfa.
  • /contact.html : Web sitelerinde olmazsa olmaz iletişim sayfasıdır.

Kısaca yukarıdaki Html düzeni yeni başlayan bir kişi için yeterli olacaktır. Sıra geldi index.html, about.html, contact.html vb .html dosyalarının içindeki <body> etiketinin altındaki kullanılacak etiketleri öğrenmeye.

 

HTML Etiketleri

a etiketi (anchor)
A etiketi web sitesinde iç veya dış link vermek için kullanılır. Diğer Html etiketleri üzerilerinde kullanıldığı taktirde objelere link özelliği gelmiş olur.

Örnek:

..
  <a href="https://webcesi.com" title="webcesi" target="_blank">Web Sitesi Link Yazısı</a>
..


b etiketi (bold style)
B etiketi içinde olduğu her hangi bir yazıyı kalınlaştırma özelliğine sahiptir.

Örnek:

..
  <b>Bu yazı kalın olacaktır.</b>
..

 

base etiketi (document base url)
Web sitesinin başlangıç url adresini belitmeniz gerektiği zaman <head> tagları içerisinde yazmanız gerekmektedir. Genellikler .htaccess kullanımlarında gerekli olmaktadır.

Örnek:

<head>
  ..
  <base href="https://webcesi.com/" />
  ..
<head>


body etliketi
(document body)
Web sitesinin HTML etiketlerini yazdığımız bölüm.

Örnek:

..
  <body>HTML etiketlerinin yazılıdığı bölüm.</body>
..


p etiketi
(paragraf)
Web sitesinde metinde paragraf oluşturmak için kullanılan etikettir.

Örnek:

..
  <p>Paragraf yazılarını bu komutun içerisine yazabilirsiniz.</p>

  <p class="sinif">Paragraf etiketinin sınıf almış hali.</p>

  <p id="sabit">Paragraf etiketinin sabitli hali.</p>
..

 

br etiketi (line break)
Web sitesinde yazılarda veya her hangi bir nesnede bir alt satıra geçme.

Örnek:

..
  Deneme Yazı
  <br />
  Deneme Yazı
..


center etiketi
(ortalama)
Web sitemizde bir nesneyi ortalamak için kullanılır.

Örnek:

..
  <center>Bu yazı ortalı olacaktır.</center>
..


div etiketi
(generic container)
Web sitemizdeki genelde her hangi bir etiket öbeğini gruplamak ve hizalamak için kullanılmaktadır. İçerisine .class veya #id alabilmektedir. Temel html etiketleri grubuna girmektedir.

Örnek:

..
  <div>Etiketleri gruplamak için kullanılmaktadır.</div>

  <div class="sinif">İçerisinde sınıfın olduğu etiket.</div>

  <div id="sabit">İçerisinde sabitin olduğu etiket.</div>
..


font etiketi
(change font)
Sitemizdeki yazılara stil verebilmek için kullandığımız yardımcı etikettir.

Örnek:

..
  <font size="5" color="#000">Bu yazı 5 Büyüklüğünde Siyah bir yazıdır.</font>
..


iframe etiketi
(çerçeve)
Web sitesinde başka bir sayfayı veya sizin oluşturduğunuz her hangi bir sayfayı istediğiniz bir sayfada belli ölçüler içinde çağırma.

Örnek:

..
  <iframe src="https://webcesi.com" frameborder="0" width="500" height="400" scrolling="no"></iframe>
..

 

h1, h2, h3, h4, h5, h6 başlık etiketleri (başlık etiketleri)
Web tasarım içinde temel kullanılması gereken bir etiketidir. Temelde sayfalara önem sırasına göre başlık verme işlemi için kullanılmaktadır. Web sitemizdeki arama motorlarınında bir hassa önem verdikleri başlık tipleridir. Temel html etiketleri grubuna girmektedir.

Örnek:

..
  <h1>1. Başlık Örneği</h1>
  <h2>2. Başlık Örneği</h2>
  <h3>3. Başlık Örneği</h3>
  <h4>4. Başlık Örneği</h4>
  <h5>5. Başlık Örneği</h5>
  <h6>6. Başlık Örneği</h6>
..


hr etiketi
(horizontal line)
Nesnelerin aralarına istenilen ölçülerde hazır yatay çizgi yerleştirme.

Örnek:

..
  HTML nesne
  <hr />
  HTML nesne
..


i etiketi
(italic font)
Yazımızı eğik olacak şekilde yazmak için kullandığımız etiket.

Örnek:

.. 
  <i>Yazımız eğik olacak yazılacaktır.</i>
..


img etiketi (fotoğtaf)
Web sitemize fotoğraf eklemek istediğimizde kullandığımız etikettir.

Örnek:

..
  <img src="fotograf.jpg" alt="fotoğraf başlık" width="300" height="300" />
..


table etiketi
(tablo oluşturma)
Yatay ve dikey olarak istediğiniz kadar satır ve sütün oluşturma imkanınız olan tablo etiketidir.

Örnek:

<table>
  <tr>
    <td>satır 1.1</td>
    <td>satır 1.2</td>
  </tr>
  <tr>
    <td>satır 2.1</td>
    <td>satır 2.2</td>
  </tr>
</table>

 

title etiketi (site başlık)
Web sitesinin gerek arama motorları olsun gerekse başlık olsun gözüken başlığı temsil eden etikettir.

Örnek:

<head>
  ..
  <title>Web Sitesi - Örnek Web Sitem - Web Tasarım</title>
  ..
</head>

Yukardaki örneklere yenileri gelecektir arkadaşlar mutlaka bu etiketler başlangıç için işinize yaracaktır.

Temel HTML Etiketleri