Sık Kullanılan Html Kodları ve Anlamları

html-kodlari-ve-anlamlari

Blogger şablonları css ve html kodların birleşiminden oluşan bir yapıya sahiptir. Bu yüzden tema düzenlemesi konusunda sizlerle bu dillerde yazılmış kodları paylaşıyorum.Bildiğiniz gibi blogger css ekleme konusunda sizlere detaylı bir anlatım sunmuştum.Bu yazımda ise eksik kalan ve yaygın kullanılan html kodları ve anlamları konusunu paylaşmak istiyorum.

Uzun tanımlamasıyla Hypertext Markup Language olan HTML, web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Site tasarımında kullanılan bu dil, sitelerin tarayacılar tarafından düzgün görüntülenmesi için kuralları belirler.

Komutlar <> işaretleriyle birlikte ve metnin başını-sonunu belirlemek için genellikle çift olarak kullanılır :

   

<h1>Merhaba</h1>

Kısaca html konusunda genel bir bilgi verdikten sonra kod yapısı olarak yaygın kullanılanlara birlikte göz atalım :

Bir html dosyası standart olarak aşağıdaki yapıda başlar :

   
<html>
<head>
<title>Merhaba Dünya</title>

<body>
<h1>Merhaba Dünya</h1>
</head>
</body>
</html>

  • html : Bu kod tarayıcıya bir html sitesi olduğunu gösterir.
  • head : Sayfanız başlangıç kısmını işaret eder.Başlık vs bu koddan sonra gelir.
  • body: Resim, video gibi aklınıza gelebilecek tüm kodların yer aldığı kısımdır.

Tavsiye yazı: Kayan yazı kodu

Yukarıda yer alan kodlar bir html sitenin en önemli kodlarıdır.Hepsinde bu yapıya tanıklık edeceksiniz.

Tavsiye

Birazdan anlatacağım kodları online html editörleri sayesinde deneyebilirsiniz.Bunun için jsbin.com , onlinehtmleditoru.com ve cssdesk.com gibi siteleri kullanabilirsiniz.Eğer bilgisayarımda kurulu bir program olsun isterseniz Notepad ++ uygulamasını tercih edebilirsiniz.Bu konuda daha sonra yazı yazağım için şimdilik kısa öneriyle bitirmek istiyorum :



Şimdi yukarıdaki kodu yorumlayıp sonuç vermesi için çalıştıralım :

html-kodlari-ve-anlamlari-2

Gördüğünüz gibi body kısmında h1 başlıkğı ile yazdığım mesaj olan Merhaba Dünya ifadesini görüyorsunuz.Yukarıdaki kırmızı ile yazdığım ifadeyi değiştirirseniz sonuç da ona göre değişecektir.Şimdi kodumuz biraz daha zenginleştirelim:



Paragraf ekleme :

 

<p>EhliBlog olarak ilk html derleme çalışmamızı yapıyoruz </p>




Merhaba dünya ile başladığımız kısma ilk paragrafımızı da ekledik.Son olarak kod yapınız tamamen aşağıdaki şekilde olacak :




<html>
<head>
<title>Merhaba Dünya</title>

<body>
------
<h1>Merhaba Dünya</h1>
<p>EhliBlog olarak ilk html derleme çalışmamızı yapıyoruz </p>
------
</head>
</body>
</html>

Sonuç :



html-kodlari-ve-anlamlari-3

Burada h1 olarak belirtilen kısım heading yani başlık ifadesini gösteriyor.Siz h2-h3-h4-h5-h6 olarak değiştirebilirsiniz.



<p> ise paragraf başlangıcını göstermektedir.Her <p> ile başlayıp </p> ile bitirdiğiniz kısım alt satıra geçerek yeni bir paragrafı oluşturacaktır.



Şimdi paragraf içerisindeki ifadenin sağa sola ve merkeze yaslanmasını gösterelim.Burada ingilizce terimler kullanmak zorundayız.Sağa yaslamak için right, sola yaslamak için left ve merkeze yaslamak için center ifadesini kullanacağız




<p align=’center’>EhliBlog olarak ilk html derleme çalışmamızı yapıyoruz</p>


html-kodlari-ve-anlamlari-4



Şimdi EhliBlog ifademizi kalın gösterelim :



 

<p><strong>EhliBlog</strong> olarak ilk html derleme çalışmamızı yapıyoruz </p>




Hem kalın hem renkli olsun :


<p><strong><font color=’#ff0000’>EhliBlog</font></strong> olarak ilk html derleme çalışmamızı yapıyoruz </p>


html-kodlari-ve-anlamlari-5



Ve şimdi de yazıya link verelim.


<a href="http://www.ehliblog.com">Blog Aç</a>


Resim ekleme

  

<img src="resimadresi.gif" width="125" height="125" border="0" alt="Resim ile ilgili açıklama" />

Son olarak numaralandırma işaretlerinden bahsedip bitirmek istiyorum.Bildiğiniz gibi sıralama yapmak istediğimiz zaman madde işaretlemeye sık sık başvururuz.Şimdi kısaca kullanacağımız terimlerden bahsedelim :

<ol> : Numaralandırılmış liste için kullanılır : 1. 2. 3. şeklinde gidecek liste başlangıç kodudur.

<ul> : Madde işaretli liste için kullanılır.

<li>  :Numaralı olsun ya da olmasın listedeki her bir elemanı temsil eder.

Gelelim örneklere :

  

<ol>     <li>Blog ipuçları</li>    <li>Seo Ayarları</li>     <li>Blog Şablonları</li>   </ol>
  <ul>
    <li>Blog ipuçları</li>
    <li>Seo Ayarları</li>
    <li>Blog Şablonları</li>
  </ul>

 

Sırasıyla yukarıdaki kodları yazdığımız zaman karşılaşacağımız sonuç :

html-numaralandırma



Son Sözler



Html kodları ve anlamları konusu en basit haliyle yeni başlayanlar için yukarıdaki şekilde.Sizlere verdiğim online araçlar ve html editörü sayesinde denemeler yaparak kendinizi bu konuda geliştirebilirsiniz.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

2 yorum:

  1. hocam merhaba öncelikle verdiğiniz bilgiler için çok teşekkür ederim. hocam ben yeni bir blog açtım sonra hiç paylaşım yapmadan tema sını indirip kurdum türkçeleştirdim.sonra paylaşımımı yaptım ama bu paylaşımım ana sayfada oldu yani kategorileri kullanamıyorum menüleri kullanamıyorum ya kare işareti çıkıyor yada ana sayfa der gibi ana sayfaya geliyor.bu menüleri nasıl aktif edeceğim yani mesala paylaştığım yazılarımı nasıl ayrı kategorilerde göstereceğim bana yardımcı olur musunuz lütfen.

    YanıtlaSil
    Yanıtlar
    1. Paylaştığınız yazılara etiket vereceksiniz.Bu etiket başlığı altında yazılarınız toplu bir şekilde gösterilir.
      Blogger etiket kullanımı konusuna bakabilirsiniz

      Sil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.