EFES3000!
Anasayfa Yazılar Programlar Web Tasarım İletişim

-Web Tasarım-
Nasıl web sayfası tasarlanır?

Web sayfaları HTML (Hypertext Markup Language) adı verilen programlama kodlarıyla hazırlanır. Bu kodlarla, herhangi bir bilgisayarda, web sitesi tasarlamak için özel bir programa ihtiyaç yoktur. Bu kodlar herhangi bir metin editöründe yazılabilir. Örneğin Windows kullanıyorsanız Not Defteri (notepad) ihtiyacınızı karşılayacaktır.

HTML ile hazırlanan web sayfaları .html veya .htm uzantılıdırlar. Bu onların html dilinde yazılmış web sayfaları olduklarını ifade eder. Bu tür dosyalara tıklayıp açmak istediğinizde otomatik olarak işletim sisteminizin browser'ı açılır (örn: Internet Explorer) ve web sayfalarınızı görüntüler.

HTML dilinde her işlem kodlarla yapılır. Bu sayfada size web sayfası tasarlamanız için gerekli olan temel HTML kodları açıklanmaktadır. Kodlara geçmeden önce kodların nasıl yazılıp kaydedileceğini kısaca açıklayacağım:

Başlat'a tıklayın Programlar'dan Donatılar'a gelin ve Not Defteri'ni açın. Açılan ekrana aşağıdaki kırmızı renkteki kodları aynen yazın: (kodları anlamanıza şimdilik gerek yok)



<HTML>
<HEAD>
<TITLE>İlk Web Sayfam</TITLE>
</HEAD>
<BODY>
<H1>MERHABA DÜNYA!</H1>
</BODY>
</HTML>

Daha sonra Dosya menüsünden Farklı Kaydet'i seçin ve çıkan pencereden sayfanızı kaydetmek istediğiniz klasörü seçin. Kayıt Türü seçeneğinden Tüm Dosyalar'ı seçin ve Dosya Adı kısmına "merhaba.html" yazın. Aşağıdaki resimde bu işlemi daha açık bir şekilde inceleyebilirsiniz:

Web sayfası şekilnde kaydetme

Kaydet tuşuna tıklayın ve sonra kaydettiğiniz klasörü açın. Kaydettiğiniz dosyanın üzerinde Internet Explorer simgesini göreceksiniz. Bu simgenin üzerine tıklayın ve yazdığınız ilk web sayfanızı Internet Explorer'da inceleyin.
Artık kodları öğrenmeye geçebiliriz:

H T M L   VE   H E A D

Bilmeniz gereken ilk şey yapacağımız herşeyin bir etiketin içinde bulunduğu. Örneğin her sayfa,

<HTML>
etiketiyle başlar,

</HTML>
etiketiyle biter.

Her etiket < ve > işaretlerinin arasında bulunur. Ayrıca birkaçı hariç her etiketin bir bitirme etiketi ile kapatılması gerekir.Yukarıdaki örnekte <HTML> etiketi yazıldıktan sonra bir bitirme işareti olarak arasına </HTML>'de olduğu gibi "/" işareti konulması gerekir.

Bir Web sayfası HEAD ve BODY bölümlerinden oluşur. Body bölümü sayfanın görünen kısmıdır. Head bölümü ise sayfa hakkında bigileri içerir. HEAD bölümünde yer alan <TITLE> etiketi ile sayfanızın bulunduğu pencereye istediğiniz ismi verebilirsiniz;

<HTML>
<HEAD>
<TITLE>İlk Html Sayfam</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

B O D Y

Metinler

Sayfanızda <BODY> etiketi içerisinde, aşağıda gösterilen kodları kullanarak, çeşitli tiplerde metinler yerleştirebilirsiniz:

<b>...</b> Koyu metin
<i>...</i> İtalik metin
<u>...</u> Altı çizili metin
<strike>...</strike> Ortadan çizilmiş metin
<tt>...</tt> Daktilo-teleks yazı tipi
<small>...</small> Küçük metin
<big>...</big> Büyük metin
<sub>...</sub> Subscript metin
<sup>...</sup> Superscript metin
<code>...</code> Proglamlama kodu metni
<cite>...</cite> Satır içi alıntı metni
<p> Paragrafbaşı. Bitiş etiketi gerektirmez.

Altı başlık düzeyi:
<h1>...</h1>
<h6>...</h6>
Bu altı etiketle farklı büyüklükte başlıklar elde edebilirsiniz(<h1> en büyük, <h6> en küçük).

ÖRNEK KOD:
<h1>Büyük Başlık</h1>

EKRAN ÇIKTISI:

Büyük Başlık

<hr> etiketi:
<hr> ile sayfanıza yatay çizgi yerleştirebilirsiniz.Fakat bunlar bitirme etiketi gerektirmez.
<hr> etiketine bir değer vererek çizginin kalınlığını ayarlayabilirsiniz. Bu değer 1 ve 6 arasında olmalıdır.

ÖRNEK KOD:
<hr size=1>

EKRAN ÇIKTISI:


ÖRNEK KOD:
<hr size=6>

EKRAN ÇIKTISI:

<br> etiketi:
<br> ile satırbaşı yapabilirsiniz.
Bu etiketin <p> den farkı şöyledir;

ÖRNEK KOD:
brden önce<br>brden sonra

EKRAN ÇIKTISI:
brden önce
brden sonra


ÖRNEK KOD:
pden önce<p>pden sonra

EKRAN ÇIKTISI:
pden önce

pden sonra

Gördüğünüz gibi <p> boşluk bırakırken, <br> sadece satır atlar. Fakat birden fazla <br> etiketini üstüste kullandığınızda istediğiniz miktarda boşluk bırakabilirsiniz.

<font> etiketi:
<font> etiketi ile sayfanızda istediğimiz yerdeki metnin özelliklerini verdiğimiz değerlere göre değiştirebiliriz. Bu etikete çeşitli eklentiler ile birçok özellik kazandırılabilir;

<font face="Comic Sans MS">Metin</font><br>
<font color="green">Yeşil metin</font><br>
<font size="5">Büyük metin</font><br>
<font face="Comic Sans MS" color="green" size="6">Yeşil ve büyük metin</font>

Böyle görünecektir;

Metin
Yeşil metin
Büyük metin
Yeşil ve büyük metin

Sayfanın Ortalanması
Paragraflar ortalanırken <center>.......</center> etiketleri kullanılır. Ortalanması istenen tüm metin bu etiketlerin arasına yazılır.

ÖRNEK KOD:
<center>Bilgisayar</center>

EKRAN ÇIKTISI:

Bilgisayar

Arka Plan ve Metin Rengi

<body bgcolor=# text=# link=# alink=# vlink=#>
etiketi ile ayarlanır. Bu etiket <BODY> etiketinin uyarlanmış halidir. Bu etiketle yapılacak ayarlamalar tüm sayfayı etkiler. Parametrelerin anlamları:

bgcolor : Arka plan rengini ayarlar.
text : Rengi belirtilmemiş metinlerin renklerini ayarlar.
link : Bir yere bağlantısı olan yazı (link) rengini ayarlar.
alink : Çalışan linkin rengini ayarlar.
vlink : Daha önceden ziyaret edilmiş linkin rengini ayarlar.

ÖRNEK KULLANIM:
<body bgcolor="white" text="black" link="blue" alink="yellow" vlink="red">

Arkaplan olarak bu sayfada olduğu gibi resim kullanmak isterseniz aşağıdaki gibi background parametresini kullanabilirsiniz;
<body background="resim.jpg" text="black" link="blue" alink="yellow" vlink="red">

Linkler (Bağlantılar)

Linkler bir sayfadan başka bir sayfaya geçiş yapmak için kullanılır. Bunun için kullanılan etiket <a> dır. Bu etiket içinde href parametresini kullanarak gidilecek sayfanın ismini veririz. Ve iki etiket arasında da görünmesini istediğimiz metni yazarız.

ÖRNEK KOD:
<a href="index.html">Anasayfaya gitmek için tıklayın</a>

EKRAN ÇIKTISI:
Anasayfaya gitmek için tıklayın


ÖRNEK KOD:
<a href="http://www.oocities.org" >Geocities'e gitmek için tıklayın</a>

EKRAN ÇIKTISI:
Geocities'e gitmek için tıklayın

Resim Görüntüleme

Grafikler herhangi bir noktada <img src="resmin bulunduğu dizin" alt="resmi tanımlayan yazı"> yapısı ile dökümana dahil edilirler. Dökümana dahil edilecek tüm resim dosyalarının uzantısı .xbm , .gif , .jpg vs.. olmalıdır. Alt parametresiyle resmin üzerine fareyle gelindiğinde çıkan kutucuktaki yazı belirlenir.

ÖRNEK KOD:
<img src="webtasarime3.jpg" alt="Web Tasarım - Efes3000">

EKRAN ÇIKTISI:
Web Tasarım - Efes3000

Ayrıca WIDTH, HEIGHT parametreleri ile resim boyutları belirtilebilir ve BORDER parametresiyle de kenar kalınlığı belirtilir, bu da mevcut renk ile istenen kalınlıkta gösterilir.

ÖRNEK KULLANIM:
<img src="webtasarime3.jpg" width="100" height="75" border="1" alt="Web Tasarım - Efes3000">



Bu bölümde HTML hakkında genel bir bilgi edindiniz ve HTML kodlarıyla sayfa hazırlayıp kaydetmeyi öğrendiniz. Buradan öğrendiğiniz bilgilerle artık rahatlıkla kendinize ait basit bir web sitesi tasarlayabilirsiniz. Tabi ki ileri düzey web siteleri tasarlamak için buradakinden çok daha fazla bilgiye ihtiyacınız var. Burayı okuduktan sonra Tablolar bölümüne geçebilir veya Web Tasarımı Linkler bölümünündeki ileri düzey HTML bilgisi veren bazı Türkçe ve İngilizce sitelerden yararlanabilirsiniz.

<xmp>