Membuat Desain Website Berbasis HTML Dengan Notepad++
Halo guys :) kamu lagi nyari tutorial membuat Website berbasis HTML ??? Di sini saya akan bagi infonya. Langsung aja yuk di simak! Semoga bermanfaat yaa
1. Membuat judul tab
dalam halaman web =>
buka notepad++ terlebih dahulu, kemudian ketikan code
dibawah ini :
<html>
<head>
<title> My First HTML Project </title>
</head>
<body
BGCOLOR=“Green” TEXT=“Red”>
WELCOME TO MY WEBSITE
</body>
<body
bgcolor=”#00ff00”>
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar berikut :
2. Mengatur paragraf
texs, buka notepad++ kemudin ketikan code dibawah ini:
<html>
<head>
<title>
Tag P, Br dan Hr </title>
</head>
<body>
<p>Ini
adalah paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga.
<br><br></p>
<p>Ini
adalah paragraf kerdua, yang berisi garis horizontal</p>
<hr> Ini
adalah garis horizontal.
</body>
<body
bgcolor=”#00ff00”>
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar berikut :
3. Mengatur ukuran
huruf, buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title>
Tag Heading </title>
</head>
<body>
<h1>
Heading 1 </h1>
<h2>
Heading 2 </h2>
<h3>
Heading 3 </h3>
<h4>
Heading 4 </h4>
<h5>
Heading 5 </h5>
<h6>
Heading 6 </h6>
</body>
<body
bgcolor=”#00ff00”>
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar berikut :
4. Mengatur format texs,
Buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title>format
tulisan</titele>
</head>
<body>
teks normal
<br>
<small>
teks small </small><br>
<big>
teks big</big><br>
<b>
teks tebal </b><br>
<i>
teks miring </i><br>
<u>
teks bergaris bawah </u><br>
Contoh
superscript : x <sup>2</sup><br>
Contoh
subscript : H<sub>2</sub>O<br>
<strike>
Ini teks tercoret </strike><br>
<font
size = 5 face = verdana>
menggunakan
tag font
</font>
</body>
<body
BGCOLOR ="#00FF00">
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar berikut :
5. Membuat from
komentar, buka notepad++, kemudian ketikan code dibawah ini:
<html>
<head>
<title> From komentar </title>
</head>
<body>
<table>
<tr>
<tdcolspan="3"> </td></tr><tr>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input
type=text name="nama"></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input
type=text name="email"></td>
</tr>
<tr>
<td
valign=top>Komentar</td>
<td
valign=top>:</td>
<td><textarea
name="komentar" rows=6 width=200></textarea></td>
</tr>
<tr>
<td
colspan="3"><input type=submit name="submit"
value=submit></td>
</tr>
</table>
</table>
</body>
<body
BGCOLOR ="#00FF00">
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar berikut :
6. Mengatur kolom, buka
notepad++ kemudian ketikan code dibawah ini:
<html>
<head>
<title>warna-warna</title>
</head>
<body>
<table width="300"
border="1">
<tr>
<td
colspan="3" align="center">warna-warna </td>
</tr>
<tr>
<td
bgcolor="#00FF00">Hijau</td>
<td bgcolor="#FFFF00">Kuning</td>
<td
bgcolor="#FF0000">Merah </td>
</tr>
<tr>
<td
bgcolor="#999999">Abu-abu</td>
<td
bgcolor="#0000FF">Biru</td>
<td
bgcolor="#FF9900">Orange</td>
</tr>
<tr>
<td
bgcolor="#663300">Cokelat</td>
<td bgcolor="#3399CC">Biru
muda</td>
<td
bgcolor="#FF00FF">Merah muda</td>
</tr>
</table>
</body>
<body BGCOLOR
="#00FF00">
</html>
Langkah
selanjutnya simpan dalam format HTML dan buka file dengan firefox atau
sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:
Sekian tutorial dari saya, jangan lupa tinggalkan komennya ya. terimakasih.
lanjutkan
BalasHapusMembantu
BalasHapusGood
BalasHapusgood job kak..
BalasHapusSangat bermanfaat
BalasHapusApik rin
BalasHapusBagus infonya
BalasHapusIni yg ane cari, tengs sis 😀😀
BalasHapusMantep
BalasHapusthx kak
BalasHapusThanks kak
BalasHapusSip kak lanjutkan.
BalasHapusSangat membantu kak
BalasHapuskunjungi dan beri komentarmu di diyahwldr.blogspot.com
Bermanfaat sekali kak infonya
BalasHapusnice
BalasHapusNice
BalasHapusNice
BalasHapusSipppp kak
BalasHapusBermanfaat
BalasHapuslanjutkan
BalasHapusNice
BalasHapusgood luck
BalasHapusnice
BalasHapusKeren kak
BalasHapusnice ririn
BalasHapusNice
BalasHapusBagus
BalasHapusGreat!
BalasHapus,
BalasHapusGood
BalasHapusSayur opor kadal
BalasHapusBaguss , lanjutkan
BalasHapusnice
BalasHapusBagus infonya,
BalasHapusgood
BalasHapusTeruskan
BalasHapusSangat menarik
BalasHapusboleh jugak
BalasHapusMakasih info nya mba, postingan nya sangat membantu. Saya sudah punya website wordpress tpi blm ada pengaturan buat kolom komen karena nggak ngerti cara nya, nanti saya coba buat sesuai dengan tutor dari mba ririn. Oy cara ini berlaku semua kan buat website yg diwordpress jg? Apa cuma diblogspot aja?
BalasHapusSilakan di coba saja mba, terimakasih komentarnya semoga bermanfaat.
HapusSangat bermanfaat kak
BalasHapusmksh infonya
BalasHapusHadirr........
BalasHapusbagus, bisa lebih keren kalo tutorialnya ditampilkan di youtube
BalasHapusLanjutkan
BalasHapusBagus
BalasHapusNice kk..
BalasHapusnice. . perfect.. 😃
BalasHapusperfect..
BalasHapuslanjutkan
BalasHapusUke pao
BalasHapusSangat membantu kak
BalasHapusnice kak
BalasHapussgt bermanfaat
BalasHapusPerfect
BalasHapusThanks infonya kak
BalasHapusNice
BalasHapus