Membuat Halaman Web Tentang Daftar Riwayat Hidup Dengan HTML


Assalamualaikum warohmatullahi wabarokatuh

Programmer Bojonegoro
- Hello World, sebelumnya kita telah mengetahui Jenis-jenis Tag HTML Beserta Fungsinya. Nah, pada kesempatan kali ini saya akan mencoba mengimplementasikannya dengan Membuat Halaman Web Tentang Daftar Riwayat Hidup.

FYI, Halaman web yang akan kita buat ini merupakan salah satu tugas saya di praktikum dasar pemrograman web pada semester empat kemarin.

Oke, tanpa basa-basi lagi. Berikut code program untuk Membuat Halaman Web Tentang Daftar Riwayat Hidup Dengan HTML.

CVTubianto.html

<!DOCTYPE html>
<html>
<head>
 <title>Curriculum Vitae</title>
</head>
<body>
<h1><center>Daftar Riwayat Hidup<br>Peserta Praktikum Pemrograman Dasar Web<br>Lab Common Computing Universitas Trunojoyo</center></h1>
<br>
<br>
<p>
 <img src="image/tubianto.jpg" height="300px" align="right">
 <h2><u><b>Data Diri</b></u></h2>
 <pre><font face="times new roman" size="4">Nama   : Tubianto</font></pre>
 <pre><font face="times new roman" size="4">Nim    : 150411100035</font></pre>
 <pre><font face="times new roman" size="4">Tempat Lahir  : Bojonegoro</font></pre>
 <pre><font face="times new roman" size="4">Tanggal Lahir  : 18 Mei 1996</font></pre>
 <pre><font face="times new roman" size="4">Jenis Kelamin  : Laki-laki</font></pre>
 <pre><font face="times new roman" size="4">Alamat Tinggal : Ds. Sugihwaras Kec. Ngraho Kab. Bojonegoro</font></pre>
 <pre><font face="times new roman" size="4">Alamat Kos  : Asrama Mahasiswa Universitas Trunojoyo Madura</font></pre>

 <h2><u><b>Riwayat Pendidikan Formal</b></u></h2>
 <ol>
  <li><a href="pendidikan/TK.html">TK</a></li>
  <li><a href="pendidikan/SD.html">SD</a></li>
  <li><a href="pendidikan/SMP.html">SMP</a></li> 
  <li><a href="pendidikan/SMA.html">SLTA / SMK</a></li> 
 </ol>

 <h2><u><b>Riwayat Pendidikan Non Formal</b></u></h2>
 <ul>
  <li>Kursus Komputer</li>
  <li>TPA/TPQ</li>
  <li>Pencak Silat</li>
  <li>Kursus Mengemudi</li>
  <li>Sekolah Sepakbola</li>
 </ul>

 <h2><u><b>Hobi dan Minat</b></u></h2>
 <ul>
  <li>Olah raga</li>
  <li>Ngeblog</li>
  <li>Bisnis Online</li>
  <li>Dll</li>
 </ul>

 <h2><u><b>Minat Bahasa Pemrograman</b></u></h2>
 <ul>
  <li>HTML (<em>Hypertext Markup Language</em>)</li>
  <li>Java</li>
  <li>Python</li>
  <li>PHP (<em>Hypertext Prepocessor</em>)</li>
 </ul>

 <h2><u><b>Quote Favorit</b></u></h2>
 <blockquote>
  <q>Jika kamu tidak dapat menahan lelahnya Belajar,<br>
   Maka kamu harus sanggup menahan perihnya Kebodohan.</q>
   <br>
   <em><b>~ Imam Syafi'i ~</b></em>
 </blockquote>
</p>

</body>
</html>
TK.html

<!DOCTYPE html>
<html>
<head>
 <title>TK Putra Pertiwi V</title>
</head>
<body>
<h1><center>Dokumen Sekolah</center></h1>
<br>
<br>
<p>
<img src="../image/tk.png" height="300px" align="right">
<ul>
 <li><pre><font face="times new roman" size="4">Nama Sekolah   : TK PUTRA PERTIWI V</font></pre></li>
 <li><pre><font face="times new roman" size="4">Berdiri Tahun   : 1945</font></pre></li>
 <li><pre><font face="times new roman" size="4">Nama Kepala Sekolah : Surati, S.pd</font></pre></li>
 <li><pre><font face="times new roman" size="4">Fasilitas Sekolah  : </font></pre></li>
 <ul>
  <li>Ruang Olah Raga</li>
  <li>Kantin</li>
  <li>Taman Bermain</li>
  <li>Parkir</li>
  <li>Dll</li>
 </ul>
 <li><pre><font face="times new roman" size="4">Lokasi Sekolah  : Rimba Raya, Ds. Sugihwaras Kec. Ngraho Kab. Bojonegoro, Jawa Timur</font></pre></li>
</ul>
</p>
Kembali Ke Dokumen <a href="../CVTubianto.html">Riwayat Hidup</a>
</body>
</html>
SD.html

<!DOCTYPE html>
<html>
<head>
 <title>SDN SUGIHWARAS II</title>
</head>
<body>
<h1><center>Dokumen Sekolah</center></h1>
<br>
<br>
<p>
<img src="../image/sd.jpg" height="300px" align="right">
<ul>
 <li><pre><font face="times new roman" size="4">Nama Sekolah   : SDN SUGIHWARAS II</font></pre></li>
 <li><pre><font face="times new roman" size="4">Berdiri Tahun   : 1945</font></pre></li>
 <li><pre><font face="times new roman" size="4">Nama Kepala Sekolah : Soejarno, S.pd</font></pre></li>
 <li><pre><font face="times new roman" size="4">Fasilitas Sekolah  : </font></pre></li>
 <ul>
  <li>Ruang Olah Raga</li>
  <li>Kantin</li>
  <li>Perpustakaan</li>
  <li>Parkir</li>
  <li>Dll</li>
 </ul>
 <li><pre><font face="times new roman" size="4">Lokasi Sekolah  : Jl. A. Yani No. 145 Kalirejo Ngraho Bojonegoro, Jawa Timur</font></pre></li>
</ul>
</p>
Kembali Ke Dokumen <a href="../CVTubianto.html">Riwayat Hidup</a>
</body>
</html>
SMP.html

<!DOCTYPE html>
<html>
<head>
 <title>MTS N NGRAHO</title>
</head>
<body>
<h1><center>Dokumen Sekolah</center></h1>
<br>
<br>
<p>
<img src="../image/smp.jpg" height="400px" align="right">
<ul>
 <li><pre><font face="times new roman" size="4">Nama Sekolah   : MTS N NGRAHO</font></pre></li>
 <li><pre><font face="times new roman" size="4">Berdiri Tahun   : 1980</font></pre></li>
 <li><pre><font face="times new roman" size="4">Nama Kepala Sekolah : Fathul Amin, S.pd, MM</font></pre></li>
 <li><pre><font face="times new roman" size="4">Fasilitas Sekolah  : </font></pre></li>
 <ul>
  <li>Ruangan, Kelas, Lab (Untuk Kegiatan Sekolah)</li>
  <ul>
   <li>Aula / Ruang Serbaguna</li>
   <li>Bimbingan Konseling</li>
   <li>Kelas</li>
   <li>Kelas Ber-AC</li>
   <li>Lab Bahasa</li>
   <li>Lab Biologi</li>
   <li>Lab Fisika</li>
   <li>Lab Kimia</li>
   <li>Lab Multimedia</li>
   <li>Ruang Kesenian</li>
   <li>Playground</li>
  </ul>
  <li>Fasilitas Penunjang Olahraga</li>
  <ul>
   <li>Gym</li>
   <li>Lapangan Basket</li>
   <li>Lapangan Sepakbola</li>
   <li>Lapangan Voli</li>
   <li>Kolam Renang</li>
  </ul>
  <li>Ruangan (Selain untuk Kegiatan Sekolah)</li>
  <ul>
   <li>Asrama</li>
   <li>Kantin</li>
   <li>Mushola</li>
   <li>Koperasi</li>
   <li>Parkir Mobil</li>
   <li>Parkir Motor</li>
   <li>Perpustakaan</li>
   <li>Stationery</li>
   <li>UKS</li>
  </ul>
  <li>Utility</li>
  <ul>
   <li>DVD Player</li>
   <li>Lift</li>
   <li>Loker</li>
   <li>Proyektor</li>
   <li>Speaker Aktif</li>
   <li>Wifi / Hotspot</li>
  </ul>
  <li>ICT</li>
  <ul>
   <li>Mesin Absensi</li>
   <li>Sistem Informasi Sekolah</li>
   <li>Pembayaran via Bank</li>
   <li>Website</li>
  </ul>
  <li>Dll</li>
 </ul>
 <li><pre><font face="times new roman" size="4">Lokasi Sekolah  : Jl. AR. Hakim No. 50A, Ngrahom Bojonegoro, Jawa Timur</font></pre></li>
</ul>
</p>
Kembali Ke Dokumen <a href="../CVTubianto.html">Riwayat Hidup</a>
</body>
</html>
SMA.html

<!DOCTYPE html>
<html>
<head>
 <title>MAN NGRAHO</title>
</head>
<body>
<h1><center>Dokumen Sekolah</center></h1>
<br>
<br>
<p>
<img src="../image/sma.jpg" height="400px" align="right">
<ul>
 <li><pre><font face="times new roman" size="4">Nama Sekolah   : MAN NGRAHO</font></pre></li>
 <li><pre><font face="times new roman" size="4">Berdiri Tahun   : 1997</font></pre></li>
 <li><pre><font face="times new roman" size="4">Nama Kepala Sekolah : Drs. Bambang Wiyono</font></pre></li>
 <li><pre><font face="times new roman" size="4">Fasilitas Sekolah  : </font></pre></li>
 <ul>
  <li>Ruangan, Kelas, Lab (Untuk Kegiatan Sekolah)</li>
  <ul>
   <li>Aula / Ruang Serbaguna</li>
   <li>Bimbingan Konseling</li>
   <li>Kelas</li>
   <li>Kelas Ber-AC</li>
   <li>Lab Bahasa</li>
   <li>Lab Biologi</li>
   <li>Lab Fisika</li>
   <li>Lab Kimia</li>
   <li>Lab Multimedia</li>
   <li>Ruang Kesenian</li>
   <li>Playground</li>
  </ul>
  <li>Fasilitas Penunjang Olahraga</li>
  <ul>
   <li>Gym</li>
   <li>Lapangan Basket</li>
   <li>Lapangan Sepakbola</li>
   <li>Lapangan Voli</li>
   <li>Kolam Renang</li>
  </ul>
  <li>Ruangan (Selain untuk Kegiatan Sekolah)</li>
  <ul>
   <li>Asrama</li>
   <li>Kantin</li>
   <li>Mushola</li>
   <li>Koperasi</li>
   <li>Parkir Mobil</li>
   <li>Parkir Motor</li>
   <li>Perpustakaan</li>
   <li>Stationery</li>
   <li>UKS</li>
  </ul>
  <li>Utility</li>
  <ul>
   <li>DVD Player</li>
   <li>Lift</li>
   <li>Loker</li>
   <li>Proyektor</li>
   <li>Speaker Aktif</li>
   <li>Wifi / Hotspot</li>
  </ul>
  <li>ICT</li>
  <ul>
   <li>Mesin Absensi</li>
   <li>Sistem Informasi Sekolah</li>
   <li>Pembayaran via Bank</li>
   <li>Website</li>
  </ul>
  <li>Dll</li>
 </ul>
 <li><pre><font face="times new roman" size="4">Lokasi Sekolah  : Jl. Raya Tinggang No. 150 A Ngraho Bojonegoro, Jawa Timur</font></pre></li>
</ul>
</p>
Kembali Ke Dokumen <a href="../CVTubianto.html">Riwayat Hidup</a>
</body>
</html>
Screenshoot hasil output dari code di atas.

CVTubianto.html
tubianto

TK.html
tk

SD.html
sd

SMP.html
smp

SMA.html
sma

Oh ya, agar code di atas bisa dijalankan dengan lancar. Temen-temen harus membuat struktur folder seperti di bawah ini:
folder
Alhamdulillah, itulah tutorial untuk Membuat Halaman Web Tentang Daftar Riwayat Hidup Dengan HTML.

Bagi temen-temen yang baru mengenal bahasa markup HTML, silakan baca postingan saya sebelumnya tentang Jenis-Jenis Tag HTML Beserta Fungsinya.

Sekian contoh code yang saya bagikan kali ini, nantikan contoh-contoh code lainnya pada postingan selanjutnya.

Terimakasih

Wassalamualaikum warohmatullahi wabarokatuh

Previous
Next Post »
Thanks for your comment