HTML DERSLERİ 7 dersimizde ID konusunu öğreniyoruz…
Bir önceki ders class konusunu inceledik. Class’lar belirli öğelere erişmek için kullanılır. Bir örnek ile hatırlayacak olursak;
Class’larda büyük / küçük harf duyarlılığı vardır. (Daima küçük harf önerilir). Eğer istersek, stil özelliklerini sadece bir bölüme de <span> sayesinde uygulayabiliriz. Burada sadece “bahar” kısmını değiştirmek istedik. <span> etiketi kendi başına bir şey ifade etmez. Ama içerisine değer girildiğinde onu uygular. Class’lar farklı isimlerde olabilir. Uygulanacak olan etiket veya farklı etiketlere birden fazla class uygulayabiliriz.
ID
ID yani kimlik, günlük yaşamdan örnek verecek olursak, tıpkı TC. kimlik numaranız gibidir. Kişiye özel ve sadece o numaraya sahip olan kişi kullanıp, işlem yapabilir.
Şu an ki stil konumuzda tıpkı bu mantıkta ilerler. ID, ismi “#” hashtag ile tanımlanır. Sayfa içerisinde tanımlanan ismin bir kez kullanılmasına izin verilir. Başka bir etikete aynı isim verilmez. Büyük / küçük harf duyarlılığı burada da vardır. İlk yaptığımız örnekten gidersek;
Kalıp olarak birbirlerine yakın kodlar kullanıldı. “#” hashtag karakterinin görevi, stili işaretlemektir. HTML sayfasında o öğeyi bulmamızı sağlar. Özetle, # ile stil ismi verildi ve id ile bu stilin uygulanması istenildi. (Eklenen resimlerin kodları Class için de geçerlidir.)
ID için tanımlanan ismi, başka yerde kullanamayız. Ona özel olduğu için buna izin verilmez. Burada Class daha sosyalken id biraz asosyal kalıyor. Eğer amacınız stil uygulamaksa Class daha verimli olur. ID kenara bırakılmış gibi olmaz. Çünkü kendisinin başka özellikleri de var. Yer İmi oluşturuyor. Örneğin; alışveriş sitesi yapıyorsunuz ve alt alta listelediğiniz kıyafet, ürünler ile uzun bir sayfa oldu. Kullanıcıya sayfa içerisinde gezinti kolaylığını sağlamak için Yer İşareti (imi) uygulayabiliriz.
HTML DERSLERİ 4 serisinde bu konuya küçük bir örnekle değinmiştik. <a href> etiketi site içinde ya da dışında gezinti yapmak için uygulanan link / url yazdığımız etiketti. Bunu burada kullanıyoruz çünkü sayfa içerisinde gezinti yapmamızda yardımı olacak. Çapa oluşturmak da denilir. Tıpkı içerisinde link varmış gibi “#sonagit” şeklinde isim veriyoruz. Hedefini belirtiyoruz. Hedefteki, kodların sonuna gelip id ile bunu kullanıcıya “sona geldin” şeklinde gösteriyoruz. Dikkat etmemiz gereken nokta, işaretleyeceğiniz yer ismi bir kez kullanılmalı. Bir tane adres olmalı ki gidilecek olan yer sabit olsun. ID konusunda farklı örnek çalışmaları konuyu daha iyi pekiştirmenizi sağlayabilir.
LANG
Lang (language): Dil, HTML kodları arasında görülen Lang etiketi, arama motorlarına yardımcı olmak için kullanılır. Amacı, oluşturmuş olduğunuz sayfanın veya HTML etiketlerinin dilini anlaması içindir. Arama motorları (Chrome, Opera, Safari, Firefox) belirtilen dile göre gerekli işlemleri gerçekleştirir. Bunu bütün sayfaya uygulayacağınız da: <html lang=”tr”> yazılır. Eğer sayfa içerisinde farklı dillerin olduğu bir içerik varsa o zaman: <p lang=”de”>Almanca</p> şeklinde yazılmalı. Bu konuda daha detaylı bilgi için bakabilirsiniz.
EMOJİ
UTF-8 (Unicode Transformation Format): Unicode dönüşüm biçimi. Unicode, evrensel kod yani klavyenizde görünmeyen ama kullanılabilen her karaktere bir değer verilir. Unicode ile oluşturulan metinler bilgisayarda anlamlaşır. Bunlara en basit örnek, klavyenizde sayıların olduğu kısıma bunlardan en yaygın kullanılanlar yerleştirmişlerdir. Bunlarda birini kullanmak istediğinizde diğer tuşlardan yardım almanız gerekir. Uygulayacağınız karakter için bastığınız tuşlar bilgisayar için anlamlı olur ve size sonucu verir. Biraz ileriye gittiğimizde emojiler için de bu geçerlidir. Burada tarayıcıya yardımcı olmak için uygulamak istediğimiz karakter kümesini bildirmek gerekir (<meta charset=”utf8″/>)
Örnek ile semboller;
Örnek ile emojiler;
Yüklediğiniz editörünüzde eğer bu kodlar ile semboller çıkmadıysa <head> etiketleri arasına <meta charset=”utf8″/> yazınız.
Eğer sayfada UTF-8′ den farklı bir karakter kümesi kullanılıyorsa, <meta charset=”ISO-9959-1″> şeklinde belirtilmelidir. Özel karakterler, siteyi daha canlı göstermenizde destekçi olurlar.
VIEWPORT
Görünüm alanı, kullanıcının yaptığınız siteyi görüntülediği alandır. Bu alan cihazlara göre değişiklik gösterir. sitenin düzeni, sizdeki gibi kullanıcıda doğru görüntülenmiyor olabilir. Bu sıkıntıyı çözmek için viewport kullanılır. HTML5’in getirdiği yenilikler arasında <meta> etiketi ile alan üzerinde yapılan bu değişikliğin önüne geçebiliriz. Bu sayede tarayıcı, sayfa boyutlarını ölçeklendirmesi girildiğini bilir ve onu uygular.
Uygularken; head etiketi içerisine, <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
width=device-width: Görüntülendiği cihazda sayfanın düzenini koruyarak gösterir.
initial-scale=1.0: Kullanıcın yakınlaştırma ve uzaklaştırma düzeyini ayarlar.
MULTIMEDYA: Web için sadece renk ve metin ile sınırlamayıp daha canlı hale getirilebilir. (Sitenin amacına uygun olarak) Web sitesindeki multimedya ses, video, müzik, vb. animasyondur. Videoları HTML’de oynatmanın en kolay yolu Youtube kullanmaktır. Uygulamak isterseniz medya konusunun detayı için bakınız…
<HTML5 > *Önemli Notlar*;
- Görüntüler için daima alt, yükseklik, genişlik belirtin. Çünkü tarayıcı yüklemeden önce görüntü için yer ayırır.
- <title> etiketi, sayfanın başlığını belirtir. Bu da SEO için önemlidir.
- Lang özelliğini ekleyin ve karakteri tanımlayın (<meta charset=”utf8″/>)
- Viewport özelliğini kullanın ki sitenizin kalitesi cihaz değişikliğine uğramasın.
Ayrıca oluşturacağınız site için hemen başlamak yerine önce bir plan oluşturmalısınız. Ne hakkında olacağını? Neden bu konuyu seçtiğinizi? Nereden başlayacağınızı? gibi soruları cevapladıktan sonra adım atmanız sizi daha planlı çalışmaya sevk eder. Böylelikle zihinsel ve fiziksel açıdan çok yorulmamış olursunuz. Bu da sizi bir sonraki proje için dinamik tutar. İşin zorluğu olsa dahi ne yapacağınızı bilmek daima iyi hissettirecektir. HTML serimizin son bölümünü paylaşmış olduk. Ama öğrenmenin sonu yok, gelişmeye devam!… Keyifli çalışmalar…
Yeni haber ve gelişmelerden geri kalmayın!
