Senin, 23 Maret 2015

Cara membuat biografi dengan HTML

Setiap orang pasti mempunyai biografi masing-masing. Biografi adalah kisah atau keterangan tentang kehidupan seseorang. Sebuah biografi lebih kompleks daripada sekedar daftar tanggal lahir atau mati dan data-data pekerjaan seseorang, biografi juga bercerita tentang perasaan yang terlibat dalam mengalami kejadian-kejadian tersebut. Dalam biografi tersebut dijelaskan secara lengkap kehidupan seorang tokoh sejak kecil sampai tua, bahkan sampai meninggal dunia. Semua jasa, karya, dan segala hal yang dihasilkan atau dilakukan oleh seorang tokoh dijelaskan juga. 
Disini saya akan menjelaskan bagaimana cara membuat biografi dengan menggunakan bahasa pemrograman HTML. Berikut ini adalah langkah-langkah dalam membuatnya :

Catatan : Dalam menulis kode program HTML dapat juga menggunakan Notepad++. Namun, dalam pembahasan saya kali ini, saya menulis kode program HTML menggunakan aplikasi Dreamweaver CS6. 

1. Kita buka aplikasi Dreamweaver. Kemudian, kita pilih HTML pada tampilan awal Dreamweaver    seperti pada gambar di bawah ini :
 

2. Kita buka tab code untuk menuliskan kode program seperti pada gambar di bawah ini :


Berikut ini adalah penjelasan fungsi code program diatas :
  • <!DOCTYPE HTML> : memberitahukan ke browser bahwa tipe dokumen yang digunakan adalah HTML.
  • <head> </head> : merupakan kepala dari dokumen HTML tersebut.
  • <title>  : mendefinisikan title.
  • <body> : tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link.
  • <html> : berarti dokumen html.

3. Kita ketikkan kode program namun, isi biografi pada gambar di bawah ini adalah contoh biografi saya sendiri. Kemudian, untuk foto kalian bisa ganti dengan foto kalian dengan cara buka tab design lalu, klik pada gambar foto. Setelah itu, arahakan kursor mouse pada menu diatas, dan pilih menu Insert lalu, pilih Image. Pada menu tersebut kalian dapat memilih foto kalian sesuai dengan direktori di laptop atau PC kalian masing-masing. Berikut ini adalah contoh gambarnya :



Berikut ini adalah penjelasan code program diatas :
  • <!DOCTYPE HTML> : memberitahukan ke browser bahwa tipe dokumen yang digunakan adalah HTML.
  • <head> </head> : merupakan kepala dari dokumen HTML tersebut.
  • <title>  : mendefinisikan title.
  • <body> : tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link.
  • <html> : berarti dokumen html.
  • <div> : represents different sections of text.
  • <center> : untuk perataan tengah terhadapt teks atau gambar.
  • <h4> : ukuran font yang dibedakan berdasarkan headingnya.
  • <font> : mengganti jenis, ukuran, warna, huruf yang akan digunakan untuk teks.
  • <table> : membuat table.
  • <tr> : baris pada table.
  • <th> : untuk mengelompokkan isi header di dalam sebuah table.
  • <p> : ganti paragraf.




4. Kemudian, kita simpan file dengan cara klik file lalu, pilih save, dan beri nama file "Biografi" atau sesuai dengan keingingan masing-masing juga boleh.

5. Setelah file disimpan maka, saatnya kita melakukan uji coba dengan cara tekan tombol F12 pada keyboard laptop atau PC kalian sehingga akan keluar tampilan biografi yang telah kita buat dengan menggunakan HTML pada browser kalian seperti pada gambar di bawah ini :



Dan akhirnya selesai pemahasan saya kali ini mengenai cara membuat biografi dengan menggunakan HTML. Terimakasih bagi kalian yang telah mengunjungi blog saya mohon maaf bila masih terdapat kekurangan :)

Sumber Referensi : 
http://id.wikipedia.org/wiki/Biografi
http://ianpanrita.com/belajar-html5.ian/
http://www.patartambunan.com/pengertian-html-dan-fungsi-bahasa-html/

Tidak ada komentar:

Posting Komentar