HTML Nedir? html, head, body, title, meta etiketleri
Merhaba, bu makalede Sıfırdan HTML Derslerine başlıyor ve Web Tasarım veya Web Uygulaması Geliştirme dünyasına ilk adımı atıyoruz. İlk olarak HTML Nedir? Temel HTML Yapısı ve İlk HTML etiketlerini inceleyeceğiz. Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi unutmayınız.
HTML Nedir?
HTML, HyperText Markup Language ifadesinin baş harflerinden oluşmaktadır.
Türkçemize Hiper Metin İşaretleme Dili veya Zengin, Zenginleştirilmiş Metin İşaretleme Dili olarak çevrilebilir.
Web sitelerinin tasarımında iskeleti oluşturan yapı HTML’dir. Bütün web sayfaları HTML kodları üzerine inşa edilmektedir.
Son zamanlarda popüler olan Sürükle-Bırak web site tasarım teknolojileri de arka planda yine HTML üzerine inşa edilmektedir.
HTML, bir programlama dili değildir. Sadece HTML etiketlerini kullanarak bir yazılım geliştiremeyiz.
Programlama dillerinde bulunan hesaplama yetenekleri HTML’de yoktur.
HTML’de küçük-büyük harf duyarlılığı yoktur. Ancak önerilen, etiketlerde küçük harflerin kullanılmasıdır. Makalelerde etiketlerden bahsederken noktadan sonra bile küçük harf ile yazacağımı şimdiden belirtmek istiyorum. Bunu bir yazım hatası olarak değil prensip olarak düşünebilirsiniz.
HTML Dosyası Oluşturma
- Bir önceki makalede kurulumunu gerçekleştirdiğimiz Sublime Text editörünü açıyoruz.
- File menüsünden New File ifadesine tıklıyoruz.
- Bizim için untitled yani başlıksız bir sekme açıldı. File menüsünden Save ifadesine tıklayarak veya CTRL S tuşlarına basarak bu dosyayı kaydetmek istediğimizi belirtiyoruz.
- Dosya adını verirken Türkçe karakter, boşluk kullanmamayı ve dosya adından sonra .html uzantısını yazmayı ilk andan itibaren alışkanlık haline getiriyoruz.
- Dosya adını belirleyip Kaydet dedikten sonra ilk HTML dosyamızı hazır hale getirdik.
Temel HTML Yapısı
Şu an hiçbir şey bilmiyoruz. Ama Sublime Text editörünün bize sağlamış olduğu bir yapı ile (buna snippets diyoruz) ilk HTML etiketlerimizi oluşturacağız. Bunun için Sublime Text editöründe açık olan HTML dosyamıza html (küçük harflerle) yazıp Tab tuşuna basıyoruz. İlk HTML etiketleri Hoş geldiniz der gibi karşılıyor bizleri. Şimdi bu yapıdaki ifadeleri inceleyelim.
DOCTYPE html
HTML dosyamızın en üst satırında gördüğümüz bu ifade bir deklarasyondur. Document Type ifadesinin kısaltılmış halidir. Yani Belge Türü anlamı taşımaktadır. Bu deklarasyon ile bu belgenin bir HTML belgesi olduğunu tarayıcılara belirtmiş oluyoruz. HTML5’ten önce bu ifade çok uzun ve karmaşıktı ama HTML5 ile sadeleştirilerek bu halini aldı.
HTML’de Etiket Yapısı
İlk HTML etiketimize geçmeden önce HTML’de etiketler, küçüktür (<) etiketadi büyüktür (>) ifadesi ile açılır ve küçüktür (<) slaş (/) etiketadi büyüktür (>) ifadesi ile kapatılır. Bu yapıyı kullanmayan singleton yani tek kullanımlık etiketlerimiz de bulunuyor. Bu etiketler sadece açılış etiketinde görevlerini tamamlar. Yine onlara da değineceğiz.
Singleton etiketler haricindeki tüm etiketlerimizi açtığımızda kapatmamız gerektiğini unutmayalım.
İlk olarak html etiketi ile bu dünyayı incelemeye başlayabiliriz.
html Etiketi
Bütün HTML kodları html etiketlerinin açılış ve kapanış etiketleri arasında yazılır. Tüm HTML kodlarını sarmalayan bu etiket, Doctype deklarasyonuna ek olarak belgenin bir HTML belgesi olduğunu, HTML kodlarının başladığı ve bittiğini tarayıcıya bildirir. Doctype deklarasyonun kullanımı zorunlu değilken (kullanımı önerilir!) html etiketlerinin kullanımı zorunludur.
head Etiketi
Web sayfasının başlık bilgisinin, meta etiketlerinin ve verilerinin, dış dosya bağlantılarının tanımlandığı etikettir. Tüm bu tanımlamalar head etiketinin açılış ve kapanış etiketleri arasında yapılır. Web sayfamızın beynidir diyebiliriz. Burada yapılan ayarlamalar web sayfamız için oldukça önemlidir. Yine head etiketleri arasında yazacağımız kodlara değineceğiz ama önce body etiketine göz atalım.
body Etiketi
Web sayfasının içeriğinin, ziyaretçinin gördüğü bölümdür. Bir web sayfasını ziyaret ettiğimizde karşımıza çıkan metinler, resimler, videolar, listeler, tablolar vb. tüm yapılar body etiketlerinin açılış ve kapanış etiketleri arasında yer alır.
HTML için ihtiyacımız olan üç ana etiketimizi inceledik. Şimdi head etiketlerinin arasında web sayfamız ile ilgili ayarlamaları incelemeye başlayabiliriz. İlk olarak web sayfamıza bir başlık verebiliriz. Bu başlık bilgisini tarayıcımızın sekmesinde gözlemleyebiliriz. Bunun için title etiketini kullanacağız.
title Etiketi
Web sayfasına verilmek istenilen başlık bilgisi title etiketinin açılış ve kapanış etiketleri arasında yazılır. Bu etiketler arasında tanımlama yaptıktan sonra editörünüzde değişiklikleri kaydedip, html dosyanızı tarayıcıda açtığınızda tarayıcının sekmesinde title etiketleri arasında yazmış olduğunuz ifadeyi gözlemleyebilirsiniz.
Web sayfamıza title etiketi ile başlık bilgisini girdikten sonra yine head etiketleri arasında tanımlamalarını yaptığımız meta verilerini inceleyelim. Bu veriler için yukarıda bahsettiğim singleton yani tek kullanımlık etiket olan meta etiketini kullanacağız. İlk olarak bir dil kodlaması gerçekleştireceğiz. Bu dil kodlamasını Türkçe karakterlerimizi sorunsuz bir şekilde görüntüleyebilmek için yapıyoruz. Ancak bu kalıcı bir çözüm değildir. HTML sayfamıza programlama dilleri ile bir şeyler yazdırdığımızda yine bu karakter sorunu ile karşılaşabiliriz. Bunun için ilgili programlama dillerinde de önlem almamız gerekmektedir.
charset Niteliği
meta etiketinin singleton türünde olduğunu söylemiştim. Yani artık kapatma etiketi olmadığını biliyoruz. O zaman meta etiketinin içerisine giriyoruz ve meta ifadesinden sonra bir boşluk bırakıp charset niteliğini yazıyoruz. Bu niteliğe değer atamak için = “” işaretlerini kullanıyoruz. Vereceğimiz değeri ise çift tırnak işaretleri arasında yazıyoruz. Türkçe karakterlerin sorunsuz bir şekilde görüntülenebilmesi için utf-8 değerini veriyoruz. Böylelikle meta etiketinin içerisinde meta ifadesinden sonra charset = “utf-8” yazarak dil kodlamasını tamamlamış oluyoruz.
name Niteliği
Bir alt satıra inip yeni bir meta etiketi oluşturuyoruz. Bir kez daha meta etiketinin kapatma etiketi olmadığını singleton yani tek kullanımlık etiket olduğunu hatırlatayım. meta etiketi içerisinde oluşturacağımız name niteliği ile hangi meta verisini kullanacaksak o değeri veriyoruz.
name = “description”
meta etiketi içerisinde meta ifadesinden sonra bir boşluk bırakıp name niteliğine description değerini veriyoruz. Bu kullanım ile web sayfamızın açıklama meta verisini girmek istediğimizi ifade etmiş oluyoruz.
content = “”
name niteliği ile belirtilmiş meta verisinin içeriğini content niteliği içerisinde yazıyoruz. Tanımladığımız name = “description” ifadesinden sonra bir boşluk bırakıp content = “” ifadesini yazıyoruz. Web sayfamızın açıklamasını temsil eden bir metni bu tırnak işaretleri arasında yazabiliriz.
Örnek: content = “Ahmet Aydın Blog, Web Tasarım - Programlama ve Yazılım Geliştirme üzerine paylaşımların yapıldığı bir blogdur.”
Web sayfamızın açıklamasını temsil eden kod satırını tamamlamış olduk. meta verilerinin kullanımı bu şekilde devam edecektir. name niteliği ile meta verisini, content niteliği ile verinin içeriğini, değerini tanımlamış oluyoruz. Şimdi de sitemizin anahtar kelimelerini tanımlayacağımız meta verisi olan keywords ifadesine bir göz atalım.
name = “keywords”
name niteliği içerisinde keywords ifadesini görüyoruz. Bu ifade ile web sayfamızı temsil edecek anahtar kelimeleri tanımlamak istediğimizi belirtmiş oluyoruz. Yine bu ifadeden sonra bir boşluk bırakıp yukarıdaki description tanımlamamızda olduğu gibi content niteliği içerisine web sitemizi temsil eden anahtar kelimeleri aralarına virgül koyarak yazabiliriz.
Örnek: content = “ahmet aydın, web tasarım, programlama, html, css, js, javascript, php, yazılım geliştirme”
name = “author”
name niteliği içerisinde bulunan author değeri ile web sayfamızın yazarı hakkında bir tanımlama yapacağımızı belirtmiş oluyoruz. Yine yukarıdaki meta verilerini tanımladığımız gibi burada da bu ifadeden sonra bir boşluk bırakarak content niteliği içerisinde yazar değerini verebiliriz.
Örnek: content = “Ahmet Aydın”
Tüm bu kodlamaları başarılı bir şekilde tamamladıysak dosyamızı kaydedip tarayıcıda değişiklikleri gözlemleyelim. Web sayfamızı yenilediğimizde bir değişiklik göremeyeceğiz. Yine sadece başlık bilgisinin geldiğini başka bir değişiklik olmadığını gözlemleyebiliriz. Aslında tüm işlemler arka planda gerçekleşti. İlgili tanımlamalar yapıldı. Bu tanımlamaları görebilmek için web sayfamızda sağ tıklayıp Sayfa kaynağını görüntüle ifadesine tıklıyoruz. Yazdığımız tüm kodlar karşımıza çıkacaktır ve head etiketleri arasında tanımladığımız meta verilerini görebiliriz.
Bu makalede Sıfırdan HTML Derslerine başladık ve Web Tasarım veya Web Uygulaması Geliştirme dünyasına ilk adımı attık. İlk olarak HTML Nedir? Temel HTML Yapısı ve İlk HTML etiketlerini inceledik.
Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi hatırlatmak istiyorum. Ahmet Aydın Youtube Kanalı’na abone olabilir ve burada olmayan paylaşımlardan da faydalanabilirsiniz. Umarım yararlı bir yazı olmuştur. Bir sonraki makalede görüşebilmek dileğiyle kodla kalın, hoşça kalın...