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=https://twitter.com/ariezlawriders><img src="twit.jpg" width="50" height="50"</a>
<li><a href=http://arieznetworkz.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.
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=https://twitter.com/ariezlawriders><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.
Tidak ada komentar:
Posting Komentar