Untuk selanjutnya kita akan bahas lebih lanjut beberapa tag dalam html.
untuk menambahkan garis baru dalam html kita menggunakan tag tunggal yaitu
<br/>
maka tulisan akan di mulai dari garis baru.
contoh:
<!DOCTYPE html>
<html>
<head>
<title>Garis baru</title>
</head>
<body>
<h2>ini adalah contoh penulisan garis baru</h2>
ini adalh baris pertama<br/>
dan ini adalah baris kedua<br/>
ini adalah baris ketiga<br/>.
</body>
</html>
Dan untuk membuat garis horizontal adalah dengan tag <hr/>
contoh:
<!DOCTYPE html>
<html>
<head>
<title>membuat garis horizontal</title>
</head>
<body>
di bawah ini merupakan garis horizontal<br/>
<hr/>
tulisan ini berada di bawah garis
</body>
</html>
memasukan link dengan tag <a href="url">link</a>
<!DOCTYPE html>
<html>
<head>
<title>memasukan link</title>
<body>
tulisan dalam tanda kutip berikut ini berisikan link<a href="http://geovoltz.blogspot.com">"blognya annida naila"</a>
</body>
</html>
masukan link anda dalam tanda kutip pada <a href="">
lalu masukan kata/kalimat yang akan anda isi dengan tulisan setelah kurung tutup >.
contoh:
<a href="http://linkanda.com">link anda</a>
jangan lupa untuk menutup tag dengan </a>
membuat button.
membuat button dengan tag <button></button>
contoh:
<!DOCTYPE html>
<html>
<head>
<title>membuat button</title>
<body>
<h2>Cara membuat button</h2>
di bawah ini merupakan button.
<button>ini adalah button</button>
</body>
</html>
jika anda ingin memasukan link pada button anda tinggal mengisi link di antara tab button
contoh
<!DOCTYPE html>
<html>
<head>
<title>memasukan link pada button</title>
<body>
<h2>memasukan link pada button</h2>
di bawah ini merupakan button berisi link<br/>
<button><a href="http://geovoltz.blogspot.com>button ini berisi link</a>
</body>
</html>
Membuat list
ada dua jenis list,yaitu list dengan titik,dan list dengan angka.
adapun tagnya adalah <ul> dan <ol>
contoh:
<!DOCTYPE html>
<html>
<head>
<title>membuat list</title>
<body>
ini adalah list:
<ul>
<li>list pertama</li>
<li>list kedua</li>
<li>list ketiga</li>
<li>dst</li>
</ul>
ini adalah list berikutnya:
<ol>
<li>list pertama</li>
<li>list kedua</li>
<li>list ketiga</li>
<li>dst</li>
</ol>
itu adalah contoh list
</body>
</html>
membuat table.
cara membuat table dengan html adalah sebagai berikut.
contoh:
table tanpa border:
<!DOCTYPE html>
<head>
<title>cara membuat table</title>
<body>
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br/>
<br/>
ini adalah table tanpa border
</body>
</html>
Cara membuat table dengan border:
<!DOCTYPE html>
<html>
<head>
<title>table dengan border</title>
</head>
<body>
<table border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>
</body>
</html>
border dapat anda rubah sesuai kebutuhan,juga dengan ukurannya.
untuk mengganti ukuran nya anda tinggal menambahkan widht dan height.
<table border="1" width="30%" height="30%">
untuk menggabungkan colom menjadi satu tambahkan colspan pada colom yang ingin anda gabungkan.
contoh:
<!DOCTYPE html>
<html>
<head>
<title>border dengan colspan</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">cell 1>
</tr>
<tr>
<td>cell a</td>
<td>cell b</td>
<td>cell c</td>
</tr>
<tr>
<td>cell e</td>
<td>cell f</td>
<td>cell g</td>
</tr>
</table>
</body>
</html>
untuk menggabungkan baris anda tinggal menambahkan rowspan pada colom yang mau anda gabungkan.
contoh:
<!DOCTYPE html>
<html>
<head>
<title>table dengan rowspan</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3>cell 1</td>
<td>cell a</td>
</tr>
<tr>
<td>cell b</td>
</tr>
<tr>
<td>cell c</td>
</tr>
</table>
</body>
</html>
Memasukkan gambar pada dokumen html
kita dapat mengupload sebuah gambar ke hosting dengan sesuka hati kita,tapi di perlukan kode html
untuk menampilkannya pada halaman yang anda mau,karena kita tidak dapat menguploadnya langsung ke
halaman html anda,caranya adal;ah sebagai berikut.
contoh:
<img src="http://websiteanda.com/folder/gambar.jpg" alt="gambar.jgg"/>
alt ini berfungsi pada saat gambar gagal loading maka tulisan di dalam alt yang akan di tampilkan.
sekian dulu pembahasan mengenai html.
untuk detail halaman akan kita pelajari selanjutnya dalam CSS.
terimkakasih.
semoga bermanfaat.
0 komentar:
Posting Komentar