Etiketler 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 Tag, Attribute ve Element

HTML her ne kadar sadece metinden oluşsa ve sadece içerik girmek için kullanılsa da girdiğimiz içeriklerle ilgili basit görsel düzenlemeler yapmamıza da olanak tanır. Aşağıdaki komutlarla bu düzenlemelere başlayabilirsiniz.

1. Tag (Etiketler)

HTML dökümanlarının en basit yapısı olan etiketler, içeriklerinizin başında ve sonunda bulunur ve onlara anlam katmaya yarar.

Bir önceki sayfada oluşturduğunuz ilk web sayfanızı aşağıdaki gibi değiştirin:

<!DOCTYPE html>
<html>
<body>
    This is my first web page
</body>
</html>

Şimdi dökümanı kaydedin ve tarayıcıdaki HTML dökümanını yenileyin.

Sayfanızın görünümüyle ilgili hiçbir değişiklik olmadı ama zaten HTML’in amacı görünüm değil içerik katmaktı ve bu eklediklerimizle ilk sayfanız web sayfalarının temel özelliklerine kavuşmuş oldu.

<!DOCTYPE html> satırı, döküman tipi deklarasyonu olarak adlandırılır ve tarayıcıya HTML’in hangi versiyonunu kullandığınızı anlatır (HTML5 de olabilir). Eğer bu satırı yazmazsanız tarayıcı ne açtığınızı anlamayacak ve tuhaf sonuçlar verecektir.

<html> satırı, dosyanın açılış etiketi olarak ifade edilir. Tarayıcıya kapanış etiketi </html>‘ne kadar ki yazıların HTML dökümanı olduğunu anlatır.

<body> ve </body> arasında kalan kısım ise tarayıcıda görülen ana içeriktir.

  • Her etiketin kapama etiketi olmayabilir.
  • İçeriğin başında bulunan bütün etiketlerin kapatma etiketi de olmalıdır.

2. Nitelikler (Attributes)

Etiketler aynı zamanda bazı nitelikler de taşıyabilir. Nitelikler açılış etiketinde, tırnak işareti içinde yazılır.

<tag attribute="value">Margarine</tag>

Daha detaylı olarak ilerleyen bölümlerde nitelikleri inceleyeceğiz.

  • Her ne kadar tırnak işaretleri olmazsa olmaz değillerse de, hem pratik yapmanız hem de tutarlı ve temiz bir kodlama için gereklidir.

3. Ögeler (Elements)

Etiketler ögelerin başında ve sonunda bulunur. Elementler(ögeler) ise sitenizin görünen kısmıdır. Örneğin <body> ve </body> yazıları ve arasında bulunan içerik “body” yani ana öge olarak adlandırılır. Yine aynı şekilde “<title>” ve “</title>” etiketlerini kullanarak oluşturulan “<title>Rumple Stiltskin</title>” başlığı başlık elementi (ögesi) olarak adlandırılır.