- Katılım
- 10 Şub 2021
- Mesajlar
- 592
- Tepkime puanı
- 11
- Puanları
- 18
- Konum
- Frankfurt
- Web sitesi
- www.benkral.net
Tüm Html Kodları ve Anlamları – Detaylı Anlatım
Html kodları nelerdir? Html5 ile gelen anlamsal etiketler nelerdir? Bu Html kodları ne işe yarar? sorularının cevaplarını detaylı bir şekilde öğreneceğiz.
Tüm Html kodlarını gruplayarak listeledim. Gruplamış olduğum her tabloda Html kodlarının açıklamalarını anlatmaya çalıştım.
Bu etiketler anlamsal etiketler olduğu için açıklama kısımlarına birşey yazmadım.
Umarım “Tüm Html Kodları ve Anlamları – Detaylı Anlatım” başlıklı yazım sizin için faydalı olmuştur.
Yeni bir yazımda görüşmek üzere.
Html kodları nelerdir? Html5 ile gelen anlamsal etiketler nelerdir? Bu Html kodları ne işe yarar? sorularının cevaplarını detaylı bir şekilde öğreneceğiz.
Tüm Html kodlarını gruplayarak listeledim. Gruplamış olduğum her tabloda Html kodlarının açıklamalarını anlatmaya çalıştım.
| <!DOCTYPE> | Dökümanın türünü belirtir. Sayfanın en üstünde yazılır. Tarayıcıların sayfayı doğru görüntülemesini sağlar. |
| <html> | Tüm Html etiketlerini kapsar. |
| <head> | Sayfa ile ilgili bazı bilgilerin (meta bilgileri, sayfa başlığı vb..) tanımlandığı etikettir. |
| <title> | Sayfa başlığının verildiği etikettir. |
| <body> | Sayfa içeriklerinin yazıldığı etikettir. Tarayıcılar sadece buradaki içeriği bize gösterirler. |
| <script> | Javascript kodlarının yazıldığı etikettir. |
| <style> | Css kodlarının yazıldığı etikettir. |
| <meta> | Meta etiketleri (tagları) ile arama motorlarının web sitemiz ile ilgili bilgi edinmesini sağlayabiliriz. Diğer bir deyişle Html sayfalarımızda tamamlayıcı bilgileri tanımlayabiliriz. Bu tamamlayıcı bilgiler nelerdir? Örneğin sitenin başlığı, site ile ilgili açıklama bilgileri, sitenin sahibi, sitenin yazarı, kullanacağımız karakter kodlama türü gibi bilgileri meta tagları ile tanımlıyoruz. |
| <link> | Dışarıdan bir dosyayı sayfamıza eklemek (referans vermek) için kullanılır. |
| <h1> – <h6> | Başlık eklemek için kullanılır. Başlık etiketleri h1’den başlayıp h6’ya kadar devam eder. Aralarında 2 fark vardır: Birincisi, en büyük boyutlu olan h1 dir ve h6 ya doğru yazı boyutu küçülür. Yani en küçük yazı boyutu olan h6 dır. İkinci fark ise bunların Seo açısından önem durumlarıdır. Örneğin bir sayfada kullandığınız başlıklar içerisinde en önemlisi hangisi ise onu h1 etiketi içerisinde yazmalısınız. Arama motorları sitenize baktığında h1 etiketi içerisinde yazdığınız başlığa bakar ve sitenin içeriğinin ne ile alakalı olduğunu anlamaya çalışır. Diğer başlıklarınızı da önem sırasına göre diğer başlık etiketleri ile kullanabilirsiniz. |
| <p> | Html sayfalarındaki yazılarımızı paragraflara ayırmak için kullanılır. P etiketini kullanırsanız kullanıcı dostu bir tasarım yapmış olursunuz. Böylece tasarımlarınızdaki yazıların okunabilirliği de artar. P etiketi kullanmadan uzun yazılar yazarsanız okuması zor olacağı için sitenizi ziyaret eden kişiler çok kısa sürede sitenizi terk edecektir. |
| <a> | Link eklemek için kullanılır. Örneğin bir yazıya link verme, bir resme link verme, bir dosyayı link yapma, bir video linki oluşturma, indirme linki oluşturma, sayfalar arası veya sayfa içi bağlantı oluşturma vb.. bir çok durumda a etiketini kullanma ihtiyacı ortaya çıkıyor. En basit haliyle 2 tanımlama yapmamız gerekiyor. Bunlardan birincisi, linkin görünürdeki yazısı yani kullanıcının görmüş olduğu yazı. İkincisi ise bu yazıya tıklandığında yönlendireceğimiz hedef adres. Kullanımı şu şekildedir: <a href=“Hedef URL adresi”>linkin yazısı</a> |
| <br> | Alt satıra geçmek için kullanılır. Yani br etiketinden sonra gelen kodun bir alt satırdan devam etmesini sağlar. |
| <hr> | Html sayfalarımızda içerikleri birbirinden ayırmak için yatay çizgi oluşturmamızı sağlar. Html sayfalarınızda dikey çizgi oluşturmak istiyorsanız Html ve Css ile Dikey Çizgi Nasıl Yapılır? yazımı okuyabilirsiniz. |
| <div> | Html kodlarını kapsayıcı bir etiket içerisine almak için kullanılır. Html div etiketinin özel bir anlamı yoktur. Div etiketini kullandığımızda sayfamızın tarayıcıdaki görüntüsünde herhangi bir değişiklik olmaz. Div etiketini kullanırken asıl amacımız diğer Html kod parçalarını belirli gruplara ayırarak kod düzenini sağlamaktır. Aynı zamanda bu şekilde yapılan bir kodlama, Css kullanımında da bize fayda sağlayacaktır. Çünkü div içerisine aldığımız tüm Html etiketlerine toplu bir şekilde Css kodu uygulayabilir ve yönetimi kolaylaştırabiliriz. |
| <span> | Html kodlarını kapsayıcı bir etiket içerisine almak için kullanılır. Span etiketi kullandığımızda da tıpkı div etiketi gibi sayfanın tarayıcıdaki görüntüsünde herhangi bir değişiklik olmaz. Span etiketini genelde inline (satır içi) öğelere Css kodu uygulamak için kullanıyoruz. |
| <!–…–> | Html sayfalarımıza yorum satırı eklemek için kullanılır. |
BİÇİMLENDİRME İÇİN KULLANDIĞIMIZ HTML KODLARI VE ANLAMLARI
| <abbr> | Yazılan kısaltmaların açılımlarını belirtmek için kullanılır. Örneğin Html kısaltmasının üzerine fare ile gelindiğinde açılımının Hyper Text Markup Language olduğunu gösterebiliriz. |
| <address> | Html belgelerinde adres ve iletişim bilgilerini yazarken kullanılır. Yazıları italik yapar. |
| <b> | Yazıları koyulaştırmak (kalınlaştırmak) için kullanılır. <b> ve <strong> etiketleri aynı işlevi gerçekleştiriyor. Aralarındaki fark ise şudur: Daha önemli içerikleri arama motorlarına belirtmek için strong etiketi kullanılır. Yani görünüm olarak bir farkları olmasada anlamsal olarak farklıdırlar. |
| <bdo> | Yazıyı tersten yazmak için kullanılır. |
| <blockquote> | Başka kaynaklardan uzun alıntılar yaparken kullanılır. Alıntı yapılan yazıya sağdan ve soldan 40px margin değeri uygulanır. Yani yazı 40px içeri alınır. |
| <cite> | Alıntı yapıldığını belirtmek için kullanılır. Bu etiket içerisindeki yazılar italik olarak görüntülenir. |
| <code> | Yazıları bir bilgisayar kodu parçası görünümünde yapmak için kullanılır. |
| <del> | Yazıların üstünü çizmek için kullanılır. |
| <dfn> | Tanımları belirtmek için kullanılır. |
| <em> | Yazıları italik yapmak için kullanılır. <i> ve <em> etiketleri aynı işlevi gerçekleştiriyor. Aralarındaki fark ise şudur: Daha önemli içerikleri arama motorlarına belirtmek için em etiketi kullanılır. Yani görünüm olarak bir farkları olmasada anlamsal olarak farklıdırlar. |
| <i> | Yazıları italik yapmak için kullanılır. |
| <ins> | Yazıların altını çizmek için kullanılır. |
| <kbd> | Yazıları klavye formatında göstermek için kullanılır. |
| <mark> | Vurgulanmak istenen yazılar için kullanılır. Seçilen yazının arkaplan rengini sarı yapar. |
| <pre> | Biçimlendirilmiş yazıları olduğu gibi göstermek için kullanılır. |
| <q> | Başka kaynaklardan kısa alıntılar yaparken kullanılır. Alıntı yapılan yazıyı çift tırnak (” “) arasına alır. |
| <samp> | Yazıların bilgisayar çıktısı biçiminde olmasını sağlar. |
| <small> | Yazının boyutunu küçültmek için kullanılır. |
| <strong> | Yazıları koyulaştırmak (kalınlaştırmak) için kullanılır. |
| <sub> | Yanındaki yazının biraz altında olmasını istediğimiz durumlarda kullanılır. |
| <sup> | Yanındaki yazının biraz üstünde olmasını istediğimiz durumlarda kullanılır. |
| <u> | Yazıların altını çizmek için kullanılır. |
| <var> | Matematiksel değişkenleri belirtmek için kullanılır. |
LİSTE OLUŞTURMAK İÇİN KULLANDIĞIMIZ HTML KODLARI VE ANLAMLARI
| <ul> | Sırasız liste oluşturmak için kullanılır. ul etiketinin list-style-type özelliğine şu değerleri vererek işaretçi türünü değiştirebiliriz.
|
| <ol> | Sıralı liste oluşturmak için kullanılır. ol etiketinin type attribute’una şu değerleri vererek işaretçi türünü değiştirebiliriz.
|
| <li> | Liste elemanlarını eklemek için kullanılır. Her bir liste elemanı ( <li> ), bulunduğu satırı tamamen (100%) kaplar. Yani li etiketi bir block etikettir. |
| <dl> | Açıklamalı liste oluşturmak için kullanılır. |
| <dt> | Açıklamalı liste elemanlarına başlık vermek için kullanılır. |
| <dd> | Açıklamalı liste elemanlarını oluşturmak için kullanılır. |
TABLO OLUŞTURMAK İÇİN KULLANDIĞIMIZ HTML KODLARI VE ANLAMLARI
| <table> | Tablo oluşturmak için kullanılır. |
| <caption> | Tabloya başlık eklemek için kullanılır. |
| <th> | Tabloda başlık alanları eklemek için kullanılır. |
| <tr> | Tabloda yeni bir satır eklemek için kullanılır. |
| <td> | Tabloda yeni bir hücre eklemek için kullanılır. |
| <thead> | Tablo kodlarının daha düzenli olması için başlık kodları bu etiket içerisine yazılabilir. |
| <tbody> | Tablo kodlarının daha düzenli olması için içerik kodları bu etiket içerisine yazılabilir. |
| <tfoot> | Tablo kodlarının daha düzenli olması için alt bilgi kodları bu etiket içerisine yazılabilir. |
| <col> | Tablo sütun gruplarına uygulanacak özellikleri belirtmek için kullanılır. |
| <colgroup> | Tablo sütun grubu oluşturmak için kullanılır. |
FORM OLUŞTURMAK İÇİN KULLANDIĞIMIZ HTML KODLARI VE ANLAMLARI
| <form> | Form oluşturmak için kullanılır. Değişik amaçlar için form etiketi ile birlikte kullandığımız parametreler vardır. Bunlar:
|
| <input> | Tek satırlık metin girişini sağlamak için kullanılır. İnput etiketinin type parametresine şu değerleri verebiliriz:
Şimdi de input etiketi ile kullandığımız diğer attribute’lara bakalım:
|
| <textarea> | Normal input lardan daha geniş metin alanları oluşturmak için kullanılır. Bu metin alanlarına rows parametresi ile yükseklik, cols parametresi ile genişlik değerleri verebiliriz. |
| <button> | Tıklanabilir buton oluşturmak için kullanılır. Button etiketinin type parametresine 3 farklı değer verebiliyoruz. Bunlar:
|
| <select> | Html formlarında açılır bir menü oluşturmak için kullanılır. Select etiketi ile menüyü, option etiketi ile de menünün her bir elemanını ekleriz. |
| <optgroup> | Açılır menüdeki elemanları gruplamak için kullanılır. |
| <option> | Açılır menünün her bir elemanını eklemek için kullanılır. |
| <label> | Form öğeleri için etiket belirtmemizi sağlar. |
| <fieldset> | Form elemanlarını gruplamak için kullanılır. |
| <legend> | Fieldset etiketi ile grupladığımız form elemanlarına başlık tanımlamamızı sağlar. |
| <datalist> | Özel liste seçenekleri sunmak için kullanılır. Datalist etiketi Html5 ile gelen yeni bir etiket olduğu için Safari tarayıcısı tarafından hala tam olarak desteklemiyor. |
RESİM, SES VE VİDEO İLE İLGİLİ KULLANDIĞIMIZ HTML KODLARI VE ANLAMLARI
| <img> | Sayfalarımıza resim eklemek için img etiketini kullanıyoruz. Sadece bu etiketi kullanmamız yetmiyor. img etiketi ile aşağıdaki attribute’ları kullanabiliyoruz:
Önemli : Yüksek çözünürlükteki resimler sitemizin açılış hızını olumsuz etkileyeceği için olabildiğinde resimleri optimize ederek kullanmaya çalışmalıyız. Tabi burada optimize ederken resmin kalitesini de çok fazla bozmamak gerekiyor. |
| <map> | Resim haritası oluşturmak için kullanılır. |
| <area> | Resim haritalarında alan koordinatı belirtirken kullanılır. |
| <canvas> | Grafik çizmek için kullanılır. |
| <figcaption> | Figure elemanı için bir başlık tanımlar. |
| <figure> | Özel bir içerik alanı oluşturmak için kullanılır. |
| <iframe> | Var olan bir web sayfası içerisinde başka bir web sitesini, web sitesinin bir sayfasını veya youtube videoları gibi içerikleri görüntülememizi sağlar. Örneğin sitemizde video paylaşımı yapmak istiyorsak, genelde videoları youtube gibi paylaşım sitelerine yükleriz. Daha sonra videoların iframe kodunu alıp web sayfamıza yerleştirdiğimizde, o video artık sayfamızda izlenebilir duruma gelir. Böylece video başka bir yerde depolandığından kendi sunucumuzdaki depolama alanından tasarruf sağlamış oluruz. iframe etiketi ile kullanabildiğimiz attribute’lar şunlardır:
|
| <audio> | Ses veya müzik içerikleri eklemek için kullanılır. |
| <source> | Medya öğeleri için birden fazla medya kaynaklarını tanımlar. |
| <track> | Medya öğeleri için metinleri tanımlar. |
| <video> | Video içerikleri eklemek için kullanılır. |
HTML5 İLE GELEN ANLAMSAL HTML KODLARI VE ANLAMLARI
Bu etiketler anlamsal etiketler olduğu için açıklama kısımlarına birşey yazmadım.
| <header> | |
| <footer> | |
| <main> | |
| <section> | |
| <article> | |
| <aside> | |
| <nav> | |
| <details> | |
| <summary> |
DİĞER HTML KODLARI VE ANLAMLARI
| <noscript> | Script çalıştırma özelliği kapalı tarayıcılar için alternatif kod bölümü oluşturur |
| <embed> | Sayfalarımıza dışardan bir obje gömmemizi sağlar |
| <object> | Sayfalarımıza nesneleri gömmemizi sağlar |
| <param> | Bir nesne için parametre tanımlamamızı sağlar |
| <time> | Bir tarih veya saat tanımlarken kullanılır |
| <progress> | Bir sürecin ilerleme durumunu belirtmek için kullanılır |
| <output> | Bir hesaplamanın sonucunu tanımlar |
| <base> | Tüm linkler için kaynak kök adresi belirtmeyi sağlar |
Umarım “Tüm Html Kodları ve Anlamları – Detaylı Anlatım” başlıklı yazım sizin için faydalı olmuştur.
Yeni bir yazımda görüşmek üzere.
