Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
YayınlayanIlker Uygun Değiştirilmiş 6 yıl önce
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
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 Div small 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 / 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…
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
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 İmg src=“../” ş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 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 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 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 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(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 <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(Cascading Style Sheets) 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(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. <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(Cascading Style Sheets) 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(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
<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(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
CSS3(Cascading Style Sheets)
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
CSS3 ANİMASYON
56
Transparan Uygulaması
57
Transparan Uygulaması(devam)
58
Transparan Uygulaması(devam)
59
Overflow(TAŞMA)
60
HTML5 TAGLERİ İLE SİTE TASARIM
61
HTML5 TAGLERİ İLE SİTE TASARIM
62
HTML5 TAGLERİ İLE SİTE TASARIM
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 yani 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 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:link Ziyaretten önce
A:visited Ziyaretten sonra(hoverin tersi) A:hover Mouse üzerinde gezinirken A:active Ziyaret için tıklandığı sürece
80
Not Komutu
81
7.Ders
82
Üçgen Yapımı
83
Örnek Uygulama
84
Örnek Uygulama-Cevap
85
Örnek Uygulama
86
Örnek Uygulama-Cevap
87
9.Hafta
88
Örnek Uygulama-1 Yukarıda görülen kutuların üzerlerine mouse ile gelindiğinde kutuların width değerlerinin hepsinde eşit oranda transition ile artmasını ve kırmızıdan farklı bir renge dönüşmesini sağlayınız. Mouse kutunun üzerinden ayrıldığında kutu yukarıda görüldüğü gibi ilk halini almasını transition ile sağlayınız.
89
Örnek Uygulama-1 <style> div { width: 100px; height: 100px;
background-color: red; -webkit-transition: width 2s; /* Safari */ transition: width 2s, background-color 2s; } div:hover { width: 300px; background-color: #d6d1d1; </style> </head> <body> <div></div><br> </body> </html>
90
Örnek Uygulama-2 Sağ taraftaki resme mouse ile gelindiğinde resmin aldığı durumu görmekteyiz. Sol taraftaki resim ise, bu resimlerin ilk halini göstermektedir. İki resminde ilk hali bordersiz(kenarlık yok) ve opacity düşük değerdedir. Yukarıdaki resimlerin üzerlerine gelindiğinde opacity değerleri 1.0 ve border eklenecek şekilde ayarlayınız.
91
Örnek Uygulama-2 <html> <head> <style> img {
<html> <head> <style> img { opacity: 0.4; filter: alpha(opacity=40); } img:hover { opacity: 1.0; filter: alpha(opacity=100); border: 3px solid blue; }</style> </head> <body> <h1>Transparan resimler</h1> <img src="1.jpg" width="150" height="113" alt=“resim"> <img src="2.jpg" width="150" height="113" alt=“resim"> </body> </html>
92
Örnek Uygulama-3 Bu siteyi HTML5 tagleri ile gerçekleştiriniz.
Not:Soruda Aside tag'ı eklenmemiştir ve bütün taglar alt alta geldiği için hesap yapmanııza da gerek yoktur. Burada dikkat edilmesi gereken noktalar; margin, padding, border ve background-color gibi özelliklerin yer almasıdır.
93
Örnek Uygulama-3
94
ANİMASYON-1 UYGULAMASI
95
Animasyon-1 Ekran Çıktısı
96
Animasyon-2
97
Animasyon-2 Çıktısı
98
Animasyon Devam Bu tanımları örnek ile birlikte yazdığımızda bir sayfaya yakın bir kod yığını ortaya çıkmaktadır. Bu kod yığınını azaltmak için ve daha kısa kod yazmak için animation tanımı tanımları azaltabiliriz. Bu tanımlama ile animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation- direction, animation-delay tanımlarını tek bir tanım içine almış oluruz. Örneğimiz göz önüne alırsak; .canCanli { animation-name: gelsinGitsin; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 2; animation-direction: alternate; animation-delay: 5s; } Tanımı yerine animation: gelsinGitsin 2s ease-in-out 2 alternate 5s; 6 satır kod tek satıra indi. Yukarıdaki sıra önemlidir; name, duration, timing function, count, direction, delay, and fill- mode. Her tanım birbirinden boşluk ile ayrılır. Sadece adı ve süresi yazılması gerekmektedir, diğer değerler isteğe bağlıdır.
99
Animasyon 3
100
Animasyon-4
101
Overlapping(Üst Üste Binme)
102
Eğer katmanları istediğimiz sıra ile göstermek istiyor isek her katmana sırasına göre sayısal değer atamalıyız. Yüksek değer alan katmanlar üstte düşük değer alan katmanlar ise altta kalacaktır. Buna göre istediğimiz görüntüyü elde etmek için z-index değerleri vermeliyiz.
103
10.Hafta Jquery
104
1.Uygulama
105
1.Uygulama Cevap
106
2.Uygulama
107
3.Uygulama(HTML-Jquery)
108
4.Uygulama
109
5.Uygulama
110
6.Uygulama
111
7.Uygulama Değişken ve Fonksiyon Uygulaması
112
11.Hafta Jquery
113
8.Uygulama
114
9.Uygulama
115
10.Uygulama
116
11.Uygulama
117
12.Uygulama(Hide-Show)
118
13.Uygulama-hide(speed,callback)
hiding/showing values: "slow", "fast", or milliseconds.
119
14.Uygulama(Toggle) Hide ve Show özelliklerinin bulunduğu bir fonksiyondur
120
15.Uygulama (CallBack)
121
Ornek-1 Çalışma
122
Ornek-1 Çalışma Cevap
123
jQuery Fading Methods fadeIn() fadeOut() fadeToggle() fadeTo()
124
jQuery Fading Methods jQuery fadeIn() Method
Syntax: $(selector).fadeIn(speed,callback); Efekt süresince isteğe bağlı olarak speed parametresini kullanabiliriz. Bu değerler: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the fading completes.
125
jQuery Fading Methods jQuery fadeIn() Method 16.Uygulama
Benzer bir sunumlar
© 2024 SlidePlayer.biz.tr Inc.
All rights reserved.