Kali ini kita akan belajar seputar
dasar-dasar HTML (Hypertext Transfer Protocol) yang merupakan bahasa yang
digunakan untuk membuat website. Langkah pertama pada pembelajaran dasar HTML
kali ini kita perlu menyiapkan dan menginstall editor teks yang digunakan untuk
mengetikkan kode HTML, yaitu Notepad++. Selanjutnya kita akan membuat contoh
halaman HTML, pada contoh kali ini kita akan membuat CV sederhana dengan 2
halaman web dimana halaman pertama adalah identitas pribadi dan kedua gambar
sertifikat, perhatikan contoh kode halaman pertama berikut :
<head>
<title>Tugas Pemrograman Berbasis Web</title>
</head>
<body style= "background-color :white">
<div style= "background-color :blue" align="center"><h1>CURICULUM VITAE</h1>
</div>
<div style="margin-left:150;">
<h2>Identitas Pribadi</h2>
<table width="500">
<tr>
<td>Nama </td>
<td> : Rizky Prastiyanto </td>
<td rowspan="6" height="100"><p><img src="DSC_6302.png"/></p>
</td></tr>
<tr>
<td>Tempat, tanggal lahir </td>
<td> : Jakarta, 16 November 1993 </td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td> : Laki-laki </td>
</tr>
<tr>
<td>Agama </td>
<td> : Islam </td>
</tr>
<tr>
<td>Alamat </td>
<td> : Raya Ceger, Jakarta Timur</td>
</tr>
<tr>
<td>Email </td>
<td> : rizkypraz_16@yahoo.com</td>
</tr>
</table>
<h2>Riwayat Pendidikan</h2>
<ul>
<li>Pendidikan Formal</li>
<br/>
<table border="1" cellpadding="1" cellspacing="1.5" width="450">
<tr>
<td><b>Tingkatan Pendidikan<b/></td>
<td><b>LULUS</b></td>
</tr>
<tr>
<td>SDN 01 Ceger Jakarta</td>
<td>2003</td>
</tr>
<tr>
<td>SLTP Negeri 222 Jakarta</td>
<td>2006</td>
</tr>
<tr>
<td>SMA Negeri 64 Jakarta</td>
<td>2009</td>
</tr>
<tr>
<td>Universitas Gunadarma</td>
<td>Masih dalam perkuliahan semester 8</td>
</tr>
</table>
<br/>
<li>Pendidikan Non Formal</li>
<table border="1" cellpadding="1" cellspacing="1.5" width="850">
<tr>
<td align="center"><b>Jenis Pendidikan<b/></td>
<td align="center"><b>TAHUN</b></td>
</tr>
<tr>
<td align="justify"><ol>
<li>Kursus E Commerce</li></ol></td>
<td align="center">2012</td>
</tr>
<tr>
<td align="justify"><ol>
<li>Seminar Prasidang</li>
<li>Seminar Current Trends of Opening System di Universitas Gunadarma</li>
<li>Seminar CISCO di Universitas Gunadarma</li>
<ol>
</td>
<td align="center">2012</td>
</tr>
<tr>
<td align="justify"><ol>
<li>Seminar Android Menggali Kreativitas & Peluang Bisnis Melalui Flexi Market & Telkomsel Market di Universitas Gunadarma</li>
<li>Seminar Multimedia System di Universitas Gunadarma</li>
</ol>
</td>
<td align="center">2013</td>
</tr>
</table>
</ul>
</div>
<div align="center"><a href="sertifikat.html">Sertifikat</a><br/>
</div>
</body>
</html>
Keterangan :
Pada <html>kode HTML</html>
semua yang berada di dalam <html> akan dianggap dokumen HTML.
Pada <head>kode HTML</head>
kode HTML akan dianggap sebagai informasi mengenai halaman web.
Pada <title>kode HTML<./title>
merupakan kode untuk mendefinisikan judul halaman web yang akan kita buat.
Pada <body>kode HTML</body>
digunakan untuk memasukkan konten pada halaman web yang akan kita buat.
Pada <body> terdapat style =
"background-color: yellow" kode tersebut digunakan untuk menampilkan
background warna pada bagian body halaman web yang kita buat.
Pada <h1>kode HTML</h1>
digunakan untuk menampilkan heading pada konten halaman web.
Pada <div>kode HTML</div>
digunakan untuk memisahkan bagian satu dengan bagian lainnya, seperti pada
<div style= "background-color :red"
align="center"><h1>CURICULUM VITAE</h1></div> hanya
kata "CURICULUM VITAE" yang rata tengah dan memiliki bakground merah.
Sebelum membuat kode untuk memasukan gambar
pada halaman web pastikan gambar yang akan di masukkan berada dalam satu folder
yang sama dengan halaman web yang kita buat. Perhatikan gambar berikut :
Pada kode HTMl <ul><li>Kode
HTML</li></ul> digunakan untuk membuat list berjenis unorder list
yaitu list bullet, sedangkan <ol><li>Kode
HTML</li></ol> digunakan untuk membuat list berjenis order list
yaitu angka.
Pada kode HTML <a href="sertifikat.html">Sertifikat</a>
digunakan untuk membuat link lanjutan pada halaman web berikutnya sesuai dengan
link yang disebutkan, dalam contoh kali ini link berikutnya yaitu
sertifikat.html.
http://asridani.blogspot.com/2014/03/cara-membuat-html-dengan-notepad_26.html
http://asridani.blogspot.com/2014/03/cara-membuat-html-dengan-notepad_26.html
Tidak ada komentar:
Posting Komentar