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çleriHTML 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ş