HTML Site

http://www.bilgisayardershanesi.com/K64-html.
html
img Etiketi
Sayfamza resim yerletirmek iin kullanlan etikettir. Etiketin kullanmna gemeden nce Internet zerinde
kullanlan resim dosyas biemleri zerinde durmak istiyorum. Internet zerinde en ok kullanlan resim dosyas
biemleri GIF, JPG ve PNGdir. Bu biemlerin seilmesindeki ama sayfann yklenmesini kolaylatrmaktr. Windows
ortamnda en ok kullanlan resim format olan BMPlerin web zerinde kullanlmamasnn en byk sebebi, iyi resim
kalitelerine karn bunun bir bedeli olarak boyutlarnn ok byk olmasdr. Kullanlan biemin kendine has baz
zellikleri vardr.
Girilecek Kod Grevi
Kullanacamz resim dosyasnn tam yolunu yazarak,
src = resim_dosyas hangi resmin kullanlacan belirtiriz.
Resmin genilii burada tanmlanr. Byk bir resminiz

varsagenilik deerini 100% vererek resmin web
istemci geniliine dinamik uydurulmasn
width = genilik salayabilirsiniz.
height = ykseklik Resmin ykseklii burada tanmlanr.
Resmimizi eer metin iinde kullanyorsak metne olan
vspace = dey_aralk dikey uzakl.
Resmimizi eer metin iinde kullanyorsak metne olan
hspace = yatay_aralk yatay uzakl.
Resmin zerinde fare ile bir sre beklendiinde kan
alt = metin aklayc bilgi burada tanmlanr.
Resmin dnda ereve izgisi olacaksa 1,
border = deer olmayacaksa 0 deeri kullanlr..
<img src=./resimler/banner.jpg width=250 height=85 alt=Bilgisayar Topluluu>
Yukardaki satr bulunduumuz dizinin bir stnde bulunan resimler dizinindeki banner.jpg dosyasn
belirtilen ller dorultusunda ekrana basar. (Resmin boyutlarn belirtmek zorunlu deildir!). Alt kodu ile tanml
ksm da resmin zerinde belli bir sre beklendiinde Bilgisayar Topluluu yazsnn belirmesini salar.
html head title etiketleri
HTML Etiketi
Html kodlarnn yorum araln balatmak iin bu etiketi kullanrz. Sayfamzn head ve body blmleri bu etiketin
yorum aralnda tanmldr.
1 <html>
2 <head>... head etiketinin ierii ....</head>
3 <body>
4 ....
5 body etiketinin ierii
6 ....
7 </body>
8 </html>
Birinci satrda <html> etiketi ile HTML sayfamza balyoruz. Daha sonra <head> ve <body> etiketleri <html> etiketi
ierisinde tanmlanp ierikleri yazlyor. En son olarak da </html> etiketi ile HTML sayfamz bitiriyoruz.
Head Etiketi
Yorum alannda sayfamz hakknda bilgilerin bulunduu bir etikettir. rnein sayfamzn balk bilgisinin bulunduu
TITLE etiketi ya da arama motorlarna bilgi salamak iin oluturulan META etiketi bu etiketin yorum alannda
tanmlanr.
<html>
<head>
<title>.....</title>
</head>
<body>
....
body etiketinin ierii
....
</body>
</html>
Yorum alannda kullanlabilecek etiketler: SCRIPT, STYLE, META, LINK, OBJECT, TITLE, BASE
Title Etiketi
Sayfamzn balk bilgisi bu etiket altnda yer alr. Bu etiket head etiketi iinde kullanlmak zorundadr.
<head>
<title>lk HTML denemem</title>
</head>
Gibi bir kod paras istemcimizin balk ubuunda aadaki gibi bir grnm oluturacaktr. Bu etiket ile body
etiketinde olduu gibi renk seenekleri kullanlamaz.
body etiketi
HTML dosyamz iindeki en geni ierikli etiket budur. Ziyaretiye grnen herey bu etiketin yorum alannda
tanmlanr. Ayrca bu etiket iinde kullanlan bileenlerle de sayfamzn baz temel zelliklerini belirtebiliriz.
Body Etiketinin Bileenleri

Girilecek Kod Grevi
text = renk Sayfanzdaki yazlarn rengine renk ile belirtilen deeri verir.
link = renk Sayfanzdaki balarn rengine renk ile belirtilen deeri verir.
Sayfanzdaki ziyaret edilmi balarn rengine renk ile belirtilen
vlink = renk deeri verir.
alink = renk Sayfanzdaki aktif balarn rengine renk ile belirtilen deeri verir.
bgcolor = renk Sayfanzn arka plan rengine renk ile tanml deeri verir.
background = Eer arka planda sade bir renk deil de bir resim kullanmak
resim_dosyas istiyorsanz, resim_dosyas kullanacanz resmin adn temsil eder.
Sayfamzda kullanacamz bileenlerin istemci penceresinin st
topmargin = deer kenarna olan uzakln belirler.
Sayfamzda kullanacamz bileenlerin istemci penceresinin sol
leftmargin = deer kenarna olan uzakln belirler.
rightmargin = Sayfamzda kullanacamz bileenlerin istemci penceresinin sa
deer kenarna olan uzakln belirler.
onload = betik Sayfa yklenirken altrlacak javascript betiini belirler.
onunload = betik Baka bir sayfaya geerken altrlacak javascript betiini belirler.
Yukardaki tabloda kullandm renk deeri HTML iinde kullanlan renk kodlarn temsil etmektedir. Alt
basamaktan oluan bu renk kodlar ana renkler olan mavi, sar ve krmznn kullanlan renkteki tonuna gre onaltlk
tabanda saylarla istediimiz rengi elde edebiliriz.

Renk Kodlarnn Yaps
Krmz Yeil Mavi

00FF00FF00FF
2. Satrda ifade ettiim aralklara deiik deerler (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) vererek rengi oluturmamz
mmkndr. Kod kullanmann yan sra renkleri dorudan ngilizce adlarn yazarak da kullanabiliriz. rnein beyazn
kodu olan #FFFFFF yerine white yazmamzda sonucu deitirmeyecektir.
Baz Renkler ve Kodlar
Renk Ad Kodu
black (siyah) #000000
maroon (k.krmz)#800000
green (k.yeil) #008000
navy (lcivert) #000080
purple (k.mor) #800080
teal (k.trkuaz) #008080
oliver (hki) #808000
gray (gri) #808080
Dikkat ederseniz her renk kodu bir diyez (#) iareti ile balyor ve daha sonra alt basamaktan oluan bir blm
geliyor. Bu alt basamak iinde F yada f bulunduu basamaktaki rengin tam olarak kullanlmasn ve sfr (0) ise o
basamaktaki rengin hi kullanlmamasn salamak iin kullanlr. Yine html kodlarnda olduu gibi renk kodlarnda da
byk-kk harf ayrm yoktur. Yani #FFFFFFve #ffffff ayn rengi yani beyaz temsil eder.
<body text="#000000" bgcolor="#FFFFFF" link="#808080" vlink="#eaeaea" alink="#000000"> <body
text="#000000" background="../resimler/arkafon.gif"> <body bgcolor="#334455" text=#ffffff" topmargin="0">
Yukardaki birinci kod satr sayfamzn arka plan rengini beyaz, yazlar siyah, balar ve ziyaret edilmi balar
gri ve etkin balar da siyah yapmak iin kullanlr.
center etiketi
Kendi yorum aralnda bulunan tm etiketlerin ekran ktlarn browser penceresine ekran ortalayacak ekilde basar.
<center>
....
Buras etiketin yorum aral
.....
</center>
...
Buras center etiketinin yorum aralnn dnda
Normal artlarda HTML sola dayal olarak kt verecektir.
hx Balk Etiketleri
Bu etiketler basit olarak bir balk kullanmak istediimiz zaman, bal yazmak iin kullanlan etikettir. Etiketin
kullanmnda Hx ifadesindeki x 1 ile 6 arasnda deerler alabilen bir tamsaydr. Bu etiket ile ekrana baslabilecek
en byk boyutlu yaz <H1> etiketi ile, en kk boyutlu yaz <H6> etiketi ile baslr.
Bu etiket ile birlikte bir nceki etiket olan <p> etiketindeki gibi drt yer belirleme kodu kullanlabilir. Etiketin kullanm
<h1 align="center">Bu benim en byk balm!</h1>eklindedir. Etiketin yorum aralndaki metin balk olarak
ekrana baslr.
<h1 align="center" style="color:black;">Bu balklar gittike klecek!!!</h1> <h2 align="center"
style="color:blue;">Bu balklar gittike klecek!!!</h2> <h3 align="center" style="color:navy;">Bu balklar
gittike klecek!!!</h3> <h4 align="center" style="color:green;">Bu balklar gittike klecek!!!</h4> <h5
align="center" style="color:maroon;">Bu balklar gittike klecek!!!</h5> <h6 align="center"
style="color:purple;">Bu balklar gittike klecek!!!</h6>
Yukardaki rnein istemci kts aadakine benzer olacaktr.
Bu balklar gittike klecek!!!
meta Etiketi
HTML dosyasndaki head etiketinin yorum aralnda tanmlanan bu etiket web istemcisine ve arama motorlarna
sayfamz hakknda bilgi verir. Bu etiketi ile birlikte kullanlan yardmc kodlarn aklamas ilk bakta size biraz
karmak gelebilir. Her kodun kendisi ile birlikte tanmlanan yardmc kodlar da olduu iin bu etiket ile birlikte
kullanlan kodlarn listesini ncekilerden daha farkl bir ekilde vermeyi uygun grdm.
Meta etiketi ana kodlar
Girilecek Kod Grevi

name = veritr Bu blmde author, description ve keywords zellikleri tanmlanr.
http-equiv = veritr Bu blmde refresh, expires, content ve content-style-type zellikleri tanmlanr.
size = boyut Yazmzn boyu belirlenir.
Yukardaki tabloda verdiim kodlar ile birlikte tanmlanan yardmc kodlar tablo eklinde vermek yerine rnek eklinde
vermenin daha faydal olacan dndm.
<meta name=author content=Linux Belgelendirme alma Grubu>
<meta name=description content=Linux Belgelendirme alma Grubu Web Sayfas>

<meta name=keywords content=linux unix bsd openbsd freebsd programlama ozguryazlm zgryazlm sunucu
internet>
Yukardaki birinci satr (author), sayfay hazrlayanlarn kim olduu hakknda ksa bilgiler verir.
kinci satr (description), sitenin ne hakknda olduuna dair ksa bir bilgi verir.
Sonuncu satr ise (keywords), arama motorlarna bilgi salamak iin kullanlr. Yani siz bir arama motoruna girip
arama ksmna linux, unix, bsd, openbsd, freebsd, programlama, zgryazlm, sunucu, internet szcklerinden birisini
yazarsanz bu site adresi de grntlenecek adresler arasnda olacaktr.
<meta http-equiv=refresh content=5; URL=http://www.belgeler.org/>
<meta http-equiv=expires content=Wed, 25 Feb 2002 12:00:00 GMT>
<meta http-equiv=content content-type=text/html; charset=iso-8859-9>
<meta http-equiv=content-style-type content=text/css>

Yukardaki birinci kod satr (refresh) sayfamz aldktan 5 saniye sonra belirtilen adresi otomatik olarak aacaktr.
kinci kod satr (expires) GMT saat sistemine gre belirtilen saat ve tarihte sayfann dosyas silinecektir.
nc kod satr (content) taraycya html dosyamzda kullandmz karakter kodlamasnn ISO-8859-9 olduunu
belirtir.
Drdnc ve son satr (content-type-style) belgemizde kullanlan CSS dosyamzn bir metin dosyas olduunu belirtir.
Daha ncede belirttiim gibi meta etiketi ile tanmlanan bilgiler kullancya grntlenmez. Bu bilgiler genellikle
taraycya ve arama motorlarna bilgi salamak iin kullanlr.
Font Etiketi
HTML dosyas iinde yazdmz yazlarn ekrana nasl bir kt vereceini bu etiket ile belirleriz. Uyumlu yaz tipleri ve
renkler ile sayfanza gzel bir grnm kazandrabilirsiniz. Bu etiketin kullanmna alternatif olarak sayfanzda CSS de
kullanabilirsiniz. CSS kullanm sayesinde fazla kod yazmndan da kurtulmu olursunuz. Etiket ile birlikte yaz tipi, renk
ve boyut belirtmek zere kod kullanlr.
Font etiketi kodlar
Girilecek Kod Grevi

face = yaztipi Kullanlacak yaz tipi belirlenir.
color = renk Yazacamz yaznn rengi belirlenir.
size = boyut Yazmzn boyu belirlenir.
<p><font face="tahoma" size="3" color="maroon">
<b>Burada bir yaz var.</b></font></p>


<p style="color:maroon;font-family:tahoma;font-weight:bold;font-size:125%">
Burada bir yaz var.</p>
<p>Burada bir yaz var.</p>

a Etiketi
Bu etiketi bir adres belirterek baka sitelere, sayfalara ya da ayn sayfann farkl blmlerine ba vermek veya eposta
adreslerini yazmak iin kullanrz. Web istemciler genellikle ntanml olarak balar alt izili ve mavi olarak grntler.
<a> etiketinin bir yorum aral vardr ve eitli tanmlayc kodlar da etiket ile birlikte kullanlabilir.
Ba vermek iin kullanlan kodlar
Girilecek Kod Grevi

href = URL Yorum alanndaki bileene tklandnda yorumlanacak adres.
target = hedef Yorum alanndaki bileene tklandnda sayfann alaca yer belirtilir.
name = isim Sayfa ii balantlarda baka bir ban hedefi olacak yeri belirtmek iin kullanlr.
type = mime_tr Hedefin ieriini belirtmek iin kullanlr.
<a href=http://www.belgeler.org>Linux Belgelendirme alma Grubu</a>
<a href="http://www.slackware.com" target="new">Slackware Linux</a>
<a href="mailto:fni18444@gantep.edu.tr">Fehmi Noyan S</a>

lkinden farkl olarak ikinci kodda target zelliini kullandm. Target zelliine new deerinin verilmesi ile alacak
yeni site yeni bir istemci penceresinde alr.
<a href=http://www.belgeler.org><img src="../images/belgeler-logo.png" border="1"></a>
acronym Etiketi
Ksaltmalar iin kullanlr.
<acronym title="Linux Kullanclar Dernei">LKD</acronym>

Fare, LKD zerine getirildiinde ksaltmann alm balon iinde grntlenecektir.
Tanmlama Listeleri dl, dt, dd
Terimler ve aklamalarn ieren listeler oluturmakta kullanlrlar. Bir uygulamann komut satr seeneklerini
listelemek ve altlarnda aklamalarn vermek iin kullanldr.
<dt> ve <dd> etiketleri <dl> etiketinin yorum aral iinde kullanlr. <dt> etiketi terim, <dd> etiketi ise aklamas
iin kullanlr. Bir rnekle kullanm daha kolay anlalacaktr.
<dl>
<dt>align = "left"</dt>
<dd>Paragraf sola dayal olarak yazar.</dd>
<dt>align = "right"</dt>
<dd>Paragraf saa dayal olarak yazar.</dd>
</dl>
Yukardaki kodun istemcinizdeki grnts aadakine benzer olacaktr.
align = left
Paragraf sola dayal olarak yazar.
align = right
Paragraf saa dayal olarak yazar.
sub ve sup Etiketleri
Forml ve benzeri metinleri yazarken kullanlr.
H<sub>2</sub>SO<sub>4</sub> <br> E = mc<sup>2</sup>H2SO4 E = mc2
Favicon Nasl Yaplr?
Adres ubuunda site adresinin solunda yer alan kk simgeye favicon denir. favorite ve icon kelimelerinin
birleiminden olumutur. Sitenizin btn karakteristik zelliklerini bir faviconla anlatabilirsiniz. Biraz HTML bilginiz
varsa favicon oluturmak sizin iin basit olacaktr.
lk aamada bir adet ikona ihtiyacmz var. Bu ikonu hazr bulabileceimiz siteler olduu gibi kendimiz tek tek
ileyerek yapabileceimiz siteler de mevcut. Eer vakit kaybetmek istemiyorsak imdilik hazr ikonlardan birini
seebiliriz. Bu sitede istediiniz kadar favicon mevcut. Hibirini beenmesseniz kendiniz de oluturabiliyorsunuz. Sol
taraftaki top rated favicons seeneine tklayarak bir tane ikonu bilgisayarmza indiriyoruz.
RAR dosyasndan kardktan sonraki aama ikonumuzu internete upload etme ksmdr. Bu sitede yaptktan sonra
aadaki kodlar sitenizin </head> tagndan nce ekleyiniz:
<link rel="shortcut icon" href="http://img.frmtr.com/favicon.ico">
Siteye HTM ile Video Ekleme Kodu
<embed src=dosyayolu.wmv width=" height="></embed>
MPEG
<embed src="http://site/gallery/deneme.MPG" border="0" width="240" height="240" type="application/x-

mplayer2"></embed><br />
WAV :
<embed src="http://site/gallery/deneme.wav" type="audio/wav" hidden="true" autostart="true" loop="true"

height="1" width="12"></embed>
AVI :
<embed src="dosya.AVI" border="0" width="240" height="240" type="application/x-mplayer2"></embed>

Dosya ad ksm sizin dosyanz ile deitirilecektir. Genilik ykseklik ayarlamas yaplabilir. Farkl browserlarda sknt
yaanabilir..
MP3
< embed src=mzik dosyas.mp3 hidden=true autostart=true loop=true >
src : Film ya da mzik dosyasnn konumunu (adresini) belirtmek iin kullanlr.
hidden : Mediaplayer eklentisinin grnrln deitirmek iin kullanlr. true yaparsanz eklenti grnmez false
yaparsanz grnr.
autostart : True deerini verirseniz mzik dosyas sayfa yklenir yklenmez otomatik olarak almaya balar.
loop : Mziin ka kez alnacan belirtmek iin kullanlr. -1 ya da true deerini verirseniz srekli alar. false
derseniz bir kez alar ve durur.
HTML Listeleme Etiketine Grsel Eklemek
Sitelerimizde gerek menlerde, gerekse yazlarmz iinde bazen listeleme yapma ihtiyac duyarz. Tabi listeleri
tasarmmza uygun ekilde gzelletirmek de isteriz. te bu noktada en ok kullanlan yntem liste etiketine bir
arkaplan resmi atamak ve bu resmi en sola dayamaktr. Not olarak unu da belirtmeliyim ki bu yazmda sral olmayan
listelerden (ul) bahsediyorum. imdi basit iki rnekle konuyu inceleyelim.
HTML Kodumuz
Aadaki kodumuzda her eye balant (link) verdim ki zerine gelindiinde grselin deiimesinin de nasl
yapldn grelim.
<div id=yakuter>
<ul>
<li><a href=anasayfa.html title=Anasayfa>Anasayfa</a></li>
<li><a href=hakkimizda.html title=Hakkmzda>Hakkimizda</a></li>
<li><a href=arsiv.html title=Ariv>Ariv</a></li>
<li><a href=yardim.html title=Yardm>Yardm</a></li>
<li><a href=iletisim.html title=letiim>letiim</a></li>
</ul>
</div>
Not 1: Eer amacnz ieriinde balant olan listeleme etiketlerini biimlendirmekse 2. yntemi kullanmanz tavsiye
ederim nk 1. yntemde kullanlan li:hover zellii IE 6da desteklenmeyen bir husus. Genel olarak ise tavsiyem 1.
Yntemi kullanmanzdan yanadr nk iinde balant (link) olmayan etiketleri de kapsar.
Not 2: Grsel olarak iki farkl nesne kullandm (ikon.gif, ikon2.gi). Dilerseniz bu iki grseli birletirip CSS Sprite Teknii
ile de ayn uygulamay gerekletirebilirsiniz.
CSS Kodumuz 1. Yntem li Etiketini Biimlendirmek

Aadaki kod ile yapm olduumuz olay listeleme etiketinin standart liste tipini iptal edip (list-style-type:none;),
istediimiz bir arkaplan resmi atamak ve bunu en sola dayamak.
#yakuter ul li {
list-style-type:none;
background:url(../resimler/ikon.gif) left center no-repeat;
padding:5px 0px 5px 25px;
#yakuter ul li:hover {
background:url(../resimler/ikon2.gif) left center no-repeat ;
#yakuter ul li a {
text-decoration:none;color: #006400;
}
#yakuter ul li a:hover {
color:#666666;
CSS Kodumuz 2. Yntem a (link) Etiketini Biimlendirmek

Aadaki kodun ilevi ise li etiketini deil, li etiketi iinde bulunan a etiketini biimlendirmek. Bylece IE 6da da
fare ile zerine gelindiinde resmi deien bir liste sahibi oluyoruz.
#yakuter ul li {
list-style-type:none;
#yakuter ul li a {
display:block;
background:url(../resimler/ikon.gif) left center no-repeat ;
padding:5px 0px 5px 25px;
text-decoration:none;
color: #006400;
#yakuter ul li a:hover {
background:url(../resimler/ikon2.gif) left center no-repeat ;
color:#666666;
Sonu
Aslnda listeleme etiketlerine resim eklemek iin list-style-image zellii de kullanlabilir fakat bu zellii dilediimiz
gibi zelletiremediimiz iin arkaplana resim atama teknii daha fazla kullanlyor.
Umarm bu basit ama bir o kadar da etkili yntem ile siteleriniz daha da gzelleir. Sayglar, sevgiler
Site saya ve istatistik servisleri
Site saya servisleri; hem sitenizin ziyareti bakmndan ne durumda olduunu gsterme, hem de arama
motorlarndan gelen ziyaretilerin hangi anahtar kelimeleri kullandn renme konularnda ve dolaysyla seo
almalarnda size yardmc olur.
Clicky
Clicky, benim de kullandm cretsiz bir servis. Yalnz ilk kullanma sunulduunda tamamen cretsiz olan clicky, daha
sonralar yalnzca 30 gnlk istatistik bilgilerini ve temel zelliklerini cretsiz hale getirdi. Ancak yine de
kiiselletirilebilir ana sayfas ve sade yapsyla hala benim favorim. Bu arada dilerseniz servisi trkeletirme
almalarna da katkda bulunabilirsiniz.
Google analytics
Site analiz aralarnn sanrm en popler olan. Google, dier servisler tarafndan sunulan birok cretli istatistik tipini
bu arala cretsiz kullanma sunuyor. Yalnz sitenizin o gn iin ne durumda olduunu ancak ertesi gn
renebilmeniz (son kullandmda yleydi, gelitirme var m bilemiyorum) ve boyutunun biraz fazla oluu eksileri
diye dnyorum.
Reinvigorate
Anlk ziyareti takibi ve ziyaretilerin sklkla tklad blgeleri (heat map) gstermesi ile ne kyor.
Piwik
Yine gzel bir uygulama. ancak bu servisi kullanabilmeniz iin kendi sunucunuzun olmas gerekiyor. Yani
blogger,wordpress gibi cretsiz blog ortamlarnda bir site sahibiyseniz maalesef bu aratan faydalanamyorsunuz.
Yahoo! web analytics
Yahoonun sunduu, kendinize gre dzenleme yapabileceiniz, cretsiz site analiz arac.
WordPress.com stats
Eer cretsiz bir wordpress bloguna sahipseniz yine wordpress tarafndan sunulan bu eklentiyi istatistikleriniz iin
kullanabilirsiniz.
Woopra
Detayl raporlara ihtiya duyuyorsanz kullanabileceiniz bir ara.
Firestats
Eer sadelikten yanaysanz iinize yarayabilir. nk bu saya grafikler, tablolar iermiyor. Genellikle wordpress
altyapl sitelerin eklenti olarak kulland servis iin yine kendi sunucunuza ihtiyacnz var.
Goingup
Ajax destekli ynetim panelini dilediiniz gibi dzenleyebiliyorsunuz. Ayrca pagerank, alexa sras gibi ek zellikler de
sayala birlikte geliyor.
Mint
zellikle tasarmyla olduka houma giden bir servis. ancak maalesef 30$lk bir cret gerektiyor.
Blog tracker
Adnn bu ekilde olmas blogcular hedef almasndan sanrm ama hemen her sitede kullanlabilir. Biraz demode bir
grnme sahip ama kk boyutu bir arts.
Web tasarmclar iin faydal 5 ara
Flowplayer
Web sitenizde bulunan videolar kullanl ve cretsiz bir flash arayz olan flowplayer ile yaynlayabilirsiniz. flv, swf,
mp3, mp4, h.264 video, jpg, png gibi formatlar destekliyor. Ayrca video ieriine reklam yerletirebilme, alma
listeleri oluturabilme, tam ekran gibi birok zellii bulunmakta. cretsiz srmn kullandnz takdirde sadece tam
ekran modunda sa alt kede flowplayer logosu olmasnn dnda herhangi bir eksii olmayan bu muhteem arayz,
gpl lisansna sahip ve olduka gelimi.
fancybox
Fancybox, web sitenizde kullanabileceiniz gelimi bir resim grntleme aracdr. Web sitenizdeki resimleri tooltip
eklinde byk veya orjinal halini ziyaretilerinize gsteren bu uygulamay isterseniz galeri eklinde de
kullanabilirsiniz. Swf, iframe gibi destee de sahip olan uygulama, olduka kolay bir kullanma sahip. Wordpress iin
yaplm bir eklentisi de bulunmakta.
Firebug lite
Web sitenize yerletireceiniz muhteem uygulama ile web sayfanzdaki kodlar yeniden dzenleyip hatalar
ayklayabilirsiniz. Btn tarayclarla uyumlu olan firebug liteile html, css, js kodlarn tamamen dzenleyebilirsiniz.
web sayfasnn altnda kacak olan dzenleme editr ile rahata dzenleme yapmak mmkn. Ayrca konsolun html,
script, css, dom gibi sekmeleri sayesinde ilemlerinizi kartrmazsnz. Google chrome iin bir eklentisi de bulunmakta.
Ultimate ie6 cheatsheet
Web tasarmclar internet explorer 6dan nefret etseler ve microsoft dahi gelitirilmesini brakm olsa bile hala ie6
kullanan olduka fazla kii var. Bu yzden web sitelerimizi hazrlarken ieyi de iin iine katmal, en azndan bu tarayc
iin basit sayfalar hazrlamalyz. Bu yzden yazlan bu muhteem makeleyi kullanarak web sitelerinizi ie6 iin uyumlu
hale getirebilirsiniz. Hata zmleri, alternatif yntemler ve birok ey bulunan ie yarayan bir kaynak.
Zen coding
Html, css ve js kodlarn yazarken trnak iareti, eittir, byktr ve kktr iaretleri ile olduka fazla zaman
harcadmz dnlerek hazrlanan zen coding, mac ve windows tabanl bir tasarm arac. Kk bir forml yaps ile
alan bu uygulama ile normalden ok daha hzl sitenizi biimlendireceksiniz. Ayrca notepad++ gibi uygulamalar iin
de eklentisi bulunmakta.
Alternatif slayt eklentisi: sudo slider jquery plugin
Html ile hazrlayacanz her trl ieriinizi web sitenizin ziyaretilerine slayt gsterimi olarak sunmanz salayan
sudo slider jquery plugin, farkl sunum yntemleri ve zengin zellikleri ile hali hazrda kullanm olduunuz slayt
gsterimleriniz iin kullanl bir alternatif olabilir.
eriini ajax sihirbazl ile aktrmadan ykleyensudo slider, ie6+, ff, chrome, opera, safari tarayclarn tam olarak
desteklemekte ve slayt geileri iin efektler uygulamakta. Ayrca tek bir sayfada birden fazla slaytn almasna
olanak tanmann yannda, bu tr eklentilerin demirba konumunda bulunan malum butonlar da (prev-next/nceki-
sonraki) desteklemekte.
Sudo slider eklentisine hemen buradan ulaabilir ve demolarn deneyebilirsiniz.

HTML Site

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Site

Uploaded by

Copyright:

Available Formats

http://www.bilgisayardershanesi.com/K64-html.

Girilecek Kod Grevi

Kullanacamz resim dosyasnn tam yolunu yazarak,

src = resim_dosyas hangi resmin kullanlacan belirtiriz.

Resmin genilii burada tanmlanr. Byk bir resminiz

istemci geniliine dinamik uydurulmasn

width = genilik salayabilirsiniz.

height = ykseklik Resmin ykseklii burada tanmlanr.

Resmimizi eer metin iinde kullanyorsak metne olan

vspace = dey_aralk dikey uzakl.

Resmimizi eer metin iinde kullanyorsak metne olan

hspace = yatay_aralk yatay uzakl.

Resmin zerinde fare ile bir sre beklendiinde kan

alt = metin aklayc bilgi burada tanmlanr.

Resmin dnda ereve izgisi olacaksa 1,

border = deer olmayacaksa 0 deeri kullanlr..

<img src=./resimler/banner.jpg width=250 height=85 alt=Bilgisayar Topluluu>

html head title etiketleri

Body Etiketinin Bileenleri

tabanda saylarla istediimiz rengi elde edebiliriz.

Krmz Yeil Mavi

Baz Renkler ve Kodlar

Yukardaki rnein istemci kts aadakine benzer olacaktr.

Bu balklar gittike klecek!!!

Bu balklar gittike klecek!!!

Bu balklar gittike klecek!!!

Bu balklar gittike klecek!!!

Bu balklar gittike klecek!!!

Bu balklar gittike klecek!!!

Meta etiketi ana kodlar

Girilecek Kod Grevi

<meta name=author content=Linux Belgelendirme alma Grubu>

<meta name=description content=Linux Belgelendirme alma Grubu Web Sayfas>

<meta http-equiv=refresh content=5; URL=http://www.belgeler.org/>

<meta http-equiv=expires content=Wed, 25 Feb 2002 12:00:00 GMT>

<meta http-equiv=content content-type=text/html; charset=iso-8859-9>

<meta http-equiv=content-style-type content=text/css>

Font etiketi kodlar

Girilecek Kod Grevi

<p><font face="tahoma" size="4" color="maroon">

<p><font face="tahoma" size="5" color="maroon">

<p>Burada bir yaz var.</p>

Ba vermek iin kullanlan kodlar

Girilecek Kod Grevi

<a href="http://www.slackware.com" target="new">Slackware Linux</a>

<a href="mailto:fni18444@gantep.edu.tr">Fehmi Noyan S</a>

<a href=http://www.belgeler.org><img src="../images/belgeler-logo.png" border="1"></a>

Ksaltmalar iin kullanlr.

<acronym title="Linux Kullanclar Dernei">LKD</acronym>

Tanmlama Listeleri dl, dt, dd

sub ve sup Etiketleri

Forml ve benzeri metinleri yazarken kullanlr.

H<sub>2</sub>SO<sub>4</sub> <br> E = mc<sup>2</sup>H2SO4 E = mc2

Favicon Nasl Yaplr?

<link rel="shortcut icon" href="http://img.frmtr.com/favicon.ico">

Siteye HTM ile Video Ekleme Kodu

<embed src=dosyayolu.wmv width=" height="></embed>

<embed src="http://site/gallery/deneme.MPG" border="0" width="240" height="240" type="application/x-

<embed src="http://site/gallery/deneme.wav" type="audio/wav" hidden="true" autostart="true" loop="true"

<embed src="dosya.AVI" border="0" width="240" height="240" type="application/x-mplayer2"></embed>

< embed src=mzik dosyas.mp3 hidden=true autostart=true loop=true >

src : Film ya da mzik dosyasnn konumunu (adresini) belirtmek iin kullanlr.

HTML Listeleme Etiketine Grsel Eklemek