KBÜ KARABÜK ÜNİVERSİTESİ TBP107 Web Tasarımının Temelleri «H T M L E T İ K E T L E R İ - III» Öğr. Gör. Dr. Abdullah ELEN Karabük Üniversitesi T.O.B.B. Teknik Bilimler Meslek Yüksekokulu Demir Çelik Kampüsü 78050 Karabük/TÜRKİYE aelen@karabuk.edu.tr https://www.elenium.net Belge No: TBP107/04 Revizyon: R-001 Yayın Tarihi: 14.10.2018
İçindekiler Tablo Etiketleri Form Etiketleri 2
Tablo Etiketleri Ta b l e Ta g s 3
<table> <table> etiketi, bir HTML tablosu tanımlamak için kullanılır. Bir HTML tablosu; <table> etiketinden, bir ya da daha fazla <tr>, <td> ve <th> etiketlerinden meydana gelir. <tr> etiketi tablo satırını, <td> etiketi tablo hücresini ve <th> etiketi ise tablo başlığını tanımlar. Daha karmaşık bir HTML tablosu; <caption>, <col>, <colgroup>, <thead>, <tfoot> ve <tbody> etiketlerini de içerebilir. <table> <tr> <th>başlık</th> </tr> <tr> <td>tablo hücresi</td> </tr> </table> 4
<table> <table> <tr> <th>aylar</th> <th>kazançlar</th> </tr> <tr> <td>ocak</td> <td>100 TL</td> </tr> <tr> <td>şubat</td> <td>80 TL</td> </tr> </table> <head> <style> table, th, td { border: 1px solid black; } </style> </head> 5
<table> (caption) <head> <style> <caption> etiketi, tablo başlığı tanımlamak için kullanılır. <caption> etiketi, <table> etiketinden hemen sonra eklenmelidir. Örnek için buraya tıklayın. table, th, td {border: 1px solid black;} </style> </head> <table> <caption>aylık Kazanç</caption> <tr> <th>aylar</th> <th>gelir</th> </tr> <tr> <td>ocak</td> <td>100 TL</td> </tr> <tr> <td>şubat</td> <td>80 TL</td> </tr> </table> 6
<table> (thead) <thead> etiketi, bir HTML tablosundaki başlık içeriğini gruplandırmak için kullanılır. <thead> etiketi, bir tablonun her bir parçasını (başlık, gövde, altbilgi) belirtmek için <tbody> ve <tfoot> öğeleriyle birlikte kullanılır. Örnek için buraya tıklayın. <head> <style> table, th, td {border: 1px solid black;} thead {color: green;} tbody {color: blue;} tfoot {color: red;} </style> </head> <table> <thead> <tr> <th>aylar</th> <th>kazanç</th> </tr> </thead> <tbody> <tr> <td>ocak</td> <td>100 TL</td> </tr> <tr> <td>şubat</td> <td>80 TL</td> </tr> </tbody> <tfoot> <tr> <td>toplam</td> <td>180 TL</td> </tr> </tfoot> </table> 7
<table> (colgroup) <colgroup> etiketi, tablodaki bir yada daha fazla sütunu gruplandırarak biçimlendirmek için kullanılır. <colgroup> etiketi, her satıra ayrı ayrı sitilleri uygulamak yerine stilleri tüm sütunlara uygular. <colgroup> etiketi, <table> etiketinin içerisinde olmak zorundadır. <caption> etiketinden hemen sonra ve aynı zamanda <thead>, <tbody>, <tfoot> ve <tr> etiketlerin önce tanımlanmalıdır. Örnek için buraya tıklayın. <head> <style> table, th, td {border: 1px solid black;} </style> </head> <table> <colgroup> <col span="2" style="background-color: red"> <col style="background-color: yellow"> </colgroup> <tr> <th>isbn</th> <th>kitap Adı</th> <th>fiyatı</th> </tr> <tr> <th>3476896</th> <th>html5 ile Web Tasarımı</th> <th>53 TL</th> </tr> <tr> <th>5869207</th> <th>css ve Javascript Kardeşliği</th> <th>49 TL</th> </tr> </table> 8
HTML Tablo Örnekleri https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_span https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_elements https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellpadding https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_colspan https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_rowspan https://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_id1 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_id2 9
Form Etiketleri F o r m Ta g s 10
<form> <form> etiketi, kullanıcı veri girişlerini sağlamak için HTML formları oluşturur. <form> etiketi aşağıdaki form elemanlarından bir veya daha fazlasını içerebilir: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label> <form method="get post" action="url" > form elemanları </form> action: Bir form onaylandığında verilerinin nereye gönderileceğini belirtir. method: Form verileri gönderirken kullanılacak HTTP yöntemini belirtir. Diğer parametreleri görmek için buraya tıklayın. 11
<form method="get post"> GET Metodu HTTP istekleri arasındaki varsayılan metottur. Form verilerini, name/value çiftleri olarak URL'ye ekler: https://elenium.net/lectures.aspx?derskodu=tbp107&hafta=4 Hassas/önemli verileri gönderirken asla GET kullanmayın! (URL de görünür olacaktır). Bir kullanıcının sonucu favorilere eklemek istediği form gönderimleri için kullanışlıdır. Güvenli olmayan veriler için GET metodu tercih edilir. https://www.google.com/search?q=html5 Sadece belirli boyutta veri gönderileceği zaman kullanılır. Bir URL'nin uzunluğu sınırlıdır (yaklaşık 3000 karakter). Örnek uygulama için buraya tıklayın. 12
<form method="get post"> POST Metodu URL de görünmesini istemediğimiz veriler olduğunda ve isteğin (querystring) çok büyük olduğu durumlarda kullanılır. POST yönteminde gönderebileceğimiz verinin boyutu ile ilgili bir sınır yoktur. Gönderdiğimiz parametrelerin adres satırında görünmemesi dolayısıyla GET yöntemine göre daha güvenlidir. Örnek uygulama için buraya tıklayın. 13
<form method="get post"> GET ve POST metotları arasındaki başlıca farklar; Eylem/Durum GET POST Parametre adı ve değerleri tarayıcının adres satırında görünür mü? EVET HAYIR Yapılan işlemler tarayıcının geçmişinde (cache) saklanır mı? EVET HAYIR Gönderilen parametreler için boyut sınırı var mı? EVET HAYIR Güvenli veri güncelleme, silme veya kayıt ekleme işlemleri için tavsiye edilir mi? HAYIR EVET Veri arama, listeleme ve görüntüleme işlemleri için uygun mudur? EVET EVET 14
<input> <input> etiketi, kullanıcıların veri girişi yapmasına izin veren giriş kontrollerini tanımlamak için kullanılır. <input> öğeleri, bir <form> öğesi içinde kullanılır. Giriş kontrolü, tür özelliğine bağlı olarak birçok şekilde değişebilir. button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week 15
<input> Parametreleri Parametreler type = "eleman türü" name = "isim" value = "değer" size = "değer" maxlength = "değer" checked = "değer" src = "dosya ismi" alt = "metin" align = "left center right" readonly disabled Açıklamalar Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir. "radio" ve "checkbox" dışında bu parametrenin kullanımı isteğe bağlıdır. Belirtilecek "değer" eleman türüne göre değişir. "text" ve "password" elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır. "text" ve "password" elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Varsayılan değeri sonsuzdur. Sadece "radio" ve "checkbox" elemanlarında seçili elemanı "on" olarak belirtmek için kullanılır. Diğerlerinde yok sayılır. "image" elemanında resim dosyasını belirtmek için kullanılır. Fare eleman üzerindeyken balon içinde görünecek açıklama metni için kullanılır. Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır. Veri girme amacıyla kullanılmayacak elemanlar içindir. Veri girişi engellenecek elemanlar içindir. 16
<input type="button"> <input type="button"> tıklanabilir bir buton/düğme tanımlar (bir scripti etkinleştirmek için genelde JavaScript ile kullanılır). <!DOCTYPE html> <h1>buton Örneği</h1> <p>aşağıda örnek bir buton nesnesi tanımlanmıştır.</p> <form> <input type="button" value="tıkla" onclick="msg()"> </form> <script> function msg() { alert("merhaba dünya!"); } </script> 17
<input type="submit"> <input type="submit"> formu göndermek için kullanılır. Form içerisinde birden fazla gönderme (submit) butonu bulunabilir. <!DOCTYPE html> <h1>submit Buton Örneği</h1> <p>formu göndermek için <strong>gönder</strong> butonuna tıklayınız.</p> <form action="/actionpage.aspx" method="post"> Username: <input type="text" name="user"><br> Password: <input type="password" name="pass"><br><br> <input type="submit" value="gönder"> </form> 18
<input type="reset"> <input type="reset"> tüm form değerlerini varsayılan değerlere sıfırlar/temizler. <!DOCTYPE html> <h1>reset Buton Örneği</h1> <p>formu temizlemek için <strong>temizle</strong> butonuna tıklayınız.</p> <form action="/actionpage.aspx" method="post"> Username: <input type="text" name="user"><br> Password: <input type="password" name="pass"><br><br> <input type="reset" value="temizle"> <input type="submit" value="gönder"> </form> 19
<input type="text"> <input type="text"> form içerisinde tek satırlık bilgi girişi yapılabilen bir alan eklemek için kullanılır. <!DOCTYPE html> <h1>text Örneği</h1> <p>formu göndermek için <strong>gönder</strong> butonuna tıklayınız.</p> <form action="/actionpage.aspx" method="post"> Username: <input type="text" name="user"><br> Password: <input type="password" name="pass"><br><br> <input type="submit" value="gönder"> </form> 20
<input type="password"> <input type="password"> kullanıcının şifre girişi yapabilmesini sağlayan maskelenmiş bir metin kutusudur. <!DOCTYPE html> <h1>password Örneği</h1> <p>giriş yapmak için aşağıdaki alanları doldurunuz.</p> <form action="/actionpage.aspx" method="post"> Username: <input type="text" name="user"><br> Password: <input type="password" name="pass" maxlength="8"> <br><br> <input type="submit" value="login"> </form> 21
<input type="email"> <input type="email"> kullanıcının geçerli bir e-mail adresi girişini sağlayan bir form kontrolüdür. Geçersiz bir e-mail adresi girildiğinde otomatik olarak uyarı verir. <!DOCTYPE html> <h1>e-mail Örneği</h1> <p>aşağıdaki alana e-mail adresinizi giriniz.</p> <form action="/actionpage.aspx" method="post"> E-Mail: <input type="email" name="emailadresi"> <input type="submit" value="gönder"> </form> *** Internet Explorer 9 ve önceki sürümleri tarafından desteklenmez! 22
<input type="search"> <input type="search"> kullanıcının arama sorgularını girmesi için tasarlanmış metin alanlarıdır. Bunlar, metin (text) girişleriyle işlevsel olarak özdeştir. Ancak kullanıcı tarafından farklı şekilde (CSS) biçimlendirilebilir. <!DOCTYPE html> <h1>search Örneği</h1> <p>arama yapmak için <strong>ara</strong> butonuna tıklayınız.</p> <form action="/actionpage.aspx" method="get"> Search: <input type="search" name="query"> <input type="submit" value="ara"> </form> 23
<input type="number"> <input type="number"> kullanıcının önceden belirlenmiş kısıtlara göre sayı girmesini sağlayan form kontrolüdür. Bu kısıtlar; min, max, step ve value parametreleri ile belirlenir. <!DOCTYPE html> <h1>number Örneği</h1> <p>aşağıdaki alana <strong>0-9</strong> arasında bir sayı giriniz.</p> <form action="/actionpage.aspx" method="post"> Sayı: <input type="number" name="sayi" min="0" max="9" step="1"> <input type="submit" value="onayla"> </form> *** Internet Explorer 9 ve önceki sürümleri tarafından desteklenmez! 24
<input type="date"> <input type="date"> kullanıcının geçerli bir formatta tarih girişini sağlayan form kontrolüdür. Bu kontrol üzerinde, seçim yapılarak ya da el yordamıyla tarih bilgisi girilir. <!DOCTYPE html> <h1>date Örneği</h1> <p>el yordamıyla bir tarih girin ya da seçim yapın.</p> <form action="/actionpage.aspx" method="get"> Doğum Tarihi: <input type="date" name="dgmtarihi"> <input type="submit" value="gönder"> </form> *** Safari, Internet Explorer 11 ve önceki sürümleri tarafından desteklenmez! 25
<input type="time"> <input type="time"> kullanıcının geçerli bir formatta saat girişini sağlayan form kontrolüdür. Bu kontrol üzerinde, seçim yapılarak ya da el yordamıyla saat bilgisi girilir. <!DOCTYPE html> <h1>time Örneği</h1> <p>el yordamıyla bir saat girin ya da seçim yapın.</p> <form action="/actionpage.aspx" method="get"> Saat Seç: <input type="time" name="islemsaati"> <input type="submit" value="gönder"> </form> *** Safari, Internet Explorer 12 ve önceki sürümleri tarafından desteklenmez! 26
<input type="hidden"> <input type="hidden"> genellikle form gönderildiğinde güncellenmesi gereken veritabanı kaydını saklar. Hidden kontrolü kullanıcı tarafından görülmez, ancak form gönderildiğinde veriler gönderilir. <!DOCTYPE html> <h1>hidden Örneği</h1> <p>kullanıcı adınızı güncellemek için aşağıdaki alanı doldurun.</p> <form action="/actionpage.aspx" method="post"> Kullanıcı Adı: <input type="text" name="user"><br> <input type="hidden" id="userid" name="userid" value="78"> <br> <input type="submit" value="güncelle"> </form> 27
<input type="checkbox"> <input type="checkbox"> şeklinde tanımlanan onay kutuları, kullanıcının sınırlı sayıda seçenekten bir veya daha fazla seçenek seçmesine izin verir. <!DOCTYPE html> <h1>onay Kutusu Örneği</h1> <form action="/actionpage.aspx"> <input type="checkbox" name="vasita1" value="bisiklet"> Bisiklet<br> <input type="checkbox" name="vasita2" value="otomobil"> Otomobil<br> <input type="checkbox" name="vasita3" value="gemi" checked> Gemi<br><br> <input type="submit" value="gönder"> </form> 28
<input type="radio"> <input type="radio"> radyo düğmeleri normalde gruplar halinde sunulur. Bir grupta sadece bir radyo düğmesi aynı anda seçilebilir. <!DOCTYPE html> <h1>radio Örneği</h1> <form action="/actionpage.aspx"> <input type="radio" name="vasita1" value="bisiklet"> Bisiklet<br> <input type="radio" name="vasita2" value="otomobil" checked> Otomobil<br> <input type="radio" name="vasita3" value="gemi"> Gemi<br><br> <input type="submit" value="gönder"> </form> 29
<textarea> <textarea> etiketi, çok satırlı bir metin giriş kontrolü tanımlar. <textarea>, sınırsız sayıda karakter içerebilir. Bir metin alanının boyutu, sütun (cols) ve satır (rows) özellikleriyle belirtilebilir. Ayrıca CSS ile yükseklik (height) ve genişlik (width) değerleri belirtilerek ayarlanabilir. <!DOCTYPE html> <textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea> 30
<select> <select> etiketi, açılır bir liste (drop-down list) tanımlamak için kullanılır. <select> öğesinin içindeki <option> etiketleri, listedeki kullanılabilir seçenekleri tanımlar. <!DOCTYPE html> <select> <option value="78">karabük</option> <option value="16">bursa</option> <option value="34">istanbul</option> </select> 31
<optgroup> <optgroup> etiketi, açılır bir listedeki (drop-down list) ilgili seçenekleri gruplandırmak için kullanılır. Uzun bir seçenek listeniz varsa, bunların gruplandırılması kullanıcı için daha uygun olacaktır. <!DOCTYPE html> <select> <optgroup label="programming Languages"> <option value="cpp">c++</option> <option value="java">java</option> </optgroup> <optgroup label="script Languages"> <option value="js">javascript</option> <option value="php">php</option> </optgroup> </select> 32
<fieldset> <fieldset> etiketi, ilgili öğeleri bir formda gruplandırmak için kullanılır. Form nesnelerinin etrafında bir kutu çizer. <legend> ile başlık tanımlanır. <!DOCTYPE html> <form action="/actionpage.aspx" method="post"> <fieldset> <legend>login Panel</legend> Username: <input type="text" name="user"><br> Password: <input type="password" name="pass"><br><br> <input type="button" value="lost password"> <input type="submit" value="login"> </fieldset> </form> 33
Kaynaklar B u d e r s n o t u h a z ı r l a n ı r k e n a ş a ğ ı d a b e l i r t i l e n k a y n a k l a r d a n y a r a r l a n ı l m ı ş t ı r. 1 HTML Element Reference, w3schools (06.10.2018) 2 3 4 5 6 7 8 9 10 34