HTML ve CSS Nedir? Neler Yapılabilir? Nasıl Öğrenilebilir?
HTML Nedir?
HTML Hyper Text Markup Language kelimelerinin kısaltılması şeklinde olan metin işaretleme dilidir. Web sitelerin oluşturulmasında kullanılan bir programlama dilidir, bu dilin çalışabilmesi için chrome, firefox, safari, edge, opera gibi tarayıcılar tarafından derlenmesi gerekmektedir. Bu yazımızda HTML dilinin detaylarına ve kullanım alanlarına göz atacağız hepinize iyi okumalar dileriz.
HTML ile Neler Yapılabilir?
HTML için Programlama dili dedik ancak aslında tam olarak bir programlama dili sayılmaz HTML ile Javascript, C#, Python veya benzeri programlama dilleri gibi alışılmış IF/Else sorgu yapıları yada For/While gibi döngü yapıları bulunmamaktadır. Bu nedenle HTML için bir metin işaretleme dili dememiz daha doğru olacaktır. HTML kullanım amacı web siteleri için görsel, yazı ve video gibi içeriklerin konumlandırılmasını sağlamaktır.
Günlük hayatımızda gezinmiş olduğumuz web sitelerin tümü HTML yapısını kullanmaktadır. Bir web sitesi arka planda PHP, ASP.Net, Python Django gibi sunucu tarafında çalışabilecek programa dilleri ile yapılmış olabilir. Ancak bu diller de HTML yapısında bir içeriği oluşturup tarayıcılarınıza bu içeriği gönderme işlemi yapılmaktadır. Yani kısacası tüm websiteleri HTML dili ile tarayıcılarımız tarafında çalışmaktadır.
HTML Mantığı Nedir?
HTML’in temel mantığında tag’lar yatmaktadır. HTML içerisinde bulunan farklı tag’ler ile de websitemizin görsel kısmını zenginleştirebiliriz. Örneğin sitenizin ana başlığını “h1” tag’ı ile belirlerken resim için “img”, paragraf için “p”, butonlar için “button” tag’leri gibi kullanabileceğiniz onlarca tag mevcuttur.
HTML Nasıl Öğrenilebilir?
HTML öğrenmesi oldukça kolay ve zevkli bir dildir. Basit pratikler yapmaya başlayıp ardından kendi websitenizi oluşturarak pratik yapmaya başlayabilirsiniz. Bu dili öğrenmeniz için algoritma yada farklı bir Programla dilini bilmenize ihtiyaç yoktur. Web yazılım geliştiriciliği için bir çok kesim tarafından Başlangıç dili olarak kabul edilen HTML dilini udemy ve youtube gibi video içerikli mecralardan öğrenmeniz oldukça kolaydır. Video içeriği dışında HTML öğrenmenizi kolaylaştıracak bazı websitelerini sizin için aşağıda listeledik.
- W3schools HTML, CSS ve Javascript için en iyi adrestir.
- Stackoverflow özellikle örneklerini inceleyebileceğiniz bir web sitesidir.
- CodePen kendi içerisinde hesabınızı oluşturup HTML, CSS, JS yazmaya başlayabilirsiniz.
- GitHub hesabınızı oluşturup farklı diğer geliştiricilerin projelerini inceleyebilirsiniz
Kimler HTML Öğrenmeli?
Bilgisayar Programcıları, meslektaşlarına ve alandaki daha az bilgili kişilere karmaşık teknik kavramları açıklayabilmelidir. Detaylara gösterilen özen, verimliliği, kaliteyi ve yeterliliği kolaylaştırdığından bu programcılar kod, programlama dilleri ve yazılım işlemleriyle çalışmaktadır. Örgütsel beceriler odaklanma ve çoklu görev çalışmalarında başarı olmaktadırlar.
Sadece HTML ile Web Sitesi Yapılabilir mi?
Evet, sadece HTML kullanarak web sitesi oluşturmanız mümkündür. Ancak Günümüzde kullanılan Web sitelerinin büyük bir çoğunluğu sadece HTML ile yapılmazlar. Web sayfalarını renklendirmek ve stil belirmek için HTML ile birlikte CSS, Animasyon eklemek ve verileri işlemek için Javascript, Web sitelerinizi dinamik kılmak için ise PHP, ASP.NET, Python gibi programlama dillerini kullanırlar. Bu nedenle sadece HTML kullanmak istediğiniz web sitesini oluşturmak için yeterli gelmeyebilecektir.
CSS Nedir? Ne İşe Yarar? Nerelerde Kullanılır?
CSS Nedir?
CSS (Cascading Style Sheets), HTML ve JavaScript gibi, internet sayfalarının kodlanmasında kullanılan 3 ana teknolojiden biridir.
CSS, bir HTML sayfasının nasıl görüntüleneceğini tarif eder. Bu tarifin içinde sayfadaki başlık, metin, resim, video gibi öğelerin görsel özelliklerinin yanı sıra, sayfa yerleşimi ve bu yerleşimin farklı ekranlarda, cihazlarda,ekran, kağıt ya da diğer ortamlarda nasıl değişeceği bilgisi de bulunur.
CSS’in Tarihçesi Hakkında Kısa Bilgi
CSS ilk kez 10 Ekim 1994 tarihinde, CERN’de Tim Barners-Lee ile birlikte çalışmakta olan Hakon Wium Lie tarafından önerilmiştir. Bunun ardından W3C (Dünya Çapındaki Ağ Birliği), çeşitli forum ve eposta listelerinde yapılan birkaç farklı stil sayfası dili taslağını da göz önünde bulundurarak, 1996 yılında ilk CSS önerisini sunmuştur (CSS1).
İnternet kullanımının yaygınlaşması ve kullanım amaçlarının çeşitlenmesiyle doğan yeni ihtiyaçlar, W3C’nin 12 Mayıs 1998’de CSS2 önerisini sunmasıyla sonuçlanmıştır. Bunun hemen ardından çalışmalarına başlanan CSS3 ise, tarayıcı desteği artmış olmasına rağmen 2016’da halen geliştirilme aşamasındadır.
İnternet Safasının Yapısı ve CSS
Yapısal olarak incelendiğinde internet sayfaları üç katmandan oluşur. Bu katmanlar önem ve uygulama sırasına göre içerik katmanı, görselleştirme katmanı ve etkileşim katmanıdır.
İçerik katmanı (HTML)
İçerik katmanı her intenet sayfasında mutlaka vardır. Sayfa sahibinin ziyaretçiye aktarmak istediği bilgi, HTML ile etiketlenerek bu katmanı oluşturur. Günümüzde internet sayfalarının içeriği ağırlıklı olarak metin olsa da, resim, animasyon, video gibi farklı ortamlar da içerik olarak kullanılmaktadır. Bu katmanda içeriğin nasıl görüntüleneceğine dair bilgi olmaz (olmaması gerekir).
Görselleştirme katmanı (CSS)
Görselleştirme katmanı, içeriğin sayfayı ziyaret eden kişiye nasıl gösterileceğini belirler. İçeriğin ekran boyutuna göre ayarlanması, yazı boyutunun belirlenmesi, renk, beyaz alan gibi görsel öğelerin tanımlanması bu katmanda yapılır. Görselleştirme katmanı için önerilen ve yaygın olarak kullanılan dil CSS’tir.
Etkileşim katmanı (JavaScript)
Etkileşim katmanı, kullanıcı ve sayfa arasındaki etkileşim yöntemlerini ve sonuçlarını tanımlar. Genellikle JavaScript ile kodlanır. Bir sayfanın ziyaretçi ile etkileşimi, formların kontrol edilmesi gibi basit işlemlerden, masaüstü yazılımlarına benzer kapsamlı web uygulamalara kadar çeşitlilik gösterebilir.
Neden CSS?
HTML, içeriğin nasıl görüntüleneceğini, sayfaya nasıl yerleşeceğini belirlemek için tasarlanmış bir dil değildir. HTML’nin amacı içeriği tarif etmek, içeriğin hiyerarşisini belirlemektir. Sayfanın başlığı nedir, sayfadaki bağlantılar hangileridir, alt alta dizili bu satırlar bir liste midir yoksa sıradan paragraflar mıdır? HTML’nin işi bu soruların cevaplarını vermektir. Başlık kırmızı mı olsun, logo büyük mü olsun, sol üstte mi olsun? HTML bunlara karışmaz.
CSS tam burada devreye girer. CSS’in işlevi neyin, nerede, nasıl görüntüleneceğini tarif etmektir. Mesela logonun sayfanın sol üst köşesini tamamıyla kaplayacak şekilde görüntülenmesi CSS’in sorumluluk alanındadır. Bir ay sonra logonun sağ üst köşenin tamamını kaplaması icap ettiğinde, HTML koduna veya logonun yer aldığı resim dosyasına hiç dokunmadan bu işi gerçekleştirmek yine CSS’le yapılacaktır.
CSS’in sağladığı avantajların başlıcaları şunlardır:
- Güncelleme kolaylığı: Tüm bir sitenin görselleştirme bilgisi, bir veya birkaç CSS dosyasında tutulabilir. Her sayfanın görsel tarifinin kendi içinde tanımlandığı bir yapıyla kıyaslandığında bu, sitenin bakımı ve güncellemesi açısından müthiş bir avantajdır. 1000 sayfalık bir sitede başlıkları bir punto büyütmek gerektiğinde, CSS kullanan kişi tek bir dosyada tek bir satırı günceller. Görselleştirmeyi ayrı bir katman olarak ayırmamış kişi, bin sayfayı ayrı ayrı güncellemek durumundadır.
- Veri trafiği tasarrufu: Tüm stiller birkaç tane CSS dosyasında bulunduğundan, veri trafiğinde ölçülebilir bir tasarruf sağlanır. Ayrı olarak kodlanan CSS dosyası, bir kere indirildikten sonra tarayıcı tarafından saklanır. Aynı CSS dosyasını kullanan diğer sayfalarda, saklanan bu dosya kullanılır. Aynı dosya bir daha indirilmez.
- İçerik esnekliği: İçerik ile görsel tasarım ayrıldığında, aynı içeriği farklı farklı ortamlarda kullanmak kolaylaşır. Mesela aynı içeriği hem anasayfada, hem iç sayfada, hem RSS feed için hem de ekran okuyucular için kullanabilirsiniz.
- Güncel kodlama stratejilerine imkan sağlama: Görsel tasarımın içerikten ayrı oluşu, artık vaz geçilmez bir strateji haline gelmiş olan responsive tasarım için zorunludur. Böylelikle her cihaz, her ekran boyu için farklı bir sayfa yapmak zorunluluğu ortadan kalkar.
Özetlersek
CSS, HTML ile etiketlenmiş içeriğin nasıl görüntüleneceğini tarif eder.
CSS, görselleştirme yükünü HTML’in sırtından alır ve bu bilgiyi birkaç dosyada toplar. Böylece site güncellemelerini ve bakımını kolaylaştırır. Tüm görselleştirme bilgisinin birkaç dosyada toplanması, aynı zamanda, veri trafiğinde de tasarruf sağlar. Görselleştirme yükünü sırtından atan HTML de, asıl amacına uygun olarak yalnızca içerik hakkında bilgi taşır ve böylece daha portatif hale gelir. CSS, responsive tasarım stratejisinin belki de en vazgeçilmez ayağıdır.
CSS kolay öğrenilebilen bir dildir. Kullanımı da kolay, hatta zevklidir. CSS sayesinde ön-taraf yazılımı (front-end development), günümüzün milyon çeşit cihaz-ekran ortamında bile insanın akıl sağlığını yitirmeden yapabileceği bir iş olarak kalmıştır.
- YouTube videosu için Kodluyoruz kanalına teşekkür ederiz.
