Sayfa Ba\u015fl\u0131\u011f\u0131<\/title><\/p>\n\n\n\n<p><\/head><\/p>\n\n\n\n<p><body><\/p>\n\n\n\n<p><H1> Buraya Ba\u015fl\u0131k Gelir<\/H1><\/p>\n\n\n\n<p><P> Buraya ilk paragraf yaz\u0131l\u0131r<\/P><\/p>\n\n\n\n<p><P>Buraya sonraki yeni paragraf yaz\u0131l\u0131r<\/P><\/p>\n\n\n\n<p><\/body><\/p>\n\n\n\n<p><\/html><\/p>\n\n\n\n<p>Dikkat edin: <body> b\u00f6l\u00fcm\u00fcn\u00fcn i\u00e7eri\u011fi web taray\u0131c\u0131da g\u00f6sterilir. <title> \u00d6\u011fesinin i\u00e7eri\u011fi ise web taray\u0131c\u0131n\u0131n sayfa b\u00f6l\u00fcm\u00fcnde g\u00f6sterilir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-en-ok-kullan-lan-html-kodlar\"><span id=\"en-cok-kullanilan-html-kodlari\"><strong>En \u00c7ok Kullan\u0131lan HTML Kodlar\u0131<\/strong><\/span><\/h2>\n\n\n\n<p>\u00c7ok say\u0131da HTML kodu mevcuttur. HTML kodlar\u0131 yaza yaza iyice ve kolayca \u00f6\u011frenilir. \u00d6ncelikle en s\u0131k kullan\u0131lan HTM kodlar\u0131 \u00f6\u011frenilmelidir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ba-l-klar-h1-h6\"><span id=\"basliklar-h1-h6\"><strong>Ba\u015fl\u0131klar (<h1>-<h6>)<\/strong><\/span><\/h3>\n\n\n\n<p>HTML \u00f6\u011feleri i\u00e7inde kullan\u0131lan ba\u015fl\u0131klar s\u0131ras\u0131yla b\u00fcy\u00fckten k\u00fc\u00e7\u00fc\u011fe; <h1><\/h1>,<h2><\/h2>,<h3><\/h3>,<h4><\/h4>,<h5><\/h5>,<h6><\/h6> \u015feklinde g\u00f6sterilir. Her bir ba\u015fl\u0131k bu \u00f6\u011felerin aras\u0131na yaz\u0131l\u0131r. En b\u00fcy\u00fck ba\u015fl\u0131k <h1><\/h1>, en k\u00fc\u00e7\u00fck ba\u015fl\u0131k <h6><\/h6> aral\u0131\u011f\u0131na yaz\u0131l\u0131r.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paragraf-p\"><span id=\"paragraf-p\"><strong>Paragraf (<p>)<\/strong><\/span><\/h3>\n\n\n\n<p>Paragraflar kod i\u00e7indeki <P> <\/P> aral\u0131\u011f\u0131na yaz\u0131l\u0131r. Her bir paragraf i\u00e7in ayr\u0131 bir <P> <\/P> kodu kullan\u0131l\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-liste-ul-ol\"><span id=\"liste-ul-ol\"><strong>Liste (<ul>-<ol>)<\/strong><\/span><\/h3>\n\n\n\n<p>HTML kodlar\u0131nda listeleme de s\u0131k\u00e7a kullan\u0131l\u0131r.<\/p>\n\n\n\n<p>S\u0131ralanmamam\u0131\u015f listeler i\u00e7in liste \u00f6\u011feleri <li> <\/li> aras\u0131na yaz\u0131larak <ul> <\/ul> kodlar\u0131 aras\u0131na s\u0131ralan\u0131r.<\/p>\n\n\n\n<p>\u00d6rne\u011fin:<\/p>\n\n\n\n<p><ul><\/p>\n\n\n\n<p>\u00a0<li>Ekmek<\/li><\/p>\n\n\n\n<p>\u00a0<li>S\u00fct<\/li><\/p>\n\n\n\n<p>\u00a0<li>\u00c7ay<\/li><\/p>\n\n\n\n<p><\/ul><\/p>\n\n\n\n<p>S\u0131ral\u0131 listeler ise <ol> <\/ol> etiketi aras\u0131nda g\u00f6sterilir.<\/p>\n\n\n\n<p>\u00d6rne\u011fin:<\/p>\n\n\n\n<p><ol><\/p>\n\n\n\n<p>\u00a0<li>Ekmek<\/li><\/p>\n\n\n\n<p>\u00a0<li>S\u00fct<\/li><\/p>\n\n\n\n<p>\u00a0<li>\u00c7ay<\/li><\/p>\n\n\n\n<p><\/ol><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-resim-img\"><span id=\"resim-img\"><strong>Resim (<img>)<\/strong><\/span><\/h3>\n\n\n\n<p>Web sitesinde kullan\u0131lan bir g\u00f6r\u00fcnt\u00fcn\u00fcn \u015fekli kodlarla d\u00fczenlenebilir. Bunun i\u00e7in <img> kodu kullan\u0131l\u0131r.<\/p>\n\n\n\n<p><img src=\u201dmadalya.jpg\u201d alt=\u201dAlt\u0131n Madalya\u201d><\/p>\n\n\n\n<p>Burada src kaynak g\u00f6rsel dosyay\u0131 g\u00f6sterirken, alt komutu da g\u00f6rsel alt\u0131na yaz\u0131lacak yaz\u0131y\u0131 verir.<\/p>\n\n\n\n<p>G\u00f6r\u00fcnt\u00fcn\u00fcn eni (width) ve boyu(height) da kod ile a\u015fa\u011f\u0131daki \u00f6rnekte oldu\u011fu gibi iki \u015fekilde s\u0131n\u0131rlanabilir.<\/p>\n\n\n\n<p><img src=\u201d madalya.jpg \u201d alt=\u201d Alt\u0131n Madalya \u201d style=\u201dwidth:500px;height:600px;\u201d><\/p>\n\n\n\n<p><img src=\u201d madalya.jpg \u201d alt=\u201d Alt\u0131n Madalya \u201d width=\u201d500\u2033 height=\u201d600\u2033><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-b-lme-div\"><span id=\"bolme-div\"><strong>B\u00f6lme (<div>)<\/strong><\/span><\/h3>\n\n\n\n<p><div> etiketi ile blok olu\u015fturulur.<\/p>\n\n\n\n<p><div> etiketi, HTML belgesinde bir b\u00f6l\u00fcm ya da b\u00f6lme yaratmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n\n<p>HTML elementleri i\u00e7in bir kapsay\u0131c\u0131 olu\u015fturur. B\u00f6ylece daha sonra CSS ile \u015fekillendirilebilir. Ya da Javascript ile manip\u00fcle edilebilir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-apa-a\"><span id=\"capa-a\"><strong>\u00c7apa (<a>)<\/strong><\/span><\/h3>\n\n\n\n<p><a> etiketi bir linki tan\u0131mlar. href \u00f6zelli\u011fi, ba\u011flant\u0131n\u0131n gitti\u011fi sayfan\u0131n URL\u2019sini verir. A\u015fa\u011f\u0131daki \u00f6rnekte google ana sayfas\u0131na link verilmi\u015ftir. Yaz\u0131ya t\u0131kland\u0131\u011f\u0131nda Google sayfas\u0131 a\u00e7\u0131l\u0131r.<\/p>\n\n\n\n<p><a href=\u201dhttps:\/\/www.google.com\u201d>Google\u2019\u0131 ziyaret edin <\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"716\" src=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6-1024x716.png\" alt=\"\" class=\"wp-image-31369\" srcset=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6-1024x716.png 1024w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6-300x210.png 300w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6-768x537.png 768w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6-1536x1074.png 1536w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6.png 1578w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Fig\u00fcr 1. HTLM etiketleri<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-versiyonlar\"><span id=\"html-versiyonlari\"><strong>HTML Versiyonlar\u0131<\/strong><\/span><\/h2>\n\n\n\n<p>\u0130lk \u00e7\u0131kt\u0131\u011f\u0131 g\u00fcnden bu yana HTML olduk\u00e7a de\u011fi\u015fmi\u015ftir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-1-0\"><span id=\"html-1-0\"><strong>HTML 1.0<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>HTML\u2019in ilk \u00e7\u0131kan versiyondur.<\/li><li>HTML\u2019in en basit versiyonudur.<\/li><li>Tekst ve g\u00f6rsel gibi temel \u00f6\u011feleri destekler.<\/li><li>Bi\u00e7imlendirme gibi zengin destekleri yoktur.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-2-0\"><span id=\"html-2-0\"><strong>HTML 2.0<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>HTML 1.0\u2019\u0131n geli\u015fitirilmesi amac\u0131yla 1995 y\u0131l\u0131nda ortaya \u00e7\u0131km\u0131\u015ft\u0131r.<\/li><li>HTML 2.0 i\u015faretleme etiketlerini olduk\u00e7a geli\u015ftirmi\u015ftir.<\/li><li>HTML 2.0 ile tablolar da HTML etiketi olarak gelmi\u015ftir.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-3-2\"><span id=\"html-3-2\"><strong>HTML 3.2<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>1997 Y\u0131l\u0131nda geli\u015ftirilmi\u015ftir.<\/li><li>HTML 3.2 ile HTML etiketleri ilerleme kaydetmi\u015ftir.<\/li><li>CSS deste\u011fi gelmi\u015ftir.<\/li><li>Form \u00f6\u011felerini daha iyi destekler.<\/li><li>HTML 3.2 ile taray\u0131c\u0131 frame etiketini destekler.\u00a0\u00a0<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-4-01\"><span id=\"html-4-01\"><strong>HTML 4.01<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>1999 Y\u0131l\u0131nda geli\u015ftirilmi\u015ftir.<\/li><li>CSS deste\u011fini art\u0131rm\u0131\u015ft\u0131r.<\/li><li>CSS HTML sayfas\u0131n\u0131n i\u00e7ine eklenmi\u015ftir.<\/li><li>Yeni HTML etiketleri geli\u015ftirilmi\u015ftir.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-5-0\"><span id=\"html-5-0\"><strong>HTML 5.0<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>2014 Y\u0131l\u0131nda geli\u015ftiriciler taraf\u0131ndan kullan\u0131l\u0131r hale gelmi\u015ftir.<\/li><li>En son HTML versiyonudur.<\/li><li>\u00c7ok say\u0131da yeni HTML etiketi deste\u011fi ile gelmi\u015ftir.<\/li><li>Halen geli\u015fmesi devam etmektedir.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html5-nedir\"><span id=\"html5-nedir\"><strong>HTML5 Nedir?<\/strong><\/span><\/h2>\n\n\n\n<p>HTML 5.0 en son geli\u015ftirilen HTML versiyonudur. Bir\u00e7ok yeni HTML etiketini destekler. Time, audio, description, embed, fig, shape, footer, article, canvas, navy, output, section, source, track ve video bu etiketler aras\u0131nda \u00f6ne \u00e7\u0131kanlard\u0131r. Web sitenizde olduk\u00e7a komplike uygulamalar\u0131n \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131r. \u0130nternete ba\u011fl\u0131 de\u011filken bile \u00e7al\u0131\u015fabilecek uygulamalar geli\u015ftirmenizi sa\u011flar. HTML 5 yenilikleri 5 ana ba\u015fl\u0131kta toplanabilir:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>E-posta: <\/strong>Form etiketi olarak \u00fcretilmi\u015f olsa da do\u011frulama kontrolleri i\u00e7in de kullan\u0131labilir.<\/li><li><strong>\u015eifre: <\/strong>Bir ba\u015fka form etiketidir ve kullan\u0131c\u0131dan parola almak i\u00e7in kullan\u0131l\u0131r. Parola alan\u0131 kullan\u0131c\u0131 taraf\u0131ndan g\u00f6r\u00fclmez.<\/li><li><strong>Audio etiketi: <\/strong>HTML 5 taraf\u0131ndan eklenmi\u015f bir etikettir. Web sayfalar\u0131na ses eklenmesine ve dinlenmesine olanak tan\u0131r.<\/li><li><strong>Semantik etiketler:<\/strong> Di\u011fer ad\u0131; yap\u0131sal etiketlerdir. Web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 belirler. Belli ba\u015fl\u0131 semantik etiketler aras\u0131nda; figcaption, <header> ve <footer> bulunur.<\/li><li><strong>B\u00f6l\u00fcm etiketi:<\/strong> Web sayfas\u0131nda bulunan bir b\u00f6l\u00fcm\u00fc g\u00f6stermek i\u00e7in kullan\u0131l\u0131r.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-ve-html-5-aras-ndaki-farklar-nelerdir\"><span id=\"html-ve-html-5-arasindaki-farklar-nelerdir\"><strong>HTML ve HTML 5 Aras\u0131ndaki Farklar Nelerdir?<\/strong><\/span><\/h2>\n\n\n\n<p>Zaman i\u00e7inde b\u00fcy\u00fck bir de\u011fi\u015fim d\u00f6n\u00fc\u015f\u00fcm ge\u00e7iren HTML son versiyonunun getirdi\u011fi yeniliklerle dikkat \u00e7eker. HTML ve HTML 5 aras\u0131ndaki en temel farklar \u015f\u00f6yle s\u0131ralanabilir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>HTML en temel bi\u00e7im deste\u011fini sa\u011flarken, HTML 5 en son geli\u015ftirilen HTML deste\u011fini sunar.<\/li><li>HTML video ve ses dosyalar\u0131n\u0131 desteklemezken, HTML 5 her ikisini de destekler.<\/li><li>HTML taray\u0131c\u0131lar\u0131 ge\u00e7ici depolama i\u00e7in cache memory kullan\u0131rken, HTML 5 application cache, SQL database, ve web storage depolama se\u00e7eneklerini kullan\u0131r.<\/li><li>HTML t\u00fcm taray\u0131c\u0131lar taraf\u0131ndan desteklenirken, HTML 5 sadece HTML 5 uyumlu taray\u0131c\u0131lar ile kullan\u0131labilir.<\/li><li>HTML ile vekt\u00f6r grafik kullan\u0131m\u0131 spesifik ara\u00e7lar ile m\u00fcmk\u00fcnken, HTML 5 ile vekt\u00f6r grafik kullan\u0131labilir.<\/li><li>HTML ile taray\u0131c\u0131 aray\u00fcz\u00fc ve JavaScript ayn\u0131 i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131rken, HTML5\u2019de, taray\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn birden \u00e7ok i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015fmas\u0131na izin veren JavaScript Web Worker API\u2019si bulunur.<\/li><li>HTML cookies ve veri depolama kullan\u0131rken, HTML 5 bunun yerine yerel depolama yapar.<\/li><li>HTML ile daire, dikd\u00f6rtgen, \u00e7ember gibi \u015fekiller \u00e7izmek m\u00fcmk\u00fcn de\u011filken, HTM5 ile bu m\u00fcmk\u00fcnd\u00fcr.<\/li><li>HTML ile dok\u00fcman tipi deklerasyonu uzunken, HTML 5 ile bu \u00e7ok k\u0131sad\u0131r.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-in-css-ve-javascript-ile-i-li-kisi-nedir\"><span id=\"htmlin-css-ve-javascript-ile-iliskisi-nedir\"><strong>HTML\u2019in CSS ve Javascript ile \u0130li\u015fkisi Nedir?<\/strong><\/span><\/h2>\n\n\n\n<p>Bir web sitesinin ana iskeletini; HTML, CSS ve Javascript olu\u015fturur. HTML i\u015faretleme dilidir, CSS bi\u00e7imlendirme dili, Javascript ise programlama dilidir.<\/p>\n\n\n\n<p>HTML ile ana hatlar\u0131n\u0131 oturttu\u011funuz web sitesinin \u015feklini CSS ile verirsiniz. Javascript ise dinamik bir web aray\u00fcz\u00fc elde etmenizi sa\u011flar. Butonlar\u0131 y\u00f6netebilmenizi, alana yaz\u0131lan yaz\u0131lar\u0131n otomatik tamamlanmas\u0131n\u0131 Javascript sa\u011flar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-1024x486.png\" alt=\"\" class=\"wp-image-31368\" srcset=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-1024x486.png 1024w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-300x142.png 300w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-768x365.png 768w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-1536x729.png 1536w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-2048x972.png 2048w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5.png 2222w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Fig\u00fcr 2. HTML, CSS, Javascript ili\u015fkisi<\/p>\n\n\n\n<p>B\u00fcy\u00fck bir proje \u00fczerinde \u00e7al\u0131\u015f\u0131rken, HTML, CSS ve Javascript dosyalar\u0131n\u0131n ayr\u0131 ayr\u0131 klas\u00f6rlerde tutulmas\u0131nda fayda vard\u0131r.<\/p>\n\n\n\n<p>Bir CSS dosyas\u0131n\u0131 HTML dosyan\u0131za ba\u011flarken, HTML dosyan\u0131zdaki sonraki komut dosyas\u0131n\u0131 head etiketinin i\u00e7ine yazman\u0131z gerekir.<\/p>\n\n\n\n<p>Bir Javascript dosyas\u0131n\u0131 HTML\u2019nize ba\u011flarken, komut dosyas\u0131n\u0131n kayna\u011f\u0131n\u0131 g\u00f6vde etiketinin i\u00e7ine ya da d\u0131\u015f\u0131na eklemeniz yeterlidir. Sonu\u00e7 fark etmez.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-7-1024x579.png\" alt=\"\" class=\"wp-image-31370\" srcset=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-7-1024x579.png 1024w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-7-300x170.png 300w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-7-768x434.png 768w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-7.png 1204w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Fig\u00fcr 3. WordPress sitl.css kodu \u00f6rne\u011fi<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-nas-l-renilir\"><span id=\"html-nasil-ogrenilir\"><strong>HTML Nas\u0131l \u00d6\u011frenilir?<\/strong><\/span><\/h2>\n\n\n\n<p>HTML kitaplardan \u00f6\u011frenilebilece\u011fi gibi online olarak da \u00f6\u011frenilebilir. Bu alanda yard\u0131mc\u0131 \u00e7ok say\u0131da web sitesi mevcuttur. Ayr\u0131ca \u00fccretli ve \u00fccretsiz online ders veren web siteleri de bulunur. Bu e\u011fitimler en temel ad\u0131m olan etiketlerin nas\u0131l kullan\u0131laca\u011f\u0131ndan, daha karma\u015f\u0131k olan CSS ve Javascript ile nas\u0131l kullan\u0131laca\u011f\u0131na kadar geni\u015f bir kapsama sahiptir.<\/p>\n\n\n\n<p>\u00d6\u011frenme s\u00fcrecinde ilk ad\u0131m; temel etiketleri, ana kurallar\u0131 \u00f6\u011frenmek ve basit \u00f6rnekleri uygulamakt\u0131r. Kullan\u0131lan etiketlerin s\u0131rayla kapat\u0131lmas\u0131, a\u00e7\u0131lan her etiketin kapat\u0131lmas\u0131 gibi temel unsurlar ilk \u00f6\u011frenilecek kurallar aras\u0131nda yer al\u0131r.<\/p>\n\n\n\n<p>S\u0131k kullan\u0131lan etiketler \u00f6\u011frenilip yeterince \u00f6rnek yap\u0131ld\u0131ktan sonra daha fazla etiket \u00f6\u011frenilir ve daha sofistike web tasar\u0131mlar\u0131 \u00fczerinde \u00e7al\u0131\u015f\u0131labilir. HTML \u00f6\u011frenme s\u00fcreci ad\u0131m ad\u0131m ilerleme gerektirir. Bu s\u00fcre\u00e7te haz\u0131r HTML edit\u00f6rleri de yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML s\u0131k\u00e7a duydu\u011fumuz bir \u0130nternet terimidir. Peki \u201cHTML nedir?\u201d HTML \u0130ngilizce \u201chypertext markup language\u201d kelimelerinin k\u0131saltmas\u0131d\u0131r. \u0130nternet \u00fczerinden…\n","protected":false},"author":7,"featured_media":31371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[652],"tags":[],"class_list":{"0":"post-31367","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-nedir"},"_links":{"self":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/31367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/comments?post=31367"}],"version-history":[{"count":0,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/31367\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media\/31371"}],"wp:attachment":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media?parent=31367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/categories?post=31367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/tags?post=31367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":31367,"date":"2021-07-24T14:40:00","date_gmt":"2021-07-24T11:40:00","guid":{"rendered":"https:\/\/www.natro.com\/blog\/?p=31367"},"modified":"2021-07-27T14:44:32","modified_gmt":"2021-07-27T11:44:32","slug":"html-nedir-en-cok-kullanilan-html-kodlari","status":"publish","type":"post","link":"https:\/\/www.natro.com\/blog\/html-nedir-en-cok-kullanilan-html-kodlari\/","title":{"rendered":"HTML nedir? | En \u00e7ok kullan\u0131lan HTML kodlar\u0131"},"content":{"rendered":"\n

HTML s\u0131k\u00e7a duydu\u011fumuz bir \u0130nternet terimidir. Peki \u201cHTML nedir?\u201d<\/p>\n\n\n\n

HTML \u0130ngilizce \u201chypertext markup language\u201d kelimelerinin k\u0131saltmas\u0131d\u0131r.<\/li>
\u0130nternet \u00fczerinden al\u0131nan materyalleri g\u00f6r\u00fcnt\u00fclemek i\u00e7in kullan\u0131lan standart bir bi\u00e7imlendirme sistemidir.<\/li>
\u0130nternet \u00fczerinden \u00e7a\u011fr\u0131lan her bir birim web sayfas\u0131 olarak adland\u0131r\u0131l\u0131r. HTML web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 tan\u0131mlar.<\/li>
Genellikle web sayfalar\u0131 ba\u015fka web sayfalar\u0131n\u0131 \u00e7a\u011f\u0131rmay\u0131 sa\u011flayan ba\u015fka HTML ba\u011flant\u0131lar\u0131 da i\u00e7erir.<\/li><\/ul>\n\n\n\n
HTML Nas\u0131l Yaz\u0131l\u0131r?<\/strong><\/span><\/h2>\n\n\n\n
HTML anla\u015f\u0131lmas\u0131 pratik bir dizi kod i\u00e7erir.<\/li>
HTML belirli kurallara g\u00f6re yaz\u0131l\u0131r.<\/li>
HTML \u00f6\u011feleri, taray\u0131c\u0131ya i\u00e7eri\u011fin ne \u015fekilde g\u00f6r\u00fcnt\u00fclenece\u011fini belirtir.<\/li>
HTML kodlar\u0131, ba\u015fl\u0131k, paragraf, ba\u011flant\u0131 gibi i\u00e7erik par\u00e7alar\u0131n\u0131 etiketler.<\/li><\/ul>\n\n\n\n
HTML Dosyas\u0131 Nas\u0131l Olu\u015fturulur?<\/strong><\/span><\/h2>\n\n\n\n
Bir HTML dosyas\u0131 HTML kodlar\u0131n\u0131n s\u0131f\u0131rdan yaz\u0131lmas\u0131yla olu\u015fturulabilece\u011fi gibi, MS Front Page, Dreamweaver gibi HTML edit\u00f6rleri ile de haz\u0131r kodlar arac\u0131l\u0131\u011f\u0131yla pratik \u015fekilde olu\u015fturulabilir. S\u0131f\u0131rdan kod yaz\u0131yorsan\u0131z edit\u00f6r olarak Notepad bile kullanabilirsiniz.<\/p>\n\n\n\n
Bir HTML Belgesinin Yap\u0131s\u0131<\/strong><\/span><\/h2>\n\n\n\n
Bir HTML belgesi \u00e7ok say\u0131da HTML \u00f6\u011fesi i\u00e7erir. Bu yap\u0131 genel olarak \u015fu \u015fekildedir:<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Sayfa Ba\u015fl\u0131\u011f\u0131<\/title><\/p>\n\n\n\n<p><\/head><\/p>\n\n\n\n<p><body><\/p>\n\n\n\n<p><H1> Buraya Ba\u015fl\u0131k Gelir<\/H1><\/p>\n\n\n\n<p><P> Buraya ilk paragraf yaz\u0131l\u0131r<\/P><\/p>\n\n\n\n<p><P>Buraya sonraki yeni paragraf yaz\u0131l\u0131r<\/P><\/p>\n\n\n\n<p><\/body><\/p>\n\n\n\n<p><\/html><\/p>\n\n\n\n<p>Dikkat edin: <body> b\u00f6l\u00fcm\u00fcn\u00fcn i\u00e7eri\u011fi web taray\u0131c\u0131da g\u00f6sterilir. <title> \u00d6\u011fesinin i\u00e7eri\u011fi ise web taray\u0131c\u0131n\u0131n sayfa b\u00f6l\u00fcm\u00fcnde g\u00f6sterilir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-en-ok-kullan-lan-html-kodlar\"><span id=\"en-cok-kullanilan-html-kodlari\"><strong>En \u00c7ok Kullan\u0131lan HTML Kodlar\u0131<\/strong><\/span><\/h2>\n\n\n\n<p>\u00c7ok say\u0131da HTML kodu mevcuttur. HTML kodlar\u0131 yaza yaza iyice ve kolayca \u00f6\u011frenilir. \u00d6ncelikle en s\u0131k kullan\u0131lan HTM kodlar\u0131 \u00f6\u011frenilmelidir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ba-l-klar-h1-h6\"><span id=\"basliklar-h1-h6\"><strong>Ba\u015fl\u0131klar (<h1>-<h6>)<\/strong><\/span><\/h3>\n\n\n\n<p>HTML \u00f6\u011feleri i\u00e7inde kullan\u0131lan ba\u015fl\u0131klar s\u0131ras\u0131yla b\u00fcy\u00fckten k\u00fc\u00e7\u00fc\u011fe; <h1><\/h1>,<h2><\/h2>,<h3><\/h3>,<h4><\/h4>,<h5><\/h5>,<h6><\/h6> \u015feklinde g\u00f6sterilir. Her bir ba\u015fl\u0131k bu \u00f6\u011felerin aras\u0131na yaz\u0131l\u0131r. En b\u00fcy\u00fck ba\u015fl\u0131k <h1><\/h1>, en k\u00fc\u00e7\u00fck ba\u015fl\u0131k <h6><\/h6> aral\u0131\u011f\u0131na yaz\u0131l\u0131r.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-paragraf-p\"><span id=\"paragraf-p\"><strong>Paragraf (<p>)<\/strong><\/span><\/h3>\n\n\n\n<p>Paragraflar kod i\u00e7indeki <P> <\/P> aral\u0131\u011f\u0131na yaz\u0131l\u0131r. Her bir paragraf i\u00e7in ayr\u0131 bir <P> <\/P> kodu kullan\u0131l\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-liste-ul-ol\"><span id=\"liste-ul-ol\"><strong>Liste (<ul>-<ol>)<\/strong><\/span><\/h3>\n\n\n\n<p>HTML kodlar\u0131nda listeleme de s\u0131k\u00e7a kullan\u0131l\u0131r.<\/p>\n\n\n\n<p>S\u0131ralanmamam\u0131\u015f listeler i\u00e7in liste \u00f6\u011feleri <li> <\/li> aras\u0131na yaz\u0131larak <ul> <\/ul> kodlar\u0131 aras\u0131na s\u0131ralan\u0131r.<\/p>\n\n\n\n<p>\u00d6rne\u011fin:<\/p>\n\n\n\n<p><ul><\/p>\n\n\n\n<p>\u00a0<li>Ekmek<\/li><\/p>\n\n\n\n<p>\u00a0<li>S\u00fct<\/li><\/p>\n\n\n\n<p>\u00a0<li>\u00c7ay<\/li><\/p>\n\n\n\n<p><\/ul><\/p>\n\n\n\n<p>S\u0131ral\u0131 listeler ise <ol> <\/ol> etiketi aras\u0131nda g\u00f6sterilir.<\/p>\n\n\n\n<p>\u00d6rne\u011fin:<\/p>\n\n\n\n<p><ol><\/p>\n\n\n\n<p>\u00a0<li>Ekmek<\/li><\/p>\n\n\n\n<p>\u00a0<li>S\u00fct<\/li><\/p>\n\n\n\n<p>\u00a0<li>\u00c7ay<\/li><\/p>\n\n\n\n<p><\/ol><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-resim-img\"><span id=\"resim-img\"><strong>Resim (<img>)<\/strong><\/span><\/h3>\n\n\n\n<p>Web sitesinde kullan\u0131lan bir g\u00f6r\u00fcnt\u00fcn\u00fcn \u015fekli kodlarla d\u00fczenlenebilir. Bunun i\u00e7in <img> kodu kullan\u0131l\u0131r.<\/p>\n\n\n\n<p><img src=\u201dmadalya.jpg\u201d alt=\u201dAlt\u0131n Madalya\u201d><\/p>\n\n\n\n<p>Burada src kaynak g\u00f6rsel dosyay\u0131 g\u00f6sterirken, alt komutu da g\u00f6rsel alt\u0131na yaz\u0131lacak yaz\u0131y\u0131 verir.<\/p>\n\n\n\n<p>G\u00f6r\u00fcnt\u00fcn\u00fcn eni (width) ve boyu(height) da kod ile a\u015fa\u011f\u0131daki \u00f6rnekte oldu\u011fu gibi iki \u015fekilde s\u0131n\u0131rlanabilir.<\/p>\n\n\n\n<p><img src=\u201d madalya.jpg \u201d alt=\u201d Alt\u0131n Madalya \u201d style=\u201dwidth:500px;height:600px;\u201d><\/p>\n\n\n\n<p><img src=\u201d madalya.jpg \u201d alt=\u201d Alt\u0131n Madalya \u201d width=\u201d500\u2033 height=\u201d600\u2033><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-b-lme-div\"><span id=\"bolme-div\"><strong>B\u00f6lme (<div>)<\/strong><\/span><\/h3>\n\n\n\n<p><div> etiketi ile blok olu\u015fturulur.<\/p>\n\n\n\n<p><div> etiketi, HTML belgesinde bir b\u00f6l\u00fcm ya da b\u00f6lme yaratmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n\n<p>HTML elementleri i\u00e7in bir kapsay\u0131c\u0131 olu\u015fturur. B\u00f6ylece daha sonra CSS ile \u015fekillendirilebilir. Ya da Javascript ile manip\u00fcle edilebilir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-apa-a\"><span id=\"capa-a\"><strong>\u00c7apa (<a>)<\/strong><\/span><\/h3>\n\n\n\n<p><a> etiketi bir linki tan\u0131mlar. href \u00f6zelli\u011fi, ba\u011flant\u0131n\u0131n gitti\u011fi sayfan\u0131n URL\u2019sini verir. A\u015fa\u011f\u0131daki \u00f6rnekte google ana sayfas\u0131na link verilmi\u015ftir. Yaz\u0131ya t\u0131kland\u0131\u011f\u0131nda Google sayfas\u0131 a\u00e7\u0131l\u0131r.<\/p>\n\n\n\n<p><a href=\u201dhttps:\/\/www.google.com\u201d>Google\u2019\u0131 ziyaret edin <\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"716\" src=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6-1024x716.png\" alt=\"\" class=\"wp-image-31369\" srcset=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6-1024x716.png 1024w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6-300x210.png 300w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6-768x537.png 768w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6-1536x1074.png 1536w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-6.png 1578w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Fig\u00fcr 1. HTLM etiketleri<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-versiyonlar\"><span id=\"html-versiyonlari\"><strong>HTML Versiyonlar\u0131<\/strong><\/span><\/h2>\n\n\n\n<p>\u0130lk \u00e7\u0131kt\u0131\u011f\u0131 g\u00fcnden bu yana HTML olduk\u00e7a de\u011fi\u015fmi\u015ftir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-1-0\"><span id=\"html-1-0\"><strong>HTML 1.0<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>HTML\u2019in ilk \u00e7\u0131kan versiyondur.<\/li><li>HTML\u2019in en basit versiyonudur.<\/li><li>Tekst ve g\u00f6rsel gibi temel \u00f6\u011feleri destekler.<\/li><li>Bi\u00e7imlendirme gibi zengin destekleri yoktur.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-2-0\"><span id=\"html-2-0\"><strong>HTML 2.0<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>HTML 1.0\u2019\u0131n geli\u015fitirilmesi amac\u0131yla 1995 y\u0131l\u0131nda ortaya \u00e7\u0131km\u0131\u015ft\u0131r.<\/li><li>HTML 2.0 i\u015faretleme etiketlerini olduk\u00e7a geli\u015ftirmi\u015ftir.<\/li><li>HTML 2.0 ile tablolar da HTML etiketi olarak gelmi\u015ftir.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-3-2\"><span id=\"html-3-2\"><strong>HTML 3.2<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>1997 Y\u0131l\u0131nda geli\u015ftirilmi\u015ftir.<\/li><li>HTML 3.2 ile HTML etiketleri ilerleme kaydetmi\u015ftir.<\/li><li>CSS deste\u011fi gelmi\u015ftir.<\/li><li>Form \u00f6\u011felerini daha iyi destekler.<\/li><li>HTML 3.2 ile taray\u0131c\u0131 frame etiketini destekler.\u00a0\u00a0<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-4-01\"><span id=\"html-4-01\"><strong>HTML 4.01<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>1999 Y\u0131l\u0131nda geli\u015ftirilmi\u015ftir.<\/li><li>CSS deste\u011fini art\u0131rm\u0131\u015ft\u0131r.<\/li><li>CSS HTML sayfas\u0131n\u0131n i\u00e7ine eklenmi\u015ftir.<\/li><li>Yeni HTML etiketleri geli\u015ftirilmi\u015ftir.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-5-0\"><span id=\"html-5-0\"><strong>HTML 5.0<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>2014 Y\u0131l\u0131nda geli\u015ftiriciler taraf\u0131ndan kullan\u0131l\u0131r hale gelmi\u015ftir.<\/li><li>En son HTML versiyonudur.<\/li><li>\u00c7ok say\u0131da yeni HTML etiketi deste\u011fi ile gelmi\u015ftir.<\/li><li>Halen geli\u015fmesi devam etmektedir.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html5-nedir\"><span id=\"html5-nedir\"><strong>HTML5 Nedir?<\/strong><\/span><\/h2>\n\n\n\n<p>HTML 5.0 en son geli\u015ftirilen HTML versiyonudur. Bir\u00e7ok yeni HTML etiketini destekler. Time, audio, description, embed, fig, shape, footer, article, canvas, navy, output, section, source, track ve video bu etiketler aras\u0131nda \u00f6ne \u00e7\u0131kanlard\u0131r. Web sitenizde olduk\u00e7a komplike uygulamalar\u0131n \u00e7al\u0131\u015fmas\u0131na olanak tan\u0131r. \u0130nternete ba\u011fl\u0131 de\u011filken bile \u00e7al\u0131\u015fabilecek uygulamalar geli\u015ftirmenizi sa\u011flar. HTML 5 yenilikleri 5 ana ba\u015fl\u0131kta toplanabilir:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>E-posta: <\/strong>Form etiketi olarak \u00fcretilmi\u015f olsa da do\u011frulama kontrolleri i\u00e7in de kullan\u0131labilir.<\/li><li><strong>\u015eifre: <\/strong>Bir ba\u015fka form etiketidir ve kullan\u0131c\u0131dan parola almak i\u00e7in kullan\u0131l\u0131r. Parola alan\u0131 kullan\u0131c\u0131 taraf\u0131ndan g\u00f6r\u00fclmez.<\/li><li><strong>Audio etiketi: <\/strong>HTML 5 taraf\u0131ndan eklenmi\u015f bir etikettir. Web sayfalar\u0131na ses eklenmesine ve dinlenmesine olanak tan\u0131r.<\/li><li><strong>Semantik etiketler:<\/strong> Di\u011fer ad\u0131; yap\u0131sal etiketlerdir. Web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 belirler. Belli ba\u015fl\u0131 semantik etiketler aras\u0131nda; figcaption, <header> ve <footer> bulunur.<\/li><li><strong>B\u00f6l\u00fcm etiketi:<\/strong> Web sayfas\u0131nda bulunan bir b\u00f6l\u00fcm\u00fc g\u00f6stermek i\u00e7in kullan\u0131l\u0131r.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-ve-html-5-aras-ndaki-farklar-nelerdir\"><span id=\"html-ve-html-5-arasindaki-farklar-nelerdir\"><strong>HTML ve HTML 5 Aras\u0131ndaki Farklar Nelerdir?<\/strong><\/span><\/h2>\n\n\n\n<p>Zaman i\u00e7inde b\u00fcy\u00fck bir de\u011fi\u015fim d\u00f6n\u00fc\u015f\u00fcm ge\u00e7iren HTML son versiyonunun getirdi\u011fi yeniliklerle dikkat \u00e7eker. HTML ve HTML 5 aras\u0131ndaki en temel farklar \u015f\u00f6yle s\u0131ralanabilir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>HTML en temel bi\u00e7im deste\u011fini sa\u011flarken, HTML 5 en son geli\u015ftirilen HTML deste\u011fini sunar.<\/li><li>HTML video ve ses dosyalar\u0131n\u0131 desteklemezken, HTML 5 her ikisini de destekler.<\/li><li>HTML taray\u0131c\u0131lar\u0131 ge\u00e7ici depolama i\u00e7in cache memory kullan\u0131rken, HTML 5 application cache, SQL database, ve web storage depolama se\u00e7eneklerini kullan\u0131r.<\/li><li>HTML t\u00fcm taray\u0131c\u0131lar taraf\u0131ndan desteklenirken, HTML 5 sadece HTML 5 uyumlu taray\u0131c\u0131lar ile kullan\u0131labilir.<\/li><li>HTML ile vekt\u00f6r grafik kullan\u0131m\u0131 spesifik ara\u00e7lar ile m\u00fcmk\u00fcnken, HTML 5 ile vekt\u00f6r grafik kullan\u0131labilir.<\/li><li>HTML ile taray\u0131c\u0131 aray\u00fcz\u00fc ve JavaScript ayn\u0131 i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131rken, HTML5\u2019de, taray\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn birden \u00e7ok i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015fmas\u0131na izin veren JavaScript Web Worker API\u2019si bulunur.<\/li><li>HTML cookies ve veri depolama kullan\u0131rken, HTML 5 bunun yerine yerel depolama yapar.<\/li><li>HTML ile daire, dikd\u00f6rtgen, \u00e7ember gibi \u015fekiller \u00e7izmek m\u00fcmk\u00fcn de\u011filken, HTM5 ile bu m\u00fcmk\u00fcnd\u00fcr.<\/li><li>HTML ile dok\u00fcman tipi deklerasyonu uzunken, HTML 5 ile bu \u00e7ok k\u0131sad\u0131r.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-in-css-ve-javascript-ile-i-li-kisi-nedir\"><span id=\"htmlin-css-ve-javascript-ile-iliskisi-nedir\"><strong>HTML\u2019in CSS ve Javascript ile \u0130li\u015fkisi Nedir?<\/strong><\/span><\/h2>\n\n\n\n<p>Bir web sitesinin ana iskeletini; HTML, CSS ve Javascript olu\u015fturur. HTML i\u015faretleme dilidir, CSS bi\u00e7imlendirme dili, Javascript ise programlama dilidir.<\/p>\n\n\n\n<p>HTML ile ana hatlar\u0131n\u0131 oturttu\u011funuz web sitesinin \u015feklini CSS ile verirsiniz. Javascript ise dinamik bir web aray\u00fcz\u00fc elde etmenizi sa\u011flar. Butonlar\u0131 y\u00f6netebilmenizi, alana yaz\u0131lan yaz\u0131lar\u0131n otomatik tamamlanmas\u0131n\u0131 Javascript sa\u011flar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-1024x486.png\" alt=\"\" class=\"wp-image-31368\" srcset=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-1024x486.png 1024w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-300x142.png 300w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-768x365.png 768w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-1536x729.png 1536w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5-2048x972.png 2048w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-5.png 2222w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Fig\u00fcr 2. HTML, CSS, Javascript ili\u015fkisi<\/p>\n\n\n\n<p>B\u00fcy\u00fck bir proje \u00fczerinde \u00e7al\u0131\u015f\u0131rken, HTML, CSS ve Javascript dosyalar\u0131n\u0131n ayr\u0131 ayr\u0131 klas\u00f6rlerde tutulmas\u0131nda fayda vard\u0131r.<\/p>\n\n\n\n<p>Bir CSS dosyas\u0131n\u0131 HTML dosyan\u0131za ba\u011flarken, HTML dosyan\u0131zdaki sonraki komut dosyas\u0131n\u0131 head etiketinin i\u00e7ine yazman\u0131z gerekir.<\/p>\n\n\n\n<p>Bir Javascript dosyas\u0131n\u0131 HTML\u2019nize ba\u011flarken, komut dosyas\u0131n\u0131n kayna\u011f\u0131n\u0131 g\u00f6vde etiketinin i\u00e7ine ya da d\u0131\u015f\u0131na eklemeniz yeterlidir. Sonu\u00e7 fark etmez.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"579\" src=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-7-1024x579.png\" alt=\"\" class=\"wp-image-31370\" srcset=\"https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-7-1024x579.png 1024w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-7-300x170.png 300w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-7-768x434.png 768w, https:\/\/www.natro.com\/blog\/wp-content\/uploads\/2021\/07\/image-7.png 1204w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Fig\u00fcr 3. WordPress sitl.css kodu \u00f6rne\u011fi<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-html-nas-l-renilir\"><span id=\"html-nasil-ogrenilir\"><strong>HTML Nas\u0131l \u00d6\u011frenilir?<\/strong><\/span><\/h2>\n\n\n\n<p>HTML kitaplardan \u00f6\u011frenilebilece\u011fi gibi online olarak da \u00f6\u011frenilebilir. Bu alanda yard\u0131mc\u0131 \u00e7ok say\u0131da web sitesi mevcuttur. Ayr\u0131ca \u00fccretli ve \u00fccretsiz online ders veren web siteleri de bulunur. Bu e\u011fitimler en temel ad\u0131m olan etiketlerin nas\u0131l kullan\u0131laca\u011f\u0131ndan, daha karma\u015f\u0131k olan CSS ve Javascript ile nas\u0131l kullan\u0131laca\u011f\u0131na kadar geni\u015f bir kapsama sahiptir.<\/p>\n\n\n\n<p>\u00d6\u011frenme s\u00fcrecinde ilk ad\u0131m; temel etiketleri, ana kurallar\u0131 \u00f6\u011frenmek ve basit \u00f6rnekleri uygulamakt\u0131r. Kullan\u0131lan etiketlerin s\u0131rayla kapat\u0131lmas\u0131, a\u00e7\u0131lan her etiketin kapat\u0131lmas\u0131 gibi temel unsurlar ilk \u00f6\u011frenilecek kurallar aras\u0131nda yer al\u0131r.<\/p>\n\n\n\n<p>S\u0131k kullan\u0131lan etiketler \u00f6\u011frenilip yeterince \u00f6rnek yap\u0131ld\u0131ktan sonra daha fazla etiket \u00f6\u011frenilir ve daha sofistike web tasar\u0131mlar\u0131 \u00fczerinde \u00e7al\u0131\u015f\u0131labilir. HTML \u00f6\u011frenme s\u00fcreci ad\u0131m ad\u0131m ilerleme gerektirir. Bu s\u00fcre\u00e7te haz\u0131r HTML edit\u00f6rleri de yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML s\u0131k\u00e7a duydu\u011fumuz bir \u0130nternet terimidir. Peki \u201cHTML nedir?\u201d HTML \u0130ngilizce \u201chypertext markup language\u201d kelimelerinin k\u0131saltmas\u0131d\u0131r. \u0130nternet \u00fczerinden…\n","protected":false},"author":7,"featured_media":31371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[652],"tags":[],"class_list":{"0":"post-31367","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-nedir"},"_links":{"self":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/31367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/comments?post=31367"}],"version-history":[{"count":0,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/posts\/31367\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media\/31371"}],"wp:attachment":[{"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/media?parent=31367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/categories?post=31367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.natro.com\/blog\/wp-json\/wp\/v2\/tags?post=31367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}