HTML. Tablo Etiketleri 5 Tablolar sayesinde sayfamızdaki nesnelerin yerleşimini, hizalamasını ve sayfa yapısını istediğimiz şekilde ayarlayabiliriz.

... konulu sunumlar: "HTML. Tablo Etiketleri 5 Tablolar sayesinde sayfamızdaki nesnelerin yerleşimini, hizalamasını ve sayfa yapısını istediğimiz şekilde ayarlayabiliriz."— Sunum transkripti:

1 HTML

2 Tablo Etiketleri 5

3 Tablolar sayesinde sayfamızdaki nesnelerin yerleşimini, hizalamasını ve sayfa yapısını istediğimiz şekilde ayarlayabiliriz. Örneğin sayfayı 3 sütuna ayırıp içeriğimizi buna göre hazırlayabiliriz. Tablo oluşturabilmek için 3 etikete ihtiyacımız var: 1. etiketleri ile tablonun başladığı ve bittiği yer belirlenir. 2. etiketleri ile her bir satırın başladığı ve bittiği yer belirtilir. 3. etiketleri ile tr etiketleri arasında hücreler oluşturulur. Önce tablo, sonra da satırlar oluşturulur. Son olarak da her satırdaki sütunlar (hücreler) oluşturulur. Tablo Etiketleri

4 Tabloda satır oluşturmak için kullanılır. Tablo Etiketleri hücre1 hücre2

5 Tabloda satır oluşturmak için kullanılır. Tablo Etiketleri 11-A 11-B 11-C

6 Tabloda sütun oluşturmak için kullanılır. Tablo Etiketleri 1.Sütun 2.Sütun

7 Tabloda sütun oluşturmak için kullanılır. Tablo Etiketleri satır 1, hücre 1 satır 1, hücre 2 satır 2, hücre 1 satır 2, hücre 2

8 etiketi parametreleri: Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. Tablonun kenarlık rengini belirlemek için kullanılır. Tablonun genel arka plan rengini belirlemek için kullanılır. Tablonun arkasına resim konulabilir. Tablo Etiketleri

9 Hücre 1 Hücre 2

10 etiketi parametreleri: Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır. Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır. Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır. Hücrelerin içerisindeki metin, resim, v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır. ; ; Tablonun konumunu ayarlamayı sağlar. Tablo Etiketleri

11 Hücre 1 Hücre 2

12 Tablo Etiketleri Hücre 1 Hücre 2 Hücre 1 Hücre 2

13 Tablo Etiketleri Hücre 1 Hücre 2 Hücre 1 Hücre 2

14 etiketi parametreleri: Hücrenin arka plan rengini, diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir. Hücrenin arka planına bir resim yerleştirir. Hücre genişliğini belirlemek için kullanılır. Hücre yüksekliğini belirlemek için kullanılır. Tablo Etiketleri

15 Hücre 1 Hücre 2 Hücre 3 Hücre 4

16 etiketi parametreleri:, ; Hücrenin içerisinde yer alan metin, resim, grafik vs. gibi web sayfası öğelerini sola, sağa veya ortaya hizalayabiliriz.,, sadece ile birlikte kullanılır, hücre içeriğini dikey olarak tablonun tepesine(top), ortasına(middle) veya tabanına(bottom) hizalar. Not : Align parametresi hücre içinde yatay hizalama yapar. Valign parametresi hücre içinde düşey hizalama yapar. Tablo Etiketleri

17 Hücre 1 Hücre 2 Metin

18 etiketi parametreleri: Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir. Bu hücrenin yüksekliğinin 3 satır yüksekliğinde olduğunu gösterir. Tablo Etiketleri

19

20 3 satır birleştir 3 sütun birleştir H T 2 satır birleştir M L 4 sütun birleştir

21 Örnekler 1

22 Ders Programı Dersler Pazartesi Salı Çarşamba Perşembe Cuma Kimya</TD > Matematik Kimya Matematik Resim Türkçe Tarih İngilizce Türkçe Beden Eğitimi Dinlenme Kimya Matematik Kimya Matematik Proje Türkçe Tarih İngilizce Türkçe

23 Örnekler 2

24 Tablo Uygulamarı Bilişim Dersler Programlama Temelleri Paket Programlar Temel Elektronik Teknik Resim Bilişim Teknolojileri Temelleri Web Tasarım ve Animasyon Grafik Animasyon

25 Örnekler 3

26 Alış Veriş Tablosu Tür Ürün Fiyat Beyaz Eşya Buzdolabı 500.00 TL Ç.Makinesi 450.00 TL Fırın 300.00 TL B.Makinesi 300.00 TL D.Dondurucu 250.00 TL Küçük Ev Aletleri Meyve Sıkacağı 150.00 TL M.Robotu 175.00 TL Toplam 2.125.00 TL

27 başlık etiketi: etiketi altında, başlık verisi içeren hücre oluşturulmasını sağlar. Tablo Etiketleri Okul No Adı Soyadı 2586 Ali Can 2895 İpek Yılmaz

28 Tablo(table) Kullanarak Sayfa Tasarımı yapmak Tablo Etiketleri

29 WEB SİTEME HOŞGELDİNİZ SİTE İÇERİĞİ BURADA MENÜ ALT BÖLÜM

30 Örnek 4 AnasayfaGaleriİletişim Anasayfa Galeri İletişim

31 Örnek 5

32 Örnekler 5 Hesap Makinesi Düzen Görünüm Yardım 0, &nbsp Geri tuşu CE C MC 7 8 9 / sqrt MR 4 5 6 * % MS 1 2 3 - 1/x M+ 0 +/-, + =

33 6 Form Etiketleri

34 Bir form, form elemanlarını içinde bulunduran alandır. Form elemanları kullanıcıların bilgi girmesini sağlayan elemanlardır. (metin alanları, açılabilir listeler, seçenek kutuları, kontrol kutuları) Form Etiketleri

35 Eleman türüAçıklamasıÖrnekGörünüm textMetin kutusu password Şifreler için kullanılan Metin kutusu checkboxOnay kutusu radioRadyo buton Erkek Kadın

36 Form Etiketleri Eleman türüAçıklamasıÖrnekGörünüm file Dosya seçme elemanı textareaBüyük metin alanı varsayılan değer select, option Seçim listesi ve seçim listesi seçenekleri Bursa İstanbul Ankara submit Form gönderme tuşu

37 Kullanılacak Parametre Görevi NAME Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir. SIZE text ve password elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır. SRC "image" elemanında resim dosyasını belirtmek için kullanılır. TYPE Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. Form Etiketleri

38 Giriş (Input) En çok kullanılan form etiketi etiketidir. Kullanılacak Parametre Görevi ALIGN Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır (left, center, right). CHECKED Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza gelmesini sağlar. MAXLENGTH text ve password elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Öntanımlı değeri sınırsızdır. DISABLED disabled="disabled" şeklinde kullanıldığında o elemanı devre dışı hale getirir. Eleman sayfada görünür fakat seçilemez ve değiştirilemez. Form Etiketleri

39 Text: Formumuza tek satırlık yazı girdisi eklemek için kullanıyoruz. Button: Düğme eklemek için kullanılır. Düğme üzerinde yazılacak ifadeyi value’den sonra belirtiyoruz. Form Etiketleri Üye Adı: Üye Adı:

40 Password: Şifre girişi yapılacak durumlarda kullanılır Form Etiketleri Üye Adı: Şifre:

41 radio: Seçenek eklemek içim kullanılır. Burada dikkat edilmese gereken eğer tek bir tanesi seçilsin istiyorsanız name’lerini aynı yazmalısın. Farklı name verdiğinizde birden fazla seçim gerçekleşebilecektir. Form Etiketleri … Adı: Soyadı: Cinsiyet:Bay Bayan

42 Checkbox: Onay kutusu eklemek için kullanılır.Seçili olmasını istiyorsanız checked veya checked=”on” yazmalısınız.( ) Form Etiketleri … İlgi Alanlarınız: Müzik Spor Sinema Tiyatro

43 Select-option: Açılır menü eklemek için kullanılır. option etiketleri arasına seçeneklerin her biri yazılır. Seçeneklerin hepsi select etiketleri arasına alınır. Size ile açılır menünün yüksekliğini değiştirebilirsiniz. Birden fazla seçim yapabilmek için multiple’yi kullanın.( ) Form Etiketleri … Doğum Yeri: İstanbul Ankara İzmir Diğer

44 textarea: Uzun satırlı mesajlar eklemek istediğimiz zaman kullanılır. cols ile enini, rows ile boyunu piksel olarak ölçülendiririz. Bunda input’u kullanmıyoruz. Form Etiketleri … Mesaj:

45 Submit: Verileri sunucuya yollamak için kullanılır. Value değeri düğme üzerine yazılan metini belirler. Reset: Formdaki nesneleri temizlemek için kullanılır. Value değeri düğme üzerine yazılan metini belirler. Form Etiketleri …

46 fieldset:Forma kenarlık eklemek için kullanılır. legend: Formadaki çizginin üzerine başlık eklemek için kullanılır. align kullanılarak hizalama(left: sola, center: ortaya, right: sağa) yapılabilir. ör: gibi. Form Etiketleri Kişi Bilgileri …

47 Örnekler 1

48 Adınız Soyadınız: Adres: Telefon: Doğum Tarihiniz: Gün 1 31 Ay ocak aralık Yıl 1995 1976 Çorbalar Mercimek İşkembe Yemekler Pilav Et Kavurma Patlıcan Kebap Döner Et Sote Türlü Tatlılar Kadayıf Sütlaç