💻 HTML, Listeler ve İçerik Alıştırmaları— Web Serisi 2
Merhaba arkadaşlarım! 👋
Bu yazı, bir önceki yazıda belirttiğim uzun soluklu serimizin ikinci bölümüdür. İlk bölümde
DNS sorgularından denizaltı kablolarına kadar uzanan bu dijital yolculukta, en son sunucudan tarayıcımıza gelen üç önemli dosya türünden çok kısa bahsettik: HTML, CSS ve JavaScript
Şimdi sıra geldi bu üçlüden ilkine: HTML’e!
🚧 Bu yazıda HTML’in ne olduğunu, nasıl yazıldığını, semantik yapıların ne işe yaradığını ve sıfırdan küçük bir HTML sayfası kurmayı, bunu yaparken de webi ilgilendiren regülasyonları ve etik kod yazımını adım adım öğreneceğiz. Bir önceki yazıda belirtmiştim zaten! :)
Google’ın resmi HTML stil rehberinden (https://google.github.io/styleguide/htmlcssguide.html) ve kendi geliştirici dökümantasyonlarından faydalanarak ilerleyeceğiz ki eliniz hem kolayca alışır hem de bu süreçte sürekli yardım alabileceğiniz kaynakların olduğunu bilin.
Hazırsanız başlayalım! 🎯
Neden HTML Doğru Kullanılmalı?
Arkadaşlarım, iyi yazılmış bir HTML demek, bazı engelleri olan insanların da yazdıklarınızı okuyabilmesi, dinleyebilmesi veya bu kaynağa erişebilmesi demek. Buna örnek olarak mesela iyi yazılmış websitelerinin avantajları ve farkı şöyle oluyor:
🧠 Semantik HTML kullanmak bir kibarlık yapmak değil, bir sorumluluk hatta yükümlülüktür ve bunun için bütün adımları sizin için erişiliebilir kılmaya çalışacağım.
🧩 HTML Öğeleri Nedir?
HTML belgeleri, aslında bir düğüm ağacı gibidir. Yani her şey birbirine bağlı ve her öğe, başka bir öğeyi içine alabilir ya da yanında durabilir. Dallar ve yapraklar gibi sürekli birbirleirnden filizleniyorlar🍃
Bu yapının temelini ise “element” yani öğe dediğimiz yapılar oluşturur.
Peki bu element dediğimiz şey tam olarak nedir? Mesela şöyle düşünün:
Element, opening tag yani açma etiketimiz, içeriğimizin kendisi, kapatma etiketimiz yani closing tagin tamamını kapsayan koddur aslında.
Burada anladığınız üzere:
Tüm bu parçaların birleşimine HTML elementi diyoruz. İçerik bu etiketlerin arasında durur ve böylece tarayıcıya, “bak bu içerik birinci seviye bir başlıktır” demiş oluruz.
Bu arada her elementimiz içerik taşımak ya da yazı içermek zorunda da değildir. içeriğimiz boş olabilir, misal bir örnek göstereyim:
<img src="foto.jpg" alt="Elif'in profil fotoğrafı">
Bu bir görsel öğesi. Kapanış etiketi yok, çünkü içinde gösterilecek metin gibi bir içerik yok. Ama bakın iki önemli bilgi var:
İşte bu gibi detaylara öznitelik (attribute) diyoruz. Ve her HTML öğesi, kendi görevini yerine getirebilmesi için farklı öznitelikler alabilir.
💡 Bilmemiz gereken bir diğer önemli nokta ise şudur: Kapanış etiketi, açılış etiketiyle aynı sembolle başlar (<) ama farkı, başına bir slash (eğik çizgi) (/) almasıdır. Yani <p> bir paragraf başlatır, </p> ise onu sonlandırır.
Yukarıdaki örneği gördünüz ve artık biliyorsunuz ki elementler ve etiketler tam olarak aynı şey değildir, buna rağmen birçok kişi bu terimleri birbirinin yerine kullanyor :)
Etiket adı, parantez içindeki içerik olur genelde, etiket parantezleri içerir yani o kodun tamamıdır.
Şimdi buraya kadar sorun yok, devam ediyorum.
📦 HTML Öğelerinde Yuvalama (Nesting) ve Etiketlerin Sıralaması Nasıl oluyor?
Şimdi bir örnek üzerinden ilerleyelim ki daha rahat anlaşılabileyim.
<p>This paragraph has some <strong><em>strongly emphasized</em></strong> content.</p>
Bu ne demek oluyor? Burada bir paragraf öğesi var (<p>) biz ne zaman websitemizde bir paragraf ya da yazı, ieçrik, şiir, makale yazacak olsak kullanacağımız öge <p> olacak. Haliyle bunu kapatırken de </p> bu şekilde kapatacağız.
Fakat burada belirtmek istediğim başka bir şey var. Bu paragrafın içinde başka iki öğe yuvalanmış (nested) durumda: <strong> ve <em>. Yani HTML elementleri birbirinin içinde kullanılabiliyor gördünüz mü? Ama dikkat! Bunu yaparken çok önemli bir kurala uymamız gerekiyor, her kodu diğer kodların içinde kullanamıyoruz.
👉 Açtığın etiketi, sırasına göre tersinden kapatmalısın.
Yani önce açtığın en son etiketi, önce kapatman gerekiyor. Bu, bizim “last in, first out” dediğimiz bir mantık.
Yukarıdaki örnekte önce <strong> etiketi açılmış ama onun içine <em> girmiş. O zaman önce <em> kapanır, sonra <strong> kapanır. Sıra şu şekilde ilerler yani:
Eğer bu sıraya uymazsak, kullandığımız tarayıcılar içeriği yanlış yorumlayacaklardır. 💡 Tarayıcılar bazen bunu “tahmin eder” ve doğru şekilde gösterbeilir, ama biz web geliştiriciler ve legal engineerler olarak bu duruma kesinlikle güvenmemeliyiz.
Ha bu arada bir de not düşmek isterim! Sen bir sayfaya girdiğinde, <p> veya <ul> gibi etiketleri GÖRMEZSİN. Çünkü bu etiketler ekrana bir şey yazdırmak için değil, tarayıcının neyi nasıl göstermesi gerektiğini anlaması içindir :) HTML, yani “HyperText Markup Language” zaten bu işi yapıyor, sayfanın yapısını etiketlerle işaretliyor, bundan dolayı kendisi bir işaretleme dilidir! :)
Bir başka örnek daha verelim:
<ul> <li>Blendan Smooth <li>Hoover Sukhdeep <li>Toasty McToastface </ul>
Burada liste öğeleri <li> etiketiyle yazılmış ama hiçbiri kapatılmamış (</li> yok yani ). Buna rağmen tarayıcı bunu anlıyor ve her satırı bir liste öğesi olarak işlemeye devam ediyor. Ama buraya dikkat! 👇
💣 Bu işe yarasa da iyi bir seçenek değil. Kodun okunabilirliği azalır. Başka bir geliştirici gelip bu kodu gördüğünde, burada kapanış eksik mi bırakılmış, yoksa bilinçli mi bırakılmış neden bırakılmış diye düşünmek zorunda kalır.
💡 Kapanış etiketleri, kodun netliğini sağlar yani.
Şimdiiiii!!
🧱 Her HTML belgesinde olması gereken temel yapıları görelim
Bir HTML belgesi oluştururken bazı şeyler vardır ki olmazsa olmaz, Solidity programlama dili ile akıllı sözleşme kodlarken de bu böyledir, bazı başlangıçlar olmazsa olmazdır. Solidity’de bu
// SPDX-License-Identifier: MIT pragma solidity ^0.8.0;
HTML ile yazılan websitelerini incelediğinizde, hukuki veya tekink olarak dikkaitnizi çeken şey şudur:
Bu yüzden her HTML dosyası şu temel yapıyla başlamalıdır: <!DOCTYPE html>
Bu, bir HTML etiketi değildir. Bu bir bildirimdir.
Tarayıcıya diyoruz ki: Hey browser, bu dosya HTML5’e göre yazıldı. Lütfen ona göre yorumla!
Eğer bu satırı yazmazsak ne olur? Tarayıcılar quirks mode denilen bir moda geçer. Yani kafayı karıştırırlar, çalıştırmama olasılığı yükselir.
2️⃣ <html> — Belgemizin kök etiketi
Her şeyin başladığı yerdir. Tüm HTML içeriği, <html> etiketiyle başlar ve </html> etiketiyle biter. Bunun içine de iki ana bölüm girer:
3️⃣ lang Özniteliği — Sayfanın Hangi Dilde Olduğunu Söyleriz
şimdi HTML etiketimize bir attribute ekliyoruz,
<html lang="tr">
Bu satırla ne yaptık? Dedik ki:
Bu belge Türkçedir, yani içinde kullanılan dil Türkçe’dir. Buna göre yorumla, oku, işle
Ama bu sadece teknik bir detay değil. Bu küçük öznitelik, hukuki anlamda büyük sonuçlar doğuruyor. Şöyle düşünün arkadaşlar:
Bir sayfanın dilini doğru belirtmemek, bazı kullanıcıları doğrudan dışlamak anlamına gelebilir,
👩⚖️ Peki neden bu kadar önemli?
✅ Erişilebilirlik Yasaları (Accessibility & Hukuk)
Amerika’da ADA (Americans with Disabilities Act), Avrupa’da WCAG standartları (Web Content Accessibility Guidelines) ve eIDAS, Türkiye’de ise Erişilebilirlik Mevzuatı ve Kamu Bilişim Standartları gibi çerçeveler, dijital içeriklerin herkes için erişilebilir olması gerektiğini açıkça belirtir.
Eğer bir sayfanın dili düzgün tanımlanmazsa, ekran okuyucu kullanan bireyler (örneğin görme engelliler), içeriği anlamakta zorlanırlar. Çünkü ekran okuyucu, hangi dilde okuması gerektiğini bilemeyecektir
➡️ Sonuç? Bu bir erişim engeli olur. ➡️ Ve bu da, hem etik hem de hukuki bir sorumluluğa dönüşür.
✅ SEO & Tüketici Koruma
Dil bilgisi aynı zamanda arama motorlarının içeriği nasıl kategorize edeceğini belirler.
Yanlış dil tanımı, yanıltıcı reklamcılık ya da bilgilendirme yükümlülüğünün ihlali gibi durumlarla ilişkilendirilebilir. Özellikle Avrupa’daki Tüketici Hakları Yönergeleri, dijital arayüzlerde şeffaflık ve doğru bilgilendirme yükümlülüğünü zorunlu kılar.
Eğer İngilizce konuşamayan bir kullanıcıya içerik İngilizce sunuluyorsa, ama aslında sayfa Türkçe olarak tasarlanmışsa, bu durum yanıltıcı veya eksik bilgilendirme olarak değerlendirilebilir.
✅ Çeviri Sistemleri & KVKK
Google Translate gibi sistemler, sayfanın lang özniteliğine göre çeviri önerisi sunar. Eğer bu tanım eksikse, kullanıcı çeviri seçeneği göremez. Bu da özellikle kamu kurumları, bankalar, sağlık sistemleri veya çok dilli hizmet veren web siteleri için riskli bir alan oluşturur.
Bir birey içerikten faydalanamıyor ve bu nedenle hizmet alamıyorsa, bu durum kişisel veri erişim hakkı, açık rıza veya bilgilendirme yükümlülüğü kapsamında KVKK’ya aykırılık teşkil edebilir.
Peki başka dillerde içerik varsa? O zaman ilgili metin bloğuna özel lang özniteliği eklenir. Örneğin:
<p>Kitabın orijinal adı: <span lang="fr">Le Petit Prince</span></p>
Bu örnekte sadece Le Petit Prince kısmının Fransızca olduğu belirtiliyor. Çünkü bir belgedeki her şey aynı dilde olmak zorunda değil tabiki :)
Ama sizin bunu belirtmeniz gerekiyor dediğim gibi!
💡 Ekstra Bir Bilgi: “lang" Özniteliği CSS’te Seçici Olarak da Kullanılabilir
Yani bu bilgi sadece erişilebilirlik için değil, stil uygulamak için de işe yarar. Mesela sadece Fransızca olan bölümleri farklı renkte göstermek istersek:
:lang(fr) {
color: royalblue;
font-style: italic;
}Bu da bir yöntem, ama acele etmeyin bunu 5. ve 6. yazıda ele aldık :)
🔍 <head> Etiketimiz: Sayfanın Kimliği ve Hukuki Kartviziti diyebilir miyiz?
HTML belgesinin başı olan <head> bölümü, dışarıdan pek görünmese de içerik kadar önemlidir. Burası, sayfanızın karakterini, dilini, yasal kimliğini, hatta arama motorları ve ekran okuyucular gözünde kim olduğunu belirleyen yerdir. Nasıl ki bizlerin kimlik belgesinde adımız, doğum yerimiz, uyruk bilgilerimiz varsa, HTML sayfanızın da aynen böyle bir dijital kimliği var. Ve bu kimlik, <head> etiketinin içinde tanımlanır.
İşte bugün “Legal Tech Atölyemiz” için bu dijital kimliği birlikte çıkaracağız.
1️⃣ Karakter Kodlaması: <meta charset="utf-8">
Her web sayfasının ilk işi: “Ben hangi dili, hangi alfabe setiyle konuşuyorum?” demekti hatırlarsanız, yukaırd belirtmiştim zaten lang’ın önemini. Bir de utf-8'imiz var.
<meta charset="utf-8">
Bu satır, karakterlerin doğru görüntülenmesi için tarayıcıya net bir komut verir:
Ben UTF-8 kullanıyorum.
Peki neden bu kadar önemli?
2️⃣ Sayfa Başlığı: <title>Legal Tech Atölyesi</title>
İşte bu satırla tarayıcı sekmesinde ne yazacağını, arama motorlarında nasıl görünmek istediğini ve sosyal medya link önizlemelerinde ne çıkacağını belirliyorsun:
<title> Legal Tech Atölyesi – Teknoloji Hukuku Eğitim Serisi </title>
➡️ Tavsiye: Her sayfana benzersiz ve anlamlı bir başlık vermelisin ki insanlar neye tıkladıklarında ne göreceklerini görsünler
3️⃣ Görüntüleme Alanı (Viewport): Mobil Uyumun Hukuki Yüzü
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Bu satır, sayfanın cihazlara göre nasıl görüneceğini belirler. Mobil uyumlu olmayan bir sayfa ne demek biliyor musun?
Bugün birçok teknik dava ve şikayet, web sayfalarının mobilde bozuk görünmesi, formların çalışmaması veya erişilememesi gibi “küçük” problemlerden kaynaklanıyor. Ama bunlar aslında tasarımsal bile değil, yasal sorunlar, dolayısıyla amacımız neydi hatırlayın!
4️⃣ Diğer Meta Etiketler: Hukuki Etki Alanları
İçeriğe göre <head> bölümüne şunlar da eklenebilir:
<meta name="description" content="Legal Tech Atölyesi, hukukçular için web teknolojileri ve dijital güvenlik üzerine eğitici bir içerik serisidir."> <meta name="robots" content="index, follow"> <base href="https://karakodlaw.com/atolye/">
robots etiketi bununla beraber, arama motoru botlarına bu sayfayı tarayıp taramama, dizine ekleyip eklememe, linkleri takip edip etmeme gibi talimatlar da verir. Hassas veya taslak aşamasında olan sayfaları dizine eklettirmek istemediğimizde robotskullanırız. ya da kullanıcıya açık ama Google’a kapalı bir yapı kurmak istediğimizde (örneğin, geçici bir kampanya sayfası) yine bu etiketi kullanırız
⚖️ Hukuki bağlam:
base etiketi, tüm bağlantıların hangi URL’den türeyeceğini belirler, asıl URL’lerden biridir
HTML Listeleri: Yapılar, Hukuki Bağlamlar ve Erişilebilirlik
HTML listeleri, göründüğünden çok daha fazla yönde kullanılan, semantik anlam taşıyan ve hem geliştirici deneyimini hem de kullanıcı deneyimini iyileştiren temel yapılardan biridir arkadaşlar. Google’ın web.dev ve resmi HTML standartlarına dayanarak, listelerin teknik detaylarını, semantik anlamlarını ve hukuki etkilerini adım adım anlatıp yazıyı bir örnekle sonlandıracağım. Anlaştık! :)
✅ 1. Sırasız Liste (Unordered List — <ul>) ve <li>
Neden bazı duurmlarda <ul> bazı durumlarda ise <li> kullanılır ve farkı nedir?
Madde sırasının önemli olmadığı durumlarda (politikalar, özellik listeleri, öğrenme hedefleri vb.) <ul> kullanmamız gerekiyor. Mesela gizlilik politikalarını madde madde sunmak, hukukçu aerkadaşlarımın bilgiği gibi açık rıza almak için şarttır.
Ekran okuyucular bu yapıya duyarlılar. WCAG standardına göre, “bilgilendirme listeleri” listeler olarak kodlanmazsa bu, erişilebilirlik ihlali sayılacaktır.
<ul> <li>Gizlilik Politikaları</li> <li>KVKK ve GDPR Açıklamaları</li> <li>Çerez Kullanım İzinleri</li> </ul>
Ama bir de sıralamanın önemli olduğu ve karışmaması gereken durumlar var değil mi? Ne gibi Elif?
Sayılarla sıralamanın anlam taşıdığı yerlerde (kanunlar, protokoller, kamu belgeleri vb.) sırasız liste kullanılması, semantik yanlış anlamlandırmaya sebep olacağı için hukuken de sorun çıkarabilir. Örneğin şöyle:
<ol type="A" start="3"> <li>Giriş</li> <li>Tanımlar</li> <li>Yürürlüğe Giriş Tarihi</li> </ol>
type, ve start de kullandım burada, hemen vereyim açıklamasını:
Bir de arkadaşilar, Description List dediğimiz listelerimiz var. ( <dl>, <dt>, <dd>)
Description List
Bu yapı şu üç etiketten oluşur:
bir örnekle açıklayayım:
Veri sorumlusu, bildiğiniz gibi KVKK (Türkiye’de) ve GDPR (AB’de) kapsamında, kullanıcının işlenen veriler hakkında anlaşılır ve açık bilgi almasını sağlamakla yükümlüdür. Bu yükümlülükler kapsamında, şu örnekleri düşünelim misal:
Bu tür soruların yanıtları kullanıcıya düzenli, etiketli ve erişilebilir bir şekilde sunulmalıdır.
İşte tam bu noktada <dl> yapısı çok güçlü bir araç bizim için. Her bir veri tipi (örneğin: E-posta) bir <dt> ile tanımlanır ve amacı veya işlenme süreci bir <dd> etiketiyle detaylandırılır.
<dl> <dt>Toplanan Veri:</dt> <dd>E-posta Adresi</dd> <dt>İşleme Amacı:</dt> <dd>Kullanıcı hesabının oluşturulması, kimlik doğrulama ve bilgilendirme e-postalarının gönderimi</dd> <dt>Hukuki Dayanak:</dt> <dd>6698 sayılı Kişisel Verilerin Korunması Kanunu’nun 5/2-c maddesi: Bir sözleşmenin kurulması veya ifasıyla doğrudan ilgili olması</dd> <dt>Veri Saklama Süresi:</dt> <dd>İlgili sözleşme sona erdikten sonra 2 yıl süreyle saklanacaktır</dd> <dt>Veri Paylaşımı:</dt> <dd>Yalnızca e-posta altyapı hizmeti sağlayıcısı (örneğin: Mailgun) ile paylaşılır</dd> </dl>
Umuyorum ki şu ana kadar yapılan açıklamalar ve verdiğim bilgiler anlaşılır olmuştur.
Şimdi şu ana kadar öğrendiklerimizi en genel bir örnekle açıklayalım, ne yaptık, ne öğrendik?
💡 Bu kısa örnekte ne öğrendik?
Siz de kopyalayıp yapıştırarak deneyebilirsiniz:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Legal Tech Atölyesi</title>
</head>
<body>
<h1>Merhaba, ben Elif!</h1>
<p>Bu sayfa HTML öğrenmeye başlayan hukukçular için hazırlandı.</p>
<p>
Bu paragrafta <strong><em>vurgulanmış bir metin</em></strong> var.
</p>
<img src="legaltech.jpg" alt="Legal Tech logosu" />
<ul>
<li>HTML nedir?</li>
<li>Doctype ne işe yarar?</li>
<li>UTF-8 neden önemli?</li>
</ul>
<p>Fransızca bir örnek: <span lang="fr">Ceci n'est pas une pipe.</span></p>
</body>
</html>Teknik okumalar ve kaynaklar için mutlaka Google’ın web.dev’ine göz atmanızı tavsiye ederim :)
Arkadaşlar arkadaşlar, webi sadece yazılım dili olarak değil, hukuki bir ifade biçimi olarak da okumayı öğreniyoruz sizlerle. Umuyorum ki faydalı oluyordur. Hazırsanız eğer serinin diğer yazısında, form etiketlerine başlayalım 🎯 İyi çalışmalar dilerim!
İletişim için:
İçeriklerime YouTube kanalım üzerinden ulaşabilirsiniz. Hakkımda daha fazla bilgi edinmek için websitemi ziyaret edebilir, teknik veya hukuki konularda destek almak için bana ulaşabilirsiniz! 👩🏻💻
Ayrıca yakında ingilizce ve Türkçe olarak vereceğim Legal Tech & Web Development Bootcamp’ine beklerim! Stay tuned ❤️