ile

HTML etiketlerini tanımaya devam edelim ve basit bir şirket sayfası yapalım

Daha önceden PHP’nin sunucu üzerinde çalıştığından bahsetmiştik. PHP’nin en güzel avantajlarından bir tanesi, kullanıcıdan aldığı bilgiyi işleyebilmesi. Burada PHP’nin icat edilme amacı da ortaya çıkıyor. PHP’nin HTML’den en büyük farkı, HTML statik yani, basılı kağıt gibi tek taraflı bilgiyi sunmaya yarayan bir teknoloji olması. Mesela bir siteye kayıt olmak, bir fotoğraf paylaşmak, tweet atmak gibi etkileşimli işleri yaparken ise PHP gibi sunucu tarafında çalışan bir programa ihtiyacımız var.

Ama önce gelin HTML etiketlerini tanımaya devam edelim. İlk önce öğrenmemiz gereken en önemli etiket <div> etiketi.

Div etiketi HTML sayfaları yaratırken kullanacağımız bir ingiliz anahtarı gibi. İngilizce “division” yani “bölüm” anlamına geliyor. Şimdi tipik bir html sayfasını düşünelim. En basit şekilde sayfamızda olması gerekenler neler, onları sırayla görelim. Mesela şirketimiz için bir sayfa yapmak istediğimizi hayal edelim. 2013 itibariyle tüm şirketler için zorunlu değil mi? Sayfamızda neler olmalı, şöyle bir bakalım:

  1. Şirketimizin adı
  2. Adresi (iletişim bilgileri) (Bize ulaşın)
  3. Ürün veya Servislerimiz
  4. Haberler, Duyurular, İlanlar
  5. Hakkımızda
  6. Kurumsal bilgiler (Mesela artık yeni yasaya göre finansal tabloların da buraya eklenmesi gerekiyor değil mi?)

Düşüncemizi biraz daha geliştirelim. En basitten adım adım ilerleyeceğiz. Her şirket veya organizasyonun bir logo’su da olması gerekir. Düşünmeye devam edelim. Sayfamızı hazırladıktan sonra Google gibi arama motorlarının bize ulaşmaları için anahtar kelimelere de ihtiyacımız var. Burada bir konuya değinmek istiyorum. Piyasada SEO adı altında faaliyet gösteren birçok şirket var. Bu şirketler websitenizi Google’da üst sıralara taşıma garantisi veriyorlar. İşini iyi yapan firmalar var mıdır bilmiyorum, ancak bazı firmalar, kendi kurdukları diğer sitelerden sizin sitenize sahte link vererek Google’ın algoritmasını aldatma yoluna gidiyorlar. İlk zamanlar siteniz gerçekten üst sıralara yükseliyor. Ancak Google bunu farkettiği anda siteniz aşşağı sıralara düşüyor ve ödediğiniz para da boşa gidiyor. Benim bu konudaki birkaç tavsiyem olacak. Eğer Google gibi arama motorlarında hakettiğiniz sırayı almak istiyorsanız, herşeyden önce;

  1. Asla flash kullanmayın. Google flash ile kodlanan sayfaları indexlemiyor.
  2. Sitenizde giriş sayfası, hoşgeldin videosu, müzik gibi şeyler kullanmayın. Arama motorlarının da internet kullanıcılarının da bunlar için vakti çok kısıtlı.
  3. En önemlisi doğru anahtar kelimeler kullanın. Her anahtar kelimeyi eklemeyin. Sadece ilgili olanları cimrice kullanın.
  4. Bir de kodunuz temiz olsun. Yani açılan tüm etiketler kapanmış, javascript kullanıyorsanız hatasız ve test edilmiş olsun.
  5. Aşırı büyük boyutlu grafikler, dosyalar kullanmayın. Bunlar hem sitenizin okunurluğunu erişilebilirliğini azaltır hem de yüklenme süresini artırarak hem arama motorlarını hem de kullanıcıları kaçırır. Bir sayfa en fazla 1 saniyede yüklenmeli.
  6. Bir de paranızı her SEO’cuyum diyene kaptırmayın 🙂

Şimdilik görünümü bir tarafa bırakalım. Buna CSS kısmında tekrar geri döneceğiz. Şirketimizin adı: Kızılyıldız Matbaacılık A.Ş. olsun. Logo’su da belli 🙂 Basit olması açısından ürünlerimiz de Davetiye, Ajanda, Poster ve El ilanı olsun.

Ana sayfamızı yaparak işe başlayalım.

<!DOCTYPE html>
<html>
  <head>
    <title>Kızılyıldız Matbaacılık A.Ş.</title>
  </head>
  <body>
      <!-- Buraya içeriklerimizi ekleyeceğiz -->
  </body>
</html>

Bir şeye dikkat ettiniz mi? Web tarayıcısı <!–  –> karakterlerin arasındaki içeriği görmezden geliyor. Nasıl ki PHP’de yorumları //, /* */ veya # ile yapıyorduk, HTML’de du bu şekilde yapıyoruz.

Şimdi anasayfamızda olmasını istediğimiz bölümlere karar verelim.

  1. Logo
  2. Şirket Adı
  3. Adres, Telefon ve E-posta adresi
  4. Bölümler arasında gezinmemizi sağlayacak bağlantılar
  5. Şirket hakkında kısa bilgi

Şimdi de bu bilgileri nasıl sınıflandıracağımıza karar verelim, neyse ki genellikle her internet sayfası için olan genel bir şablon var. Şöyle ki;

  1. Tüm sayfalarda aynı olacak bir baş ksım olmalı. Sonuçta logo, iletişim bilgileri ve sayfalar arasındaki bağlantılar her sayfada aynı olacak. (header)
  2. Her sayfadaki farklı içeriği ekleyeceğimiz bir içerik kısmı olmalı. (content)
  3. En sonda da sayfanın en altında yer alacak, yine her sayfada aynı olacak, en son olarak vermek istediğimiz bilgileri yazacağımız bir bölüm olmalı. Burada da bazı bağlantılar, kullanım kuralları, gizlilik sözleşmesi, copyright gibi bilgiler olur. Buna da altbilgi diyoruz. (footer)

Ana sayfada şirketimiz hakkında kısa bir bilgi verelim. Görünür bir yerde adres ve telefonlarımız olsun ki en çabuk erişilen bilgi bu olsun. Yukarıda saydığımız bölümlere de gitmemiz gerekiyor ayrıca. Bunun için bağlantılarımızı da ekleyeceğiz.

Şimdi gelelim sihirli etiketimizi kullanmaya. Tüm bu bölümler için <div> etiketini kullanabiliriz. <div> etiketinin name ve id özelliklerini değiştireceğiz ve onlara isim vererek bölümlerimizi oluşturacağız.

<!DOCTYPE html>
<html>
  <head>
    <title>Kızılyıldız Matbaacılık A.Ş.</title>
  </head>
  <body>
      <div id="sayfa">
          <div name="ustbilgi">
              <div name="logo"></div>
              <h1>Kızılyıldız Matbaacılık A.Ş.</h1>
              <div name="baglantilar"></div>
          </div>
          <div name="adres"></div>
          <div name="icerik">
          </div>
          <div name="altbilgi">
          </div>
      </div>
  </body>
</html>

Aşağı yukarı yapımızı oluşturduk gibi. Şimdi içlerini doldurmaya başlayacağız. Öncelikle meta yani ekbilgilerle işe başlayalım. Bildiğimiz gibi arama motorlarının sitemizi tanıması için anahtar kelimelere ihtiyacımız vardı. Bu kelimeleri cimrice seçmemiz gerekiyordu. 10-15 tane yeterli. Gelelim bunları tek tek seçmeye.

Anahtar kelimelerimiz:

  • Kızılyıldız
  • kızıl
  • yıldız
  • Matbaa
  • Baskı
  • Ajanda
  • Davetiye
  • Poster
  • İlan
  • İstanbul
  • Sirkeci

Olsun. Gelelim bunları sitemize yerleştirmeye. Dediğimiz gibi bunlar head etiketinin içinde yer alacak. Bir diğer üstbilgi de sitemiz hakkında kısa bir açıklama olsun. Hani arama motorlarının altında çıkan yazılardan. Bunlar da çok uzun olmasın, zaten Google kesiyor.

“Kızılyıldız İstanbul, Sirkeci’de faaliyet göstermekte olan tasarıma önem veren yenilikçi matbaa şirketi. Başlıca ürünlerimiz: Davetiye, Ajanda, Poster ve El ilanı”

Şimdi sıra geldi bunları birleştirmeye.


<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="Kızılyıldız İstanbul, Sirkeci'de faaliyet göstermekte olan tasarıma önem veren yenilikçi matbaa şirketi. Başlıca ürünlerimiz: Davetiye, Ajanda, Poster ve El ilanı"/>
<meta name="keywords" content="kızılyıldız, kızıl, yıldız, matbaa, baskı, ajanda, davetiye, poster, ilan, istanbul, sirkeci"/>

İlk önce tanımladığımız etiket, tarayıcıya belgemizin türünün ne olduğunu söylüyor, burada html şeklinde metin göndereceğimizi ve türkçe karakterlerimizi “UTF-8” ile kodlayacağımızı belirttik. Daha önce bazı php örneklerimizde Türkçe karakterlerimiz bozuk çıkmıştı hatırlarsanız. İşte bu etiket sayesinde, Türkçe karakter sorununu oratadan kaldırıyoruz. Ben genellikle karakterlerde UTF-8 tercih ediyorum. Evrensel ve genel bir kodlama standardı. Siz de bunu tercih ederseniz karakter konusunda sorun yaşamazsınız.

Dikkat edersek meta etiketlerini kapatmadık ve bunun yerine /> gibi bir ifade kullandık. Bazı etiketlerde mantıken böyle bir kullanım mevcut. Herhangi bir bilgiyi sarıp sarmalamayan etiketlerde bu yöntemi kullanıyoruz.

Anahtar kelimelerimiz ve açıklamamızı halletikten sonra üs bilgide yer alan diğer bir etiketi inceleyelim
<h1>etiketi başlık anlamına gelir, başlıkların büyüklüğüne göre h1, h2, h3, h4, h5, h6 ya kadar başlık ekleyebilmemize olanak sağlar.
Şu ana kadar sayfamızın tarayıcıyla ve arama motorlarıyla güzel güzel anlaşmasını sağladık. Bundan sonra da içeriklerimizi eklemeye devam edeceğiz.

Dayanışmayla!
Merakli Bilişimci

Yorumla

Yorum