- Buka aplikasi Sublime Text 3
- Klik view lalu pilih syntax akan muncul jendela baru, pilih bahasa pemrograman yang akan digunakan.
- Pada index.html tulis syntax seperti dibawah ini
<html>
<head>
<title>DATA DIRI</title>
<link rel="stylesheet" type="text/css"
href="style.css">
<style type="text/css">
p{
font-size: 25px;
font-style: italic;
}
</style>
</head>
<body>
<div id="pagewrep">
<div id="header">FORM DATA
ALAMAT</div>
</div>
<button
onclick="document.getElementById('Ortu').style.color = 'yellow'"
type="button">
Yellow</button>
<button
onclick="document.getElementById('Ortu').style.color = 'red'"
type="button">
Merah</button>
<button
onclick="document.getElementById('Ortu').style.color = 'blue'"
type="button">
Biru</button>
<button
onclick="document.getElementById('Ortu').style.color = 'green'"
type="button">
Hijau</button>
<h2 id="Ortu">
SELAMAT DATANG WAHAI
NETIZEN</h2>
<p>
Hallo teman, ini website alamat tempat tinggal teman-teman dan ke
dua ortu.
mohon diisi dengan lengkap dan tepat yaa. Salam pecinta website.
</p>
<form action="" method="POST">
<table border="1" cellpadding="5"
cellspacing="5" align="left" width="50%">
<tr>
<td colspan="2">
<b>ALAMAT PRIBADI</b>
</td>
</tr>
<td width="25%">PROVINSI</td>
<td>
<select name="provinsi"
class="inputtext">
<option>Provinsi</option>
<option value="Nangro Aceh
Darussalam">Nangro Aceh Darussalam</option>
<option value="Bali">Bali</option>
</select>
</td>
</tr>
<tr>
<td width="25%">KABUPATEN/KOTA</td>
<td>
<select name="provinsi"
class="inputtext">
<option>Provinsi</option>
<option value="Aceh Barat Daya Kab.">Aceh
Barat Daya Kab.</option>
<option value="Aceh Barat Kab.">Aceh Barat
Kab.</option>
<option value="Aceh Besar Kab.">Aceh Besar
Kab.</option>
<option value="Aceh Jaya Kab.">Aceh Jaya
Kab.</option>
<option value="Aceh Selatan Kab.">Aceh
Selatan Kab.</option>
<option value="Aceh Singkil Kab.">Aceh
Singkil Kab.</option>
</td>
</tr>
<tr>
<td width="25%">KECAMATAN</td>
<td>
<select name="kecamatan"
class="inputtext">
<option>Kecamatan</option>
</select>
</td>
</tr>
<tr>
<td width="25%">DESA/KELURAHAN</td>
<td>
<select name="desa/kelurahan"
class="inputtext">
<option>Desa/Kelurahan</option>
</select>
</td>
</tr>
<tr>
<td>DUSUN/KAMPUNG</td>
<td><input
type="text" name="dusun" class="inputtext col3"
placeholder="DUSUN/KAMPUNG"></td>
</tr>
<tr>
<td>RT/RW</td>
<td><input
type="text" name="rtrw" class="inputtext col3"
placeholder="RT/RW"></td>
</tr>
<tr>
<td>JALAN</td>
<td><input
type="text" name="jalan" class="inputtext col3"
placeholder="JALAN"></td>
</tr>
</table>
</form>
<form action=""
method="POST">
<table border="1"
cellpadding="5" cellspacing="5" width="50%"
align="right">
<tr>
<td colspan="2">
<b>ALAMAT ORANG TUA</b>
</td>
</tr>
<td width="25%">PROVINSI</td>
<td>
<select name="provinsi"
class="inputtext">
<option>Provinsi</option>
<option value="Nangro Aceh
Darussalam">Nangro Aceh Darussalam</option>
<option value="Bali">Bali</option>
<option value="Bangka Belitug">Bangka
Belitung</option>
<option value="Banten">Banten</option>
<option
value="Bengkulu">Bengkulu</option>
<option
value="Gorontalo">Gorontalo</option>
<option
value="Jakarta">Jakarta</option>
<option value="Jambi">Jambi</option>
<option value="Jawa Barat">Jawa
Barat</option>
<option value="Jawa Timur">Jawa
Timur</option>
<option value="Jawa Tengah">Jawa
Tengah</option>
<option value="Kalimantan Barat">Kalimantan
Barat</option>
<option value="Kalimantan
Selatan">Kalimantan Selatan</option>
<option value="Kalimantan Tengah">Kalimantan
Tengah</option>
<option value="Kalimantan Timur">Kalimantan
Timur</option>
<option value="Kalimantan Utara">Kalimantan
Utara</option>
<option value="Kepulauan Riau">Kepulauan
Riau</option>
<option
value="Lampung">Lampung</option>
<option value="Maluku">Maluku</option>
<option value="Maluku Utara">Maluku
Utara</option>
<option value="Nusa Tenggara Barat">Nusa
Tenggara Barat</option>
<option value="Nusa Tenggara Timur">Nusa
Tenggara Timur</option>
<option value="P2pua">Papua</option>
<option value="Papua Barat">Papua
Barat</option>
<option value="Riau">Riau</option>
<option value="Sulawesi Barat">Sulawesi
Barat</option>
<option value="Sulawesi Selatan">Sulawesi
Selatan</option>
<option value="Sulawesi Tengah">Sulawesi
Tengah</option>
<option value="Sulawesi Tenggara">Sulawesi
Tenggara</option>
<option value="Sulawesi Utara">Sulawesi
Utara</option>
<option value="Sumatra Barat">Sumatra
Barat</option>
<option value="Sumatra Selatan">Sumatra
Selatan</option>
<option value="Sumatra Utara">Sumatra
Utara</option>
<option value="Daerah Istimewa
Yogyakarta">Daerah Istimewa Yogyakarta</option>
</select>
</td>
</tr>
<tr>
<td width="25%">KABUPATEN/KOTA</td>
<td>
<select name="provinsi"
class="inputtext">
<option>Provinsi</option>
<option value="Aceh Barat Daya Kab.">Aceh
Barat Daya Kab.</option>
<option value="Aceh Barat Kab.">Aceh Barat
Kab.</option>
<option value="Aceh Besar Kab.">Aceh Besar
Kab.</option>
<option value="Aceh Jaya Kab.">Aceh Jaya
Kab.</option>
<option value="Aceh Selatan Kab.">Aceh
Selatan Kab.</option>
<option value="Aceh Singkil Kab.">Aceh
Singkil Kab.</option>
</td>
</tr>
<tr>
<td width="25%">KECAMATAN</td>
<td>
<select name="kecamatan"
class="inputtext">
<option>Kecamatan</option>
</select>
</td>
</tr>
<tr>
<td width="25%">DESA/KELURAHAN</td>
<td>
<select name="desa/kelurahan"
class="inputtext">
<option>Desa/Kelurahan</option>
</select>
</td>
</tr>
<tr>
<td>DUSUN/KAMPUNG</td>
<td><input
type="text" name="dusun" class="inputtext col3"
placeholder="DUSUN/KAMPUNG"></td>
</tr>
<tr>
<td>RT/RW</td>
<td><input
type="text" name="rtrw" class="inputtext col3"
placeholder="RT/RW"></td>
</tr>
<tr>
<td>JALAN</td>
<td><input
type="text" name="jalan" class="inputtext col3"
placeholder="JALAN"></td>
</tr>
</table>
</form>
</body>
</html>
- Pada style.css tulis syntax seperti dibawah ini
#pagewrep{
width: 1024px; margin: 0
auto;
}
#header{
width: 1024px;
height: 100px;
line-height: 100px;
color: yellow;
text-align: center;
font-size: 100px;
background-color: yellow;
color: black;
text-shadow: 2px 2px 5px
orange;
}
#footer{
width: 100%;
height: 70px;
background-color: blue;
float: center;
}- Tampilan
Tampilan awal saat membuka html
Tampilan tulisan yang akan berubah warna jika menekan salah satu button
Tampilan tulisan dengan format italic(huruf miring) dan paragraf
