[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-html-css-mini-ornekleri-hemen-denenecek-basit-sablonlar":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},36304,"HTML & CSS Mini Örnekleri: Hemen Denenecek Basit Şablonlar","Bu makale, yeni başlayanlar için kısa ve uygulanabilir HTML & CSS şablonları sunar; her şablonda nasıl çalıştırılacağı, özelleştirileceği ve temel erişilebilirlik/SEO kontrollerinin nasıl yapılacağı açıklanır.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>Bu rehber, HTML &amp; CSS ile hızlıca deneyebileceğiniz mini şablonlar sunar. Aşağıdaki örnekler öğrenme amaçlı, sade ve yeni başlayanların adım adım denemesi için uygundur. Hazır kaynaklara bakmak isterseniz \u003Ca href='https://macloo.github.io/html_css_templates/'>Macloo\u003C/a>, \u003Ca href='https://cssbud.com/code-templates/'>CSS Bud\u003C/a> ve \u003Ca href='https://templatemo.com/'>TemplateMo\u003C/a> gibi siteler ücretsiz şablonlar ve ilham sağlar.\u003C/p>\n\n\u003Ch2>Hemen Denenecek 5 Basit Şablon\u003C/h2>\n\u003Cp>Aşağıda her şablon için kısa açıklama, temel HTML yapısı ve bazı CSS örnekleri yer almaktadır. Kod satırları öğretim amaçlı basitleştirilmiştir; doğrudan kopyalayıp deneyebilirsiniz.\u003C/p>\n\n\u003Ch3>1) Minimal Landing Page (Tek Sayfa)\u003C/h3>\n\u003Cp>Açıklama: Basit bir hero alanı, kısa açıklama ve çağrı düğmesi içeren şablon. Hızlı prototipler için idealdir.\u003C/p>\n\u003Cp>\u003Cstrong>index.html\u003C/strong>\u003Cbr>&lt;!doctype html&gt;\u003Cbr>&lt;html lang='tr'&gt;\u003Cbr>&lt;head&gt;\u003Cbr>&nbsp;&nbsp;&lt;meta charset='utf-8'&gt;\u003Cbr>&nbsp;&nbsp;&lt;meta name='viewport' content='width=device-width,initial-scale=1'&gt;\u003Cbr>&nbsp;&nbsp;&lt;title&gt;Basit Landing&lt;/title&gt;\u003Cbr>&nbsp;&nbsp;&lt;link rel='stylesheet' href='styles.css'&gt;\u003Cbr>&lt;/head&gt;\u003Cbr>&lt;body&gt;\u003Cbr>&nbsp;&nbsp;&lt;header class='hero'&gt;\u003Cbr>&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hoş geldiniz&lt;/h1&gt;\u003Cbr>&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Kısa açıklama burada yer alır.&lt;/p&gt;\u003Cbr>&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class='btn' href='#'&gt;Başlayın&lt;/a&gt;\u003Cbr>&nbsp;&nbsp;&lt;/header&gt;\u003Cbr>&nbsp;&nbsp;&lt;footer&gt;© Firma Adı&lt;/footer&gt;\u003Cbr>&lt;/body&gt;\u003Cbr>&lt;/html&gt;\u003C/p>\n\u003Cp>\u003Cstrong>styles.css\u003C/strong>\u003Cbr>:root { --bg: #f6f8fb; --accent: #0066ff; --text: #111827; }\u003Cbr>body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; color:var(--text); background:var(--bg); }\u003Cbr>.hero { min-height:70vh; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:4rem 1rem; }\u003Cbr>.btn { display:inline-block; background:var(--accent); color:#fff; padding:0.6rem 1rem; border-radius:6px; text-decoration:none; }\u003C/p>\n\n\u003Ch3>2) Kart Izgarası (Card Grid)\u003C/h3>\n\u003Cp>Açıklama: Ürün listesi veya portfolyo için kullanılabilecek basit kart düzeni. Grid ile kolayca sütun sayısını değiştirebilirsiniz.\u003C/p>\n\u003Cp>\u003Cstrong>index.html\u003C/strong>\u003Cbr>&lt;div class='cards'&gt;\u003Cbr>&nbsp;&nbsp;&lt;div class='card'&gt;&lt;h3&gt;Başlık 1&lt;/h3&gt;&lt;p&gt;Kısa açıklama.&lt;/p&gt;&lt;/div&gt;\u003Cbr>&nbsp;&nbsp;&lt;div class='card'&gt;&lt;h3&gt;Başlık 2&lt;/h3&gt;&lt;p&gt;Kısa açıklama.&lt;/p&gt;&lt;/div&gt;\u003Cbr>&nbsp;&nbsp;&lt;!-- daha fazlası --&gt;\u003Cbr>&lt;/div&gt;\u003C/p>\n\u003Cp>\u003Cstrong>styles.css (kart kısmı)\u003C/strong>\u003Cbr>.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; padding:1rem; }\u003Cbr>.card { background:#fff; padding:1rem; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }\u003C/p>\n\n\u003Ch3>3) Basit Responsive Navigasyon (CSS-only)\u003C/h3>\n\u003Cp>Açıklama: Küçük projeler için JavaScript gerektirmeyen, CSS checkbox tekniğiyle yapılmış basit bir açılır menü örneği.\u003C/p>\n\u003Cp>\u003Cstrong>index.html\u003C/strong>\u003Cbr>&lt;nav class='nav'&gt;\u003Cbr>&nbsp;&nbsp;&lt;input type='checkbox' id='menu-toggle'&gt;\u003Cbr>&nbsp;&nbsp;&lt;label for='menu-toggle' class='hamburger'&gt;☰&lt;/label&gt;\u003Cbr>&nbsp;&nbsp;&lt;ul class='menu'&gt;\u003Cbr>&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href='#'&gt;Anasayfa&lt;/a&gt;&lt;/li&gt;\u003Cbr>&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href='#'&gt;Hakkında&lt;/a&gt;&lt;/li&gt;\u003Cbr>&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href='#'&gt;İletişim&lt;/a&gt;&lt;/li&gt;\u003Cbr>&nbsp;&nbsp;&lt;/ul&gt;\u003Cbr>&lt;/nav&gt;\u003C/p>\n\u003Cp>\u003Cstrong>styles.css (nav)\u003C/strong>\u003Cbr>.nav { position:relative; padding:0.5rem 1rem; }\u003Cbr>.hamburger { display:none; font-size:1.6rem; cursor:pointer; }\u003Cbr>.menu { display:flex; gap:1rem; list-style:none; margin:0; padding:0; }\u003Cbr>@media (max-width:600px) { .hamburger { display:inline-block; } .menu { display:none; flex-direction:column; } #menu-toggle:checked + .hamburger + .menu { display:flex; } }\u003C/p>\n\n\u003Ch3>4) Hero + CTA (Harekete Geçirici Alan)\u003C/h3>\n\u003Cp>Açıklama: Görsel ağırlıklı bir üst alan ve net bir çağrı butonu. Tipik ürün tanıtımı veya tanıtım sayfaları için uygundur.\u003C/p>\n\u003Cp>\u003Cstrong>index.html\u003C/strong>\u003Cbr>&lt;header class='hero-cta'&gt;\u003Cbr>&nbsp;&nbsp;&lt;div class='hero-inner'&gt;\u003Cbr>&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Ürününüzü Tanıtın&lt;/h1&gt;\u003Cbr>&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Kısa ve etkili bir açıklama.&lt;/p&gt;\u003Cbr>&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class='btn' href='#'&gt;Ücretsiz Deneyin&lt;/a&gt;\u003Cbr>&nbsp;&nbsp;&lt;/div&gt;\u003Cbr>&lt;/header&gt;\u003C/p>\n\u003Cp>\u003Cstrong>styles.css (hero-cta)\u003C/strong>\u003Cbr>.hero-cta { background:linear-gradient(135deg,#eaf0ff,#f6f8ff); padding:6rem 1rem; text-align:center; }\u003Cbr>.hero-inner { max-width:900px; margin:0 auto; }\u003C/p>\n\n\u003Ch3>5) Minimal Footer + İletişim Notu\u003C/h3>\n\u003Cp>Açıklama: Sayfanın altında yer alabilecek basit bir footer. Form örneği, arka uç (backend) olmadan sadece yapının gösterimi içindir.\u003C/p>\n\u003Cp>\u003Cstrong>index.html (footer)\u003C/strong>\u003Cbr>&lt;footer class='site-footer'&gt;\u003Cbr>&nbsp;&nbsp;&lt;p&gt;Bize ulaşın: &lt;a href='mailto:info@example.com'&gt;info@example.com&lt;/a&gt;&lt;/p&gt;\u003Cbr>&nbsp;&nbsp;&lt;p&gt;© Firma Adı&lt;/p&gt;\u003Cbr>&lt;/footer&gt;\u003C/p>\n\u003Cp>Not: Form gönderimi için gerçek bir servis veya sunucu yapılandırması gerekir; örnekler statik yapıyı gösterir.\u003C/p>\n\n\u003Ch2>Nasıl Hızla Denersiniz?\u003C/h2>\n\u003Cul>\n  \u003Cli>Yeni bir klasör oluşturun ve \u003Cstrong>index.html\u003C/strong> ile \u003Cstrong>styles.css\u003C/strong> dosyalarını ekleyin.\u003C/li>\n  \u003Cli>Tarayıcıda dosyayı çift tıklayarak açın veya geliştirme ortamında VS Code kullanıyorsanız Live Server eklentisi gibi araçlarla yerel sunucu üzerinden test edin.\u003C/li>\n  \u003Cli>Değişiklik yaptıkça sayfayı yenileyin; CSS değişiklikleri hızlıca görünür.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Özelleştirme İpuçları (Hızlı Çözümler)\u003C/h2>\n\u003Cul>\n  \u003Cli>Kullanım kolaylığı için CSS değişkenleri (root) kullanın: renk, boşluk ve font boyutlarını tek yerden yönetin.\u003C/li>\n  \u003Cli>Google Fonts ile özel bir yazı ailesi ekleyin: &lt;link href='https://fonts.googleapis.com' rel='stylesheet'&gt; (örnek kullanım için Google Fonts yönergelerine bakın).\u003C/li>\n  \u003Cli>Yapıyı düzenlemek için Flexbox ve Grid kullanın; kartlar için grid, yatay merkezleme için flex tercih edilebilir.\u003C/li>\n  \u003Cli>Duyarlı (responsive) tasarım için en azından 2–3 medya sorgusu ekleyin: mobil, tablet, masaüstü.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Erişilebilirlik (A11Y) ve SEO İçin Pratik Notlar\u003C/h2>\n\u003Cul>\n  \u003Cli>Görsellerde \u003Cstrong>alt\u003C/strong> özniteliği kullanın ve bağlantılar için açıklayıcı metin tercih edin.\u003C/li>\n  \u003Cli>Başlıklar hiyerarşisini koruyun (h1 yalnızca bir kere) ve sıralı yapıyı bozmamaya çalışın.\u003C/li>\n  \u003Cli>Meta başlık ve açıklama gibi temel SEO etiketlerini &lt;head&gt; içinde doldurun; örnek: &lt;meta name='description' content='Kısa açıklama'&gt;.\u003C/li>\n  \u003Cli>Performans için küçük görseller kullanın, gerektiğinde resimleri sıkıştırın ve mümkünse modern format (webp) tercih edin.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Kaynaklar ve Daha Fazla Şablon\u003C/h2>\n\u003Cp>Hazır ve ücretsiz şablonlar / bileşenler arıyorsanız bu kaynaklar faydalıdır: \u003Ca href='https://macloo.github.io/html_css_templates/'>Macloo\u003C/a>, \u003Ca href='https://cssbud.com/code-templates/'>CSS Bud\u003C/a>, \u003Ca href='https://www.basic8template.com/'>Basic8 Template\u003C/a> ve \u003Ca href='https://templatemo.com/'>TemplateMo\u003C/a>. Bu sitelerden ilham alarak veya hazır parçaları kullanarak projelerinizi hızla başlatabilirsiniz.\u003C/p>\n\n\u003Ch2>Hızlı Kontrol Listesi (Yayın Öncesi)\u003C/h2>\n\u003Cul>\n  \u003Cli>HTML dosyası ve CSS bağlaması çalışıyor mu?\u003C/li>\n  \u003Cli>Mobil görünüm kontrol edildi mi (küçük ekranlarda menü, kart düzeni)?\u003C/li>\n  \u003Cli>Görsellere alt metin eklendi mi?\u003C/li>\n  \u003Cli>Başlık ve meta description girildi mi?\u003C/li>\n  \u003Cli>Performans için resimler optimize edildi mi?\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Sonuç\u003C/h2>\n\u003Cp>Bu mini örnekler, HTML ve CSS öğrenirken hızlıca pratik yapmanızı sağlar. Şablonları adım adım özelleştirin, erişilebilirlik ve performans kontrollerini ihmal etmeyin. Daha kapsamlı ücretsiz şablonlar ve hazır bileşenler için yukarıdaki kaynaklara göz atabilirsiniz.\u003C/p>\n","HTML & CSS Mini Örnekleri — Hemen Denenecek Basit Şablonlar","Yeni başlayanlar için pratik HTML ve CSS mini örnekleri: hızlıca kopyalanıp çalıştırılabilecek şablonlar, özelleştirme ipuçları ve temel erişilebilirlik/SEO not","HTML & CSS Mini Örnekleri, html css örnekleri, basit web şablonları, web tasarım başlangıç, responsive html css","html-css-mini-ornekleri-hemen-denenecek-basit-sablonlar","2026-05-18T18:21:35.000Z",{"id":16,"title":17,"slug":18},203,"HTML & CSS Mini Örnekleri","html-css-mini-ornekleri",{"id":20,"name":21,"nickname":22,"slug":23},91,"Mert Kılıçoğlu","CodeCraftsman","mert-kilicoglu","/media/blog/3eab6ae5ccf24e1a019d16384d3aeddf.jpg","/media/blog/3eab6ae5ccf24e1a019d16384d3aeddf_thumb.jpg","/media/blog/3eab6ae5ccf24e1a019d16384d3aeddf.webp","/media/blog/3eab6ae5ccf24e1a019d16384d3aeddf_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},6,1081,0,"6 dk okuma süresi","/blog/html-css-mini-ornekleri/html-css-mini-ornekleri-hemen-denenecek-basit-sablonlar",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/3eab6ae5ccf24e1a019d16384d3aeddf.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/html-css-mini-ornekleri/html-css-mini-ornekleri-hemen-denenecek-basit-sablonlar",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/html-css-mini-ornekleri/html-css-mini-ornekleri-hemen-denenecek-basit-sablonlar",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/mert-kilicoglu",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/html-css-mini-ornekleri",{"@type":102,"position":114,"name":7,"item":65},4]