Önyüz Geliştirme

HTML

H. Turgut Uyar

Mart 2019

Kendin için Kodla logosu.

Lisans

Creative Commons BY-NC-SA lisansı.
Creative Commons
Atıf - GayriTicari - AynıLisanslaPaylaş 4.0 Uluslararası

  • yazarının adı belirtilmelidir

  • ticari amaçla kullanılamaz

  • türetilen eserler aynı lisansla paylaşılmalıdır

ayrıntılı bilgi

İçindekiler

HTML

  • ilk dosyamızı oluşturalım

  • içine hayvanın ismini yazalım

  • ilk paragrafı ekleyelim

Boşluklar

Karga

İri yapılı, düz gagalı,
pençeli, tüyleri çoğunlukla
siyah, yüksek ve rahatsız
edici sesli kuş. Daha büyük
ve genellikle leş yiyici
olanlarına "karakarga" veya
"kuzgun" denir.
Boşlukların etkisi olmadığından yazı tek blok halinde.

Düz metin yetersiz

İşaretleme

<etiket>işaretlenen bölge</etiket>

Temel elemanlar

<h1>Karga</h1>

<p>İri yapılı, düz gagalı,
  pençeli, tüyleri çoğunlukla
  siyah, yüksek ve rahatsız
  edici sesli kuş. Daha büyük
  ve genellikle leş yiyici
  olanlarına "karakarga" veya
  "kuzgun" denir.</p>
Paragraf ve başlık elemanlarının kullanımı.

İçiçe elemanlar

<dış>dış bölge<iç>iç bölge</iç>dış bölge</dış>

<dış>
  dış bölge
  <iç>
    iç bölge
  </iç>
  dış bölge
</dış>

Vurgu

<h1>Karga</h1>

<p>İri yapılı, düz gagalı,
  pençeli, tüyleri çoğunlukla
  siyah, yüksek ve rahatsız
  edici sesli kuş. Daha büyük
  ve genellikle leş yiyici
  olanlarına <em>karakarga</em>
  veya <em>kuzgun</em> denir.</p>
Vurgu elemanının italik gösterilimi.

Boş elemanlar

<etiket/>

Eleman nitelikleri

<p lang="tr">İri yapılı, düz gagalı, pençeli, tüyleri
  çoğunlukla siyah, yüksek ve rahatsız edici sesli kuş.
  Daha büyük ve genellikle leş yiyici olanlarına
  "karakarga" veya "kuzgun" denir.</p>

İçindekiler

Sayfa elemanları

Şablon

<!DOCTYPE html>
<html lang="tr">
  <head>
    ... sayfa bilgileri ...
  </head>
  <body>
    ... sayfa içeriği ...
  </body>
</html>

Gövde

<body>
  <h1>Karga</h1>

  <p>İri yapılı, düz gagalı, pençeli, tüyleri çoğunlukla
    siyah, yüksek ve rahatsız edici sesli kuş. Daha büyük
    ve genellikle leş yiyici olanlarına <em>karakarga</em>
    veya <em>kuzgun</em> denir.</p>
</body>

  • ömür ve ilginç bilgi paragraflarını ekleyelim

Baş

  • hangi harflerle yazıldığı: charset

Harf tabloları

Sayfa başlığı

<head>
  <meta charset="utf-8"/>
  <title>Doğa Kaşifleri - Karga</title>
</head>

İçindekiler

Altbaşlıklar

  • beslenme altbölümünü sayfaya ekleyelim

Bağlantılar

Bağlantılar

<p>Kargalar tuhaf sesleri, siyah renkleri, parlak cisimlere olan
  düşkünlükleri ile bilinirler.
  <a href="https://awesci.com/ultimate-problem-solving-crow/">Bazı
  araştırmalar</a> kargaların çok zeki olduklarını
  göstermektedir.</p>
Seçilen sözcükler bağlantının metnini oluşturuyor.

Resimler

Resimler

<img src="karga.jpg"
     width="1280"
     height="427"
     alt="Bir parkta çimenlerin önüne konmuş bir karga."/>
Foto belirtilen boya ölçekli olarak yerleştirilir.

  • galeri altbölümüne küçük fotoların ilkini koyalım

Şekiller

Şekiller

<figure>
  <img src="karga_1.jpg"
       width="128"
       height="128"
       alt="Foto 1"/>
  <figcaption>Foto 1</figcaption>
</figure>

  • büyük fotoyu figure içine alalım, yazısı olmasın

  • bütün küçük resimleri ekleyelim

Listeler

  • sırasız liste: ul

  • sıralı liste: ol

  • liste maddesi: li

<h2>Türler</h2>

<ul>
  <li>Avustralya kargası</li>
  <li>Orman kargası</li>
  <li>Küçük karga</li>
</ul>
Sırasız listeler maddeler halinde gösterilir.

Tablolar

Tablolar

<table>
  <tr>
    <th>Sınıf:</th>
    <td>Kuşlar</td>
  </tr>
  <tr>
    <th>Familya:</th>
    <td>Kargagiller</td>
  </tr>
  <tr>
    <th>Cins:</th>
    <td>Corvus</td>
  </tr>
</table>
Sırasız listeler maddeler halinde gösterilir.

İçindekiler

Gövde şablonu

Gövde bileşenleri

<body>
  <header>
    ... logo, navigasyon, ...
  </header>

  <main>
     ... ana içerik ...
  </main>

  <footer>
    ... site haritası, ...
  </footer>
<body>

  • üstlük: header

  • ana: main

  • altlık: footer

  • body altındakileri main içine alalım

Altlık

<footer>
  <p>(C) 2019, Kendin için Kodla</p>
</footer>
Altlık ana içerikle aynı şekilde görüntülenir.

Üstlük

  • üstlük de aynı şekilde

<header>
  <img src="logo_siyah.png"
       width="434"
       height="88"
       alt="Doğa Kaşifleri logosu"/>
</header>

  • logoyu ana sayfaya bağlantı haline getirelim

Üstlük de ana içerikle aynı şekilde görüntülenir.

Navigasyon

<nav>
  <a href="turler.html">Hayvan türleri</a>
  <a href="oyun.html">Biliyor musun?</a>
</nav>
Navigasyona yalnızca linklerin yazılması yeterli.

Metin bölümleri

<section>
  <h2>Galeri</h2>

  <figure>
    ...
  </figure>

  <figure>
    ...
  </figure>
</section>

HTML bölümünün sonu

➤ CSS