HTML5 Başlangıç Rehberi
İçindekiler
Mutfağa giriş
HTML’e ısınma turları
HTML statik ve betik işaretleme dilidir. Yeni eklenen özelliklerle daha kolay web tasarımı, daha hızlı ve etkili web sayfalar hazırlanabilmektedir. Bir web standartıdır. Hatta ve hatta müthiş birşey söyleyeceğim o bir son web bükücüdür. 🙂
- Betik kodlar web tarayıcı tarafından doğrudan okunur ve yorumlanarak tasarım elde edilir. Kodların programlama dilleri gibi makine koduna çevrilip sonra çalıştırılma durumu söz konusu değildir. Örnek verecek olursak boş bir notepad açıp içerisine “Türkiye’nin Webmaster Mutfağı” yazdıktan sonra “mutfak.html” olarak kaydetip açtığımızda tarayıcımız tarafından yorumlanıp basit bir web sayfası elde ederiz.
- Web tasarımının statik iskeletini oluşturur. Hatta bir binanın kaba inşaatıdır.
Biz artık web tasarımlarımızı, web tarayıcılarımızı vs. HTML5‘e göre ayak uydurmalıyız. Çünkü modern web’in herşeyi artık HTML5’dir. Bir örnek verecek olursak SEO’ya etkisi olduğunu söyleyelim.
Daha yeni ve tanımlayıcı elementler HTML5 ile birlikte geldi. Yazıda ilerleyen bölümlerde daha açıklayıcı bilgi paylaşımı yapacağım inşallah.
HTML5, Front-end Developer‘in isveç çakışı gibidir.
HTML5 ile çalışmaya başlamadan önce web tarayıcınızı en güncel sürüme güncellemek durumundayız. Çünkü bazı browser’lar hala HTML5 in bazı özelliklerini destekleyemiyor.
Hangi browser’ın html5’in hangi özelliklerini desteklediğini bu kaynaktan öğrenebilirsiniz.
HTML gelişim süreçleri
| Sürüm | Yıl |
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
Basit bir HTML sayfası
Aşağıdaki HTML kodları web tasarımımızın en temelini oluşturmaktadır. Başlangıç rehberi açısından satır satır incelemekte çok fayda var.
<!DOCTYPE html>
<html>
<head>
<title>Türkiye'nin Webmaster Mutfağı</title>
</head>
<body>
Selamün Aleyküm <!-- Bu bir yorum satırı -->
</body>
</html>
<!DOCTYPE html>, belgemizin HTML5 sürümü kodlarını kullanacağını gösteriyor. İlk satır sayfamızın hangi HTML sürümü kullanacağını belirliyor.
HTML 4.01 ise <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html> </html> : HTML belgeleri bu kök etiket(tag)i içerisinde olmalıdır.
<head> </head> : <script>, <meta>, <title>, <link>, <base> etiketleri tanımlanır. Sayfada gözükmeyen tanımlama bloklarının yer aldığı kısımdır. Kategorize edecek olursak <Head> de dahil olmak üzere Metadata olarak adlandırabiliriz.
<body> </body> : HTML belgesinin görünen kısmı ise bu kısımda yer alır. <p>, <h1>, <section>, <nav>, <header> vs. etiket(tag)leri yer alır.
HTML kodlanırken hiyerarşik bir yapıya sahiptir.
Makamların, rütbelerin önem sırası, aslık ve üstlük düzeni, aşama gösterilerek yapılan sınıflama, aşama sırası. Örnek verecek olursa <h1> tag’ını <body> tag’ları dışında kullanırsak <h1> rütbesi yetmeyecektir.
Etiketler, öznitelikler ve elementler(Tags, attributes and elements)
Etiketler(Tags)
HTML dillerinde sayfaya içerik eklemek, içeriğe görsel özellikler vermek için etiket(tag) kullanılır. Aşağıdaki örneğe bakacak olursak <a> tagı ile açılıp </a> tagı ile kapatmalıyız. Etiket(Tag)ler içeriden dışarıya doğru kapanış şekli olduğu bilinmek zorundadır. Yorum satırında verilen örneğe dikkat edelim.
<body>
<a> ... </a>
<!-- <tag1><tag2><tag3> </tag3></tag2></tag1> -->
</body>
Elementler(Elements)
Etiket(tag)ler ve içeriğin oluşturduğu yapı element olarak adlandırılır.
<title>
<figure> vs.
“<title> Sayfa adı </title>” bir sayfa adı(title) elementidir.
Öznitelikler(Attributes)
Öznitelikler(Attributes), etiket(tag)lerini özelleştirmek olarak kullanıldığı bilinmelidir. <a> elementi tek başına bir linki temsil eder ama href özniteliği olmaz ise link hiçbir yere yönlenmez.
<body>
<a href="http://webmaster.kitchen/"> Webmaster Mutfağı </a>
<!-- <tag attribute="value">Webmaster.Kitchen</tag> -->
</body>Her bir elementin id ve class özniteliği(attributes) vardır. Bu niteliklerin global Attributes olduğunu ve CSS de stil(style) verirken de işimize yarayacağını notlarımızın arasına almakta fayda var.
Tavsiye:
HTML sayfası içindeki tüm kodların küçük harfle yazılması, geliştiriciler arasında kabul görmüş bir kuraldır. Dolayısıyla etiketleri küçük harfle yazmanız tavsiye edilir.
HTML dilinin temel anlamda öğrenmeden HTML5 rehberine göz atmamanızı tavsiye ederim. Bunun için size iki ayrı sağlam kaynak önermek istiyorum.
HTML5 ile gelen bir çok yeni özelliği bir önceki yazımızda sizlerle paylaşmıştık. İlerleyen zamanlarda o özelliklerin her birini tek tek teknik olarak sizlere sunmak istiyorum. Sizlere HTML5 ile gelen devrim niteliğindeki değişiklerden başlangıç seviyesine uygun olanlardan bahsedeceğim.
HTML5’in getirdiği yeniliklere bakacak olursak HTML 5 sürümü ile kendi işini kendisi görüyor.
Temel yapısal elemanlar
HTML 4.1 de sitemizin isketini oluşturmak için <div> elementlerini kullanarak bölümlere ayırıyorduk, her bir <div> için global attribute olan id‘ler vererek hangi kısımın header, hangi kısım da menüler vs. yer alacağını belirliyorduk. HTML5 de bu yapı tamamen yerini yeni elementlere bırakıyor.
Yukarıda görüldüğü gibi daha net bir temel yapı ortaya çıkıyor. CSS kodlaması yaparken id karşılıklığıda ortadan kalkmış oluyor.
<nav> <header> <aside> <section> <article> <hgroup> <figure> <figcaption> <footer>
Multimedya elemanları
HTML5’te multimedia dosyalarını, Silverlight ya da Flash gibi eklentilere ihtiyaç duymadan web sayfanızda kullanabiliriz.
HTML5 ile beraber gelen <audio> ve <video> elementleri gömülebilir ve yeni multimedya içeriğinin üzerinde özellikleri (attribute) atamamıza izin verir.
Hangi tarayıcıların hangi video formatlarını desteklediğini ve ses dosya biçimlerini desteklediğini öğrenmemiz gerekiyor. Yukarıdaki tavsiyeler kısmındaki kaynaktan gerekli bilgiyi alabiliriz.
Her elemetin attribute değeri dinamik olarak değişiklik gösterebilir. Kullanım şekli aşağıdaki gibidir.
...
<body>
<video height="100" width="500" controls>
<source src="mutfak.mp4" type="video/mp4">
</video>
<audio id="mutfak-ses-1" width="350" controls>
<source src="mutfak.wav" type="audio/wav">
</audio>
</body>
...Controls Kullanıcı bunun sayesinde yüklediği harekete geçirir ya da durdurma gibi işlemler yapmamıza imkan verir.
Input tip, özellik, kısıtlama
HTML5’in input elemanlarını tanıyalım. <input> etiketi, <form> ve </form> etiketleri arasında yer alır. Kullanıcıdan bilgi girişi isteyeceğimiz alanların hepsini input elementi yardımı ile sağlıyoruz.
<form>
<input type="text" name="ad" required>
</form>
HTML5 ile bir çok input tipi ve özelliği gelmiş bulunmaktadır. Input tipleri eksi sürümlere nazaran bizi büyük dertlerden kurtarıyor. Text tipi ile bütün herşeyi yapmaya kalkışıyorduk ve buda ister istemez hem zahmetli hemde karışıklığa neden oluyordu.
<input> tipler: date, datetime, email, month, number, datetime-local, range, search, tel, time, url, week
<input> özellikleri: autofocus, placeholder, required, form, height ve width, pattern
<input> kısıtlamalar: disabled, max, maxlength, min, pattern, readonly, required, size, step, value
Yeni form elemanları ailesi
HTML5 aşağıdaki yeni form elemanları kazandırmıştır. Bunları teker teker inceleyelim buyurun.
<datalist>, <keygen>, <output>
<datalist> elemanı
<datalist> elemanı, <input> elemanı için önceden tanımlanmış seçenekleri içeren bir liste belirler.(list=”list”) <datalist> elemanı bilgi girişinde kullanıcıya kolaylık sağlamak amacıyla bir aşağı açılır menu içinde input seçeneklerini listeleme fırsatı bize sağlar.
<input type="text" name="yazarlar" id="yazarlar" list="list">
<datalist id="list">
<option>Hakan Karataş</option>
<option>Merve Vural</option>
<option>Rüya Şibil</option>
</datalist><keygen> elemanı
<keygen> elemanı, kimlik denetimi için güvenli bir yol sağlar. Form üzerinde, bir anahtar-değer üreticisi kod tanımlaması yapılır. Form gönderildiği zaman, iki anahtar seçeneği bizlere sunar.
Private key yerelde saklanan bir key sağlar. Public key sunucu tarafında saklanan bir key sağlar.
<form action="anahtarla.php" method="post">
Web site adı: <input type="text" name="web-site-adi">
Kod Türü: <keygen name="key">
Gönder: <input type="submit" name="submit" >
</form><output> elemanı
<output> elemanı, bir betik koduyla oluşturulmuş çıktı dâhil çeşitli çıktıları temsil etmek üzere kullanılan bir elemandır. Yani iki sayıyı toplama işlemi düşünelim. Sayıların değerleri değiştikçe dinamik olarak <output> da iki sayının toplamını elde etmiş olacağım.
<form oninput="ab.value = parseInt(a.value) + parseInt(b.value)">0
<input type="number" id="a" value="500">
<input type="number" id="b" value="500">
<output name="ab" for="a b"></output>
</form>
Başlangıç seviyesinde HTML5’e giriş yaptık ve getirdiği yeniliklerden bir bölümünü inceleme fırsatımız oldu. İlerleyen günlerde daha teknik ve ayrıntılı bir şekilde HTML5 dünyasının içine dalmak için görüşmek üzere. Çay koydum 🙂 Mutfakta kalın 😉
8 Yorumlar
Süper bi yazı olmuş. Ben kodlama yapmak istiyorum ama hep zor geliyor ya da zaman bulamıyorum. Temel anlamda hangi kodların nerelerde kullanılacağını ve ne işe yaradığını biliyorum. Fakat yine de bir gün sıfırdan kendi temamı yapmak istiyorum
Webmaster Kitchen ailesi olarak teşekkür ederiz. Mutfaktan ayrılmayın. ?
Çok güzel bir paylaşım olmuş, devamını dileriz. (:
Sıfırdan bir tema yapmak için gerekli tüm bilgiler var. Bu kadarını yapabilen zaten yaptığı temayı geliştirmesini de bilir. Çok faydalı bir yazı olmuş eline sağlık.
Webmaster Kitchen ailesi olarak teşekkür ederiz. Mutfaktan ayrılmayın. 🙂
Kolay gelsin,şimdi aklımda şöyle bir soru var.Yeni bir projeye başladık framework,vb. ekledik. daha sonra eklememiz gereken mutlaka olması gereken şeyler var mı ? reset.css gibi ve bunların projeye faydaları nelerdir ?
Merhabalar projenin büyüklüğüne göre olmazsa olmazlar değişebilir. Reset.css yerine Normalize.css tercih edebilirsiniz. Bunu Soundcloud, Twitter Boostrap, Github gibi büyük markalar kullanmaktadır. Projeye faydasını da sorarsanız Firefox’un orjinalindeki margin ile Opera’nın aynı olmayabiliyor. Bu da tasarımda farklılıklar yaratıyor. Bunu sıfırlamak, yani her tarayıcıda aynı görüntüyü elde etmek için reset.css, normalize.css kullanılıyor.
[…] HTML 5 Klavuzu […]