Merhaba.. Yukarıdaki tabloyu adım adım beraber yapalım.
SAYFA ÖZELLİKLERİ
Öncelikle sayfa arkaplanı ve linkler beyaz yapılmış. Bunu body etiketinde ayarlayabiliriz.
<body link="white" alink="white" vlink="white" bgcolor="white" >
Sayfa yazı tipi "calibri" kullanılmış. Tüm tabloyu font tiketi ile sararsak , yazı tipini calibri yapabiliriz.. Tablodan sonra font etiketini kapatmayı unutmayın...
<body link="white" alink="white" vlink="white" bgcolor="white" >
<font face="calibri">
<table>
.
.
.
</table>
</font>
</body>
TABLO GENEL ÖZELLİKLERİ
- Tablo yapısını 6 satır 6 sütun gibi düşünebiliriz. Ancak ara boşluklar için boş satırlar ekleyebiliriz..
- Tablo genişliği sayafa genişliğinin yarısından daha fazla görünüyor : 60% yapabiliriz..
- Ayrıca tablo sayfaya ortalanmış ve hücre boşlukları kapatılmış..
<table width="60%" align="center" cellpadding="0" cellspacing="0" >
1. SATIR
- İlk satır 3e bölünmüş ve bir yükseklik değeri verilmiş.. 150px düşünebiliriz...
- Bölümler "LOGO -BAŞLIK ve TELEFON NUMARASI" 2 sütun kaplayacak şekilde kodlanmış.
- Logo sola, telefon sağa , başlık ise ortalı hizalanmış.
- Logo için 100*80px ölçülerinde resim eklenmiş :
- Başlık büyükçe yazılıp turuncu yapılmış. Font etiketi ile rengini Darkorange seçerek boyutunu da size kullanıp ayarlayabiliriz.
- Başlık altındaki açıklama yazısı biraz daha küçük yazılmış. small etiketi ile yazabiliriz.
<!-- 1. SATIR -->
<tr height="150">
<td align="left" valign="center">
<img src="resim/htmlpng.png" alt="" width="100" height="80">
</td>
<td colspan="4" valign="center" align="center" >
<font size="7" color="Darkorange"><b> Şirket Sitesi </b></font><br>
<small> Bilişim Teknolojileri </small>
</td>
<td valign="center" align="right" >
<h2> 0506 244 55 55 </h2>
</td>
</tr>
2. SATIR
- 2. satır 6ya bölünmüş , arka planı turuncu (darkorange) yapılmış ve menü linkleri her hücreye yerleştirilmiş.
- Menü hücreleri yatayda ortalanmış. bunu tek tek td'lere align vererek değil sadece tr'ye align=center ekleyerek yapabiliriz.
- Menü maddeleri zaten body etiketi ile beyaz olacak.
- Yazı boyutlarını yine font le büyütüp <b> ile kalınlaştırabiliriz.
<!-- 2. SATIR -->
<tr bgcolor="Darkorange " height="50" align="center">
<td><a href=""><font size="4"><b>Anasayfa</b></font></a></td>
<td> <a href=""><font size="4"><b>Ürünler</b></font></a> </td>
<td><a href=""><font size="4"><b>Referanslar</b></font></a></td>
<td><a href=""><font size="4"><b>Projeler</b></font></a></td>
<td><a href=""><font size="4"><b>Hakkında</b></font></a></td>
<td><a href=""><font size="4"><b>İletişim</b></font></a></td>
</tr>
3. SATIR
- 3. satırda tüm sütunlar birleştirilmiş : colspan=6
- Resim eklenerek genişliği 100% yapılmış
- Resmin üzerinde ve altında boşluk kalması için satır yüsekliği resim yükseliğinden daha fazla yapılmış : 250px
- Menü hücreleri yatayda ortalanmış. bunu tek tek td'lere align vererek değil sadece tr'ye align=center ekleyerek yapabiliriz.
<!-- 3. SATIR -->
<tr>
<td colspan="6" align="center" height="250">
<img src="resim/1.jpg" alt="" width="100%">
</td>
</tr>
4. SATIR
- 4. satırda da tüm sütunlar birleştirilmiş : colspan=6
- Turuncu , büyük ve kalın yazılmış bir başlık eklenmiş. Font etiketi ile boyutunu ve rengini ayarlayabiliriz. size=5 , color=darkorange
- Başlığın altında biraz büyük bir paragraf eklenmiş.. P v font şle ekleyebiliriz.
<!-- 4. SATIR -->
<tr>
<td colspan="6" align="center">
<font size="5" color="Darkorange"><b>LOREM IPSUM DILOR</b></font>
<p align="justify">
<font size="4">
Lorem, ipsum dolor sit amet, consectetur adipisicing elit. Odio nesciunt asperiores culpa voluptates, quam! Totam accusantium quidem impedit aliquam aut sequi dolores praesentium soluta placeat deleniti. Sapiente similique amet enim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br><br><br>
</font>
</p>
</td>
</tr>
5. SATIR
- 5. satır 3e bölünmüş ve her bölüme bir resim eklenmiş. Img ile resmi ekleyebiliriz. Farklı resim kullanmanız durumunda satıra yükseklik vermeniz gerekebilir.
- Resimlerin altlarında turuncu,kalın ve biraz büyük yazılar eklenmiş Font etiketi ile ayarlayabiliriz.
- Hücre içerkleri yatayda ortalanmış Tr2ye align uygulayabiliriz.
<!-- 5. SATIR -->
<tr align="center">
<td colspan="2" > <img src="resim/3.jpg" alt=""><br> <font size="5" color="Darkorange"> <b>Lorem</b></font></td>
<td colspan="2"> <img src="resim/4.jpg" alt=""><br> <font size="5" color="Darkorange"> <b>Lorem</b></font></td>
<td colspan="2"> <img src="resim/5.jpg" alt=""><br> <font size="5" color="Darkorange"> <b>Lorem</b></font></td>
</tr>
6. SATIR
- 6 satırda da tüm sütunlar birleştirilmiş : colspan=6
- Turuncu , ve biraz kalın çizgi eklenmiş. Hr etiketi ile kalınlığını ve rengini ayarlayabiliriz. size=3 , color=darkorange
- Çizginin altında biri kalın , biri küçük iki yazı alt alta eklenmiş <b< , <br> ve <small> etiketleri ile ekleybiliriz.
- Yazılarda "|" karakteri kullanılmış. Bu karakteri ctrl + alt + <> tuşlarına aynı anda basarak yazabilirsiniz.
<!-- 6. SATIR -->
<tr height="50">
<td colspan="6" align="center" >
<br><br><br> <hr color="Darkorange" size="3"><br>
<b>Tüm Hakları Saklıdır || 2024 </b><br>
<small>Bİlişim Teknolojileri</small>
</td>
</tr>
SAYFA SONU
Tablo bittikten sonra , başta söylediğim font ewtiketi kapanıyor. Sonrasında tablonun sayfa alt keanrından uzaklaşması için bir kaç br ekleyebilirsiniz..
</table>
</font>
<br><br><br><br>
</body>
NOT : HTML 5 ile font etiketi desteği kaldırıldı. Ancak tarayıcılar sayfa HTML 5 sayfası olsa dahi , eskiye dönük etiketleri çalıştırbiliyor. Ancak olası bir sorunda, font etiketi ile belirlediğimiz RENK, YAZI TİPİ v YAZI BOYUTLARI için CSS kullanmalısınız.
Ayrıca, uygulamanın mobil makale sayfasında daha düzgün görünebimesi için , sayfaya bir iki CSS özelliği ekledim. Tarayıcıda açıp, sayfa kaynağına baktığınızda görebilirsiniz. Onları eklemenize gerek yok, tasarımınız etkilenmeyecektir.
TÜM SAYFA HTML KODU
<head>
<title> TABLO UYGULAMASI 1 </title>
<meta charset="utf-8">
</head>
<body link="white" alink="white" vlink="white" bgcolor="white" >
<font face="calibri"> <!-- Tüm sayfa fontu : calibri -->
<table cellpadding="0" cellspacing="0" width="60%" align="center" >
<!-- 1. SATIR -->
<tr height="150">
<td align="left" >
<img src="resim/htmlpng.png" alt="" width="100" height="80">
</td>
<td colspan="4" align="center" >
<font size="7" color="Darkorange"><b> Şirket Sitesi </b></font><br>
<small> Bilişim Teknolojileri </small>
</td>
<td align="right" >
<h2> 0506 244 55 55 </h2>
</td>
</tr>
<!-- 2. SATIR -->
<tr bgcolor="Darkorange " height="50" align="center">
<td><a href=""><font size="5"><b>Anasayfa</b></font></a></td>
<td><a href=""><font size="5"><b>Ürünler</b></font></a> </td>
<td><a href=""><font size="5"><b>Referanslar</b></font></a></td>
<td><a href=""><font size="5"><b>Projeler</b></font></a></td>
<td><a href=""><font size="5"><b>Hakkında</b></font></a></td>
<td><a href=""><font size="5"><b>İletişim</b></font></a></td>
</tr>
<!-- 3. SATIR -->
<tr>
<td colspan="6" align="center" height="250">
<img src="resim/1.jpg" alt="" width="100%" />
</td>
</tr>
<!-- 4. SATIR -->
<tr>
<td colspan="6" align="center">
<font size="5" color="Darkorange"><b>LOREM IPSUM DILOR</b></font>
<p align="justify">
<font size="4">
Lorem, ipsum dolor sit amet, consectetur adipisicing elit. Odio nesciunt asperiores culpa voluptates, quam! Totam accusantium quidem impedit aliquam aut sequi dolores praesentium soluta placeat deleniti. Sapiente similique amet enim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br><br><br>
</font>
</p>
</td>
</tr>
<!-- 5. SATIR -->
<tr align="center">
<td colspan="2" > <img src="resim/3.jpg" alt=""/><br> <font size="5" color="Darkorange"> <b>Lorem</b></font></td>
<td colspan="2"> <img src="resim/4.jpg" alt=""/><br> <font size="5" color="Darkorange"> <b>Lorem</b></font></td>
<td colspan="2"> <img src="resim/5.jpg" alt=""/><br> <font size="5" color="Darkorange"> <b>Lorem</b></font></td>
</tr>
<!-- 6. SATIR -->
<tr>
<td colspan="6" align="center" >
<br><br><br> <hr color="Darkorange" size="3"><br>
<b>Tüm Hakları Saklıdır || 2024 </b><br>
<small>Bİlişim Teknolojileri</small>
</td>
</tr>
</table>
</font>
<br><br><br><br>
</body>
</html>
Görüşmek Üzere...
