Transcript HTML’e Giriş

 display :
 inline : Kullandığımız nesneleri yanyana sıralar.
 block : Kullandığımız nesneleri alt alta sıralar.
 none : Kullandığımız nesneleri göstermez. Genellikle
JavaScript methodlarında kullanılır.
 Padding: İçeriğin elementin sınırlarına olan uzaklığını
belirlemek için kullanılır.Örneğin "padding:4px;"
şeklindeki bir deklerasyon içeriğin sınırlara (alt,üst,sağ ve
sol) olan uzaklığının 4 pixel olacağını söyler.
Margin: Elementin komşu elementlere olan uzaklığını
belirtmek için kullanılır.Örneğin "margin:4px;" şeklindeki
bir deklerasyon elementin komşularının sınırlarına
(alt,üst,sağ ve sol) olan uzaklığının 4 pixel olacağını söyler.
Aşağıdaki şekilde padding ve margin seçeneğini gösterir.
 CSS’de birimleri 4 gruba ayırabiliriz.
 · Uzunluk Birimleri
 · Yüzde Birimleri
 · Renk Birimleri
 · Url Birimleri
 Uzunluk Birimleri
CSS’de 8 farklı uzunluk birimi vardır. Bunların 3′ü relative
(göreceli) 5′i ise absolute (kesin) uzunluklardır.
Sayfa ölçeğinin değişmesi veya çıktısının alınması gibi
durumlarda göreceli uzunluk birimleri avantaj sağlar. Her
kullanıcının bilgisayarı özellik olarak farklılıklar
gösterebilir.Özellikle kullanılan monitörlerin farklı
ebatlarda-özelliklerde olması bu birimleri kullanışsız
kılmaktadır.Misal, 15inc’lik bir monitörde gayet hoş
görünen bir metin, 19inc bir monitörde kötü görünebilir.
 Göreceli uzunluk birimlerini
 · em: Elementin fontunun yüksekliğidir.1 em, 16 pixele
karşılık gelmektedir.
CSS’de “em” uzunluk birimini kullanmak isteyenler için
pixel olarak dönüşüm yapmak oldukça zordur.
 · ex: Metnin küçük “x” harfinin yükseklik
değeridir.Ortalama olarak 1ex, 8 pixele karşılık
gelmektedir.Her fontun “x” karakteri farklı boyutlarda
olduğundan, her font için bu uzunluk birimi farklı sonuçlar
çıkaracaktır.
·
 Göreceli uzunluk birimlerini
 · px: Pek yabancı olmadığımız, sıklıkla kullanılan bir ölçü
birimidir.Bir resmi yeterince büyütürseniz, çok küçük
kutucuklardan oluştuğunu görürsünüz.İşte bu kutuların
her biri 1 pixele karşılık gelmektedir.Aynı mantık
monitörlerde de vardır.Eğer monitörünüze çok takından
bakarsanız ızgara şeklinde kutuculardan oluştuğunu
görürsünüz.Bu kutucukların da her biri 1pixeldir.Bu da her
monitöre göre farklı değerler demektir.
 CSS:
 #deneme {font-size: 22px;}
 Kesin uzunluklar ise, gerçek hayatta kullanılan kati ölçü
birimleridir.
 · in (inch): 1in, 2,54cm’e karşılık gelmektedir.TopStyle Lite
programında 1in, 96px e karşılık gelmektedir.Bu
dönüşümleri Photoshop ile de test edebilirsiniz.Ancak
1in=72px’e karşılık gelecektir.CSS ile uğraştığımıza göre
TopStyle Lite’daki değeri kullanabiliriz.
 · cm (santimetre): Günlük hayatta kullandığımız değerdir.
TopStyle Lite’da 1cm, 38px’e karşılık gelmektedir.
 · mm (milimetre): Yine günlük hayattan tanıdığımız bir
ölçü birimi.Bilindiği üzere 10mm, 1cm’e karşılık
gelmektedir.Bu da 10mm=38px demektir.
 · pt (point): Standart baskı birimidir.100pt, 133pixele
karşılık gelmektedir.Ufak bir bilgi, Photoshop programında
1px=1pt alınmıştır.
 · pc (pica): Bu da bir baskı ölçü birimidir.1pc, 16px’e
karşılık gelmektedir.
 Yüzde Birimleri :
Yüzde değerleri her zaman diğer elementlere göre
göreceli değerlerdir.
CSS:
 h4 { line-height: 150% }
 böyle bir kod, metnin font büyüklüğünün %150 kadarı bir
satır yüksekliğini ifade eder.
CSS:
 p { text-indent: 10% }
 böyle bir kod ise metnin soldan satır genişliğinin %10'u
kadar içerden başlayacağını ifade eder.
 Renk Birimleri :
CSS'de renklerin İngilizce isimleri kullanılarak tanımlama
yapılır.Design ile ilgilenen arkadaşlarımız varsa, RGB
kavramı pek yabancı gelmeyecektir onlara.Bu mod
Red(Kırmızı), Green(Yeşil), Blue(Mavi) renklerinin
başharfleri ile tanımlanmaktadır.
5 Çeşit renk belirleme özelliği vardır.
1- İlgili renk özelliğine HTML tablosundaki renklerden
birinin isminin direk olarak atanması yöntemi.Misal,
Aşağıdaki kodlar 12px font büyüklüğünde açıkyeşil renkte
bir yazıyı karşılamaktadır.
 CSS:
 #deneme {
 font-size: 14px;
 color: LightGreen;
}
 gibi.
 2-Kısa RGB kodu ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0,...,F
arası tek basamaklı heksadesimal değer alabilirler.
En fazla renk değeri : #FFF (Önceki yöntemlere göre =
White) 'dir.
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir
yazıyı karşılamaktadır.
 CSS:
 #deneme { font-size: 12px;
 color: #FFF; }

 3-RGB kodu ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 00,...,FF
arası iki basamaklı heksadesimal değer alabilirler.
En fazla renk değeri : #FFFFFF (Önceki yöntemlere göre =
#FFF = White)
Aşağıdaki kodlar 12px font büyüklüğünde yeşil renkte bir
yazıyı karşılamaktadır.
 CSS:
 #deneme {
 font-size: 12px;
 color: #9ACD32;}
 4-Tam sayı değer ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı
000,...,255 arası 3 basamaklı tam sayı değerleri alarak
aşağıdaki örnekteki gibi belirtilirler.
En fazla renk değeri : rgb(255, 255, 255) (Önceki
yöntemlere göre = #FFFFFF = #FFF = White)
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir
yazıyı karşılamaktadır.
 CSS:
 #deneme { font-size: 12px;
 color: rgb(255,255,255); }
 5-Yüzde değeri ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı
000,...,100 arası kayar noktalı sayı değeri alarak gösterilir.
En fazla renk değeri : rgb(100%, 100%, 100%) (Önceki
yöntemlere göre = rgb(255,255,255) = #FFFFFF = #FFF =
White)
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir
yazıyı karşılamaktadır.
 CSS:
 #deneme { font-size: 12px;
 color: rgb(100%, 100%, 100%) }
 URL Birimleri :
Herhangi bir metnin,belirli bir alanın, arkaplanına veya
etrafına yerleştirilen resmin gösteriliş şeklidir.Misal;
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte,
arkaplanına benim atadığım style.css ile aynı dizinde olan
images klasöründeki deneme.gif dosyasının
gösterileceğini söyler.
 #deneme { font-size: 12px;
 color: rgb(100%, 100%, 100%)
 background: url("/images/deneme.gif“) }
 Örnek 1:
<html> <head>
 <style type="text/css">
 #coolmenu {
 border: 1px solid black;
 border-bottom-width: 0;
 width: 170px;
 background-color: #E6E6E6;
}

 #coolmenu {width:164px;/*tablo sütün genişliği*/}
 #coolmenu a{
 font: bold 13px Verdana;
 padding: 2px;
 padding-left: 4px;
 display: block;
 width: 100%;
 color: black;
 text-decoration: none;
 border-bottom: 1px solid black; }
 #coolmenu a:hover{
 background-color: black;
 color: white;
}
 </style> </head>
 <body>
 <div id="coolmenu">
 <a href="http://www.cssdrive.com">CSS Drive</a>
 <a href="http://www.javascriptkit.com">JavaScript
Kit</a>
 <a
href="http://www.javascriptkit.com/cutpastejava.shtml">
Free JavaScripts</a>
 <a href="http://www.javascriptkit.com/jsref/">JavaScript
Reference</a>
 <a href="http://www.codingforums.com">Coding
Forums</a>
 </div>
 </body>
 </html>
 Örnek 2:
<html> <head> <style type="text/css">
 #button {
 width: 150px;
 border-right: 1px solid #000;
 padding: 0 0 1em 0;
 margin-bottom: 1em;
 font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
 font-size: 90%;
 background-color: #90bade;
 color: #333; }
 #button ul {
 list-style:none ;
 margin: 0;
 padding: 0;
 border: none; }
 #button li {
 border-bottom: 1px solid #90bade;
 margin: 0; }

 #button li a {
 display: block;
 padding: 5px 5px 5px 0.5em;
 border-left: 10px solid #1958b7;
 border-right: 10px solid #508fc4;
 background-color: #2175bc;
 color: #fff;
 text-decoration: none;
 width: 100%;
}
 #button li a:hover {
 border-left: 10px solid #1c64d1;
 border-right: 10px solid #5ba3e0;
 background-color: #2586d7;
 color: #fff;
}
 </style> </head>
 <body> <div id="button">

<ul>

<li> <a href="#">e-dersler</a></li>

<li> <a href="#">C/C++</a></li>

<li> <a href="#">Pascal</a> </li>

<li><a href="#">Java</a></li>

<li> <a href="#">HTML</a></li>

<li><a href="#">xhtml</a> </li>

<li><a href="#">xml</a></li> </ul> </div> </body>
</html>
 Örnek 3:
<html><head> <style>
 #navcontainer ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
}

 #navcontainer li {
 margin: 0 0 .2em 0;
}
 #navcontainer a {
 display: block;
 color: #ffffff;
 background-color: #003366;
 width: 9em;
 padding: .2em .8em;
 text-decoration: none;
}
 #navcontainer a:hover{
 background-color: rgb(51,102,153);
 color: #ffffff; }
 #active a {
 display: block;
 color: #FFF;
 background-color: #600;
 width: 9em;
 padding: .2em .8em;
 text-decoration: none;
}
 </style>
 </head>
 #active a {
 display: block;
 color: #FFF;
 background-color: #600;
 width: 9em;
 padding: .2em .8em;
 text-decoration: none;
}
 </style>
 </head>
 <body> CSS CODE
 HTML CODE
 <div id="navcontainer">
 <ul><li><a href="#">Ankara</a></li>
 <li id="active"><a href="#">İstanbul</a></li>
 <li><a href="#">İzmir</a></li>
 <li><a href="#">Adana</a></li>
 <li><a href="#">Erzurum</a></li>
 </ul></div></body></html>
KAYAN YAZILAR
 KAYAN, yuvarlanan, ters parende atarak ekrandan kaybolan yazılar insanların ilgisini
daha çok çeker. Bu işlemler için Microsoft, <MARQUEE> tag'ını web tarayıcısının
yorumlayıcısına eklemiş.
 Netscape ise Explorer 2.0'dan beri var olan bu tag'ı web tarayıcısına koymayı
düşünmüyor. Yine de tag'ı kullandığınızda içerisinde var olan yazıların Netscape
kullanıcıları tarafından 'normal yazı' olarak görüneceğini belirtelim.
 <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n
LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>
KAYAN YAZILAR
 <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n
LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>
 BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek
SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir.
 Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı,
sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur.
 SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar.
 Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle
gerçekleştirilebilir.
KAYAN YAZILAR
 BGCOLOR=renk: Kayan yazının arkasındaki rengi belirler. ' renk' değeri
16'lık sayı düzeninde bir değer olabileceği gibi ' red' ,' blue' gibi renk
isimlerinden biri de olabilir.
 DIRECTION=yön: Yazının kayma yönünü belirler. DIRECTION eki, LEFT veya
RIGHT değerlerinden birini almalıdır. LEFT değeri yazının soldan sağa doğru
kaymasını, RIGHT ise bunun tersini sağlar.
 HEIGHT=n: Kayan yazının sınırlarından ' yüksekliği' sağlar. N değeri sabit bir
piksel sayısı olduğu gibi aynı zamanda bir pencere oranı olabilir. Oran değeri
% işareti ile belirtilmelidir.
 HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek
özellikle arka plana bir renk verildiğinde daha da belirginleşir.
KAYAN YAZILAR
 LOOP=n: Yazıya verilen hareketin sınırlar içerisinde kaç kere
tekrarlanacağını belirler. N değerine ' -1' veya ' INFINITE' verildiğinde
hareket sınırsız olarak tekrarlanır. Tip olarak ' SLIDE' kullanıldığında bu işlem
tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur.
 SCROLLAMOUNT, Kayan yazının bir defada kaç piksel hareket edeceğini,
SCROLLDELAY ise yazının her bir hareketi arasında kaç milisaniye
bekleyeceğini belirler.
 Yazının üst ve alt sınırdan ne kadar uzakta kalacağını VSPACE ile, yazının
kayacağı toplam uzunluğu ise WIDTH ile ayarlayabilirsiniz. WIDTH değeri
HEIGHT gibi bir yüzde alabilir.
 Örnek Kullanım:
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10
SCROLLDELAY=200>Bu kayan bir yazıdır... :) </MARQUEE>
MULTİMEDİA ÖĞELERİ
 Seçiminize göre geri planda WAV, .AU veya MIDI ses
dosyalarından birini çalmak için Internet Explorer'da
BGSOUND tag'ını kullanabilirsiniz.
 <BGSOUND SRC=' deneme.mid' LOOP=5>
 Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek
için aşağıdaki gibi bir komut kullanmalısınız. Deneme.Gif
dosyası görüntü yüklenene kadar sayfada yer kaplayacaktır.
 <IMG DYNSRC=' deneme.avi' SRC=' deneme.gif'
LOOP=INFINITE >
ARAMA MOTORLARINA YARDIMCI OLUN
 Hazırlanan sitenin arama motorları sayesinde görülmesi için yapılamsı gereken
bazı işlemler bulunmaktadır. Arama motorlarının kullandığı ' ajan' programlar
sitenize geldiklerinde ilk baktıkları şey bir takım tanımlardır. Aşağıda bu tanımları
oluşturmak için gereken satırları göreceksiniz.
 Bu satırları <HEAD>...</HEAD> ifadeleri arasına girerseniz hedef kullanıcıya
ulaşmanız daha kolay olacaktır.
 <META NAME="author" CONTENT="EMEL KAÇAR"> Kodu sayfanın
tasarımcı kimliğini gösterir.
 <META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını buraya
yapın."> Kodu sayfanın kısa tanımı yapılmak için kullanılır.
ARAMA MOTORLARINA YARDIMCI OLUN
 <META NAME="keywords" CONTENT="Sitenizi arama motorlarında
bulduracak siteniz ile ilgili kelimeleri buraya yazın."> Kodu sayfanın hangi
kelimeleri içerdiğini gösterir.Burası arama motorları için çok önemlidir.
 <META http-equiv=”refresh” CONTENT=”5;
URL=http://www.megep.meg.gov.tr”> Refresh ile sayfamız açıldıktan 5
saniye sonra belirtilen adresi otomatik olarak açacaktır.
 <META http-equiv=”expires” CONTENT=”Wed, 25 Feb 2007 12:00:00
GMT”> Expires GMT saat sistemine göre belirtilen saat ve tarihte sayfanın
dosyası silinecektir.
ARAMA MOTORLARINA YARDIMCI OLUN
 <META http-equiv="Content-Type" CONTENT="text/html;
charset=windows-1254"> Kodu sayfanızda ne tür bir metnin olduğunu
(text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve
karakterlerinin hangi kodlama (windows-1254 yazmakla) ile yapıldığını
gösterir.
 <META http-equiv="Content-Language" CONTENT="tr"> Kodu sayfanızın
dilinin Türkçe (istenirse değiştirilebilir.) olduğunu gösterir.
 <META http-equiv=”content-style-type” CONTENT=”text/css”> Content-
typestyle belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu
belirtir.
ARAMA MOTORLARINA YARDIMCI OLUN
 <META NAME="copyright" CONTENT="&copy; 2006 EMEL KAÇAR“> Kodu
sayfanın telif hakkının kime ait olduğunu gösterir.
 <META name="GENERATOR" CONTENT="Microsoft FrontPage"> Kodu
sayfanın hangi editörle yapıldığını gösterir.
 <META NAME="ROBOTS" CONTENT="ALL, FOLLOW, INDEX"> Kodu
sayfanızı tüm arama motorlarının veritabanına kaydolabilme hakkının
verilmiş olduğunu gösterir.
 <META NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi
kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride
olduğu belirtilmiş olur.
 Meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez.
Web Tasarımda Dikkat Edilecek Hususlar
 Kullanıcılar (okuyucular) uzun ve bitişik belgeleri nadiren bilgisayar
ekranından okurlar.
 Çoğu insanlar özellikle aradığı belgeleri kısa, anlaşılır, referans bilgilerin
bulunduğu sayfalardan aramayı ve aradıklarını bulduktan sonra uzun içerikli
bilgileri yazıcıda bastırmayı tercih ederler.
 Küçük bölümler halinde anlatılmış belgeler, anlaşılabilir organizasyon
şeması oluşturmak açısından önemlidir ve ayrıca web sitenizde hypertext
bağlantılar kurmaya yardımcı olurlar.
 Kısa, şekilsel - organize belgeler bölümleri kullanıcıları sayfaya daha fazla
çeker.
Web Tasarımda Dikkat Edilecek Hususlar
 Eğer okuyucu için temel tarama yapısına uygun bir site isteniyorsanız, belgeler;
 Uygun bölümlere ayrılmalı,
 Önem ve genelliğe bağlı olarak bir hiyerarşi içinde olmalı,
 Hiyerarşi bölümler arasındaki ilişkiyi yapılandırmada kullanılmalı,
 Sistemin işlevsel ve estetik başarısını analiz etmelidir.


Şekil-WEB sitesi sayfa yerleşim taslağı.
Web Tasarımda Dikkat Edilecek Hususlar
 Sayfanızda ilk olarak öncelikli bilgileri sunarsanız, en önemliden veya en genel
başlıklardan daha ilgili veya daha ayrıntılı bilgilere doğru bir hiyerarşik düzen
kurabilirsiniz. Web’ de hiyerarşik organizasyonlar gereklidir. Çünkü çoğu ana sayfa ve
bağlantı şemaları hiyerarşik bir düzene sahiptirler. Aşağıdaki sayfada da görüldüğü
gibi ana sayfayı alt sayfalar ve içeriksel sayfalar izler

Şekil- Ana sayfanın içeriğinin hiyerarşik düzeni
Sayfalar Arası İlişkiler
 Mantıklı bir site organizasyonu, kullanıcıların aradıklarını nerede bulabilecekleri
hakkında doğru yönlendirmeler yapar. Eğer ilişkiler mantıklı yapılar halinde
kurulmazsanız sayfa okuyucunu aklını karıştırmaktan başka işe yaramaz

Şekil- . Düzensiz bir site örneği
Sayfalar Arası İlişkiler
 Çok geniş: Esas menü, birbirleriyle ilgisiz çok yayılmış,tekdüze bir yapı gösteriyor.

Şekil- Geniş alana yayılmış site örneği
Sayfalar Arası İlişkiler
 Çok derin: Menü sayfaları gereksizce derinlere doğru uzanıyor, fakat içerik oldukça
az. Yani başı ve sonu gelen sayfalar var. Sayfalar hem çok ince hem de çok uzun
görünüyor.
Şekil- Çok derin alana yayılmış site örneği
Sayfalar Arası İlişkiler
 İyi dengelenmiş: İyi dengelenmiş hiyerarşik bir ağaç yapısı oluşturmada amaç,
okuyucunun sayfa yapısını kolay idrak edebilmesini ve sayfalar arasında
kaybolmamasını sağlamaktır.
Şekil- Dengeli yapıda bir site örneği
Sayfalar Arası İlişkiler
Şekil- WEB sayfasına iyi bir örnek
Sayfalar Arası İlişkiler
 Bu örnekte; sayfanın alt ve üst kısmında görüntü haritaları kullanılmıştır.
 Sayfanın hangi siteye ait olduğu, belgelerin içeriği, konu başlıkları gibi temel bilgiler
burada sabit bir düzen içinde verilerek aynı zamanda "ileri" "geri" düğmeleri
eklenerek bir önceki ve bir sonraki sayfaya geçiş kolaylığı sağlanmıştır.
 Sayfanın sol yanında ayrılan bölüm ana sayfaya ve konunun alt başlıklarına bağlantı
için kullanılmıştır. Okuyuculara sunulan bilgi bu sınırlandırma içinde, düzgün ve
orantılı başlıklar altında metin ve grafik olarak gösterilmiştir. Belgelerin bütün
sayfaları bu standart formata uygun halde hazırlanmıştır. Böylece, kullanıcılar ilk
sayfayı inceledikten sonra diğer sayfalarda aradıkları bilgilerin nerede olduğunu
tahmin edebileceklerdir
Bir Sayfa Hazırlanırken Dikkat Edilecekler
 Sayfada Grafik Kullanılırken Dikkat Edilecekler
 Grafiklerin güvenli bir şekilde görüldüğü alan, iki ayrıntıya göre belirlenir:
 1. Günümüzde kullanılan en düşük ekran çözünürlüğü.
2. Web sayfalarının yazdırılacağı kağıdın boyutu.
 Ekran Boyutu
 Akademik olarak ve iş ortamında en çok kullanılan ekranlar 14- 17 inch’ lik olanlardır ve bu
nispeten küçük olan ekranlar 640X480 veya 1024x780 nokta ekran çözünürlüğüne
sahiptir. Bu ölçüleri aşan web grafiklerini görebilmek için kullanıcılar ekrandaki görüntüyü
aşağı ve yana kaydırmak zorunda kalacaklardır.
Bir Sayfa Hazırlanırken Dikkat Edilecekler
 Sayfanın Yazdırılabilirliliği
 En küçük ekranlarda bile görülebilen grafikler bazen yazdırılma sırasında standard A-4
sayfasını aşmaktadırlar. Özellikle uzun metinler halinde hazırlanan web sayfalarının
yazdırılabilirliliğine çok dikkat edilmelidir. Birçok okuyucu ekrandan okumak yerine bu
sayfaları yazdırmayı tercih eder ve sayfalar fazla geniş hazırlanmış ise artan kelimeler
yazdırılamayacaktır.
 Browser Yazılımlarına Dikkat
 Dünya çapında en çok kullanılan browser yazılımları Microsoft Internet Explorer ve
Netscape Communicator yazılımlarıdır. Sitenizi oluştururken mutlaka ve mutlaka her
ikisinde de test edin. Mümkünse bu testi sabit diskinizde değil siteniz server bilgisayarına
yüklendikten sonra ağ üzerinden yapın.
Bir Sayfa Hazırlanırken Dikkat Edilecekler
 Sütunlar
 Bir gazete veya dergi satın aldığınızda yazıların belirli sütunlar halinde yerleştirildiğini
görürsünüz. Asla ve asla yazılar dümdüz bir sıra halinde yazılmaz. Bunun amacı yazıların
daha kolay okunabilir hale getirmek. insan gözü ancak 5 veya 6 kelimelik sütunları
problemsiz olarak takip edebilir. Daha uzun yazları okurken, özellikle bir alt satıra geçerken
yazının hakimiyeti kaybedilebilir ve zamanla göz yorulur. Bunun için sayfalarınıza metinler
yerleştirirken mümkün olduğunca daha ince sütunlar kullanmaya çalışın. Böylece daha hoş
görünümlü bir sayfa elde edersiniz. Aynı zamanda ziyarete gelenler sayfaları daha rahat
okuyabilirler
 Paragraflar
 Uzun yazıları paragraflara ayırmak, onları çekici hale getirmenin bir yolu. Paragrafsız uzun
yazılar, hem görünüm açısından kötü olur hem de okuyucu yazıyı takip etmekte zorlanır.
Paragraflar ayrıca değişik konuları birbirinden ayırmak içinde iyi bir yöntemdir
Bir Sayfa Hazırlanırken Dikkat Edilecekler
 Klişe Görüntüler
 Web üzerindeki binlerce URL artık birbirinin kopyası haline geldi. Aynı zemin desenleri,
butonlar, javascriptler vs. her sayfanın birbirine benzemesine sebep oluyor. Öncelikle
kendinize özgü bir şeyler yapmalısınız. Eğer bir sayfada butonların yerleşimini
beğendiyseniz ve bunu kullanmak istiyorsanız en azından butonlar oldukça farklı bir
şekilde kendiniz dizayn etmeye çalışın.
 Çalışma Ortamı
 Bilgisayarınızla çalışırken hangi editörü kullanıyor olursanız olun birkaç yardımcı programa
ihtiyaç duyacaksınız. Bu programların kısa yollarını kolay ulaşabileceğiniz yerlerde
bulunsun.