Web programlama: site hazırlama, HTML etiketleri ve listeler

Bu derste öğreneceklerin

Web sitesi, web sayfası, şablon kavramlarını ve site hazırlama aşamalarını açıklamak
Çift ve tek etiketleri, nitelikleri tanımak ve HTML belgesinin yapısını yazmak
Bir kod parçasından metnin tarayıcıda nasıl görüneceğini, yanlış iç içe etiketlerde de, belirlemek
ul, ol, dl etiketlerine ve type, start niteliklerine göre listenin türünü, öğelerinin numarasını ve görünüşünü bulmak

Tarayıcıda açtığın her sayfa aslında düz bir metin dosyasıdır: içinde metnin yanı sıra açılı parantezler içinde özel işaretler — etiketler vardır. Tarayıcı dosyayı okur ve etiketlere bakarak nerede başlık, nerede liste olduğunu, hangi sözcüğün kalın yazılacağını belirler. Bu etiketlerin dili HTML’dir.

Giriş sınavının her kitapçığında HTML’le ilgili 2 soru bulunur: biri etiketler ve listeler (bu ders), diğeri tablolar («HTML’de tablolar, renk şeması, resimler ve bağlantılar» dersi). Bir kod parçası verilir ve sorulur: tarayıcıda ne görünecek, liste öğesi nasıl numaralanacak, kaç sözcük kalın yazılacak.

Web sitesi ve hazırlanma aşamaları

Tanım

Web sayfası ve web sitesi

Web sayfası, HTML ile yazılmış ve tarayıcıda gösterilen belgedir (dosya uzantısı .html veya .htm). Web sitesi, ortak konu, tasarım ve adresle birleşen, birbirine bağlantılarla bağlı web sayfaları topluluğudur; ana sayfa genellikle index.html adını taşır.

Tanım

Web programlama

Web siteleri ve web uygulamaları oluşturma: sayfaların işaretlenmesi (HTML), biçimlendirilmesi (CSS) ve davranışlarının programlanması (JavaScript ve sunucu dilleri).

HTML (HyperText Markup Language — köprü metni işaretleme dili) sayfanın içeriğini ve yapısını, CSS (Cascading Style Sheets — basamaklı stil sayfaları) ise görünüşünü — renkleri, yazı tiplerini, yerleşimi tanımlar. HTML bir programlama dili değil, işaretleme dilidir: değişken, koşul ve döngü içermez. Web sitesi şablonu, kendi metin ve resimlerinle doldurduğun hazır bir tasarım ve yapıdır (üst bilgi, menü, içerik, alt bilgi). Site oluşturucular ve WordPress gibi sistemler binlerce şablon sunar.

1
Planlama
Sitenin amacı, hedef kitlesi, bölümleri ve sayfa listesi (site haritası).
2
Tasarım
Görünüş, renkler, yazı tipleri, sayfa taslağı; hazır bir şablon da seçilebilir.
3
Hazırlama (kodlama)
Sayfaların HTML ve CSS ile yazılması, metin ve resimlerin yerleştirilmesi.
4
Test
Farklı tarayıcı ve ekranlarda kontrol, bağlantıların denenmesi, hataların düzeltilmesi.
5
Yayınlama
Barındırma ve alan adı seçmek, dosyaları sunucuya yüklemek.
6
Bakım
İçeriğin güncellenmesi, güvenlik, yeni bölümlerin eklenmesi.

Aşamaların sırası

Site hazırlama aşamalarının doğru sırasını gösterin: 1. test; 2. tasarım; 3. yayınlama; 4. planlama; 5. hazırlama.
A) 4, 2, 5, 1, 3 B) 2, 4, 5, 3, 1 C) 4, 5, 2, 1, 3 D) 4, 2, 5, 3, 1 E) 2, 5, 4, 1, 3

Çözümü göster

Önce sitenin neden gerektiğini planlarız (4), sonra görünüşünü düşünürüz (2), sayfaları hazırlarız (5), test ederiz (1) ve ancak ondan sonra internette yayınlarız (3).
Doğru cevap: A) 4, 2, 5, 1, 3. D seçeneğinde test edilmemiş bir site yayınlanıyor.

HTML belgesi: etiketler ve nitelikler

Tanım

Etiket

Açılı parantez içindeki HTML komutu: . Çift etiket açılış () ve kapanış (, eğik çizgiyle) kısmından oluşur ve aradaki metne etki eder. Tek etiketin kapanış kısmı yoktur:   (yeni satır), <hr> (yatay çizgi), <img> (resim).

Tanım

Nitelik (attribute)

Etiketin ek özelliği. Açılış etiketinin içinde ad="değer" biçiminde yazılır: <ol type="A" start="3">. Bir etikette birkaç nitelik olabilir, sıraları önemli değildir.

HTML· Kodu değiştir ve yeniden çalıştır

<html>
<head>
  <title>My first page</title>
</head>
<body>
  <h1>Baku</h1>
  <p>Baku is the capital of Azerbaijan.<br>It lies on the Caspian Sea.</p>
  <hr>
  <p>Many     spaces     become     one.</p>
  <P>Tags can be written in CAPITALS too.</P>
</body>
</html>

Önizleme

HTML belgesinin iskeleti: <html> tüm belgeyi, <head> hizmet kısmını (<title> tarayıcı sekmesindeki ad), <body> ise ekranda görünen kısmı kapsar. Kodu değiştir; önizleme hemen güncellenir.

Etiketler büyük-küçük harfe duyarlı değildir:  ile  aynıdır.
Tarayıcı art arda gelen boşlukları ve satır sonlarını tek boşluk olarak gösterir: yeni satır için  , yeni paragraf için  gerekir.
<h1>–<h6> başlıklardır: <h1> en büyüğüdür, hepsi kalın yazılır.
Etiketler açılış sırasının tersiyle kapanır: … doğrudur.

Metni biçimlendirme

Etiket	Tarayıcıdaki sonuç
`<b>…</b>`	kalın
`<strong>…</strong>`	kalın (önemli metin)
`<i>…</i>`	italik
`<em>…</em>`	italik (vurgu)
`<u>…</u>`	altı çizili
`<tt>…</tt>`	eş aralıklı (daktilo) yazı tipi: her harf aynı genişlikte; kalın değil
`<sub>…</sub>` · `<sup>…</sup>`	alt simge (H₂O) · üst simge (x²)
`<font color="red" size="5">`	metin rengi, boyutu (1–7, varsayılan 3) ve `face` ile yazı tipi

HTML· Kodu değiştir ve yeniden çalıştır

<p><b>b: bold</b> | <strong>strong: bold</strong></p>
<p><i>i: italic</i> | <em>em: italic</em></p>
<p><u>u: underlined</u> | <tt>tt: monospace</tt></p>
<p>H<sub>2</sub>O and x<sup>2</sup></p>
<p><font color="red" size="5">font: red, size 5</font></p>
<p><b><i>bold and italic</i></b></p>
<p><b>IN<i>FO</b>RM</i> (wrongly nested)</p>

Önizleme

Her etiketin sonucunu gör ve kendi sözcüklerinle dene. Son satırdaki yanlış iç içeliğe dikkat et.

DİM sorularında sık sık kalın sözcükleri saymak gerekir. Kural: tarayıcıda kalın görünen metin , , <h1>–<h6> başlıklarının, tablolarda ise <th> hücrelerinin içindeki metindir. , , , <tt> kalınlık vermez. Bir sözcük birkaç etiketin içindeyse etkiler toplanır: C++ hem kalın hem italiktir.

Örnek 1. Kaç sözcük kalın yazılacak?

HTML kod parçasına göre sözcüklerden kaçı web sayfasında kalın yazı tipiyle gösterilir?
<ul>
<li>Python</li>
<li><tt>Java</tt></li>
<li>C++</li>
<li>Kotlin</li>
<li>Swift</li>
<li>Go ve Rust</li>
</ul>
A) 2 B) 3 C) 4 D) 5 E) 1

Çözümü göster

Python — , kalın. Java — <tt>, eş aralıklı, kalın değil. C++ —  içinde, kalın (ve italik). Kotlin — , italik. Swift — , altı çizili. Go — , kalın; «ve Rust» etiketin dışında.
Kalın sözcükler: Python, C++, Go — 3.
Doğru cevap: B) 3.

Etiketler yanlış iç içe yazılsa da tarayıcı sayfayı gösterir. Kural basittir: her biçimlendirme etiketi kendi açılış etiketinden kendi kapanış etiketine kadar olan metne etki eder; diğer etiketlerin nerede kapandığı önemli değildir.

Örnek 2. Yanlış iç içe etiketler

INFORM kod parçası web sayfasında nasıl görünür?
A) sözcüğün tamamı kalın ve italiktir
B) «IN» kalın, «FO» kalın ve italik, «RM» italiktir
C) «INFO» kalın, «RM» düz yazıdır
D) «IN» kalın, «FO» yalnızca italik, «RM» düz yazıdır
E) sözcüğün tamamı italiktir

Çözümü göster

 «IN»den önce açılır ve  ile «FO»dan sonra kapanır: kalın bölge INFO’dur.  «FO»dan önce açılır,  ile sonda kapanır: italik bölge FORM’dur.
Kesişim FO hem kalın hem italiktir.
Doğru cevap: B.

Listeler

Liste	Etiketler	Görünüşü	Nitelikler
Madde işaretli (sırasız)	`<ul>`, `<li>`	her öğenin önünde işaret: ● disc, ○ circle, ■ square	`type`
Numaralı (sıralı)	`<ol>`, `<li>`	1, 2, 3 · A, B, C · a, b, c · I, II, III · i, ii, iii	`type`, `start`
Tanım listesi	`<dl>`, `<dt>`, `<dd>`	terim (`<dt>`) ve açıklaması (`<dd>`, içeriden); işaret yok	—

HTML· Kodu değiştir ve yeniden çalıştır

<ul type="square">
  <li>Python</li>
  <li>Java
    <ul>
      <li>Kotlin</li>
    </ul>
  </li>
</ul>
<ol type="A" start="3">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
<ol type="i">
  <li>planning</li>
  <li>design</li>
</ol>
<dl>
  <dt>HTML</dt>
  <dd>marks up the content of a page</dd>
  <dt>CSS</dt>
  <dd>sets how the page looks</dd>
</dl>

Önizleme

Üç tür liste. type ve start değerlerini değiştir: örneğin type="I" ya da start="5" yaz ve sonuca bak.

start her zaman sayıyla yazılır, numaralar harf olsa bile: <ol type="A" start="3"> C’den, <ol type="I" start="4"> IV’ten başlar. İç içe <ul> listesinde içteki listenin işareti kendiliğinden ○ olur. <dt> terimi kalın değildir, düz yazılır; <dd> ise içeriden başlar.

Örnek 3. Numaralı listenin son öğesi

HTML kod parçasına göre numaralı listenin son öğesiyle ilgili hangi ifade doğrudur?
<ul>
<li>monitör</li>
<li>yazıcı</li>
</ul>
<ol type="A" start="2">
<li>tarayıcı</li>
<li>projektör</li>
<li>çizici</li>
</ol>
A) «D» ile numaralanmış ve kalın yazılmıştır
B) «C» ile numaralanmış ve kalın yazılmıştır
C) «3» ile numaralanmış ve italik yazılmıştır
D) «D» ile numaralanmış ve altı çizilidir
E) madde işaretiyle gösterilmiş ve italik yazılmıştır

Çözümü göster

1) Numaralı liste <ol>dir; <ul> madde işareti verir, bu yüzden E yanlıştır.
2) type="A", start="2": numaralar B, C, D. Son öğe («çizici») D’dir.
3)  içindedir, kalındır.
Doğru cevap: A.

Örnek 4. Liste hakkında doğru ifade

<ol type="I" start="4">
<li>fizik</li>
<li>kimya</li>
<li>biyoloji</li>
</ol>
Hangi ifade doğrudur?
A) madde işaretli listedir, son öğesi altı çizilidir
B) numaralı listedir, «kimya» sözcüğü V numarasıyla kalın yazılmıştır
C) numaralı listedir, ilk öğenin numarası I’dir
D) tanım listesidir
E) numaralı listedir, son öğenin numarası VII’dir

Çözümü göster

<ol> numaralı listedir (A ve D yanlış). type="I" Roma rakamları, start="4" IV’ten başlar: fizik IV, kimya V, biyoloji VI (C ve E yanlış). «kimya»  içindedir, kalındır.
Doğru cevap: B.

Etkileşimli

Simülasyon yükleniyor…

Her etiket adını doğru gruba bırak.

Etiketi veya niteliği yaz

1.Numaralı liste etiketiyle oluşturulur.
2.Listenin her öğesi etiketine yazılır.
3.Tanım listesinde terim etiketine yazılır.
4.Numaralamanın başladığı sayı niteliğiyle verilir.

Önemli noktalar

Site hazırlama aşamaları: planlama, tasarım, hazırlama, test, yayınlama, bakım; şablon hazır tasarım ve yapıdır.
HTML içeriği ve yapıyı, CSS görünüşü tanımlar; HTML programlama değil, işaretleme dilidir.
Çift etiketler açılır ve kapanır, tek etiketler ( , <hr>, <img>) kapanmaz; nitelikler açılış etiketine ad="değer" olarak yazılır.
Kalın: , , <h1>–<h6>, <th>; italik: , ;  altı çizili, <tt> eş aralıklı.
Yanlış iç içelikte her etiket kendi açılışından kendi kapanışına kadar etki eder.
<ul> madde işaretli, <ol> numaralı (type: 1, A, a, I, i; start bir sayıdır), <dl> tanım listesi (<dt>, <dd>).

Kendini test et

12 soru. Her doğru cevap XP kazandırır.

1 / 12

Hangi etiket numaralı liste oluşturur?