DİZAYN İÇİN
HAZIRLIK
Biliyorum herkes bugünlerde, web sayfası dizayn etmekten bahsediyor
yada web sitesi olduğunu söyleyip sizi kıskandırmaya çalışıyor.
Bazıları HTML diye birşeyden bahsediyor fakat kimse size
ne olduğunu söylemiyor, yada söylemek istemiyor. Yada
web dizayn yapmanın çok zor birşey olduğu gibi bir izlenim
veriyorlar size. Fakat bunlar sizi hiç yıldırmasın çünkü
bu yazının sonunda sizde web sayfası dizayn etmeye ilk
adımı atmış olacaksınız. En azından web sayfası tasarlamanın
kolay ve çok zevkli birşey olduğunu bu uygulamalı yazımda
göreceksiniz. Yazımı okuduktan sonra inanın bana, basit
bir web sayfası yapacak duruma geleceksiniz.
Yazımın sonunda sizler için
bir HTML Kılavuzu ekledim,
ister yazdırın ister duvarınıza asın, bir HTML uzmanı
olma yolunda işinize çok yarayacağından hiç şüphem yok.
Şimdi
web sayfamızı dizayna başlamadan önce size neler gerekli
olacak onlara bir göz atalım.
-
Bir
adet bilgisayar.
-
İnternet
Explorer yada Netscape Navigator, bu bizim web sayfalarımızın
nasıl göründüğü gösterecek olan program yani web browser'ımız.
-
Ve
son olarak da, belki de bu işin en önemli kısmı yani
öğrenme isteği.
Evet,
yukarıdaki maddeleri bir araya getirmeyi başarabildiyseniniz
biran önce işimize koyulabiliriz. Fakat herşeyden önce ilerde
ortaya çıkabilecek "üf-püf" leri en aza indirmek için web
dizaynımız aşamasında karşımıza çıkacak bazı terimleri açıklamak
istiyorum. bazı temel terimleri açıklarsam olayları belki
daha kolay anlayabilirsiniz.
TEKNİK
TERİMLER
Web sayfası
nedir?
Web sayfaları genelde iki temel kısımdan oluşur, birincisi text yani
sayfanınızın içeriği diğeri ise HTML Tag'leri. HTML kodları yani tag'leri web
browser'ınızın (İnternet explorer yada netscape programınızın)
web sayfalarını nasıl biçimlendireceğine yardımcı olan
kodlardır. Mesela yazınızdaki karakter çeşitleri yada
renkleri, veya menünün nerde olacağı, grafiklerin sayfada
nerede durması gerektiği, boyutları, bunların hepsi
HTML kodlarının yardımıyla olur. İşte bu iki temel kısmı
biz de bir araya getirdiğimiz zaman bir web sayfası
elde etmiş olacağız. Nasıl? Fazla da karmaşık bir şey
değil değil mi?
HTML nedir?
Genelde
web sayfası dosyalarmız HTML dosyalarıdır çünkü kısaca
bu dosyaların kök uzantıları .htm veya .html olarak
biter. HTML açılmış hali Hyper Text Markup Language,
yani "markup language" bir bilgisayar dili, bu dilin
görevide yazıları biçimlemesi sağlar, yani bir sayfadaki
yazının nasıl görüneceğini ayarlar.
Web tarayıcı (browser) nedir?
Web
browser İnternet üzerinde bize sörf yapmamıza yardımcı
olan ve siteleri görmemizi sağlayan bir yazılımdır.
Microsoft İnternet Explorer ve Netscape Navigator en
çok yaygın olan web browserlardır. Teknik olarak browserların
neler yaptığını iki madde de toplayabiliriz:
1- Browserınız sizin bağlandığınız web serverden yaptığınız
dosya isteğini ağ (network) üzerinden size yani kullandığınız
bilgisayara ulaşmasını sağlar.
2-
Browserın ikinci görevi ise yaptığınız isteği, yani
web serverdan gelen dosyayı size, yani monitörünüze
nasıl yansıtacağını, formatlamasını bilmesi, tabi bunun
için ne kullanıyor? Biraz önce bahsetmiştim: HTML tags.
Web Server(sunucu):
Web
server bir bilgisayar programıdır, yani software (örnek
Microsoft IIS, Apache) fakat bazı durumlarda tüm bir
bilgisayar hardware olarakda web server diye isimlendirilebilir.
Web server'in amacı kullanmakta olduğunuz browserdan
gelen isteği yerine getirip sonucu size tekrar gönderen
programdır.
Biz
biraz sonra başlayacağımız web sayfamızı dizayn ederken
web server kullanmamıza gerek yok çünkü sadece internet
explorerı kullanarak sayfamızın internet üzerinde nasıl
görüleceğini test edebilme imkanımız olacak. Eğer dizayn
ettiğiniz web sayfasını tüm dünya ile paylaşmak istiyorsanız
sayfanızı bir yerde host etmeniz gerekecek. Fakat şimdi
bunları düşünmenize gerek yok, ilkönce bir web sayfamızı
hazırlayalım.
HTML'E
GİRİŞ
HTML Tag'leri
Daha
öncede bahsettiğim gibi HTML tag browserınıza yazınızın
yani text'iniz biçimlendiren bir dizi kod dur. HTML tag'ler
< (küçüktür) ve > (büyüktür) işaretlerinin arasına konur. <html>, <title>, yada <body> bunlara örnek olarak verebiliriz.
HTML tag'leri geneldeingilizce kelimeler olduğu için bazı
kelimelerin kısaltılması tag olarak kullanılmıştır. Mesela
paragraf açmak için kullanılan <p> tag'i aslında
ingilizce 'paragraph' kelimesinden gelir. Her dilin bir
gramer yapısı olduğuna göre, HTML tag'lerininde bir anlamda
gramer'i de tag'leri nasıl kullandığınızdır. Bunun içinde
dikkat edeceğiniz ilk nokta html tag'lerinin doğru bir
şekilde kapatılmasıdır. Her tag'i mesela <html> kullandıktan sonra </html> şeklinde bölü işaretini tag'den önce
kullanarak kapatmak gerekiyor. Yani diğer bir örnek verecek
olursak; eğer <title>
tag'ini kullandıysak aynı tag'i bitirince de </title>
ile kapatılmış olması gerekiyor. Yoksa web tarayıcınız
web sayfasına yerleştireceğiniz yazınız ile ne yapacağını
şaşırır. Tabi bazı istisna tag'ler var, mesela <br>
gibi, bu tagler için kapatma tag'i kullanmanıza gerek
yok.
Her web sayfasında mutlak olması gereken HTML tag'leri:
Her
web sayfasında mutlaka bazı HTML tag'lerini kullanmanız
gerekiyor ve aşağıda sıraladığım bu tag'ler html dosyanızın
omurgasını oluşturuyor.
<html>: bu tag browser'a
HTML dosyasısnın başladığını haber verir.
<head>: Web sayfasının
içeriğinin dışında sayfa ile bilgilerin verildiği yerdir.
Sitenizin ilerde arama motorlarında bulunmasına yardımcı
olan meta tags olarak adlandırılan tag'lerde yine head'in
dahili içindedir.
<title>: Sştemizin adını bu tag'le belirtiyoruz
ve tarayıcınızın sol üst köşesinde bunu görebiliriz.
<body>: web tarayacısına web sayfamızdaki metnin
başladığını haber verir. Browserınızda gördüğünüz herşey
bu taglerin arasında yer alır.
tabi
bu tagleri kullandıktan sonra taglerin kapatılması gerekiyor,
daha önce söylediğim gibi. Diğer
tag'lerle ilgili açıklamaları HTML Kılavuzu'nda
bulabilirsiniz.
Şimdi
heralde biraz olsun HTML ile yakınlaşmışsınızdır. Klasik
bilgi yerine anlatımın kolay olması için uygulamalı bir
web sayfası yapmaya karar verdim. İstersenin fazla zaman
harcamadan sayfamızı dizayn etmeye başlayalım. Sitemizn
adı: '12 Dev Adam'.
İLK SAYFAMIZI
YAPIYORUZ
Evetttt, bu kadar temel bilgi ve hazırlıktan sonra artık '12 Dev Adam' web sayfamızı
hazırlamaya başlayabiliriz.
Web sayfası hazırlamak için özel yazılımlar var mesela FrontPage,
Dreamweaver, Adobe GoLive…vs. fakat bu programlar
sizin işinizi ne kadar kolaylaştırsa da bazı dezavantajları
olduğuda bir gerçek, o yüzden ben size asıl sahnenin arkasında
neler döndüğünü göstermek istiyorum. Eğer windows tabanli
bir bilgisayar kullanıyorsanız herhangi özel bir editör
kullanmanıza gerek yoktur. Mesela dreamweaver veya frontpage
gibi. Sizin için tek gerekli olan windows sisteminizinde
içinde olan pek çekici görünmeyen Not Defteri’niz
size yeterli olacaktir. Eğer bu program sistemizde mevcut
değilse bunun yerine WordPerfect ya da Microsoft Word gibi
farklı yazılımlarda kullabilirsiniz.
Şimdi isterseniz Not Defteri mizi açarak dizaynımıza başlayalım.
Bunun için Başlangıç menü'sünden Donatıları ve ordan da
Not Defterini seçebilirsiniz.
Önemli not: Not Defterinde dosyanızı saklarken
dikkat etmeniz gereken en önemli nokta dosyanızın uzantısı.
Not Defteri programı dosya uzantılarını .txt olarak saklar.
Fakat bizim dosyamız bir HTML dosyası olduğu için uzantımızın
.htm olması gereklidir. Ve eğer dikkatli olmazsak dosyamız
'12devadam.htm.txt' gibi karışık bir hal alabilir. Böyle
bir duruma izin vermemek aşağıdaki adımları izleyebilirsiniz:
1-Dosya menüsüne tıklayıp 'farklı kaydet'
seçin.
2-Kayıt yapacağınız
klasörün 'Konum' dan yerini tespit edin.
3-Dosya çesitini 'tüm dosyalar' olarak seçiniz.
4-Dosya adı olarak
'12devadam.htm' diyerek .htm uzantısını dosya isminin sonuna
eklemiş olun.
Yukardali
resime göre konuşacak olursak A: sürücünüzde '12devadam.htm' adlı bir
html dosyası artık mevcut olacak.
YAZILARIMIZI BİÇİMLENDİRİYORUZ
|
|
|
|
|
İşte hemen sol tarafta yapacağımız web sayfasının görünümü,
heyecanlamayın biraz sonra sizin olacak. :-) |
|
|
|
 |
|
1. Başlığımızı
yazıyoruz.
<html>
<head>
<title>12 Dev Adam!!!</title>
</head>
<body></body>
</html>
|
|
|
|
 |
|
2.
Sayfamızın arka plan rengini belirliyoruz.
<html>
<head>
<title>12 Dev Adam!!!</title>
</head>
<body><body bgcolor="#FF0000"></body>
</html> |
|
|
|
 |
|
3. İlk
yazımızı yazıyoruz.
<html>
<head>
<title>12 Dev Adam!!!</title>
</head>
<body><body bgcolor="#FF0000"><p>12
DEV ADAM'IN WEB SITESINE</p>
<p>HOS GELDINIZ!!!</p>
</body>
</html> |
|
|
|
 |
|
4.Yazımıza
renk ve biçim veriyoruz.
<html>
<head>
<title>12 Dev Adam!!!</title>
</head>
<body><body bgcolor="#FF0000"><p
align="center"><font size="7"><b><font
color="#FFFFFF">12 DEV ADAM'IN WEB SITESINE
</font></b></font></p>
<p align="center"><font size="7" color="#FFFFFF"><b><font
size="6">HOS GELDINIZ!!!</font></b></font><font
size="6"><b>
</b></font></p>
</body>
</html> |
|
|
|
Not: Bu
sayfada kullandığım bütün html tag'lerinin açıklamalarını
son sayfadaki HTML Kılavuzu'nda bulabilirsiniz.
RESİM EKLİYORUZ
|
|
|
 |
|
Bu bölümümüzde sayfamızı görselleştireceğiz. Üç resimimizi
eklediğimizde yandaki sayfayı elde edeceğiz. Hadi
biran önce işe koyulalım. |
|
|
|
 |
|
1.
İlk resimi ekliyoruz.
<html>
<head>
<title>12 Dev Adam!!!</title>
</head>
<body><body bgcolor="#FF0000"><p
align="center"><font size="7"><b><font
color="#FFFFFF">12 DEV ADAM'IN WEB SITESINE
</font></b></font></p>
<p align="center"><font size="7" color="#FFFFFF"><b><font
size="6">HOS GELDINIZ!!!</font></b></font><font
size="6"><b>
</b></font></p>
<p align="center"><img
src="dev1.gif" width="80" height="100"></p>
</body>
</html> |
|
|
|
 |
|
2.
İkinci resimi ekliyoruz.
<html>
<head>
<title>12 Dev Adam!!!</title>
</head>
<body><body bgcolor="#FF0000"><p
align="center"><font size="7"><b><font
color="#FFFFFF">12 DEV ADAM'IN WEB SITESINE
</font></b></font></p>
<p align="center"><font size="7" color="#FFFFFF"><b><font
size="6">HOS GELDINIZ!!!</font></b></font><font
size="6"><b>
</b></font></p>
<p align="center"><img
src="dev1.gif" width="80" height="100"><img
src="dev2.jpg" width="80" height="100"></p>
</body>
</html> |
|
|
|
 |
|
3.
Üçüncü resimi ekliyoruz.
<html>
<head>
<title>12 Dev Adam!!!</title>
</head>
<body><body bgcolor="#FF0000"><p
align="center"><font size="7"><b><font
color="#FFFFFF">12 DEV ADAM'IN WEB SITESINE
</font></b></font></p>
<p align="center"><font size="7" color="#FFFFFF"><b><font
size="6">HOS GELDINIZ!!!</font></b></font><font
size="6"><b>
</b></font></p>
<p align="center"><img
src="dev1.gif" width="80" height="100"><img
src="dev2.jpg" width="80" height="100"><img
src="dev3.gif" width="80" height="100"></p>
</body>
</html> |
|
|
|
ÇOK ÖNEMLİ NOT:
Eğer sayfanızda resimlerinizi göremiyorsanız, resim dosyalarınızın
ve html dosyalarının aynı klasör içinde olup olmadığına
bakın.
Not: Bu
sayfada kullandığım bütün html tag'lerinin açıklamalarını
son sayfadaki HTML Kılavuzu'nda bulabilirsiniz.
LİNK
VERİYORUZ
|
|
|
 |
|
1. İlk link'imizi veriyoruz.
<html>
<head>
<title>12 Dev Adam!!!</title>
</head>
<body><body bgcolor="#FF0000"><p
align="center"><font size="7"><b><font
color="#FFFFFF">12 DEV ADAM'IN WEB SITESINE </font></b></font></p>
<p align="center"><font size="7" color="#FFFFFF"><b><font
size="6">HOS GELDINIZ!!!</font></b></font><font
size="6"><b>
</b></font></p>
<p align="center"><img src="dev1.gif" width="80"
height="100"><img src="dev2.jpg" width="80"
height="100"><img src="dev3.gif" width="80"
height="100"></p><p><font color="#FFFFFF"><b><font size="4"><a
href="ahref=%22dunya.htm%22">2002
Atlanta Dünya Kupası</a></font></b></font></p>
</body>
</html> |
|
|
|
 |
|
2. İkinci link'imizi
veriyoruz.
<html>
<head>
<title>12 Dev Adam!!!</title>
</head>
<body><body bgcolor="#FF0000"><p
align="center"><font size="7"><b><font
color="#FFFFFF">12 DEV ADAM'IN WEB SITESINE </font></b></font></p>
<p align="center"><font size="7" color="#FFFFFF"><b><font
size="6">HOS GELDINIZ!!!</font></b></font><font
size="6"><b>
</b></font></p>
<p align="center"><img src="dev1.gif" width="80"
height="100"><img src="dev2.jpg" width="80"
height="100"><img src="dev3.gif" width="80"
height="100"></p><p><font color="#FFFFFF"><b><font
size="4"><a href="ahref=%22dunya.htm%22">2002
Atlanta Dünya Kupası</a></font></b></font></p><p><b><font size="4" color="#FFFFFF"><a
href="avrupa.htm">2002 İstanbul Avrupa
Şampiyonası</a></font></b></p>
</body>
</html> |
|
|
|
|
|
|
Not: Bu sayfada kullandığım bütün
html tag'lerinin açıklamalarını son sayfadaki HTML Kılavuzu'nda bulabilirsiniz.
SAYFA KAYNAK KODUNU GÖRMEK
Browser'da
kaynak(HTML kodu) nasıl görürüz?
Dosyalarımızı upload etmeden önce sizlerle web tasarımcılarının en
büyük sırrını paylaşmak istiyorum: souRce code, yani sayfanın
kaynak kodu. Evet ben dahil birçok tasarımcının belkide
ilk öğrendikleri şey, web sitelerinin kodlarına merak
edip bakmak. Böylece birçok şeyin nasıl yapıldığını anlayabilirsiniz.
Neden bakmamıza izin veriliyor diye sorabilirsiniz, fakat
ne yapalım web tarayacılarının çalışma sistemi böyle.
Peki, şimdi kaynak nasıl görülür ona bakalım.
Farenizi görünüm menü'sünün üzerine getirin ve menü'den 'Kaynak'
seçin,
seçtikten sonra göreceksiniz yeni bir NotDefteri penceresi açılacak,
karşınıza belki biraz karmaşık yazıların ve html kodlarının
olduğu bir dosya gelecek. İşte bu gördüğünüz web sayfasını
oluşturan kod. Artık sizde bir profesyonel sayılabilirsiniz
ve bu sayfayı dizayn edenin sırrını çözdünüz. Çok karmaşık
gibi görunebilir fakat panik olmayın, bir sonraki sayfadaki
HTML kılavuzu ile en karışık bir sayfada bile neyin ne
olduğunu aşağı yukarı anlayabilirsiniz.
DOSYALARI UPLOAD EDIYORUZ
Web sitemizi hazirladiktan sonra artık vitrine koyma zamanımız geldi.
Vitrinimizin adi Web ve işlemin adı "upload".
Dosyalarımızı
upload etmeden önce ilk yapmamız gereken şey web sitemizin
dosyalarını nereye aktarılması gerektiğidir. Diğer bir
deyişle sitemizi host edeceğimiz yerin bulunması. Genelde
Internet Servis Sağlayıcıları siteniz için bedava alan
sağlayabilir. Fakat böyle bir seçeneğiniz yoksa bedava
alan bulabileceğiniz hosting opsiyonlari çok fazla. Bunların
ayrıntılarını webhosting'i konu alacağım yazımda bulabilirsiniz.
Eğer
nereye host edeceğinize karar verdiyseniz artık çalışmaya
başlayabiliriz. Bu aşamada bazı bilgilerin sitenize hosting
servisi sağlayan kurumdan alınması gerekiyor. Aşağıdaki
tüm resim üzerindeki bilgileri ben sitenizin mydomain.com
adlı host sağlayıcıda bulunacakmış gibi verdim.
1- Kullanıcı Adı: metin
2- Şifreniz: soylenasil
3- Web
sitenizin dosyalarını upload edeceğiniz server'in adı:
server1.soylenasil.com
4- Web sitenizin
URL adresi www.benimsitem.com
Evet
artık upload etmeye başlamamız için hiç bir neden yok
hemen İnternet'e bağlanarak upload'umuza başlayabiliriz.
HTML KILAVUZUNUZ
| Temel HTML
Tag'leri |
<html></html>
Her web sayfasında olması gereken ve html dosyasını
başlatan ve bitiren tag. |
<head></head>
Web sayfasının içeriğinin dışında sayfa ile bilgilerin
verildiği yerdir. Sitenizin ilerde arama motorlarında
bulunmasına yardımcı olan meta tags olarak adlandırılan
tag'lerde yine head'in dahili içindedir. |
<title></title>
Sitenizin adını buraya koyabilirsiniz. |
|
<body></body>
Bir HTML dosyasında başlık yani head'den sonra
gövde gelir. Sayfanın düzenlenmesi ile ilgili
herşey buraya gelir. |
|
|
| Gövde ile ilgili ayarlar |
<body bgcolor=?>
Gövdenin arkaplan rengini ayarlamak için kullanılır. |
<body text=?>
Gövdenin içerisindeki yazının rengini ayarlar. |
<body link=?>
Linklerin rengini ayarlar. |
<body vlink=?>
Ziyaret edilimiş linklerin renklerini ayarlar. |
<body alink=?>
Üzerine tıklayacağınız linklerin rengini belirlemede
kulllanılır. |
|
| Yazı görünümü ile ilgili ayarlar |
<pre></pre>
Ön formatlı yazı yazmak için. |
<hl></hl>
En büyük başlık yazısını yazar. |
<h6></h6>
En küçük başlık atar. |
<b></b>
Yazıyı kalın bold yazmak için. |
<i></i>
Yazıyı İtalic yani eğik yazmak için. |
<tt></tt>
Daktilo stilinde yazı yazmak için. |
<cite></cite>
Referans yazmak için. |
<em></em>
İtalic veya Bold yazı kullanarak vurgulu yazar. |
<strong></strong>
Kelimeyi vurgulu yazar. |
|
<font size=?></font>
Font'un büyüklüğünü ayarlar. |
<font color=?></font>
Font'un rengini ayarlar. |
|
| Linkler |
<a href="URL"></a>
Yazınıza link vermek için kullanırlır. |
<a href="mailto:EMAIL"></a>
Email linki vermek için. |
<a name="NAME"></a>
Aynı sayfanın içerisinde belirli bir yere link vermek
için. |
<a href="#NAME"></a>
Sayfanın içerisindeki hedef noktaya link vermek için. |
|
| Yazıların formatlanması ile ilgili ayarlar |
<p></p>
Paragraf yapmak için kullanılır. |
<p align=?>
Paragrafın yerini ayarlamak için sağa, sola veya ortaya. |
<br>
Satır başı yapmak için. |
<blockquote></blockquote>
Tab yapmak için kullanılır. |
<dl></dl>
Tanıtım listesi hazırlamak için. |
<dt>
Tanıtım sonrası için. |
<dd>
Tanım yapmak için. |
<ol></ol>
Sıralı listelere başlamadan önce kullanılan ilk tag. |
<li></li>
Listelenen elemanlara numara verir. |
<ul></ul>
Sırasız liste yapmak için. |
<div align=?>
Belirli bir kısım içerisindeki kodun formatlanmasında
kullanılır. |
|
