HTML Nedir, Ne İşe Yarar?

HTML (HyperText Markup Language), web sayfalarının içerik yapısını tanımlamak için kullanılan işaretleme dilidir.

Bir web sayfasındaki başlıklar, paragraflar, bağlantılar, görseller, listeler ve formlar HTML öğeleriyle oluşturulur. HTML, tarayıcıya sayfanın hangi bölümlerden meydana geldiğini anlatır.

HTML ile Neler Yapılabilir?

• Web sayfalarına başlık ve paragraf eklemek
• Görsel ve bağlantı yerleştirmek
• Liste ve tablo oluşturmak
• Form alanları hazırlamak
• Sayfanın ana bölümlerini düzenlemek
• İçeriği anlamsal HTML etiketleriyle yapılandırmak

HTML, tek başına gelişmiş görsel tasarım veya dinamik uygulama davranışları oluşturmak için yeterli değildir. Bu amaçlarla CSS ve JavaScript gibi diğer web teknolojileri kullanılır.

HTML'nin temel yapısını, etiketlerini ve kullanım alanlarını daha ayrıntılı öğrenmek isteyenler, İstanbul Kent Üniversitesi'nin HTML Semineri içeriğini inceleyebilir.

CSS Nedir, Ne İşe Yarar?

CSS (Cascading Style Sheets), HTML ile oluşturulan web sayfalarının görünümünü düzenlemek için kullanılan stil dilidir.

CSS sayesinde metinlerin renkleri, yazı boyutları, arka planlar, kenarlıklar, boşluklar ve sayfa yerleşimi kontrol edilebilir.

CSS ile Neler Yapılabilir?

• Yazı tiplerini ve renkleri değiştirmek
• Arka plan ve kenarlık tasarımları oluşturmak
• Menü ve kart tasarımları hazırlamak
• Flexbox ile öğeleri hizalamak
• CSS Grid ile sayfa düzenleri oluşturmak
• Mobil, tablet ve masaüstü ekranlara uyum sağlamak
• Geçişler ve temel animasyonlar hazırlamak

HTML ile CSS birlikte kullanıldığında hem anlamlı içerik yapısına hem de düzenli bir görsel tasarıma sahip web sayfaları oluşturulabilir.

HTML ve CSS Arasındaki Fark Nedir?

HTML ve CSS farklı görevler üstlenir. HTML sayfanın içeriğini ve yapısını belirlerken CSS bu içeriğin nasıl görüneceğini düzenler.

Basit bir benzetmeyle HTML bir binanın yapısal düzenine, CSS ise binanın görünümünü belirleyen tasarım unsurlarına benzetilebilir.

HTML ve CSS Öğrenmeye Nereden Başlanmalı?

Sıfırdan web geliştirme öğrenenler için en verimli yaklaşımlardan biri, konuları belirli bir sırayla öğrenmek ve her aşamada küçük uygulamalar hazırlamaktır.

1. Web Sitelerinin Nasıl Çalıştığını Öğrenin

Öncelikle tarayıcı, web sunucusu, alan adı, URL ve web sayfası kavramlarını öğrenin. Bir web sayfasının tarayıcıda nasıl görüntülendiğini anlamak sonraki konuları kolaylaştırır.

2. HTML Etiketlerini Öğrenin

Başlık, paragraf, bağlantı, görsel, liste ve form etiketlerini kullanarak basit bir sayfa hazırlayın.

3. CSS Temellerine Geçin

Renk, yazı tipi, arka plan, kenarlık, margin ve padding gibi temel özelliklerle sayfanızın görünümünü değiştirin.

4. Sayfa Yerleşimini Öğrenin

Flexbox ve Grid kullanarak içerikleri sütunlara ve satırlara yerleştirmeyi deneyin.

5. Mobil Uyumlu Tasarım Yapın

Media query, esnek genişlikler ve duyarlı görseller kullanarak sayfanın farklı ekranlarda düzgün görüntülenmesini sağlayın.

6. Gerçek Projeler Hazırlayın

Öğrendiğiniz konuları kişisel tanıtım sayfası, portfolyo veya küçük bir işletme sitesi gibi projelerle uygulayın.

HTML Öğrenmek İçin Bilinmesi Gereken Temel Etiketler

HTML öğrenirken bütün etiketleri ezberlemek gerekmez. Öncelikle sık kullanılan etiketleri ve hangi amaçla kullanıldıklarını anlamak daha yararlıdır.

İlk HTML Sayfası Örneği

Aşağıdaki örneği bir metin düzenleyiciye yazıp index.html adıyla kaydedebilirsiniz.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>İlk Web Sayfam</title>
</head>
<body>
  <h1>Merhaba Dünya!</h1>
  <p>Bu benim ilk HTML sayfam.</p>
  <a href="https://developer.mozilla.org/">
    HTML öğreniyorum
  </a>
</body>
</html>

Dosyayı tarayıcıda açtığınızda başlık, paragraf ve bağlantıdan oluşan basit bir web sayfası görüntülenir.

CSS Öğrenmek İçin Bilinmesi Gereken Temel Konular

CSS öğrenmeye başlarken seçiciler, özellikler ve değerler arasındaki ilişkiyi anlamak gerekir.

CSS Seçicileri

Seçiciler, hangi HTML öğelerine stil uygulanacağını belirler. Etiket, sınıf ve kimlik seçicileri başlangıçta öğrenilmesi gereken temel konulardır.

Renkler ve Yazı Tipleri

color, background-color, font-size ve font-family gibi özellikler metinlerin ve sayfanın görünümünü düzenler.

CSS Box Model

Box model; içerik, padding, border ve margin katmanlarından oluşur. Öğeler arasındaki boşlukları ve boyutlandırmayı anlamak için temel konulardan biridir.

Flexbox

Flexbox, öğeleri tek boyutlu bir düzende hizalamayı ve aralarındaki boşlukları yönetmeyi kolaylaştırır.

CSS Grid

Grid, satır ve sütunlardan oluşan iki boyutlu sayfa düzenleri oluşturmak için kullanılır.

Responsive Tasarım

Responsive tasarım, web sayfalarının farklı ekran genişliklerine uyum sağlamasını amaçlar. Media query ve esnek yerleşimler bu yaklaşımda önemli rol oynar.

Basit CSS Kod Örneği

body {
  font-family: Arial, sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  margin: 0;
  padding: 24px;
}

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

p {
  line-height: 1.7;
}

a {
  color: #2563eb;
}

Bu CSS kodunu style.css adıyla kaydedip HTML dosyanızın <head> bölümüne aşağıdaki satırı ekleyebilirsiniz:

<link rel="stylesheet" href="style.css">

Böylece HTML içeriği ile CSS tasarımı ayrı dosyalarda yönetilebilir.

HTML ve CSS Öğrenme Yol Haritası: 8 Haftalık Ücretsiz Plan

Aşağıdaki çalışma planı, sıfırdan başlayan ve haftada yaklaşık 5-7 saat ayırabilen kişiler için örnek olarak hazırlanmıştır. Öğrenme süresi kişisel deneyime ve çalışma düzenine göre değişebilir.

HTML ve CSS Ücretsiz Nereden Öğrenilir?

HTML ve CSS öğrenmek için internet üzerinde ücretsiz ve güvenilir eğitim kaynakları bulunmaktadır. Özellikle resmî dokümantasyonlar ve uygulama odaklı platformlar başlangıç için yararlıdır.

Bu kaynakların temel öğrenme içeriklerine ücretsiz erişilebilir. Bazı platformlarda isteğe bağlı ücretli hizmetler veya farklı üyelik seçenekleri bulunabilir.

HTML ve CSS sonrasında JavaScript öğrenerek web geliştirme becerilerini genişletmek isteyenler, İstanbul Kent Üniversitesi'nin Web Geliştirme: HTML, CSS ve JavaScript Eğitim Programı içeriğini de inceleyebilir.

Bu program, yukarıda listelenen ücretsiz kaynaklardan ayrı bir eğitim seçeneğidir. Kayıt ve ücret koşulları ilgili program sayfasından kontrol edilmelidir.

HTML ve CSS Öğrenmek İçin Hangi Programlar Kullanılır?

HTML ve CSS yazmak için güçlü bir bilgisayara veya ücretli yazılıma ihtiyaç duyulmaz. Basit bir metin düzenleyici ve modern bir web tarayıcısı başlangıç için yeterlidir.

Visual Studio Code

Visual Studio Code, HTML ve CSS dosyalarını düzenlemek için kullanılabilen ücretsiz bir kod editörüdür. Sözdizimi renklendirme ve çeşitli geliştirme araçları sunar.

Web Tarayıcısı

Chrome, Firefox veya Edge gibi modern tarayıcılar, hazırlanan HTML dosyalarını görüntülemek ve geliştirici araçlarıyla incelemek için kullanılabilir.

CodePen

CodePen, HTML ve CSS örneklerini tarayıcı üzerinden denemeye olanak sağlayan çevrim içi bir geliştirme ortamıdır.

GitHub

GitHub, kod projelerini saklamak, sürüm geçmişini takip etmek ve çalışmalarınızı paylaşmak için kullanılabilir.

Yeni başlayanların öncelikle bir kod editörü ve tarayıcı kullanmayı öğrenmesi, ardından sürüm kontrolü ve proje yayınlama araçlarına geçmesi yeterlidir.

HTML ve CSS ile İlk Web Sitesi Nasıl Yapılır?

İlk web sitesini hazırlamak için karmaşık bir proje seçmek yerine başlık, açıklama ve bağlantı içeren basit bir sayfayla başlayabilirsiniz.

Adım 1: Proje Klasörü Oluşturun

Bilgisayarınızda ilk-web-sitem adlı bir klasör açın.

Adım 2: HTML ve CSS Dosyalarını Hazırlayın

Klasörün içine index.html ve style.css dosyalarını ekleyin.

Adım 3: HTML Kodunu Yazın

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Kişisel Web Sitem</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="card">
    <h1>Merhaba, Ben Web Geliştirme Öğreniyorum</h1>
    <p>
      HTML ve CSS kullanarak ilk web sitemi hazırladım.
    </p>
    <a href="https://developer.mozilla.org/">
      Daha Fazla Öğren
    </a>
  </main>
</body>
</html>

Adım 4: CSS Kodunu Ekleyin

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  font-family: Arial, sans-serif;
  background: #f1f5f9;
  color: #0f172a;
}

.card {
  width: 100%;
  max-width: 600px;
  background: white;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

h1 {
  font-size: 30px;
  line-height: 1.3;
}

p {
  line-height: 1.7;
}

a {
  color: #1d4ed8;
}

@media (max-width: 600px) {
  .card {
    padding: 20px;
  }

  h1 {
    font-size: 24px;
  }
}

Adım 5: Sayfayı Tarayıcıda Açın

index.html dosyasını tarayıcıda açarak sonucu görüntüleyin. Ardından başlık rengini, kart genişliğini veya arka planı değiştirerek CSS özelliklerini deneyin.

Bu örnek, HTML ile içerik oluşturma ve CSS ile temel tasarım yapma süreçlerini bir araya getirir.

HTML ve CSS Öğrenmek Ne Kadar Sürer?

HTML ve CSS öğrenme süresi, kişinin daha önceki deneyimine, haftalık çalışma saatine ve ulaşmak istediği seviyeye bağlıdır.

Temel etiketleri öğrenmek ile profesyonel düzeyde erişilebilir, responsive ve sürdürülebilir arayüzler geliştirmek aynı şey değildir.

Bu süreler kesin öğrenme garantisi değil, düzenli çalışmaya dayalı örnek tahminlerdir. Bazı öğrenciler daha hızlı ilerlerken bazı konular için daha fazla uygulama gerekebilir.

HTML ve CSS ile Hangi Projeler Yapılabilir?

Öğrenilen bilgileri kalıcı hâle getirmenin etkili yollarından biri, küçük ve tamamlanabilir projeler hazırlamaktır.

Başlangıç Seviyesi Projeler

• Kişisel tanıtım sayfası
• Öz geçmiş web sayfası
• Blog yazısı tasarımı
• Basit tarif sayfası
• İletişim formu arayüzü

Orta Seviyeye Geçiş Projeleri

• Responsive portfolyo sitesi
• Ürün tanıtım sayfası
• Restoran menüsü tasarımı
• Haber veya blog ana sayfası
• CSS Grid ile fotoğraf galerisi

Projeleri geliştirirken yalnızca görünümü değil, anlamsal HTML yapısını, klavye ile kullanılabilirliği, renk kontrastını ve mobil ekran uyumunu da kontrol etmek önemlidir.

HTML ve CSS Öğrenirken Yapılan Yaygın Hatalar

Yalnızca Video İzlemek

Konuları izlemek başlangıçta yararlı olsa da kod yazmadan ilerlemek, bilgilerin uygulamaya aktarılmasını zorlaştırabilir.

Kodları Anlamadan Kopyalamak

Hazır kodları incelemek faydalıdır. Ancak her satırın ne yaptığını anlamaya çalışmak ve örnekleri değiştirmek öğrenmeyi destekler.

HTML Yapısını İhmal Etmek

Yalnızca görünümü hedeflemek yerine başlık hiyerarşisi, anlamsal etiketler ve erişilebilirlik de öğrenilmelidir.

Mobil Tasarımı Sonradan Düşünmek

Sayfaları yalnızca masaüstünde test etmek, küçük ekranlarda görüntüleme sorunlarına yol açabilir.

Her Konuyu Aynı Anda Öğrenmeye Çalışmak

HTML, CSS, JavaScript ve farklı framework'leri aynı anda öğrenmeye çalışmak başlangıçta karmaşıklık yaratabilir. Öncelikle temel konuları pekiştirmek daha sürdürülebilir bir yaklaşımdır.

Projeleri Tamamlamamak

Sürekli yeni örneklere başlamak yerine birkaç projeyi tamamlamak, hata ayıklama ve düzenleme becerilerinin gelişmesine yardımcı olabilir.

HTML ve CSS Öğrendikten Sonra Ne Öğrenilmeli?

HTML ve CSS temellerini tamamladıktan sonra web sayfalarına etkileşim kazandırmak ve daha kapsamlı uygulamalar geliştirmek için yeni teknolojilere geçilebilir.

JavaScript

JavaScript; kullanıcı etkileşimleri, form davranışları, dinamik içerikler ve web uygulamalarının programlama mantığı için öğrenilebilecek bir sonraki temel teknolojidir.

Git ve GitHub

Kod değişikliklerini takip etmek, projeleri düzenlemek ve çalışmalarınızı paylaşmak için sürüm kontrolü öğrenilebilir.

Web Erişilebilirliği

Web sitelerinin farklı ihtiyaçlara sahip kullanıcılar tarafından kullanılabilmesini destekleyen tasarım ve kodlama ilkeleri öğrenilmelidir.

Temel SEO

Başlık yapısı, anlamlı bağlantılar, sayfa açıklamaları ve içerik düzeni gibi temel SEO konuları, web sayfalarının arama motorları tarafından anlaşılmasını destekler.

Frontend Kütüphaneleri ve Framework'leri

HTML, CSS ve JavaScript temelleri güçlendikten sonra React gibi araçlar veya farklı CSS yaklaşımları öğrenilebilir. Ancak bu araçlar başlangıç için zorunlu değildir.

HTML ve CSS Bilerek İş Bulunabilir mi?

HTML ve CSS bilgisi, web tasarımı ve frontend geliştirme alanlarına giriş için önemli bir temeldir. Ancak birçok iş ilanında JavaScript, responsive tasarım, Git, erişilebilirlik ve farklı geliştirme araçlarına ilişkin beceriler de beklenebilir.

Bu nedenle yalnızca temel HTML ve CSS bilmek, her frontend geliştirici pozisyonu için yeterli olmayabilir.

İş başvurularında kişinin tamamladığı projeler, teknik becerileri, problem çözme yaklaşımı ve pozisyonun gereklilikleri önem taşır.

HTML ve CSS öğrenen kişiler, becerilerini geliştirerek web içerik düzenleme, temel arayüz hazırlama ve uygun web tasarım görevlerine yönelik fırsatları değerlendirebilir.

HTML ve CSS Hakkında Sık Sorulan Sorular

Sonuç: HTML ve CSS Öğrenmenin En Etkili Yolu Düzenli Uygulama Yapmaktır

HTML ve CSS, web geliştirme alanına başlamak isteyenler için temel teknolojilerdir. HTML ile sayfanın yapısı, CSS ile görünümü oluşturulur. Bu iki teknolojiyi öğrenmek için ücretli bir eğitime katılmak zorunlu değildir.

MDN Web Docs, freeCodeCamp ve web.dev gibi ücretsiz kaynaklar; temel kavramları öğrenmek ve uygulama yapmak için kullanılabilir. Sekiz haftalık örnek bir çalışma planı, konuları belirli bir sırayla ele almak isteyen başlangıç öğrencilerine yol gösterebilir.

Öğrenme sürecinde en önemli adım, bilgileri gerçek projelere dönüştürmektir. Basit bir HTML sayfasıyla başlayıp CSS yerleşimleri ve mobil uyumlu tasarımlara ilerlemek, daha sonra JavaScript ve frontend geliştirme alanlarına geçiş için güçlü bir temel oluşturabilir.