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.

... konulu sunumlar: "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."— Sunum transkripti:

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 Visual Studio Community Edition

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

7 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. Pstrong Spanmark Divsmall Embr

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 kapatılır ve yorumumuz bu etiket içine yazılır.

11 Kaynak Kodu / Source Code 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(Ordered list) ol li 1,2,3,… a,b,c… A,B,C,… I,II,III,IV,…

13 Liste Elementleri Sırasız Liste(Unordered list) ul li Yuvarlak, kare,baklava,…

14 Liste Elementleri

15 Link Elementleri

16 Text-decoration: none = Linke tıklama işleminden sonra altı çizili özelli ğ ini kaldırır. Style ayarı yaptı ğ ımızdan, 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 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 İ mg src=“../” şeklinde erişmemiz mümkündür

19 Link ve Resim Elementleri

20 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 1.Text 2.Password 3.Number 4.Tel 5.E-mail 6.url 7.Date 8.Time 9.Submit Textarea

22 Formlar ile Bilgi ve Giriş

23 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 type lar 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 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, 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

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 Etiketi Etiketi 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- Arama motorlarına bilgi verme amacını taşır. 2- 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(Cascading Style Sheets) 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(Cascading Style Sheets) Body{ color:red } Bu kurala göre sayfanın yazı rengi kırmızı olacaktır. Sayfa düzeyind stil tanımı, sayfanın kısmında elementi bildirimi ile yapılır. elementi başlangıç ve bitiş etiketleri vardır ve kullanımı zorunludur.

36 CSS3(Cascading Style Sheets) Element Düzeyinde Stil Tanımı Style niteli ğ i alabilen her elementin bildirimi sırasında yapılabilir. metin

37 CSS3(Cascading Style Sheets) 1. Blok Düzeyi Elementleri Bloklar halinde alt alta gelecek bir biçimde görüntü oluşturur. Bu duruma blok denir., 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(Cascading Style Sheets) 2. Satır Düzeyi Elementleri,,, Bu elementler içeri ğ ii kaydırmaz, içerik bulunduru ğ u yerde biçimlendirilir. Margin dış boşluk bırakmazlar.

39 CSS3(Cascading Style Sheets) 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(Cascading Style Sheets) 2. Satır Düzeyi Elementleri,,, Bu elementler içeri ğ i kaydırmaz, içerik bulunduru ğ u yerde biçimlendirilir. Margin dış boşluk bırakmazlar.

41 CSS3(Cascading Style Sheets) Dahili CSS Uygulaması

42 CSS3(Cascading Style Sheets) Harici CSS Uygulaması

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

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

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

46 CSS3(Cascading Style Sheets) 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(Cascading Style Sheets) 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(Cascading Style Sheets)

49 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 CSS3(Cascading Style Sheets) P elementine farklı farklı özellikler tayin edildi. Paragraf sayısı birden fazla olmalıdır:

51 CSS3(Cascading Style Sheets) Linklerin hover özelli ğ i

52 CSS3 AN İ MASYON Hover’ın animasyondan farkını görebiliriz.

53 CSS3 AN İ MASYON Transition: ◦ İ lk de ğ er: Div elementinin hangi özelliklerinde de ğ işiklik olacak ise ve ben hangilerinde olmasını istiyor isek onların isimlerini yazıyoruz. ◦ İ kinci de ğ er: süre ayarlaması ◦ Not: Elemente ait di ğ er özellikllerin de animasyon ile etkilenmesi için, transition komutuna “,” koyarak işleme devam edebiliriz

54 CSS3 AN İ MASYON

55 RES İ M GALER İ S İ UYGULAMASI

56 Transparan Uygulaması

57 Transparan Uygulaması(devam)

58

59 Overflow(TAŞMA)

60 HTML5 TAGLER İ İ LE S İ TE TASARIM

61

62

63 D İ SPLAY ÖZELL İĞİ P elementi

64 Display uygulamasının browser görüntüsü

65 Div ile Display Uygulaması

66 Div ile Display Uygulaması Browser Çıktısı

67 6.DERS

68 Box-Sizing Özelli ğ i: Kutu modelinde margin, padding ve border de ğ erleri kutunun Genişli ğ ine eklenerek esas genişlik de ğ erinin bulundu ğ unu ve kutuların genişli ğ inin Bu de ğ erlere göre de ğ işti ğ ini açıklamıştık. Burada bazı özelliklerin hesaba katılmayaca ğ ı durumdan bahsedece ğ iz.

69 Box-Sizing Browser Çıktısı

70 Uygulamayı Yapınız

71 Bir önceki uygulamanın cevabı

72 Uygulamayı yapınız

73 Bir önceki uygulamanın cevabı

74 Css Position nedir? nasıl kullanılır? Position de ğ erleri kullanılmadan yaptı ğ ımızda oluşan görüntüyü görmekteyiz.

75 Css Position nedir? nasıl kullanılır? 1-position:absolute; Görmüş oldu ğ unuz bu kutular float:left; komutu ile yan yana sıralanmış kutulardır. şimdi üçüncü kutuya position:absolute özelli ğ ini verelim ve neler olacak görelim. E ğ er kutuUc class’ımıza sadece position:absolute komutunu verirsek top ve left komutları otomatik olarak 0 de ğ eri alır ve bir üstteki div’i de position:relative; olarak de ğ erlendirir bu yüzden bulundu ğ u div’in sol üst başlangıç noktasına gider. Ama biz kutuUc divimizi istedi ğ imiz yere koymak istiyoruz o yüzden left: ve top: komutlarına de ğ erler verece ğ iz position:absolute; top:50px; left:300px; kutuUc’ün class’ına bu position:absolute; top:50px; left:300px; de ğ erini verdik burada top de ğ eri sayfanın en tepesinden başlar, left de ğ eri ise sayfanın en solundan başlar

76 Css Position nedir? nasıl kullanılır? 2-Position: relative; En önemli kısım burasıdır yani Position:relative. Relative komutu ilişkilendirme komutudur yaniPosition:relative. kutuUc’ü kutu div ile ilişkilendiriyoruz ve kutuUc div’inin başlangıç noktaları kutu div’i ile başlıyor. Hemen bir örnekte bu komut için verelim kutuUc div’inin bir üstündeki yani onu içine alan div’e position:relative; de ğ erini verece ğ iz sonra ise biz gene kutuUc div’i ile ilişkilendirerek yerleştirmemizi yapaca ğ ız.

77 Css Position nedir? nasıl kullanılır? 3-Position: fixed; Position:fixed; Position fixed verdi ğ imiz div çakılı bir şekilde orada kalıyor hiç bir şekilde oynama yapmıyor.Ama bu özelli ğ i ie6 desteklemiyor.

78 Menu Yapımı

79 Link Elementleri A:linkZiyaretten önce A:visitedZiyaretten sonra(hoverin tersi) A:hoverMouse üzerinde gezinirken A:activeZiyaret için tıklandı ğ ı sürece

80 Not Komutu

81 Üçgen Yapımı

82 Örnek Uygulama

83 Örnek Uygulama-Cevap

84 Örnek Uygulama

85 Örnek Uygulama-Cevap