<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 :
Ş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
)
</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 mi
<a href="mailto:mantik@mantikweb
com"> Bas ki MANTIK'a mail atasın !!!</a>Üyelik girişi yapmadan linki görüntülüyemezsiniz
Üye iseniz giriş yapınız
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 :
İşteeeeeeeeeeeeeeeeeeeeeeeeeeeeee
Ve sona geldik
Bu Site yapmak içindir
