Cara Membuat Desain Website Berbasis HTML Dengan Notepad

  • 6 November 2020

Cara Membuat Desain Website Berbasis HTML Dengan Notepad

Membahas mengenai bagaimana cara membuat desain website berbasis HTML dengan Notepad, Hal utama yang harus kita lakukan adalah Pengenalan Tag Pada HTML

Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu diawali dengan <x> dan ditutup dengan </x> dimana x adalah perintah dari apa yang kita inginkan.

• Daftar Tag Pada HTML

ELEMEN DASAR
Jenis Dokumen <HTML></HTML> (terdapat pada awal dan akhir dari file HTML)
Judul <TITLE></TITLE> (harus selalu terdapat pada mukadimah)
Mukadimah (Header) <HEAD></HEAD> (keterangan umum, seperti judul dsb.)
Batang Tubuh <BODY></BODY> (isi dari halaman HTML)

FORMAT TAMPILAN

Huruf Tebal <B></B> (Bold)
Huruf Miring <I></I> (Italic)
Garis Bawah <U></U> (Underline – jarang digunakan)
Rata Tengah <CENTER></CENTER> (Center – berlaku untuk teks maupun gambar)
Huruf Kedip <BLINK></BLINK> (Blinking – tag terlucu sampai kini)
Ukuran Huruf <FONT SIZE=?></FONT> (Font Size – boleh diisi dari 1 sampai 7)
Warna Huruf <FONT COLOR=”#$$$$$$”></FONT>
Pilih Jenis Huruf <FONT FACE=”***”></FONT>

PEMISAH

Paragraf <P></P> (tag penutup seringkali tak diperlukan)
Align Text <P ALIGN=LEFT|CENTER|RIGHT></P>
Pndah Baris <BR> (pindah ke baris berikut)
Garis Datar <HR> (Horizontal Rule)
Penataan Letak Garis <HR ALIGN=LEFT|RIGHT|CENTER>
Tebal Garis <HR SIZE=?> (dalam satuan pixel)
Lebar Garis <HR WIDTH=?> (dalam satuan pixel)
Lebar Garis Persentasi <HR WIDTH=”%”> (dalam persentasi terhadap lebar halaman)

LATAR BELAKANG DAN WARNA

Latar Belakang Gambar <BODY BACKGROUND=”URL”> (Tiled Background)
Warna Latar Belakang <BODY BGCOLOR=”#$$$$$$” (Background Color – urutan: merah/hijau/biru)
Warna Huruf Teks <BODY TEXT=”#$$$$$$”>

TABEL

Rancangan Tabel <TABLE></TABLE>
Garis Batas Tabel <TABLE BORDER=?></TABLE>
Lebar Tabel <TABLE WIDTH=?> (dalam satuan pixel)
Lebar Tabel Persentasi <TABLE WIDTH=”%”> (dalam satuan persen terhadap lebar halaman)
Baris dalam Tabel <TR></TR>
Penataan Letak Baris <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Sel dalam Tabel <TD></TD> (harus ada dalam setiap baris tabel)
Penataan Letak Sel <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Kepala Tabel <TH></TH> (Table Header – seperti data dengan Bold dan Center)
Penataan Letak Kepala Tabel <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Warna Kepala Tabel <TH BGCOLOR=”#$$$$$$”>

A. Dasar dasar HTML

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 halaman web yang anda buat.

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 halaman web yang anda buat.

3. Mengatur ukuran huruf, buka notepad++, kemudian ketikan code dibawah ini:

Advertisements
Loading...

<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 halaman web yang anda buat.

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 halaman web yang anda buat.

5. Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:

<html>
<head>
<title> From komentar </title>
</head>
<body>
<table>
<tr>
<tdcolspan=”3″>&nbsp;</td></tr><tr>
<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>
</body>
<body BGCOLOR =”#00FF00″>
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada halaman web yang anda buat.

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 halaman web yang anda buat.

B. Hyperlink

1. Membuat hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>
<head>
<title> Judul tab </title>
</head>
<body>
Ini hyperlink ke wordpress
<a href=”http://www.wordpress.com/” title=”Masuwordpress”> WordPress </a>
<br>Klik dan masuk ke yahoo<a href=”http://www.yahoo.com/” title=”Masuk yahoo”> Yahoo </a>
<br>Masuk ke facebook anda
<a href=”http://http://www.facebook.com/” title=”Masuk ke facebook”> Facebook </a>
</body>
<body BGCOLOR =”#00FF00″>
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada halaman web yang anda buat.

2. Membuat hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>
<head>
<title> Judul tab </title>
</head>
<body>
<ahref=”file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/home.html” title=”ke Rumah”><img src=”file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Graphic1.jpg” border=”0″ width=”80″ height=”30″/></a>
<ahref=”file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/profil.html” title=”Profilku”><img src=”file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/profil.jpg” border=”0″ width=”100″ height=”30″/></a>
<ahref=”file:///C:/Users/COMPAQ/Documents/HTML.1/html_colors.html” title=”Kode Warna Pada HTML”><img src=”file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Kode%20Warna.jpg” border=”0″ width=”150″ height=”30″/></a>
<a href=”file:///C:/Users/COMPAQ/Documents/HTML.1/kumpulan%20puisi.html” title=”kumpulan Kata-kata Mutiara”><img src=”file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/kata%20kata.jpg” border=”0″ width=”100″ height=”30″/></a>
</body>
<body BGCOLOR =”#00FF00″>
</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya. maka hasilnya dapat anda lihat pada tampilan halaman website anda.

Semoga artikel Cara Membuat Desain Website Berbasis HTML Dengan Notepad ini bermanfaat bagi anda dan salam sukses.

—————————–

Sumber http: http://riyant17.blogspot.com/2013/02/membuat-desain-website-berbasis-html.html

Advertisements
Loading...

Leave a Comment: