Html Nedir, Kodları ve Anlamları Nelerdir?

Hasan Korkmaz

Html Nedir, Kodları ve Anlamları Nelerdir?

Web dünyasının en önemli konularından biri olan ve bir anlamda vazgeçilmezi diyebileceğimiz bir konuyla karşınızdayız. Açılımı İngilizce olarak ‘ Hyper Text Markup Language’ olan ve ‘Hiper Metin İşaretleme Dili’ şeklinde Türkçe ifade edilen bir metin işaretleme dilidir. Yazımızın ilerleyen kısımlarında Html nedir kısaca bahsedeceğiz.

İnternet üzerinde kullanıcıların giriş yapmalarını sağlamak amacıyla web sayfaları oluşturmak için kullanılan bir betik dili olan Html sayfası bulunduğu sunucularda ‘.html‘ veya ‘.htm‘ uzantılarıyla tutulur.

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.
Tüm Html etiketlerini kapsar.
Sayfa ile ilgili bazı bilgilerin (meta bilgileri, sayfa başlığı vb..) tanımlandığı etikettir.
</td> <td>Sayfa başlığının verildiği etikettir.</td> </tr> <tr> <td><body></td> <td>Sayfa içeriklerinin yazıldığı etikettir. Tarayıcılar sadece buradaki içeriği bize gösterirler.</td> </tr> <tr> <td><script></td> <td>Javascript kodlarının yazıldığı etikettir.</td> </tr> <tr> <td><style></td> <td>Css kodlarının yazıldığı etikettir.</td> </tr> <tr> <td><meta></td> <td> <p>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.</p> <p>Bu tamamlayıcı bilgiler nelerdir?</p> <p>Ö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. </p> </td> </tr> <tr> <td><link></td> <td>Dışarıdan bir dosyayı sayfamıza eklemek (referans vermek) için kullanılır.</td> </tr> <tr> <td><h1> – <h6></td> <td> <p>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:</p> <p>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.</p> <p>Örneğin bir sayfada kullandığınız başlıklar içerisinde en önemlisi hangisi ise onu <strong>h1 etiketi</strong> 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> </td> </tr> <tr> <td><p></td> <td> <p>Html sayfalarındaki yazılarımızı paragraflara ayırmak için kullanılır.</p> <p>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.</p> </td> </tr> <tr> <td><a></td> <td> <p>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.</p> <p>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.</p> <p>Kullanımı şu şekildedir:</p> <p><span class="crayon-o"><</span><span class="crayon-i">a</span><span> </span><span class="crayon-v">href</span><span class="crayon-o">=</span><span class="crayon-s">“Hedef URL adresi”</span><span class="crayon-o">></span><span class="crayon-e">linkin<span> </span></span><span class="crayon-i">yaz</span>ı<span class="crayon-i">s</span>ı<span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">a</span><span class="crayon-o">></span></p> </td> </tr> <tr> <td><br></td> <td>Alt satıra geçmek için kullanılır. Yani br etiketinden sonra gelen kodun bir alt satırdan devam etmesini sağlar.</td> </tr> <tr> <td><hr></td> <td> <p>Html sayfalarımızda içerikleri birbirinden ayırmak için yatay çizgi oluşturmamızı sağlar.</p> <p>Html sayfalarınızda dikey çizgi oluşturmak istiyorsanız<span> </span><a href="https://www.mehsatek.com/css-ile-dikey-cizgi-olusturma/" target="_blank" rel="noopener noreferrer">Html ve Css ile Dikey Çizgi Nasıl Yapılır?</a><span> </span>yazımı okuyabilirsiniz.</p> </td> </tr> <tr> <td><div></td> <td> <p>Html kodlarını kapsayıcı bir etiket içerisine almak için kullanılır.</p> <p>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. </p> </td> </tr> <tr> <td><span></td> <td> <p>Html kodlarını kapsayıcı bir etiket içerisine almak için kullanılır.</p> <p>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.</p> </td> </tr> <tr> <td><!–…–></td> <td>Html sayfalarımıza yorum satırı eklemek için kullanılır.</td> </tr> </tbody> </table> </p> </div> </div> </div> <div class="grid__item large--one-quarter"> <div class="group_sidebar blog_sidebar"> <div class="sb-wrapper"> <h6 class="sb-title">Popüler Makaleler</h6> <ul class="no-bullets sb-content"> <li> <div class="title"> <a href="Makale/2-El-Araba-Fiyatlari-Ve-2-El-Araba-Modelleri-Hakkinda-114">2 El Araba Fi̇yatları Ve 2. El Arab...</a> </div> <time datetime="2020-02-28">28 Şubat 2020</time> </li> <li> <div class="title"> <a href="Makale/Moda-Tasarimi-Nedir-6">Moda Tasarımı Nedi̇r?</a> </div> <time datetime="2016-11-28">28 Kasım 2016</time> </li> <li> <div class="title"> <a href="Makale/2016-Yilinda-Damga-Vurmus-Ve-Hit-Olmus-Yabanci-sarkilar-3">2016 Yılında Damga Vurmuş Ve Hi̇t O...</a> </div> <time datetime="2016-11-19">19 Kasım 2016</time> </li> <li> <div class="title"> <a href="Makale/Anahtar-Teslim-Koy-Evi-Maliyeti-Mustakil-Ev-Maliyet-Koy-Evi-Yapimi-136">Anahtar Tesli̇m Köy Evi̇ Mali̇yeti̇...</a> </div> <time datetime="2020-08-21">21 Ağustos 2020</time> </li> <li> <div class="title"> <a href="Makale/Chia-Tohumu-ciya-Toumu-Nedir-Nasil-Tuketilir-Faydalari-Nelerdir-73">Chi̇a Tohumu (Çi̇ya Toumu) Nedi̇r, ...</a> </div> <time datetime="2018-02-26">26 Şubat 2018</time> </li> <li> <div class="title"> <a href="Makale/En-Etkili-sekilde-Satilik-Araba-Ilani-Vermek-94">En Etki̇li̇ Şeki̇lde Satılık Araba ...</a> </div> <time datetime="2019-10-02">02 Ekim 2019</time> </li> <li> <div class="title"> <a href="Makale/I-phone-Ve-Samsung-2016-2017-Modellerine-Genel-Bakis-1">İphone Ve Samsung 2016- 2017 Modell...</a> </div> <time datetime="2016-11-19">19 Kasım 2016</time> </li> <li> <div class="title"> <a href="Makale/Amasya-39-nin-En-cok-Neyi-Meshur-33">Amasya'Nın En Çok Neyi̇ Meşhur...</a> </div> <time datetime="2017-08-05">05 Ağustos 2017</time> </li> <li> <div class="title"> <a href="Makale/Ankara-39-nin-En-cok-Neyi-Meshur-34">Ankara'Nın En Çok Neyi̇ Meşhur...</a> </div> <time datetime="2017-08-05">05 Ağustos 2017</time> </li> <li> <div class="title"> <a href="Makale/Tirnak-Batmasina-cozum-I-Basit-Yontem-I-Kesin-cozum-87">Tırnak Batmasına Çözüm I Basi̇t Yön...</a> </div> <time datetime="2018-06-18">18 Haziran 2018</time> </li> </ul> </div> </div> </div> </div> </div> </main> <!-- Footer --> <footer class="site-footer"> <div class="grid__item footer_information"> <div class="wrapper"> <div class="grid-uniform"> <div class="fi-about-block grid__item one-fifth small--one-whole medium--one-whole"> <div class="fi-title"> Bize Ulaşın </div> <div class="fi-content"> <ul class="group_information"> <li><i class="fa fa-phone"></i> <a href="tel:0 (242) 345 00 01">0 (242) 345 00 01</a></li> <li><i class="fa fa-fax"></i> <a href="fax:0 (242) 345 00 01">0 (242) 345 00 01</a> </li> <li><i class="fa fa-mobile"></i> <a href="tel:0 (533) 729 51 27">0 (533) 729 51 27</a></li> <li><i class="fa fa-map-marker"></i> <a href="#">HBZ GRUP Şekerhane Mah. sinanoğlu Sk. Dr. Gani Gür İşhanı No/11/307 Alanya / ANTALYA</a> </li> </ul> </div> <div class="fi-content inline-list social-icons"> <a href="https://www.facebook.com/Patronumdancom-980913645369530/" target="_blank" title="Facebook" class="icon-social facebook"><i class="fab fa-facebook-square"></i></a> <a href="https://twitter.com/patronumdan" target="_blank" title="Twitter" class="icon-social twitter"><i class="fab fa-twitter-square"></i></a> <a href="#" target="_blank" title="LinkedIn" class="icon-social linkedin"><i class="fab fa-linkedin"></i></a> <a href="https://www.instagram.com/patronumdan/?hl=tr" target="_blank" title="Instagram" class="icon-social instagram"><i class="fab fa-instagram"></i></a> <a href="#" target="_blank" title="Pinterest" class="icon-social pinterest"><i class="fab fa-pinterest-square"></i></a> <a href="https://tumblr.com" target="_blank" title="Tumblr" class="icon-social tumblr"><i class="fab fa-tumblr-square"></i></a> <a href="https://www.youtube.com/channel/UC1ECrclxLDewhJD89I3tqIQ" target="_blank" title="YouTube" class="icon-social youtube"><i class="fab fa-youtube-square"></i></a> </div> </div> <div class="fi-links grid__item one-fifth small--one-whole medium--one-whole"> <div class="fi-title"> Kurumsal </div> <div class="fi-content"> <ul class="grid__item one-whole"> <li> <a href="Sayfa/Hakkimizda"><span>Hakkımızda</span></a> </li> <li> <a href="Iletisim"><span>İletişim</span></a> </li> <li> <a href="Destek-Merkezi"><span>Destek Merkezi</span></a> </li> <li> <a href="Blog"><span>Blog</span></a> </li> <li> <a href="Hikayeni-Paylas"><span>Hikayeni Paylaş</span></a> </li> <li> <a href="Haberler"><span>Haberler</span></a> </li> <li> <a href="Banka-Hesap-Bilgileri"><span>Banka Hesap Bilgileri</span></a> </li> </ul> </div> </div> <div class="fi-links grid__item one-fifth small--one-whole medium--one-whole"> <div class="fi-title"> Hizmetlerimiz </div> <div class="fi-content"> <ul class="grid__item one-whole"> <li> <a href="Doping"><span>Doping</span></a> </li> <li> <a href="Sayfa/Dogal-Reklam"><span>Doğal Reklam</span></a> </li> <li> <a href="Sayfa/Iade-Iptal-Sartlari"><span>İade & İptal Şartları</span></a> </li> <li> <a href="Sayfa/Guvenli-Odeme-Sistemi"><span>Güvenli Ödeme Sistemi</span></a> </li> <li> <a href="Sayfa/Guvenli-Alisverisin-Ipuclari"><span>Güvenli Alışverişin İpuçları</span></a> </li> <li> <a href="Sayfa/Guvenli-E-ticaret-get"><span>Güvenli E-Ticaret (GeT)</span></a> </li> </ul> </div> </div> <div class="fi-links grid__item one-fifth small--one-whole medium--one-whole"> <div class="fi-title"> Mağazalar </div> <div class="fi-content"> <ul class="grid__item one-whole"> <li> <a href="Magaza-Yonet"><span>Mağazam</span></a> </li> <li> <a href="Magaza-Ac"><span>Mağaza Açmak İstiyorum</span></a> </li> <li> <a href="Sayfa/Magaza-Kullanim-Kurallari"><span>Mağaza Kullanım Kuralları</span></a> </li> <li> <a href="Sayfa/Neden-Magaza"><span>Neden Mağaza?</span></a> </li> </ul> </div> </div> <div class="fi-links grid__item one-fifth small--one-whole medium--one-whole"> <div class="fi-title"> Gizlilik Ve Kullanım </div> <div class="fi-content"> <ul class="grid__item one-whole"> <li> <a href="Sayfa/Kullanim-Kosullari"><span>Kullanım Koşulları</span></a> </li> <li> <a href="Sayfa/Kisisel-Verilerin-Korunmasi"><span>Kişisel Verilerin Korunması</span></a> </li> <li> <a href="Sayfa/Bireysel-Kullanici-Sozlesmesi"><span>Bireysel Kullanıcı Sözleşmesi</span></a> </li> <li> <a href="Sayfa/Kurumsal-Kullanici-Sozlesmesi"><span>Kurumsal Kullanıcı Sözleşmesi</span></a> </li> <li> <a href="Sayfa/Ilan-Vermenin-Puf-Noktalari"><span>İlan Vermenin Püf Noktaları</span></a> </li> <li> <a href="Sayfa/Cerez-Politikasi"><span>Çerez Politikası</span></a> </li> <li> <a href="Sayfa/Yasal-Uyari"><span>Yasal Uyarı</span></a> </li> <li> <a href="Sayfa/Satisi-Yasak-Urunler"><span>Satışı Yasak Ürünler</span></a> </li> <li> <a href="Yardim-Ve-Islem-Rehberi"><span>Yardım Ve İşlem Rehberi</span></a> </li> </ul> </div> </div> </div> </div> </div> <div class="grid__item footer_copyright"> <div class="wrapper"> <div class="grid"> <div class="grid__item footer-copyright three-quarters small--one-whole medium--one-whole small--text-center"> <p> Copyright © 2024 Ücretsiz İlan Ver - Bedava İlan ver Tüm hakları saklıdır. </p> </div> </div> </div> </div> </footer> </div> <div id="Activation" class="modal xxsmall"> <div id="Activation-Result"></div> <form action="Hesabim/Aktivasyon" method="post" class="ajaxform validateform" data-return="#Activation-Result"> <div class="alert alert-warning">Onay kodunu tekrar göndermek için <strong><a hreF="#" data-resend-activation>buraya tıklayınız</a></strong>.</div> <div class="input-group"> <span class="input-group-addon"><span class="input-icon i-key-5"></span> <span class="input-text">Onay Kodu</span></span> <input type="number" name="Kod" autocomplete="off" required class="form-control input-lg" placeholder="Onay Kodu"> </div> <button class="btn btn-custom center-block">Hesabı Aktifleştir</button> <script></script> </form> </div> <div id="scroll-to-top" class="off"> <i class="fa fa-caret-up"></i> </div> <!-- JS ================================================== --> <script src="//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_tr.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/node-waves/0.7.6/waves.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/i18n/tr.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.easytabs/3.2.0/jquery.easytabs.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/df-number-format/2.1.6/jquery.number.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js" type="text/javascript"></script> <script src="assets/AWY-V8/js/custom.min.js?v=1714587694" type="text/javascript"></script> <script> var active_lang = 'tr', active_theme = 'AWY-V8', lang_showAll = 'Tümünü Göster <i class="fa fa-angle-down"></i>', lang_hideAll = 'Tümünü Gizle <i class="fa fa-angle-up"></i>', select_lang = 'Seçiniz', Category_Success = 'Kategori seçimi tamamlandı.', Continue = 'Devam', Information_Message = 'Bilgi Mesajı!', Error_Occured = 'İşlem yapılırken hata oluştu. Lütfen tekrar deneyiniz.', Operation_Completed = 'İşlem tamamlandı.', Payment_Error = 'Ödeme işlemi başarısız. Lütfen tekrar deneyiniz.', Security_Code_Error = 'Güvenlik doğrulaması hatalı. Lütfen kontrol ediniz.', Payment_Success = 'Ödeme başarıyla alındı.', Select_Category = 'Lütfen kategori seçiniz.', Enter_Keyword = 'Lütfen aranacak kelimeyi giriniz.', Package_Error = 'Lütfen mağaza paketi seçiniz.', Limit_Exceeded = '<p>Maksimum ilan sınırı aşıldı.</p><p>İlan paketi alarak ilan vermeye devam edebilirsiniz.</p>', Limit_Exceeded_Btn = 'İlan Paketi Al', Use_GET_Btn = 'GET İlanı Ver', Show_All = 'Tümünü Göster', Hide_All = 'Tümünü Gizle', Remove_From_Cart_Confirm = 'Ürünü sepetten çıkarmak istediğinizden emin misiniz?', Upload_Message_1 = 'Tarayıcınız sürükle & bırak yükleme sistemini desteklemiyor.', Upload_Message_2 = 'Lütfen aşağıdaki normal fotoğraf yükleme sisteminden fotoğrafları yükleyiniz.', Upload_Message_3 = 'Fotoğraf boyutu çok fazla ({{filesize}} MiB). Maksimum boyut: {{maxFilesize}} MiB.', Upload_Message_4 = 'Fotoğraf formatı haricindeki dosyaları yükleyemezsiniz.', Upload_Message_5 = 'Sunucu {{statusCode}} kodu ile yanıtladı.', Upload_Message_6 = 'Yüklemeyi Durdur', Upload_Message_7 = 'Yüklemeyi durdurmak istediğinizden emin misiniz?', Upload_Message_8 = 'Fotoğrafı Sil', Upload_Message_9 = 'Fotoğrafı silmek istediğinizden emin misiniz?', Upload_Message_10 = 'Daha fazla fotoğraf yükleyemezsiniz.', Upload_Make_Featured = 'Vitrin Resmi Yap', Upload_Rotate_Left = 'Sola Döndür', Upload_Rotate_Right = 'Sağa Döndür', Map_Find_My_Location = "Konumumu Bul", lang_search_ads = "İlanlar", lang_search_stores = "Mağazalar", lang_search_cats = "Kategoriler", lang_confirm = "Onaylıyorum", lang_cancel = "İptal", lang_username_error = "Kullanıcı adında sadece harf, sayı ve belirli özel karakterlere (.-) izin verilmektedir."; </script> </body> </html>