{"id":147,"date":"2020-06-03T07:31:29","date_gmt":"2020-06-03T04:31:29","guid":{"rendered":"http:\/\/bahadirmeric.net\/bahadir\/?p=147"},"modified":"2020-06-03T07:31:29","modified_gmt":"2020-06-03T04:31:29","slug":"html-5-kodlamasi","status":"publish","type":"post","link":"http:\/\/bahadirmeric.net\/bahadir\/2020\/06\/03\/html-5-kodlamasi\/","title":{"rendered":"HTML 5 KODLAMASI"},"content":{"rendered":"\n<p>HTML 5 ile normal klasik HTML kodlamas\u0131da art\u0131k de\u011fi\u015fti. De\u011fi\u015fen bu kodlama stiliyle beraber birde yeni baz\u0131 tag\u2019ler ya\u015fant\u0131m\u0131za girip baz\u0131lar\u0131da kalkt\u0131. Burada basit olarak HTML 5 d\u00f6k\u00fcman\u0131 yap\u0131s\u0131ndan ve kalkan baz\u0131 tag\u2019lerden bahsedip sonras\u0131nda da temel bir HTML 5 \u00f6rnek sayfa kodu verip konuyu sonland\u0131raca\u011f\u0131m.HTML 5 ile birlikte art\u0131k hayat\u0131m\u0131za \u015f\u00f6yle bir web site yap\u0131s\u0131 girmeye ba\u015flad\u0131 asl\u0131nda hep vard\u0131 sadece bu yap\u0131ya uygun olarak ek tagler geldi demek daha do\u011fru olur. A\u015fa\u011f\u0131da bu yap\u0131ya uygun olarak k\u00fc\u00e7\u00fck bir \u00f6rnek resim payla\u015ft\u0131m;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"434\" height=\"320\" src=\"http:\/\/bahadirmeric.net\/bahadir\/wp-content\/uploads\/2020\/06\/html5_structure.png\" alt=\"\" class=\"wp-image-149\" srcset=\"http:\/\/bahadirmeric.net\/bahadir\/wp-content\/uploads\/2020\/06\/html5_structure.png 434w, http:\/\/bahadirmeric.net\/bahadir\/wp-content\/uploads\/2020\/06\/html5_structure-300x221.png 300w, http:\/\/bahadirmeric.net\/bahadir\/wp-content\/uploads\/2020\/06\/html5_structure-150x111.png 150w, http:\/\/bahadirmeric.net\/bahadir\/wp-content\/uploads\/2020\/06\/html5_structure-203x150.png 203w\" sizes=\"auto, (max-width: 434px) 100vw, 434px\" \/><\/figure>\n\n\n\n<p>Bu yap\u0131y\u0131 daha \u00e7ok div tag etiketleriyle \u015fuanda g\u00fcn\u00fcm\u00fczde sa\u011fl\u0131yoruz. Table etiket kullan\u0131m\u0131 giderek azalmakta. Bu yap\u0131ya g\u00f6re HTML 5 ile gelen etiketlerde \u015f\u00f6yledir;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>&lt;header&gt;\u2026..&lt;\/header&gt; Etiketi :<\/strong>&nbsp;Bu etiket sayfan\u0131n \u00fcst k\u0131sm\u0131n\u0131 tan\u0131mlar. Men\u00fc, logo gibi tan\u0131mlamalar burada yap\u0131l\u0131r. Bu k\u0131s\u0131mda siteye ait men\u00fcn\u00fcn bar\u0131nd\u0131r\u0131lmas\u0131 zorunlu de\u011fildir.<\/li><li><strong>&lt;footer&gt;\u2026..&lt;\/footer&gt; Etiketi :<\/strong>&nbsp;Web sitesinin en son k\u0131sm\u0131n\u0131 kapsar. Genellikle bu k\u0131s\u0131mda copyright, site map gibi bilgiler yer al\u0131r.<\/li><li><strong>&lt;nav&gt;\u2026..&lt;\/nav&gt; Etiketi :<\/strong>&nbsp;Navigasyon anlam\u0131n\u0131n k\u0131saltmas\u0131d\u0131r. Men\u00fc i\u00e7eri\u011fini kapsar.<\/li><li><strong>&lt;selection&gt;\u2026..&lt;\/selection&gt; Etiketi :<\/strong>&nbsp;Web sayfas\u0131n\u0131n her hangi bir b\u00f6l\u00fcm\u00fcn\u00fc olu\u015fturan html etiketidir. Web sayfas\u0131ndaki ana blok k\u0131sm\u0131 bu etiket i\u00e7ine genelde yerle\u015ftirilir. &lt;nav&gt; v.b. etiketleri kapsayabilir.<\/li><li><strong>&lt;article&gt;\u2026..&lt;\/article&gt; Etiketi :<\/strong>&nbsp;Web sayfas\u0131nda yer alan haber, makale gibi metin i\u00e7eri\u011fi olu\u015fturan alanlar\u0131 temsil eder.<\/li><li><strong>&lt;aside&gt;\u2026..&lt;\/aside&gt; Etiketi :<\/strong>&nbsp;Sayfan\u0131n sidebar olarak tan\u0131mlanan alan\u0131n\u0131 temsil eder. Sayfaya ait kategori bilgileri, etiket bilgileri, anket, reklam alan\u0131 gibi bilgilerin bar\u0131nd\u0131r\u0131ld\u0131\u011f\u0131 yeri temsil eder.<\/li><\/ul>\n\n\n\n<p>Gelen bu yap\u0131 etiketleriyle birlikte hayat\u0131m\u0131zdan da \u015fu etiketler kalkm\u0131\u015ft\u0131r;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&lt;acronym&gt;<\/li><li>&lt;applet&gt;<\/li><li>&lt;basefont&gt;<\/li><li>&lt;big&gt;<\/li><li>&lt;center&gt;<\/li><li>&lt;dir&gt;<\/li><li>&lt;font&gt;<\/li><li>&lt;frame&gt;<\/li><li>&lt;frameset&gt;<\/li><li>&lt;noframes&gt;<\/li><li>&lt;s&gt;<\/li><li>&lt;strike&gt;<\/li><li>&lt;tt&gt;<\/li><li>&lt;u&gt;<\/li><li>&lt;xmp&gt;<\/li><\/ul>\n\n\n\n<p>Kalkan etiketlerin bir k\u0131sm\u0131n\u0131 HTML 5 yap\u0131s\u0131nda kulland\u0131\u011f\u0131n\u0131zda i\u015flemlerini yerine getirirken baz\u0131 etiketler yorumlanmamaktad\u0131r !!! Bu etiketlerin yerini CSS tan\u0131mlamalar\u0131 almaktad\u0131r. CSS \u00fczerinden ilgili stil ad\u0131 yarat\u0131larak yada etikete stil verilerek ayn\u0131 g\u00f6r\u00fcn\u00fcmler elde edilmektedir. Bununla birlikte basit anlamda bir HTML 5 belgesi a\u015fa\u011f\u0131daki gibi olu\u015fmaktad\u0131r;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE HTML&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;\u00d6rnek HTML 5 i\u00e7eri\u011fi&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;header&gt;\n    &lt;h1&gt;\u00d6rnek&lt;\/h1&gt;\n    &lt;nav&gt;\n        &lt;ul&gt;\n            &lt;li href=&quot;index.html&quot;&gt;Anasayfa&lt;\/li&gt;\n            &lt;li href=&quot;hakkimda.html&quot;&gt;Hakk\u0131mda&lt;\/li&gt;\n            &lt;li href=&quot;iletisim.html&quot;&gt;\u0130leti\u015fim&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/nav&gt;\n&lt;\/header&gt;\n&lt;section&gt;\n    &lt;video width=&quot;320&quot; height=&quot;240&quot; controls&gt;\n        &lt;source src=&quot;movie.mp4&quot; type=&quot;video\/mp4&quot;&gt;\n        &lt;source src=&quot;movie.ogg&quot; type=&quot;video\/ogg&quot;&gt;\n    &lt;\/video&gt;\n&lt;\/section&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>HTML 5 ile normal klasik HTML kodlamas\u0131da art\u0131k de\u011fi\u015fti. De\u011fi\u015fen bu kodlama stiliyle beraber birde yeni baz\u0131 tag\u2019ler ya\u015fant\u0131m\u0131za girip baz\u0131lar\u0131da kalkt\u0131. Burada basit olarak HTML 5 d\u00f6k\u00fcman\u0131 yap\u0131s\u0131ndan ve kalkan baz\u0131 tag\u2019lerden bahsedip sonras\u0131nda da temel bir HTML 5 \u00f6rnek sayfa kodu verip konuyu sonland\u0131raca\u011f\u0131m.HTML 5 ile birlikte art\u0131k&#8230; <a class=\"continue-reading-link\" href=\"http:\/\/bahadirmeric.net\/bahadir\/2020\/06\/03\/html-5-kodlamasi\/\"> Continue reading <span class=\"meta-nav\">&rarr; <\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":11,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[17],"class_list":["post-147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-html"],"_links":{"self":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts\/147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/comments?post=147"}],"version-history":[{"count":2,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts\/147\/revisions"}],"predecessor-version":[{"id":150,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/posts\/147\/revisions\/150"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/media\/11"}],"wp:attachment":[{"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/media?parent=147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/categories?post=147"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bahadirmeric.net\/bahadir\/wp-json\/wp\/v2\/tags?post=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}