2011 2 HTML Hyper Text Markup Language HTML hakkında internetteki bilgilerin derli toplu olduğu bilgi kaynağınız Yazar: Mert Şahin Blogum: medyablog.com.nu
ÖNSÖZ Bu kitap bilgilerimi arşivlemeye başlamakla oluşmaya başladı. İnternette okuduğum ve sürekli ihtiyaç duyduğum bilgileri bilgisayarımda toplayarak bir kitap haline getirmek istedim. Bu doğrultuda da bu kitabı oluşturmaya karar verdim. Kitabım umarım sizler için son derece yararlı ve öğretici bir kitap olur. Yakın zamanlarda CSS kitabımı da yazmayı planlıyorum. Genelde kaynağımı geniş tutarım ama bu kitap için sadece bir kaynak kullandım. İnternetteki sitelerde siz daha da geniş bilgiler bulabilirsiniz. 3
HAKKIMIZDA Webmasterlık hayatım kendime ait bedava bir site açmak hayaliyle başladı. Bir arkadaşın böyle bir servis kullandığını öğrenince bende daha detaylı araştırmalara başladım ve Bedava Sitem gibi bedava site veren bir hizmetle tanıştım. İlk başlarda kendimi şartlandırmıştım ve webmaster olamayacağımı düşünüyordum. Sonra biraz hırsla bir şeyler öğrenemeye başladım. Bir şeyler öğrenmemde en önemli pay bu konular hakkında bilgi veren siteler(forum, blog vb.) ve Bedava Sitem in kendi teknik forumu olmuştur. Sonra yavaş yavaş bu konuda başarılı olan arkadaşlar ile tanıştım ve webmasterlık alanında kendim için büyük adımlar attım. Bu nedenle Bedava Sitem forumuna ve Bedava Sitem e çok borçluyum. Zamanla forumda tanınan biri olmuştum. Çok fazla adminlik ve moderatörlük teklifi geliyordu. Ben de gelişimim açısından en uygun kararı vermeye çalışıyordum. En sonunda VİKYMİKY.NET gibi bir sitede moderatörlük yapmaya başladım. Admini internette çok yakın olduğum bir ağabeyimdi ve forum işlerini bırakıp bana adminlik verdi ama teklifini kabul etmedim ve kendisi olmadığı sürece forumda olmayacağımı ona belirttim. Bu benim kaçırdığım en önemli fırsatlardan birisidir ama benim için önemli olan insanlara karşı duyduğum bağlılıktır. Bu nedenle teklifi reddettiğim için hiç üzülmedim. Zamanla ftp destekli bir siteye geçmeye karar verdim. Bu kararım ileride webmaster konularında gelişmemi olumlu etkileyecek bir karar. Arkadaşlarla şimdi bu siteyi idare etmeye çalışıyoruz. Bu site sayesinde de php öğrenmeye başlayacağım. Kendi gelişimim için yine olumlu bir adım. Ne de olsa php en çok kullanılan kodlama dili. Artık yazılarımı medyablog.com.nu dan takip edebilirsiniz. 4
İÇİNDEKİLER HTML'e Giriş 6 HTML Öğeleri 8 Temel HTML Etiketleri 10 HTML Parametreler (Nitelikler) 13 HTML Metin Biçimlendirme 14 HTML Özel Karakterler 16 HTML Bağlantılar (Linkler) 18 HTML Çerçeveler 20 HTML Tablolar 22 HTML Listeleme 25 HTML Form Oluşturma 27 HTML Resimler 30 HTML Arka Plan 32 HTML Renkler 33 HTML Renk Değerleri 34 HTML Tasarım 35 HTML Fontlar 36 HTML Stiller 37 HTML Başlık 38 HTML Meta 39 HTML Uniform Resource Locators (URL) 40 HTML Script'ler 41 HTML 4.0 Standard Parametreleri 42 HTML 4.0 Olay Parametreleri 43 Sayfanızı Yayınlamaya Hazır Mısınız? 45 5
HTML dosyası nedir? HTML Giriş 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 markup tags (işaretlenmiş etiketler) içerir Markup tag'ler web tarayıcınıza sayfanın nasıl gösterileceğini gösterir. Bir HTML dosyasının uzantısı htm veya html olmak zorundadır. Bir HTML dosyası basit bir text editör ile oluşturulabilir. Denemek İster Misiniz? Eğer Windows kullanıyorsanız not defterini açın. Eğer MAC kullanıyorsanız SimpleText programını açın. Eğer OSX kullanıyorsanız, TextEdit'i açın ve aşağıdakileri yapın: "Format" menüsünü açın ve "Rich Text" yerine "Plain Text" seçeneğini seçin. Sonra "Text Edit" menüsünün altında bulunan "Preferences" penceresini açın ve "Ignore rich text commands in HTML files" seçeneğini seçin. Eğer bu değişiklikleri yapmazsanız HTML dosyasınız büyük ihtimalle çalışmayacaktır! Aşağıdaki metini açtığınız editör içerisine yazın: <html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> Dosyayı "sayfam.htm" olarak kaydedin. Oluşturduğunuz dosyaya çift tıklayın. Dosya tarayıcınızda açılacaktır. 6
Örneğin Açıklaması HTML dökümanınızdaki ilk tag (etiket) <html>'dir. Bu etiket tarayıcınıza bir HTML dosyasının koşturulacağını söyler. HTML dökümanınızdaki son tag (etiket) </html>'dir. Bu da tarayıcınıza HTML dosyasının sonunun geldiğini söyler. <head> ve </head> etiketleri arasında kalan kısım başlık bilgilerini içerir. Başlık bilgileri tarayıcı penceresinde görüntülenmez. <title> ve </title> etiketleri arasında kalan kısım dökümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir. <body> ve </body> etiketleri arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısımı içerir. <b> ve </b> etiketleri arasında kalan kısım ise koyu (bold) biçimde gösterilir. HTML Editörleri Hakkında Not: HTML dosyalarınızı kolay bir şekilde WYSIWYG (what you see is what you get), FrontPage veya Dreamweaver ile de hazırlayabilirsiniz. Bununla beraber, eğer profesyonel anlamda HTML çalışmak istşyorsanız mutlaka not defteri (notepad) kullanmanızı tavsiye ederiz. 7
HTML Öğeleri HTML dökümanları, HTML öğeleri kullanılarak oluşturulan metin dosyalarıdır. HTML öğeleri, HTML etiketleri kullanılarak tanımlanır. HTML Etiketleri: HTML etiketleri, HTML öğelerini belirtmek için kullanılır. HTML etiketleri 2 karakter ile sınırlanır. < ve > Bu karakterlere grup parantezleri (angle brackets) denir. HTML etiketleri çift olarak kullanılır. Örn: <b> Bu metin koyu fonttadır. </b> Bu çiftlerden birincisine başlama etiketi, ikincisine ise bitiş etiketi denir. Başlama ve bitiş etiketleri arasında kalan herşeye ise öğe içeriği (element contents) denir. HTML etiketleri büyük/küçük harfe duyarlı değildir, yani <b> ve <B> aynı görevi görür. (Türkçe karakter olan "İ" ve "ı" harflerinin bu durumun dışında kaldığını unutmayınız.) HTML Öğeleri: Önceki sayfadaki örneğimizi hatırlayalım: <html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html> Bu bir HTML öğesidir: <b>bu metin koyu</b> HTML öğesi başlangıç etiketi olan <b> ile başladı. HTML öğesinin içeriği: Bu metin koyu HTML öğesi bitiş etiketi olan </b> ile sonlandırıldı. <b> etiketinin amacı, görüntülenecek olan metinin koyu gösterilmesi gerektiğini bildirmektir. 8
Etiketleri neden küçük harflerle belirtiriz? HTML etiketlerinin büyük/küçük harfe duyarlı olmadığını söylemiştik: <B> ve <b> aynıdır. Eğer Web'de gezintiye çıkarsanız bir çok sitenin kaynak kodunun bütük harflerle yapılmış olduğunu göreceksiniz.. Fakat biz her zaman küçük harf kullanırız. Neden? Eğer Web standartlarını kontrol etmek istiyorsanız küçük harf kullanmalısınız. World Wide Web Consortium (W3C) HTML 4 versiyonu ile beraber küçük harf kullanımını önerir. Ayrıca XHTML (yeni nesil HTML) dili de bunu kullanmanızı şiddetle önerir. 9
Temel HTML Etiketleri HTML dilindeki en önemli etiketler, başlıklar, paragraflar ve satır atlama etiketleridir. HTML'i öğrenmenin en iyi yolu örneklerle çalışmaktır. Sizin için çok kullanışlı bir HTML deneme editörü hazırladık. Bu editör ile kendi kaynak kodlarınızı girip anında test edebilirsiniz. Başlıklar: Başlıklar <h1> ve <h6> dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir. <h1> en büyük puntoyu belirtirken, <h6> ise en küçük puntoyu belirtir. <h1>bu bir başlık</h1> <h2>bu bir başlık</h2> <h3>bu bir başlık</h3> <h4>bu bir başlık</h4> <h5>bu bir başlık</h5> <h6>bu bir başlık</h6> HTML dili otomatik olarak başlık etiketlerinin öncesinde ve sonrasında bir satır atlar. Paragraflar: Paragraflar <p> etiketi ile belirtilir. <p>bu bir paragraf</p> <p>bu da başka bir paragraf</p> HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar. Etiketleri kapatmayı unutmayın! Bir önceki örnekte paragrafın </b> etiketi ile bittiğini gördünüz: <p>bu bir paragraf <p>bu da başka bir paragraf Çoğu browser büyük ihtimalle yukarıdaki gibi yazsanız bile çalıştıracaktır ama buna pek fazla güvenmeyin çünkü gelecek versiyon HTML dili hiçbir etiketi atlamanıza izin vermeyecektir. 10
Satır atlama: Satır atlamak için <br> etiketi kullanılır. Ancak bu etiketin yeni bir paragraf açmadığını da unutmayınız. <p>bu <br>bir <br>çok satırlı paragraftır.</p> <br> etiketi boş bir etikettir. </br> gibi bir bitiş etiketi yoktur. <br> mi <br /> mi? Bir çok yerde <br> etiketinin <br /> olarak kullanıldığını göreceksiniz. Çünkü <br> etiketi bir bitiş etiketi bulundurmaz ve bu özellik gelecek nesil HTML (XML ve XHTML) dilinin ilk kuralını bozmaktadır. Bu yüzden <br /> etiketini kullanmanızı tavsiye ederiz. HTML içinde açıklama (yorum) satırları yaratmak: Yorum satırları HTML kaynak kodu içerisine programcıların hangi satırın ne iş gördüğünü anlatmak için kullanılır. Bu satırlar, sayfa browser'da görüntülenirken dikkate alınmazlar. <!-- Bu bir açıklama --> Temel Notlar - Yararlı İpuçları: HTML kodlarınızın başka browser'larda nasıl görüntüleneceğini asla bilemezsiniz. Ayrıca bazı kullanıcılar geniş ekran monitörlere sahipken bazıları küçük ekranlara sahiptir. Bu sebeple metinler, kullanıcı penceresini her yeniden boyutlandırmasında değişecektir. Asla metinlerinizi fazladan boşluk bırakmak gibi tekniklerle biçimlendirmeye çalışmayın. HTML koyduğunuz boşlukları sürekli teke indirecektir. Boş bir satır bırakmak için <p> kullanmak kötü bir tekniktir, bunun yerine <br /> etiketini kullanınız. (Ama asla <br /> ile sıralı liste oluşturmayınız. HTML ile listeleme konusuna kadar bekleyiniz.) 11
Temel HTML Etiketleri: Etiket (Tag) Açıklama <html> Bir HTML dökümanını belirtir. <body> Dökümanın görüntülenecek kısmını berlitir. <h1> to <h6> Başlıkları belirtir. <p> Bir paragraf belirtir <br> Boş bir satır bırakır. <hr> Sayfada yatay bir çizgi çizer. <!--> Yorum satırı olduğunu belirtir. 12
HTML Parametreler (Nitelikler): Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar. HTML Etiket Nitelikleri: HTML etiketleri parametrelere sahip olabilir. Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar. Parametreler daima isim/değer çiftleri arasında gelir: name="value". Parametreler daima başlangıç etiketi içerisinde belirtilir. Parametre Örneği 1: <h1> başlık belirtir. <h1 align="center"> başlık belirtmesinin yanında, metinin ortalanacağını da belirtir. Parametre Örneği 2: <body> HTML'in body kısmını belirtir. <body bgcolor="yellow"> Body kısmını belirtmekle beraber, arkaplan renginin de sarı olacağını belirtir. Değerleri (Value) Daima Tırnak İçerisine Alın! Parametrelerin değerli her zaman tırnak içerisinde olmalıdır. Bazen değerin kendisinin içinde de çift tırnak kullanılması gerektiği zamanlarda ise, değerin tamamını tek tırnak içerisine de alabilirsiniz: name='cem "GORA" Yilmaz' 13
HTML Metin Biçimlendirme HTML, metini koyu veya italik yapmak için birçok tanımlama biçimi barındırır. HTML Kaynak Kodları Nasıl Görüntülenir? Tarayıcınızın araç çubuğunda "Görünüm" menüsüne geldikten sonra "Kaynağı Görüntüle" seçeneğini tıklayınız. Birçok tarayıcıda Ctrl+U bu görevi yerine getirir. ;) Metin Biçimlendirme Etiketleri Etiket (Tag) <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <s> <strike> <u> Açıklama Koyu metin Büyük metin Vurgulanmış metin İtalik metin Küçük metin Güçlü metin Alt indis metini Üst indis metini Altı çizili metin Üstü çizili metin Önemsiz etiket, bunun yerine <del> kullanınız. Önemsiz etiket, bunun yerine <del> kullanınız. Önemsiz etiket, bunun yerine styles kullanınız. "Programlama Dilleri" Etiketleri: Etiket (Tag) <code> <kbd> <samp> <tt> <var> <pre> <listing> <plaintext> <xmp> Açıklama Programlama dili metini Klavye metini Örnek bilgisayar kodu metini Tele tip metin Değişken Biçimlendirilmemiş metin Önemsiz etiket, bunun yerine <pre> kullanınız. Önemsiz etiket, bunun yerine <pre> kullanınız. Önemsiz etiket, bunun yerine <pre> kullanınız. 14
Alıntılar ve Açıklamalar İle İlgili Etiketler: Etiket (Tag) <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Açıklama Kısaltma Baş harfleri ile kısaltma Adres öğesi Metin yönü Uzun alıntı Kısa alıntı Alıntı Tanımlama terimi 15
HTML Özel Karakterler HTML içinde bazı karakterler ("<" gibi) kaynak kodlarda yazılarak ekranda görüntülenmesi sağlanamaz. Bu tip karakterleri görüntüleyebilmek için bazı özel karakterler kullanılır. Özel Karakterler: HTML dökümanı içinde bu tip karakterleri görüntülemek için < veya < yazmalıyız. Bir numara yerine isim kullanılmasının avantajı, isimlerin daha rahat hatırlanabilmesidir. Dezavantajı ise piyasadaki tüm tarayıcılarda tam desteklenmemesidir. Özel karakterlerin büyük/küçük harfe duyarlı olduğuna dikkat ediniz. Birden Fazla Boşluk Bırakabilmek: Normalde HTML kodları içindeki 2 kelime arasında 10 tane de boşluk bıraksanız bunlardan sadece 1 tanesi dikkate alınır. Eğer birden fazla boşluk bırakmak istiyorsanız özel karakterlerini kullanınız. En Çok Kullanılan Özel Karakterler: Sonuç Açıklama Özel karakterleri Numaralı Hali Fazladan boşluk < Küçüktür < < > Büyüktür > > & Ve & & " Alıntı " " ' apostorof ' (IE'de çalışmaz) ' 16
Bazı Başka Özel Karakterler: Sonuç Açıklama Özel karakterleri Numaralı Hali Cent Pound Yen Euro Section Copyright Kayıtlı marka Çarpma Bölme 17
HTML Bağlantılar (Linkler) HTML başka sayfalara kendi üzerinden bağlantı (link) kurmak için hyperlink (çoklu bağlantı) özelliğini kullanılır. <a> Etiketi ve href Parametresi: HTML başka bir dökümana link oluşturmak için <a> etiketini kullanır. Kullanım biçimi: <a href="url">görüntülenecek Metin</a> Bir örnek: <a href="http://www.htmldersleri.org/">kodlayın, Tıklayın, Görün...</a> Hedef (target) Parametresi: Target parametresi ile dökümanın nerde açılacağını belirtebilirsiniz. Aşağıdaki bağlantıya tıklanırsa, döküman yeni bir pencerede açılacaktır. <a href="http://www.htmldersleri.org/" target="_blank">kodlayın, Tıklayın, Görün...</a> <a> Etiketi ve Name Parametresi: Bu parametre ile aynı döküman içinde belirlenmiş başka bir satıra direkt geçiş yapılabilir. Kullanım Biçimi: <a name="label">görüntülenecek Metin</a> Bir Örnek: <a name="ipucu">yararlı Bilgiler</a> İpucu kısmına direkt link vermek için, URL'nin sonuna #ipucu yazınız: <a href="http://www.htmldersleri.org/ornekler/html_links.htm#ipucu">yararlı İpuçları</a> 18
Dosya ismi kullanmadan o dosya içerisinde bir yere geçmek: <a href="#ipucu">yararlı İpuçları</a> 19
HTML Çerçeveler Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz. Çerçeveler: Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz. Her HTML dökümanı bir çerçeve (frame) ve her çerçeve birbirinden bağımsız olur. Çerçeve kullanmanın dezavantajları: Web geliştiricilerin birden fazla HTML dökümanını takip etmesi zordur. İstenilen sayfanın yazıcıya gönderilmesi zordur. Frameset Etiketleri: <frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirler. Her frameset satır (rows) veya sütun (cols) olarak belirlenir. Frame Etiketi: <frame> etiketi, her bir çerçevede hangi HTML dökümanının görüntüleneceğini belirtir. Aşağıdaki örnekte 2 sütun çerçeveli bir döküman bulunmaktadır. İlk çerçeve için tarayıcı penceresinin genişliğinin %25'i ayrılmıştır. İkincisine ise %75'i ayrılmıştır. "frame_a.htm" birinci sütuna, "frame_b.htm" ise ikinci sütuna yerleştirilmiştir: <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> Not: frameset sütun değerleri ayrıca piksel olarak ta belirtilebilir: (cols="200,500"), ayrıca geri kalanının da kendi kendini 100 değerine tamamlamasına olanak verilebilir: (cols="25%,*"). 20
Temel Notlar - Yararlı İpuçları: Çerçevelerde görünebilir kenarlıklar vardır. Kullanıcı bunları sürükleyerek yeniden boyutlandırabilir. Bunu önlemek için noresize="noresize" parametrelerini <frame> etiketi içine yazabilirsiniz. <noframes> etiketini döküman içerisine eklerseniz, tarayıcınız çerçeve özelliğini desteklemez hale gelir. Önemli: <body></body> etiketlerini <frameset></frameset> etiketleri ile beraber kullanamazsınız! Frame Etiketleri: Etiket (Tag) <frameset> <frame> <noframes> <iframe> Açıklama Frame ayarlarını belirtir. Alt pencere (çerçeve) belirtir. Frame desteğinin kullanılmamasını sağlar. İç frame belirtir. 21
HTML Tablolar HTML ile tablolar oluşturabilirsiniz. Tablolar: Tablolar <table> etiketi ile belirtilir. Bir tablo <tr> etiketi satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür. <td> etiketinin anlamı "table data"dır. Bir veri hücresi (data cell) metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler, tablolar vs. içerebilir. <table border="1"> <tr> <td>satır 1, hücre 1</td> <td>satır 1, hücre 2</td> </tr> <tr> <td>satır 2, hücre 1</td> <td>satır 2, hücre 2</td> </tr> </table> Çıktısı aşağıdaki gibi olacaktır: Tablolar ve Kenarlık (border) Parametresi: Eğer bir border parametresi belirtmezseniz, tablonuz kenarlık olmadan görüntülenir. Bu bazen yararlı olabilir ama çoğu zaman kenarlıkları göstermek daha çok işinize yarayacaktır. Kenarlıkları göstermek için aşağıdaki parametreyi kullanmalısınız: <table border="1"> <tr> <td>satır 1, Hücre 1</td> <td>satır 1, Hücre 2</td> </tr> </table> 22
Tablolarda Başlıklar: Başlıklar <th> etiketi ile belirtilir. <table border="1"> <tr> <th>başlık</th> <th>başka Başlık</th> </tr> <tr> <td>satır 1, Hücre 1</td> <td>satır 1, Hücre 2</td> </tr> <tr> <td>satır 2, Hücre 1</td> <td>satır 2, Hücre 2</td> </tr> </table> Çıktısı: Bir Tabloda Boş Hücreler: Veri içermeyen hücreler birçok tarayıcıda görüntülenmezler. <table border="1"> <tr> <td>satır 1, Hücre 1</td> <td>satır 1, Hücre 2</td> </tr> <tr> <td>satır 2, Hücre 1</td> <td></td> </tr> </table> 23
Çıktısı: Boş hücre etrafındaki iç kenarlıkların görünmediğine dikkat edin. (Mozilla Firefox bunu görüntüler). Bundan kurtulmak için, ( ) özel karakterlerini boş hücre içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz. <table border="1"> <tr> <td>satır 1, Hücre 1</td> <td>satır 1, Hücre 2</td> </tr> <tr> <td>satır 2, Hücre 1</td> <td> </td> </tr> </table> Çıktısı: Tablo Etiketleri: Etiket (Tag) <table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> Açıklama Tablo Tablo başlığı Satır Hücre Manşet Hücre grupları Sütun genişliği Tablo başı Tablo body özelliği Tablonun en alt kısmı 24
HTML Listeleme HTML, sıralı, sırasız ve tanımlama listelerini destekler. Sırasız Liste: Sırasız bir liste maddelerden oluşur. Liste içeriği madde imleri ile işaretlenir. Sırasız listeleme <ul> etiketi ile başlar. Her madde de <li> etiketi ile başlar. <ul> <li>kahve</li> <li>süt</li> </ul> Çıktısı: Bir liste madde içerisine paragraflar, resimler, linkler, başka listeler ve satır boşlukları koyabilirsiniz. Sıralı Listeler: Maddeler rakamlar ile listelenir. Sıralı listeleme <ol> etiketi ile başlar. Her madde de <li> etiketi ile başlar. <ol> <li>kahve</li> <li>süt</li> </ol> Çıktısı: Tanımlama Listeleri: Bir tanımlama listesi maddelerin sıralanması demek değildir. Bu, terimlerin açıklanması demektir. 25
Bir tanımlama listesi <dl> etiketi ile başlar. Her terim <dt> etiketi ile başlar. Each terimin tanımlaması da <dd> etiketi ile başlar. <dl> <dt>kahve</dt> <dd>koyu sıcak içecek</dd> <dt>süt</dt> <dd>beyaz soğuk içecek</dd> </dl> Çıktısı: Bir tanımlama listesi içerisine paragraflar, resimler, linkler, başka listeler ve satır boşlukları vs. koyabilirsiniz. Listeleme Etiketleri: Etiket (Tag) <ol> <ul> <li> <dl> <dt> <dd> <dir> <menu> Açıklama Sıralı liste Sırasız liste Liste maddesi Tanımlama listesi Terim tanımı Tanım açıklaması Önemsiz etiketi. Yerine <ul> kullanınız. Önemsiz etiketi. Yerine <ul> kullanınız. 26
HTML Form Oluşturma HTML Formları kullanıcının klavye ile girdiği bilgileri işlemek için kullanılır. Formlar: Bir form, form elemanlarını içinde bulunduran alandır. Form elemanları kullanıcıların bilgi girmesini sağlayan elemanlardır. (metin alanları, açılabilir listeler, seçenek kutuları, kontrol kutuları) Kullanım biçimi: <form> <input> <input> </form> Giriş (Input): En çok kullanılan form etiketi <input> etiketidir. Metin Alanları: Kullanıcının rakam veya harf girmesini istediğiniz yerlerde bunu kullanabilirsiniz. <form> Adınız: <input type="text" name="isim"> <br> Soyadınız: <input type="text" name="soyad"> </form> Çıktısı: Formun kendisinin görünmediğine dikkat ediniz. Ayrıca birçok tarayıcının metin giriş alanı için varsayılan olarak 20 karakterlik alan bıraktığına dikkat ediniz. 27
Seçenek Butonları (Radio Buttons): Kullanıcının birçok seçenek içinden sadece bir tanesini seçebilmesini istediğiniz zaman bunu kullanırsınız. <form> <input type="radio" name="cinsiyet" value="erkek"> Erkek <br> <input type="radio" name="cinsiyet" value="kadın"> Kadın </form> Çıktısı: Kontrol kutuları (Checkboxes): Kullanıcının, sunulan seçenekler içinden istediği kadar seçmesini sağlamak için bunu kullanabilirsiniz. <form> Bir bisikletim var: <input type="checkbox" name="tasit" value="bisiklet"> <br> Bir arabam var: <input type="checkbox" name="tasit" value="araba"> <br> Bir uçağım var: <input type="checkbox" name="tasit" value="uçak"> </form> Çıktısı: Formlarda "Action" Parametresi ve "Submit" Butonu: Kullanıcı submit (gönder) butonuna tıkladığında girilen bilgiler başka bir sayfaya gönderilir. Action parametresinde ise bilgilerin hangi dosyaya gönderileceği belirtilir. Bilgilerin gönderildiği dosya, genellikle gelen bilgilerle ilgili ne tür işlem yapılacağı hakkında bilgiler içerir. 28
<form name="input" action="ornekler/html_form_action.php" method="get" target="_blank"> Kullanıcı Adı: <input type="text" name="kullanici"> <input type="submit" value="gönder"> </form> Çıktısı: Eğer yukarıdaki kutuya bir şeyler yazıp butona tıklarsanız, girdiğiniz bilgileri "html_form_action.php" dosyasına gönderirsiniz. Yeni pencerede açılacak olan bu sayfada girmiş olduğunuz bilgileri görebilirsiniz. Form Etiketleri: Etiket (Tag) <form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> <isindex> Açıklama Form Giriş alanı Çok satırlı metin giriş alanı Etiket Alanların ayarlarının nasıl olacağını belirtir. Manşet Açılabilir liste (combobox) Seçenek kutusu grubu Açılabilir liste içindeki maddeleri belirtir. Buton Önemsiz. Bunun yerine <input> etiketini kullanınız. 29
HTML Resimler HTML dökümanı içerisinde resim görüntüleyebilirsiniz. Resim "<img>" Etiketi ve "src" Parametresi: HTML dökümanlarda resimler <img> etiketi ile belirtilir. <img> etiketi kapalıdır, yani bu etiket mutlaka parametreler ile kullanılır ve bir kapatma etiketi bulundurmaz. Sayfanızda bir resim görüntüleyebilmek için "src" parametresini kullanmak zorundasınız. Src, "source" (kaynak) anlamına gelir. Buraya görüntülemek istediğiniz resim dosyasının yolunu yazarsınız. Kullanım biçimi <img src="resim yolu"> <img src="dosyalar/banner.jpg"> <img src="http://www.htmldersleri.org/dosyalar/banner.jpg"> "Alt" Parametresi: Bu parametre alternatif metin (alternate text) anlamına gelir. Bu metin, resimin üzerine mouse gelip bir süre beklendiği zaman görünen metindir. <img src="home.gif" alt="ana Sayfa"> Bu özellik sayesinde bazen sayfa yüklenirken resimlerin görüntülenememesi gibi problemlerde oradaki resmin ne olduğunu anlarız. Bu parametre yeni nesil HTML'de WWC tarafından zorunlu hale gelmiştir. Temel Notlar - Yararlı İpuçları: Bir HTML dosyasına 10-15 resim koymak sayfanın yüklenişi sırasında yavaşlamaya neden olur. Bu yüzden sayfa tasarlarken bu notu dikkati alınız. Unutmayın ki kullanıcıların bir web sayfasında aradığı ilk özellik, hızdır! 30
Image Etiketleri: Etiket (Tag) <img> <map> <area> Açıklama Resim Bir resimden alınacak belirli bir bölge. Bir resimde belirlenmiş olan bir bölgenin tıklanabilir bölge ölçüsü. 31
HTML Arka Plan İyi bir arka plan tasarımı, bir web sitesinin gerçekten çok iyi görünmesini sağlayabilir. Arka Plan: <body> etiketi arka plan belirlemek için iki tane parametre bulundurur. Bunlar "bgcolor" ve "background" parametreleridir. bgcolor ile arka plan rengi, background ile de bir arka plan resmi belirtebilirsiniz. Bgcolor <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> Background <body background="ornekler/background.jpg"> <body background="http://www.fikrin.net/grafik/logo.jpg"> Not: Eğer bir arka plan resmi kullanmak isterseniz aşağıdaki soruları aklınıza getirmeyi unutmayınız. Yüklenmesi uzun sürer mi? Sayfadaki diğer resimler ile uygun bir görüntü sağlar mı? Sayfadaki metinlerin rengi ile uygun bir görüntü sağlar mı? Sayfaya döşendiği zaman fark edilmemesi sağlanacak mı? Sayfadaki metinlerden daha az dikkat çekecek mi? 32
HTML Renkler Renkler Kırmızı (Red), Yeşil (Green) ve Mavi (Blue) "ışık" renklerinin kombinasyonu ile oluşturulur. Işık renklerinde ana renkler kırmızı, yeşil ve mavidir. Renk Değerleri: HTML renkleri hexadecimal değerler ile RGB (kırmızı yeşil mavi) kombinasyonu ile belirtilebilir. En düşük değer 0 (hex #00) ve en yüksek değer de 255'tir (hex #FF). Aşağıda bu kombinasyonlar ile ilgili bir tablo görünmektedir: W3C Standart Renk İsimleri: W3C, 16 tane geçerli renk ismi vermiştir: Bunlar; aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white ve yellow. Çaprazlanmış Renk Değerleri: Yıllar önce, bilgisayarların sadece 256 rengi desteklediği zamanlarda, 216 tane Güvenli Web Renkleri (Web Safe Colors), Web standardı olarak önerildi. 33
HTML Renk Değerleri Renkler, kırmızı (RED), yeşil (GREEN), mavi (BLUE) renklerinin kombinasyonu ile üretilir. Renk Değerleri: HTML renkleri hexadecimal değerler ile RGB (kırmızı yeşil mavi) kombinasyonu ile belirtilebilir. En düşük değer 0 (hex #00) ve en yüksek değer de 255'tir (hex #FF). Kırmızı Rengini Kapatmak: Eğer kırmızı rengini kapatırsanız geriye 65536 (256 x 256) tane yeşil ve mavi kombinasyonundan oluşan renk paleti kalır. Kırmızı Rengini Açmak: Eğer kırmızı rengini açarsanız geriye 65536 (256 x 256) tane yeşil ve mavi kombinasyonundan oluşan renk paleti kalır. 16 Milyon Farklı Renk: Kırmızı, yeşil ve mavi renklerinin her birinin 256 tane değişik tonu vardır. Bu üçünün kombinasyonu ile 16 milyon tane (256 x 256 x 256) tane renk üretebilirsiniz. Birçok son model monitör en az 16384 tane farklı rengi gösterebilmektedir. 34
HTML Tasarım Girdiğiniz çoğu sitede, sayfaların gazeteler gibi tasarlandığını görürsünüz. HTML Tasarım - Tabloları Kullanma: En çok kullanılan tasarım yöntemi tabloların kullanılmasıdır. Sayfanın bu kısmı gazete gibi iki sütuna ayrılmıştır. Burada sol ve sağ sütunlar bulunmaktadır. Bu metin, sol sütunda görüntülenmektedir. HTML <table> komutu ile bir sayfayı iki ayrı sütuna bölebiliriz. Tabloları kullanmanın asıl önemini border özelliğini sıfır yapınca görürsünüz. Kullanıcı kenarlık görmez ama sayfa istediğiniz şekilde oturtulmuştur. Buraya ne kadar metin eklediğiniz önemi yoktur. Ne kadar yazarsanız yazın, hepsi bu hücre içerisinde kalacaktır. <html> <body> <table border="0" width="100%" cellpadding="10"> <tr> <td width="50%" valign="top"> Bu bir parça metin. Bu bir parça metin. Bu bir parça metin. Bu bir parça metin. Bu bir parça metin. </td> <td width="50%" valign="top"> Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. Başka bir metin. </td> </tr> </table> </body> </html> 35
HTML Fontlar <font> artık önemsiz bir etiket olmuştur. Gelecek nesil HTML dillerinde bunun kullanılması söz konusu olmayacaktır. Birçok kişinin halen bunu kullanmasına karşın, bu komutu artık unutmanızı ve yerine stilleri kullanmanızı öneririz. HTML <font> Etiketi: <p> <font size="2" face="verdana"> Bu bir paragraf. </font> </p> <p> <font size="3" face="times"> Bu da başka bir paragraf </font> </p> Font Parametreleri: Parametre Örnek Açıklama size="number" size="2" Punto büyüklüğü size="+number" size="+1" Puntoyu 1 arttır size="-number" size="-1" Puntoyu 1 düşür face="face-name" face="times" Yazı tipi belirle color="color-value" color="#eeff00" Yazı rengi belirle color="color-name" color="red" Yazı rengi belirle <font> Artık Kullanılmamalıdır! <font> etiketi HTML 4 ve XHTML dillerinde artık geçersiz olmuştur. World Wide Web Consortium (W3C) bunun yerine style sheets (CSS) kullanılmasını önerir. 36
HTML Stiller HTML 4.0 ile birlikte tüm biçimlendirme öğeleri ayrı bir dosya içerisine taşınmıştır. Stiller Nasıl Kullanılır? Bir tarayıcı bir stil dosyasını okumaya başladığı zaman HTML dökümanını ona göre biçimlendirir. Stil dosyalarını eklemenin üç yolu vardır. Harici Stil Dosyası: Harici bir stil dosyası her zaman daha iyidir. Çünkü sadece.css dosyasının içerisinde değişiklik yaparak tüm sitenin görünümünü değiştirebilirsiniz. Her sayfa stil dosyasına <link> etiketi ile bağlanmalıdır. <link> etiketi <head>..</head> içerisinde tanımlanmalıdır. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Dahili Stil Dosyası: Eğer sadece bir HTML dökümanı içerisinde stil uygulanacaksa bu yöntem kullanılabilir. <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> Satır İçi Stiller: Tek bir öğeye uygulanacağı zaman kullanılır. <p style="color: red; margin-left: 20px"> Bu bir paragraf. </p> 37
HTML Başlık Başlık (Head) Öğesi: Head öğesi genel bilgiler ve ayrıca meta-bilgilerini içerir. Head Öğesi İçinde Bilgi: Buraya yazılan bilgiler tarayıcıda görüntülenmez. HTML standartlarına göre sadece bir kaç etiket head etiketi içerisinde kullanılabilir, Bunlar: <base>, <link>, <meta>, <title>, <style> ve <script>. Aşağıdaki kullanım biçimi yasaktır, kullanılamaz. <head> <p>metin</p> </head> Bu noktada tarayıcının iki seçeneği vardır: Metini gösterir, çünkü bir paragraf öğesi içindedir. Metini gizler, çünkü bir head öğesi başındadır. Head Etiketleri: Etiket (Tag) <head> <title> <base> <link> <meta> Açıklama Başlık Sayfa başlığı Temel URL hedef çerçevelerini belirlemek için kullanılır. Kaynak dosyası belirtilir META bilgileri girilir. 38
HTML Meta Meta Öğesi: Birçok meta öğesi daha çok arama motorlarının site içerisinde neler bulunduğuna dair bilgi edinmesi için koyulur. Arama motorlarının bot programları sitenizi ziyaret ettiğinde Meta keywords içine bakar ve ona göre sitenizi kendi veritabanında indeksler. Arama Motorları İçin Keywords: Bu meta öğesi sayfanız hakkında açıklama içerir. <meta name="description" content="html hakkında bedava web tabanlı interaktif eğitim"> Bu meta öğesi siteniz hakkında keywords içerir. <meta name="keywords" content="html, ders, online, dene"> Bilinmeyen Meta Parametreleri: Bazen aşağıdaki gibi bilinmeyen parametreler görebilirsiniz. <meta name="security" content="low"> Bunu gördüğünüz anda bunun sizinle alakalı olmadığı kabul edin. 39
HTML Uniform Resource Locators (URL) Uniform Resource Locators (Düzenli Kaynak Konumlandırıcı): Bu terimin Türkçe olarak tam bir karşılığı bulunmamaktadır. URL aşağıdaki dizilime göre kullanılır: scheme://host.domain:port/path/filename scheme internet servisinin tipidir. Genellikle kullanılan tip http dir. host alan adının sunucusunu bildirir. Örnek: www. domain alan adıdır. Örnek: htmldersleri.org :port sunucuya hangi porttan bağlanacağınızı belirtir. http portu 80 olarak sabitlenmiştir. path, o sunucu içerisindeki alt klasörlere veya direkt bir dosyaya ulaşmak istediğinizde kullanmanız gereken elemandır. filename ise sunucu içerisinde alt klasörlerde bulunan bir dosyaya direkt ulaşmak isterseniz kullanmanız gereken elemandır. URL İnternet Servis Tipleri: Tip (Schemes) file ftp http gopher news telnet WAIS Erişim Kendi lokal bilgisayarınızdaki bir dosyaya ulaşmanızı sağlar. FTP sunucu üzerindeki bir dosyaya ulaşmanızı sağlar. World Wide Web Sunucu üzerindeki bir dosyaya ulaşmanızı sağlar. Gopher sunucu üzerindeki bir dosyaya ulaşmanızı sağlar. Bir Usenet haber grubu Telnet bağlantısı WAIS sunucu üzerinde bir dosya 40
HTML Script'ler HTML sayfalarına scriptler eklemek sayfayı daha dinamik ve interaktif yapar. HTML sayfasına bir script ekleme: Scriptler HTML içerisinde <script> etiketi ile belirtilir. "type" parametresini kullanmak zorunda olduğunuza dikkat ediniz. <html> <head> </head> <body> <script type="text/javascript"> document.write("merhaba Dünya!") </script> </body> </html> Çıktısı: Script Etiketleri: Etiket <script> <noscript> <object> <param> <applet> Açıklama Script başlıyor... Script çalıştırılamadığı zaman Sabitlenmiş nesne Bir nesne için parametre belirtir. Önemsiz etiket. Bunun yerine <object> etiketini kullanın. 41
HTML 4.0 Standard Parametreleri HTML etiketlerinin parametreleri olabilir. Aşağıda HTML4 ile gelen bazı özel parametreler gösterilmiştir. Merkezi Parametreler: base, head, html, meta, param, script, style, ve title elements'lerde geçerli değildir. Parametre Değer Açıklama class class_rule veya style_rule Öğenin sınıfı id id_name Öğeler için özgün ID (tanımlama) style style_definition Tek satırlık stil tanımı title tooltip_text Tool tip açıklama stili (Üzerine gelindiğinde çıkan sarı zeminli metin) Dil Parametreleri: base, head, html, meta, param, script, style, ve title elements'lerde geçerli değildir. Parametre Değer Açıklama dir ltr rtl Metin yönünü belirtme lang language_code Dil kodu Klavye Parametreleri: Parametre Değer Açıklama accesskey character Bir öğeye erişmek için bir kısayol belirtme tabindex number Bir öğe için tab sekme sırasını belirtme 42
HTML 4.0 Olay Parametreleri HTML4 ile gelen diğer bir özellik te bir olay olduğu anda döküman içerisinde kodlar ile o sırada neler yapılacağını belirtebilmektir. Örneğin sayfa yüklenirken, üzerine gelindiğinde, tıklandığı gibi olay parametreleri mevcuttur. Pencere Olayları: Parametre Değer Açıklama onload script Döküman yüklenirken çalıştırılacak olan script. onunload script Dökümandan ayrılıken çalıştırılacak olan script. Form Öğe Olayları: Sadece form etiketi içerisinde geçerlidir. Parametre Değer Açıklama onchange script Öğe değişirken çalıştırılacak olan script. onsubmit script Submit'e tıklandığında çalıştırılacak olan script. onreset script Form sıfırlandığında çalıştırılacak olan script. onselect script Öğe seçildiğinde çalıştırılacak olan script. onblur script Öğeden ayrılınca çalıştırılacak olan script. onfocus script Öğe seçilince çalıştırılacak olan script. Klavye Olayları: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style ve title elements içerisinde geçerli değildir. Parametre Değer Açıklama onkeydown script Bir tuş basılı tutulduğunda yapılacak olanlar. onkeypress script Bir tuşa basılıp bırakıldığına yapılacak olanlar. onkeyup script Bir tuş bırakıldığında yapılacak olanlar. Mouse Olayları: base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, ve title elements içerisinde geçerli değildir. 43
Parametre Değer Açıklama onclick script Tıklandığında yapılacak olanlar. ondblclick script Çift tıklandığında yapılacak olanlar. onmousedown script Bir mouse tuşu basılı tutulduğunda yapılacak olanlar. onmousemove script Mouse işaretçisi hareket ettirildiğinde yapılacak olanlar. onmouseout script Mouse işaretçisi bir öğeden ayrıldığında yapılacak olanlar. onmouseover script Mouse işaretçisi bir öğenin üzerine geldiğinde yapılacak olanlar. onmouseup script Mouse butonu bırakıldığında yapılacak olanlar. 44
Sayfanızı Yayınlamaya Hazır mısınız? Başkalarının sayfanızı görmesini istiyorsanız, sayfanızı yayınlamalısınız. Bunu yapmak için sayfanızı bir web sunucuya kopyalamalısınız. Eğer internet bağlantınız varsa kendi kişisel bilgisayarınız da bir web sunucusu gibi davranabilir. Internet Information Service (IIS): Kendi bilgisayarınızda ASP dosyalarını çalıştırmak için kullanmanız gereken yayınlama yazılımıdır. IIS Nasıl Kurulur? Windows XP CD'nizi taktıktan sonra Program Ekle/Kaldır özelliği ile Windows Bileşenleri kısmına geliniz. Internet Information Service seçeneği seçerek "İleri"yi tıklayıp yönergeleri izleyiniz. Yaptığınız siteyi tüm klasörü ile C:\Inetpub\wwwroot klasörü içine kopyalayınız. (Örnek: Klasörünüz adı "WebSitem" olsun) Çalışıp çalışmadığını görmek için tarayıcınızın adres satırına "localhost/websitem" yazınız. Not: Microsoft Windows XP Home Edition üzerinde IIS çalıştıramazsınız! Apache Web Sunucusu: Kendi bilgisayarınızda PHP dosyalarını çalıştırmak için kullanmanız gereken yayınlama yazılımıdır. Apache Nasıl Kurulur? Internet üzerinden ücretsiz olarak "apache2triad" yazılımını indirip bilgisayarınıza kurunuz. (Bu program ile php ile ilgili tüm yazılımlara sahip olursunuz). Daha sonra sitenizi klasör halinde C:\apache2triad\htdocs klasörü içine kopyalayınız. Tarayıcınızın adres satırına "localhost/websitem" yazınız. 45
Önemli Notlar: HTML dosyanızın içerisinde bir link oluşturmak istediğinizde veya bir resim eklemek istediğinizde bu hedef dosyaların hepsinin önceden sitenizin klasörünün içerisinde olduğundan emin olun. Örneğin sitenizin klasörü C:\sitem olsun. C:\sitem\index.html dosyası içerisine belgelerim klasöründen bir resim eklediğinizde bu resim <img alt="" src="../documents%20and%20settings/<oturum adı>/belgelerim/resim.jpg"> olarak alacaktır. Eğer bu şekilde web sunucusuna upload ederseniz, büyük ihtimalle resim dosyanız görüntülenemeyecektir. Çünkü web sunucu bilgisayarda öyle bir yol olmayacaktır. 46
Kaynakça Bu kitapta kaynakça olarak http://www.htmldersleri.org/ sitesi kullanılmıştır. Bu kitaptaki bilgilerin aynısı bu sitede de mevcuttur. Birçok konu hakkında çok güzel ve anlaşılır bir kaynaktır. Size de bu siteyi tavsiye ederiz. Biz HTML Dersleri hakkında bu kadar açıklayıcı, anlaşılır bilgi veren başka bir site göremedik. 47