Bir internet sitesi yapmak, güzelleştirmek ve daha birden fazla bir şey yapabilmek adına HTML öğrenmenin gerekli olduğunu biliyor oluşunuzdan dolayı şuanda bu yazıda bulunuyorsunuz. Sırası ile HTML5 Nedir ? ve CSS3 Nedir ? HTML ile CSS’nin farkları nelerdir ve ne işimize yarar gibi sorular biliyorum ki yeni bir yazılım diline başlarken kafanızı kurcalıyor olabilir.
HTML5 Nedir ?
Günümüzde son olarak HTML dilinin sürümü diye ifade ettiğimiz versiyon olarak 5 versiyonu kullanılmaktadır. Kelime anlamına baktığımızda ise “Hyper Text Markup Language” kelimelerinin baş harflerinden oluşmaktadır. Bu kelimeyi Türkçe ‘ye çevirdiğimizde ise “Zengin Metin İşaretleme Dili” anlamına gelmektedir. Aşağıda ki tabloda yıl yıl HTML’in çıkan versiyonlarını görebilirsiniz.
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
HTML ile yapılan internet siteleri ilk başlarda sadece metinlerden oluşuyordu. Büyük küçük harflere dayanan bu dil ile pek bir şey yapmak mümkün değildi. 1996 yılında ise görsel anlamda daha fazla şey yapabilmek için XHTML’ ye ek olarak CSS çıkarıldı.
CSS3 Nedir ?
CSS3’e geçmeden öncesinde öncelikle CSS kelimelerinin ne anlam ifade ettiğini bilmekte fayda vardır. Baş harflerinin açılımını yazdığımızda ise “Cascading Style Sheets” olan kelimeler topluluğu bizim dilimize çevirdiğimizde “Basamaklı Still Sayfaları” anlamını taşımaktadır.
CSS ile paragrafların rengini değiştirebilir, butonlara çeşitli renk geçişleri sağlayabilme ve daha bir çok görsel değişiklik yapma hakkını sağlar. CSS ortaya çıkmadan öncesinde her bir etikete ayrı ayrı still tanımlamanız gerekiyordu. Fakat CSS ortaya çıktıktan sonrasında böyle bir işleme gerek kalmayıp tek bir dosya sayesinde istediğiniz etiketlere still tanımlayabiliyorsunuz.
HTML5 & CSS3 Yazmak İçin Editörler
Öncelikle şunu belirtmek isterim ki HTML5 & CSS3 yazmak için her hangi bir kullanabileceğiniz bir editör yoktur. Bilgisayarınızda yer alan notepad uygulamasını çalıştırarak HTML5 & CSS3 kodları yazmaya başlayabilirsiniz. Fakat yinede gelişmiş ve daha iyi bir kod yazma editör uygulaması istiyor iseniz ve benimde videolarda kullanmış olacağım Notopad++ uygulamasını indirmek için aşağıda ki linke tıklayabilirsiniz.
Bir HTML Sayfası Nelerden Oluşur ?
Bir HTML sayfasına başlamak için <html> etiketi ile başlanır ve </html> etiketi ile bitirilir. Bir HTML5 sayfasına başlamak için ve tarayıcılara bunun HTML5 sayfası olduğunu belirtmek için ise en üste <!DOCTYPE html> etiketi ile başlanır ve bu etiket sadece kodların en üstünde bulunur.
Daha sonrasında ise <head> ve </head> kısmı içerisine internet sitesinin başlığı, meta açıklaması, meta anahtar kelimeleri gibi bilgiler girilir ve bu bilgiler internet sitesinin içeriğinde gözükmez. Örnek verecek olur isek bu etiketin içine girilecek <title> etiketi ile internet tarayıcısında ki sekmede çıkan ismi belirlemiş oluyoruz.
<html>
<head>
</head>
<body>
</body>
</html>
Yukarıda ki örnekten yola çıkar isek üst tarafta yazmış olduğum bilgilerin detaylı bir şekline ulaşmış olursunuz. Sonrasında ise <body> ve </body> etiketleri arasına yazılan her şey ise sizin internet sitenizde gösterilecek olan her şey anlamına gelmektedir. Bu etiketler arasına yazılan her şey sizin internet sitenizde yer alıyor ve tarayıcınızda gösteriliyor olacaktır.
HTML5 ile İlk Örnek
Burada ise aşağıda ki kodlara bakarak HTML’in az buçuk yapısını öğrenmeniz sağlanacaktır. Aşağıda ki kodları gözden geçirdikten sonrasında neyin nerede kullanıldığını hangi etiketin ne iş yaptığını birazcık da olsa anlamış olacaksınız.
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Yukarıda yer alan kodu notoped uygulamasına yapıştırıp bilgisayarınıza uzantısını .html olarak kaydettiğinizde çalıştırdığınızda karşınıza sadece büyük bir yazı fontu ile “My First Heading” kısmı ve küçük bir şekilde “My first paragraph” kısmı gelecektir.
<h1> etiketi başlık etiketi olup <p> etiketinin de buradan paragrafları belirlediğini öğrenmiş oldunuz. Unutulmamalıdır ki HTML’de açılan her etiket kapatılmalıdır. Bazı istisnai durumlar olsa bile açılan her etiket kapatıldığında daha düzgün bir şekilde karmaşıklığa girmeden kod yazmış olursunuz.