İ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=" 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) 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 <style> position: absolute

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

Detaylı

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 / 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

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 8

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

Detaylı

Öğ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 Öğ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

Detaylı

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,

Detaylı

jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme

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

Detaylı

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>

<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

Detaylı

10. STİL ŞABLONU (CSS) ÖZELLİKLERİ

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

Detaylı

YZM 3215 İleri Web Programlama

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

Detaylı

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

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

Detaylı

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 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:

Detaylı

CSS i Web Sayfalarına Eklemek

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

Detaylı

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

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

Detaylı

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

ÖĞ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ı

Detaylı

Temel Bilgi Teknolojileri - II Ayrıntılı Ders İçerikleri

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ş

Detaylı

Arayüz Geliştirme Dokümantasyonu

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

Detaylı

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 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

Detaylı

BETİK DİLİ / JAVASCRIPT. Web Tasarımı ve Programlama

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

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

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

Detaylı

Internet Programming II

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

Detaylı

1 JAVASCRIPT NEDİR? 1

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

Detaylı

Bilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ. Öğr. Gör. Rıza ALTUNAY

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ı...

Detaylı

2. HTML Temel Etiketleri

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,

Detaylı

HTML & CSS. Öğr.Gör. M.Ersin AKAY

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

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

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

Detaylı

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ı 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ı

Detaylı

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri

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.

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı

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

Detaylı

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 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.

Detaylı

İnternet Programcılığı Dersi 2.Dönem Ders Notu

İ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ı

Detaylı

WEB TASARIMIN TEMELLERİ

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.

Detaylı

Uzaktan Eğitim Uygulama ve Araştırma Merkezi

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;

Detaylı

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. 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

Detaylı

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 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

Detaylı

Excel Nedir? Microsoft Excell. Excel de Çalışma sayfası-tablo

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

Detaylı

http://alikoker.name.tr

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

Detaylı

WEB TASARIMININ TEMELLERİ

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

Detaylı

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.

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.

Detaylı

İ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.

İ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

Detaylı

EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI

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

Detaylı

3. Metin ve Görünüm Etiketleri

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

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

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

Detaylı

EXCEL 2007 ELEKTRONİK ÇİZELGE

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)

Detaylı

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 - 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

Detaylı

Uzaktan Eğitim Uygulama ve Araştırma Merkezi

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

Detaylı

LESS ile hiyerarşik ve fonksiyonel css yazmak

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

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı

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

Detaylı

2-Hafta Temel İşlemler

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

Detaylı

k ise bir gerçek sayı olsun. Buna göre aşağıdaki işlemler Matlab da yapılabilir.

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

Detaylı

4 Front Page Sayfası Özellikleri

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

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

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ı

Detaylı

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

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,

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

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

Detaylı

4. Bağlantı (Köprü) Oluşturma

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

Detaylı

CSS Anlatımları #1. Hazırlayan Oğuzhan CABBAROĞLU

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

Detaylı

Değişkenler. Geçerli değişken isimleri : baslamazamani, ad_soyad, x5 Geçersiz değişken isimleri : 3x, while

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

Detaylı

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 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ı

Detaylı

2. Belgeye Metin Ekleme

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

Detaylı

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, 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

Detaylı

HSancak Nesne Tabanlı Programlama I Ders Notları

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

Detaylı

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 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

Detaylı

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

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,

Detaylı

Yeni bir proje açarken File New - Web Site diyoruz. Gelen ekranda Visual Basic veya C# seçilebilir. Biz ders kapsamında C# programlama dilini seçtik.

Yeni bir proje açarken File New - Web Site diyoruz. Gelen ekranda Visual Basic veya C# seçilebilir. Biz ders kapsamında C# programlama dilini seçtik. ASP.NET DERS 1 Yeni bir proje açarken File New - Web Site diyoruz. Gelen ekranda Visual Basic veya C# seçilebilir. Biz ders kapsamında C# programlama dilini seçtik. Gelen ekranda Visual C# seçildikten

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda

Detaylı

NAZMİYE DEMİREL ORTAOKULU BİLİŞİM TEKNOLOJİLERİ DERSİ 1. DÖNEM 6. SINIFLAR DERS NOTU EXCEL 2007 DERS NOTLARI

NAZMİYE DEMİREL ORTAOKULU BİLİŞİM TEKNOLOJİLERİ DERSİ 1. DÖNEM 6. SINIFLAR DERS NOTU EXCEL 2007 DERS NOTLARI EXCEL 2007 DERS NOTLARI Bir hesap tablosu programıdır. Excel, her türlü veriyi (özellikle sayısal verileri) tablolar ya da listeler halinde tutma ve bu verilerle ilgili ihtiyaç duyacağınız tüm hesaplamaları

Detaylı

İmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir.

İ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

Detaylı

HESAP MAKİNASI YAPIMI

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

Detaylı

SAB 103 TEMEL BİLGİSAYAR KULLANIMI

SAB 103 TEMEL BİLGİSAYAR KULLANIMI SAB 103 TEMEL BİLGİSAYAR KULLANIMI Kelime İşlemci - Word Prof.Dr. Fatih TANK Ankara Üniversitesi Uygulamalı Bilimler Fakültesi Sigortacılık ve Aktüerya Bilimleri Bölümü Prof.Dr. Fatih TANK - Temel - Ders

Detaylı

ÖNDER BİLGİSAYAR KURSU. Microsoft Office Kursu Eğitim İçeriği

ÖNDER BİLGİSAYAR KURSU. Microsoft Office Kursu Eğitim İçeriği ÖNDER BİLGİSAYAR KURSU Microsoft Office Kursu Eğitim İçeriği Microsoft WORD 1. PENCERE ELEMANLARI VE GÖRÜNTÜLEME BİÇİMLERİ 1.1. Genel Bilgiler 1.2. Ekran Görünümleri 1.3. Metin Sınırları ve Basımda Çıkmayan

Detaylı

C Programlama Dilininin Basit Yapıları

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

Detaylı

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com HTML-2 Tablolar Tablolar sayfaları satırlara ve sütunlara bölmek yada metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz en önemli elemanlardır. Tablolar satır

Detaylı

Kodlanacak programlama dilinin kaynaklarından faydalanılarak kod yazımı yapılır.

Kodlanacak programlama dilinin kaynaklarından faydalanılarak kod yazımı yapılır. GİRİŞ Algoritması tasarlanmış (metin olarak yazılmış, sözde kodlarla kodlanmış veya akış diyagramı çizilmiş) bir problemi/işlemi, bilgisayar programlama dillerinden birisiyle kodlamak son derece kolaydır.

Detaylı

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci 1 2 HTML, Hyper Text Markup Language kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML

Detaylı

Adım Adım SPSS. 1- Data Girişi ve Düzenlemesi 2- Hızlı Menü. Y. Doç. Dr. İbrahim Turan Nisan 2011

Adım Adım SPSS. 1- Data Girişi ve Düzenlemesi 2- Hızlı Menü. Y. Doç. Dr. İbrahim Turan Nisan 2011 Adım Adım SPSS 1- Data Girişi ve Düzenlemesi 2- Hızlı Menü Y. Doç. Dr. İbrahim Turan Nisan 2011 File (Dosya) Menüsü Excel dosyalarını SPSS e aktarma Variable View (Değişken Görünümü 1- Name (İsim - Kod)

Detaylı

FORMÜLLER VE FONKSİYONLAR

FORMÜLLER VE FONKSİYONLAR C FORMÜLLER VE FONKSİYONLAR Konuya Hazırlık 1. Excel de formül kullanmanın faydalarını açıklayınız. Formüller, bir sayfadaki verileri kullanarak işlem yapan denklemlerdir. Bir formülde, aynı sayfadaki

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

INPUTBOX KULLANIMI. Komut Düğmesine uygulanan algoritma örneği

INPUTBOX KULLANIMI. Komut Düğmesine uygulanan algoritma örneği INPUTBOX KULLANIMI InputBox komutu, Basic programlama dilinde program algoritması içinde ekran aracışığı ile bir sorgu yönlendirerek, kullanıcının bilgi girmesini sağlamak amacıyla kullanılır. Bu komutun

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde, 5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların

Detaylı