{"id":6847,"date":"2023-02-06T22:03:41","date_gmt":"2023-02-06T19:03:41","guid":{"rendered":"https:\/\/www.hostixo.com\/blog\/?p=6847"},"modified":"2023-02-06T22:03:41","modified_gmt":"2023-02-06T19:03:41","slug":"html-ve-css-nedir-kullanim-alanlari","status":"publish","type":"post","link":"https:\/\/www.hostixo.com\/blog\/html-ve-css-nedir-kullanim-alanlari\/","title":{"rendered":"HTML ve CSS Nedir? Kullan\u0131m Alanlar\u0131 ve Daha Fazlas\u0131"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0130\u00e7indekiler \u2714<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u0130\u00e7indekiler Tablosunu A\u00e7\/Kapat\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.hostixo.com\/blog\/html-ve-css-nedir-kullanim-alanlari\/#CSS_Nedir_Ne_Ise_Yarar\" >CSS Nedir? Ne \u0130\u015fe Yarar?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.hostixo.com\/blog\/html-ve-css-nedir-kullanim-alanlari\/#HTML_Nedir\" >HTML Nedir?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.hostixo.com\/blog\/html-ve-css-nedir-kullanim-alanlari\/#JavaScript_Nedir\" >JavaScript Nedir?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.hostixo.com\/blog\/html-ve-css-nedir-kullanim-alanlari\/#CSS_ile_Neler_Yapilabilir\" >CSS ile Neler Yap\u0131labilir?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.hostixo.com\/blog\/html-ve-css-nedir-kullanim-alanlari\/#CSS_Ornekleri\" >CSS \u00d6rnekleri<\/a><\/li><\/ul><\/nav><\/div>\n<p>CSS, asl\u0131nda web tasar\u0131mda olmazsa olmaz bir dil. <strong>CSS nedir<\/strong>, a\u00e7\u0131kl\u0131\u011fa kavu\u015fturdu\u011fumuzda bunu daha iyi anlayacaks\u0131n\u0131z.<\/p>\n<p>\u0130nternette gezinirken birbirinden \u015f\u0131k <a href=\"https:\/\/www.hostixo.com\/hosting\/hazir-site\/\" data-internallinksmanager029f6b8e52c=\"11\" title=\"haz\u0131r site\">site<\/a>lere denk gelmi\u015f olabilirsiniz. Bu sitelerin nas\u0131l ve hangi dillerle tasarland\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Merak etmemi\u015f olsan\u0131z bile bunu \u00f6\u011frenmek size bir\u00e7ok noktada fayda sa\u011flayacakt\u0131r. \u00d6zellikle <a href=\"https:\/\/www.hostixo.com\/blog\/en-iyi-javascript-kutuphaneleri\/\">web geli\u015ftiricisi<\/a> olmak isteyenler i\u00e7in CSS konusu normalden \u00e7ok daha \u00f6nemli.<\/p>\n<p>Asl\u0131nda CSS, tasar\u0131m\u0131 detayl\u0131 hale getiren ve g\u00fczelle\u015ftiren bir dil olarak tan\u0131mlanabilir. Bu konuyu detayl\u0131 bir \u015fekilde \u00f6\u011frenmek i\u00e7in sizi i\u00e7eri\u011fimizi okumaya davet ediyoruz. Ayr\u0131ca, yaz\u0131m\u0131zda baz\u0131 \u00f6rnek kodlar bulabilir ve bu kodlar\u0131n anlamlar\u0131n\u0131 da \u00f6\u011frenebilirsiniz. Burada laf\u0131 daha fazla uzatmayal\u0131m ve CSS dilinin detaylar\u0131n\u0131 beraber \u00f6\u011frenelim.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CSS_Nedir_Ne_Ise_Yarar\"><\/span><strong>CSS Nedir? Ne \u0130\u015fe Yarar?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6849 lazyload\" data-src=\"https:\/\/www.hostixo.com\/blog\/wp-content\/uploads\/2023\/02\/hostixo-blog-css-nedir-css-ornekleri-css-kodlari.jpg\" alt=\"hostixo-blog-css-nedir-css-ornekleri-css-kodlari\" width=\"640\" height=\"352\" title=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 640px; --smush-placeholder-aspect-ratio: 640\/352;\"><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6849\" src=\"https:\/\/www.hostixo.com\/blog\/wp-content\/uploads\/2023\/02\/hostixo-blog-css-nedir-css-ornekleri-css-kodlari.jpg\" alt=\"hostixo-blog-css-nedir-css-ornekleri-css-kodlari\" width=\"640\" height=\"352\" title=\"\"><\/noscript><\/p>\n<p>A\u00e7\u0131l\u0131m\u0131 Cascading Steel Sheets olan CSS, temel olarak bir bi\u00e7imlendirme dilidir. Bir site tasarlarken baz\u0131 diller kullan\u0131l\u0131r. HTML dili, sitelerin kemik yani temel yap\u0131s\u0131n\u0131 olu\u015fturmaya yarar. Ancak, HTML dilini tek ba\u015f\u0131na kullanmak yeterli de\u011fildir.<\/p>\n<p>CSS, HTML ile olu\u015fturulan bile\u015fenlerin konumunu, rengini, boyutunu ve daha bir\u00e7ok \u015feyini de\u011fi\u015ftirmenize olanak tan\u0131r. Bu konuyu biraz detayland\u0131rmak istiyoruz. HTML dilini kullanarak bir siteye ba\u015fl\u0131klar, metinler ve hatta butonlar ekleyebilirsiniz. CSS, bu eklediklerinizin rengini, boyutunu ve daha bir\u00e7ok \u015feyini d\u00fczenlemenizi sa\u011flar.<\/p>\n<p>CSS\u2019i asl\u0131nda tasar\u0131m\u0131n temeli olarak d\u00fc\u015f\u00fcnebilirsiniz. Bu dil sayesinde, site tasar\u0131m\u0131 \u00e7ok daha \u015f\u0131k ve detayl\u0131 bir hale getirilebilir. Bu k\u0131s\u0131mda son olarak CSS dilinin temel olarak bir programlama dili olmad\u0131\u011f\u0131n\u0131 belirtmemizde fayda var.<\/p>\n<h3><strong>StyleCSS Nedir?<\/strong><\/h3>\n<p><strong>CSS nedir<\/strong> gibi konular\u0131 ge\u00e7tikten sonra merak edilen farkl\u0131 bir konuya de\u011finmek istiyoruz. StyleCSS, asl\u0131nda CSS kodlar\u0131n\u0131n yaz\u0131ld\u0131\u011f\u0131 dosyad\u0131r. Style yani stil dosyas\u0131 olarak bilinen bu dosyan\u0131n i\u00e7erisinde CSS\u2019in kodlar\u0131 bulunur. Bu dosyaya yazd\u0131\u011f\u0131n\u0131z kodlar sayesinde bir sitenin tasar\u0131m\u0131n\u0131 bir\u00e7ok farkl\u0131 \u015fekilde d\u00fczenleyebilirsiniz. Bir site tasarlarken stil dosyas\u0131 olu\u015fturabilir ve i\u00e7erisine CSS kodlar\u0131n\u0131 yazabilirsiniz. Daha sonra, bu tek dosya sayesinde sitenin tasar\u0131m\u0131n\u0131 ba\u015ftan a\u015fa\u011f\u0131ya \u00f6zelle\u015ftirebilirsiniz.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"HTML_Nedir\"><\/span><strong>HTML Nedir?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6848 lazyload\" data-src=\"https:\/\/www.hostixo.com\/blog\/wp-content\/uploads\/2023\/02\/hostixo-blog-css-nedir-html-nedir.jpg\" alt=\"hostixo-blog-css-nedir-html-nedir\" width=\"640\" height=\"640\" title=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 640px; --smush-placeholder-aspect-ratio: 640\/640;\"><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6848\" src=\"https:\/\/www.hostixo.com\/blog\/wp-content\/uploads\/2023\/02\/hostixo-blog-css-nedir-html-nedir.jpg\" alt=\"hostixo-blog-css-nedir-html-nedir\" width=\"640\" height=\"640\" title=\"\"><\/noscript><\/p>\n<p>\u0130\u00e7eri\u011fimizde sizlere HTML ve CSS nedir konusunu birlikte a\u00e7\u0131klamam\u0131z \u015fart. \u00c7\u00fcnk\u00fc bu iki dilin birbirini tamamlad\u0131\u011f\u0131n\u0131 s\u00f6yleyebiliriz. HTML a\u00e7\u0131l\u0131m\u0131 Hyper Text Markup Language\u2019dir.\u00a0 Bir programlama dili olmayan HTML, basit bir bi\u00e7imlendirme dili olarak tan\u0131mlanabilir. HTML, web sayfalar\u0131nda paragraflar, tablolar, ba\u015fl\u0131klar, ba\u011flant\u0131lar ve daha bir\u00e7ok \u015fey olu\u015fturmaya olanak tan\u0131r.<\/p>\n<p>Bu dili sitenin kemik yap\u0131s\u0131 olarak d\u00fc\u015f\u00fcnebilirsiniz. Bir site sayfas\u0131n\u0131n temeli (paragraflar vb.) bu dil kullan\u0131larak olu\u015fturulur. Daha sonra, <a href=\"https:\/\/www.w3schools.com\/html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> dilinin \u00fczerine CSS kullan\u0131l\u0131r ve tasar\u0131m \u00e7ok daha detayl\u0131 ve \u015f\u0131k bir hale getirilir.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"JavaScript_Nedir\"><\/span><strong>JavaScript Nedir?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6850 lazyload\" data-src=\"https:\/\/www.hostixo.com\/blog\/wp-content\/uploads\/2023\/02\/hostixo-blog-html-ve-css-nedir-javascript-nedir-js-nedir.jpg\" alt=\"hostixo-blog-html-ve-css-nedir-javascript-nedir-js-nedir\" width=\"640\" height=\"427\" title=\"\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 640px; --smush-placeholder-aspect-ratio: 640\/427;\"><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6850\" src=\"https:\/\/www.hostixo.com\/blog\/wp-content\/uploads\/2023\/02\/hostixo-blog-html-ve-css-nedir-javascript-nedir-js-nedir.jpg\" alt=\"hostixo-blog-html-ve-css-nedir-javascript-nedir-js-nedir\" width=\"640\" height=\"427\" title=\"\"><\/noscript><\/p>\n<p>\u0130\u00e7eri\u011fimizde bahsetmek istedi\u011fimiz bir di\u011fer dil, JavaScript dili. \u00c7\u00fcnk\u00fc bu dil, genel olarak HTML ve CSS diliyle birlikte kullan\u0131l\u0131yor. Web tasar\u0131mda genellikle HTML, CSS ve JavaScript dilleri bir arada kullan\u0131l\u0131r. JavaScript, dinamik web sayfalar\u0131 olu\u015fturmak i\u00e7in haz\u0131rlanm\u0131\u015f bir dildir. Bu dil sayesinde web sayfalar\u0131 kullan\u0131c\u0131larla etkile\u015fimli bir hale getirilebilir.<\/p>\n<p>\u00d6rne\u011fin, JavaScript kullan\u0131larak web sayfalar\u0131nda a\u00e7\u0131l\u0131r men\u00fcler ve daha bir\u00e7ok \u015fey olu\u015fturulabilir. HTML, bir web sayfas\u0131n\u0131n temel yap\u0131s\u0131n\u0131 olu\u015fturur. CSS, bu temel yap\u0131n\u0131n tasar\u0131m\u0131n\u0131 geli\u015ftirir daha detayl\u0131 ve \u015f\u0131k bir hale getirir. JavaScript ise, web sayfas\u0131n\u0131 canland\u0131r\u0131r ve sayfadaki \u00f6\u011felerle etkile\u015fime girmemizi sa\u011flar. JavaScript dili olmasayd\u0131, web sayfalar\u0131ndaki her \u00f6\u011fe hareketsiz ve etkile\u015fimsiz kalabilirdi. Ancak bu dil sayesinde, sayfalar \u00e7ok daha dinamik hale getirilebiliyor.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CSS_ile_Neler_Yapilabilir\"><\/span><strong>CSS ile Neler Yap\u0131labilir?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS dili \u00f6zellikle web tasar\u0131m i\u00e7in kullan\u0131l\u0131r. <strong>CSS nedir<\/strong> k\u0131sm\u0131nda bu dille neler yap\u0131labilece\u011fini az \u00e7ok anlam\u0131\u015fs\u0131n\u0131zd\u0131r. Bu dili kullanarak web sayfalar\u0131ndaki \u00f6\u011feleri daha renkli, canl\u0131 ve d\u00fczg\u00fcn bir hale getirebilirsiniz.<\/p>\n<p>\u00d6rne\u011fin, CSS kodlama ile bir web sayfas\u0131nda yaz\u0131 renklendirme, yaz\u0131 boyutu de\u011fi\u015ftirme, ba\u015fl\u0131k stilleri ve farkl\u0131 ge\u00e7i\u015f efektleri gibi \u015feyler yapabilirsiniz. B\u00f6ylece, web sayfas\u0131n\u0131n tasar\u0131m\u0131n\u0131 daha canl\u0131 ve farkl\u0131 bir hale getirebilirsiniz. CSS asl\u0131nda bir tasar\u0131m i\u00e7in boya kutusu gibidir. Basit\u00e7e a\u00e7\u0131klamak gerekirse, HTML tasar\u0131m\u0131 \u00e7izer, CSS ise boyar ve geli\u015ftirir.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CSS_Ornekleri\"><\/span><strong>CSS \u00d6rnekleri<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Yaz\u0131m\u0131zda son olarak \u00f6rnek CSS kodlar\u0131 payla\u015fmak istiyoruz. Bu sayede, CSS\u2019in yap\u0131s\u0131n\u0131 daha iyi anlayabilirsiniz.<\/p>\n<h3><strong>CSS Kodlar\u0131 ve Anlamlar\u0131<\/strong><\/h3>\n<p><code>background-color: #ffffff;<\/code><\/p>\n<ul>\n<li>Yukar\u0131daki kod, elementin arka plan\u0131n\u0131 beyaz olarak ayarlar.<\/li>\n<\/ul>\n<p><code>text-align: center;<\/code><\/p>\n<ul>\n<li>Yukar\u0131daki kod, elementin i\u00e7eri\u011finin ekran\u0131n ortas\u0131nda g\u00f6r\u00fcnt\u00fclenmesini sa\u011flar.<\/li>\n<\/ul>\n<p><code>font-size: 16px;<\/code><\/p>\n<ul>\n<li>Yukar\u0131daki kod, elementin font boyutunu 16px olarak de\u011fi\u015ftirir.<\/li>\n<\/ul>\n<p><code>width: 100%;<\/code><\/p>\n<ul>\n<li>Yukar\u0131daki kod, elementin geni\u015fli\u011fini ekran\u0131n tam geni\u015fli\u011fine e\u015fit olarak ayarlar.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>CSS, asl\u0131nda web tasar\u0131mda olmazsa olmaz bir dil. CSS nedir, a\u00e7\u0131kl\u0131\u011fa kavu\u015fturdu\u011fumuzda bunu daha iyi anlayacaks\u0131n\u0131z. \u0130nternette gezinirken birbirinden \u015f\u0131k sitelere denk gelmi\u015f olabilirsiniz. Bu sitelerin nas\u0131l ve hangi dillerle tasarland\u0131\u011f\u0131n\u0131 hi\u00e7 merak ettiniz mi? Merak etmemi\u015f olsan\u0131z bile bunu \u00f6\u011frenmek size bir\u00e7ok noktada fayda sa\u011flayacakt\u0131r. \u00d6zellikle web geli\u015ftiricisi olmak isteyenler i\u00e7in CSS konusu normalden &hellip;<\/p>\n","protected":false},"author":1,"featured_media":6849,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mbp_gutenberg_autopost":false,"footnotes":""},"categories":[640,296],"tags":[],"class_list":["post-6847","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bilgisayar","category-internet"],"_links":{"self":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/posts\/6847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/comments?post=6847"}],"version-history":[{"count":0,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/posts\/6847\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/media\/6849"}],"wp:attachment":[{"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/media?parent=6847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/categories?post=6847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostixo.com\/blog\/wp-json\/wp\/v2\/tags?post=6847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}