HTML’YE GİRİŞ
HTML'YE GİRİŞ HTML, HyperText Markup Language, tarayıcı (browser)'lardan görülebilecek (Internet Explorer, Mozilla Firefox, Netscape gibi) internet dokümanlarını oluşturmaya yarayan bir işaretleme dilidir. İnternet üzerindeki tüm sayfaların kaynağı HTML'dir. Tarayıcı olmadan HTML kodları hiçbir şey ifade etmez. HTML dokümanları herhangi bir yazı editörü ile düzenlenip *.htm, *.html, *.shtml gibi uzantılarla kaydedilir. Bunun için notepad veya wordpad gibi yazı editörleri yeterlidir. Bunların yanında Frontpage, Dreamweaver, Homesite gibi web sitesi geliştirmek için hazırlanmış ve kodlamayı kolaylaştıran programlar da vardır.
HTML'YE GİRİŞ Her HTML dokümanı <HTML> ile başlar ve </HTML> ile biter. <> şeklinde görülen komutlara etiket (tag) adı verilir. Bir HTML dokümanı iki ana kısımdan oluşmaktadır: Başlık bölümü <head> . . . </head> etiketleri arasında yer alır. Gövde Bölümü <body> . . . </body> etiketleri arasında yer alır.
HTML'YE GİRİŞ Başlık bölümü içine <title>. . . </title> etiketi konulur. title, tarayının en üstünde görünen ve oluşturulan sayfanın başlığıdır. title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde' ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız. Türkçe içerikli sayfaların düzgün görünmesi ise Türkçe karakterler (ç, ğ, ı, , ş, ö, ü, İ) için Başlık kısmı içerisine aşağıdaki meta etiketileri eklenir. <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
HTML'YE GİRİŞ Herhangi bir web sayfasının HTML kodu görülmek istendiğinde, farenin sağ tuşuna tıklayıp Kaynağı Görüntüle seçeneği tıklanır. Bir etiketin nasıl davranması gerektiği hakkında bilgi içeren etiketin içindeki metne Değişken denir. Aşağıdaki örnekte body etiketinin içindeki bgcolor ifadesi değişkendir ve arkaplan rengini belirler. Çoğu etiket isteğe bağlı olarak ya da gerektiği için bağımsız değişkenleri kabul eder. <body bgcolor="yellow">
HTML'YE GİRİŞ Çift taraflı etiketler iç içe geçebilirler ama dikkat edilmesi gereken nokta en son açılan etiketin en önce kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği verilmiştir. <b><i>Bu bir yanlış örnektir. </b></i> <b><i>Doğrusu budur. </i></b> <br> ve <hr> gibi tek taraflı etiketler , <br /> ve <hr /> şeklinde yazılmalıdır.
BASİT HTML ETİKETLERİ Başlıklar: 6 çeşit başlık vardır:<h1>, <h2>, . . . <h6>. Bunlardan en büyüğü <h1>, en küçüğü ise <h6>'dır. <h1>H1 ile yapılan başlık</h1> <h2>H2 ile yapılan başlık</h2> <h3>H3 ile yapılan başlık</h3> <h4>H4 ile yapılan başlık</h4> <h5>H5 ile yapılan başlık</h5> <h6>H6 ile yapılan başlık</h6>
BASİT HTML ETİKETLERİ Paragraflar, Satır boşlukları ve Yatay Çizgiler: Paragraflar <p> etiketiyle oluşturulur. Paragraf metni <p> ile </p> arasında yer alır. Örneğin: <p>Bu bir paragraftır. </p> Paragraf başlatmadan bir satır boşluğu yaratmak için <br/> etiketi kullanılır. Örneğin: <p>Paragrafın ilk satırı. <br />Paragrafın ikinci satırı. </p> Sayfaya yatay çizgi eklemek için <hr> etiketi kullanılır.
BASİT HTML ETİKETLERİ HTML etiketi Etiketin Web Sayfasındaki görüntüsü <p>Birinci paragraf</p> <p>İkinci paragraf </p> <p>Üçüncü paragraf <br />Alt satır </p> <hr /> Birinci paragraf İkinci paragraf Üçüncü paragraf Alt Satır
METİNLER (YAZILAR) <font color="red" face="arial" size="3">. . </font> color yazının rengini, face yazıtipini (arial, verdana, tahoma gibi), size da yazı boyutunu belirler. size değişkeninde kullanılan rakam 1'den 7'ye kadardır.
METİNLER (YAZILAR) Font etiketi ile birlikte aşağıdaki tabloda verilen etiketler kullanılarak sayfadaki metinler biçimlendirilebilir. Etiket Açıklama Uygulama <b>. . </b> Kalın biçimlendirme Metin <i>. . </i> İtalik biçimlendirme <u>. . </u> Altı çizgili biçimlendirme <sup>. . </sup> Üst simge X2 <sub>. . </sub> Alt simge H2 <code>. . </code> Bilgisayar kodu biçimi <blockquote>. . </blockquote> Alıntı biçimi Not: Metin biçimlerken başlanılan etiketin kapatılması unutulmamalıdır.
METİNLER (YAZILAR) Renkler : HTML dokümanlarında renkler ya İngilizce isimleriyle ya da 16'lık sayı düzenindeki "hexadecimal" değerleriyle belirtilir. En sık kullanılan ve hemen hemen bütün tarayıcıların desteklediği 16 renk yandadır.
METİNLER (YAZILAR) Renkler : Örnek : <body bgcolor="green"> Bu örnekte sayfanın arkaplan rengi yeşil olur. <body bgcolor="#008000"> aynı sonucu verir. <font color="#4B0082"> Font rengi "indigo" oldu. </font> Etiketi kapatıldığı için tekrar normale döndü.
METİNLER (YAZILAR) LİNKLER: Linkler <a>. . . </a> etiketi içinde, href="" komutuyla belirtilir. Örnek: <a href="http://www.uludag.edu.tr" target="_blank">Uludağ Üniversitesi Ana Sayfası</a> Uludağ Üniversitesi Ana Sayfası Bu örnekte bir de target değişkeni verilmiştir. Adresi verilen web sayfasının başka bir pencerede açılması istenirse target="_blank" komutunun eklenmesi gerekir. Aynı pencerede açılması istenirse target değişkeni target="_top" şeklinde yazılabilir. target değişkeni yazılmazsa da sayfa aynı pencerede açılır.
METİNLER (YAZILAR) LİNKLER: title değişkenini kullanarak da fare linkin üzerine geldiğinde görünecek link açıklaması eklenebilir. Aşağıdaki örnekte fare ile linkin üzerine gelip beklendiğinde Uludağ Üniversitesi yazısını görülecektir. <a href="http://www.uludag.edu.tr" target="_blank" title=“Uludağ Ünversitesi" > Uludağ Ünversitesi </a> Uludağ Ünversitesi Eğer hazırlanan dokümanlar arasında bir bağlantı kurulmak isteniyorsa, <a> etiketi aşağıdaki gibi kullanılmalıdır. <a href="dosyaadi.html">Önceki sayfa</a> Bir e-posta adresine link verilmek isteniyorsa: <a href="mailto:mail@mail.com.tr">E-posta atmak için tıklayın. </a> E-posta atmak için tıklayın. Bu linke tıklandığında bilgisayarda kurulu varsayılan e-posta okuma programı açılır ve gönderilecek adres bölümünde etiket içinde belirtilen adres yazar.
METİNLER (YAZILAR) LİNKLER: Aynı doküman içindeki bir başka noktaya bağlantı kurulmak istenirse tutturucu noktaları (anchor points) kullanılır. Tutturucu HTML sayfasında bir yer işaretidir. İsmi ile bir bölgeyi belirler ve bu tutturucuya bir link verilebilir. Tutturucuların kullanımı aşağıdaki gibidir. Linkler başlığına aşağıdaki gibi bir tutturucu belirlenir. <a name="link">Linkler</a> Sayfanın herhangi bir bölümünde yukarıda belirlenen tutturucuya aşağıdaki gibi link verilir. <a href="#link">Linklere git</a> Aynı sayfanın başına veya sonuna gitmek için aşağıdaki örnekler kullanılabilir. <a href="#top">Sayfa Başı</a> <a href="#bottom">Sayfa Sonu</a>
RESİMLER RESİM EKLEME: <img src="resim.jpg" /> şeklinde yapılır. Dikkat edilmesi gereken durum kullanılan resmin klasörün yapısıdır. Bağımsız Değişkenler : <img src="" width="" height="" border="" alt="" /> src : Resim dosyasının kaynağını belirtmek için kulanılır. alt: Resme açıklama verilmesini sağlar. Fare resmin üstüne getirildiğinde, alt değişkeninde yazılan açıklama ekranda çıkar. Eğer resim açılmazsa, onun yerine açıklama görünür. width: Resmin genişliğini belirtmek için kullanılır. height: Resmin yüksekliğini belirtmek için kullanılır. border: Resme çerçeve eklemek için kullanılır. Çerçeve kalınlığı (piksel olarak) sayı olarak verilir. Örnek: <img src="resim.jpg" />
RESİMLER RESİM EKLEME: Eğer web sayfasının arka planında bir resmin çıkması istenirse: <body background="resim.jpg"> şeklinde yazılır. Resimleri linke dönüştürmek için <a> etiketi ile <img> etiketi iç içe kullanılır. <a href="http://www.uludag.edu.tr" target="_blank"><img src="uludag.jpg" width="200" height="200"/></a> Not: Resimlerin width ve height değişkenlerinin belirtilmesi sayfanın yüklenirken şeklinin bozulmasını önler.
HTML'YE GİRİŞ LİSTELER: Üç çeşit liste vardır: 1. Sıralı Liste (ol-Ordered List): HTML Etiketi Etiketin Web Sayfasındaki görüntüsü <ol type="1">Programlama Dilleri: <li>Assembler <li>C, C++ <li>Delphi <li>Visual Basic </ol> <ol type="a">Office Yazılımları: <li>Word <li>Excel <li>Powerpoint <li>Access <li>Outlook </ol> Programlama Dilleri: Assembler C, C++ Delphi Visual Basic Office Yazılımları: Word Excel Powerpoint Access Outlook Yanda görüldüğü gibi type değişkeni sıralı listenin türünü belirler. type değişkeni için aşağıdaki değerlerden biri kullanılabilir: type: {1, a, A, I, i}
HTML'YE GİRİŞ LİSTELER: 1. Sıralı Liste (ol-Ordered List): Liste start değişkeni ile istenilen sayıdan başlatılabilir: HTML etiketi Etiketin Web Sayfasındaki görüntüsü <ol start="199">Office Yazılımları: <li>Word <li>Excel <li>Powerpoint <li>Access <li>Outlook </ol> Office Yazılımları: 199. Word 200. Excel 201. Powerpoint 202. Access 203. Outlook
HTML'YE GİRİŞ 2. Sırasız Liste (ul-Unordered List): LİSTELER: Sırasız listelerde type değişkeni sırasız listenin işaretini belirler. type değişkeni için aşağıdaki değerlerden biri kullanılabilir: type:{square, disc, circle} HTML etiketi Etiketin Web Sayfasındaki görüntüsü <ul type="circle"> Programlama Dilleri: <li>Assembler</li> <li>C, C++ </li> <li>Delphi </li> <li>Visual Basic </li> </ul> <ul type="disc">Office Yazılımları: <li>Word</li> <li>Excel</li> <li>Powerpoint</li> <li>Access</li> <li>Outlook</li> Programlama Dilleri: Assembler C, C++ Delphi Visual Basic Office Yazılımları: Word Excel Powerpoint Access Outlook
HTML'YE GİRİŞ 3. Tanımlama Listeleri (dl-Definition List): dt-definition term dd-definition description LİSTELER: 3. Tanımlama Listeleri (dl-Definition List): HTML etiketi Etiketin Web Sayfasındaki görüntüsü <dl> <dt>Karbonhidrat ve ben <dd>En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım. </dd></dt> <dt>Sebze ve ben <dd>Sebzeyle aram pek iyi değildir ama taze fasulye oldukça leziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir. </dd></dt> <dt>Et ve ben <dd>Et seven bir insanımdır. Her çeşit kebabı afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. </dd></dt> </dl> Karbonhidrat ve ben En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım. Sebze ve ben Sebzeyle aram pek iyi değildir ama taze fasulye oldukça leziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir. Et ve ben Et seven bir insanımdır. Her çeşit kebabı afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim.
HTML'YE GİRİŞ TABLOLAR Tablolar <table>. . . . </table> etiketleri arasında oluşturulur. <table> etiketinden sonra daima <tr> gelir. Her satır tanımlandığında <tr>, her hücre tanımlandığında da <td> etiketi kullanılır. Örnek : <table border="1"> <tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr> <tr><td>4. hücre</td><td>5. hücre</td><td>6. hücre</td></tr> </table>
HTML'YE GİRİŞ TABLOLAR Bağımsız Değişkenler: <table border="" cellpadding="" cellspacing="" width="" height="" bgcolor="" align="" valign=""> <td height="" width="" bgcolor="" align="" valign="" colspan="" rowspan=""> border : Çerçevenin kalınlığını belirler. border="0" yapılırsa tabloda çerçeve bulunmaz, bu miktar arttırıldıkça çerçevenin kalınlığı da artar. cellpadding, cellspacing : Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların arasındaki boşluk ise cellspacing değişkeni ile belirtilir. bgcolor: <table bgcolor="red"> şeklinde kullanılarak bütün tablo ya da <td bgcolor= "red"> şeklinde sadece tek bir hücre renklendirilir. align : Hücredeki elemanın yatay konumunu belirler ve "right, left, center" seçenekleri ile kullanılır. valign : Hücre elemanının düşey konumunu belirler, seçenekleri "top, bottom, middle"dır. colspan, rowspan : Aynı satırdaki hücrelerin birleştirilmesi için colspan, aynı sütundaki hücrelerin birleştirilmesi için de rowspan değişkeni kullanılır. Birleştirilen hücreye ait <td>. . </td> etiketi silinir.
HTML'YE GİRİŞ TABLOLAR Örnek : <table border="1"> <tr> <td>1. hücre</td> <td>2. hücre</td> <td>3. hücre</td> </tr> <tr> <td rowspan="2">4. hücre</td> <td colspan="2">5. hücre</td> </tr> <tr> <td>6. hücre</td> <td>7. hücre</td> </tr> </table>
HTML'YE GİRİŞ FORMLAR Formlar <form>. . . </form> etiketleri arasında oluşturulur. Form bilgileri action değişkeninin içine yazılan dosyaya veri olarak gönderilebilir. Formlar sayesinde anket ve geribildirim uygulamaları hazırlanabilir.
HTML'YE GİRİŞ FORMLAR Örnek: <form name="kimlik" action="gonder.php" method="get"> Adı Soyadı : <input type="text" size="20" name="isim"><br> Doğum yeri : <input type="text" size="20" name="dogumyer" ><br> Doğum tarihi : <input type="text" size="10" name="dogumtarih" ><br> Cinsiyet : <input type="radio" name="cins" value="erkek" > Erkek <input type="radio" name="cins" value="kiz"> Kiz<br><br> Hobiler:<br> <input type="checkbox" name="muzik" >Müzik dinlemek<br> <input type="checkbox" name="bungee" > Jiu-Jitsu <br> <input type="checkbox" name="halay“>Sinemaya gitmek<br> <input type="checkbox" name="diger">Diğer :<br> <textarea rows="4" cols="30" name="diger"></textarea><br><br> Şifrenizi giriniz:<br> <input type="Password" size="15"><br> <input type="submit" value="GÖNDER"> <input type="reset" value="SIL"> </form>
HTML'YE GİRİŞ FORMLAR action: Formun gönderileceği adres (dosya adı) belirtilir. method="get": Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır. method="post": Formdaki bilgiler bir adrese postalanacaksa kullanılır. type="text" : Tek satırlık bir metin alanı açar. size="" : Bu metin alanının boyutunu belirler. type="checkbox" : Çok seçenekli bir sorunun birden fazla cevabının alınmasını sağlar. type="radio" : Tek seçenekli bir sorunun tek cevabı alınır. type="submit" : Formu action'la belirtilen dosyaya yönlendiren bir buton oluşturur. type="reset" : Bu butona tıklanınca form boşaltılır. type="password" : Bir password alanı oluşturur. Buraya girilen her karakter * şeklinde görünür. <textarea rows="" cols=""> : type="text" gibi tek satırlı değil de çok satırlı bir metin alanı isteniyorsa bu etiket kullanılır. cols metin alanının uzunluğunu, rows ise yüksekliğini piksel cinsinden verir.
HTML'YE GİRİŞ Listeleme: Select ve option etiketlerini kullanılarak seçimlik liste (menü) oluşturabilir. Option etiketi ile belirtilen her bir değer listenin bir elamanını oluşturur ve fareyle seçilen bu elemanlardan biri select etiketinde belirtilen değişkenin değeri haline gelir. Örnek: <select name="otolar"> <option>Toyota</option> <option>BMW</option> <option>Peugeot</option> <option>Renault</option> <option>Seat</option> <option>Lada</option> </select>
HTML'YE GİRİŞ