Bilgi Cumhuriyeti | Genel, Paylaşım, Eğlence | Keyif & Hayat Burada

HTML komutları ve kullanımları

Bir WEB sayfasının standart bileşenleri şunlardır:

<html> ve </html> : Sayfanın başlangıç ve bitişini belirtir.

<head> ve </head> : Sayfanın başlık bilgileri 'title', 'meta' vs. buraya yerleştirilir.

<title> ve </title> : Sayfanın içeriğinin ne olduğunun tanıtılmasında kullanılır. Sayfada görünmez ama İnternet Explorer bunu sayfayı tanımlamakta kullanır.

<body> ve </body> : Sayfanın içeriğinin başlangıç ve bitişini belirtmekte ve sayfa hakkındaki genel tanımlamaları yapmakta kullanılır.

Yukarıdaki bu komutların, bir web sayfasının içindeki sıraları aşağıdaki gibidir. Bir yazı editoru (Dreamweaver, FrontPage vs.) ile ilk örneğimizi yazarsak:

<html>
<head>
<title>Bir HTML Denemesi</title>
<meta name="description" content="Html sayfası için bir kullanım örneği"></head>
<body bgcolor=white>Bu sayfa inşa halindedir ya da this page is under construction web sayfalarında ille de olması gerektiği düşünülen saçma yazılardır.
</body>
</html>

Renkler, body, font, ve h1..h6

Önceki örnekte <body color=white> diye, aşağıdakinin basitleştirilmiş biçimini kullanmıştık:

Burada font ile kullanılan genel yazıların rengi, bgcolor ile arkaplan rengi, text ile tanımsız yazıların rengi, link ile üzerine gelince el hareketi çekilen yazıların rengi, vlink ile de seçilmiş bağların rengi belirlenir.

Renk belirtmek için o rengin ingilizce adı ya da RGB değerleri onaltılık sistemde verilir. RGB deki sıraya göre 00-FF arası uc değer kullanılır. Hepsi sıfır ise hiçbir renkten karıştırılmaz. Hepsi FF ise her renk maksimum oranda kullanılır ve beyaz elde edilir. Örneğin salt bir kırmızı #FF0000 ile elde edilir.

<font color=...> ve </font> arasındaki yazılar belirtilen renkte yazılır.

<h1> ve </h1> den <h6> ve </h6> ya kadar standart yazı tiplerinden biri seçilerek yazı yazılır. h1 ile belirtilenler h6 ile tanımlananlardan daha büyüktür.

Örneğin:

<html>
<h1>Sayfa başlığı için uygun büyüklükte harfler</h1>
<h4>Bu harfler sanırım yazı için yeterliler</h4>
<h6>Gözleriniz bozuk değilse bu yazıyı okuyorsundur.</h6>
</html>

Yazıları biçimlendirmek: kalın, italik, ortalanmış, vs. ...

Önceki örnekte <h1>, <h2>, ... ile yazıların büyüklüklerini ayarlamanın basit bir yolunu görmüştük. HTML sayfamızın yazılarına biraz daha kişilik kazandırmak için aşağıdaki komutları da kullanabiliriz.

<b> ve </b> arasındaki yazılar koyu görünür.

<i> ve </i> arasındaki yazılar ise italik görünür.

<blink> ve </blink> arasındaki yazılar yanıp söner.

<center> ve </center> arasındaki yazılar ortalanır.

<pre> ve </pre> ile sınırlanan yazıların görüntüsünde ayarlama yapılmaz. Yani birden fazla boşluk varsa bunlar bir tane olacak şekilde azaltılmaz.

<p> paragraf başı yapmak için kullanılır. </p>

<br> bir satır atlamak için kullanılır.

<hr> bir çizgi çeker.

Sayfada resim göstermek

En basit şekliyle, bir sayfaya resim koymak için aşağıdaki komut şu şekilde;

<img src="dosya_adı" alt="..." align=... > kullanılır.

Dosya_adı, gösterilecek grafik dosyasının (gif, jpg, png tipinde) bulundugu yer ve adıdır. Bağlanılan Html sayfası ile aynı dizinde bulunan resimler için yer adı belirtmeye gerek yoktur.
Alt, resim açıklaması yazmış oluruz. Google buna önem verir.

Align, resmin konumunu belirleriz.

Örneğin:

<img src=pirikethtml.gif align=right> ile resmin sağa dayalı olarak çizilmesini sağlarız. 'right' yerine 'left', 'center', 'middle' gibi konum bildirici bir başka sözcük de kullanılabilir.

Ayrıca yukarıdakilere ek olarak 'border', 'width', 'height' belirteçlerini de <img ...... > içinde kullanabiliriz. Bunlardan 'border=' resmin çerçevesini belirleriz; border=0 dersek hiç çerçeve çizilmez. Width ve Height ile resmin boyutlarını belirleyebiliriz. Web Sayfamızın hızlı açılmasını istiyorsak, her resmin width ve height özelliklerini kullanmalıyız. Bu sayede browser programınız resimlerin yüklenmesini beklemeden çevrelerine yazıları yerleştirebilecektir.

Sayfanın hizli geliyor gibi görünmesini sağlamanın bir yolu da 'lowsrc' belirtecini <img .....> içinde kullanmak. Eğer kullandığımız resimlerin bir de bulanık/niteliksiz/siyah-beyaz ama az yer tutan bir benzerini daha yapar, ve bunu <img src="resim.gif" lowsrc="hizliresim.gif" alt="[resim]"> şeklinde tanımlarsak, ilk önce hizliresim.gif yüklenip gösterilecektir. Bu sayede bulanık iken yavaş yavaş netleşmeye başlayan resimler belirir sayfamızda. Bunun yararı ise sayfanıza bakan kişinin çabuk karar vermesini sağlıyor olmasındadır.

HTML sayfasına Link yerleştirmek

<a> ve </a> : HTML'nin temeli olan bu komutlarla Link yapılır.

<a href="Hedef Link">Açıklama</a> Biçiminde kullanılır.

Açıklama, ister yazı ister bir grafik ya da herhangi bir nesne olabilir.
"Hedef Link" ise yerel kaynakları gösteren bir dosya adı yada uzak bir makinedaki bir başka nesneyi (yazı, grafik, video vs.) gösteren bir Link olur.

Örnek:

<a href="ftp://ftp.webublic.tr.gg/">Web Cumhuriyeti</a>

Ve, internetin en gözde kullanımı: Bir web sayfasından başka bir web sayfasına bağlanma:

<a href="http://www.webublic.tr.gg/Forum/">Webublic</a>

Kendi dizininizdeki bir sayfa için:

<a href="Html-Dersleri.html">HTML Dersleri için buraya Tıklayabilirsiniz.</a>

Link yardımıyla etkileşimli kullanım örneği

Bir Linke ard arda tıklamak yoluyla, slow motion biçiminde ardışık resim gösterebilirsiniz. Bu kullanım en basit şekliyle bir Bilgisayar Destekli eğitim sayfasında kullanılabilir. Amaç, kullanıcıya konuyu belli bir sırayla vermek ve konu içindeki ilişkilerin anlaşılmasını kolaylaştırmak.

Bunu yapmak için, önce tek bir resim ve o resmin link olarak tanımlandığı bir web sayfası hazırlamalısınız:

<html>
<title>sayfa1</title>
<body>
<a href="sayfa2.html"><img src="resim1.gif"></a>
</body>
</html>

sonra da ikinci sayfa da hazirlanmali:

<html>
<title>sayfa2</title>
<body>
<a href="sayfa3.html"><img src="resim2.gif"></a>
</body>
</html>

... bu şekilde devam edilir ve ilk sayfa yüklendikten sonra resmin üstüne tıklandığında ikinci sayfa ve içindeki resim yüklenir. İyi hazırlandığında, bu basit HTML kullanım şekliyle Java, cgi-bin, vs. bulaşmadan da etkili 'sunumlar' yapılabilir.

Ekran düzenine ilişkin daha çok komut:

<multicol cols=2> ... </multicol> : Aradaki yazılar cols= ile belirtilen sutunlara ayrılarak ekrana basılırlar. Sutun içindeki yazının sutunun ne kadarını kaplayacağını width parametresi ile belirtiriz. <multicol cols=3 width=75%> gibi. Burada boşluğu yüzde yerine piksel olarak da verebiliriz. Ayrıca iki sutun arasındaki boşluğu da gutter parametresi ile veririz: <multicol cols=2 width=500 gutter=25> yazılar... </multicol>

<spacer type=... size=... height=... width=... align=...> : Bununla paragraf başları için boşluk bırakmak mümkün. Örneğin <spacer type=block size=48> ile 48x48 piksellik bir boş kare alan yaratmış oluruz. Burada block yerine vertical ya da horizontal kullanmak da olası. Ayrıca, <spacer type=block width=320 height=200 align=right> ile 320x200'luk bir boşluk yaratıp bunu ekranda sağa dayatmış oluruz. Yine align komutundan sonra right, left, center, absmiddle gibi diğer konum belirteçlerini kullanabiliriz.

Sayfalarda Tablo Kullanımı

Genel kullanım:

<table [seçenekler]>
<tr [seçenekler]><td [seçenekler] > sutun1 yazıları</td><td [seçenekler]>sütun2</td><td>sütun 3.....</td></tr>

<tr><td>2.satırın 1. sütunu</td><td>2. sütunu</td><td>3. sütunu </td></tr></table>

Tablolar satırlar ve sütunlar şeklinde ayrılmış hücrelerden oluşuyor. Her yeni satıra başlamak için <tr> etiketini, her yeni sütun için ise <td> etiketini kullanıyoruz.

Bir örnek ile incelersek: .

<table border=1 width=200 cellspacing=2 cellpadding=2><tr>
<td align=top width="50%">Bellek tipleri</td>
<td align=top width="50%">FPM<br>EDO<br>SDRAM<br>DDR RAM<br>RAMBus</td></tr>
<tr><td align=top width="50%">Disk tipleri</td>
<td align=top width="50%">MFM/RLL<br>ATA IDE<br>ULTRA ATA<br>SCSI</td></tr>
<tr><td align=top width="50%">İşlemci tipleri</td>
<td align=top width="50%">RISC<br>CISC<br></td></tr></table>

Burada 2x3'lük bir tablo olusturduk. Tablomuz 1 pixel kalınlığında çerçeveye sahip (border=1), tablo sayfada 200 pixel genişliğinde yer tutacak (width=200), hücreler arası 2 pixel boş ve 2 pixellik bir kalınlık efektimiz var (cellspacing ile cellpadding).

Örnekte hücre genişliklerin yazı uzunluğuna göre otomatik ayarlanmaması için genişlikleri kendimiz belirledik (width="50%"). Bunu pixel olarak da belirlememiz mümkündü: <td width="100"> ile.

Hücreler içindeki yazıların nasıl yerleştirileceğini ise align="yer" ile belirtiyoruz. Burada "yer" yerine "top", "bottom", "left", "right" ve "center" kullanabiliriz.

Ve eğer, bir hücrenin iki hücre genişliğinde veya yüşekliğinde olmasını istiyorsak colspan ve rowspan seçeneklerini de kullanıyoruz. Önceki örneğe bir başlık ekleyecek olursak:

<tr><td align=center colspan="2">Bilgisayar Ana Bileşenleri</td></tr>

Tabloları içice de kullanmamız mümkün. Bu şekilde bir kullanımla bir www sayfasındaki resim ve yazıları tam istediğimiz gibi konumlandırmamız mümkün olur.

Sayfalara 'meta' komutu ile kimlik vermek

Web sayfamızın Google, Yahoo, Altavista vs. gibi tarayıcı programlar tarafından içeriğine uygun olarak dizinlerine aktarılmasını istiyorsak, <meta ...> komutunu kullanmak gerekir. Ayrica, yine bu komut sayesinde sayfamiza baglanani bir baska www adresine yonlendirebilir, bu yolla bir takim hareketli sayfalar dahi hazirlayabiliriz.

Sayfayi tanimlamak icin uc ayri meta komutu yeterli. Bunlarla sayfa hakkinda kisa bir paragraf, anahtar sozcuk listesi ve sayfayi hazirlayanin adini verebiliriz.

Yukarida, sayfamizi kisaca tanitmis olduk. Bu yazi, tarama sonucunda arayan kisiye gosterilecegi icin kisa, oz ve icerige uygun olmasi gerekir.

Tarayicilar artik sayfanin tumunde gecen sozcuklere ve bu sozcuklerle ilgili diger sozcuklere bakarak arama yapsa da, sayfanizin hangi olcutlere gore aranmasi gerektigini sizden iyi kimse bilemez. Onun icin, sayfayi tanimlayan anahtar sozcukleri de su sekilde verebiliriz:

Ve, son kimlik bilgisi olarak sayfadan sorumlu kisiyi belirtiriz:

Hazirladigimiz butun sayfalara bu turden kimlik vermeyi aliskanlik haline getirirsek, interneti arastirmalari icin bir kaynak olarak kullananlara epey yardim etmis oluruz.

Sayfa yonlendirme:

Eger yakında www adresimiz gecersiz olacaksa ve yeni bir www adresine simdiden tasinmissak, bunu kullanicalara onceden duyurmali ve onlari yeni adrese yonledirmeliyiz. Bunun icin eski sayfamizi su sekilde degistirebiliriz.:

Bu ornekte <meta http-equiv="refresh" ...> diyerek, www gosterici programina yeni bir sayfa yuklemesini istedigimizi belirtiyoruz.

Bu yuklemeyi kac saniye sonra yapmasi gerektigini '<meta ..' nin devamindaki 'content="3;....">' yazisi ile belirliyoruz. Buradaki '3' yerine saniye cinsinden herhangi bir sure belirtebilirsiniz. '0' yazarsaniz, dogal olarak hemen diger sayfayi yuklemeye baslar.

Yonelinen sayfanin adresi de, ' ... content="saniye; url=http://...">
biciminde veriliyor.

Resimlerde 'MAP' kullanimi

Map'ler bir resmin degisik yerlerine tiklandiginda degisik baglarin yuklenmesi veya degisik bir cgi-bin isinin yapilmasi olarak tanimlanir.

Burada kullanacagimiz resmin '.gif' biciminde olmasi gereklidir. Sayfanin icinde bu resmi tanimladigimiz '<img ...' belirtecinin icine bir kac unsur daha ekleyerek ve bir de 'map' (harita) alaninin kisimlarini sekilleriyle birlikte tanimlayarak isimizi bitiririz.

Resmin betimi:

ISMAP, resmin bir harita oldugunu.
usemap="..." hangi harita tanimini kullanmasi gerektigini, www gosterici programina soyluyor.

Haritanin tanimi:

Name ile belirttigimiz isim '<img ..' icinde usemap="#..." ile kullandigimizin aynisi.
Shape ile dikdortgen, daire yada poligon tanimlayabiliyoruz. Dikdortgenin koordinatlarini: X-sol_ust,Y-sol_ust,X-sag_alt,Y-sag_alt biciminde 'coords="..." ' kisminda belirtiyoruz. 'href="..." ' bolumu ise bu dikdortgen alana tiklanildiginda neyin yuklenmesi gerektigini soyluyor.

Cember icin X-merkez,Y-merkez,R-yaricap biciminde koordinat tanimliyoruz.

Poligonu tanimlarken sirayla her bir kosenin X,Y biciminde koordinatlarini giriyoruz. Dikkat etmemiz gereken husus, poligonun noktalarini saat yonunde tanimlamamiz gerektigidir. Yukaridaki ucgen ornegini incelemek aslinda poligon tanimi yapabilmek icin yeterli. Ucgen icin dort nokta kullandik (dorduncu ilkinin dibinde). Ayni zamanda bu ucgenin X,Y betimlemeleri de saat yonunde girilmis (noktalari kagit uzerinde yaklasik olarak isaretlerseniz bu 'saat-yonu' kavramini daha iyi anlayabilirsiniz).

Son olarak da <area shape="default" nohref> ile resmin diger bolgelerine tiklanildiginda hic bir sey yapilmamasi gerektigini soyluyoruz.

Dinamik HTML

Aşağıdaki örnekte, mouse yazının üzerine geldiğinde, tıklamaksızın yazı değişir:

<h2 style="color:purple;" onmouseover="detay.style.display=''"
onmouseout="detay.style.display='none'">Flash Haber</h2>
<div id="detay" style="display:'none'; color:red;">Son gelen haberlere göre, Türkiye'ye kurulacak olan Nükleer Santralin yeri belli oldu</div>
<font color=blue>Ayrıntılar 19.30 Ana haber bülteninde</font>