1123

Komple Uygulamalı Web Geliştirme Eğitimi | 2019

Html Yapısına Uygun Web Sayfası

Html Yapısına uygun web sayfasını nasıl oluştururuz ? Html 5 standartlarına uygun ilk web sayfa tasarımımız.


Html dökümanlarının en genel etiketi <hmtl> etiketidir.Dolayısıyla bütün içeriğimiz bu etiket içine gelmelidir.

<html>

      Burada 2 genel alt etiket daha tanımlıyoruz.(head ve body)

</html>

** Etiket tanımlamalarının aynı hizaya gelmesi önemlidir. <html> etiketlerinin aynı hizada ve html etiketinin 2 alt öğesi olan head ve body etiketinin ise aynı hizada tanımlandığına dikkat edelim.

<html>       
      <head> 
     
      </head>

      <body>

      </body>   

</html>

head  etiketlerinin  bazı alt etiketleri ise şu şekildedir ;

<html>

      <head>

            Burada sayfamızı tanımlayan açıklamalar yer almalıdır.Örneğin;

            **sayfa başlığı (title),

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

            **sayfanın arama motorlarında bulunması için gereken sayfa açıklaması ve anahtar kelime tanımlamaları (meta etiketleri), 

              <meta name="description" content="Sadık Turan' ın hazırladığı kurslar">
              <meta name="keywords" content="HTML,CSS,XML,JavaScript">
           
            **sayfa stil (css) tanımlamaları (yazı fontu,arkaplan rengi gibi...)    
 
              <style> 

                   body
                   {
                       background-color:red;  // sayfa zemini kırmızı olur.body sayfanın genelini temsil ettiği için.
                   }  

              </style>     
            
      </head>

      <body>

            Sayfa üzerinde gördüğümüz her öğe burada tanımlanmalıdır.

      </body>

</html>

 

Html5 Meta Etiketleri ;

meta etiketleri html dökümanı ile alakalı tanımlayıcı bilgileri içeriyor. Örneğin ; sayfanın hangi konu ile alakalı olduğunu, hangi anahtar kelimeler kullanılarak ulaşılabileceği gibi bilgileri arama motorlarına bildirir.

 

En çok kullanılan bazı meta etiketleri;

<head>
  <meta charset="UTF-8">
  <meta name="title" content="Yazılım Eğitimleri" />
  <meta name="description" content="En kaliteli yazılım eğitimleri ile zaman kaybetmeden bir adım öne geçin.">
  <meta name="keywords" content="HTML,CSS,Asp.Net,Javascript">
  <meta name="author" content="Sadık Turan">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="refresh" content="30">
</head>

charset="UTF-8" : Sayfanın tanıyacağı karakter kodlama türünü belirtir. Bu karakter kodlarını aşağıdaki linkten kontrol edebilirsiniz.Eğer kullanılmazsa tanınmayan karakter gösteriminde sorun çıkabilir.

https://www.w3schools.com/charsets/ref_html_utf8.asp

 

title: Site adı olarak belirttiğiniz bu meta kodu arama motorlarının sitenizin adını kolay bulması için yardımcı olmaktadır.Tarayıcının sol üstünde görünen isimdir.

<meta name="title" content="Yazılım Eğitimleri" />

 

description : Sayfa hakkında açıklayıcı bilgi. Genelde açıklayıcı ve anahtar kelime içeren özet bir cümle olması beklenir. Çok uzun açıklama girmek negatif bir duruma neden olur.

<meta name="description" content="En kaliteli yazılım eğitimleri ile zaman kaybetmeden bir adım öne geçin.">

 

keywords :  Sitenizin arama motorlarında bulunmasına yardımcı olacak olan anahtar kelimelerinizi tanımlayacağınnız alan olan meta keyword içerisinde anahtar kelimelerinizden 1-4 tanesini belirtebilirsiniz.

<meta name="keywords" content="HTML,CSS,Asp.Net,Javascript">

 

author : Yazar bilgisi.

<meta name="author" content="Sadık Turan">

 

viewport : Sayfanızın tüm cihazlarda sorunsuz görünmesiyle alakalı bilgi. Responsive Design bölümünde bu konuyu anlatmaktayım.

Aşağıdaki meta etiketinin her html sayfanıza eklemenizi tavsiye ederim.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

Dersi izlemek için aşağıdaki linki takip ediniz.

https://www.udemy.com/komple-web-developer-kursu/learn/v4/t/lecture/8525640

 

refresh : Sayfanızın belli bir saniyede yenilenmesini istiyorsanız refresh meta etiketini kullanabilirsiniz.Aşağıdaki meta etiketiyle sayfamız her 30 saniyede bir yeniden yüklenecektir.

<meta http-equiv="refresh" content="30">

 

Meta etiketlerini tanımlamamızdaki en büyük neden sayfamızın arama motorlarına iyi gözükmesidir. Ve bazı seo tavsiyeleri için aşağıdaki linki takip etmenizde fayda var.

https://www.seohocasi.com/seo-meta-tag/

Paylaş