WEB TASARIMININ TEMELLERİ HTML. HTML FORMLARI VE BİLGİ GİRİŞİ FORM, FORM ELEMANLARI BARINDIRAN BİR ALANDIR. FORM ELEMANLARI KULLANICILARDAN BİLGİ GİRİŞİNE.

... konulu sunumlar: "WEB TASARIMININ TEMELLERİ HTML. HTML FORMLARI VE BİLGİ GİRİŞİ FORM, FORM ELEMANLARI BARINDIRAN BİR ALANDIR. FORM ELEMANLARI KULLANICILARDAN BİLGİ GİRİŞİNE."— Sunum transkripti:

1 WEB TASARIMININ TEMELLERİ HTML

2 HTML FORMLARI VE BİLGİ GİRİŞİ FORM, FORM ELEMANLARI BARINDIRAN BİR ALANDIR. FORM ELEMANLARI KULLANICILARDAN BİLGİ GİRİŞİNE İZİN VERMEK İÇİN KULLANILAN METİN KUTULARI, SARKAN LİSTELER, RADYO (SEÇENEK) BUTONLARI, ONAY (CHECK) KUTULARI V.B. NESNELERDİR.

3 FORM ELEMANLARI ŞİMDİDE FORMDA KULLANILAN BAZI ELEMANLARI LİSTELEYELİM FORM SUBMIT VE RESET BUTONLARI(BUTTON) METİN ALANI(TEXT) SEÇME LİSTELERİ(SELECT LISTS) DENETİM KUTUSU(CHECKBOX) RADİO BUTTONS METİN BÖLGESİ (TEXTAREA)

4 ... FORM OLUŞTURMAK İÇİN TAGI KULLANILIR.

5 “ACTION” ÖZELLİĞİ VE “SUBMIT” BUTONU SUBMIT BUTONUNA TIKLADIĞINIZDA, FORM İÇERİĞİ BAŞKA BİR DOSYAYA GÖNDERİLİR. “ACTION” ÖZELLİĞİ, FORMDAKİ BİLGİLERİN GÖNDERİLDİĞİ DOSYAYI BELİRLER. BU MUHTEMELEN BİR “ASP” DOSYASIDIR, GÖNDERİLEN BİLGİLER ALINIR VE İŞLENİR.

6 “ACTION” ÖZELLİĞİ VE “SUBMIT” BUTONU Username:

7 (VERİ GİRİŞİ) FORMLARDA EN ÇOK KULLANILAN TAGLARDAN BİRİDİR. BİLGİ GİRİŞİNİN (INPUT) NE ŞEKİLDE OLACAĞI “TYPE” ÖZELLİĞİ İLE BELİRLENİR. First name:

8 RADYO BUTONLARI BİRKAÇ SEÇENEKTEN SADECE BİRİNİ SEÇMEK İÇİN KULLANILIRLAR. Male Female

9 ONAY KUTULARI (CHECKBOXES) BİR VEYA BİRDEN FAZLA SEÇENEK SEÇİLEBİLİR. I have a bike I have a car

10 ŞİFRE ALANLARI FORMUMUZ İÇİNDE ŞİFRE GİRİLMESİ GEREKEN YERLERDE KULLANILIR

11 TEXT AREA ELEMANI UZUN MİKTARDA BİR YAZI GİRİLECEKSE BU DURUMLARDA “TEXT AREA” KULLANILIR. buraya düşüncelerinizi yazınız...

12 SEÇME LİSTELERİ SEÇME LİSTELERİ; KULLANICILARI BELİRLENMİŞ OLAN BİR LİSTEDEN BİR YADA DAHA FAZLA ELEMAN SEÇMELERİNİ SAĞLAYAN OLDUKÇA ESNEK BİR YAPIDIR.ÖRNEĞİN BİR ÜLKE LİSTESİNDEN ÜLKE SEÇMEK GİBİ... BİR ELEMANIN SEÇİLİ OLMASINI İSTİYORSAK “SELECTED” DEMEMİZ LAZIMDIR.

13 ÖRNEK türkiye ingiltere

14 SEÇME LİSTELERİ İSTENİRSE TÜM LİSTEDEN BİRDEN FAZLA ELEMAN SEÇİMİ AYARLANABİLİR. BUNUN İÇİN MULTIPLE YAZISININ EKLENMESİ YETERLİDİR. AYRICA “SIZE” PARAMETRESİ İLEDE GÖRÜLECEK ELEMAN SAYISI DA BELİRTİLİR

15 SAYFA BAŞLIĞI SAYFA İLE İLGİLİ BİR TAKIM BİLGİLER VERMEK İÇİN HTML SAYFALARINDA “HEAD” (SAYFA BAŞLIĞI) ŞEKLİNDE ADLANDIRILAN BİR BÖLÜM VARDIR. BU BÖLÜMDEKİ BİLGİLER TARAYICIDAN GÖSTERİLMEZ. BU BÖLÜMDE SADECE AŞAĞIDAKİ TAG’LAR KULLANILABİLİR:,,,, VE

16 HTML HEAD ELEMANI HEAD TAGI, SAYFA İLE İLGİLİ GENEL BİLGİLER İÇERİR. AYRICA “META-INFORMATION” ŞEKLİNDE DE ADLANDIRILIRLAR. “META”, BİR ŞEY HAKKINDA BİLGİ DEMEKTİR.

17 HTML HEAD ELEMANI META-DATA DENİLDİĞİ ZAMAN “DATA” (VERİ) İLE İLGİLİ BİLGİ, META- INFORMATION DENİLDİĞİ ZAMAN DA SAYFA İÇERİĞİ İLE İLGİLİ BİLGİ ANLAŞILIR.

18 HTML HEAD ELEMANI BU BÖLÜMDEKİ BİLGİLER BROWSER’DAN GÖSTERİLMEZ. BU BÖLÜMDE SADECE BİRKAÇ TAG KULLANILABİLİR. BUNLAR; BASE,LINK,META, TITLE, STYLE VE SCRIPT TAGLARIDIR.

19 HEAD TAGLARI BASE LINK META TITLE STYLE SCRIPT

20 ... SAYFA İLE İLGİLİ BİLGİ İÇERİR. BASE,LINK,META, TITLE, STYLE VE SCRIPT TAGLARINI BARINDIRIR.

21 ... SAYFA İLE BİLGİLER VERİR. ÖRNEĞİN SAYFANIN TASARIMCISI, HANGİ PROGRAMLA OLUŞTURULDUĞU, ANAHTAR KELİMELER V.B.

22 HTML META HEAD BÖLÜMÜNDE BULUNMASI GEREKEN BİR TAG’DIR.

23 ARAMA MOTORLARI İÇİN ANAHTAR KELİMELER BAZI ARAMA MAKİNELERİ META TAGININ “NAME” VE “CONTENT” ÖZELLİKLERİNİ KULLANARAK ARAMA YAPARLAR. BU NEDENLE META TAGININ BAZI ÖZELLİKLERİ ÖNEMLİDİR.

24 META İLE SAYFANIN TANIMLANMASI

25 META İLE ANAHTAR KELİMELERİN TANIMLANMASI

26 HTML SCRIPT’LERİ HTML SAYFALARINIZI DİNAMİK VE ÇEKİCİ HALE GETİRMEK İÇİN “SCRIPT” DENİLEN BASİTLEŞTİRİLMİŞ PROGRAM KODLARINI EKLEYEBİLİRSİNİZ. SCRIPT’LER BASİTLEŞTİRİLMİŞ PROGRAM KOMUTLARIDIR. HTML İÇİNDE DAHA ÇOK “JAVASCRIPT” VE “VBSCRIPT” KULLANILIR.

27 ... HTML KODLARI İÇİNE SCRIPT YAZABİLMEK İÇİN TAG’I KULLANILIR. AMA SCRIPT KULLANIMINDAN ÖNCE HANGİ SCRIPT DİLİNİN KULLANILACAĞI BELİRTİLMELİDİR.

28 ÖRNEK script örneği document.write("Hello World!")

29 ESKİ TARAYICILAR SCRIPTLERİ DESTEKLEMEZ ESKİ TARAYICILAR SCRIPTLERİ DESTEKLEMEZ VE BUNLARI ÇALIŞTIRAMADIKLARI İÇİN HATA VERİRLER. BU TARAYICILAR KODLARI ÇALIŞTIRMAK YERİNE ONLARI SANKİ BİR METİNMİŞ GİBİ ZİYARETÇİYE GÖSTERİRLER. BU DURUMU ENGELLEMEK İÇİN SCRİPTLER AÇIKLAMA “COMMENT” TAGININ İÇİNE YAZILIR.

30 ESKİ TARAYICILAR SCRIPTLERİ DESTEKLEMEZ SCRIPTLERİ AÇIKLAMA TAGI İÇİNE ALIRSANIZ, ESKİ TARAYICILAR YAZILAN KODLARI GÖZ ARDI EDECEKTİR. EĞER TARAYICI ESKİ DEĞİLSE AÇIKLAMA TAG’I İÇİNDEKİ SCRİPTLERİ ÇALIŞTIRACAKTIR.

31 ÖRNEK JavaScript:

32 ÖRNEK VBScript:

33 ... ESKİ BROWSER’LARDA SCRIPT ÇALIŞMADIĞI ZAMAN BİR MESAJ GÖRÜNMESİNİ SAĞLAR. Tarayıcınız VBScript desteklemiyor!