1. HTML Hakkında 2. İlk HTML dökümanınızı yazmak 3. HTML dökümanınızı düzenlemek 4. Başlıklar (headings) 5. Paragraflara ayırmak 6. Dökümana stil kazandırmak 7. Listeler (lists) 8. Grafikler ve dosya biçimleri a. Resim kullanımı 9. Bağlantılar kullanmak a. Yerel dosyalara linkler b. URL ler c. İnternet e linkler oluşturmak d. Bir sayfanın bölümlerine linkler eklemek e. Hipergrafik linkleri 10. Text biçimi (<pre> belirteci) 11. Özel karakterler 12. Açıklama listeleri 13. Adres Satırları ve e-mail linkleri 14. Blockquote belirteci 15. Renk kullanımı 16. Text düzenlemeleri 17. <hr> belirteci 18. Text ve grafik konumunu ayarlamak 19. Tablo kullanımı 1. HTML Hakkında HTML, ya da HyperText Markup Language, bir web browser n multimedya dökümanlar n gösterme yoludur. Dökümanlar aslen ASCII text format nda baz özel tag ler (belirteç) içeren, browserlar n anlayabileceği kodu içerir.
Web deki öncelikli amaç, herkesin yay nc l k yapmas n sağlayacak standart ve geliştirilmesi basit bir sistem kurmakt. HTML in özellikleri ilk günlerinden bu yana oldukça uzun bir yol ald. Bugün, HTML için üç ayr standart tan mlanm şt r. Bunlar: HTML 1.0 HTML 2.0 HTML 3.0 Bugün art k genel olarak HTML 2.0 ve HTML 3.0 kullan lmaktad r. HTML 3.0 da eklenen özellikler ise şunlard r: Sayfa düzeni üzerinde ileri derecede kontrol Manşetler Görüntülerdeki popüler noktalar n istemci taraf ndan işlenmesi Ézelleştirilmiş listeler Matematik denklemler Stil yapraklar Form içi tablolar HTML döküman m zda hangi standartlar kulanacağ m z döküman m z n baş nda belirtmemiz gerekir (bir sonraki dersimizde bunu göreceğiz). Bu sayede, döküman görüntüleyen bilgisayar neye göre işlemler yapacağ n bilir. 2. İlk HTML Dökümanınızı Yazmak HTML belirteçleri nedir? Bir web browser bir sayfay görüntülediği zaman, öncelikle normal bir text dosyas ndan sayfa hakk nda bilgileri okur ve < ve > işaretlerinin (tag/belirteç) kullan ld ğ özel kodlara bakar. Bir HTML belirteci için genel format şöyledir: <belirteç_ismi>yaz lacak text</belirteç_ismi>
Érnek olarak, bu k s mdaki başl ğ sayfan zda ç karmak için: <h4>html belirteçleri nedir?</h4> Bu belirteç, web browser na HTML belirteçleri nedir? textini 4 lük başl k şeklinde (bunun hakk nda geniş bilgi ileride verilecek) göstermesini söyler. HTML belirteçleri, bir browser a texti koyulaşt rmas n, italik yapmas n, başl k olarak göstermesini ya da bir link olarak göstermesini söyleyebilir. Not edilmesi gereken nokta, bitiş belirtecinin, </belirteç_ismi> şeklinde, bir bölü / işareti ile başlamas d r. Bu bölü işareti, browser a o anki komutun texte uygulanmas n n bitirilmesini söyler. Eğer bölü işaretini unutursan z, browser son texti izleyen texte de ayn komutu uygulamaya devam eder; bu da istenmeyen sonuçlar doğurur. NOT: Bir web browser, büyük ya da küçük harf arasında ayırım yapmaz. Mesela, <h3> </h3> ile <H3> </H3> arasında bir fark yoktur. HTML in, bilgisayar programlar ndan bir fark da, dökümanda bir hata yaparsan z browser ya da bilgisayar n z kilitlenmez, sadece görüntülenen döküman yanl ş görüntülenir; bu durumda döküman aç p yanl şl ğ düzeltirsiniz. Browser n z n küçük bir sözlüğü vard r, ve HTML in ilginç bir yan da bu sözlükte bulamad ğ komutlar sadece gözard etmesidir. Mesela: <ahmet><h4>html belirteçleri nedir?</h4></ahmet> gene ayn başl ğ verir (<ahmet> diye bir komut henüz hiç bir browser taraf ndan desteklenmiyor!); yani browser <ahmet> komutunu gözard eder. HTML Dökümanınızı Oluşturmak
Bir HTML döküman iki ayr parçadan oluşur, head ve body (baş ve vücut). Head k sm, döküman hakk nda ekranda görünmeyen bilgileri taş r. Body ise geri kalan tüm bilgileri içerir. Tüm HTML sayfalar n n temel görüntüsü şöyledir: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN > <html> <head> <!-- bu döküman hakk nda ek bilgilerin bulunduğu başl k k sm, ekranda görünmez -- > </head> <body> <!-- görüntülenen tüm HTML -- > : : : : </body> </html> İlk sat r: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN > teknik olarak gerekli değildir, fakat browser a o anki sayfan n hangi HTML standard na göre yaz ld ğ n gösterir. Tüm HTML çal şman z <html> </html> belirteçlerinin içine yerleştirin. Web sayfalar n z bu belirteçler olmadan da bir çok bilgisayarda çal şabilir, fakat bunlar kullanarak sayfan z n Uluslararas standartlara tamamen uygun hale gelmesini, ve bu standartlar kullanan her makinada çal şmas n garanti alt na alm ş olursunuz.
Ayr ca dikkat ederseniz <!-- -- > aras nda yer alan sat rlar web sayfan zda görünmez, buraya sayfa hakk nda size ya da onu inceleyen başkas na yararl olabilecek bilgileri yazars n z. Web sayfalar n z daha kar ş k hale geldiğinde (tablolar ve çerçevelerle çal ş rken bolca baş n za gelecek) bu komutlar eski bir sayfan z kontrol ya da update ederken oldukça işinize yarayacak. İşte ilk HTML dosyan z oluşturmak için yapman z gerekenler: 1. Énce text editörünüzü aç n (bunun için notepad i kullanman z öneririm). 2. Text editör ekran na gidin. 3. Aşağ daki texti girin: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN > <html> <head> <title>volkanlar Sayfası</title> </head> <!-- HTML ders notları için yapılmıştır, Ahmet Münir Piroğlu, 3 Eylül, 2000 -- > <body> Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız. </body> </html> NOT: <title> </title> belirtecinin bulunduğu yere dikkat edin. <head> </head> belirtecinin içinde bulunuyor ve ekranda görünmüyor. <title> </title> belirteci, dökümanları tanımlamaya yarar ve browserınızın başlık bölümündeki yazıyı belirlemeye yarar. 4. Döküman volkanlar.html isminde kaydedin ve bunun için ayr bir dizin yaratmay unutmay n.
NOT: Windows 3.1 kullanıcıları dosya isminin uzantısını.htm yapmak zorundadır. Browserlar.html ya da.htm dosyalarını aynı kabul ederek açarlar. Dökümanınızı bir web browser da görüntülemek 1. Web browser n z aç n. 2. File menüsünden Open File komutunu seçin. 3. yunuslar.html dosyan z bulun ve aç n. 4. Şimdi browser n başl k k sm nda Volkanlar Sayfas yaz s n ve aşağ da web sayfas nda da <body> belirtecinin içine yazd ğ n z yaz y görüyor olmal s n z. Sayfan z şu an aşağ daki gibi görünüyor olmal : Bu derste interneti volkanlar hakk nda bilgi toplamak için kullanacak ve bulgular n zdan bir rapor haz rlayacaks n z. 3. HTML Dökümanınızı Düzenlemek İlk HTML döküman n z yapt ğ n za göre şimdi bir döküman üzerinde nas l değişiklikler yapacağ n z ve nas l yenileyeceğinizi göreceksiniz. Şimdi, 1. Eğer değilse browser n zda döküman n z tekrar aç n. 2. Text editörünüzü tekrar aç n (mesela notepad). 3. Text editöründe volkanlar.html dosyas n aç n. HTML Dökümanınızda Değişiklikler Yapmak 1. Text editör ekran na gidin. 2. Daha önce yazd ğ n z textin alt nda bir kaç kere ENTER a bas n ve aşağ daki texti yaz n:
Volkan, bir gezegenden erimiş kaya veya mağmanın yüzeye çıktığı noktadır. Bu çıkış, büyük bir patlama ile olabileceği gibi sessiz ve yavaş bir şekilde de olabilir. Dikkat etmeniz gereken nokta, bu text </body> ve </html> belirteçlerinin üstünde ve HTML dosyan z n en alt k sm nda olmal d r. 3. File menüsünden Save komutunu seçin. Web Browserınızda Dökümanı Tekrar Yüklemek Dosyan z n bir önceki halinin görüntülendiği browsera dönün. Şu an son yazd ğ n z textin ekranda görünmediğine dikkat edin. Değişiklikleri görmek için Reload tuşunu kullan n. Bu komut, browser n za o anki döküman tekrar yüklemesini belirtir. Art k yapt ğ n z değişiklikler ekranda görünüyor olmal. Dikkat ederseniz yaz ekranda yazd ğ n z şekilde görünmez. Browser, normal olarak yazd ğ n z texti tüm ekrana yayacak şekilde görüntüler. İlerleyen derslerde sayfan z istediğiniz şekilde düzenlemeyi öğreneceksiniz. 4. Başlıklar Başl klar, HTML dilinde başl ğa yazmak istediğiniz yaz y başl k belirteçleri aras na yerleştirilerek oluşturulur. HTML format nda başl k belirteci şu şekildedir: <hn>başl kta görünecek yaz </hn> N, 1 den 6 ya kadar başl k boyutlar n belirten bi rakamd r. Değişik boyutlara göre baz başl k örnekleri: 1. Düzey Başlık
2. Düzey Başlık 3. Düzey Başlık 4. Düzey Başlık 5. Düzey Başlık 6. Düzey Başlık HTML Başlıklarını Dökümanınıza Yerleştirmek 1. Text editörünü tekrar aç n. 2. volkanlar.html dosyas n aç n. 3. Éncelikle en büyük başl ğ yapmak için <h1> belirtecini kullanacağ z. Aşağ daki yaz y şu anki textin üzerine ve </head><body> belirteçlerinden sonra yerleştirin: <h1>volkanlar Sayfas </h1> 4. Bunun alt na da ileride kullanacağ m z başl klar yaz n. (Baz başl klar n h3, baz lar n n h2 ile yaz ld ğ na dikkat edin, ayn önem derecesine sahip başl klar ayn boyutta kullan rsan z daha düzenli bir sayfan z olur.) <h2>giriş</h2> <h2>volkan Terminolojisi</h2> <h3>st Helen Dağı</h3> <h3>long Valley</h3> <h2>mars ta Volkan Bölgeleri</h2>
<h3>araştırma Projesi</h3> <h3>referanslar</h3> 5. Text editöründe değişiklikleri kaydedin. 6. Browser n za geri dönün, döküman Reload edin. Browser n zda sonuç şöyle görünmelidir: Volkanlar Sayfası Bu derste interneti volkanlar hakk nda bilgi toplamak için kullanacak ve bulgular n zdan bir rapor haz rlayacaks n z. Volkan, bir gezegenden erimiş kaya veya mağman n yüzeye ç kt ğ noktad r. Bu ç k ş, büyük bir patlama ile olabileceği gibi sessiz ve yavaş bir şekilde de olabilir. Giriş Volkan Terminolojisi St Helen Dağı Long Valley Mars ta Volkan Bölgeleri Araştırma Projesi Referanslar
5. Paragraflara Ayırmak Daha önce browser n z n textinizi yazarken kulland ğ n z ENTER lar gözard ettiğini gördük (browser tüm yaz y boşluklar dolduracak şekilde dağ t yordu). Fakat browser, bir paragraf belirteci gördüğü anda yaz ya bir boşluk koyar ve yeni bir paragrafa başlar. Bir paragraf başlatmak için yaz lmas gereken kod: <p> Not edilmesi gereken nokta bu belirtecin bir bitiş belirtecine ihtiyac yoktur. (Yani </p> belirtecini kullanman za genel olarak gerek yok). Ayr ca başl k belirteçlerinde <p> belirteci haz r olarak vard r, yani <hn> ile <p> belirtecini birlikte kullanman za gerek olmaz. (<h> belirteci kullan ld ğ nda browser otomatik olarak başl ğ n baş na ve sonuna bir sat r boşluk b rak r.) Paragraf Belirtecini kullanmak HTML döküman n za paragraf belirteci koymak için aşağ da anlat lanlar uygulay n. 1. Döküman n z notepad de tekrar aç n (eğer aç k değilse). 2. Éncelikle ( Volkan, bir gezegenden ) cümlesiyle başlayan bölümü yeni bir paragraf yapal m ve ard ndan yeni bir paragraf ekleyelim. Şimdi yaz m z yaklaş k olarak şöyle görünmelidir: Bu derste interneti volkanlar hakkinda bilgi toplamak için kullanacak ve bulgularinizdan bir rapor hazirlayacaksiniz. <h2>giriş</h2> Volkan, bir gezegenden erimiş kaya veya mağmanın yüzeye çıktığı noktadır.
Bu çıkış, büyük bir patlama ile olabileceği gibi sessiz ve yavaş bir şekilde de olabilir. <p> Volkanlar, insanlardan çok önce dünya tarihinde yer almışlardır. İnsanların birkaç milyon yıllık tarihini, dört milyar yıl ile karşılaştırın. 3. Döküman kaydedin. 4. Browser n za dönün ve sayfay Reload edin. Yazıyı bölmenin başka yolları Döküman n z bölümlere ay rmak için hard rule/ hr belirtecini kullanabilirsiniz. Bu belirteç dökümana aşağ daki gibi bir çizgi ekler: Şimdi bunu deneyelim. Volkanlar döküman nda ilk paragraftan sonra bir <hr> belirteci kullan n. Döküman n ilgili parças : <h1>volkanlar Sayfası</h1> Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız. <hr> <h2>giriş</h2> Volkan, bir gezegenden erimiş kaya veya mağmanın yüzeye çıktığı noktadır. Bu çıkış, büyük bir patlama ile olabileceği gibi sessiz ve yavaş bir şekilde de olabilir <p> Volkanlar, insanlardan çok önce dünya tarihinde yer almışlardır. İnsanların birkaç milyon yıllık tarihini, dört milyar yıl ile karşılaştırın.
şeklinde görünmelidir. Son olarak da textin istediğiniz yerinden diğer sat ra geçmesini sağlayan bir belirteç: <br>. Bu belirteci bir liste yaparken, bir şiirin m sralar n yazarken, vb. yerlerde kullanabilirsiniz. İzleyen iki örnekte <br> ve <p> belirteçleri aras ndaki farklar inceleyin: Sadece Paragraf Belirteci HTML Tüm kontrolü bilgisayara onu bırakmaktansa onu istediğiniz şekilde yönlendirmeniz daha iyidir. <p> Devam ediyor <p> Gördüğünüz gibi belirteçler bu iş için var! Sonuç Tüm kontrolü bilgisayara b rakmaktansa istediğiniz gibi yönlendirmeniz daha iyidir. Devam ediyor Gördüğünüz gibi belirteçler bu iş için var! Paragraf <p> ve <br> belirteci HTML Tüm kontrolü bilgisayara<br> bırakmaktansa onu istediğiniz<br> şekilde yönlendirmeniz daha iyidir. <p> Devam ediyor <br> Gördüğünüz gibi belirteçler<br> bu iş için var! Sonuç Tüm kontrolü bilgisayara b rakmaktansa istediğiniz şekilde yönlendirmeniz daha iyidir. Devam ediyor Gördüğünüz gibi belirteçler bu iş için var!
6. Dökümana Stil Kazandırmak HTML, textinize stil kazand rmak için size bir çok belirteç sunar. Bunlardan baz lar : HTML <b>bu yaz koyu </b> Stil Belirteçleri Sonuç Bu yazı koyu <i>bu yaz italik </i> Bu yazı italik <tt>bu yaz typewriter </tt> Bu yaz typewriter Bu belirteçleri içiçe kullanabileceğinize dikkat edin. Fakat belirteçleri doğru s ralamaya dikkat etmeniz gerekiyor, mesela ilk açt ğ n z belirteci son olarak kapatman z gerekir. <i><b>bu yaz koyu ve italik</b></i> Bu yazı koyu ve italik <b><i>bu yaz da</i></b> Bu yazı da Ayr ca, bu belirteçleri başl k textinize de uygulayabilirsiniz. <h2><i>yeni</i> ve <tt>gelişmiş!</tt></h2> Yeni ve Gelişmiş HTML Dökümanınıza Eklemeler 1. Döküman n z tekrar aç n (eğer değilse). 2. Text editörünüze dönün (volkanlar.html dosyas na). 3. Giriş bölümündeki ilk kelime olan Volkan kelimesinde bir değişiklik yapacağ z.
4. Bu kelimeye şu belirteci ekleyin: <b>volkan </b> 5. Şimdi de ikinci cümledeki milyar kelimesinin önemini art rmak için bu kelimeyi koyu ve italik yapacağ z. Değişiklikten sonra paragraf şöyle gözükmeli: <p> Volkanlar, insanlardan çok önce dünya tarihinde yer almışlardır. İnsanların birkaç milyon yıllık tarihini, dört <b><i>milyar</i></b> yıl ile karşılaştırın. 6. Son olarak, özel bir kelimeyi belirtmek için typewriter belirtecini kullanacağ z Volkan Terminolojisi başl ğ alt nda şu texti girin: Volkan araştırmaları, ya da <tt>volkanoloji</tt>, birçok garip terim içerir. 7. Æal şman z kaydedin ve browser da tekrar yükleyin (Reload). 7. Listeler (lists) Bir çok web sayfas listelenmiş bilgi gösterir. HTML de bu listeleri oluşturmak kolayd r, hatta bu listeler liste içinde liste oluşturabilirler (mesela bir outline oluşturmak için). Listeler ayr ca bir içindekiler bölümü haz rlarken ya da bir seri bilginin bölümlerini göstermek için uygundur. Sırasız (unordered) listeler S ras z listeler ya da ul belirteci, browserda, baş nda noktalarla belirtilen sat rlar oluşturur. Noktalar n şekli, kullan lan browsera ve yap lan ayarlar na göre değişir (tan mlanan font da
etkilidir; mesela Macintosh ta bu noktalar option-8 karakter denen bir karakterle, Times fontunda bu küçük bi kare, Genova fontunda ise büyükçe bir nokta). Sırasız listeye bir örnek: birinci parça ikinci parça üçünçü parça Bu listeyi yapmak için HTML kodu: <B>Sırasız listeye bir örnek:</b> <ul> <li> birinci parça <li> ikinci parça <li> üçüncü parça </ul> <ul> belirteci listenin başlang ç ve bitişini belirtir. Sıralı Listeler S ral listeler browser n her parçaya bir numara atad ğ listelerdir (1., 2. gibi). S ras z listeden tek fark <ul> belirteçlerini <ol> haline değiştirmektir. Bir önceki örneği kullan rsak: Sıralı listeye bir örnek: 1. Birinci parça 2. İkinci parça 3. Êçüncü parça Bu listeyi oluşturmak için HTML kodu:
<B>Sıralı listeye bir örnek:</b> <ol> <li> Birinci parça <li> ikinci parça <li> üçüncü parça </ul> İçiçe Listeler S ral ve s ras z listeler değişik derecelerde kullan labilir, her biri browser taraf ndan gerektiği gibi işlenecektir. Fakat önem vermeniz gereken nokta her listenin doğru bir bitiş belirteci olmas ve içiçe s ralan ş nda bir hata olmamas d r. Tüm bu <ol> <li> </ul> <li> belirteçleri ile işler biraz kar ş yor gibi görünmeye başlayabilir, fakat öncelikle akl n zda tutman z gereken listelerin temel görünüşüdür. <ul> <li> <li> </ul> <ol> <li> <li> </ol> Başka listelerin içinde kullan lm ş bir s ras z liste: İçiçe Sırasız Liste Bu birinci parça Bu ikinci parça Bu ikinci parçan n ilk alt parças Bu da bir alt parçan n alt parças Bu, alt parçan n ikinci alt parças Bu, ikinci parçan n ikinci alt parças Bu, ikinci parçan n üçüncü alt parças Bu üçüncü parça
Liste işaretlerinin her derecede değiştiğine dikkat edin. Bu format oluşturmak için HTML kodu: <B>İçiçe Sırasız Liste</B> <ul> <li>bu birinci parça <li>bu ikinci parça <ul> <li>bu ikinci parçanın ilk alt parçası <ul> <li>bu da bir alt parçanın alt parçası <li>bu, alt parçanın ikinci alt parçası </ul> <li>bu, ikinci parçanın ikinci alt parçası <li>bu, ikinci parçanın üçüncü alt parçası </ul> <li>bu üçüncü parça </ul> İçiçe Listeler Hepsini Kullanmak S ral listelerde sadece s ral listeleri kullanman z gerekmez, liste çeşitlerini birlikte içiçe kullanabilirsiniz. Mesela, bu örnekteki s ral listenin içinde bir s ras z liste kullan l yor: İçiçe sırasız liste 1. Bu birinci parça 2. Bu ikinci parça Bu ikinci parçanin birinci alt parças
1. Bu da bir alt parçan n numaral alt parças 2. Bu da bir alt parçan n numaral başka alt parças Bu ikinci parçan n ikinci alt parças Bu ikinci parçan n üçüncü alt parças 3. Bu üçüncü parça Bu ç kt n n sağlanmas için gerekli HTML kodu: <B>İçiçe s ras z liste</b> <ol> <li>bu birinci parça <li>bu ikinci parça <ul> <li>bu ikinci parçanin birinci alt parças <ol> <li> Bu da bir alt parçan n numaral alt parças <li>bu da bir alt parçan n numaral başka alt parças </ol> <li>bu ikinci parçan n ikinci alt parças <li>bu ikinci parçan n üçüncü alt parças </ul> <li>bu üçüncü parça </ol> HTML Dökümanınıza Listeler Yerleştirmek Şimdi, liste belirteçlerini kullanarak Volkanlar Sayfas na s ral ve s ras z listeler koyacaks n z. 1. Aç k değilse çal şman z aç n. 2. HTML döküman n z text editöründe aç n. 3. Volkan terminolojisi başl ğ alt nda teknik kelime örnekleri göstermek için s ras z liste belirteçlerini kullanacağ z. Döküman n zda bu bölüme gidin.
4. Énce aşağ daki cümleyi yerleştirin. Ne kadarını biliyorsunuz? 5. Şimdi listeyi oluşturmak için HTML format n kullanacağ z: <ul> <li>kaldera <li>vesikularite <li>pahoehoe <li>reoloji <li>lahar </ul> 6. Şimdi, gerekli k s mlar n yaz lmas için s ral liste kullanacağ z. Araşt rma Projesi k sm alt nda aşağ daki yaz y girin: Göreviniz, yukarıdaki listenin dışında son yüz yıl içinde faaliyete geçmiş bir volkan hakkında bilgi toplayıp rapor etmek. Raporunuzda şunlar olmalı: <ol> <li>volkanın çeşiti <li>jeografik konumu <li>en yakın şehrin ismi, popülasyonu, ve volkana uzaklığı <li>en son faaliyeti ve verdiği hasar. <li>faaliyetle birlikte görülen olaylar (toprak kaymaları, depremler, vs.) </ol> <p> Sonra, bu volkanın yol açtığı genel hasarlar üzerine bir gözlem ve bunların azaltılması için neler gerektiği konusunda bir paragraf yazın.
7. HTML dosyan z kaydedin ve browser n zda tekrar yükleyin. 8. Grafikler ve Dosya Biçimleri İnternet üzerinden sadece text göndermek klasik e-mail dan farkl değildir. Grafikleri kullanmaya başlad ğ n zda mesajlar n z çok daha çarp c hale gelir. Web in Grafik Biçimleri Bilgisayar grafikleri için bir çok grafik biçimi vard r. PICT. GIF. TIFF. EPS. BMP. JPEG Bir browser n grafikleri gösterme yolu, HTML format nda grafik dosyas n n yerini ve ismini belirtmektir. Bu format birçok browser n tan yabileceği bir format olmal d r. Teknik olarak söylemek gerekirse, resim format n z platform bağımsız olmal d r. HTML in kendisi platform bağ ms zd r, sonuçta text karakterleri tüm bilgisayarlar taraf ndan anlaş labilir. Bir web sayfas nda görüntülenebilen standart format GIF ya da Graphics Interchange Format d r. GIF, resim boyutunu s k şt r r (dolay s yla boyutlar n küçültür) ve sonucu internette gönderilebilecek ikilik (binary) sisteme çevirir. GIF s k şt rmas, grafik büyük boyutlarda tek renk olursa çok etkilidir; ve bir renk yatayda sürekli olursa s k şt rma çok daha iyidir. Web de kullan lan diğer dosya format JPEG dir (ismini bu format dizayn eden gruptan, Joint Photographic Expert Group, al r). Eskiden, JPEG resimleri browserlarda direk olarak gösterilmez, bunun için yard mc bir program kullan l r ve resim ayr bir ekranda görünürdü. Bugün browserlar n tamam na yak n bu format destekler. JPEG s k şt rmas fotoğrafik resimlerde genellikle çok etkilidir. Bazen dosya boyutunu 1/10 a kadar düşürür.
Grafik kullanırken akılda tutulması gereken bazı noktalar Art k web sayfan z tasarlamaya başlad ğ n za göre, resimlerinizi GIF ya da JPEG format nda kullanmay öğrenmelisiniz. Büyük ve çok say da resim sayfan z n mükemmel görünmesini sağlayabilir fakat bu resimlerin yüklenmesini bekleyecek kullan c lar için sonuç s k c ve yorucu olur. Bir tavsiye olarak, resimlerinizin boyutlar n 100k dan az tutman z iyidir. Küçük boyutlar her zaman iyidir. Grafik boyutlar n çok büyük tutmaman z (genişlik 480, yükseklik 300 pixeli genelde geçmemeli) iyidir, sonuçta sayfan z görüntüleyenlerin ekran boyutlar her zaman 21 inch olmaz! Verdiğim boyutlar n üzerindeki görüntüleri ekranda görebilmek için genelde ekran sağa-sola ya da yukar -aşağ kayd rmak gerekir. Macintosh bilgisayarlar nda birçok koyu ton Windows bilgisayarlar nda görünmez. Tüm resimleri bir anda göstermek yerine bu resimlere bağlant lar (link) koymak daha iyidir, bazen internete yavaş bağlant s olanlar bu resimleri görüntülemeyerek zaman kazanmak isteyebilirler. Tek bir resim (mesela bir düğme) sayfan n bir çok yerinde kullan labilir. Bu durumda browser her defas nda resimi baştan yüklemek yerine ilk yüklemeden sonra geri kalan yerlerde bunu haf zadan yükler. En önemlisi, kullanacağ n z resimin o sayfa için gerekli olup olmad ğ ndan emin olun. Böylece gereksiz resimlerin yüklemeyi yavaşlatmas n engellemiş olursunuz. Büyük resimlerden oluşmuş ve güzel görünen bir sayfa tasarlam ş olabilirsiniz, fakat sayfan z görüntülüyecek insanlar yavaş bir modemden ve yavaş bir hattan sayfan za ulaşmaya çal ş yor olabilir. Sayfanız için grafikler bulmak Şimdi, tasarlad ğ n z sayfa için bir kaç resim bulman n tam zaman. İnternete girip konuyla ilgili biraz araşt rma yapabilirsiniz. Sayfan z için yararl olabilecek birkaç resim bulmaya çal ş n. Deneyebileceğiniz bir kaç yer: http://www.yahoo.com, http://altavista.digital.com
8a. Resim Kullanımı Resimleri Gömmek için HTML Belirteçleri Gömülen resim, bir web sayfas n n texti ile birlikte görülen resimdir. Buradaki Büyük M harfi gibi. Gömülen resim için HTML belirteci: <img src= dosyaismi.gif > Buradaki dosyaismi.gif, HTML döküman n z n bulunduğu dizinde bulunan grafik dosyas d r. gömülen kelimesiyle kast m z, bir browser bu resimi textlerin aras na yerleştirir. Yukar da Büyük M nin yan ndaki yaz yla ayn sat rda olduğuna dikkat edin. Eğer bu resimin kendi baş na bir sat rda olmas n isteseydik ne yapard k? Resmin kendi baş na bir sat rda görünmesini sağlamak için, yanl zca belirtecinin baş na bir paragraf belirteci yerleştirin: <p> <img src= dosyaismi.gif > Text ve Gömülen Resimin Düzeni <img > belirteciyle baz özellikleri kullanarak text ve resim aras nda nas l bir düzen olmas n istiyorsan z ayarlayabilirsiniz. <img> belirtecinin içine yerleştirilen align özelliği sayesinde aşağ daki efektleri yapabilirsiniz:
1. align=top <img align=top src= dosyaismi.gif> Yaz buraya gelecek. Dikkat ederseniz, ilk sat rdan sonraki yaz boşluklar dolduruyor. 2. align=middle <img align=middle src= dosyaismi.gif > Yaz buraya gelecek. Bu sefer align=middle yani orta dediğimiz için yaz grafiğin ortas ndan devam ediyor. 3. align=bottom (normal) <img align=bottom src= dosyaismi.gif > Yaz bu sefer buraya gelecek. align=bottom demekle yaz n n en alt k s mda olacağ n belirttik. HTML Dökümanımıza Resim Yerleştirelim Bu çal şmada, üzerinde çal şt ğ m z dökümana bir giriş resmi koyacağ z. 1. Æal şman z, aç k değilse tekrar aç n. 2. Text editörünüzde volkanlar.html dosyas n aç n. 3. <h1>volkanlar Sayfas <h1> başl ğ n n üzerine şunu yaz n:
<img src= lava.gif > Bu belirteç, sayfan z n en üstüne daha önce bulduğunuz volkan resimini yerleştirir. lava.gif, bu dosyan z n ismidir; eğer dosyan z n ismi değişikse, lava.gif yerine o ismi yazmal s n z. 4. Dosyan z kaydedin ve browser n zda tekrar yükleyin. NOT: Dikkat etmeniz gereken nokta, lava.gif ya da kullandığınız resim dosyası HTML dökümanınızla aynı dizinde olmalıdır. Eğer değilse, dosyanın bulunabileceği yerin tam yolunu yazmalısınız. Resimi yerleştirdiğinizde akl n za neden resim belirtecinden sonra <p> belirtecini kullanmad ğ n z gelebilir, bunun sebebi resim belirtecinden hemen sonraki belirtecin bir başl k <hn> belirteci olmas yd ; daha önce gördüğümüz gibi bir browser başl k belirteçlerinden önce ve sonra bir sat r boşluk b rak r (paragraf belirtecine gerek kalmaz). Alt= Özelliği Eğer sayfan z yanl zca text tan yan bir browser kullanan kullan c lar taraf ndan görüntülenecekse, bu kullan c lar taraf ndan hiç bir resim görüntülenemez. Ya da bazen, kullan c lar daha h zl erişim için browser n resimleri yükleme özelliğini kapat rlar. Bu durumda <img > belirtecinde kullanacağ n z alt özelliği resimin yerine, orada bir resim olduğunu belirten bir boşluk koyarlar. Bu gibi durumlarda, yanl zca text kullanan bir browser sizin yapt ğ n z sayfan n başlang ç k sm n şu şekilde görürler: [IMAGE] Volkanlar Sayfası Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız.
Bu sayede kullan c, sayfan n baş nda bir resim olduğunu anlar. Buna ek olarak <img > belirtecini bu gibi durumlarda buraya boşluk gelmesi yerine bir text gösterecek şekilde düzenleyebilirsiniz. Mesela, düzenlediğimiz sayfada bu gibi durumlarda resimin yerine Volkanlar üzerine bir inceleme yaz s n n gelmesini sağlayal m. Bunun için textinizde şu değişikliği yap n: <img alt= Volkanlar üzerine bir inceleme src= lava.gif > Buradaki alt= özelliği gerekli olduğunda resimin yerine verdiğiniz textin yerleşmesini sağlar. Æal şmam z n bu bölümü art k yanl z text özelliği olan browserlarda şu şekilde görünür: Volkanlar üzerine bir inceleme Volkanlar Sayfası Bu derste interneti volkanlar hakkında bilgi toplamak için kullanacak ve bulgularınızdan bir rapor hazırlayacaksınız. Yükseklik (height) ve genişlik (width) özellikleri <img > belirtecinize dahil etmek isteyeceğiniz başka iki özellik de height ve width özellikleridir. Bunlar resimin boyutlar n pixel olarak belirlemenizi sağlar. Neden? Normal olarak browser n z bu boyutlara kendi karar vermek zorundad r, eğer boyutlar siz belirlerseniz sayfan z n yüklenmesi daha h zl olabilir. Ayr ca, bazen HTML 2.0 standratlar n kullanan kullan c lar n baş na gelen browserlar n n çökmesi sorununu engelleyebilirsiniz. Bu özelliği eklemek için gerekli biçim şöyledir: <img src= dosyaismi.gif width=x height=y > Burada X resimin genişliği, Y de yüksekliğidir (pixel cinsinden).
Bizim kulland ğ m z lava.gif dosyas n n boyutlar 300 pixel genişlik ve 259 pixel yüksekliktir. Bu durumda son olarak şu değişikliği yağmal y z: <img alt= Volkanlar üzerine bir inceleme src= lava.gif width=300 height=259> NOT: Belirtecin içinde kullanılan özelliklerin sırası önemli değildir. Êzerinde çal şt ğ m z dosyan n son görünüşü şöyle olmal : Volkanlar Sayfası Bu derste interneti volkanlar hakk nda bilgi toplamak için kullanacak ve bulgular n zdan bir rapor haz rlayacaks n z. Giriş Volkan, bir gezegenden erimiş kaya veya mağman n yüzeye ç kt ğ noktad r. Bu ç k ş, büyük bir patlama ile olabileceği gibi sessiz ve yavaş bir şekilde de olabilir Volkanlar, insanlardan çok önce dünya tarihinde yer alm şlard r. İnsanlar n birkaç milyon y ll k tarihini, dört milyar y l ile karş laşt r n.
Volkan Terminolojisi Volkan araşt rmalar, ya da Volkanoloji, birçok garip terim içerir. kaldera vesikularite pahoehoe reoloji lahar St Helen Dağı Long Valley Mars ta Volkan Bölgeleri Araştırma Projesi Göreviniz, yukar daki listenin d ş nda son yüz y l içinde faaliyete geçmiş bir volkan hakk nda bilgi toplay p rapor etmek. Raporunuzda şunlar olmal : 1.Volkan n çeşiti 2.Jeografik konumu 3.En yak n şehrin ismi, popülasyonu, ve volkana uzakl ğ 4.En son faaliyeti ve verdiği hasar. 5.Faaliyetle birlikte görülen olaylar (toprak kaymalar, depremler, vs.) Sonra, bu volkan n yol açt ğ genel hasarlar üzerine bir gözlem ve bunlar n azalt lmas için neler gerektiği konusunda bir paragraf yaz n. Referanslar
9. Bağlantılar Kullanmak URL Nedir? Web in gerçek gücü istenen yerlere hipertext bağlant lar oluşturabilmektir. Bu istenen yerler başka web sayfalar olabileceği gibi, grafikler, sesler, dijital filmler, animasyonlar, programlar, bir ftp arşivi vb. olabilir. WWW (World Wide Web), URL (Uniform Resource Locators) olarak bilinen bir adresleme sistemi kullan r. Bu hipertext bağlant lar (alt çizgili ve genellikle mavi olarak görünüler) çapa olarak da tan n r. 9a. Yerel Dosyalara Linkler En basit bağlant şekli, ayn dizinde bulunan başka bir HTML dosyas n açmakt r. Bunun için yaz lmas gereken HTML komutu şöyledir: <a href= dosyaismi.html >bağlantıyı sağlayacak yazı</a> a için anchor (çapa) ve href için hypertext reference diyebiliriz. Dosya ismi başka bir HTML dosyas olmal d r. bağlant y sağlayacak yaz, hipertext ve alt çizgili olacak yaz d r. Şimdi, çal şmam zda yerel bir dosyaya bağlant oluşturmak için aşağ dakileri yapacağ z: 1. Volkanlar.html dosyan z text editöründe aç n. 2. St Helen Dağ başl ğ alt nda şunlar yazal m:
Mayıs 18, 1980 de, uzun bir dinlenmeden sonra Washington daki bu sessiz dağ büyük patlamalar hakkında bize <a href= msh.html >önemli incelemeler</a> olanağı sunmuştur. 3. Æal şman z kaydedin ve browserda tekrar yükleyin. 4. Şimdi text editörünüzde yeni (New) bir sayfa aç n. 5. Aşağ daki yaz y girin: <html> <head> <title>st Helens Dağları</title> </head> <body> <h1>mount St Helens</h1> Tepesi ağaçlarla kaplı ve bir zamanlar sessiz olan bu dağ faaliyete geçtiğinde etrafını oyuncaklar gibi dağıttı. </body> </html> 6. Bu dosyay msh.html ad nda diğer dosya ile ayn yere kaydedin. 7. Browser n zda Volkanlar.html dosyas n tekrar yükleyin. 8. önemli incelemeler bağlant s n test edin. Buraya kliklediğinizde browser n msh.html dosyas n yüklemesi gerekir. Bir Grafiğe Bağlantı Bir grafiğe bağlant yaparken kullanacağ n z biçim dosyaya bağlant yapma mant ğ yla ayn d r. Bu sefer bağlant y yapan yaz ya kliklediğiniz zaman karş n za başka bir döküman yerine bağlant n n sonundaki grafik gelir.
Başka Dizinlere Bağlantı Başka dizinlerdeki dosyalara bağlant kurmak için dosya ad n yazd ğ n z yere dosyan n tam yerini (path) ve dosya ismini yazman z gerekir. Mesela, bundan sonra döküman m zda kullanacağ m z resimleri /resimler adl bir dizine koyal m. Böylece resimlerimizin say s artt kça oluşacak kar ş kl ğ azaltm ş oluruz. Şimdi çal şmam za yeni bir resim ekleyelim: 1. Bilgisayar n zda Volkanlar.html dosyas n n bulunduğu yere resimler ad nda bir dizin açal m. 2. Bu dizinin alt na St. Helens Dağ n gösteren bir resim koyal m. Bizdeki bu resimin ad msh.gif. 3. msh.html dosyas n text editörümüzde açal m. 4. Resime ulaşmak için gerekli yere bir bağlant kural m: Tepesi ağaçlarla kaplı ve bir zamanlar sessiz olan bu dağ faaliyete geçtiğinde <a href= resimler/msh.gif >etrafını oyuncaklar gibi dağıttı</a>. 5. Döküman n z kaydedin ve browser n zda tekrar yükleyin. Son olarak etraf n oyuncaklar gibi dağ tt yaz s na kliklerseniz aşağ daki resimin ekranda görünmesi gerekir:
Gördüğünüz gibi başka dizinlere bağlant kurarken tüm yolu yazmak yerine o an bulunduğumuz dizine göre olan konumu yazmam z yeterli olur. Asl nda bu bağlant lar yaparken dosyalar n yolunu root dizininden itibaren yazabilirdik. Fakat kulland ğ m z şeklin bir avantaj, dosyalar m z bilgisayar m zdan başka bir yere taş d ğ m zda (mesela kendi adresine) üzerinde değişiklik yapmam za gerek kalmaz. Aksi taktirde dosyalar n bulunduğu yerleri baştan yazmak gerekirdi. Üst Dizindeki Dosyalara Bağlantı Eğer bir dosya döküman n z n bulunduğu dizinden daha önceki dizinlerde yer al yorsa ne yapacağ z? Gene root tan itibaren dizinleri yazmaktansa başka yollar deneyebiliriz. Mesela şu anki dizin ve dosya s ralamam z şöyle olsun (bundan sonra dosyalar m z bu düzene göre yazacağ z): Bu durumda, msh.html dosyas ndan msh.gif dosyas n görüntülemek için:
<img src=../resimler/msh.gif > yazmam z gerekir. Burada kulland ğ m z.. iki nokta bir önceki dizini belirtir. Şimdi dizin ve dosyalar m z n yerinde bir değişiklik daha yapal m. lava.gif dosyas n resimler dizinin alt na yerleştirelim. Bunu yapt ktan sonra döküman m z browserda görüntülersek lava.gif dosyas n n görüntülenmediğini görürüz. Bunun sebebi art k dosyan n, bulunduğunu belirttiğimiz yerde olmamas d r. Şimdi Volkanlar.html dosyam z text editörümüzde tekrar açal m ve lava.gif dosyas n n sayfaya eklendiği yerde şu değişikliği yapal m: <img alt="volkanlar üzerine bir inceleme" src="../resimler/lava.gif" width=300 height=259> Bir değişiklik daha: Art k yapmam z gereken değişiklik Volkanlar.html dosyas n n ismini index.html yapmak. Neden mi? Bu dersleri bitirdiğinizde sayfan z TR-net teki accountunuza atacaks n z. Diyelim ki sayfan z n adresi http://www.deneme.com.tr/. Son haliyle sayfan za ulaşmak için yazman z gereken adres: http://www.deneme.com.tr/volkanlar.html dir. Fakat başlang ç dosyan z n ad index.html olsayd adrese http://www.deneme.com.tr yazman z yeterli olacakt. Bunun sebebi, bir standart olarak browserlar, eğer bir dosya ismi belirtilmemişse index.html dosyas n n olup olmad ğ na bakar, varsa bu dosyay görüntüler. 9b. URL ler URL, WWW nin bilgisayarlar ve dosyalar bulmak için kulland ğ yoldur. URL in içerdikleri: İnternet servisçi makinas n n çeşiti bir internet adresi
ulaşt ğ dosyan n dizin s ras (path) URL ler nasıl kullanılır? URL lerin kullan lma şekli şudur: şekil://in.ter.net.adresi/dizin/alt-dizin/ /dosyaismi şekil ile belirtilen yer, ulaş lan servisçi makinan n cinsini belirler: http HyperText Transfer Protocol denen dosya aktar m biçimidir. gopher dizinlerin bir menü şeklinde göründüğü bilgi iletim servisi ftp File Transfer Protocol (FTP) denen servisçi dosya aktar m n n gerçekliştiği makinalar için kullan l r. telnet Servisçi makinaya uzaktan erişebilmek için kullan lan bir servistir. Telneti kulland ğ n zda browser n z, bunun için yard mc bir program kullanacakt r. WAIS Wide Area Indexed Server genelde bir konu üzerine anahtar kelimelerden arama yapan servisçi file kendi bilgisayar n zdaki dosyaya ulaşmak için kullan l r. Şekil ile belirttiğimiz yerden sonra hep :// kullan l r. Bunu ise ulaşacağ m z makinan n internet adresi izler.
NOT: Bir çok servisçide büyük küçük harf arası fark vardır. UNIX ve LINUX bilgisayarları büyük küçük harf duyarlıdır ve bugün bir çok web sayfası bu bilgisayarlar üzerinden çalışır (TR-net te olduğu gibi). Volkanlar.html dosyası volkanlar.html dosyasından farklıdır. 9c. İnternet e Linkler Oluşturmak Daha önce dosyalara bağlant lar oluşturduk. İnternet teki sayfalara link oluşturmak da ayn yolla yap l r. Yapman z gereken sadece dosya yerine yazd klar n z yerine internet adresini yazmakt r. Yani, yazman z gereken yaklaş k olarak şöyledir: <a href= URL >Bağlantıyı sağlayacak yazı</a> Şimdi, kendi döküman m za, Mars taki volkanlar gösteren bir sayfan n bağlant s n yapacağ z. 1. index.html dosyan z text editörünüzde aç n. 2. Mars ta Volkan Bölgeleri başl ğ n n alt na şunlar yazal m: <a href="http://bang.lanl.gov/solarsys/mars.htm"> Mars ın</a> kendine özgü volkanik bölgeleri vardır. Bunlardan birinde ise Güneş Sisteminin bilinen en büyük volkanı, <a href="http://bang.lanl.gov/solarsys/raw/mars/olympus.gif"> Olympus Mons</a> yer alır. 3. Æal şman z kaydedin ve browserda tekrar yükleyin. Buna ek olarak, döküman m zdaki referanslar k sm na volkanlarla ilgili bir kaç bağlant daha ekleyelim. Burada listeler ile bağlant lar n birlikte kullan m na dikkat edin: <ul>
<li><a HREF="http://www.avo.alaska.edu/"> Alaska Volcano Observatory</A> <li><a HREF="http://vulcan.wr.usgs.gov/home.html"> Cascades Volcano Observatory</A> <li><a HREF="http://www.dartmouth.edu/~volcano/"> The Electronic Volcano</A> <li><a HREF="http://www.geo.mtu.edu/volcanoes/"> Michigan Tech Volcanoes Page</a> <li><a HREF="http://www.geo.mtu.edu/eos/"> NASA Earth Observing System (EOS) IDS Volcanology Team</A> <li><a HREF="http://www.geol.ucsb.edu/~fisher/"> Volcano Information Center</a> <li><a HREF="http://vulcan.wr.usgs.gov/Servers/ earth_servers.html"> Volcano/Earth Science-Oriented Servers</A> <li><a HREF="http://www.ngdc.noaa.gov/seg/hazard/hazards.html"> NGDC Natural Hazards Data</a> <li><a href="http://www.nmnh.si.edu/gvp/"> Global Volcanism Program (GVP) </a> <li><a href= "http://www.soest.hawaii.edu/hvo"> Volcano Watch Newsletter</a> <li><a href="http://www.jasonproject.org/jason/html/ EXPEDITIONS_JASON_6_home.html"> JASON Project VI: Island Earth</a> <li><a HREF="http://volcano.und.nodak.edu/"> VolcanoWorld</A> </ul> Sayfan z n son hali şöyle olmal d r:
9d. Bir Sayfanın Bölümlerine Linkler Eklemek İnternetten sayfalara ve istediğiniz dosyaya bağlant lar kurmay öğrendiniz. Eğer bir sayfan n/döküman n belirli bir bölümüne (mesela 80. Sat r na) bağlant kurmak isteseydiniz ne yapard n z? HTML dilinde bu da mümkün. Bu iş için kullan lan belirteçlere named anchor (isimlere bağlant ) deniyor. İsimlere bağlant yapabilmek için aşağ daki örneği inceleyin: <a isim= İSİM >Bağlantının yapılacağı yazı</a>
Buradaki İSİM, bağlant y yaparken kullanacağ m z adres yerine gelecek. Bir döküman n kendisinde (sayfan n içinde başka bir yere) bağlant yaparken belirteç: <a href= #xxxx >Hipertext gibi davranacak yazı</a> şeklinde kullan l r. # sembolü browsera döküman n geneline bakmas n ve xxxx isimli bağlant ya gitmesini söyler. Burada Hipertext gibi davranacak yazı ya kliklediğinizde browser #xxxx isminin olduğu yeri ekran n baş na getirir. İsterseniz döküman m zda bu belirteci kullanarak konuyu pekiştirelim: 1. Text editöründe index.html dosyas n aç n. 2. Giriş başl ğ na gelin ve şu şekilde değiştirin: eski hali: <h2>giriş</h2> yeni hali: <h2><a name= başlangıç >Giriş</a></h2> 3. Ayn mant kla, dökümandaki diğer başl klara da birer isim atayal m: <h2><a name= term >Volkan Terminolojisi</a></h2> <h2><a name= mars >Mars ta Volkan Bölgeleri</a></h2> <h3><a name= proje >Araştırma Projesi</a></h3> 4. Şu an döküman n z browserda tekrar yüklerseniz bir fark göremezsiniz, isim bağlant lar kullan c lardan gizlenen belirteçlerdir. Aynı dökümandaki isim bağlantılarına link eklemek
Son oluşturduğumuz isim bağlant lar n kullanabilmek için kullan c lar sayfan n bu bölümlerine yönlendirecek hipertext linkleri oluşturmam z gerekir. Döküman m z üzerinde çal şmaya devam edelim: 1. Şu an aç k değilse, index.html dosyas n aç n. 2. Volkanlar sayfas başl ğ n n alt ndaki cümleden sonra aşağ dakileri yaz n: <hr> <B>Bu derste </B> <ul><i> <li><a href= #başlangıç >Giriş</a> <li><a href= #term >Volkan Terminolojisi</a> <li><a href= #mars >Mars ta Volkan Bölgeleri</a> <li><a href= #proje >Araştırma Projesi</a> </ul> 3. Döküman kaydedip browserda tekrar yükleyin. Başka bir dökümana isim bağlantıları koymak Bu yöntemle başka bir sayfan n istediğiniz sat r na (<a name > belirtecini kulland ğ n z yerlere) bağlant yapabilirsiniz. Bu konunun mant ğ da dosyalara ya da internetteki adreslere bağlant yapmakla ayn d r. Bu sefer ek olarak yazman z gereken # işaretidir. Deneme olarak döküman m z n msh.html dosyas na, index.html dosyas na geri dönmek için bir bağlant koyal m. 1. msh.html dosyas n text editöründe aç n. 2. Sayfan n en alt na (</body> belirtecinden hemen önce) takip eden yaz y yaz n: <hr> <a href= index.html#başlangıç >Volkanlar Sayfasına dönüş</a>
3. Dosyay save edip browser n zda görüntüleyin. Art k sayfada Volkanlar Sayfas na dönüş yaz s na kliklerseniz index.html sayfas n n başlang ç bölümüne dönersiniz. Bundan sonra önceki bilgilerinizi de kullanarak bilgisayar n zda ya da internette istediğiniz dosyan n istediğiniz bölümüne bağlant koyabilirsiniz. 9e. Hipergrafik Linkleri Buraya kadar bağlant lar yaparken düz text kulland k. HTML de kullanabileceğimiz bir yöntem de hipergrafik bağlant lar d r. Bu bağlant lar kullanarak istediğimiz grafiğe bir bağlant atayabiliriz. Şimdi döküman m za dönüp bir örnek deneyelim: 1. Text editörünüzde index.html dosyan z aç n. 2. Long Valley başl ğ alt na aşağ dakileri yaz n: Bu alan seismometresi volkanların yüzeye yaptığı basınç sonucu oluşan depremlerin kuvvetini ölçer. Bulunduğu yer, 600 bin yıl önce patlamış bir volkanın platosudur. <p> <a href=../resimler/seismo.jpg ><img src=../resimler/stamp.gif > -- [Resimin Büyük Hali] -- </a> <p> 3. Dosyay kaydedin ve browserda tekrar yükleyin. Ekrandaki resime mouse u götürürseniz bir hipertext linki olduğunu göreceksiniz.
10. Text Biçimi (<pre> belirteci) Daha önce gördüğünüz gibi, browserlar yaz lar boşluklar dolduracak şekilde ekrana yayar. Fakat yaz lar n z n düzenini kendi isteğiniz doğrultusunda oluşturmak isterseniz <pre> belirtecini kullanman z gerekir. Mesela basit bir tablo oluşturmak istiyorsunuz: <pre> Patlamalar Tarih Alan (km3 cinsinden) ----------- ------- --------------------- Paricutin,Meksika 1943 1.3 Mt. Vesuvius, Italy MS. 79 3 Krakatoa, Endonezya 1883 18 </pre> Sonuç: Patlamalar Tarih Alan (km3 cinsinden) ----------- ------- ------------------------ Paricutin,Meksika 1943 1.3 Mt. Vesuvius, Italy MS. 79 3 Krakatoa, Endonezya 1883 18 Gördüğünüz gibi browserlar <pre> </pre> belirteci aras nda kalan yaz lar yazd ğ n z şeklin ayn s halinde görüntüler. Bu belirteç çoğu zaman bir kaç sat rl k boşluk gerektiğinde de kullan l r. Mesela sayfan z n bir bölümünde 5 sat rl k boşluk istiyorsunuz. Yapman z gereken: <pre>
</pre> Browser n z, pre belirteçlerinin aras ndaki yaz y aynen görüntüleyeceği için bu durumda 5 sat rl k boşluk b rak r. 11. Özel Karakterler >>> òæñæ yaz s n nas l yazars n z? HTML de, ISO özel karakterlerini kolayl kla kullanabilirsiniz. Yazman z gereken sadece : &xxxx; XXXX kullanacağ n z özel karakterin numaras d r. Browser, & işareti ile başlay p ; ile biten rakamlar ya da baz HTML harflerini ekrana bu karakter ya da numaralara karş l k gelen haliyle aktar r. Mesela şimdiye kadar eğer <pre> belirtecini kullanmazsak birden fazla boşluk kullanam yorduk. Ézel karakterler sayesinde bu mümkün. Ekrana bir boşluk ç karmak için: yazman z yeterli. Diğer karakterleri ise aşağ daki listeden bakarak kullanabilirsiniz:
Karakter HTML Girişi ISO Latin-1 kod İsim ya da anlam Cent işareti Ters soru işareti " " " T rnak işareti Boşluk Semboller & & Ampersand Copyright Bölme > > Büyüktür < < Küçüktür µ µ Micron Orta nokta Paragraf ± ± Art /eksi Ingiliz Paundu Müseccel marka Bölüm Japon Yeni Diakritikler Á á á Küçük a, dar aksan Á Á Á Büyük a, dar aksan À à à Küçük a, grave accent À À À Büyük a, grave accent  â â Küçük a, belgili vurgu aksan    Büyük a, belgili vurgu aksan Å å å Küçük a, daire Å Å Å Büyük a, daire
à ã ã Küçük a, tilde à à à Büyük a, tilde Ä ä ä Küçük a, dieresis veya umlaut işareti Ä Ä Ä Büyük a, dieresis veya umlaut işareti Æ æ æ Küçük ae diphtong (ligatüre) Æ Æ Æ Büyük ae diphtong (ligatüre) Æ ç ç Küçük ç, cedilla Æ Ç Ç Büyük ç, cedilla Ç é é Küçük e, dar aksan Ç É É Büyük e, dar aksan È è è Küçük e, grave accent È È È Büyük e, grave accent Ê ê ê Küçük e, belgili vurgu aksan Ê Ê Ê Büyük e, belgili vurgu aksan Ë ë ë Küçük e, dieresis veya umlaut işareti Ë Ë Ë Büyük e, dieresis veya umlaut işareti Í í í Küçük I, dar aksan Í Í Í Büyük I, dar aksan Ð ì ì Küçük I, grave accent Ð Ì Ì Büyük I, grave accent Î î î Küçük I, belgili vurgu aksan Î Î Î Büyük I, belgili vurgu aksan Ï ï ï Küçük I, dieresis veya umlaut işareti Ï Ï Ï Büyük I, dieresis veya umlaut işareti È ñ ñ Küçük n, tilde È Ñ Ñ Büyük n, tilde Ñ ó ó Küçük o, dar aksan Ñ Ó Ó Büyük o, dar aksan Ó ò ò Küçük o, grave accent Ó Ò Ò Büyük o, grave accent Ò ô ô Küçük o, belgili vurgu aksan Ò Ô Ô Büyük ö, belgili vurgu aksan
Ø ø ø Küçük o, eğik çizgi Ø Ø Ø Büyük o, eğik çizgi Õ õ õ Küçük o, tilde Õ Õ Õ Büyük o, tilde É Ö Ö Büyük o, dieresis veya umlaut işareti ß ß ß Küçük keskin s Ô ú ú Küçük u, dar aksan Ô Ú Ú Büyük u, dar aksan Ö ù ù Küçük u, grave accent Ö Ù Ù Büyük u, grave accent Õ û û Küçük u, belgili vurgu aksan Õ Û Û Büyük u, belgili vurgu aksan Ê ü ü Küçük u, dieresis veya umlaut işareti Ê Ü Ü Büyük u, dieresis veya umlaut işareti Ÿ ÿ ÿ Küçük y, dieresis veya umlaut işareti 12. Açıklama Listeleri Daha önce iki çeşit liste gördük- s ral ve s ras z listeler -. Bunlara ek olarak aç klama listesi dediğimiz ve mant k olarak diğer listelere benzeyen bir liste çeşiti var. Bunun diğerlerinden fark, parçalar n baş na numara ya da herhangi bir işaret gelmemesidir. Aç klama listesi belirtecinin kullan l ş şöyledir: <dl> <dt> birinci başlık <dd> birinci açıklama <dt> ikinci başlık <dd> ikinci açıklama : : <dt> N. başlık
<dd> N. açıklama </dl> Tüm liste <dl> </dl> belirteçleri aras nda yer al r. Aras nda da başl k parçalar <dt> ve aç klama parçalar <dd> bulunur. Bir browserda denendiğinde yukar daki örnek şöyle görünür: birinci başl k ikinci başl k : : N. başl k birinci aç klama ikinci aç klama N. aç klama 13. Adres Satırları ve E-Mail Linkleri Sayfan z ziyaret eden insanlar size mail atmak ya da ulaşmak isteyebilirler. Bu durumda adresinizi ve mail adresinizi olduğu gibi yazmak yerine bu işler için kullan lan belirteçlerden faydalanabilirsiniz. Adres belirtecinin HTML şekli: <address> adres bölümüne yazmak istediğiniz yazı </address>
Ak lda tutulmas gereken nokta, adres belirteçlerinin içerisinde diğer belirteçler serbestçe kullan labilir. Érnek olarak: HTML <address> <b>sayfa Başlığı</b><br> HTML Notları<br> Hazırlayan:<br> Kutberk Kargın (kutberk@tr.net)<br> <a href= http://www. tr.net > TR.NET</a><br> Sonuç Sayfa Başlığı HTML Notları Hazırlayan: Kutberk Kargın (kutberk@tr.net) TR.NET Ek olarak, adres k sm na e-mail adresini yazmaktan öte mailto komutunu kullanarak mail adresinizin (ya da herhangi bir yaz n n) üzerine kliklendiğinde size mail gelmesini sağlayabilirsiniz. Mesela sayfan zda aşağ daki gibi bir e-mail hipertext linki oluşturun: <a href= mailto:kutberk@tr.net >Kutberk e bir e-mail atın</a>
Hipertext linkinin üzerine kliklendiğinde browser mail yaz labilecek bir ekran yarat r (mesela netscape kullan c lar için netscape mail). Son olarak, adres sat rlar n z n sonuna sayfan z n adresini yazmak iyi bir al şkanl kt r. Neden mi? Diyelim ki birisi sayfan z print etti ve ç kt. Sayfan zda görünen tüm bilgileri print etmiş olmas na rağmen sayfan z n adresi normal olarak kağ d n hiç bir yerinde görünmeyecektir. Tabi, sayfan n herhangi bir yerine yazmazsan z, bunun için en uygun yerlerden birisi de sayfan n en alt k sm, adresin alt d r (tabiki tercih her zaman sizin- sayfan z istediğiniz gibi tasarlamak sizin elinizde, tabi o sayfay görecek insanlar da ak ldan ç karmamak laz m). Şimdi döküman m z tekrar açal m ve sayfan n sonuna adresimizi ekleyelim: 1. index.html dosyas n bir text editöründe aç n. 2. sayfan n sonunda (ama </body> belirtecinin üzerinde), aşağ dakileri yazal m: <HR> <address><b>volkanlar Sayfası</B> <br> HTML Notları, <a href= mailto:ahmet@tr-net.net.tr > ahmet@tr-net.net.tr</a><br> <tt>her Hakkı Saklıdır</tt> </address> <p> <tt>url: http://www.volkanlarsayfası.com</tt> 14. Blockquote Belirteci <blockquote> (al nt ) komutu fazla kullan lmayan bir komuttur. Döküman n zda başkalar n n sözlerine yer verdiğinizde bu belirteçlerin aras na yazabilirsiniz. Bu belirteç, aras nda kalan yaz y iki <hr> (hard rule/düz çizgi) aras na al r ve sayfada ortalar.
Mesela: <blockquote> Bu bir denemedir. </blockquote> Sonucu: Bu bir denemedir. Görebileceğiniz gibi, asl nda blockquote belirtecinin yapt ğ n diğer belirteçleri kullanarak da yapabiliriz. 15. Renk Kullanımı Arka plan renkleri: Sayfam z n arka plan n renklendirmek için yapmam z gereken <body> belirteciyle birlikte bgcolor özelliğini de kullanmak. <body bgcolor=#xxxxxx> #XXXXXX, arkada belirecek rengin kodudur. Bu renkler RGB şeklinde (Red Green Blue/ K rm z Yeşil Mavi) ve onalt l k sistemdedir. Her iki basamak bir renkten ne kadar yoğun olacağ n belirler (toplam 3 renk 6 basamak). Bu durumda basit bir hesapla kullanabileceğimiz toplam renk say s n n 16.7 milyon renk olduğunu görürüz (genelde bu kadar na ihtiyaç duyulmaz). Say n n baş ndaki # işareti ise say n n Hexadecimal (Onalt l k sistem) olduğunu gösterir.
Elde ettiğimiz bilgileri kullanarak üzerinde çal şt ğ m z döküman n arka plan n siyah yapal m (RGB format nda değeri #000000). Yapmam z gereken tek şey <body> sat r n <body bgcolor=#000000> şeklinde değiştirmek. Yaz ya browserda bak n. Evet, art k hiç bir şey göremiyoruz! Bunun sebebi, yaz rengimizin de zaten siyah olmas yd. Neyse ki yaz rengini ayarlayabileceğimiz komutlar HTML de var: <body bgcolor=#xxxxxx text=#xxxxxx link=#xxxxxx vlink=#xxxxxx> xxxxxx renkleri, bgcolor = arkaplan rengi (normali gri) text = sayfan n normal yaz rengi (normali siyah) link = sayfadaki hipertext linklerinin rengi (normali mavi) vlink = daha önce ziyaret edilmiş adreslerin rengi (normali mor) ni belirleyebilir. Şimdi sayfam z n okunabilir hale gelmesi için şöyle bir renk ayar yapacağ z: <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFF VLINK=#CC0000> Bu bize siyah bir arka plan, sar bir yaz, aç k mavi hipertext, ve k rm z ziyaret edilmiş hipertext sunacakt r. Gerekli değişikliği yapt ktan sonra browserda nas l göründüğüne bak n. Benim browser m sonucu aşağ daki gibi gösteriyor:
16. Text Düzenlemeleri Font Büyüklüğü
<font>..</font> belirteci yaz fontunun büyüklüğünü ayarlamak için kullan labilir. Font büyüklüğü say sal olarak belirtilir. 1 en küçük ve 7 en büyüktür (normali 3). Hat rlaman z gereken, font büyüklüğü sayfan z n görüntülendiği bilgisayar n ayarlar na bağl d r. Ama sonuçta sayfan zda bir yaz n n diğerinden büyük ya da küçük görünmesi sizin elinizde. NOT: Eğer bir browser <font> belirtecini desteklemiyorsa HTML 3.0 da kullanılan <big>..</big> ve <small>..</small> belirteçlerini kullanabilirsiniz. <font> belirtecinin format : <font size=n>deneme</font> şeklindedir. N, 1 den 7 ye kadar bir say d r. Font boyutlar n kullanman n başka bir yolu da: <font size=+2>deneme</font> <font size=-1>deneme</font> şeklinde göreceli bir font boyu saptamakt r. Burada kulland ğ m z +2, o anki font boyutunun üzerine eklenecek bir say d r (eksi de de ayn mant k). Bu belirteç bir diğer belirteç ile ilişkilidir- <basefont>. <basefont size=5> komutu normal font boyutunu 3 den 5 e değiştirir. <font> belirteci yaz n n sadece boyutunu değiştirmeye yaramaz. Bu belirteç sayesinde yaz n n rengini ve tipini de değiştirebilirsiniz. Döküman m zda Volkanlar Sayfas yaz s n şu şekilde değiştirelim: <b><font face= Arial,Helvetica size=+4 color=#ff66ff>v </font> <font face= Arial,Helvetica size=+3 color=#dd0055>olkanlar SAYFASI</font></b>
face komutu yaz n n tipini belirler. İki tane tip yaz lmas n n sebebi ise, eğer browser ilk yaz tipini gösteremiyorsa ikinci tipi seçer. color komutunu ise bgcolor komutundan tan yorsunuz, ismi hariç herşeyi ayn d r. Superscript / subscript Bu iki komut matematiksel yaz l mda (bazen başka yerlerde) oldukça işe yarar. <sup> </sup> <sub> </sub> üst taban Mesela 2 üzeri 5 yaz s n gösterebilmek için 2<sup>5</sup> komutunu kullanmak gerekiyor. <strike> Bu belirteç, <u> (alt çizgi) belirtecine benzer. <strike> </strike> belirteçlerinin aras na gelen yaz y ortas çizgili yapar. 17. <hr> Belirteci Daha önce döküman m zda <hr> belirtecini kulland k fakat bu belirteci daha geniş olarak kullanmak mümkün. <hr> da kullan lan komutlar: <hr width=80% size=10> Bu komut, ekrana çizilecek çizginin, genişlemesine tüm ekran n %80 ini kaplamas n, genişliğinin (dikey) ise 10 pixel olacağ n belirtiyor. Bu belirtece bir de noshade komutu eklenebilir. <hr width=80% size=10 noshade>
noshade komutu, browsera çizginin gölgesi olmayacağ n söyler. Sonuç ise şöyledir: 18. Text ve Grafik Konumunu Ayarlamak Şimdiye kadar yaz lar normal olarak sol taraftan başl yordu. Fakat sayfan z düzenlerken baz yaz lar n sağ tarafta olmas n, bir çoğunun da ortada olmas n isteyeceksiniz. Bu durumda <p> (paragraf) belirteci ile baz komutlar kullanabiliyoruz. <p align=center> Burada <p> belirteci ile kullan lan align komutu tüm paragraf n yerleşimini belirler. Bir şey belirtilmezse browser bunu left kabul eder (normali). center, paragraf n ekranda ortalanmas n sağlar (enine). right ise yaz n n sağa kaymas n sağlar. Grafik ve Text konumları Döküman m z tekrar açal m ve ilk bölümdeki yaz y : <img alt="volkanlar üzerine bir inceleme" src="../resimler/lava.gif" width=300 height=259> <b><font face="arial,helvetica" size=+4 color=#ff66ff>v </font> şu yaz ya çevirelim (tek fark <img> belirtecindeki align komutu) <img alt="volkanlar üzerine bir inceleme" src="../resimler/lava.gif" width=300 height=259 align=left> <b><font face="arial,helvetica" size=+4 color=#ff66ff>v </font>
Değişiklik yapmadan önce sayfa: Değişiklik yapt ktan sonra:
Gördüğünüz gibi <img> belirtecinde kullan lan align=left komutundan sonra geriye kalan yaz lar sayfan n boş yerlerini dolduracak şekilde dizilir. <div> belirteci Bu belirtecin içinde kalan tüm text verilen yerleşimde görüntülenir. Kullan l ş : <div align=left> </div> <div align=right> </div> <div align=center> </div> Buradaki son komut, <center> belirteci ile ayn işi görür. <center> </center> belirteci, arada kalan tüm yaz y ortalayan bir belirteçtir. 19. Tablo Kullanımı
Dökümanlar n zda tablo yapmak için kullanacağ n z belirteç, <table> d r. Bir tablonun başlang c : <table border=n> : : </table> şeklindedir. Bu belirtecin içinde tablonun s ralar n ve kolonlar n belirlemek için <tr> ve <td> komutlar n kullanacaks n z. Bir tablonun HTML format genel olarak şöyledir: <table border=1> <tr> <td>1. satır, 1. kolon</td> <td>1. satır, 2. kolon</td> <td>1. satır, 3. kolon</td> </tr> <tr> <td>2. satır, 1. kolon</td> <td>2. satır, 2. kolon</td> <td>2. satır, 3. kolon</td> </tr> <tr> <td>3. satır, 1. kolon</td> <td>3. satır, 2. kolon</td> <td>3. satır, 3. kolon</td> </tr> </table> Bu tablonun görünüşü ise:
Satır ve Kolonlar Bir <td> belirtecinin içinde colspan ve rowspan özelliklerini kullanarak tablonuzu daha etkin düzenlemeniz mümkün. Aşağ da bununla ilgili iki örnek bulunmakta. <table border> <tr> <td>kolon 1 Satır 1</td> <td align=center colspan=2> Satır 1 Kolon 2-3</td> </tr> <tr> <td>satır 2 Kolon 1</td> <td>satır 2 Kolon 2</td> <td>satır 2 Kolon 3</td> </tr> <tr> <td>satır 3 Kolon 1</td> <td>satır 3 Kolon 2</td> <td>satır 3 Kolon 3</td> </tr> </table> Bu kodun çıktısı:
<table border> <tr> <td>kolon 1 Satır 1</td> <td align=center colspan=2> Satır 1 Kolon 2-3</td> </tr> <tr> <td>satır 2 Kolon 1</td> <td valign=top rowspan=2> Satır 2 Kolon 2</td> <td>satır 2 Kolon 3</td> </tr> <tr> <td>satır 3 Kolon 1</td> <td>satır 3 Kolon 2</td> </tr> </table> Bu kodun çıktısı: Görünmez Tablolar Tablolar n d ş n görünmez yapmak için border=0 komutu kullan l r. Bu durumda bir tablo hala vard r fakat kullan c tabloyu göremez. Görünmez tablolar sayfan z n düzeninde oldukça
işinize yarayabilir. Tablo kullanmadan düzenleyemeyeceğiniz yaz lar görünmez tablolara yerleştirirseniz yaz lar istediğiniz noktada tutmak mümkün olacakt r. Tabloları Renklendirmek Tablolar n her bir hücresini istediğiniz renkte boyayabilirsiniz. Bunun için kullan lacak komut bgcolor d r. Tablo <table bgcolor=#880000> tüm tabloyu belirtilen renge boyar. Sıra tüm s ray belirtilen renk ile doldurur. <tr bgcolor=#880000> Hücre tek hücreyi belirtilen renk ile doldurur. <td bgcolor=#880000>