Data WebMaster
& KONULAR &
  HTML İle Site Yapımı Resimli Anlatım
 
HTML İle Site Yapımı Resimli Anlatım
 
Bütün web sayfaları şu şekilde başlayacaktır :

<html>
</html>

Şimdi sayfaya bir giriş olarak <head> ve </head> komutlarını ekliyoruz, sayfamız bu durumda şu şekle geliyor :

<html>
<head>
</head>
Bu benim ilk sayfa denemem
</html>

Bu durumda sayfamızın görünen şekli de şu şekilde olacaktır :



Şimdi de sayfamıza <title></title> komutları ile bir başlık ve <body></body> komutları ile gövde ekleyelim, kodumuz şu şekilde göründüğü zaman...

<html>
<head>
<title>İlk sayfamın ilk başlığı</title>
</head>
<body>Şuraya da bi yazı yazdık mı herşey tamamdır !</body>
</html>

...sayfamızın görünen şekli de şu olacaktır :



Paragraf yapmak için de <p> komutu kullanılıyor, sayfamıza bir de paragraf katıp üçüncü bir satır eklersek, kodumuz şu şekle geliyor...

<html>
<head>
<title> İlk sayfamın ilk başlığı</title>
</head>
<body>Şuraya da bi yazı yazdık mı herşey tamamdır !</body>
<p>
Üçüncü satırım da böyle olsun...
</html>

...görüntümüz de bu şekilde :



<b></b> komutları ile bold, <i></i> komutları ile italic, <u></u> komutları ile altı çizili, <tt></tt> komutları ile daktilo yazısı şeklinde, <h1></h1> den <h6></h6> ya kadar çeşitli

boyutlarda

başlıklar atmak mümkündür...hemmen bir kod olayına giriyoruz ve yukardaki tüm komutları kullanarak kodumuzu şu şekilde yazıyoruz :

<html>
<head>
<title>İlk sayfamın ilk başlığı</title>
</head>
<body> Şuraya öncelikle <b>bold</b> sonra <i>italic</i> sonra <u>altı çizili</u> en sonra da <tt>daktilo yazısı</tt> gibi yazılar yazalım
<p>
Arada paragrafımızı da patlattıktan sonra aşağıya da başlıklarımızı koyalım :
<h1>h1 başlığı</h1>
<h2>h2 başlığı</h2>
<h3>h3 başlığı</h3>
<h4>h4 başlığı</h4>
<h5>h5 başlığı</h5>
<h6>h6 başlığı</h6>
</body>
</html>

...görüntümüz de bu şekilde oluyor :



Şimdi sıra geldi sayfamızdan başka sayfalara da ulaşılabilmesi için üstüne basıldığında bizi o sayfalara ulaştıracak bir linkin koyulmasına...link koymak için kullandığımız komutlar ise <a> ve </a>, örnek olarak h3 başlığımıza disney'in ana sayfasına gitmek için bir link koymak istersek kodumuzda da şu şekilde bir değişiklik yapmamız gerekiyor :

<html>
<head>
<title>İlk sayfamın ilk başlığı</title>
</head>
<body>Şuraya öncelikle <b>bold</b> sonra <i>italic</i> sonra <u>altı çizili</u> en sonra da <tt> daktilo yazısı</tt> gibi yazılar yazalım
<p>
Arada paragrafımızı da patlattıktan sonra aşağıya da başlıklarımızı koyalım :
<h1>h1 başlığı</h1>
<h2>h2 başlığı</h2>
<a href="http://www.disney.com"><h3>h3 başlığı</h3></a>
<h4>h4 başlığı</h4>
<h5>h5 başlığı</h5>
<h6>h6 başlığı</h6>
</body>
</html>

Bu değişikliği yaptığımız zaman browser'daki görüntüde, aşağıdaki resimde gözüktüğü gibi, h3 başlığımızın altında bir çizgi oluştuğunu göreceğiz :





Bir de bunlarla beraber <pre> ve </pre> komutları vardir, biraz gırgır komutlar, eğer aşağıdaki kodda olduğu gibi kullanırsak bakın ne işe yarıyorlar :

<html>
<head>
<title>
İlk sayfamın ilk başlığı
</title>
</head>
<body> <h3>
<pre> komutunu kullamazsak yazı normal olarak böyle olacaktır :</h3>
<pre>
komutu olmadan
ne yaparsam yapayım,
amuda da kalksam,
takla da atsam,
yazı burada gözüktüğü
şekilde olacaktır !
<p>
<pre> komutunu kullanırsak ise böyle olacaktır :
<pre>
<pre>
komutu
ile yazarsam
yazı bu sefer
bu şekilde olacaktır !
nasıl komut ama ?
iyi yaw...
:O)
</pre>
</body>
</html>

Bakalım :





Şimdi de <br> komutu ile satır arası vermek ve <hr> komutu ile iki satır arasında çizgi koyma olayını görelim, bu iki komutu diğer komutlar gibi iki kere değil de sadece bir kere kullanmamız yeterli yani </br> ve </hr> diye komutlar yok...örnek kodumuza bir göz atalım :

<html>
<head>
<title>İlk sayfamın ilk başlığı</title>
</head>
<body>
Şimdi ilk satır olarak bunu yazalım
<br><br>
ikinci satırımızı da bir satır boşlukla buraya yazalım
<hr>
Üçüncü satırımızı da ikincisiyle arasına bir çizgi koyarak yazalım...
</body>
</html>

Şimdi görüntümüze bakalım





Diyelim ki numaralı listeler yapmak istiyoruz, ihtiyacımız olan komutlar <ol></ol> ve arasında kullanılmak üzere <li>...mesela ben en çok ilgilendiğim konuları 1'den 5'e sıralamak istiyorum, kodumuza bakıyoruz :

<html>
<head>
<title>Artık ikinci sayfam demenin zamanı geldi de geçiyor bile !!!</title>
</head>
<body>
<h3>En çok ilgilendiğim ilk beş konu</h3>
<ol>
<li>Kuantum Fiziği
<li>F-16'ların hızlanma eğrisi
<li>Kedileri Kısırlaştırma Yöntemleri
<li>İnsan öldürmenin en acı veren tarafları (tez hazırlıyorum :O)
<li>İnsomnizapaenmansfanxtansyon
</ol>
</body>
</html>

Bir de görüntümüze bakalım :




Belki ben numaralamak istemiyorum, ben bu konuların hepsiyle eşit derecede ilgileniyorum, başka bir seçeneğim yok mu var, numara yerine kuüçük, yuvarlak, sevimli butonlar da kullanabilirim...nasil yapicam <ul> komutu ile...kodumuza bakalim :

<html>
<head>
<title>Artık ikinci sayfam demenin zamanı geldi de geçiyor bile !!!</title>
</head>
<body>
<h3>En çok ilgilendiğim ilk beş konu</h3>
<ul>
<li>Kuantum Fiziği
<li>F-16'ların hızlanma eğrisi
<li>Kedileri Kısırlaştırma Yöntemleri
<li>İnsan öldürmenin en acı veren tarafları (tez hazırlıyorum )
<li>İnsomnizapaenmansfanxtansyon
</ul>
</body>
</html>



İyi de ben belki verdiğim başlıklar altında açıklamalarını da vermek istiyorum...<dl></dl>,<dt> ve <dd> komutları ne güne duruyorlar Kod olayı şöyle :

<html>
<head>
<title>Artık ikinci sayfam demenin zamanı geldi de geçiyor bile !!!</title>
</head>
<body>
<h3>En çok ilgilendiğim ilk beş konu</h3>
<dl>
<dt><b>Kuantum Fiziği</b>
<dd>Var ya inanılmaz çılgın bişii...
<dt><b>F-16'ların hızlanma eğrisi</b>
<dd>Anlatırdım da ne anlıycan
<dt><b>Kedileri Kısırlaştırma Yöntemleri</b>
<dd>Mart ayı tehlikeli ay, lazım bir olay...
<dt><b>İnsan öldürmenin en acı veren tarafları (tez hazırlıyorum :O)</b>
<dd>NI HO HA HA HA HO HO HO HA HA HAAAAA !!!
<dt><b>İnsomnizapaenmansfanxtansyon</b>
<dd>Hö ?
</dl>
</body>
</html>

Görüntü olayı da böyle



Daha önce kendi yaptığımız sayfadan başka bir sayfaya link koymayı öğrenmiştik, yine bir link yaratarak kendi sayfamızın içinde de oradan oraya zıplayabiliriz, örnek kodumuzu basit olarak şöyle yazabiliriz :

<html>
<head>
<title>Artık ikinci sayfam demenin zamanı geldi de geçiyor bile !!!</title>
</head>
<body>
<a href="#ilgim"><h3>En çok ilgilendiğim ilk beş konuya bu link'e basınca erişebileceksiniz !</h3></a>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<a name="ilgim"><h3>En çok ilgilendiğim ilk beş konuya ulaştınız !</h3></a>
</body>
</html>

Bu konuyla ilgili herhangi bir resim koymuyorum, yukarıdaki kodu kopyalayıp denemeniz gerekiyor...

Sayfamızı (hesapta) yaptık bitirdik, merak ediyoruz insanlar ne düşünecek konuyla ilgili diye...yapacağımız şey sayfamızın altlarına bir yere üstüne basınca bize mail atmalarını sağlayacak bir link koymak...şu aşağıdaki kodu kopyalayıp daha sonra içine kendi e-posta adresinizi benim adresimle yer değiştirirseniz sonraaa sayfanızın en altına yapıştırıp bir browser'dan bakıp üstüne de basarsanız, kendinize bir ileti göndermiş olursunuz hehe sonra da aşağıdaki yere basar (sakın ayağınla basma valla ben bişi yapmadım) bir ileti de ekranın arkasındaki bana gönderirsin

Sıra geldi sayfamıza biraz renk katmaya...öncelikle bir resim koyalım, hem de yeni sayfa yapıyoruz ya derdimizi anlatacak bir resim, şu şekilde :

<html>
<head>
<title>Üçüncü sayfam hem de resimli...</title>
</head>
<body>
<img src="http://www.mantikweb.com/gifler/calisiyorum.gif">
</body>
<html>

Bakalım görüntümüz ne şekilde olacak



Yukarıdaki gif hareketlidir (Bir beyaz kedi koşuyorrr çalışan işçinin altından geçiyor ve adamcağız hooppp tepe takla hehe eğer yukarıdaki .gif resmini beğendinse buraya basarak onu görebilirsin...

Tabii ki resmimizin yanına yazılar da yazacağız ama ustunden mi başlasın yoksa ortasından mı kodumuza bakalım :

<html>
<head>
<title>Üçüncü sayfam hem de resimli...</title>
</head>
<body>
<img src="http://www.mantikweb.com/gifler/calisiyorum.gif" align="top">Üstüne Yazdım
<p>
<img src="http://www.mantikweb.com/gifler/calisiyorum.gif" align="middle">Ortasına Yazdım
<p>
<img src="http://www.mantikweb.com/gifler/calisiyorum.gif" align="bottom">Altına Yazdım
</body>
<html>

Şimdi de nasıl gözüktüğüne


Resimlerle ilgili en son olarak üzerlerine basıldığında bir sayfaya gitmelerini istiyorsak nasil link koyabileceğimize ve bu eğer büyük bir resimse o zaman resim yüklenene kadar ve/veya üzerlerinde mouse bekletildiği zaman yazacak olan yazının nasıl yazdırılacağını, bu arada da resmin etrafında istemediğimiz bir renkte çerçevenin olmaması için neler yapıldığını görelim (border ve alt komutları sağolsun) :

<html>
<head>
<title>Üçüncü sayfam hem de resimli...</title>
</head>
<body>
<a href="http://www.disney.com"><img src="disney_balloon.gif" border="0" alt="ne güzel balon"></a>
</body>
<html>

Bu yazdığımız kod ile sayfa görüntümüz şu şekilde olacaktır, dikkat ederseniz resmin üzerinde sarı bir fon ve çerçevede "ne güzel balon" yazmakta :



Yazdığımız yazılarla yani fontlarla da oynayabiliriz haliyle, bunun için de <font> ve </font> ve bu komutlara da yardımcı ve tanımlayıcı olarak basitçe size (font'un büyüklüğünü belli etmek için), face (font'un karakterini belli etmek için), color (font'un rengini belli etmek için) komutları da kullanılabilir, örnek kodumuz şu şekilde olsun :

<html>
<head>
<title>Üçüncü sayfam hem de resimli...</title>
</head>
<body>
<font size="1" face="arial" color="red">Bu font size 1 oluyor</font>
<br><font size="2" face="arial" color="magenta">Bu font size 2 oluyor</font>
<br><font size="3" face="arial" color="blue">Bu font size 3 oluyor</font>
<br><font size="4" face="arial" color="black">Bu font size 4 oluyor</font>
<br><font size="5" face="arial" color="green">Bu font size 5 oluyor</font>
<br><font size="6" face="arial" color="navy">Bu font size 6 oluyor</font>
<br><font size="7" face="arial" color="teal">Bu font size 7 oluyor</font>
<br>
<br>
<br><hr>
<br><font size="1" face="arial" color="red">Aslında</font>
<font size="2" face="arial" color="magenta">bu</font>
<font size="3" face="arial" color="blue">size'lar</font>
<font size="4" face="arial" color="black">birbirleri</font>
<font size="5" face="arial" color="green">ile</font>
<font size="6" face="arial" color="navy">de</font>
<font size="7" face="arial" color="teal">k</font>
<font size="6" face="arial" color="red">u</font>
<font size="5" face="arial" color="magenta">l</font>
<font size="4" face="arial" color="blue">l</font>
<font size="3" face="arial" color="black">a</font>
<font size="2" face="arial" color="green">n</font>
<font size="1" face="arial" color="navy">ı</font>
<font size="2" face="arial" color="teal">l</font>
<font size="3" face="arial" color="red">a</font>
<font size="2" face="arial" color="magenta">b</font>
<font size="1" face="arial" color="blue">i</font>
<font size="2" face="arial" color="black">l</font>
<font size="3" face="arial" color="green">i</font>
<font size="4" face="arial" color="navy">r</font>
<font size="5" face="arial" color="teal">l</font>
<font size="6" face="arial" color="red">e</font>
<font size="7" face="arial" color="red">r</font>
</body>
<html>

Bu durumda görüntümüz de bu şekilde olacaktır :





Diyelim sayfamızda bir sürü linkler var, bunların renklerine bakarak o link'e daha evvel basıp sitesini ziyaret etmiş olup olmadığımızı anlayabiliriz ancak bunun için öncelikle <body> komutu içerisinde bunların rengini tanımlamamız gerekiyor, aşağıdaki kodu kopyalayıp linklerin üzerlerine basın, üzerine bastığınız link yüklenirken ve sonra ilk sayfaya geri döndüğünüzde üstüne bastığınız ve basmadığınız linklerin arasındaki renk farkını gözlemleyin :

<html>
<head>
<title>Dördüncü sayfamıza da geçelim artık...</title>
</head>
<body link="Blue" vlink="Purple" alink="Red">
<a href ="http://www.cnn.com"><font size="3" face="arial">http://www.cnn.com</font></a>
<a href ="http://www.disney.com"><font size="3" face="arial">http://www.disney.com</font></a>
<a href ="http://www.nba.com"><font size="3" face="arial">http://www.nba.com</font></a>
</body>
</html>

Aşağıdaki resme baktığınızda hiç dokunmadığınız link'in renginin mavi, daha evvel ziyaret ettiğiniz siteye ait link'in renginin mor ve o anda ustune basmış olduğunuz link'in renginin de kırmızı olduğunu görüyorsunuz :



Şimdi de basitçe "table"lar yapmayı öğrenelim. Eğer şu şekilde bir kod yazarsak...

<html>
<head>
<title>İlk table yaptığım sayfa</title>
</head>
<body link="Blue" vlink="Purple" alink="Red">
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<td align="center" height ="50">İlk sıra ilk kutu</td>
<td width="200" align="center">İlk sıra ikinci kutu</td>
</tr>
<tr>
<td bgcolor="yellow">İkinci sıra ilk kutu</td>
<td bordercolor="blue" align="right">İkinci sıra ikinci kutu</td>
</tr>
</table>
</body>
</html>

...görüntüsü de bu şekilde olacaktır. Aşağıdaki resimden de anlayacağınız gibi table, td ve tr komutları bir table yaratmaya yarıyor ("tr"ler satırları, "td"ler de kolonları yaratmamızı sağlıyor). Bunların dışında border komutu table'ın çizgilerini istediğimiz kadar kalın göstermeye, cellpadding yazi ile kenarların arasını belirttiğimiz ölçüde açmaya, cellspacing hücreler arasındaki genişliği dilediğimiz ölçüde koymaya, align yazdığımız şeyin hücrenin neresine yazılacağına, height komutu hücrenin yüksekliğinin belirlenmesine, width komutu hücrenin genişliğinin belirlenmesine, bgcolor hücrenin fon rengini belirlemeye, bordercolor hücrenin kenar renginin ne olacağını belirlememize yardımcı oluyor.





Aşağıdaki kodda bir üsttekinden farklı olarak rowspan ve colspan komutlarinin ne işe yaradığını öğreniyoruz.

<html>
<body>
<table border="1">
<tr>
<td align="left" height="50">Sol</td>
<td align="center">Orta</td>
<td align="right">Sağ</td>
</tr>
<tr>
<td valign="top" height="50">Üstte kalan yazı</td>
<td valign="middle">Ortada kalan sıçan</td>
<td valign="bottom">Altta kalan ezik (ffrrrkk :O)</td>
</tr>
<tr>
<td rowspan="2" height="50" width="200" align="center"><font
color="blue">Rowspan</font> bu işe yarıyor</td>
<td colspan="2" height="50" align="center"><font color="red">Colspan</font>'de bu işe
yarıyor</td>
</tr>
<tr>
<td height="50">Bu hücre boş</td>
<td>Bu hücre de boş</td>
</tr>
</table>
</body>
<html>

...ve görüntüsü de tam şu şekilde oluyor :




Alıntıdr....
  
  BuGüN 59 ziyaretçiKişi Siteye Girdi.____ ©2008 Data WebMaster