İleri Web Tasarım Teknikleri. Öğr. Gör. Gökhan TURAN Mehmet Akif Ersoy Üniversitesi Gölhisar Meslek Yüksekokulu
|
|
|
- Turgay Öktem
- 8 yıl önce
- İzleme sayısı:
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=" 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> </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("
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"> <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"> <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) 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
CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ
CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ 2 CSS, açılımı Cascading Style Sheet olan ve dilimize Stil şablonları olarak yerleşen basit ve kullanışlı bir işaretleme dilidir.
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.
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
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
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
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ı,
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
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
CSS. 1. CSS nin Yapısı Sınıf (Class) Seçicisi
CSS CSS, açılımı (Cascading Style Sheet) olan ve dilimize Stil Şablonları olarak yerleşen bir işaretleme dilidir. Stil Şablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı...) stil vermek
İ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.
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
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,
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
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
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
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
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
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
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
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
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
DIV KAVRAMI <style> position: absolute
DIV KAVRAMI Div tag i katman oluşturmak için kullanılır. Div ler sayfanın komple bir satırını kaplarlar, bu yüzden tag i içerisinde şekillendirilip, boyutlandırılmaları gerekir. Aşağıdaki şekilde
STİL ŞABLONLARI / C S S. Web Tasarımı ve Programlama
STİL ŞABLONLARI / C S S Web Tasarımı ve Programlama STİL ŞABLONLARI / CSS Tanım ve Genel Bilgi CSS (Cascading Style Sheets), web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir. Web
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
BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 8
BTP 27 İNTERNET PROGRAMCILIĞI I Ders 8 Değişkenler 2 Tamsayı Değerler (Integer) Tamsayılar, tabanlı (decimal), 8 tabanlı (octal) veya 6 tabanlı (hexadecimal) olabilir. 8 tabanındaki sayıları belirtmek
Javascript Ders Örnekleri -2. Tarayıcı Görüntüsü
Javascript Ders Örnekleri -2 Örnek 1 : Aşağıdaki Javascript kodları çalıştığında tarayıcı görüntüsü nasıl olur? JS Kodu var puan=85; if(puan>70) document.write( Notunuz iyi ); else document.write( Notunuz
WEB PROGRAMLAMA. DERS NOTLARI / JavaScript e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA
WEB PROGRAMLAMA DERS NOTLARI / JavaScript e Giriş YARD. DOÇ. DR. MEHTAP YALÇINKAYA Betik dili web sayfalarında dinamik içerik sağlamak ve kullanıcıyla iletişim kurmak için kullanılan istemci tarafında
BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 9
BTP 207 İNTERNET PROGRAMCILIĞI I Ders 9 Dizi Değişkenler (Array) 2 Tek değişkende birden fazla bilgi tutulmak istendiğinde kullanılır. Kullanım şekli: var dizi_adı= new Array(eleman1, eleman2,, elemann)
Öğr. Gör. Serkan AKSU http://www.serkanaksu.net. http://www.serkanaksu.net/ 1
Öğr. Gör. Serkan AKSU http://www.serkanaksu.net http://www.serkanaksu.net/ 1 JavaScript JavaScript Nedir? Nestcape firması tarafından C dilinden esinlenerek yazılmış, Netscape Navigator 2.0 ile birlikte
font font-family Metin ve Font Özellikleri font-style, font-variant, font-weight, font-size, line-height ve font-family özelliklerini bir arada barındıran özelliktir. font: italic bold 1.5em arial, Helvetica,
jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme
az kod, çok iş! jquery bir JavaScript kütüphanesidir 2006 yılında, John Resig adlı bir JavaScript geliştiricisi tarafından yazılmaya başlanmıştır. Javascript ile yapmak istediğimiz bir uygulama için yazmamız
Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017
Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017 1. Hafta TANIŞMA, İNTERNET, HTML İçerik (Hafta/Konu) 1. Tanışma, İnternet Nedir, Html Nedir, Temel Terim ve Kavramlar 2. İnternete erişim ve İnternet
Web Teknolojileri ve Programla
12.05.2010 Dersi Özeti Kursun içeriğini özeti Alt başlıkları Proje Kurs esnasında kullanmayı planladığımı editörler HTMLe giriş Temel etiketler Notepad+ da örnekler Web Teknolojileri ve Programla Bölüm
<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>
HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber
Web Tasarımının Temelleri
1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Listeleme Etiketleri Sıralı liste oluşturmak için
10. STİL ŞABLONU (CSS) ÖZELLİKLERİ
10. STİL ŞABLONU (CSS) ÖZELLİKLERİ Bu bölümü bitirdiğinizde, Zemin özelliklerinin ne olduğunu ve nasıl kullanıldığını, Font özelliklerinin ne olduğunu ve nasıl kullanıldığını, Metin kutusu özelliklerinin
YZM 3215 İleri Web Programlama
YZM 3215 İleri Web Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1 BÖLÜM - 3 jquery II. Bölüm Bu bölümde; Jquery II. Bölüm
Yeni site açıp, masa üstündeki vt.mdb dosyasını sitemize ekliyoruz ve www.arifceylan.com a bağlanıp 1 Mart tarihli sayfayı açıyoruz
16 Mart 2012 / Cuma Yeni site açıp, masa üstündeki vt.mdb dosyasını sitemize ekliyoruz ve www.arifceylan.com a bağlanıp 1 Mart tarihli sayfayı açıyoruz Gridview içerisindeki verileri Excel dosyasına dönüştürmek
Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1
Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan:
BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1
BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda
CSS i Web Sayfalarına Eklemek
CSS i Web Sayfalarına Eklemek CSS in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value) XML de
2. HTML Temel Etiketleri
2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,
ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR
ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını
Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri
Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri Hesap Tabloları(Excel 2007) HAFTA 1 1. Hesap Tablolarına Giriş 1.1. Hesap tablosu tanımı, kullanım amacı ve yerleri 1.2. MS Excel Uygulamasına giriş
HTML & CSS. Öğr.Gör. M.Ersin AKAY
HTML & CSS Öğr.Gör. M.Ersin AKAY Neler Öğreneceğiz? HTML işaretleme dili CSS stil şablonları HTML Hyper Text Markup Language HTML de Neler Öğreneceğiz? Html işaretleme dili temel yapısı ve kavramları Html
Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2015 2016 Bahar Yarıyılı Öğr.Gör. Murat KEÇECĠOĞLU 8 Mar. 2016 PHP de Değişken Tipleri Dizi (Array) Aynı değişken içerisinde birden fazla değer tutmak
Arayüz Geliştirme Dokümantasyonu
Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive
1 JAVASCRIPT NEDİR? 1
İÇİNDEKİLER IX İÇİNDEKİLER 1 JAVASCRIPT NEDİR? 1 2 TEST ORTAMINI TANIMAK (FİREFOX VE FİREBUG) 5 Firefox 6 Firebug 8 CSS Sekmesi 10 DOM Sekmesi 11 Net ve Çerezler Sekmeleri 11 Script Sekmesi 11 Konsol Sekmesi
Bilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ. Öğr. Gör. Rıza ALTUNAY
CSS Ünite 7 Bilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ Öğr. Gör. Rıza ALTUNAY 1 Ünite 7 CSS Öğr. Gör. Rıza ALTUNAY İçindekiler 7.1. CSS KULLANIM ALANLARI... 3 7.1.1. Yerel Kullanım Alanı...
Internet Programming II
Internet Programming II Elbistan Meslek Yüksek Okulu 2016 2017 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 1 PHP Program Yapısı Php çoğunlukla HTML etiketleri arasına gömülerek kullanılır. Form işlemleri
CSS (ST ABLON) Style ABLON ÇE TLER Yerel Stil ablonu Örnek: style Global Stil ablonu Örnek: style style style style lantılı Stil ablon
CSS (STİL ŞABLON) CSS (Cascading Style Sheets) diğer deyimiyle Stil Şablon HTML yazım şekli olarak etiket türünde bir yazım dilidir. Sahip olduğu özelliklerin kısıtlı olması nedeniyle sayfanın dizaynında
BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2
BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin
İnternet Programcılığı Dersi 2.Dönem Ders Notu
İnternet Programcılığı Dersi 2.Dönem Ders Notu DEĞİŞKEN TİPLERİ TAM SAYI (İNTEGER) VERİ TİPİ Negatif veya pozitif ondalık kısmı bulunmayan sayılardır. Örnek: $i=65; $x=345; ONDALIK(REAL)VERİ TİPİ Ondalıklı
Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları
BETİK DİLİ / JAVASCRIPT. Web Tasarımı ve Programlama
Web Tasarımı ve Programlama Tanım ve Genel Bilgi Betik Dili; Web sayfalarında dinamik içerik sağlamak ve kullanıcıyla iletişim kurmak için kullanılan, istemci tarafında çalışan bir dildir. HTML etiketleri
Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri
Puseduo Class Örnekleri Cssin html içerisinde kullanım şekilleri, puseduo class örnekleri CSS Stillerini HTML içerisine bağlama Css yapacağımız stilleri Html içerisinde 3 farklı şekilde bağlayabiliriz.
7. Çerçeveler. Bu bölümü bitirdiğinizde,
7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde
Ders Tanıtım Sunumu. Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı. Öğr. Gör. Murat KEÇECİOĞLU 1
Ders Tanıtım Sunumu Internet Programming II Elbistan Meslek Yüksek Okulu 2012 2013 Bahar Yarıyılı Öğr. Gör. Murat KEÇECİOĞLU 1 PHP Program Yapısı Php çoğunlukla HTML etiketleri arasına gömülerek kullanılır.
Uzaktan Eğitim Uygulama ve Araştırma Merkezi
JAVA PROGRAMLAMA Öğr. Gör. Utku SOBUTAY İÇERİK 2 Java da Fonksiyon Tanımlamak Java da Döngüler Java da Şart İfadeleri Uygulamalar Java da Fonksiyon Tanımlamak JAVA DA FONKSİYON TANIMLAMAK 4 Fonksiyonlar;
Site Temizlik Projesi Kodları
Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5c2acf77c2a0b746634170/] İndir (DOCX, 15KB) İlk Hafta Sunumu
Excel Nedir? Microsoft Excell. Excel de Çalışma sayfası-tablo
Microsoft Excell Excel Nedir? Excel programı; veriler üzerinde hesap yapabilme, verileri tabloya dönüştürebilme, verileri karşılaştırıp sonuç üretebilme, grafik oluşturma, veri yönetimi yapabilir. http://mf.dpu.edu.tr/~eyup
WEB TASARIMIN TEMELLERİ
WEB TASARIMIN TEMELLERİ ~ Sunu 2 ~ Öğr. Gör. Mehmet Fatih TAN http://blog.kmu.edu.tr/mftan mftan@kmu.edu.tr Bilgi paylaşıldıkça kıymetlenir.. Kaynak göstermek şartıyla sunu içeriğini çalışmalarınızda kullanabilirsiniz.
T.C. CELAL BAYAR ÜNİVERSİTESİ TURGUTLU MESLEK YÜKSEKOKULU BİLGİSAYAR TEKNOLOJİSİ VE PROGRAMLAMA CSS DERS NOTU. Seval ÖZBALCI
T.C. CELAL BAYAR ÜNİVERSİTESİ TURGUTLU MESLEK YÜKSEKOKULU BİLGİSAYAR TEKNOLOJİSİ VE PROGRAMLAMA CSS DERS NOTU Seval ÖZBALCI seval.ozbalci@bayar.edu.tr MANİSA 2003 İÇİNDEKİLER İÇİNDEKİLER... 2 CSS (STİL
Bu gün dersimizde değişik web kontrollerinin kullanımını gösteren birkaç web sitesi hazırlayacağız. Önce Visual Studio 2005 i açalım.
Bu gün dersimizde değişik web kontrollerinin kullanımını gösteren birkaç web sitesi hazırlayacağız. Önce Visual Studio 2005 i açalım. VS2005 den yeni bir web sitesi oluşturmasını isteyelim. Yeni bir ASP.NET
İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.
Mahmut BORA KARAKUŞ İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Peki internet nasıl çalışıyor ve internet
EXCEL 2007 ELEKTRONİK ÇİZELGE
EXCEL 2007 ELEKTRONİK ÇİZELGE Excel, Microsoft Office paketinde yer alan ve iş hayatında en sık kullanılan programlardandır. Bir hesap tablosu programıdır. Excel, her türlü veriyi (özellikle sayısal verileri)
Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.
Yazı Tipi Stili HTML kodları 47 Kalın İtalik Altı Çizili 9.2.6 Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2.
http://alikoker.name.tr
CSS Nedir? Css in açılımı ile söze başlayalım. Cascading Style Sheets. Biz kısaca konularımız dahilinde Stil Şablon olarak bahsedeceğiz. Gelelim Stil Şablonun varoluş amacına. Sizinde bildiğiniz üzere
WEB TASARIMININ TEMELLERİ
WEB TASARIMININ TEMELLERİ Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri 2. Hafta Html Temel Etiketleri
Uzaktan Eğitim Uygulama ve Araştırma Merkezi
JAVA PROGRAMLAMA Öğr. Gör. Utku SOBUTAY İÇERİK 2 Java Veri Tipleri ve Özelilkleri Değişken Tanımlama Kuralları Değişken Veri Tipi Değiştirme (Type Casting) Örnek Kodlar Java Veri Tipleri ve Özelilkleri
EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI
2015-2016 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI MİCROSOFT EXCEL PROGRAMI Programın Açılışı: Başlat Tüm Programlar Microsoft Office Microsoft
Site Tasarım Çalışması -3
Site Tasarım Çalışması -3 Aşağıda adresini verdiğim çalışmayı table kullanarak yapmaya çalışınız., Örnek site div ile yapıldığından bölümler tablo aynı hizada değildir. Sizler eşit bölmeli table kullanacaksınız;
3. Metin ve Görünüm Etiketleri
3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır
2-Hafta Temel İşlemler
2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının
HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.
HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine
4 Front Page Sayfası Özellikleri
4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak
BİLGİSAYAR BİLİMİ DERSİ (KUR 1) PYTHON PROGRAMLAMA DİLİ ÇALIŞMA KÂĞIDI - 1
BİLGİSAYAR BİLİMİ DERSİ (KUR 1) PYTHON PROGRAMLAMA DİLİ ÇALIŞMA KÂĞIDI - 1 Ekrana Metin Yazdırmak Ekranda metin yazdırmak istendiğinde print komutu kullanılır. Kullanımı aşağıda verilmiştir. Parantez içinde
Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2015 2016 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 23 May. 2016 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla
Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU
Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU HTML Nedir? HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web in temel dilidir. Html dökümanları
4. Bağlantı (Köprü) Oluşturma
4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara
Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman
7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver
k ise bir gerçek sayı olsun. Buna göre aşağıdaki işlemler Matlab da yapılabilir.
MATRİS TRANSPOZU: Bir matrisin satırlarını sütun, sütunlarınıda satır yaparak elde edilen matrise transpoz matris denilir. Diğer bir değişle, eğer A matrisi aşağıdaki gibi tanımlandıysa bu matrisin transpoz
LESS ile hiyerarşik ve fonksiyonel css yazmak
LESS ile hiyerarşik ve fonksiyonel css yazmak 13 Kasım Pazar 11 (X)HTML, CSS ve JavaScript Dökümanları http://mfyz.com/less-ile-hiyerarsik-ve-fonksiyonel-css-yazmak LESS bir çeşit css derleyicisi ve aslında
NB Macro Kullanımı Hakkında Genel Bilgiler
NB Macro Kullanımı Hakkında Genel Bilgiler Genel Bilgi Makro Nasıl Eklenir? NB Ekranlarda Genel Makro Mantığı Makro Nasıl Çağrılır? Örnek Makro Projesi Genel Bilgi Makro, gelişmiş bir HMI kontrol metodudur.
WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ
WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,
Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU
Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Web Sayfasını Kayıt Etmek : Share point designer ya da Notepad de oluşturduğumuz HTML kodunu kaydetmek için File Save As komutunu seçiniz. Kayıt
C Programlama Dilininin Basit Yapıları
Bölüm 2 C Programlama Dilininin Basit Yapıları İçindekiler 2.1 Sabitler ve Değişkenler......................... 13 2.2 Açıklamalar (Expresions)........................ 14 2.3 İfadeler (Statements) ve İfade
Değişkenler. Geçerli değişken isimleri : baslamazamani, ad_soyad, x5 Geçersiz değişken isimleri : 3x, while
Değişkenler Değişkenler bir bilginin bellekteki konumunu temsil eden sembolik isimlerdir. Bilgisayarda hemen hemen tüm işlemler bellekte yapılır. Program çalıştırıldığında değişken ve bu değişkenin türüne
BMT 101 Algoritma ve Programlama I 6. Hafta. Yük. Müh. Köksal Gündoğdu 1
BMT 101 Algoritma ve Programlama I 6. Hafta Yük. Müh. Köksal Gündoğdu 1 C++ Veri Tipleri Yük. Müh. Köksal Gündoğdu 2 Veri Tipleri Tam sayı ve Ondalık sayı veri tipleri Veri Tipi Alt Sınıf Üst Sınıf Duyarlı
HSancak Nesne Tabanlı Programlama I Ders Notları
DİZİLER Bellekte ard arda yer alan aynı türden nesneler kümesine dizi (array) denilir. Bir dizi içerisindeki bütün elemanlara aynı isimle ulaşılır. Yani dizideki bütün elemanların isimleri ortaktır. Elemanlar
2. Belgeye Metin Ekleme
METİN İŞLEMLERİ Flashta 2 çeşit metin vardır:1)tlf metni 2)Klasik metin 1)TLF Metni : CS5 ile başlayan metin türü. TLF metni FLA dosyanızın yayınlama ayarlarında ActionScript 3.0 ve Flash Player 10 veya
CSS Anlatımları #1. Hazırlayan Oğuzhan CABBAROĞLU
CSS Anlatımları #1 Hazırlayan Oğuzhan CABBAROĞLU Önsöz İnternetteki çeşitli kaynaklardan, birikimlerimizden bir araya getirdiğimiz CSS Anlatımları serimizin başlangıç yazısı Css e Giriş ile takipçilerimize
Internet, birçok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında yaygın olan ve sürekli büyüyen bir iletişim ağıdır.
1.Internet nedir? Internet, birçok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında yaygın olan ve sürekli büyüyen bir iletişim ağıdır. Internet, insanların her geçen gün gittikçe artan "üretilen
Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2013 2014 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 26 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla
11 Ocak 2012 / Çarşamba. Spry menü aktifken, açılır menu ekleyebiliyoruz. Spry Menu Bar OK
11 Ocak 2012 / Çarşamba Spry menü aktifken, açılır menu ekleyebiliyoruz. Spry Menu Bar OK Bunlar link, onların arka plan rengini, yazı rengini değiştirebiliriz. Sağdan, ul.menubarhorizontal a üzerine gelip
İmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir.
21 Aralık 2011 / Çarşamba Önce bir site tanımlayacağız, yani önce çalışacağımız klasörü oluşturacağız. Bunun içinde, bir de resim klasörünü oluşturacağız. Görünüm : Classic Site Manage Site sitede düzenleme
HESAP MAKİNASI YAPIMI
HESAP MAKİNASI YAPIMI 1..Aşağıdakine benzer görünüm ve butonları hazırlayın. 2. 24. Butonun içerisine aşağıdaki kodları yazın. 3. Yeni bir layer ekleyip Frame1 F9 na aşağıdaki kodları ekleyelim. 4. Butonlardan
WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ
WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,