|
|
|
|
25 Temmuz 2008 Cuma 15:38:32 | |
|
||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
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:
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: <deneme><h4>HTML belirteçleri nedir?</h4></deneme> gene aynı başlığı verir (<deneme> diye bir komut henüz hiç bir browser tarafından desteklenmiyor!); yani browser <deneme> 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:
<!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, TR.NET, 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.
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
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,
HTML Dökümanınızda Değişiklikler Yapmak 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.
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.
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: HTML Başlıklarını Dökümanınıza Yerleştirmek <h1>Volkanlar Sayfası</h1>
<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>
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
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.
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. 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 Sonuç Tüm kontrolü bilgisayara Tüm kontrolü bilgisayara bırakmaktansa onubırakmaktansa onu istediğiniz istediğiniz gibi yönlendirmeniz daha iyidir.şekilde yönlendirmeniz daha iyidir. <p> Devam ediyor…Devam ediyor… <p> Gördüğünüz gibi belirteçler bu iş içinGö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ü bilgisayarabı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!
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 <b>Volkan </b>
<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.
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).
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:
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:
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
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 da bir alt parçanın numaralı alt parçası
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.
Ne kadarını biliyorsunuz?
<ul> <li>kaldera <li>vesikularite <li>pahoehoe <li>reoloji <li>lahar </ul> 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.
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 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
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:
<img align=top src=”dosyaismi.gif>
Yazı buraya gelecek. Dikkat ederseniz, ilk satırdan sonraki yazı boşlukları dolduruyor.
<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.
<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.
<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.
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.
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
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. 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:
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. <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> 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:
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>.
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.
URL, WWW’nin bilgisayarları ve dosyaları bulmak için kullandığı yoldur. URL’in içerdikleri:
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.
<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. 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:
eski hali: <h2>Giriş</h2> yeni hali: <h2><a name=”başlangıç”>Giriş</a></h2> <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> 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:
<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> 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.
<hr> <a href=”index.html#başlangıç”>Volkanlar Sayfasına dönüş</a> 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. 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:
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>
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.
>>>v òÆñæ 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:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
