HTML 5 NEDİR?

1. HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html Editor: Notepad WebMatrix Dreamweaver VisualStudioCommunityEdition

2. Profesyonel Editor Avantajları • Kodlama yaparken Auto-Complete özelliği sağlar. • WebMatrix ücretsizdir

3. Neden Ana Sayfa İsmi İndex.html Olur?

4. İlk Uygulama

5. Başlıklık Elementleri

6. Başlıklık Elementleri

7. Başlıklık Elementleri • Not: başlıklar birer bir standarttır. h1’den daha büyük yazı yazmak için stilleri kullanabiliriz. Sınır tam anlamıyla programcıya kalmıştır.

8. Metin Elementleri Yazıları ekranda farklı olarak göstermeyi sağlar. Kendi fikir ve düşüncelerimizi en doğru şekilde yansıtabilmesi için hepsi ayrı ayrı görevler almıştır. P strong Span mark Divsmall Em br

9. Metin Elementleri

10. Yorum Ekleme - Comments • Yorumlar, yazılan kodun daha kolay okunmasını sağlamaktadır. Yorumlar tarayıcılar tarafından yok sayılır, yani yorumu dikkate almaz. Yorum etiketi  • " <!-- " karakterleri ile açılır ve " --> " karakterleri ile kapatılır ve yorumumuz bu etiket içine yazılır.

11. Kaynak Kodu / SourceCode • Sayfaların kodlarını / kaynağını görebilmek için sayfa üzerindeyken sağ tıklayıp "Kaynağı Göster" diyebilirsiniz.

12. Liste Elementleri Sıralı Liste(Orderedlist) • ol • li • 1,2,3,… • a,b,c… • A,B,C,… • I,II,III,IV,…

13. Liste Elementleri Sırasız Liste(Unorderedlist) • ul • li • Yuvarlak, kare,baklava,…

14. Liste Elementleri

15. Link Elementleri

16. Link Elementleri • Text-decoration: none = Linke tıklama işleminden sonra altı çizili özelliğini kaldırır. Style ayarı yaptığımızdan, <style> tagleri içersinde yer alır. • Target: “_blank” = Linke tıkladığımızda sayfayı farklı bir sayfada açmamızı sağlar.

17. Link ve Resim Elementleri

18. Link ve Resim Elementleri Eğer resimleriniz web sayfanızın bulunduğu klasörden farklı bir yer de bulunuyor ve bulunduğu konum üst bir klasörde ise İmgsrc=“../” şeklinde erişmemiz mümkündür

19. Link ve Resim Elementleri

20. Link ve Resim Elementleri Not: İmage için anlatılan kurallar, linkler içinde geçerlidir. Hedef sayfaya erişim sağlarken a href=“../” mantığı ile yapılabilir. Uygulama: Resim için yaptığımız uygulamanın bir değişiğini sayfalar içinde yapınız.

21. Formlar ile Bilgi ve Giriş • Input • Text • Password • Number • Tel • E-mail • url • Date • Time • Submit • Textarea

22. Formlar ile Bilgi ve Giriş

23. Formlar ile Bilgi ve Giriş • autofocus="true" = Bu özellik sayfa ilk yüklendiğinde, klavyeden herhangi bir tuşa bastığımızda otomatik olarak yazılacak alanın belirlenmesinde kullanılır. • Value=“” bütün typelar da kullanılır. Amaç yazılan kutuda sayfa ilk açıldığında varsayılan olarak istenilen değerin gözükmesini sağlar.

24. Combobox ile Seçim • Select • Option • Optgroup • Label • Value • selected

25. Combobox ile SeçimÇoktan Tek Seçmeli

26. Seçim ElementleriÇoktan çok veya Hepsi görünür seçmeli • Checkbox • İd • Name • Checked • Radio • İd • name

27. Seçim ElementleriÇoktan çok veya Hepsi görünür seçmeli

28. Seçim ElementleriÇoktan çok veya Hepsi görünür seçmeli • Tarayıcılar, ekranda gördükleri yazı karakterlerini farklı yorumlayarak birbirlerinden farklı büyüklükte gösterebilir. Eğer belli bir standart büyüklüklerinde ve bütün tarayıcıların aynı yorumu getirmesini istiyor isek, <h4,h3..> gibi taglerini kullanmamız gereklidir. • checked : varsayılan olarak checkbox kutusunun seçili olarak gelmesini sağlar

29. Video ve Ses • Video • Src • Loop • Autoplay • Controls • Poster • Audio • Src • Loop • controls

30. Video ve Ses • <!--Burada sadece genişlik değeri yazıldı. Bu yüzden yükseklik değeri otomatik olarak hesaplanır. Eğer manuel olarak girmek istersek yükseklik değerini de girebiliriz. Fakat en boy oranı tutmaz ise kalite olarak bozuk görülme ihtimalini unutmamız gerekiyor.Controls ise:başlatma, ileri geri sarma,ses açma kapama, ekranı kaplama özelliklerinin kullanılmasını sağlar autoplay: bu komutu eklediğimizde, sayfa yüklenir yüklenmez videonun başlamasını sağlar.-->

31. Video ve Ses • Autoplay özelliği kaldırması gerekiyor. Aksi halde eklediğimiz resmi hızlı geçer ve bir anlamı kalmaz. • Poster: Videoya ya poster eklememizi sağlar • Loop: Bu komut videonun sürekli olarak başa dönerek devam etmesini sağlar

32. Video ve Ses

33. <meta> Etiketi • <meta> etiketi ile bir web sayfasını yada sitenin arama motorları için bilgilerin tanımlanmasını sağladığı gibi, içeriğin kodlama biçimini de tanımlar. • 1- <meta name=“description” content=“Blmyo Sitesi”/> Arama motorlarına bilgi verme amacını taşır. 2-<meta name=“keywords” content=“HTML,HTML5,CSS2,CSS3”/> Bir web sayfasının içeriğini temsil eden ve aralarına virgül konularak tanımlanan anahtar kelimelerini arama motorlarına tanıtmamızı sağlar.

34. CSS3(CascadingStyleSheets) • Stil şablonları olarak tanımlanan bu kodlama tekniği, HTML elementlerinin daha işlevsel özellikler kazanması için kullanılır. Tasarım tamamen CSS ile yapılmaktadır. • CSS kuralı bir seçici ile bu seçicinin sınırlarını gösteren { } süslü parantezler arasındaki CSS özelliklerinin tümüne denir.

35. CSS3(CascadingStyleSheets) • Body{ color:red • } Bu kurala göre sayfanın yazı rengi kırmızı olacaktır. Sayfa düzeyind stil tanımı, sayfanın <head> kısmında <style> elementi bildirimi ile yapılır. <style> elementi başlangıç ve bitiş etiketleri vardır ve kullanımı zorunludur.

36. CSS3(CascadingStyleSheets)Element Düzeyinde Stil Tanımı • Style niteliği alabilen her elementin bildirimi sırasında yapılabilir. • <p style=“color:red”> metin</p>

37. CSS3(CascadingStyleSheets)1. Blok Düzeyi Elementleri Bloklar halinde alt alta gelecek bir biçimde görüntü oluşturur. Bu duruma blok denir. <p> ,<h1,h2,..> elementini bu duruma örnek verebiliriz. Marginleri vardır. Margin(Dış Boşluk) Blok düzeyi elementlerin bir çoğu kendisine atanan içeriği görüntülerken bir dış boşluk bırakırlar.

38. CSS3(CascadingStyleSheets)2. Satır Düzeyi Elementleri <em>, <b>,<i>,<strong> Bu elementler içeriğii kaydırmaz, içerik bulunduruğu yerde biçimlendirilir. Margin dış boşluk bırakmazlar.

39. CSS3(CascadingStyleSheets)Kutu Modelini Anlamak Bir elementin kutu modelinde margin(dış boşluk), padding(iç boşluk) ve border (çerçeve kalınlığı) ile tanımlanmaktadır.

40. CSS3(CascadingStyleSheets)2. Satır Düzeyi Elementleri <em>, <b>,<i>,<strong> Bu elementler içeriği kaydırmaz, içerik bulunduruğu yerde biçimlendirilir. Margin dış boşluk bırakmazlar.

41. CSS3(CascadingStyleSheets)Dahili CSS Uygulaması

42. CSS3(CascadingStyleSheets) Harici CSS Uygulaması

43. CSS3(CascadingStyleSheets) Stilin bütün taglara uygulandığını görebiliyoruz.

44. CSS3(CascadingStyleSheets) Class tanımlaması yaparak istediğimiz tagların farklı stiller almasını sağlamış olduk

45. CSS3(CascadingStyleSheets) İd tanımlaması ile tekil olma özelliği ile farklı stiller oluşturmak için kullanılır

46. CSS3(CascadingStyleSheets) • Not: Klavye den CTRL+K+D tuşlarına basar isek, web matrix kodların düzenini yeniden ayarlayarak doğru hale getirir.

47. CSS3(CascadingStyleSheets) Padding: ustten başlar saat yönünde değerler gireriz. Text-shahow: gölge için kullanılır. İlk değer gölgenin soldan ne kadar uzakta olduğu, ikincisi Üstten ne kadar uzakta olduğu, üçüncüsü koyuluğu ve son olarak renk işlemi yapılır.

48. CSS3(CascadingStyleSheets)

49. CSS3(CascadingStyleSheets) • Solid: düz çizgi sağlar • Dashed: Kenarları kesikli yapar • Dotted: Kenarları noktalı yapar • Padding: boşluk olmasını istemediğimiz bölümlere 0px girmemiz gereklidir. • border-radius değeri yükseklik ve genişlik değerinin tam yarısı ise, resim daire haline gelir.

50. 3.Hafta