Gudang Ku

Element Tabel Raw

Praktek 2.8 Element Tabel Raw

Table Row <tr>, mendefiniskan baris pada tabel.

Contoh tagnya seperti di bawah ini:

<html>

<head>

<title>Contoh Tabel</title>

</head>

<body>

<tr>

<td>

Ini adalah contoh header tabel

</td>

</tr>

<tr>

<td>

Ini adalah tabel 1 baris, 1 kolom

</td>

</tr>

</table>

</body>

</html>

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Akan muncul baris baru.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Warna Background pada Tabel

Praktek 2.7 Membuat Warna Background pada Tabel

HTML telah menyediakan atribut untuk mengatur dan memberi warna pada tabel, yaitu dengan menggunkan atribut bgcolor. Atribut bgcolor dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag td, maupun tag col).

Apabila atribut bgcolor dipasang pada tag <table>, maka atribut ini berfungsi untuk memberikan warna keseluruhan tabel tersebut. Jika atribut ini dipasang pada tag <th> atau <td> maka akan berfungsi untuk memberi warna pada kolom.

Berikut ini contoh tag penggunaan bgcolor pada tabel:

<html>

<head>

<title>Contoh Tabel</title>

</head>

<body>

<tr>

<td>

Ini adalah tabel 1 baris, 1 kolom

</td>

</tr>

</table>

</body>

</html>

Screenshotnya seperti di bawah ini.

Setelah selesai diketik simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak background tabelnya berwarna merah.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Atribut Align pada Tabel

Praktek 2.6 Membuat Atribut Align pada Tabel

Attribut Align di HTML selalu berhubungan dengan posisi. Seperti tabel, tulisan, gambar dan sebagainya tinggal di mana attribut align itu ditempatkan. Bila atribut align ini ditempatkan di <table>, maka berfungsi untuk mengatur posisi atau letak tabel. Bila anda meletakkan attribut align ini di <p> maka berfungsi untuk mengatur posisi paragraf anda, dan sebagainya.

Di bawah ini adalah contoh tag penggunaan atribut align.

<html>

<head>

<title>Contoh Tabel</title>

</head>

<body>

<tr>

<td>

Ini adalah tabel 1 baris, 1 kolom

</td>

</tr>

</table>

</body>

</html>

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tabelnya akan ada di tengah.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Atribut Width pada Tabel

Praktek 2.5 Membuat Atribut Width pada Tabel

Atribut width dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th, tag td, maupun tag col). Jika diletakkan pada tag tabel, atribut ini berfungsi untuk mengatur lebar tabel secara keseluruhan. Namun jika diletakkan pada tag th atau td, atribut ini akan berfungsi untuk mengatur lebar kolom.

Untuk “memaksa” web browser menampilkan lebar tabel sesuai dengan yang diinginkan, kita dapat menambahkan atribut width pada tag table, seperti contoh berikut:

<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1 cellspacing=5 width=100%>
<tr>
<td>
Ini adalah tabel 1 baris, 1 kolom
</td>
</tr>
</table>
</body>
</html>

Screenshotnya seperti di bawah ini:

Setelah itu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Atribut Cellspacing pada Tabel

Praktek 2.3 Membuat Atribut Cellspacing pada Tabel

Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam dan luar.

Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan nilai cellspacing="5″, maka web browser akan menampilkan jarak sebesar 5 pixel di antara garis border tabel.

Contoh tag penggunaan atribut Cellspacing:

<html>

<head>

<title>Contoh Tabel</title>

</head>

<body>

<tr>

<td>

Ini adalah tabel 1 baris, 1 kolom

</td>

</tr>

</table>

</body>

</html>

Screenshotnya seperti di bawah ini.

Setelah diketik lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Dan nama filenya sesuai dengan keinginan anda tapi ekstensinya harus .html. Lalu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Tabel

Praktek 2.2 Membuat Tabel

Tabel adalah cara yang baik untuk menampilkan informasi secara teratur. Tabel digunakan untuk menampilkan record-record pada database.

<table> </table>
Di bawah ini contoh tag membuat tabel.

<html>
<head>
<title>Contoh Tabel</title>
</head>
<body>
<table border=1>
<tr>
<td>
Ini adalah tabel 1 baris, 1 kolom
</td>
</tr>
</table>
</body>
</html>

Screenshotnya seperti di bawah ini.

Setelah diketik lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Setelah disimpan, double klik untuk membuka file yang telah anda simpan tadi.

Lalu aplikasi browser akan terbuka dan menampilkan hasilnya seperti di bawah ini.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Link Dokumen atau Situs yang Lain

Praktek 2.1 Membuat Link Dokumen atau Situs yang Lain

Tag <a> </a> digunakan untuk membentuk suatu link ke dokumen atau sumber yang akan dimuat ketika user melakukan klik pada link tersebut.
HREF =“URL” menentukan URL dari resources yang akan ditampilkan setelah user melakukan klik padanya. Contoh:
<a href=“http://www.unmus.ac.id”> membuat link ke website UNMUS</a>

Contoh Membuat Link.
Ketikkan tag seperti di bawah pada HTML Text Editor. Di sini saya menggunakan aplikasi Sublime Text Build 3.

<html>
<head>
<title>Membuat Link</title>
</head>
<body>
Intranet adalah suatu jaringan private yang menggunakan produk dan teknologi internet. Salah satu teknologinya adalah web server. Intranet harus dilindungi dari pemakai internet luar dengan cara memasang firewall atau sama sekali tidak menghubungkan <a href=“http://yahoo.com”>Intranet</a> dengan dunia luar <a href=“http://google.com”>(Internet</a>.<p>
</body>
</html>

Screenshotnya seperti di bawah ini:

Setelah itu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan dengan nama, sesuai dengan yang anda kehendaki tapi dengan syarat harus ekstensinya .html Klik Save untuk menyimpan.

Double klik pada file yang telah tersimpan tadi.

Lalu akan aplikasi browser akan terbuka dan menampilkan hasilnya seperti di bawah. Akan ada tulisan berwarna biru dengan garis bawah, menandakan tulisan tersebut memiliki link yang terhubung dengan web lain.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Senin, 15 Agustus 2016

Praktek 2.8 Element Tabel Raw

Praktek 2.7 Membuat Warna Background pada Tabel

Praktek 2.6 Membuat Atribut Align pada Tabel

Praktek 2.5 Membuat Atribut Width pada Tabel

Praktek 2.3 Membuat Atribut Cellspacing pada Tabel

Praktek 2.2 Membuat Tabel

Praktek 2.1 Membuat Link Dokumen atau Situs yang Lain