Senin, 21 November 2016

Desain halaman Web dengan konsep Tabel

Kali saya akan membagikan tentang berbagai macam desain web menggunakan konsep tabel

  1. Top Indeks
Kode yang saya pakai :

<html>
<head>
 <title>Banner</title>
</head> 
<body background="C:\Users\CyberAnonID\Desktop\Clanmark (80).png">
 <form id="form1" name="form1" method="post" action=""> 
 <table width="800" height="542" border="1"   align="center" bgcolor="black">    
<tr>     
 <td height="23" align="center"  bordercolor="red" bgcolor="red"><strong><font size="+5">Banner atau iklan</font></strong></td>
</tr>   
 <tr>     
 <td height="27" align="center" bgcolor="black"><font color="red">Daftar isi atau navigasi </font></td>    
</tr>   
 <tr>     
 <td height="457" align="center" bgcolor="gold">        
 <p>Body atau contents(isi)</p>       
 <p><font color="#006600">Body atau contents(isi)</font></p>        
<p><font color="#CC0000">Body atau contents(isi)</font></p>        
<p><font color="#FFFF00">Body atau contents(isi)</font></p>       
 <p><font color="#FF6633">Body atau contents(isi)</font></p>
</td>   
 </tr>    
<tr>     
 <td height="23" align="center" bgcolor="blue"><font color="black">Info tambahan atau lain-lain </font></td>    
</tr> 
 </table>
 </form>
 </body>
</html>

Hasil :

2. Bottom Indeks

Kode yang saya pakai :

<html>
<head>
<title>Banner/Judul</title>
</head>
<body background="C:\Users\CyberAnonID\Desktop\Clanmark (274).png">
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="542" border="1" bgcolor="black" align="center">
    <tr> 
      <td height="23" align="center" bordercolor="#FFFFFF" bgcolor="aqua"><strong><font size="+5">Banner  / Judul</font></strong></td>
    </tr>
        <tr>
      <td height="457" align="center" bgcolor="gold"> 
        <p>Body atau contents(isi)</p>
        <p><font color="dark blue">Body atau contents(isi)</font></p>
        <p><font color="light yellow">Body atau contents(isi)</font></p>
        <p><font color="red">Body atau contents(isi)</font></p>
        <p><font color="purple">Body atau contents(isi)</font></p></td>
    </tr>
    <tr>
      <td height="23" align="center" bgcolor="grey"><font color="orange"><strong><font size="+2">Daftar isi atau navigasi </font></strong></font><font color="#9966CC" size="+2">&nbsp;</font></td>
    </tr>
  </table>
</form>
</body>
</html>

Hasil :

3. Left Indeks

Kode yang saya pakai :

<!DOCTYPE html >
<head>
<title>Electronic Shop</title>
</head>
<body background="C:\Users\CyberAnonID\Desktop\Clanmark (274).png">
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="447" border="1" align="center" cellspacing="1">
    <tr>
      <th width="160" rowspan="3" valign="top" bgcolor="aqua"><p>Home</p>
      <p>Profile</p>
      <p>About Us</p>
      <p>Blog</p>
      <p>Contact Us</p></th>
      <th width="627" height="23" align="center" bgcolor="black"><strong><font color="red" size="+4">Electronic   Shop</font></strong></th>
    </tr>
    <tr>
      <td height="176" align="center" valign="top" bgcolor="gold"><p>&nbsp;</p>
      <p>Terserah yang penting happy xD xD xD xD </p>
     <p> Z-F </p>
</td>
    </tr>
    <tr>
      <td height="30" align="center" bgcolor="silver"> <font size="+2"><a href="zfarabiCSA.blogspot.com">Klik here just beause i told you </a></font></td>
    </tr>
  </table>
</form>
</body>
</html>

Hasil :


4. Layout Split

Kode yang saya pakai :

<html >
<head>
<title>Banner/Judul</title>
</head>
<body background="E:\Untitled.jpg">
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="512" border="1" align="center" bordercolor="black">
    <tr>
      <td width="15%" rowspan="2" align="center" bgcolor="red"><strong>Daftar Isi </strong> </td>
      <td width="67%" height="23" align="center" bgcolor="gold"><font size="+3"><strong>Banner/judul</strong></font></td>
      <td width="18%" rowspan="2" align="center" bgcolor="red"><strong>Daftar  Isi </strong> </td>
    </tr>
    <tr>
      <td height="456" align="center" bgcolor="white">
   <p>Body atau contents(isi)</p>
        <p><font color="#006600">Body atau contents(isi)</font></p>
        <p><font color="#CC0000">Body atau contents(isi)</font></p>
        <p><font color="#FFFF00">Body atau contents(isi)</font></p>
        <p><font color="#990033">Body atau contents(isi)</font></p>
   </td>
    </tr>
    <tr bgcolor="silver"> 
      <td height="23" colspan="3" align="center">Lain lain </td>
    </tr>
  </table>
</form>
</body>
</html>

Hasil :









 5. Alternating Indeks

Kode yang saya pakai :

<html>
<head>
<title>Web</title>
</head>
<body background="E:\Untitled.jpg">
<form id="form1" name="form1" method="post" action="">
  <table width="800" height="738" border="1" align="center" bordercolor="orange">
    <tr>
      <td height="248" align="center" bgcolor="black"><font size="+1" color="orange"><strong>Cyber Spetnaz Army </strong></font></td>
      <td align="center" bgcolor="black"> <img src="C:\Users\CyberAnonID\Desktop\Clanmark (80).png"/></td>
    </tr>
    <tr>
      <td height="261" align="center" bgcolor="gold"><img src="C:\Users\CyberAnonID\Desktop\Clanmark (274).png"/></td>
      <td align="center" bgcolor="silver"><font size="+1" color="green"><strong>Dreams</strong></font></td>
    </tr>
    <tr bgcolor="red"> 
      <td height="150" colspan="2" align="center"><font color="#FFFFFF"><strong><font size="+1">Lain lain</font></strong></font></td>
    </tr>
  </table>
</form>
</body>
</html>

Hasil :


Terakhir, Tugas tadi bapak Krido

Kode yang saya pakai :

<html>

<head>

<title>Web</title>

</head>

<body background="E:\Untitled.jpg">

<center>

<table width='60%' border='1' bgcolor="Cadetblue">

<tr>

<td colspan='2' bgcolor="black" align='center'><font color="white"> <h1> WEB SMKN 2 BANJARMASIN </font> </h1> </td>

</tr>

<tr>

<tr>

<th width="200" height='350' rowspan="2" valign="top" bgcolor="red">

<p>Menu</p>

<p>Profil Sekolah</p>

<p>Galery Foto</p>

<p>Kegiatan</p>

<p>Hubungi Kami</p></th>

</tr>

<td widht ='80%' align='center' bgcolor="gold">

<p> ISI DARI HALAMAN WEB </p>

</td>

</tr>

<tr>

<td colspan='2' bgcolor="green"><center><a href="smkn2-bjm.sch.id"> smkn2-bjm.sch.id </a> </center></td>

</tr>

</table>

</center>

</body>

</html>

Hasil :


Sekian dari saya, assalamualaikum wr.wb








Diposting oleh di Tidak ada komentar:

Rabu, 09 November 2016

Tugas Tabel Bersarang

Nama saya Zulva Farabi, inilah hasil kerja saya tentang tabel bersarang

Kode HTML :

 <html>
 <body>
<head>
<title> Tabel Bersarang </title>
</head>
  <table bgcolor='purple' width='500' >
   <tr>
    <td width='500' height='50' valign='top'>table>tr>td
    <table bgcolor='grey' width='95%' align='center'>
     <tr>
      <td height='25' table>tr>td</td>
     </tr>
   </tr>
      </table>
      </td>
   <tr>
   <td>
   <table bgcolor='green' width='95%' align='center'>
     <tr>
      <td height='50' >table>tr>td</td>
     </tr>
   </tr>
      </table>
      </td>
   <tr>
   <td>
   <table bgcolor='lime' width='95%' align='center'>
     <tr>
      <td height='75' valign='top'>table>tr>td</td>
     </tr>
   </tr>
      </table>
      </td>
   <tr>
   <td>
   <table bgcolor='blue' width='95%' align='center'>
     </tr>
      <td valign='top'>table>tr>td</td>
     </tr>
      <td bgcolor='orange' valign='top' align='left' width='25%'>td</td>
       <td> </td>
       <td bgcolor='red' width='50%' height='100' align='left'>td
        <table bgcolor='aqua' width='75%' align="center">
         <tr>
          <td width='100%' valign='top'>table>tr>td
           <table bgcolor='yellow' width='100%'>
           </td>
           </tr>
           <tr>
            <td>
             <table width='100%'>
             <tr>
              <td bgcolor='gold' height='30' valign='top'>td</td>
             </tr>
           </tr>
              </table>
               </td>
           <tr>
            <td>
             <table width='100%'>
             <tr>
              <td bgcolor='green' height='20' valign='top'>td</td>
             </tr>
           </tr>
              </table>
               </td>
           <tr>
            <td>
             <table width='100%'>
             <tr>
              <td bgcolor='red' height='30' valign='top'>td</td>
             </tr>
           </tr>
              </table>
               </td>
           <tr>
            <td>
             <table width='100%'>
             <tr>
              <td bgcolor='silver' height='20' valign='top'>td</td>
             </tr>
           </tr>
              </table>
               </td>
           <tr>
            <td>
             <table width='100%'>
             <tr>
              <td bgcolor='lime' height='30' valign='top'>td</td>
             </tr>
           </tr>
              </table>
               </td>
           <tr>
            <td>
             <table width='100%'>
             <tr>
              <td bgcolor='yellow' height='20' valign='top'>td</td>
             </tr>
           </tr>
              </table>
               </td>
           <tr>
            <td>
             <table width='100%'>
             <tr>
              <td bgcolor='orange' height='50' valign='top'>td</td>
             </tr>
           </tr>
              </table>
               </td>
        </table>
        </table>
       <td> </td>
       <td  bgcolor='brown' valign='top' align='left' width='25%' height='100'>td</td>
   </table>
       </td>
  <tr>
   <td>
   <table bgcolor='aquamarine' width='95%' align='center'>
     <tr>
      <td height='20' valign='top'>table>tr>td</td>
     </tr>
   </table>
   </td>
  </tr>
   </table>

 </body>
</html>


Hasil :
Sekian terima kasih.
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)