Web Sitemin Ba\u015fl\u0131\u011f\u0131<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n <header class=\"main-header\">\n <div class=\"container\">\n <div class=\"logo\">\n <a href=\"\/\">\n <img decoding=\"async\" src=\"logo.png\" alt=\"\u015eirket Logosu\">\n <\/a>\n <\/div>\n <nav class=\"main-nav\">\n <ul>\n <li><a href=\"#anasayfa\">Anasayfa<\/a><\/li>\n <li><a href=\"#hakkimizda\">Hakk\u0131m\u0131zda<\/a><\/li>\n <li><a href=\"#hizmetler\">Hizmetler<\/a><\/li>\n <li><a href=\"#portfolyo\">Portfolyo<\/a><\/li>\n <li><a href=\"#iletisim\">\u0130leti\u015fim<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/div>\n <\/header>\n\n <main>\n \n \n Buras\u0131 sayfan\u0131z\u0131n ana i\u00e7eri\u011fidir.<\/p>\n <\/main>\n\n <footer>\n \n © 2023 \u015eirket Ad\u0131. T\u00fcm Haklar\u0131 Sakl\u0131d\u0131r.<\/p>\n <\/footer>\n<\/body>\n<\/html><\/code><\/pre>\nYukar\u0131daki HTML yap\u0131s\u0131n\u0131 inceleyelim:<\/p>\n* <code><\/p>\n<header class=\"main-header\"><\/code><\/strong>: Bu, t\u00fcm ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcm\u00fcz\u00fc saran ana etikettir. <code>main-header<\/code> s\u0131n\u0131f\u0131, bu b\u00f6l\u00fcme \u00f6zel CSS stilleri uygulamak i\u00e7in kullan\u0131lacakt\u0131r. \n* <code><\/p>\n<div class=\"container\"><\/code><\/strong>: Genellikle bir web sayfas\u0131n\u0131n i\u00e7eri\u011fini merkezlemek ve belirli bir geni\u015flikte tutmak i\u00e7in kullan\u0131lan genel bir kapsay\u0131c\u0131d\u0131r. Bu, ba\u015fl\u0131k i\u00e7eri\u011fimizin ekran\u0131n kenarlar\u0131na yap\u0131\u015fmas\u0131n\u0131 engelleyecek ve daha d\u00fczenli bir g\u00f6r\u00fcn\u00fcm sa\u011flayacakt\u0131r. \n* <code><\/p>\n<div class=\"logo\"><\/code><\/strong>: Logomuzu bar\u0131nd\u0131ran b\u00f6l\u00fcm. \n * <code><a href=\"\/\"><\/code><\/strong>: Logo genellikle ana sayfaya ba\u011flant\u0131 verir. Bu nedenle bir <code><a><\/code> etiketi i\u00e7ine al\u0131nm\u0131\u015ft\u0131r. \n * <code><img decoding=\"async\" src=\"logo.png\" alt=\"\u015eirket Logosu\"><\/code><\/strong>: Sitenizin g\u00f6rsel logosu. <code>alt<\/code> niteli\u011fi, resim y\u00fcklenmedi\u011finde veya ekran okuyucular taraf\u0131ndan kullan\u0131ld\u0131\u011f\u0131nda alternatif metin sa\u011flar; eri\u015filebilirlik i\u00e7in \u00e7ok \u00f6nemlidir. \n* <code><\/p>\n<nav class=\"main-nav\"><\/code><\/strong>: Navigasyon men\u00fcs\u00fcn\u00fc i\u00e7eren semantik etikettir. Arama motorlar\u0131 ve ekran okuyucular i\u00e7in bu b\u00f6l\u00fcm\u00fcn ana navigasyon oldu\u011funu belirtir. \n * <code><\/p>\n<ul><\/code> ve <code><\/p>\n<li><\/code><\/strong>: S\u0131ras\u0131z liste (unordered list) ve liste \u00f6\u011feleri (list items), navigasyon men\u00fcleri i\u00e7in standart ve eri\u015filebilir bir yap\u0131d\u0131r. \n * <code><a href=\"#anasayfa\"><\/code><\/strong>: Her bir men\u00fc \u00f6\u011fesi, ilgili sayfaya veya sayfa i\u00e7i bir b\u00f6l\u00fcme ba\u011flant\u0131 veren bir <code><a><\/code> etiketi i\u00e7erir. <code>#anasayfa<\/code> gibi de\u011ferler, sayfa i\u00e7i ba\u011flant\u0131lar\u0131 temsil eder.<\/p>\nBu temel yap\u0131, CSS ile \u015fekillendirmeye ba\u015flamak i\u00e7in sa\u011flam bir temel olu\u015fturur.<\/p>\n<h3>CSS ile Temel \u015eekillendirme ve D\u00fczen<\/h3>\nHTML yap\u0131m\u0131z\u0131 kurduktan sonra, s\u0131ra CSS kullanarak bu yap\u0131ya hayat vermeye gelir. Renkler, yaz\u0131 tipleri, boyutlar ve \u00f6zellikle \u00f6\u011felerin ekranda nas\u0131l konumlanaca\u011f\u0131, tamamen CSS ile kontrol edilir.<\/p>\n<h4>Genel Stil S\u0131f\u0131rlamalar\u0131 ve Temel Ayarlar<\/h4>\nHer taray\u0131c\u0131n\u0131n varsay\u0131lan stil kurallar\u0131 farkl\u0131l\u0131k g\u00f6sterebilir. Bu tutars\u0131zl\u0131klar\u0131 gidermek ve kendi stilimize temiz bir ba\u015flang\u0131\u00e7 yapmak i\u00e7in genellikle genel stil s\u0131f\u0131rlamalar\u0131 (reset CSS) uygulan\u0131r.<\/p>\n<pre><code class=\"language-css\">\/ style.css <\/em>\/\n\n\/ Genel S\u0131f\u0131rlama <\/em>\/\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box; \/ T\u00fcm elemanlar\u0131n kutu modelini de\u011fi\u015ftirir <\/em>\/\n}\n\n\/ Temel G\u00f6vde Stilleri <\/em>\/\nbody {\n font-family: 'Arial', sans-serif; \/ Varsay\u0131lan yaz\u0131 tipi <\/em>\/\n line-height: 1.6; \/ Sat\u0131r y\u00fcksekli\u011fi <\/em>\/\n color: #333; \/ Varsay\u0131lan metin rengi <\/em>\/\n background-color: #f4f4f4; \/ Arka plan rengi <\/em>\/\n}\n\n\/ Ba\u011flant\u0131 Stilleri <\/em>\/\na {\n text-decoration: none; \/ Ba\u011flant\u0131 alt \u00e7izgilerini kald\u0131r\u0131r <\/em>\/\n color: inherit; \/ Ba\u011flant\u0131 rengini \u00fcst \u00f6\u011feden miras al\u0131r <\/em>\/\n}\n\n\/ Liste Stilleri <\/em>\/\nul {\n list-style: none; \/ Liste i\u015faretlerini kald\u0131r\u0131r <\/em>\/\n}<\/code><\/pre>\n <code><\/em> { margin: 0; padding: 0; box-sizing: border-box; }<\/code><\/strong>: Bu evrensel se\u00e7ici, t\u00fcm HTML \u00f6\u011felerinin varsay\u0131lan kenar bo\u015fluklar\u0131n\u0131 (<code>margin<\/code>) ve i\u00e7 bo\u015fluklar\u0131n\u0131 (<code>padding<\/code>) s\u0131f\u0131rlar. <code>box-sizing: border-box;<\/code> \u00f6zelli\u011fi ise, bir \u00f6\u011fenin geni\u015flik ve y\u00fcksekli\u011finin <code>padding<\/code> ve <code>border<\/code> de\u011ferlerini de i\u00e7ermesini sa\u011flar. Bu, d\u00fczen hesaplamalar\u0131n\u0131 \u00e7ok daha kolay hale getirir. \n* <code>body<\/code> stilleri<\/strong>: Sayfan\u0131n genel yaz\u0131 tipini, sat\u0131r y\u00fcksekli\u011fini, metin rengini ve arka plan rengini belirler. \n* <code>a<\/code> stilleri<\/strong>: Ba\u011flant\u0131lar\u0131n varsay\u0131lan alt \u00e7izgilerini kald\u0131r\u0131r ve rengini \u00fcst \u00f6\u011feden miras almas\u0131n\u0131 sa\u011flar, b\u00f6ylece daha tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm elde edilir. \n* <code>ul<\/code> stilleri<\/strong>: Liste \u00f6\u011felerinin varsay\u0131lan madde i\u015faretlerini kald\u0131r\u0131r, navigasyon men\u00fcleri i\u00e7in temiz bir ba\u015flang\u0131\u00e7 sa\u011flar.<\/p>\n<h4>Header Kapsay\u0131c\u0131s\u0131 (Container) Olu\u015fturma<\/h4>\n\u015eimdi <code>main-header<\/code> ve <code>container<\/code> s\u0131n\u0131flar\u0131m\u0131za stil vererek ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fcn genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve d\u00fczenini olu\u015ftural\u0131m. Flexbox, modern web d\u00fczenleri i\u00e7in en g\u00fc\u00e7l\u00fc ve esnek CSS \u00f6zelliklerinden biridir ve ba\u015fl\u0131k d\u00fczenimizi olu\u015fturmak i\u00e7in idealdir.<\/p>\n<pre><code class=\"language-css\">\/ style.css devam\u0131 <\/em>\/\n\n.main-header {\n background-color: #ffffff; \/ Beyaz arka plan <\/em>\/\n padding: 15px 0; \/ \u00dcst ve alt i\u00e7 bo\u015fluk <\/em>\/\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); \/ Hafif bir g\u00f6lge efekti <\/em>\/\n width: 100%; \/ Tam geni\u015flik <\/em>\/\n z-index: 1000; \/ Di\u011fer \u00f6\u011felerin \u00fczerinde kalmas\u0131n\u0131 sa\u011flar <\/em>\/\n position: relative; \/ Z-index'in \u00e7al\u0131\u015fmas\u0131 i\u00e7in gerekli <\/em>\/\n}\n\n.container {\n max-width: 1200px; \/ Maksimum geni\u015flik <\/em>\/\n margin: 0 auto; \/ Ortalamak i\u00e7in kenar bo\u015fluklar\u0131 <\/em>\/\n padding: 0 20px; \/ Sa\u011f ve sol i\u00e7 bo\u015fluk <\/em>\/\n display: flex; \/ \u0130\u00e7 \u00f6\u011feleri Flexbox ile d\u00fczenle <\/em>\/\n justify-content: space-between; \/ \u00d6\u011feleri iki yana yasla (logo sol, men\u00fc sa\u011f) <\/em>\/\n align-items: center; \/ \u00d6\u011feleri dikeyde ortala <\/em>\/\n}<\/code><\/pre>\n* <code>.main-header<\/code><\/strong>: \n * <code>background-color: #ffffff;<\/code>: Ba\u015fl\u0131k i\u00e7in beyaz bir arka plan rengi ayarlar. \n * <code>padding: 15px 0;<\/code>: \u00dcstte ve altta 15 piksel i\u00e7 bo\u015fluk b\u0131rak\u0131r, sa\u011fda ve solda i\u00e7 bo\u015fluk b\u0131rakmaz. \n * <code>box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);<\/code>: Ba\u015fl\u0131\u011fa hafif bir alt g\u00f6lge efekti ekleyerek sayfan\u0131n geri kalan\u0131ndan ayr\u0131lmas\u0131n\u0131 sa\u011flar. \n * <code>width: 100%;<\/code>: Ba\u015fl\u0131\u011f\u0131n taray\u0131c\u0131 penceresinin tam geni\u015fli\u011fini kaplamas\u0131n\u0131 sa\u011flar. \n * <code>z-index: 1000; position: relative;<\/code>: Bu \u00f6zellikler, ba\u015fl\u0131\u011f\u0131n di\u011fer sayfa \u00f6\u011felerinin \u00fczerinde g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in kullan\u0131l\u0131r, \u00f6zellikle kayd\u0131r\u0131labilir (sticky) veya sabit (fixed) bir ba\u015fl\u0131k olu\u015fturuldu\u011funda \u00f6nemlidir. <code>position<\/code> \u00f6zelli\u011fi olmadan <code>z-index<\/code> genellikle \u00e7al\u0131\u015fmaz. \n* <code>.container<\/code><\/strong>: \n * <code>max-width: 1200px;<\/code>: \u0130\u00e7eri\u011fin maksimum geni\u015fli\u011fini 1200 piksel ile s\u0131n\u0131rlar. Bu, b\u00fcy\u00fck ekranlarda i\u00e7eri\u011fin \u00e7ok fazla yay\u0131lmas\u0131n\u0131 engeller. \n * <code>margin: 0 auto;<\/code>: \u00d6\u011feyi yatayda ortalar. \u00dcst ve alt kenar bo\u015fluklar\u0131 0, sa\u011f ve sol kenar bo\u015fluklar\u0131 otomatik olarak ayarlan\u0131r. \n * <code>padding: 0 20px;<\/code>: \u0130\u00e7eri\u011fin ekran\u0131n kenarlar\u0131na \u00e7ok fazla yakla\u015fmas\u0131n\u0131 \u00f6nlemek i\u00e7in sa\u011fda ve solda 20 piksel i\u00e7 bo\u015fluk b\u0131rak\u0131r. \n * <code>display: flex;<\/code>: Bu, <code>.container<\/code> i\u00e7indeki do\u011frudan \u00e7ocuk \u00f6\u011felerini (bu durumda <code>.logo<\/code> ve <code>.main-nav<\/code>) bir Flex konteyneri haline getirir. Bu, \u00f6\u011feleri kolayca hizalamak ve da\u011f\u0131tmak i\u00e7in Flexbox \u00f6zelliklerini kullanabilece\u011fimiz anlam\u0131na gelir. \n * <code>justify-content: space-between;<\/code>: Flex konteyneri i\u00e7indeki \u00f6\u011feleri ana eksen boyunca (varsay\u0131lan olarak yatayda) da\u011f\u0131t\u0131r. <code>space-between<\/code> de\u011feri, ilk \u00f6\u011feyi ba\u015flang\u0131ca, son \u00f6\u011feyi sona yerle\u015ftirir ve aralar\u0131ndaki bo\u015flu\u011fu e\u015fit \u015fekilde da\u011f\u0131t\u0131r. Bizim durumumuzda, logo sola ve navigasyon men\u00fcs\u00fc sa\u011fa hizalanacakt\u0131r. \n * <code>align-items: center;<\/code>: Flex konteyneri i\u00e7indeki \u00f6\u011feleri \u00e7apraz eksen boyunca (varsay\u0131lan olarak dikeyde) ortalar. Bu, logo ve navigasyon men\u00fcs\u00fcn\u00fcn dikey olarak ayn\u0131 hizada olmas\u0131n\u0131 sa\u011flar.<\/p>\nBu ad\u0131mlarla, ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcm\u00fcz\u00fcn genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve \u00f6\u011felerinin nas\u0131l konumlanaca\u011f\u0131n\u0131 belirledik.<\/p>\n<h3>Logo ve Marka Alan\u0131<\/h3>\nLogonuz, sitenizin kimli\u011finin merkezindedir. Hem g\u00f6rsel olarak \u00e7ekici hem de do\u011fru boyutland\u0131r\u0131lm\u0131\u015f olmal\u0131d\u0131r.<\/p>\n<h4>Logo Ekleme ve \u015eekillendirme<\/h4>\nHTML’de zaten bir <code><img><\/code> etiketi ile logomuzu eklemi\u015ftik. \u015eimdi bu logoya CSS ile stil verelim.<\/p>\n<pre><code class=\"language-css\">\/ style.css devam\u0131 <\/em>\/\n\n.logo img {\n max-height: 40px; \/ Logonun maksimum y\u00fcksekli\u011fi <\/em>\/\n width: auto; \/ Geni\u015fli\u011fi otomatik ayarla, oranlar\u0131 koru <\/em>\/\n display: block; \/ img eleman\u0131n\u0131n alt\u0131ndaki bo\u015flu\u011fu kald\u0131r\u0131r <\/em>\/\n}<\/code><\/pre>\n* <code>.logo img<\/code><\/strong>: \n * <code>max-height: 40px;<\/code>: Logonun maksimum y\u00fcksekli\u011fini 40 piksel olarak ayarlar. Bu, logonun \u00e7ok b\u00fcy\u00fck olmas\u0131n\u0131 engellerken, k\u00fc\u00e7\u00fck ekranlarda gerekti\u011finde k\u00fc\u00e7\u00fclmesine izin verir. \n * <code>width: auto;<\/code>: Geni\u015fli\u011fi otomatik olarak ayarlar, b\u00f6ylece resmin orijinal en boy oran\u0131 korunur. Bu \u00e7ok \u00f6nemlidir; aksi takdirde logo bozulabilir. \n * <code>display: block;<\/code>: <code><img><\/code> etiketi varsay\u0131lan olarak <code>inline-block<\/code> bir \u00f6\u011fedir. <code>block<\/code> olarak ayarlamak, baz\u0131 taray\u0131c\u0131larda resmin alt\u0131nda g\u00f6r\u00fcnen fazladan bo\u015flu\u011fu kald\u0131rmaya yard\u0131mc\u0131 olabilir.<\/p>\nE\u011fer logonuz sadece metin tabanl\u0131ysa (\u00f6rne\u011fin, sadece \u015firket ad\u0131n\u0131z), <code><img><\/code> etiketi yerine bir <code><\/p>\n<h1><\/code> veya <code><\/code> etiketi kullanabilir ve buna stil verebilirsiniz. Ancak semantik olarak, ana sayfa ba\u015fl\u0131\u011f\u0131 i\u00e7in <code><\/p>\n<h1><\/code> kullanmak daha do\u011fru olabilir. E\u011fer ba\u015fl\u0131kta hem logo hem de metin bazl\u0131 bir site ad\u0131 varsa, logo g\u00f6rselini gizleyip sadece metni g\u00f6steren bir eri\u015filebilirlik \u00e7\u00f6z\u00fcm\u00fc de d\u00fc\u015f\u00fcnebilirsiniz. Bu \u00f6rnekte, g\u00f6rsel bir logo kulland\u0131\u011f\u0131m\u0131z\u0131 varsay\u0131yoruz.<\/p>\n<h3>Navigasyon Men\u00fcs\u00fc Olu\u015fturma<\/h3>\nNavigasyon men\u00fcs\u00fc, kullan\u0131c\u0131lar\u0131n sitenizdeki farkl\u0131 b\u00f6l\u00fcmlere kolayca ula\u015fmas\u0131n\u0131 sa\u011flar. Temiz, okunakl\u0131 ve duyarl\u0131 bir men\u00fc, iyi bir kullan\u0131c\u0131 deneyimi i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h4>Temel Navigasyon Yap\u0131s\u0131<\/h4>\nHTML’de <code>main-nav<\/code> s\u0131n\u0131f\u0131na sahip bir <code><\/p>\n<nav><\/code> etiketi i\u00e7inde <code><\/p>\n<ul><\/code> ve <code><\/p>\n<li><\/code> \u00f6\u011feleriyle navigasyon yap\u0131m\u0131z\u0131 zaten olu\u015fturmu\u015ftuk. \u015eimdi bu yap\u0131ya CSS ile stil verelim.\n<pre><code class=\"language-css\">\/ style.css devam\u0131 <\/em>\/\n\n.main-nav ul {\n display: flex; \/ Liste \u00f6\u011felerini yatayda hizala <\/em>\/\n gap: 25px; \/ Men\u00fc \u00f6\u011feleri aras\u0131nda bo\u015fluk b\u0131rak <\/em>\/\n}\n\n.main-nav ul li a {\n color: #555; \/ Ba\u011flant\u0131 metin rengi <\/em>\/\n font-size: 16px; \/ Yaz\u0131 tipi boyutu <\/em>\/\n font-weight: 500; \/ Yaz\u0131 tipi kal\u0131nl\u0131\u011f\u0131 <\/em>\/\n padding: 5px 0; \/ \u0130\u00e7 bo\u015fluk <\/em>\/\n transition: color 0.3s ease; \/ Renk ge\u00e7i\u015f efekti <\/em>\/\n position: relative; \/ Alt \u00e7izgi animasyonu i\u00e7in <\/em>\/\n}\n\n.main-nav ul li a:hover {\n color: #007bff; \/ \u00dczerine gelindi\u011finde renk de\u011fi\u015fimi <\/em>\/\n}\n\n\/ Opsiyonel: Alt \u00e7izgi efekti <\/em>\/\n.main-nav ul li a::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: -5px; \/ Ba\u011flant\u0131n\u0131n alt\u0131nda konumland\u0131r <\/em>\/\n width: 0;\n height: 2px;\n background-color: #007bff; \/ \u00c7izgi rengi <\/em>\/\n transition: width 0.3s ease; \/ Geni\u015flik ge\u00e7i\u015f efekti <\/em>\/\n}\n\n.main-nav ul li a:hover::after {\n width: 100%; \/ \u00dczerine gelindi\u011finde alt \u00e7izginin geni\u015flemesi <\/em>\/\n}<\/code><\/pre>\n* <code>.main-nav ul<\/code><\/strong>: \n * <code>display: flex;<\/code>: <code><\/p>\n<ul><\/code> i\u00e7indeki <code><\/p>\n<li><\/code> \u00f6\u011felerini yatayda bir sat\u0131rda hizalar. \n * <code>gap: 25px;<\/code>: Flexbox’\u0131n yeni ve kullan\u0131\u015fl\u0131 bir \u00f6zelli\u011fidir. \u00d6\u011feler aras\u0131nda 25 piksel bo\u015fluk b\u0131rak\u0131r, b\u00f6ylece her bir <code><\/p>\n<li><\/code> \u00f6\u011fesine ayr\u0131 ayr\u0131 <code>margin-left<\/code> veya <code>margin-right<\/code> vermeye gerek kalmaz. \n* <code>.main-nav ul li a<\/code><\/strong>: Bu se\u00e7ici, men\u00fcdeki her bir ba\u011flant\u0131 \u00f6\u011fesine stil verir. \n * <code>color: #555;<\/code>: Ba\u011flant\u0131 metninin rengini ayarlar. \n * <code>font-size: 16px;<\/code>: Yaz\u0131 tipi boyutunu ayarlar. \n * <code>font-weight: 500;<\/code>: Yaz\u0131 tipini biraz daha kal\u0131n yapar. \n * <code>padding: 5px 0;<\/code>: \u00dcstte ve altta 5 piksel i\u00e7 bo\u015fluk b\u0131rak\u0131r, sa\u011fda ve solda bo\u015fluk b\u0131rakmaz. Bu, ba\u011flant\u0131lar\u0131n t\u0131klanabilir alan\u0131n\u0131 art\u0131r\u0131r. \n * <code>transition: color 0.3s ease;<\/code>: Ba\u011flant\u0131n\u0131n rengi de\u011fi\u015fti\u011finde yumu\u015fak bir ge\u00e7i\u015f efekti sa\u011flar. <code>0.3s<\/code> ge\u00e7i\u015f s\u00fcresi ve <code>ease<\/code> ge\u00e7i\u015f fonksiyonudur. \n * <code>position: relative;<\/code>: Bu, <code>:after<\/code> s\u00f6zde-eleman\u0131 i\u00e7in bir referans noktas\u0131 sa\u011flar. Alt \u00e7izgi animasyonu i\u00e7in gereklidir. \n* <code>.main-nav ul li a:hover<\/code><\/strong>: Kullan\u0131c\u0131 fareyi bir men\u00fc \u00f6\u011fesinin \u00fczerine getirdi\u011finde (hover) rengini de\u011fi\u015ftirir. Bu, etkile\u015fimli bir geri bildirim sa\u011flar. \n* Alt \u00e7izgi efekti (iste\u011fe ba\u011fl\u0131)<\/strong>: \n * <code>::after<\/code> s\u00f6zde-eleman\u0131, her bir ba\u011flant\u0131n\u0131n arkas\u0131na dinamik bir \u00e7izgi eklemek i\u00e7in kullan\u0131l\u0131r. \n * <code>content: '';<\/code>: S\u00f6zde-eleman\u0131n i\u00e7eri\u011fini bo\u015f olarak ayarlar. \n * <code>position: absolute;<\/code>: Ba\u011flant\u0131 \u00f6\u011fesine g\u00f6re konumland\u0131r\u0131lmas\u0131n\u0131 sa\u011flar. \n * <code>left: 0; bottom: -5px;<\/code>: \u00c7izginin ba\u011flant\u0131n\u0131n solundan ba\u015flamas\u0131n\u0131 ve 5 piksel alt\u0131nda konumlanmas\u0131n\u0131 sa\u011flar. \n * <code>width: 0; height: 2px;<\/code>: Ba\u015flang\u0131\u00e7ta \u00e7izginin geni\u015fli\u011fi 0, y\u00fcksekli\u011fi 2 pikseldir. \n * <code>background-color: #007bff;<\/code>: \u00c7izginin rengini belirler. \n * <code>transition: width 0.3s ease;<\/code>: Geni\u015flik de\u011fi\u015fimi i\u00e7in yumu\u015fak bir ge\u00e7i\u015f efekti ekler. \n * <code>main-nav ul li a:hover::after { width: 100%; }<\/code>: Kullan\u0131c\u0131 fareyi ba\u011flant\u0131n\u0131n \u00fczerine getirdi\u011finde, \u00e7izginin geni\u015fli\u011fi %100’e \u00e7\u0131karak bir “alt\u0131 \u00e7izili” efekti olu\u015fturur.<\/p>\nBu CSS ile navigasyon men\u00fcm\u00fcz hem g\u00f6rsel olarak \u00e7ekici hem de etkile\u015fimli hale gelmi\u015f olur.<\/p>\n<h3>Duyarl\u0131 Tasar\u0131m\u0131n Temelleri (B\u00f6l\u00fcm 1 Kapsam\u0131nda)<\/h3>\nModern web sitelerinin en \u00f6nemli \u00f6zelliklerinden biri, farkl\u0131 cihazlarda (masa\u00fcst\u00fc, tablet, mobil telefon) iyi g\u00f6r\u00fcnmeleri ve i\u015flevsel olmalar\u0131d\u0131r. Bu, duyarl\u0131 tasar\u0131m (responsive design) ile sa\u011flan\u0131r. B\u00f6l\u00fcm 1’de, duyarl\u0131 tasar\u0131m\u0131n temel prensiplerine ve medya sorgular\u0131n\u0131n (media queries) basit kullan\u0131m\u0131na de\u011finece\u011fiz. Daha karma\u015f\u0131k mobil navigasyon \u00e7\u00f6z\u00fcmleri (hamburger men\u00fcleri gibi) B\u00f6l\u00fcm 2’de ele al\u0131nacakt\u0131r.<\/p>\n<h4>Mobil \u00d6ncelikli Yakla\u015f\u0131m ve Media Query’lere Giri\u015f<\/h4>\nDuyarl\u0131 tasar\u0131m i\u00e7in iki ana yakla\u015f\u0131m vard\u0131r: masa\u00fcst\u00fc \u00f6ncelikli (desktop-first) ve mobil \u00f6ncelikli (mobile-first). Mobil \u00f6ncelikli yakla\u015f\u0131m, daha k\u00fc\u00e7\u00fck ekranlar i\u00e7in stil yazmaya ba\u015flamak ve daha sonra medya sorgular\u0131 kullanarak daha b\u00fcy\u00fck ekranlar i\u00e7in stilleri ge\u00e7ersiz k\u0131lmak anlam\u0131na gelir. Bu genellikle daha iyi performans ve daha y\u00f6netilebilir CSS sa\u011flar. Biz bu makalede mobil \u00f6ncelikli bir yakla\u015f\u0131m benimseyece\u011fiz.<\/p>\nHTML’mizde zaten <code>viewport<\/code> meta etiketini eklemi\u015ftik: <code><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code>. Bu etiket, taray\u0131c\u0131n\u0131n sayfan\u0131n geni\u015fli\u011fini cihaz\u0131n ekran geni\u015fli\u011fine g\u00f6re ayarlamas\u0131n\u0131 ve ba\u015flang\u0131\u00e7 yak\u0131nla\u015ft\u0131rma seviyesini belirlemesini sa\u011flar, bu da duyarl\u0131 tasar\u0131m i\u00e7in olmazsa olmazd\u0131r.<\/p>\n\u015eimdi, daha k\u00fc\u00e7\u00fck ekranlar i\u00e7in ba\u015fl\u0131k d\u00fczenini nas\u0131l ayarlayaca\u011f\u0131m\u0131za bakal\u0131m. \u00d6rne\u011fin, \u00e7ok k\u00fc\u00e7\u00fck ekranlarda men\u00fc \u00f6\u011feleri aras\u0131ndaki bo\u015flu\u011fu azaltmak veya logonun boyutunu k\u00fc\u00e7\u00fcltmek isteyebiliriz.<\/p>\n<pre><code class=\"language-css\">\/ style.css devam\u0131 <\/em>\/\n\n\/ Mobil cihazlar i\u00e7in temel stiller (varsay\u0131lan olarak) <\/em>\/\n\/ (Yukar\u0131daki stiller zaten mobil \u00f6ncelikli olarak d\u00fc\u015f\u00fcn\u00fcld\u00fc) <\/em>\/\n\n\/ Tablet ve daha b\u00fcy\u00fck ekranlar i\u00e7in medya sorgusu <\/em>\/\n@media (min-width: 768px) {\n .main-header {\n padding: 20px 0; \/ Daha b\u00fcy\u00fck ekranlarda daha fazla i\u00e7 bo\u015fluk <\/em>\/\n }\n\n .logo img {\n max-height: 50px; \/ Daha b\u00fcy\u00fck ekranlarda logo y\u00fcksekli\u011fini art\u0131r <\/em>\/\n }\n\n .main-nav ul {\n gap: 30px; \/ Men\u00fc \u00f6\u011feleri aras\u0131nda daha fazla bo\u015fluk <\/em>\/\n }\n\n .main-nav ul li a {\n font-size: 17px; \/ Daha b\u00fcy\u00fck ekranlarda yaz\u0131 tipi boyutunu art\u0131r <\/em>\/\n }\n}\n\n\/ Masa\u00fcst\u00fc ve daha b\u00fcy\u00fck ekranlar i\u00e7in medya sorgusu <\/em>\/\n@media (min-width: 1024px) {\n .main-header {\n padding: 25px 0;\n }\n\n .logo img {\n max-height: 60px;\n }\n\n .main-nav ul {\n gap: 40px;\n }\n\n .main-nav ul li a {\n font-size: 18px;\n }\n}<\/code><\/pre>\n* <code>@media (min-width: 768px)<\/code><\/strong>: Bu medya sorgusu, ekran geni\u015fli\u011fi 768 piksel veya daha b\u00fcy\u00fck oldu\u011funda i\u00e7indeki CSS kurallar\u0131n\u0131n uygulanaca\u011f\u0131n\u0131 belirtir. Bu genellikle tablet boyutlar\u0131 i\u00e7in bir k\u0131r\u0131lma noktas\u0131d\u0131r. \n* <code>@media (min-width: 1024px)<\/code><\/strong>: Bu medya sorgusu ise ekran geni\u015fli\u011fi 1024 piksel veya daha b\u00fcy\u00fck oldu\u011funda i\u00e7indeki CSS kurallar\u0131n\u0131n uygulanaca\u011f\u0131n\u0131 belirtir. Bu da genellikle masa\u00fcst\u00fc ekranlar i\u00e7in bir k\u0131r\u0131lma noktas\u0131d\u0131r.<\/p>\nBu \u00f6rneklerde, daha b\u00fcy\u00fck ekranlara ge\u00e7tik\u00e7e ba\u015fl\u0131\u011f\u0131n dikey i\u00e7 bo\u015flu\u011funu, logonun maksimum y\u00fcksekli\u011fini, men\u00fc \u00f6\u011feleri aras\u0131ndaki bo\u015flu\u011fu ve men\u00fc ba\u011flant\u0131lar\u0131n\u0131n yaz\u0131 tipi boyutunu art\u0131r\u0131yoruz. Bu basit ayarlamalar bile farkl\u0131 cihazlarda daha dengeli ve estetik bir g\u00f6r\u00fcn\u00fcm sa\u011flar.<\/p>\n\u00d6nemli Not<\/strong>: K\u00fc\u00e7\u00fck ekranlarda navigasyon men\u00fcs\u00fcn\u00fcn do\u011frudan Flexbox ile yan yana durmas\u0131, men\u00fc \u00f6\u011felerinin s\u0131k\u0131\u015fmas\u0131na neden olabilir. Mobil cihazlar i\u00e7in genellikle “hamburger men\u00fc” ad\u0131 verilen, bir d\u00fc\u011fmeye t\u0131klanarak a\u00e7\u0131l\u0131p kapanan bir navigasyon men\u00fcs\u00fc kullan\u0131l\u0131r. Bu t\u00fcr geli\u015fmi\u015f duyarl\u0131 navigasyon \u00e7\u00f6z\u00fcmleri JavaScript gerektirebilir ve bu makalenin B\u00f6l\u00fcm 2’sinde daha detayl\u0131 ele al\u0131nacakt\u0131r. Bu b\u00f6l\u00fcmdeki amac\u0131m\u0131z, temel responsive kavramlar\u0131n\u0131 ve medya sorgular\u0131n\u0131n nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 anlamakt\u0131r.<\/p>\n<h3>\u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h3>\nHarika bir ba\u015fl\u0131k olu\u015fturman\u0131n sadece kodu yazmaktan ibaret olmad\u0131\u011f\u0131n\u0131 unutmamak \u00f6nemlidir. \u0130yi uygulamalar, kodunuzun kalitesini, s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve eri\u015filebilirli\u011fini art\u0131r\u0131r.<\/p>\n<h4>Semantik HTML Kullan\u0131m\u0131<\/h4>\nYukar\u0131da da vurgulad\u0131\u011f\u0131m\u0131z gibi, do\u011fru HTML5 semantik etiketlerini kullanmak (\u00f6rn. <code><\/p>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<ul><\/code>, <code><\/p>\n<li><\/code>, <code><a><\/code>) sadece kodunuzu daha okunabilir hale getirmekle kalmaz, ayn\u0131 zamanda arama motorlar\u0131n\u0131n sitenizi daha iyi anlamas\u0131na ve ekran okuyucular gibi yard\u0131mc\u0131 teknolojilerin kullan\u0131c\u0131lar i\u00e7in daha iyi bir deneyim sunmas\u0131na yard\u0131mc\u0131 olur. Her zaman i\u00e7eri\u011finizin amac\u0131na en uygun etiketi kullanmaya \u00e7al\u0131\u015f\u0131n. \n<h4>CSS De\u011fi\u015fkenleri (Custom Properties) Kullanma<\/h4>\nCSS de\u011fi\u015fkenleri (veya \u00f6zel \u00f6zellikler), tekrar eden de\u011ferleri (renkler, yaz\u0131 tipleri, bo\u015fluklar vb.) tek bir yerde tan\u0131mlaman\u0131za ve bunlar\u0131 CSS kodunuzun herhangi bir yerinde kullanman\u0131za olanak tan\u0131r. Bu, stil sayfalar\u0131n\u0131z\u0131 daha d\u00fczenli, s\u00fcrd\u00fcr\u00fclebilir ve kolayca g\u00fcncellenebilir hale getirir.<\/p>\n<pre><code class=\"language-css\">\/ style.css (en \u00fcstte tan\u0131mlanabilir) <\/em>\/\n:root {\n --primary-color: #007bff;\n --secondary-color: #555;\n --text-color: #333;\n --background-light: #ffffff;\n --shadow-light: rgba(0, 0, 0, 0.1);\n --font-family-sans: 'Arial', sans-serif;\n --header-padding-y: 15px;\n --container-max-width: 1200px;\n --gap-sm: 20px;\n --gap-md: 25px;\n}\n\n\/ Kullan\u0131m \u00f6rne\u011fi <\/em>\/\nbody {\n font-family: var(--font-family-sans);\n color: var(--text-color);\n}\n\n.main-header {\n background-color: var(--background-light);\n padding: var(--header-padding-y) 0;\n box-shadow: 0 2px 5px var(--shadow-light);\n}\n\n.main-nav ul li a {\n color: var(--secondary-color);\n}\n\n.main-nav ul li a:hover {\n color: var(--primary-color);\n}<\/code><\/pre>\nDe\u011fi\u015fkenleri kullanmak, sitenizin genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek istedi\u011finizde sadece birka\u00e7 de\u011feri g\u00fcncellemenizi sa\u011flar, bu da b\u00fcy\u00fck projelerde zaman kazand\u0131r\u0131r.<\/p>\n<h4>Eri\u015filebilirlik (Accessibility – A11y)<\/h4>\nWeb sitenizin herkes taraf\u0131ndan kullan\u0131labilir olmas\u0131 \u00f6nemlidir. Ba\u015fl\u0131k b\u00f6l\u00fcm\u00fc i\u00e7in eri\u015filebilirlik ipu\u00e7lar\u0131 \u015funlar\u0131 i\u00e7erir:<\/p>\n* Anlaml\u0131 <code>alt<\/code> metinleri<\/strong>: Logolar ve di\u011fer g\u00f6rseller i\u00e7in a\u00e7\u0131klay\u0131c\u0131 <code>alt<\/code> metinleri kullan\u0131n. \n* Odaklanma durumlar\u0131<\/strong>: Klavye ile gezinirken men\u00fc \u00f6\u011felerinin odaklanma durumlar\u0131n\u0131n (<code>:focus<\/code>) belirgin oldu\u011fundan emin olun. Bu, klavye kullan\u0131c\u0131lar\u0131 i\u00e7in hayati \u00f6neme sahiptir. \n* Yeterli kontrast<\/strong>: Metin ve arka plan renkleri aras\u0131nda yeterli kontrast oldu\u011fundan emin olun. WCAG (Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri) standartlar\u0131n\u0131 kontrol edin. \n* ARIA rolleri<\/strong>: Gerekirse, navigasyon gibi \u00f6\u011feler i\u00e7in <code>role=\"navigation\"<\/code> gibi ARIA rollerini kullan\u0131n, ancak semantik HTML etiketleri genellikle yeterlidir.<\/p>\n<h4>Kod Okunabilirli\u011fi ve Yorumlar<\/h4>\nKodunuzu temiz, d\u00fczenli ve iyi yorumlanm\u0131\u015f tutmak, hem sizin hem de gelecekte kod \u00fczerinde \u00e7al\u0131\u015facak di\u011fer geli\u015ftiriciler i\u00e7in \u00f6nemlidir. Her CSS kural\u0131n\u0131 ayr\u0131 bir sat\u0131rda yaz\u0131n, tutarl\u0131 girintileme kullan\u0131n ve karma\u015f\u0131k b\u00f6l\u00fcmleri a\u00e7\u0131klayan yorumlar ekleyin.<\/p>\n<pre><code class=\"language-css\">\/ Genel ba\u015fl\u0131k stilleri <\/em>\/\n.main-header {\n \/ Ba\u015fl\u0131k arka plan rengi ve i\u00e7 bo\u015fluk <\/em>\/\n background-color: #ffffff;\n padding: 15px 0;\n \/ Hafif bir alt g\u00f6lge efekti <\/em>\/\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre>\nBu basit uygulamalar, projenizin uzun vadede daha ba\u015far\u0131l\u0131 olmas\u0131na yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<h3>Sonu\u00e7 ve Sonraki Ad\u0131mlar<\/h3>\nBu makalenin ilk b\u00f6l\u00fcm\u00fcnde, bir web sitesinin ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fc CSS ile nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 temelden \u00f6\u011frendik. Semantik HTML yap\u0131s\u0131 kurmaktan, Flexbox kullanarak \u00f6\u011feleri d\u00fczenlemeye, logo ve navigasyon men\u00fcs\u00fcn\u00fc \u015fekillendirmeye ve duyarl\u0131 tasar\u0131m\u0131n ilk ad\u0131mlar\u0131n\u0131 atmaya kadar bir\u00e7ok konuyu ele ald\u0131k. Art\u0131k sitenizin ziyaret\u00e7ilerini kar\u015f\u0131layacak sa\u011flam ve estetik bir ba\u015fl\u0131k temeliniz var.<\/p>\n\u00d6zetle, \u015funlar\u0131 ba\u015fard\u0131k:<\/p>\n* HTML Yap\u0131s\u0131<\/strong>: <code><\/p>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<ul><\/code>, <code><\/p>\n<li><\/code> gibi semantik etiketleri kullanarak eri\u015filebilir ve anlaml\u0131 bir yap\u0131 olu\u015fturduk. \n* Genel Stiller<\/strong>: Taray\u0131c\u0131 farkl\u0131l\u0131klar\u0131n\u0131 gidermek ve tutarl\u0131 bir ba\u015flang\u0131\u00e7 yapmak i\u00e7in genel stil s\u0131f\u0131rlamalar\u0131 uygulad\u0131k. \n* Flexbox D\u00fczeni<\/strong>: <code>.container<\/code> \u00f6\u011fesini Flex konteyneri yaparak logo ve navigasyon men\u00fcs\u00fcn\u00fc yatayda hizalad\u0131k ve dikeyde ortalad\u0131k. \n* Logo Stilleri<\/strong>: Logonun do\u011fru boyutlarda ve oranlarda g\u00f6r\u00fcnmesini sa\u011flad\u0131k. \n* Navigasyon Men\u00fcs\u00fc<\/strong>: Men\u00fc \u00f6\u011felerine stil verdik, aralar\u0131nda bo\u015fluk b\u0131rakt\u0131k ve \u00fczerine gelindi\u011finde etkile\u015fimli efektler ekledik. \n* Duyarl\u0131 Tasar\u0131m\u0131n Temelleri<\/strong>: Medya sorgular\u0131n\u0131 kullanarak farkl\u0131 ekran boyutlar\u0131 i\u00e7in temel ayarlamalar yapt\u0131k, mobil \u00f6ncelikli yakla\u015f\u0131m\u0131n \u00f6nemini vurgulad\u0131k.<\/p>\nBu makalede \u00f6\u011frendi\u011finiz bilgiler, herhangi bir web projesinin temelini olu\u015fturacakt\u0131r. Ancak, ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fcn potansiyeli \u00e7ok daha geni\u015ftir.<\/p>\nWeb Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 2)<\/strong>‘de \u015funlar\u0131 ele alaca\u011f\u0131z:<\/p>\n* Geli\u015fmi\u015f Duyarl\u0131 Navigasyon<\/strong>: Mobil cihazlar i\u00e7in hamburger men\u00fcleri ve a\u00e7\u0131l\u0131r\/kapan\u0131r navigasyon panelleri olu\u015fturma. \n* Arama \u00c7ubu\u011fu Entegrasyonu<\/strong>: Ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcne i\u015flevsel bir arama \u00e7ubu\u011fu ekleme ve stil verme. \n* Sabit (Sticky) ve Kayd\u0131r\u0131labilir (Fixed) Ba\u015fl\u0131klar<\/strong>: Sayfa a\u015fa\u011f\u0131 kayd\u0131r\u0131ld\u0131\u011f\u0131nda ba\u015fl\u0131\u011f\u0131n ekran\u0131n \u00fcst\u00fcnde sabit kalmas\u0131n\u0131 sa\u011flama. \n* \u00c7ok Katmanl\u0131 Men\u00fcler (Dropdowns)<\/strong>: Alt men\u00fc \u00f6\u011feleri olan navigasyon ba\u011flant\u0131lar\u0131 olu\u015fturma. \n* Eri\u015filebilirlik ve Performans \u0130pu\u00e7lar\u0131<\/strong>: Geli\u015fmi\u015f eri\u015filebilirlik \u00f6zellikleri ve ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fcn performans\u0131n\u0131 optimize etme.<\/p>\nBu makaledeki \u00f6rnekleri kendi projelerinizde deneyerek ve farkl\u0131 de\u011ferlerle oynayarak bilginizi peki\u015ftirmenizi \u015fiddetle tavsiye ederiz. Pratik yapmak, \u00f6\u011frenmenin en iyi yoludur. Unutmay\u0131n, iyi bir ba\u015fl\u0131k sadece g\u00fczel g\u00f6r\u00fcnmekle kalmaz, ayn\u0131 zamanda kullan\u0131\u015fl\u0131 ve eri\u015filebilir olmal\u0131d\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)\nWeb sitenizin ba\u015fl\u0131k (header) b\u00f6l\u00fcm\u00fc, bir ziyaret\u00e7inin sitenizl","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-33865","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)\" \/>\n<meta property=\"og:description\" content=\"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) Web sitenizin ba\u015fl\u0131k (header) b\u00f6l\u00fcm\u00fc, bir ziyaret\u00e7inin sitenizl\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-08T01:40:46+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)\",\"datePublished\":\"2025-11-08T01:40:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\"},\"wordCount\":3089,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\",\"name\":\"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-08T01:40:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/","og_locale":"tr_TR","og_type":"article","og_title":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)","og_description":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) Web sitenizin ba\u015fl\u0131k (header) b\u00f6l\u00fcm\u00fc, bir ziyaret\u00e7inin sitenizl","og_url":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-08T01:40:46+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"19 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)","datePublished":"2025-11-08T01:40:46+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/"},"wordCount":3089,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/","url":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/","name":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-08T01:40:46+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33865"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33865\/revisions"}],"predecessor-version":[{"id":33866,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33865\/revisions\/33866"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":33865,"date":"2025-11-08T04:40:46","date_gmt":"2025-11-08T01:40:46","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33865"},"modified":"2025-11-08T04:40:46","modified_gmt":"2025-11-08T01:40:46","slug":"web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/","title":{"rendered":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)"},"content":{"rendered":"

<\/p>\n

Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)<\/h2>\n
Web sitenizin ba\u015fl\u0131k (header) b\u00f6l\u00fcm\u00fc, bir ziyaret\u00e7inin sitenizle ilk etkile\u015fime ge\u00e7ti\u011fi yerdir. Sitenizin kimli\u011fini yans\u0131t\u0131r, navigasyon sa\u011flar ve genellikle kullan\u0131c\u0131 deneyiminin (UX) temel ta\u015flar\u0131ndan biridir. \u0130yi tasarlanm\u0131\u015f ve do\u011fru bir \u015fekilde kodlanm\u0131\u015f bir ba\u015fl\u0131k, sitenizin profesyonelli\u011fini art\u0131r\u0131r, gezinmeyi kolayla\u015ft\u0131r\u0131r ve ziyaret\u00e7ilerin sitenizde daha uzun s\u00fcre kalmas\u0131n\u0131 sa\u011flar. Bu teknik makalenin ilk b\u00f6l\u00fcm\u00fcnde, modern web tasar\u0131m\u0131n\u0131n temel prensiplerini kullanarak, sa\u011flam ve duyarl\u0131 bir ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fc CSS ile ad\u0131m ad\u0131m nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. HTML yap\u0131s\u0131ndan ba\u015flayarak, Flexbox ile d\u00fczenlemeye, logo entegrasyonuna ve temel navigasyon men\u00fcs\u00fc olu\u015fturmaya kadar bir\u00e7ok konuya de\u011finece\u011fiz.<\/p>\n
Ba\u015fl\u0131k b\u00f6l\u00fcm\u00fc genellikle sitenizin logosunu, ana navigasyon men\u00fcs\u00fcn\u00fc, bazen bir arama \u00e7ubu\u011funu veya bir eylem \u00e7a\u011fr\u0131s\u0131 (call to action) d\u00fc\u011fmesini i\u00e7erir. Bu b\u00f6l\u00fcmde, bu temel bile\u015fenlerin nas\u0131l bir araya getirilece\u011fini ve CSS ile estetik ve i\u015flevsel bir b\u00fct\u00fcn haline getirilece\u011fini \u00f6\u011freneceksiniz. Bu makale, temel HTML ve CSS bilgisine sahip olan ancak bu bilgiyi pratik bir proje \u00fczerinde uygulamak isteyen geli\u015ftiriciler i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n

Ba\u015flang\u0131\u00e7: Temel HTML Yap\u0131s\u0131<\/h3>\n
Bir web sayfas\u0131n\u0131n ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fc olu\u015fturman\u0131n ilk ad\u0131m\u0131, do\u011fru ve anlamsal bir HTML yap\u0131s\u0131 kurmakt\u0131r. HTML5 ile gelen semantik etiketler, hem geli\u015ftiriciler i\u00e7in kodun okunabilirli\u011fini art\u0131r\u0131r hem de arama motorlar\u0131 ve ekran okuyucular gibi yard\u0131mc\u0131 teknolojiler i\u00e7in sayfa yap\u0131s\u0131n\u0131 daha anlaml\u0131 hale getirir.<\/p>\n

Header Etiketi ve Semantik Yap\u0131<\/h4>\n

<\/p>\n

<\/code> etiketi, bir belgenin, b\u00f6l\u00fcm\u00fcn veya makalenin giri\u015f i\u00e7eri\u011fini veya navigasyon ba\u011flant\u0131lar\u0131n\u0131 temsil etmek i\u00e7in kullan\u0131l\u0131r. Sitemizin genel ba\u015fl\u0131k b\u00f6l\u00fcm\u00fc i\u00e7in en uygun etiket budur. Bu etiket i\u00e7inde, sitenizin logosunu, ana navigasyon men\u00fcs\u00fcn\u00fc ve di\u011fer ilgili \u00f6\u011feleri bar\u0131nd\u0131raca\u011f\u0131z.<\/p>\n\u0130\u015fte temel bir <\/p>\n
<\/code> yap\u0131s\u0131 \u00f6rne\u011fi:<\/p>\n\n\n\n    \n    \n    Web Sitemin Ba\u015fl\u0131\u011f\u0131<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <header class=\"main-header\">\n        <div class=\"container\">\n            <div class=\"logo\">\n                <a href=\"\/\">\n                    <img decoding=\"async\" src=\"logo.png\" alt=\"\u015eirket Logosu\">\n                <\/a>\n            <\/div>\n            <nav class=\"main-nav\">\n                <ul>\n                    <li><a href=\"#anasayfa\">Anasayfa<\/a><\/li>\n                    <li><a href=\"#hakkimizda\">Hakk\u0131m\u0131zda<\/a><\/li>\n                    <li><a href=\"#hizmetler\">Hizmetler<\/a><\/li>\n                    <li><a href=\"#portfolyo\">Portfolyo<\/a><\/li>\n                    <li><a href=\"#iletisim\">\u0130leti\u015fim<\/a><\/li>\n                <\/ul>\n            <\/nav>\n        <\/div>\n    <\/header>\n\n    <main>\n        <!-- Sayfan\u0131n di\u011fer i\u00e7eri\u011fi buraya gelecek -->\n        \n        <p>Buras\u0131 sayfan\u0131z\u0131n ana i\u00e7eri\u011fidir.<\/p>\n    <\/main>\n\n    <footer>\n        <!-- Alt bilgi i\u00e7eri\u011fi buraya gelecek -->\n        <p>© 2023 \u015eirket Ad\u0131. T\u00fcm Haklar\u0131 Sakl\u0131d\u0131r.<\/p>\n    <\/footer>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Yukar\u0131daki HTML yap\u0131s\u0131n\u0131 inceleyelim:<\/p>\n<p>*   <strong><code><\/p>\n<header class=\"main-header\"><\/code><\/strong>: Bu, t\u00fcm ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcm\u00fcz\u00fc saran ana etikettir. <code>main-header<\/code> s\u0131n\u0131f\u0131, bu b\u00f6l\u00fcme \u00f6zel CSS stilleri uygulamak i\u00e7in kullan\u0131lacakt\u0131r.<br \/>\n*   <strong><code><\/p>\n<div class=\"container\"><\/code><\/strong>: Genellikle bir web sayfas\u0131n\u0131n i\u00e7eri\u011fini merkezlemek ve belirli bir geni\u015flikte tutmak i\u00e7in kullan\u0131lan genel bir kapsay\u0131c\u0131d\u0131r. Bu, ba\u015fl\u0131k i\u00e7eri\u011fimizin ekran\u0131n kenarlar\u0131na yap\u0131\u015fmas\u0131n\u0131 engelleyecek ve daha d\u00fczenli bir g\u00f6r\u00fcn\u00fcm sa\u011flayacakt\u0131r.<br \/>\n*   <strong><code><\/p>\n<div class=\"logo\"><\/code><\/strong>: Logomuzu bar\u0131nd\u0131ran b\u00f6l\u00fcm.<br \/>\n    *   <strong><code><a href=\"\/\"><\/code><\/strong>: Logo genellikle ana sayfaya ba\u011flant\u0131 verir. Bu nedenle bir <code><a><\/code> etiketi i\u00e7ine al\u0131nm\u0131\u015ft\u0131r.<br \/>\n    *   <strong><code><img decoding=\"async\" src=\"logo.png\" alt=\"\u015eirket Logosu\"><\/code><\/strong>: Sitenizin g\u00f6rsel logosu. <code>alt<\/code> niteli\u011fi, resim y\u00fcklenmedi\u011finde veya ekran okuyucular taraf\u0131ndan kullan\u0131ld\u0131\u011f\u0131nda alternatif metin sa\u011flar; eri\u015filebilirlik i\u00e7in \u00e7ok \u00f6nemlidir.<br \/>\n*   <strong><code><\/p>\n<nav class=\"main-nav\"><\/code><\/strong>: Navigasyon men\u00fcs\u00fcn\u00fc i\u00e7eren semantik etikettir. Arama motorlar\u0131 ve ekran okuyucular i\u00e7in bu b\u00f6l\u00fcm\u00fcn ana navigasyon oldu\u011funu belirtir.<br \/>\n    *   <strong><code><\/p>\n<ul><\/code> ve <code><\/p>\n<li><\/code><\/strong>: S\u0131ras\u0131z liste (unordered list) ve liste \u00f6\u011feleri (list items), navigasyon men\u00fcleri i\u00e7in standart ve eri\u015filebilir bir yap\u0131d\u0131r.<br \/>\n    *   <strong><code><a href=\"#anasayfa\"><\/code><\/strong>: Her bir men\u00fc \u00f6\u011fesi, ilgili sayfaya veya sayfa i\u00e7i bir b\u00f6l\u00fcme ba\u011flant\u0131 veren bir <code><a><\/code> etiketi i\u00e7erir. <code>#anasayfa<\/code> gibi de\u011ferler, sayfa i\u00e7i ba\u011flant\u0131lar\u0131 temsil eder.<\/p>\n<p>Bu temel yap\u0131, CSS ile \u015fekillendirmeye ba\u015flamak i\u00e7in sa\u011flam bir temel olu\u015fturur.<\/p>\n<h3>CSS ile Temel \u015eekillendirme ve D\u00fczen<\/h3>\n<p>HTML yap\u0131m\u0131z\u0131 kurduktan sonra, s\u0131ra CSS kullanarak bu yap\u0131ya hayat vermeye gelir. Renkler, yaz\u0131 tipleri, boyutlar ve \u00f6zellikle \u00f6\u011felerin ekranda nas\u0131l konumlanaca\u011f\u0131, tamamen CSS ile kontrol edilir.<\/p>\n<h4>Genel Stil S\u0131f\u0131rlamalar\u0131 ve Temel Ayarlar<\/h4>\n<p>Her taray\u0131c\u0131n\u0131n varsay\u0131lan stil kurallar\u0131 farkl\u0131l\u0131k g\u00f6sterebilir. Bu tutars\u0131zl\u0131klar\u0131 gidermek ve kendi stilimize temiz bir ba\u015flang\u0131\u00e7 yapmak i\u00e7in genellikle genel stil s\u0131f\u0131rlamalar\u0131 (reset CSS) uygulan\u0131r.<\/p>\n<pre><code class=\"language-css\">\/<em> style.css <\/em>\/\n\n\/<em> Genel S\u0131f\u0131rlama <\/em>\/\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box; \/<em> T\u00fcm elemanlar\u0131n kutu modelini de\u011fi\u015ftirir <\/em>\/\n}\n\n\/<em> Temel G\u00f6vde Stilleri <\/em>\/\nbody {\n    font-family: 'Arial', sans-serif; \/<em> Varsay\u0131lan yaz\u0131 tipi <\/em>\/\n    line-height: 1.6; \/<em> Sat\u0131r y\u00fcksekli\u011fi <\/em>\/\n    color: #333; \/<em> Varsay\u0131lan metin rengi <\/em>\/\n    background-color: #f4f4f4; \/<em> Arka plan rengi <\/em>\/\n}\n\n\/<em> Ba\u011flant\u0131 Stilleri <\/em>\/\na {\n    text-decoration: none; \/<em> Ba\u011flant\u0131 alt \u00e7izgilerini kald\u0131r\u0131r <\/em>\/\n    color: inherit; \/<em> Ba\u011flant\u0131 rengini \u00fcst \u00f6\u011feden miras al\u0131r <\/em>\/\n}\n\n\/<em> Liste Stilleri <\/em>\/\nul {\n    list-style: none; \/<em> Liste i\u015faretlerini kald\u0131r\u0131r <\/em>\/\n}<\/code><\/pre>\n<p><em>   <strong><code><\/em> { margin: 0; padding: 0; box-sizing: border-box; }<\/code><\/strong>: Bu evrensel se\u00e7ici, t\u00fcm HTML \u00f6\u011felerinin varsay\u0131lan kenar bo\u015fluklar\u0131n\u0131 (<code>margin<\/code>) ve i\u00e7 bo\u015fluklar\u0131n\u0131 (<code>padding<\/code>) s\u0131f\u0131rlar. <code>box-sizing: border-box;<\/code> \u00f6zelli\u011fi ise, bir \u00f6\u011fenin geni\u015flik ve y\u00fcksekli\u011finin <code>padding<\/code> ve <code>border<\/code> de\u011ferlerini de i\u00e7ermesini sa\u011flar. Bu, d\u00fczen hesaplamalar\u0131n\u0131 \u00e7ok daha kolay hale getirir.<br \/>\n*   <strong><code>body<\/code> stilleri<\/strong>: Sayfan\u0131n genel yaz\u0131 tipini, sat\u0131r y\u00fcksekli\u011fini, metin rengini ve arka plan rengini belirler.<br \/>\n*   <strong><code>a<\/code> stilleri<\/strong>: Ba\u011flant\u0131lar\u0131n varsay\u0131lan alt \u00e7izgilerini kald\u0131r\u0131r ve rengini \u00fcst \u00f6\u011feden miras almas\u0131n\u0131 sa\u011flar, b\u00f6ylece daha tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm elde edilir.<br \/>\n*   <strong><code>ul<\/code> stilleri<\/strong>: Liste \u00f6\u011felerinin varsay\u0131lan madde i\u015faretlerini kald\u0131r\u0131r, navigasyon men\u00fcleri i\u00e7in temiz bir ba\u015flang\u0131\u00e7 sa\u011flar.<\/p>\n<h4>Header Kapsay\u0131c\u0131s\u0131 (Container) Olu\u015fturma<\/h4>\n<p>\u015eimdi <code>main-header<\/code> ve <code>container<\/code> s\u0131n\u0131flar\u0131m\u0131za stil vererek ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fcn genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve d\u00fczenini olu\u015ftural\u0131m. Flexbox, modern web d\u00fczenleri i\u00e7in en g\u00fc\u00e7l\u00fc ve esnek CSS \u00f6zelliklerinden biridir ve ba\u015fl\u0131k d\u00fczenimizi olu\u015fturmak i\u00e7in idealdir.<\/p>\n<pre><code class=\"language-css\">\/<em> style.css devam\u0131 <\/em>\/\n\n.main-header {\n    background-color: #ffffff; \/<em> Beyaz arka plan <\/em>\/\n    padding: 15px 0; \/<em> \u00dcst ve alt i\u00e7 bo\u015fluk <\/em>\/\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); \/<em> Hafif bir g\u00f6lge efekti <\/em>\/\n    width: 100%; \/<em> Tam geni\u015flik <\/em>\/\n    z-index: 1000; \/<em> Di\u011fer \u00f6\u011felerin \u00fczerinde kalmas\u0131n\u0131 sa\u011flar <\/em>\/\n    position: relative; \/<em> Z-index'in \u00e7al\u0131\u015fmas\u0131 i\u00e7in gerekli <\/em>\/\n}\n\n.container {\n    max-width: 1200px; \/<em> Maksimum geni\u015flik <\/em>\/\n    margin: 0 auto; \/<em> Ortalamak i\u00e7in kenar bo\u015fluklar\u0131 <\/em>\/\n    padding: 0 20px; \/<em> Sa\u011f ve sol i\u00e7 bo\u015fluk <\/em>\/\n    display: flex; \/<em> \u0130\u00e7 \u00f6\u011feleri Flexbox ile d\u00fczenle <\/em>\/\n    justify-content: space-between; \/<em> \u00d6\u011feleri iki yana yasla (logo sol, men\u00fc sa\u011f) <\/em>\/\n    align-items: center; \/<em> \u00d6\u011feleri dikeyde ortala <\/em>\/\n}<\/code><\/pre>\n<p>*   <strong><code>.main-header<\/code><\/strong>:<br \/>\n    *   <code>background-color: #ffffff;<\/code>: Ba\u015fl\u0131k i\u00e7in beyaz bir arka plan rengi ayarlar.<br \/>\n    *   <code>padding: 15px 0;<\/code>: \u00dcstte ve altta 15 piksel i\u00e7 bo\u015fluk b\u0131rak\u0131r, sa\u011fda ve solda i\u00e7 bo\u015fluk b\u0131rakmaz.<br \/>\n    *   <code>box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);<\/code>: Ba\u015fl\u0131\u011fa hafif bir alt g\u00f6lge efekti ekleyerek sayfan\u0131n geri kalan\u0131ndan ayr\u0131lmas\u0131n\u0131 sa\u011flar.<br \/>\n    *   <code>width: 100%;<\/code>: Ba\u015fl\u0131\u011f\u0131n taray\u0131c\u0131 penceresinin tam geni\u015fli\u011fini kaplamas\u0131n\u0131 sa\u011flar.<br \/>\n    *   <code>z-index: 1000; position: relative;<\/code>: Bu \u00f6zellikler, ba\u015fl\u0131\u011f\u0131n di\u011fer sayfa \u00f6\u011felerinin \u00fczerinde g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in kullan\u0131l\u0131r, \u00f6zellikle kayd\u0131r\u0131labilir (sticky) veya sabit (fixed) bir ba\u015fl\u0131k olu\u015fturuldu\u011funda \u00f6nemlidir. <code>position<\/code> \u00f6zelli\u011fi olmadan <code>z-index<\/code> genellikle \u00e7al\u0131\u015fmaz.<br \/>\n*   <strong><code>.container<\/code><\/strong>:<br \/>\n    *   <code>max-width: 1200px;<\/code>: \u0130\u00e7eri\u011fin maksimum geni\u015fli\u011fini 1200 piksel ile s\u0131n\u0131rlar. Bu, b\u00fcy\u00fck ekranlarda i\u00e7eri\u011fin \u00e7ok fazla yay\u0131lmas\u0131n\u0131 engeller.<br \/>\n    *   <code>margin: 0 auto;<\/code>: \u00d6\u011feyi yatayda ortalar. \u00dcst ve alt kenar bo\u015fluklar\u0131 0, sa\u011f ve sol kenar bo\u015fluklar\u0131 otomatik olarak ayarlan\u0131r.<br \/>\n    *   <code>padding: 0 20px;<\/code>: \u0130\u00e7eri\u011fin ekran\u0131n kenarlar\u0131na \u00e7ok fazla yakla\u015fmas\u0131n\u0131 \u00f6nlemek i\u00e7in sa\u011fda ve solda 20 piksel i\u00e7 bo\u015fluk b\u0131rak\u0131r.<br \/>\n    *   <code>display: flex;<\/code>: Bu, <code>.container<\/code> i\u00e7indeki do\u011frudan \u00e7ocuk \u00f6\u011felerini (bu durumda <code>.logo<\/code> ve <code>.main-nav<\/code>) bir Flex konteyneri haline getirir. Bu, \u00f6\u011feleri kolayca hizalamak ve da\u011f\u0131tmak i\u00e7in Flexbox \u00f6zelliklerini kullanabilece\u011fimiz anlam\u0131na gelir.<br \/>\n    *   <code>justify-content: space-between;<\/code>: Flex konteyneri i\u00e7indeki \u00f6\u011feleri ana eksen boyunca (varsay\u0131lan olarak yatayda) da\u011f\u0131t\u0131r. <code>space-between<\/code> de\u011feri, ilk \u00f6\u011feyi ba\u015flang\u0131ca, son \u00f6\u011feyi sona yerle\u015ftirir ve aralar\u0131ndaki bo\u015flu\u011fu e\u015fit \u015fekilde da\u011f\u0131t\u0131r. Bizim durumumuzda, logo sola ve navigasyon men\u00fcs\u00fc sa\u011fa hizalanacakt\u0131r.<br \/>\n    *   <code>align-items: center;<\/code>: Flex konteyneri i\u00e7indeki \u00f6\u011feleri \u00e7apraz eksen boyunca (varsay\u0131lan olarak dikeyde) ortalar. Bu, logo ve navigasyon men\u00fcs\u00fcn\u00fcn dikey olarak ayn\u0131 hizada olmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>Bu ad\u0131mlarla, ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcm\u00fcz\u00fcn genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve \u00f6\u011felerinin nas\u0131l konumlanaca\u011f\u0131n\u0131 belirledik.<\/p>\n<h3>Logo ve Marka Alan\u0131<\/h3>\n<p>Logonuz, sitenizin kimli\u011finin merkezindedir. Hem g\u00f6rsel olarak \u00e7ekici hem de do\u011fru boyutland\u0131r\u0131lm\u0131\u015f olmal\u0131d\u0131r.<\/p>\n<h4>Logo Ekleme ve \u015eekillendirme<\/h4>\n<p>HTML’de zaten bir <code><img><\/code> etiketi ile logomuzu eklemi\u015ftik. \u015eimdi bu logoya CSS ile stil verelim.<\/p>\n<pre><code class=\"language-css\">\/<em> style.css devam\u0131 <\/em>\/\n\n.logo img {\n    max-height: 40px; \/<em> Logonun maksimum y\u00fcksekli\u011fi <\/em>\/\n    width: auto; \/<em> Geni\u015fli\u011fi otomatik ayarla, oranlar\u0131 koru <\/em>\/\n    display: block; \/<em> img eleman\u0131n\u0131n alt\u0131ndaki bo\u015flu\u011fu kald\u0131r\u0131r <\/em>\/\n}<\/code><\/pre>\n<p>*   <strong><code>.logo img<\/code><\/strong>:<br \/>\n    *   <code>max-height: 40px;<\/code>: Logonun maksimum y\u00fcksekli\u011fini 40 piksel olarak ayarlar. Bu, logonun \u00e7ok b\u00fcy\u00fck olmas\u0131n\u0131 engellerken, k\u00fc\u00e7\u00fck ekranlarda gerekti\u011finde k\u00fc\u00e7\u00fclmesine izin verir.<br \/>\n    *   <code>width: auto;<\/code>: Geni\u015fli\u011fi otomatik olarak ayarlar, b\u00f6ylece resmin orijinal en boy oran\u0131 korunur. Bu \u00e7ok \u00f6nemlidir; aksi takdirde logo bozulabilir.<br \/>\n    *   <code>display: block;<\/code>: <code><img><\/code> etiketi varsay\u0131lan olarak <code>inline-block<\/code> bir \u00f6\u011fedir. <code>block<\/code> olarak ayarlamak, baz\u0131 taray\u0131c\u0131larda resmin alt\u0131nda g\u00f6r\u00fcnen fazladan bo\u015flu\u011fu kald\u0131rmaya yard\u0131mc\u0131 olabilir.<\/p>\n<p>E\u011fer logonuz sadece metin tabanl\u0131ysa (\u00f6rne\u011fin, sadece \u015firket ad\u0131n\u0131z), <code><img><\/code> etiketi yerine bir <code><\/p>\n<h1><\/code> veya <code><span><\/code> etiketi kullanabilir ve buna stil verebilirsiniz. Ancak semantik olarak, ana sayfa ba\u015fl\u0131\u011f\u0131 i\u00e7in <code><\/p>\n<h1><\/code> kullanmak daha do\u011fru olabilir. E\u011fer ba\u015fl\u0131kta hem logo hem de metin bazl\u0131 bir site ad\u0131 varsa, logo g\u00f6rselini gizleyip sadece metni g\u00f6steren bir eri\u015filebilirlik \u00e7\u00f6z\u00fcm\u00fc de d\u00fc\u015f\u00fcnebilirsiniz. Bu \u00f6rnekte, g\u00f6rsel bir logo kulland\u0131\u011f\u0131m\u0131z\u0131 varsay\u0131yoruz.<\/p>\n<h3>Navigasyon Men\u00fcs\u00fc Olu\u015fturma<\/h3>\n<p>Navigasyon men\u00fcs\u00fc, kullan\u0131c\u0131lar\u0131n sitenizdeki farkl\u0131 b\u00f6l\u00fcmlere kolayca ula\u015fmas\u0131n\u0131 sa\u011flar. Temiz, okunakl\u0131 ve duyarl\u0131 bir men\u00fc, iyi bir kullan\u0131c\u0131 deneyimi i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h4>Temel Navigasyon Yap\u0131s\u0131<\/h4>\n<p>HTML’de <code>main-nav<\/code> s\u0131n\u0131f\u0131na sahip bir <code><\/p>\n<nav><\/code> etiketi i\u00e7inde <code><\/p>\n<ul><\/code> ve <code><\/p>\n<li><\/code> \u00f6\u011feleriyle navigasyon yap\u0131m\u0131z\u0131 zaten olu\u015fturmu\u015ftuk. \u015eimdi bu yap\u0131ya CSS ile stil verelim.\n<pre><code class=\"language-css\">\/<em> style.css devam\u0131 <\/em>\/\n\n.main-nav ul {\n    display: flex; \/<em> Liste \u00f6\u011felerini yatayda hizala <\/em>\/\n    gap: 25px; \/<em> Men\u00fc \u00f6\u011feleri aras\u0131nda bo\u015fluk b\u0131rak <\/em>\/\n}\n\n.main-nav ul li a {\n    color: #555; \/<em> Ba\u011flant\u0131 metin rengi <\/em>\/\n    font-size: 16px; \/<em> Yaz\u0131 tipi boyutu <\/em>\/\n    font-weight: 500; \/<em> Yaz\u0131 tipi kal\u0131nl\u0131\u011f\u0131 <\/em>\/\n    padding: 5px 0; \/<em> \u0130\u00e7 bo\u015fluk <\/em>\/\n    transition: color 0.3s ease; \/<em> Renk ge\u00e7i\u015f efekti <\/em>\/\n    position: relative; \/<em> Alt \u00e7izgi animasyonu i\u00e7in <\/em>\/\n}\n\n.main-nav ul li a:hover {\n    color: #007bff; \/<em> \u00dczerine gelindi\u011finde renk de\u011fi\u015fimi <\/em>\/\n}\n\n\/<em> Opsiyonel: Alt \u00e7izgi efekti <\/em>\/\n.main-nav ul li a::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: -5px; \/<em> Ba\u011flant\u0131n\u0131n alt\u0131nda konumland\u0131r <\/em>\/\n    width: 0;\n    height: 2px;\n    background-color: #007bff; \/<em> \u00c7izgi rengi <\/em>\/\n    transition: width 0.3s ease; \/<em> Geni\u015flik ge\u00e7i\u015f efekti <\/em>\/\n}\n\n.main-nav ul li a:hover::after {\n    width: 100%; \/<em> \u00dczerine gelindi\u011finde alt \u00e7izginin geni\u015flemesi <\/em>\/\n}<\/code><\/pre>\n<p>*   <strong><code>.main-nav ul<\/code><\/strong>:<br \/>\n    *   <code>display: flex;<\/code>: <code><\/p>\n<ul><\/code> i\u00e7indeki <code><\/p>\n<li><\/code> \u00f6\u011felerini yatayda bir sat\u0131rda hizalar.<br \/>\n    *   <code>gap: 25px;<\/code>: Flexbox’\u0131n yeni ve kullan\u0131\u015fl\u0131 bir \u00f6zelli\u011fidir. \u00d6\u011feler aras\u0131nda 25 piksel bo\u015fluk b\u0131rak\u0131r, b\u00f6ylece her bir <code><\/p>\n<li><\/code> \u00f6\u011fesine ayr\u0131 ayr\u0131 <code>margin-left<\/code> veya <code>margin-right<\/code> vermeye gerek kalmaz.<br \/>\n*   <strong><code>.main-nav ul li a<\/code><\/strong>: Bu se\u00e7ici, men\u00fcdeki her bir ba\u011flant\u0131 \u00f6\u011fesine stil verir.<br \/>\n    *   <code>color: #555;<\/code>: Ba\u011flant\u0131 metninin rengini ayarlar.<br \/>\n    *   <code>font-size: 16px;<\/code>: Yaz\u0131 tipi boyutunu ayarlar.<br \/>\n    *   <code>font-weight: 500;<\/code>: Yaz\u0131 tipini biraz daha kal\u0131n yapar.<br \/>\n    *   <code>padding: 5px 0;<\/code>: \u00dcstte ve altta 5 piksel i\u00e7 bo\u015fluk b\u0131rak\u0131r, sa\u011fda ve solda bo\u015fluk b\u0131rakmaz. Bu, ba\u011flant\u0131lar\u0131n t\u0131klanabilir alan\u0131n\u0131 art\u0131r\u0131r.<br \/>\n    *   <code>transition: color 0.3s ease;<\/code>: Ba\u011flant\u0131n\u0131n rengi de\u011fi\u015fti\u011finde yumu\u015fak bir ge\u00e7i\u015f efekti sa\u011flar. <code>0.3s<\/code> ge\u00e7i\u015f s\u00fcresi ve <code>ease<\/code> ge\u00e7i\u015f fonksiyonudur.<br \/>\n    *   <code>position: relative;<\/code>: Bu, <code>:after<\/code> s\u00f6zde-eleman\u0131 i\u00e7in bir referans noktas\u0131 sa\u011flar. Alt \u00e7izgi animasyonu i\u00e7in gereklidir.<br \/>\n*   <strong><code>.main-nav ul li a:hover<\/code><\/strong>: Kullan\u0131c\u0131 fareyi bir men\u00fc \u00f6\u011fesinin \u00fczerine getirdi\u011finde (hover) rengini de\u011fi\u015ftirir. Bu, etkile\u015fimli bir geri bildirim sa\u011flar.<br \/>\n*   <strong>Alt \u00e7izgi efekti (iste\u011fe ba\u011fl\u0131)<\/strong>:<br \/>\n    *   <code>::after<\/code> s\u00f6zde-eleman\u0131, her bir ba\u011flant\u0131n\u0131n arkas\u0131na dinamik bir \u00e7izgi eklemek i\u00e7in kullan\u0131l\u0131r.<br \/>\n    *   <code>content: '';<\/code>: S\u00f6zde-eleman\u0131n i\u00e7eri\u011fini bo\u015f olarak ayarlar.<br \/>\n    *   <code>position: absolute;<\/code>: Ba\u011flant\u0131 \u00f6\u011fesine g\u00f6re konumland\u0131r\u0131lmas\u0131n\u0131 sa\u011flar.<br \/>\n    *   <code>left: 0; bottom: -5px;<\/code>: \u00c7izginin ba\u011flant\u0131n\u0131n solundan ba\u015flamas\u0131n\u0131 ve 5 piksel alt\u0131nda konumlanmas\u0131n\u0131 sa\u011flar.<br \/>\n    *   <code>width: 0; height: 2px;<\/code>: Ba\u015flang\u0131\u00e7ta \u00e7izginin geni\u015fli\u011fi 0, y\u00fcksekli\u011fi 2 pikseldir.<br \/>\n    *   <code>background-color: #007bff;<\/code>: \u00c7izginin rengini belirler.<br \/>\n    *   <code>transition: width 0.3s ease;<\/code>: Geni\u015flik de\u011fi\u015fimi i\u00e7in yumu\u015fak bir ge\u00e7i\u015f efekti ekler.<br \/>\n    *   <code>main-nav ul li a:hover::after { width: 100%; }<\/code>: Kullan\u0131c\u0131 fareyi ba\u011flant\u0131n\u0131n \u00fczerine getirdi\u011finde, \u00e7izginin geni\u015fli\u011fi %100’e \u00e7\u0131karak bir “alt\u0131 \u00e7izili” efekti olu\u015fturur.<\/p>\n<p>Bu CSS ile navigasyon men\u00fcm\u00fcz hem g\u00f6rsel olarak \u00e7ekici hem de etkile\u015fimli hale gelmi\u015f olur.<\/p>\n<h3>Duyarl\u0131 Tasar\u0131m\u0131n Temelleri (B\u00f6l\u00fcm 1 Kapsam\u0131nda)<\/h3>\n<p>Modern web sitelerinin en \u00f6nemli \u00f6zelliklerinden biri, farkl\u0131 cihazlarda (masa\u00fcst\u00fc, tablet, mobil telefon) iyi g\u00f6r\u00fcnmeleri ve i\u015flevsel olmalar\u0131d\u0131r. Bu, duyarl\u0131 tasar\u0131m (responsive design) ile sa\u011flan\u0131r. B\u00f6l\u00fcm 1’de, duyarl\u0131 tasar\u0131m\u0131n temel prensiplerine ve medya sorgular\u0131n\u0131n (media queries) basit kullan\u0131m\u0131na de\u011finece\u011fiz. Daha karma\u015f\u0131k mobil navigasyon \u00e7\u00f6z\u00fcmleri (hamburger men\u00fcleri gibi) B\u00f6l\u00fcm 2’de ele al\u0131nacakt\u0131r.<\/p>\n<h4>Mobil \u00d6ncelikli Yakla\u015f\u0131m ve Media Query’lere Giri\u015f<\/h4>\n<p>Duyarl\u0131 tasar\u0131m i\u00e7in iki ana yakla\u015f\u0131m vard\u0131r: masa\u00fcst\u00fc \u00f6ncelikli (desktop-first) ve mobil \u00f6ncelikli (mobile-first). Mobil \u00f6ncelikli yakla\u015f\u0131m, daha k\u00fc\u00e7\u00fck ekranlar i\u00e7in stil yazmaya ba\u015flamak ve daha sonra medya sorgular\u0131 kullanarak daha b\u00fcy\u00fck ekranlar i\u00e7in stilleri ge\u00e7ersiz k\u0131lmak anlam\u0131na gelir. Bu genellikle daha iyi performans ve daha y\u00f6netilebilir CSS sa\u011flar. Biz bu makalede mobil \u00f6ncelikli bir yakla\u015f\u0131m benimseyece\u011fiz.<\/p>\n<p>HTML’mizde zaten <code>viewport<\/code> meta etiketini eklemi\u015ftik: <code><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code>. Bu etiket, taray\u0131c\u0131n\u0131n sayfan\u0131n geni\u015fli\u011fini cihaz\u0131n ekran geni\u015fli\u011fine g\u00f6re ayarlamas\u0131n\u0131 ve ba\u015flang\u0131\u00e7 yak\u0131nla\u015ft\u0131rma seviyesini belirlemesini sa\u011flar, bu da duyarl\u0131 tasar\u0131m i\u00e7in olmazsa olmazd\u0131r.<\/p>\n<p>\u015eimdi, daha k\u00fc\u00e7\u00fck ekranlar i\u00e7in ba\u015fl\u0131k d\u00fczenini nas\u0131l ayarlayaca\u011f\u0131m\u0131za bakal\u0131m. \u00d6rne\u011fin, \u00e7ok k\u00fc\u00e7\u00fck ekranlarda men\u00fc \u00f6\u011feleri aras\u0131ndaki bo\u015flu\u011fu azaltmak veya logonun boyutunu k\u00fc\u00e7\u00fcltmek isteyebiliriz.<\/p>\n<pre><code class=\"language-css\">\/<em> style.css devam\u0131 <\/em>\/\n\n\/<em> Mobil cihazlar i\u00e7in temel stiller (varsay\u0131lan olarak) <\/em>\/\n\/<em> (Yukar\u0131daki stiller zaten mobil \u00f6ncelikli olarak d\u00fc\u015f\u00fcn\u00fcld\u00fc) <\/em>\/\n\n\/<em> Tablet ve daha b\u00fcy\u00fck ekranlar i\u00e7in medya sorgusu <\/em>\/\n@media (min-width: 768px) {\n    .main-header {\n        padding: 20px 0; \/<em> Daha b\u00fcy\u00fck ekranlarda daha fazla i\u00e7 bo\u015fluk <\/em>\/\n    }\n\n    .logo img {\n        max-height: 50px; \/<em> Daha b\u00fcy\u00fck ekranlarda logo y\u00fcksekli\u011fini art\u0131r <\/em>\/\n    }\n\n    .main-nav ul {\n        gap: 30px; \/<em> Men\u00fc \u00f6\u011feleri aras\u0131nda daha fazla bo\u015fluk <\/em>\/\n    }\n\n    .main-nav ul li a {\n        font-size: 17px; \/<em> Daha b\u00fcy\u00fck ekranlarda yaz\u0131 tipi boyutunu art\u0131r <\/em>\/\n    }\n}\n\n\/<em> Masa\u00fcst\u00fc ve daha b\u00fcy\u00fck ekranlar i\u00e7in medya sorgusu <\/em>\/\n@media (min-width: 1024px) {\n    .main-header {\n        padding: 25px 0;\n    }\n\n    .logo img {\n        max-height: 60px;\n    }\n\n    .main-nav ul {\n        gap: 40px;\n    }\n\n    .main-nav ul li a {\n        font-size: 18px;\n    }\n}<\/code><\/pre>\n<p>*   <strong><code>@media (min-width: 768px)<\/code><\/strong>: Bu medya sorgusu, ekran geni\u015fli\u011fi 768 piksel veya daha b\u00fcy\u00fck oldu\u011funda i\u00e7indeki CSS kurallar\u0131n\u0131n uygulanaca\u011f\u0131n\u0131 belirtir. Bu genellikle tablet boyutlar\u0131 i\u00e7in bir k\u0131r\u0131lma noktas\u0131d\u0131r.<br \/>\n*   <strong><code>@media (min-width: 1024px)<\/code><\/strong>: Bu medya sorgusu ise ekran geni\u015fli\u011fi 1024 piksel veya daha b\u00fcy\u00fck oldu\u011funda i\u00e7indeki CSS kurallar\u0131n\u0131n uygulanaca\u011f\u0131n\u0131 belirtir. Bu da genellikle masa\u00fcst\u00fc ekranlar i\u00e7in bir k\u0131r\u0131lma noktas\u0131d\u0131r.<\/p>\n<p>Bu \u00f6rneklerde, daha b\u00fcy\u00fck ekranlara ge\u00e7tik\u00e7e ba\u015fl\u0131\u011f\u0131n dikey i\u00e7 bo\u015flu\u011funu, logonun maksimum y\u00fcksekli\u011fini, men\u00fc \u00f6\u011feleri aras\u0131ndaki bo\u015flu\u011fu ve men\u00fc ba\u011flant\u0131lar\u0131n\u0131n yaz\u0131 tipi boyutunu art\u0131r\u0131yoruz. Bu basit ayarlamalar bile farkl\u0131 cihazlarda daha dengeli ve estetik bir g\u00f6r\u00fcn\u00fcm sa\u011flar.<\/p>\n<p><strong>\u00d6nemli Not<\/strong>: K\u00fc\u00e7\u00fck ekranlarda navigasyon men\u00fcs\u00fcn\u00fcn do\u011frudan Flexbox ile yan yana durmas\u0131, men\u00fc \u00f6\u011felerinin s\u0131k\u0131\u015fmas\u0131na neden olabilir. Mobil cihazlar i\u00e7in genellikle “hamburger men\u00fc” ad\u0131 verilen, bir d\u00fc\u011fmeye t\u0131klanarak a\u00e7\u0131l\u0131p kapanan bir navigasyon men\u00fcs\u00fc kullan\u0131l\u0131r. Bu t\u00fcr geli\u015fmi\u015f duyarl\u0131 navigasyon \u00e7\u00f6z\u00fcmleri JavaScript gerektirebilir ve bu makalenin B\u00f6l\u00fcm 2’sinde daha detayl\u0131 ele al\u0131nacakt\u0131r. Bu b\u00f6l\u00fcmdeki amac\u0131m\u0131z, temel responsive kavramlar\u0131n\u0131 ve medya sorgular\u0131n\u0131n nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 anlamakt\u0131r.<\/p>\n<h3>\u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n<p>Harika bir ba\u015fl\u0131k olu\u015fturman\u0131n sadece kodu yazmaktan ibaret olmad\u0131\u011f\u0131n\u0131 unutmamak \u00f6nemlidir. \u0130yi uygulamalar, kodunuzun kalitesini, s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve eri\u015filebilirli\u011fini art\u0131r\u0131r.<\/p>\n<h4>Semantik HTML Kullan\u0131m\u0131<\/h4>\n<p>Yukar\u0131da da vurgulad\u0131\u011f\u0131m\u0131z gibi, do\u011fru HTML5 semantik etiketlerini kullanmak (\u00f6rn. <code><\/p>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<ul><\/code>, <code><\/p>\n<li><\/code>, <code><a><\/code>) sadece kodunuzu daha okunabilir hale getirmekle kalmaz, ayn\u0131 zamanda arama motorlar\u0131n\u0131n sitenizi daha iyi anlamas\u0131na ve ekran okuyucular gibi yard\u0131mc\u0131 teknolojilerin kullan\u0131c\u0131lar i\u00e7in daha iyi bir deneyim sunmas\u0131na yard\u0131mc\u0131 olur. Her zaman i\u00e7eri\u011finizin amac\u0131na en uygun etiketi kullanmaya \u00e7al\u0131\u015f\u0131n.<br \/>\n<h4>CSS De\u011fi\u015fkenleri (Custom Properties) Kullanma<\/h4>\n<p>CSS de\u011fi\u015fkenleri (veya \u00f6zel \u00f6zellikler), tekrar eden de\u011ferleri (renkler, yaz\u0131 tipleri, bo\u015fluklar vb.) tek bir yerde tan\u0131mlaman\u0131za ve bunlar\u0131 CSS kodunuzun herhangi bir yerinde kullanman\u0131za olanak tan\u0131r. Bu, stil sayfalar\u0131n\u0131z\u0131 daha d\u00fczenli, s\u00fcrd\u00fcr\u00fclebilir ve kolayca g\u00fcncellenebilir hale getirir.<\/p>\n<pre><code class=\"language-css\">\/<em> style.css (en \u00fcstte tan\u0131mlanabilir) <\/em>\/\n:root {\n    --primary-color: #007bff;\n    --secondary-color: #555;\n    --text-color: #333;\n    --background-light: #ffffff;\n    --shadow-light: rgba(0, 0, 0, 0.1);\n    --font-family-sans: 'Arial', sans-serif;\n    --header-padding-y: 15px;\n    --container-max-width: 1200px;\n    --gap-sm: 20px;\n    --gap-md: 25px;\n}\n\n\/<em> Kullan\u0131m \u00f6rne\u011fi <\/em>\/\nbody {\n    font-family: var(--font-family-sans);\n    color: var(--text-color);\n}\n\n.main-header {\n    background-color: var(--background-light);\n    padding: var(--header-padding-y) 0;\n    box-shadow: 0 2px 5px var(--shadow-light);\n}\n\n.main-nav ul li a {\n    color: var(--secondary-color);\n}\n\n.main-nav ul li a:hover {\n    color: var(--primary-color);\n}<\/code><\/pre>\n<p>De\u011fi\u015fkenleri kullanmak, sitenizin genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek istedi\u011finizde sadece birka\u00e7 de\u011feri g\u00fcncellemenizi sa\u011flar, bu da b\u00fcy\u00fck projelerde zaman kazand\u0131r\u0131r.<\/p>\n<h4>Eri\u015filebilirlik (Accessibility – A11y)<\/h4>\n<p>Web sitenizin herkes taraf\u0131ndan kullan\u0131labilir olmas\u0131 \u00f6nemlidir. Ba\u015fl\u0131k b\u00f6l\u00fcm\u00fc i\u00e7in eri\u015filebilirlik ipu\u00e7lar\u0131 \u015funlar\u0131 i\u00e7erir:<\/p>\n<p>*   <strong>Anlaml\u0131 <code>alt<\/code> metinleri<\/strong>: Logolar ve di\u011fer g\u00f6rseller i\u00e7in a\u00e7\u0131klay\u0131c\u0131 <code>alt<\/code> metinleri kullan\u0131n.<br \/>\n*   <strong>Odaklanma durumlar\u0131<\/strong>: Klavye ile gezinirken men\u00fc \u00f6\u011felerinin odaklanma durumlar\u0131n\u0131n (<code>:focus<\/code>) belirgin oldu\u011fundan emin olun. Bu, klavye kullan\u0131c\u0131lar\u0131 i\u00e7in hayati \u00f6neme sahiptir.<br \/>\n*   <strong>Yeterli kontrast<\/strong>: Metin ve arka plan renkleri aras\u0131nda yeterli kontrast oldu\u011fundan emin olun. WCAG (Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri) standartlar\u0131n\u0131 kontrol edin.<br \/>\n*   <strong>ARIA rolleri<\/strong>: Gerekirse, navigasyon gibi \u00f6\u011feler i\u00e7in <code>role=\"navigation\"<\/code> gibi ARIA rollerini kullan\u0131n, ancak semantik HTML etiketleri genellikle yeterlidir.<\/p>\n<h4>Kod Okunabilirli\u011fi ve Yorumlar<\/h4>\n<p>Kodunuzu temiz, d\u00fczenli ve iyi yorumlanm\u0131\u015f tutmak, hem sizin hem de gelecekte kod \u00fczerinde \u00e7al\u0131\u015facak di\u011fer geli\u015ftiriciler i\u00e7in \u00f6nemlidir. Her CSS kural\u0131n\u0131 ayr\u0131 bir sat\u0131rda yaz\u0131n, tutarl\u0131 girintileme kullan\u0131n ve karma\u015f\u0131k b\u00f6l\u00fcmleri a\u00e7\u0131klayan yorumlar ekleyin.<\/p>\n<pre><code class=\"language-css\">\/<em> Genel ba\u015fl\u0131k stilleri <\/em>\/\n.main-header {\n    \/<em> Ba\u015fl\u0131k arka plan rengi ve i\u00e7 bo\u015fluk <\/em>\/\n    background-color: #ffffff;\n    padding: 15px 0;\n    \/<em> Hafif bir alt g\u00f6lge efekti <\/em>\/\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre>\n<p>Bu basit uygulamalar, projenizin uzun vadede daha ba\u015far\u0131l\u0131 olmas\u0131na yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<h3>Sonu\u00e7 ve Sonraki Ad\u0131mlar<\/h3>\n<p>Bu makalenin ilk b\u00f6l\u00fcm\u00fcnde, bir web sitesinin ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fc CSS ile nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 temelden \u00f6\u011frendik. Semantik HTML yap\u0131s\u0131 kurmaktan, Flexbox kullanarak \u00f6\u011feleri d\u00fczenlemeye, logo ve navigasyon men\u00fcs\u00fcn\u00fc \u015fekillendirmeye ve duyarl\u0131 tasar\u0131m\u0131n ilk ad\u0131mlar\u0131n\u0131 atmaya kadar bir\u00e7ok konuyu ele ald\u0131k. Art\u0131k sitenizin ziyaret\u00e7ilerini kar\u015f\u0131layacak sa\u011flam ve estetik bir ba\u015fl\u0131k temeliniz var.<\/p>\n<p>\u00d6zetle, \u015funlar\u0131 ba\u015fard\u0131k:<\/p>\n<p>*   <strong>HTML Yap\u0131s\u0131<\/strong>: <code><\/p>\n<header><\/code>, <code><\/p>\n<nav><\/code>, <code><\/p>\n<ul><\/code>, <code><\/p>\n<li><\/code> gibi semantik etiketleri kullanarak eri\u015filebilir ve anlaml\u0131 bir yap\u0131 olu\u015fturduk.<br \/>\n*   <strong>Genel Stiller<\/strong>: Taray\u0131c\u0131 farkl\u0131l\u0131klar\u0131n\u0131 gidermek ve tutarl\u0131 bir ba\u015flang\u0131\u00e7 yapmak i\u00e7in genel stil s\u0131f\u0131rlamalar\u0131 uygulad\u0131k.<br \/>\n*   <strong>Flexbox D\u00fczeni<\/strong>: <code>.container<\/code> \u00f6\u011fesini Flex konteyneri yaparak logo ve navigasyon men\u00fcs\u00fcn\u00fc yatayda hizalad\u0131k ve dikeyde ortalad\u0131k.<br \/>\n*   <strong>Logo Stilleri<\/strong>: Logonun do\u011fru boyutlarda ve oranlarda g\u00f6r\u00fcnmesini sa\u011flad\u0131k.<br \/>\n*   <strong>Navigasyon Men\u00fcs\u00fc<\/strong>: Men\u00fc \u00f6\u011felerine stil verdik, aralar\u0131nda bo\u015fluk b\u0131rakt\u0131k ve \u00fczerine gelindi\u011finde etkile\u015fimli efektler ekledik.<br \/>\n*   <strong>Duyarl\u0131 Tasar\u0131m\u0131n Temelleri<\/strong>: Medya sorgular\u0131n\u0131 kullanarak farkl\u0131 ekran boyutlar\u0131 i\u00e7in temel ayarlamalar yapt\u0131k, mobil \u00f6ncelikli yakla\u015f\u0131m\u0131n \u00f6nemini vurgulad\u0131k.<\/p>\n<p>Bu makalede \u00f6\u011frendi\u011finiz bilgiler, herhangi bir web projesinin temelini olu\u015fturacakt\u0131r. Ancak, ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fcn potansiyeli \u00e7ok daha geni\u015ftir.<\/p>\n<p><strong>Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 2)<\/strong>‘de \u015funlar\u0131 ele alaca\u011f\u0131z:<\/p>\n<p>*   <strong>Geli\u015fmi\u015f Duyarl\u0131 Navigasyon<\/strong>: Mobil cihazlar i\u00e7in hamburger men\u00fcleri ve a\u00e7\u0131l\u0131r\/kapan\u0131r navigasyon panelleri olu\u015fturma.<br \/>\n*   <strong>Arama \u00c7ubu\u011fu Entegrasyonu<\/strong>: Ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcne i\u015flevsel bir arama \u00e7ubu\u011fu ekleme ve stil verme.<br \/>\n*   <strong>Sabit (Sticky) ve Kayd\u0131r\u0131labilir (Fixed) Ba\u015fl\u0131klar<\/strong>: Sayfa a\u015fa\u011f\u0131 kayd\u0131r\u0131ld\u0131\u011f\u0131nda ba\u015fl\u0131\u011f\u0131n ekran\u0131n \u00fcst\u00fcnde sabit kalmas\u0131n\u0131 sa\u011flama.<br \/>\n*   <strong>\u00c7ok Katmanl\u0131 Men\u00fcler (Dropdowns)<\/strong>: Alt men\u00fc \u00f6\u011feleri olan navigasyon ba\u011flant\u0131lar\u0131 olu\u015fturma.<br \/>\n*   <strong>Eri\u015filebilirlik ve Performans \u0130pu\u00e7lar\u0131<\/strong>: Geli\u015fmi\u015f eri\u015filebilirlik \u00f6zellikleri ve ba\u015fl\u0131k b\u00f6l\u00fcm\u00fcn\u00fcn performans\u0131n\u0131 optimize etme.<\/p>\n<p>Bu makaledeki \u00f6rnekleri kendi projelerinizde deneyerek ve farkl\u0131 de\u011ferlerle oynayarak bilginizi peki\u015ftirmenizi \u015fiddetle tavsiye ederiz. Pratik yapmak, \u00f6\u011frenmenin en iyi yoludur. Unutmay\u0131n, iyi bir ba\u015fl\u0131k sadece g\u00fczel g\u00f6r\u00fcnmekle kalmaz, ayn\u0131 zamanda kullan\u0131\u015fl\u0131 ve eri\u015filebilir olmal\u0131d\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)\nWeb sitenizin ba\u015fl\u0131k (header) b\u00f6l\u00fcm\u00fc, bir ziyaret\u00e7inin sitenizl","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-33865","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)\" \/>\n<meta property=\"og:description\" content=\"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) Web sitenizin ba\u015fl\u0131k (header) b\u00f6l\u00fcm\u00fc, bir ziyaret\u00e7inin sitenizl\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-08T01:40:46+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)\",\"datePublished\":\"2025-11-08T01:40:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\"},\"wordCount\":3089,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\",\"name\":\"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-08T01:40:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/","og_locale":"tr_TR","og_type":"article","og_title":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)","og_description":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) Web sitenizin ba\u015fl\u0131k (header) b\u00f6l\u00fcm\u00fc, bir ziyaret\u00e7inin sitenizl","og_url":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-08T01:40:46+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"19 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)","datePublished":"2025-11-08T01:40:46+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/"},"wordCount":3089,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/","url":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/","name":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-08T01:40:46+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/web-sitenizin-baslik-bolumunu-css-ile-nasil-olusturursunuz-bolum-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Sitenizin Ba\u015fl\u0131k B\u00f6l\u00fcm\u00fcn\u00fc CSS ile Nas\u0131l Olu\u015fturursunuz? (B\u00f6l\u00fcm 1)"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33865"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33865\/revisions"}],"predecessor-version":[{"id":33866,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33865\/revisions\/33866"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}