Akademik Veri Yönetim Sistemi
Web Tasarımının Temelleri, Doç. Dr. Gökhan Ömeroğlu, Editör, Atatürk Üniversitesi Açıköğretim Fakültesi Yayınları, Erzurum, ss.1-20, 2021
•HTML5 ile birlikte gelen etiketlerden önce sayfa yapısını oluştururken kullanılan etiketlerinde bilinmesi gerekmektedir. HTML5 dokümanlarında sayfanın doküman tipi <!DOCTYPE html> şeklinde belirtilmektedir.
•Sayfanın dilini belirlerken <html lang=”tr”> etiketini kullanarak “lang” değerini sayfa dilinize göre değiştirebilirsiniz. Sayfanızın karakter kodlaması ise <meta> etiketleri aracılığıyla yapılmaktadır. <meta> etiketinin charset özelliğine girilecek karakter setiyle bu işlem yapılmış olur. Türkçe hazırlamış olduğunuz HTML5 dokümanında karakter problemi yaşayabilirsiniz. Bu durumda <meta charset=”utf-8”> ibaresini <head> etiketlerinin arasında belirtebilirsiniz.
•Bilindiği üzere html sadece sayfanın iskeletini ortaya çıkarmamıza yardımcı olur. Sayfanın tasarım ve etkileşim anlamında zenginleştirilmesi CSS ve JavaScript ile yapılmaktadır. Sayfanıza CSS çağırdığınızda <link rel=”stylesheet” href=”stil.css”> ibaresini, script dosyası çağırdığınızda ise <script src=”script.js”> ibaresini kullanabilirsiniz. Öncesinde type özelliği de bulunmaktaydı fakat HTML5 ile birlikte belirtilmesine gerek duyulmamaktadır.
•Html5’in en önemli getirilerinden biri de semantik etiketlerin artmasıdır (header, nav, section, article, aside, footer vb.). Öncesinde bu yapıların oluşturulmasında div kullanılırken artık semantik etiketlerde işe koşulabilir.
•Form elemanlarında da birçok değişim meydana gelmiştir. Yeni eklenen etiketlerden biri datalist elemanıdır. Bu eleman sayesinde html tarafında veri listesi oluşturup, bir input elemanına atayabilirsiniz. <output>, <keygen> ve input tipleri (e-mail, range, tel vb.) form elemanlarındaki değişimlere örnektir.
•Html5 ile birlikte sayısal verilerinizi görselleştirebilirsiniz. Bunun için <progress> ve <meter> elemanlarını kullanabilirsiniz. Bu elemanlar belirlediğiniz değerin maksimum değere göre bulunduğu konumu bir çubuk üzerinde göstermektedir.
•Sayfanızda görsel olarak açılıp kapanabilen metin alanı oluşturabilirsiniz. Bunun oluşturulması için <details> ve <summary> etiketlerini kullanabilirsiniz. <summary> etiketi başlığı, <details> etiketi ise içeriği göstermektedir. Başlığın başında yer alan simge metnin açık veya kapalı olduğunu gösterir.
•Sayfanızda video ve ses eklemek istediğinizde <video>, <audio>, <embed> ve <source> elemanlarıyla karşılaşırsınız. <video> elemanı ile video, <audio> elemanı ile ses ekleyebilirsiniz. Bu elemanların içerisinde <source> etiketini kullanarak kaynak eklemiş olursunuz. Örneğin; <source src=”ses.mp3”>. Embed elemanıyla ise dışardan eleman ekleyebilirsiniz. Html, video, ses vb. elemanları sayfaya entegre edebilirsiniz. Fakat html eklerken iframe, video eklerken video, ses eklerken audio etiketlerini eklemek daha doğru olacaktır.
•Günümüzde HTML5 ile oyun ve animasyon geliştirme işlemleri de yapılmaktadır. Buna yönelik yeni html etiketleri bulunmaktadır. Canvas elemanı oyun ve animasyonların geliştirilmesinde kullanılabilen bir elemandır. Çalışmanızı javascript ile destekleyerek oyun ve animasyon geliştirebilirsiniz.