{"id":30934,"date":"2024-10-24T17:50:20","date_gmt":"2024-10-24T14:50:20","guid":{"rendered":"https:\/\/goit.global\/?post_type=articles&#038;p=30934"},"modified":"2024-12-11T11:29:19","modified_gmt":"2024-12-11T09:29:19","slug":"html-ve-css-nedir-kimler-neden-ihtiyac-duyar","status":"publish","type":"articles","link":"https:\/\/dev.goit.global\/tr\/articles\/html-ve-css-nedir-kimler-neden-ihtiyac-duyar\/","title":{"rendered":"HTML ve CSS: Nedir, Kimler, Neden \u0130htiya\u00e7 Duyar"},"content":{"rendered":"<p>Bloglar ve \u00e7evrimi\u00e7i ma\u011fazalardan \u2013 sosyal a\u011flar ve bilgi portallar\u0131na kadar \u00e7evrimi\u00e7i g\u00f6rd\u00fc\u011f\u00fcn\u00fcz hemen hemen her \u015fey \u2013 HTML ve CSS kullan\u0131larak olu\u015fturulur. HTML, sayfalar\u0131n yap\u0131s\u0131n\u0131 ve i\u00e7eri\u011fini tan\u0131mlarken, CSS renk, stil ve tasar\u0131mlar\u0131ndan sorumludur. HTML ve CSS&#8217;nin \u00e7ok \u00e7e\u015fitli BT uzmanlar\u0131 taraf\u0131ndan bilinmesi gerekir: Frontend geli\u015ftiricileri, Fullstack programc\u0131lar\u0131, Yaz\u0131l\u0131m test uzmanlar\u0131, UI\/UX tasar\u0131mc\u0131lar\u0131, vb. Bug\u00fcn HTML ve CSS&#8217;in ne oldu\u011funa ve bunlar\u0131 \u00f6\u011frenmenin BT kariyerinize ba\u015flamak i\u00e7in neden harika bir fikir oldu\u011funa bakaca\u011f\u0131z. Hadi ba\u015flayal\u0131m!<\/p>\n<h2>HTML nedir ve ne i\u015fe yarar?<\/h2>\n<p>HTML \u2013 bir etiketler sistemi arac\u0131l\u0131\u011f\u0131yla \u00e7al\u0131\u015fan ve web sayfalar\u0131n\u0131n \u00f6\u011felerini yap\u0131land\u0131rmaya ve d\u00fczenlemeye yard\u0131mc\u0131 olan belgeler i\u00e7in bir hiper metin bi\u00e7imlendirme dilidir. Bir web sitesini bir ev olarak hayal ederseniz, HTML odalar\u0131n d\u00fczenini ve yerle\u015fimini tan\u0131mlar, ancak tasar\u0131mla ilgilenmez. HTML taray\u0131c\u0131ya ba\u015fl\u0131\u011f\u0131n, metnin, resmin, ba\u011flant\u0131n\u0131n vb. nerede olmas\u0131 gerekti\u011fini s\u00f6yler. Bu, t\u00fcm web sitelerinin \u00fczerine in\u015fa edildi\u011fi \u00e7er\u00e7evedir.<\/p>\n<p>HTML, taray\u0131c\u0131n\u0131n sayfalar\u0131 do\u011fru \u015fekilde g\u00f6r\u00fcnt\u00fclemesi i\u00e7in gereklidir. Bu olmadan, sadece g\u00f6rsellerle kar\u0131\u015f\u0131k bir s\u00fcr\u00fc d\u00fczensiz metin g\u00f6r\u00fcrs\u00fcn\u00fcz. Web sitelerinin anla\u015f\u0131labilir ve kullan\u0131c\u0131 dostu olmas\u0131na yard\u0131mc\u0131 olan HTML&#8217;dir. Bu nedenle, HTML bilgisi \u2013 front-end veya Fullstack geli\u015ftirmeye ge\u00e7mek isteyen herkes i\u00e7in temeldir. HTML&#8217;in ne kadar \u00f6nemli oldu\u011funu anl\u0131yor musunuz?<\/p>\n<h3>HTML dili ne i\u015fe yarar?<\/h3>\n<p>Art\u0131k HTML&#8217;nin ne oldu\u011funu ve web sitesi geli\u015ftirmede nas\u0131l bir rol oynad\u0131\u011f\u0131n\u0131 bildi\u011finize g\u00f6re, temel g\u00f6revlerine bir g\u00f6z atal\u0131m. HTML yaln\u0131zca bir sayfan\u0131n \u201ciskeletini\u201d olu\u015fturmakla kalmaz, size bu iskeleti olu\u015fturman\u0131z i\u00e7in gerekli ara\u00e7lar\u0131 da sa\u011flar:<\/p>\n<ul>\n<li aria-level=\"1\">Yap\u0131land\u0131rma ve HTML i\u015faretlemesi. Ba\u015fl\u0131klar\u0131n, listelerin, paragraflar\u0131n, tablolar\u0131n ve resimlerin nas\u0131l d\u00fczenlenece\u011fini tan\u0131mlamak i\u00e7in. Bu bir odadaki mobilyalar\u0131n yerini de\u011fi\u015ftirmek gibidir \u2013 neyin nereye yerle\u015ftirilece\u011fine siz karar verirsiniz.<\/li>\n<li aria-level=\"1\">K\u00f6pr\u00fc ekleme. Web sayfalar\u0131n\u0131n temel \u00f6zelliklerinden biri \u2013 k\u00f6pr\u00fcler arac\u0131l\u0131\u011f\u0131yla birbirine ba\u011flanabilirliktir. Makalelerimizde s\u0131k s\u0131k di\u011fer materyallere ba\u011flant\u0131lar ekliyoruz. \u00c7ok kullan\u0131\u015fl\u0131.<\/li>\n<li aria-level=\"1\">Multimedya g\u00f6mme. Bir sayfaya video veya ses dosyas\u0131 eklemek mi istiyorsunuz? HTML ile bu \u00e7ok kolay. Multimedya \u00f6\u011felerini do\u011frudan i\u00e7eri\u011finize entegre etmenize olanak tan\u0131yarak web sitelerinizi daha etkile\u015fimli ve ilgi \u00e7ekici hale getirir.<\/li>\n<li aria-level=\"1\">Form olu\u015fturma. HTML, bilgi toplamak i\u00e7in \u00e7e\u015fitli formlar kullanman\u0131za olanak tan\u0131r (geri bildirim, kay\u0131t, site aramas\u0131, vb.).<\/li>\n<\/ul>\n<p>HTML metni bi\u00e7imlendirmek i\u00e7in temel i\u015flevlere sahiptir, ancak hatalar\u0131 \u00f6nlemek ve kaynak kodunu kar\u0131\u015ft\u0131rmamak i\u00e7in genellikle bu ama\u00e7la kullan\u0131lmaz. Bu nedenle HTML \u015fablonunun g\u00fczelli\u011finden ve etkile\u015fiminden JavaScript ve CSS sorumludur. Bunlar birlikte Frontend geli\u015ftirmenin \u00fc\u00e7 aya\u011f\u0131 olarak adland\u0131r\u0131labilir.<\/p>\n<h3>HTML etiketleri nelerdir<\/h3>\n<p>HTML, web sayfalar\u0131 olu\u015fturmak i\u00e7in tu\u011flalara benzetilebilecek etiketler kullanarak \u00e7al\u0131\u015f\u0131r. Her etiketin kendine \u00f6zg\u00fc bir i\u015flevi vard\u0131r. Bir etiketin \u2013 ayr\u0131 bir komut oldu\u011fu bir taray\u0131c\u0131 talimat\u0131 yazd\u0131\u011f\u0131n\u0131z\u0131 d\u00fc\u015f\u00fcn\u00fcn.<\/p>\n<p>Etiketler genellikle \u00e7iftler halinde gelir: bir HTML \u00f6\u011fesini a\u00e7an ve kapatan bir etiket vard\u0131r (\u00f6rne\u011fin, &lt;p&gt; ve &lt;\/p&gt;). Bir d\u00fc\u015f\u00fcnceyi ba\u015flatmak ve bitirmek gibi. Bunlar\u0131n aras\u0131nda i\u00e7erik yer al\u0131r &#8211; metin, resimler, ba\u011flant\u0131lar vb.<\/p>\n<p>\u015eimdi birka\u00e7 temel HTML etiketine bakal\u0131m:<\/p>\n<ul>\n<li aria-level=\"1\">&lt;h1&gt;&#8217;dan &lt;h6&gt;&#8217;e kadar olan etiketler ba\u015fl\u0131klar i\u00e7in kullan\u0131l\u0131r (en \u00f6nemliden en az \u00f6nemliye).<\/li>\n<li aria-level=\"1\">Paragraflar i\u00e7in &lt;p&gt; etiketi gereklidir.<\/li>\n<li aria-level=\"1\">&lt;a&gt; HTML etiketi bir k\u00f6pr\u00fcy\u00fc tan\u0131mlar.<\/li>\n<li aria-level=\"1\">&lt;img&gt; etiketi resim, &lt;table&gt; etiketi ise tablo ekler.<\/li>\n<\/ul>\n<p>T\u00fcm etiketlerin kapat\u0131lmas\u0131 gerekmez (&lt;br&gt;, &lt;hr&gt;, &lt;input&gt;, &lt;meta&gt;, vb.). Etiketlerin i\u00e7inde HTML nitelikleri de belirtebilirsiniz. Bu, olas\u0131l\u0131klar\u0131 geni\u015fletmek i\u00e7in ek ayarlar gibi bir \u015feydir. &lt;a href=\u201dhttps:\/\/www.google.com\u201d&gt;Google&lt;\/a&gt; HTML kod par\u00e7as\u0131n\u0131 analiz edelim. \u015e\u00f6yle \u00e7al\u0131\u015f\u0131r:<\/p>\n<ul>\n<li aria-level=\"1\">&lt;a&gt; \u2014 k\u00f6pr\u00fc olu\u015fturmak i\u00e7in a\u00e7\u0131l\u0131\u015f etiketi.<\/li>\n<li aria-level=\"1\">href=\u201chttps:\/\/www.google.com\u201d \u2014 y\u00f6nlendirdi\u011fi adresi i\u00e7eren bir nitelik (bizim durumumuzda bu Google ana sayfas\u0131d\u0131r).<\/li>\n<li aria-level=\"1\">Google \u2014 kullan\u0131c\u0131lar taraf\u0131ndan g\u00f6r\u00fclebilecek metin.<\/li>\n<li aria-level=\"1\">&lt;\/a&gt; \u2014 ba\u011flant\u0131n\u0131n sonunu i\u015faretleyen bir kapan\u0131\u015f etiketidir.<\/li>\n<\/ul>\n<p>Site ziyaret\u00e7ileri \u201cGoogle\u201d kelimesini g\u00f6recek ve belirtilen URL&#8217;ye gitmek i\u00e7in \u00fczerine t\u0131klayabilecektir. Umar\u0131m art\u0131k HTML&#8217;nin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 daha iyi anlam\u0131\u015fs\u0131n\u0131zd\u0131r. \u00dccretsiz \u00e7evrimi\u00e7i maratonumuzda bu konuda daha fazla bilgi edinebilirsiniz.<\/p>\n<h3>HTML&#8217;in art\u0131lar\u0131 ve eksileri<\/h3>\n<p>HTML m\u00fckemmelmi\u015f gibi davranmayal\u0131m. Avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r. Avantajlar\u0131 aras\u0131nda \u015funlar yer almaktad\u0131r:<\/p>\n<ul>\n<li aria-level=\"1\">\u00d6\u011frenmesi ve kullanmas\u0131 kolay net s\u00f6zdizimi.<\/li>\n<li aria-level=\"1\">Esneklik ve \u00e7ok y\u00f6nl\u00fcl\u00fck. HTML, \u00e7ok \u00e7e\u015fitli web siteleri olu\u015fturman\u0131za ve di\u011fer front-end geli\u015ftirme teknolojileriyle birlikte \u00e7al\u0131\u015fman\u0131za olanak tan\u0131r.<\/li>\n<li aria-level=\"1\">HTML dili t\u00fcm modern taray\u0131c\u0131lar taraf\u0131ndan iyi bir \u015fekilde desteklenir, bu da sayfalar\u0131n geni\u015f \u00e7apta eri\u015filebilir olmas\u0131n\u0131 ve her cihazda do\u011fru bir \u015fekilde g\u00f6r\u00fcnt\u00fclenmesini sa\u011flar.<\/li>\n<\/ul>\n<p>\u0130\u015fte dezavantajlar\u0131:<\/p>\n<ul>\n<li aria-level=\"1\">S\u0131n\u0131rl\u0131 f\u0131rsatlar. HTML tek ba\u015f\u0131na sayfalar\u0131 tam olarak \u015fekillendirmez ve onlara etkile\u015fim katmaz.\u00a0 Bunu yapmak i\u00e7in CSS ve JavaScript&#8217;e ihtiyac\u0131n\u0131z olacak.<\/li>\n<li aria-level=\"1\">Eski taray\u0131c\u0131lar yeni HTML etiketlerine her zaman \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde tepki vermez.<\/li>\n<\/ul>\n<p>Bununla birlikte, HTML hakk\u0131nda konu\u015fmay\u0131 bitirece\u011fiz ve CSS&#8217;e ge\u00e7ece\u011fiz. \u0130lgin\u00e7 olacak!<\/p>\n<h2>CSS nedir ve nas\u0131l kullan\u0131l\u0131r?<\/h2>\n<p>CSS (Cascading Style Sheets) sayfan\u0131n g\u00f6r\u00fcn\u00fcm\u00fcnden sorumludur. HTML&#8217;i bir manken olarak hayal ederseniz \u2013 CSS onun g\u00fczel ve \u015f\u0131k g\u00f6r\u00fcnmesini sa\u011flayan giysidir.<\/p>\n<p>CSS, HTML ile olu\u015fturulmu\u015f \u00f6\u011feleri s\u00fcsler. \u00d6rne\u011fin, metin rengini, yaz\u0131 tipi boyutunu, paragraflar aras\u0131ndaki mesafeyi de\u011fi\u015ftirebilir, animasyon ekleyebilir ve \u00e7ok daha fazlas\u0131n\u0131 yapabilirsiniz. CSS, hangi bile\u015fenlere stil eklenece\u011fini \u2013 bunlar\u0131n nas\u0131l eklenece\u011fini belirleyen \u00f6zel kurallar olan se\u00e7icileri kullanarak HTML ile etkile\u015fime girer.<\/p>\n<p>\u00d6rne\u011fin, bir HTML \u00f6\u011femiz &lt;p&gt; (paragraf) var. CSS yard\u0131m\u0131yla, a\u015fa\u011f\u0131daki CSS se\u00e7icisini ekleyerek i\u00e7indeki metni k\u0131rm\u0131z\u0131 yapabilir ve yaz\u0131 tipini b\u00fcy\u00fctebiliriz:<\/p>\n<p>p {<\/p>\n<p>color: red;<\/p>\n<p>font-size: 16px;<\/p>\n<p>}<\/p>\n<p>CSS&#8217;siz web siteleri son derece monoton g\u00f6r\u00fcnecektir. CSS dili onlara ki\u015filik kazand\u0131r\u0131r ve kullan\u0131c\u0131 deneyimini geli\u015ftirir (UI\/UX tasar\u0131mc\u0131lar\u0131 i\u00e7in \u00f6nemlidir). Ayr\u0131ca, sayfalar\u0131n bilgisayarlardan ak\u0131ll\u0131 telefonlara kadar \u00e7e\u015fitli cihazlar i\u00e7in daha eri\u015filebilir ve kullan\u0131\u015fl\u0131 olmas\u0131na yard\u0131mc\u0131 olur.<\/p>\n<p>HTML ve CSS&#8217;nin temellerini zaten biliyorsan\u0131z, karma\u015f\u0131k d\u00fczenlerin d\u00fczenlenmesi konusundaki becerilerinizi geli\u015ftirmek ve portf\u00f6y\u00fcn\u00fcze duyarl\u0131 bir d\u00fczen web sitesi eklemek i\u00e7in CSS Grid minicourse kursumuza kaydolun.<\/p>\n<h3>CSS ile hangi g\u00f6revler ger\u00e7ekle\u015ftirilebilir?<\/h3>\n<p>Art\u0131k CSS&#8217;nin ne oldu\u011funu ve HTML&#8217;yi nas\u0131l tamamlad\u0131\u011f\u0131n\u0131 anlad\u0131n\u0131z. Bu ara\u00e7 ile \u015funlar\u0131 yapabilirsiniz:<\/p>\n<ul>\n<li aria-level=\"1\">Metnin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirin (renk, yaz\u0131 tipi, sat\u0131r aral\u0131\u011f\u0131, hizalama, vb.).<\/li>\n<li aria-level=\"1\">HTML \u00f6\u011felerinin arka plan\u0131n\u0131 y\u00f6netin.<\/li>\n<li aria-level=\"1\">Duyarl\u0131 tasar\u0131m olu\u015fturun.<\/li>\n<li aria-level=\"1\">Net ve d\u00fczenli bir i\u00e7erik yap\u0131s\u0131 i\u00e7in genel sayfa d\u00fczenini tasarlay\u0131n (s\u00fctunlar, dolgu ve kenarl\u0131klar dahil).<\/li>\n<li aria-level=\"1\">Animasyonlar, ge\u00e7i\u015fler ve efektler ekleyin.<\/li>\n<li aria-level=\"1\">Boyutlar\u0131n\u0131 ve oranlar\u0131n\u0131 tan\u0131mlayarak \u00f6\u011feleri sayfaya do\u011fru bir \u015fekilde yerle\u015ftirin.<\/li>\n<\/ul>\n<p>CSS yard\u0131m\u0131yla olduk\u00e7a karma\u015f\u0131k ve \u00e7ekici web siteleri olu\u015fturabileceksiniz. \u00c7ok faydal\u0131 bir \u015fey! Belki sonraki makalelerde, CSS ile nas\u0131l \u00e7al\u0131\u015f\u0131laca\u011f\u0131 hakk\u0131nda daha fazla bilgi verece\u011fiz. Hemen \u015fimdi daha fazlas\u0131n\u0131 \u00f6\u011frenmek istiyorsan\u0131z, sizi \u00fccretsiz maratonumuza davet ediyoruz.<\/p>\n<h3>CSS&#8217;in avantajlar\u0131 ve dezavantajlar\u0131<\/h3>\n<p>Her ara\u00e7 gibi CSS&#8217;in de art\u0131lar\u0131 ve eksileri vard\u0131r. Bununla, CSS dosyas\u0131nda yaln\u0131zca bir kural\u0131 yeniden yazarak t\u00fcm sayfadaki \u00f6\u011felerin stilini de\u011fi\u015ftirebilirsiniz, bu da zamandan ve emekten tasarruf sa\u011flar. Ekranlar\u0131n ve cihazlar\u0131n boyutuna uyum sa\u011flayan tasar\u0131mlar geli\u015ftirin. Sayfalar\u0131 yap\u0131land\u0131r\u0131lm\u0131\u015f, d\u00fczenli ve kullan\u0131c\u0131 dostu hale getirin. Deneyler yap\u0131n ve kullan\u0131c\u0131 deneyimini s\u00fcrekli iyile\u015ftirin. Bunlar avantajlar\u0131d\u0131r.<\/p>\n<p>Dezavantajlar\u0131 aras\u0131nda taray\u0131c\u0131lar\u0131n CSS kodunu farkl\u0131 yorumlamas\u0131 yer al\u0131r (bazen uyumlulu\u011fu sa\u011flamak i\u00e7in ekstra \u00e7aba gerekir). Ayr\u0131ca, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli projelerde b\u00fcy\u00fck CSS dosyalar\u0131n\u0131n bak\u0131m\u0131 zordur. CSS ile \u00e7al\u0131\u015fmaya ba\u015flad\u0131ktan sonra, g\u00fc\u00e7l\u00fc ve zay\u0131f y\u00f6nleri hakk\u0131nda kendi fikrinizi olu\u015fturacaks\u0131n\u0131z.<\/p>\n<h2>Kimlerin HTML ve CSS \u00f6\u011frenmesi gerekiyor ve neden?<\/h2>\n<p>\u00d6zetlemek gerekirse, HTML ve CSS&#8217;in yaln\u0131zca Frontend geli\u015ftiricileri veya Fullstack programc\u0131lar\u0131 i\u00e7in de\u011fil, ayn\u0131 zamanda test\u00e7iler, UI\/UX tasar\u0131mc\u0131lar\u0131 ve hatta pazarlamac\u0131lar da dahil olmak \u00fczere \u00e7ok \u00e7e\u015fitli BT profesyonelleri i\u00e7in yararl\u0131 olacak temel beceriler oldu\u011fu a\u00e7\u0131kt\u0131r.<\/p>\n<p>HTML ve CSS \u00f6\u011frenmek \u2013 geli\u015ftirme ve tasar\u0131m alan\u0131nda kariyer yapmak isteyen herkes i\u00e7in ilk ve en \u00f6nemli ad\u0131md\u0131r. Daha karma\u015f\u0131k teknolojilere ve programlama dillerine kap\u0131 a\u00e7arlar.\u00a0 HTML ve CSS&#8217;in temelleri, ara\u00e7 setinizin ayr\u0131lmaz bir par\u00e7as\u0131 haline gelecektir.<\/p>\n<p>HTML ve CSS ile s\u0131f\u0131rdan ilk web sitenizi olu\u015fturmak i\u00e7in \u00fccretsiz \u00e7evrimi\u00e7i maratonumuza kat\u0131l\u0131n. Ya da mesle\u011finize karar verdiyseniz Frontend, Fullstack veya UI\/UX tasar\u0131m\u0131 kurslar\u0131na kaydolun. \u0130lgin\u00e7 ve iyi maa\u015fl\u0131 bir i\u015f bulmak i\u00e7in bir an \u00f6nce \u00e7al\u0131\u015fmaya ba\u015flay\u0131n!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bug\u00fcn HTML ve CSS&#8217;in ne oldu\u011funa ve bunlar\u0131 \u00f6\u011frenmenin BT kariyerinize ba\u015flamak i\u00e7in neden harika bir fikir oldu\u011funa bakaca\u011f\u0131z. Hadi ba\u015flayal\u0131m!<\/p>\n","protected":false},"featured_media":31062,"menu_order":0,"template":"","meta":{"inline_featured_image":false},"categories":[597],"tags":[],"class_list":["post-30934","articles","type-articles","status-publish","has-post-thumbnail","hentry","category-frontend"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.goit.global\/tr\/wp-json\/wp\/v2\/articles\/30934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.goit.global\/tr\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/dev.goit.global\/tr\/wp-json\/wp\/v2\/types\/articles"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.goit.global\/tr\/wp-json\/wp\/v2\/media\/31062"}],"wp:attachment":[{"href":"https:\/\/dev.goit.global\/tr\/wp-json\/wp\/v2\/media?parent=30934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.goit.global\/tr\/wp-json\/wp\/v2\/categories?post=30934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.goit.global\/tr\/wp-json\/wp\/v2\/tags?post=30934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}