Web geli\u015ftirme d\u00fcnyas\u0131n\u0131n temellerini olu\u015fturan HTML ve CSS, modern web sitelerinin iskeletini ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u015fekillendiren vazge\u00e7ilmez dillerdir. Bu makale, HTML ve CSS kullanarak olu\u015fturdu\u011fumuz demonstrasyon web sitemizin mimarisine, tasar\u0131m prensiplerine, kullan\u0131lan teknolojilere ve genel felsefesine derinlemesine bir bak\u0131\u015f sunmaktad\u0131r. Amac\u0131m\u0131z, bu demonstrasyonun sadece bir \u00f6rnek olman\u0131n \u00f6tesinde, iyi uygulama prensiplerini, eri\u015filebilirlik standartlar\u0131n\u0131 ve performans optimizasyonunu nas\u0131l ele ald\u0131\u011f\u0131n\u0131 detayland\u0131rmakt\u0131r. Yeni ba\u015flayanlardan deneyimli geli\u015ftiricilere kadar geni\u015f bir kitleye hitap eden bu \u00e7al\u0131\u015fma, statik bir web sitesinin temel bile\u015fenlerini anlamak ve kendi projelerinde uygulamak isteyenler i\u00e7in kapsaml\u0131 bir rehber niteli\u011findedir.<\/p>\n
Dijital \u00e7a\u011fda, etkili bir \u00e7evrimi\u00e7i varl\u0131k olu\u015fturmak her zamankinden daha kritik hale gelmi\u015ftir. Bir web sitesi, bir i\u015fletmenin vitrini, bir bireyin portf\u00f6y\u00fc veya bir bilginin yay\u0131lma arac\u0131 olabilir. Bu ba\u011flamda, HTML (HyperText Markup Language) ve CSS (Cascading Style Sheets) web sayfalar\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131 olarak \u00f6ne \u00e7\u0131kar. HTML, bir sayfan\u0131n i\u00e7eri\u011fini ve yap\u0131s\u0131n\u0131 tan\u0131mlarken, CSS bu i\u00e7eri\u011fin g\u00f6rsel sunumunu, yani stilini kontrol eder. Bu demonstrasyon web sitesi, bu iki temel teknolojinin g\u00fcc\u00fcn\u00fc ve esnekli\u011fini sergilemek \u00fczere tasarlanm\u0131\u015ft\u0131r.<\/p>\n
Demonstrasyonumuzun temel amac\u0131, modern web standartlar\u0131na uygun, temiz ve anla\u015f\u0131l\u0131r bir kod yap\u0131s\u0131yla olu\u015fturulmu\u015f, g\u00f6rsel olarak \u00e7ekici ve kullan\u0131c\u0131 dostu bir web deneyimi sunmakt\u0131r. Bu site, \u00e7e\u015fitli d\u00fczenlerin, tipografik yakla\u015f\u0131mlar\u0131n, renk paletlerinin ve etkile\u015fimli \u00f6\u011felerin saf HTML ve CSS ile nas\u0131l ba\u015far\u0131yla entegre edilebilece\u011fini g\u00f6stermektedir. \u00d6zellikle, JavaScript gibi dinamik betik dillerine ba\u015fvurmadan, yaln\u0131zca bu iki temel dilin sundu\u011fu imkanlarla neler ba\u015far\u0131labilece\u011fine odaklan\u0131lm\u0131\u015ft\u0131r.<\/p>\n
Hedef kitlemiz, web geli\u015ftirme yolculu\u011funa yeni ba\u015flayan \u00f6\u011frenciler, HTML ve CSS bilgilerini peki\u015ftirmek isteyen deneyimli geli\u015ftiriciler, projeleri i\u00e7in ilham arayan tasar\u0131mc\u0131lar ve temiz kodun \u00f6nemini anlamak isteyen i\u015f analistleri ve proje y\u00f6neticileridir. Bu makale boyunca, demonstrasyon sitemizin her bir bile\u015fenini ayr\u0131nt\u0131l\u0131 olarak inceleyecek, arkas\u0131ndaki mant\u0131\u011f\u0131 a\u00e7\u0131klayacak ve kullan\u0131lan en iyi uygulamalar\u0131 vurgulayaca\u011f\u0131z. Sitenin genel yap\u0131s\u0131ndan \u00f6zel tasar\u0131m \u00f6\u011felerine, eri\u015filebilirlik hususlar\u0131ndan performans optimizasyonuna kadar geni\u015f bir yelpazede bilgi sunarak, okuyucular\u0131m\u0131za kapsaml\u0131 bir anlay\u0131\u015f kazand\u0131rmay\u0131 hedefliyoruz.<\/p>\n
HTML, web sayfalar\u0131n\u0131n temel yap\u0131sal bile\u015fenidir. Bir binan\u0131n iskeleti gibi, HTML de bir web sayfas\u0131n\u0131n i\u00e7eri\u011fini d\u00fczenler ve anlamsal bir yap\u0131 kazand\u0131r\u0131r. Demonstrasyon sitemizde, HTML’in g\u00fcc\u00fcn\u00fc ve esnekli\u011fini en iyi \u015fekilde kullanmaya \u00f6zen g\u00f6sterdik.<\/p>\n
Modern web geli\u015ftirme pratiklerinde, semantik HTML kullan\u0131m\u0131 kritik bir \u00f6neme sahiptir. Semantik etiketler, i\u00e7eri\u011fin amac\u0131n\u0131 ve ba\u011flam\u0131n\u0131 yaln\u0131zca taray\u0131c\u0131lara de\u011fil, ayn\u0131 zamanda arama motorlar\u0131na ve ekran okuyucular gibi yard\u0131mc\u0131 teknolojilere de bildirir. Bu, web sitelerinin eri\u015filebilirli\u011fini art\u0131r\u0131r, SEO performans\u0131n\u0131 iyile\u015ftirir ve kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n
Demonstrasyon sitemizde kullan\u0131lan ba\u015fl\u0131ca semantik HTML5 etiketleri \u015funlard\u0131r:<\/p>\n
* Bu semantik etiketlerin yan\u0131 s\u0131ra, i\u00e7erik d\u00fczenlemesi i\u00e7in HTML bir web sayfas\u0131n\u0131n iskeletiyken, CSS (Cascading Style Sheets) bu iskelete hayat veren, renk, d\u00fczen ve tipografi gibi g\u00f6rsel unsurlar\u0131 ekleyen giysidir. Demonstrasyon sitemizin \u00e7ekici ve kullan\u0131c\u0131 dostu aray\u00fcz\u00fc, titizlikle tasarlanm\u0131\u015f CSS kurallar\u0131 sayesinde m\u00fcmk\u00fcn olmu\u015ftur.<\/p>\n CSS, se\u00e7iciler (selectors) arac\u0131l\u0131\u011f\u0131yla HTML \u00f6\u011felerini hedefler ve bu \u00f6\u011felere \u00e7e\u015fitli stil \u00f6zellikleri (properties) uygular. Demonstrasyonumuzda, harici bir stil sayfas\u0131 ( Ba\u015fl\u0131ca CSS se\u00e7icileri ve kullan\u0131m \u00f6rnekleri:<\/p>\n * Element Se\u00e7iciler:<\/strong> Demonstrasyon sitemizin CSS’i, modern web tasar\u0131m\u0131n\u0131n temel prensiplerini yans\u0131tmaktad\u0131r:<\/p>\n * Duyarl\u0131 Tasar\u0131m (Responsive Design):<\/strong> Sitemiz, farkl\u0131 ekran boyutlar\u0131na (masa\u00fcst\u00fc, tablet, mobil) otomatik olarak adapte olabilen duyarl\u0131 bir tasar\u0131ma sahiptir. Bu, Demonstrasyon sitemizin CSS yap\u0131s\u0131, mod\u00fclerlik ve s\u00fcrd\u00fcr\u00fclebilirlik prensiplerine uygun olarak d\u00fczenlenmi\u015ftir. Genel stiller, d\u00fczen stilleri ve bile\u015fen stilleri ayr\u0131 b\u00f6l\u00fcmlerde tutularak, kodun okunabilirli\u011fi ve gelecekteki de\u011fi\u015fikliklere adaptasyonu kolayla\u015ft\u0131r\u0131lm\u0131\u015ft\u0131r.<\/p>\n Her iyi tasarlanm\u0131\u015f web sitesi gibi, demonstrasyon sitemiz de mant\u0131ksal ve hiyerar\u015fik bir yap\u0131ya sahiptir. Bu yap\u0131, kullan\u0131c\u0131lar\u0131n sitede kolayca gezinmesini sa\u011flarken, arama motorlar\u0131n\u0131n da i\u00e7eri\u011fi daha iyi anlamas\u0131na yard\u0131mc\u0131 olur.<\/p>\n Sitemizin temel d\u00fczeni, modern web sitelerinin \u00e7o\u011funda g\u00f6r\u00fclen standart bir yakla\u015f\u0131ma sahiptir:<\/p>\n * \u00dcst Bilgi ( Demonstrasyon sitemiz, tipik bir kurumsal veya portf\u00f6y web sitesinde bulunabilecek \u00e7e\u015fitli sayfalar\u0131 ve i\u00e7erik t\u00fcrlerini bar\u0131nd\u0131r\u0131r:<\/p>\n 1. Anasayfa (Homepage):<\/strong> Bu yap\u0131, hem kullan\u0131c\u0131lar i\u00e7in sezgisel bir gezinti deneyimi sunar hem de i\u00e7eri\u011fin mant\u0131ksal bir d\u00fczende sunulmas\u0131n\u0131 sa\u011flar. Her b\u00f6l\u00fcm, kendi i\u00e7inde bir b\u00fct\u00fcnl\u00fck arz ederken, sitenin genel temas\u0131 ve tasar\u0131m dili ile uyum i\u00e7indedir.<\/p>\n Bir demonstrasyon web sitesi olu\u015ftururken, sadece g\u00f6rsel olarak \u00e7ekici olmakla kalmay\u0131p, ayn\u0131 zamanda sa\u011flam bir temel \u00fczerine in\u015fa edilmi\u015f olmas\u0131 da \u00f6nemlidir. Bu, kod kalitesi, eri\u015filebilirlik ve performans gibi fakt\u00f6rleri i\u00e7erir.<\/p>\n * Temiz ve Okunabilir Kod:<\/strong> HTML ve CSS kodumuz, geli\u015ftiriciler taraf\u0131ndan kolayca anla\u015f\u0131labilir ve bak\u0131m\u0131 yap\u0131labilir olacak \u015fekilde yaz\u0131lm\u0131\u015ft\u0131r. Do\u011fru girintileme, tutarl\u0131 adland\u0131rma kurallar\u0131 (\u00f6rne\u011fin, BEM – Block, Element, Modifier metodolojisinden esinlenilmi\u015ftir) ve gereksiz karma\u015f\u0131kl\u0131ktan ka\u00e7\u0131nma prensipleri benimsenmi\u015ftir. Web sitelerinin herkes taraf\u0131ndan eri\u015filebilir olmas\u0131, modern web geli\u015ftirmenin temel bir ilkesidir. Demonstrasyon sitemizde eri\u015filebilirli\u011fi art\u0131rmak i\u00e7in a\u015fa\u011f\u0131daki yakla\u015f\u0131mlar benimsenmi\u015ftir:<\/p>\n * Semantik HTML:<\/strong> Yukar\u0131da bahsedildi\u011fi gibi, anlamsal etiketlerin do\u011fru kullan\u0131m\u0131, ekran okuyucular gibi yard\u0131mc\u0131 teknolojilerin sayfa yap\u0131s\u0131n\u0131 ve i\u00e7eri\u011fini do\u011fru bir \u015fekilde yorumlamas\u0131na yard\u0131mc\u0131 olur. H\u0131zl\u0131 y\u00fcklenen bir web sitesi, daha iyi bir kullan\u0131c\u0131 deneyimi, daha d\u00fc\u015f\u00fck terk oran\u0131 ve daha iyi arama motoru s\u0131ralamas\u0131 anlam\u0131na gelir. Saf HTML ve CSS ile yap\u0131labilecek temel performans optimizasyonlar\u0131 \u015funlard\u0131r:<\/p>\n * Optimize Edilmi\u015f G\u00f6rseller:<\/strong> Sitede kullan\u0131lan g\u00f6rseller, kalitelerinden \u00f6d\u00fcn vermeden m\u00fcmk\u00fcn olan en k\u00fc\u00e7\u00fck dosya boyutlar\u0131na s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015ft\u0131r. Ayr\u0131ca, uygun formatlar (JPEG, PNG, WebP) tercih edilmi\u015ftir. Bu en iyi uygulama prensipleri, demonstrasyon sitemizin sadece bug\u00fcn\u00fcn de\u011fil, gelece\u011fin web standartlar\u0131na da uygun olmas\u0131n\u0131 sa\u011flamay\u0131 ama\u00e7lamaktad\u0131r.<\/p>\n Demonstrasyon web sitemiz, HTML ve CSS’in g\u00fcc\u00fcn\u00fc ve \u00e7ok y\u00f6nl\u00fcl\u00fc\u011f\u00fcn\u00fc sergilemek \u00fczere tasarlanm\u0131\u015f bir dizi yayg\u0131n web bile\u015feni ve \u00f6zelli\u011fini i\u00e7erir. Bu bile\u015fenler, farkl\u0131 tasar\u0131m yakla\u015f\u0131mlar\u0131n\u0131 ve i\u015flevsellikleri g\u00f6stermektedir.<\/p>\n * Duyarl\u0131 Navigasyon \u00c7ubu\u011fu:<\/strong> Masa\u00fcst\u00fcnde yatay bir men\u00fc olarak g\u00f6r\u00fcnen, mobil cihazlarda ise bir “hamburger” ikonuna d\u00f6n\u00fc\u015fen ve t\u0131kland\u0131\u011f\u0131nda a\u00e7\u0131lan\/kapanan bir men\u00fcye sahip navigasyon \u00e7ubu\u011fu. Bu, sadece CSS * Hero B\u00f6l\u00fcm\u00fc:<\/strong> Anasayfan\u0131n en \u00fcst\u00fcnde yer alan, b\u00fcy\u00fck bir arka plan resmi veya rengi, dikkat \u00e7ekici bir ba\u015fl\u0131k, k\u0131sa bir slogan ve bir harekete ge\u00e7irici \u00e7a\u011fr\u0131 (CTA) d\u00fc\u011fmesi ile tasarlanm\u0131\u015ft\u0131r. Bu b\u00f6l\u00fcm, ziyaret\u00e7inin dikkatini an\u0131nda \u00e7ekmeyi ve sitenin ana mesaj\u0131n\u0131 iletmeyi hedefler. Arka plan resimlerinin * \u0130leti\u015fim Formu:<\/strong> Kullan\u0131c\u0131lar\u0131n site sahibiyle ileti\u015fime ge\u00e7mesini sa\u011flayan bir form bile\u015feni. Giri\u015f alanlar\u0131 ( * Sayfa Alt Bilgisi (Footer):<\/strong> \u00c7ok s\u00fctunlu bir d\u00fczenle tasarlanm\u0131\u015ft\u0131r. Telif hakk\u0131 bilgileri, h\u0131zl\u0131 ba\u011flant\u0131lar (site haritas\u0131), ileti\u015fim detaylar\u0131 ve sosyal medya ikonlar\u0131 gibi bilgileri i\u00e7erir. Bu bile\u015fenlerin her biri, HTML’in yap\u0131sal yeteneklerini ve CSS’in kapsaml\u0131 stil \u00f6zelliklerini kullanarak nas\u0131l zengin ve i\u015flevsel bir kullan\u0131c\u0131 aray\u00fcz\u00fc olu\u015fturulabilece\u011fini g\u00f6stermektedir. Her bile\u015fen, mod\u00fcler bir yakla\u015f\u0131mla tasarlanm\u0131\u015f olup, sitenin farkl\u0131 b\u00f6l\u00fcmlerinde tekrar kullan\u0131labilirli\u011fi hedeflenmi\u015ftir.<\/p>\n Demonstrasyon web sitemiz, HTML ve CSS’in saf g\u00fcc\u00fcn\u00fc sergilemek \u00fczere tasarlanm\u0131\u015f olsa da, bu teknolojilerin do\u011fas\u0131 gere\u011fi baz\u0131 s\u0131n\u0131rlamalar\u0131 bulunmaktad\u0131r. Bu s\u0131n\u0131rlamalar\u0131 anlamak, web geli\u015ftirme projelerinin do\u011fru ara\u00e7larla planlanmas\u0131 i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n * Dinamik \u0130\u00e7erik ve Veritaban\u0131 Etkile\u015fimi:<\/strong> HTML ve CSS statik dillerdir. Yani, bir veritaban\u0131ndan veri \u00e7ekme, kullan\u0131c\u0131 giri\u015flerine g\u00f6re i\u00e7eri\u011fi dinamik olarak de\u011fi\u015ftirme veya sunucu taraf\u0131nda karma\u015f\u0131k i\u015flemler yapma yetenekleri yoktur. Demonstrasyon sitemizdeki ileti\u015fim formu gibi bile\u015fenler, g\u00f6rsel olarak tasarlanm\u0131\u015f olsa da, form g\u00f6nderimini i\u015flemek i\u00e7in bir sunucu taraf\u0131 beti\u011fe (\u00f6rne\u011fin, PHP, Python, Node.js) ihtiya\u00e7 duyarlar. Demonstrasyon sitemiz, HTML ve CSS’in temel bir anlay\u0131\u015f\u0131n\u0131 sunarken, gelecekteki geli\u015ftirmeler i\u00e7in g\u00fc\u00e7l\u00fc bir temel olu\u015fturmaktad\u0131r:<\/p>\n * JavaScript Entegrasyonu:<\/strong> Bu potansiyel geli\u015ftirmeler, demonstrasyon sitemizin temelinin, modern web uygulamalar\u0131n\u0131n karma\u015f\u0131k gereksinimlerini kar\u015f\u0131layacak \u015fekilde geni\u015fletilebilece\u011fini g\u00f6stermektedir.<\/p>\n Bu makale boyunca, HTML ve CSS kullanarak olu\u015fturdu\u011fumuz demonstrasyon web sitemizin kapsaml\u0131 bir genel bak\u0131\u015f\u0131n\u0131 sunduk. Temel HTML yap\u0131s\u0131ndan geli\u015fmi\u015f CSS tekniklerine, eri\u015filebilirlik prensiplerinden performans optimizasyonuna kadar bir\u00e7ok konuyu ele ald\u0131k. G\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, HTML ve CSS, modern web sitelerinin omurgas\u0131n\u0131 olu\u015fturan g\u00fc\u00e7l\u00fc ve esnek dillerdir.<\/p>\n Demonstrasyon sitemiz, semantik HTML kullan\u0131m\u0131n\u0131n, duyarl\u0131 tasar\u0131m yakla\u015f\u0131mlar\u0131n\u0131n, mod\u00fcler CSS prensiplerinin ve eri\u015filebilirlik standartlar\u0131n\u0131n nas\u0131l bir araya getirilerek kullan\u0131c\u0131 dostu ve s\u00fcrd\u00fcr\u00fclebilir bir web deneyimi yarat\u0131labilece\u011fini g\u00f6stermektedir. Flexbox ve CSS Grid gibi d\u00fczen teknikleri, sitenin farkl\u0131 ekran boyutlar\u0131na sorunsuz bir \u015fekilde adapte olmas\u0131n\u0131 sa\u011flarken, titizlikle se\u00e7ilmi\u015f tipografi ve renk paleti, g\u00f6rsel \u00e7ekicili\u011fi art\u0131rmaktad\u0131r.<\/p>\n Her ne kadar bu demonstrasyon, JavaScript gibi dinamik betik dillerine ba\u015fvurmadan dahi ne kadar zengin bir kullan\u0131c\u0131 aray\u00fcz\u00fc olu\u015fturulabilece\u011fini kan\u0131tlasa da, HTML ve CSS’in belirli s\u0131n\u0131rlamalar\u0131 oldu\u011funu da kabul etmek gerekir. Dinamik i\u00e7erik y\u00f6netimi, karma\u015f\u0131k etkile\u015fimler veya sunucu taraf\u0131 i\u015flemler i\u00e7in ek teknolojilerin entegrasyonu ka\u00e7\u0131n\u0131lmazd\u0131r. Ancak bu s\u0131n\u0131rlamalar, HTML ve CSS’in temel ve vazge\u00e7ilmez rollerini azaltmaz; aksine, bu dillerin sa\u011flam bir temel olu\u015fturdu\u011funu ve di\u011fer teknolojilerle birlikte \u00e7al\u0131\u015farak \u00e7ok daha g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcmler sunabildi\u011fini g\u00f6sterir.<\/p>\n Bu demonstrasyon, web geli\u015ftirme yolculu\u011funa ba\u015flayanlar i\u00e7in ilham verici bir ba\u015flang\u0131\u00e7 noktas\u0131, deneyimli geli\u015ftiriciler i\u00e7in ise iyi uygulama prensiplerini hat\u0131rlatan bir referans kayna\u011f\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r. Web d\u00fcnyas\u0131 s\u00fcrekli evrim ge\u00e7irse de, HTML ve CSS her zaman web’in temel direkleri olarak kalacak ve her geli\u015ftiricinin ara\u00e7 kutusunda sa\u011flam bir yer tutacakt\u0131r. Umar\u0131z bu makale, demonstrasyon sitemizin arkas\u0131ndaki d\u00fc\u015f\u00fcnce s\u00fcrecini ayd\u0131nlatm\u0131\u015f ve kendi projelerinizde uygulayabilece\u011finiz de\u011ferli bilgiler sunmu\u015ftur. Web geli\u015ftirmeye olan tutkunuzu s\u00fcrd\u00fcr\u00fcn ve bu temel dillerin sundu\u011fu sonsuz olas\u0131l\u0131klar\u0131 ke\u015ffetmeye devam edin.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Demonstrasyon HTML ve CSS Web Sitemize Genel Bak\u0131\u015f\nWeb geli\u015ftirme d\u00fcnyas\u0131n\u0131n temellerini olu\u015fturan HTML ve CSS, modern web sitelerinin iskelet","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-37340","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nheader<\/code>: Genellikle sitenin logosunu, ana navigasyon men\u00fcs\u00fcn\u00fc ve bazen de bir arama \u00e7ubu\u011funu i\u00e7eren, sayfan\u0131n \u00fcst k\u0131sm\u0131n\u0131 tan\u0131mlar. Sitemizde, markan\u0131n kimli\u011fini yans\u0131tan bir logo ve kullan\u0131c\u0131n\u0131n sitede kolayca gezinebilmesini sa\u011flayan bir navigasyon men\u00fcs\u00fc i\u00e7erir.
\n* nav<\/code>: Ana navigasyon ba\u011flant\u0131lar\u0131n\u0131 grupland\u0131rmak i\u00e7in kullan\u0131l\u0131r. Bu, kullan\u0131c\u0131lar\u0131n sitenin farkl\u0131 b\u00f6l\u00fcmlerine h\u0131zl\u0131ca eri\u015fmesini sa\u011flar. Demonstrasyonumuzda, ana men\u00fc ba\u011flant\u0131lar\u0131 bu etiket i\u00e7inde yer almaktad\u0131r.
\n* main<\/code>: Sayfan\u0131n ana i\u00e7eri\u011fini bar\u0131nd\u0131r\u0131r. Bir sayfada yaln\u0131zca bir main<\/code> etiketi bulunmal\u0131d\u0131r ve bu etiket, sayfan\u0131n temel i\u015flevini veya konusunu temsil eden i\u00e7eri\u011fi i\u00e7ermelidir.
\n* section<\/code>: \u0130\u00e7eriksel olarak birbiriyle ili\u015fkili, ba\u011f\u0131ms\u0131z b\u00f6l\u00fcmleri grupland\u0131r\u0131r. \u00d6rne\u011fin, “Hizmetlerimiz”, “Hakk\u0131m\u0131zda” veya “Portf\u00f6y” gibi b\u00f6l\u00fcmler section<\/code> etiketleri i\u00e7inde yap\u0131land\u0131r\u0131lm\u0131\u015ft\u0131r. Her section<\/code> genellikle bir ba\u015fl\u0131k (h2<\/code>, h3<\/code> vb.) ile ba\u015flar.
\n* article<\/code>: Kendi ba\u015f\u0131na anlam ifade eden, ba\u011f\u0131ms\u0131z ve tekrar kullan\u0131labilir i\u00e7erik par\u00e7alar\u0131n\u0131 temsil eder. Blog g\u00f6nderileri, haber makaleleri veya \u00fcr\u00fcn yorumlar\u0131 gibi \u00f6\u011feler i\u00e7in idealdir. Demonstrasyonumuzda, \u00f6rnek blog g\u00f6nderileri veya proje a\u00e7\u0131klamalar\u0131 article<\/code> etiketleri kullan\u0131larak olu\u015fturulmu\u015ftur.
\n* aside<\/code>: Ana i\u00e7erikten ba\u011f\u0131ms\u0131z ancak onunla ili\u015fkili yan i\u00e7eri\u011fi (\u00f6rne\u011fin, kenar \u00e7ubuklar\u0131, reklamlar, ilgili ba\u011flant\u0131lar) belirtir.
\n* footer<\/code>: Genellikle telif hakk\u0131 bilgileri, ileti\u015fim detaylar\u0131, site haritas\u0131 ba\u011flant\u0131lar\u0131 ve sosyal medya ikonlar\u0131 gibi bilgileri i\u00e7eren, sayfan\u0131n alt k\u0131sm\u0131n\u0131 tan\u0131mlar.<\/p>\ndiv<\/code>, p<\/code> (paragraf), ul<\/code> (s\u0131ras\u0131z liste), ol<\/code> (s\u0131ral\u0131 liste), li<\/code> (liste \u00f6\u011fesi), a<\/code> (ba\u011flant\u0131), img<\/code> (resim) gibi temel HTML etiketleri de yo\u011fun bir \u015fekilde kullan\u0131lm\u0131\u015ft\u0131r. Her bir \u00f6\u011fe, sayfan\u0131n genel yap\u0131s\u0131 i\u00e7inde mant\u0131ksal bir yer bulmu\u015f ve bu sayede hem geli\u015ftiriciler hem de taray\u0131c\u0131lar i\u00e7in anla\u015f\u0131l\u0131r bir hiyerar\u015fi olu\u015fturulmu\u015ftur.<\/p>\nCSS: Web Sayfas\u0131n\u0131n Esteti\u011fi ve Sunumu<\/h3>\n
CSS Temelleri ve Uygulama Y\u00f6ntemleri<\/h4>\n
style.css<\/code> gibi) kullanarak t\u00fcm stilleri merkezi bir yerde toplad\u0131k. Bu yakla\u015f\u0131m, kodun tekrar kullan\u0131labilirli\u011fini art\u0131r\u0131r, bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r ve sayfa y\u00fckleme s\u00fcrelerini optimize eder.<\/p>\nbody<\/code>, h1<\/code>, p<\/code>, a<\/code> gibi do\u011frudan HTML etiketlerini hedefler. Genel stilleri (\u00f6rne\u011fin, varsay\u0131lan fontlar, arka plan renkleri) tan\u0131mlamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.
\n* S\u0131n\u0131f Se\u00e7iciler (.class):<\/strong> .button<\/code>, .card<\/code>, .section-title<\/code> gibi belirli bir s\u0131n\u0131fa sahip \u00f6\u011feleri hedefler. Bu, ayn\u0131 stili birden fazla \u00f6\u011feye uygulamak i\u00e7in en esnek ve yayg\u0131n y\u00f6ntemdir. Demonstrasyon sitemizde, bile\u015fen tabanl\u0131 bir yakla\u015f\u0131mla, bir\u00e7ok \u00f6\u011fe i\u00e7in s\u0131n\u0131f se\u00e7iciler kullan\u0131lm\u0131\u015ft\u0131r.
\n* ID Se\u00e7iciler (#id):<\/strong> #main-header<\/code>, #contact-form<\/code> gibi benzersiz bir ID’ye sahip tek bir \u00f6\u011feyi hedefler. Genellikle belirli bir sayfa b\u00f6l\u00fcm\u00fcn\u00fc veya benzersiz bir \u00f6\u011feyi stilize etmek i\u00e7in kullan\u0131l\u0131r.
\n* Pseudo-s\u0131n\u0131flar ve Pseudo-elemanlar:<\/strong> :hover<\/code>, :focus<\/code>, :active<\/code> gibi pseudo-s\u0131n\u0131flar, bir \u00f6\u011fenin belirli bir durumdayken nas\u0131l g\u00f6r\u00fcnece\u011fini tan\u0131mlar (\u00f6rne\u011fin, bir ba\u011flant\u0131n\u0131n \u00fczerine gelindi\u011finde). ::before<\/code>, ::after<\/code> gibi pseudo-elemanlar ise, se\u00e7ilen bir \u00f6\u011fenin \u00f6n\u00fcne veya arkas\u0131na sanal i\u00e7erik eklemek i\u00e7in kullan\u0131l\u0131r (\u00f6rne\u011fin, ikonlar veya dekoratif \u00e7izgiler).<\/p>\nTasar\u0131m Prensipleri ve Uygulamalar<\/h4>\n
viewport<\/code> meta etiketi, ak\u0131\u015fkan d\u00fczenler (y\u00fczde bazl\u0131 geni\u015flikler), esnek resimler (max-width: 100%<\/code>) ve \u00f6zellikle CSS Media Query’leri kullan\u0131larak sa\u011flanm\u0131\u015ft\u0131r. Media Query’ler, belirli ekran geni\u015flikleri i\u00e7in farkl\u0131 stil kurallar\u0131n\u0131n uygulanmas\u0131na olanak tan\u0131r, b\u00f6ylece i\u00e7erik her cihazda en uygun \u015fekilde g\u00f6r\u00fcnt\u00fclenir.
\n* Tipografi:<\/strong> Okunabilirlik, tipografik se\u00e7imin temelini olu\u015fturur. Sitemizde, ba\u015fl\u0131klar i\u00e7in dikkat \u00e7ekici, g\u00f6vde metinleri i\u00e7in ise okunakl\u0131 ve eri\u015filebilir fontlar kullan\u0131lm\u0131\u015ft\u0131r. font-family<\/code>, font-size<\/code>, line-height<\/code>, letter-spacing<\/code> gibi CSS \u00f6zellikleri, metinlerin g\u00f6rsel hiyerar\u015fisini ve okunabilirli\u011fini optimize etmek i\u00e7in ayarlanm\u0131\u015ft\u0131r.
\n* Renk Paleti:<\/strong> Markan\u0131n kimli\u011fini yans\u0131tan ve ho\u015f bir g\u00f6rsel deneyim sunan uyumlu bir renk paleti se\u00e7ilmi\u015ftir. Ana, ikincil ve vurgu renkleri dikkatlice belirlenmi\u015f, ayr\u0131ca eri\u015filebilirlik standartlar\u0131na uygun kontrast oranlar\u0131 g\u00f6zetilmi\u015ftir. CSS de\u011fi\u015fkenleri (--primary-color: #3498db;<\/code>) kullan\u0131larak renk y\u00f6netimi kolayla\u015ft\u0131r\u0131lm\u0131\u015f ve tema de\u011fi\u015fiklikleri i\u00e7in esneklik sa\u011flanm\u0131\u015ft\u0131r.
\n* D\u00fczen Teknikleri:<\/strong>
\n * Flexbox:<\/strong> Tek boyutlu d\u00fczenler (sat\u0131rlar veya s\u00fctunlar) i\u00e7in idealdir. Navigasyon men\u00fcleri, kart d\u00fczenleri, hizalama ve bo\u015fluk da\u011f\u0131t\u0131m\u0131 gibi bir\u00e7ok alanda Flexbox kullan\u0131lm\u0131\u015ft\u0131r. display: flex<\/code>, justify-content<\/code>, align-items<\/code>, flex-direction<\/code>, flex-wrap<\/code> gibi \u00f6zellikler sayesinde esnek ve dinamik bile\u015fenler olu\u015fturulmu\u015ftur.
\n * CSS Grid:<\/strong> \u0130ki boyutlu d\u00fczenler (sat\u0131rlar ve s\u00fctunlar) i\u00e7in m\u00fckemmeldir. Sitenin ana d\u00fczeni (header, main, footer gibi ana b\u00f6lgelerin yerle\u015fimi) ve karma\u015f\u0131k bile\u015fen d\u00fczenleri i\u00e7in CSS Grid’den faydalan\u0131lm\u0131\u015ft\u0131r. display: grid<\/code>, grid-template-columns<\/code>, grid-template-rows<\/code>, grid-gap<\/code> gibi \u00f6zellikler, i\u00e7eri\u011fin sayfa \u00fczerindeki konumland\u0131r\u0131lmas\u0131nda b\u00fcy\u00fck bir kontrol sa\u011flar.
\n * Konumland\u0131rma (position<\/code>):<\/strong> relative<\/code>, absolute<\/code>, fixed<\/code> ve sticky<\/code> gibi konumland\u0131rma \u00f6zellikleri, belirli \u00f6\u011felerin sayfa i\u00e7indeki yerini hassas bir \u015fekilde kontrol etmek i\u00e7in kullan\u0131lm\u0131\u015ft\u0131r. \u00d6rne\u011fin, sabit bir navigasyon \u00e7ubu\u011fu (position: fixed<\/code>) veya bir resim \u00fczerindeki metin (position: absolute<\/code>) bu y\u00f6ntemle olu\u015fturulmu\u015ftur.
\n* Etkile\u015fimli \u00d6\u011feler (CSS ile):<\/strong> JavaScript’e ihtiya\u00e7 duymadan, CSS ile basit ama etkili etkile\u015fimler eklenmi\u015ftir.
\n * Hover Efektleri:<\/strong> D\u00fc\u011fmeler, ba\u011flant\u0131lar ve resimler \u00fczerine gelindi\u011finde renk de\u011fi\u015fimi, b\u00fcy\u00fcme veya g\u00f6lge ekleme gibi g\u00f6rsel geri bildirimler sa\u011flanm\u0131\u015ft\u0131r.
\n * Ge\u00e7i\u015fler (Transitions):<\/strong> transition<\/code> \u00f6zelli\u011fi kullan\u0131larak, bir stil de\u011fi\u015fikli\u011finin (\u00f6rne\u011fin, hover efekti) aniden de\u011fil, p\u00fcr\u00fczs\u00fcz bir animasyonla ger\u00e7ekle\u015fmesi sa\u011flanm\u0131\u015ft\u0131r. Bu, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.
\n * Basit Animasyonlar:<\/strong> CSS @keyframes<\/code> kurallar\u0131 ile k\u00fc\u00e7\u00fck, dikkat \u00e7ekici animasyonlar (\u00f6rne\u011fin, bir y\u00fckleme ikonu veya bir b\u00f6l\u00fcm\u00fcn hafif\u00e7e i\u00e7eri kaymas\u0131) eklenmi\u015ftir.<\/p>\nDemonstrasyon Web Sitesinin Yap\u0131sal D\u00fczeni<\/h3>\n
Genel Sayfa D\u00fczeni<\/h4>\n
header<\/code>):<\/strong> Her sayfan\u0131n en \u00fcst\u00fcnde yer al\u0131r. Genellikle markan\u0131n logosunu, sitenin ana ba\u015fl\u0131\u011f\u0131n\u0131 ve ana navigasyon men\u00fcs\u00fcn\u00fc i\u00e7erir. Demonstrasyonumuzda, logonun ortalanm\u0131\u015f ve navigasyonun sa\u011f tarafta yer ald\u0131\u011f\u0131 bir d\u00fczen tercih edilmi\u015ftir. Duyarl\u0131 tasar\u0131m sayesinde, mobil cihazlarda navigasyon men\u00fcs\u00fc bir hamburger men\u00fc ikonuna d\u00f6n\u00fc\u015f\u00fcr.
\n* Navigasyon (nav<\/code>):<\/strong> header<\/code> i\u00e7inde yer alan bu b\u00f6l\u00fcm, sitenin ana sayfalar\u0131na (Anasayfa, Hakk\u0131m\u0131zda, Hizmetler, Portf\u00f6y, \u0130leti\u015fim) ba\u011flant\u0131lar i\u00e7erir. Kullan\u0131c\u0131lar\u0131n site i\u00e7inde kolayca hareket etmesini sa\u011flayan temel bir bile\u015fendir.
\n* Ana \u0130\u00e7erik (main<\/code>):<\/strong> header<\/code> ve footer<\/code> aras\u0131nda kalan bu b\u00f6l\u00fcm, her sayfan\u0131n benzersiz i\u00e7eri\u011fini bar\u0131nd\u0131r\u0131r. Bu, anasayfadaki tan\u0131t\u0131m metinleri, hizmet sayfalar\u0131ndaki detayl\u0131 a\u00e7\u0131klamalar veya portf\u00f6y sayfalar\u0131ndaki proje g\u00f6rselleri olabilir. main<\/code> etiketi, sayfan\u0131n ana amac\u0131n\u0131 ve en \u00f6nemli i\u00e7eri\u011fini i\u015faret eder.
\n* B\u00f6l\u00fcmler (section<\/code>):<\/strong> Ana i\u00e7erik i\u00e7inde, birbiriyle ili\u015fkili i\u00e7erik bloklar\u0131n\u0131 grupland\u0131rmak i\u00e7in section<\/code> etiketleri kullan\u0131l\u0131r. \u00d6rne\u011fin, anasayfada “Hakk\u0131m\u0131zda \u00d6zeti”, “Hizmetlerimiz”, “Son Projelerimiz” gibi farkl\u0131 b\u00f6l\u00fcmler bu \u015fekilde yap\u0131land\u0131r\u0131lm\u0131\u015ft\u0131r. Her b\u00f6l\u00fcm, net bir ba\u015fl\u0131k (h2<\/code> veya h3<\/code>) ile ba\u015flar.
\n* Alt Bilgi (footer<\/code>):<\/strong> Her sayfan\u0131n en alt\u0131nda yer al\u0131r. Telif hakk\u0131 bilgileri, site haritas\u0131 ba\u011flant\u0131lar\u0131, ileti\u015fim bilgileri ve sosyal medya ba\u011flant\u0131lar\u0131 gibi ikincil bilgileri i\u00e7erir. Demonstrasyonumuzda, \u00e7ok s\u00fctunlu bir d\u00fczenle bu bilgiler d\u00fczenli bir \u015fekilde sunulmu\u015ftur.<\/p>\nTemel Sayfa ve B\u00f6l\u00fcmler<\/h4>\n
\n * Hero B\u00f6l\u00fcm\u00fc:<\/strong> Sitenin en dikkat \u00e7ekici k\u0131sm\u0131d\u0131r. Geni\u015f bir arka plan resmi veya video, \u00e7arp\u0131c\u0131 bir ba\u015fl\u0131k, k\u0131sa bir a\u00e7\u0131klama ve bir “Harekete Ge\u00e7irici \u00c7a\u011fr\u0131” (Call-to-Action – CTA) d\u00fc\u011fmesi i\u00e7erir. Kullan\u0131c\u0131y\u0131 ilk anda etkilemeyi ve sitenin ana mesaj\u0131n\u0131 iletmeyi hedefler.
\n * Hizmetler\/\u00d6zellikler \u00d6zeti:<\/strong> Sunulan temel hizmetlerin veya \u00fcr\u00fcn \u00f6zelliklerinin k\u0131sa bir tan\u0131t\u0131m\u0131n\u0131 i\u00e7eren kart tabanl\u0131 bir d\u00fczen.
\n * Hakk\u0131m\u0131zda K\u0131sa Bilgi:<\/strong> \u015eirketin veya projenin misyonunu ve de\u011ferlerini \u00f6zetleyen k\u0131sa bir metin.
\n * Son Projeler\/Portf\u00f6y \u00d6nizlemesi:<\/strong> En yeni veya en dikkat \u00e7ekici projelerin k\u00fc\u00e7\u00fck g\u00f6rselleri ve ba\u015fl\u0131klar\u0131yla bir \u00f6nizlemesi.
\n * Referanslar\/M\u00fc\u015fteri Yorumlar\u0131:<\/strong> G\u00fcven olu\u015fturmak i\u00e7in m\u00fc\u015fteri geri bildirimlerinin veya referanslar\u0131n yer ald\u0131\u011f\u0131 bir b\u00f6l\u00fcm.
\n * CTA B\u00f6l\u00fcm\u00fc:<\/strong> Kullan\u0131c\u0131y\u0131 belirli bir eyleme (\u00f6rne\u011fin, “\u0130leti\u015fime Ge\u00e7in”, “Daha Fazla Bilgi Edinin”) y\u00f6nlendiren ek bir harekete ge\u00e7irici \u00e7a\u011fr\u0131.
\n2. Hakk\u0131m\u0131zda Sayfas\u0131:<\/strong>
\n * \u015eirketin hikayesini, misyonunu, vizyonunu ve de\u011ferlerini detayl\u0131 olarak anlatan metinler.
\n * Ekip \u00fcyelerinin tan\u0131t\u0131ld\u0131\u011f\u0131, foto\u011frafl\u0131 ve k\u0131sa biyografili bir b\u00f6l\u00fcm.
\n * Ba\u015far\u0131lar veya kilometre ta\u015flar\u0131 gibi ek bilgiler.
\n3. Hizmetler\/\u00dcr\u00fcnler Sayfas\u0131:<\/strong>
\n * Sunulan her bir hizmetin veya \u00fcr\u00fcn\u00fcn ayr\u0131nt\u0131l\u0131 a\u00e7\u0131klamalar\u0131.
\n * \u00d6zellikler, faydalar ve fiyatland\u0131rma bilgileri (e\u011fer varsa).
\n * Her hizmet i\u00e7in ayr\u0131nt\u0131l\u0131 sayfalar veya modal pencereler arac\u0131l\u0131\u011f\u0131yla daha fazla bilgiye eri\u015fim imkan\u0131.
\n4. Portf\u00f6y\/Galeri Sayfas\u0131:<\/strong>
\n * Tamamlanm\u0131\u015f projelerin veya g\u00f6rsel \u00e7al\u0131\u015fmalar\u0131n sergilendi\u011fi bir alan.
\n * Her proje i\u00e7in bir g\u00f6rsel, ba\u015fl\u0131k, k\u0131sa a\u00e7\u0131klama ve detay sayfas\u0131na ba\u011flant\u0131.
\n * Filtreleme veya kategori se\u00e7enekleri (CSS ile basit filtreleme yap\u0131labilir, ancak daha geli\u015fmi\u015fi i\u00e7in JS gerekebilir).
\n5. \u0130leti\u015fim Sayfas\u0131:<\/strong>
\n * Bir ileti\u015fim formu (yaln\u0131zca HTML ve CSS ile stilize edilmi\u015f, form g\u00f6nderimi i\u00e7in bir backend entegrasyonu gerektirir).
\n * \u015eirketin adresi, telefon numaras\u0131 ve e-posta adresi gibi ileti\u015fim bilgileri.
\n * Konumun g\u00f6sterildi\u011fi bir harita (iframe<\/code> ile entegre edilebilir).<\/p>\nEn \u0130yi Uygulamalar ve S\u00fcrd\u00fcr\u00fclebilirlik<\/h3>\n
Kod Kalitesi ve Bak\u0131m<\/h4>\n
\n* Mod\u00fcler CSS:<\/strong> Stiller, genel stiller (reset, tipografi), d\u00fczen stilleri (grid, flexbox), bile\u015fen stilleri (kartlar, d\u00fc\u011fmeler, navigasyon) ve yard\u0131mc\u0131 s\u0131n\u0131flar gibi mant\u0131ksal b\u00f6l\u00fcmlere ayr\u0131lm\u0131\u015ft\u0131r. Bu mod\u00fcler yap\u0131, kod tekrar\u0131n\u0131 azalt\u0131r ve belirli bir bile\u015fende yap\u0131lan de\u011fi\u015fikli\u011fin di\u011fer k\u0131s\u0131mlar\u0131 etkilememesini sa\u011flar.
\n* CSS De\u011fi\u015fkenleri (Custom Properties):<\/strong> Renkler, font boyutlar\u0131, bo\u015fluklar gibi s\u0131k kullan\u0131lan de\u011ferler CSS de\u011fi\u015fkenleri olarak tan\u0131mlanm\u0131\u015ft\u0131r. Bu, tema de\u011fi\u015fikliklerini veya genel stil g\u00fcncellemelerini tek bir yerden kolayca yapmay\u0131 m\u00fcmk\u00fcn k\u0131lar. \u00d6rne\u011fin, ana renk de\u011fi\u015ftirildi\u011finde, bu rengi kullanan t\u00fcm \u00f6\u011feler otomatik olarak g\u00fcncellenir.
\n* Yorumlar:<\/strong> Karma\u015f\u0131k veya \u00f6zel durumlar\u0131 a\u00e7\u0131klayan yorumlar, kodun anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 art\u0131rmak i\u00e7in kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\nEri\u015filebilirlik (Accessibility – A11y)<\/h4>\n
\n* Anlaml\u0131 alt<\/code> Metinleri:<\/strong> T\u00fcm g\u00f6rseller i\u00e7in a\u00e7\u0131klay\u0131c\u0131 alt<\/code> metinleri sa\u011flanm\u0131\u015ft\u0131r. Bu, g\u00f6rme engelli kullan\u0131c\u0131lar\u0131n resimlerin i\u00e7eri\u011fini anlamas\u0131n\u0131 sa\u011flar ve resimlerin y\u00fcklenememesi durumunda metinsel bir alternatif sunar.
\n* Yeterli Renk Kontrast\u0131:<\/strong> Metin ve arka plan renkleri aras\u0131nda yeterli kontrast oranlar\u0131 sa\u011flanm\u0131\u015ft\u0131r. Bu, renk k\u00f6r\u00fc veya g\u00f6rme bozuklu\u011fu olan kullan\u0131c\u0131lar i\u00e7in metinlerin okunabilirli\u011fini art\u0131r\u0131r.
\n* Klavye Navigasyonu:<\/strong> Site, sadece fare ile de\u011fil, klavye ile de tamamen gezilebilir olacak \u015fekilde tasarlanm\u0131\u015ft\u0131r. Odaklanabilir \u00f6\u011feler (a<\/code>, button<\/code>, input<\/code> vb.) uygun outline<\/code> stillerine sahiptir ve tabindex<\/code> \u00f6zniteli\u011fi, gerekirse odak s\u0131ras\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131lm\u0131\u015ft\u0131r.
\n* Anla\u015f\u0131l\u0131r Ba\u011flant\u0131 Metinleri:<\/strong> Ba\u011flant\u0131 metinleri, hedeflerini a\u00e7\u0131k\u00e7a belirtecek \u015fekilde yaz\u0131lm\u0131\u015ft\u0131r (\u00f6rne\u011fin, “Buraya t\u0131klay\u0131n” yerine “Hizmetlerimiz sayfas\u0131n\u0131 ziyaret edin”).<\/p>\nPerformans Optimizasyonu (Temel Seviye)<\/h4>\n
\n* Minimalist CSS:<\/strong> Gereksiz veya kullan\u0131lmayan CSS kodundan ka\u00e7\u0131n\u0131lm\u0131\u015ft\u0131r. Temiz ve odaklanm\u0131\u015f stil kurallar\u0131, dosya boyutunu k\u00fc\u00e7\u00fck tutar.
\n* Harici Stil Sayfalar\u0131:<\/strong> T\u00fcm CSS kodunun tek bir harici dosyada toplanmas\u0131, taray\u0131c\u0131lar\u0131n bu dosyay\u0131 \u00f6nbelle\u011fe almas\u0131n\u0131 ve sonraki sayfa y\u00fcklemelerinde tekrar indirmesini engeller, b\u00f6ylece y\u00fckleme s\u00fcreleri k\u0131sal\u0131r.
\n* Taray\u0131c\u0131 Uyumlu\u011fu:<\/strong> CSS kurallar\u0131, modern taray\u0131c\u0131lar\u0131n \u00e7o\u011funda tutarl\u0131 bir \u015fekilde \u00e7al\u0131\u015facak \u015fekilde yaz\u0131lm\u0131\u015ft\u0131r. Gerekli durumlarda, vendor prefixes<\/code> (\u00f6rne\u011fin, -webkit-<\/code>, -moz-<\/code>) kullan\u0131lm\u0131\u015ft\u0131r, ancak modern CSS’te bu ihtiya\u00e7 giderek azalmaktad\u0131r.<\/p>\nDemonstre Edilen Bile\u015fenler ve \u00d6zellikler<\/h3>\n
Navigasyon ve Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fc<\/h4>\n
display<\/code> \u00f6zellikleri, :checked<\/code> pseudo-s\u0131n\u0131f\u0131 ve label<\/code> etiketi kullan\u0131larak JavaScript olmadan elde edilmi\u015ftir.
\n* Logo ve Marka Kimli\u011fi:<\/strong> header<\/code> i\u00e7inde yer alan logo, markan\u0131n g\u00f6rsel kimli\u011fini yans\u0131t\u0131r ve ana sayfaya ba\u011flant\u0131 sa\u011flar.<\/p>\n\u0130\u00e7erik Sunumu<\/h4>\n
background-size: cover<\/code> ve background-position: center<\/code> gibi CSS \u00f6zellikleri ile duyarl\u0131 hale getirilmesi sa\u011flanm\u0131\u015ft\u0131r.
\n* Kart D\u00fczenleri:<\/strong> Hizmetleri, \u00fcr\u00fcnleri, portf\u00f6y \u00f6\u011felerini veya blog yaz\u0131lar\u0131n\u0131 sunmak i\u00e7in kullan\u0131lan mod\u00fcler kart bile\u015fenleri. Bu kartlar, Flexbox<\/code> veya CSS Grid<\/code> kullan\u0131larak d\u00fczenlenmi\u015ftir ve her biri bir ba\u015fl\u0131k, k\u0131sa bir a\u00e7\u0131klama ve bir g\u00f6rsel i\u00e7erir. \u00dczerine gelindi\u011finde (hover) g\u00f6lge veya hafif bir b\u00fcy\u00fcme gibi etkile\u015fimli efektler eklenmi\u015ftir.
\n* G\u00f6rsel Galeriler:<\/strong> Portf\u00f6y sayfas\u0131nda, resimlerin d\u00fczenli bir \u0131zgarada sunuldu\u011fu bir galeri bulunmaktad\u0131r. Bu galeri, CSS Grid kullan\u0131larak farkl\u0131 ekran boyutlar\u0131nda otomatik olarak uyum sa\u011flayacak \u015fekilde tasarlanm\u0131\u015ft\u0131r.<\/p>\nFormlar ve D\u00fc\u011fmeler<\/h4>\n
input<\/code>, textarea<\/code>) ve g\u00f6nder d\u00fc\u011fmesi (button<\/code>) stilize edilmi\u015ftir. Odakland\u0131\u011f\u0131nda veya yanl\u0131\u015f giri\u015f yap\u0131ld\u0131\u011f\u0131nda (yaln\u0131zca CSS ile basit do\u011frulama g\u00f6rseli) farkl\u0131 stiller g\u00f6sterir. Formun g\u00f6nderim i\u015flevi i\u00e7in sunucu taraf\u0131 bir betik gereklidir, ancak g\u00f6rsel tasar\u0131m\u0131 tamamen HTML ve CSS ile sa\u011flanm\u0131\u015ft\u0131r.
\n* D\u00fc\u011fmeler (Buttons):<\/strong> Farkl\u0131 boyutlarda, renklerde ve stillerde d\u00fc\u011fmeler (.btn-primary<\/code>, .btn-secondary<\/code>, .btn-outline<\/code> gibi s\u0131n\u0131f adlar\u0131yla) tasarlanm\u0131\u015ft\u0131r. \u00dczerlerine gelindi\u011finde veya t\u0131kland\u0131\u011f\u0131nda g\u00f6rsel geri bildirim sa\u011flayan hover ve active efektleri i\u00e7erirler.<\/p>\nDi\u011fer Bile\u015fenler<\/h4>\n
Flexbox<\/code> veya CSS Grid<\/code> kullan\u0131larak d\u00fczenlenmi\u015ftir ve duyarl\u0131d\u0131r.
\n* Tipografik Hiyerar\u015fi:<\/strong> h1<\/code>‘den h6<\/code>‘ya kadar ba\u015fl\u0131klar, paragraflar (p<\/code>), listeler (ul<\/code>, ol<\/code>) ve ba\u011flant\u0131lar (a<\/code>) i\u00e7in tutarl\u0131 ve okunakl\u0131 stil kurallar\u0131 tan\u0131mlanm\u0131\u015ft\u0131r. font-family<\/code>, font-size<\/code>, line-height<\/code> gibi \u00f6zellikler, i\u00e7eri\u011fin kolayca taranabilmesini ve okunabilmesini sa\u011flar.
\n* \u0130konlar:<\/strong> Font Awesome veya benzeri bir ikon k\u00fct\u00fcphanesi (CSS tabanl\u0131) kullan\u0131larak, navigasyon, sosyal medya ba\u011flant\u0131lar\u0131 veya \u00f6zellik listeleri gibi yerlerde g\u00f6rsel ipu\u00e7lar\u0131 sa\u011flayan ikonlar entegre edilmi\u015ftir.<\/p>\nS\u0131n\u0131rlamalar ve Gelecekteki Geli\u015ftirmeler<\/h3>\n
HTML ve CSS’in S\u0131n\u0131rlamalar\u0131<\/h4>\n
\n* Geli\u015fmi\u015f Etkile\u015fim ve Mant\u0131k:<\/strong> Karma\u015f\u0131k animasyonlar, s\u00fcr\u00fckle-b\u0131rak i\u015flevselli\u011fi, anl\u0131k arama filtreleri, kayd\u0131r\u0131c\u0131lar (carousels) veya ger\u00e7ek zamanl\u0131 g\u00fcncellemeler gibi geli\u015fmi\u015f kullan\u0131c\u0131 etkile\u015fimleri genellikle JavaScript gerektirir. CSS ile baz\u0131 basit animasyonlar ve ge\u00e7i\u015fler yap\u0131labilse de, tam te\u015fekk\u00fcll\u00fc dinamik davran\u0131\u015flar i\u00e7in JavaScript vazge\u00e7ilmezdir.
\n* Kullan\u0131c\u0131 Kimlik Do\u011frulama ve Oturum Y\u00f6netimi:<\/strong> Kullan\u0131c\u0131 kayd\u0131, giri\u015f yapma, oturum a\u00e7ma gibi i\u015flemler veya ki\u015fiselle\u015ftirilmi\u015f kullan\u0131c\u0131 deneyimleri i\u00e7in bir backend sistemi ve JavaScript gereklidir.
\n* Performans Optimizasyonunun S\u0131n\u0131rlar\u0131:<\/strong> HTML ve CSS dosya boyutlar\u0131n\u0131 optimize etmek m\u00fcmk\u00fcn olsa da, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar i\u00e7in daha ileri performans optimizasyonlar\u0131 (\u00f6rne\u011fin, kod b\u00f6lme, lazy loading, sunucu taraf\u0131 render) genellikle JavaScript \u00e7er\u00e7eveleri ve backend teknolojileriyle birlikte gelir.<\/p>\nPotansiyel Gelecek Geli\u015ftirmeler<\/h4>\n
\n * Dinamik UI Bile\u015fenleri:<\/strong> Geli\u015fmi\u015f kayd\u0131r\u0131c\u0131lar, a\u00e7\u0131l\u0131r men\u00fcler, modal pencereler ve form do\u011frulama gibi etkile\u015fimli bile\u015fenler i\u00e7in JavaScript eklenebilir.
\n * API Entegrasyonlar\u0131:<\/strong> Hava durumu widget’lar\u0131, sosyal medya ak\u0131\u015flar\u0131 veya harita entegrasyonlar\u0131 gibi harici API’lerden veri \u00e7ekmek i\u00e7in JavaScript kullan\u0131labilir.
\n * Tek Sayfa Uygulamalar\u0131 (SPA):<\/strong> React, Vue veya Angular gibi JavaScript \u00e7er\u00e7eveleri kullan\u0131larak, daha dinamik ve h\u0131zl\u0131 yan\u0131t veren tek sayfa uygulamalar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fclebilir.
\n* Backend Entegrasyonu:<\/strong>
\n * \u0130leti\u015fim Formu \u0130\u015fleme:<\/strong> Form g\u00f6nderimlerini i\u015flemek ve e-postalar g\u00f6ndermek i\u00e7in bir sunucu taraf\u0131 beti\u011fi (\u00f6rne\u011fin, PHP, Python Flask\/Django, Node.js Express) entegre edilebilir.
\n * \u0130\u00e7erik Y\u00f6netim Sistemi (CMS):<\/strong> WordPress, Strapi veya Headless CMS gibi bir CMS ile entegre edilerek, i\u00e7erik olu\u015fturucular\u0131n kod yazmadan kolayca i\u00e7erik eklemesi, d\u00fczenlemesi ve y\u00f6netmesi sa\u011flanabilir.
\n * Veritaban\u0131 Deste\u011fi:<\/strong> Blog yaz\u0131lar\u0131, \u00fcr\u00fcn kataloglar\u0131 veya kullan\u0131c\u0131 profilleri gibi dinamik i\u00e7eri\u011fi depolamak ve y\u00f6netmek i\u00e7in bir veritaban\u0131 (SQL veya NoSQL) eklenebilir.
\n* Geli\u015fmi\u015f CSS Y\u00f6netimi:<\/strong>
\n * CSS Preprocessor’lar\u0131 (SASS\/LESS):<\/strong> Daha karma\u015f\u0131k projelerde, de\u011fi\u015fkenler, mixin’ler, i\u00e7 i\u00e7e kurallar ve fonksiyonlar gibi \u00f6zellikler sunan SASS veya LESS gibi preprocessor’lar kullan\u0131larak CSS kodu daha mod\u00fcler ve y\u00f6netilebilir hale getirilebilir.
\n * CSS Mod\u00fclleri\/CSS-in-JS:<\/strong> B\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda stil \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek ve bile\u015fen tabanl\u0131 stilizasyonu g\u00fc\u00e7lendirmek i\u00e7in CSS Mod\u00fclleri veya Styled Components gibi CSS-in-JS k\u00fct\u00fcphaneleri kullan\u0131labilir.
\n* Performans \u0130yile\u015ftirmeleri:<\/strong>
\n * Minifikasyon ve S\u0131k\u0131\u015ft\u0131rma:<\/strong> HTML, CSS ve JavaScript dosyalar\u0131 \u00fcretim ortam\u0131nda otomatik olarak s\u0131k\u0131\u015ft\u0131r\u0131labilir ve k\u00fc\u00e7\u00fclt\u00fclebilir.
\n * CDN Kullan\u0131m\u0131:<\/strong> Statik dosyalar (resimler, CSS, JS) bir \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) \u00fczerinden sunularak y\u00fckleme s\u00fcreleri iyile\u015ftirilebilir.
\n * Hizmet \u00c7al\u0131\u015fanlar\u0131 (Service Workers):<\/strong> \u00c7evrimd\u0131\u015f\u0131 yetenekler ve daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri i\u00e7in hizmet \u00e7al\u0131\u015fanlar\u0131 eklenebilir.
\n* Test ve Otomasyon:<\/strong>
\n * Otomatik Testler:<\/strong> UI\/UX testleri ve performans testleri i\u00e7in otomatik test ara\u00e7lar\u0131 entegre edilebilir.
\n * Geli\u015ftirme \u0130\u015f Ak\u0131\u015f\u0131:<\/strong> Gulp, Webpack veya Vite gibi otomasyon ara\u00e7lar\u0131 kullan\u0131larak geli\u015ftirme s\u00fcreci h\u0131zland\u0131r\u0131labilir ve hatalar azalt\u0131labilir.<\/p>\nSonu\u00e7<\/h3>\n