Merhaba,
Şimdi çalışmalarımızı koyacağımız html adında bir yeni klasör tanımlayalım ve bu yazdıklarımızı ilkwebsayfam.html adını vereceğimiz dosyaya kaydedelim. Bu dosyayı tarayıcımızda açalım. Açmak için ya dosya gezgininde üzerine çift tıklayarak varsayılan tarayıcımızda açılmasını sağlarız ya da tarayıcımızı açar adres bölümüne dosyanın bilgisayarımızdaki adresini ("c:\html\ilkwebsayfam.html" gibi) girerek açarız.
Burada sayfaya 2 eleman ekledik head elemanı ve onun içinde title elemanı. head elemanı body elemanından önce yer alır ve web sayfası hakkında bilgiler içerir. head elemanı içindekiler tarayıcıda görsel kısımda görünmezler.
head elemanı içinde verebileceğimiz bir çok bilgi var. Bunların en önemlisi etiket bilgisi. Etiket bilgisi title elemanı içine yazılan içeriktir
Sayfayı yenilediğimizde yazıların editörde girdiğimiz gibi olmadığını görürüz.
Ne editörde göründüğü gibi solunda bir sürü boşlıuk var nede yazdığımız gibi alt alta yazıldı cümleler. HTML bizim içeriklere girdiğimiz boşlukları ve yeni satır komutlarını dikkate almaz. Mesela bir kelimeden önce veya sonra bir sürü boşluk olsa sadece bir sonraki ya da önceki kelimeyle arasına tek bir boşluk konur. Enter ise hiç çıktıya yansımaz, ayrıca belirtmek gerekir. HTML de ayrı paragrafları belirtmek için <p> elemanı içine konur. Şimdi kodu şöyle yapalım.
Şimdi istediğimiz gibi oldu. Unutmayalım bütün kodlama dilleri bizim istediğimiz değil kendi kurallarında tanımlı olan çıktıyı verir.
Her zaman çok ileri seviye yazılar yazdığım için, bu sefer başlangıç seviye yazayım dedim (?..). Bu web siteleri nasıl yapılıyor diye merak edenler için biraz HTML , CSS ve JavaScript anlatayım diye yola çıktım. HTML ile başlıyorum.
HyperText Markup Language (kısaca HTML) web sayfası tasarımının başladığı yerdir. Sayfa içeriğini oluşturmanın en basit ve başlangıç yoludur.
Bir benzetme yapmak gerekirse HTML temel manayı verirken CSS de onun sunumunu yapar.
Web sitelerinde bulunan şeylerin bilgisyarımızda bulunan şeylerden pek farkı yok. Bir sürü klasörler içnde bulunan bir sürü dosyalar. HTML dosyalar basit text dosyalarından başka bir şey değildir. Bu yüzden Notepad gibi çok basit bir editörle HTML döküman hazırlayabiliriz. Text editörümüzü açalım ve şunu yazalım
Bu benim ilk web sayfam.Şimdi çalışmalarımızı koyacağımız html adında bir yeni klasör tanımlayalım ve bu yazdıklarımızı ilkwebsayfam.html adını vereceğimiz dosyaya kaydedelim. Bu dosyayı tarayıcımızda açalım. Açmak için ya dosya gezgininde üzerine çift tıklayarak varsayılan tarayıcımızda açılmasını sağlarız ya da tarayıcımızı açar adres bölümüne dosyanın bilgisayarımızdaki adresini ("c:\html\ilkwebsayfam.html" gibi) girerek açarız.
Gördüğünüz gibi web sayfası görmek için bir hosting firmasına ihtiyacımız olmadı. Ama burada biz yazdığımızı sadece kendi bilgisayarımızda görüyoruz. Amacımız sadece öğrenmek. Tarayıcıda açtığımız sayfaya bakınca yazdıklarımızın aynen tarayıcıda da gösterildiğini görürüz.
Pek de bişeye benzemedi ama olsun daha yeni başladık.
Editörden bahsederken herhangi bir text editörü olur demiştik ama kod yazmak için olan editörlerin daha faydalı olacağı açıktır. Ben SublimeText , Notepad++ ve VSCode tercih ediyorum
Tag'ler
Bir HTML dökümanın temel yapısı tag adı verilen kapsayıcılar ve bunların içerdiği bilgilerden oluşur. Yeni bir html dökümanı oluşturalım ve içine şunları yazalım.
tags.html
<!DOCTYPE html>
<html>
<body>
Bu benim ilk web sayfam.
</body>
</html>
Bu dosyayı kaydedip tarayıcımızda açarsak daha önceki sayfadan farklı bir görüntü gelmeyecektir. Buada ilave edilen HTML elemanlarına tag adı verilir. Tag'ler tarayıcı tarafından gösterilmez. Onların her birinin bir anlamı vardır ve tarayıcı bu anlamlara göre içerdikleri veriyi değerlendirir.
İlk satırdaki <!DOCTYPE html> tag'i ile döküman tipi bildirimi yapılıyor. Aslında bu bir tag değil tarayıcıya bir bildirim. Bu şekilde kullanım tarayıcıya bu dosyanın bir HTML5 tipi döküman olduğunu bildiriyor, şu anda en son HTML versiyonu bu. Arkasından <html> tag'i geliyor. Tag'lerin bir açılması bir kapanması ve ikisinin arasında da içerikleri vardır. Mesela burada <html> ve </html> açılışı ve kapanışı belirtiyor. Bu arada kalan alana kapsam da diyebiliriz. <html> tag ile tarayıcıya kapsamdaki herşeyin HTML formatında olduğu belirtiliyor. <body> ve </body> arasında kalan kısım sa tarayıcıda bize görünen alanı ifade ediyor, yani body tag kapsamındaki değerler bize görünecektir.
İlk satırdaki <!DOCTYPE html> tag'i ile döküman tipi bildirimi yapılıyor. Aslında bu bir tag değil tarayıcıya bir bildirim. Bu şekilde kullanım tarayıcıya bu dosyanın bir HTML5 tipi döküman olduğunu bildiriyor, şu anda en son HTML versiyonu bu. Arkasından <html> tag'i geliyor. Tag'lerin bir açılması bir kapanması ve ikisinin arasında da içerikleri vardır. Mesela burada <html> ve </html> açılışı ve kapanışı belirtiyor. Bu arada kalan alana kapsam da diyebiliriz. <html> tag ile tarayıcıya kapsamdaki herşeyin HTML formatında olduğu belirtiliyor. <body> ve </body> arasında kalan kısım sa tarayıcıda bize görünen alanı ifade ediyor, yani body tag kapsamındaki değerler bize görünecektir.
Attribute - Adlandırılmış özellikler
Tag'ler adlandırılmış bazı özelliklere değer vererek daha anlamlı hale getirilebilr. Bu özeelikler açılış tag'i içinde yazılırlar genel yapısı <tag özellik_adı="değeri"> İçerik </tag> şeklinde özelliğin adı ve tırnak içine yazılmış değer ile ifade edilir. Tag özelliklerine daha sonra tekrar döneceğiz.
Sayfa etiketi
Web sayfalarının etiketleri vardır. Bu etiket değeri tarayıcımızda sekmenin üzerinde görünen yazıdır. Daha önce yazdığımız kodda etiket olmadığı için sekme üzerinde dosyanın adı yazıyor. Sayfamız etiket eklersek kodumuz şöyle görünecektir.
<!DOCTYPE html>
<html>
<head>
<title>İlk Sayfam</title>
</head>
<body>
Bu benim ilk web sayfam.
</body>
</html>Burada sayfaya 2 eleman ekledik head elemanı ve onun içinde title elemanı. head elemanı body elemanından önce yer alır ve web sayfası hakkında bilgiler içerir. head elemanı içindekiler tarayıcıda görsel kısımda görünmezler.
head elemanı içinde verebileceğimiz bir çok bilgi var. Bunların en önemlisi etiket bilgisi. Etiket bilgisi title elemanı içine yazılan içeriktir
Paragraflar
Web sayfamıza biraz daha içerik ekleyelim.
<!DOCTYPE html>
<html>
<head>
<title>İlk Sayfam</title>
</head>
<body>
Bu benim ilk web sayfam.
Heyacan verici!.
</body>
</html>
Ne editörde göründüğü gibi solunda bir sürü boşlıuk var nede yazdığımız gibi alt alta yazıldı cümleler. HTML bizim içeriklere girdiğimiz boşlukları ve yeni satır komutlarını dikkate almaz. Mesela bir kelimeden önce veya sonra bir sürü boşluk olsa sadece bir sonraki ya da önceki kelimeyle arasına tek bir boşluk konur. Enter ise hiç çıktıya yansımaz, ayrıca belirtmek gerekir. HTML de ayrı paragrafları belirtmek için <p> elemanı içine konur. Şimdi kodu şöyle yapalım.
<p>Bu benim ilk web sayfam.</p>
<p>Heyacan verici!.</p>
Şimdi istediğimiz gibi oldu. Unutmayalım bütün kodlama dilleri bizim istediğimiz değil kendi kurallarında tanımlı olan çıktıyı verir.
Vurgu
Yazımız içinde vurgu yapmak amacıyla em ve strong tag'lerini kullanabiliriz. Örneğin
<p>Evet bu <em>gerçekten</em> heyecan verici.</p>
<p><strong>Uyarı: </strong> heyecan miktarındaki seviye
beyninizi patlatabilir.</p>
Alt satır
Bir elemanın içinde yazarken br tag kullanarak alt satıra geçebiliriz. br tag sadece işlem ifade ettiği için içeriği olmaz ve kapatma tag'i de yoktur. Paragraf ile karşılaştırma için bir örnek yapalım
<p>Bu benim ilk web sayfam.</p>
<p>Heyacan verici!.</p>
<p>Bu benim ilk web sayfam.<br>
Heyacan verici!.</p>
Başlıklar
p tag'i yazı şekillendirmenin ilk adımıydı. Dökümanımızda başlıklar kullnarak bölümlendirme yapabilmek için kullanılan tag'ler de var. h1 , h2 , h3 , h4 , h5 ve h6 elemanları. En büyük başlık h1 elemanıdır, h2 ona göre alt başlık olur. Sırasıyla gider ve h6 en küçük başlık olur.
Örnek HTML kodu:
headers.html
<!DOCTYPE html>
<html>
<head>
<title>Başlıklar</title>
</head>
<body>
<h1>Benim ilk web sayfam</h1>
<h2>Bu nedir</h2>
<p>HTML kullanılan basit bir sayfa.</p>
<h2>Niye yapılmış</h2>
<p>HTML öğrenmek için.</p>
</body>
</html>
Not olarak, h1 elemanı sayfada sadece bir kere kullanılır sayfanın ana bağlığıdır, h2 -h6 arası ise istenildiği kadar kullanılabilir.
Listeler
Üç çeşit liste vardır. Sıralı listeler (ol - ordered list) , sırasız listeler (ul - unordered list) ve tanımlama listeleri (dl - definition list). İlk ikisini burada göreceğiz.
Sıralı ve sırasız listeler sıralı olanda her bir liste elemanının başında sıra numarası olur sırasız listelerde ise numara yerine sadece liste elemanı olduğunu belirtir bir işaret bulunur. Sıralı listeler ol tag ile ifade edilir , sırasızlar ul tag ile. Listenin her bir elemanı da bu tag'lerin içeriğinde li elemanlar ile ifade edilir. (li - list item).
Daha önce yazdığımız headers.html dosyasını lists.html olarak değiştirelim ve şu şekilde düzenleyelim.
Sıralı listeyi görmek içinde şöyle bir ilave yapalım.
Böyelece içiçe liste yapımını da görmüş olduk. Nasıl biraz şekillenmeye başladı görüntüler di mi?
Linkin hedefi anchor tag için verilen href adlandırılmış özelliğiyle belirlenir. Linkin referans ettiği adres buradaki gibi absolute adres olarak tamamen başka bir siteye yönlenebileceği gibi bizim sitemizdeki başka bir sayfaya yönlendiren bağıl adres de olabilir. ("/lists.html" gibi).
Yeri gelmişken biraz açalım "bizim sitemizde" dediğimiz örnek gibi linki "/lists.html" olarak verirsek tarayıcımız link tıklanınca bize dosyanın bulunamadığını belirtecektir. Çünkü şu anda web sayfamızı bir server üzerinden yayınlamıyoruz, direk olarak dosyayı dosya sistemimizden açıyoruz. Link adresini dosya sistemindeki yazım şekli ile "./links.html" olarak girersek bu rada da çalışır.
Ama ben server'da yayınlanacak şekilde sayfalar yazmak isterim diyorsak sayfalarımızın bulunduğu klasörü basit bir server ile bir web sitesi gib lokal olarak bilgisayarımızda yayınlayabiliriz. Böylece dosyalarımızı daha sonra bir hosting sağlayıcısından kiralayacağımız server'a koyduğumuzda aynen çalışacaktır. Peki bu en basit nasıl yapılır?
Terminal nedir diyecek olursanız. Windows'ta "komut isteği" ya da "commad prompt" ya da "powershell" uygulamaları birer terminaldir. Windows gezgini ile web sayfalarımızın bulunduğu klasöre gidip boş bir bölgeye shift + sağ tıklayınca açılan menüden "PowerShell penceresini buradan açın" seçelim.
Açılan konsol penceresinde şu komutu girelim.
Bu komut ile Python bulunulan klasörde lokal olarak bir web server'ı port 8000 kullanarak çalıştıracaktır.
Artık tarayıcımızda klasörümüze erişmek için adres yerine localhost:8000 girersek klasörümüzün içindeki dosyaların bir listesi gelecektir.
Not eğer klasörümüzde default html dosyası olan "index.html" adında bir dosyamız olsa tarayıcı otomatik olarak o dosyayı açacaktı ancak index.html sayfası olmadığı için olan tüm dosyaları gösteren bir liste karşımıza çıkıyor. Şimdi buradan "links.html" ye tıkladığımızda "links.html" dosyamızın server tarafından yayınlanmış versiyonunu görürüz.
Görünüşte değişen bir şey yok ancak bundan sonraki kısımlarda karşımıza çıkabilecek sayfalar arası bağlantılar olsun , resimler olsun server kullanıldığında olacağı gibi yazabileceğiz. Daha önce dediğim gibi site içi linklerin server kullanıldığında farklı girilmesi gerekiyor.
Bitirmeden linklere ait son bir örnek de eğer sayfamız çok uzunsa sayfa içinde başka bir yere atlamak için de link kullanılabilir. Bunu yaparken hangi elemana atlamak istiyorsak ona bir "id" değeri veririz. mesela sayfada atlamak istediğimiz eleman <h2 id="yer1">Başlık bilmem ne</h2> olsun buraya atlamak için yazacağımız link <a href="#yer1">Başka yer</a> şeklinde olacaktır. Ve bu linke tıklanınca aynı sayfanın içinde id değeri "yer1" olan eleman gösterilecek şekilde tarayıcı otomatik scroll edecektir. Dikkat etmemiz gereken href özelliğine değer girerken id değeri başına # karakteri ekledik, bu tarayıcıya id'si #'den sonra gelen yazı ile aynı olan elemana git demek oluyor. id özelliği için bu kullanım şekli web sayfalarında daha bir çok yerde karşımıza çıkacak.
Bu resimi web sayfamızda göstermek için <img src="/images/hong-kong.jpg" alt="Hong Kong jpg"> yazmamız yeterli olacaktır. Şimdi "images.html" dosyasını oluşturalım ve içine şu kodu yazalım:
alt adlandırılmış özelliği resim server'dan yüklenemediğinde resime alternatif olarak aynı yere yazılacak yazıdır(kullanıcı sorunu bildirmek için bu değeri size bildirebilir). Bu resmin boyutunu da değiştirmek isteyebiliriz tabi ki. width ve height adlandırılmış özellikleri kullanarak sırasıyla eni ve yüksekliğini belirleriz.
lists.html
<!DOCTYPE html>
<html>
<head>
<title>Listeler</title>
</head>
<body>
<h1>Benim ilk web sayfam</h1>
<h2>Bu nedir</h2>
<p>HTML kullanılan basit bir sayfa.</p>
<h2>Niye yapılmış</h2>
<ul>
<li>HTML öğrenmek için</li>
<li>Hava atmak için</li>
<li>Çünkü bilgisayarıma aşık oldum HTML ile ona aşkımı göstereceğim</li>
</ul>
</body>
</html>
Sıralı listeyi görmek içinde şöyle bir ilave yapalım.
<h2>Niye yapılmış</h2>
<ul>
<li>HTML öğrenmek için</li>
<li>
Hava atmak için
<ol>
<li>Patronuma</li>
<li>Arkadaşlarıma</li>
<li>Kedime</li>
<li>Kafamın içinde konuşup duran küçük ördeğe</li>
</ol>
</li>
<li>Çünkü bilgisayarıma aşık oldum HTML ile ona aşkımı göstereceğim</li>
</ul>
Böyelece içiçe liste yapımını da görmüş olduk. Nasıl biraz şekillenmeye başladı görüntüler di mi?
Linkler
Bu zamana kadar standalone web sayfası yaptık yani sadece sayfanın kendisi var. Fakat interneti güzel yapan şeylerden birisi sayfalarımızdan başka sayfalara bağlantılar vererek daha etkileşimli bir sayfa oluşturmak. HTML içindeki H ve T harfleri "hypertext" in kısaltması ve manası bağlantılı yazılardan oluşan bir yazı.
Bir bağlantı ifade etmek için anchor tag'i a kullanılır. Fakat anchor tag'ine ilave bir bilgi eklememiz gerekir - bağlantının hedefi olan adres.
Şimdi sayfamızı "links.html" adıyla kaydedelim ve içini şu hale getirelim:
links.html
<!DOCTYPE html>
<html>
<head>
<title>Linkler</title>
</head>
<body>
<h1>Benim ilk web sayfam</h1>
<h2>Bu nedir</h2>
<p>HTML kullanılan basit bir sayfa.</p>
<h2>Niye yapılmış</h2>
<p>HTML öğrenmek için</p>
<h2>Bu öğreticinin orjinali nerede</h2>
<p><a href="http://www.htmldog.com">HTML Dog</a></p>
</body>
</html>
Linkin hedefi anchor tag için verilen href adlandırılmış özelliğiyle belirlenir. Linkin referans ettiği adres buradaki gibi absolute adres olarak tamamen başka bir siteye yönlenebileceği gibi bizim sitemizdeki başka bir sayfaya yönlendiren bağıl adres de olabilir. ("/lists.html" gibi).
Yeri gelmişken biraz açalım "bizim sitemizde" dediğimiz örnek gibi linki "/lists.html" olarak verirsek tarayıcımız link tıklanınca bize dosyanın bulunamadığını belirtecektir. Çünkü şu anda web sayfamızı bir server üzerinden yayınlamıyoruz, direk olarak dosyayı dosya sistemimizden açıyoruz. Link adresini dosya sistemindeki yazım şekli ile "./links.html" olarak girersek bu rada da çalışır.
Ama ben server'da yayınlanacak şekilde sayfalar yazmak isterim diyorsak sayfalarımızın bulunduğu klasörü basit bir server ile bir web sitesi gib lokal olarak bilgisayarımızda yayınlayabiliriz. Böylece dosyalarımızı daha sonra bir hosting sağlayıcısından kiralayacağımız server'a koyduğumuzda aynen çalışacaktır. Peki bu en basit nasıl yapılır?
Python kullanarak basit bir web server çalıştırmak
Python programlama dili çok yaygın kullanılan bir programlama dili. Bilgisayarınızda yoksa hemen kurmanızı öneririm. Çünkü programlama öğrenmeye başlamak için en kolay yollardan biri. Sistemimizde Python yüklü ise klasörümüzü web server'da yayınlanıyormuş gibi görmek çok kolay. Klasörümüzde açılmış bir terminalde
python -m http.serverAçılan konsol penceresinde şu komutu girelim.
python -m http.serverBu komut ile Python bulunulan klasörde lokal olarak bir web server'ı port 8000 kullanarak çalıştıracaktır.
Artık tarayıcımızda klasörümüze erişmek için adres yerine localhost:8000 girersek klasörümüzün içindeki dosyaların bir listesi gelecektir.
Not eğer klasörümüzde default html dosyası olan "index.html" adında bir dosyamız olsa tarayıcı otomatik olarak o dosyayı açacaktı ancak index.html sayfası olmadığı için olan tüm dosyaları gösteren bir liste karşımıza çıkıyor. Şimdi buradan "links.html" ye tıkladığımızda "links.html" dosyamızın server tarafından yayınlanmış versiyonunu görürüz.
Görünüşte değişen bir şey yok ancak bundan sonraki kısımlarda karşımıza çıkabilecek sayfalar arası bağlantılar olsun , resimler olsun server kullanıldığında olacağı gibi yazabileceğiz. Daha önce dediğim gibi site içi linklerin server kullanıldığında farklı girilmesi gerekiyor.
Bitirmeden linklere ait son bir örnek de eğer sayfamız çok uzunsa sayfa içinde başka bir yere atlamak için de link kullanılabilir. Bunu yaparken hangi elemana atlamak istiyorsak ona bir "id" değeri veririz. mesela sayfada atlamak istediğimiz eleman <h2 id="yer1">Başlık bilmem ne</h2> olsun buraya atlamak için yazacağımız link <a href="#yer1">Başka yer</a> şeklinde olacaktır. Ve bu linke tıklanınca aynı sayfanın içinde id değeri "yer1" olan eleman gösterilecek şekilde tarayıcı otomatik scroll edecektir. Dikkat etmemiz gereken href özelliğine değer girerken id değeri başına # karakteri ekledik, bu tarayıcıya id'si #'den sonra gelen yazı ile aynı olan elemana git demek oluyor. id özelliği için bu kullanım şekli web sayfalarında daha bir çok yerde karşımıza çıkacak.
Resimler
Hep değişik formlarda yazılar yazdık ama web sayfaları bundan çok daha çeşitli oluyor. Resimler , videolar , müzikler vs. Çok kullanılan ve bu blogta size bilgiler verirken de çok kullanmış olduğum resimlere bir bakalım.
Resimler image ifade eden img elemanıyla gösterilir. Ana klasörümüz içinde images adında bir alt klasör tanımlayalım. Aşağıdaki resme sağ tıklayıp "farklı kaydet" seçeneği ile images klasörü içine "hong-kong.jpg" adını vererek kaydedelim.
images.html
<!DOCTYPE html>
<html>
<head>
<title>Resimler</title>
</head>
<body>
<h1>Şehir Resimleri</h1>
<h2>Hongkong</h2>
<img src="/images/hong-kong.jpg"alt="Hong Kong jpg">
</body>
</html>
alt adlandırılmış özelliği resim server'dan yüklenemediğinde resime alternatif olarak aynı yere yazılacak yazıdır(kullanıcı sorunu bildirmek için bu değeri size bildirebilir). Bu resmin boyutunu da değiştirmek isteyebiliriz tabi ki. width ve height adlandırılmış özellikleri kullanarak sırasıyla eni ve yüksekliğini belirleriz.
<h3>Hongkong 200x150</h3>
<img src="/images/hong-kong.jpg" width="200px" height="150px">
Bundan başka içinde bulunulan elemana göre % olarak boyut da belirtilebilir. Mesela yukarıdaki resim için width="50%" şeklinde değer girersek sayfanın yarısı genişlikte bir resim olacaktır. Sayfayı boyutlandırdıkça resmin boyutu değişerek yarısını işgal edecek şekilde hareket edecektir.
Bu resimlerden Pixabay'da bir sürü bulabilirsiniz.
Tablolar
Tablolar html sayfalarında en çok kullanılan ama bir yandan da en çok sıkıntı veren yerleşim sağlama elemanlarıdır. Tablolar bir yandan bazı verileri tablo şeklinde kullanılacağı gibi yerleşimi yönetmek için de kullanılır. Ancak tablonun esas kullanım amacı verileri tablo şeklinde göstermek olmalıdır.
Tablolar başlangıç seviye bir HTML eğitimi için en zorlu eleman. Öreneklerle gidelim. Yeni bir HTML dosyası oluşturup içine şu kodu yazalım:
tables.html
<!DOCTYPE html>
<html>
<head>
<title>Tablolar</title>
</head>
<body>
<h1>Tablolar</h1>
<table>
<tr>
<td>Satır 1, sütun 1</td>
<td>Satır 1, sütun 2</td>
<td>Satır 1, sütun 3</td>
</tr>
<tr>
<td>Satır 2, sütun 1</td>
<td>Satır 2, sütun 2</td>
<td>Satır 2, sütun 3</td>
</tr>
<tr>
<td>Satır 3, sütun 1....</td>
<td>Satır 3, sütun 2....</td>
<td>Satır 3, sütun 3....</td>
</tr>
</table>
</body>
</html>
table elemanı tabloyu oluşturur, içinde olan her tr elemanı tabloya yeni bir satır ekler, tr içindeki her td elemanı da tablonun o satırına bir hücre ekler.
Tablolar hakkında daha söylenecek çok şey var ama başlangıç olarak bu kadar yeterli.
Formlar
Formlar kullanıcının girdiği verileri toplamak amacıyla kullanılan elemanlardır. Web uygulamasının arabirimini oluştururlar. Kullanıcı ve web uygulaması arasında veri iletişimi için kullanılır.
Biz burada formları sadece görsel olarak işleyeceğiz. Formların veri gönderip almaları gibi işlemlerde HTML dışındaki programlama dilleri kullanılır.
HTML'de formla için kullanılan tag'ler form, input, textarea, select ve option.
Form
form tag içinde bilgilerin gönderileceği elemanlar barındırılır. Eğer formu kullanıcının bir bilgi göndermesi için kullanacaksak, action adlandırılmış özelliği ile formun nereye gönderileceği belirtilir.
method özelliği ile bilgilerin nasıl gönderileceği belirtilir. Örneğin get metodu seçilmişse bilgiler başka bir web sayfasına yönlendirilerek o sayfaya geçilir. post metodu seçilmişse bilgiler başka sayfaya geçmeden arka planda gönderilir.
Genel yapı olarak formlarda post metodu kullanılır. Örneğin kullanıcının iletişim formu doldurması gibi bir çok şeyde bu metod kullanılır.
Form elemanının genel kullanım örneği şöyledir.
<form action="alacakscript.php" method="post">
</form>
input
input tag'i form dünyasının bel kemiğidir. Alabileceği bir çok şekil type adlandırılmış özelliği ile verilir.
- <input type="text"> ya da kısaca <input> elemanı standart bir yazı girişi içindir. İstenirse value özelliğine değer vererek içinde bir başlangıç yazısıyla gösterilmesi sağlanabilir.
- <input type="password"> text ile aynı işi yapar ama kullanıcının girdiği karakterler gösterilmez. Şifre giriş alanları bunlardır.
- <input type="checkbox"> bir değer giriş kutusu değil bir checkbox ile kullanıcıya seçenek sunar. Koşulları kabul ettiğimize dair işaretlediğimiz kutucuk bir checkbox'tır. Eğer checked özelliği verilirse default olarak seçili olarak görüntülenir (<input type="checkbox" checked>).
- <input type="radio"> checkbox'a benzer ama burada bir grup radio elemanı içinden sadece bir tanesi seçilebilir. Evet , hayır ve karasızım seçeneklerinden oluşan üçlü seçenekten oluşan bir grup buna örnektir. Bunların da checked özelliği ile default olarak seçili olması sağlanabilir.
- <input type="submit"> Bir buton ortaya çıkarır. Bu butona tıklandığında form , formun action'da belirtilen adrese, method ile verilen yöntem ile gönderilir. <input type="submit" value="Buton üzerindeki yazı"> şeklindeki gibi value özelliğiyle üzerine yazılacak yazıyı belirleriz.
textarea
textarea çok satırlı bir yazı kutusudur. rows özelliği ile kaç satır yazı yüksekliğinde olacağı cols özelliğiyle de kaç karakter genişliğinde olacağı beliritilir.
<textarea rows="5" cols="20">Büyük bir textarea
</textarea>
select
select elemanı option elemanı ile birlikte kullanıcıya seçenekler listesi sunan bir açılır liste gösterir. Kullanıcının seçtiği seçenekte eğer value özelliği girilmişse o değer, value özelliği verilmemişse option tag içeriğindeki yazı form gönderilirken seçilen bilgisi olarak gönderilir.
Yine burada da selected özelliği eklenerek o seçeneğin default olarak seçili gelmesi sağlanır.
İsimler
Yukarıdaki form elemanları görsel olarak orada varlar da şu haliyle gönderme butonuna tıklanınca hiç bir şey gönderilmez. Sadece form elemanlarını koymasını gördük. Diyelim 3 tane text kutusu var üçü de başka bilgi içeriyor. Hangisinin bilgisi nasıl gidecek? Birbirinin aynı elemanlar. İşte burada name adlandırılmış özelliği devreye giriyor. Form gönderilirken her form elemanı name özelliğinde verilen değerle kullanıcının girdiği bilgiler eşleştirilerek gönderilir.
Test yapabilmek amacıyla şöyle bir web sayfası hazırlayalım.
Test yapabilmek amacıyla şöyle bir web sayfası hazırlayalım.
forms.html
<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<h1>Form</h1>
<form action="forms.html" method="get">
<p>İsim :</p>
<p><input type="text" name="isim" value="Adınız"></p>
<p>Türler :</p>
<p><input name="türler"></p>
<!-- hatırlarsak text alanların type belirtmesi gerekmez -->
<p>Yorumlar :</p>
<p><textarea name="yorumlar" rows="5" cols="20">Yorumlarınız</textarea></p>
<p>Cinsiyet :</p>
<p><input type="radio" name="cins" value="male"> Erkek</p>
<p><input type="radio" name="cins" value="female"> Kadın</p>
<p><input type="radio" name="cins" value="hermaphrodite"> Çift cinsiyetli</p>
<p><input type="radio" name="cins" value="asexual"> Cinsiyetsiz</p>
<p><input type="submit" value="Gönder"></p>
</form>
</body>
</html>
Ne bilgiler gönderildiğini görebilmek amacıyla formu post yerine get metodu kullanarak aynı bulunduğumuz sayfaya gönderdik. Formu doldurup gönderdiğimizde sadece sayfa yenilenmiş gibi gelecek. Fakat tarayıcının adres barına tıkladığımızda adresin yanında "?" işareti ile başlayan ve form bilgilerinin olduğu bir sürü değer göreceğiz. Bunlar "Gönder" butonu tıkladığımızda server'a gönderilen bilgilerdir.
Ve adres barda görünen değerler:
Hepsini bir arada görelim
Bu ana kadar yazılanları takip ettiyseniz artık bir hayli HTML öğrenmiş oluyorsunuz.
Aşağıdaki kod şimdiye kadar gördüklerimizi bir araya topluyor.
all_beginner.html
<!DOCTYPE html>
<html>
<head>
<title>Hepsi Bir Arada</title>
<!-- Bu bir yorum satırı kod olarak değerlendirilmez -->
</head>
<body>
<h1>İlk web sayfam</h1>
<h2>Nedir bu?</h2>
<p>HTML kullanarak herşeyi bir araya getiran bir yazı. <em>HTML kullanarak dedim.</em> HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı. </p>
<h2>Niye ?</h2>
<ul>
<li>HTML öğrenmek için</li>
<li>
Hava atmak için
<ol>
<li>Patronuma</li>
<li>Arkadaşlarıma</li>
<li>Kedime</li>
<li>Beynimin içinde konuşup duran küçük ördeğe</li>
</ol>
</li>
<li>Çünkü bilgisayarıma aşık oldum ve HTML ile ona göstereceğim</li>
</ul>
<h2>Listeler nasıldı?</h2>
<p><a href="/lists.html">Listeler Sayfası</a></p>
<h3>Hongkong 300x200</h3>
<img src="/images/hong-kong.jpg" width="300px" height="200px">
<h3>Bir tablo</h3>
<table>
<tr>
<td>Satır 1, sütun 1</td>
<td>Satır 1, sütun 2</td>
<td>Satır 1, sütun 3</td>
</tr>
<tr>
<td>Satır 2, sütun 1</td>
<td>Satır 2, sütun 2</td>
<td>Satır 2, sütun 3</td>
</tr>
<tr>
<td>Satır 3, sütun 1....</td>
<td>Satır 3, sütun 2....</td>
<td>Satır 3, sütun 3....</td>
</tr>
</table>
<h2>Bir form</h2>
<p><strong>Not : </strong> Görüntü var da pek iş yapmıyor</p>
<form action="forms.html" method="get">
<p>İsim :</p>
<p><input type="text" name="isim" value="Adınız"></p>
<p>Yorumlar :</p>
<p><textarea name="yorumlar" rows="10" cols="20">Yorumlarınız</textarea></p>
<p>Cinsiyet :</p>
<p><input type="radio" name="cins" value="male"> Erkek</p>
<p><input type="radio" name="cins" value="female"> Kadın</p>
<p><input type="radio" name="cins" value="hermaphrodite"> Çift cinsiyetli</p>
<p><input type="radio" name="cins" value="asexual"> Cinsiyetsiz</p>
<p><input type="submit" value="Gönder"></p>
</form>
</body>
</html>
Hiç yorum yok:
Yorum Gönder