Contoh 1 Menyisipkan gambar pada perataan teks tengah
<html>
<head>
<title>Latihan Memasukkan Gambar Ke HTML</title>
</head>
<body>
<h1>Memasukkan Gambar</h1>
<div class="separator" style="clear:both;
text-align:center;">
<img src="Gluten-free-chocolate-Nutella-cupcakes-close-up-21.jpg"
width="120" height="120"/></div>
</body>
</html>
Contoh 2. Menyisipkan gambar pada perataan teks kiri
<html>
<head>
<title>Latihan Memasukkan Gambar Ke HTML</title>
</head>
<body>
<h1>Memasukkan Gambar</h1>
<div class="separator" style="clear:both;
text-align:left;">
<img src="Gluten-free-chocolate-Nutella-cupcakes-close-up-21.jpg"
width="120" height="120"/></div>
</body>
</html>
Contoh 3. Meyisipkan gambar
pada perataan teks kanan
<html>
<head>
<title>Latihan Memasukkan Gambar Ke HTML</title>
</head>
<body>
<h1>Memasukkan Gambar</h1>
<div class="separator" style="clear:both;
text-align:right;">
<img src="Gluten-free-chocolate-Nutella-cupcakes-close-up-21.jpg"
width="120" height="120"/></div>
</body>
</html>
Contoh 4. Menyisipkan dua gambar dengan perataan teks tengah dan
warna tulisan dokumen ungu
<html>
<head>
<title>Latihan Memasukkan Gambar Ke HTML</title>
</head>
<body text="purple"bgcolor="white">
<h1>Memasukkan Gambar</h1>
<div class="separator" style="clear:both;
text-align:center;">
<img src="Gluten-free-chocolate-Nutella-cupcakes-close-up-21.jpg"
width="120" height="120"/></div>
<div class="separator" style="clear:both;
text-align:center;">
<img src="chocolate_cake_linda_robertson__15108784af.jpg"
width="120" height="120"/></div>
</body>
</html>
Contoh 5. Menyisipkan 2 gambar dengan 1 gambar perataan teks kanan
dan 1 gambar perataan teks tengah.
<html>
<head>
<title>Latihan Memasukkan Gambar Ke HTML</title>
</head>
<body text="blue"bgcolor="white">
<h1>Memasukkan Gambar</h1>
<div class="separator" style="clear:both;
text-align:right;">
<img src="Gluten-free-chocolate-Nutella-cupcakes-close-up-21..jpg"
width="120" height="120"/></div>
<div class="separator" style="clear:both;
text-align:center;">
<img src="chocolate_cake_linda_robertson__15108784af.jpg"
width="120" height="120"/></div>
</body>
</html>
Contoh 1. Membuat table dengan perataan teks tengah
<html>
<head>
<meta http-equiv="Content-Language"
content="id">
<meta http-equiv="Content-Type"
content="text/html;charset=windows-1252">
<title>CARA MEMBUAT TABLE MENGGUNAKAN HTML</title>
</head>
<body>
<p>DATA SISWA KELAS XI.IPA.1</p>
<table border="2"width="100%">
<tr>
<td
width="285"align="center">NAMA</td>
<td
width="250"align="center">TANGGAL LAHIR</td>
<td
align="center">ALAMAT</td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td> </td>
</tr>
</body>
</html>
Contoh 2. Mengisi Data pada table yang telah dibuat
<html>
<head>
<meta http-equiv="Content-Language"
content="id">
<meta http-equiv="Content-Type"
content="text/html;charset=windows-1252">
<title>CARA MEMBUAT TABLE MENGGUNAKAN HTML</title>
</head>
<body>
<p>DATA SISWA KELAS XI.IPA.1</p>
<table border="2"width="100%">
<tr>
<td
width="285"align="center">NAMA</td>
<td
width="250"align="center">TANGGAL LAHIR</td>
<td
align="center">ALAMAT</td>
</tr>
<tr>
<td
width="285"align=”center”>Azura Kamal</td>
<td
width="250"align=”center”>01 September 1997</td>
<td
align=”center”>Jl. Sextor 13 no.28 ciledug tangerang</td>
</tr>
<tr>
<td
width="285"align=”center”>Regita Christy Purbasari</td>
<td
width="250"align=”center”>05 Agustus 1997</td>
<td
align=”center”>Jl.cipondoh</td>
</body>
</html>
Contoh 3. Membuat table menggunakan perataan teks kanan dan warna
tulisan
<html>
<head>
<meta http-equiv="Content-Language"
content="id">
<meta http-equiv="Content-Type"
content="text/html;charset=windows-1252">
<title>CARA MEMBUAT TABLE MENGGUNAKAN HTML</title>
</head>
<body text=”white”bgcolor=”pink>
<p>DATA SISWA KELAS XI.IPA.1</p>
<table border="4"width="100%">
<tr>
<td
width="285"align="right">NAMA</td>
<td
width="250"align=”right">TTL</td>
<td
align="right">ALAMAT</td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td> </td>
</tr>
</body>
</html>
Contoh 4. Membuat table dengan 4 kolom dan 4 baris
<html>
<head>
<meta http-equiv="Content-Language"
content="id">
<meta http-equiv="Content-Type"
content="text/html;charset=windows-1252">
<title>CARA MEMBUAT TABLE MENGGUNAKAN HTML</title>
</head>
<body>
<p>DATA SISWA KELAS XI.IPA.1</p>
<table border="2"width="100%">
<tr>
<td
width="285"align="center">NAMA</td>
<td
width="250"align="center">TANGGAL LAHIR</td>
<td
width=”215”align=”center”>NO. HANDPHONE</td>
<td
align="center">ALAMAT</td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215” </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
</body>
</html>
Contoh 5. Membuat table dengan 4 kolom dan 10 baris
<html>
<head>
<meta http-equiv="Content-Language"
content="id">
<meta http-equiv="Content-Type"
content="text/html;charset=windows-1252">
<title>CARA MEMBUAT TABLE MENGGUNAKAN HTML</title>
</head>
<body>
<p>DATA SISWA KELAS XI.IPA.1</p>
<table border="2"width="100%">
<tr>
<td
width="285"align="center">NAMA</td>
<td
width="250"align="center">TANGGAL LAHIR</td>
<td
width=”215”align=”center”>NO. HANDPHONE</td>
<td
align="center">ALAMAT</td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
<tr>
<td
width="285"> </td>
<td
width="250"> </td>
<td
width=”215”> </td>
<td> </td>
</tr>
</body>
</html>
0 komentar:
Posting Komentar