İleri Web Tasarım Teknikleri. Öğr. Gör. Gökhan TURAN Mehmet Akif Ersoy Üniversitesi Gölhisar Meslek Yüksekokulu

Save this PDF as:
 WORD  PNG  TXT  JPG

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "İleri Web Tasarım Teknikleri. Öğr. Gör. Gökhan TURAN www.gokhanturan.com.tr Mehmet Akif Ersoy Üniversitesi Gölhisar Meslek Yüksekokulu"

Transkript

1 İleri Web Tasarım Teknikleri Öğr. Gör. Gökhan TURAN Mehmet Akif Ersoy Üniversitesi Gölhisar Meslek Yüksekokulu

2 İçerik JavaScript Cascading Style Sheets (CSS) HTML CSS3 İle Gelen Yenilikler HTML5 İle Gelen Yenilikler JQuery Search Engine Optimization (SEO)

3 JavaScript JavaScript, bir web script (betik) dilidir. Tarayıcılarda (Web Browser) çalışır. JavaScript ı web sayfasında kullanmak demek, web sayfadaki HTML kodlarının arasına JavaScript kodları gömmek demektir. JavaScript kodları <script> </script> etiketleri arasına yazılır. Script etiketi içerinde script dili ve tipi belirtilmelidir. <script language="javascript" type="text/javascript"> //Kodları bu alana yazmamız gerekir. </script>

4 JavaScript Kodlarını HTML Sayfası İçerisine Ekleme Yöntemleri JavaScript kodlarını dört farklı yere ekleyebilmekteyiz. 1. JavaScript kodları <head> etiketleri arasına yazılabilir. <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>başlıksız Belge</title> <script language="javascript" type="text/javascript"> //Kodları bu alana yazmamız gerekir. </script> </head>

5 JavaScript Kodlarını HTML Sayfası İçerisine Ekleme Yöntemleri 2. JavaScript kodları <body> etiketleri arasına yazılabilir. <body> <script language="javascript" type="text/javascript"> //Kodları bu alana yazmamız gerekir. </script> </body>

6 JavaScript Kodlarını HTML Sayfası İçerisine Ekleme Yöntemleri 3. JavaScript kodları dışarıda (.js) uzantılı bir dosya içerisinde saklanıp, HTML sayfa içerisine çağrılabilir. <head> <title>başlıksız Belge</title> <script src="ornek.js"> //Bu alana javascript kodu yazılmaz. </script> </head> Not: Kaynak dosyasının uzantısı.js olmalıdır. Src parametresi ile dosyanın yol tanımlanması yapılmalıdır. Kaynak dosya <script> </script> etiketlerini içermez.

7 JavaScript Kodlarını HTML Sayfası İçerisine Ekleme Yöntemleri 4. HTML içerisindeki olay yönlendiricilere JavaScript kodları yazabiliriz. <body> <input type="button" value="tıkla" onclick="alert('merbaha GMYO')"/> </body> onclick olay yönlendiricisine Javascript kodu yazıldı. Dikkat edilirse <script> etiketleri kullanılmadı. Direk eventhandler içerisine Javascript deyimi yazıldı.

8 JavaScript Kodlarını HTML Sayfası İçerisine Ekleme Yöntemleri 4. HTML içerisindeki olay yönlendiricilere JavaScript kodları yazabiliriz. Javascript olay yönlendiricisine fonksiyon da atayabiliriz. <script language="javascript" type="text/javascript"> function mesaj() { alert("merhaba Gölhisar"); } </script> <body> <input type="button" value="tıkla" onclick="mesaj()"/> </body>

9 JavaScript Değişkenler Veri Türleri Javascript te değişkenin veri türü değişkene değer atandığında otomatik olarak seçilir. Değişken isimleri «var» ile tanımlanır. Tanımlama yapılırken veri türü belirtilmez. <script language="javascript" type="text/javascript"> var adsoyad="gökhan TURAN"; // adsoyad değişkeninin veri türü string dir. var sayi=61; //sayi değişkeninin veri türü number dır. var msayi="61"; //sayi değişkeninin veri türü string dir. var metin=""gmyo; //sayi değişkeninin veri türü string dir. </script>

10 JavaScript Değişkenler Number Sayısal veri türüdür. <script language="javascript" type="text/javascript"> var sayi=61; // Tam sayı var sayi=2.3; // Ondalıklı sayı var sayi=023; // 8 tabanında sayı Var sayi=0x56; // 16 tabanında sayı </script>

11 JavaScript Değişkenler Boolean Mantıksal veri türüdür. <script language="javascript" type="text/javascript"> var a=true; var a=false; </script>

12 JavaScript Değişkenler String Karakter katarı (metin, metin grupları) veri türüdür. Bu veri türünde sayısal değerle de string olarak tanımlanabilir. <script language="javascript" type="text/javascript"> var ad="gökhan"; var soyad="turan"; var sinif="12a"; </script>

13 JavaScript Değişkenler Diziler (Array) Bir veri türü altında toplanmış bir grup veriyi sıralı bir şekilde saklamak için kullanılır. <script language="javascript" type="text/javascript"> var sayi=new Array (1,2,3,4,5); Var dizi=new Array("12", "hüseyin", "abc45",56, 61.45, 89); </script>

14 JavaScript Değişkenler Undefined Bir değişkeni var değişkeni ile tanımlayıp değer atamadan bırakırsak, bu değişkenin veri tipi undefined (tanımlanmamış) olur. Çünkü Javascript te veri tipleri değer atanınca belirlenir. <script language="javascript" type="text/javascript"> var adi; document.write(adi); </script> Örnek İçin Tıkla. Sayfa çalıştırıldığında tarayıcıda undefined yazacaktır.

15 JavaScript Değişkenler Null Eğer tanımladığımız değişkenin başlangıç değeri yoksa ve hata vermesini istemiyorsak null veri türünü kullanabiliriz. <script language="javascript" type="text/javascript"> var a=null; var b=61; var c=a+b; document.write(c); </script> Sonuç c=61 olacaktır. Null karşılığı 0 (sıfır) dır. Örnek İçin Tıkla.

16 JavaScript Değişkenler Null Eğer tanımladığımız değişkenin başlangıç değeri yoksa ve hata vermesini istemiyorsak null veri türünü kullanabiliriz. <script language="javascript" type="text/javascript"> var a=null; var b="teknolojitopluluğu"; var c=a+b; document.write(c); </script> Sonuç c=nullteknolojitopluluğu olacaktır. Örnek İçin Tıkla.

17 JavaScript Veri Türü Dönüşümleri Javascript te de kodlar sıralı işlendiği için değişkenin veri türü en sondaki değişkenin veri türü ne ise o olur. Javascript bizlere bu konuda esnek bir yapı sunduğu gibi dikkatli olmamızı da gerektirmektedir. <script language="javascript" type="text/javascript"> var a=true; var a=15; var a="www.mikroc.org"; document.write(a); </script> Ekrana yazacaktır. Örnek İçin Tıkla.

18 JavaScript Veri Türü Dönüşümleri Aşağıdaki örneğe baktığımızda a değişkeninin veri türü string, b değişkeninin veri türü number olarak belirlenmiş. Javascript için + operatörü öncelikli olarak birleştirme operatörüdür. Eğer + operatörünün solunda ya da sağında bir string ifade varsa javascript birleştirme işlemi yapar ve number olarak tanımlanmış b değişkenini string e çevirir. <script language="javascript" type="text/javascript"> var a="turan"; var b=15; var c=a+b; document.write(c); </script> Ekrana turan15 yazacaktır. Örnek İçin Tıkla.

19 JavaScript Veri Türü Dönüşümleri Aşağıdaki örneğe baktığımızda a değişkeninin veri türü string, b değişkeninin veri türü number olarak belirlenmiş. Javascript için * operatörün tek görevi aritmetiksel işlem yapma, yani çarpma işlemi yapmaktır. Veri türü farklılığı olduğu için ekrana NaN (Not a Numeric) hatası verecektir. <script language="javascript" type="text/javascript"> var a="5b"; var b=15; var c=a*b; document.write(c); </script> Ekrana NaN yazacaktır. Örnek İçin Tıkla.

20 JavaScript Veri Türü Dönüşümleri parseint() Fonksiyonu Değişkeni tamsayıya dönüştürür <script language="javascript" type="text/javascript"> var a="61"; //String bir ifade var b=32; // Sayısal bir ifade var toplam=parseint(a) + b; alert(toplam); </script> Ekrana 93 yazacaktır. Örnek İçin Tıkla.

21 JavaScript Veri Türü Dönüşümleri parsefloat() Fonksiyonu Değişkeni ondalıklı sayıya dönüştürür <script language="javascript" type="text/javascript"> var a="3.14"; //String bir ifade var b=32; // Sayısal bir ifade var toplam=parsefloat(a) + b; alert(toplam); </script> Ekrana yazacaktır. Örnek İçin Tıkla.

22 JavaScript Veri Türü Dönüşümleri Number() Fonksiyonu String() Fonksiyonu

23 JavaScript Operatörler Aritmetik Operatörler Operator Açıklama Örnek Anlamı + Toplama x+y x ve y nin toplamı - Çıkarma x-y x ve y nin farkı * Çarpma x*y x ve y nin çarpımı / Bölme x/y x ve y nin oranı % Mod Alma x%y x/y den kalan sayı

24 JavaScript Operatörler Atama Operatörleri Operator Açıklama Örnek Anlamı = Atama x=7; x=7; += Ekleyerek atama x+=3; x=x+3; -= Eksilterek atama x-=5; x=x-5; *= Çarparak atama x*=4; x=x*4; /= Bölerek atama x/=2; x=x/2; %= Bölüp, kalanını atama x%=9; x=x%9; ++ Bir arttırma x++; veya ++x; x=x+1; -- Bir azaltma x--; veya --x; x=x-1;

25 JavaScript Operatörler Karşılaştırma ve Mantıksal Operatörler Operator Açıklama Örnek Anlamı > Büyüktür x>y x, y den büyük mü? < Küçüktür x<y x, y den küçük mü? == Eşittir x==y x, y ye eşit mi? >= Büyük Eşittir x>=y x, y den büyük yada eşit mi? <= Küçük Eşittir x<=y x, y den küçük yada eşit mi?!= Eşit Değil x!=y x, y den farklı mı? && Mantıksal VE x>2 && x<y x 2 den büyük VE y den küçük mü? Mantıksal VEYA x>2 x<y x 2 den büyük VEYA y den küçük mü?

26 JavaScript Operatörler TYPEOF Operatörü Parametre olarak verilen değerin veri türünü geri döndürür. <script language="javascript" type="text/javascript"> document.write(typeof("teknoloji")); </script> Örnek İçin Tıkla. Ekrana string yazacaktır.

27 JavaScript İşlem Önceliği Parantez İşlemleri Fonksiyonlar Aritmetiksel İşlemler Karşılaştırma İşlemleri Mantıksal İşlemler Şart İşlemleri

28 JavaScript Ekrana Yazdırma İşlemi Ekrana yazı yazdırma ya da değişken sonucunu aktarma 2 şekilde yapılmaktadır. Document.write(değişken); ya da alert(değişken); <script language="javascript" type="text/javascript"> alert("merhaba"); document.write("dünya"); </script> Örnek İçin Tıkla.

29 JavaScript Kullanıcıdan Veri Alıp Değişkene Atama Kullanıcıdan veri alıp değişkene atamak için prompt komutu kullanılır. <script language="javascript" type="text/javascript"> var kitapsayisi=prompt("sipariş vereceğiniz kitap sayısını giriniz."); var kitapbirimfiyati=25; var kitapkdvli=(25*18/100) + 25; var odenecektutar=kitapsayisi*kitapkdvli; document.write("toplam ödemeniz gereken ücret:"+odenecektutar+" TL."); </script> 5 değeri girilmişse Ekrana «Toplam ödemeniz gereken ücret:147.5 TL.» yazacaktır. Örnek İçin Tıkla.

30 JavaScript Koşullu İfadeler ve Döngüler If/Else İfadesi <script language="javascript" type="text/javascript"> var deger=prompt("bir Sayı Giriniz"); if(deger<50) {document.write("sayı 50'den küçük")} else if(deger>50) {document.write("sayı 50'den büyük")} else if(deger=50) {document.write("sayı 50'ye eşit")} </script> Örnek İçin Tıkla.

31 JavaScript Koşullu İfadeler ve Döngüler for Döngüsü <script language="javascript" type="text/javascript"> var deger=prompt("bir Sayı Giriniz"); for(var i=0;i<=deger;i++) {document.writeln(""+i+"<br\>")} </script> Örnek İçin Tıkla.

32 JavaScript Koşullu İfadeler ve Döngüler While Döngüsü <script language="javascript" type="text/javascript"> var i=0; var toplam=0; while(i<=10) { if(i%2==0) toplam=toplam+i; i++; } document.write("toplam:"+toplam) </script> Örnek İçin Tıkla.

33 JavaScript Fonksiyonlar JavaScript te fonksiyonların tanımlanması aşağıdaki gibi olur Parametreler function fonksiyon_ismi(var1, var2,var3, varn) { //yapılacak //işlemler } Kod Bloğu

34 JavaScript Fonksiyonlar <head> <script language="javascript" type="text/javascript"> function topla(a, b) { var sonuc=parseint(a)+parseint(b); document.write("toplam:"+sonuc); } </script> </head> <body> <script type="text/javascript"> var sayi1=prompt("birinci Sayısı Gir:"); var sayi2=prompt("ikinci Sayısı Gir:"); topla(sayi1,sayi2); </script> </body> Örnek İçin Tıkla.

35 JavaScript Olaylar Olaylar, tarayıcı tarafında oluşan ve JavaScript tarafından algılanabilen faaliyetleri ifade eder. Olaylara örnek olarak; Kullanıcının bir butona tıklaması Bir web sayfasının yüklenmesi Farenin hareketlerinin algılanması Klavye hareketlerinin algılanması

36 JavaScript Olaylar onload Olayı Sayfanın yüklenmesi tamamlandığında oluşan durumdur. <head> <title>ileri Web Tasarım Teknikleri</title> </head> <body onload="alert('sayfaya hoşgeldiniz!');"> </body> Örnek İçin Tıkla. Olay oluşturulduktan sonra fonksiyon sonuna «;» koyulur. String ifade tek tırnak içinde yazılır.

37 JavaScript Olaylar onfocus Olayı HTML eleman üzerine odaklanıldığında yani seçildiğinde bu olay tetiklenir. <head> <script language="javascript" type="text/javascript"> function bilgiver() {alert('bu alana sadece rakam girebilirsiniz!');} </script></head><body><table><tr> <td> Doğum Yılınızı Giriniz </td> <td> <input type="text" onfocus="bilgiver();" /></td> </tr></table></body> Örnek İçin Tıkla.

38 JavaScript Olaylar onblur Olayı Belirli bir elemanın seçili olma durumunu yitirmesi halinde tetiklenen bir olaydır. <script language="javascript" type="text/javascript"> function kontrolsayi(a){ if(isnan(number(a))) alert('bu alana sadece rakam girebilirsiniz.');} </script></head><body><table><tr> <td> Ad Soyad</td> <td> <input type="text" /></td></tr><tr> <td> Doğum Yılı</td> <td> <input type="text" onblur="kontrolsayi(this.value);" /></td> </tr> </table> </body> Örnek İçin Tıkla.

39 JavaScript Olaylar? JavaScript te ihtiyaca göre kullanılabilecek bir çok olay türü vardır. Bunları öğrenmek için çeşitli kaynaklardan faydalanabilirsiniz.

40 JavaScript Olaylar OnClick Olayı <head> <title>ileri Web Tasarım Teknikleri</title> </head> <body> <table> <tr> <td> Sayı1 </td> <td> <input type="text" name="deger1" value="1" /></td> </tr> <tr> <td>sayı2</td> <td> <input type="text" name="deger2" value="3" /></td> </tr> <tr><td colspan="2"> <input type="submit" name="topla" id="button" value="+" onclick="alert(parseint(deger1.value) + parseint(deger2.value));"/> <input type="submit" name="cikar" id="button" value="-" onclick="alert(parseint(deger1.value) - parseint(deger2.value));"/> <input type="submit" name="carp" id="button" value="*" onclick="alert(parseint(deger1.value) * parseint(deger2.value));"/> <input type="submit" name="bol" id="button" value="/" onclick="alert(parseint(deger1.value) / parseint(deger2.value));"/> </td> </tr></table> </body> Örnek İçin Tıkla.

41 Uygulama İnternet ve diğer çeşitli kitaplardan faydalanılarak uygulama yapılacak. Prompt komutu ile girilen iki sayısı, yine prompt komutuna göre 4 işlemeden birini uygulayan uygulama Prompt komutu ile ilk girilen metni TÜMÜ BÜYÜK HARF, ikinci girilen metni tümü küçük harf yapan uygulama 3 Radio Button Seçenek Düğmesinden bir tanesini seçtirme ve seçileni Alert ile yazdırma uygulaması Tarih, Saati sayfada gösterme. Uygulama

42 CSS (Cascading Style Sheets) Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir. İnternet sayfaları için genelgeçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir. Bir Web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün Web sayfalarında ortak olarak kullanılabilir. Böylece sayfaların hafızadaki boyutu epey küçüldüğü gibi güncelleme yapmak da kolaylaşır.

43 CSS (Cascading Style Sheets) Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları CSS kodları, HTML kodlarının içine yazılabildiği gibi harici bir CSS dosyası oluşturularak da işlem yaptırılabilir. Türüne göre <BODY> veya <HEAD> bölümlerinde yer alabilirler. Ayrıca <link rel="stylesheet" type="text/css" href="style.css" /> koduyla CSS dosyası çalışma sayfasına eklenebilir. Onları ayrı dosyada veya dosyalarda saklamak, onları değişik HTML sayfalarınca kullanılmasını sağlar, aynı sayfanın değişik aygıtlara göre formatlandırılmasını kolaylaştırır, sunumla yapıyı ayırarak değişiklik yapılmasını ekonomikleştirir.

44 CSS (Cascading Style Sheets) Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları CSS kodları, HTML kodlarının içine yazılabildiği gibi harici bir CSS dosyası oluşturularak da işlem yaptırılabilir. Türüne göre <BODY> veya <HEAD> bölümlerinde yer alabilirler. Ayrıca <link rel="stylesheet" type="text/css" href="style.css" /> koduyla CSS dosyası çalışma sayfasına eklenebilir. Onları ayrı dosyada veya dosyalarda saklamak, onları değişik HTML sayfalarınca kullanılmasını sağlar, aynı sayfanın değişik aygıtlara göre formatlandırılmasını kolaylaştırır, sunumla yapıyı ayırarak değişiklik yapılmasını ekonomikleştirir.

45 CSS i HTML Sayfa İçerisine Ekleme Yöntemleri CSS i HTML sayfasına eklemenin 4 yöntemi vardır. 1. Kod İçine (In Line) Direk olarak (X)HTML elemanın içine style özelligi kullanılarak uygulanır. <body> <p style="color:#30c">bu bir CSS örneğidir!</p> </body> Örnek İçin Tıkla.

46 CSS i HTML Sayfa İçerisine Ekleme Yöntemleri 2. Style Elamanı Kullanılarak <head> kısmında <style> elemanı içinde CSS kodu yazılarak uygulanır. <head> <title>ileri Web Tasarım Teknikleri</title> <style type="text/css"> p{ color:blue; } </style> </head> <body> <p>bu bir CSS örneğidir!</p> </body> Örnek İçin Tıkla.

47 Style.css index.html CSS i HTML Sayfa İçerisine Ekleme Yöntemleri 3. CSS kodları dışarıda (.css) uzantılı bir dosya içerisinde saklanıp, HTML sayfa içerisine çağrılabilir. <head> <title>ileri Web Tasarım Teknikleri</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <p>bu bir CSS örneğidir!</p> "utf-8"; /* CSS Document */ p { color: orange; } Örnek İçin Tıkla.

48 renkler.css index.html fontlar.css CSS i HTML Sayfa İçerisine Ekleme Yöntemleri İle Eklemek Harici CSS kodu eklemeye benzemektedir. Büyük bir CSS dosyası oluşturmaktansa bunu bölümlere ayırıp ilgili sayfada ilgili bölümü HTML sayfaya çağırma yöntemidir. <head> <style "utf-8"; /* CSS Document */ p { font-family:verdana, Geneva, sans-serif; "utf-8"; Örnek İçin Tıkla. </style> /* CSS Document */ </head> <body> <p>bu bir CSS örneğidir!</p> </body> p { color:#f0f; }

49 Niçin CSS? Daha çok yetenek Daha az emek ve zaman Daha az boyut

50 CSS in Yapısı CSS in yapısı iki bölümden oluşur: Seçiciler(Selector) ve Bildirim Bloğu (Declaration Block). Bildirim Bloğuda ikiye ayrılır. Özellik(Property) ve Değer(Value).

51 CSS in Yapısı Seçiciler ve Bildirim Bloğu Tüm HTML elemanları(body, p, a vb.) potansiyel seçicilerdir. Seçiciler ismini buradan alır, seçilen HTML elemanı anlamındadır. Bildirim bloğu süslü parantezle { } açılır ve kapanır. Bildirimler arasında ; noktalı virgül kullanılır. Özellik ve değerler birbirinden : iki nokta üst üste ile ayrılır.

52 CSS in Yapısı Seçiciler ve Bildirim Bloğu H1 örneği <head><title>ileri Web Tasarım Teknikleri</title> <style type="text/css"> h1 { font: Verdana, Geneva, sans-serif; color:#c00; }</style> </head> <body> <h1>geleceğe Yeni Bir Bakış Teknoloji Topluluğu</h1></body> Örnek İçin Tıkla.

53 CSS in Yapısı Seçiciler ve Bildirim Bloğu Gruplama <head> <title>ileri Web Tasarım Teknikleri</title> <style type="text/css"> h1,p { font: Verdana, Geneva, sans-serif; color:#c00;} </style> </head> <body> <h1>geleceğe Yeni Bir Bakış Teknoloji Topluluğu</h1> <p>www.teknolojitoplulugu.com</p> </body Örnek İçin Tıkla.

54 CSS in Yapısı Değerler Değerler genelde mesafe ve renkleri tanımlamak için kullanılır. Değerleri dört gruba ayrılabilir: Uzunluk değerleri, yüzde değerleri, renk değerleri ve URL değerleri

55 CSS in Yapısı Değerler Uzunluk Değerleri CSS de tanımlanan 8 uzunluk değeri vardır. Bunların üç tanesi göreceli (relative) uzunluklar ve kalan beş tanesi kesin (absolute) uzunluklardır.

56 CSS in Yapısı Değerler Uzunluk Değerleri Göreceli Uzunluklar Bu değerler diğer uzunluk değerlerine göre görecelidir. Sayfalarımızın ölçeğinin değiştiği ve çıktısının alındığı durumlarda bu uzunluk değerlerini kullanmamız bize avantaj sağlayacaktır. em: Elemanın yazıtipinin yüksekliğidir. Mesela font-size değeri 14px olarak atanmış ise 1em 14piksel eşit demektir. ex: Elemanın "x" harfinin yüksekliğidir. Atanmış olan yazıtipinin küçük "x«değeri yüksekliğidir. px: piksel değeri. Eğer monitörünüze yeterince yakından bakarsanız, çok küçük kutulardan oluşmuş bir ızgaraya benzer. Buradaki her kutu bir pikseldir. Bu da her monitöre göre farklı değer demektir.

57 CSS in Yapısı Değerler Uzunluk Değerleri Kesin Uzunluklar Bu uzunluklar gerçek hayatta kullanılan birimlerdir. in: inç. 1 inch=2,54 cm dir. Örn: line-height:0.5in cm: Santimetre. Bizim gerçek hayatta kullandığımız santimetre değeridir. Örnek: margin:2cm mm: Milimetre. Bizim gerçek hayatta kullandığımız milimetre değeridir. Örnek: letter-spacing:1mm pt: Point. Standart baskı birimidir. (1pt = 1/72in) Örn: font-size:14pt pc: Pika. Bir inç in 1/6 eşit olan bir baskı ölçü birimidir. Bir pika 12 noktaya bölünür. Örnek: font-size:2pc

58 CSS in Yapısı Değerler Uzunluk Değerleri Yüzde Değerleri Yüzde değerleri göreceli değerlerdir. Yüzde değerleri uygulandığı nesnenin boyutuna bağlı hareket eder. /* elemanın font-size değerinin %150 sidir */ h4 { line-height: 150% } /* satır genişliğinin 10% nu */ p { text-indent: 10% }

59 CSS in Yapısı Değerler Renk Değerleri Renk Değerleri CSS de renk değerleri isim olarak ve RGB değeri olarak tanımlanabilir. RGB tanımlaması da 4 çeşittir. 1. Renk İsimleri Renklerin İngilizce isimleri kullanılarak tanımlama yapılır. p {color: red} /* renk tanımı kırmızı olarak yapıldı*/ h1{ background-color: blue;} /* h1 başlığının arka plan rengi mavi yapıldı */

60 CSS in Yapısı Değerler Renk Değerleri Renk Değerleri 2. RGB Renk Değerleri CSS de renk tanımlamak için genelde bu yöntem kullanılır. RGB tanımlamasının da 4 çeşidi vardır. #RRGGBB : Burada, RR, GG, ve BB, sırasıyla kırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hexadesimal sayılardır. Örnek: color:#ff0000; (kırmızı) #RGB: Yukarıdaki yöntemin kısaltmasıdır. Aynı değerleri taşıyan grup değerleri birleştirilir. Örnek: color:f00; (kırmızı) RGB(R,G,B): Bu RGB renklerinin ondalık sayma düzeninde 0 ile 255 arasında bir tanımı vardır. Buna göre tanımlama yapılabilir. Örnek h1 {color: rgb(191,127,127);} RGB(R%,G%,B%): Bu RGB renklerinin yüzdesel olarak %0 ile %100 arasında bir tanımı vardır. Buna göre tanımlama yapılır. Örnek: h1 {color: rgb(75%,0%,0%);}

61 CSS in Yapısı Değerler URL Değerleri URL Değerleri CSS veri dosyası ve kaynağın yerini belirlemek için URI(Universal Resource Indicator Evrensel Kaynak ) kullanır. url("http://www.gokhanturan.com/resimler/arka.png")

62 CSS in Yapısı Seçiciler Seçiciler; Sınıf Seçicisi ve Tekil Seçicisi olarak ikiye ayrılır. CSS ile kod yazmaya başlamadan önce etiketin Sınıf Seçici veya Tekil Seçici olacağını önceden belirlemeliyiz.

63 CSS in Yapısı Seçiciler Sınıf Seçicisi Sınıf Seçicisi(Class Selector) Aynı HTML elemanına farklı özellikler atamak için Sınıf Seçicisi kullanılır. Örneğin bir dokümanda iki paragraf olsun: Biri sağa dayalı, diğeri sola dayalı olacak. İşte böyle durumda sınıf seçicisi kullanmamız gerekir.

64 CSS in Yapısı Seçiciler Sınıf Seçicisi Sınıf Seçicisi(Class Selector) <head> <title>ileri Web Tasarım Teknikleri</title> <style type="text/css"> p.soladaya { text-align:left;} p.sagadaya { text-align:right;} </style> </head> <body> <p class="soladaya">www.teknolojitoplulugu.com</p> <p class="sagadaya">geleceğe Yeni Bir Bakış</p> </body> Örnek İçin Tıkla.

65 CSS in Yapısı Seçiciler Sınıf Seçicisi Tanımlamaları yaparken HTML etiketlerine bağlı kalmadan ve tüm HTML etiketlerde de bu tanımlamayı kullanmak mümkün. Önemli <head> <title>ileri Web Tasarım Teknikleri</title> <style type="text/css">.metin { font-family:verdana, Geneva, sans-serif; font-size:14px; color:#900; text-align:center;} </style> </head><body> <h1 class="metin">www.teknolojitoplulugu.com</h1> <p class="metin">geleceğe Yeni Bir Bakış</p> </body> Örnek İçin Tıkla.

66 CSS in Yapısı Seçiciler Sınıf Seçicisi Çoklu Sınıflar Birden fazla sınıfı bir HTML elemanına uygulamak için kullanılır. <head> <title>ileri Web Tasarım Teknikleri</title> <style type="text/css">.metin { font-family:verdana, Geneva, sans-serif; font-size:14px; text-align:center;}.renk { color:#00f}.metin.renk { background-color:silver;} </style> </head> <body> <h1 class="metin renk">teknoloji Topluluğu</h1> <h1 class="metin"> Geleceğe Yeni Bir Bakış</h1> </body> Örnek İçin Tıkla.

67 CSS in Yapısı Seçiciler Tekil Seçicisi Tekil Seçici (ID Selector) Tekil Seçicisi Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemana atanırken Tekil Seçicisi sadece bir tane elemana atanır. Tekil seçiciler tanımlanırken adının basına #(diyez) işareti konulur. Örnek İçin Tıkla.

68 CSS in Yapısı Seçiciler Tekil Seçicisi Tekil Seçici (ID Selector) <head> <title>ileri Web Tasarım Teknikleri</title> <style type="text/css"> #arkarenk1{background-color: blue;} #arkarenk2{background-color: red;} </style></head><body> <h1 id="arkarenk1">teknoloji Topluluğu</h1> <h1 id="arkarenk2"> Geleceğe Yeni Bir Bakış</h1> </body> Örnek İçin Tıkla.

69 CSS Uygulamaları Text Özellikleri Text Özellikleri word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler. letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler. text-decoration : Kelimenin altının, üstünün vs. çizili olup olmayacağını belirler. underline : Kelimenin altının (Satır altından) çizili olmasını sağlar. overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar. line-through : Kelimenin ortasından çizili olmasını sağlar. blink : Kelimenin yanıp sönmesini sağlar.(netscape için) vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler. text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar. capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar. uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar. lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar. none : Kelimelerin orjinal metindeki gibi olmasını sağlar. text-align: Metnin dikey olarak nasıl hizalanacağını belirler. left : Metni sola yaslar. right : Metni sağa yaslar. center : Metni ortalar. justify : Metni iki yana yaslar. text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler. line-height : Satırın yüksekliğini ayarlar.(yüksek değer verildiğinde satırlar arasındaki boşluk artar.) first-line : Metnin ilk satırının biçimlendirilmesini sağlar. first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar. Örnek İçin Tıkla.

70 CSS Uygulamaları Link Özellikleri Link Özellikleri a :Linkin, sayfa açıldığında tıklanmadan veya imleç üzerine getirilmeden önceki durumudur. a:hover :Linkin imleç üzerine getirildiğindeki durumudur. a:active :Linkin tıklandığı andaki durumudur. a:visited :Linkin tıklandıktan sonraki durumudur. BİÇİMLENDİRME: color:linkin rengini belirler. background-color:linkin zemin rengini belirler. background-image:linkin zeminine resim ekler(bu animated-gif de olabilir.) text-decoration:linkin altının,üstünün vs. çizgili olup olmayacağını belirler. font-weight:yazının kalınlık veya inceliğini belirler. border:linkin etrafına kenarlık ekler. display:linki içeren hücre, satır vb. istenilen alanın seçilmesini sağlar. Örnek İçin Tıkla.

71 CSS Uygulamaları Tablo Özellikleri Tablo Özellikleri margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler. margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler. margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler. margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler. margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler. padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler. padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler. border : Tablonun kenarlarının şekillendirilmesini sağlar. border-top : Tablonun üst kenarının şekillendirilmesini sağlar. border-left : Tablonun sol kenarının şekillendirilmesini sağlar. border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar. border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

72 CSS Uygulamaları Tablo Özellikleri Tablo Özellikleri border-width : Tablonun kenarlarının kalınlığını belirler. border-top-width : Tablonun üst kenarının kalınlığını belirler. border-right-width : Tablonun sağ kenarının kalınlığını belirler. border-bottom-width : Tablonun alt kenarının kalınlığını belirler. border-left-width : Tablonun sol kenarının kalınlığını belirler. border-styletablonun kenarlık türünü belirler. border-top-styletablonun üst kenarlık türünü belirler. border-right-styletablonun sağ kenarlık türünü belirler. border-bottom-styletablonun alt kenarlık türünü belirler. border-left-styletablonun sol kenarlık türünü belirler. border-color : Tablonun kenarlarının rengini belirler. border-top-color : Tablonun üst kenarının rengini belirler. border-right-color : Tablonun sağ kenarının rengini belirler. border-bottom-color. Tablonun alt kenarının rengini belirler. border-left-color : Tablonun sol kenarının rengini belirler. color : Tabloda geçen metnin rengini belirler. width : Tablonon genişliğini belirler. height : Tablonun yüksekliğini belirler. Örnek İçin Tıkla.

73 Uygulama Uygulama

74 Kaynaklar JavaScript, İbrahim ÇELİKBİLEK, Kodlab Yayıncılık,2010. JacaScript, Murat BALKAN, Pusula Yayıncılık,2011. CSS (Stil Şablonları) Başlangıç İçin, Fatih HAYRİOĞLU

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ

GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ Hazırlayan: URL: Amaç: Ögr.Gör. Mehmet Emin ÖZCAN www.gantep.edu.tr/~ozcan/ders/internet1 MYO öğrencileri için css dökümanı Kaynaklar. GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ KASIM-2009 CSS (Cascading

Detaylı

MODÜL 3 HTML İLE STİL ŞABLONLARI

MODÜL 3 HTML İLE STİL ŞABLONLARI MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.

Detaylı

CSS(CASCADING STYLE SHEETS)

CSS(CASCADING STYLE SHEETS) CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ

11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ 11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ Bu bölümü bitirdiğinizde, Sekmeli menünün nasıl yapıldığını, Dikey menünün nasıl yapıldığını, Yatay menünün nasıl yapıldığını, Dikey açılır menünün nasıl yapıldığını,

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 5 Stil Oluşturmak/CSS 2 CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri CSS yapısı 3 ana bileşenden

Detaylı

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web

Detaylı

İNTERNET PROGRAMCILIĞI

İNTERNET PROGRAMCILIĞI İNTERNET PROGRAMCILIĞI Konular Vize Hazırlık 1 İnternet Programcılığı 1. TEMEL HTML ETİKETLERİ 1.1. HTML etiketi HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir.

Detaylı

Javascript. 1) Notepad++ aşağıdaki kodları yazıp deneme.html olarak kaydedelim. 2) Biraz önceki sayfa sadece html kodların içeriyordu.

Javascript. 1) Notepad++ aşağıdaki kodları yazıp deneme.html olarak kaydedelim. 2) Biraz önceki sayfa sadece html kodların içeriyordu. Javascript Html sayfalarının içine yazılarak, sayfayı daha etkileşimli hale getirir. click olayları, uyarı mesajları gibi hareketlerle sayfayı daha dinamik hale getirir. Javascript olmadan yazılan html

Detaylı

WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI

WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI CSS BACKGROUND ÖZELLİKLERİ background-color Zeminin rengini belirler. #color Renk adı. transparent Zeminin saydam olmasını sağlar. background-image Zemine

Detaylı

ADOBE DREAMWEAVER CS5 CSS PANEL

ADOBE DREAMWEAVER CS5 CSS PANEL CSS Cascading Style Sheets ADOBE DREAMWEAVER CS5 CSS PANEL ve CSS3 ÖZELLİKLER TYPE Font-Family : Yaz lar n alaca yaz tipini belirler Font adlar al r, Tahoma, Verdana Arial gibi. font-family: Arial, Helvetica,

Detaylı

HTML Etiketleri Genel Özellikler (Global Attributes)

HTML Etiketleri Genel Özellikler (Global Attributes) HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel

Detaylı

HTML Bloklar. CSS Display özelliği

HTML Bloklar. CSS Display özelliği HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün

Detaylı

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder. Ve Sırası, Diez, Nokta, Yıldız, Class Css Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz. Css Nedir? HTML bize metin

Detaylı

Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri

Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri Zemin Özellikleri Ögelere zemin (background) rengi vermek veya zemin resmi eklemek ile

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar

Detaylı

JavaScript Örnekleri PDF

JavaScript Örnekleri PDF 5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF www.yazilimbilisim.net.. İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript

Detaylı

WEB PROGRAMLAMA. DERS NOTLARI / CSS e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA

WEB PROGRAMLAMA. DERS NOTLARI / CSS e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA WEB PROGRAMLAMA DERS NOTLARI / CSS e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA CSS NEDİR? Cascading Style Sheets (CSS Geçişli (Basamaklı) Stil Sayfaları) Günümüzde web tasarım alanında birçok teknolojiden

Detaylı

JAVASCRIPT JAVASCRIPT DİLİ

JAVASCRIPT JAVASCRIPT DİLİ JAVASCRIPT JAVASCRIPT DİLİ Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili istemci taraflı (client-side) script dilidir. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim

Detaylı

DIV KAVRAMI