Membuat HTML Daftar Riwayat Hidup
Assalammualaikum..
Halo teman-teman. Ini adalah sedikit contoh pembuatan HTML sederhana menggunakan notepad. Dimana tugas ini dibuat untuk memenuhi mata kuliah Pemrograman Berbasis Web. Di dalam tugas ini, saya membuat Daftar Riwayat Hidup dengan lima menu, yaitu home, data pribadi, pendidikan formal, pengalaman kerja, dan social networking. Dimana dalam setiap menu tersebut terdapat gambar, foto, tabel, garis, maupun informasi lain yang dapat me - link ke tempat lain. Berikut adalah cara pembuatannya:
1.) Buat file baru di notepad, yang saya beri nama oneone.html, twotwo.html, threethree.html, fourfour.html, dan fivefive.html. Dimulai dari file oneone, di dalam file ini terdapat menu home yang akan menampilkan gambar dan tulisan 'siapa saya' yang akan me-link ke tempat lain, disini saya me-link ke tulisan di dalam blog saya. Seperti di bawah ini :
Source Code berikut merupakan perintah untuk memasukkan background, dan tulisan sesuai dengan style font yang kita inginkan:
<body background=back2.jpg>
<font size=1 face=tahoma color=black>Pemrograman Berbasis Web</font>
<hr size=1 width=150 align=left>
<font size=7 face=verdana color=blue<b><strong>Daftar Riwayat Hidup</b></strong></font>
<hr size=5 align=center noshade>
Dan untuk membuat kelima menu tersebut agar dapat me-link ke halaman selanjutnya, perintahnya adalah :
|<a href=oneone.html>HOME</a> |<a href="twotwo.html">|DATA PRIBADI</a>
| <a href="threethree.html">PENDIDIKAN FORMAL</a> |<a href="fourfour.html"> PENGALAMAN
KERJA </a> |
|<a href="fivefive.html"> SOCIAL NETWORKING </a> |<hr>
Ini untuk memasukkan gambar : <img src="tami.jpg" width="200" height="250" />. Dan untuk me-link ke halaman lain (Disini me-link ke tulisan di blog saya), jika mengklik 'siapa saya?' maka akan masuk ke halaman yang dituju:
<ul type=square>
<ul type=square>
<li><a href=http://tamipujiutami.blogspot.com/2012/09/siapa-saya.html>Siapa Saya?</a>
</ul>
Ini adalah contoh tampilan dari file oneone.html yang merupakan menu home:
Jika kita meng-klik 'siapa saya', maka akan menampilkan blog tulisan saya yang berjudul 'Siapa Saya' seperti di bawah ini :
2.) Sekarang kita isi file notepad selanjutnya yaitu twotwo.html. dalam file tersebut terdapat menu data pribadi, seperti tampilan di bawah ini :
Source Code untuk membuat halaman tersebut hampir sama dengan file oneone yang sebelumnya, disini hanya ditambah dengan pembuatan tabel dengan 2 baris dan 2 kolom, untuk pembuatan tabel, berikut adalah source code programnya:
3.) Untuk menu pendidikan formal (threethree.html), pengalaman kerja(fourfour.html), dan social networking(fivefive.html), source code yang digunakan sama, hanya perlu di edit sesuai dengan isi yang akan kita buat, tampilan dari masing-masing menu seperti di bawah ini:
- Menu Pendidikan formal
- Menu Pengalaman Kerja
4.) Sedikit berbeda mungkin pada file five.five.html yang menampilkan menu social networking, seperti twitter, facebook, dan blog yang me-link ke social network yang saya punya, dimana untuk melink tersebut saya menggunakan icon berupa gambar. sehingga jika dklik akan me-link ke halaman yang telah saya tentukan dengan menggunakan potongan kode program di bawah ini :
<li><a href=https://twitter.com/utamipujiutami><img src="twit.jpg" width="50" height="50"</a>
<li><a href=http://tamipujiutami.blogspot.com/><img src="blog.jpg" width="50" height="50"</a>
</ul>
Keterangan: - tulisan dengan warna merah bold, merupakan nama file untuk icon berupa namafile.jpg.
- tulisan dengan warna biru bold menunjukkan link yang akan kita tuju setelah meng-klik
icon gambar.
Untuk tampilannya seperti di bawah ini :
Sekian hasil yang amat sederhana dari tugas pembuatan HTML dari mata kuliah Pemrograman Berbasis Web, semoga bermanfaat ^.^
Terimakasih.
sedikit komen mbk, kalo bisa script html nya jangan dbuad ss..
BalasHapusyar keliatan d ketik / dcopas kan aja.. yar iank lain bs nyoba..
:v
BalasHapusga ngerti html klo bkinnya aja heuhh _-
BalasHapusHai mampir juga ke Blog ku yahh http://reginahalent.blogspot.com/
BalasHapusngetik lagi deh gua-______-...besok jangan foto ya?hehhehe
BalasHapusslmat sore mbak saya mau tanya cara memansang kalender di blog itu gi mana si
BalasHapusmohon penjelasannya ya terimakasih.
ajari aku,, aku newbi banget
BalasHapuskunjungi blog aku jua ya http:// irajuhana.blogspot.com/
BalasHapusasik bnget nih bca blog nya ntar posting lagi yg baru ya...:)
BalasHapuskaq ngepostnya yang bisa di copas dumz :-)
BalasHapusthank infonya,,,mampir blogku jg ya,,, deniardian29.blogspot.com
BalasHapushadooooooh masa harus ketik ulang -_-
BalasHapus