Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1"

Transkript

1 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 HTML ( Hyper Text Markup Language ) Html Nedir - Nasıl Hazırlanır? Html (Hypertext Markup Language) web sayfalarının yapımında kullanılan bir dildir. Diğer programlama dillerinden farklı yönü sadece görsel düzenleme için kullanılmasıdır. Html herhangi bir text editörle (Notepad, Word,...) hazırlanabilir. Fakat bunun yerine web sayfası tasarımı için Dreamweaver, FrontPage, Netscape Composer gibi gelişmiş araçlar da kullanılabilir. Ders notları içerisindeki örnek uygulamalar için Notepad kullanılmıştır. Bir html dokümanı hazırlandıktan sonra kaydedilirken dosya_adi.htm veya dosya_adi.html olarak kaydedilmelidir. Yazım Kuralları - - Komutlar büyük yada küçük harfle yazılabilir. - - Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) karakterleri içermez. - - Komutlar < ve > işaretleri arasında yazılır ve tag adını alırlar. <tag_adi> <HTML>,<BODY>,<TITLE> - - Bir tag <tag_adi> şeklinde başlar ve bazı taglar dışında </tag_adi> şeklinde biter. - - Taglar iç içe yer alırlar ve en içteki tag dan başlatılarak kapatılırlar. Kodların okunabilirliğini artırmak için bir tag bitmeden tekrar tag açılırsa içeride açılan tag biraz daha içeriden yazılmalıdır. <tag_1> <tag_2> </tag_2> </tag_1> <HTML> <BODY> </BODY> <FORM> </FORM> </HTML> - - Bir tag parametreler kullanarak biçimlendirilir ve bu parametrelere ( ) tırnak işaretleri arasında değer atanır. Değerle parametre adı arasında eşittir (=) işareti kullanılır.

2 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 2 <tag_adı parametre_adı ="değer"> Örnek: <body bgcolor="blue"> HTML Dilinde Kullanılan Taglar Her html dokümanının içermesi gereken bazı temel taglar vardır. Bunlar: html, body, head, title taglarıdır. : tagı bir web sayfasında bulunan ilk tagdır. Amacı o dokümanın bir html dokumanı (web sayfası da denilebilir) olduğunu bildirmektir. Önceki anlatılanlardan anlaşılacağı üzere web sayfası içersindeki bütün taglar tagının içerisinde yazılır.bu tagın hiç parametresi yoktur. : tagı bir web sayfasının başını oluşturur. tagları arasına yazılacak herhangi bir şey sayfada görünmez. Bu tagın içine style sheet kodlari girilir. Bu tagın hiç parametresi yoktur. <title></title> : Bu tag içine yazacağınız yazı web sayfanızın başlığı olacaktır ve browser penceresinin başlık çubuğunda görünecektir.<title> tagı tagının içerisinde yazılır. <title> Sayfanın başlığı </title> <title> HTML Dersleri Giriş Sayfası </title> : Bu tag web sayfasının görünen bütün yazılarının,resimlerinin, formlarının,... içine yerleştirildiği tagdır. Bu tagın parametrelerine daha ilerki konularda değineceğiz. Kullanılış biçimi: Buraya kadar anlatılan konularla temel taglarını kullanarak aşağıda bir web sayfasının temel yapısı verilmiştir.

3 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 3 <title> Sayfa Başlığı </title> Bu kodları Notepad de yazıp çalışma dizininize ornek1.html olarak kaydeder ve bir browser dan (Internet Explorer veya Netscape) açarsanız aşağıdaki ekran görüntüsünü elde edersiniz. Bu örnekte tagının içerisine hiç bir şey yazılmadığı için sayfanız boş bir sayfa olarak görünmektedir. Pencerenin başlığının Sayfa Başlığı olduğuna dikkat ediniz. Genel Parametreler color: Kullanıldığı tagın rengini belirler. Genel olarak renk değerleri iki şekilde verilebilir. İlk olarak kullanılmak istenen rengin İngilizce adı ve ikinci olarak o renge karşılık gelen Hexadecimal değer. Örnek olarak şu renk adlarını verebiliriz : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal. Hexadecimal (onaltılık taban sayı sistemi) renk yönteminde değer olarak 6 rakam ve başında # işareti bulunan kodlar yer almaktadır. Örneğin "#ff0000" kodu Kırmızı renge karşılık gelmektedir. Bu kodların hepsini öğrenmek mümkün olmayacağından bu yöntemi öğrenme zorunluluğu yoktur ve bu yöntem genellikle web sayfası hazırlama araçları tarafından kullanılmaktadır. <tag_adi color= değer > < tag_adı color= red > </tag_adı> bgcolor : Arka plan rengini belirler.

4 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 4 <tag_adi bgcolor= değer > <body bgcolor= red > Bu şekildeki bir kodlama web sayfasının zemin rengini kırmızı yapacaktır. background : Arka plana yerleştirilecek resmin dosya konumunu belirler. <tag_adi background= dosya_adi.(gif, bmp, jpeg) > Çalışma dizininize bir resim dosyası oluşturun ve adını resim.jpg olarak kaydedin.daha sonra aşağıdaki kodları Notepad de yazın ve ornek2.html olarak kaydedin. Dosyanızı bir browser da <title> HTML Tagları ve Parametreleri </title> <body background="resim.jpg"> Örnekte de görüldüğü gibi resim dosyası web sayfasının içerisine arka plan resmi olarak yerleştirilmiştir. Web sayfası hazırlarken dikkat edilmesi gerekli hususlardan bir taneside resim dosyalarının çalışma klasörünün içinde başka bir klasörde tutulmasıdır. Örneğin çalışma klasörünüz C:\kurs\ ise bu klasör içerisinde image isimli bir klasör oluşturabilirsiniz. Bu klasör içerisindeki bir resme ulaşmak için background parametresindeki dosya yolunu background= image/resim.jpg olarak değiştirmelisiniz. align : Kullanıldığı sayfadaki yatay yerini belirler. Bu parametrenin 3 değeri vardır. Bunlar: left, right ve center dir. Left sola, right sağa dayalı olarak gösterilmesini, center ise ortalanmasını sağlar.

5 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 5 <tag_adi align= değer > <table align= center > </table> valign : Kullanıldığı sayfadaki dikey yerini belirler. Bu parametrenin 3 değeri vardır. Bunlar: bottom, middle ve top dır. Bottom aşağıya doğru, top yukarı middle ortaya konumlandırılacağını belirtir. <tag_adi valign= değer > <table valign= bottom > </table> border : Kullanıldığı nesnenin etrafında bordür oluşturulmasını sağlar. Bordür kalınlığı için sayısal değer verilir. Border parametresi kullanılmaz ise varsayılan olarak değeri 1 kabul edilir. <tag_adi border= değer > <title> Hizalama ve Borderlar </title> <table align="center" border="2"> <tr> <td>satır1</td> </tr> </table> Yukarıdaki kodları Notepad de yazın ve çalışma dizininize ornek3.html olarak kaydedin. Daha sonra dosyanızı bir browser da

6 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 6 Görüntülenen tablo nesnesinin ortalı ve kenarlıkların kalın olduğuna dikkat edin. height : Nesnenin yüksekliğini belirler. Height parametresine sayı olarak değer verilir. <tag_adi height= değer > Örnek: <tr height= 30 > </tr> Tagının Parametreleri bgcolor: Arka plan rengini belirler. Bu parametrenin değerleri yukarıda anlatılan şekilde verilir. background:bu parametreyi kullanarak sayfanın arka planında resim kullanabilir. link: Sayfada ki text linklerin rengini belirler. alink: Link'e tıklandığındaki rengi belirler. vlink: Daha önce ziyaret edilmiş linklerin rengini belirler. text: sayfadaki biçimlendirilmemiş yazıların rengini belirler. <body bgcolor = değer link= değer vlink= değer alink= değer text= değer > Örnek: <body alink="aqua" link="blue" vlink="red" text="black" bgcolor= "white"> Yazı Biçimlendirme Tagları <font> </font>: Yazı biçimlerinin verildiği tagdır. <font> tagının bir takım parametreleri vardır Bunlar: color : Önceden anlatılan teknikler ve renk kodlarıyla yazının rengini belirlenebilir.

7 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 7 Örnek: <font color="#ff0000">kırmızı renkli yazı</font> face : face parametresi yazının hangi yazı biçimini kullanacağını gösterir.(helvetica, arial,verdana... gibi).bu parametreye yazı değerleri isimleri verilir. Yazı biçiminin görünmesi için web sayfasını açan bilgisayarda o yazı tipinin bulunması gerekmektedir. Eğer yoksa bir kaç yazı tipini alternatif olarak ve virgülle ayırarak yazabilirsiniz. Örnek: <font face="arial,verdana,helvetica">bu yazı tipi arial dir. Eğer arial bulunmuyorsa diğer tipler kullanılır </font> size : Font büyüklüğünü belirler. Bu parametreye 1-7 arası rakamlar girilir (1 en küçük, 7 en büyük). Eğer en son kullanılan yazı tipi boyutu artırılıp azaltmak istenirse +1,+5,-3,-4 gibi değerler kullanılır. <b> : Bu tag kullanıldığında bundan sonraki yazılar koyu (bold) olacaktır. <i> : Bu tag kullanıldığında bundan sonraki yazılar italik (italic) olacaktır. Örnek: <title> Fontlar </title> <font size="3" color="blue">mavi yazı</font> <font size="5" color="blue">mavi büyük yazı</font> <font size="3" color="blue"> <b>mavi kalın yazı</b> </font> <font size="3" color="blue"> <b><i>mavi kalın ve italik yazı</i></b> </font> Yukarıdaki örneği çalışma dizininize ornek4.html olarak kaydedin ve bir browser da

8 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 8 Başlıklar Başlık tagları adındanda anlaşılacağı gibi başlık yazımında kullanılır. <h1>,<h2>,<h3>,<h4>,<h5> şeklindedir. <title> Başlıklar </title> <h1>başlık1</h1> <h2>başlık2</h2> <h3>başlık3</h3> <h4>başlık4</h4> <h5>başlık5</h5> Yukarıdaki örneği çalışma dizininize ornek5.html olarak kaydedin ve bir browser da

9 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 9 Paragraflar <p> : Yeni bir paragraf yapmak için kullanılır.</p> şeklinde kapatılmaz. Bu tagla birlikte sadece align parametresi kullanılabilir. align : Önceki bölümlerde anlatıldığı gibi left, center, right değerlerini alabilir ve paragrafın sağa, sola veya ortaya dayalı olmasını sağlar. Align parametresi kullanılmadığı durumlarda paragraf sola dayalı olur. <p> veya <p align= değer > şeklindedir. <title> Paragraflar </title> <p> İlk paragraf sola dayalı <p align="center"> İkinci paragraf ortalı <p align="right"> Üçüncü paragraf sağa dayalı

10 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 10 Yukarıdaki örneği çalışma dizininize ornek6.html olarak kaydedin ve bir browser da <br> : Yeni bir satır eklemek için kullanılır. </br> şeklinde kapatılmaz. Web Sayfalarında Resim Kullanılması Bir web sayfasında genellikle jpeg, gif formatlı resim dosyaları kullanılmaktadır. Bunun nedeni bu formattaki dosyaların boyutlarının daha küçük olması ve sayfalar görüntülenirken hızlı açılabilmesidir. <img> : Sayfa içerisine bir resim yerleştirmek istenildiğinde kullanılır. Bu tag belli parametrelerle kullanılır. Kullanılış biçimi: <img src= dosya.adi border= değer align= değer alt= değer weight= değer height= değer > src : Resim dosyasının konumunu belirtir. Eğer resim dosyaları html dosyaları ile aynı klasörde ise sadece resim dosyasının adını yazmak yeterlidir. Fakat başka bir klasör veya URL altında ise o zaman resmin yolunu belirtmeniz gerekir. Örnek 1: HTML dosyaları resim dosyaları ile aynı klasörde olsun. Bu durumda src = resim.jpg şeklinde yazmalısınız. Örnek 2: Resim dosyaları HTML dosyalarına göre image isimli bir alt klasörde olsun. Bu durumda src = image/resim.jpg şeklinde yazmalısınız. Örnek 3: Resim dosyaları adlı bir URL de olsun. Bu durumda src= ) şeklinde yazmalısınız. Örnek 4: <title> Resimlerle Çalışmak </title> <img src="image/logo.jpg">

11 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 11 Yukarıdaki örneği çalışma dizininize ornek7.html olarak kaydedin ve bir browser da border : Resmin etrafına yerleştirilecek kenarlığın kalınlığını vermek için kullanılır. align : Resmin yatay konumunu belirler. Left, Center, Right değerlerini alabilir. alt : Resmin üzerine fare ile gelindiğinde gösterilecek metni vermek için kullanılır. weight : Resmin genişliği piksel cinsinden girilir. height : Resmin yüksekliği piksel cinsinden girilir. Örnek 5: <title> Resimlerle Çalışmak </title> <img src="image/logo.jpg" border="4" alt="ankara Üniversitesi" align="right"> Yukarıdaki örneği çalışma dizininize ornek8.html olarak kaydedin ve bir browser da Resmin sola dayalı, kenarlıklı ve açıklamalı olduğuna dikkat ediniz.

12 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 12 Bağlantılar (Linkler) Web sayfaları arasında gezinti yapılabilmesi için sayfaların içerisine linkler yerleştirilir. Başka bir sayfaya veya sayfa içerisindeki bir başka konuma linklerle ulaşılabilir. <a> </a> : Link vermek için bu tag kullanılmaktadır. Bu tagda birtakım parametreler kullanılır. Bu parametrelerle hangi sayfaya link verildiği link verilen sayfanın nerede açılacağı bilgileri verilir.<a> tagı </a> ile kapatılır. <a href= değer target= değer > Sayfada Görünecek Açıklama </a> href : Hangi sayfaya link verileceğini belirler. Link verilecek dosya çalışma klasörünüzle aynı konumda ise dosyanın adını vermek yeterlidir. Fakat farklı bir konumda ise yolu belirtmelisiniz. target : Bu parametre linke basıldığında sonucun nerede görüntüleneceğini belirler. Eğer kullanılmazsa linke basıldığında aynı sayfa üzerinde görüntüleme yapılır. Target parametresi en çok Frame lerle birlikte kullanılır. Fakat bu konu daha ileride işleneceğinden şimdilik target parametresinin _blank değerinden bahsedilecektir. _blank değeri linkin sonucunun yeni bir browser penceresinde açılmasını sağlar. Eğer isterseniz sayfanızda kullandığınız bir linkin nereye bağlanacağına dair bir açıklamayı sayfanıza yerleştirebilirsiniz. Örneğin adresine link verirseniz bu linke açıklama olarak Progress Türkiye yazabilirsiniz. <title> Linkler </title> <a href= target= _blank >Progress Türkiye </a>

13 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 13 Yukarıdaki örneği çalışma dizininize ornek9.html olarak kaydedin ve bir browser da Sayfanızdaki linke tıkladığınızda Progress Türkiye sayfası yeni bir pencerede görüntülenecektir. Progress Türkiye açıklaması yerine <img> tagını kullanarak sayfanızdaki bir resmede link verebilirsiniz. <a href= ><img src= image/progress.gif > </a> ornek9.html adlı dosyanızda gerekli değişiklikleri yapın ve ornek10.html olarak kaydedin. Yaptığınız dosyayı bir browser da Bu örnekte resmin üzerine tıkladığınızda Progress Türkiye sayfası aynı pencerede açılacaktır. Listeler Web sayfalarında Word de olduğu gibi metinler maddeler halinde listelenebilir. Bu listeleme üç şekilde yapılabilir. Sıralanmamış Liste (Unordered List) Bu tipteki listelerde liste elemanları başlarında bir daire görüntülenerek listelenir. <ul> <li> Liste elemanı 1 <li> Liste elemanı 2 <li> Liste elemanı 3 <li> Liste elemanı 4 </ul>

14 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 14 <title> Sırasız Listeler </title> <ul> <li> Kastamonu <li> Adana <li> Yozgat <li> Kayseri <li> Ankara <ul> Yukarıdaki örneği çalışma dizininize ornek11.html olarak kaydedin ve bir browser da Sıralanmış Liste (Ordered List) Bu tipteki listelerde her liste elemanının başına sıra numarası gelir <ol> <li> Liste elemanı 1 <li> Liste elemanı 2 <li> Liste elemanı 3 <li> Liste elemanı 4 </ol> <title> Sıralı Listeler </title> <ol>

15 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 15 <li> Kastamonu <li> Adana <li> Yozgat <li> Kayseri <li> Ankara </ol> Yukarıdaki örneği çalışma dizininize ornek12.html olarak kaydedin ve bir browser da Formlar Formlar normal programlama dillerinde varolan metin kutusu (Edit), Onay Kutusu (Check Box), Açılır Kutu (Combo Box),... gibi nesnelerin HTML sayfalarında kullanılmalarını sağlar. Formların kullanılmasındaki amaç form üzerinden girilen bilgilerin bir veri tabanına, bir adresine veya bir ziyaretçi defterine (guest book) gönderilmesini sağlamaktır. Örneğin bir web sayfasından mail adresi aldığınızda doldurduğunuz formdaki bilgiler ilgili web sayfasının veri tabanına gönderilmektedir veya bazı sayfalarda rastladığınız anket sorularına cevap verirken kullandığınız nesneler formlara örnek verilebilir. <form> </form> : Form içerisindeki nesnelerin kullanılabilmesi için <form></form> tagı kullanılmalıdır. <form method= değer action= değer name= değer > </form> method : Formun hangi yöntemle karşı tarafa gönderileceğini belirler. İki değeri vardır. Bunlar get ve post dur. Eğer Get yöntemini kullanırsanız formu karşı tarafa gönderirken, gönderilen bilgiler, adres satırında açıkça görüntülenecektir. Post yöntemini kullandığınızda formu karşı tarafa gönderirken, gönderilen bilgiler, adres satırında görüntülenmez. Bu iki yöntem arasındaki farkı şöyle düşünebilirsiniz. Kullanıcı adı ve şifre girdiğiniz bir web sayfasını karşı tarafa gönderirken girmiş olduğunuz bilgilerin adres satırında görünmesi durumunda (get yöntemi) şifreniz başkaları tarafından okunabilir. Fakat post yöntemini kullanırsanız girdiğiniz bilgiler karşı tarafa yine gönderilir. Fakat adres satırında sadece sayfanın URL adresi görünür. action : Formun hangi adrese gönderileceğini belirler.

16 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 16 name : Formun adını belirler. Form Nesneleri <input> : Form nesnelerinin bir çoğu <form> tagının içersinde kullanılan <input> taglarıyla oluşturulur. <input type= değer name= değer > type : Type parametresi kullanılacak nesnenin tipini belirler. Bu tipler aşağıdaki gibidir. name : Nesnenin adını belirler. Düz Metin Girişi (Plain Text Entry) : Düz metin kutusudur. <input type= text value= değer maxlength= değer size= değer > value : Metin kutusu içerisine varsayılan olarak değer atanmasını sağlar. maxlength : Metin kutusu içerisine yazılabilecek karakter sayısını belirler. size : Metin kutusunun görüntüdeki uzunluğunu belirler. <title> Plain Text Entry </title> <form name="bilgiler" method="get"> Adınız :<input type="text" name="ad"> <br> Soyadınız :<input type="text" name="soyad"> </form>

17 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 17 Yukarıdaki örneği çalışma dizininize ornek14.html olarak kaydedin ve bir browser da Şifre Girişi (Password Entry) : Metin kutusu görünümündedir fakat bu alan içerisine bilgi girişi yapılırken yazılan karakterler asteriks * karakterine dönüşür. Adındanda anlaşılacağı gibi şifre alanlı formlarda kullanılır. <input type= password maxlength= değer size= değer > Parametreleri metin kutusundaki işlevleri aynen yerine getirir. <title> Password </title> <form name="bilgiler" method="get"> Şifre :<input type="password" name="sifre" maxlength="4"> </form>

18 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 18 Yukarıdaki örneği çalışma dizininize ornek15.html olarak kaydedin ve bir browser da Yazı Alanı (Text Area) : Bir açıklama yada mail içeriği gibi uzun metinleri yazmak için kullanılır. Fakat diğerlerinde olduğu gibi <input> tagıyla yazılmaz, onun yerine, <textarea> tagı kullanılır. <textarea rows= değer cols= değer > Metin </textarea> rows: Görüntülenecek karakter yüksekliğini belirler. cols : Görüntülenecek karakter genişliğini belirler. <title> Text Area </title> <form name="bilgiler" method="get"> Açıklama : <textarea weight=50 height=10>açıklama yazınız </textarea> </form>

19 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 19 Yukarıdaki örneği çalışma dizininize ornek16.html olarak kaydedin ve bir browser da Seçim Kutusu (Select Box) : Görsel programlama dillerindeki combo box (açılır kutu) nesnesine karşılık gelir. Kullanıcıya önceden belirlenmiş birkaç değerden bir tanesini seçtirmek için kullanılır. <select> </select> : Seçim kutusu yaratmak için kullanılır. <select> tagı tek başına kullanılmaz. Bu tagın içerisinde <option> tagı kullanılmaktadır. <option> : <select> tagının içerisinde kullanılır ve görevi menü elemanlarını belirlemektir. </option> şeklinde kapatılmaz. <select> <option> Menü elemanı 1 <option selected> Menü elemanı 2 </select> selected : Eğer <option> tagında selected parametresi kullanılmışsa,form ekrana görüntülendiğinde, bu menü elemanının seçili (varsayılan) olarak görüntülenmesi anlamına gelir. <title> Select Box </title> <form name="bilgiler"> <select name="liste"> <option> Adana <option selected> Adıyaman <option> Afyon <option> Ağrı </select> </form>

20 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 20 Yukarıdaki örneği çalışma dizininize ornek17.html olarak kaydedin ve bir browser da Çoklu Seçim Kutusu (Multiple Select Box) : Seçim kutusuyla aynı işe yarar fakat tek farkı birden fazla seçenek işaretlenebilir. <select size= değer multiple> <option> Seçenek 1 <option selected> Seçenek 2 </select> size : Aynı anda kaç seçeneğin ekranda gösterileceğini belirler. multiple : Seçim kutusunda birden fazla seçeneğin işaretlenebilmesini sağlar. <title> Select Box </title> <form name="bilgiler"> <select name="liste" multiple> <option> Adana <option selected> Adıyaman <option> Afyon <option> Ağrı </select> </form> Yukarıdaki örneği çalışma dizininize ornek18.html olarak kaydedin ve bir browser da

21 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 21 Onay Kutusu (Check Box) : Kullanıcıdan herhangi bir soru için onay istemek için kullanılır. Ekranda onaylanabilecek tek kutucuk görüntülenir. <input type= checkbox > veya <input type= checkbox checked> checked : Form ekrana geldiğinde onay kutusunun işaretli olarak gelmesini sağlar. <title> Check Box </title> <form name="bilgiler"> <input type="checkbox" name="onay" checked> HTML biliyorum </form> Yukarıdaki örneği çalışma dizininize ornek19.html olarak kaydedin ve bir browser da Seçenek Düğmesi (Radio Button) : Seçenek düğmesi seçenekler arasından sadece bir tanesinin seçilmesini sağlar.

22 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 22 <input type= radio > veya <input type= radio checked> checked : Form ekrana geldiğinde o seçeneğin işaretli olarak gelmesini sağlar. <title> Radio </title> <form name="bilgiler"> <input type="radio" name="onay" checked> Evli <input type="radio" name="onay" > Bekar </form> Yukarıdaki örneği çalışma dizininize ornek20.html olarak kaydedin ve bir browser da Komut Düğmesi (Button) : Yapılan formları doldurulduktan sonra karşı tarafa gönderebilmek için veya da içi doldurulmuş bir formu temizlemek için komut düğmeleri kullanılır. <input type= submit value= değer > veya <input type= reset value= değer > submit : Form bilgilerinin karşı tarafa yollanmasını sağlar. reset : Form bilgilerinin karşı tarafa yollanmadan temizlenmesini sağlar. value : Komut düğmesinin ekranda görüntülenecek etiketini belirler.

23 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 23 <title> Butonlar </title> <form name="bilgiler"> Form Gönderilsin mi? <br> <input type="submit" value="gönder"> <input type="reset" value="temizle" > </form> Yukarıdaki örneği çalışma dizininize ornek21.html olarak kaydedin ve bir browser da Tablolar (Tables) Web sayfaları içerisine yazılar yazarken veya resimler yerleştirirken tablolardan yararlanılır. Eğer tablolar kullanılmazsa istenilen yere istenilen nesneyi yerleştirmek çok zordur. Bu yüzden web sayfalarının birçoğu tablolardan yararlanılarak oluşturulmuştur. Tablolar Excel de olduğu gibi satır, sütun ve hücre kavramlarından oluşmaktadır. <table> </table> : Bir tablo oluşturulmak istendiğinde kullanılır. Bundan sonraki satır ve sütun tagları <table> tagının içerisinde yer alır. <table background= değer align= değer valign= değer border= değer bordercolor= değer > veya <table bgcolor= değer align= değer valign= değer border= değer bordercolor= değer > background : Tablonun arka planına yerleştirilecek resmi belirler. align : Tablonun yatay konumunu belirler (Left, Center, Right). valign : Tablonun dikey konumunu belirler. (Top, Middle, Bottom) border : Tablonun kenar çizgi kalınlığını belirler. bordercolor : Kenarlık rengini belirler.

24 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 24 cellspacing : İki hücre arasındaki boşluğu belirler. cellpadding : Tablo ile hücre arasındaki boşluğu belirler. width : Tablonun genişliğini belirler. height : Tablonun yüksekliğini belirler. Satır ve Sütun Tagları <th> </th> : Bir tabloya başlık satırı yapmak için kullanılır. <tr> </tr> : Bir tablo için ilk önce satırlar yaratılmalıdır. <tr> tagı yeni bir satır anlamına gelmektedir. <td> </td> : Yeni bir sütun oluşturmak için kullanılır.<tr> tagı kapatılmadan kullanılan her <td> tagı yeni bir sütun anlamına gelmektedir. <table> <tr> <td align= değer background= değer bgcolor= değer width= değer height= değer > Değer </td> </tr> </table> align : Sütun içerisindeki tagların yatay konumunu belirler. background : Hücre içerisine yerleştirilecek resmi belirler. bgcolor : Eğer resim kullanılmazsa hücrenin arka plan rengini belirler. width : Hücrenin genişliğini belirler. height : Hücrenin yüksekliğini belirler. bordercolor : Kenarlık rengini belirler. colspan : İstenirse bir hücre tekrar sütunlara ayrılabilir. Hücrenin kaç sütun olacağını belirler. rowspan : İstenirse bir hücre tekrar sütunlara ayrılabilir. Hücrenin kaç satır olacağını belirler.

25 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 25 <title> Tablolar </title> <table border="2"> <th>adı</th> <th>soyadı</th> <tr> <td>ali</td> <td>akın</td> </tr> <tr> <td>mesut</td> <td>yeşil</td> </tr> <tr> <td>cenk</td> <td>demir</td> </tr> <tr> <td>fuat</td> <td>soyalp</td> </tr> <table> Yukarıdaki örneği çalışma dizininize ornek22.html olarak kaydedin ve bir browser da Çerçeveler (Frame ler) Frameler web sayfasını birden fazla parçaya ayırmak ve her bir parçanın içerisine ayrı sayfalar açmak için kullanılır. Bu işlem sayfayı ziyaret eden kişilerin ziyareti kolaylaştırmak için kullanılabilir. Şöyle ki; Sayfanızı üç kısma ayırdığınızda parçalardan bir tanesini başlık, bir tanesini menü, bir tanesini de içerik için kullanabilirsiniz.

26 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 26 <frameset> </frameset> : <frameset> tagı tagının yerine kullanılır ve body tagı Frame li bir sayfada kullanılmaz. <frameset cols= değer rows= değer border= değer bordercolor= değer framespacing= değer > cols : Sayfada kaç dikey çerçeve olacağı ölçü verilerek belirlenir. Ölçü verme işlemi için iki yöntem vardır. 1.cols= 100,200,* : Burada sayfa üç sütuna ayrılmıştır. İlk sütun 100 piksel ikinci sütun 200 piksel ve üçüncü sütun sayfanı geride kalan boyutu kadar anlamına gelir. 2.cols= %20,%80 : Burada sayfa iki sütuna ayrılmıştır ilk sütun sayfa boyutunun %20 si, ikinci sütun ise sayfa boyutunun %80 i kadardır. rows : Sayfada kaç yatay çerçeve olacağı ölçü verilerek belirlenir. Ölçü verme işlemleri cols parametresindeki ile aynıdır. Bu ayarlamalardan sonra sayfadaki Frame lerin içine html sayfaları yerleştirilir. <frame> : Bu tag ile ölçüsü verilen Frame i oluşturur. Cols ve Rows ile belirlenen her ölçü için bir <frame> tagı kullanılmalıdır. Kullanılış biçimi: <frame src= değer name= değer scrolling= değer border= değer frameborder= değer bordercolor= değer noresize> src : frame içerisine yüklenecek sayfa adını belirler. name : frame e verilecek ismi belirler. Bağlantılar (link vermek) kısmında anlatılan target parametresine değer olarak burada kullandığımız ismi vererek bir link yaratırsak linkin sonucu o frame içerisinde açılır. scrolling : Frame in kenarında kaydırma çubuklarının olup olmayacağını belirler. Yes, No, Auto değerlerini alır. border : Kenarlık çizgisinin kalınlığını belirler. frameborder : Çerçevenin kenarlığının olup olmayacağını belirler. Yes, No, Auto değerlerini alır. bordercolor : Kenarlık rengini belirler. noresize : Çerçevelerin boyutlandırılamaz olduğunu belirler. <title> Çerçeveler </title> <frameset cols="150,*"> <frame src="sol.html" name="_left"> <frameset rows="100,*"> <frame src="ust.html" name="_top"> <frame src="sag.html" name="_main"> </frameset> </frameset>

27 Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 27 Yukarıdaki örneği çalışma dizininize ornek23.html olarak kaydedin ve bir browser da HTML Kaynakları Web sayfalarının temeli olan HTML dili hakkındaki bilgilere yine İnternetten ulaşabilirsiniz. Birçok web sitesinde (Türkçe,İngilizce...) HTML ile ilgili ayrıntılı bilgilere arama motorları (search engines) aracılığıyla ulaşmak mümkündür. HTML dilini öğrendikten sonra web tasarımını kolaylaştırıcı araçlar kullanarak daha kaliteli ve kolay tasarımlar gerçekleştirebilmeniz için bazı programlar mevcuttur. Bunlardan sıkça kullanılanlar : Microsoft Front Page (http://www.microsoft.com) Netscape Composer (http://www.netscape.com) Macromedia Dreamweaver (http://www.macromedia.com) CuteHTML (http://www.download.com)

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1

Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1 Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı

Detaylı

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde, 5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı

Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

7. Çerçeveler. Bu bölümü bitirdiğinizde, 7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 12 12- FORMLAR HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla

Detaylı

HTML & CSS. Öğr.Gör. M.Ersin AKAY

HTML & CSS. Öğr.Gör. M.Ersin AKAY HTML & CSS Öğr.Gör. M.Ersin AKAY Neler Öğreneceğiz? HTML işaretleme dili CSS stil şablonları HTML Hyper Text Markup Language HTML de Neler Öğreneceğiz? Html işaretleme dili temel yapısı ve kavramları Html

Detaylı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı

İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı İNTERNET PROGRAMCILIĞI 2 14. HAFTA İçindekiler PHP ile FORM İŞLEMLERİ Form Elemanları Kullanımı GET ve POST Metodu Hedefler Php komutları kullanarak form elemanlarını etkileşimli hale getirebilir Hazırlayan

Detaylı

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine

Detaylı

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com HTML-2 Tablolar Tablolar sayfaları satırlara ve sütunlara bölmek yada metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz en önemli elemanlardır. Tablolar satır

Detaylı

2. HTML Temel Etiketleri

2. HTML Temel Etiketleri 2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU HTML Nedir? HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web in temel dilidir. Html dökümanları

Detaylı

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama HTML Web Tasarımı ve Programlama İ Ç E R İ K // HTML Internet Ortamı ve Web Tasarımı Temel HTML Etiketleri Listeleme Etiketleri Metin Düzenleme Etiketleri Bağlantı (Köprü) Oluşturma Tablolarla Çalışma

Detaylı

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011

BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.

Detaylı

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html HTML Ders 7 Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html örnek17.html htm1.html htm1.html ... Çerçeve oluşturmada

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2 BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 11 11- ÇERÇEVELER (FRAME) Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu,

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda

Detaylı

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR.

BİLGİSAYAR 4. MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 9. DERS Tablolar (HTML Giriş) YARD. DOÇ. DR. MEHTAP YALÇINKAYA HTML - TABLO Genel Bilgi Tablolar, sayfaları satırlara/sütunlara bölmek

Detaylı

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler

MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, - Maddeleme, numaralandırma,

Detaylı

Web Programlama Kursu

Web Programlama Kursu Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman 7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver

Detaylı

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci 1 2 HTML, Hyper Text Markup Language kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML

Detaylı

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır.

WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır. WEB TASARIMI 1) HTML (Hyper Text Markup Language-Hiper Metin işaretleme Dili): HTML bitr metin işaretleme dilidir. HTML kodları < ve > işaretleri arasına yazılır. Ör: : Açılış belirteci :

Detaylı

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER Bu modülü bitirdiğinizde; HTML kodları ile WEB sayfaları için gelişmiş özellikleri kullanabileceksiniz. Ayrıca, 1. WEB sayfaları içi formlar oluşturabilecek, 2. WEB

Detaylı

sayfa Başlığı Bu benim ilk sayfam bu metin koyu

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber

Detaylı

3. Metin ve Görünüm Etiketleri

3. Metin ve Görünüm Etiketleri 3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır

Detaylı

DIV KAVRAMI