Header Ads

Halk Eğitimi Merkezi Bilgisayar Kursları

Html ile Web İşlemleri 2 - HTML5 Belge Yapısı

Şubat 02, 2023 0

HTML5 Belge Yapısı

HTML komutları, tek satırda veya birden fazla satırda alt alta yazılabilir. Okunabilirliği artırmak
için iç içe ve girintili yazılır.

Aşağıda HTML etiketlerinde tek satırda yazılarak oluşturulmuş HTML belgesi yapısı vardır.

<!-- Tek Satırda oluşturulmuş HTML Belgesi -->
<!DOCTYPE html>
<html><head></head><body></body></html>

Aşağıda HTML etiketlerinde alt alta yazılarak oluşturulmuş HTML belgesi yapısı vardır.

<!-- Satır Satır alt alta oluşturulmuş HTML Belgesi -->

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Tek satır veya birden fazla satırda alt alta yazılmış olan HTML belgesi kodları, tarayıcı tarafından aynı şekilde yorumlanır. Programlama yapan açısından ise okunabilirliği değişir.

Aşağıdaki HTML etiketlerinde iç içe girintili yazılarak oluşturulmuş HTML belgesi yapısı vardır.

<!DOCTYPE html>
<HTML lang="tr">
<head>
<meta charset="utf-8" />
<title>MERHABA HTML DÜNYASI</title>
</head>
<body>
<!—Merhaba HTML Dünyası-->
<p> Merhaba HTML Dünyası</p>
</body>
</html>

Gelişmiş web tasarım editörleri ile anlamlı HTML kodları daha hızlı ve düzenli bir şekilde yazılır. HTML kod yapısı genel standartlara uygun ve okunabilir olmalıdır.

HTML kodları tek satırda yazıldığında tarayıcı düzgün bir şekilde yorumlar fakat okunabilirliği düşüktür ve standartlara uygun değildir. Kod yazımında hata yapıldığında tespit etmek zordur. Farklı kişiler tarafından kod incelendiğinde anlaşılması güçtür. HTML5 belgesi oluşturmak için gelişmiş özelliklere sahip ücretsiz veya ücretli HTML editörleri yerine, basit metin düzenleme programları da kullanılabilir (Görsel 3.6).

Görsel 3.6: Metin düzenleme programı ile HTML

Metin düzenleme programı ile yazılan kodları HTML belgesi olarak kaydetmek için Dosya menüsünden Farklı Kaydet komutu tıklanır. Açılan pencereden sırasıyla Dosya adı ve Kayıt türü seçilir (Görsel 3.7).

Görsel 3.7: HTML belgesini kaydetme

HTML belgelerine isim verilirken dikkat edilmesi gereken kurallar şunlardır:
• Dosya adlarında büyük harf yerine küçük harf kullanmak ve bağlantı (köprü) oluşturmak daha
kolaydır.
• Türkçe karakter (ç, ğ, ı, ö, ü) kullanılmamalıdır. Yerel (local) sunucuda Türkçe karakter kullanmak
HTML belgesinin çalışmasına engel teşkil etmese de internet ortamında sunucuya yüklendiğinde
dosyalar görüntülenmez. Bu durum dosyalar ile düzgün bağlantı kurulmasına engel olur.
• Sayfa içeriğine uygun isim verilmelidir. Hakkımda bilgilerinin yer aldığı HTML belgesine “dosya01.
html” gibi isim vermek yerine “hakkimda.html” gibi içerikle ilgili isim vermek bağlantı linklerini
yazmayı ve bağlantı kurmayı kolaylaştırır.
• Dosya adlarında “boşluk” karakteri kullanılmamalıdır. Dosya adında boşluk karakteri kullanıldığında
dosya ile oluşturulan bağlantılar çalışmaz.
• Dosya isimlerinde birden fazla kelime kullanıldığında aralarında “_ (alt çizgi)” yerine “- (tire)”
kullanılmalıdır. İkisi de kullanılabilir fakat arama motorları tire karakterini daha kolay yorumlar.
Dosya isimlerinin yukarıdaki kurallara dikkat edilerek oluşturulması, arama motorlarında web
sitesinin doğru indekslenmesini sağlar.







Modüler Sistem

2.1.2. <HEAD> Etiketi

Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketleri bölümdür.

Meta etiketinde kullanılan parametreler Tablo 1.1.’de gösterilmiştir.


Tablo 1.1: Meta etiketinde kullanılan parametreler

NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi bilgileri içerir. Kullanımı aşağıdaki gibidir:

  • <meta name="author" content="özgü">
  • <meta name="description" content="sayfanın tanımını yazınız">
  • <meta name ="description" content ="Bu sayfa web tasarımı dersi modülleri için hazırlanmıştır. ">
  • <meta name="keywords" content="siteniz arama motorlarında hangi anahtar kelimelerle tanımlansın istiyorsanız buraya yazınız.">

HTTP-EQUIV: İçinde yer aldığı sayfanın, web server tarafından ziyaretçiye gönderilmesinde oluşturulacak karşılık başlığı bölümünde yer alacak bilgiler içerir.

Sıklıkla kullanılan meta etiketleri ve açıklamaları:

  • <meta http-equiv=Content-Type content="text/htm; charset=windows-1254">
  • <meta http-equiv=Content-Type content="text/htm; charset=iso-8859-9">
  • <meta http-equiv=Content-Type content="text/htm; charset=utf-8">

Bu etiketler Türkçe karakter sorununu ortadan kaldırmak ve Türkçe karakter desteği sağlamak için kullanılır.

          <meta http-equiv="expires" content ="Tarih">

Güncelleme için kullanılır. İnternette açılan bir sayfa bilgisayara kaydedilir. Bu sayfa tekrar açılamak istendiğinde, bilgisayardaki kayıtlı sayfa açılır. Bu etiket ile belirtilen tarihten sonra bu sayfa açılmak istenirse sayfanın tekrardan serverdan yüklenmesi sağlanır.

  • <meta http-equiv="expires" content ="Wed, 29 Dec 2011 15:21:59 GMT">
  • <meta http-equiv="refresh" content="5; url=anasayfa.htm">

Sayfanın belirtilen süre sonra yenilenmesini sağlar. Yukarıdaki örnekte sayfa 5 saniye sonra yenilenir ve URL de belirtilen anasayfa.htm sayfası açılır. Eğer URL boş bırakılırsa aynı sayfa tekrarlanır.

          <meta name="robots" content="all veya none">

Hazırladığımız sayfanın arama motorlarının robotları tarafından taranmasına izin vermek veya engellemek için kullanılır. İzin için all, engelleme için none kullanılır.

Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından görüntülenmez

2.1.4. <TITLE>

Sayfanın tarayıcıdaki başlığının ne olacağını belirlemek için kullanılır. Title etiketleri <Head>….</Head> etiketleri arasında yer alır.

Kullanımı:

<title> görüntülenmesini istediğiniz başlık</title>

Örnek:

Şekil 1.2: Title etiketinin kullanılması

Tags:

Hiç yorum yok

Kaydol: Kayıt Yorumları ( Atom )
Blogger tarafından desteklenmektedir.