- 4 May 2022
- 80
- 33
PROJE ŞABLONUNUN OLUŞTURULMASI
Öğrenilenleri tekrarlamak ve yeni kodlar öğrenmek amacıyla örnek bir site şablonu üzerinde çalışılacaktır.
İlk olarak şimdiye kadar öğrenilenlerden hareketle, yazılabilecek kodlar, Resimdeki gibi bir görüntü elde etmek için yeterli olmayacaktır. Bunun için HTML5 kodları ile sitenin ana çerçeveleri oluşturulmaya çalışılacaktır. Daha sonraki ünitede ise CSS kodları kavrandığında site resimdeki gibi bir görüntüye kavuşturulabilecektir.
Site Başlığı Ve Dil Kodlaması
Yeni bir kodla karşılaştık. <head> etiketi arasına yazılan kodlar, sayfanın genel ayarlarının yapıldığı bölümdür. Bu etiket içerisinde,
• <title> ile tarayıcı sekmesinde sayfanın başlığını görüntüleyebiliriz.
• <meta> ile hangi dil içeriğinin kullanılacağını belirtebiliriz (UTF-8 Türkçe karakterlerin de desteklenmesini sağlar.).
• <style> ve <script> ile farklı dosyaları sayfaya bağlayabiliriz. Bu konuya ilerleyen ünitelerde değinilecektir.
Site Banner’ı ve Gezinim Linklerinin Oluşturulması
Daha önceden div elementinin anlamsal olmayan yani içeriği her türden element alabilen bir element olduğu bilinmektedir. Burada id = “hgroup” olan bir div elementi oluşturulmuştur. Bu bölüm ilerleyen aşamalarda sitenin logo ve açıklamasının bulunduğu yer olacak.
Yeni Kodlar
• Form etiketi: Kullanıcıdan veri girişi almamızı sağlayan, tüm elementleri bir arada toplayan çerçevedir.
• Fieldset: Birbiri ile ilişkili elementleri bir arada toplayan bir çerçevedir.
• ul ve li: Madde işaretli metinler oluşturmamızı sağlayan elementlerdir. Birlikte kullanılan; <ul> madde işareti konulacak metin gruplarını, <li> ise her bir maddeyi içerir.
Kodlayıcı Görevi
• Kullanıcının veri girişi yapmasına olanak sağlayan kaç tür <input> nesnesi vardır?
• İpucu: <input type=”?”> • Madde imlerinin görünümünü nasıl değiştirebiliriz?
• İpucu: <ul type=”?”>
Sitenin Slayt Resmi ve Ana İçerik Bölümünün Oluşturulması
a) Sitenin Slayt ReVsminin Oluşturulmas
b) Sitenin Ana İçerik Bölümünün Oluşturulması
Yeni Kod!
Resim Galerisi » şeklinde bir görüntü nasıl elde edilir? Bunun için kodlara dikkat etmek gerekir.
<figcaption><a href="#">Resim Galerisi »</a></figcaption> Görüldüğü üzere » simgesi » kodu ile elde edilir. Bu türden kodlar varlık isimleri olarak adlandırılır. Benzer şekilde birçok simgenin varlık ismi vardır.
Sitenin Alt Bilgi Bölümünün Oluşturulması
Herkese İyi Forumlar Dilerim.
Son düzenleme: