Hangi yazılımı kullanırsanız kullanın eğer bir web sitesi sahibi iseniz HTML kodlarıyla içli dışlı olmanız gerekiyor. İster hazır bir script kullanın, ister wordpress yada kendi statik HTML web siteniz olsun. Her halükarda yapacağınız değişilikler de HTML kullanacaksınız. Bu yüzden eğer SEO ile ilgileniyorsanız en az orta seviyede HTML bilgisi sahibi olmanız gerekiyor.
Makalemizi okuduğunuz da basit işlemleri kendiniz yapabiliyor ve istediğiniz kodları / eklentileri sitenize ekleyebiliyor olacaksınız. Peki bunun SEO ile ne ilgisi olduğunu düşünüyorsanız size bir kaç örnek vereyim; web sitenize Adsense reklam kodlarını, Analytics istatistik kodlarını, sosyal medyalar için og taglarını kullanırken, sitenizi Google Search Console‘a tanıtırken HTML kodları eklersiniz ve bunları doğru bir şekilde eklemezseniz hiç bir verim alamazsınız.
HTML Nedir?
Açılımı “Hiper Metin İşaretleme Dili” olan HTML çalıştırılması için herhangi bir derleyiciye ihtiyaç duymaz. İstediğiniz tüm metin editörlerini kullanarak HTML kodlarınızı yazabilirsiniz. (Pratik ve daha kullanışlı kod yazabilmeniz için önerdiğimiz editörleri sizlerle paylaşacağız.) HTML kodları tarayıcılar tarafından (Chrome, Firefox vb.) yorumlanır ve tarayıcı ekranına görsel bir çıktı sunar. HTML tek başına web sitesi yapmak için yeterli bir dil değildir. HTML ile yapacağınız siteler dinamik değil statik siteler olacaktır. Dinamik sistem dediğimiz ise basitçe yönetim paneli olan, yeni yazılar paylaşacabileceğiniz bir sistemdir yani kısacası kodlar ile uğraşmadan arayüz aracılığı ile sitenizi güncellemenizi sağlar. Fakat statik sitelerde yapacağınız her değişiklik için kodlarla oynamanız her yeni sayfa için yeni dosyalar oluşturmanız gerekir.
HTML’i bir iskelet sistemi gibi düşünebiliriz. HTML kodları kullanarak hazırladığımız iskeleti diğer diller ile geliştiririz ve bir vücut haline getiririz.
HTML ile bağlantılı diller:
- CSS: HTML ile ayrıştıramayacağımız dildir. Oluşturduğumuz kodlara görsellik katmak için kullanılır. İnternetteki sitelerin hepsinde CSS kullanılmaktadır. Verdiğimiz iskelet örneği için CSS ise vücudun dış görünümünü oluşturur. (Gözler, saçlar, ten vb.)
- Javascript, jQuery: Sitemizi anlık olarak güncellememizi sağlar. Yani hareketli işlemleri yapabiliriz. Örneğin bir butona tıkladığımızda bir baloncuk çıkması yada menü işaretine tıkladığımızda kayarak menü açılması gibi olaylar. Tabiki sadece bunlar değil Javascript ve jQuery kullanılarak çok gelişmiş uygulamalar yapılmaktadır. Ayrıca belirttiğimiz jQuery bir dil değil Javascript’in bir kütüphanesidir.
- PHP, ASP: İnternet sitemizi dinamikleştirebilmemiz için gerekli dillerdir. Fakat 2’sini birden değil bir tanesini seçerek onu kullanılırız. Peki farkı ne diye soracak olursanız PHP açık kaynaklıdır ve Linux işletim sistemine sahip sunucularda çalışır, ASP ise Windows sunucularda çalışır. Bunun karşılaştırması çok uzun bir konu olduğundan pek detaya girmeden belirtmek isterim şahsi tavsiyem PHP’dir. Sitemizi dinamikleştirmekten kastımız üyelik sistemi, online ödeme, yönetim paneli gibi sistemleri yapmak için gereklidir.
HTML’i Tanıyalım
HTML kodlarında en fazla kullanacağımız karakterler küçüktür (<), büyüktür (>) ve çift tırnak (“) olacaktır. Açacağımız etiketler (bazıları hariç) kapatılmalıdır ve bir düzen içinde olması sağlanmalıdır. Kodları açtıktan sonra kapatıp eğer içine başka kod yazacaksak onları açıp kapattığımız yerin içine yazmalıyız. Kısacası hiyerarşik bir yapı içinde kod düzeni sağlanmalıdır.
Örneğin:
<p> Bu bir paragraftır ve buda <strong> kalın </strong> bir yazı. </p>
Gördüğünüz gibi bir paragraf nesnesi <p> açtık ve </p> şeklinde tekrar kapattık. Bu açtığımız ve kapattığımız etiketler arasında kalan tüm kodlar p özelliğine dahil olmuş oldu. Kalın yazısı ise <strong> içinde hemde <p> içinde olduğundan hem paragraf hemde kalın yazı biçimine dahil oldu.
Şablon
HTML sayfalarını oluştururken belli bir şablona uymamız gerekir. Önce şablonu görelim ve sonrasında hangi kodun ne işe yaradığını inceleyelim.
<!DOCTYPE html> <html> <head> <title>Başlık</title> </head> <body> İçerik </body> </html>
Kodları inceleyelim:
- <!DOCTYPE html> kodu her sayfanın başlangıcında bulunur ve HTML 5 sürümünü kullandığımızı belirtir. En güncel sürüm 5 olduğundan dolayı bunu kullanıyoruz.
- <html> kodu sayfamızdaki kodların html kodu olarak yorumlayacağını gösterir. Doctype hariç bütün kodlar html içinde olacaktır fakat html’da head ve body olarak 2’ye ayrılacak.
- <head> kodu içine yazdığımız kodlar sitemizde görünmeyen arka planda yapılan işlemleri gösteren kodlardır. Örneğin buraya sitenin karakter setini, css dosyalarını, sayfa başlığımızı, tarayıcıda gözüken faviconu ekleriz.
- <body> kodu içine sayfamızda görünmesini istediğimiz kodları ekleriz ve bu tarayıcı ekranında yorumlanır.
- <title>Başlık</title> şeklinde eklediğimiz kod ise tarayıcının sekme kısmında gözüken başlıktır.
HTML Kodları
Bu bölümde sizlerle bütün html kodlarını a dan z ye inceleyeceğiz ve örneklendirerek açıklayacağız. HTML 5 sürümünün desteğini kaldırdığı kodları görmeyeceğiz. (Örneğin: center)
Yorum satırı (<!– x –>)
Yorum satırı kodlar arasına açıklama yazmak için kullanılır ve tarayıcı tarafından okunmazlar. İleride nerede ne yaptığınızı karıştırmamak için açıklama satırlarını kullanabilirsiniz. Örnek kullanım:
<!-- bu bir açıklamadır ve sitede gözükmeyecektir. -->
A (Bağlantı)
Site dışına veya site içine başka bir sayfaya yönlendirme yapmak için kullanılır. Sitelerde gördüğünüz genelde mavi altı çizgili yazılar a kullanılarak yapılan bağlantılardır. Köprü olarak da isimlendirilir.
Özellikleri:
- href: Yönlendirme adresi
- title: Bağlantı üstüne gelince çıkan küçük kutudaki metin
Örnek kullanım:
<a href="http://www.google.com/" title="arama motoru">Google'a gitmek için tıklayın</a>
Abbr (Kısaltma)
Kuruluşların veya yerlerin ismi kısaltıldığında kullanılır. Varsayılan olarak kelime altında kesikli çizgi oluşur.
Özellikleri:
title: Kısaltma yapılmadan tam ismi title içine yazılır
Örnek kullanım:
<pre<abbr title=”Türkiye Büyük Millet Meclisi”>TBMM</abbr>
Address (Adres) Sitenize adres eklemesi yaparken kullanabilirsiniz.
Örnek kullanım:
<address>Ankara mah. Yayın cad. Yeni sk. No:7 Kadıköy/İstanbul</address> B (Kalınlaştırma) Metin içinde kalın (bold) yazı yazmak için b veya strong etiketini kullanabilirsiniz. Örnek kullanım:
<b>Bu bir kalın yazıdır.</b>
Blockquote (Alıntı)
Başka birinden yada siteden yaptığınız alıntıları paylaşmak için blockquote tagını kullanabilirsiniz. Eğer bir siteden alıntı yaptıysanız bunun çalıntı durumuna düşmemesi ve referans göstermeniz için cite özelliğini kullanarak alıntı yaptığınız yeri belirtebilirsiniz.
Örnek kullanım:
<blockquote cite="http://www.ataturk.gov.tr"> Hattı müdafa yoktur sathı müdafa vardır. O satıh bütün vatandır. -Mustafa Kemal Atatürk </blockquote>
BR (Yeni Satır)
Alt satıra geçmek için kullanılan tagdır. Diğer taglar dan farklı olarak <br> </br> şeklinde kapatılmaz, bu kullanım yanlıştır. Doğru kullanımı <br /> şeklindedir.
Örnek kullanım:
İlk satır <br> İkinci satır <br> Üçüncü satır <br> <a href="#">4. Link</a>
Button (Buton)
Buton oluşturmak için kullandığımız bir tag’dır. Genellikle formlar ile birlikte kullanılır. Örneğin bir iletişim formunda ad soyad bilgilerini doldurduktan sonra gönder butonunu oluşturabilirsiniz yada bir indirme sitesinde programı indirmek buton oluşturabilirsiniz. Type özelliği ile button şeklinde tekrar bir belirtme yapıyoruz.
Örnek kullanım:
<button type="button"> İndirmek için buraya tıkla </button>
Code (Kod)
Code tagları arasına arasında kod paylaşımı yapabilirsiniz. Burada yazılan yazılar bilgisayar kodu biçiminde görüntülenecektir.
Örnek kullanım:
<code> cd Desktop </code>
Div (Alan)
Div HTML kodları kullanırken en çok karşımıza çıkan etikettir. Kullanım amacı ise kodları gruplandırmaktır. Örneğin sitenizde üst kısım, alt kısım, yan alan, içerik, yorumlar gibi birçok farklı yer bulunur ve bunlar birbirine karışmaması için ve CSS ile daha kolay biçimlendirme yapabilmek için pek çok div kullanmak gerekecektir. Divler iç içe kullanıldığından karmaşık gibi gözükse de eğer düzgün bir biçimde yazarsanız herhangi bir hata ile karşılaşmazsınız. Fakat yanlış yerde div kapatırsanız görüntü iç içe girecektir.
Örnek kullanım:
<div class="site"> <div class="ust"> <img src="logo.png" alt="logo" /> </div> <div class="icerik"> <h1> Başlık </h1> <p> İçerik metni </p> <div> <div class="alt"> <p>Tüm hakları saklıdır.</p> </div> </div>
Gördüğünüz gibi iç içe birçok div açtık ve herhangi bir karmaşıklık olmadı. Burada gördüğünüz class özellikleri ise CSS ile müdahale edebilmek için verdiğimiz ayrı sınıf isimleridir.
Fieldset (Parça)
Fieldset ögesini kullandığınızda içine yazdığınız kodları bir kutu içine almış olursunuz. Bunu çerçevesi olan bir div olarak düşünebilirsiniz.
Örnek kullanım:
<fieldset> <p>Kutumuzun içindeki yazı</p> </fieldset>
Form (Formlar ve girişler)
Form kodu aslında tek bir parça olarak kullanıldığında bir anlam ifade etmez fakat input tagları form içinde kullanıldığında bir ileti göndermemiz mümkün olacaktır.
Bu input değerleri metin, paragraf, sayı, tarih, seçim, onaylama kutusu ve buton gibi nesneler olabilir. Form elemanı action (işlem) ve method (metod) özelliklerini kullanır ve form içinde oluşturduğumuz inputların name (isim) özelliğine bakarak value (değer) lerini belirttiğimiz metod üzerinden işlem yapmasını sağlar.
Örnek olarak bir iletişim formu yapalım. Formumuzda ad soyad, telefon numarası ve mesaj kısımlarını bir buton ile gönderilmesini sağlayalım.
<form action="mail.php" method="post"> <p>İsim ve soy isminiz:</p> <input type="text" name="isim" /> <p>Telefon numaranız:</p> <input type="tel" name="telefon" /> <p>Mesajnız:</p> <textarea name="mesaj"> </textarea> <br /> <input type="submit" value="Gönder" /> </form>
Yukarıdaki örnekte gördüğünüz gibi action olarak mail.php’ye yönlendirdik ve mail gönderme işlemini burada yapacağız. Fakat methot içinde kullandığımız post nedir? 2 çeşit gönderim metodu vardır, bunları inceleyelim:
- POST: Güvenli iletişim sağlar. Tarayıcı URL’si üzerinde herhangi bir parametre gözükmez.
- GET: Güvenlik gerektirmeyen alanlarda ve herkese açık olan parametrelerde kullanılır. GET metodunda gönderilen parametreler tarayıcı URL’si üzerinde görülür ve değiştirebilir. Örneğin biz örneğimizde isim kısmına ali ve telefon kısmına 50 yazdığımız zaman tarayıcıda yönlendirildiğimiz adres şu olacaktır: “mail.php?isim=ali&telefon=50” ve gördüğünüz gibi bunu kolayca değiştirebiliriz.
H1 – H6 (Başlıklar)
Paragraflarımız içinde hiyerarşik bir yapı kurmak için başlıkları kullanırız. Fakat her başlık için yazı büyüklüğü vermek yerine H kullanımı daha mantıklıdır. Büyükten küçüğe doğru sıraladığımızda (h1,h2,h3,h4,h5,h6) 6 adet h başlık kodu bulunmaktadır ve h1 en büyüğü, h6 ise en küçüğüdür.
SEO açısından da h etiketlerinin kullanımı çok önemlidir.
Örnek kullanım:
<h1>Büyük Başlık</h1> <p>Açıklama metni</p> <h2>Alt başlık</h2> <p>İçerik</p> <h3>Altın altındaki 1. başlık</h3> <p>İçerik</p> <h3>Altın altındaki 2. başlık</h3> <p>İçerik</p>
HR (Yatay çizgi)
HR kodunu yatay çizgi çekmek için kullanırız. Kullandığımızda çizgi alt satıra geçer ve o şekilde çizilir kodun devamında ise tekrar bir alt satıra geçmiş olarak devam eder. Kullanımı BR etiketi ile aynıdır tek bir kod içinde açılıp kapatılır.
Örnek kullanım:
<p>Birinci bölüm</p> <hr /> <p>İkinci bölüm</p>
i (Yatay yazı)
İtalic kelimesinin başlangıcından gelen i kodu metin içinde eğimli (yatay) yazı yazmamızı sağlar.
Örnek kullanım:
<p>Bu bir <i>italic</i> kelimedir.</p>
img (Resim)
Sitemize resim eklememizi sağlayan HTML kodumuz dur. Aldığı özellikleri ve kullanımını inceleyelim. Resim kodu da tek bir tag üzerinde açılıp kapatılır ve src içine koyduğunuz adres sadece kendi sitenizde olmak zorunda değildir. Başka bir sitedeki resim linkini koyduğunuzda da resim yüklenecektir.
- src: Resim adresi
- alt: Resim açıklaması
- height: Yükseklik (px ölçüsünde)
- width: Genişlik (px ölçüsünde)
<img src="logo.png" alt="logo" height="90" width="250" />
ul, li, ol (Listeleme)
Listeleme yapmak için kullandığımız kodlardır. Her liste için mutlaka ul tagı açtıktan sonra içine her eleman için li veya ol taglarını yazarak eleman eklememiz gerekir. Fakat li ve ol aynı anda kullanılmamaktadır. Farkları ise li nokta nokta şeklinde bir listeleme yapar, ol ise 1, 2, 3 şeklinde sayısal listeleme yapar.
İnternet sitelerindeki menüler de listeleme ile yapılmaktadır fakat CSS kullanılarak biçimlendirilerek görünüm olarak bir menü haline getirildiği için siz elemanları alt alta yanında nokta olan yazılar olarak değil yan yana görüyorsunuz.
Örnek kullanım:
<ul> <li>1. eleman</li> <li>2. eleman</li> <li>3. eleman</li> </ul> <ul> <ol> eleman</ol> <ol> eleman</ol> <ol> eleman</ol> </ul>
Meta
Meta etiketleri doğrulama ve sistem ile ilgili bilgilendirme yapmak için kullanılır. Meta etikini <head></head> tagları arasında kullanmamız gerekir. Örnek olarak sitenizi Google Search Console’a kayıt ederken size doğrulama yapmak için bir meta kodu verir ve bunu sitenize ekleyerek erişim sahibi olduğunuzu kanıtlamış olursunuz.
Sadece doğrulama değil tarayıcıya bazı bilgileri vermek içinde meta kodu kullanılır. Örneğin sitenizde hangi kodlama biçimini kullandığınızı meta kodu ile belirtisiniz. Eğer bu şekilde ekleme yapmazsanız Türkçe karakterler ? şeklinde görüne bilmektedir.
Örnek kullanım:
<meta charset="UTF-8" />
Select, Option (Seçim)
Select ve option 2 ayrı kod fakat bağlantılı oldukları için tek bir bölümde anlatıyoruz. Seçim yapmak için kullandığımız html elemanımızdır. Örnek olarak cinsiyet seçin şeklinde bir seçim kutusu yapabiliriz. Kullanım şekli ise her alan için bir select ve her seçenek için bir option oluşturulur.
Örnek kullanım:
<p>Cinsiyetiniz:</p> <select> <option>Erkek</option> <option>Kadın</option> </select>
Pre (Biçimlendirilmeyen kodlar)
PRE etiketi kod paylaşımları yapılmak için kullanılır. Bunun sebebi pre tagları arasında yazılan html kodlarının işlenmeden yazı olarak yazılmasıdır. Yani içine yazdığınız hiçbir kod çalışmayacak sadece yazı olarak gözükecektir.
Örnek kullanım:
<pre> <strong> bu kalın yazılmayacak, strong etiketleri de yazı olarak gözükecek. </strong> </pre>
Script (Javascript işlemleri)
Javascript kodlarını çağırmak veya direkt olarak içinde javascript kodlarını çalıştırmak için kullanılır.
Örnek kullanım:
<script> var metin = "Bu bir bildirimdir"; alert(metin); </script>
Style (Stil)
CSS kodlarını çağırmak için kullanılır. Bildiğimiz gibi CSS kodları HTML elemanlarını görsel olarak biçimlendirmek için kullanılır. Verdiğimiz örnek ile sitemizin arkaplanını gri yapalım.
Önemli: style komutu <head></head> tagları içinde kullanılmalıdır.
Örnek kullanım:
<style>
body{ background-color: #ddd; }
</style>
Table, th, tr, thead, tbody (Tablolar)
Tablo oluşturmak için kullandığımız kodlardır. Her tablo için bir table etiketi oluşturulur. Satırlar için tr, sütunlar için th kodunu kullanılırız. Tbody ve thead ise başlık satırını ve içerik satırlarını belirtir.
Kod yapısı ve mobil uyumluluk sorunu nedeni ile artık tablolar table yerine daha çok divler kullanılarak yapılmaktadır fakat hala desteklendiği ve kullanıldığı için öğrenmekte fayda var.
Örnek kullanım: (Bir telefon rehberi tablosu yapalım)
<table> <thead> <tr> <th>Ad soyad</th> <th>Numara</th </tr> </thead> <tbody> <tr> <th>Seo Şefi</th> <th>0422 323 7447</th> </tr> <tr> <th>Seo Şefi Whatsapp</th> <th>0543 567 5850</th> </tr> </tbody> </table>
HTML Rehberinde takıldığınız noktalar için bizlere sorularınızı yöneltebilirsiniz.
Çok faydalı bilgiler için teşekkürler. Hrml konusunda hreflang konunuzu da çok beğenmiştim.
bence tasarım yapmayı bilmeyenler hemen kod yazmaya başlamalı hocam bu makale sayesinde kesinlikle 24 saat içinde kendine tasarım çıkartabilir.
W3C ve Xhtml onaylı kod paylaşımınız için kaleminze sağlık.
Yeni seo analiz aracınız da harika olmuş, tebrik etmek istedim.