Web siteleri oluşturmanın temel taşları HTML (HyperText Markup Language) ve CSS (Cascading Style Sheets) teknolojileridir. Bu iki dil, internet üzerinde görsel olarak etkileşimli ve işlevsel sayfalar yaratabilmek için birbirini tamamlayan araçlardır. Web geliştirme dünyasına adım atmak isteyenlerin bu iki teknolojiyi öğrenmesi oldukça önemlidir.
HTML (HyperText Markup Language) Nedir?
HTML, web sayfalarını yapılandırmak için kullanılan bir işaretleme dilidir. HTML, sayfada görünen içeriği (metin, görsel, video, linkler, formlar, vs.) belirler ve bu içerikleri tarayıcıya nasıl göstermesi gerektiğini söyler. HTML, içerik için "etiketler" (tags) kullanır. Bu etiketler, sayfa yapısını tanımlar ve tarayıcıya hangi öğelerin hangi şekilde yer alacağını bildirir.HTML'in Temel Bileşenleri:
- Başlık (Head) ve Gömülü İçerik (Body): HTML belgesinin baş kısmında başlık bilgileri, yazar, açıklama gibi veriler yer alır. Sayfanın görünen kısmı ise "body" tag'ı ile belirtilir.
- Elementler ve Etiketler: HTML, "başlık", "paragraf", "liste" gibi temel elementleri içerir. Bu elementler, <h1>, <p>, <ul> gibi etiketlerle tanımlanır.
- Bağlantılar ve Resimler: Sayfalara başka sayfalara bağlantılar eklemek için <a> etiketi, görselleri yerleştirmek için ise <img> etiketi kullanılır.
CSS (Cascading Style Sheets) Nedir?
CSS, web sayfalarının görsel tasarımını belirleyen bir stil dilidir. HTML, sayfanın yapısını tanımlarken, CSS bu yapıya stil ve düzen ekler. Renkler, fontlar, kenarlıklar, boşluklar ve tüm sayfa tasarımı CSS sayesinde ayarlanır.CSS'in Temel Bileşenleri:
- Seçiciler (Selectors): CSS, hangi HTML öğelerine stil uygulanacağını belirtmek için "seçiciler" kullanır. Örneğin, .class, #id, p gibi seçimler ile stil uygulanacak öğeler tanımlanır.
- Özellikler ve Değerler: CSS, belirli özelliklere (renk, font, boyut) değerler atar. Örneğin, color: red; veya font-size: 16px;.
- Kutulama Modeli (Box Model): Her HTML elemanı, kenarlık (border), içerik (content), iç boşluk (padding) ve dış boşluk (margin) alanlarına sahiptir. CSS ile bu alanların genişlik ve yüksekliği ayarlanabilir.
HTML ve CSS’in Birlikte Kullanımı
HTML ve CSS birlikte çalışarak dinamik ve estetik açıdan zengin web sayfaları oluşturulmasını sağlar. HTML sayfanın yapısal iskeletini oluştururken, CSS bu yapıyı görsel olarak biçimlendirir. Örneğin, HTML ile bir başlık eklerken, CSS ile bu başlığın rengini, fontunu, boyutunu ve hizalamasını belirleyebilirsiniz.HTML ve CSS Öğrenmeye Nereden Başlanmalı?
HTML ve CSS öğrenmek için birkaç temel adım izleyebilirsiniz:- Temel Etiketler: HTML’in temel etiketlerini öğrenin (başlık, paragraf, liste vb.).
- CSS Seçiciler ve Özellikler: CSS’in temel stil özelliklerini keşfedin (renk, font, genişlik, yükseklik vb.).
- Tasarım Uygulamaları: Basit sayfa tasarımları yaparak öğrendiklerinizi pekiştirin.
