HTML Etiketleri - 1 HTML HTML, diğer programlama dillerinden farklı olarak sadece görsel düzenleme için kullanılmaktadır. HTML ile sayfadaki metin, resim, animasyon ve diğer nesnelerin nerede nasıl görüntüleneceği ayarlanır. HTML herhangi bir text (metin) editörü (Notepad, Word, Notepad++, Dreamweaver,...) ile hazırlanabilir. Bizler Notepad++ üzerinde kodlama yapacağız. Notepad++ ile kodlama yaparken web sayfamızda Türkçe karakter problemi yaşamamak için editörümüzün karakter kodlamasının UTF-8 olması gerekmektedir. Yandaki resimde de görüldüğü gibi Notepad++ da Araçlar Tercihler Yeni Sekme/Aç/Kaydet UTF-8 seçildikten sonra yeni dosya açtığımızda editörün sol alt kısmında UTF-8 yazısı görünecektir. Dreamweaver varsayılan olarak UTF-8 olarak sayfayı kodladığı için herhangi bir ayarlama yapmak gerekmemektedir. Kaydedilecek olan web sayfalarının uzantısı.html olmalıdır. Ana sayfanın adı ise index.html olmalıdır. Öncelikle sitemizi barındıracak bir klasör oluşturduktan sonra tüm sayfalarımızı bu klasörün içine uzantısını.html vererek kaydetmekte fayda vardır. HTML Yazım kuralları HTML dilinin de kendine özgü bazı kuralları vardır. Bunlar genel olarak şunlardır: Komutlar büyük ya da küçük harfle yazılabilir. (<html> yada <HTML>) Komutlarda Türkçe ye özgü karakterler kullanılmaz. (Yasak harfler: ç, Ç, ğ, Ğ, ı, İ, ö, Ö, ş, Ş, ü, Ü) Komutlar < ve > işaretleri arasında yazılır ve etiket (tag) adlandırılırlar. Bazı etiketler hariç her etiketin bir kapanışı vardır.(<html>..</html>) Etiketler iç içe yer alır ve en içteki etiketten başlatılarak kapatılır. (<html><body><p> </p></body></html>) Kodların okunabilirliğini artırmak için bir etiket bitmeden tekrar etiket açılırsa içeride açılan etiket biraz daha içeriden yazılmalıdır. Yani girinti vermeye dikkat edilir. Örnek: Birden fazla iç içe HTML etiketleri açalım ve kapatalım. Girinti vermeye dikkat edelim.
Etiketin açılışı ve kapanışı Yeni HTML versiyonlarında her etiketin bir kapanışının olması gerekmektedir. İlk HTML versiyonlarında bazı etiketler kapatılmazken tüm bu etiketler de artık kapatılmaktadır. Bir HTML etiketi; açılışı ile kapanışı arasında etkilidir. Kapanışın açılıştan farkı önüne / işaretinin konmasıdır. Açılış Kapanış <etiket>.</etiket> Yeni HTML versiyonlarında açılış ile kapanış aynı anda şu şekilde yapılabilmektedir. Açılış+Kapanış <etiket /> İleride ayrıntılı olarak göreceğimiz <meta>, <img> ve <br> gibi önceleri kapatılmayan etiketler de artık <meta />, <img /> ve <br /> şeklinde usul gereği kapatılmaktadır. İç içe yazılmış olan etiketlerin kapanışında önce içteki etiketlerin kapatılmasına sonra dıştaki etiketlerin kapatılmasına dikkat edilir. <etiket1> <etiket2> <etiket3>. </etiket3> </etiket2> <etiket1> Örnek: Birden fazla iç içe HTML etiketleri açalım ve kapatalım. <html> <head> <title>web Sayfamıza Hoş Geldiniz</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <h1>bilişim Bölümü Öğrencileri</h1> <ul> <li>ezgi</li> <li>sümeyye</li> <li>buğra</li> <li>mustafa</li> </ul> </body> </html> Burada dikkat ederseniz meta etiketinin kapanışı kendi içinde yapılmıştır. Diğer etiketler de ise; açılan bir etiketin kapanışı yapılmadan yeni bir etiket açıldığında ikinci açılan etiket kapatılmadan ilk etiket kapatılmamıştır. Örneğin: <head> altında <title> açıldığından; </title> kapatıldıktan sonra </head> kapanışı gelmiştir.
Parametre Kullanımı Bazı etiketleri biçimlendirmek için etiketin açılışına yazılan parametre denilen özellikler vardır. Bu parametreler sayesinde etikete ait diğer özellikler kullanılabilmektedir. Parametreleri yazarken şunlara dikkat ediniz. Parametreler açılış etiketlerinin içine yazılır Her parametre bir boşluk ile ayrılır Parametreye eşittir (=) ile atanan değer çift tırnak içinde yazılır Her etiketin farklı parametresi olabileceğinden doğru parametreleri doğru etiketlerde kullanınız Kullanımı: Açılış Kapanış <etiket parametre1= değer1 parametre2= değer2 >. </etiket> Örnek: body etiketinin bgcolor parametresine green değerini atayarak web sayfasının arkaplan rengini yeşil yapalım. <body bgcolor= green >. </body> Web Sayfasının Genel Yapısı HTML nin genel kurallarını öğrendikten sonra artık web sayfasını kodlamaya geçebiliriz. Bunun için öncelikle bir web sayfasında bulunması gereken bazı etiketler vardır. Bir web sayfası hazırlarken bu etiketlerin muhakkak bulunması gerekmektedir. Şimdi sayfamızın genel yapısını bu etiketleri kullanarak oluşturalım. <html> -------------- Web sayfasının başladığını belirtir. <head> -------------- Sayfayı tanımlayıcı bilgilerin olduğunu belirtir <title>sayfanın Başlığı</title> -------------- Web sayfasının pencere ya da sekme başlığıdır </head> -------------- Sayfayı tanımlayıcı bilgilerin bittiğini belirtir <body> -------------- Web sayfasının içeriğinin başladığını belirtir Sayfanızın tüm içeriği (yazı, resim, tablo, video, ) -------------- Web sayfasının görünün tüm içeriği buradadır </body> -------------- Web sayfasının içeriğinin bittiğinin belirtir </html> -------------- Web sayfasının bittiğini belirtir. Şimdi bu etiketleri sırasıyla açıklayalım. <html> </html>: Bir web sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya web sayfasının başladığı ve bittiği yeri bildirir. Bütün HTML kodları bu etiketin içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur. <head> </head>: Bu bölüm tamamen tanımlayıcı bilgileri içermektedir. Buradaki bilgiler ekranda görüntülenmez. Daha çok arama motorlarını bilgilendirmek amaçlıdır. Örneğin sayfanın başlığı, dili, karakter seti, yazarı, anahtar sözcükleri gibi tanımlayıcı bilgiler bu bölümde yazılır. <title> </title>: Web sayfasının pencere yada sekme başlığıdır. Günümüzdeki tüm tarayıcılar artık sayfaları kendi içerisinde sekmeler şeklinde açmaktadır. Bu özellik ile tarayıcıda görünen sekmenin başlığı ayarlanmaktadır. Unutmayınız bu etiket sadece <head> </head> arasında yazılır. <body> </body>: Web sayfamızda görünmesini istediğimiz her şey bu etiketler arasına yazılır. Bunlar yazılar, listeler, tablolar, resimler yada videolar olabilir. Sayfanın arka plan rengi için bgcolor ve arka plan resmi için background parametreleri vardır.
Meta Bilgileri <head> </head> etiketleri arasında sayfayı tanımlayıcı bilgilerin bulunduğunu söylemiştik. İşte bu bilgileri <meta> etiketi ile belirtiyoruz. Bu etiket ile belirtebileceğimiz bazı bilgiler şunlardır: 1. Sayfanın yazarı <meta name="author" content="11 AND Bilişim" /> 2. Sayfanın kısa bir tanıtım cümlesi <meta name="description" content="sayfanızın kısa tanıtımını buraya yapın." /> 3. Sitenizi arama motorlarında bulduracak anahtar sözcükler <meta name="keywords" content="siteniz ile ilgili kelimeleri buraya virgülle ayırarak yazın." /> 4. Sayfanın karakter seti <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5. Sayfanın dili <meta http-equiv="content-language" content="tr" /> 6. Sayfanın telif hakkı <meta name="copyright" content=" 2012 Bilişim Bölümü" /> 7. Sayfanın belirtilen saniye sonra yönlendirileceği adres <meta http-equiv="refresh" content="5; url=http://www.megep.meb.gov.tr" /> Unutmayınız sayfanın karakter kodlaması kullandığınız editörle (notepad++, dreamweaver, ) ilgilidir. Ama karakter seti (charset=utf-8) ise kullandığınız meta koduyla alakalıdır. Türkçe karakter sorunu yaşamak istemediğiniz sayfalarda her ikisi için de UTF-8 kullanmanız önerilmektedir. Örnek: Bilgileri aşağıda olan bir web sayfası hazırlayalım. Sayfa Başlığı: 11 AND Bilişim Sayfa Dili: Türkçe Karakter Kodlaması: UTF-8 Anahtar Sözcükler: gebze ticaret meslek lisesi, bilişim bölümü, 11 and bilişim, web tasarımı Sayfa İçeriği: Web Sayfası nedir? HTML olarak adlandırılan dil yardımıyla oluşturulmuş, içinde metin, statik, dinamik görüntü, ses gibi objelerin bulunabileceği browser (tarayıcı) yardımıyla görüntülenebilen dosyalara verilen addır. Web sitesi nedir? Bir kurum ya da kuruluşun ürün, hizmet, bilgi, iletişim gibi sık kullanılan başlıklarda ve sınırı olmayan bir çok alanda oluşturulabilen web sayfalarının toplu halde bir düzen içinde bulunduğu web sayfası gruplarına web sitesi denir.
Örnek: Bilgileri aşağıda olan bir web sayfası hazırlayalım. Sayfa Başlığı: HTML 5 Nedir? Sayfa Dili: Türkçe Karakter Kodlaması: UTF-8 Anahtar Sözcükler: html 5, yeni html versiyonu, yeni html etiketleri Arkaplan Rengi: #E1FF88 Arkaplan Resmi: back_hermain.jpg Sayfa İçeriği: HTML 5 Nedir? HTML 5, HTML dilinin son sürümüdür. Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir, Kısaca H5 Google Chrome ve Safari tarayıcılarının güncel sürümleri üzerinde, deneme aşamasında da olsa çok daha iyi bir şekilde çalışmaktadır. Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir. Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır. Video paylaşım sitesi Youtube, deneme aşamasında HTML5'i kullanıcılarına sunmaktadır. Body etiketinin içerisinde hem bgcolor hem de background parametreleri kullanılmıştır. Bu durumda eğer resim bulunamazsa arka plan rengi etkili olacaktır. Ama şu durumda arka plan resmi görünecektir. Her ikisini birlikte kullanmak zorunda değilsiniz. Sadece birini de kullanabilirsiniz. Unutmayınız parametreler açılış etiketinin içine bir boşlukla ayrılarak yazılırlar. Bilindiği gibi bir web sitesi birçok sayfadan, resimden ve diğer nesnelerden oluşmaktadır. Planlı bir çalışmanın gereği olarak bir site yapmaya bağlamadan önce sitenin kök dizini olacak bir klasör, daha sonra da bunun içerisinde resimlerin ve diğer dosyaların saklanacağı resimler, css, js gibi klasörler oluşturmalısınız. Yukarıdaki örnekte bir masaüstünde html5/ adında bir klasör oluşturduktan sonra bunun içinde resimler/ adında bir klasör daha oluşturduk. Sonra arka plan resmi olarak kullanacağımız back_hermain.jpg resmini resimler/ klasörüne kopyaladık. Body nin background parametresinde back_hermain.jpg resminin kullanırken öncelikle bu resmin yolunu yazdığımıza dikkat ediniz. ( <body bgcolor= #E1FF88 background= resimler/back_hermain.jpg > ) Unutmayınız; sayfanızda kullanacağınız resimlerin yolu üzerinde çalıştığınız sayfaya göredir. Örneğin biz burada index.html sayfasında çalışıyoruz ve bu sayfanın konumuna göre kullanacağımız resim, resimler/ klasöründe bulunmaktadır.
Listeleme Etiketleri Web sayfalarında iki çeşit liste kullanılır. Bunlar sıralı (ordered) ve sırasız (unordered) listelerdir. 1 2 3, a b c yada I II III IV şeklinde başında sıra numarası bulunan listeler sıralı listelerdir. <ol>. </ol> etiketleri ile oluşturulurlar. Başında, ve gibi işaretlerin bulunduğu listeler ise sırasız listelerdir. <ul>. </ul> etiketleri ile oluşturulurlar. Listeye bir madde eklemek için <li>. </li> etiketi kullanılır. Etiket Parametreler Açıklama <ol> type Listeleme tipini belirler. Örn: type= a 1 : Onluk tabanda numaralama (1,2,3,4, ) i : Küçük rakamlarla romen sayıları (i,ii,iii,iv, ) I : Büyük rakamlarla romen sayıları (I,II,III,IV, ) a : Küçük harflerle alfabetik (a,b,c, ) A : Büyük harflerle alfabetik (A,B,C, ) start Listenin başlangıç değerini belirtir. Her zaman sayı olmalıdır. Örn: start= 5 <ul> type disc: İçi dolu bir daire görüntüler. circle: İçi boş bir daire görüntüler. square: İçi dolu kare görüntüler. Örnek: Aşağıdaki sıralı listeyi oluşturalım. Örnek: Aşağıdaki sırasız listeyi oluşturalım.
Örnek: Aşağıdaki sıralı listeyi oluşturalım. Konular <h3>konular</h3> a. Temel Bilgiler <ol type= a > b. Program Ara Yüzü <li>temel Bilgiler</li> c. Komutlar <li>program Ara Yüzü</li> <li>komutlar</li> </ol> Örnek: Aşağıdaki sıralı listeyi oluşturalım. 3. RAM <ol start= 3 > 4. Ekran Kartı <li>ram</li> 5. Optik Sürücü <li>ekran Kartı</li> <li>optik Sürücü</li> </ol> Örnek: Aşağıdaki sıralı listeyi oluşturalım. D. Matematik <ol type= A start= 4 > E. Fizik <li>matematik</li> F. Kimya <li>fizik</li> G. Biyoloji <li>kimya</li> <li>biyoloji</li> </ol> Örnek: Aşağıdaki sırasız listeyi oluşturalım. o Ali <ol type= circle > o Ayşe <li>ali</li> o Ömer <li>ayşe</li> <li>ömer</li> </ol> Örnek: Aşağıdaki sırasız listeyi oluşturalım. Ali <ol type= square > Ayşe <li>ali</li> Ömer <li>ayşe</li> <li>ömer</li> </ol> Örnek: Aşağıdaki liste içindeki listeyi oluşturalım. 1. Bilişim Sınıfı <ol> Ali <li>bilişim Sınıfı Ayşe <ul type= disc > Ömer <li>ali</li> 2. Muhasebe Sınıfı <li>ayşe</li> Kenan <li>ömer</li> Esma </ul> Zekiye </li> <li>muhasebe Sınıfı <ul type= disc > <li>kenan</li> <li>esma</li> <li>zekiye</li> </ul> </li> </ol>
Ödevler: Aşağıdaki listeleri oluşturunuz. Marmara A. Karadeniz 1. İstanbul o Rize 2. Kocaeli o Trabzon Ege B. İç Anadolu 1. İzmir o Ankara 2. Manisa o Konya IV. Donanım c. Futbol Anakart 1. GS İşlemci 2. FB RAM 3. BJK V. Yazılım d. Basketbol Windows 4. Türk Telekom Linux 5. Erdemir Mac OS 1. Adem TEKİNEL Temel Elektronik Programlama Temelleri Mesleki Gelişim 2. Hayrullah GÜLTEN İnternet Programcılığı Teknik Resim Paket Programlar 3. Ali ÇETİN o Web Tasarımı o Veritabanı 4. Recep MUTLU i. Grafik ve Animasyon ii. Bilişim Teknolojilerinin Temelleri Metin Düzenleme Etiketleri 1) Başlık Etiketleri (<hx>..</hx>) Web sayfasında istenilen büyüklükte başlıklar oluşturmak için <hx> </hx> etiketi kullanılır. X yerine 1-6 arası bir sayı gelir.<h1> en büyük başlık iken, <h6> en küçük başlıktır. Bu etiket ile yazı hem kalın olur hem de alt satıra kendisi geçer. Paremetre Değer Açıklama align Left(sol yaslı) center(ortala) right(sağa yaslı) justify(her iki yana yaslı) align kullanıldığı sayfadaki yatay yerini belirler. <h1>başlık Etiketleri</h1> <h2>başlık Etiketleri</h2> <h3>başlık Etiketleri</h3> <h4>başlık Etiketleri</h4> <h5>başlık Etiketleri</h5> <h6>başlık Etiketleri</h6> Başlık Etiketleri Başlık Etiketleri Başlık Etiketleri Başlık Etiketleri Başlık Etiketleri Başlık Etiketleri Örnek: <html> <head> <title>başlık Etiketleri</title> </head> <body> <h1 align="right">başlık Sağda</h1> <h2 align="center">başlık Ortada</h2> <h3 align="left">başlık Solda</h3> <h4 align="center">bu Başlık da Ortada</h4> <h5>bu Varsayılan olarak Solda</h5> <h6>bu da Varsayılan olarak Solda</h6> Bu satır normal yazı başlık olmayan bir yazı </body> </html>
2) Kalın (<b> </b>) Arasındaki metinleri kalın (bold) yazar. Okulumuzda <b>bilişim</b> bölümünde <b>web Programcılığı </b> dalı okutulmaktadır. Okulumuzda Bilişim bölümünde Web Programcılığı dalı okutulmaktadır. 3) Eğik (<i>.</i>) Arasındaki metinleri eğik (italik) yazar. Okulumuzda <i>bilişim</i> bölümünde <i>web Programcılığı </i> dalı okutulmaktadır. Okulumuzda Bilişim bölümünde Web Programcılığı dalı okutulmaktadır. 4) Altı Çizili (<u>.</u>) Arasındaki metinleri altı çizili (underline) yazar. Okulumuzda <u>bilişim</u> bölümünde <u>web Programcılığı </u> dalı okutulmaktadır. Okulumuzda Bilişim bölümünde Web Programcılığı dalı okutulmaktadır. 5) Paragraf (<p> </p>) Aradaki metne paragraf özelliği kazandırır. Kapanışından sonra bir alt satıra geçerek bir satır boşluk bırakır. Başlık etiketlerinde olduğu gibi hizlamak için align parametresine sahiptir. Paremetre align Değer Left(sol yaslı) center(ortala) right(sağa yaslı) justify(her iki yana yaslı) <html> <head> </head> <body> <title>başlık Etiketleri</title> <p>bilgisayara fazlaca merakı olan bir çok kişinin isteği, bilgisayar yardımı ile dış çevre birimlerini kontrol etmektir. </p> </html> <p align="justify"> Windows 2000 ( NT teknolojisi ) üzerinde port uygulamaları geliştirmek diğer işletim sistemlerine göre daha zor bir iştir. Zira <b>nt teknolojisi</b> üzerine kurulu sistemler donanım aygıtlarına direk erişiminizi kısıtlamaktadırlar.</p> <p align="center"><u>html 5</u>, HTML dilinin son sürümüdür. Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir</p> </body>
6) Font (<font> </font>) Font etiketi sahip olduğu parametreler sayesinde metinlerin renk, yazı tipi, boyut gibi özelliklerini değiştirmenize olanak sağlar. Parametreleri ile beraber kullanım şekli aşağıdaki gibidir. <font face="yazıtipi" size="boyut" color="renk"> </font> Paremetre Değer Açıklama face arial, times new roman, tahoma, verdana,... Yazı tipini ifade eder. Sistemdeki yazı tiplerinden birinin adı yazılır. size 1-7 arası bir sayı alır Metnin büyüklüğünü ayarlar. Bu değişkene -1, +2 gibi değerler verilerek metnin büyüklüğünün bir eksiltilmesini veya iki artırılmasını sağlayabilir. color Renkler ve İngilizce adları şöyledir. red, green, blue, #FFFFFF, #000000, #C0C0C0, #FFFF00, #FF0000, Yazını rengini ayarlar. Renklerin İngilizce adları yada rengin hexadecimal kodu kullanılır. Hexadecimal olarak yazılacak olan renk kodunun önüne # işareti konulduktan sonra 6 haneden oluşur. Her hane 0,1,2,3,.,9,A,B,C,D,E,F değerlerinden birini alabilir. Örneğin #CC9AF3, #DC009A, #00FFCC, <html> <head> <title>font Etiketi</title> </head> <body> <font face="tahoma">bilişim</font><br> <font size="5">teknolojileri</font><br> <font color="#ff0000">bilişim</font><br> <font face="comic sans ms" size="7" color="green">teknolojileri</font> </body> </html>
Örnek: <font face="verdana" size="7">web Tasarımı</font><br> <font size="+2" color="green">tecrübe</font><br> <font size="+4" color="#ff0000">çalışma</font><br> <font face="comic sans ms" size="3" color="blue">ve gayret ister!</font> Uygulama: Aşağıdaki ekran görüntüsünü hazırlayalım. Sayfanın arka plan rengi: #D2D2D2 Yazı tipleri sırasıyla: arial, verdana, tahoma ve comic sans ms Yazı boyutu: 5 Renkler: Görüldüğü gibi Uygulama: Aşağıdaki metni hazırlayınız. Açıklama; Mavi kısımlar kalın ve font büyüklüğü 1 büyük olacak Kodlarda kalın ve font büyüklüğü 2 büyük olacak programlama dillerini - özel renklendirebilmesi- kalın ve italik olacak. Syntaxlar kalın olacak. (Regular Expression) Kalın ve altı çizili olacak. düzenli ifadeleri kalın ve kırmızı olacak. Notepad++; C, C++, Java, C#, XML, HTML, PHP, Javascript, RC file, nfo, doxygen, ini dosyası, batch dosyası, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, Unix Shell Script, Fortran, NSIS ve Flash action script programlama dillerini destekleyen aynı zamanda bu diller ile, kodları ve fonksiyonları özel renklendirebilmesi sayesinde daha etkin çalışmanızı sağlayan ücretsiz bir program. Ayrıca Notepad++'da çok satırlı kodlarda çalışırken çeşitli satırları küçültme ve bir araya getirme seçeneğinizinde bulunduğu bu text editörü yeni syntaxlar (kod seçenekleri) ekliyebilmenize imkan tanır. Aramalarda düzenli ifadeleri destekler (Regular Expression).
7) Diğer Etiketler Etiket <s>, <strike> <center> <br> <big> <small> <strong> <em> <tt> <sub> <sup> <hr> <blockquote> <marquee> Tanımlama İçerdiği metnin ortası çizili gösterileceğini belirtir. İçerdiği metini ortalar. Yanına yazı yazıldığında yazılar alt satıra geçer. Düz metin içeriğinde bir satır alta geçilmesini sağlar. Kapanışı yoktur. İçerdiği metnin yazı tipini değiştirmeden biraz daha büyük gösterilmesini sağlar. Bir kereden fazla kullanıldığında ilgili metnin daha da büyümesini sağlar. İçerdiği metnin ufak boyutlu gösterileceğini belirtir. İçiçe bir kereden fazla kullanıldığında metnin daha da küçülmesini sağlar. İçerdiği metnin kalın (bold) gösterilerek vurgulanmasını sağlar. İçerdiği metnin yatık (italik) gösterilerek öneminin vurgulanmasını sağlar. İçerdiği metnin sabit genişliğe sahip yazı tipi (font) ile gösterilmesini sağlar. Subscript(alt simge) Superscript(üst simge) Sayfanın eklendiği yerinde yatay çizgi oluşturulmasını sağlar. İçerdiği metnin geniş bir alıntı içeriği olduğunu belirtir. BLOCKQUOTE etiketinin içeriği blok olarak gösterilir. Kayan yazı <center><big><i>gebze Ticaret Meslek Lisesi </i></big></center> <hr> <u>11 bilişim Sınıfları</u>: <b>11 Bilişim A </b>, <i><s>11 Bilişim B</s></i>, <b><s> 11 AND Bilişim </s></b><br><br> <marquee><center><small>oturma planları </small></center></marquee><br> <tt>web tasarım dersinde <strong>sayfa tasarımı</strong> ile ilgili dersler görülecektir.</tt><br> Grafik ve Animasyon dersinde <em>web sayfaları için görsel öğeler</em> hazırlanacaktır. <hr><br><br> Su = H<sub>2</sub>O <br> Karbondioksit = CO<sub>2</sub> <br> X<sup>3</sup> = 27 <br> x<sup>3</sup> + 2x + 5 = 34 <br> <sup>a</sup>x<sub>5</sub><sup>2</sup>
HTML Etiketleri - 2 Bağlantı (Köprü - Link) Oluşturma Web sayfalarında çokça gördüğümüz ve tıklandığında başka sayfalara gitmemizi sağlayan linkler oluşturmak için <a> </a> etiketi kullanılır. Parametre Değer Açıklama href URL Sayfa adı Resim adı Bölüm adı E-posta adresi name target İsteğe bağlı bir isim olabilir _blank _parent _self _top Genel olarak 4 çeşit bağlantı vardır. Bunlar; Site dışı bağlantılar Site içi bağlantılar Sayfa içi bağlantılar E-posta adresine bağlantı Linkin tıklandığında gideceği hedefin adresidir. Bu bir başka sitenin URL si, site içindeki başka bir sayfanın yada resmin adı, aynı sayfa içindeki bölümün adı veya e- posta adresi olabilir. Aynı sayfa içinde linkler oluşturmak için linkin gideceği yerde işaret oluşturmak için kullanılır. Bir başka deyişle sayfa içinde bölüm oluşturmak için kullanılır. Sonra aynı sayfadaki linkler bu bölümlere yönlendirilir. _blank: Bağlantıyı yeni bir pencerede açar. _parent: Açılan bağlantı, açık sayfanın yerinde bağlantıyı açar. _self: Bağlantıyı aynı pencere içerisinde açar. _top: Bağlantıyı aynı pencere içerisinde sayfanın en üstünden itibaren açar. 1) Site Dışı Bağlantılar Adından da anlaşıldığı gibi tıklandığında başka bir siteye giden bağlantılardır. Bu tür bağlantılarda gidilecek sitenin tam URL si yazılmalıdır. Örnek: Bilişim bölümünün web sitesine gitmek için <a href= "http://www.webcantasi.net ">tıklayınız.</a> Linkin üzerinde gelindiği zaman tarayıcının alt kısmında hedefi görülmektedir. Bu sayede linke tıklamadan nereye gideceği, adresin yanlış olup olmadığı kontrol edilebilir. Örnek: Birkaç yarlı linkin bulunduğu bir liste yapalım. <html> <head> <title>bağlantılar</title> </head> <body> <h2>yararlı Linkler</h2> <ul type="square"> <li><a href="http://www.google.com.tr">google</a></li> <li><a href="http://www.gebzetml.k12.tr">okulumuz</a></li> <li><a href="http://www.webcantasi.net">bilişim Bölümü</a></li> <li><a href="http://www.meb.gov.tr">meb</a></li> </ul> </body> </html>
Örnek: <p><a href="http://www.ozgurlukicin.com/ia/linux-nedir/" target="_blank">linux</a>, açık kaynak kodlu olup hemen hemen tüm platformlarda sorunsuz çalışabilen bir işetim sistemdir. Türkiye'deki temsilcisi olan <a href="http://www.pardus.org.tr/">pardus</a> 2003 yılında ilk sürümünü çıkarmıştır. Üzerinde <a href="http://tr.libreoffice.org/">libre Office</a>, <a href="http://www.mozilla.org/tr/firefox/fx/">mozilla Firefox</a> gibi bir çok ücretsiz yazılımla gelen Pardus son olarak <a href="http://ftp.pardus.org.tr/pub/iso/kurulan/2011.2/" target="_blank">pardus 2011.2 Kızıl Geyik</a> sürümünü çıkarmıştır.</p> 2) Site İçi Bağlantılar Bu tür bağlantılarda kendi sitemiz içindeki farklı bir sayfaya link veririz. Gidilecek olan sayfanın adresi bulunduğumuz sayfaya göre yazıldığı için göreceli yol kullanılmış olur. Göreceli yollarda; Bulunduğumuz yere göre gitmek istediğim sayfa nerede kalıyor? sorusunu sormak gerekir. Eğer gitmek istediğimiz sayfa; Bulunduğumuz yerde ise: Bir üst dizinde ise: İki üst dizinde ise: Bir alt dizinde ise: İki alt dizinde ise: <a href= sayfa.html >Git</a> <a href=../sayfa.html >Git</a> <a href=../../sayfa.html >Git</a> <a href= dizin/sayfa.html >Git</a> <a href= dizin1/dizin2/sayfa.html >Git</a> Görüldüğü gibi bir üst dizine çıkmak için../ kullanılmıştır. Bir dizine girmek için dizin/ ifadesi kullanılmıştır. Buradan örnekle diyelim ki bir üst dizindeki dersler dizininde bulunan ders1.html sayfasına giden bir link vermek istersek: <a href=../dersler/ders1.html >Git</a> şeklinde bir adres yazmalıyız.
Örnek: Ana sayfamızda linklerine tıklandığında sitemiz içindeki ilgili sayfaya giden linkler kuralım. giris.html hakkimizda.html iletisim.html index.html site dersler/ download/ resimler/ uygulamalar/ degiskenler.html pdf/ calisma.jpg basit/ donguler.html ifelse.html bolum1.pdf bolum2.pdf internet.jpg logo.png degiskenornekleri.html ifelseornekleri.html temelbilgiler.html docx/ İleri/ hizlibakis.docx donguornekleri.html index.html sayfasından donguler.html sayfasına bağlantı <a href= dersler/donguler.html >Döngüler</a> ifelse.html sayfasından index.html sayfasına bağlantı <a href=../index.html >Ana Sayfa</a> degiskenler.html sayfasından degiskenornekleri.html sayfasına bağlantı <a href=../uygulamalar/basit/degiskenornekleri.html > Örnekler için tıklayınız </a> giris.html sayfasından calisma.jpg resmine bağlantı <a href= resimler/calisma.jpg >Büyük resim için tıklayınız</a> index.html sayfasından hizlibakis.docx dosyasına bağlantı <a href= download/docx/hizlibakis.docx >İndir</a> ifelseornekleri.html sayfasından bolum1.pdf dosyasına bağlantı <a href=../../download/pdf/bolum1.pdf >Bölüm 1 indir</a> iletisim.html sayfasından index.html dosyasına bağlantı <a href= index.html >Ana Sayfa</a> temelbilgiler.html sayfasından donguler.html sayfasına bağlantı <a href= donguler.html >Döngüler</a> hakkimizda.html sayfasından iletisim.html sayfasına bağlantı <a href= iletisim.html >Bize ulaşın</a> donguornekleri.html sayfasından index.html sayfasına bağlantı <a href= dersler/donguler.html >Ana Sayfa</a> degiskenornekleri.html sayfasından degiskenler.html sayfasına bağlantı <a href=../../dersler/degiskenler.html >Değişkenler</a> 3) Sayfa İçi Bağlantılar İçeriği çok uzun olan sayfalarda kullanılan bağlantılardır. Genellikle sayfa içindeki başlıklar en üstte bir liste şeklinde verilir. İlgili başlığa tıklandığında aynı sayfa içinde o başlığın açıklandığı kısma gidilir. Bunun için gidilecek yere bir işaret konulur. Bu işareti koymak için <a name="işaret adı"> </a> etiketi kullanılır. Örneğin; Başlık 1 e tıklandığında Açıklama 1 e gidilecekse öncelikle Açıklama 1 yazısına bir işaret koymak gerekir sonra Başlık 1 yazısına bu işarete gidecek şekilde bağlantı verilir. İşarete giden bağlantıda adresin önüne # işareti konulur. <a href="#isaret1">başlık 1</a> <p>bla bla bla.... </p> <a name="isaret1">açıklama 1</a>
Örnek: Aşağıdaki listede başlıklara tıklandığında başlıkların açıklandığı kısma gidilsin. <ul> </ul> <li><a href="#ubuntu">ubuntu</a></li> <li><a href="#fedora">fedora</a></li> <li><a href="#debian">debian</a></li> <li><a href="#mint">linux MINT</a></li> <li><a href="#opensuse">opensuse</a></li> <li><a href="#pardus">pardus</a></li> <h1><a name="ubuntu">ubuntu</a></h1>.. <h1><a name="fedora"> FEDORA </a></h1>. <h1><a name="debian"> DEBIAN </a></h1>. <h1><a name="mint"> LINUX MINT </a></h1>. <h1><a name="opensuse"> OPENSUSE </a></h1>.. <h1><a name="pardus">pardus</a></h1>.. Yukarıdaki örnekte sayfa içindeki tüm başlıklara öncelikle <a name= " "> </a> ile işaret ekledik. Sonra sayfanın en üstündeki listede bu işaretlere gidecek olan linkleri oluşturduk. Linklerde href ile belirtilen adresin önüne # işareti koyduk. 4) E-Posta Adresine Bağlantı Sayfa içerisinde tıklandığında e-posta adresine mail göndermek için kullanılan bağlantılardır. Bu bağlantılara tıklandığında sistemdeki e-posta programı (Outlook, Thunderbird, Kmail, ) mail göndermek için açılır. Href ile mail adresi belirtilirken önüne mailto: ifadesi eklenir. Örnek: iletisim@webcantasi.net adresine mail gönderen linki oluşturalım. Soru, öneri, şikayet ve diğer düşüncelerinizi bize iletmek için <a href="mailto:iletisim@webcantasi.net">tıklayınız.</a>
Resim Ekleme Web sayfasına resim eklemek için <img> etiketi kullanılır. Bu etiketin kapanışı yoktur. Parametreleri şunlardır. Parametre Değer Açıklama src Yol+Resim adı Gösterilecek olan resmin yolunu ve adını belirtmek için kullanılır alt Metin Resmin yerinde görüntülenecek olan alternatif metindir. title Başlık Resmin üzerine fare ile gelindiği zaman görünecek olan başlıktır. align center, left, right Resmin sayfa içindeki konumunu yani hizalamasını belirtir. border Piksel Resmin kenarlık genişliğini piksel olarak belirtir. width Piksel, % Resmin genişliğini belirtir. 100 veya 25% height Piksel, % Resmin yüksekliğini belirtir. 100 veya 25% hspace Piksel Resmin yatay olarak sağındaki ve solundaki boşluğu belirtir vspace Piksel Resmin dikey olarak üstündeki ve altındaki boşluğu belirtir Örnek: resimler/ dizinindeki pardus.png ve tux.png resimlerini sayfamıza ekleyelim. <body bgcolor="#bcedf4"> <h1><img src="resimler/pardus.png">, milli takımımıza başarılar diler!</h1> <img src="resimler/tux.png"> </body> Örnek: resimler/ dizinindeki kunefe.jpg ve kadayif.jpg resimlerini sayfamıza ekleyelim. <h2>künefe</h2> <p align="justify"> <img src="resimler/kunefe.jpg" border="2" width="180" height="150" alt="künefe" align="right" hspace="5">künefe, kadayıf ve peynirden yapılan ve sıcak olarak servis edilen, </p> <hr> <h2>burma Kadayıf</h2> <p align="justify"> <img src="resimler/kadayif.jpg" border="2" width="150" height="130" alt="künefe" align="left" hspace="5">çiğ burma kadayıf uzun bir tezgâhın üzerine serilir </p>
Örnek: resimler/ dizinindeki calisma.jpg resmini ekleyelim. <h2>web Tarayıcıları</h2> <p><img src="resimler/calisma.jpg" title="html'nin çalışması" align="left" width="350" height="300">web, istemcisunucu (client-server) sistemine dayalı olarak çalışır. Sizin WEB tarayıcı yazılımınız istemci, uzaktaki sizin erişmek istediğiniz bilgileri saklayan bilgisayar ise sunucudur. </p> <p>örneğin; firefox ile meb sitesini ziyaret etmek istediğinizde adres çubuğuna www.meb.gov.tr yazarak bir istekte bulunuyorsunuz. Bu isteğe karşılık meb sunucuları size yanıt veriyor. Burada firefox istemci (client), yanıt veren meb bilgisayarları ise sunucu (server) olmaktadır. </p> <h3>web Tarayıcılarının Çalışması</h3> <p>sunucu, istekte bulunan istemci bilgisayara yanıt olarak web sayfasının HTML kodlarını gönderir.</p> <p>bu kodları alan tarayıcı programımız bunları yorumlayarak web sayfamızı ekranda düzgünce anlaşılır bir şekilde görüntüler. </p> <p>html kodları; sayfadaki resim, tablo, yazı ve diğer nesnelerin nerede nasıl görüntüleneceği bilgisini içermektedir. </p> <p>dolayısıyla HTML kodları istemci tarafında browser tarafından çalıştırılır.</p> Resimlere bağlantı eklemek için sadece resmi <a>..</a> etiketleri arasına almak yeterlidir. Örneğin pardus.png resmine tıklandığında Pardus un resmi sitesine giden bir link oluşturalım. <a href="http://www.pardus.org.tr"><img src="resimler/pardus.png" title="özgürlük için Pardus" border="0"></a> Resimlere link verdiğiniz zaman mavi link kenarlığının görünmemesi için border="0" diyebilirsiniz.
Uygulama Faaliyeti: resimler/kucuk/ dizinindeki tüm küçük resimleri web sayfasında yan yana görüntüleyiniz. Sonra bu resimlere tıklandığında resimler/buyuk dizindeki aynı isimde olan büyük resimlere giden linkler ekleyiniz. Küçük resme tıklandığı zaman büyük resme gidiliyor.
HTML Etiketleri - 3 Tablolar Web sayfalarında tablolar; metinleri, resimleri ya da diğer nesneleri istediğimiz yerde göstermek amacıyla yani istenilen düzeni oluşturmak amacıyla kullanılabilir. Bu bakımdan tablolar, ister görünsün ister görünmesin web sayfamızın ayrılmaz önemli parçalarındandır. Bir HTML tablosu <table>.</table>, satırları <tr>, sütunları <td>.</td> etiketi ile oluşturulur. Tüm bunlar iç içe şu şekilde kullanılır. <table width="200" border="1" > <tr> <td>1.satırın 1.Sütunu</td> <td>1.satırın 2.Sütunu</td> <tr> <td>2.satırın 1.Sütunu</td> <td>2.satırın 2.Sütunu</td>... </table> 1.Satırın 1.Sütunu 2.Satırın 1.Sütunu 1.Satırın 2.Sütunu 2.Satırın 2.Sütunu Görüldüğü gibi <table> etiketinin içinde her satır için <tr>, <tr> etiketlerinin içinde de her sütun için <td> etiketi açıyoruz. Bilindiği gibi yatay olanlar satır, dikey olanlar sütun, bunların kesiştiği yerde ise hücre oluşur. Şimdi bu etiketlerin parametrelerine bakalım. Parametre border cellpadding cellspacing align width ve height bgcolor background Parametre bgcolor height align valign Parametre bgcolor background width ve height align valign <table> Açıklama Tablonun kenarlık kalınlığını belirtir. border="0" kenarlığın gizlenmesini sağlar. Hücre içindeki yazı, resim ya da nesnenin kenarlık ile arasındaki boşluktur. Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığıdır. Tabloyu yatay olarak sola, ortaya yada sağa hizalamada kullanılır. align="left", align="center", align="right" Tablonun genişlik ve yüksekliğini belirtir. Piksel yada % olarak bir değer verilir. Tablodaki hücrelerin arka planını renklendirmede kullanılır. Tablodaki hücrelere arka plan resmi vermek için kullanılır. <tr> Açıklama Satırdaki hücreleri renklendirmede kullanılır. Satırdaki hücrenin yüksekliğini belirtir. Satırdaki hücreler içinde yatay hizalama yapar. left, center, right Satırdaki hücreler içinde düşey hizalama yapar. top(üst), middle(orta), bottom(alt) <td> Açıklama Hücreyi renklendirmede kullanılır. Hücreye arka plan rengi vermek için kullanılır. Hücrenin genişlik ve yüksekliğini belirtir. En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde en büyük height değeri tüm satır için geçerli olacaktır. Hücre içinde yatay hizalama yapar. left, center, right Hücre içinde düşey hizalama yapar. top(üst), middle(orta), bottom(alt)
Görüldüğü gibi etiketlerin ortak parametreleri var. Diyebilirsiniz ki; Bunlar aynı anda kullanıldığı zaman karışmıyor mu?. Bir tabloyu 3 katmanlı bir yapı olarak düşünce <table> birinci katman, <tr> ikinci katman ve <td> ise üçüncü katman oluyor. Her etiketin parametreleri kendi katmanında geçerli oluyor. Örneğin tablonun arka plan rengini yeşil, 2.satırın arka plan rengini sarı yaptığınız zaman; birinci katmandaki yeşilin üzerine ikinci katmandaki sarı geleceğinden ekranda 2. satırı sarı olarak görürsünüz. Aşağıda kullanılan parametleri ve sonuçlarını dikkatle inceleyiniz. <table width="200" border="3" cellpadding="5" cellspacing="10" bgcolor="#00cc00" align="center"> <tr> <td>hücre 1-1</td> <td>hücre 1-2</td> <tr bgcolor="#ffff00" height="50" align="center" valign="middle"> <td>hücre 2-1</td> <td>hücre 2-2</td> <tr bgcolor="#ffff00" height="50" align="center" valign="middle"> <td bgcolor="#66ccff" height="30" align="right" valign="bottom">hücre 3-1</td> <td bgcolor="#ff3300" height="100" align="left" valign="top">hücre 3-2</td> </table> Tablonun arka plan rengi #00CC00 Yeşil, Ortada, kenarlık kalınlığı 2, Hücrelerin birbirinden uzaklığı 10, Hücre içindeki yazıların kenarlıktan uzaklığı 5 1.satır ve içindeki hiçbir hücrede parametre kullanılmadı. Dolayısıyla arka plan rengi tablonun arka plan rengi olan yeşil oldu. 2.satırın arka plan rengi #FFFF00 Sarı. İçindeki hiçbir hücrede parametre kullanılmadı. Dolayısıyla içindeki hücreler de sarı oldu. Dikkat ederseniz satırın rengi tablonun rengini bastırdı. Metinler ortaya hizalandı. 3.satırın tüm özellikleri bir önceki 2.satırla aynı olduğu halde içindeki hücrelerde parametre kullanıldığı için en içteki özellikler ait olduğu satırın özelliklerini bastırıyor. Renkler, metin hizalamaları ve hücre yüksekliği bir önceki satırdan farklı. Özetle bir parametre kullanılıyorsa en baskın olan <td> nin parametreleridir. Sonra sırasıyla <tr> ve <table> etiketlerinin parametreleri gelir.
Aşağıdaki tabloları dikkatlice inceleyiniz. hücre <table border="1"> <tr> <td>hücre</td> </table> hücre1 hücre2 <table border="1"> <tr> <td>hücre1</td> <tr> <td>hücre2</td> </table> hücre1 hücre2 <table border="1"> <tr> <td>hücre1</td> <td>hücre2</td> </table> hücre1 hücre2 hücre3 hücre4 <table border="1"> <tr> <td>hücre1</td> <td>hücre2</td> <tr> <td>hücre3</td> <td>hücre4</td> </table> Örnek: Aşağıdaki tabloyu yapalım. Sonbahar Kış İlkbahar Yaz Eylül Aralık Mart Haziran Ekim Ocak Nisan Temmuz Kasım Şubat Mayıs Ağustos <table width="343" border="1" cellpadding="0"> <tr align="center" bgcolor="#ff9900"> <td><strong>sonbahar</strong></td> <td><strong>kış</strong></td> <td><strong>ilkbahar</strong></td> <td><strong>yaz</strong></td> <tr> <td bgcolor="#cccc33">eylül</td> <td bgcolor="#66ccff">aralık</td> <td bgcolor="#00ff00">mart</td> <td bgcolor="#ffff66">haziran</td> <tr> <td bgcolor="#cccc33">ekim</td> <td bgcolor="#66ccff">ocak</td> <td bgcolor="#00ff00">nisan</td> <td bgcolor="#ffff66">temmuz</td> <tr> <td bgcolor="#cccc33">kasım</td> <td bgcolor="#66ccff">şubat</td> <td bgcolor="#00ff00">mayıs</td> <td bgcolor="#ffff66">ağustos</td> </table>
Örnek: Aşağıdaki tabloyu oluşturalım. Tablomuzda 3 satır, 2 sütun vardır. Örnek: Aşağıdaki tabloyu oluşturalım. Tablomuzda 4 satır, 3 sütun vardır. Örnek: Aşağıdaki tabloyu oluşturalım. Hücrelerdeki hizalamaya ve arka plan rengine dikkat ediniz.
Örnek: Aşağıdaki tabloyu oluşturalım. Hücrelerdeki arka plan resimlerine dikkat ediniz. Örnek: Aşağıdaki tabloyu oluşturalım. Hücrenin içine resim eklendi.
Hücreleri Birleştirme Aynı satırdaki hücreleri birleştirmek için colspan parametresi <td> etiketinde kullanılır. <table width="200" border="1"> <tr> <td colspan="2">hücre</td> <td></td> <td></td> <tr> <td></td> <td></td> <td></td> <td></td> </table> Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi yine <td> etiketinde kullanılır. <table width="200" border="1"> <tr> <td rowspan="2">hücre</td> <td></td> <tr> <td></td> <tr> <td></td> <td></td> </table> Birleştirilip tek bir hücre elde edildiğinden o bölgede sadece bir tane <td> </td> etiketi kullanılır. Diğer birleştirilen hücrelerin <td>.</td> etiketleri silinir. Örnek: Aşağıdaki tabloyu oluşturalım
Örnek: Aşağıdaki tabloyu oluşturalım Örnekler: Aşağıdaki tabloları oluşturunuz.
Formlar (Kaynak: http://www.phpdefteri.com/icerik/37/formlar.html ) Formlar, kullanıcıdan bilgi almak yani etkileşim kurmak için kullanılan sayfa elemanlarıdır. Form elemanları olarak metin kutuları, onay kutuları, açılır listeler, metin alanları ve düğmeler sayılabilir. Form Elemanları 1. Metin Kutusu (textbox) 2. Şifre Kutusu (password) 3. Onay Kutusu (checkbox) 4. Radyo Düğmesi (radio) 5. Metin Alanı (textarea) 6. Açılır Liste (select) 7. Dosya Seçim Elemanı (file) 8. Gizli Elemanlar (hidden) 9. Sıfırlama Düğmesi (reset) 10. Gönder Düğmesi (submit) 11. Gruplandırma Elemanı (fieldset) 12. Genel Amaçlı Düğme (button) <form>... </form> Form elamanlarını gruplandırmak için kullanılan html etiketidir. Web sayfasına yazılan tüm form elemanları <form>... </form> etiketleri arasına yazılır. Kullanımı aşağıdaki gibidir. Parametre name method action enctype Açıklama Form etiketine isim vermek için kullanılır. Sayfada birden fazla <form>...</form> etiketi olabilir. Bunları isimlendirmek için kullanılır. Form elamanlarına girilen bilgilerin gönder denildiğinde nasıl gönderileceğini belirtmek için kullanılır. GET veya POST değerlerinden birini alabilir. Form elamanlarına girilen bilgilerin hangi sayfaya gönderileceğini belirtmek için kullanılır. Gönderilen bilgiler action kısmında belirtilen sayfaya gönderilir ve orada işlenir. Dosya yükleme yapılacağı zaman dosyayı gönderme biçimini tanımlamak için kullanılır. Genelde multipart/form-data değerini alır. Kullanımı aşağıdaki gibidir. <html> <body> <form name="form_adi" method="get post" action="hedef"> Buraya form elamanları gelecektir. (metin kutuları, açılır listeler, butonlar,...) </form> </body> </html> Örnek: kaydet.php sayfasına post metodu ile bilgi gönderen kayit isimli form yapısını hazırlayalım. <html> <body> <form name="kayit" method="post" action="kaydet.php"> Buraya form elamanları gelecektir. </form> </body> </html>
1. Metin Kutusu (<input type="text">) Tek satırlık metin girişi için kullanılır. Kullanımı şu şekildedir. <input type="text" name="form_adi"> Parametre name value size maxlength readonly disabled Açıklama Metin kutusuna isim vermek için kullanılır. Gönder denildiğinde bu forma girilen bilgi bu isim ile gönderildiğinden mutlaka kullanılmalıdır. Sayfa ilk yüklendiğinde varsayılan değerini tanımlamak için kullanılır. Metin kutusunun genişliğini belirtmek için kullanılır. Metin kutusuna girilebilecek en fazla karakter sayısını belirtmek için kullanılır. Metin kutusunun sadece okunabilir olduğunu, giriş amaçlı kullanılmayacağını belirtir. Metin kutusunun kullanılamayacağını belirtir. Örnekler: Parametrelerin kullanımına örnekler verelim. <form name="ornekformlar" method="post" action="kaydet.php"> <input type="text" name="adi" value="buraya adınızı giriniz"> <input type="text" name="adi" size="20"> <input type="text" name="adi" maxlength="10"> <input type="text" name="adi" readonly> <input type="text" name="adi" disabled> </form> 2. Şifre Kutusu (<input type="password">) Şifre girişlerinde kullanılır. Kullanımı şöyledir. <input type="password" name="form_adi"> Özellikleri, yukarıda belirtilen metin kutusu ile aynıdır. (name, value, size, maxlength, readonly, disabled) Örnekler: Kullanıcı giriş formu hazırlayalım. <form name="girisformu" method="post" action="giris.php"> Kullanıcı Adı: <input type="text" name="kullanici" maxlength="10"> Şifre: <input type="password " name="sifre" size="20"> </form> 3. Onay Kutusu (<input type="checkbox">) Tıklandığında bir tik işaretiyle işaretlediğimiz form elamanlarıdır. Önceden belirlenmiş değerlerden istenilenleri seçmek için kullanılır. Parametre Açıklama name Forma verilen addır. Mutlaka kullanılmalıdır. value Onay kutusu seçili iken gönder denildiğinde gidecek olan değeri belirtmek için kullanılır. checked Onay kutusunun varsayılan olarak seçili olacağını belirtir. Kullanımı şöyledir. <input type="checkbox" name="form_adi" value="değer"> Örnek: Kullnıcıdan hobilerini alan form yapısını oluşturalım. <form name="hobiler" method="post" action="kaydet.php"> <input type="checkbox" name="spor" value="spor" checked>spor <input type="checkbox" name="sinema" value="sinema">sinema <input type="checkbox" name="gezi" value="gezi">gezi <form>
4. Radyo Düğmesi (<input type="radio">) Önceden belirlenmiş seçeneklerden sadece birini seçmek için kullanılır. Burada her radyo düğmesinin name değerinin aynı olmasına dikkat ediniz. name değerleri aynı olan radyo düğmelerden sadece biri seçilebilir. Farklı name değerlerine sahip radyo düğmeler farklı grupları oluşturur. Her gruptan sadece bir tanesi seçilebilir. Kullanımı şöyledir. <input type="radio" name="form_adi" value="değer1"> <input type="radio" name="form_adi" value="değer2"> <input type="radio" name="form_adi" value="değer3">... Özellikleri, yukarıda anlatılan onay kutusu ile aynıdır. Örnek: Kullanıcıdan evet yada hayır cevabını alan form yapısını oluşturalım. <form name="onayformu" method="post" action="kaydet.php"> <input type="radio" name="onay" value="evet" checked>evet <input type="radio" name="onay" value="hayir">hayir <form> 5. Metin Alanı (<textarea> </textarea>) Çok satırlı uzun metin girişlerinde kullanılır. Parametre Açıklama name Forma verilen addır. Mutlaka kullanılmalıdır. rows Metin alanının kaç satır yüksekliğinde olacağını ayarlamak için kullanılır. cols Metin alanının kaç sütun (karakter) genişliğinde olacağını belirtmek için kullanılır. Kullanımı şöyledir. <textarea name="formadi">varsayılan değer</textarea> Örnek: Kullanıcıdan yorum almak kullanılacak olan form yapısını oluşturalım. <form name="yorumformu" method="post" action="kaydet.php"> <textarea name="formadi" rows="5" cols="30"> Varsayılan değer </textarea> </form> 6. Açılır Liste (<select> </select>) Önceden belirlenmiş değerlerden birini seçmek için kullanılan açılır menülerdir. Her seçenek <option>...</option> etiketleri ile belirtilir. Parametre Açıklama name Forma verilen addır. Mutlaka kullanılmalıdır. value Gönder denildiğinde gidecek olan değeri tanımlamak için kullanılır. Her seçenek için yazılır. size Açılır liste tarzından düz liste tarzına geçip listenin satır yüksekliğini belirtmek için kullanılır. selected Belirtilen seçeneğin varsayılan olarak seçili olacağını belirtir. Kullanımı şöyledir. <form name="yorumformu" method="post" action="kaydet.php"> <select name="form_adi"> <option value="değer1">seçenek 1</option> <option value="değer2">seçenek 2</option>... </select> </form> Örnek: Evet ve Hayır seçenekleri bulunan bir açılır liste yapalım. <form name="onayformu" method="post" action="kaydet.php"> <select name="onay"> <option value="evet">evet</option> <option value="hayir">hayir</option> </select> </form>
Listedeki seçenekleri gruplandırmak için <optgroup>...</optgroup> etiketleri kullanılır. Burada bu etiketleri iç içe yazmamaya dikkat ediniz. Şu şekilde kullanılır. <select name="form_adi"> <optgroup label="grup 1"> <option value="değer1">seçenek 1</option> <option value="değer2">seçenek 2</option> <option value="değer3">seçenek 3</option> </optgroup> <optgroup label="grup 2"> <option value="değer4">seçenek 4</option> <option value="değer5">seçenek 5</option> <option value="değer6">seçenek 6</option> </optgroup> </select> 7. Dosya Seçim Elemanı (file) (<input type="file">) Dosya yüklemede, yüklenecek dosyayı seçmek için kullanılır. Parametre Açıklama name Formun adını belirtmek için kullanılır. Seçilen dosya bu ad ile sunucuya geçici olarak yüklenmektedir. Mutlaka kullanılmalıdır. Kullanımı şöyledir. <input type="file" name="form_adi"> Bu form elemanı kullanıldığında <form>...</form> etiketi için enctype özelliğini kullanmayı unutmayınız. Örnek: <html> <body> <form name="dosya_yukle" method="post" action="yukle.php" enctype="multipart/form-data"> Dosya Seçiniz: <input type="file" name="dosya"> <br> <input type="submit" name="gonder" value="gönder"> </form> </body> </html> 8. Gizli Elemanlar (<input type="hidden">) Sayfadan, görünmeyen gizli değerler göndermek için kullanılır. Örneğin; işlemi gerçekleştirmek için gerekli olan bir bilgiyi kullanıcıya göstermeden göndermek için kullanabilirsiniz. Parametre Açıklama name Gizli formun adını belirtmek için kullanılır. value Gizli formun göndereceği değeri tanımlamak için kullanılır. Kullanımı şöyledir. <input type="hidden" name="form_adi" value="değer"> Temizle 9. Sıfırlama Düğmesi (<input type="reset">) Formlara girilen değerleri sıfırlar. Form elemanlarının değerleri başlangıç değerlerine geri döner. Parametre Açıklama name Düğmenin adını belirtmek için kullanılır. value Düğmenin üzerinde görünen değeri belirtmek için kullanılır. Kullanımı şöyledir. <input type="reset" name="form_adi" value="temizle">
Gönder 10. Gönder Düğmesi (<input type="submit">) Formlara girilen bilgileri <form>...</form> etiketinin action kısmında belirtilen sayfaya göndermek için kullanılır. Parametre Açıklama name Düğmenin adını belirtmek için kullanılır. Belirtilmek zorunda değildir. value Düğmenin üzerinde görünen değeri belirtmek için kullanılır. Şu şekilde kullanılır. <input type="submit" name="form_adi" value="gönder"> 11. Gruplandırma Elemanı (<fieldset> </fieldset>) Form elamanlarını gruplandırmak için kullanılır. Bu sayede form elamanlarının ne amaçla kullanıldığı daha iyi anlaşılmaktadır. Grubun başlığını belirtmek için <legend>...</legend> etiketi kullanılır. Kullanımını bir örnekle açıklayalım. <html> <body> <form name="uyelik" method="post" action="uye_kayit.php"> <fieldset> <legend>kişisel Bilgiler</legend> Adınız: <input type="text" name="adi"><br> Soyadınız: <input type="text" name="soyadi"><br> Cinsiyetiniz: Bay<input type="radio" name="cinsiyeti" value="bay" checked> Bayan<input type="radio" name="cinsiyeti" value="bayan"><br> </fieldset> <fieldset> <legend>üyelik Bilgileri</legend> Kullanıcı Adı: <input type="text" name="kullanici_adi"><br> Şifre: <input type="password" name="sifre"><br> </fieldset> <input type="submit" name="gonder" value="gönder"> <input type="reset" name="temizle" value="temizle"> </form> </body> </html>
12 Genel Amaçlı Düğme (<button>...</button>) Düğme oluşturmak için kullanılan, daha esnek ve kullanışlı olan bir yöntemdir. Açılış ve kapanış (<button>...</button>) etiketleri arasına açıklama, resim ve bunun gibi bir çok html elemanı ekleyerek düğme üzerinde gösterilebilir. Parametre Açıklama name Düğmeye ad vermek için kullanılır. type Düğmenin ne amaçla kullanılacağını belirtmek için kullanılır. button, reset, ve submit değerlerinden birini alabilir. value Düğmenin sayfada kullanacağı değeri belirtmek için kullanılır. Aşağıdaki gibi kullanılır. <button name="form_adi" type="button reset submit" value="değer"> Açıklama, resim ve bunun gibi html elemanları buraya eklenebilir. </button> Örnek: Üzerinde resim bulunan bir düğmenin kullanıldığı dosya yükleme formunu hazırlayalım. <html> <body> <form name="dosya_yukle" method="post" action="yukle.php" enctype="multipart/form-data"> Dosyanın Kalıcı Adı: <input type="text" name="dosya_adi"><br> Dosya Seçiniz: <input type="file" name="dosya"> <button name="yukle" type="submit"> <img src="http://www.phpdefteri.com/upload/png/yukle.png"><br>yükle </button> </form> </body> </html> FORM ÖRNEKLERİ (Kaynak: http://www.phpdefteri.com/icerik/38/form_ornekleri.html ) Örnek: Basit bir üyelik kaydı için kullanılabilecek bir form yapısı hazırlayalım.
Web sayfalarında formların daha düzgün görünmesi için genelde tablolar kullanılır. Benzer bir formu tablo kullanarak oluşturalım. Örnek: Kişisel bilgilerin kaydı için kullanılabilecek bir form yapısını tablo kullanarak hazırlayalım. Burada form elemanları tablo içerisindedir. Tablo kenarlığı ise gösterilmemektedir.
Örnek: Yorum ekleme formu hazırlayalım. Örnek: Formalara girilen bilgilerin ne amaçla gönderildiğini gizli form (hidden) ile belirtelim. Web sayfalarında bazen aynı formlar hem yeni kayıt hem de kayıt güncelleme amaçlı kullanılmaktadır. Hangi amaçla kullanıldığı gizli form ile belirtilebilir. Aşağıdaki formda gönder denildiğinde bilgilerin gönderildiği gizli formun değeri yenikayit olduğu için yeni bir yazı kaydedileceği anlaşılır.
Örnek: Basit bir yemek sipariş formu hazırlayalım.
Örnek: Dosya yükleme formunu hazırlayalım. Ödev: Metin kutusu, liste ve butondan oluşan aşağıdaki form yapısını hazırlayınız.