Bissmillah Hirahmanirahim
Assalamualaikum
Tak terasa pada tanggal 27 Desember 2010 kemarin adalah pertemuan terakhir dalam matakuliah praktikum pemodelan dan simulasi. Pada pertemuan terakhir ini akan dibahas mengenai pembuatan tabel dan pembahasan atau membuat css yang nanti akan dikombinasikan kedalam file HTML (tabel yang nanti akan Kita buat).
- Pembuatan Tabel dengan css Versi 1
Materi kuliah kali ini dibagi menjadi dua sesi, karena kedua pembahasannya mengenai css namun berbeda dalam implementasinya dan sourcecode yang digunakan. Untuk lebih memahaminya ada baiknya liat dan perhatikan gambar dibawah ini.
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.
Gambar 1: Penerapan selectortag.css kedalam Tabel
Berikut tag HTML yang digunakan:
Berikut tag CSS yang digunakan:<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=80% 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>Wisnu Jati Primadana</td>
<td align=center>70</td>
</tr>
<tr>
<td align=right>2.</td>
<td>Theo Walcott</td>
<td align=center>52</td>
</tr>
<tr>
<td align=right>3.</td>
<td>Fabianski</td>
<td align=center>80</td>
</tr>
</table>
</center>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #00FF66;
}
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
}
- Pembuatan Tabel dengan CSS Versi 2
Berikut ini adalah sesi kedua dari pembahasan tentang implementasi CSS kedalam desain HTML. Perhatikan gambar dibawah ini.
Gambar 2: Penerapan selectorbebas.css kedalam Tabel
Berikut tag HTML yang digunakan:
Berikut ini tag CSS yang digunakan:<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=80% 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>Wisnu Jati Primadana</td>
<td align=center>70</td>
</tr>
<tr>
<td align=right>2.</td>
<td>Theo Walcott</td>
<td align=center>52</td>
</tr>
<tr>
<td align=right>3.</td>
<td>Fabianski</td>
<td align=center>80</td>
</tr>
</table>
</center>
</body>
</html>
.bodynya {
font-family: Arial, sans-serif;
background-color: #eecdfa
}
.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;
}
Langkah terakhir dalam pengerjaan pertemuan 9 ini adalah simpel, yaitu Jangan lupa setiap file disimpan dengan ekstensi .html. hehehe...
Dari tag HTML pada setiap gambar, tidak ada yang begitu menyulitkan. Hanya saja Kita harus teliti dalam penamaan file, peletakan file, meng-link-kan suatu file dan mengatur desain CSS yang ingin digunakan kedalam file HTML.
Sekian tulisan saya, terkait tentang Praktikum Pemodelan dan SImulasi pertemuan ke-9 ini. Mohon maaf kalau ada kekurangan atau kesalahan dalam pengetikan kata-kata dan juga sourcecode yang digunakan. Bila ada tanggapan, Anda dapat mengetikan komentar diakhir dari tulisan ini.
Mau tidak repot dan tidak capek
>>Download Disini<<
Terimakasih
Wassalamualaikum...
0 comments:
Post a Comment