Senin, 08 April 2013

Cara Mudah Membuat HTML Menggunakan Notepad

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=http://www.facebook.com/puji.utami.5209?ref=tn_tnmn><img src="fb.jpg" width="50" height="50"</a>
<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.
Diposting oleh di

13 komentar:

  1. Unknown29 Juni 2013 pukul 06.29

    sedikit komen mbk, kalo bisa script html nya jangan dbuad ss..
    yar keliatan d ketik / dcopas kan aja.. yar iank lain bs nyoba..

    BalasHapus
  2. Unknown26 Agustus 2013 pukul 22.34

    :v

    BalasHapus
  3. Unknown16 November 2013 pukul 15.12

    ga ngerti html klo bkinnya aja heuhh _-

    BalasHapus
  4. logposes11 Juli 2014 pukul 10.11

    Hai mampir juga ke Blog ku yahh http://reginahalent.blogspot.com/

    BalasHapus
  5. Unknown17 November 2014 pukul 04.48

    ngetik lagi deh gua-______-...besok jangan foto ya?hehhehe

    BalasHapus
  6. Unknown19 November 2014 pukul 00.10

    slmat sore mbak saya mau tanya cara memansang kalender di blog itu gi mana si
    mohon penjelasannya ya terimakasih.

    BalasHapus
  7. Anonim26 November 2014 pukul 05.49

    ajari aku,, aku newbi banget

    BalasHapus
  8. Unknown10 Desember 2014 pukul 03.32

    kunjungi blog aku jua ya http:// irajuhana.blogspot.com/

    BalasHapus
  9. Unknown22 Januari 2015 pukul 23.54

    asik bnget nih bca blog nya ntar posting lagi yg baru ya...:)

    BalasHapus
  10. Admin Semarang 126 Agustus 2015 pukul 19.56

    kaq ngepostnya yang bisa di copas dumz :-)

    BalasHapus
  11. Deni Ardianto22 Oktober 2015 pukul 17.40

    thank infonya,,,mampir blogku jg ya,,, deniardian29.blogspot.com

    BalasHapus
  12. Unknown1 Desember 2015 pukul 19.13

    hadooooooh masa harus ketik ulang -_-

    BalasHapus
  13. Raihan Tolkien25 Juni 2024 pukul 02.11

    tq informasinya, kunjugin webku www.kabitainfo.net / kabitainfo.blogspot.com

    BalasHapus

Langganan: Posting Komentar (Atom)