0. HTML Döküman İçinde Link Kullanımı
Web sayfalarının en önemli özelliklerinden birisi, kolayca başka sayfalara ve dökümanlara geçiş yapılabilinmesidir. Bu,
<A> belirteçi kullanılarak yapılır. Aşağıdaki örneği inceleyelim :
Ana sayfaya dönmek için
buraya fare ile tıklayınız.
Bunun bir web istemcisindeki görüntüsü ise aşağıdaki gibi olacaktır :
Ana sayfaya dönmek için buraya fare ile tıklayınız.
Örnekte, "buraya" kelimesine index.html dosyası bağlanmıştır. Böylece, "buraya" kelimesinin üstüne gelip fare ile tıkladığınızda,
http://www.nohut.8m.com/index.html yüklenecektir.Bu ve benzeri URL lere bağlantı tanımlarken, bağlantı kurmak istediğimiz kelimenin soluna <A HREF="tam-url-adı"> yazıyoruz. Bağlantı kelimesinden sonra ise, [/url] ile belirteçi kapatıyoruz. Yukarıdaki örnekte, eğer index.html dosyası aynı dizinde ise, uzun uzun URL'i yazmak yerine doğrudan <A HREF="index.html> yazmak ta yeterlidir. Bu yolla, her türlü URL kullanılabilir (ftp, http, e-posta, gopher, wais). Aşağıda kullanımla ilgili bazı örnekler var :
Bana <A HREF="mailto:ysava@yahoo.com> e-posta göndermek [/url] ister misiniz? Bana e-posta göndermek ister misiniz?
ODTÜ FTP
Simtel Arşivi ODTÜ FTP Simtel Arşivi
İstenildiği kadar bağlantı aynı anda kullanılabilir. Bir diğer kullanımda, eğer istenirse, bir URL adresine değil de herhangi bir dosyaya da bağlantı yapılabilir. İlgili bağlantı fare ile tıklandığında, eğer o dosya tipi web sunucusu ve sizin web istemciniz tarafından bilinen bir tipse, o zaman ekranda sonucu görürsünüz. Söz gelimi, düzyazı dosyalar (TXT), Resim dosyaları (GIF, JPG, JPEG, PNG, XBM) böyledir.
<A HREF="sad.gif"> Buraya tıklarsanız [/url] üzgün bir surat göreceksiniz.
Eğer ilgili dosya bilinmeyen bir tipte ise, o zaman bu bağlantı tıklandığında, kullanıcının web istemcisi o dosyayı "diske saklamak" ya da bir uygulama programıyla açmak şeklinde iki seçenek sunar. Bazı dosya tipleri ise, web istemcilerine yüklenen yardımcı "plug-in" ler ile işlenebilir. Bunlardan en popülerleri ses formatları (AU, WAV, MID); video formatları (RM, MOV, AVI) ve bazı özel tipte dosyalardır (AutoCAD çizim dosyaları gibi).
Bir Resim Dosyasının Bağlantı Elemanı Olarak Kullanılması : Bazen bir resim dosyası da bağlantı elemanı olabilir. Böylece, kullanıcı ilgili resmi fare ile tıklayarak belirtilen yeni dosyaya ulaşır. Bunu bir örnekle görelim :
Mail göndermek için zarfın üzerini tıklayın.....
<IMG SRC="../../index_dosyalar/e-mail.gif" HEIGHT=20 WIDTH=28 BORDER=0>Mail göndermek için zarfın üzerini tıklayın......envelope.gif (96 bytes)
Dikkat edilirse, bağlantı yapılacak yerde, <IMG SRC="envelope.gif" HEIGHT=20 WIDTH=28> kullanıldı. <IMG>, tek başına kullanılan bir belirteçtir ve başka parametreler de alabilir. Yukarıdaki örnekte, resmin eni ve boyu piksel cinsinden veriliyor. Ayrıca, resmin çevresinde bir belirgin sınır (BORDER) verilmek isteniyorsa 0 yerine daha büyük bir değer kullanılmalı.
Döküman İçi Bağlantılar :
Bir metin üzerinde belirli bölgelere ulaşmak için yine belirteçler kullanılabilir. Şu an okuyor olduğunuz döküman, buna bir örnektir. Aşağıdaki satırları inceleyelim :
<A HREF="#1">Benim de bir web sayfam olabilir mi? Bunun için nelere ihtiyacım var?[/url]
<A HREF="#2">Bir web sayfası neye benzer? HTML nedir?[/url]
<A HREF="#3">Bir web sayfasında görülebilecek tipik elemanlar nelerdir?[/url]
Yukarıdaki satırlar bir web istemcisinde şöyle görünecektir :
Benim de bir web sayfam olabilir mi? Bunun için nelere ihtiyacım var?
Bir web sayfası neye benzer? HTML nedir?
Bir web sayfasında görülebilecek tipik elemanlar nelerdir?
Burada, HREF ile verilen aslında, dökümanın sizin belirlediğiniz bir kısmı. Söz gelimi, ilk satırı ele alacak olursak, kullanıcı buraya fare ile tıkladığında dökümanda "1" belirteci ile verilen kısma gidiliyor. Burası ise,
<A NAME="1">[/url] Benim de bir web sayfam olabilir mi? Bunun için nelere ihtiyacım var?
<P>Internet erişimi olan herkesin bir web sayfası olabilir. Web üzerinde gezinirken rastladıklarınıza benzer sayfalar yapabilmeniz için ilk öncelikle
şeklinde. Yani, bir bağlantıya tıklandığında döküman içinde nereye gelinmesi isteniyorsa, ilgili yere
<A NAME="belirteç-adı">[/url] şeklinde bir tanımlama yapıyoruz. Buna "Anchor" (belirteç?) denir. Belirteç adlarının illa ki sayılar olması gerekmez. tek karakterden oluşması da gerekmez. Kendinizin belirleyeceği herhangi bir isim olabilir.
Eğer, bir döküman içinden başka bir dökümanın "belirteç kullanılarak tanımlanmış" bir bölümüne bağlantı verilmek isteniyorsa, bu durumda da, HREF="diğer_döküman_ismi#parça_ismi" şeklinde bir kullanım uygulanır.
11. Temel HTML Komutları/Belirteçleri
Metin Formatlama Belirteçleri :
Bir HTML döküman hazırlarken, satırlar ya da kelimeler arasında istediğiniz kadar boşluk bırakabilirsiniz. Kodu takip etmeyi kolaylaştırmak için HTML komutlarını metinden boşluklarla ayırabilirsiniz. Bunun dökümanın web istemcisi üzerindeki görünümünde hiç bir fonksiyonu olmayacaktır.
Döküman içinde, yeni bir paragrafa başlarken, <P> belirteçini kullanmalısınız. Bu belirteçi çokça kullanacaksınız :-) HTML dökümanlarında <P> belirteç kullanmadıkça bir cümle herhangi bir yerinden ayrılıp kalan kısmı altta görünebilir, birden fazla boş satır tek satır olarak algılanır. Bir web tarayıcısı satır sonlarını ve boş satırları gözardı edeceğinden, paragrafları mutlaka < p> belirteci ile ayırmalısınız.
Eğer bir satırı belli bir yerinden bölmek istiyorsanız <BR> belirteçini kullanmalısınız. Aşağıda bunlarla ilgili küçük bir örnek var :
<P>Burada yeni bir paragraf başladı. Ben satırın burada <BR>
bölünmesini istiyorum.
Eğer <P> kullanılmasa idi, ilgili metin bir üstteki bilgilerle birleşecekti. <BR> kullanılmasaydı, henüz satır bitmediği için, alt satıra geçilmeyecekti. Hem <P>, hem de <BR> belirteçleri tek kullanılır, çiftleri yoktur.
Aşağıdaki tabloda, sık kullanılan bazı metin formatlama belirteçleri görülmektedir. Belirteçler iç içe kullanılabilir, ancak birbirlerini kesmemelidirler. Bu belirteçleri kullanırken, belirtecin etkimesi istenen yazı <> .. </> arasına alınır. Söz gelimi,
Bu yarı italik şeklindeki bir HTML kodu, "Bu yazı italik" şeklinde bir sonuç üretecektir.
Yazıyı italik yapar.
<tt> </tt> Yazıyı sabit gernişlikli yapar (daktilo harfleri gibi).
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> Bu belirteçler, döküman içinde kullanılabilecek başlıklardaki yazıların büyüklüklerini tanımlar. Sayı arttıkça yazı büyüklüğü azalır. Bunların yerine, daha esnek <FONT> </FONT> belirteci de kullanılabilir. Bu kullanımda, <FONT SIZE=-2> 'den <FONT SIZE=+2> ye kadar yazı büyüklüklerü verilebilir.
Yatay bir çizgi oluşturur. <hr SIZE=4 WIDTH= "50%"> şeklinde, daha kalın ve dar bir çizgi de yapılabilir.
<center> </center> Yazı ve resimleri sayfada ortalar .
Yazıyı hem sağdan, hem soldan birmiktar içeri kaydırır.
Bu belirteçler arasına yazılan her şey, yazıldığı gibi ekrana çıkar. Boşluklar, tab'ler, satır bölmeleri vb. korunur.
HTML Döküman İçinde Açıklama Satırları : HTML Döküman İçinde, kodu takip etmede kolaylıklar sağlayacak bazı açıklama satırları konabilir. Döküman içinde herhangi biryerde, "<!--" ve "-->" belirteçleri arasında kalan hiçbirşey web istemcileri tarafından dikkate alınmaz.Örnek;
<!-- Bu bir açıklama satırıdır ve web istemcisinde görüntülenmez -->
12. Sayfa Arka Plan resimleri/renkleri ve Metin İçinde Renk Kullanımı
HTML sayfalarınızın arka planında isterseniz bir resim olabilir. Ya da, sayfa arkaplanını sizin istediğiniz bir renk yapabilirsiniz. Bu, döküman başlangıcındaki <BODY> belirtecine bazı seçenekler ekleyerek yapılır. Sözgelimi şu an okuduğunuz dökümanın arkaplanı aslında, "chalk.gif" isminde bir resim dosyası. Bu,
<BODY BACKGROUND="chalk.gif"> şeklindeki bir kullanımla sağlandı. Eğer arkaplan renginin kırmızı olmasını isteseydik o zaman da, <BODY BGCOLOR="#FF0000"> dememiz gerekecekti. Buradaki FF0000, kırmızının, RGB renk ayrım sistemindeki hekzadesimal (16-lik sistem) karşılığı.
Aslında, HTML döküman içinde bazı şeylerin renklerini kontrol edebiliyoruz :
* <body> belirtecinde, bgcolor, text, link, vlink, ve alink seçenekleri sırasıyla sayfa arkaplan rengi, sayfadaki yazıların rengi, henüz kullanıcının ziyaret etmediği bağlantı elemanları (link), ziyaret edilmiş bağlantı elemanları ve aktif bağlantı elemanlarını (yani, tam bir bağlantının üzerine fare ile tıkladığınızdaki renk) tanımlar.
* Sayfa içinde herhangi bir yazının rengini değiştirmek için <font> belirteci, color seçeneği ile birlikte kullanılır (<FONT color="#FF0000"> ... </FONT> gibi).
Renk değerleri verilirken şu şekilde hareket edilir :
* Genel renk tanımı : "#RRGGBB" dir. Burada, RR, GG, ve BB, sırasıyla kırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal sayılardır. Bu sayılar yerine aşağıdaki renk tanımlama kelimeleri de kullanılabilir : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), or yellow (yellow)
13. Listeler
Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.
Düz (Numarasız) listeler
Düz liste (unordered lists, <ul>) oluşturmak için,
1. Listeye başlamak için belirteç açılır. <ul>
2. Liste elemanlarını teker teker girerken başına <li> belirteci girilir. Kapatmak için </li> belirtecine gerek yoktur.
3. Listeyi bitirmek için belirteç kapatılır. </ul>
Örnek olarak,
<ul>
<li> Elma
<li> Armut
</ul>
Örnek, ekranda şu şekilde görülür :
* Elma
* Armut
<li> belirteçleri içinde paragraflar, diğer dökümanlara bağlantılar, ve diğer belirteçleri kullanabilirsiniz.
Numaralı Listeler
Numaralı listeler (ordered lists <ol>), düz listelerden farklı olarak, <ul> belirteci yerine <ol> kullanırlar. Ekrandaki liste elemanlarının başına 1'den başlayarak sayılar eklenir. Aşağıdaki HTML kodu,
<ol>
<li> Linux İşletim Sistemi
<li> Linux'un desteklediği donanımlar
</ol>
ekrana şunları yazar:
1. Linux İşletim Sistemi
2. Linux'un desteklediği donanımlar
Konu: [+] Web sayfası nasıl yapılır en kolay yolu?Üstelik 30 aşamada.. (Okunma sayısı 10308 defa)
Nisan 25, 2007, 19:51:14 ÖS