Merhaba Arkadaşlar;
Şimdi sizlere html de bir sayfa nasıl yapılır, link ekleme ve resim ekleme nasıl olacağını sizlere göstereceğiz.İlk öncelikle aşağıda bulunan örnek html sayfamızı yapmaya çalışalım.
Evet arkadaşlar bu örneği yapabilmek için ilk önce html taglarını açıp ve önceki derslerimizde bahsetmiş olduğumuz kodları yazmanız yeterlidir.Şimdi sizlere bir resim eklemeyi ve tablolar yapmayı göstereceğiz.Aşağıda yer alan kodlarımız ise index.html dir.Yani Anasayfamız dır.
[code]
<html>
<head><title>Web Tasarım</title>
</head>
<body>
<center><table border=”0″ width=”600″ >
<tr>
<td colspan=”4″ height=”200″><img src=”../images/foto.jpg” width=”600″ height=”200″</a></td>
[/code]
Evet Arkadaşlar şimdi buraya kadar yapmış olduğumuz bu kodları ilk önce sizlere anlatalım.İlk önce html koduna başlamadan önce html açıyoruz.Sonra html içerisinde yer alan head taglarını ve bu head taglarının arasına ise title veya buna benzer tagları buraya yazabilirsiniz.
Head tagından sonra gelen body taglarımız yer almaktadır. body tagımız arasına yazmış olduğunuz her şeyi bir tarayıcı sayfamız da görünmesini istediğimiz her şeyi buraya yazarak göre biliriz.Ama burada gözükmesi için bazı kurallar vardır.Kurallarını bilmeniz gerekmektedir.
Sonra ise bir table yani bir tablo açmış bulunmaktayız.Bu tablomuzun üst tarafına bir resim çekmemiz yeterlidir.Bu kod ise [code]<img src=”çekeceğiniz resmin yolunu yazınız”</a>[/code] diye çekmeniz yeterlidir.Burada sizlerin dikkatinizi çekecek bir kod bulunmaktadır.Bu kod ise colspan dır.Bu da hücreleri birleştirilmesine yardımcı olacaktır.Sonra zaten html i bilen herkesi bildiği gibi yükseklik ve genişlik kodları yer almaktadır.
[code]
</tr >
<tr bgcolor=”#666666″>
<td height=”50″ align=”center” width=”150″><a href=”index.html” /a>Anasayfa</td>
<td align=”center” width=”150″><a href=”hakkimizda.html” /a>Hakkımızda</td>
<td align=”center” width=”150″><a href=”urunlerimi.html” /a>Ürünlerimiz</td>
<td align=”center” width=”150″><a href=”iletisim.html”/a>İletişim</td>
</tr>
[/code]
Yukarıda görmüş olduğunuz bgcolor kodu ise arka planın hangi renk olacağını ayarlayacağınız yerdir. Buradan tablolarınızın içerisinde yer alan hücrelerden birer menü oluşturmuş olursunuz. center kodları ile de menüleri tam ortalamış olmuş olursunuz.Eğer bu oluşturduğunuz menülere link vermek istiyorsanız [code]<a href=”link vereceğiniz menünün ismini giriniz ve hangi dilde yazacaksanız eğer o dilin uzantısını yazmanız yeterlidir.”[/code]
[code]
<tr valign=”top” align=”left”>
<td colspan=”4″ height=”310″><img src=”../images/foto2.jpg” align=”left” width=”150″ height=”150″ vspace=”15″ hspace=”15″ >
<p align=”justify”> Şimdi sizlere bir web tasarım nasıl yapılır ve
bu yapılan işleri de adım adım ilerlemeniz gerekmektedir.Ekibimiz sizlere özel olarak ayarlamış oluduğumuz
bu tasarımları anlatacağız.
Bir web tasarım nasıl adım adım belirlenir ve belirlendikten sonra
ise nasıl başlanacağı belirlenmektedir.</p>Ekibimiz bu özel tasarımalara başlarken
ilk önce firma sahibimizin hayal dünyasında bulunan web tasarımı ilk önce
bir çizimini yaparak firma sahibimize göstermekteyiz.Bu özel tasarımı beğendiyse veya herhangi bir
yerinde değişiklilik yaptırmak istiyorsa ekibimiz hemen bu tasarımda değişiklikleri yaparak sizlere vermektedir.
</td>
</tr>
[/code]
Yukarıda görmüş olduğunuz bu kodlar da ise dikkatinizi çekenler ise [code] valign=”top,middle,buttom gibi kodları kullanmanızı tavsiye ederiz.”[/code] Burada <p> tagları açarak align=”justify” kodlarıyla yazdığınız yazıyı ortalamış olacaksınız.[code]vspace=”15″ hspace=”15″ kodları ise yazınızın dört bir tarafından boşluk bırakmaya yarayacaktır. [/code] Bu kodlar sayesinde yukarıda görmüş olduğunuz örneği bu kodlar yardımı ile yapabilirsiniz.
[code]
<tr>
<td colspan=”4″ height=”40″ ></td>
</tr>
</table></center>
</body>
</html>
[/code]
Bu kodlarımız da yukarıda görmüş olduğunuz örneği bu kodlar yardımı ile yapabilirsiniz.Bir başka sayfa ya link verebilmek için ve başka bir sayfa yapabilmeniz için aşağıda yer alan kodları kullanmanız gerekmektedir.
[code]
<html>
<head><title>Web Tasarım</title>
</head>
<body>
<center><table border=”2″ width=”600″ >
<tr>
<td colspan=”4″ height=”200″><img src=”../images/foto.jpg” width=”600″ height=”200″</a></td>
</tr >
<tr bgcolor=”#666666″>
<td height=”50″ align=”center” width=”150″><a href=”index.html” /a>Anasayfa</td>
<td align=”center” width=”150″><a href=”hakkimizda.html” /a>Hakkımızda</td>
<td align=”center” width=”150″><a href=”urunlerimi.html” /a>Ürünlerimiz</td>
<td align=”center” width=”150″><a href=”iletisim.html”/a>İletişim</td>
</tr>
<tr valign=”top” align=”left”>
<td colspan=”4″ height=”310″><img src=”../images/foto2.jpg” align=”left” width=”150″ height=”150″ vspace=”15″ hspace=”15″ >
<p align=”justify”> İletişim Bilgilerimiz</td>
</tr>
<tr>
<td © colspan=”4″ height=”40″ ></td>
</tr>
</table></center>
</body>
</html>
[/code]
Bu kodlar sayesinde basit bir html sayfası oluşturabilirsiniz.Bu kontrol bilgileri denemeniz yeterlidir.Diğer derslerimiz de görüşmek üzere iyi günler.