GrienSoft AI · 02.08.2026
Günümüz dijital çağında, internet siteleri iş dünyasından kişisel ifadelere kadar her alanda merkezi bir rol oynamaktadır. Bu sitelerin ardındaki temel yapı taşları ise HTML ve CSS'tir. Bu rehberde, web dünyasının bu iki temel dilinin ne olduğunu, nasıl çalıştıklarını ve birlikte nasıl güçlü bir sinerji oluşturduklarını detaylıca inceleyeceğiz.
HTML (HyperText Markup Language), bir web sayfasının iskeletini ve içeriğini tanımlamak için kullanılan standart işaretleme dilidir. Bir internet sitesini bir bina olarak düşünürsek, HTML bu binanın temelini, duvarlarını, odalarını ve kapılarını oluşturan yapıdır. Yani, bir web sayfasında gördüğünüz tüm metinler, görseller, videolar, bağlantılar ve diğer etkileşimli öğeler HTML tarafından düzenlenir ve konumlandırılır.
HTML'in temel görevi, web tarayıcılarına bir sayfanın içeriğinin ne olduğunu ve bu içeriğin hiyerarşisini anlatmaktır. Bunu etiketler (tags) aracılığıyla yapar. Etiketler, içeriği kapsayan ve tarayıcıya o içeriğin türünü ve davranışını bildiren özel anahtar kelimelerdir. Çoğu etiket, bir açılış etiketi (örneğin <p>) ve bir kapanış etiketi (örneğin </p>) ile bir içeriği çevreler. Bazı etiketler ise tek başına kullanılır (örneğin <img> veya <br>).
İşinizi dijitalde büyütmenin yolunu gösterelim — 24 saat içinde dönüş.
<html>: Tüm HTML belgesini kapsayan kök öğedir.<head>: Sayfa hakkında meta bilgileri (sayfa başlığı, stil dosyaları, betikler vb.) içerir. Bu kısım doğrudan tarayıcıda görünmez.<body>: Bir web sayfasının gerçek içeriğini barındıran kısımdır. Kullanıcıların tarayıcıda gördüğü tüm öğeler (metinler, görseller, bağlantılar vb.) burada yer alır.<h1>'den <h6>'ya kadar: Başlık etiketleridir. <h1> en önemli başlığı, <h6> ise en az önemli başlığı temsil eder.<p>: Paragraf metinlerini tanımlar.<a>: Köprü (link) oluşturmak için kullanılır.<img>: Görsel eklemek için kullanılır.<ul> ve <ol>: Sırasız (madde işaretli) ve sıralı (numaralı) listeler oluşturmak için kullanılır.<div> ve <span>: İçerikleri gruplamak ve stil uygulamak için kullanılan genel amaçlı kapsayıcı öğelerdir.HTML, Tim Berners-Lee tarafından 1990'ların başında geliştirildiğinden bu yana sürekli evrim geçirmektedir. Günümüzde en yaygın kullanılan ve tavsiye edilen sürüm HTML5'tir. HTML5, multimedya desteği (video ve ses etiketleri), daha iyi semantik yapılar (<article>, <section>, <nav> gibi etiketler) ve gelişmiş form kontrolleri gibi birçok yeni özellik sunarak web geliştiricilerine daha güçlü araçlar sağlamıştır.
CSS (Cascading Style Sheets), bir web sayfasının görsel sunumunu (renkler, fontlar, düzen, boşluklar vb.) kontrol etmek için kullanılan stil sayfası dilidir. HTML, bir binanın iskeletini oluştururken, CSS bu binanın boyasını, mobilyalarını, iç dekorasyonunu ve dış cephesini belirler. Yani, bir web sayfasının nasıl göründüğü tamamen CSS ile ilgilidir.
CSS'in temel amacı, içeriği yapıdan ayırarak tasarımın daha kolay yönetilebilir ve tutarlı olmasını sağlamaktır. Bir HTML etiketiyle tanımlanan bir öğeye (örneğin bir paragraf veya bir başlık) nasıl görüneceğini söyleyen kurallar bütünüdür. Bu kurallar, seçiciler (selectors) ve bildirim blokları (declaration blocks) kullanılarak yazılır.
Bir CSS kuralı genel olarak şöyle görünür:
h1 {
color: blue;
font-size: 24px;
}h1: Bu bir seçicidir ve HTML belgesindeki tüm <h1> etiketlerini hedefler.color: blue;: Bu bir bildirimdir. color özellik adıdır, blue ise değeridir. Bu bildirim, <h1> etiketlerinin metin renginin mavi olmasını sağlar.font-size: 24px;: Bu da bir bildirimdir ve <h1> etiketlerinin yazı tipi boyutunu 24 piksel olarak ayarlar.CSS, bir HTML belgesine üç farklı şekilde uygulanabilir:
style özniteliği içinde tanımlanır. Bu yöntem, küçük değişiklikler için pratik olsa da, büyük projelerde kod tekrarına ve yönetim zorluğuna yol açar.<head> bölümünde <style> etiketleri arasına yazılır. Bu, tek bir sayfa için stilleri merkezi bir yerde tutmak açısından faydalıdır..css uzantılı dosyada saklanır ve HTML belgesine <link> etiketi ile bağlanır. Bu yöntem, birden fazla HTML sayfası için aynı stil dosyasını kullanarak tutarlı bir tasarım sağlar ve yönetimi kolaylaştırır.CSS'in sunduğu olanaklar oldukça geniştir:
HTML ve CSS, web geliştirmenin ayrılmaz ikilisidir. HTML, sayfanın yapısını ve içeriğini sağlarken, CSS bu yapıyı alır ve ona görsel bir kimlik kazandırır. Birbirleri olmadan, web siteleri ya biçimsiz metin yığınları ya da işlevsiz görsel şölenler olurdu.
Web geliştirme sürecinde, genellikle önce HTML ile sayfanın tüm içeriği ve yapısı oluşturulur. Ardından, oluşturulan bu HTML yapısına CSS ile stil verilir. Örneğin, bir menü oluşturmak için HTML'de bir <nav> etiketi içinde sıralı liste (<ul> ve <li>) kullanılır. Daha sonra CSS ile bu menünün yatay mı dikey mi duracağı, bağlantıların renkleri, üzerine gelindiğinde değişen stiller gibi tüm görsel özellikler belirlenir.
Bu ayrım, geliştirme sürecini daha düzenli, verimli ve yönetilebilir kılar. Bir tasarım değişikliği gerektiğinde, sadece CSS dosyasında değişiklik yapmak yeterli olur, HTML yapısına dokunmaya gerek kalmaz. Bu, özellikle büyük ve karmaşık projelerde zaman ve emek tasarrufu sağlar.
Günümüz modern web tasarımında, HTML5 ve CSS3'ün sunduğu gelişmiş özellikler sayesinde çok daha dinamik, etkileşimli ve kullanıcı dostu arayüzler oluşturmak mümkündür. Duyarlı tasarım prensipleri, mobil cihazlardan masaüstü bilgisayarlara kadar her türlü ekran boyutunda mükemmel bir kullanıcı deneyimi sunmanın anahtarıdır. HTML ve CSS, bu duyarlı yapıların temelini oluşturur.
HTML ve CSS'in web geliştirme dünyasındaki önemi birkaç temel faktöre dayanmaktadır:
HTML ve CSS öğrenmek, web geliştirme yolculuğuna başlamak için atılacak ilk ve en temel adımlardır. Başlangıç için birçok ücretsiz ve ücretli kaynak bulunmaktadır:
HTML ve CSS, modern web'in temel taşlarıdır. Bir internet sitesinin iskeletini oluşturmaktan, ona estetik ve işlevsel bir görünüm kazandırmaya kadar her aşamada merkezi bir rol oynarlar. Bu iki dilin derinlemesine anlaşılması, dijital dünyada başarılı bir varlık oluşturmak isteyen herkes için vazgeçilmez bir başlangıç noktasıdır.
Eğer siz de bu temel yapı taşlarını kullanarak markanıza özel, modern ve etkileyici bir web sitesine sahip olmak istiyorsanız, GrienSoft olarak e-ticaret, kurumsal web ve SEO çözümlerimizle yanınızdayız. Esnek ödeme seçenekleri, çoklu yıl alımlarında hediye ay fırsatları ve vade farksız taksit imkanlarımızla projelerinizi hayata geçirmek için bize ulaşabilirsiniz.
HTML, bir web sayfasının içeriğini ve yapısını (iskeletini) tanımlayan işaretleme dilidir. CSS ise bu HTML yapısının görsel görünümünü (tasarımını, renklerini, düzenini) belirleyen stil sayfası dilidir.
HTML5 ve CSS3, bu dillerin en güncel ve yaygın kullanılan sürümleridir. HTML5, yeni semantik etiketler ve multimedya desteği sunarken, CSS3 ise animasyonlar, dönüşümler ve gelişmiş düzen seçenekleri gibi modern tasarım özellikleri ekler.
Web siteleri, içeriği (HTML) ve tasarımı (CSS) birbirinden ayırmak için hem HTML hem de CSS kullanır. Bu ayrım, web sitesinin daha düzenli, yönetilebilir olmasını sağlar, geliştirme sürecini hızlandırır ve tutarlı bir marka kimliği oluşturmaya yardımcı olur.
Duyarlı tasarım, bir web sitesinin farklı ekran boyutlarına ve cihazlara (mobil, tablet, masaüstü) otomatik olarak uyum sağlaması anlamına gelir. HTML, içeriğin temel yapısını sağlarken, CSS'in medya sorguları özelliği sayesinde farklı ekran boyutlarına göre değişen stil kuralları uygulanarak bu uyum sağlanır.