[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-html-css-icin-5-mini-ornek-yerlesim-buton-kart":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},24427,"HTML & CSS için 5 Mini Örnek: Yerleşim, Buton, Kart","Bu rehberde yerleşim, buton ve kart öğeleri için 5 kısa HTML & CSS örneği, açıklamalar ve responsive ipuçları bulacaksınız.","\u003Ch2>HTML & CSS için 5 Mini Örnek: Yerleşim, Buton, Kart\u003C/h2>\n\u003Cp>Bu makalede başlangıç seviyesindeki geliştiriciler için hazırlanmış kolay kod örnekleri (kolay kod örnekleri) sunulmaktadır. Amaç: hızla uygulanabilecek, okunması kolay ve responsive/erişilebilir uygulamalar göstermek. Her örnek: amaç, minimal HTML, temel CSS ve kısa notlar içerir.\u003C/p>\n\n\u003Ch3>Nasıl kullanmalı\u003C/h3>\n\u003Cp>Her örneği ayrı bir HTML dosyası olarak kaydedip tarayıcıda açabilirsiniz veya CodePen/JSFiddle gibi çevrimiçi editörlerde deneyin. Örnekler temel şablonlardır; projeye göre sınıf ve renk isimlerini uyarlayın.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Örnek 1: Basit Flex Yerleşim (İki sütun)\u003C/h3>\n\u003Cp>\u003Cstrong>Amaç:\u003C/strong> Yan yana bir kenar çubuğu (sidebar) ve esnek içerik alanı oluşturmak.\u003C/p>\n\u003Cp>\u003Cstrong>HTML\u003C/strong>\u003Cbr><div class=\"layout-container\">\u003Cbr>  <aside class=\"sidebar\">Menü veya filtreler</aside>\u003Cbr>  <main class=\"main-content\">Ana içerik burada</main>\u003Cbr></div>\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.layout-container { display: flex; gap: 16px; align-items: flex-start; }\u003Cbr>.sidebar { flex: 0 0 250px; background: #f3f4f6; padding: 16px; border-radius: 8px; }\u003Cbr>.main-content { flex: 1; padding: 16px; background: #ffffff; border-radius: 8px; }\u003C/p>\n\u003Cp>\u003Cstrong>Açıklama:\u003C/strong> Flexbox ile .sidebar sabit genişlikte, .main-content kalan alanı kaplar. Küçük ekranlarda kolona dönüşmesi için media query kullanın.\u003C/p>\n\u003Cp>\u003Cstrong>Responsive ipucu\u003C/strong>\u003Cbr>@media (max-width: 720px) { .layout-container { flex-direction: column; } }\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Örnek 2: Responsive Grid (3 → 1 kolon)\u003C/h3>\n\u003Cp>\u003Cstrong>Amaç:\u003C/strong> Kartlı içeriklerin güçlü bir şekilde sıralanması için CSS Grid kullanmak.\u003C/p>\n\u003Cp>\u003Cstrong>HTML\u003C/strong>\u003Cbr><div class=\"grid\">\u003Cbr>  <div class=\"card\">...</div>\u003Cbr>  <div class=\"card\">...</div>\u003Cbr>  <div class=\"card\">...</div>\u003Cbr;</div>\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\u003Cbr>@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }\u003Cbr>@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }\u003C/p>\n\u003Cp>\u003Cstrong>Açıklama:\u003C/strong> Grid ile sütun sayısını medya sorgularıyla azaltarak farklı cihaz boyutlarında düzen korunur. Bu, responsive mini örnekler arasında sık kullanılan bir yaklaşımdır.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Örnek 3: Birincil (Primary) Buton — Erişilebilir ve Etkileşimli\u003C/h3>\n\u003Cp>\u003Cstrong>Amaç:\u003C/strong> Dikkat çekici ve kullanılabilir bir CTA butonu oluşturmak.\u003C/p>\n\u003Cp>\u003Cstrong>HTML\u003C/strong>\u003Cbr><button class=\"btn btn-primary\">Devam Et</button>\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.btn { display: inline-block; padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; }\u003Cbr>.btn-primary { background: #2563eb; color: #ffffff; transition: background-color 150ms ease, transform 50ms ease; }\u003Cbr>.btn-primary:hover { background: #1d4ed8; }\u003Cbr>.btn-primary:active { transform: translateY(1px); }\u003Cbr>.btn-primary:focus { outline: 3px solid rgba(37,99,235,0.22); outline-offset: 3px; }\u003C/p>\n\u003Cp>\u003Cstrong>Açıklama:\u003C/strong> Semantic <button> kullanmak, klavye ve ekran okuyucuları için en iyi uygulamadır. Hover ve focus durumları kullanıcı deneyimini iyileştirir; buton stilleri ve etkileşimler için daha fazla örnek \u003Ca href=\"https://1kodum.com/html-ve-css-ile-buton-tasarimi-1/\">1Kodum'un buton örnekleri\u003C/a> bölümünde bulunabilir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Örnek 4: Ghost / Outline Buton\u003C/h3>\n\u003Cp>\u003Cstrong>Amaç:\u003C/strong> Daha az baskın, temiz bir ikincil buton (secondary action).\u003C/p>\n\u003Cp>\u003Cstrong>HTML\u003C/strong>\u003Cbr><button class=\"btn btn-ghost\">İptal</button>\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.btn-ghost { background: transparent; border: 2px solid #6b7280; color: #374151; }\u003Cbr>.btn-ghost:hover { background: rgba(59,130,246,0.06); border-color: #2563eb; color: #2563eb; }\u003C/p>\n\u003Cp>\u003Cstrong>Açıklama:\u003C/strong> Outline butonlar ikincil eylemler için uygundur. Görsel dönüşümlere yumuşak geçişler eklemek kullanıcı algısını iyileştirir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Örnek 5: Basit Kart (Card) Tasarımı\u003C/h3>\n\u003Cp>\u003Cstrong>Amaç:\u003C/strong> İçerikleri görsel olarak gruplamak ve CTA ile sunmak.\u003C/p>\n\u003Cp>\u003Cstrong>HTML\u003C/strong>\u003Cbr><div class=\"card\">\u003Cbr>  <img src=\"https://via.placeholder.com/400x200?text=Resim\" alt=\"Kısa açıklama\">\u003Cbr>  <h4>Başlık</h4>\u003Cbr>  <p>Kısa açıklama veya özet metin.</p>\u003Cbr>  <button class=\"btn btn-primary\">Detayları Gör</button>\u003Cbr;</div>\u003C/p>\n\u003Cp>\u003Cstrong>CSS\u003C/strong>\u003Cbr>.card { background: #ffffff; border-radius: 10px; box-shadow: 0 6px 18px rgba(15,23,42,0.06); overflow: hidden; }\u003Cbr>.card img { width: 100%; display: block; }\u003Cbr>.card h4 { margin: 12px 16px 4px; }\u003Cbr>.card p { margin: 0 16px 12px; color: #4b5563; }\u003C/p>\n\u003Cp>\u003Cstrong>Açıklama:\u003C/strong> Kart tasarımı içerik sunumunu düzenler ve görsel çekiciliği artırır. Kart örnekleri ve uygulama detayları için örnek kaynaklara bakabilirsiniz: \u003Ca href=\"https://kodlamaklazim.com/blog/html-css-ile-kart-card-ornegi\">Kodlamaklazım\u003C/a> ve \u003Ca href=\"https://www.dijitalders.com/icerik/6097/kart_tasarimi.html\">Dijital Ders\u003C/a>.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Uygulama Adımları (Kısa Rehber)\u003C/h3>\n\u003Cul>\n  \u003Cli>Yeni bir \u003Cem>index.html\u003C/em> dosyası oluşturun ve ilgili HTML parçacığını yapıştırın.\u003C/li>\n  \u003Cli>styles.css oluşturup CSS kurallarını ekleyin; HTML içinde <link rel=\"stylesheet\" href=\"styles.css\"> ile bağlayın.\u003C/li>\n  \u003Cli>Tarayıcıda dosyayı açın; responsive davranışı test etmek için pencereyi daraltın veya geliştirici araçlarını kullanın.\u003C/li>\n  \u003Cli>Butonlar için <button> öğesini tercih edin, görseller için \u003Cstrong>alt\u003C/strong> metni ekleyin ve odak stillerini kontrol edin.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Hızlı Kontrol Listesi\u003C/h3>\n\u003Cul>\n  \u003Cli>Butonlar semantic olarak <button> ile tanımlandı mı?\u003C/li>\n  \u003Cli>Görsellerde alt metin (alt) var mı?\u003C/li>\n  \u003Cli>Odak (focus) durumları görünür ve test edildi mi?\u003C/li>\n  \u003Cli>Medya sorgularıyla responsive davranış kontrol edildi mi?\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Erişilebilirlik ve Performans Notları\u003C/h3>\n\u003Cp>Renk kontrastı ve odak görünürlüğü önemlidir. WCAG önerilerine göre normal metin için 4.5:1, büyük metin ve kullanıcı arayüzü öğeleri için 3:1 kontrast hedeflenmesi yaygın bir yaklaşımdır. Ayrıca resimleri uygun boyutta sunup sıkıştırarak sayfa yükleme süresini azaltın.\u003C/p>\n\u003Cp>Daha kapsamlı responsive uygulamalar ve başlangıç rehberleri için kurs ve referans içeriklere göz atabilirsiniz. Responsive tasarımın temelleri ve örnek uygulamalar geniş şekilde ele alınmıştır; örneğin bir başlangıç kursu referansı: \u003Ca href=\"https://www.udemy.com/course/sifirdan-orneklerle-html5-ve-css3-kursu/\">Udemy HTML5 & CSS3 Kursu\u003C/a>.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Sınırlamalar ve Öneriler\u003C/h3>\n\u003Cp>Bu örnekler öğretici amaçlı temel şablonlardır; üretime alırken tarayıcı uyumluluğu, erişilebilirlik testleri ve performans optimizasyonu yapmayı unutmayın. Özelleştirme için renk paleti, tipografi ve responsive kırılma noktalarını projenize göre belirleyin.\u003C/p>\n\n\u003Ch3>Kaynaklar ve İleri Okuma\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://1kodum.com/html-ve-css-ile-buton-tasarimi-1/\">1Kodum — Buton Tasarımları\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://kodlamaklazim.com/blog/html-css-ile-kart-card-ornegi\">Kodlamaklazım — Kart Örneği\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.dijitalders.com/icerik/6097/kart_tasarimi.html\">Dijital Ders — Kart Tasarımı\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.udemy.com/course/sifirdan-orneklerle-html5-ve-css3-kursu/\">Udemy — HTML5 & CSS3 Kursu\u003C/a>\u003C/li>\n\u003C/ul>","HTML & CSS için 5 Mini Örnek — Kolay kod örnekleri ve açıklı","Başlangıç seviyesindeki geliştiriciler için 5 kısa HTML & CSS örneği: iki yerleşim (Flex, Grid), iki buton stili ve bir kart tasarımı. Her örnek kolay uygulanır","kolay kod örnekleri, html css örnekleri, basit web tasarım snippetleri, responsive mini örnekler, html css başlangıç","html-css-icin-5-mini-ornek-yerlesim-buton-kart","2026-04-04T16:14:29.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/9a78148c3fe45370e8ff58b506da8ba1.jpg","/media/blog/9a78148c3fe45370e8ff58b506da8ba1_thumb.jpg","/media/blog/9a78148c3fe45370e8ff58b506da8ba1.webp","/media/blog/9a78148c3fe45370e8ff58b506da8ba1_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,855,0,"5 dk okuma süresi","/blog/html-css-mini-ornekleri/html-css-icin-5-mini-ornek-yerlesim-buton-kart",[],["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/9a78148c3fe45370e8ff58b506da8ba1.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/html-css-mini-ornekleri/html-css-icin-5-mini-ornek-yerlesim-buton-kart",{"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-icin-5-mini-ornek-yerlesim-buton-kart",["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]