{"id":55,"date":"2024-07-01T15:45:12","date_gmt":"2024-07-01T12:45:12","guid":{"rendered":"https:\/\/eclitgo.eclit.com\/blog\/?p=55"},"modified":"2024-08-13T12:15:35","modified_gmt":"2024-08-13T09:15:35","slug":"html-nedir-html-kodlama-nasil-yapilir","status":"publish","type":"post","link":"https:\/\/eclitgo.eclit.com\/blog\/html-nedir-html-kodlama-nasil-yapilir\/","title":{"rendered":"HTML Nedir? HMTL Kodlama Nas\u0131l Yap\u0131l\u0131r?"},"content":{"rendered":"\n

Web tasar\u0131m konusunda ara\u015ft\u0131rma yapan hemen herkesin kar\u015f\u0131na \u00e7\u0131kan temel kavram\u00a0HTML<\/strong>‘dir. Web sayfalar\u0131n\u0131\u00a0olu\u015fturma a\u015famas\u0131nda kullan\u0131lan standart bir metin i\u015faret dili olan\u00a0HTML a\u00e7\u0131l\u0131m\u0131<\/strong>\u00a0\u201cHyper Text Markup Language\u201d olarak bilinir. Genel bilinen yanl\u0131\u015f kan\u0131n\u0131n aksine HTML bir programlama dili de\u011fildir. Daha a\u00e7\u0131k anlatmak gerekirse, Chrome, Firefox, Yandex gibi taray\u0131c\u0131lar\u0131n okuyup anlamland\u0131rd\u0131\u011f\u0131 dil HTML dilidir.<\/p>\n\n\n\n

HTML Ne \u0130\u015fe Yarar?<\/h2>\n\n\n\n

HTML, web tasar\u0131mc\u0131lar\u0131na sayfalar ve uygulamalar i\u00e7in yap\u0131 profilleri, ba\u011flant\u0131lar, blok al\u0131nt\u0131lar, paragraflar ve ba\u015fl\u0131klar olu\u015fturmalar\u0131nda yard\u0131mc\u0131d\u0131r. <\/strong>Bu konuda basit kod yap\u0131lar\u0131 olan etiketler ve nitelikler kullan\u0131larak web sayfalar\u0131 \u015fekillendirilebilir. HTML i\u00e7in asl\u0131nda bir web sitesinin iskeleti denilebilir. Yani HTML kodlar\u0131 olmadan web sitesi kodlanamaz.<\/p>\n\n\n\n

Web sitesi ve sayfalar\u0131 olu\u015fturulurken mutlaka kullan\u0131lmas\u0131 gereken HTML, yeni ba\u015flayanlar i\u00e7in \u00f6\u011frenmesi en kolay bi\u00e7imleme dillerinden biridir.\u00a0HTML dersleri<\/strong>\u00a0alarak sistemli bir \u00e7al\u0131\u015fma i\u00e7in kendinizi geli\u015ftirebilir, \u00f6\u011frendi\u011finiz bilgileri web sayfas\u0131 tasarlama a\u015famas\u0131nda deneyebilirsiniz. Zamanla sahip olduklar\u0131n\u0131zdan fazlas\u0131n\u0131 \u00f6\u011frenebilir ve web sitesi tasarlama konusunda s\u00f6z sahibi olabilirsiniz.<\/p>\n\n\n\n

En \u00c7ok Kullan\u0131lan HTML Kodlar\u0131<\/h2>\n\n\n\n
\"html-nedir\"<\/figure>\n\n\n\n

HTML kodlar\u0131, bir web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 olu\u015fturan par\u00e7ac\u0131klard\u0131r. Kullan\u0131lan kod ne olursa olsun t\u00fcm\u00fc \u201c<<\/strong>\u201d ile ba\u015flar ve \u201c><\/strong>\u201d ile bitmek zorundad\u0131r. Baz\u0131 basit HTML kodlar\u0131n\u0131 daima bilmeniz gerekir. Haz\u0131rlad\u0131\u011f\u0131n\u0131z web sayfalar\u0131nda bu kodlar\u0131 birden fazla yerde kullanman\u0131z gerekecektir. Ancak \u00f6ncesinde temel bir HTML belge yap\u0131s\u0131n\u0131n nas\u0131l olmas\u0131 gerekti\u011fini bilmeniz gerekir. Buna g\u00f6re;<\/p>\n\n\n\n

<!DOCTYPE html>:<\/strong> T\u00fcm HTML belgeleri bu kod ile ba\u015flamak zorundad\u0131r. Bu kod asl\u0131nda sayfan\u0131n HTML5 format\u0131na g\u00f6re kodland\u0131\u011f\u0131n\u0131 g\u00f6sterir.<\/p>\n\n\n\n

<html>:<\/strong> K\u00f6k etiket olarak da bilinen bu temel kullan\u0131mda t\u00fcm HTML kodlar\u0131, bu iki etiket aras\u0131nda tan\u0131mlanmak zorundad\u0131r.<\/p>\n\n\n\n

<body>:<\/strong> G\u00f6r\u00fcnebilir t\u00fcm HTML kod par\u00e7alar\u0131n\u0131n eklendi\u011fi etiket alan\u0131d\u0131r.<\/p>\n\n\n\n

<head>:<\/strong> Web sayfas\u0131n\u0131n dili, ba\u015fl\u0131\u011f\u0131 ve di\u011fer d\u00fczenlemelerinin yer ald\u0131\u011f\u0131 etikettir.<\/p>\n\n\n\n

<title>:<\/strong> Web sitesinin ba\u015fl\u0131k alan\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. <title> etiketi, <head> etiketleri aras\u0131nda olmak zorundad\u0131r.<\/p>\n\n\n\n

<meta charset=\u201dutf-8\u2033>:<\/strong>\u00a0HTML kodunun T\u00fcrk\u00e7e karakter deste\u011fi dahil olmak \u00fczere pek \u00e7ok dil seti i\u00e7erdi\u011fini belirtir.<\/strong><\/p>\n\n\n\n

    \n
  • Ba\u015fl\u0131k Kodu (Hx)<\/strong><\/li>\n<\/ul>\n\n\n\n

    Web sayfan\u0131zdaki i\u00e7eri\u011fi okunabilir par\u00e7alara b\u00f6lmenizi sa\u011flayan unsur ba\u015fl\u0131klard\u0131r. HTML temelde 6 ba\u015fl\u0131k \u00f6gesini destekler. Bunlar H1, H2, H3, H4, H5<\/strong> ve H6<\/strong>\u2018dan olu\u015fur. \u00d6rnek kullan\u0131m \u015fekli \u015fu \u015fekilde g\u00f6sterilir:<\/p>\n\n\n\n

      \n
    • <h1><\/strong>Birinci ba\u015fl\u0131k<\/h1><\/strong><\/li>\n\n\n\n
    • <h2><\/strong>\u0130kinci ba\u015fl\u0131k<\/h2><\/strong><\/li>\n\n\n\n
    • <h3><\/strong>\u00dc\u00e7\u00fcnc\u00fc ba\u015fl\u0131k<\/h3><\/strong><\/li>\n\n\n\n
    • <h4><\/strong>D\u00f6rd\u00fcnc\u00fc ba\u015fl\u0131k<\/h4><\/strong><\/li>\n\n\n\n
    • <h5><\/strong>Be\u015finci ba\u015fl\u0131k<\/h5><\/strong><\/li>\n\n\n\n
    • <h6><\/strong>Alt\u0131nc\u0131 ba\u015fl\u0131k<\/h6><\/strong><\/li>\n\n\n\n
    • Paragraf Kodu (<p>)<\/strong><\/li>\n<\/ul>\n\n\n\n

      Metin i\u00e7erisindeki paragraflar\u0131 olu\u015fturman\u0131z\u0131 sa\u011flayan koddur. \u0130\u00e7erik b\u00f6l\u00fcmlerini ay\u0131r\u0131rken aralar\u0131nda\u00a0<br>\u00a0<\/strong>kodu eklenerek metin paragraflar\u0131 olu\u015fturulabilse de\u00a0<p><\/strong>\u00a0kodunun kullan\u0131lmas\u0131 tavsiye edilir. Arama motorlar\u0131n\u0131 ve taray\u0131c\u0131lar\u0131 sayfa yap\u0131s\u0131 hakk\u0131nda bilgilendirir.<\/p>\n\n\n\n

        \n
      • Sat\u0131r Sonu Kodu (<br>)<\/strong><\/li>\n<\/ul>\n\n\n\n

        Web sayfas\u0131ndaki metni yatay olarak b\u00f6lmeye yarayan HTML kodudur.<\/strong> Kullan\u0131ld\u0131\u011f\u0131 yerde metin bir alt sat\u0131rdan devam eder. Di\u011fer bir deyi\u015fle <br\/> <\/strong>kullan\u0131ld\u0131\u011f\u0131nda, takip eden t\u00fcm kelimeler alt sat\u0131rdan devam eder.<\/p>\n\n\n\n

          \n
        • Resim Kodu (<img>)<\/strong><\/li>\n<\/ul>\n\n\n\n

          <img> kodu, g\u00f6r\u00fcnt\u00fcleri web sayfas\u0131na eklemek i\u00e7in kullan\u0131l\u0131r.<\/strong> Web sayfas\u0131na resim eklemek istedi\u011finizde \u00f6nce web sunucusuna y\u00fckleyin. Daha sonra y\u00fcklenen resmin dosya ad\u0131na ba\u015fvuru yapmak i\u00e7in bir <img> etiketi kullanabilirsiniz.<\/p>\n\n\n\n

            \n
          • Buton Kodu (<button>)<\/strong><\/li>\n<\/ul>\n\n\n\n

            HTML buton kodu<\/strong>, sayfalar\u0131n\u0131z\u0131 ilgi \u00e7ekici yapmak ve etkile\u015fimli i\u00e7erikler olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. JavaScript ve\u00a0HTML renk kodlar\u0131\u00a0<\/strong>ile daha g\u00fc\u00e7l\u00fc hale gelen bu kod, i\u00e7eriklerinizde kullan\u0131c\u0131larla etkile\u015fime girmenizi sa\u011flar.<\/p>\n\n\n\n

              \n
            • Ba\u011flant\u0131 Kodu (<a>)<\/strong><\/li>\n<\/ul>\n\n\n\n

              \u00d6nemli HTML link verme<\/strong> kodlar\u0131ndan biri olan <a> kodu ile di\u011fer i\u00e7erikleriniz aras\u0131nda da ba\u011flant\u0131lar olu\u015fturabilirsiniz. Ba\u011flant\u0131 olu\u015fturmak i\u00e7in, ba\u011flant\u0131 kurmak istedi\u011finiz i\u00e7eri\u011fin \u00e7evresine <a> <\/strong>ve <\/a><\/strong> etiketleri sarman\u0131z gerekir. <\/p>\n\n\n\n

                \n
              • Yatay \u00c7izgi Kodu (<hr>)<\/strong><\/li>\n<\/ul>\n\n\n\n

                Sayfa b\u00f6l\u00fcmlerini g\u00f6rsel olarak ay\u0131rmada yatay \u00e7izgi kodlar\u0131 kullan\u0131l\u0131r. Bu kod, sayfadaki ge\u00e7erli konum \u00fczerinden sa\u011f kenar bo\u015flu\u011fu aras\u0131nda bir \u00e7izgi olu\u015fturur. B\u00f6ylece kelime veya c\u00fcmle gruplar\u0131 yatay \u00e7izgiyle ayr\u0131l\u0131r.<\/p>\n\n\n\n

                HTML ile CSS ve JS Aras\u0131ndaki Ba\u011flant\u0131 Nedir?<\/h2>\n\n\n\n

                HTML site<\/strong>\u00a0tasarlama konusunda ger\u00e7ekten g\u00fc\u00e7l\u00fc bir dil olsa da, profesyonel ve g\u00fc\u00e7l\u00fc sonu\u00e7lar almada tek ba\u015f\u0131na yeterli de\u011fildir. Belirli kodlar kullan\u0131larak yaln\u0131zca metin par\u00e7alar\u0131 eklenebilir ve i\u00e7erik yap\u0131s\u0131 de\u011fi\u015ftirilebilir. Fakat\u00a0HTML ile birlikte CSS ve JavaScript gibi iki frontend dil kullan\u0131l\u0131rsa, muhte\u015fem bir uyum yakalan\u0131r.<\/strong><\/p>\n\n\n\n

                HTML ile birlikte CSS ve JS kullan\u0131lmas\u0131 demek, sa\u011flam bir temel \u00fczerine eklenecek geli\u015fmi\u015f i\u015flevler ve zengin bir kullan\u0131c\u0131 deneyimi olu\u015fturma anlam\u0131na gelir. HTML arka plan<\/strong>, renk, tasar\u0131m, bo\u015fluk ve animasyon i\u00e7in CSS\u2019den yard\u0131m al\u0131rken; slider, foto\u011fraf galerileri ve a\u00e7\u0131l\u0131r pencereler gibi dinamik i\u015flevsellikler i\u00e7in JavaScript ile birlikte uyum i\u00e7inde \u00e7al\u0131\u015f\u0131r.<\/p>\n\n\n\n

                HTML5 Nedir?<\/h2>\n\n\n\n

                \u00c7\u0131kt\u0131\u011f\u0131 g\u00fcnden bu yana s\u00fcrekli geli\u015ftirilen yeni \u00f6zellik ve eklentiler eklenen HTML s\u00fcr\u00fcmleri s\u00fcrekli yeni g\u00fcncellemeler ile tarihsel olarak kendi \u00f6zel isimleri ile an\u0131lm\u0131\u015ft\u0131r. G\u00fcn\u00fcm\u00fczde HTML olarak bilinen HTML 4, 1999 y\u0131l\u0131nda yay\u0131nlanm\u0131\u015f ve olduk\u00e7a be\u011feni toplam\u0131\u015ft\u0131. Ancak daha sonra HTML 5 g\u00fcncellemesi geldi\u011finde, beraberinde pek \u00e7ok yenilik getirdi\u011fi g\u00f6r\u00fcld\u00fc.<\/p>\n\n\n\n

                HTML5\u2019in en pop\u00fcler \u00f6zelliklerinden biri g\u00f6m\u00fcl\u00fc haldeki ses ve videolara verdi\u011fi dahil\u00ee destektir. <\/strong>Y\u0131llardan beri kullan\u0131lan flash oynat\u0131c\u0131 kullanmaya gerek kalmadan, g\u00f6m\u00fcl\u00fc ses ve video dosyalar\u0131 web sitesine <audio> <\/audio> <\/strong>ve <video> <\/video><\/strong> kodlar\u0131 eklenerek kullan\u0131labilir. Benzer \u015fekilde SVG (scale vector graphics) ve matematiksel form\u00fcller i\u00e7in de MathML deste\u011fi sunar.<\/p>\n\n\n\n

                HTML5\u2019i di\u011ferlerinden ay\u0131ran bir ba\u015fka \u00f6zellik de \u00e7e\u015fitli anlamsal d\u00fczeltmelere sahip olmas\u0131d\u0131r. Yani, web sayfas\u0131ndaki i\u00e7eri\u011fin anlam\u0131 konusunda hem taray\u0131c\u0131lar\u0131 hem de arama motorlar\u0131na bilgilendirerek web sitesinin indekslenmesine yard\u0131mc\u0131 olur. En \u00e7ok kullan\u0131lan anlamsal kodlar\u00a0<article> <\/article, <header> <\/header>, <aside> <\/aside>\u00a0<\/strong>ve\u00a0<footer> <\/footer><\/strong>\u00a0etiketleridir.<\/p>\n\n\n\n

                HTML Art\u0131lar\u0131 ve Eksileri<\/h2>\n\n\n\n
                \"html<\/figure>\n\n\n\n

                HTML Art\u0131lar\u0131<\/strong><\/p>\n\n\n\n

                  \n
                • T\u00fcm internet taray\u0131c\u0131lar\u0131nda do\u011fal (native) olarak \u00e7al\u0131\u015fabilme,<\/li>\n\n\n\n
                • Kolay \u00f6\u011frenebilme,<\/li>\n\n\n\n
                • A\u00e7\u0131k kaynak koduna sahip olma,<\/li>\n\n\n\n
                • Tamamen \u00fccretsiz olma,<\/li>\n\n\n\n
                • \u00c7ok say\u0131da kayna\u011fa sahip olan devasa bir dil se\u00e7ene\u011fi sunma,<\/li>\n\n\n\n
                • World Wide Web Consortium (W3C) gibi resm\u00ee web standartlar\u0131 taraf\u0131ndan denetlenebilme,<\/li>\n\n\n\n
                • \u0130stikrarl\u0131 ve d\u00fczg\u00fcn bi\u00e7imleme sunma,<\/li>\n\n\n\n
                • Node.js ve PHP gibi backend dilleri ile uyum i\u00e7inde \u00e7al\u0131\u015fabilme.<\/li>\n<\/ul>\n\n\n\n

                  HTML Eksileri<\/strong><\/h2>\n\n\n\n
                    \n
                  • Baz\u0131 taray\u0131c\u0131lar HTML kod sistemine\u00a0eklenen yeni \u00f6zellikleri tan\u0131makta yava\u015f kalabilir.<\/li>\n\n\n\n
                  • HTML, kullan\u0131c\u0131ya mant\u0131k ekleyebilme imk\u00e2n\u0131 vermez. Bu nedenle ayn\u0131 \u00f6gelere (footer ve ba\u015fl\u0131klar gibi) sahip olunsa dahi fark etmeksizin t\u00fcm web siteleri\u00a0ayr\u0131 ayr\u0131 olu\u015fturulur.<\/li>\n\n\n\n
                  • S\u0131kl\u0131kla statik durumdaki web sayfalar\u0131 i\u00e7in kullan\u0131ld\u0131\u011f\u0131ndan, dinamik i\u015flemleri ger\u00e7ekle\u015ftirmek i\u00e7in PHP, CSS ya da JavaScript gibi ayr\u0131 bir backend dili kullan\u0131lmas\u0131 gerekir.<\/li>\n\n\n\n
                  • Bunlar\u0131n d\u0131\u015f\u0131nda HTML hakk\u0131nda bilinmesi gerekenler \u015funlard\u0131r:<\/li>\n\n\n\n
                  • HTML bir programlama dili de\u011fil, bir i\u015faretleme dilidir.<\/li>\n\n\n\n
                  • HTML dosya uzant\u0131lar\u0131n\u0131n .html ya da .htm \u015feklinde yaz\u0131lmas\u0131 gereklidir.<\/li>\n\n\n\n
                  • HTML kodlar\u0131n\u0131n yaz\u0131m\u0131 i\u00e7in Notepad, Notepad++ ya da Sublime Text gibi edit\u00f6rler kullan\u0131labilir.<\/li>\n\n\n\n
                  • HTML iyice \u00f6\u011frenildikten sonra mutlaka bilinmesi gereken di\u011fer bir program CSS olmal\u0131d\u0131r. HTML kodlar\u0131n\u0131n ilgili taray\u0131c\u0131da okunan \u015fekline stil vermek i\u00e7in \u00e7o\u011funlukla\u00a0CSS program\u0131 kullan\u0131l\u0131r.<\/li>\n\n\n\n
                  • HTML, CSS ve JS ile web sitesi tasarlanabilir. Ancak dinamik ve daha kaliteli hale getirmek i\u00e7in ASP.net, JAVA gibi diller de kullan\u0131lmal\u0131d\u0131r.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                    Web tasar\u0131m konusunda ara\u015ft\u0131rma yapan hemen herkesin kar\u015f\u0131na \u00e7\u0131kan temel kavram\u00a0HTML‘dir. Web sayfalar\u0131n\u0131\u00a0olu\u015fturma a\u015famas\u0131nda kullan\u0131lan standart bir metin i\u015faret dili olan\u00a0HTML a\u00e7\u0131l\u0131m\u0131\u00a0\u201cHyper Text Markup Language\u201d olarak bilinir. Genel bilinen yanl\u0131\u015f…<\/p>\n","protected":false},"author":1,"featured_media":60,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-55","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-genel"},"_links":{"self":[{"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":3,"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions\/62"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/media\/60"}],"wp:attachment":[{"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eclitgo.eclit.com\/blog\/wp-json\/wp\/v2\/tags?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}