Rabu, 19 Januari 2011

Tabel dengan CSS

Fungsi css sendiri adalah mengatur dari desain website itu sendiri, seperti warna background, ukuran/warna/jenis font, paragraf, dll. Sebenarnya dalam file HTML kita biasa menuliskan css tersebut. Namun, hal itu beda dengan yang akan kita pelajari kali ini. File CSS terpisah dengan file HTML. Hal ini yang disebut dengan CSS Eksternal.

  • Pembuatan Tabel dengan CSS ver 1
contoh gambar di bawah ini merupakan tabel yang menggunakan terapan selectortag.css
 Tag CSS nya :
body {
    font-family: Arial, sans-serif;
    background-color: Red;
}

p {
    font-family: Arial, sans-serif;
    color: #000099;
    font-size: 12pt
}

table {
    border-style: dashed;
    border-color: red;
}

th {
    text-align: center;
    background-color: gray;
    font-weight: bold
}  

Tag HTML nya:
<html>
<head>
<title>
Daftar Nilai Pemodelan Kelas VII A
</title>
<link rel=stylesheet href="selectortag.css" type"text/css">
</head>
<body>
<center>
<p><b>Daftar Nilai Pemodelan Kelas VII A</b></p>

<table width=100% height=20% border=1>
<tr>
<th><b>No.</b></td>
<th><b>Nama</b></td>
<th><b>Nilai</b></td>
</tr>

<tr>
<td align=right>1.</td>
<td>Brus Don Mardo</td>
<td align=center>77</td>
</tr>

<tr>
<td align=right>2.</td>
<td>Don Mardo</td>
<td align=center>70</td>
</tr>

<tr>
<td align=right>3.</td>
<td>BruzGG</td>
<td align=center>99</td>
</tr>
</table>
</center>
</body>
</html> 

  • Pembuatan Tabel dengan CSS ver 2
contoh gambar di bawah ini merupakan tabel yang menggunakan terapan selectorbebas.css

Tag CSS nya :
.bodynya {
    font-family: Arial, sans-serif;
    background-color: Pink
}

.paragraf {
    font-family: Arial, sans-serif;
    color: #009900;
    font-size: 12pt
}

.tabelku {
    border-style: dashed;
    border-color: red;
}

.headertabel {
    text-align: center;
    background-color: gray;
    font-weight: bold;
}



Tag HTML nya :
<html>
<head>
<title>
Daftar Nilai Pemodelan Kelas VII A
</title>
<link rel=stylesheet href="selectorbebas.css" type"text/css">
</head>
<body class="bodynya">
<center>
<p class="paragraf"><b>Daftar Nilai Pemodelan Kelas VII A</b></p>

<table class="tabelku" width=100% height=20% border=1>
<tr>
<th class="headertabel"><b>No.</b></td>
<th class="headertabel"><b>Nama</b></td>
<th class="headertabel"><b>Nilai</b></td>
</tr>

<tr>
<td align=right>1.</td>
<td>Brus Don Mardo</td>
<td align=center>77</td>
</tr>

<tr>
<td align=right>2.</td>
<td>Don Mardo</td>
<td align=center>70</td>
</tr>

<tr>
<td align=right>3.</td>
<td>BruzGG</td>
<td align=center>99</td>
</tr>
</table>
</center>
</body>
</html>

sekian.. ^_^
Diposting oleh di Tidak ada komentar:

Minggu, 02 Januari 2011

Pertemuan kedelapan: iframe dan form pembelian






Untuk lebih Jelasnya bisa Download DISINI
Diposting oleh di Tidak ada komentar:

Pertemuan Ketujuh : Latihan model frame pada HTML









Dowload Link : klik disini
Diposting oleh di Tidak ada komentar:

Pertemuan keenam: membuat tabel Data Mahasiswa

Pada praktikum ke-6 membuat tabel data mahasiswa pada HTML.
 PENAMPAKAN :


 CODINGNYA:
<html>
<head>

<title>Data Mahasiswa TI 7</title>
</head>

<body>
<center>
<h1>Data Mahasiswa TI 7</h1>
<table width= 80% height= 20% border="1">
  <tr>
    <td rowspan="2" bgcolor="pink" align="center"><b>No.</b></td>
    <td rowspan="2" bgcolor="pink" align="center"><b>Data Mahasiswa</b></td>
    <td colspan="3" bgcolor="pink" align="center"><b>Persetujuan</b></td>
  </tr>
  <tr>
    <td bgcolor="pink" align="center"><b>Ada</b></td>
    <td bgcolor="pink" align="center"><b>Tidak Ada</b></td>
    <td bgcolor="pink" align="center"><b>Keterangan</b></td>
  </tr>
  <tr>
    <td align="center">1.</td>
    <td>Brus Don Mardo</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">WNI</td>
  </tr>
  <tr>
    <td align="center">2.</td>
    <td>107091002264</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">-</td>
  </tr>
  <tr>
    <td align="center">3.</td>
    <td>021-55650802</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">Telpon Rumah</td>
  </tr>
  <tr>
    <td align="center">4.</td>
    <td>085781147591</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">CROSS CB90</td>
  </tr>
  <tr>
    <td align="center">5.</td>
    <td>onyet.lovers@gmail.com@gmail.com</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">Email</td>
  </tr>
  <tr>
    <td align="center">6.</td>
    <td>bruzteckdunk.blogspot.com</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">Blog</td>
  </tr>
  <tr>
    <td align="center">7.</td>
    <td>Kp. Cikoneng Girang No. 46 Rt.02/04 Kel. Manis Jaya Kec. Jatiuwung Kota Tangerang</td>
    <td align="center">-</td>
    <td align="center">-</td>
    <td align="center">Alamat Rumah</td>
  </tr>
  <tr>
    <td align="center">8.</td>
    <td>bruz_moza</td>
    <td align="center">-</td>
    <td align="center">-</td>
    <td align="center">YM</td>
  </tr>
    <tr>
    <td align="center">8.</td>
    <td>onyet.lovers@gmail.com</td>
    <td align="center">-</td>
    <td align="center">-</td>
    <td align="center">FB</td>
  </tr>
</table>
</center>
</body>
</html>
 
selamat mencoba ^^
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)