Örnek:Basit bir web sitesi görünümünü tablo yardımıyla oluşturalım.
 |
Anasayfamızın görünümü(index.html)
|
index.html için kodlar:
| <html>
|
| <head>
|
| </head>
|
| <body bgcolor="lightblue">
|
| |
| <table align="center" bordercolor="black" border="3" >
|
| <tr>
|
| <td colspan="2" width="800" height="200" bgcolor="red">Başlık </td>
|
| </tr>
|
| <tr>
|
| <td valign="top" width="200" height="600" bgcolor="gray">
|
| <br>
|
| <br>
|
| <a href="index.html"> ANASAYFA </a><br>
|
| <a href="hakkimizda.html"> HAKKIMIZDA </a><br>
|
| <a href="iletisim.html"> İLETİŞİM </a><br>
|
| <a href="bizeulasin.html"> BİZE ULAŞIN </a>
|
| </td>
|
| |
| <td width="600" height="600" bgcolor="white">Anasayfa İçerik </td>
|
| </tr>
|
| <tr>
|
| <td colspan="2" width="800" height="100" bgcolor="red" align="Center" >Copyright © Tüm Hakları Saklıdır!.. </td>
|
| </tr>
|
| |
| </table>
|
| </body>
|
| </html> |
- Sitemizin anasayfa görünümü yukarıdaki gibi olacak ve hakkımızda , bize ulaşın ve iletişim için ayrı sayfalar oluşturacağız.
- Sitemizin bütün dosyaları aynı klasörde olmalı bu şekilde düzenli bir çalışma gerçekleştirebiliriz. Klasörde yer alan dosyalar:
- Hakkımzda sayfamızı oluşturalım.
 |
| Hakkımızda sayfamızın görünümü(hakkimizda.html) |
hakkimzda.html kodlar:
<html>
<head>
</head>
<body bgcolor="lightblue">
<table align="center" bordercolor="black" border="3" >
<tr>
<td colspan="2" width="800" height="200" bgcolor="red">Başlık </td>
</tr>
<tr>
<td valign="top" width="200" height="600" bgcolor="gray">
<br>
<br>
<a href="index.html"> ANASAYFA </a><br>
<a href="hakkimizda.html"> HAKKIMIZDA </a><br>
<a href="iletisim.html"> İLETİŞİM </a><br>
<a href="bizeulasin.html"> BİZE ULAŞIN </a>
</td>
<td valign="top" width="600" height="600" bgcolor="white">
<font face="Monotype corsiva" size="5" color="red"> <b>Misyon </b></font>
<br>
Ekle sekmesinde, galeriler belgenizin genel görünümünü düzenlemek için tasarlanan öğeleri eklerler.
Bu galerileri, tablolar, üstbilgiler, altbilgiler, kapak sayfaları ve diğer belge yapı taşlarını
eklemek için kullanabilirsiniz. Resimler, kartlar veya grafikler oluşturduğunuzda, aynı
zamanda geçerli belge görünümünüzü de düzenlerler. Belgedeki seçili metnin biçimlendirmesini,
Giriş sekmesindeki Hızlı Stiller galerisinden seçilen metin görünümünü seçerek kolayca
değiştirebilirsiniz. Metni doğrudan Giriş sekmesindeki diğer denetimleri kullanarak da
biçimlendirebilirsiniz. Denetimlerin çoğu geçerli temadan görünüm kullanma ya da doğrudan
belirlediğiniz biçimi kullanma seçeneği sunar.
<br>
<br>
<font face="Monotype corsiva" size="5" color="red"> <b>Vizyon </b></font>
<br>
Belgenizin genel görünümünü değiştirmek için, Sayfa Düzeni sekmesinde yeni Tema öğeleri seçin.
Hızlı Stil galerinde bulunan görünümleri değiştirmek için, Geçerli Stil Ayarını Değiştir
komutunu kullanın. Geçerli şablonunuzda bulunan belgenizin görünümünü her zaman özgün
haline geri döndürebilmeniz için, Temalar galerisi ve Hızlı Stiller galerisi komutları
sıfırlar. Ekle sekmesinde, galeriler belgenizin genel görünümünü düzenlemek için tasarlanan
öğeleri eklerler. Bu galerileri, tablolar, üstbilgiler, altbilgiler, kapak sayfaları ve
diğer belge yapı taşlarını eklemek için kullanabilirsiniz. Resimler, kartlar veya grafikler
oluşturduğunuzda, aynı zamanda geçerli belge görünümünüzü de düzenlerler.
<br>
</td>
</tr>
<tr>
<td colspan="2" width="800" height="100" bgcolor="red" align="Center" >Copyright © Tüm Hakları Saklıdır!.. </td>
</tr>
</table>
</body>
</html>
- İletişim sayfamızı oluşturalım.
 |
| İletişimin sayfamızın görünümü(iletisim.html) |
iletisim.html kodlar:
| <html>
|
| <head>
|
| </head>
|
| <body bgcolor="lightblue">
|
| |
| <table align="center" bordercolor="black" border="3" >
|
| <tr>
|
| <td colspan="2" width="800" height="200" bgcolor="red">Başlık </td>
|
| </tr>
|
| <tr>
|
| <td valign="top" width="200" height="600" bgcolor="gray">
|
| <br>
|
| <br>
|
| <a href="index.html"> ANASAYFA </a><br>
|
| <a href="hakkimizda.html"> HAKKIMIZDA </a><br>
|
| <a href="iletisim.html"> İLETİŞİM </a><br>
|
| <a href="bizeulasin.html"> BİZE ULAŞIN </a>
|
| </td>
|
| |
| <td valign="top" width="600" height="600" bgcolor="white">
|
| <br>
|
| <br>
|
| <table background="tulips.jpg" border="2" width="400">
|
| <tr>
|
| <th background="tulips.jpg" colspan="2" width="200"> İletişim Bilgileri</th>
|
| </tr>
|
| <tr>
|
| <th width="150">Telefon</th><th>Faks</th>
|
| </tr>
|
| <tr>
|
| <td align="center" >0216 555 55 55</td><td align="center">0216 555 55 56</td>
|
| </tr>
|
| <tr>
|
| <th >Adres</th> <td>Fahrettin Kerim Gökay Cad. M.Kaya Sok. No:15</td>
|
| </tr>
|
| |
| </table>
|
| |
| </td>
|
| </tr>
|
| <tr>
|
| <td colspan="2" width="800" height="100" bgcolor="red" align="Center" >Copyright © Tüm Hakları Saklıdır!.. </td>
|
| </tr>
|
| |
| </table>
|
| </body>
|
| </html>
- Bize ulaşın sayfamızı oluşturalım.
 |
| Bize ulaşın sayfamızın görünümü(bizeulasin.html) |
bizeulasin.html kodlar:
| <html>
|
| <head>
|
| </head>
|
| <body bgcolor="lightblue">
|
| |
| <table align="center" bordercolor="black" border="3" >
|
| <tr>
|
| <td colspan="2" width="800" height="200" bgcolor="red">Başlık </td>
|
| </tr>
|
| <tr>
|
| <td valign="top" width="200" height="600" bgcolor="gray">
|
| <br>
|
| <br>
|
| <a href="index.html"> ANASAYFA </a><br><br>
|
| <a href="hakkimizda.html"> HAKKIMIZDA </a><br><br>
|
| <a href="iletisim.html"> İLETİŞİM </a><br><br>
|
| <a href="bizeulasin.html"> BİZE ULAŞIN </a><br>
|
| </td>
|
| |
| <td valign="top" align="center" width="600" height="600" bgcolor="white">
|
| <br>
|
| <table border="1" width="500">
|
| <tr>
|
| <th width="200" height="80" > Mesaj</th>
|
| <td width="200">Şikayet </td>
|
| </tr>
|
| <tr>
|
| <th height="80" >Konu</th>
|
| <td width="200">Site Hakkında </td>
|
| </tr>
|
| <tr>
|
| <td height="150" align="center" colspan="2" >Sitenizi daha görsel hale getirin.</td>
|
| </tr>
|
| |
| </table>
|
| |
| |
| |
| </td>
|
| </tr>
|
| <tr>
|
| <td colspan="2" width="800" height="100" bgcolor="red" align="Center" >Copyright © Tüm Hakları Saklıdır!.. </td>
|
| </tr>
|
| |
| </table>
|
| </body>
|
| </html> |
|
0 yorum :
Yorum Gönder