T.C.

MLL ETM BAKANLII

BLM TEKNOLOJLER

HTML LE GELM WEB LEMLER

482BK0153

Ankara, 2012

Bu modl, mesleki ve teknik eitim okul/kurumlarnda uygulanan ereve retim Programlarnda yer alan yeterlikleri kazandrmaya ynelik olarak rencilere rehberlik etmek amacyla hazrlanm bireysel renme materyalidir. Mill Eitim Bakanlnca cretsiz olarak verilmitir. PARA LE SATILMAZ.

NDEKLER
AIKLAMALAR ........................................................................................................................... ii GR .............................................................................................................................................. 1 RENME FAALYET1 ........................................................................................................... 3 1. FORMLAR ................................................................................................................................. 3 1.1. <Form> ................................................................................................................................ 3 1.1.1. Action ........................................................................................................................... 3 1.1.2. Method ......................................................................................................................... 4 1.2. <input> ................................................................................................................................ 4 1.3. Form Nesneleri .................................................................................................................... 5 1.3.1. CheckBox ..................................................................................................................... 5 1.3.2. Radio ............................................................................................................................ 7 1.3.3. Text .............................................................................................................................. 7 1.3.4. Password ...................................................................................................................... 8 1.3.5. Textarea ........................................................................................................................ 8 1.3.6. Alr Menler .............................................................................................................. 8 1.3.7. Reset ........................................................................................................................... 10 1.3.8. Submit ........................................................................................................................ 10 UYGULAMA FAALYET ..................................................................................................... 11 LME VE DEERLENDRME ........................................................................................... 13 RENME FAALYET-2 .......................................................................................................... 14 2. EREVELER ......................................................................................................................... 14 2.1. <frameset> ......................................................................................................................... 14 2.1.1. Cols ............................................................................................................................ 15 2.1.2. Rows........................................................................................................................... 16 2.2. <frame> ............................................................................................................................. 17 2.3. <noframe> ......................................................................................................................... 18 2.4. e ereve Oluturma .................................................................................................. 18 2.5. <iframe> ............................................................................................................................ 19 UYGULAMA FAALYET ..................................................................................................... 21 LME VE DEERLENDRME ........................................................................................... 23 RENME FAALYET3 ......................................................................................................... 24 3. STL ABLONLARI ................................................................................................................ 24 3.1. Stil ablonlarnn Komut Yaps ........................................................................................ 24 3.2. Stil ablonlarnn eitleri, Seiciler ................................................................................. 24 3.2.1. Stil ablonlarnn eitleri ......................................................................................... 24 3.2.2. Seiciler (Selectors) ................................................................................................... 27 UYGULAMA FAALYET ..................................................................................................... 29 LME VE DEERLENDRME ........................................................................................... 31 RENME FAALYET4 ......................................................................................................... 32 4. OKLU ORTAM ARALARI ................................................................................................ 32 4.1. Resim Ekleme .................................................................................................................... 32 4.2. Ses Aralar Ekleme .......................................................................................................... 34 4.3. Video ekleme ..................................................................................................................... 35 UYGULAMA FAALYET ..................................................................................................... 36 LME VE DEERLENDRME ........................................................................................... 38 MODL DEERLENDRME ..................................................................................................... 39 CEVAP ANAHTARLARI ............................................................................................................ 41 KAYNAKA ................................................................................................................................ 42

AIKLAMALAR AIKLAMALAR
KOD ALAN DAL/MESLEK MODLN ADI MODLN TANIMI SRE N KOUL YETERLK 482BK0153 Biliim Teknolojileri Web Programcl HTML le Gelimi Web lemleri Bu modl rencinin, gerekli ortam salandnda, HTML kodlarn kullanarak web sayfalar iin gelimi aralar oluturabilecei bir renme materyalidir. 40/24 HTML ile Basit Web lemleri modln tamamlam olmak. HTML kodlar ile gelimi web ilemlerini yapmak Genel Ama Bu modl ile gerekli ortam salandnda; HTML kodlar ile gelimi web ilemlerini yapabileceksiniz. Amalar 1. Formlar oluturabileceksiniz. 2. ereveler oluturabileceksiniz. 3. Stil ablonlar oluturabileceksiniz. 4. 4. Web sayfalar iin oklu ortam aralar ekleyebileceksiniz. Ortam: Bilgisayar Laboratuvar Donanm: Bilgisayar, internet, projeksiyon Modl iinde yer alan her renme faaliyetinden sonra verilen lme aralar ile kendinizi deerlendireceksiniz. retmen modl sonunda lme arac (oktan semeli test, doru-yanl testi, boluk doldurma, eletirme vb.) kullanarak modl uygulamalar ile kazandnz bilgi ve becerileri lerek sizi deerlendirecektir.

MODLN AMACI

ETM RETM ORTAMLARI VE DONANIMLARI LME VE DEERLENDRME

ii

GR GR
Sevgili renci, Bir nceki HTML ile Basit Web lemleri modlnde web sayfalarnn hazrlanmasnda kullanlan temel etiketleri renmitik. Html ile Basit Web lemleri modlnn devam niteliinde olan bu modlle de daha nce renmi olduunuz bilgileri gelitirerek yenilerini ekleyebileceksiniz. Bu modlde reneceiniz formlar konusu sayesinde kullancnn da aktif olaca dinamik web sayfalar hazrlayp CSS ile Stil ablonlarnn salad kolaylklar kullanabileceksiniz. Ayrca web sayfalarnz ereveler halinde kullanabilecek ve oklu ortam aralarn kullanarak sayfalarnza resim, ses ve videolar ekleyip web sitenizi daha dinamik ve etkileyici hale getirebileceksiniz.

RENME FAALYET1
AMA

RENME FAALYET1

Uygun ortam salandnda web sayfalar iin formlar oluturabileceksiniz.

ARATIRMA
Web sayfalarnda formlarn kullanm amalarn ve nasl kullanldn aratrnz.

1. FORMLAR
Html ile Basit Web lemleri modlnde renmi olduunuz bilgiler; kullancnn aktif olmad, bilgileri sadece grsel olarak kullancya sunan yaplard. Formlar sayesinde kullancnn da aktif olaca dinamik web sayfalar hazrlayabilmeyi reneceksiniz. Kullancdan veri alabilecek, alnan verilerle istenilen birok ilemi gerekletirebileceksiniz. Sosyal paylam siteleri, e-ticaret siteleri gibi ye girili siteler de form elemanlar kullanlarak hazrlanmaktadr.

1.1. <Form>
<form> etiketi html formlar oluturmak iin kullanlr. Form oluturmay salayan tm form elemanlar <form>.</form> etiketleri arasnda yer alr. Genel Kullanm: <FORM ACTION=url METHOD=get- post TARGET=pencere>... </FORM> rnek:

1.1.1. Action
Formdan girilecek olan bilgilerin deerlendirilecei dosyann URL adresini belirtmek iin kullanlr.

1.1.2. Method
Formdan girilecek olan bilgilerin, deerlendirici dosyaya hangi yntem ile gnderileceini belirtmek iin kullanlr. Method post ve get deerlerini alabilir. Method blmne, GET deeri verildii zaman kontrollere girilen ierik o anda bulunan adrese eklenip deerlendiriciye gnderilir. POST ise form ieriini direkt olarak deerlendiriciye gnderir.

1.2. <input>
<input> etiketi form ierisinde bilgi almak iin kullanlan etikettir. Hangi veri trnde giriin yaplacan burada kullanlan type eleman belirlemektedir. Type elemannn varsaylan deeri text(metin) olmakla birlikte belirtilecek olan(text, password, checkbox, radio,submit, reset gibi) farkl deerleri de alabilir. <input> etiketinin sonlandrc etiketi bulunmaz yani bu etiket kapatlmaz. Kullanm: <INPUT ALIGN=tip [CHECKED] MAXLENGTH=uzunluk NAME=isim SIZE=boyut SRC=adres TYPE=tip VALUE=deer> <input> etiketi ile kullanlacak parametreler Tablo 1.1de gsterilmitir. Kullanlacak Parametre TYPE SRC Grevi Girilecek olan elemann trn belirtmek iin kullanlr. Eer bir resim dosyas kullanlmsa grntlenmesi istenilen resim dosyasnn adresini belirtmek iin kullanlr. Type parametresi ile tanmlanm olan elemann sayfada konumlanaca yeri belirlemek iin kullanlr(left, right, center). Girilecek olan verinin deiken ismini belirlemek iin kullanlr. Girilecek olan verinin en fazla ka karakterden oluacan belirlemek iin kullanlr. Metin kutusunun boyutunu (geniliini) belirlemek iin kullanlr.Hibir rakam belirtilmedii takdirde varsaylan deeri 20dir. Bir seim kutusu kullanld durumlarda nu kutularn iaretlenmi olarak grntlenmesini salamak iin kullanlr. Sadece radio ve checkbox elemanlar iin kullanlr. Veri giriini engellemek iin kullanlr.

ALIGN

NAME MAXLENGTH

SIZE

CHECKED

DISABLED

Tablo 1.1: <input> etiketi parametreleri

rnek: Aada <input> etiketinin kullanm ile ilgili rnek gsterilmitir.

Yukardaki kodlar kaydedip altrdmzda taraycdaki grnt aadaki ekilde olacaktr.

1.3. Form Nesneleri

Bir form ierisinde metin kutular, radyo dmeleri, onay kutular, metin alanlar, alr menler gibi elemanlardan istenilenler kullanlabilir. Bu elemanlar ieren formlar kullanlabilir hale getirmek iin ise (submit) ve (reset) dmeleri kullanlr. imdi bu elemanlarn ve dmelerin ne ie yaradn ve nasl kullanldn renelim.

1.3.1. CheckBox
Hazrlamakta olduunuz forma onay kutular eklemek iin kullanlr. Onay kutular, listelenen seeneklerden istediiniz kadarn seebilmenize veya tmn seilmemi duruma getirmenize olanak salar.

rnek:

Yukardaki kodu yazp taraycda altrdmzda aadaki grnt elde edilecektir. Checked zellii ile sayfa yklendii zaman grntlenmesini istediimiz seenekler belirlenir.

1.3.2. Radio
Radio dmeleri, kullancnn verilen seeneklerden sadece bir tanesini seebilecei durumlar iin kullanlmaktadr. Radio dmelerinin birbirleri ile ilikili olmas ve name zelliklerinin ayni olmas gerekmektedir. Checked zelliini kullanarak sayfa yklendii zaman, seili olmasn istediiniz deer belirlenir. Radio dmelerinin alaca deerler Value seeneinde belirlenir. rnek:

1.3.3. Text
Hazrlamakta olduunuz forma, tek satrlk yaz yazlabilecek alan (textbox) eklemek iin kullanlr. Bu alan ile birlikte size maxlength zelliklerini de kullanabilirsiniz. rnek:

Kodu kaydedip altrdnz zaman taraycdaki grnt aadaki gibi olacaktr.

1.3.4. Password
Hazrlamakta olduunuz forma ifreli alanlar eklemek iin kullanlr. Type zelliine, password deeri atanarak oluturulur. rnek:

Yukardaki kodu kaydedip altrdnz zaman taraycdaki grnt aadaki gibi olacaktr.

1.3.5. Textarea
Text kutularnn grevi, hazrlamakta olduumuz forma tek satrlk veri giri alanlar eklemek iken Textarea kullanarak forma, birden fazla satrdan oluan alanlar ekleyebiliriz. Rows (satr) ve cols (stun) tanmlamalar yaplarak bu metin alannn ka satr ve ka stundan olumas gerektii belirlenir. rnek:

1.3.6. Alr Menler

Hazrlamakta olduunuz formlara <select> (se) etiketi kullanarak alr menler ekleyebilirsiniz. Listbox (liste kutusu) ve drop-down list (aa alr liste) eklinde iki farkl tr de seim kutusu oluturulabilir. Listede yer alacak elemanlarn neler olaca ise <option> etiketi ile belirlenir.

rnek 1:

rnek 2: Aadaki rnekte size zelliine 3 deeri atanmtr. Listede yer alan elemanlardan 3 tanesinin ekranda grntleneceini gstermektedir. Size zellii listeden yer alan elemanlardan istediiniz kadarnn ekranda grntlenmesini ayarlamak iin kullanlr. Multiple zellii ise Ctrl tuu kullanarak birden fazla seim yapmamza olanak salamaktadr.

Yukardaki kodu kaydedip altrdmz zaman taraycdaki grnt aadaki gibi olacaktr.

1.3.7. Reset
zerine gelip tkland zaman, form ieriini temizleyip kullancnn forma yeniden bilgi girii salayan bir dme (buton) oluturulmasn salar. Kullanm: <input type=reset> Value zellii, dme zerinde istediiniz metni yazmanza olanak salar.

1.3.8. Submit
Submit (gnder), form ierisinde yer alan ieriklerin sunucuya gnderilmesini salamak iin kullanlr. Kullanm: <input type=submit> Value zellii dme zerinde istediiniz metni yazmanza olanak salar. rnek:

10

UYGULAMA FAALYET

UYGULAMA FAALYET
Aadaki ekilde bir irkete ait personelin ad, soyad, cinsiyeti, doum yeri ve doum tarihi bilgilerinin tutulduu bir web formu hazrlaynz.

lem Basamaklar Html dosyas hazrlama programn altrnz. Web formu zerine ad, soyad bilgilerini girmemizi salayacak textbox oluturunuz. Web formu zerine cinsiyeti alann sememizi salayacak radio dmelerini ekleyiniz. Web formu zerine doum yeri bilgisini sememizi salayacak listbox ekleyiniz Web formu zerine doum tarihi bilgisini sememizi salayacak listbox ekleyiniz Web formu zerine formu kaydetmenizi salayacak butonu oluturunuz. Web formu zerine formdaki bilgileri temizlemeyi salayacak butonu oluturunuz. Hazrlam olduunuz dosyay Uygulama1.html olarak kaydediniz.

neriler Textbox, radio, alr men elemanlar ile submit ve reset dmelerini kullannz. <input type=text> Radyo dmesinde kadn cinsiyet bilgisinin zellii checked=on olarak ayarlanmaldr. Gn, ay ve yl bilgileri iin ayr ayr alr menler ekleyiniz. (Alr menler bal altnda anlatlmtr) <input type=submit> <input type=reset> DosyaKaydet Dosya ad:Uygulama.1.html Kayt Tr: Tm dosyalar

11

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi deerlendiriniz. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Deerlendirme ltleri <FORM> etiketini kullandnz m? ACTION parametresini kullandnz m? METHOD parametresini kullandnz m? <INPUT> etiketini kullandnz m? CHECKBOX form nesnesini kullandnz m? RADIO form nesnesini kullandnz m? TEXT form nesnesini kullandnz m? PASSWORD form nesnesini kullandnz m? Alr menleri kullandnz m? RESET form nesnesini kullandnz m? SUBMIT form nesnesini kullandnz m? Evet Hayr

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz. Kendinizi yeterli grmyorsanz, renme faaliyetini tekrar ediniz. Btn cevaplarnz Evet ise lme ve Deerlendirmeye geiniz.

12

LME VE DEERLENDRME LME VE DEERLENDRME

Aadaki cmlelerde bo braklan yerlere doru szckleri yaznz. 1. 2. 3. 4. 5. etiketi html formlar oluturmak iin kullanlr. etiketi hazrlamakta olduunuz forma onay kutular eklemek iin kullanlr etiketi hazrlamakta olduunuz forma tek satrlk yaz yazlabilecek alan eklemek iin kullanlr. Alr liste elemanlarnda kullanlan .. zellii, Ctrl tuu kullanarak birden fazla seim yapmamza olanak salar. ..form ierisinde yer alan ieriklerin sunucuya gnderilmesini salamak iin kullanlr.

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz. Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz.

13

RENME FAALYET2
AMA

RENME FAALYET-2

Uygun ortam salandnda web sayfalar iin ereveler oluturabileceksiniz.

ARATIRMA
Web sayfalarnda ereve kullanmann ne tr kolaylklar salayabileceini aratrnz.

2. EREVELER
ereveler, bir tarayc penceresini birden fazla pencereye blp her bir pencere ierisinde farkl ierikler gsterilmesini; ayrca bir pencerede tanmlanm olan balantlarn (linklerin) istediiniz bir dier pencerede grntlenmesini salar. erevelerin zelliklerini aada olduu gibi zetleyebiliriz; Her erevenin kendine ait bir URL adresi vardr. Her ereveye bir isim verilebilir. ereveler kullanc tarafndan verilecek llerle boyutlandrlabilecei gibi otomatik olarak da boyutlanabilme zelliine sahiptir.

inde ereveler bulunan bir sayfa oluturmak iin, ncelikle erevelerin zelliklerini tanmlayan temel bir html dosyas oluturmak gerekir. erevelerden oluan bir sayfann normal bir html belgesinden fark ieriinde <body> etiketi yerine, <frameset> etiketini kullanmasdr.

2.1. <frameset>
ereve oluturmak iin kullanlan etikettir. Bu komut ile tarayc penceresinin ka paraya blnecei (ereve says) ve bu erevelerin boyutlarnn ne kadar olaca belirlenir. Kullanm:

14

Bu etiketle birlikte kullanlacak iki parametre vardr. Bunlar Cols ve Rows parametreleridir.

2.1.1. Cols
<frameset> etiketi ile kullanlan parametrelerden birisidir. Ekran dikey olarak (stunlar halinde) tanmlanan boyutlara blmek iin kullanlr. Oluturulacak stunlarn genilikleri pixel veya yzde(%) cinsinde belirlenir. Stun says, ereve saysn belirleyici niteliktedir. Kullanm: <FRAMESET COLS="1. stun genilii, 2. stun genilii, 3.stunun genilii, "> rnek 1: <frameset cols=30%, 40%, 30%> Buradaki 1.stun sayfann %30u geniliinde, 2. Stun %40 geniliinde ve 3. stun ise %30u geniliinde boyutlandrlmtr.

15

rnek 2: <frameset cols=200,*,200> Burada stunlar eklinde tanmlanan birinci ve nc ereve 200 pixel deerinde, 2. ereve ise sayfann geri kalan ksmn kapsayacak ekilde boyutlandrlmtr.

2.1.2. Rows
<frameset> etiketi ile kullanlan bir dier parametre ise rows parametresidir. Ekran yatay olarak (satrlar halinde) tanmlanan boyutlarda blmek iin kullanlr. Kullanm: <FRAMESET ROWS="1. satr genilii, 2. satr genilii, 3.satr genilii, "> rnek: <frameset rows=200,*,200> Sayfada grntlenecek olan erevelerin says ve boyutlar belirlendikten sonra <FRAME> etiketi kullanlarak pencerelerin ieriinde neler olaca belirlenir. rnek:

16

2.2. <frame>
<frame> etiketi, <frameset> etiketi ile oluturulan erevelerin ieriinde gsterilecek sayfalarn belirlenmesi iin kullanlr. rnek:

Yukardaki rnekte <frameset> ile tanmlanm erevelerden olumu sayfann ilk %50lik ksmn kapsayacak blmne nceden oluturulmu olan sayfa1.html deki ierik; dier %50 lik dilimini oluturan 2. ereveye ise sayfa2.html olarak kaydedilmi sayfadaki ierik yerletirilecektir. Eer bu sayfalar nceden hazrlanp kaydedilmemise taraycda sayfa grntlenemiyor hata mesaj grntlenecektir. <frame> etiketi ile kullanlabilecek parametreler ve grevleri Tablo 2.1de gsterilmitir. Parametre NAME RESIZE/NORESIZE SCROLLING Grevi erevenin ismini gsterir. ereve boyutunun deitirilip deitirilemeyeceini gsterir erevenin ieriinin ekrana smad durumlarda, kaydrma ubuu kullanlp kullanlmayacan belirler. Varsaylan deeri auto olmakla birlikte, yes veya no deerleri de verilebilir. Sayfadaki ilk nesnenin yukardan ne kadar uzak olacan belirler. Sayfadaki ilk nesnenin soldan ne kadar uzak olacan belirler. ereve iinde gsterilmesini istediimiz dosyann URL adresini belirtmek iin kullanlr.

MARGINHEIGHT MARGINWIDTH SRC

Tablo: 2.1: <frame> etiketi parametreleri ve grevleri

17

2.3. <noframe>
Baz tarayclar ereve zelliini desteklemeyebilir. Bu tr durumlarda sayfaya <noframe> etiketi kullanarak mesaj yazlmas salanr ve kullancnn bu komutla belirlenen mesajla karlamas salanr. rnek:

2.4. e ereve Oluturma

<frameset> etiketi, ayn pencere ierisinde yatay ve dikey ereveleri birlikte kullanmanza olanak salar. rnek:

Yukardaki kodu yazp kaydettiimiz zaman taraycdaki grnts ekil 2.1 deki gibi olacaktr.

18

ekil 2.1: e ereve oluturma rnei

2.5. <iframe>
<iframe> etiketi, hazrlamakta olduunuz sayfann herhangi bir yerinde baka bir sayfa veya dokman grntlemek istediiniz zaman kullanlabilen, bir i ereve oluturmaya yarayan etikettir. Kullanlabilecek Parametre HEIGHT WIDTH NAME FRAMEBORDER SCROLLING Grevi erevenin yksekliini belirtmek iin kullanlr. erevenin geniliini belirtmek iin kullanlr. ereveye isim vermek iin kullanlr. erevenin kenarlnn olup olmayacan belirlemek iin kullanlr. erevede kaydrma ubuklarnn kullanlp kullanlmayacan belirlemek iin kullanlr.

19

rnek 1: Aadaki rnekte <iframe> etiketi kullanlarak, nceden hazrlanm olan ornek.html sayfasnn ieriinin genilii 200, ykseklii 100 olarak tanmlanm olan ifreme ierisinde grntlenmesi salanmtr.

rnek 2: Aadaki rnekte <iframe> etiketi kullanlarak; genilii 400, ykseklii 152 olarak tanmlanm olan iframe ierisinde www.meb.gov.tr internet sitesinin grntlenmesi salanmtr.

Yukardaki kodlar kaydedilip altrldnda taraycdaki grnt aadaki gibi olacaktr.

20

UYGULAMA FAALYET UYGULAMA FAALYET

Tarayc penceresinde aadaki ekilde grld gibi ieriinde farkl sayfay barndran tekli bir web sayfas oluturunuz.

lem Basamaklar Html dosyas hazrlama programna, web taraycsnda yukardaki ekildeki gibi grntlenecek olan ereveyi oluturmanz salayacak html kodlarn yaznz. Sayfa1.html, sayfa2.html ve sayfa3.html dosyalarn ekildeki gibi grntlenecek ekilde yerletiriniz. Dosyay ndex.html olarak kaydediniz.

neriler Cols deeri; "30%,40%,30%" Rows deeri ise "50%,50%" olarak verilecektir. Sayfa1.html, sayfa2.html ve sayfa3.html dosyalarn oluturunuz. Dosya-Kaydet komutunu altrnz. Kayt tr olarak Tm Dosyalar seeneini seiniz.

21

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi deerlendiriniz. 1. 2. 3. 4. 5. 6. 7. 8. Deerlendirme ltleri <FRAMESET> etiketini kullandnz m? COLS ve ROWS parametrelerini kullandnz m? <FRAME> etiketini kullandnz m? SCROLLING parametresini kullandnz m? NORESIZE parametresini kullandnz m? <NOFRAMES> etiketini kullandnz m? e ereve oluturdunuz mu? <iframe> etiketini kullandnz m? Evet Hayr

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz. Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz Evet ise lme ve Deerlendirme ye geiniz

22

LME VE DEERLENDRME LME VE DEERLENDRME

Aadaki cmlelerin banda bo braklan parantezlere, cmlelerde verilen bilgiler doru ise D, yanl ise Y yaznz. 1. 2. 3. 4. 5. ( ) Ekran dikey olarak (stunlar halinde) tanmlanan boyutlara blmek iin cols paramatresi kullanlr. ( ) Ekran yatay olarak (satrlar halinde) tanmlanan boyutlarda blmek iin rows parametresi kullanlmaz. ( ) SRC, ereve iinde gsterilmesini istediimiz dosyann URL adresini belirtmek iin kullanlan parametredir. ( ) erevede kaydrma ubuklarnn kullanlp kullanlmayacan belirlemek iin frameborder parametresi kullanlr. ( ) NAME, ereveye isim vermek iin kullanlan parametredir.

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz. Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz

23

RENME FAALYET3
AMA

RENME FAALYET3

Uygun ortam salandnda web sayfalar iin stil ablonlar oluturabileceksiniz.

ARATIRMA
Html belgesi olutururken stil ablonlarn kullanmann nemini ve salayacaklar kolaylklar aratrnz.

3. STL ABLONLARI
ncelikle unu belirtelim ki bir sonraki modlde bu konu detayl bir ekilde anlatlmaktadr. Stil ablonlar (CSS-Cascading Style Sheets), hazrlamakta olduunuz sayfalar iin istenildii zaman kullanlmak zere ablonlar oluturmaya yarar. Html, etiket trnde bir yazm dili olduundan tasarm konusunda ou zaman yetersiz kalabiliyor. Bir web sayfas hazrlanrken ok sayda renk veya font kullanmamz estetik asndan gerekli olabilmekte. Html ile bunlar her defasnda ayr ayr tanmlamak gerekirken, CSS bir defada tanmlayp tm sayfada kullanabilmemize olanak salar. Bylelikle bir deiiklik yapmamz gerektiinde tm sayfalarda deiiklik yapmak yerine, mevcut CSS zerinde deiiklik yaparak tm sayfalara etki etmesi salanmaktadr.Bu da iimizi olduka kolaylatrr. Css kodlar, body veya head blmlerinde yer almak zere Html kodlarnn iine yazlarak kullanlr. Ayrca harici CSS dosyalar oluturarak da istenildii zaman html dosyasnda kullanlmak zere de arlabilme zelliine sahiptir.

3.1. Stil ablonlarnn Komut Yaps

Style dosyalar html kodlarnn <head></head> blmnde tanmlanr. Kullanm: <style type="text/css">..</style> eklindedir.

3.2. Stil ablonlarnn eitleri, Seiciler

3.2.1. Stil ablonlarnn eitleri
Css kodlarnn en nemli zelliklerinden birisi farkl trlerde kullanlabilmesidir. stee gre tek bir geye, tm sayfaya veya site ierisinde kullanlan tm html dosyalarna etki edebilme zelliine sahiptir. Bu zellikler Yerel, Genel ve Harici CSS olarak adlandrlmaktadr.

24

Yerel CSS, html belgesinin <body> blmne yazlr ve bir defaya mahsus olmak zere sadece yazld yerde etkili olur. rnek:

Genel CSS, html belgesinin <head> blmne yazlr ve mevcut html dosyasnn tamam zerinde etkili olur. rnek:

Harici CSS, Global stil ablonu olarak da adlandrlr. Hazrlanmakta olan sitenin ayn zelliklerde olmasnn istenmesi durumunda kullanlr ve sitedeki tm sayfalara etki eder. Harici CSS de kodlar ayr bir dosyaya yazlp uzants .css olacak ekilde kaydedilir. Daha sonra html dosyas ierisinde yer alan <head>.</head> etiketleri arasna; <link rel="stylesheet" type="text/css" href="dosya_ismi.css"> eklinde yazlarak arlr.

25

rnek: Aada verilen kodlar kullanmakta olduunuz editre yazp stil.css olarak kaydediniz.

Aadaki kodlar kullanmakta olduunuz editre yazp harici.html olarak kaydediniz.

Kodlar kaydedilip altrldnda taraycdaki grnts aadaki gibi olacaktr.

26

3.2.2. Seiciler (Selectors)

Seiciler CSSnin en ok kullanlan elemanlarndandr. <h1>, <h2>,<h3> gibi etiketlerin zelliklerini deitirmeden onlara yeni zellikler eklemeyi salar.Ayrca istediimiz bir kelimeye, style zellikleri atayarak istenildii zaman armaya da olanak tsalar. Id seicisi ve snf seicisi olmak zere iki eit seici vardr. d Seicileri (ID Selectors): Html belgesinde kendi tanmlayc adlarna gnderme yaparak herhangi bir Html etiketine stil vermek amacyla kullanlrlar. Id seicilerini tanmlayc adlarnn nndeki # iaretinden tanrz. rnek:

27

Snf Seicileri (Class Selectors): Yazm olduunuz kodlarda kullandnz <h1> gibi etiketlerin tmnn ayn zellikte olmasn istemediiniz durumlar olabilir. Snf seicileri bu tr durumlarda kullanlr. rnek 1:

Bu rnekte snf seicisi sadece <h2>nin iinde tanmlanmtr. rnek 2:

Buradaki rnekte ise genel bir snf seicisi tanmlanmtr.

28

UYGULAMA FAALYET UYGULAMA FAALYET

Bir web sayfas iin yaz tipi, boyutu ve renginin belirlendii bir stil ablonu oluturup bu ablonu yerel, genel ve harici olarak kullannz. Not: Yaz tipi iin font-face etiketi, Yaz boyutu iin font-size etiketi, Yaz rengi iin color etiketi kullanldn unutmaynz. lem Basamaklar Stil ablonu yerel olarak kullannz. Genel olarak kullanmak iin <head> blounda yaziBicim adnda stil ablonu oluturunuz. Oluturduumuz ablonu <p> etiketine uygulaynz. yaziBicim adnda oluturduumuz ablonu style.css adnda harici bir ablon dosyas biimde kaydediniz. Kaydettiimiz dosyay web sayfamza dahil ediniz. <p> etiketine uygulaynz. neriler <p style=font-face:verdana; fontsize:11px; color:#cdcdcd;></p> .yaziBicim { font-face:verdana; font-size:11px; color:#cdcdcd; } <p class=yaziBicim></p> Stil ablonlar eitleri konu balna baknz. <link rel="stylesheet" type="text/css" href="style.css"> <p class=yaziBicim></p>

29

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi deerlendiriniz. 1. 2. 3. 4. 5. 6. 7. Deerlendirme ltleri Stil ablonlarnn komut yapsn rendiniz mi? Stil ablon eitlerini rendiniz mi? Sayfanzda yerel stil ablonunu tanmladnz m? Sayfanzda genel stil ablonunu tanmladnz m? Sayfanzda harici stil ablonunu tanmladnz m? Sayfanzda Id seicileri kullandnz m? Sayfanzda snf seicileri kullandnz m? Evet Hayr

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz. Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz Evet ise lme ve Deerlendirmeye geiniz

30

LME VE DEERLENDRME LME VE DEERLENDRME

Aadaki sorular dikkatlice okuyunuz ve doru seenei iaretleyiniz. 1. Html belgesinin <head> blmne yazlan ve mevcut html dosyasnn tamam zerinde etkili olan stil ablon eidi aadakilerden hangisidir? A) Harici CSS B) Genel CSS C) Yerel CSS D) Hibiri Html belgesinin <body> blmne yazlan ve bir defaya mahsus olmak zere sadece yazld yerde etkili olan stil ablon eidi aadakilerden hangisidir? A) Yerel CSS B) Genel CSS C) Harici CSS D) Hibiri Ka tane seici tr vardr? A) 1 B) 2 C) 3 D) 4 Aadakilerden hangisi yazy alt izili olarak yazmay salamak iin tanmlanm bir stildir? A) i {font-size: 10pt; color: blue} B) u {font-size: 10pt; color: blue} C) h1 {font-size: 10pt; color: blue} D) p {font-size: 10pt; color: blue} Bir web sayfas iin yazlan genel css kodlar hangi etiketle balar? A) <link> B) <script> C) <head> D) <style>

2.

3.

4.

5.

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz. Cevaplarnzn tm doru ise bir sonraki renme faaliyetine geiniz

31

RENME FAALYET4
AMA

RENME FAALYET4

Web sayfalar iin oklu ortam aralar ekleyebileceksiniz.

ARATIRMA
Yaygn olarak kullanlmakta olan ses, resim ve video dosyalarnn neler olduunu ve aralarnda ne tr farklar bulunduunu aratrnz.

4. OKLU ORTAM ARALARI

4.1. Resim Ekleme
Hazrlam olduunuz web sayfasnn ieriine uygun olarak resimler eklemek isteyebilirsiniz. Resim eklemek iin kullanlan html etiketi <img src>dir. Src, ekleyeceimiz resmin bulunduu dizini gsterir. Kullanm: <img src=res1.jpg> res1.jpg resminin sayfamza eklenmesini salar. <img src> etiketi ile kullanlan birtakm parametreler bulunur. Bunlar; width, height, border, align, alt parametreleridir. Width: Eklenilecek resmin pixel cinsinden geniliini gsterir. Height: Eklenilecek olan resmin pixel cinsinden yksekliini gsterir. Border: Eklenilecek olan resme bir ereve izilip kalnln belirlemek iin kullanlr. Border=0 olursa ereve izilmez. Buradaki say arttka erevenin kalnl da artar. Alt: Fare ile resmin zerine gelindiinde yazlmasn istediiniz metni belirlemek iin kullanlr. Align: Eklenilecek olan resmin nasl hizalanacan belirtmek iin kullanlr. Left deeri ile kullanld zaman resim saa hizal, right deeri ile kullanldnda resim sola hizal, center ile kullanldnda ise resim ortalanm olarak sayfaya eklenecektir.

32

rnek:

Yukardaki kodlar kaydedip altrdmzda agac.jpg resmi sayfanza Resim 4.1 de grld gibi eklenmi olacaktr.

Resim 4.1: agac.jpg

Eklemi olduunuz resme vereceimiz link sayesinde resmin yeni bir sayfada gerek boyutlarnda kmasn veya belirttiiniz sitenin almasn da salayabilirsiniz. rnek 1: <a href="resim.jpg"><IMG SRC="resim.jpg" width=100 height=100></a> rnek 2: <a href=http://www.meb.gov.tr><IMG SRC="logo.gif" alt="Logo"></a>

33

4.2. Ses Aralar Ekleme

Html kodlar ile hazrlam olduunuz sayfalara ses aralar ekleyerek sayfanzn daha arpc olmasn salayabilirsiniz. Ses dosyalarn sayfanza farkl durumda ekleyebilirsiniz. Sesi arka pln olarak ekleyebilirsiniz. Bylelikle sayfa tarayc tarafndan yklendii anda ses dosyas arka plnda almaya balayacaktr. <bgsound src=muzik.wav loop=infinite>

Burada loop zelliine infinite deeri verilerek, mziin arka plnda srekli almas salanm olunur. Sayfay kapatana kadar ses dosyas almaya devam edecektir. loop zelliine saysal bir deer vererek de (rnein loop=5) mziin ka kez tekrarlanp duraca belirlenir. Ses dosyasna link vererek de ses dosyalarnn almalarn salayabilirsiniz.

Buradaki linke tkland zaman bilgisayarda bulunan ses dosyas yrtc program alacak ve muzik.mid isimli ses dosyasnn almas salanacaktr. Ses dosyasn sayfaya ekleyerek, web sayfasn taraycda altrdnz zaman almasn salayabilirsiniz.

Kodunu kaydedip altrdmz zaman taraycdaki grnt aadaki gibi olup stiklal Marmzn almas salanm olacaktr.

Autostart, sayfann yklendii anda ses dosyasnn alp almamasn belirler. True deerini ald zaman ses dosyas,sayfa yklendii anda alacaktr. NOT:.mp3, .wav, .aif, .ra, .mid yaygn olarak kullanlan ses dosyas trlerinin uzantlarndan bazlardr.

34

4.3. Video ekleme

Bir web sayfasnda istediiniz herhangi bir video dosyasn grntleme ilemi, ses dosyas ekleme ilemi ile ayndr. Bir grnt dosyasna link vererek ilgili videonun almasn salayabilirsiniz. rnek: <P>Cumhuriyet Bayram kutlamalarn izlemek iin <a href="cumhuriyet.avi"> tklaynz.</a></P> Buradaki kodu kaydedip taraycda altrdmzda cumhuriyet.avi dosyas bilgisayarnzda bulunan video oynatc program tarafndan grntlenecektir. Video dosyalar ses dosyalarnda olduu gibi taraycnn iine eklenerek de kullanlabilir. rnek:

NOT: .mpeg, .avi, .mov, .wmv, .asf yaygn olarak kullanlan video dosyas trlerinin uzantlarndan bazlardr.

35

UYGULAMA FAALYET UYGULAMA FAALYET

zgemiinizin ve 1 adet profil resminizin yer alaca bir web sayfas hazrlaynz. Bu dosyay ozgecmis.html olarak kaydediniz. lem Basamaklar Ses kayt arac kullanarak ksa zgemiinizden bahseden bir ses dosyas hazrlaynz. Hazrlam olduunuz ses dosyasn ozgecmis.html sayfasna ekleyip sayfa yklendii zaman almasn salaynz http://www.rtukcocuk.org.tr/oyunlar.ph p internet sitesinden istediiniz bir oyunu bilgisayarnza indiriniz. ndirmi olduunuz video dosyasn hazrlam olduunuz web sayfasna ekleyiniz. neriler

Ses dosyas kodu eklenirken autostart=true olarak ayarlaynz

Video dosyas kodunu eklerken autostart=false olarak ayarlaynz.

36

KONTROL LSTES
Bu faaliyet kapsamnda aada listelenen davranlardan kazandnz beceriler iin Evet, kazanamadnz beceriler iin Hayr kutucuuna (X) iareti koyarak kendinizi deerlendiriniz. Deerlendirme ltleri 1. Web sayfanza resim eklediniz mi? 2. Web sayfanzda ses aralarn kullandnz m? 3. Web sayfanza video eklediniz mi? Evet Hayr

DEERLENDRME
Deerlendirme sonunda Hayr eklindeki cevaplarnz bir daha gzden geiriniz. Kendinizi yeterli grmyorsanz renme faaliyetini tekrar ediniz. Btn cevaplarnz Evet ise lme ve Deerlendirmeye geiniz

37

LME VE DEERLENDRME

LME VE DEERLENDRME
Aadaki cmlelerde bo braklan yerlere doru szckleri yaznz. 1. 2. 3. .. ,eklenilecek olan resme bir ereve izilip kalnln belirlemek iin kullanlr. ., fare ile resmin zerine gelindiinde yazlmasn istediiniz metni belirlemek iin kullanlr. loop zelliine verilen.deeri ile web sayfasna eklenmi olan mziin arka plnda srekli almas salanm olunur. Aadaki sorular dikkatlice okuyunuz ve doru seenei iaretleyiniz. 4. Web sayfalarmza resim eklemek iin aadaki etiketlerden hangisi kullanlr? A) <a href=> B) <embed src=> C) <img src=> D) <bgsound src=> Web sayfalarndaki resimlerin zerine gelince fare imlecinin altnda yaz kmasn hangi parametre aracl ile salyoruz? A) widht B) height C) border D) alt

5.

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz. Cevaplarnzn tm doru ise Modl Deerlendirmeye geiniz.

38

MODL DEERLENDRME MODL DEERLENDRME

Aadaki sorular dikkatlice okuyunuz ve doru seenei iaretleyiniz. 1. Hazrlamakta olduunuz forma, ifreli alanlar eklemek iin aadakilerden hangisi kullanlr? A) Checkbox B) Text C) Submit D) Password Aadakilerden hangisi <input> etiketi ile kullanlacak parametrelerden deildir? A) Type B) Src C) Reset D) Align Hazrlamakta olduunuz erevenin ismini gstermeye yarayan parametre aadakilerden hangisidir? A) Name B) Scrolling C) Iframe D) Marginheight Hazrlanmakta olan sitenin ayni zelliklerde olmasnn istenmesi durumunda kullanlan ve sitedeki tm sayfalara etki eden stil ablon eidi aadakilerden hangisidir? A) Yerel CSS B) Genel CSS C) Harici CSS D) Hibiri Resim eklemeyi salayan komut aadakilerden hangisidir? A) <embed> B) <img> C) <bgsound> D) <background> Ses dosyalarn almay salayan etiket hangisidir? A) <bgcolor> B) <background> C) <bgsound> D) <img>

2.

3.

4.

5.

6.

39

7.

Aadakilerden hangisi bir video ekleme linkidir? A) <embed src="C:\muzik\istiklal.avi"> B) <embed href="C:\video\ istiklal.avi "> C) <embed src.mpg="C:\muzik\ istiklal.avi "> D) <avi src="C:\video\ istiklal.avi ">

DEERLENDRME
Cevaplarnz cevap anahtaryla karlatrnz. Yanl cevap verdiiniz ya da cevap verirken tereddt ettiiniz sorularla ilgili konular faaliyete geri dnerek tekrarlaynz. Cevaplarnzn tm doru ise bir sonraki modle gemek iin retmeninize bavurunuz

40

CEVAP ANAHTARLARI CEVAP ANAHTARLARI

RENME FAALYET-1N CEVAP ANAHTARI
1 2 3 4 5 Form Checkbox Text Multiple Submit

RENME FAALYET-2NN CEVAP ANAHTARI

1 2 3 4 5 Doru Yanl Doru Yanl Doru

RENME FAALYET-3N CEVAP ANAHTARI

1 2 3 4 5 C A B B D

RENME FAALYET-4N CEVAP ANAHTARI

1 2 3 4 5 Border Alt Infinite C D

MODL DEERLENDRMENN CEVAP ANAHTARI

1 2 3 4 5 6. 7 D C A C B C A

41

KAYNAKA KAYNAKA
http://uzem.ankara.edu.tr/gulbahar/web-turkce/konu-8.pdf (08.12.2011, 22:00) http://uzem.ankara.edu.tr/gulbahar/web-turkce/konu-7.pdf (12.12.2011, 11:00) http://bmb.cu.edu.tr/mcuma/files/Html4.pdf(28.12.2011, 14:00)

42