HTML nedir? Örneklerle ilk web sayfanı oluştur

İlk HTML sayfan

Başlık ve paragraf kullanarak anlamlı bir içerik bölümü oluşturmak.

Kavramı kur

HTML bir metni süslemekten önce onun görevini belirtir. h1 bir ana başlıktır; p bir paragraftır. Tarayıcı bu işaretleri okur, belge ağacını oluşturur ve kendi varsayılan görünümünü uygular. Başlığın büyük olması bu varsayılan görünümün sonucudur. Yalnızca büyük yazı istediğin için başlık etiketi seçme; görünümü daha sonra CSS ile ayarlayacağız.

Neden böyle çalışıyor?

Bir öğeyi açılış etiketi, içerik ve kapanış etiketi olarak düşün. <p> ifadesi paragrafı açar; </p> paragrafı bitirir. İç içe öğelerde en son açtığını önce kapatırsın. Kodun girintili yazılması çalışmayı sihirli biçimde değiştirmez ama yanlış kapanışları görmeyi kolaylaştırır.

Çalışma sırası

Bir sayfayı önce taslak olarak kâğıda yaz: konu başlığı, kısa tanıtım ve bir alt başlık. Sonra her parçanın anlamına uygun etiketi seç. Bu alışkanlık görsel tasarımdan önce içerik düzenini düşünmeni sağlar; aynı belge küçük ekranda veya ekran okuyucuda da anlaşılır kalır.

İkinci örnek · 1

h1 sayfanın ana konusunu adlandırır; belge başlığı olan title ile aynı görevde değildir. Kodun tamamı yazılı derste bulunur.

<h1>Benim öğrenme günlüğüm</h1>
<p>Bugün <strong>ilk HTML sayfamı</strong> yazdım.</p>
<h2>Yarın ne yapacağım?</h2>
<p>Bir bağlantı ekleyeceğim.</p>

Beklenen sonucu oku

h2 ana konunun altındaki bölümü başlatır; sırayı yazı boyutuna göre atlama.

Beklenen çıktı: Bir ana başlık, önemli kısmı vurgulanmış paragraf, bir alt başlık ve ikinci paragraf.

Bir değeri sen değiştir

Ana başlığı kendi seçtiğin bir konuya dönüştür. İki ayrı düşünce için iki paragraf yaz; her paragrafta yalnızca bir güçlü vurgu kullan.

Hata nereden gelir?

Bir etiketi kapatmayı unutmak sonraki içeriğin de o öğenin içinde kalmasına yol açabilir; açılan ve kapanan etiketleri eşleştir.

Kendi çözümünü kur

Bir h2 ekle; taslağını CSS kullanmadan yalnızca içerik düzeni açısından değerlendir. Önce düz metni yaz. Sonra başlıkların çevresine h1/h2, cümlelerin çevresine p ekle.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<h1>Kitap günlüğüm</h1>
<p>Bu hafta <strong>bir roman</strong> bitirdim.</p>
<h2>Sıradaki hedefim</h2>
<p>Bir öykü kitabı okuyacağım.</p>

Kendini kontrol et

h2 neden kullanılır? Yanıt: Ana konunun altındaki bir bölümü anlamlandırmak için; yalnızca yazıyı küçük yapmak için değil.

Beklenen çıktı: Kitap günlüğü başlığı ve iki bölümlü okunabilir bir içerik.

Sayfanın iskeleti

Tam bir HTML dosyasını doğru belge iskeletiyle kaydetmek.

Kavramı kur

Bir HTML dosyasında ziyaretçinin gördüğü içerik ile belge hakkında bilgi veren bölüm ayrıdır. head bölümünde karakter kodlaması, sekme başlığı ve stil bağlantıları bulunur. body bölümünde ise başlık, paragraf, menü ve diğer görünür öğeler yer alır. Bu ayrım dosyan büyüdüğünde yanlış yere yazılmış içeriği bulmanı kolaylaştırır.

Neden böyle çalışıyor?

DOCTYPE tarayıcının belgeyi standart HTML olarak ele almasını sağlar. html üzerindeki lang, sayfanın temel dilini bildirir; metni çevirmek veya klavye dilini değiştirmek için kullanılmaz. UTF-8 Türkçe karakterlerin doğru çözülmesine yardım eder. Dosyayı editörde de UTF-8 olarak kaydetmelisin.

Çalışma sırası

Tarayıcı kaynak kodunu harfi harfine çizmez; kurallara göre işler ve bazı eksikleri düzeltmeye çalışır. Sayfanın açılması tek başına yapının doğru olduğunu kanıtlamaz. İncele araçlarında Elements bölümünü açarak tarayıcının oluşturduğu belge ağacı ile yazdığın kaynağı karşılaştır.

İkinci örnek · 1

DOCTYPE belge türünü belirtir; ekranda bir satır yazdırmaz. Kodun tamamı yazılı derste bulunur.

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Öğrenme günlüğü</title>
</head>
<body>
  <h1>Merhaba!</h1>
  <p>Türkçe: ç, ğ, ı, ö, ş, ü.</p>
</body>
</html>

Beklenen sonucu oku

body içine görünür öğeler yazılır; meta ayarlarını buraya taşımak gerekmez.

Beklenen çıktı: Sekme başlığı Öğrenme günlüğü olur; gövdede Merhaba ve Türkçe karakterler görünür.

Bir değeri sen değiştir

Örneği index.html olarak kaydet ve tarayıcıda aç. title ile h1 değerlerini farklı yap; hangisinin nerede göründüğünü not et.

Hata nereden gelir?

Başlığın sekmede değişmemesi yanlış dosyayı açtığını veya kaydetmediğini gösterebilir; dosya yolunu karşılaştır.

Kendi çözümünü kur

Telefon görünümünü açıp viewport satırı varken ve yokken davranışı karşılaştır. Dosya uzantısını denetle: index.html.txt bir HTML dosyası olarak açılmayabilir.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Deneme sekmesi</title>
</head>
<body><h1>Sayfadaki başlığım</h1></body>
</html>

Kendini kontrol et

lang="tr" hangi işi yapar? Yanıt: Belgenin temel dilini bildirir; sayfayı otomatik olarak Türkçeye çevirmez.

Beklenen çıktı: Sekmede Deneme sekmesi; gövdede Sayfadaki başlığım.

Bağlantılar ve resimler

Dosya yolları, anlaşılır bağlantılar ve erişilebilir görseller kullanmak.

Kavramı kur

Bağlantının görünen metni ile hedefi iki ayrı bilgidir. href hedef adresi tutar; a öğesinin içindeki metin kullanıcıya ne olacağını anlatır. Sadece “buraya tıkla” yerine “Python çalışma planını oku” gibi bir metin, bağlantıların tek başına da anlaşılmasını sağlar. İnternet adresi ile projendeki göreli dosya yolunu karıştırma.

Neden böyle çalışıyor?

Görselde src dosyayı gösterir; alt ise görselin o bağlamda taşıdığı bilgiyi anlatır. Bir fotoğraf içerik için önemliyse kısa ama anlamlı bir açıklama yaz. Sırf süs olan görselde boş alt kullanılabilir. Dosya adını veya “resim” sözcüğünü tekrar etmek yerine ziyaretçinin kaçıracağı anlamı düşün.

Çalışma sırası

Göreli yol bulunduğun dosyanın klasörüne göre çözülür. Sayfa bir alt klasöre taşınırsa aynı yol başka bir yeri gösterebilir. Tarayıcının Network bölümünde isteğin tam adresini ve 404 durumunu kontrol et. Sorunu dosyanın kendisinde mi yoksa ona giden yolda mı aradığını böyle ayırabilirsin.

İkinci örnek · 1

./ aynı klasörü, ../ bir üst klasörü ifade eder. Kodun tamamı yazılı derste bulunur.

<a href="dersler/python.html">Python derslerini aç</a>
<img src="gorseller/calisma-masasi.jpg"
     alt="Not defteri yanında açık kod editörü"
     width="640" height="400"
     style="max-width:100%;height:auto">

Beklenen sonucu oku

alt, görselin her pikselini değil içerikteki amacını anlatır.

Beklenen çıktı: Dosyalar bu yollarda varsa Python bağlantısı ve ekran genişliğine sığan fotoğraf görünür.

Bir değeri sen değiştir

Bir gorseller klasörü aç; kendi seçtiğin bir fotoğrafı içine koy. src yolunu bilinçli olarak yanlış yaz; Network bölümündeki adresi ve alt metnini gözlemle.

Hata nereden gelir?

İnternetten kopyalanan görsel adresi kalıcı olmayabilir; izinli kendi görselini yerelde tut ve kaynağını not et.

Kendi çözümünü kur

Bir alt klasördeki sayfadan üst klasöre giden bağlantı yaz ve nereye çözüldüğünü kontrol et. Dosyanın bulunduğu konumdan değil, HTML dosyasının konumundan başlayarak yolu çiz.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<a href="../index.html">Ana sayfaya dön</a>
<img src="../gorseller/notlar.jpg" alt="Üç aşamalı çalışma planı" width="600" height="400">

Kendini kontrol et

Bir alt klasördeki sayfadan üst klasördeki index.html hedefine nasıl gidilir? Yanıt: ../index.html ile; ../ bir klasör yukarı çıkar.

Beklenen çıktı: Bir alt klasörden ana sayfaya ve üstteki gorseller klasörüne erişir; dosyalar ayrıca oluşturulmalıdır.

Listeler

Sıralı ve sırasız bilgileri doğru liste yapısıyla sunmak.

Kavramı kur

Bir liste öğelerin birbiriyle ilişkisinin işaretidir. Alışveriş ürünleri için sıranın önemi yoktur; ul uygundur. Kurulum veya yemek tarifi gibi adımlarda sıra değişirse anlam bozulabilir; ol kullan. Nokta veya numaranın görünümünü daha sonra CSS ile değiştirebilirsin; HTML seçimini görünüşe göre değil anlama göre yap.

Neden böyle çalışıyor?

Her öğe li ile yazılır. Alt liste ekleyeceksen onu ilgili li öğesinin içine koy; doğrudan dıştaki listeye metin veya rastgele paragraflar yerleştirme. Girinti, hangi alt öğenin hangi ana maddeye ait olduğunu görmene yardımcı olur. Derinlik arttıkça kullanıcı için de gereksiz karmaşa oluşabileceğini unutma.

Çalışma sırası

Uzun bir anlatımı listeye çevirmek her zaman daha iyi değildir. Birbirine paralel görevleri kısa maddelerle yaz, açıklamaları gerekirse maddenin içinde tut. İşlemden önce gereken malzemeler ile işlemin adımlarını ayrı listelere bölmek, yeni başlayan birinin hazırlık ile uygulamayı ayırmasını sağlar.

İkinci örnek · 1

ul sırası önemli olmayan öğeleri gruplar. Kodun tamamı yazılı derste bulunur.

<h2>Çalışma sıram</h2>
<ol>
  <li>Konuyu oku.</li>
  <li>Örneği dene.
    <ul><li>Bir değeri değiştir.</li><li>Sonucu not et.</li></ul>
  </li>
  <li>Kendi çözümünü yaz.</li>
</ol>

Beklenen sonucu oku

Liste başlığı liste dışında uygun bir h2 veya h3 ile verilir.

Beklenen çıktı: Üç numaralı ana adım; ikinci adım altında iki madde.

Bir değeri sen değiştir

Üç ürünlü bir alışveriş listesi yaz. Aynı ürünleri satın alma önceliğine göre numaralı bir listeye çevir.

Hata nereden gelir?

Numaraları metne elle eklemek sıralamayı değiştirdiğinde tutarsızlık yaratır; ol kendi numarasını üretir.

Kendi çözümünü kur

İkinci ürüne iki alt açıklama ekle; HTML ağacında bu açıklamaların hangi li içinde olduğunu bul. Alt listenin açılış ve kapanışını ana li kapanmadan önce yerleştir.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<h2>Hazırlık</h2>
<ul><li>Editör</li><li>Tarayıcı</li></ul>
<h2>Uygulama</h2>
<ol><li>Dosyayı aç.</li><li>Kaydet.</li><li>Yenile.</li></ol>

Kendini kontrol et

Kurulum adımlarında ol neden ul’den daha uygun olabilir? Yanıt: Adımların sırası işlemin anlamının bir parçasıdır.

Beklenen çıktı: Hazırlık için iki maddeli, uygulama için üç adımlı liste.

Tablolar

İlişkili verileri başlıklarıyla birlikte bir tabloya dönüştürmek.

Kavramı kur

Tablo, satır ve sütunlar arasındaki ilişkiyi anlatır. Bir fiyat listesi veya ders programı buna örnektir. Sayfanın sağ ve sol sütununu tabloyla kurmak ise içerik anlamı ile yerleşimi karıştırır; görsel düzen için CSS Grid veya Flexbox kullanılır. Önce verinin satır ve sütun başlıklarını kâğıt üzerinde belirle.

Neden böyle çalışıyor?

th bir başlık hücresidir. scope="col" o başlığın bir sütunu, scope="row" bir satırı tanımladığını bildirir. caption tablonun ne hakkında olduğunu açıklayan bir başlıktır. Bu bilgiler ekran okuyucunun hücreler arasındaki ilişkiyi aktarabilmesine yardımcı olur; kalın yazı vermekle aynı şey değildir.

Çalışma sırası

Tablo küçük ekranda genişleyebilir. İçindeki veriyi sıkıştırıp okunamaz yapmak yerine gerektiğinde tabloyu kendi yatay kaydırma alanına al. Sayfanın tamamını yatay kaydırmak bir çözüm değildir. Başlıkların her satırla doğru eşleştiğini ve uzun kelimelerin hücre sınırlarını bozmadığını kontrol et.

İkinci örnek · 1

caption tablonun konusunu açıklar. Kodun tamamı yazılı derste bulunur.

<table>
  <caption>Haftalık çalışma</caption>
  <thead><tr><th scope="col">Gün</th><th scope="col">Dakika</th></tr></thead>
  <tbody>
    <tr><th scope="row">Pazartesi</th><td>30</td></tr>
    <tr><th scope="row">Salı</th><td>45</td></tr>
  </tbody>
</table>

Beklenen sonucu oku

CSS kenarlık ekler; veri ilişkisinin anlamını ise HTML taşır.

Beklenen çıktı: Gün ve Dakika sütunlarında Pazartesi 30, Salı 45 verileri.

Bir değeri sen değiştir

İki sütunlu ve üç veri satırlı bir tablo oluştur. caption ekle; satır ve sütun başlıklarında scope kullan.

Hata nereden gelir?

Başlık yerine td kullanıp yazıyı kalınlaştırmak başlık ilişkisini kurmaz; th ve scope kullan.

Kendi çözümünü kur

Ekranı 320 piksele daralt; gerekirse tabloyu overflow-x:auto alanına al. Önce yalnızca başlık satırını yaz, sonra her satır için aynı veri düzenini tekrar et.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<div style="overflow-x:auto">
<table>
<caption>Örnek fiyatlar</caption>
<tr><th scope="col">Ürün</th><th scope="col">TL</th></tr>
<tr><th scope="row">Defter</th><td>25</td></tr>
<tr><th scope="row">Kalem</th><td>10</td></tr>
</table>
</div>

Kendini kontrol et

caption ve th aynı şeyi mi yapar? Yanıt: Hayır. caption bütün tablonun konusunu, th belirli satır veya sütunun başlığını belirtir.

Beklenen çıktı: İki ürün ve fiyatları; kapsayıcı gerektiğinde yatay kaydırılır.

Formlar

Etiketli, klavyeyle kullanılabilir ve beklentisi anlaşılır bir form kurmak.

Kavramı kur

Form birden çok giriş alanını tek işlem için gruplar. label alanın ne istediğini anlatır; placeholder ise örnek verir ve yazmaya başlayınca kaybolur. Bu nedenle placeholder etiketi yerine geçmez. label üzerindeki for ile input üzerindeki id aynı olursa etikete tıklamak ilgili alanı odaklar.

Neden böyle çalışıyor?

name gönderilen verinin anahtarıdır. id belge içinde öğeyi tanımlar; iki alan aynı id değerini taşımamalıdır. type="email" gibi türler tarayıcıya beklenen biçim hakkında bilgi verir. required boş bırakmayı engelleyebilir, fakat bu kontroller verinin doğru kişiye ait olduğunu kanıtlamaz ve sunucu tarafı doğrulamasının yerini tutmaz.

Çalışma sırası

HTML formu eklemek veriyi otomatik olarak kaydetmez. Gerçek gönderim için action/method hedefini veya JavaScript akışını ayrıca tasarlamak gerekir. Başlangıçta gerçek kişisel bilgi kullanmadan alanlara örnek veri gir. Önce klavyeyle sırayı, hata mesajını ve gönder düğmesinin amacını değerlendir.

İkinci örnek · 1

label for ile input id eşleşir; kullanıcı etikete tıklayabilir. Kodun tamamı yazılı derste bulunur.

<form>
  <label for="ornek-eposta">E-posta</label>
  <input id="ornek-eposta" name="email" type="email" required>
  <label for="konu">Konu</label>
  <select id="konu" name="topic"><option>HTML</option><option>CSS</option></select>
  <button type="button">Bu yalnızca arayüz denemesi</button>
</form>

Beklenen sonucu oku

Gönderim yapmayan denemede type=button düğmesi kullan; gerçek kayıt varmış izlenimi verme.

Beklenen çıktı: Etiketi olan e-posta kutusu ve konu seçimi. Düğme veri göndermez.

Bir değeri sen değiştir

Etikete tıklayıp doğru kutunun odaklandığını kontrol et. Tab ile bütün alanları ve düğmeyi dolaş; görünür odak işaretini izle.

Hata nereden gelir?

İçeriği sadece placeholder ile açıklamak kullanıcı yazınca bilgiyi kaybettirir; görünür label bırak.

Kendi çözümünü kur

Bir submit düğmesini yalnızca yerel denemede kullan; alan boşken ve hatalı e-posta biçimindeyken tarayıcının davranışını karşılaştır. Aynı id değerini iki kez kullanma; her label kendi alanını tanımlamalı.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<form>
<label for="ad">Ad</label>
<input id="ad" name="name" autocomplete="given-name" required>
<label for="mesaj">Mesaj</label>
<textarea id="mesaj" name="message" rows="3"></textarea>
<button type="button">Örnek form</button>
</form>

Kendini kontrol et

Veriyi gönderirken id mi name mi alan anahtarı olur? Yanıt: name; id belge içindeki öğeyi etiketle ilişkilendirmek gibi amaçlarla tanımlar.

Beklenen çıktı: Ad ve mesaj alanları; bu örnekte kayıt veya gönderim yapılmaz.

Anlamlı etiketler (semantik HTML)

Belgenin ana bölgelerini anlamlı etiketlerle düzenlemek.

Kavramı kur

Semantik, bir öğenin belgede ne görev yaptığını belirtmesidir. header tanıtım alanı, nav önemli bağlantı grubu, main ana içerik, footer ise kapanış bilgileri için kullanılabilir. Bunlar yalnızca div yerine yazılan süslü adlar değildir; yardımcı teknolojiler ve sayfayı okuyan geliştiriciler için bölge bilgisi taşırlar.

Neden böyle çalışıyor?

article kendi başına anlamlı olabilen bir içeriği, section ise genellikle başlığı bulunan tematik bir bölümü temsil eder. Her kutuya section demek gerekmez; yalnızca görsel gruplama yapıyorsan div uygundur. Başlık sırası ile bölge etiketleri birbirini desteklemeli, biri diğerinin yerine geçmemelidir.

Çalışma sırası

Bir sayfayı anlamak için CSS’i geçici olarak kapattığını düşün. Konu, ana içerik ve menü bağlantıları hâlâ anlaşılabiliyor mu? Aynı belgeye klavyeyle ulaşıp başlıkları takip et. Tasarımın gerçek gücü yalnızca renklerden değil, içerik düzeninin görsel stil olmadan da ayakta kalmasından gelir.

İkinci örnek · 1

nav her bağlantı için değil, temel gezinme grupları için kullanılır. Kodun tamamı yazılı derste bulunur.

<header><p>Öğrenme günlüğüm</p><nav><a href="#notlar">Notlar</a></nav></header>
<main>
<h1>HTML çalışıyorum</h1>
<section id="notlar"><h2>Bugünkü notlar</h2><p>Önce anlam, sonra görünüm.</p></section>
</main>
<footer><p>Hazırlayan: Deniz</p></footer>

Beklenen sonucu oku

section kullanıyorsan bölümün konusunu açıklayan bir başlık düşün.

Beklenen çıktı: Başlık/menü, ana içerik, notlar bölümü ve alt bilgi.

Bir değeri sen değiştir

Bir önceki dersinin div gruplarını incele; yalnızca anlamı uygun olanları değiştir. Bir ana başlık ve iki alt bölüm kur.

Hata nereden gelir?

Başlıksız section sayısını artırmak yapıyı açıklamaz; tematik olmayan gruplarda div kullan.

Kendi çözümünü kur

CSS olmadan okuma sırasını kontrol et; menüden bölüm bağlantısını dene. Etiket seçimini kutunun rengine değil, içeriğin sayfadaki rolüne göre yap.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<main>
<h1>Çalışma notlarım</h1>
<article><h2>İlk denemem</h2><p>Bağımsız okunabilen kısa yazı.</p></article>
<section><h2>Kaynaklar</h2><ul><li>Resmî belgeler</li></ul></section>
</main>

Kendini kontrol et

Her görsel kutu neden section olmamalıdır? Yanıt: section tematik bir bölümü temsil eder; yalnızca görsel gruplama için div daha uygundur.

Beklenen çıktı: Ana konu altında bağımsız bir yazı ve kaynaklar bölümü.

Yorumlar ve boşluklar

Yorum, boşluk ve kaynak görünürlüğü arasındaki farkı açıklamak.

Kavramı kur

HTML yorumları kaynak kodunu okuyan kişiye not bırakır. Tarayıcı bunları normal sayfa içeriği gibi çizmez; fakat yorumlar ziyaretçiden saklanan gizli bir alan değildir. Kaynağı görüntüleyen biri yorumları okuyabilir. Bu nedenle parola, anahtar veya kişisel bilgiyi yoruma yazmak bir güvenlik yöntemi değildir.

Neden böyle çalışıyor?

Normal metin akışında art arda gelen boşluklar genellikle tek boşluk gibi gösterilir. Kodda satır atlamak, ekranda yeni paragraf oluşturmaz. İki ayrı düşünce için p, anlamlı bir satır sonu için uygun bağlamda br kullanılır. Şiir veya adres gibi metinler ile sayfa düzeni için boşluk açmayı birbirinden ayır.

Çalışma sırası

pre önceden biçimlendirilmiş metnin boşluklarını korur; code ise kod parçasının anlamını belirtir. Bir HTML etiketini ekranda düz metin olarak göstermek için < ve > işaretlerini karakter başvurularıyla yazmalısın. Aksi hâlde tarayıcı örneği anlatım olarak değil gerçek etiket olarak yorumlayabilir.

İkinci örnek · 1

<!-- ... --> bir HTML yorumudur. Kodun tamamı yazılı derste bulunur.

<!-- Bu not kaynakta görünür. Gizli bilgi yazma. -->
<p>Birinci     düşünce.</p>
<p>İkinci düşünce.</p>
<pre><code>&lt;h1&gt;Örnek&lt;/h1&gt;</code></pre>

Beklenen sonucu oku

< işareti ekranda < görünmesini sağlar; gerçek etiket açmaz.

Beklenen çıktı: İki paragraf ve düz metin olarak <h1>Örnek</h1> kodu. Yorum çizilmez.

Bir değeri sen değiştir

Kaynağa bir açıklama yorumu ekle ve sayfa kaynağında bul. Normal p içine beş boşluk ekle; görünümle kaynak arasındaki farkı incele.

Hata nereden gelir?

Yorum içine anahtar yazmak onu saklamaz; istemciye gönderilen kaynak okunabilir.

Kendi çözümünü kur

Bir etiketi gerçek öğe oluşturmadan code içinde göster. Gösterilecek örnek kodundaki < işaretini < olarak yaz.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<p>Etiket örneği:</p>
<pre><code>&lt;p&gt;Merhaba&lt;/p&gt;</code></pre>
<!-- Bu açıklama ziyaretçiden gizli değildir. -->

Kendini kontrol et

Bir yoruma yazılan parola güvenli biçimde saklanmış olur mu? Yanıt: Hayır; yorum sayfa kaynağında okunabilir. Gizli bilgiler istemciye gönderilmemelidir.

Beklenen çıktı: <p>Merhaba</p> düz metin olarak görünür; yeni bir paragraf etiketi oluşturmaz.