Bağlantılar, Görseller ve Listeler

Bağlantılar (Linkler)

Web'in temel yapı taşı <a> (anchor) etiketidir. Sayfalar arası geçiş sağlar.

<!-- Dış bağlantı -->
<a href="https://www.google.com">Google'a Git</a>

<!-- Yeni sekmede aç -->
<a href="https://www.google.com" target="_blank">Yeni Sekmede Aç</a>

<!-- Sayfa içi bağlantı -->
<a href="#iletisim">İletişim Bölümüne Git</a>
...
<h2 id="iletisim">İletişim</h2>

<!-- E-posta bağlantısı -->
<a href="mailto:info@okul.com">Bize Yazın</a>

<!-- Telefon bağlantısı -->
<a href="tel:+905001234567">Bizi Arayın</a>

Görseller

<!-- Temel kullanım -->
<img src="logo.png" alt="Okul Logosu">

<!-- Boyut belirtme -->
<img src="foto.jpg" alt="Sınıf fotoğrafı" width="600" height="400">

<!-- İnternetten görsel -->
<img src="https://picsum.photos/400/300" alt="Rastgele görsel">

<!-- Görsel bağlantı -->
<a href="https://www.okul.com">
    <img src="logo.png" alt="Ana sayfaya git">
</a>

Listeler

<!-- Sırasız Liste (Madde işaretli) -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- Sıralı Liste (Numaralı) -->
<ol>
    <li>Tasarımı planla</li>
    <li>HTML yapısını oluştur</li>
    <li>CSS ile stillendir</li>
    <li>JavaScript ile etkileşim ekle</li>
</ol>

<!-- Tanım Listesi -->
<dl>
    <dt>HTML</dt>
    <dd>Web sayfasının yapısını oluşturan dil</dd>
    <dt>CSS</dt>
    <dd>Web sayfasının görünümünü belirleyen dil</dd>
</dl>

<!-- İç içe liste -->
<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>Python</li>
        </ul>
    </li>
</ul>