• En yeniler

    Temel HTML Kodları [ Acıklamalarıyla Beraber ]

     Herkese Merhaba Bu Kodları Düzenlemek İçin Baya Bi Zaman Harcadım Aslında Basit Bir Olay Ama Bu Aralar Fazla İlgilenemediğim İçin Parça Parça Düzenledim.:)

    Hemen Sizlerle Paylaşmak İstiyorum Çünkü Bu Kodlar Bir Webmasterin Kesinlikle Bilmesi Gereken Temel Kodlardır Ve Ben Sizlere Bu Kodları Örnek Ve Açıklamalarıyla Oluşturdum.

    Konumuza Geçelim.;


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> gibi.

    AÇIKLAMA:
    <!DOCTYPE tagı ile hangi dökümanı kullandığımızı belirleriz


    ÖRNEK:
    <html></html>

    AÇIKLAMA:
    Döküman hakkında bilgilerin başladığına dair haber veririz.

    ÖRNEK:
    <head></head>

    AÇIKLAMA:
    Döküman hakkında bilgileri head tagları arasına yerleştiririz. Bilgiler görünmez gömülü kalır.(css, javascript vb. bilgiler.)

    ÖRNEK:
    <link rel="stylesheet" type="text/css" href="http://www.destweb.blogspot.com/örnek.css olmak zorundadır." />



    AÇIKLAMA:
    <link> tagı sitemizde veya başka bir sitede (adreste) bulunan "css stil" dosyalarını (kodlarını) çağırmak için kullanılan bir bağlantı görevi görür.<link> tagı, <head> ile </head> tagları arasında kullanılır.


    ÖRNEK:
    <head>
    <link rel="stylesheet" type="text/css" href="/örnek.css" />
    </head>




    ÖRNEK:

    <body><body>

    AÇIKLAMA:
    <body> tagı arasına eklediğimiz içerikler görünmesini istediğimiz içeriklerimizdir. Body tagı <head> tagından sonra gelir.




    ÖRNEK:
    <p> Bu yazılar "paragraf" kullanılarak yazılmıştır.<p>

    AÇIKLAMA:
    <p> tagı yazılarımızı "paragraf" halinde yazmamızı sağlar.




    ÖRNEK:
    <pre>Burda alanda yazdığım yazılar yazdığım gibi görünüyor. N güsel :$ <pre>

    AÇIKLAMA:
    <pre> tagı arasında yazılan yazılar yazıldığı gibi görünür. Örnek olarak; Hazırladığımız yazılarda satır atlatmak için <br> tagını kullanmaya gerek kalmaz.


    ÖRNEK:
    <font>Yazımız</font>

    AÇIKLAMA:
    <font> tagını kullanarak, yazılarımıza renkler, boyutlar, açıklamalar, (title) değişik stiller ekleyebiliriz.


    ÖRNEK ;

    <font style="color:blue; font-size:2em;font-family:roman;" title="font kod açıklaması">gibi, özellikler belirtebiliriz.</font>


    ÖRNEK:
    <i>Bu tagın arasındaki yazılar italik (eğik) yazılmıştır.<i>

    AÇIKLAMA:
    <i> tagı yazılarımızı italik (eğik) olarak yazmamızı sağlar.Bu tag arasında yazılan makale veya yazı, ince halde eğik olarak görünür.


    ÖRNEK:
    <b>Bu yazılar bold (kalın) yazılmıştır.<b>

    AÇIKLAMA:
    <b> tagı yazılarımızı bold (kalın) belirgin olarak yazmamızı sağlar.Bu tag arasında yazılan makale veya yazı, belirgin (kalın) halde görünür.


    ÖRNEK:
    <u> Tagı ile altı çizgili yazı yazıyorum.</u>

    AÇIKLAMA:
    <u> tagı arasında yazdığımız yazılar, "altı çigili görünür." Genelde üstünü basa basa, anlatmak istediğimiz kelimeler için kullanırız.


    ÖRNEK:
    ali merveye selam verdi.<br>
    naber ?<br>
    merve cevap verdi:<br>
    Teşekkürler Ali bey iyiyim, siz nasılsın?



    AÇIKLAMA:
    <br> tagı yeni "boş" bir paragraf oluşturmamızı ve yazılarımızın "alt altta" gelmesini sağlar. Uzun bir anlatım (metin, yada makale) yapacaksanız eğer, <br> tagı yerine <pre> tagını kullanmanızı tavsiye ederim. Yazılarınız ilk düzenlenlediğiniz gibi (normal haliyle) görünür.


    <PRE> TAGI İÇİN BİR ÖRNEK:
    <pre>
    ali merveye selam verdi
    naber ?
    mervecevap verdi:
    Teşekkürler Ali bey iyiyim, siz nasılsın?
    </pre>




    ÖRNEK:
    <s>Örnek kullanım.</s>



    AÇIKLAMA:
    <s> tagı içinde kullanılan yazılar üzeri çizgili olarak ekrana yansır. Genelde yalnış yazılan yazılara örnek olarak kullanırız.




    ÖRNEK:
    <code>Yazıyı genişleterek özel bir yazı tipi tanımlar.</code>


    AÇIKLAMA:
    <code> tagı içinde yazdıımız yazılar italik şeklinde ve genişlik aralıklar halinde ekrana yansır. Genelde kod paylaşımı için kullanırız.


    ÖRNEK:
    <cite>Örnek tag kullanımı.</cite>



    AÇIKLAMA:
    <cite> tagı içinde yazdıımız yazılar italik olarak ekrana yansır.


    ÖRNEK:
    <hr align=left color=blue size=10 width=300>


    SADE KULLANIMI:
    <hr>

    AÇIKLAMA:
    <hr> tagını sayfayı ayırmak ortadan çizgi halini alması için kullanırı. Tablo çizgilerine benzer bir çizgi çizer.




    ÖRNEK KULLANIMLAR:
    <h1>Başlık Yazımız</h1>

    <h2>Başlık Yazımız</h2>

    <h3>Başlık Yazımız</h3>

    <h4>Başlık Yazımız</h4>

    <h5>Başlık Yazımız</h5>

    <h6>Başlık Yazımız</h6>



    AÇIKLAMA:
    <h1> ile başlayıp <h6>'ya kadar değer verilebilen bu taglar belli birer değerlere sahip olup, başlıklar oluşturmamızı sağlar. Stil referansları belirtilerek, başlıklarımızı daha görkemli bir hal almasını sağlayabiliriz.


    ÖRNEK:
    <a href="Url adresi" title="Açıklama mesajı">Link Adı</a>

    AÇIKLAMA:
    <a> tagını kullanarak yazılarımıza link verebiliriz. A tagının diğer bir adı <link>'tir ve XML'de kullanılır. <a> tagı bizi yada ziyeretçilerimizi istediğimiz bir yola (adrese) (url'ye) yönlendirmesini sağlarız.


    KULLANIM ÖRNEĞİ:
    <a href="http://www.destweb.blogspot.com/css.htm" title="Css Kodları hakkında bilgiler">Css Kodları</a>


    ÖRNEK:
    <img src="Resmin Url adresi" title="Resmin Açıklaması" alt="Resmin adı"></img>

    AÇIKLAMA:
    <img> tagını resim eklemek için kullanırız. <img> tagını kullanırken </img> şeklinde kapatmaya gerek yoktur.


    KULLANMA ÖRNEĞİ:
    <img src="http://bumerang.hurriyet.com.tr/images/bumerangcampaignimages/thumb-0a9e3975-469e-431a-ab55-b2f4aac8b9d3.jpg" title="Microsoft" alt="Microsoft Reklam"></img>




    ÖRNEK:
    <ul>
    <li>Liste</li>
    <li>Listeler</li>
    <li>Listeleme</li>
    <li>Listelemeler</li>
    </ul>

    AÇIKLAMA:
    <ul> tagı içinde <li> taglarını kullanarak listeleme yapabiliriz.<li> tagı (listeleme), <ul> tagı ile başlar ve aynı şekilde </ul> tagı ile sonlandırılır.

    ÖRNEK:
    <ol>
    <li>Liste</li>
    <li>Listeler</li>
    <li>Listeleme</li>
    <li>Listelemeler</li>
    </ol>

    AÇIKLAMA:
    <ol> tagı numaralı listeleme yapmamızı sağlar. Numaralı listeler oluştururken, liste başlarına; 1.liste 2.liste gibi sayıları yazmaya gerek kalmadan <ol> tagını kullanarak numaralı listeler oluşturabiliriz.




    ÖRNEK:
    <marquee></marquee>

    AÇIKLAMA:
    <marquee> tagını yazılarımızı sağdan sola, soladan sağa, aşağıdan yukarıya, yukarıdan aşağıya kaymasını sağlamak için kullanırız.


    ÖRNEK:
    <comment></comment>



    AÇIKLAMA:
    <comment>tagı içinde yazdığınız yazılar web sayfasında görünmez gömülü kalır.


    ÖRNEK:
    <center>Burdaki içeriklerimiz ekran ortalanarak görünür.</center>



    AÇIKLAMA:
    <center>tagını yazı yada içeriklerimizi ortalamak için kullanırız.


    ÖRNEK:
    <ifame src="http://www.destweb.blogspot.com/css.htm" border="0" width="600" height="900"></iframe>



    AÇIKLAMA:
    <iframe> tagını başka bir sitedeki içeriği (video, resim) veya sayfayı olduğu gibi kendi sitemizde göstermek için kullanırız.


    Teşekkürler.



    Hiç yorum yok

    Post Bottom Ad