5-Hafta Genel Sayfa Yapısı

Transkript

1 5-Hafta Genel Sayfa Yapısı Paragraf Oluşturma Metin Biçimlendirme Referans ve Alıntıların Belirlenmesi Metinlerin Vurgulanması Kısaltma ve Terimlerin Belirtilmesi Alt ve Üst Simge Kullanımı

2 Uİ-UX NEDİR? User Experience/Kullanıcı Deneyimi User Interface/Kullanıcı Arayüzü

3 Paragraf Oluşturma Web sayfasında en çok yer alan öğelerden biri paragraflardır. Arama motorlarının en sevdiği içerik metinler olduğu için metin ve paragraflar üzerinde önemle durulmalı ve mümkün mertebe semantik HTML komutları kullanılmalıdır. Paragraflar genelde <p> tagı içine yazılır. <p> tagı zaten semantik bir HTML komutudur ve arama motorlarına içeriğin bir metin öğesi olduğunu bildirir bu yüzden seo açısından çok önemlidir. Paragraflara id özelliği kullanılarak benzersiz bir isim verilebilir ve bu isimle değişik CSS yada Javascript komutları uygulanabilir. Ayrıca class özelliği kullanılarak da belli bir ada sahip CSS komut-grubu uygulanabilir. Bunun yanında, style özelliği ile doğrudan HTML tagının içine CSS komutu yazılarak biçimlendirme yapılabilir. Örnek kod aşağıdaki gibidir; <h1>w3c Kimdir?</h1> <h2>w3c' nin Anlamı</h2> <p>dünya çapında ağ birliği (World Wide Web Consortium) yada kısaca W3C Ekim 1994'te Ağ'ın mucidi Tim Berners Lee TARAFINDAN MIT ve CERN bünyesinde kurulmuş uluslararası dünya çapında ağ (WWW)standartlarını belirleyen örgüttür. </p> <h2>w3c'nin Amacı Nedir?</h2> <p>w3c webin standartlarını belirleyen bir örgüttür. Bu örgütün temel amacı HTML dilinin devamını sağlamak amacıyla HTML çıktılarının bütün tarayıcılarda ve cihazlarda aynı çıktıyı vermsini sağlamaktır.</p>

4 Paragraf Oluşturma Eğer varsayılan ayarlarda herhangi bir değişiklik yapmazsanız paragraflar arasında otomatik olarak belli bir mesafe boşluk bırakılır. Aşağıdaki kodları çalıştırırsanız pencereyi daraltırsanız paragrafın satır sayısının arttığını görebilirsiniz, çünkü satıra sığmayan kelimeler otomatik olarak aynı paragrafın alt satırına gönderilir. <h1>w3c Kimdir?</h1> W3C' nin Anlamı <p>dünya çapında ağ birliği (World Wide Web Consortium) yada kısaca W3C Ekim 1994'te Ağ'ın mucidi Tim Berners Lee TARAFINDAN MIT ve CERN bünyesinde kurulmuş uluslararası dünya çapında ağ (WWW)standartlarını belirleyen örgüttür. </p> W3C'nin Amacı Nedir? <p>w3c webin standartlarını belirleyen bir örgüttür. Bu örgütün temel amacı HTML dilinin devamını sağlamak amacıyla HTML çıktılarının bütün tarayıcılarda ve cihazlarda aynı çıktıyı vermsini sağlamaktır.</p>

5 <p> 1996 yılında kurulan <strong>bilimsel Akademi</strong>, o günden bu güne güçlü <u> bilgi birikimi ve tecrübesiyle </u> <strong>"bilişim"</strong> konusunda hizmetlerine <em>kendi binasında </em> devam etmektedir.</p> </p> Metin Biçimlendirme HTML5 Sürümünde metin biçimlendirme(boyut,renk,font değiştirme,hizalama) işlemleri hernekadar CSS ile yapılıyor olsada, kalınlaştırma veya eğme gibi bazı işlemleri HTML5 komutları ilede yapabilirsiniz. Metinleri kalınlaştırmak için: <strong> (SEO İçin en uygun tag) Metinleri eğik yapmak için: <i> veya <em> tagı (Seo için en uygun olanı <em>) Metinlerin altını çizmek için: <u> tagı kullanılabilir Aşağıdaki örnekte bu taglar bir paragraf içinde kullanılmıştır.

6 Referans ve Alıntıların Belirtilmesi Bir kişinin, firmanın, kurumun, oyunun, kitabın, gazetenin, filmin v.b nesnelerin adını vurgulamak veya referans vermek için <cite> komutunu kullanabilirsiniz. Aşağıdaki kodlarda <cite> komutuna örnek görebilirsiniz; <h1>atatürk Hakkında</h1> <p>mustafa Kemal Atatürk <cite>19 Mayıs 1881, Selânik,</cite> Türk ordu subayı, mareşal ve Türkiye'nin ilk cumhurbaşkanı. Türkiye Cumhuriyeti'nin kurucusu olarak itibar görmektedir. 1934'te <cite>türkiye Büyük Millet Meclisi</cite> tarafından kendisine ''Türklerin atası'' anlamına gelen Atatürk soyadı verilmiştir.</p>

7 Metinlerin Vurgulanması Bazı durumlarda metinleri daha çekici hale getirebilmek için üstünü sanki fosforlu kalemle çizmiş gibi yapabilirsiniz. Böyle bir işlem için <mark> tagı kullanılır. Bu tag sayesinde önemli metinleri vurgulayıp daha görünür hale getirebiliriz. Aşağıdaki kodlarda <mark> kodunu kullanarak bazı metinlerin vurgulu yapılmasını görebilirsiniz. <h1>atatürk Hakkında</h1> <p><mark>mustafa Kemal Atatürk</mark> 19 Mayıs 1881, Selânik, Türk ordu subayı, mareşal ve Türkiye'nin ilk cumhurbaşkanı. Türkiye Cumhuriyeti'nin kurucusu olarak itibar görmektedir. 1934'te Türkiye Büyük Millet Meclisi tarafından kendisine <mark>''türklerin atası''</mark> anlamına gelen Atatürk soyadı verilmiştir.</p>

8 Kısaltma ve Terimlerin Belirtilmesi Web sayfalarının içeriklerinde A.B.D A.B- İ.M.Ü gibi bir çok kısaltmalar kullanılır. Bu kısaltmaların anlamlarını açıklamak için <abbr> tagını kullanabilirsiniz. Aşağıda <abbr> tagına örnek bulabilirsiniz; Mouse ile üzerine geldiğiniz titledaki açıklama çıkacaktır. <h1>atatürk Hakkında</h1> <p><abbr title="mustafa Kemal Atatürk">M.K.A </abbr> 19 Mayıs 1881, Selânik, Türk ordu subayı, mareşal ve Türkiye'nin ilk cumhurbaşkanı. Türkiye Cumhuriyeti'nin kurucusu olarak itibar görmektedir. 1934'te Türkiye Büyük Millet Meclisi tarafından kendisine ''Türklerin atası'' anlamına gelen Atatürk soyadı verilmiştir.</p>

9 Alt Üst Simge Kullanımı Metinlerinizde alt ve üst simgeler oluşturmak için sırasıyla <sub> ve <sup> tagları kullanılır. Alt simge ana metnin hemen altında bir metin oluştururken üst simge metnin hemen üzerinde oluşturur. Aşağıdaki kodlarda örnekleri bulabilirsiniz; <p> x ₁=10, y₁=5 <br> a=x ²*4<br> b=x ²*4<br> </p>