Flexbox (Flexible Box Layout), tek boyutlu (1D) düzenler (satır veya sütun) oluşturmak için kullanılan bir CSS layout modelidir.Özellikle responsive (duyarlı) tasarım için oldukça uygundur. FLEX CONTAINER Bir elementi flex konteyner yapmak için: Bu özellik verildiğinde, içindeki öğeler flex item olur. Ana Kavramlar Main Axis (Ana Eksen) Varsayılan olarak yataydır. Cross…
Bir web adresi (URL – Uniform Resource Locator), internet üzerindeki herhangi bir kaynağa (web sayfası, görsel, dosya, API vb.) erişmemizi sağlayan standart bir adresleme sistemidir. URL yapısını doğru anlamak; web geliştirme, SEO, güvenlik ve performans açısından büyük önem taşır. Örnek bir URL üzerinden inceleyelim: Bu URL farklı bölümlerden oluşur ve…
CSS Grid Layout, modern web tasarımında iki boyutlu (satır ve sütun bazlı) düzen oluşturmayı sağlayan güçlü bir yerleşim sistemidir. Grid yapısı; bir grid container (ızgara kapsayıcı) ve onun içindeki grid item (ızgara öğeleri) mantığıyla çalışır. Bu yapı sayesinde karmaşık sayfa düzenleri, temiz ve okunabilir CSS kodları ile kolayca oluşturulabilir. 1️⃣…
CSS’te text-transform özelliği, bir metnin büyük/küçük harf biçimini değiştirmek için kullanılır. HTML içeriğini değiştirmeden yalnızca görsel sunumu düzenler. Görseldeki örnek metin: 1️⃣ text-transform: uppercase; Metindeki tüm harfleri BÜYÜK HARF yapar. Çıktı: Ne işe yarar? 2️⃣ text-transform: capitalize; Her kelimenin ilk harfini büyük yapar. Çıktı: Not: capitalize, sadece kelimelerin ilk harfini…
Web tasarımında düzen (layout) oluştururken en çok kullanılan iki temel özellik margin ve padding’dir. Bu iki özellik, bir HTML elementinin etrafındaki boşlukları kontrol eder ancak görevleri ve davranışları farklıdır. Aşağıda görseldeki içeriğin yazıya dökülmüş ve geliştirilmiş profesyonel versiyonunu bulabilirsiniz. 1️⃣ Margin Nedir? Margin, bir elementin border (kenarlık) çizgisinin dışındaki boşluk…
Görselde iki farklı yapı karşılaştırılmaktadır: 🔹 Semantik Olmayan Yapı (Solda) Bu yapı tamamen <div> ve <span> etiketleri ile oluşturulmuştur.Ancak bu etiketler anlamsal değildir, yani sayfanın hangi bölümünün ne işe yaradığını açıklamazlar. 🔹 Semantik Yapı (Sağda) Bu etiketler HTML5 ile gelen anlamsal (semantic) etiketlerdir ve sayfanın yapısını açık şekilde ifade eder.…
CSS Flexbox (Flexible Box Layout), modern web tasarımında esnek ve dinamik düzenler oluşturmak için kullanılan güçlü bir layout sistemidir. Özellikle responsive (duyarlı) tasarımlarda, dikey-yatay ortalama işlemlerinde ve karmaşık hizalama senaryolarında büyük kolaylık sağlar. Bu rehberde Flexbox’ın temel mantığını, görseldeki tüm başlıkları ve profesyonel kullanım detaylarını bir araya getirerek kapsamlı şekilde…
HTML (HyperText Markup Language), web sayfalarının temel yapı taşıdır. Aşağıda görselde yer alan HTML etiketlerinin tamamını yazıya döktüm ve ardından profesyonel bir açıklama rehberi hazırladım. 📌 Görseldeki HTML Etiketleri Listesi 🚀 HTML Etiketleri Nedir? HTML etiketleri, web sayfasının yapısını oluşturan kod bloklarıdır. Her etiket belirli bir işlevi yerine getirir: 📂…
Why use them?Klavyede bulunmayan karakterler (örneğin ©, €) veya HTML sözdiziminde (syntax) özel anlam taşıyan karakterler (örneğin <, >, &) için kullanılır.Bu karakterler doğrudan yazılırsa kodu bozabilir. SYNTAX: Bir HTML entity: Two Types (İki Tür) Common Examples (Yaygın Örnekler) Symbol Description Entity Name Entity Number < Less than < <…
CSS, HTML bağlantılarını (<a> etiketleri) durumlarına (state) göre stillendirmemizi sağlar. Linklerin kullanıcıyla etkileşime göre farklı görünümler alması, hem kullanıcı deneyimini (UX) hem de görsel tasarımı güçlendirir. CSS’te bağlantılar için 4 temel pseudo-class (sözde sınıf) bulunur: ⚠️ Bu pseudo-class’ların yazım sırası çok önemlidir. 1️⃣ :link (Unvisited – Ziyaret Edilmemiş) Henüz tıklanmamış…
CSS Selectors (CSS Seçiciler), HTML dokümanındaki belirli öğeleri hedefleyerek onlara stil uygulamamızı sağlayan yapılardır. Doğru seçici kullanımı; daha temiz, performanslı ve sürdürülebilir kod yazmanın temelidir. Bu rehberde, temel seçicilerden gelişmiş kombinasyonlara kadar tüm önemli CSS seçici türlerini detaylı ve profesyonel bir şekilde ele alacağız. 1️⃣ Basic Selectors (Temel Seçiciler) Temel…
Web tasarımında görsel hiyerarşi oluşturmak, içerikleri ayırmak ve tasarıma estetik bir çerçeve kazandırmak için CSS border (kenarlık) özellikleri büyük önem taşır. CSS ile bir HTML elementine kenarlık ekleyebilir, kalınlığını, stilini ve rengini belirleyebilirsiniz. Bu rehberde CSS border özelliklerini detaylı ve profesyonel bir şekilde ele alacağız. CSS Border Core Properties (Temel…
Web tasarımında en sık karşılaşılan ihtiyaçlardan biri bir div elementini yatay ve dikey olarak ortalamaktır. CSS’te bir elementi tam merkeze hizalamak için farklı yöntemler bulunmaktadır. Bu yazıda en modern ve profesyonel yöntemlerden klasik yaklaşıma kadar tüm teknikleri detaylı olarak inceleyeceğiz. 1️⃣ Method 1: Flexbox (Önerilen Yöntem) Flexbox, modern web geliştirmede…
Windows işletim sistemi, özellikle sistem yöneticileri, IT uzmanları ve siber güvenlik analistleri için güçlü komut satırı araçları sunar. Command Prompt (CMD) üzerinden çalıştırılan bu komutlar; ağ analizi, sistem bilgisi toplama, servis yönetimi, kullanıcı kontrolü, disk işlemleri ve adli bilişim süreçlerinde kritik rol oynar. Command Prompt Nasıl Açılır? 1️⃣ Temel Ağ…
Web geliştirmenin temeli olan HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan işaretleme dilidir. Bir web sitesinin tarayıcıda düzgün görüntülenebilmesi için belirli bir temel yapıya sahip olması gerekir. Bu yapı genellikle bir index.html dosyası ile başlar. Bu yazıda, basit bir HTML sayfasının yapısını inceleyecek ve ardından daha profesyonel bir sürümünü…
HTML formları, web sitelerinde kullanıcıdan veri almak için kullanılan en temel yapılardır. <input> etiketi ise formların en önemli bileşenidir. HTML5 ile birlikte gelen farklı input type seçenekleri sayesinde kullanıcı deneyimi geliştirilmiş, doğrulama (validation) süreçleri kolaylaştırılmış ve mobil uyumluluk artırılmıştır. Bu yazıda görselde bulunan tüm input türlerini detaylı şekilde inceleyeceğiz ve…
