Pada pertemuan ke 2
masih dalam mempelajari HTML dengan materi sebagai berikut:
- Link
- Table
- Form
Seperti pada sebelumnya
hal yang pertama dilakukan ialah :
- Buka aplikasi Notepad
Start – klik Notepad
- Buat ketiga struktur HTML
<html>
<head>
</head>
<body>
</body>
</html>
- Simpan kode dengan nama yang diinginkan, ingat untuk membuat “.html”
- Buka file yang telah disimpan melalui web browser apa saja
- LINK
Syntax:
<a href=>
</a>
a= anchor
Href = Hyperlink
reference
Cth penggunaan:
<a href = produk.html> produk
</a>
PENERAPAN CODING:
<html>
<head>
<title> Pertemuan II</title>
</head>
<body>
<h1>
Utama </h1>
<hr>
<a
href=Produk.html>Produk</a>
<a
href=Kontak.html>Kontak</a>
<a
href=Login.html>Login</a>
</body>
</html>
Maka akan muncul tampilan dalam web browser seperti
di bawah:
Untuk memasukkan isi ke dalam “Produk” , buka notepad baru lalu ketikkan seperti berikut:
<html>
<head>
<title> Produk</title>
</head>
<body>
<h1>
Produk </h1>
<hr>
Daftar
Produk Kami : <br>
<ol> *<ol> :ordered list(Daftar
beraturan)
<li>
Laptop </li>
<li>
Notepad </li>
<li>
Printer </li>
<li>
Scanner </li>
<li>
Ink </li>
</ol>
Jenis-Jenis
Laptop Yang Tersedia <b>
<ul> *<ul> :Unordered list(Daftar
Tidak beraturan)
<li> Acer </li>
<li> Toshiba </li>
<li> Del </li>
<li> Asus </li>
<li> Lenovo </li>
<li> Axioo </li>
</ul>
</body>
</html>
*Simpan
dengan nama “Produk” agar saat link
“produk” di klik isi nya bisa tampil
Maka akan muncul tampilan dalam web browser saat
Produk di klik ,seperti di bawah:
Untuk memasukkan isi ke dalam “Kontak” , buka notepad baru lalu ketikkan seperti berikut:
<html>
<head>
<title> Kontak</title>
</head>
<body>
<h1>
Kontak </h1>
<hr>
Hubungi
Kami di: <br>
<pre>
web:
www.joycomputer.com
email:
joycomp@gmail.com
joycomp@yahoo.com
WA :
087123456
Fan Page :
joycomp
</pre>
</body>
</html>
*Simpan
dengan nama “Produk” agar saat link
“produk” di klik isi nya bisa tampil
Maka akan muncul tampilan dalam web browser saat
Produk di klik ,seperti di bawah:
2.TABLE
Syntax:
<table>
<tr>
<td>
</td>
</tr>
</table>
<td> : table data
<tr> :table row
PENERAPAN CODING:
<html>
<head>
<title> Pertemuan II</title>
</head>
<body>
<h1>
Belajar Tabel </h1>
<table
border=1px
bgcolor=pink width = 800px
align=
center>
<tr>
<td
align=center> No </td>
<td
align=center> Nim </td>
<td
align=center> Nama </td>
<td
align=center> Alamat </td>
<td
align=center> Foto </td>
</tr>
<tr>
<td
align=center> 1 </td>
<td> 180810011 </td>
<td> Yuli </td>
<td> Gg Bersama No 2A </td>
<td
align=center> <img src=EXO.jpg> </td>
</tr>
<tr>
<td
align=center> 2 </td>
<td> 180810032 </td>
<td> Rona </td>
<td> Gg Bunga Sedap Malam</td>
<td
align=center> <img src=EXO.jpg> </td>
</tr>
<tr>
<td
align=center> 3 </td>
<td> 180810028 </td>
<td> Margaretha </td>
<td> Villa Setia Budi </td>
<td
align=center> <img src=EXO.jpg> </td>
</tr>
<tr>
<td
align=center> 4 </td>
<td> 180810030 </td>
<td> Fransiska </td>
<td> Gg Kamboja </td>
<td
align=center> <img src=EXO.jpg> </td>
</tr>
<tr>
<td
align=center> 5 </td>
<td> 180810040 </td>
<td> Rudi </td>
<td>
Gg Horas </td>
<td
align=center> <img src=EXO.jpg> </td>
</tr>
</table>
</body>
</html>
Maka akan muncul tampilan dalam web browser seperti
di bawah:
3.FORMULIR
Formulir adalah objek yang dgunakan
untuk memasukkan data
ke dalam computer.
Syntax:
<form> </form>
PENERAPAN CODING:
<html>
<head>
<title> Form </title>
</head>
<body>
<h1> Belajar Form </h1>
<hr>
<form>
<table>
<tr>
Input Data Mahasiwa<br>
<tr>
<td> Nim</td>
<td> : </td>
<td> <input type= text size=
9 name=txtnim</td>
</tr>
<tr>
<td> Nama</td>
<td> : </td>
<td> <input type= text size=
30 name=txtnama</td>
</tr>
<tr>
<td> Alamat</td>
<td> : </td>
<td> <input type= text size=
30 name=alamat</td>
</tr>
</table>
<input type= submit value =
Simpan>
<input type= reset value =
Batal> </tr>
</form>
</body>
</html>
Maka akan muncul tampilan dalam web browser seperti
di bawah:
Terimakasih untuk kunjungan anda
Please like 💜, comment and share
Semoga Bermanfaat dan selamat mencoba 😊😊
Tidak ada komentar:
Posting Komentar