HTML, CSS Nedir? Nerede Kullanılır?
HTML açılımı Hyper Text Markup Language Türkçesi ise Hiper Metin İşaretleme Dili’dir. CSS ise Cascading Style Sheets Türkçesi Basamaklı Biçim Sayfaları’dır. Web Programlama ve Tasarlama’ya ilgi duyanların veya yeni başlayanların ilk duyduğu kavramların başında HTML ve CSS gelir. Bu iki işaretleme dili temelde kullanıcı ile web sitesi arasında bağlantıyı sağlayan Kullanıcı Arayüzünü(UI — User Interface) oluşturur.
HTML ve CSS ile yazmış olduğumuz kodlar her tarayıcı bulunan HTML,CSS Çözümleyici (Html,CSS Solver) ile çözümlenerek bizim arayüzümüze görsel bir şekilde aktarılmasına olanak sağlar. Yani girdiğimiz her bir site aslında yazılmış koddan ibarettir ve biz istek gönderip kodları sunucudan alınca tarayıcımız aldığı kodları HTML ve CSS çözücülerle görsel bir tabana oturtup bizimde sayfanın tasarımı güzelmiş dediğimiz yapısına büründürür. Aslında bizim girdiğimiz websitelerinde bazı yerleri göremememiz sunucudan kaynaklandığı gibi çözümleyicimizdeki versiyon eskiliğinden de olabileceği anlaşılmaktadır(Internet Explorer ile Google Chrome arasındaki kullanıcı deneyimi farkı gibi). Peki bu iki yapı tanım dışında kullanımda nedir ve nerede kullanılır?
HTML ile birlikte fotoğraf, video, yazı ve benzeri dosya biçimlerini tarayıcıya tanıtarak dosya aktarımı ve kullanıcıda görüntü oluşumu sağlanabilmektedir. Ayrıca arama motorlarına websitesi hakkında bilgi vermek, verileri sayfa içinde sıralayabilmek ve yerleştirebilmek gibi faaliyetleri yapabilmekteyiz. Bunlar için ise göndereceğimiz verileri belirli etiketler içinde yazarak tanıtıp bunları tarayıcıya gönderebiliriz. Örnek verilirse daha iyi anlaşılacağını umuyorum.
Yukarıdaki kodu alıp kaydederseniz tarayıcıda açtığınızda Sekmede Sayfa Ismi ve sayfada “Hello World” yazacaktır. Görüldüğü gibi etiketler tanıtarak ve etiketlere isimler ve içerisine içerikler vererek bir arayüz oluşturmuş olduk. Html ve Css’in güzel yanlarından biri de bunları yazarken herhangi ayrı bir uygulamaya gerek duyulmaması yani herhangi bir yazı editörüyle yukarıdaki kodu yazabilirsiniz ve çalıştırabilirsiniz(Örnek Notepad++, Visual Studio Code vb.).
Bu kadar tanım ve açıklamadan sonra artık kodumuzu açıklamaya ve nasıl kullanılır kısmına geçebiliriz. :)
HTML temel olarak iki adet ana yapıdan oluşur:
- <head></head> etiketi içerisinde yer alan sayfamızın baş ve üst kısmı yani sayfa hakkında bilgiler verir ve arama motorlarına açıklar(SEO-Search Engine Optimization diye duyduğunuz kavram burayla ilgilidir çoğunlukla), sayfanın title denen isim kısmını, kaynak dosyalarının tanıtıldığı ve yüklendiği yapılar ve daha fazlası buraya yazılır. Bu head yapısını içerisindeki şeylerin çoğunu kullanıcı arayüzünde göremez, bunlar arkaplanda body kısmı için ön hazırlık ve tarayıcılar için yardımcı gibi çalışır.
- <body></body> etiketi içerisine ise aslında şuanda herhangi bir web sitesine girdiğinizde gördüğünüz her şey yazılabilir diyebiliriz. Liste, paragraf, link, resim, video, blog sayfa tasarımları yerleri vb. aklınıza gelen her şeyi buraya yazabiliriz. Peki bunları nasıl yazabiliriz? Bunları da body ebeveyni altında türüne ve içeriğine göre yeni etiketler oluşturarak verilerimizi aktarabiliriz. Şimdide aşağıda etiketlerle ilgili bir örnek göstereceğim. Aşağıdaki kodu alıp bir .html uzantılı dosyaya yazarsanız farkları görebileceksiniz.
Bu attığım kodda da görüldüğü gibi belirli etiketler altında içeriklerimizi yazabiliyoruz(Bu etiketlerin ve kullanımlarını detaylı ve sürüm desteklerininde olduğu website linkini en aşağıya doküman olarak yazdım.). HTML ile böyle yapabildik, peki CSS nedir?
CSS ise HTML ile yerleştirdiğimiz etiketli verilerin tasarımlarıyla uğraşma, değiştirme fırsatı veriyor. Yani biz tablo oluşturduk (<table></table> etiketi ile) fakat biz bunun tasarımını değiştirmek istiyoruz veya bir paragraf var elimizde Bu isteğimizi ise CSS ile gerçekleştirebiliyoruz. Bunun örneğini ise yukarıdaki kod örneğinde etiketlerin içine yorum satırlarında yazdığım kodları eklersek bu sefer farkı göreceksiniz. Bu font ailesini, renk ve boyutunu, çerçeve ve uzaklık gibi kavramların kodlarını nereden bulabilirim diye sorarsanız bunun için bütün tanımlı kodları anlatan bir web sitesi var onun da linkini aşağıya bıraktım.
Yukarıdaki içerikle birlikte HTML ve CSS hakkında kısa ve örnekli açıklama yapabildiğimi umuyorum. Gelecek makalelerde daha detaylı ve daha çok örneğin olduğu yazılarla yeniden görüşmek üzere…
DOKUMANLAR:
- HTML ve CSS için video ders istiyorsanız BURAYA TIKLAYIN
- HTML etiketleri hakkında daha detaylı bilgi için BURAYA TIKLAYIN
- CSS kodları ve kullanımları hakkında daha fazlası BURAYA TIKLAYIN
