Web Tasarımı ve Programlama
advertisement
hakanbabac.net HTML Web Tasarımı ve Programlama hakanbabac.net İ Ç E R İ K // HTML • Internet Ortamı ve Web Tasarımı • Temel HTML Etiketleri • Listeleme Etiketleri • Metin Düzenleme Etiketleri • Bağlantı (Köprü) Oluşturma • Tablolarla Çalışma • Çoklu Ortam Araçları • Çerçeveler • Stil Şablonları (CSS) • Formlar html 2 hakanbabac.net INTERNET ORTAMI VE WEB TASARIMI • Alan Adı (Domain) IP adresi diye tabir edilen, bilgisayarların birbirini görmesini sağlayan nümerik sisteminin daha kolaylaştırılmış ve rahatça girilebilmesi için kelimelerle ifade edilen halidir. www.alanismi.alanturu.ulkekodu html gov : Hükümet kurumları / government edu : Eğitim kurumları / education org : Ticari olmayan kuruluşlar / organization com : Ticari kuruluşlar / company mil : Askeri kurumlar / military net : Servis sunucular / network ac : Akademik kuruluşlar / academic int : Uluslararası kuruluşlar / international 3 hakanbabac.net INTERNET ORTAMI VE WEB TASARIMI • Web Alanı / Barındırma (Hosting) Hazırlanan web sitelerinin belirlenen alan isimlerine göre internet ortamında yayımlanmasını sağlayan hizmet türüdür. Bu hizmet, hosting süreliğine sağlanır. firmaları tarafından belirli Server (sunucu) bilgisayarlar, hosting amacıyla kullanılan gelişmiş donanımsal özelliklere sahip olan ve birçok kullanıcıya aynı anda hizmet veren bilgisayarlardır. html 4 hakanbabac.net HTML TEMEL ETİKETLERİ HTML (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir işaretleme dilidir. HTML komutları; herhangi bir metin düzenleme editöründe yazılabileceği gibi, çeşitli web tasarım editörleriyle de oluşturulabilir. HTML komutları etiketlerden (tag) oluşur. html 5 hakanbabac.net HTML TEMEL ETİKETLERİ HTML komutları “<” ve “>” işaretleri arasına yazılır. <etiketadi>……</etiketadi>, <tag>…..</tag> HTML etiketleri kullanılmamalıdır. (ş, ç, ö, ü, ı, ğ) yazılırken Türkçe karakterler BÜYÜK-küçük harf duyarlı değildir. <body>….</BODY> veya <Html>….</html> Açılan bir etiket mutlaka kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır ! ! ! html 6 hakanbabac.net HTML TEMEL ETİKETLERİ HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır. Her web sayfası; <html> <head> <body> etiketi içermelidir. Bu dizilim kuralına uymadığınız takdirde bile sayfanız görüntülenebilir ancak biçimlendirme sorunları yaşayacağınızı ve ziyaretçilerinizin sayfa içerisinde gezinirken sorun yaşayabileceğini unutmayın !!! html 7 hakanbabac.net HTML TEMEL ETİKETLERİ • <html> html HTML kodlarının yazımına başladığımızı gösteren etikettir. Tüm HTML kodları <html>…</html> arasında yer alır. </html> ile HTML kodlarının yazımının bittiği anlaşılır. Bu etiketin yoktur. hiçbir parametresi 8 hakanbabac.net HTML TEMEL ETİKETLERİ • <head> Sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan meta bölümüdür. etiketleri Kullanılacak Parametreler html name Author, description ve keywords özellikleri tanımlanır. http-equiv Refresh, expires, content ve content-style-type özellikleri Size Yazının boyu belirlenir. 9 hakanbabac.net HTML TEMEL ETİKETLERİ • <head> • NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi bilgileri içerir. <meta name="author" content=«aosbilisim"> <meta name="description« yazınız"> content="sayfanın tanımını <meta name ="description" content ="Bu sayfa, Web Tasarımı ve Programlama dersi modülleri için hazırlanmıştır. "> <meta name="keywords" content="Siteniz arama motorlarında hangi anahtar kelimelerle tanımlansın istiyorsanız buraya yazınız."> html 10 hakanbabac.net HTML TEMEL ETİKETLERİ • <head> • HTTP-EQUIV: İçinde yer aldığı sayfanın, web server tarafından ziyaretçiye gönderilmesinde oluşturulacak karşılık başlığı bölümünde yer alacak bilgiler içerir. <meta http-equiv=Content-Type charset=windows-1254"> content="text/htm; <meta http-equiv=Content-Type charset=iso-8859-9"> content="text/htm; <meta http-equiv=Content-Type charset=utf-8"> content="text/htm; html 11 hakanbabac.net HTML TEMEL ETİKETLERİ • <head> <meta name="robots" content="all veya none"> Hazırladığımız sayfanın arama motorlarının robotları tarafından taranmasına izin vermek veya engellemek için kullanılır. İzin all, Engelleme none kullanılır. Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından görüntülenmez. html 12 hakanbabac.net HTML TEMEL ETİKETLERİ • <head> • <title>: Sayfanın tarayıcıda görünecek başlığının ne olacağını belirlemek için kullanılır. html 13 hakanbabac.net HTML TEMEL ETİKETLERİ • <body> HTML belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir. bgcolor Sayfanın arkaplân rengini belirlemek için kullanılır. background Arkaplanda kullanılmak istenilen resmi belirlemek için kullanılır. link Sayfada kullanılacak linklerin rengini belirlemek için kullanılır. alink vlink html Sayfada herhangi bir linke tıklandığı zaman oluşacak rengi belirlemek için kullanılır. Sayfada önceden ziyaret edilmiş linklerin rengini belirlemek için kullanılır. 14 hakanbabac.net LİSTELEME ETİKETLERİ • <ol> Sıralı liste oluşturmak için kullanılır. Kelime işlemci programındaki numaralandırma işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir. <ol> etiketi, <li> etiketi ile birlikte kullanılmalıdır. 1. Elma 2. Armut 3. Kavun html 15 hakanbabac.net LİSTELEME ETİKETLERİ • <ol> type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını belirleyebiliriz. a a. A. Elma b. B. Armut c. C. Kavun i i. I. Elma ii. II. Armut iii. III. Kavun html 16 hakanbabac.net LİSTELEME ETİKETLERİ • <ol> Sıralamanın her zaman “1” den veya “A” dan başlamasının istenmediği durumlarda start parametresi kullanılır. C. Elma D. Armut E. Kavun html 17 hakanbabac.net LİSTELEME ETİKETLERİ • <ul> Madde imli liste oluşturmak için kullanılır. <ul> etiketi, <li> etiketi ile birlikte kullanılmalıdır. • Elma • Armut • Kavun html 18 hakanbabac.net LİSTELEME ETİKETLERİ • <ul> type parametresi kullanarak madde iminin şeklini belirleyebiliriz. o Elma • Armut Kavun html 19 hakanbabac.net LİSTELEME ETİKETLERİ • <li> Liste oluşturmak için liste elemanlarını belirtmede kullanılan etikettir. Sıralamanın hangi şekilde olacağını <ol> ve <ul> etiketleri belirler. html 20 hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <hx> Başlık eklemek için kullanılan etiketlerdir. “x” ifadesi, 1’den 6’ya kadar değer almaktadır. x değeri azaldıkça yazı büyür. html 21 hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <hx> • align Metin / Nesne hizalama için kullanılan parametredir. left sola right sağa center ortaya justify iki yana yasla html 22 hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <b> İstenilen metni kalın (bold) olarak yazmak için kullanılır. <b>…</b> etiketleri arasında yazılı olan metni kalın yapar. Boş zaman yoktur boşa geçen zaman vardır. Tagore html 23 hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <u> İstenilen metni altı çizili (underline) olarak yazmak için kullanılır. <u>…</u> etiketleri arasında yazılı olan metnin altını çizili yapar. Boş zaman yoktur boşa geçen zaman vardır. Tagore html 24 hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <i>, <I> İstenilen metni eğik (italik) olarak yazmak için kullanılır. <i>…</i> etiketleri arasında yazılı olan metni eğik yapar. Boş zaman yoktur boşa geçen zaman vardır. Tagore html 25 hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <br> Bir alt satıra geçmek için kullanılır. Bu etiket kapatılmaz!!! Ey Türk Gençliği! Birinci vazifen, Türk istiklâlini, Türk Cumhuriyetini, ilelebet, muhafaza ve müdafaa etmektir. html 26 hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <p> Paragraf oluşturmak için kullanılır. <p>…</p> etiketleri arasında yazılı olan metni ayrı bir paragraf içinde gösterir. html 27 hakanbabac.net METİN DÜZENLEME ETİKETLERİ • <font> Metinlerin renk, boyut, yazı tipi gibi özelliklerini değiştirmek için kullanılır. size, color ve face parametreleri ile kullanılabilir. size yazı büyüklüğü color yazı rengi face yazı tipi <font face="Algerian" size="7" color="purple">Merhaba</font> html 28 hakanbabac.net GÖRÜNÜM DÜZENLEME ETİKETLERİ • <hr> Sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket kapatılmaz!!! size, width ve align parametreleri ile kullanılabilir. size çizgi kalınlığı width çizgi uzunluğu align çizgi konumu (hizalama) <hr size=“6” width=”200” align=“center”> html 29 hakanbabac.net BAĞLANTI (KÖPRÜ) OLUŞTURMA • <a href>…..</a> Sayfa içi/dışı tüm bağlantılar <a href>…</a> etiketleri kullanılarak tanımlanır. <a href=‘‘baglanti_adresi’’>metin_nesne</a> • Sayfa Dışı Bağlantı <a href=‘‘http://www.aosbilisim.net’’>AOSBilişim</a> AOSBilişim <a href=‘‘index.html’’>Ana Sayfa</a> Ana Sayfa html 30 hakanbabac.net BAĞLANTI (KÖPRÜ) OLUŞTURMA • Sayfa İçi Bağlantı Öncelikli olarak sayfa içi bağlantı verilecek kısım adlandırılmalıdır (çapa işlemi). Adlandırma, <a name="....">...</a> etiketi kullanılarak yapılır. <a name="ornek">Hyper Text Markup Language</a> Ardından bağlantı verilecek alana gelinip <a href =#....">...</a> etiketi köprü tanımlanır. <a href="#ornek">Html Nedir?</a> Html Nedir? html Hyper Text Markup Language 31 hakanbabac.net BAĞLANTI (KÖPRÜ) OLUŞTURMA • E-Posta Adresine Bağlantı <a href=‘‘mailto:e-posta kullanılarak adresi”>….</a> komutu <a href="mailto: iletisim@aosbilisim.net">e-posta göndermek için tıklayın.</a> e-posta göndermek için tıklayın. html 32 hakanbabac.net TABLOLARLA ÇALIŞMA • <table> Sayfaya tablo eklemek için kullanılır. </table> etiketiyle sonlandırılır. Satır ve sütun tanımlamaları için; <table> içinde <tr> ve <td> etiketleri de kullanılmalıdır. html 33 hakanbabac.net TABLOLARLA ÇALIŞMA • <tr> Tabloda satır oluşturmak için kullanılır. html 34 hakanbabac.net TABLOLARLA ÇALIŞMA • <td> Tabloda sütun oluşturmak için kullanılır. html 35 hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • border Hücrenin ve tablonun etrafındaki kalınlığını ayarlamak için kullanılır. Border=0 görünmez. html olduğu çerçeve zaman çerçevenin tarayıcıda 0 36 hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • bordercolor Çerçevenin renginin ayarlamak için kullanılır. html 37 hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • bgcolor Hücre/hücrelerin arkaplan renginin ayarlamak için kullanılır. html 38 hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • background Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır. html 39 hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • width Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır. • height Tablonun veya hücrenin pixel cinsinden yüksekliğini belirlemek için kullanılır. html 40 hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • colspan Aynı satırdaki hücreleri birleştirmek için kullanılır. html 41 hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • rowspan Aynı sütundaki hücreleri birleştirmek için kullanılır. html 42 hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • cellspacing Hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır. 10 html 43 hakanbabac.net TABLOLARLA ÇALIŞMA • <table> • cellpadding Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığını belirlemek için kullanılır. 0 !!! Tabloda boş hücre kullanılacaksa td etiketi arasındaa &nbsp; (boşluk) kullanılmalıdır. Aksi takdirde çizgiler gözükmez !!! html 44 hakanbabac.net ÇOKLU ORTAM ARAÇLARI • Resim Ekleme Resim eklemek için kullanılan html etiketi <img src> dir. src, ekleyeceğimiz resmin bulunduğu dizini gösterir. Bu etiket kapatılmaz !!! <img src=‘‘resim1.jpg’’>Gökyüzü Sayfa içine eklenecek resmin kaynak adresi html 45 hakanbabac.net ÇOKLU ORTAM ARAÇLARI • Resim Ekleme PARAMETRE GÖREVİ width Eklenilecek resmin pixel cinsinden genişliğini gösterir. height Eklenilecek resmin pixel cinsinden yüksekliğini gösterir. border Eklenilecek olan resme bir çerçeve çizilip kalınlığını belirlemek için kullanılır. Border=‘‘0’’olursa çerçeve çizilmez. Buradaki sayı arttıkça çerçevenin kalınlığı da artar. alt Fare ile resmin üzerine gelindiğinde ekranda görüntülenmesi istenen metni belirlemek için kullanılır. align Resim hizalamasını belirtmek için kullanılır. html 46 hakanbabac.net ÇOKLU ORTAM ARAÇLARI • Resim Ekleme html 47 hakanbabac.net ÇOKLU ORTAM ARAÇLARI • Ses Ekleme 3 farklı yolla ses eklenebilir: Sesi arkaplan olarak ekleyebiliriz. Böylelikle sayfa tarayıcı tarafından yüklendiği anda ses dosyası arkaplanda çalışmaya başlayacaktır. <bgsound src=‘‘muzik.wav” loop=‘‘infinite”> Müziğin tekrar sayısı Sayfa içine eklenecek sesin kaynak adresi html infinite sayfa kapanana kadar tekrar etmesini salar 48 hakanbabac.net ÇOKLU ORTAM ARAÇLARI • Ses Ekleme Ses dosyasına link vererek de ses ekleyebiliriz. Linke tıklandığı zaman bilgisayarda bulunan ses dosyası yürütücü programı çalışacak ve istenen ses dosyasının çalması sağlanacaktır html 49 hakanbabac.net ÇOKLU ORTAM ARAÇLARI • Ses Ekleme Ses dosyasını sayfa içine gömerek de ses ekleyebiliriz. Ses dosyasının çalışma zamanını belirler. true Ses dosyası, sayfa yüklendiği anda çalışacaktır. !!! mp3, wav, aif, ra, mid yaygın olarak kullanılan ses dosyası türlerindendir. !!! html 50 hakanbabac.net ÇOKLU ORTAM ARAÇLARI • Video Ekleme Video dosyasına link vererek video ekleyebiliriz. Linke tıklandığı zaman bilgisayarda bulunan video oynatıcı çalışacak ve istenen video dosyasının görüntülenmesi sağlanacaktır. html 51 hakanbabac.net ÇOKLU ORTAM ARAÇLARI • Video Ekleme Video dosyasını sayfa içine gömerek de video ekleyebiliriz. Videonun çalışma zamanını belirler. true Video, sayfa yüklendiği anda çalışacaktır. !!! mpeg, avi, mov, wmv, asf yaygın olarak kullanılan video türlerindendir. !!! html 52 Çerçeveler; bir tarayıcı penceresini birden fazla pencereye bölüp her bir pencere içerisinde farklı içerikler gösterilmesini; sağlar. Her çerçevenin kendine ait bir URL adresi vardır. Her çerçeveye bir isim verilebilir. Çerçeveler kullanıcı tarafından verilecek ölçülerle boyutlandırılabileceği gibi otomatik olarak da boyutlanabilme özelliğine sahiptir. html 53 hakanbabac.net ÇERÇEVELER hakanbabac.net ÇERÇEVELER • <frameset> Çerçeve oluşturmak için kullanılan etikettir. Tarayıcı penceresinin kaç parçaya bölüneceği (çerçeve sayısı) ve bu çerçevelerin boyutları belirlenir. Çerçevelerden oluşan bir sayfanın normal bir HTML belgesinden farkı; içeriğinde <body> etiketi yerine, <frameset> etiketini kullanmasıdır. html 54 hakanbabac.net ÇERÇEVELER • <frameset> • cols Ekranı dikey olarak (sütunlar halinde) tanımlanan parçalara bölmek için kullanılır. Sütun genişlikleri pixel veya %’lik olarak belirlenir. Sütun sayısı, çerçeve sayısını belirleyici niteliktedir. Çerçeve içlerinin kaynağını tanımlamak için kullanılır. html 55 hakanbabac.net ÇERÇEVELER • <frameset> • rows Ekranı yatay olarak (satırlar halinde) tanımlanan parçalara bölmek için kullanılır. Satır yükseklikleri pixel veya %’lik olarak belirlenir. Çerçeve içlerinin kaynağını tanımlamak için kullanılır. html 56 hakanbabac.net ÇERÇEVELER • <frame> <frameset> etiketi ile oluşturulan çerçevelerin içinde gösterilecek sayfaların belirlenmesi için kullanılır. GÖREVİ PARAMETRE name Çerçevenin adını gösterir. resize / noresize Çerçeve boyutunun değiştirilip değiştirilemeyeceğini gösterir. scrolling Çerçevenin içeriğinin ekrana sığmadığı durumlarda, kaydırma çubuğu kullanılıp kullanılmayacağını gösterir. (auto / yes / no) marginheight Sayfadaki ilk nesnenin üst kısımdan uzaklığını gösterir. marginwidth Sayfadaki ilk nesnenin sol kısımdan uzaklığını gösterir. src Çerçeve içinde gösterilecek nesnenin URL adresini gösterir. html 57 hakanbabac.net ÇERÇEVELER • İç İçe Çerçeve Oluşturma İç içe kullanılan <frameset> etiketleri ile aynı pencere içinde yatay ve dikey çerçevelerin birlikte kullanımı sağlanır. html 58 hakanbabac.net ÇERÇEVELER • <iframe> Hazırlamakta olduğunuz sayfanın herhangi bir yerinde başka bir sayfa görüntülemek istediğiniz zaman kullanılabilen, bir iç çerçeve oluşturmaya yarayan etikettir. PARAMETRE GÖREVİ name İç çerçevenin adını gösterir. frameborder İç çerçeve kenarlığının olup olmayacağını gösterir. scrolling İç çerçevenin içeriğinin ekrana sığmadığı durumlarda, kaydırma çubuğu kullanılıp kullanılmayacağını gösterir. (auto / yes / no) height İç çerçevenin yüksekliğini gösterir. width İç çerçevenin genişliğini gösterir. src İç çerçeve içinde gösterilecek nesnenin URL adresini gösterir. html 59 hakanbabac.net ÇERÇEVELER • <iframe> html 60 Stil Şablonları (CSS/Cascading Style Sheets), hazırlamakta olduğumuz sayfalar için istenildiği zaman kullanılmak üzere şablonlar oluşturmaya yarar. CSS kodlarının en önemli özelliklerinden birisi farklı türlerde kullanılabilmesidir. İsteğe göre tek bir öğeye, tüm sayfaya veya site içerisinde kullanılan tüm html dosyalarına etki edebilme özelliğine sahiptir. Bu özellikler Yerel, Genel ve Harici CSS olarak adlandırılmaktadır. html 61 hakanbabac.net STİL ŞABLONLARI (CSS) hakanbabac.net STİL ŞABLONLARI (CSS) • Yerel CSS html 62 hakanbabac.net STİL ŞABLONLARI (CSS) • Genel CSS html 63 hakanbabac.net STİL ŞABLONLARI (CSS) • Harici CSS stil.css html 64 hakanbabac.net STİL ŞABLONLARI (CSS) Stil Şablonları ile Çalışma (CSS), bir sonraki modülde ayrıntılı olarak anlatılacaktır. html 65 Etkileşimli Web sayfaları hazırlamanın yolu FORM kullanmaktan geçer. (e-bankacılık, e-ticaret, e-eğitim…) Formlar, kullanıcıdan veri (bilgi) almak için düzenlenir. HTML, yalnızca kullanıcının forma yazdığı verileri kaydeder; onları bir programlama dilinin yaptığı gibi işleyemez !!! html 66 hakanbabac.net FORMLAR hakanbabac.net FORMLAR • <form> Form oluşturmayı sağlayan tüm form elemanları, <form>….</form> etiketleri arasında yer alır. <form ACTION=‘‘url’’ METHOD= ‘‘get / post’’ TARGET=‘‘pencere’’> … </form> Formdan girilecek olan bilgilerin değerlendirileceği dosyanın URL adresi Formdan girilecek olan bilgilerin değerlendirici dosyaya gönderim metodu Hedef adresin tarayıcıda gösterileceği pencere GET : Gönderilen veriler adres çubuğunda gösterilir. POST : Gönderilen veriler gizli kalır. <form ACTION=‘‘mailto:iletisim@aosbilisim.net’’ METHOD= ‘‘post’’ TARGET=‘‘_blank’’> html 67 hakanbabac.net FORMLAR • <form> • method GET POST Ayrıntılı bilgi için tıklayın… http://www.yazilimdevi.com/Makaleler-742-http-get-ve-post-yontemleri.aspx html 68 hakanbabac.net FORMLAR • <form> • method GET POST Ayrıntılı bilgi için tıklayın… http://www.yazilimdevi.com/Makaleler-742-http-get-ve-post-yontemleri.aspx html 69 hakanbabac.net FORMLAR • <input> Form içinde bilgi almak için kullanılır. Girişi yapılacak veri türü type parametresi ile belirlenir. Varsayılan veri türü text(metin) tir. Bu etiket kapatılmaz !!! <INPUT ALIGN=‘‘hizalama’’ MAXLENGTH=uzunluk NAME=‘‘isim’’ SIZE=boyut SRC=‘‘adres’’ TYPE=‘‘tip’’ VALUE=‘‘değer’’> html 70 hakanbabac.net FORMLAR • <input> PARAMETRE GÖREVİ type Girilecek olan elemanın türünü belirtmek için kullanılır. src Eğer bir resim dosyası kullanılmışsa görüntülenmesi istenilen resim dosyasının adresini belirtmek için kullanılır. align Elemanın sayfada konumlanacağı yeri belirlemek için kullanılır. (left / right / center) name Girilecek olan verinin değişken ismini belirlemek için kullanılır. maxlength Girilecek olan verinin en fazla kaç karakterden oluşacağını belirlemek için kullanılır. Size Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılır. Varsayılan değeri 20‘dir. checked Bir seçim kutusu kullanıldığı durumlarda bu kutuların işaretlenmiş olarak görüntülenmesini sağlamak için kullanılır. Sadece radio ve checkbox elemanları için kullanılır. disabled Veri girişlerini engellemek için kullanılır. html 71 hakanbabac.net FORMLAR • <input> html 72 hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) • Checkbox Forma onay kutuları eklemek için kullanılır. html 73 hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) • Radio Kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılmaktadır. Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin aynı olması gerekmektedir. Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenir. Radio düğmelerinin seçeneğinde belirlenir. html alacağı değerler Value 74 hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) • Radio html 75 hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) • Text Forma, tek satırlık metin alanı eklemek için kullanılır. html 76 hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) • Password Forma, şifreli alanlar eklemek için kullanılır. html 77 hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) • Textarea Forma birden fazla satırdan oluşan alanlar eklemek için kullanılır. Rows (satır) ve cols (sütun) tanımlamaları ile, metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenir. html 78 hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) • Select (Açılır Menü) Forma açılır menü eklemek için kullanılır. Listbox(liste kutusu) drop-down list(aşağı açılır liste) şeklinde iki farklı türde seçim kutusu oluşturulabilir. Liste elemanları, <option> etiketi ile belirlenir. drop-down list html listbox 79 hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) • Select (Açılır Menü) html 80 hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) • Reset Üzerine gelip tıklandığı zaman, form içeriğini temizleyip kullanıcının forma yeniden bilgi girişi sağlayan bir düğme (buton) oluşturulmasını sağlar. <input type=‘‘reset’’ value=‘‘Temizle’’ > html 81 hakanbabac.net FORM NESNELERİ (INPUT TÜRLERİ) • Submit Form içine girilen bilgilerin sunucuya gönderilmesini sağlamak için kullanılır. <input type=‘‘submit’’ value=‘‘Gönder’’ > html 82 hakanbabac.net Şimdilik bu kadar… web tasarımı ve programlamayla ilgili bir sonraki yayın CSS html 83 hakanbabac.net İLETİŞİM hakanbabac.net iletisim@hakanbabac.net html 84
