doc1. HTML Hakkında
download 
Şikayet Transkript
1. HTML Hakkında
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 için kullanacak ve bulgularinizdan hazirlayacaksiniz. <h2>Giriş</h2> Volkan, bir gezegenden erimiş kaya veya mağmanın yüzeye çıktığı noktadır. toplamak bir rapor Bu çıkış, büyük bir patlama ile olabileceği gibi sessiz ve yavaş bir şekilde de olabilir. <p> Volkanlar, insanlardan almışlardır. İnsanların çok önce birkaç dünya milyon tarihinde yıllık yer 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 için interneti kullanacak volkanlar ve hakkında bilgi bulgularınızdan toplamak 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, almışlardır. insanlardan İnsanların çok önce birkaç dünya milyon dört milyar yıl ile karşılaştırın. tarihinde yıllık yer tarihini, ş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 Sonuç Tüm kontrolü bilgisayara bırakmaktansa onu bırakmaktansa onu istediğiniz istediğiniz gibi yönlendirmeniz daha iyidir. şekilde yönlendirmeniz daha iyidir. Devam ediyor… <p> Devam ediyor… <p> Gördüğünüz gibi belirteçler bu iş için Gördüğünüz gibi belirteçler var! bu iş için var! Paragraf <p> ve <br> belirteci HTML Sonuç Tüm kontrolü bilgisayara<br> Tüm kontrolü bilgisayara bırakmaktansa onu istediğiniz<br> bırakmaktansa istediğiniz şekilde yönlendirmeniz daha şekilde yönlendirmeniz daha iyidir. iyidir. <p> Devam ediyor… Devam ediyor… Gördüğünüz gibi belirteçler <br> bu iş için var! Gördüğünüz gibi belirteçler<br> 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ı: Stil Belirteçleri HTML Sonuç <b>Bu yazı koyu…</b> 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 Bu yazı koyu ve italik ve italik</b></i> <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. tarihini, İnsanların dört birkaç milyon <b><i>milyar</i></b> yıllık 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> <ol> <li> <li> <li> <li> </ul> </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ı gerektiği konusunda bir paragraf yazın. için neler 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, Washington’daki hakkında bu uzun sessiz bize <a bir dinlenmeden dağ büyük sonra patlamalar 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 href=”resimler/msh.gif”>etrafını geçtiğinde oyuncaklar <a 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ı, href="http://bang.lanl.gov/solarsys/raw/mars/olympus.gif"> <a 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 dönüş</a> Sayfasına 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 Mt. Vesuvius, Italy MS. 79 Krakatoa, Endonezya 1.3 1883 3 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 ISO Latin-1 kod İsim ya da anlam ¡ ¡ Cent işareti ¿ ¿ Ters soru işareti " " Tırnak işareti   Boşluk " HTML Girişi 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) Ç ç ç Ç Ç Ç 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 ç, cedilla Ø ø ø 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 birinci açıklama ikinci başlık ikinci açıklama : : N. başlık 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 ([email protected])<br> <a href=”http://www. tr.net”> TR.NET</a><br> Sonuç Sayfa Başlığı HTML Notları Hazırlayan: Kutberk Kargın ([email protected]) 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:[email protected]”>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:[email protected]”> [email protected]</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” color=#dd0055>OLKANLAR SAYFASI</font></b> size=+3 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> üst <sub>…</sub> 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 </font> face="Arial,Helvetica" size=+4 color=#FF66FF>V 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 <tr bgcolor=#880000> tüm sırayı belirtilen renk ile doldurur. Hücre <td bgcolor=#880000> tek hücreyi belirtilen renk ile doldurur.
