{"id":4586,"date":"2024-12-10T14:33:08","date_gmt":"2024-12-10T11:33:08","guid":{"rendered":"https:\/\/www.daio.web.tr\/?p=4586"},"modified":"2024-12-05T14:37:51","modified_gmt":"2024-12-05T11:37:51","slug":"html-css-javascript-web-tasarimin-temel-taslari","status":"publish","type":"post","link":"https:\/\/www.daio.web.tr\/rsm\/blog\/html-css-javascript-web-tasarimin-temel-taslari.html","title":{"rendered":"HTML, CSS, JavaScript: Web Tasar\u0131m\u0131n Temel Ta\u015flar\u0131"},"content":{"rendered":"<p>HTML (<strong>HyperText Markup Language<\/strong>), web sayfas\u0131n\u0131n iskeletini olu\u015fturur. Web sitesindeki metinler, g\u00f6rseller, ba\u015fl\u0131klar, ba\u011flant\u0131lar gibi her bir i\u00e7erik, HTML ile tan\u0131mlan\u0131r.<\/p>\n<p><strong>Neden \u00d6nemli?<\/strong><br \/>\nHTML, i\u00e7eriklerin taray\u0131c\u0131 taraf\u0131ndan anla\u015f\u0131labilir hale gelmesini sa\u011flar. Bu, bir evin temel yap\u0131s\u0131n\u0131 in\u015fa etmek gibidir. E\u011fer HTML d\u00fczg\u00fcn bir \u015fekilde yap\u0131land\u0131r\u0131lmazsa, di\u011fer teknolojilerle \u00e7al\u0131\u015fmak zorla\u015f\u0131r.<\/p>\n<p><strong>\u00d6rnek Kod:<\/strong><\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Kodu kopyala<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Web Tasar\u0131m\u0131n Temel Ta\u015flar\u0131<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Merhaba, D\u00fcnya!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Bu bir paragraf.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/www.orneksite.com\"<\/span>&gt;<\/span>Bu bir ba\u011flant\u0131.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<hr \/>\n<h3><strong>CSS: G\u00f6rsel \u015e\u0131kl\u0131k<\/strong><\/h3>\n<p>CSS (<strong>Cascading Style Sheets<\/strong>), HTML ile olu\u015fturulan iskeletin g\u00f6rselle\u015ftirilmesini sa\u011flar. Yaz\u0131 tipleri, renkler, d\u00fczenler ve di\u011fer stil unsurlar\u0131 CSS ile tan\u0131mlan\u0131r.<\/p>\n<p><strong>Neden \u00d6nemli?<\/strong><br \/>\nKullan\u0131c\u0131 deneyimi (UX) ve g\u00f6rsellik, bir web sitesinin ba\u015far\u0131s\u0131nda b\u00fcy\u00fck rol oynar. CSS sayesinde web sitenizi ziyaret eden kullan\u0131c\u0131lar i\u00e7in g\u00f6rsel olarak \u00e7ekici bir ortam yaratabilirsiniz.<\/p>\n<p><strong>\u00d6rnek Kod:<\/strong><\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">css<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Kodu kopyala<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-css\"><span class=\"hljs-selector-tag\">body<\/span> {<br \/>\n    <span class=\"hljs-attribute\">font-family<\/span>: Arial, sans-serif;<br \/>\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f0f0f0<\/span>;<br \/>\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333<\/span>;<br \/>\n}<\/p>\n<p><span class=\"hljs-selector-tag\">h1<\/span> {<br \/>\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#4CAF50<\/span>;<br \/>\n    <span class=\"hljs-attribute\">text-align<\/span>: center;<br \/>\n}<\/p>\n<p><span class=\"hljs-selector-tag\">a<\/span> {<br \/>\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#1E90FF<\/span>;<br \/>\n    <span class=\"hljs-attribute\">text-decoration<\/span>: none;<br \/>\n}<br \/>\n<span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {<br \/>\n    <span class=\"hljs-attribute\">text-decoration<\/span>: underline;<br \/>\n}<br \/>\n<\/code><\/div>\n<\/div>\n<hr \/>\n<h3><strong>JavaScript: Dinamizm ve Etkile\u015fim<\/strong><\/h3>\n<p>JavaScript, bir web sitesine dinamizm ve etkile\u015fim eklemek i\u00e7in kullan\u0131l\u0131r. Form do\u011frulama, animasyonlar, d\u00fc\u011fme t\u0131klama efektleri gibi i\u015flevsellikler JavaScript ile sa\u011flan\u0131r.<\/p>\n<p><strong>Neden \u00d6nemli?<\/strong><br \/>\nKullan\u0131c\u0131lar\u0131n site ile daha fazla etkile\u015fimde bulunmas\u0131n\u0131 sa\u011flar. Statik bir sayfa yerine, kullan\u0131c\u0131 ihtiya\u00e7lar\u0131na g\u00f6re \u015fekillenen dinamik bir deneyim sunar.<\/p>\n<p><strong>\u00d6rnek Kod:<\/strong><\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">javascript<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Kodu kopyala<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Butona t\u0131klan\u0131nca bir uyar\u0131 mesaj\u0131 g\u00f6steren JavaScript kodu<\/span><br \/>\n<span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"myButton\"<\/span>).<span class=\"hljs-title function_\">addEventListener<\/span>(<span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-keyword\">function<\/span>() {<br \/>\n    <span class=\"hljs-title function_\">alert<\/span>(<span class=\"hljs-string\">\"Butona t\u0131klad\u0131n\u0131z!\"<\/span>);<br \/>\n});<br \/>\n<\/code><\/div>\n<\/div>\n<p>HTML ile JavaScript entegrasyonu:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Kodu kopyala<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"myButton\"<\/span>&gt;<\/span>T\u0131kla!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"script.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<hr \/>\n<h3><strong>HTML, CSS ve JavaScript Nas\u0131l Birlikte \u00c7al\u0131\u015f\u0131r?<\/strong><\/h3>\n<p>Bu \u00fc\u00e7 teknoloji, bir web sitesinin farkl\u0131 y\u00f6nlerini kontrol eder ve birlikte kusursuz bir deneyim sunar:<\/p>\n<ol>\n<li><strong>HTML:<\/strong> Yap\u0131y\u0131 olu\u015fturur.<\/li>\n<li><strong>CSS:<\/strong> Yap\u0131y\u0131 g\u00fczelle\u015ftirir ve d\u00fczenler.<\/li>\n<li><strong>JavaScript:<\/strong> Yap\u0131ya hareket ve i\u015flevsellik kazand\u0131r\u0131r.<\/li>\n<\/ol>\n<p>Birlikte \u00e7al\u0131\u015farak, ziyaret\u00e7ilerinizin ilgisini \u00e7eken, kullan\u0131m\u0131 kolay ve modern bir web sitesi olu\u015fturabilirsiniz.<\/p>\n<hr \/>\n<h3><strong>Ba\u015far\u0131l\u0131 Web Tasar\u0131m\u0131 \u0130\u00e7in \u0130pu\u00e7lar\u0131<\/strong><\/h3>\n<ol>\n<li><strong>Mobil Uyumluluk:<\/strong> T\u00fcm cihazlarda sorunsuz \u00e7al\u0131\u015fan bir tasar\u0131m yapmaya \u00f6zen g\u00f6sterin.<\/li>\n<li><strong>H\u0131z Optimizasyonu:<\/strong> JavaScript ve CSS kodlar\u0131n\u0131 optimize ederek sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131r\u0131n.<\/li>\n<li><strong>Eri\u015filebilirlik:<\/strong> HTML yap\u0131s\u0131n\u0131 do\u011fru kullanarak sitenizin eri\u015filebilir olmas\u0131n\u0131 sa\u011flay\u0131n. \u00d6rne\u011fin, ekran okuyucu kullan\u0131c\u0131lar\u0131 i\u00e7in a\u00e7\u0131klay\u0131c\u0131 etiketler ekleyin.<\/li>\n<li><strong>S\u00fcrekli \u00d6\u011frenme:<\/strong> Web teknolojileri h\u0131zla geli\u015fiyor. HTML, CSS ve JavaScript\u2019in en son s\u00fcr\u00fcmlerine h\u00e2kim olmak i\u00e7in kendinizi g\u00fcncel tutun.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>HTML (HyperText Markup Language), web sayfas\u0131n\u0131n iskeletini olu\u015fturur. Web sitesindeki metinler, g\u00f6rseller, ba\u015fl\u0131klar, ba\u011flant\u0131lar gibi her bir i\u00e7erik, HTML ile tan\u0131mlan\u0131r. Neden \u00d6nemli? HTML, i\u00e7eriklerin taray\u0131c\u0131 taraf\u0131ndan anla\u015f\u0131labilir hale gelmesini sa\u011flar. Bu, bir evin temel yap\u0131s\u0131n\u0131 in\u015fa etmek gibidir. E\u011fer HTML d\u00fczg\u00fcn bir \u015fekilde yap\u0131land\u0131r\u0131lmazsa, di\u011fer teknolojilerle \u00e7al\u0131\u015fmak zorla\u015f\u0131r. \u00d6rnek Kod: html Kodu kopyala &lt;!DOCTYPE [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":4587,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,35],"tags":[],"class_list":["post-4586","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-web-tasarim"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/posts\/4586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/comments?post=4586"}],"version-history":[{"count":1,"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/posts\/4586\/revisions"}],"predecessor-version":[{"id":4588,"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/posts\/4586\/revisions\/4588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/media\/4587"}],"wp:attachment":[{"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/media?parent=4586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/categories?post=4586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.daio.web.tr\/rsm\/wp-json\/wp\/v2\/tags?post=4586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}