HTML & CSS CASCADE STYLE SHEET

Transkript

1 HTML & CSS CASCADE STYLE SHEET

2 EĞİTMEN AD SOYAD : TECRÜBE : OKUL :

3 LÜTFEN DİKKAT! SINIFTAKİ BAŞARIMIZIN MAKSİMUM DÜZEYDE OLMASI İÇİN: DEVAMSIZLIK YAPMAYINIZ; KAÇIRDIĞINIZ DERSLER SONRAKİ KONULARA TEMEL OLUŞTURDUĞUNDAN SONRAKİ DERSLERİ DE ANLAYAMAZSINIZ DERSLERE ZAMANINDA GELİNİZ; KAÇIRILAN DERSLERİN TELAFİSİNİN YAPILMADIĞINI UNUTMAYINIZ ANLAMADIĞINIZ KONU OLDUĞUNDA HEMEN EĞİTMENE SORUNUZ

4 LÜTFEN DİKKAT! DERSLERDE CEP TELEFONU V.B. CİHAZLARI KAPATINIZ EĞİTMEN DERS ANLATIRKEN TELEFON, MAKYAJ V.B. ŞEYLERLE İLGİLENMEYİNİZ SINIFIN DİKKATİNİ DAĞITACAK DAVRANIŞLARDAN KAÇININIZ

5 LÜTFEN DİKKAT! LABORATUVARDAKİ BİLGİSAYAR V.B. CİHAZLARIN BOZULMAMASI İÇİN: SINIFTA YİYECEK-İÇECEK TÜKETMEYİNİZ; SIVI VE SUSAM GİBİ MADDELER CİHAZLARA ZARAR VERİR VE DÜZGÜN ÇALIŞMASINI ENGELLER CİHAZLARI KURCALAMAYINIZ; CİHAZDA ARIZA OLDUĞUNU DÜŞÜNÜYORSANIZ BİR KAĞIDA NOT BIRAKINIZ

6 LÜTFEN DİKKAT! BİLGİSAYARLARDAKİ KORUMA YAZILIMI, BİLGİSAYAR KAPANDIKTAN SONRA KAYDETTİĞİNİZ TÜM DOSYALARI & AYARLARI SİLMEKTEDİR LÜTFEN DOSYALARINIZI FLASH BELLEĞE KAYDEDİN VEYA DERS SONUNDA ADRESİNİZE GÖNDERİN

7 LÜTFEN DİKKAT! YAZILIM İSTEMEYİNİZ. KORSAN YAZILIM SUÇTUR; HAPİS VE PARA CEZASI VARDIR LİSANSLI OLARAK SATIN ALINAN YAZILIMLARIN YÜKLENMESİNDE YARDIMCI OLUNABİLİR ÜCRETSİZ VEYA AÇIK KAYNAK KODLU YAZILIMLARI SUNUCUMUZDAN İNDİREBİLİRSİNİZ

8 DERS SLAYTLARI DERS SLAYTLARI VE DİĞER DÖKÜMANLARI SUNUCUDAN ALINIZ Windows Gezgini ->Adres Çubuğu -> \\sunucu\ depo\ Kullanıcı Adı : bilimsel Parola : bilimsel

9 BİLİNMESİ GEREKENKLER TEMEL WINDOWS BİLGİSİ NOT DEFTERİ VEYA DEAMWEAVER HTML 9

10 BAZI TANIMLAR NESNE: SAYFA/FORM TASARIMINDA KULLANILAN RESİM, TABLO, METİN KUTUSU V.B. ÖĞELERE NESNE DENİR. ÖZELLİK: NESNELERERİN GÖRSELLİĞİNİ DEĞİŞTİRMEYE YA DA AYARLAMAYA YARAYAN PARAMETRE. METOD: NESNELERİN YAPABİLDİĞİ İŞLER. 10

11 NESNE.METHOD() HOCA.YÜRÜ() HOCA.DERSANLAT() BOLT.KOŞ() NESNELERE BİR İŞ YAPTIRMAK İÇİN METODLAR KULLANILIR. 11

12 NESNE, ÖZELLİK & DEĞER ÖRNEĞİN BİR İNSANIN BOYUNUN 185 OLDUĞUNU BELİRTMEK İÇİN: NESNE.ÖZELLİK=DEĞER VEYA NESNE {ÖZELLİK:DEĞER} GİBİ YAZIM KURALLARI KULLANILABİLİR. İNSAN.BOY=185 VEYA İNSAN{BOY:185} 12

13 NESNE.ÖZELLİK=DEĞER HOCA.KİLO=95 ALİ.SAÇRENGİ=SİYAH FATMA.GÖZRENGİ=MAVİ AYŞE.BOY=170 VB DE NESNELERİN ÖZELLİKLERİNİ BELİRLEMEK İÇİN BU YAZIM KURALI KULLANILIR. 13

14 NESNE{ÖZELLİK:DEĞER} HOCA{KİLO:95} ALİ{SAÇRENGİ:SİYAH} FATMA{GÖZRENGİ:MAVİ} AYŞE{BOY:170} CSS TE NESNELERİN ÖZELLİKLERİNİ BELİRLEMEK İÇİN BU YAZIM KURALI KULLANILIR. 14

15 STİL (BİÇEM) NEDİR? BELLİ BİR ADLA ANILAN AYARLAR TOPLULUĞUDUR. ÖRNEĞİN BİR METNE ARIAL YAZITİPİNİ, BOLD VE İTALİK BİÇİMLERİNİ AYNI ANDA UYGULAMAYA YARAYAN AYARLAR ADLI BİR STİL OLUŞTURABİLİRSİNİZ. YA DA BİR TABLONUN ARDALAN RENGİNİ SARI, KENARLIK RENGİNİ DE LACİVERT YAPAN TBL ADLI BİR STİL OLUŞTURABİLİRSİNİZ. 15

16 CSS NEDİR? NE İŞE YARAR? CSS CASCADE STYLE SHEETS KELİMELERİNİN KISALTILMIŞIDIR. HTML KOMUTLARININ GÖRSEL ÖZELLİKLERİNİ BELİRLER. ÖRNEĞİN <P> TAGININ FONTU, ARDALAN RENGİ, BOYUTU V.B. CSS, BELİRLİ BİR İSİM ALTINDA TANIMLANMIŞ GÖRSEL ÖZELLİKLER TOPLULUĞUDUR. 16

17 NEDEN CSS KULLANMALIYIZ? BAZI HTML KOMUTLARI FARKLI TARAYICILAR TARAFINDAN FARKLI ŞEKİLDE YORUMLANIR. ÖRNEĞİN IE DA PARAGRAFLAR ARASI MESAFE 6 PUNTO İKEN CHROME DA 8 PUNTO OLABİLİR. BU DA SAYFALARIMIZIN FARKLI TARAYICILARDA FARKLI GÖRÜNMESİNE VE TÜM GRAFİKLERİN KARIŞMASINA NEDEN OLABİLİR. 17

18 NEDEN CSS KULLANMALIYIZ? YAPTIĞIMIZ SAYFALARIN TÜM TARAYICILARDA AYNI GÖRÜNMESİ İÇİN CSS KULLANMALIYIZ. AYRICA CSS WEB SAYFALARIMIZI KOLAY VE HIZLI BİR ŞEKİLDE DÜZENLEMEMİZİ VE GÖRSELLEŞTİRMEMİZİ SAĞLAR. YAPTIĞINIZ CSS AYARLARI BAŞKA SAYFALARDA HATTA BAŞKA SİTELERDE DE KULLANILABİLİR. 18

19 HTML & CSS HTML KOMUTLARI SAYFA İÇERİĞİNİ DÜZENLER; SAYFADA NE TÜR YAZILAR VE RESİMLER OLACAĞINI BELİRLER. CSS KOMUTLARI İSE SAYFALARIN GÖRSELLİĞİNİ DÜZENLEMEYE YARAR; SAYFAMIZDAKİ YAZILARIN BOYUTUNU, RENGİNİ, KALINLIĞINI V.B. AYARLARI BELİRLER. 19

20 CSS SAYFANIN NERESİNE YAZILABİLİR? CSS AYARLARINI 3 FARKLI YERDE YAPABİLİRSİNİZ. HTML KOMUTUNUN İÇİNDE SAYFADA <HEAD> TAGININ İÇİNDE HARİCİ BİR METİN DOSYASI İÇİNDE (*.CSS) 20

21 SYNTAX (YAZIM KURALLARI) CSS 3 PARÇADAN OLUŞUR: HTML KOMUTU (SELECTOR) ÖZELLİK DEĞER HTML KOMUTU { ÖZELLİK : DEĞER } body { color:yellow } p {font-family: "sans serif"} p {text-align:center; color:red} 21

22 ÖRNEK-1 CSS İN DAHA RAHAT OKUNABİLMESİ VE ANLAŞILABİLMESİ İÇİN AŞAĞIDAKİ YÖNTEM KULLANILABİLİR: p { text-align: center; color: black; font-family: arial } 22

23 ÖRNEK-2 (GRUPLAMA) AŞAĞIDAKİ ÖRNEKTE FARKLI KOMUTLARIN RENGİ YEŞİL YAPILIR: h1,h2,h3,h4,h5,h6, p, hr { color: green } 23

24 HTML KOMUTU İÇİN CSS HTML KOMUTUNUN VARSAYILAN AYARLARINI DEĞİŞTİRMEYE YARAR. ÖRNEĞİN <P> TAGININ VARSAYILAN ARDALANI BEYAZ, METİN RENGİ SİYAHTIR. CSS İLE <P> TAGININ VARSAYILAN ÖZELLİKLERİNİ DEĞİŞTİREBİLİRİZ. 24

25 HTML KOMUTU İÇİN CSS <style type="text/css"> p { background:#ffff66; color:#336699; font-family:verdana, Arial, Helvetica, sans-serif; font-size:12px } </style> 25

26 CLASS SELECTOR CLASS SELECTOR İLE BELİRLİ BİR HTML KOMUTU İÇİN FARKLI STİLLER TANIMLANABİLİR: p.sag {text-align: right} p.orta {text-align: center} P.SAG STİLİ UYGULANIRSA PARAGRAF SAĞA, P.ORTA STİLİ UYGULANIRSA PARAGRAF ORTAYA HİZALANIR. 26

27 CLASS SELECTOR KULLANIMI <p class= sag > Bu paragraf sağa hizalanır.</p> <p class= orta > Bu paragraf ortaya hizalanır. </p> 27

28 BİRDEN FAZLA CLASS SELECTOR KULLANIMI <p class="orta kaln"> Bu bir paragraftır ve 2 adet class selector uygulanmıştır. </p> YUKARIDAKİ <P> TAGINA ORTA VE KALN UYGULANMIŞTIR. 28

29 CLASS SELECTOR ÜN TÜM HTML KOMUTLARINDA KULLANIMI BU DURUMDA ÖZELLİKLE BİR HTML TAGI BELİRTİLMEZ. NOKTADAN SONRA CLASS SELECTOR ADI VERİLİR, ÖZELLİK VE DEĞER BELİRTİLİR:.orta { text align:center} BÖYLECE OLUŞTURDUĞUNUZ CSS TÜM HTML KOMUTLARINA UYGULANABİLİR. 29

30 ÖRNEK ÖNCE CLASS TANIMLANIR: <style type= text/css >.orta { text align:center} </style> DAHA SONRA HTML TAGLARINA UYGULANIR: <h1 class="orta"> Bu h1 tagı sayfaya ortalanır. </h1> <p class= orta"> Bu paragraf da sayfaya ortalanır. </p> 30

31 BELİRLİ ÖZELLİKTEKİ KOMUTLARA CSS UYGULAMA BAZI CSS LERİN SADECE BELİRLİ ÖZELLİĞE SAHİP HTML KOMUTLARINA UYGULANMASINI SAĞLAYABİLİRSİNİZ. ÖRNEĞİN FORMLARDA SADECE METİN KUTULARININ ARDALANININ SARI OLMASINI İSTİYORSUNUZ: input[type="text"] {background-color: yellow} 31

32 BELİRLİ ÖZELLİKTEKİ KOMUTLARA CSS UYGULAMA <style type= text/css > Input [type="text"] {background-color: yellow} </style> YUKARIDAKİ STİLİ TANIMLAYARAK Input TAGININ type ÖZELLİĞİ text OLAN BÜTÜN NESNELERİN ARDALANININ MAVİ OLMASINI SAĞLIYORUZ. 32

33 ID SELECTOR HER HTML TAGININ ID ÖZELLİĞİ VARDIR. BELLİ BİR ID DEĞERİNE SAHİP NESNELERE BELLİ BİR CSS UYGULANABİLİR. ÖRNEK ID SELECTOR: #dugme{color:#ff9900; font:bold} UYGULAMASI: <input id= dugme type= submit value= giriş > 33

34 BİR METNE CSS UYGULAMA HERHANGİ BİR TAGIN İÇİNDE OLMAYAN METİNLERE STİL UYGULAMAK İÇİN <SPAN> TAGI KULLANILIR: <span class="stil">ad Soyad:</span> 34

35 AÇIKLAMA SATIRLARI AÇIKLAMALAR /*. */ ARASINA YAZILIR. AÇIKLAMALAR PROGRAMCIYA YÖNELİKTİR VE TARAYICI TARAFINDAN DİKKATE ALINMAZ. UYGULAMA: /* Metni ortala */ p { text-align: center; /* Renk siyah */ color: black; font-family: arial } 35

36 UZUN LAFIN KISASI <style type= text/css >.stil1{ background:#99ff00}.stil2{text-align:left} </style> İLE STİL TANIMLANIR HTML KOMUTUNUN CLASS ÖZELLİĞİ KULLANILARAK STİL UYGULANIR. <p class= stil1 > </p> 36

37 İÇ VE DIŞ STİLLER WEB SAYFALARIMIZI BİÇİMLENDİREN STİLLER 3 FARKLI YERDE TANIMLANABİLİR. SAYFA İÇİNDE HEAD BÖLÜMÜNDE (İÇ/INTERNAL) BAŞKA BİR DOSYADA (DIŞ/EXTERNAL) HTML KOMUTUNUN İÇİNDE (SATIR/INLINE) 37

38 INTERNAL STYLE SHEET EĞER BİR STİL SADECE TEK BİR SAYFADA KULLANILACAKSA, BU STİL WEB SAYFASININ İÇİNDE HEAD BÖLÜMÜNDE TANIMLANABİLİR. <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/ata.gif")} </style> </head> 38

39 EXTERNAL STYLE SHEET EĞER BİR STİL BİRDEN FAZLA WEB SAYFASINDA KULLANILACAKSA ÖZEL BİR SAYFADA TANIMLANIR. BU SAYFA.CSS UZANTILI BİR METİN DOSYASIDIR. BÖYLECE STİL DOSYASINDA YAPILAN DEĞİŞİKLİKLE SİTEDEKİ TÜM SAYFALARIN GÖRÜNÜŞÜ KOLAYLIKLA DEĞİŞTİRİLEBİLİR. 39

40 EXTERNAL STYLE SHEET ÖRNEĞİN AYARLAR.CSS İSİMLİ BİR NOT DEFTERİ DOSYASI OLUŞTURULUR. BU DOSYANIN İÇİNDE STİLLER TANIMLANIR. hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/ata.gif")} 40

41 EXTERNAL STYLE SHEET DAHA SONRA LINK KOMUTUYLA BU STİLLER SAYFA İÇİNE BAĞLANIR: <head> <link rel="stylesheet" type="text/css" href= ayarlar.css /> </head>.css UZANTILI STİL DOSYASININ İÇİNDE HTML KOMUTU OLMAMALIDIR. 41

42 INLINE STYLE SHEET HTML KOMUTUNUN İÇİNDE TANIMLANAN STİLLERDİR. <p style="color: sienna; margin-left: 20px" > This is a paragraph </p> 42

43 CSS PSEUDO CLASS BAZI HTML KOMUTLARINA BAZI ÖZEL İŞLEMLER YAPMAYA YARAR. GENELDE LİNKLERİN RENGİNİ DEĞİŞTİRMEK İÇİN KULLANILIR. ÇOK KULLANILDIĞI İÇİN İYİ BİLİNMESİ GEREKİR. SYNTAX (YAZIM KURALI): selector:pseudo-class {property: value} 43

44 CSS PSEUDO CLASS AŞAĞIDAKİ STİLLERLE SAYFADAKİ TÜM LİNK RENKLERİ OTOMATİK DEĞİŞİR. <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> 44

45 HANGİ CSS AYARLARI ÖNCELİKLİDİR? 1-VARSA HTML KOMUTUNUN İÇİNDEKİ CSS AYARLARI 2-VARSA <HEAD> BÖLÜMÜNDEKİ CSS AYARLARI 3-VARSA HARİCİ CSS DOSYA AYARLARI 4-EĞER HERHANGİ BİR CSS TANIMLANMADIYSA HTML KOMUTLARI TARAYICININ VARSAYILAN AYARLARIYLA GÖSTERİLİR. YANİ EN ÖNCELİKLİ CSS AYARI HTML KOMUTU İÇİNDEKİ AYARLARDIR. 45

46 ÖZELLİK VE DEĞERLER STİL OLUŞTURMAK İÇİN NESNELERİN ÖZELLİKLERİ VE BU ÖZELLİKLERİN ALABİLECEĞİ DEĞERLERİ BİLMEK GEREKLİDİR. BUNDAN SONRAKİ KONULARDA ÇOK KULLANILAN ÖZELLİKLERİ VE ALABİLECEĞİ BAZI DEĞERLERİ ÖĞRENECEĞİZ. 46

47 CSS BACKGROUND NESNELERİN ARDALAN RENGİNİ BELİRLER. <style type="text/css"> body {background-color: cyan} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> 47

48 CSS BACKGROUND BİR RESMİN ARDALAN OLARAK KULLANILMASI: <style type="text/css"> body { background-image: url( ata.jpg') } </style> 48

49 CSS BACKGROUND RESMİN SADECE DİKEY YAYILMASI: <style type="text/css"> body { background-image: url( ata.jpg'); backgroundrepeat: repeat-y } </style> RESMİN SADECE YATAY YAYILMASI: <style type="text/css"> body { background-image: url( ata.jpg'); backgroundrepeat: repeat-x } </style> 49

50 CSS BACKGROUND RESMİN SADECE BİR DEFA KULLANILMASI: <style type="text/css"> body { background-image: url('bgdesert.jpg'); background-repeat: no-repeat } </style> 50

51 CSS BACKGROUND RESMİN BELLİ BİR NOKTAYA KOYULMASI: <head> <style type="text/css"> body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 50px 100px; } </style> </head> 51

52 CSS TEXT YAZININ RENGİNİ DEĞİŞTİRMEK: <head> <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> 52

53 CSS TEXT KARAKTERLER ARASI MESAFE: <style type="text/css"> h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} </style> 53

54 CSS TEXT SATIRLAR ARASI MESAFENİN AYARI: <style type="text/css"> p.small {line-height: 90%} p.big {line-height: 200%} </style> 54

55 CSS TEXT PARAGRAFLARIN HİZALANMASI: <style type="text/css"> p {text-align: center} h2 {text-align: left} h3 {text-align: right} </style> 55

56 CSS TEXT METİNLERİN ÇİZİLMESİ: <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration: blink} a {text-decoration: none} </style> 56

57 CSS FONT METİNLERİN FONTU: <style type="text/css"> h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} </style> 57

58 CSS FONT YAZI BOYUTU: <style type="text/css"> h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: 70%} </style> 58

59 CSS FONT FONT BİÇİMİ: <style type="text/css"> h1 {font-style: italic} h2 {font-style: normal} p {font-style: oblique} </style> 59

60 CSS FONT YAZI KALINLIĞI: <head> <style type="text/css"> p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} </style> </head> 60

61 CSS BORDER NESNELERİN ETRAFINDAKİ KENARLIKLARIN AYARLARI. <style type="text/css"> p { border: medium double rgb(250,0,255) } p.dotted {border-style: dotted} p.one { border-style: solid; border-color: #0000ff } p.two { border-style: solid; border-width: 5px } </style> 61

62 CSS OUTLINE IE DE ÇALIŞMAZ NESNELERİN ETRAFINA KENARLIK YAPAR. <style type="text/css"> p { border: red solid thin; outline: green dotted thick } </style> 62

63 CSS MARGIN NESNELERİN ETRAFINDAKİ BOŞLUĞU AYARLAR. <style type="text/css"> p.margin {margin: 2cm 4cm 3cm 4cm} p.topmargin { margin-top: 25% } </style> 63

64 CSS PADDING TABLOLARDA HÜCRE İÇERİĞİ İLE HÜCRE KENARLARI ARASINDAKİ MESAFEYI AYARLAR. HÜCRE: İÇERİK 64

65 CSS PADDING <style type="text/css"> td.test1 {padding: 1.5cm} td {padding-top: 2cm} </style> 65

66 CSS LIST HTML LİSTELERİNİN İMLERİNİ AYARLAMAK İÇİN KULLANILIR. <style type="text/css"> ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} Hepsi {list-style: square inside url('arrow.gif') } </style> 66

67 CSS TABLE HTML TABLOLARININ GÖRÜNÜŞÜNÜ AYARLAMAK İÇİN KULLANILIR. <style type="text/css"> table.one { border-collapse: separate; border-spacing: 10px empty-cells: show }</style> 67

68 CSS DIMENSION NESNELERİN BOYUTLARINI AYARLAR. <style type="text/css"> img.normal { height: auto } img.big { height: 160px } img.small { height: 30px } img.medium { width: 50% } p.small { line-height: 10px } </style> 68

69 HTML & CSS İLE UYGULAMA HTML VE CSS KODLARI KULLANARAK WEB SİTESİ TASARIMI 69