Hai..... kembali lagi, tutorial membuat Web HTML dengan Notepad. Yok simak saja berikut artikel tutorialnya, simak dahulu pembuatan web langsung dari notepad.
Mengubah nama file :
1. Buatlah file contohnya di penyimpanan (E:) > kemudian klik kanan > new > notepad. Setelah itu klik kanan notepad tersebut kemudian rename yang sebelumnya .txt menjadi index.html berikut penjelasan gambarnya.
catatan : jika ada tanda seperti gambar diatas klik saja yes
2. Setelah selesai mari kita lanjut ke tutorial membuat Web dari HTML, klik kanan index.html tadi kemudian > open with > choose another app > Notepad.
3. Berikut ini contoh index html berupa codingan.
<b>Baris 1</b> <br><br>
<i>Baris 2</i> <br><br>
<u>Baris 3</u> <br><br>
<h1><b>Baris 1</b></h1>
<h2><i>Baris 2</i></h2>
<h6><u>Baris 3</u></h6>
<div style="margin-bottom:2px;">
<label>Angka 1</label>
<input type=number >
</div>
<div style="margin-bottom:2px">
<label>Angka 2</label>
<input type=number >
</div>
<div style="margin-bottom:2px;margin-left:60px">
<button>+</button>
<input type=button value=->
<button>x</button>
<input type=button value=:>
</div>
<div style="margin-bottom:2px">
<label>Hasil</label>
<input style=" margin-left:20px" type=number >
</div>
--------------------------------------------------
<style>
.panel1{
margin-bottom:20px;
}
</style>
<div class="panel1" >
<label>Angka 1</label>
<input type=number >
</div>
<div class="panel1" >
<label>Angka 2</label>
<input type=number >
</div>
<div class="panel1" style="margin-left:60px">
<button>+</button>
<input type=button value=->
<button>x</button>
<input type=button value=:>
</div>
<div class="panel1">
<label>Hasil</label>
<input style=" margin-left:20px" type=number >
</div>
--------------------------------------------------
<link rel="stylesheet" href="style.css">
<div class="panel2" >
<label>Angka 1</label>
<input type=number >
</div>
<div class="panel2" >
<label>Angka 2</label>
<input type=number >
</div>
<div class="panel2" style="margin-left:60px">
<button>+</button>
<input type=button value=->
<button>x</button>
<input type=button value=:>
</div>
<div class="panel2">
<label>Hasil</label>
<input style=" margin-left:20px" type=number >
</div>
untuk file css :
.panel2{
margin-bottom:10px;
}
Berikut hasil codingan diatas (gambar dibawah)
Sekian tutorial dari pembuatan Web melalui HTML
~ Selamat Mencoba ~
0 Komentar