Sıfırdan HTML öğrenin
HTML bir programlama dili değil, sayfa yapısının dilidir: onunla bu bir başlık, bu bir paragraf, bu bir liste, bu bir bağlantı dersiniz. Başlamak için yalnızca html uzantılı bir metin dosyası ve bir tarayıcı gerekir; ilk sayfanız ilk on dakikada kurulur.
- Ders 2 / 12
- Başlangıç
- Ücretsiz, kayıt yok
Bir sayfanın yapısı, kökten dallara
-
görünmez
head
Karakter kodlaması, sayfa başlığı, mobil görüntü ayarı. Buradan hiçbir şey sayfaya basılmaz.
-
görünür
body
Kullanıcının gördüğü her şey burada yaşar; sonraki üç dal onun içinde oturur.
-
header ve nav
Site başlığı ve menüsü. Ekran okuyucu menüyü atlayabilir, çünkü onun menü olduğunu bilir.
-
main
Bu sayfaya özgü içerik; bir tane ve yalnızca bir tane, h1 de onun içinde.
-
footer
Site altbilgisi: iletişim, koşullar, her sayfada tekrarlanan bağlantılar.
Tarayıcı aynı yapıyı bellekte kurar. Açık kalan her etiket dalı başka bir yerde kapatır ve sayfa yazmadığınız bir şeye dönüşür.
Son kontrol: Bu dersteki bilgiler ve araç adları bu tarihte kaynaklarıyla yeniden doğrulanır.
HTML ne yapar, ne yapmaz?
Tek bir iş yapar: tarayıcıya her metin parçasının ne olduğunu söyler. HTML, hypertext markup language ifadesinin kısaltmasıdır; işaretleme de tam olarak bu etiketlemedir: şu birkaç kelimenin sayfa başlığı, şunun bir paragraf, şu üç satırın tek bir liste olduğunu söylemek.
Yapmadığı üç şeyi de bilin ki vakit kaybetmeyin. Görünüm HTML'in işi değil, CSS'in işidir: renk, boşluk, boyut ve yerleşim orada belirlenir. Davranış JavaScript'tir: tıklayınca açılan bir şey ya da sayfa yenilenmeden gönderilen bir form. Sunucu tarafı mantığı ise tarayıcıda hiç yoktur; bir siparişi kaydetmek sunucuda çalışan bir programın işidir.
Peki HTML neden önce gelir? Çünkü üç izleyicinin de okuduğu tek katman odur: tarayıcı, ekran okuyucu ve arama motoru tarayıcısı. Ekran okuyucunun CSS'inize ihtiyacı yoktur ve JavaScript'inizi hiç çalıştırmayabilir, ama iskeleti herkes okur. Bu katmanda aldığınız her karar üç yerde birden görünür.
Yaygın bir yanlış anlama da burada biter: HTML bir programlama dili değildir. Koşulu, döngüsü, değişkeni yoktur; hiçbir şey hesaplamaz, hiçbir şeye karar vermez. Tanımlar. Basit olması, tam da kalıcı olmasının sebebidir.
İlk sayfanız: bir dosya, birkaç satır ve bir tarayıcı
Özel bir yazılım gerekmez. Düz bir metin düzenleyici yeter, Notepad bile; dosyayı .html uzantısıyla kaydedersiniz. Profesyonel bir düzenleyiciye sonra geçin; şimdilik yalnızca yolu tıkar.
Geçerli bir sayfanın ihtiyaç duyduğu her şey bu kadar:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>İlk sayfam</title>
</head>
<body>
<h1>Merhaba</h1>
<p>Bu kendi kurduğum ilk sayfa.</p>
</body>
</html>Dosyayı kaydedin ve çift tıklayın; tarayıcı onu hiçbir sunucu olmadan açar. İlk dört satır da tesadüf değil. doctype tarayıcıya eski uyumluluk kipi yerine bugünün kurallarıyla çalışmasını söyler. lang dili bildirir, sağdan sola yazılan bir dilde dir yönü bildirir; bunlar olmadan ekran okuyucu yanlış telaffuzla okur. charset olmadan Latin dışı harfler bozulur. viewport olmadan sayfa telefonda küçülmüş görünür.
Şimdi bir kelimeyi değiştirip yenileyin. Bu kısa döngü, yaz ve bak, HTML öğrenmenin bütün yöntemidir. Çalıştırılacak ya da derlenecek bir şey yok.
Boş bir dosyadan tarayıcıda açılan bir sayfaya
-
1
Bir metin dosyası oluşturun
Adı index.html olsun ve uzantısı gerçekten html olsun, html.txt değil.
-
2
İskeleti yazın
doctype, dil ve yön taşıyan html etiketi, head ve body. Hepsi bu.
-
3
Tarayıcıda açın
Çift tıklamak yeter. Hiçbir sunucu devrede değil.
-
4
Bir şeyi değiştirip yeniden bakın
Kaydet, yenile, bak. Beceriyi kuran şey bu döngüdür.
-
5
Doğrulayın
Dosyayı W3C doğrulayıcısına verin ki kapatılmamış etiketleri göstersin.
Bu beş adım kendi makinenizde çalışır; barındırma ya da alan adı gerektirmez. İnternette yayımlamak ayrı ve sonraki bir aşamadır.
Hangi iş için hangi etiket? Sayfanın anlamsal iskeleti
Bütün bir sayfayı div öğeleriyle kurup görünümünü tıpatıp aynı yapabilirsiniz. Kaybettiğiniz şey anlamdır: div kimseye hiçbir şey söylemez, oysa nav ekran okuyucuya buranın site menüsü olduğunu ve kullanıcının onu atlayabileceğini söyler.
Neredeyse her sayfanın sahip olduğu iskelet şöyledir:
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>Sayfa başlığı</h1>
<article>
<h2>Bir bölüm</h2>
<p>Metin.</p>
</article>
</main>
<footer>...</footer>
</body>Bu iskeleti birkaç kural ayakta tutar: sayfa başına bir h1 ve yalnızca bir tane, çünkü sayfanın tek bir ana başlığı vardır. Başlık düzeyleri sırayla iner ve yazı küçülsün diye h2'den h4'e asla atlanmaz; boyut CSS işidir. Sayfa başına bir main, o sayfaya özgü içeriği taşır; menü ve altbilgi dışarıda kalır.
Metin için sık yanlış kullanılan birkaç küçük öğe var. strong bu önemlidir demektir, em bu kelimede vurgu vardır demektir; anlam yüklemeden yalnızca kalın ya da eğik istiyorsanız o CSS işidir. a kullanıcının başka bir sayfaya gittiği yerdir, button ise bu sayfada bir şeyin olduğu yer. Bu ikisini yer değiştirmek webin en yaygın anlamsal hatasıdır.
Öğelerin tam listesini ezberlemeyin. MDN HTML öğe referansı hep açıktır ve bu işi on yıldır yapan biri de onu günde birkaç kez açar.
Aynı sayfa: gerçek öğelerle ve boş divlerle
Anlamsal öğelerle
- Ekran okuyucu buranın site menüsü olduğunu ve atlanabileceğini söyler
- Başlıklar gerçek bir içindekiler tablosu oluşturur
- Düğme, tek satır fazladan kod olmadan Tab ve Enter ile çalışır
- Arama motoru tarayıcısı ana içeriğin hangi parça olduğunu ayırt eder
Boş divlerle
- Her şey adsız tek bir bloktur ve atlanacak bir şey yoktur
- Aynı iş artık eklenmiş ARIA öznitelikleri gerektirir
- Düğme yalnızca fareyle çalışır, klavyeyle değil
- Yapı yalnızca kodu yazanın kafasında vardır
İki sütun tarayıcıda birebir aynı görünür. Fark, birinin sayfayı görmeyip yalnızca duyduğu yerde ortaya çıkar.
Erişilebilirlik neden sonra değil ilk gün?
Çünkü sonrası pahalıdır. Sayfayı doğru öğelerle kurarsanız erişilebilirliğin büyük bölümü bedava gelir; div öğeleriyle kurup sonra düzeltmeye kalkarsanız aynı anlamı ek özniteliklerle yeniden kurmanız gerekir, bu da hem daha uzun sürer hem daha kolay kırılır.
İlk gün alışkanlık hâline gelmeye değer dört şey. Önce görseller için alternatif metin: alt, resmi göremeyen biri için yazılır; içine anahtar kelime tıkıştırmak yerine resimde ne olduğunu söylemelidir. Görsel tamamen süslemeyse boş alt="" doğrudur, alt'ı hiç yazmamak değil. Sonra başlık sırası: ekran okuyucu için içindekiler tablosu görevi görür. Sonra form etiketleri: her input'un bağlı bir label'ı olmalı, yoksa kullanıcı metin düzenle duyar ve ne yazacağını bilemez. Son olarak klavyeyle kullanım: bir düğmeye Tab ile ulaşıp Enter ile etkinleştiremiyorsanız o şey düğme değildir, yalnızca düğmeye benziyordur.
Bütün bunları özetleyen bir kural var ve doğrudan W3C'den geliyor: iş için yerleşik bir HTML öğesi varsa onu kullanın ve ARIA eklemeyin. Using ARIA belgesi bunu ilk kuralı yapıyor; sebebi de yanlış ARIA'nın hiç olmamasından kötü olması: ekran okuyucuya tarayıcının yapmadığı bir şeyi vaat eder.
Sınırı da bilin: otomatik araçlar her şeyi ölçmez. W3C'nin kendi Easy Checks rehberi, otomatik denetimin insan incelemesinin yerini tutmadığında ısrar ediyor. Makine alt'ın var olduğunu anlayabilir; metnin resmi gerçekten tarif edip etmediğine ise yalnızca siz karar verebilirsiniz.
Dört yaygın hata ve onları kendiniz nasıl bulursunuz
Birincisi başlık düzeyini yazı boyutuna göre seçmek. Biri h2 büyük göründüğü için h3 yazar. Sonuç, ekran okuyucu ve arama motoru için karışmış bir içindekiler tablosudur; oysa iki satır CSS bunu çözerdi.
İkincisi düğme olmayan düğme: tıklama dinleyicisi eklenmiş bir div. Fareyle çalışır, klavyeyle çalışmaz.
Üçüncüsü anlamsız alternatif metin: alt="görsel" ya da dosya adı gibi. Bu, boş bırakmaktan kötüdür; çünkü kullanıcıyı hiçbir bilgi taşımayan bir şeyi dinlemeye zorlar.
Dördüncüsü kapatılmamış etiketler. Tarayıcı bunları genelde toparlar ve sayfa düzgün görünür; ta ki bir bölüm birdenbire başka bir bölümün içine düşene ve saatlerce sebebini arayana kadar.
Bunların hepsini yakalamak için üç araç yeter ve üçü de ücretsizdir. W3C doğrulayıcısı adresinizi ya da dosyanızı alır, yapısal hataları satır satır gösterir; kapatılmamış etiket orada çıkar. F12 ile açılan tarayıcı geliştirici araçları, sayfanın tarayıcı yorumladıktan sonraki gerçek yapısını gösterir ve yazdığınızla farkı genelde açıklayıcıdır. En basiti de başkalarının sayfa kaynağını okumaktır: iyi kurulmuş her site ücretsiz bir derstir.
Bir alıştırma her videodan iyidir: kurduğunuz sayfayı yalnızca klavyeyle dolaşın. Sadece Tab'a basın. Takıldığınız ya da nerede olduğunuzu anlayamadığınız her yerde gerçek bir kusur bulmuşsunuzdur.
Yapay zekayla hızlı yol
Dil modelleri HTML'i hızlı ve neredeyse her zaman sözdizimi hatasız yazar. Yapmadıkları şey sayfanın yapısına karar vermektir ve çıktı tam orada aksar: yanlış düzeyde bir başlık, <code>div</code> olan bir düğme ve modelin hiç görmediği bir görsel için yazılmış alternatif metin. Yani hızlı yol üretmek değil, üretip sonra denetlemektir. Burada hızlı ve ucuz bir model yeter, çünkü iş mekaniktir; güncel tercihimiz <a class="text-link" href="/tr/ai/">yapay zeka bölümünde</a>.
- Sayfanın bölümlerini, okuyucunun görmesi gereken sırayla kâğıda yazın. Bu, modelin sizin yerinize atamayacağı tek adımdır; çünkü hangi noktanın daha önemli olduğunu bilmez.
- Aşağıdaki tarifi çalıştırın ve çıktıyı aynı index.html dosyasına koyun.
- Dosyayı W3C doğrulayıcısına verin. Yapısal hataları her şeyden önce bitirin.
- Otomatik hiçbir aracın yanıtlayamadığı dört şeyi elle denetleyin: tek bir h1 ve başlık sırası, her görselin alternatif metni, her form alanının etiketi ve tüm sayfayı yalnızca Tab ile dolaşmak.
- Metinleri kendiniz yazın. Modelin TODO bıraktığı her yer sizindir; bir modelin hiç görmediği bir görsel için yazdığı metin betimleme değil, tahmindir.
Kopyalamaya hazır şablon
Rol: çerçeve kullanmadan ve CSS yazmadan anlamsal HTML yazan biri.
İstediğim sayfa:
Konu: {sayfa konusu}
Bölümler sırayla: {bölüm listesi}
Dil ve yön: {dil}, {yön}
Çıktı kuralları:
- Yalnızca HTML ver. CSS yok, JavaScript yok, kütüphane yok.
- Anlamsal öğeleri kullan: header, nav, main, article, section, footer. Anlamlı bir öğe varken div kullanma.
- Tam olarak bir h1 ve sırayla inen başlık düzeyleri. Başlık düzeyini yazı boyutuna göre seçme.
- html etiketine lang ve dir özniteliklerini koy.
- Bu sayfada gerçekleşen bir iş için tıklanabilir div değil button kullan. Başka sayfaya gitmek için a kullan.
- Her input bağlı bir label alsın.
- Eşdeğer bir HTML öğesi bulunmayan yerler dışında hiçbir ARIA özniteliği ekleme. Böyle bir yer varsa sonda nedenini yaz.
- Her görsel için uydurma alternatif metin yerine alt="TODO" yaz ki ben dolduracağım.
- Girdimde olmayan hiçbir metni, sayıyı, ismi ya da iddiayı yazma. Yerine {...} bırak.
Kodun ardından üç satırda hangi yapısal kararları verdiğini ve nerede tereddüt ettiğini söyle.Çıktıya güvenmeden önce: Son adımı atmayın: görsellerin alternatif metnini ve düğmelerin üzerindeki sözleri insan yazar. Model görselinizi görmedi; zorlarsanız kulağa makul gelen ve yanlış olan bir betimleme üretir. Otomatik denetim de işin yalnızca bir parçasıdır; W3C'nin Easy Checks rehberi tam bunu söylüyor. Klavye testinin ve alternatif metni kendi gözünüzle okumanın yerini hiçbir şey tutmaz.
Bu işte yapay zeka
HTML'de yapay zeka işi gerçekten hızlandırır; yeter ki neyi denetleyeceğinizi bilin. Değerli üç kullanım: bir sayfanın ilk iskeletini üretmek, tanımadığınız bir kod parçasını satır satır açıklamak ve div yüklü bir sayfayı anlamsal sürümüne çevirmek. Devretmediğimiz üç şey: içerik yapısına karar vermek, görseller için alternatif metin yazmak ve erişilebilirliğe hüküm vermek.
Gerçekten işe yarayan araçlar
- Claude Bir kod parçasını satır satır açıklamakta ve anlamsal olarak yeniden yazmakta iyi. İran, Anthropic'in desteklenen ülkeler listesinde yok; bunu Anthropic'in kendi sayfasında okuduk.
- Gemini İlk iskelet ve temel sorular için yeterli; Farsçayı da iyi anlar. Google'ın kendi sayfası Gemini web uygulamasının 230'dan fazla ülke ve bölgede çalıştığını söylüyor ve İran o listede yok.
- ChatGPT En yaygın seçim ve bu işler için kabul edilebilir. Yapay zeka bölümümüzde henüz ona ait bir kayıt yok, bu yüzden erişimi ya da fiyatı hakkında burada bir iddiada bulunmuyoruz.
Nerede geri teper
Buradaki risk sözdizimsel değil anlamsaldır ve sessizce geçer. Modelin verdiği kod genelde geçerlidir ve tarayıcıda doğru görünür, ama üç şey sürekli geri gelir: görünüme göre seçilmiş bir başlık düzeyi, aslında div olan bir düğme ve modelin hiç görmediği bir görsel için yazılmış alternatif metin. Dördüncüsü daha ince: profesyonel görünen ve gerçekte bir şeyi bozan fazladan ARIA öznitelikleri. W3C'nin kendi Using ARIA belgesinin ilk kuralı tam da budur: yerleşik HTML öğesi varsa onu kullanın, ARIA eklemeyin. Easy Checks rehberi de otomatik incelemenin insan incelemesinin yerini tutmadığını söyler. Yani konumumuz basit: model üretir, insan denetler. Her aracın İran'dan nasıl ödenebileceği için satın alma rehberine bakın.
Kaynaklar: W3C: Using ARIA, first rule W3C WAI: Easy Checks Anthropic: supported countries Google: where Gemini Apps are available
Bu tavsiyenin sınırı
HTML tek başına bir sayfa kurar, bir site değil. Yerleşim ve görünüm CSS'in, davranış JavaScript'in işidir; sayfanın internette açılması ise barındırma ve alan adı işidir. Daha önemlisi, etiketleri ezberlemek beceri değildir; beceri, her içerik parçası için hangi öğenin doğru olduğunu bilmektir ve bu ancak birkaç gerçek sayfa kurmakla gelir. Amacınız çalışan bir siteyi hızlıca ayağa kaldırmaksa en kısa yol WordPress ya da bir kurucudur; bu ders yalnızca onların ne ürettiğini anlamanıza yardım eder.
Kendi işimizden
Üzerinde bulunduğunuz site bizim kendi örneğimizdir ve kodunu okuyabilirsiniz. rgb.ir sayfaları PHP dosyalarıyla kendi özel temamızdan kurulur ve burada etkin hiçbir sayfa kurucu eklentisi yoktur; yani kaynağı görüntüle ile gördüğünüz şey bizim yazdığımızdır. Bu dersin denetlendiği gün ana sayfa tam olarak bir h1 etiketi, bir main ve içerik blokları için yirmi altı article ile on beş section öğesi taşıyordu. Tek h1 kuralı ve başlık sırası bizde de zevk meselesi değil; sitenin kendi yazım kurallarına yazılmış durumda. Bir de gerekli bir dürüstlük: aynı sayfada yaklaşık yüz altmış div öğesi de var. Anlamsal yazmak, anlamlı öğe varken onu kullanmak demektir; div'i dilden silmek değil. Salt yerleşim için div hâlâ en doğru seçimdir.
Gerçek devam soruları
HTML bir programlama dili midir?
Hayır. Bir işaretleme dilidir: tanımlar, çalışmaz. Koşulu, döngüsü, değişkeni yoktur ve hiçbir şey hesaplamaz. Programlama olmaması, ondan başlamak için iyi bir sebeptir.
Başlamak için hangi yazılım gerekir?
Bir metin düzenleyici ve bir tarayıcı; ikisi de bilgisayarınızda zaten var. İlk birkaç sayfadan sonra VS Code gibi bir düzenleyici işi kolaylaştırır, çünkü etiketleri renklendirir ve kapatılmamış olanları gösterir; ama ilk gün gerekmez.
Yapay zeka HTML yazarken onu öğrenmek hâlâ gerekli mi?
Yazmak için hayır, okumak için evet. Üretilen kod genelde geçerlidir, ama yapısal kararlarını birinin denetlemesi gerekir; başlığın, düğmenin ve alternatif metnin nasıl olması gerektiğini bilmiyorsanız çıktının doğru mu yoksa yalnızca güzel mi olduğunu anlamanın yolu yoktur.