HTML Kodlama Dersi

HTML Kodlama Dersi - IB u y a z ı d a ö ğ r e n e c e k l e r i n i z

HTML Giriş

Bu yazımda size HTML'i tanıtacağım ve birkaç basit örnek yapacağız. HTML derslerimiz bittiğinde ise bir web sayfası oluşturabilecek seviyeye geleceğiz.

HTML, tam adıyla söylersek Hyper Text Markup Language, web sayfalarını oluştururken kullandığımız temel dildir. Türkçe karşılığı tam yoktur ancak çeşitli yerlerde birbirine yakın çeviriler bulunmaktadır. Biz de Metin İşaretleme Dili diyebiliriz. Şunu da belirtelim HTML bir programlama dili değildir.

HTML kodlarını yazmak için özel bir programa ihtiyaç yoktur. Çalışmalarımızda kodlarımızı not defterine yazacak sonra da herhangi bir tarayıcı ile (Google Chrome, Firefox, Opera...) anlamlı hâle getireceğiz.

HTML 1990 yılında geliştirilmiştir ve daha sonra çeşitli sürümleri çıkmıştır. Sonuncusu ise 2012 yılında çıkan HTML5'dir.

Artık yavaş yavaş HTML kodlarını tanımaya başlayalım.

HTML dili etiket adını verdiğimiz kodlardan oluşur. Etiketler “<” ve “> “ arasına yazılır. Örneğin <html> ,<body> ,<head>… Genellikle her etiketin bir de kapanışıvardır. Bunun için de etikete fazladan “/” ekleriz. Yani örnek verdiğimiz üç etiketi kapatırken < /html>, </body>, </head> şeklinde yazıyoruz. Kodumuzu yazıyoruz sonra istediğimiz herhangi bir içerik ekliyoruz (yazı, resim, vs...) sonra da kapatıyoruz. Daha detaylı bir örnek verelim: < b> etiketi yazının kalın görünmesini sağlar. <b>...</b> arasına yazıcağımız bütün yazı kalın görünür. (Örn.: <b>Bu yazı kalındır </b>)

Şimdi genel sayfa yapısını inceleyelim.

<html> <head> <title>Başlığım</title> </head> <body> <p> Merhaba Dünya </p> </body> </html>

Dikkat ettiyseniz açılan her kod kapatıldı. Bunun unutulması kodların çalışmasını olumsuz etkiler. Not defterini açın ve yukarıdaki kodları yazın. Sonra kaydedin ve kapatın. Yeni Metin Belgesi.txt olarak kaydedilecektir. Uzantısını değiştirin, txt yi silin ve html yapın. Artık açtığınızda not defteri ile değil de internet tarayıcınız ile açılacaktır ve ekranda şu görülür: "Merhaba Dünya"

Sekme başlığında ise “Başlığım” yazısını görürsünüz. Böylece ilk kodlarımızı yazmış ve çalıştırmış olduk. Şimdi ise kodların ne işe yaradıklarını açıklayalım:

Bütün HTML kodları <html>…</html> arasına yazılır. Onun dışına yazdıklarınızın bir etkisi yoktur. <html> kodlarının arasında da iki temel kod kullandık. <head> ve <body> sayfanın baş ve gövde kısımları. <head>…</head> arasındaki kodlar sayfa bilgisini tanımlamaya yöneliktir. Biz <title> etiketini kullanarak sayfaya bir başlık verdik. Bunun dışında <meta> etiketini; javascript, css gibi diğer web dillerini kullanabiliriz. Javascript ve css HTML e göre ileri düzeydir. HTML’i öğrenmeden onlara çalışmanız doğru olmaz . Yine de ne işe yaradıkları hakkında araştırma yapabilirsiniz. Neyse konumuza geri dönelim.

<meta> etiketine ileride detaylı değineceğiz. Şimdilik asılilgilendiğimiz <body> etiketi olacak. Bir web sayfasının içeriği <body>..</body> etiketleri arasındadır. Tüm yazıları, resimleri, tabloları oraya ekleriz. Kullanıcının sayfada gördükleri <body> kısmındakilerdir. Bu sefer HTML ile alt alta 3 cümle yazdıralım. <head> etiketinikullanmayabiliriz. Bu kodların çalışmasını olumsuz etkilemez.

<html> <body> Bugün hava yağmurlu ve soğuktu.<br/> Evden hiç dışarı çıkmadım.<br/> Bütün gün kitap okudum.<br/> </body> </html>

<br/> etiketi özel bir etikettir. Normalde yazılarımızı 2 etiket arasına yazıp öyle değer kazandırırız. Ancak <br/> etiketi tek kullanılır. Satır sonunu belirtir. Tarayıcı <br/> den sonraki herşeyi bir alt satıra atar. Mesela HTML ile bir şiir yazacaksak her mısra sonuna <br/> etiketi koymamız gerekir. Peki ya yazacağımız yazı paragraflar halinde uzun bir yazıysa? İşte o zaman paragraf özelliği kazandıran <p> etiketini kullanmamız gerekir. <p>..</p> arasına yazımızı yazarız. Bir örnekle gösterelim.

<html> <body> <p> Barış Manço Türkiye'de rock müziğin öncülerinden, Anadolu Rock türünün kurucuları arasında sayılır. Müziğe başlangıcı Galatasaray Lisesi'nde oldu. Yüksek öğrenimini Belçika Kraliyet Akademisi'nde tamamladı. Bestelediği 200’ün üzerindeki şarkısı, kendisine 12 altın ve bir platin albüm ve kaset ödülü kazandırdı </p> <p> Barış Manço, kimi şarkılarını günlük hayatından aldı. “Domates, Biber, Patlıcan”, buna bir örnektir. Hazırladığı televizyon programıyla dünyanın pek çok ülkesine gitmiş, bu nedenle "Barış Çelebi" olarak adlandırılmıştır. </p> </body></html>

Barış Manço hakkındaki yazımız 2 paragraf halinde tarayıcımızda görüntülenir. Hadi bir de başlık ekleyelim. Ama önce ben başlık etiketleri hakkında biraz bilgi vereyim sizlere... 6 farklı büyüklükte başlık yazmamızı sağlayan

etiketler vardır. Bunlar <h1>’den <h6> ya kadardır ve <h6>’ya gidildikçe yazı boyutu küçülür. Bir örnekle bunu görelim.

<html> <body> <h1>BAŞLIK - 1</h1> <h2>BAŞLIK - 2</h2> <h3>BAŞLIK - 3</h3> <h4>BAŞLIK - 4</h4> <h5>BAŞLIK - 5</h5> <h6>BAŞLIK - 6</h6> </body> </html>

Not defterine yazıyoruz. Kaydedip uzantısını .html yapıyoruz ve tarayıcımızla açıyoruz. BAŞLIK kelimeleri büyüktenküçüğe doğru sıralı olarak karşımızda!

Başlığımızın ortada olmasını isteyebiliriz. Bunun için de <center> etiketini kullanmamız gerekir. <center>…</center> etiketleri, arasındaki herşeyi ortalar. Hemen küçük bir örneklegösterelim onu da...

<html> <body> <center><h1>BAŞLIK</h1></center> </body> </html>

Eğer <h1><center>BAŞLIK</center></h1> şeklinde yazsaydık yine aynı sonucu verirdi. Ancak <h1><center>BAŞLIK</h1></center> şeklindeki yazım yanlıştır! Yani bir ifadede iki farklı kod kullanacaksak, önce hangisini açtıysak en son onu kapatmamız gerekir.

DOĞRU<a><b>bilgisayar</b></a><b><a>bilgisayar</a></b>

YANLIŞ<b><a>bilgisayar</b></a><a><b>bilgisayar</a></b>

İlk ders için bu kadarı yeterli olur. Umarım sade ve açıklayıcı bir anlatım olmuştur. Diğer derste görüşmek dileğiyle kendinize iyi bakın.

HTML Kodlama Dersi - II

B u y a z ı d a ö ğ r e n e c e k l e r i n i z :

HTML Yazı Tipleri

Geçen ders HTML’ e giriş yaptık, temel kodlarımızı öğrendik. Şimdi bunu bir adım ileriye taşıyacağız. Ancak öncelikle şunu belirtmek istiyorum. Geçen dersimizde HTML5 in son sürüm olduğunu söylemiştik. HTML5 ile beraber bazı yeni özellikler gelirken bazı kodlar da desteklenmemeye başlandı. Bunları HTML5 başlığı altında ayrıca öğreneceğiz. Şimdilik yakın zamana kadar kullanılan HTML kodları üzerinden derslerimize devam edelim.

Ekrana yazı yazdırmayı öğrenmiştik. En basit şekilde:

<html> <body> Merhaba Dünya </body></html>

Ekrana "Merhaba Dünya" yazdırabiliriz. Şimdi bunu farklı şekillerde yazalım. Not defterimizi açıp aşağıdakileri yazıyoruz.

<html> <body> <b>Merhaba Dünya</b><br/> <i>Merhaba Dünya</i><br/> <u>Merhaba Dünya</u><br/> <del>Merhaba Dünya</del><br/> <sub>Merhaba Dünya</sub> Merhaba Dünya <sup>Merhaba Dünya</sup><br/> <marquee>Merhaba Dünya</marquee><br/> </body></html>

Önce etiketleri açıklayalım:

<b>...</b> : Geçen ders verdiğimiz ilk örneğimizdi. Yazıların kalıngörünmesini sağlar. (Örn. Merhaba Dünya)

<i>...</i> : İtalik görüntü sağlar. (Örn. Merhaba Dünya)

<u>...</u> : Yazıyı altı çizili gösterir. (Örn. Merhaba Dünya)

<del>..</del> : Yazıyı üstü çizili gösterir. (Örn. Merhaba Dünya)

<sub>...</sub> :

Yazıyı satırın yarım karakter altında gösterir. Matematiksel vb. formülleri gösterirken kullanabilirsiniz. (Örn. Merhaba Dünya)

<sup>...<sup> :

Yazıyı satırın yarım karakter üstünde gösterir. Meselabir sayının üslü halini web sayfasında gösterirken kullanabilirsiniz. (Örn. Merhaba Dünya)

<marquee>...</marquee>

: Kayan yazı oluşturur.

Şimdi not defterini html uzantılı olarak kaydedin ve sonucugörün.

Sıra <font> etiketini tanımaya geldi. <font> etiketini kullanarak yazının tipini, rengini ve boyutunu değiştireceğiz.Örneklerle gösterelim.

<html> <body> Bu normal bir yazı<br/> <font face="Tahoma">Bu yazı Tahoma yazı tipinde</font><br/> <font size="15">Yazı boyutu 15 olarak ayarlandı</font><br/> <font color="red">Yazı rengi olarak kırmızı seçildi</font><br/> <font face="arial" size="20" color="blue">Yazı tipi Arial, boyutu 20 ve rengi mavi</font> </body></html>

Açıklayacak olursak: Font etiketiyle yazıya 3 farklı özellik kazandırabiliyoruz. Renk, yazı tipi, yazı boyutu. Önce

font yazıyoruz sonra da face, color veya size. face="..." arasına yazı tipi yazıyoruz. Arial, tahoma, verdana gibi. color="..." arasına renk değeri yazıyoruz. Red, yellow, blue, aqua gibi... size="..." kullanımında ise istediğimiz yazı boyutunu giriyoruz.

Resim Ekleme

İstediğimiz bir resmi,- ister bilgisayardan ister bir web sayfasından- kendi sayfamıza ekleyebiliriz. Bunun için <img src=”..”> etiketini kullanacağız. Önce örneğimizi görelim ardından ben açıklamayı yapayım.

<html> <body> <img src="C:\Users\mustafa\Desktop\Yeni klasör\kedi.jpg" > </body> </html>

Resim eklemek için <img src=”...”> etiketini kullandık. Tıpkı <br/> etiketi gibi bu da tek parçadır. Ben eklemek için bir kedi resmi belirledim. Resme sağ tıklayıp özelliklere geldim ve ordan resmin konumunu kopyaladım. Bu, C:\Users\mustafa\Desktop\Yeni klasör idi. Bunu <img src=”...”> deki noktalı kısma yapıştırdım. Resmin adı kedi.jpg ‘ydi. Yapıştırdığım kısmın yanına bir slash “\” işareti koyup kedi.jpg yazdım. <img src="C:\Users\mustafa\Desktop\Yeni klasör\kedi.jpg" > haline geldi ve artık kullanıma hazır.

Resmin konumunu ve adını uzantısıyla beraber (.jpg .png .gif vs) yazmak resmin sayfamızda görünmesi için yeterli. Bunun yanı sıra resmin boyutunu ayarlamak da bizim elimizde. Uzunluk ve genişliğini ayarlamak için width=”..” veheigth=”..” ifadelerini kullanacağız. Hemen örneğimizi yapalım.

<html> <body> <img src="C:\Users\mustafa\Desktop\Yeni klasör\kedi.jpg" height="10" width="10> </body> </html>

Gördüğünüz gibi, zor bir yanı yok.

Eğer resmin ve not defterinde oluşturduğumuz html sayfasının konumu aynıysa sadece resmin adını yazmamız yeterli olur. Mesela masaüstünde yeni klasör oluşturalım ve resmi orayakopyalayalım. Sonra aynı klasör içerisinde bir de not defteri oluşturup kodlarımızı yazalım.

<html> <body> <img src="kedi.jpg" height="100" width="100"> </body> </html>

Yine aynı şekilde resmimiz web sayfasında görüntülenecektir. Bu şekilde çalışmak bizi gereksiz kodlardan kurtarır, daha sade bir yapıya kavuşturur.

Herhangi bir internet sitesinde gördüğünüz resme sağ tıklayıp URL adresisini kopyalarsanız; resmi kendi web sayfanızda görüntüleyebilirsiniz.

<html> <body> <img src=”http://img44.imageshack.us/img44/1606/irinsevimlikediresimleri.jpg"> </body></html>

Arka planı değiştirme

Arka planı değiştirmeyle ilgili de iki örnek yapalım. Ama unutmayın ki sayfaya görsel açıdan zenginlik katacak olan CSS'tir. HTML bu konuda yetersiz kalıyor. Yine de bilmekte fayda var.

<html> <body bgcolor="black"> </body> </html>

Bu ilk örneğimiz. Arka plan rengini değiştirmek için normal<body> etiketinin yanına bgcolor=”..” ifadesini ekledik ve noktalı yere black yazdık. Açtığınızda karşınızda siyah, boş

bir web sayfası olacak. Black yerine diğer renk adlarını veya renk değerini yazabilirdik. #000000 ifadesi de siyahı belirtir.Kırmızın değeri # FF0000 , mavinin değeri #0000FF ‘dir. Bunların ezberlenmesine gerek yoktur. Küçük bir Google araştırmasıyla bütün renklerin ve tonlarının değerini bulabilirsiniz.

Şimdi ise arka plana bir resim yerleştirelim.

<html> <body background="kedi.jpg"> </body> </html>

Kedi resmimiz arka plana yerleşmiş oldu. Resim arka planı tamamen kaplamaz. Orijinal boyutuna göre tekrar eder. Bununla ilgili detaylı bilgileri CSS’ te öğreneceğiz.

Link Oluşturma

Bu dersimizde son olarak link oluşturmaktan bahsedelim. Bunun için kullanacağımız etiket şudur: <a href=”url”>.. </a>

Araya bir yazı yazabileceğimiz gibi bir resim de ekleyebiliriz. Örneğimizi yapalım.

<html> <body> <a href="http://www.cagataycebi.com">Siteye giriş için tıklayın</a> <a href="http://www.cagataycebi.com"><img src="kedi.jpg">Siteye giriş için tıklayın</a> </body> </html>

Link eklemek karışık bir durum değil. Sayfayı tarayıcada görüntülediğinizde daha iyi anlayacaksınız. Dikkat etmeniz gereken nokta internet adresini http:// ile başlayarak yazdım. Ancak aynı web adresindeki alt bağlantılara link verirken kullanmamız gerekmez.

Bağlantının yeni bir sayfada açılmasını da sağlayabiliriz. Bunun için target="_blank" ifadesini ekleriz.

<html> <body> <a href="http://www.cagataycebi.com" target="_blank">Siteye giriş için tıklayın</a> </body> </html>

Arkadaşlar bu ders için de bu kadarı yeterli diye düşünüyorum. Diğer derste liste ve tablo oluşturmayı öğreniriz.Kendinize iyi bakın.

HTML Kodlama Dersi - III


HTML'de Liste Oluşturma

Merhaba arkadaşlar,

Sıra geldi liste ve tablo oluşturmaya... İlk olarak listelerden bahsedelim. HTML'de sıralı liste, sırasız liste ve tanım listesi olmak üzere üç tip liste oluşturma şekli vardır. Her birinin kullanımını ayrı ayrı inceleyeceğiz.

Sıralı Liste

<html> <body> <ol> <li>Çay</li> <li>Kahve</li> <li>Süt</li> <li>Su</li> </ol> <body></html>

Sırasız Liste

<html> <body> <ul> <li>Çay</li> <li>Kahve</li> <li>Süt</li> <li>Su</li> </ul> </body></html>

Sıralı Listede <ol> etiketi ile listeyi belirtiyoruz. Her bir maddeyi <li>...</li> etiketleri arasına yazıyoruz. Tarayıcıda aşağıdaki gibi gözüküyor:

1. Çay2. Kahve3. Süt4. Su

Sırasız listenin farkı ise <ol> yerine <ul> etiketini kullanmamız. Tarayıcıda karşımıza çıkan sonuç şöyle oluyor:

Çay Kahve Süt Su

Sıralı listede maddeleri 1 2 3 diye sıralayabileceğimiz gibi; a b c; A B C; I II III; i ii iii gibi İster harflerle ister roma rakamlarıyla da sıralayabiliriz. Örneklerle görelim.

<html> <body> <h3>Numaralı Liste</h3> <ol> <li>Çay</li> <li>Kahve</li> <li>Süt</li> <li>Su</li> </ol>

<h3>Büyük Harfli Liste</h3>

<ol type="A"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> <li>Su</li> </ol>

<h3>Küçük Harfli liste</h3> <ol type="a"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> <li>Su</li> </ol> <h3>Roma Rakamlı Liste</h3> <ol type="I"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> <li>Su</li> </ol> <h3>Küçük Roma Rakamlı Liste</h3> <ol type="i"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> <li>Su</li> </ol> </body></html>

Sonuçlar şu şekilde olacaktır:

Numaralı Liste

1. Çay2. Kahve3. Süt4. Su

Büyük Harfli Liste

A. Çay

B. KahveC. SütD. Su

Küçük Harfli liste

a. Çayb. Kahvec. Sütd. Su

Roma Rakamlı Liste

I. ÇayII. KahveIII. SütIV. Su

Küçük Roma Rakamlı Liste

i. Çayii. Kahveiii. Sütiv. Su

Sıralı liste oluştururken kullanabileceğimiz seçenekler bunlar... Sırasız listeleri görelim.

<html> <body> <h3>Disk Liste</h3> <ul type="Disk"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> <li>Su</li> </ul>

<h3>Daire Liste</h3> <ul type="circle"> <li>Çay</li> <li>Kahve</li> <li>Süt</li>

<li>Su</li> </ul>

<h3>Kare Liste</h3> <ul type="square"> <li>Çay</li> <li>Kahve</li> <li>Süt</li> <li>Su</li> </ul>

<body></html>

Sonuçlar şu şekilde olacaktır.

Disk Liste

Çay Kahve Süt Su

Daire Liste

o Çayo Kahveo Süto Su

Kare Liste

Çay Kahve Süt Su

Sıralı ve sırasız listeler hakkında söyleyebileceklerimiz bu kadar. Sırada tanım listeleri var. Tanım listelerinde kullanacağımız etiketler farklıdır. <dd> <dl> <dt> etiketlerinikullanırız. Bir örnekle başlayıp, devamında açıklamasını yapalım.

<html>

<body>

<dl> <dt>Sıcak İçecekler</dt> <dd>Çay</dd> <dd>Kahve</dd> <dt>Soğuk İçecekler</dt> <dd>Su</dd> <dd>Süt</dd> </dl> <body></html>

Alacağımız sonuç aşağıdaki gibi olacaktır:

Sıcak İçeceklerÇayKahveSoğuk İçeceklerSuSüt

<dl> listeyi belirtir. Yani <ol> veya <ul> ile aynı işi yapar diyebiliriz. < dt> ise başlık belirtme görevindedir. Sıcak içecekler, Soğuk içecekler, Şekerli içecekler, Yemekler... şeklinde başlıklar oluşturabiliriz. <dl> ise <li> ile eşdeğerdir yani maddeleri <dl>..</dl> arasına yazarız.

Öğrendiklerimizle biraz pratik yapalım ve iç içe bir liste oluşturalım. Kodları incelemeniz yeterli olacağından, tekrar açıklama yapmıyorum.

<html> <body> <h3>Ülkere Göre En İyi 3 Futbol Takımı</h3> <ul> <li>Türkiye</li> <ol type="a"> <li>Beşiktaş</li> <li>Galatasaray</li> <li>Fenerbahçe</li> </ol>

<li>İngiltere</li> <ol type="a"> <li>Chelsea</li> <li>Liverpool</li> <li>Man. United</li> </ol> <li>İspanya</li> <ol type="a"> <li>Real Madrid</li> <li>Barcelona</li> <li>Atletico Madrid</li> </ol> </ul>

<body></html>

Evet yanlış anlamadınız Beşiktaşlıyım ve Messi değil Ronaldo diyorum :))

Sonraki dersimize tablo oluşturmayı bırakıp, yazımızı burada noktalayalım.

HTML Kodlama Dersi - IV


HTML Tablo Oluşturma

Tablo oluştururken kullanacağımız temel etiketler <table> <tr> ve <td> dir. <table> tabloyu belirtir. < tr> satırları, <td> ise sütunları belirtir. Önce basit bir örnek yapalım.

<html> <body> <table>

<tr> <td>Satır1, Sütun1</td> <td>Satır1, Sütun2</td> </tr> <tr> <td>Satır2, Sütun1</td> <td>Satır2, Sütun2</td> </tr> </table> </body></html>

Bu şekilde 2x2'lik bir tablo oluşturabiliriz. Ancak tablonun kenarları görünmeyebilir. Kenarlık kalınlığını ayarlamak için border ifadesini kullanırız. Kullanımı <table border="1"> şeklindedir. < th> etiketinden de bahsedelim. < th>tablo başlığıdır diyebiliriz. İfadeyi kalın ve bölmenin ortasında gösterir. Bir örnek daha yapalım.

<html> <body> <table border="2"> <tr> <th>Mavi</th> <th>Beyaz</th> <tr> <td>Deniz</td> <td>Bulut</td> </tr> <tr> <td>Gökyüzü</td> <td>Duman</td> </tr> </table> </body></html>

Yazdığımız kodun çıktısı aşağıdaki gibi olacaktır:

Mavi BeyazDeniz BulutGökyüzü Duman

Satır veya sütunları birleştirebiliriz. rowspan="..." satırlar, colspan="..." sütunlar için kullanılır. Araya da birleştirilecek satır veya sütun sayısını yazarız. Ayrıca bgcolor="..." ifadesini kullanarak tabloların arkaplan rengini de değiştirebiliriz. Örnekle görelim:

<html> <body> <table border="2" bgcolor="aqua"> <tr> <td colspan="3">0</td> <td>1</td> </tr> <tr> <td>4</td> <td>5</td> <td rowspan="2">6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> </tr> </table> </body></html>

Tablolarla ilgili son olarak cellspacing ve cellpadding ifadelerinden bahsedelim. cellspacing hücreler arası, cellpadding hücre içi genişliği belirtir. Kullanımlarından gösterecek olursak:

<html> <body> <table border="2" cellspacing="100" cellpadding="100"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table>

</body></html>

Evet arkadaşlar tablolar hakkında söyleyeceklerimiz şimdilik bu kadar. HTML'de önemli bir yol katetmiş durumdayız. Diğer derste görüşmek dileğiyle kendinize iyi bakın.

HTML Kodlama Dersi - V


HTML Form Elemanları

Bu yazıda HTML form elemanlarını öğreneceğiz. Nedir bunlar ne işe yarar önce bunlardan bahsedelim... Form elemanlarını, kullanıcı bilgi girişinde kullanır. Form elemanları kullanıcı adı, şifre girişi gibi alanlar oluşturmamızı sağlar. Aynı zamanda onay kutuları oluştururken de kullanırız. Mesela kullanıcıdan evli veya bekar olduğu, evi arabası olup olmadığı bilgilerini alırken form elemanlarıyla oluşturacağımız onay kutularından yararlanırız.

Form elemanları <form>..</form> etiketleri arasına yazılır.input en çok kullanacağımız form etiketidir. Kapatılmaz. input etiketi içerisinde kullanılan type ifadesiyle girdi türü belirlenir. Bir örnek yapacak olursak:

<html> <body> <form> Ad: <input type="text" name="name"><br/> Soyad: <input type="text" name="lastname"> </form> </body></html>

Yukarıda yaptığımız örnek tarayıcıda aşağıdaki gibi gözükecektir:

Ad: Soyad:

type="..." ve name="..." ifaderi dinamik web sayfası oluştururken daha iyi anlaşılacaktır. Henüz detaya girmeyelim. Ancak şunu bilmekte yarar var: text, name ve lastname yerine Türkçe karakter içermeyen Türkçe ifadeler de kullanabiliriz. (Yani name="kullaniciadi" şeklinde bir ifade de geçerli olurdu.) Şimdi örneğimizi biraz daha geliştirelim. Bir göndermebutonu oluşturalım ve ad soyad kutucuklarına sayfa açıldığında görüntülenecek yazılar ekleyelim.

<html> <body> <form> Ad: <input type="text" name="firstname" value="adınızı giriniz"><br/> Soyad: <input type="text" name="lastname" value="soyadınızı giriniz"><br/> <input type="submit" value="Gönder"> </form> </body></html>

Sayfada göreceğimiz yapı aşağıdaki gibi olacaktır:

Ad: Soyad:

Submit ifadesiyle buton oluşturduk. Value ise butonun ve kutucukların içindeki ifadeleri yazmamızda kullanıldı. Onay kutuları oluşturmamızda da işe yarayacağından bahsetmiştik. Bununla ilgili ilk örneğimizi de yapalım.

<html> <body> <form> <input type="radio" name="cinsiyet" value="bayan">Bayan<br/>

adınızı girin

soyadınızı g

Gönder

<input type="radio" name="cinsiyet" value="erkek">Erkek<br/> <input type="submit" value="Kaydet"> </form> </body></html>

Bayan

Erkek

Üstteki örnekte görülen "radio" ifadesi tek seçeneği seçmemizi sağlar. Birden fazla seçenek seçmemizi gerektiren durumlar da ise checkbox ifadesini kullanırız.

<html> <body> <h5>Hangi Tür Müzikleri Seversiniz</h5> <form> <input type="checkbox" name="music" >Pop<br/> <input type="checkbox" name="music" >Rock<br/> <input type="checkbox" name="music" >Arabesk<br/> <input type="checkbox" name="music" >Türk Sanat Müziği<br/> <input type="submit" value="Kaydet"> </form> </body></html>

Yazılan kodun sonucunda, birden çok seçimi yapabiliyoruz:

Pop

Rock

Arabesk

Türk Sanat Müziği

Son olarak açılır liste oluşturmayı da görelim:

<html> <body> <h5>İlk öğrendiğiniz programlama dilini seçiniz</h5> <form>

Kaydet

Kaydet

<select name="proglamlama dilleri" > <option value="C">C<br/> <option value="C++">C++<br/> <option value="Pascal">Pascal<br/> <option value="Java">Java<br/> </select> </form> </body></html>

İlk öğrendiğiniz programlama dilini seçiniz

Form elemanları kullanıcıdan bilgi almak için kullanılır demiştik. Bu derste veri almanın, görsel kısımlarını gördük. Ancak alınan verinin işlenmesi için PHP, JSP veya ASP.NET gibi web programlama dillerini bilmek gerekir. Şayet verinin işlenmesi dışında, saklanması da gerekiyorsa, genellikle ilişkisel bir veritabanı (RDBMS) kullanılır. Bu konular farklı uzmanlıklar gerektiriyor. Konu fazlalılığı gözünüzü korkutmasın; aradaki noktaları zamanla birleştireceksiniz.

HTML Kodlama Dersi - VI


HTML5 ile Gelen Yenilikler

Merhaba arkadaşlar,

Bu dersimizle HTML5''e başlıyoruz. Öncelikle <!DOCTYPE> etiketinden söz etmek istiyorum. .<!DOCTYPE> bir web sayfasını tarayıcıya tanıtır ve sayfanın düzgün görüntülenmesini sağlar. Kullanımı şart olmasa da, tarayıcının kodları daha sağlıklı yorumlamasını sağlayıp, hata riskini azaltır. Bu etiketi sayfanın en başına yazarız ve kapatmayız. Her HTML sürümü için farklı bir <!DOCTYPE> tanımı vardır. Ben sadece HTML 1.0 ve

HTML5'teki kullanımlarını göstereceğim. Amacım HTML5 ile gelen gelişimi göstermek... Diğer sürümlere dair bilgileri Internet'te bulabilirsiniz.

- HTML 1.0 için:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

- HTML5 için:

<!DOCTYPE HTML>

Gördüğünüz gibi DOCTYPE etiketimiz, HTML5'te gayet sade birhâl almış. <!DOCTYPE> etiketiyle tarayıcıya "Ben HTML5 kullanıyorum. Sayfayı ona göre yorumla." demiş oluyoruz.

İlk dersimizde de söylediğimiz gibi HTML5, HTML'in son sürümüdür; yani en güncel hâlidir. HTML5 içinde biraz CSS ve Javascript barındırır ve diğer HTML sürümlerine göre daha esnektir. Bu sürüme özgü bazı yeni kodlar gelirken, eskiden kullandığımız bazı kodlar da artık kullanılmayacaktır. HTML5'tekullanılmayacak kodları sıralarsak:

<acronym> , <applet>, <basefont>, <big>, <center>, <dir>, <font>,<frame> <frameset>, <noframes>, <strike>, <tt>, <u>, <xmp>

Bu kodların artık kullanılmamasının sebebi olarak, CSS ile de bu kodlarla yapılabileceklerin yapılması, HTML’de bunlara duyulan ihtiyacın azalmasını söyleyebiliriz. HTML5 ile gelen yeni etiketler ise açıklamalarıyla beraber şöyle sıralayabiliriz:

<canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.<audio>: Sayfaya ses oynatıcı bir modül ekler.<video>: Video oynatıcı bir modül ekler.<progress>: İşlem süreci göstergesi ekler.<caption>: Başlık olarak düşünülen metinleri düzenler.<header>: Sitenin başlık ve açıklama içeriğini alır.

<nav>: Menüleri ve bir takım zaruri işlevleri içine alır.<footer>: Sitelerin en alt kısmını içine alır.<article>: Makale, deneme tarzı yazıları kapsar.<aside>: Ana içerikte ayrı yazılan kısımdır.<datalist>: Düzenlenebilir elementlere otomatik tamamlama özelliğiverilmesini sağlar.<details>: Detay bilgisi içerir.<embed>: Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)<figcaption>: <figure> elementinin başlığını belirler.<figure>: Çeşitli medya içeriği gruplarını belirler.<hgroup>: Başlık grubunu belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir.<mark>: Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.<summary>: Yazının başlığını belirler.<time>: Tarih, saat verilerini kapsar.

Bunların dışında <command>,<meter>,<output>,<rp>,<source>,<ruby>,<section>, <rt>ve <keygen> de HTML5 ile gelen yeni etiketler arasındadır. Şimdi ilk olarak <canvas> etiketiyle bir örnek yapalım.

<!DOCTYPE HTML> <html> <body> <canvas width="200" height="100"style="border:1px solid black;"> <script type=”text/javascript”> ... </script> </canvas> </body> </html>

Tarayıcıdaki görüntüsü sayfanın sol üstünde siyah kenarlıklı içi boş bir tablodur. İçi javascriptle çizim yapılması için ayrılan alandır. Javascript’e şimdi girmiyorum. Ancak yazdığım kodları açıklayayım. Width ve height ile oluşturduğumuz alanın enini ve boyunu pixel cinsinden belirlemiş olduk. Style, kenarlık özelliklerini belirlemek içinaçıldı. ”border:1px “ ifadesi kenarlık kalınlığını belirler. Solid kenarlığın düz çizgi olmasını sağladı. Solid yerine dashed i kullansaydık kenarlık kesik çizgi halinde olacaktı. Son olarak black ise kenarlık rengi. Onu da red yellow şeklinde

değiştirmek mümkün veya #000000 şeklinde renk kodunu yazabiliriz.

Şimdi de sırasıyla <audio> ve <video> etiketlerinden bahsedelim.

<!DOCTYPE HTML> <html> <body> <audio src="ses.mp3" controls="controls" autoplay="autoplay" loop="loop"> Tarayıcınız desteklemediği için ses dosyası çalınamıyor. </audio> </body> </html>

Audio nun yanında kullandığımız dört ifadenin anlamlarını açıklayalım:

src="ses.mp3" ses dosyasının yerini belirler. Hatırlarsanız resim dosyalarında da aynı şeyi yapmıştık. Benim ses dosyam aynı klasörde yer aldığı için sadece adını yazdım. controls="controls" eğer bunu yazmasaydık play tuşu gibi kontrol tuşları görünmeyecekti. autoplay="autoplay" bu ifade sayesinde sayfa yüklendiği gibi ses dosyası yürütülmeye başlanır. Eğer kullanmazsak ses dosyasının çalması için 'play' tuşuna basılması gerekir.loop="loop" Kullandığımız takdirde ses doyası biter bitmez baştan başlayacaktır.

Bu arada şunu da belirtelim ki <audio> elementinin desteklediği 3 tür ses uzantısı (.mp3 .ogg ve .wav) vardır. Tarayıcı ses dosyasını desteklemiyorsa ekranda bizim yazmış olduğumuz uyarı gözükür. Destekler ise uyarı yazısı görünmez.

Artık bir video dosyası ekleyebiliriz:

<!DOCTYPE HTML> <html> <body> <video src="video.ogg" width="250" height="200" controls="controls" loop="loop"> Tarayıcınız desteklemediği için video açılmamaktadır.

</video> </body> </html>

Ses doyası eklerken kullandıklarımızın aynısını kullandık. Farklı olarak bu sefer etiketimiz <video> idi ve boyutunu belirten height="..." ve width="..." ifadelerine yer verdik. Buboyutlar da pixel cinsindendir.

Bu dersimizde HTML5 hakkında bilgi sahibi olduk ve HTML5 etiketlerinin üçüyle örnekler yaptık. Diğer dersimizde görüşmeküzere...

HTML Kodlama Dersi

Documents