Gönderen Konu: Web Programcısının El Kitabı-2 (Okunma sayısı 1763 defa)

burcin · « : 26 Ekim 2006 20:48:08 »

WEB SAYFASI TASARIMIN TEMELLERİ

EVET, nihayet bir Web sunucusunda kendinize ait bir alan elde ettiniz ve Web aracılığı ile başkalarına söyleyecek çok şeyiniz var. Peki bir Web sayfasını tasarlamaya nereden başlamalı? Öğrenmeniz gereken temel dilin HTML (Hypertext Mark-up Language) olduğunu belirtmiştik. Bu dil aslında, normal metni, hypertext adı verilen ve web browser'larla görüntülenmeye uygun metin haline dönüştüren bir kodlar silsilesi. Diğer bir deyişle HTML, basit bir belgeyi alıp içine bu belgenin sayfa düzeni ve metin biçimleri ile ilgili bilgiler yerleştirmenin ve bu belgeyi diğer metin (ve/veya grafik) içerikli belgelerle ilişkilendirmenin yoludur.

Web'de yayınlanmak üzere belgeler hazırlarken, HTML kodları ile metinlerinize vereceğiniz biçimler belirteç (İngilizce adı ile mark-up veya tag) adını taşır. Bunlar metnin çeşitli yerlerinde, ' <' ve ' >' şeklindeki parantezlerin arasına yerleştirilen kodlardır. Bunlar arasında diğer Internet sayfalarına (veya URL'lere) geçişi sağlayan ‘link'ler de bulunabilir.HTML bir dil olarak adlandırılsa da, HTML belgelerinin (kısaca Web sayfalarının) hazırlanması klasik bilgisayar dilleri ile programlama yapmaya pek benzemez. Daha çok kelime işlemcilerle çalışmaya benzer. Ancak burada yazıtipi büyüklüğünü ayarlamak, bir metni kalın veya italik yapmak için menü komutlarını kullanmaz, bunları metnin başına ve sonuna koyduğunuz kodlarla belirlersiniz. (WordPerfect ile çalışanlar bunu kolayca anlayacaktır, çünkü bu kelime işlemcide yazdığınız metinlerin biçim kodlarını da Reveal Codes komutu ile görüntüleyebilirsiniz.) Metni ve bu kodları nerede yazacağız diyorsanız, başlangıçta (hatta PC World Online'nın webmaster'larına sorarsanız her zaman) Windows'un Not Defteri fazlasıyla yeterli olacaktır.

Bu kısa girişten sonra bir örnek ile HTML kodlarını kullanmaya başlayalım. Diyelim ki elimizde şöyle bir metin var:

Düşünde bile göremez işler,
Düşlerin gördüğü işleri.

Bu metni HTML kodları ile şöyle yazarsak:

<B>Düşünde</B> bile göremez,
<B>işler</B>,<BR><B>Düşlerin</B> gördüğü <B>işleri</B>.<BR>

Web browser'da aşağıdaki gibi bir görüntü elde ederiz:
Düşünde bile göremez işler,

Düşlerin gördüğü işleri.

Bu örnekte <B> ve </B> belirteçleri Web browser'a aralarındaki metni kalın (bold) göstermesini söyler. <BR> belirteci ise satır başı verilmesi gerektiğini. Bunlar gibi başka pek çok belirteç var ama güzel bir Web sayfası tasarlamak için başlangıçta öğrenmeniz gereken belirteç sayısı 30-40 kadardır. Profesyonelleştikçe yeni belirteçler kullanmaya başlayabilirsiniz.

Bir de yazdıklarınızın düzgün görünmesi için her html dosyasının başında:<html> <head> <title> </title> </head><body>

sonunda:

</body></html>

belirteçlerinin bulunmasına dikkat edin. Bunlar sayfanın başını sonunu belirlemek için gerekli belirteçlerdir. Koymazsanız, Web browser'ınızda metin belirteçleri ile birlikte görünebilir.Bu örnekteki belirteçleri kendiniz denemek istiyorsanız, Not Defteri'ne istediğiniz metni bu belirteçleri kullanarak girin. Belgeye bir isim ve htm soyadını (Windows 95'te html soyadını da kullanabilirsiniz) vererek kaydedin. Sisteminize bir Web browser yüklü ise htm soyadlı bu belgenin üzerine çift tıkladığınızda browser açılacak ve metniniz biçimlendirilmiş haliyle ekrana geelcek.

HAYDİ BİR WEB SAYFASI YAPALIM

HTML dilini öğrenmenin en kolay yolu, deneme yanılma ile web sayfaları hazırlayarak bu sayfaları web tarayıcısı ile kontrol etmek, hataları düzelterek ilerlemektir. Ayrıca bilmediğiniz kodların nasıl kullanıldığını öğrenmek için Internet bağlantınız varsa varolan HTML sayfalarını web tarayıcınızın kaydetme seçeneğini kullanarak sabit diske kaydedip herhangi bir metin editörü kullanarak açıp inceleyebilirsiniz. Şimdi adım adım bir web sayfası hazırlayalım. Adım 1. Pencere Başlığının, arka planın belirlenmesi ve renkler. Her web sayfasının bir başlığı olmalıdır. Bu başlık web tarayıcısının başlık çubuğunda görüntülenecektir. Bu iş için <title> tag'ı kullanılır.

<title> ve </title>

tag'ları arasına yazacağınız metin web sayfasının başlığı olarak görüntülenecektir. <title> tag'ı aşağıdaki gibi kullanılır. <title>Bu benim ilk denemem!</title>Web sayfalarının arka planını da istediğiniz gibi ayarlayabilirsiniz. Bu aşamada iki adet seçeneğiniz var. Birincisi boş bir arka plan kullanarak bu arka planın rengini ayarlamak, ikincisi ise bir resim dosyasındaki resmi alıp web sayfasının arka planına ' döşemek'. Bu işlemi aynen Windows 95'in masaüstündeki duvar kağıdına benzetebiliriz. Önce boş bir arka planı renklendirmeyi görelim. Web sayfasının arka planının rengi <body> tag'ını kullanarak değiştirilir. Default arka plan rengi gridir. Arka plan rengini örneğin beyaz yapmak için body tag'ını

<body bgcolor='white'>veya <body bgcolor='#FFFFFF'>

şeklinde kullanabilirsiniz. Birinci seçenekte rengin İngilizce ismi, ikinci seçenekte ise aynı rengin RGB cinsinden renk kodu hexadecimal (onaltılı sayı sistemi) olarak verilmektedir. Eski tarihli browser'lar renk isimlerini algılayamazlar, bu yüzden sayfalarınızda renklerin onaltılı sayı sistemi kodlarını kullanmak daha hayırlıdır. Yan tarafta gördüğünüz tabloda, web sayfalarının arka planlarında kullanılabilecek olan temel renkler isim ve sayı kodu olarak listelenmiştir. Onaltılı sayıların RGB kombinasyonları ile oynayarak istediğiniz rengi web sayfası arka plan rengi olarak belirleyebilirsiniz.

Bir Web sayfasının arka planına bir resim döşeyebilirsiniz. Bu işlem için ilk önce elinizde bir resim dosyası olması gerekir. Web sayfalarında kullanılabilecek bütün resimler JPG veya GIF formatında olmalıdır. Web okulunu hazırlarken elinizde bir resim düzenleme programının olduğunu ve JPG veya GIF formatındaki dosyalarla çalışmayı bildiğinizi varsayıyoruz. Örneğin elimizde arka.gif diye bir resim olsun. Bu resmi web sayfasının arka planına döşemek için yine <body> tag'ını kullanacağız. ARKA.GIF adındaki bir resmi web sayfasının arkasına döşemek için <body> tag'ını aşağıdaki gibi

<body background=' arka.gif'>

kullanmalısınız. Bu aşamada ARKA.GIF dosyasının, HTM dosyası ile aynı klasörde yer alması gereklidir. Örnek bir resim döşemesi aşağıdaki resimde gösterilmiştir. Bu aşamada bir web sayfasının arka planında bir resim döşediğinizde, arka plan rengi kullanmaya gerek kalmadığı gibi bir hisse kapılırsınız, yanılırsınız. Genelde Internet yavaş bir şey olduğu için, çoğu kullanıcı sörf yaparken resimleri kapatma yoluna gidiyorlar. Böyle olunca arka plana döşenmiş resimler görünmeyecek, arka plan rengi de default olarak gri olduğu için sizin hiç düşünmediğiniz bir web sayfası ortaya çıkabilecektir. Bu yüzden size tavsiyemiz, arka plan grafiği kullandığınızda arka planda kullandığınız resme uygun bir arka plan rengini de <body> tag'ının içinde belirtmenizdir. İki belirteç bir tag içerisinde kullanılabilir. Ve resmiler kapatıldığında web tarayıcısı otomatik olarak belirtilen arka plan rengini web sayfasına uygulayacaktır. Sarı içerikli bir arka plan resmi ile kullanılması gereken <body> tag'ı aşağıda gösterilmiştir.

<body background=' arka.gif' bgcolor='#ffff00'>

Adım 2. Web sayfasının metin içeriği. Web sayfalarında aynen kitap veya dergi sayfalarında olduğu gibi metinler ve resimler kullanılabilir. 2. Adımda web sayfalarında metinlerin kullanımına değineceğiz. Web sayfalarında metinler aynen Word veya benzeri bir kelime işlemci programda olduğu gibi bold, italik vs.. şeklinde formatlanabilir, font tipi, rengi ve boyutu ayarlanabilir. Web sayfasının içerisine yazdığınız metin web tarayıcısının genişliği boyunca yazılır, artan kısım otomatik olarak alt satıra atılır. Örneğin aşağıdaki gibi bir metnimiz olsun.

Merhaba. Bu benim ilk web sayfası denemem. Yazdığım metni bold, italik, veya altçizgili olarak görüntülemek istiyorum.

Bu metni web sayfasına girdiğinizde aşağıdaki gibi bir ekran görüntüsü ile karşılaşacaksınız. Şimdi bu metni formatlamaya başlayalım. Öncelikle merhaba kısmını büyük yapmak lazım. Bunun için de <hx> tag'ını kullanacağız. Bu tag'da x yerine birden 6'ya kadar numara verebilirsiniz. 1 en büyük boyut, 6 en küçük boyuttur. Denemeyle sabittir, 1 ile 4 arasında rakamlar kullanmak en iyisidir. Şimdi merhaba yazısını büyütmek için onu <h1> tag'ına alalım.

<h1>Merhaba</h1>

Burada, <h1> ile </h1> arasındaki metin, büyültülecektir. Aşağıdaki resimde merhaba tag'ı değişik <hx> boyutlarında kullanılmıştır. Böylece merhaba yazısını istediğimiz gibi büyüttük. <hx> tag'ını kullanırken öğrendiğimiz bir ikinci şey ise metin formatlamasının nasıl yapıldığı. Demek ki, bir tag'ın formatlaması iki tag arasına (<h1> ile açılış, </h1> ile kapanış) aldığımız metne uygulanıyor. Şimdi hızlı bir biçimde diğer metin tag'larını inceleyelelim.

aradaki metni bold (kalın) yapar

aradaki metni italik yapar

aradaki metnin altını çizer

Bu tür metin formatlama tag'ları birbirlerinin içinde kullanılabilirler. Örneğin bir metin parçasını hem bold hem de italik yapmak için .....

formatlamasını kullanmak gerekecektir. Özgün metnimize geri dönelim. Bu metinde adı geçen formatlamaları uyguladığımızda HTML sayfamızdaki metin aşağıdaki gibi olacaktır.

<h1>Merhaba. </h1>Bu benim ilk web sayfası denemem. Yazdığım metni bold, italik, veya altçizgili olarak görüntülemek istiyorum.

Böyle bir formatlama yapıldığında elde edilecek olan web sayfası görüntüsü aşağıdaki gibidir. Metin parçalarını web sayfasında görüntülerken paragraf başı ve satır sonunu da elle işaretlemek zorundasınız yoksa metin otomatik olarak alta kaydırılacaktır. Burada karşımıza iki adet tag çıkıyor. Bunlardan birincisi
, ikincisi de <p> tag'ı. Birincisi satır sonu, ikincisi ise paragraf başı anlamına geliyor. Söz konusu metinde ' Bu benim ilk web sayfası denemem' yazısından sonra bir satır sonu yani <enter> verelim. Ayrıca paragraf başını denemek için de ' bold, italik, veya altçizgili' metnini yeni bir paragraftan başlatalım. Bu durumda kullanacağımız formatlama aşağıdaki gibi olacaktır. <h1>Merhaba. </h1>Bu benim ilk web sayfası denemem.
Yazdığım metni <p>bold, italik, veya altçizgili <p>olarak görüntülemek istiyorum.Dikkat ederseniz, <p> yani paragraf başı tag'ının kullanıldığı yerlerde
yani satır sonu kullanmıyoruz. Çünkü paragraf başı tag'ı zaten satır sonunu da belirlemektedir. Yukarıdaki örnekte kullanılan tag'lamanın ekranda göstereceği sonuç aşağıdadır. Son olarak HTML sayfalarında enter tuşunu kullanmanın web sayfasının görünümüne bir etkisi olmadığını söyleyelim. Web sayfalarının ekranda görünümünde satır sonları, satır araları ve paragraf başları tamamen tag'lar ile belirlenir. Bu yüzden metin dosyasında enter kullanmanın web sayfasına herhangi bir etkisi yoktur. Ancak web sayfasını düzenlerken her şeyin derli toplu gözükebilmesi için bu tür bir enter'lama yapabilirsiniz. Gelecek sayımızda metin formatlarken renk ve font kullanmayı,

 tag'ının ne işe yaradığını, metinlerin bir liste halinde nasıl alt alta sıralanacağını görecek ve web sayfalarında resim kullanımına giriş yapacağız. 

HTML dökümanın hazırlanması 

HTML Dökümanları tamamı ASCII karakterlerden ve herhangi bir editörde yazılabilen metinlerden oluşmuştur. UNIX üzerinde pico veya vi kullanarak HTML dökümanlarınızı hazırlayabilirsiniz. 
Bunun dışında, kullanıcının bu dili bilmediği farzedilerek Windows ve DOS altında çalışan çeşitli programlar hazırlanmıştır. Ayrıca, HTML kodunun doğruluğunu kontrol eden yardımcı programlara da Internet üzerinden erişilebilir. 

Temel bir döküman aşağıdaki gibi yazılabilir: 

   < title> Burası konunun yazılacağı yer </title> 
   < h1> Bu, 1 numaralı başlık </h1> 
   HTML dünyasına hoşgeldiniz. 

   Birinci paragrafımız. <p>
   Bu da ikinci.. <p> 

HTML yazarken, metnin Web programının anlayacağı şekilde gösterilebilmesi için belirteçler kullanır. Yukarıdaki örnekte: 

< title> ve < /title> belirteçleri, dökümanın konusunu gösterir. 
< h1> ve < /h2> belirteçleri, dökümanın başlığını tanımlar. 
< p> belirteci, paragraf tanımlar. 

Tüm HTML belirteçleri, küçüktür işareti (< ), belirteç ismi ve büyüktür işaretinden (> ) oluşur. Genellikle her belirtecin < h1> ve < /h1> örneklerindeki gibi bir çifti olur ve sondaki belirtecin ismi önüne ayraç gelir. 
Yukarıdaki örnekte < h1> , Web programına 1 numaralı başlık formatında yazmasını, </h1> ise bu formatı kapatmasını söyler. < p> belirteci istisna bir durumdur ve < /p> olarak kapatılmaz. 

Not1: HTML belirteçleri "case sensitive"dir..? < title > , < tITLE> veya < tiTlE> belirteçleri aynı görevi yaparlar.

Temel Belirteçler 

Konular 

Her HTML sayfasının ve ile ayrılan bir konusu olmak zorundadır. Konular genellikle sayfadan bağımsız olarak ekranın en üstüne basılır. 
  
   <title> Sayfamın konusu </title> 

Başlıklar  
HTML, 1'den 6'ya kadar numaralanmış 6 çeşit başlık destekler. Başlıklar normal karakterlerden daha büyük ve kalın yazılırlar. Temel olarak, 
  
   <Hy> Sayfamın başlığı </Hy> 

olarak tanımlanmış bir belirteçte y, 1 ile 6 arası bir değer alabilir. Y sayısı arttıkça fontun büyüklüğü azalır.
Pek çok uygulamada, sayfanın konusu ile başlığını aynı tutabilirsiniz. 

Paragraflar 

Diğer kelime işlemcilerdekinin aksine, HTML dökümanlarında programcı özel bir 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. 
Aşağıdaki örnekte, kaynak kodunda iki satır olmasına karşın, WWW "browser" bunu algılamaz ve ekranda tek satır olarak görüntüler. Bir "browser" satır sonlarını ve boş satırları gözardı edeceğinden, paragrafları mutlaka < p> belirteci ile ayırmalısınız. 

   HTML'ye hoşgeldiniz 
 
   Bu ilk paragraf <p> 
Buna göre aşağıdaki örnek, okuduğunuz dosyanın başındaki örnekle aynı çıktıyı verir.     <title> Burası konunun yazılacağı yer </title> 
>

burcin · « **Yanıtla #1 :** 26 Ekim 2006 20:49:19 »

<h1> Bu, 1 numaralı başlık </h1>
HTML dünyasına hoşgeldiniz. Birinci paragrafımız. <p>
Bu da ikinci.. <p>

HTML dosyalarının okunurluğunu artırmak için başlıklar ile karşılık gelen belirteçleri aynı satirda, paragraf düzenleyen komutlar ise satır sonunda olmalıdır.

Satır sonu belirteci

Paragraf, iki satır arasında bir satır boşluk bırakırken, satır sonu belirteci kullanıldığı kursör alta geçer ve takip eden tüm metin,boşluk bırakmadan bir alttan yazılır.
Bu ilk satır.

İkinci satır daha uzun.

Ama bu bir paragraf sonu..<p>

Sayfanın ortalanması

Paragraflar ortalanırken < center> ve </center> belirteçlerinden yararlanılır. Ortalanması istenen tüm metin, bu iki belirtecin arasına yazılır.

<center>
In practical terms, HTML is a collection of styles.
</center>

Bağlantılar

HTML'nin en büyük özelliklerinden birisi, tek sayfa ile sınırlı kalmamasıdır. Böylece bir sayfadan diğerine bağlantı yapılabilir. HTML'in bu görevini yerine getirmesini sağlayan belirteç <a> 'dir Dökümanınızdan başka dökümana bağlantı yapabilmek için:

1.Belirteci girin.
(Kısaca ilk satıra <a yazın) 2.Hangi dökümana geçiş yapmak istiyorsanız, ismini yazın.
HREF="dosyaismi" 3.Bu dökümanı ekranda hangi isimle göstermek istediğinizi belirtin. 4.Belirteci kapatın.
[/url]

Kısa bir örnekle açıklayalım:

<a href="internet.html"> İnternet nedir? [/url]

Ekranda "İnternet Nedir?" yazısı belirecek ve kullanıcıdan burayı seçmeyi bekleyecektir. Kullanıcı fare ile bu yazı üzerine tıkladığında ise program kontrolü yine bir HTML dosya olan internet.html dosyasına bırakacaktır. Bu durumda bulunduğunuz dizinden farklı bir dizindeki dosyaya bağlantı yapmak isterseniz, o dosyanın ait olduğu dizini yazmak zorundasınız.Buna göre "languages/Fortran/introduction.html" dosyasını kullanabilmek için

<a href="languages/Fortran/introduction.html" >
Fortran diline giriş [/url]

şeklinde bir belirteç yazmak gerekir.
Kaynak Bağlantıları
HTML'in bir diğer özelliği ise, tek bir makinaya bağımlı kalmadan diğer İnternet servisleriyle bağlantı kurabilmesidir. Bunun için URL (Uniform Resource Locator) kullanılır. URL, http,gopher, news olabileceği gibi telnet de olabilir. Kullanım "sentaksı",

URL-ismi://makina-ismi[:port]/dizinler/dosya-ismi

Burada URL,

file : Kendi sisteminizde bir dosyaya,
http : Bir WWW sunucusu üzerindeki dosyaya,
gopher : Gopher sunucusu üzerindeki dosyaya,
news : Bir UseNet newsgroup'taki dosyaya,
WAIS : WAIS sunucusu üzerindeki dosyaya

erişmek için kullanılır.

Port numarası, genellikle yazılmaz. Size aksi durum belirtilmedikçe, kullanmanıza gerek yoktur.
Siz de okuduğunuz dosyaya ulaşmak için,

yazdınız.
Halihazır döküman bölgeleri bağlantıları

Bir metin üzerinde belirli bölgelere ulaşmak için yine belirteçler kullanılabilir. Diyelim ki bir döküman hazırladınız ve bunu kullanıcının erişebileceği 2 parçaya ayırmak istiyorsunuz. Yapmanız gereken, bu üç parçanın isimlerini belirlemek ve dökümanda yerlerini ayırmaktır. Örnekte,

<a href="bu_dökümanın#1.parça"> Buradan ilk bölüme gidin
<a href="bu_dökümanın#2.parça"> Buradan ikinci bölüme [/url]
<a name="1.parça"> İşte ilk bölüm>
İlk bölüm ile ilgili metinler burada... </br>
<a name="2.parça"> İşte ikinci bölüm>
İkinci bölüm ile ilgili metiner burada.. </bt>

<a href= ile başladığınız belirteçte önce döküman ismini, sonra da dökümanın içindeki parça ismini girmelisiniz. <a name= belirtecinde ise o belirteçten itibaren parçanın başladığını anlıyoruz.

Kullanıcı ilk bölüme gitmek için fareyi kullandığında ekranda ,

İlk bölüm ile ilgili bilgiler burada ifadesini görecektir.
Diğer döküman bölgelerine bağlantı
Yukarıdaki örnek doğrultusunda farklı olarak tek yapılması gereken, döküman ismine, hangi dökümana bağlantı yapmak istiyorsak o ismi vermektir.

<a href="diğer_döküman_ismi#parça_ismi"> başka dökümana geçiş[/url]
<a name=parça_ismi>

Ana komutlar
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 listeler
Düz liste yaratmak 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çler kullanabilirsiniz
Numaralı Listeler
Numaralı listeler, düz listelerden farklı olarak, <ul> belirteci yerine <ol> kullanırlar. Ekranda liste elemanlarının başında 1'er artan numaralar görünür.
Aşağıdaki HTML kodu,

<ol>
<li> Linux İşletim Sistemi
<li> Unix İşletim Sistemi
</ol>

ekrana şunları yazar:

1.Linux İşletim Sistemi 2.Unix İşletim Sistemi

Tanımlı listeler

Genellikle birden fazla başlığı olan, her başlık altında kısa bir metin içeren yazılar, tanımlı listeler ile oluşturulur. Tanımı yapılacak başlık, <dt> ile belirtilir, <dd> ile başlık altına metin girilir. Tüm liste, <dl> ile </dl> arasına alınır.

<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications,
is located on the campus of the University of Illinois
at Urbana-Champaign. NCSA is one of the participants in the
National MetaCenter for Computational Science and Engineering.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca,
New York. CTC is another participant in the National MetaCenter
for Computational Science and Engineering.
</DL>

Ekrandaki çıktı şu şekilde görünür:

NCSA

NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering.

Cornell Theory Center

CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering.

İçiçe Listeler

Tüm liste çeşitleri, 3'den fazla bölüm kullanmadıkça içiçe yazılabilir. Örnek olarak,

<ul>
<li> İstanbul'un büyük semtleri
<lu>
<li> Beyoğlu
<li> Taksim
<li> Bakırköy
</lu>
<li> Ankara'nın belli başlı yerleşim birimleri
<lu>
<li> Kızılay
<li> Ulus
</lu>
</lu>

Ekrandaki görüntüsü,

•İstanbul'un büyük semtleri
•Beyoğlu •Taksim •Bakırköy
•Ankara'nın belli başlı yerleşim birimleri
•Kızılay •Ulus

Formatlı Metinler
HTML'de, programda yazıldığı gibi ekrana çıktı vermeyi sağlayan komutlar

ve

belirteç çiftleridir. Bunlar kullanıldığı zaman tüm metin, yazıldığı gibi ekranda görünür. Aşağıdaki satırlar,

 
    PATH=.:~/bin/:$PATH     export PATH
    # Set up the terminal:
           stty erase "^?" kill "^U" intr "^C" eof "^D"
           stty hupcl ixon ixoff
    date '+Tarih :%D'
    TERM=vt100

ekranda şu şekilde görünür :

PATH=.:~/bin/:$PATH
export PATH
# Set up the terminal:
stty erase "^?" kill "^U" intr "^C" eof "^D"
stty hupcl ixon ixoff
date '+Tarih :%D'
TERM=vt100

HTML'de yorum satırları

HTML dokumanda yorumlayıcı tarafından gözönüne alınmayacak olan yorum satırları  belirteçleri arasına alınır. Bu sayede programı yazmayı kolaylaştıracak yorumlar eklenebilir. Örneğin,



veya

<!-- karakterler... --
-- karakterler.. --
>

Özel karakterler

Web programı, birtakım karakterleri ekranda göstermek için farklı bir format kullanır. Aşağıda, bu tür farklı karakterleri göstermek için girilmesi gereken kodlar verilmiştir.

<

< (küçüktür)

>

> (büyüktür)

&

& (ve)

"

" (tırnak)

Resim Görüntüleme

Eğer Web sayfalarını gezerken grafik destekleyen bir program ( Mosaic, Netscape) kullanıyorsanız, ekranda resimlerin, arkaplanların ve hatta animasyonların olduğunu farketmişsinizdir. Bu resimler genellikle X Bitmap (XBM) , GIF, veya JPG formatlı olurlar ve dosyaya görsel bir çekicilik katarlar. Buna rağmen aynı ekranda çok miktarda resim kullanmaktan sakınmalıdır, çünkü bu durumda resimler kullanıcıya daha geç bir sürede ulaşır.

Ekranda resim görüntülemek için,

<img src="resmin bulunduğu dizin">

demeniz yeterlidir. Burada, nasıl HTML dökümanların hepsi .html ile bitiyorsa, tüm resim dosyalarının sonu da .xbm , .gif veya .jpg ile bitmelidir. Özel bir durum olmadıkça görüntülenen resmin alt kısmı ile metin yanyana gelirler.

burcin · « **Yanıtla #2 :** 26 Ekim 2006 20:50:14 »

<img src="../images/G.GIF">
Metin resmin altında ..

Örneği, ekranda şu şekilde gösterilir:

<Picture>Metin resmin altında ..

Sözkonusu metni resmin yanına veya üstüne koymak için ALIGN=TOP opsiyonunu yerleştirin.

<img src="/artwork/spot.GIF" align=top>
Metin resmin üstünde ..

<Picture>Metin resmin üstünde ..

veya ortaya almak için ALIGN=MIDDLE kullanın.

<img src="/artwork/spot.GIF" align=bottom>
Metin resmin yanında ..

<Picture>Metin resmin yanında ..

Görüntünün orijinal formatında değişiklik yapmadan ekranda enini ve boyunu ayarlamak mümkündür. Bunun için height=sayı ve width=sayı ara belirteçleri kullanılır. "Sayı" değişkeni piksel olarak verilir.
<img src="/artwork/spot.GIF" height=30>

<Picture>

Tablo Hazırlama

Grafik destekli Web programlarının tablo desteği ile çok çeşitli istatistiki bilgiler, programlar, her türlü listeler ekranda derli toplu gösterilebilir. Tablo hazırlama başlığı altındaki örnekler, her çeşit tablonun oluşturulması için yeterli değildir. Kullanıcı, isteği doğrultusunda bunları gerçekleştirmelidir.

Ekranda tablo gösterirken, o an kullanılan pencerenin büyüklüğüne ve tablo içindeki metinin genişliğine göre tablonun en ve boyu değişebilir.

Tablo, satır ve sütunlardan oluştuğu için her hücre ayrı ayrı tanımlanır. Her satır ve sütun, kendi içinde başka satır ve sütunları ihtiva edebilir.

Tablolara başlık, liste, paragraf, form, figür ve her formatta metin konabilir.

Örneğin,

<TABLE BORDER>
<TR><TH ROWSPAN=2><TH COLSPAN=2>Average
<TH ROWSPAN=2>other<BR>category<TH>Misc
<TR><TH>height<TH>weight
<TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003
<TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002
</TABLE>

Yukarıdaki örnek, aşağıdaki gibi görünür:

Average other
categoryMisc heightweight males1.90.003 females1.70.002

Dikkat edilmesi gereken noktalar:

•Default olarak, header hücreler merkeze alınır, diğerleri sağa yanaşık olarak ekrana gelirler. Bunu engellemek için hücre için <ALIGN=.. belirteci, tüm tablo için <COLSPEC=.. belirteci kullanılır. •Her hücre boş olabilir. •Tablodaki her satırdaki kolon sayısının eşit olmadığı durumlarda kayıp hücreler tablonun sağına yerleştirilir ve içleri boş kalır. •Tablodaki satır sayısı <tr belirteci tarafından belirlenir. •<th> ve <tc> belirteçleri sadece <tr> belirteçleri arasında olabilir. •Hücrelerin üstüste gelmesi istenmeyen sonuçlar yaratabilir.

Tablo ebadı

Tüm tablonun uzunluğu, en geniş satırla belirlenir. Kelimeler kısaltılmadığı için paragraflar
ile kesilmedikçe ekrana gelirler. En kısa uzunluk da en geniş kelime veya resmin uzunluğu ile bağıntılıdır.
Align

Tablonun dik halinin nasıl olacağını belirler.

Left
Metini ekranın soluna yanaşık yazar.

Right

Metini ekranın sağına yanaşık yazar.

Colspec

Sütunların ebadını ayarlar. Sütunlar soldan sağa, bir büyük harf ve onu izleyen bir sayı ile listelenirler (örneğin <COLSPEC="L20 C8 L10" > ). Hücrenin ihtiva etttiği yazıları L harfi sola, R harfi sağa alır. C harfi ortalamak için kullanılır. Burada belirteç opsiyonları mutlaka büyük harfle yazılır.

Border

Bu belirteç, tablo kenarlarının ebadını kontrol etmeye yarar.
<table border=10>

Nowrap

Programın tablo içinde paragrafları otomatik olarak kesmemesi için kullanılır.Böylece kullanıcı istediği yerde
belirtecini kullanabilir.

Tablo Örnekleri

Temel bir 3X2 tablo

ABCDEF
<table border>    <tr>       <td>A</td> <td>B</td> <td>C</td>    </tr>
   <tr>
      <td>D</td> <td>E</td> <td>F</td>
   </tr>
</table>

"Rowspan" kullanılması

1. hücre2. hücre3. hücre4. hücre5. hücre

<table border>
   <tr>
      <td>1. hücre</td>
      <td rowspan=2>2. hücre</td>
      <td>3. hücre</td>
   </tr>
   <tr>
      <td>4. hücre</td> <td>5. hücre</td>
   </tr>
</table>

1. hücre2. hücre3. hücre4. hücre5. hücre6. hücre7. hücre

<table border>
   <tr>
      <td rowspan=2>1. hücre</td>
        <td>2. hücre</td> <td>3. hücre</td>
<td>4. hücre</td>
   </tr>
   <tr>
      <td>5. hücre</td> <td>6. hücre</td> <td>7. hücre
    </td>
   </tr>
</table>

"Colspan" kullanılması
1. hücre2. hücre3. hücre4. hücre5. hücre
<table border>    <tr>       <td>1. hücre</td>       <td colspan=2>2. hücre</td>    </tr>    <tr>       <td>3. hücre</td> <td>Item 4</td> <td>5. hücre</td>    </tr> </table>
"Colspan" ve Başlıkların birlikte kullanılması

Head1Head2ABCDEFGH

<table border>    <tr>       <th colspan=2>Head1</th>         <th colspan=2>Head2</th>    </tr>    <tr>       <td>A</td> <td>B</td> <td>C</td> <td>D</td>    </tr>    <tr>          <td>E</td> <td>F</td> <td>G</td> <td>H</td>
   </tr>
</table>
Yan Başlıkların kullanımı

Başlık11. hücre2. hücre3. hücreBaşlık24. hücre5. hücre6. hücreBaşlık37. hücre8. hücre9. hücre

<table border>    <tr><th>Başlık1</th>       <td>1. hücre</td> <td>2. hücre</td> <td>3. hücre</td></tr>    <tr><th>Başlık2</th>
      <td>4. hücre</td> <td>5. hücre</td> <td>6.hücre</td></tr>
   <tr><th>Başlık3</th>
      <td>7. hücre</td> <td>8. hücre</td> <td>9. hücre</td></tr> </table>

"Rowspan" ve yan başlıkların birlikte kullanılması

Başlık11. hücre2. hücre3. hücre4. hücre5. hücre6. hücre7. hücre8. hücreBaşlık29. hücre10. hücre11. hücre12. hücre

<table border>
   <tr><th rowspan=2>Başlık1</th>
     <td>1. hücre</td> <td>2. hücre</td><td>3. hücre</td> <td>4. hücre</td>
   </tr>
   <tr><td>5. hücre</td> <td>6. hücre</td><td>7. hücre</td> <td>8. hücre</td>
   </tr>
   <tr><th>Başlık2</th>
     <td>9. hücre</td> <td>10. hücre</td> <td>11. hücre</td> <td>12. hücre</td>
   </tr>
</table>

10 birim kenarı olan tablo

1. hücre2. hücre3. hücre4. hücre

<table border=10>
   <tr>   <td>1. hücre</td> <td>2. hücre</td>
   </tr>
   <tr>   <td>3. hücre</td> <td>4. hücre</td>
   </tr>
</table>

Cellpadding ve Cellspacing belirteçlerinin kullanılması

ABCDEF

<table border cellpadding=10 cellspacing=0>
   <tr>
      <td>A</td> <td>B</td> <td>C</td>
   </tr>
   <tr>
      <td>D</td> <td>E</td> <td>F</td>
   </tr>
</table>

ABCDEF

<table border cellpadding=0 cellspacing=10>
   <tr>
      <td>A</td> <td>B</td> <td>C</td>
   </tr>
   <tr>
      <td>D</td> <td>E</td> <td>F</td>
   </tr>
</table>

ABCDEF

<table border cellpadding=10 cellspacing=10>
   <tr>
      <td>A</td> <td>B</td> <td>C</td>
   </tr>
   <tr>
      <td>D</td> <td>E</td> <td>F</td>
   </tr>
</table>

Tablo içinde birden fazla satır kullanımı

OcakŞubatMartBu 1. Hücre2. HücreDiğer hücre,
3. hücre4. Hücreve işte bu
5. hücre6. hücre
<table border>    <tr>       <th>Ocak</th>       <th>Şubat</th>       <th>Mart</th>    </tr>    <tr>       <td>Bu 1. hücre</td>         <td>2. hücre</td>
        <td>Diğer hücre,
3. hücre</td>
   </tr>
   <tr>
      <td>Cell 4</td>
        <td>ve işte bu
5. hücre</td>
        <td>6. hücre</td>
   </tr>
</table>

Hücrenin sağına, soluna ve ortasına metin yazmak

OcakŞubatMartHepsi ortada2. hücreDiğer hücre,
3. hücresağa yanaşıkmerkezdedefault,
sola yanaşık

<table border>
   <tr>
     <th>Ocak</th>
     <th>Şubat</th>
     <th>Mart</th>
   </tr>
   <tr align=center>
     <td>Hepsi ortada</td>
     <td>2. Hücre</td>
     <td>Diğer hücre,
3. hücre</td>
   </tr>
   <tr>
     <td align=right>sağa yanaşık</td>
     <td align=center>merkezde</td>
     <td>default,
sola yanaşık</td>
   </tr>
</table>

Form Hazırlama

Formlar, kullanıcıdan bilgi girişi olduğu zaman bunları okunmaya hazır duruma getirmeye yarar. Diğer bir deyişle, kullanıcı ile programcı arasında bir köprü kurar. Programcıya mail atmak, WWW üzerinden araştırma yapmak, belirli bir anahtar sözcüğü kullanarak arama yapmak, ve hatta telefon bilgi bankalarına girmek form kullanarak halledilir.

Form konusunu anlayabilmek için, HTML programlamayı bilmek ve en azından bir programlama diline ( tercihan shell, PERL veya C ) hakim olmak gereklidir.

Form hazırlanırken aşağıdaki adımlar izlenir :

•Programın, form hazırladığımızı bilmesi için, <form .. belirteci açılır. Bu belirtecin iki parametresi vardır:

Method

"Method", kullanıcının girdiği bilgileri ne şekilde alacağımızı belirler. Bu konunun dışında kalmasına rağmen, POST metodunu kullanmanızı tavsiye ederim.

Action

Bu bölüme, alınan girdileri işleyecek programın ismi yazılır. Bu program ayrı bir cgi-bin/ dizini altında durmalıdır.

Örnek bir form başlangıcı şöyle olabilir:

<form method="POST" action="http://compclup.ceng.metu.edu.tr/cgi-bin/postala" >

•Şimdi kullanıcının gireceği bilgiler için forma birkaç bölüm ekleyebiliriz. Bunun için aşağıdaki parametreleri kullanan <INPUT .. > belirtecine gerek vardır.

Name

Kullanıcının klavyeden girdiği bilgilerin tutulduğu değişken burada tutulur.

Size

Bu sayı, ekranda kullanıcıya ayrılan boşluğun ne uzunlukta olacağını saptar.

Type

Anket tipi (burada anlatılmayacaktır)

Örnek bir girdiyi oluşturmak için şu tür bir program yazılabilir.

<INPUT NAME="isim" SIZE=36>

Birden fazla satır kullanma durumunda, farklı bir opsiyonu, <TEXTAREA ...> </TEXTAREA> opsiyonunu seçmelisiniz :

Name

Yine aynı değişken ismi.

Rows

Bu sayı kullanıcının yazdığı alanın kaç satır olacağını belirler.

Cols

Bu sayı kullanıcının yazdığı alanın kaç sütun olacağını belirler.

alıntı...

DEVAMI GELECEK...

Kodbank İndir

Gönderen Konu: Web Programcısının El Kitabı-2 (Okunma sayısı 1763 defa)

burcin

Web Programcısının El Kitabı-2

burcin

Ynt: Web Programcısının El Kitabı-2

burcin

Ynt: Web Programcısının El Kitabı-2