HTML Hakkında Herşey !!!

**Anarchist** · 08-31-2006, 10:39 AM

HTML Hakkında
İlk HTML dökümanınızı yazmak
HTML dökümanınızı düzenlemek
Başlıklar (headings)
Paragraflara ayırmak
Dökümana stil kazandırmak
Listeler (lists)
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>

**Anarchist** · 08-31-2006, 10:42 AM

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 Sonuç
Tüm kontrolü bilgisayara Tüm kontrolü bilgisayara bırakmaktansaonu
bı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ç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ırakmaktansaistediğ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 StilKazandı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ş

**Anarchist** · 08-31-2006, 10:45 AM

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> <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ı 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: Linkleri Sadece Kayitli Uyelerimiz Gorebilir. Uye Olmak Icin Tiklayiniz..., Linkleri Sadece Kayitli Uyelerimiz Gorebilir. Uye Olmak Icin Tiklayiniz...

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.

**Anarchist** · 08-31-2006, 10:47 AM

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 Linkleri Sadece Kayitli Uyelerimiz Gorebilir. Uye Olmak Icin Tiklayiniz... . Son haliyle sayfanıza ulaşmak için yazmanız gereken adres: Linkleri Sadece Kayitli Uyelerimiz Gorebilir. Uye Olmak Icin Tiklayiniz... dir. Fakat başlangıç dosyanızın adı index.html olsaydı adrese Linkleri Sadece Kayitli Uyelerimiz Gorebilir. Uye Olmak Icin Tiklayiniz... 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>

08-31-2006, 10:39 AM	#1 (permalink)
Üye Bilgileri Anarchist Lady D´Arbanville Giriş: Jun 2006 Şehir : İstanbul Yaş: 16 Mesaj: 9,300 Blog Başlıkları: 1 Rep Gücü: 6000 Rep Puanı : 40877 Rep Seviyesi:	HTML Hakkında Herşey !!! BU KONUYA YORUM YAPMAK İÇİN HEMEN ÜYE OLUN 170.000 UYE YORUMLARINIZI OKUSUN HTML Hakkında İlk HTML dökümanınızı yazmak HTML dökümanınızı düzenlemek Başlıklar (headings) Paragraflara ayırmak Dökümana stil kazandırmak Listeler (lists) 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>

08-31-2006, 10:42 AM	#2 (permalink)
Üye Bilgileri Anarchist Lady D´Arbanville Giriş: Jun 2006 Şehir : İstanbul Yaş: 16 Mesaj: 9,300 Blog Başlıkları: 1 Rep Gücü: 6000 Rep Puanı : 40877 Rep Seviyesi:	BU KONUYA YORUM YAPMAK İÇİN HEMEN ÜYE OLUN 170.000 UYE YORUMLARINIZI OKUSUN 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 Sonuç Tüm kontrolü bilgisayara Tüm kontrolü bilgisayara bırakmaktansaonu bı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ç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ırakmaktansaistediğ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 **StilKazandı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ş

08-31-2006, 10:45 AM	#3 (permalink)
Üye Bilgileri Anarchist Lady D´Arbanville Giriş: Jun 2006 Şehir : İstanbul Yaş: 16 Mesaj: 9,300 Blog Başlıkları: 1 Rep Gücü: 6000 Rep Puanı : 40877 Rep Seviyesi:	BU KONUYA YORUM YAPMAK İÇİN HEMEN ÜYE OLUN 170.000 UYE YORUMLARINIZI OKUSUN 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> <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ı 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: Linkleri Sadece Kayitli Uyelerimiz Gorebilir. Uye Olmak Icin Tiklayiniz..., Linkleri Sadece Kayitli Uyelerimiz Gorebilir. Uye Olmak Icin Tiklayiniz... 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.