How To Make Coding HTML
- Pengertian HTML
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
Berikut ini adalah beberapa contoh coding sederhana pada html.
A.TAMPILAN HALAMAN BERANDA
Laman, halaman muka atau beranda (Bahasa Melayu: laman, yakni "muka surat" atau
"halaman muka") kata laman dalam bahasa Indonesia sendiri berarti "halaman depan" atau "halaman
muka" yang bisa mengacu kepada halaman depan buku, surat, situs web, dan lain sebagainya.
Berikut ini adalah coding html sederhana untuk memebuat tampiln halman web.
Ø Coding
<html>
<head>
<title> Home </title>
</head>
<body body background="g.jpg">
<center>
<font face=arial size=6 color=red>
<b>.::Tabita Blog::.<br>
<font face=calibri size=4 color=white>
<i><marquee scrollamount=10>Hai...!!! Salam Kenal..!!!</marquee></i>
<hr>
| <a href = "Biodata.html">Menu 1</a>
| <a href = "Daftar Harga Kaos.html">Menu 2</a>
| <a href = "Pemesanan.html">Menu 3</a> |
<hr>
<font face=arial size=3 color=yellow>
<h1>Selamat datang di Website saya..</h1><br>
<img src="tabita.jpg" width="400px" height="300px" border="5"><br>
<p>Web saya ini berguna untuk publik,jadi gunakanlah.</p>
<p>Boleh anda memberikan kritik & saran untuk kebaikan web ini.</p>
<p>Jangan gunakan sembarangan.</p>
<font face=calibri size=4 color=white>
<u>Follow Saya:</u>
<li>Facebook >> Tabita Tyas Larasati</li>
<li>Instagram >> @tabitlaraasti_99</li>
<li>Blog >> tabitalasarati.blogspot.com</li><br>
<font face=calibri size=4 color=green>
</center>
</body>
</html>
- Ini tampialan dari coding di atas.
B.TAMPILAN TABEL BIODATA
Berikut ini ada coding html sederhana untuk membuat tampilan tabel biodata.
Ø Coding
<html>
<head>
<title>Biodata Saya</title>
</head>
<body body background="b.jpg" text="black">
<marquee><h3><b>~My Biodata~</b></h3></marquee>
<center>
<form action="#" style="width: 700px"class="posisi";>
<fieldset class="h"/>
<table style="width: "600px";height: "600px";border: "50">
<body style="background-color:cyan"></body>
</center>
<center>
<font size="25px">
<h2><b>BIODATA</b></h2>
</font>
</center>
<tr>
<td><b>: TABITA TYAS LARASATI</b></td>
</tr>
<tr>
<td><b>TEMPAT TANGGAL LAHIR</b></td>
<td><b>: KLATEN,27 MEI 2001</b></td>
</tr>
<tr>
<td><b>ALAMAT</b></td>
<td><b>: KLATEN,JAWA TENGAH</b></td>
</tr>
<tr>
<td><b>JENIS KELAMIN</b></td>
<td><b>: PEREMPUAN</b></td>
</tr>
<tr>
<td><b>GOLONGAN DARAH</b></td>
<td><b>: B</b></td>
</tr>
<tr>
<td><b>AGAMA</b></td>
<td><b>: KRISTEN<b></td>
</tr>
<tr>
<td rowspan="10" width="100px">
<center><img src="TAb.jpg" width="300px" height="400px" border="5"></center>
</td>
</tr>
</body>
</html>
- Ini tampialan dari coding di atas.
C. TAMPILAN
DAFTAR HARGA KAOS
Ø Coding
Berikut ini ada coding html sederhana untuk membuat tampilan daftar harga.
<html>
<head>
<title>Daftar Harga Kaos</title>
</head>
<body body background="d.jpg" text="red" >
<h1 align="center" text="red">KAOS DISTRO</h1>
<font face=calibri size=4 color=red>
<i><marquee scrollamount=10><h2>Online Tabitha Design</h2></marquee></i>
<center><img src="Banderoll.jpg" width="600px" height="500px" border="5"></center>
<br>
</font>
<center><table width="1000px" height="1000px" border="5"></center>
<hr align="nilai">
<br>
<h1 align="center">Daftar Harga Kaos</h1>
<tr align="center" bgcolor="yellow">
<td width="174">Gambar</td>
<td width="353">Ukuran</td>
<td width+"232">Harga</td>
</tr>
<tr align="center" bgcolor="cyan">
<td><h2>Kaos Polos Lengan Pendek</h2><br>
<center><img src="Lengan Pendek 1.jpg" width="400px" height="300px" border="5"></center></td>
<td><h2>S,M,L,XL</h2></td>
<td><h2>Rp 45.000,00</h2></td>
</tr>
<tr align="center" bgcolor="cyan">
<td><h2>Kaos Polos Lengan Panjang</h2><br>
<center><img src="Lengan Panjang 1.jpg" width="400px" height="300px" border="5"></center></td>
<td><h2>S,M,L,XL</h2></td>
<td><h2>Rp 75.000,00</h2></td>
</tr>
<tr align="center" bgcolor="cyan">
<td><h2>Kaos Polos Lengan Pendek Sablon</h2><br>
<center><img src="Lengan Pendek Sablon.jpg" width="400px" height="300px" border="5"></center></td>
<td><h2>S,M,L,XL</h2></td>
</tr>
<tr align="center" bgcolor="cyan">
<td><h2>Kaos Polos Lengan Panjang Sablon</h2><br>
<center><img src="Lengan Panjang Sablon.jpg" width="400px" height="300px" border="5"></center></td>
<td><h2>S,M,L,XL</h2></td>
<td><h2>Rp 85.000,00</h2></td>
</tr>
<tr align="center" bgcolor="cyan">
<td><h2>Sweater Sablon</h2><br>
<center><img src="Sweater.jpg" width="400px" height="300px" border="5"></center></td>
<td><h2>S,M,L,XL</h2></td>
<td><h2>Rp 150.000,00</h2></td>
</tr>
</table>
</body>
D.TAMPILAN
TABEL PEMESANAN
<html>
<head>
<title> Pemesanan </title>
</head>
<body body background="n.jpg" text="white">
<center>
<form action=”proses.php” method=”post”>
<table>
<tr>
<td colspan=”3" align=”center”>
<h1>PEMESANAN BARANG</h1></td>
</tr>
<center><img src="Banderoll.jpg" width="500px" height="400px" border="5"></center>
<tr>
<td><h4>Nama</h4></td>
<td>:</td>
<td><input type=”text” name=”Nama”></td>
</tr>
<tr>
<td><h4>Email</h4></td>
<td>:</td>
<td><input type=”text” name=”Email”></td>
</tr>
<tr>
<td><h4>Nomor Telepon</h4></td>
<td>:</td>
<td><input type=”text” name=”Nomor Telepon”></td>
</tr>
<tr>
<td><h4>Alamat</h4></td>
<td>:</td>
<td><input type=”text” name=”Alamat”></td>
</tr>
<tr>
<td></h4><b>Jumlah Barang</b></h4></td>
<td>:</td>
<td><input type=”text” name=”Jumlah Barang”></td>
</tr>
</center>
<tr>
<td></td><td><input type="submit" value="kirim"/></td>
</tr>
</table>
</form><br>
<h1>Info Lebih Lanjut Hubungi :</h1><br>
<i><h2>Contac person : 087 889 157 140; Email : tabita.larasati27@gmail.com; Alamat : Jl.Suka-Suka</h2></i><br>
</body>
- Ini tampialan dari coding di atas.
Semoga Bermanfaat
~Sekian~
