29.04.2025
1
Beğenme
5
Görüntülenme
HTML: Bir Web Sitesinin Görünmeyen Kahramanı
Her gün saatlerimizi geçirdiğimiz web sitelerinin perde arkasında sessiz bir kahraman var: HTML.
Belki de HTML, adını sıkça duyduğumuz ama tam olarak nasıl çalıştığını pek düşünmediğimiz teknolojilerden biri.
Peki HTML neden bu kadar önemli? Hangi hatalar yeni başlayanların en çok düştüğü tuzaklar arasında?
Ve bugünlerde modern HTML nasıl kullanılıyor?
Bu yazıda hem yeni başlayanlar hem de bilgilerini tazelemek isteyenler için HTML dünyasına kısa ama keyifli bir yolculuk yapacağız!
Nedir bu HTML?
HTML, yani HyperText Markup Language, bir web sitesinin iskeleti gibidir.
Bir bina düşün: Dış cephesi, rengi, mobilyaları sonra gelir ama önce sağlam bir iskelet kurulur, değil mi?
İşte HTML, bir web sitesinin o görünmeyen ama en temel yapısını oluşturur.
🔎 HTML sayesinde:
- Başlıklar hiyerarşik şekilde yerleştirilir.
- Paragraflar anlamlı şekilde ayrılır.
- Butonlar, formlar, linkler doğru yerlere konur.
- Görseller sayfanın içine düzgün şekilde eklenir.
Yani HTML, bir web sitesinin "Ne nerede olacak?" sorusunun cevabıdır.
Henüz süslenmemiş, henüz canlanmamış ama ayakta duran bir yapı.
Şöyle düşün:
Görev | Teknoloji |
|---|---|
İskeleti kurar | HTML |
Şıklık ve tasarım katar | CSS |
Hareket, tepki ve zeka ekler | JavaScript |
Bir restoran açıyorsun gibi düşün.
HTML, masaların yerleşimi, mutfağın konumu, kapının nerede olduğu gibi temel düzeni yapar.
CSS, duvar rengini, masa örtülerini, şamdanları ayarlar.
JavaScript ise garsonların sipariş alıp servis yapmasını sağlar.
Peki HTML olmasaydı ne olurdu?
Şimdi gözünü kapat ve şunu hayal et:
Bir kitap alıyorsun ama içinde bölüm başlıkları yok, paragraflar yok, resimler yok.
Tüm yazılar aralıksız, dümdüz bir metin halinde akıyor.
Okurken nerede duracağını bilemezsin, konuyu takip edemezsin, kısa sürede sıkılırsın.
İşte HTML olmasaydı, web siteleri böyle kaotik ve yorucu olurdu.
- Hangi yazı önemli, hangisi yan bilgi ayırt edemezdik.
- Linkler, butonlar, görseller birbirine karışırdı.
- Kullanıcılar sitelerde kaybolur, aradığını bulamazdı.
HTML, bir web sitesine akış, anlam ve kullanılabilirlik kazandırır.
Tıpkı bir şehir haritası gibi:
Sokakların, meydanların, binaların nerede olduğunu bilmeden şehri gezmek ne kadar zorsa, HTML'siz bir siteyi kullanmak da o kadar karmaşık olurdu.
HTML'in temel taşları
Bir web sayfası kurarken eline bir kutu lego aldığını düşün.
Her bir HTML etiketi, o legolardan bir parça gibi.
Birbirine doğru şekilde eklendiğinde ortaya sağlam bir yapı çıkar.
İşte HTML'in en temel yapı taşları:
<html> — Sayfanın Başlangıcı ve Sonu
Bu etiket, bir sitenin ana kutusudur.
Tüm içerikler bu kutunun içinde yer almak zorundadır.
Başlangıç <html> ile açılır, sonunda </html> ile kapatılır.
<head> — Sayfanın Beyni
Bu bölüm, kullanıcının doğrudan görmediği ama site hakkında bilgi verdiğin yerdir.
Buraya sayfa başlığı, karakter ayarları, SEO için anahtar kelimeler gibi bilgiler yazılır.
Bir kitap kapağının içinde gizli olan "baskı bilgileri" gibi düşün.
<body> — Gözle Görünen Her Şey
İşte ziyaretçilerin gözleriyle gördüğü tüm başlıklar, yazılar, görseller, linkler burada!
Sayfanın "sahne önü" gibi.
Ne varsa hepsi <body> içinde olacak.
<h1> - <h6> — Başlıklar
Başlıklar yazının yol tabelalarıdır.
<h1>en büyük, en önemli başlık.<h6>ise en küçük alt başlıktır.
Örneğin bir haber sitesinde ana başlık <h1>, haber altındaki bölüm başlığı <h2> ile işaretlenir.
<p> — Paragraf
Normal metinleri yazmak için kullanılır.
Okuduğunuz her yazı bloğu genellikle bir <p> etiketi içinde saklıdır.
<a> — Link (Bağlantı)
Bir yerden başka bir yere geçmeni sağlayan köprülerdir.
Tıpkı bir kitaptaki "sonraki bölüme git" yönlendirmeleri gibi.
<img> — Görsel
Web sayfasına fotoğraf veya illüstrasyon eklemek için kullanılır.
Ama unutma: alt etiketi eklemek de çok önemli!
(Alt etiketi: Görsel yüklenemezse ya da ekran okuyucu kullanılıyorsa alternatif açıklama gösterir.)
<div> — Bölüm Kutusu
Sayfanın farklı alanlarını gruplamak için kullanılır.
Büyük bir bina yaparken her katı ayrı bir çerçeveyle çizmek gibi.
Ama dikkat: Her şeyi dive boğmak kötü bir alışkanlıktır!
(Modern HTML'de daha anlamlı etiketler var.)
<span> — Küçük İşaretlemeler
Metin içinde sadece ufak bir kısmı değiştirmek veya işaretlemek istediğinde kullanırsın.
Örneğin bir kelimeyi diğerlerinden farklı renkte göstermek istiyorsan.
💬 Küçük Hatırlatma:
Her HTML etiketi açılır ve kapatılır:
<p>Bu bir paragraftır.</p>
Eğer açıp kapatmazsan, kodun düzensiz görünür ve bazı tarayıcılarda sorunlar çıkabilir.
Yeni başlayanlar için sık yapılan HTML hataları
İlk başladığında herkesin düştüğü bazı klasik tuzaklar var:
- Kapanış etiketlerini unutmak
(Özellikle<p>,<div>,<section>gibi blok etiketlerde.) - Başlık etiketlerini yanlış sıralamak
(Örneğin doğrudan<h1>'den<h4>'e atlamak. SEO açısından kötü bir işaret olur.) - Görsellere
altmetni yazmamak
(Bu erişilebilirlik ve SEO açısından büyük bir eksikliktir.) - Her şeyi
<div>içinde boğmak
(Artık<section>,<article>,<nav>,<footer>gibi semantic etiketler kullanıyoruz.)
Modern HTML ipuçları
Eskiden her şey <div> ve <p> ile çözülmeye çalışılırdı.
Ama HTML5 ile birlikte çok daha anlamlı, düzenli ve güçlü yapılar geldi.
İşte bunlardan bazıları:
<section>: Bir sayfanın bağımsız bir bölümünü tanımlar.<article>: Bağımsız bir içerik parçası (örneğin bir blog yazısı).<nav>: Navigasyon menülerini barındırır.<aside>: Yan bilgi ya da reklam bölümü.<main>: Sayfanın asıl ana içeriği.
Ayrıca medya desteği geldi:
<video>etiketiyle doğrudan videolar ekleyebilir,<audio>etiketiyle ses dosyaları yerleştirebilirsin.
Grafik mi çizmek istiyorsun?
<canvas>etiketi sayesinde tarayıcı üzerinde anlık çizimler ve animasyonlar yapabiliyoruz.
Ve formlar daha güçlü:
<input type="email">,<input type="date">,<input type="range">gibi yeni form elemanları geldi.
Tüm bunlar, web sitelerimizi daha anlamlı, erişilebilir ve modern hale getiriyor.
Küçük bir alıştırma yapalım:
Hemen öğrendiklerimizi kullanalım:
Basit bir kişisel tanıtım kartı nasıl hazırlanırdı?
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Benim Tanıtım Kartım</title>
</head>
<body>
<section>
<h1>Merhaba, Ben İpek!</h1>
<p>Yazılım mühendisi, veri bilimci ve teknoloji aşığıyım.</p>
<a href="https://www.linkedin.com" target="_blank">LinkedIn Profilime Git</a>
</section>
</body>
</html>
Basit ama çok etkili değil mi?
Yalnızca birkaç satır kodla kendini internette tanıtabilirsin!
Bir satır kodla bir dünya kurmak
HTML öğrenmek, sadece teknik bir beceri kazanmak değildir.
Bu bir hikaye anlatma sanatıdır.
- Yapıyı kurarsın.
- Anlamı yerleştirirsin.
- Ziyaretçiyi yormadan, doğru bilgiye doğru bir yol açarsın.
İster ilk web siteni kuruyor ol ister tecrübeli bir geliştirici ol temel HTML bilgisi her zaman güçlü bir temel sağlar.
✨ O yüzden bugün birkaç satırla başla.
Yarın belki de yüzbinlerce kişinin kullanacağı bir web sitesinin temelini atmış olacaksın!
Yorumlar
Kullanıcı yorumlarını görüntüleyebilmek için kayıt olmalısınız!
İpek Dede
Yazılım mühendisliği ve veri bilimi alanında yüksek lisans geçmişim ile, çeşitli becerilere sahip ve web geliştirme alanına odaklıyım. JavaScript, Python, TypeScript ve React ve Flask gibi çerçeveleri kullanarak dinamik, kullanıcı dostu uygulamalar oluşturma becerilerime güveniyorum. Sürekli öğrenme ve etkili çözümler üretmek için yenilikçi teknolojileri keşfetme konusunda tutkuluyum.
Konum
İzmir, TR
Eğitim
Şehir ve Bölge Planlama - İzmir Yüksek Teknoloji Enstitüsü
Yazılım Mühendisliği ve Veri Bilimi - İzmir Yüksek Teknoloji Enstitüsü
İş Tecrübesi
Planlama Stajı - İzmir Kalkınma Ajansı
Proje ve İş Geliştirme - İzmir Kalkınma Ajansı
Frontend Developer - BREW
Yazılım Mühendisi - Dettai