Materi Tentang HTML Part 4

Oleh -
Tabel Pada HTML

Materi Tentang HTML Part 4



Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi beberapa baris (dengan tag <tr>), dan setiap baris di bagi menjadi beberapa kolom (dengan tag <td>). Td kependekan dari "Table data" yang berarti tempat menyimpan data (data cell). Sebuah cell data dapat beruapa teks, image, list, paragraf, form, table, dan lain lain.

Contoh :

<table border="1">
<tr>
<th> Nama </th>
<th> Alamat </th>
</tr>
<tr>
<td> Pilip </td>
<td> Cikarang </td>
</tr>
<tr>
<td> Oktan </td>
<td> Bekasi </td>
</tr>
<tr>
<td> Noel </td>
<td> Jakarta </td>
</tr>
</table>

Hasil :


Materi Tentang HTML Part 4



Colspan
Digunakan untuk menggabungkan kolom.

Contoh :

<table border="1">
<tr>
<th> Hari </th>
<th colspan="3"> Kuliah </th>
</tr>
<tr>
<td> Senin </td>
<td> web Design </td>
<td> Aplikasi Web </td>
<td> Database </td>
</tr>
</table>

Hasil :


Materi Tentang HTML Part 4



Rowspan
Digunakan untuk menggabungkan baris.

Contoh :

<table border="1">
<tr>
<th> Hari </th>
<td> Senin </td>
</tr>
<tr>
<th rowspan="3"> Kuliah </th>
<td> Web Design </td>
</tr>
<tr>
<td> Aplikasi Web </td>
</tr>
<tr>
<td> Database </td>
</tr>
</table>

Hasil :


Materi Tentang HTML Part 4


Cellpadding
Digunakan untuk mengatur padding cell (jarak antara border dengan konten).

Contoh :

<table border="1" cellpadding="5">
<tr>
<th> Hari </th>
<td> Senin </td>
</tr>
<tr>
<th rowspan="3"> Kuliah </th>
<td> Web Design </td>
</tr>
<tr>
<td> Aplikasi Web </td>
</tr>
<tr>
<td> Database </td>
</tr>
</table>

Hasil :


Materi Tentang HTML Part 4



Cellspacing
Digunakan untuk memberikan jarak antar cell.

Contoh :

<table border="1"  cellpadding="5" cellspacing="5">
<tr>
<th> Hari </th>
<td> Senin </th>
</tr>
<tr>
<th rowspan="3"> Kuliah </th>
<td> Web Design </td>
</tr>
<tr>
<td> Aplikasi Web </td>
</tr>
<tr>
<td> Database </td>
</tr>
</table>

Hasil :


Materi Tentang HTML Part 4


Background warna
Untuk memberikan background warna pada tabel dengan menggunakan bgcolor.

Contoh :

<table border="1" bgcolor="green">
<tr>
<th> Hari </th>
<td> Senin </th>
</tr>
<tr>
<th rowspan="3"> Kuliah </th>
<td> Web Design </td>
</tr>
<tr>
<td> Aplikasi Web </td>
</tr>
<tr>
<td> Database </td>
</tr>
</table>

Hasil :


Materi Tentang HTML Part 4


Warna border
Untuk memberikan warna pada border dengan menggunakan bordercolor.

Contoh :

<border="1" bordercolor="red">
<tr>
<th> Hari </th>
<td> Senin </th>
</tr>
<tr>
<th rowspan="3"> Kuliah </th>
<td> Web Design </td>
</tr>
<tr>
<td> Aplikasi Web </td>
</tr>
<tr>
<td> Database </td>
</tr>
</table>

Hasil :


Materi Tentang HTML Part 4




Gambar Pada HTML




Gambar didalam suatu web page meruapakan daya penarik bagi pengunjung suatu website. Pada umumnya website di lengkapi dengan gambar - gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu website. Setiap gambar akan butuh waktu tambahan untuk download dan memperlambat awal penampilan suatu dokumen dalam browser. Untuk itu perlu hati - hati dalam menyertakan gambar dalam dokumen website. Untuk menyertakan sebuah image dalam dokumen web adalah <img src="nama_image">.

Contoh :

<img src="gambar.png" width="200px" height="200px">

<img src="gambar.jpg" width="200px" height="200px">

Hasil :




Image border
Untuk memberikan border atau bingkai pada sebuah gambar.

Contoh :

<img src="gambar.png" border="5" width="200px" height="200px">

Hasil :




Image Alignment
Mengatur gambar rata kiri (left), tengah (center), kanan (right).

Contoh :

<img src="gambar.png" align="right" width="100px" height="100">

Hasil :




Ok Terimakasih Karna Telah Mengunjungi Blog Ini. Semoga Bermanfaat Untuk Kalian Semua. Dan Untuk Part 5 Akan Di Upload Besok.

Lokasi: Cikarang, Bekasi, Jawa Barat, Indonesia
Hai perkenalkan nama saya Pilip Mulyadi. Saya adalah seorang siswa kelas 11 dan saya mengambil jurusan TKJ.

Comments

Post a Comment

Popular posts from this blog

Cara Mudah Download Video Dari Youtube

Oleh -
Image
Cara Download Video Dari Youtube Pada kesempatan kali ini saya akan menjelaskan atau berbagi tutorial cara download video dari Youtube , ada dua macam cara download video youtube dengan mudah tapi sebenarnya ada banyak cara untuk download video dari Youtube . Ok tanpa basa - basi lagi mari kita ke tutorialnya... A). Cara Download Video Youtube Part 1 Untuk download video Youtube bagian yang pertama menggunakan (SaveFrom) kalian harus mengikuti langkah langkah berikut ini ! 1). Buka Aplikasi Youtube Langkah yang pertama adalah kalian harus membuka aplikasi Youtube Kalian untuk mendownload video yang ingin kalian download. Setelah kalian sudah mencari video yang ingin kalian download silahkan klik video tersebut terlebih dahulu, contohnya seperti gambar di bawah ini ! Pada gambar dia atas adalah sebuah contoh cara mendownload video dari Youtube dan jika kalian sudah memilih video yang ingin kalian download silahkan klik bagikan seperti contoh gambar di atas yang di tunjukkan oleh panah ...
Read more

Cara Membuat Absen Dengan HTML Dan CSS

Oleh -
Image
Membuat Absen Dengan HTML & CSS Pasti kalian sudah tau bentuk absen pada umunya itu seperti apa. Kali ini saya akan memberikan tutorial bagaimana cara membuat Absen dengan HTML dan CSS. waktu di HTML Part 4 kalian sudah belajar bagaimana cara membuat tabel. Dan berikut adalah Codingnya : <!DOCTYPE html> <html> <head> <style> div.a {text-align: center;} body {background-color:gray;} td { font-weight: bold;        text-shadow: 1px 1px 3px;        color: red;        background-color: deepskyblue;} table {border: 7px solid red;} </style> </head> <body> <div class="a"> <table border="10"cellpadding="5"> <tr> <th colspan="3" style="color:red; background-color: yellow;"> Masukan Nama Jurusan </th> <th rowspan="2" bgcolor="orange"> Check </th> </tr> <tr> <th style="color:red; background-color:lime;"> Nama </...
Read more

Cara membuat kalkulator dengan HTML dan CSS

Oleh -
Image
Cara Membuat Kalkulator       Hai teman-teman perkenalkan nama saya Pilip Mulyadi, saya adalah seorang siswa kelas 11 dan saya mengambil jurusan TKJ atau yang disebut dengan (Teknik Komputer dan jaringan). Saya suka sekali dengan web desain dan pada kesempatan kali ini saya akan memberikan sebuah materi yang berisi tentang HTML dan CSS. Semoga dengan ilmu yang saya bagikan kepada kalian semua bermanfaat.      Ok teman - teman di kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat kalkulator. Kita sudah tahu bagaimana bentuk dari sebuah kalkulator. Kalkulator ini bisa berfungsi seperti kalkulator pada umumnya. Untuk membuat kalkulator di html, kalian harus menyediakan editor teks/Notepad dan simpan dengan format html. Daripada kalian penasaran coding htmlnya seperti apa, berikut dibawah inilah codingnya : <html> <head> <style> body { background-color: gray;} div.a {text-align: center;} div.b {text-align: left;} .ckr { w...
Read more