HTML Posts

Web Sitesine Görüntü Nasıl Eklenir?

HTML’de sadece yazılarla oluşturulmuş bir site biraz sıkıcı olabilirdi. İnternette sitelere nasıl resimleri eklendiğine beraber bakalım.

HTML dökümanına imaj eklemek için <img> etiketi şu şekilde kullanılır:

<img src="images/ornek1.gif" width="120" height="90" alt="HTML Dog">

src niteliği tarayıcıya görüntüyü nerede bulabileceğini söyler. Tıpkı linklerde kullanılan <a> etiketi gibi bir linki, yukarıdaki gibi bilgisayarınızdan bir dosyayı gösterebilir.

width ve height nitelikleri ise sırasıyla görüntünün genişliğini ve yüksekliğini tanımlar. Bu nitelikleri belirlemeden resim yüklenirse görüntünün tamamını yükleyecektir. Yazdığınızda ise istenilen boyutlarda sonuç verir.

alt niteliği ise sitenize giren kullanıcılar için görüntünüzün tanımını verir ve görme engelli kullanıcılar için de okuyucu programlar sayesinde imajın tanımını verir.

  • <img> etiketi bir içeriği çevrelemediği için kapatma etiketine de ihtiyaç yoktur.
  • Web sitelerinde kullanılan görüntüler genelde JPEG, PNG veya GIF formatındadır. PNG en yüksek kaliteye ve sıkıştırma oranına sahiptir ancak bazı eski tarayıcılar tarafından desteklenmeyebilir. JPEG daha çok fotoğraf gibi görüntülerde kullanılır. GIF ise az renk seçeneği nedeniyle düşük boyutludur ve kalitesi de düşüktür.
  • Kullanıcılar web sitelerini her zaman daha hızlı kullanmak isterler ve ultra yüksek çözünürlükler hızı yavaşlatır. Görüntüleri web sitenize yüklerken en uygun kalite ve hız dengesini yakalamaya çalışmanız en uygunu olacaktır.

 

HTML’de Linkler

HTML’de ilk H ve T harfleri Hypertext’in kısaltmasıdır. Hypertext ise linklerden oluşmuş metin anlamına gelmektedir. HTML de linkleri kullanarak yazılan web sayfaları için tasarlanmıştır. İnternetin birbirine bağlı yapısı da linklerden gelmekte olduğu için linkler bulunmayan bir web sitesi düşünülemez. Şimdi web sitenize linkleri nasıl yerleştireceğinizi beraber inceleyelim.

Çapa(anchor) etiketi de denen link etiketi <a> ile belirlenir ve linkin adresi de bu etiket içine yazılır.

<!DOCTYPE html>
<html>

<head>
    <title>İlk Sayfam</title>
</head>

<body>

    <h1>Bu benim ilk web sayfam</h1>

    <h2>Bu site neden yapılmıştır?</h2>
    <p>HTML öğrenmek için</p>

    <h2>Where to find the tutorial</h2>
    <p><a href="http://www.vidobu.com">Vidobu</a></p>

</body>

</html>

Linkin adresi “href” niteliği kullanılarak belirlenmiştir. Link örnekteki gibi tamamen farklı olabileceği gibi sayfanıza bağlı da olabilir.

Örnek dosyanızla aynı klasörde bir başka .hmtl dosyasını aşağıdaki gibi ekleyebilirsiniz.

 <a href="ogrendiklerim.html">HTML'de neler öğrendim?</a>

Aynı zamanda aynı sayfa içindeki başlıklara da link verebilirsiniz. Bunun için öncelikle başlığa “id” niteliği kimlik oluşturmanız gereklidir. Sonra başına kare(#) koyarak kimlikle link verebilirsiniz.

<h2 id="baslik2">HTML'de Başlıklar</h2>
<a href="#baslik2">Başlıklar için tıklayınız.</a>

HTML ile Listeler Oluşturmak

Web sayfanızdaki metinleri düzenlemede listeler önemlidir. HTML ile üç farklı tip liste oluşturabilirsiniz:

  • Sırasız liste
  • Sıralı liste
  • Tanım listesi

İlk iki listeyi bu yazıda inceleyeceğiz. Tanım listelerini öğrenmek için o bölüme geçebilirsiniz.

Sıralı ve sırasız listeler tamamen aynı şekilde çalışır. Ancak sırasız listelerde “nokta” gibi elemanlarla maddeler gösterilirken, sıralı listelerde sayılar veya harfler kullanılır.

<ul> etiketi sırasız listeler(unordered list), <ol> etiketi ise sıralı listeler(ordered list) için kullanılır. Her iki listenin içindeki maddeler <li> etiketi içine yazılır.

Sırasız Liste

Aşağıdaki kod ile sırasız liste hazırlayalım.

<!DOCTYPE html>

<html>

<head>
    <title>İlk sayfam.</title>
</head>

<body>
    <h1>Bu benim ilk web sayfam.</h1>

    <h2>Ne için yapılmıştır?</h2>
    <ul>
        <li>HTML öğrenmek için</li>
        <li>Öğrendiklerimi göstermek için</li>
        <li>Bilgisayarımda HTML'in nasıl çalıştığını görmek için</li>
    </ul>

</body>

</html>

İşte sırasız listemizi gerçekleştirdik. Şimdi bir de sıralı liste ekleyelim. Listeler bölümünü aşağıdaki gibi değiştirelim:

<ul>
    <li>HTML öğrenmek için</li>
    <li>Öğrendiklerimi göstermek için
        <ol>
            <li>Patronuma</li>
            <li>Arkadaşlarıma</li>
            <li>Kedime</li>
        </ol>
    </li>
    <li>Bilgisayarımda HTML'in nasıl çalıştığını görmek için</li>
</ul>

İşte sırasız bir liste içinde sıralı listeyi hazırladık.

HTML’de Başlıklar ve Metin Düzenleme

Bir önceki yazımızda <p> etiketiyle paragrafları oluşturmaya değinmiştik. Şimdi de metin düzenlemeye başlıklarla devam edelim.

Başlıkların büyüklükleri ve önem sırasına göre 6 farklı başlığımız var. h1, h2, h3, h4, h5 ve h6 etiketleri ile başlıkları sıralayabilirsiniz. h1 en fazla öneme ve h6 en az öneme sahiptir.

Bir önceki örneğe şimdi de başlıklar ekleyip değiştirelim:

<!DOCTYPE html>
<html>

<head>
    <title>İlk Sayfam</title>
</head>

<body>
    <h1>Bu benim ilk web sayfam.</h1>

    <h2>Sayfada neler var?</h2>
    <p>Basit HTML kodları ile oluşturulmuş basit bir web sitesi.</p>

    <h3>Neden yapılmıştır?</h3>
    <p>HTML öğrenmek için yapılmıştır.</p>
</body>

</html>
  •  <h1> etiketinin her sayfada yalnızca bir kez kullanılması sayfa yapısı açısından önemlidir.
  • Başlıkları yazıların vurgusunu arttırmak için kullanmayın. Başlıklar arama motorları açısından önemlidir.

 

HTML’de Sayfa Başlıklarını Oluşturmak

Bütün HTML sayfalarının bir başlığı bulunmalı. Siz de örnek sayfanıza başlık eklemek için yazdığınız kodları aşağıdaki gibi düzenleyin:

<!DOCTYPE html>
<html>

<head>
    <title>İlk Sayfam</title>
</head>

<body>
    Bu benim ilk web sayfam.
</body>
</html>

 

Yukarıda sayfamıza head ve title etiketlerini kullanarak iki element ekledik (ve ikisini de kapattık).

  • Head elemanına( <head> ile başlayıp</head> ile bitiyor)  sayfa başlığı denir ve ana ögeden(<body>ile başlayıp </body> ile bitiyor) önce yerleştirilmiştir ve sayfa hakkında bilgi taşır. Sayfa başlığı tarayıcıda görülmez ancak tarayıcının üst kısmında sayfanızı tanımlayacak şekilde bulunur. Ayrıca sayfayı sık kullanılanlara eklerseniz orada da sayfanızın adı “İlk Sayfam” olarak görülecektir.