HTML Dili ’ nin Genel Özellikleri. HTML Nedir? İşaretleme dili (HyperText Markup Language) Belirteçler (tags) W3 konsorsiyumu (Tim Berners-Lee) W3 konsorsiyumu.

... konulu sunumlar: "HTML Dili ’ nin Genel Özellikleri. HTML Nedir? İşaretleme dili (HyperText Markup Language) Belirteçler (tags) W3 konsorsiyumu (Tim Berners-Lee) W3 konsorsiyumu."— Sunum transkripti:

1 HTML Dili ’ nin Genel Özellikleri

2 HTML Nedir? İşaretleme dili (HyperText Markup Language) Belirteçler (tags) W3 konsorsiyumu (Tim Berners-Lee) W3 konsorsiyumu HTML 2.0, 3.0, 3.2, 4.0, 5.0

3 Gerekli Araçlar Metin editörleri ASCII (American Standart Code for Information Interchange) editörü ASCII Not defteri HTML Editörleri/Yardımcıları FrontPage, Dreamweaver vb. HTML Çeviriciler MS Word, MS Excel, MS PowerPoint vb.

4 HTML Dosyasının Özellikleri Dosya uzantısı =.htm /.html Komut yazımı Zemin rengi sarı Taşıyıcı içeriği

5 HTML Dosyasının Özellikleri (devam) Belirteçlerin yazımında büyük-küçük ayrımı yoktur. Boşluklar (space), Alt satıra inme (Enter), Sekme ’ nin önemi yoktur.

6 Zorunlu Belirteçler......

7 ÖRNEK HTML Öğreniyorum -- HTML Öğreniyorum --... Diğer kodlar ve metinler...

8 ÖRNEK …… Paragraf başı yapılacak Paragraf başı yapıldı. Lütfen satırlar arasındaki boşluklara dikkat ediniz!

9 ÖRNEK Görsel Araçlar: Video Projektörler DataShow Tepegöz

10 ÖRNEK START özelliği ile istenilen sayıdan başlatılır İstediğiniz dosyayı yüklemek için tıklayınız. Bu diyalog kutusunda dosyanızı kaydetmek için bir isim veriniz. Dosyayı yüklemek için OK butonuna basınız.

11 ÖRNEK Görsel Araçlar: Video Projektörler DataShow Tepegöz

12 ÖRNEK İletişim: Sözcüklerin, resimlerin, figürlerin, grafiklerin vb. sembollerin kullanılarak bilgi, düşünce, duygu ve becerilerin aktarılması süreci

13 Bağların Oluşturulması Nerelere bağ oluşturulabilir? Yerel diskteki başka sayfalara İnternet üzerindeki diğer sayfalara Aynı sayfa üzerindeki başka bölümlere

14 Bağların Oluşturulması (devam) Bağ belirteci …… NAME HREF TITLE TARGET Özellikler TARGET: _blank _self _parent _top

15 ÖRNEK Bilgisayar Ağları Klavye ve Tuş Grupları Bilgisayar Donanımı Paint ile Resim Yapmak Anasayfaya Dön

16 ÖRNEK ODTÜ Boğaziçi Üniversitesi Hacettepe Üniversitesi

17 ÖRNEK

18 Metin sayfanın iki kenarına göre ortalanır. belirteci ile birlikte kullanılabilir Dertler benim, Çile benim, Mutluluk senin, senin olsun!

19 ÖRNEK SIZE, COLOR ve FACE özellikleri vardır. Yazı tipinin büyüklüğü 4 Önce BASEFONT SIZE 'da verilen değere + 2 eklenir

20 ÖRNEK Metinin rengi kırmızı. veya Metinin rengi yine kırmızı.

21 ÖRNEK Bu metin Courier New veya Comic Sans MS yazı tiplerinden hangisi kulanıcının tarayıcısında yüklü ise onunla görüntülenecek. Hiç biri yüklü değilse normal yazı tipinde varsayılan hangisi ise onunla görüntülenecek.

22 TABLO … belirteçleri içerisinde gösterilir. Tablolar satırlar halinde işlenir. Önce satır oluşturulur. Hücreler oluşturulur Hücrelere bilgiler girilir. Tablo sonlandırılır.

23 ÖRNEK

24 örnek normal normal

25 ÖRNEK Bu hücre 2 satır. Bu hücreler diğer verileri içeriyor

26 ÖRNEK 1. veri hücresi Bu hücre 2 sütun. 2. veri hücresi 3. veri hücresi 4. veri hücresi

27 ÖRNEK normal normal

28 ÖRNEK Netscape Internet Explorer Mosaic X X - X - X

29 FORMLAR... Bu belirteç sayesinde kullanıcılar; Bir HTML sayfasına metin yazabilir. Seçim listesi oluşturabilir. Veri girme gibi işleri yapabilir.

30 FORM BELİRTEÇLERİ Form oluşturmak için aşağıdaki belirteçler kullanılır:... Doküman ı n içinde bir form... Bir girdi alan ı Select belirteci içinde bir seçenek... Verili seçeneklerden yap ı lm ış bir seçim... Çok sat ı rl ı girdi eleman ı

31 FORMUN YAPISI … belirteçleri içerisinde gösterilir. Bir belirteci kapatılmadan yeni bir belirteci açılamaz. İki özellik içermektedir: METHOD ve ACTION. METHOD özelliğinin değeri GET veya POST olabilir.

32 ÖRNEK Siz kimsiniz? Lütfen isminizi giriniz:

33 ÖRNEK Lütfen isminizi giriniz: Yaşınızı giriniz: Adresinizi giriniz:

34 ÖRNEK TYPE=password (şifre kutuları): Girilen karakterler gizlenir ( “ * ” karakteri görülür). Şifrenizi giriniz:

35 ÖRNEK Meyve Sebze İçecek

36 ÖRNEK Her grup için farklı bir isim kullanarak, birden fazla radyo tuşu grubu oluşturulabilir. Meyve Elma Portakal Karpuz Sebze İçecek

37 ÖRNEK Kırmızı Yeşil Mavi

38 ÖRNEK CHECKED özelliği kullanılarak kontrol kutusunun seçili olarak ekrana gelmesi sağlanabilir. Meslek (uygun olan tüm seçenekleri seçin): Doktor Avukat Öğretmen Mühendis

39 ÖRNEK Metin alanları için VALUE özelliği kullanılarak Radyo tuşları ve kontrol kutuları için, CHECKED özelliği kullanılarak varsayılan değerler değiştirilebilir. Avukat

40 ÖRNEK Bu seçim menüleri veya listeleri belirteci ile, Menü veya listelerde yer alacak olan maddeler seçeneği ile tanımlanır. Bir renk seçiniz: Siyah Sarı Kahverengi Kırmızı Mavi

41 ÖRNEK MULTIPLE özelliğini kullanarak bir listeden birden fazla maddenin seçilebilmesi sağlanabilir. Alışveriş Listesi: Peynir Süt Un Yumurta Yoğurt Zeytin Ekmek

42 ÖRNEK Kullanıcının birden çok satırda metin girmesine olanak tanır. TextArea belirteci içinde metin

43 ÖRNEK

44 Kırmızı Mavi Meyve Sebze Bir renk seçiniz: Siyah Sarı Kahverengi Mesajınızı buraya yazınız.