Pada kesempatan kali ini saya akan menjelasakan cara membuat biografi dengan mengunakan HTML. Sekilas tentang biografi, Biografi berasal dari bahasa Yunani, yaitu bios yang berarti hidup, dab graphien yang berarti tulis. Dengan kata lain biografi merupakan tulisan tentang kehidupan seseorang. Biografi, secara sederhana dapat dikatakan sebagai sebuah kisah riwayat hidup seseorang. Biografi dapat berbentuk beberapa baris kalimat saja, namun juga dapat berupa lebih dari satu buku.
Bagaimana sih cara membuat biografi dengan HTML? Berikut akan saya jelaskan tutorial untuk membuat biografi mengunakan HTML.
1. Langkah Pertama
Bukalah aplikasi atau editor untuk membuat biografi dengan bahasa HTML. Disini saya mengunakan Dreramweaver CS4 sebagai editornya.
Setalah itu pada menu bar pilih New à dan pada Page Type HTML à lalu pada Layout pilih à Klik Create.
Dan setelah itu ketikan struktur htmlnya pada tab Code. Seperti gambar berikut:
- Fungsi dari <html> .... </html> adalah menyatakan dokumen termasuk dokumen HTML.
- Fungsi dari <head> .... </head> adalah sebagai kepala dari dokumen HTML.
- Fungsi dari <title> .... </title> adalah untuk membuat judul untuk dokumen HTML.
- Fungsi dari <body> .... </body> adalah untuk menampilkan isi dokumen HTML
2. Langkah Kedua
~Pada langkah kedua ini akan dijelaskan cara membuat isi dari dokumen HTML yan berupa biografi dari saya. Isi biografi akan diletakan tepat dibawah <body> . Hal yang akan dilakukan pertama kali adalah membuat judul biografi. seperti gambar dibawah ini:
Logika pada gambar diatas adalah sebagai berikut:
- <center> .... </center> tag ini berfungsi untuk membuat sebuah kalimat rata ketegah.
- <h1> .... </h1> tag ini berfungsi untuk memberikan ukuran font. <h1> disini adalah ukuran yang paling besar.
- <strong> .... </strong> tag ini berfungsi untuk memnebalkan huruf, sama halnya dengan ctrl + b pada microsoft word.
~Selanjutnya saya buat sebuah garis di bawah kata biografi yang telah kita buat tadi, untuk mempercantik tampilan. tambahakan tag seperti gambar berikut :
Logika pada gambar diatas adalah sebagai berikut:
<hr width=65%> tag ini berfungsi untu memunculkan garis. Isi lah width nya sesuai kebutuhan, dengan ketentuan width = 1-100% tidak boleh lebih.
~ Selanjutnya saya memasukan foto diri kita tepat dibawah garis yang telah kita buat tadi. berikut adalah source code yang digunakan:
Logika pada gambar diatas adalah sebagai berikut:
- <img src="...." width="....." height="...."> tag ini berfungsi untuk menampilkan gambar atau foto. dengan ketentuan
ini berfungsi untuk memberikan link atau alamat tempat foto itu berada. width="...." ini berfungsi untuk mengatur lebar foto. height="...."> ini berfungsi untuk mengatur tinggi foto.
~ Selanjutnya saya akan membuat tabel untuk memperapih tampilan biografi saya. Dapat dilihat seperti apa source code untuk membuat tabel dengan ketentuan 1 kolom dan 1 baris pada gambar dibawah ini.
Logika pada gambar diatas adalah sebagai berikut:
- <table> .... </table> tag ini berfungsi untuk membuat tabel.
- <tr> .... </tr> tag ini berfungsi untuk membuat baris.
- <td> .... </td> tag ini berfungsi untuk membuat kolom.
- width="...." ini berfungsi untuk mengatur lebar tabel. height="...."> ini berfungsi untuk mengatur tinggi tabel. border="...." ini untuk mengatur tebal garis pada tabel. align="...." ini untuk membuat tabel rata kanan, rata kiri, atau rata tengah. bila ingin rata tengah bisa ketik center, bila ingin rata kiri ketik left, dan bila ingin rata kanan ketik right.
~Selanjutnya saya akan mengetikkan biografi lengkap saya di dalam tabel yang telah dibuat pada tahap sebelumnya. berikut adalah source code dapat dilihat pada gambar dibawah ini:
- <div style="text-align: .... ;"> tag ini berfungsi untuk membuat tulisan agar rata kanan kiri. dengan menuliskan justify pada "text-align: .... ;"
- <p> .... </p> tag ini berfungsi untuk membuat suatu paragraf.
3. Langkah Ketiga
~ Setelah menyelesaikan langkah pertama dan kedua, langkah selanjutnya adalah menyimpan file HTML yang telah dibuat. dengan cara klik File à Save as à ketikan nama file html.
~ Bila sudah disimpan, jalankan file tersebut dengan cara mengeklik dua kali pada file html tersebut. Dan secara otomatis akan muncul pada browser. seperti gambar di bawah ini:
~ Berikut adalah cara membuat biografi mengunakan bahasa pemograman html
dengan editor dreamwever cs4. Somoga postingan ini dapat bermanfaat.
Referensi:
1 comments:
cuma pakai kode kode html yang basic saja ya ternyata min. nice sih
ReplyPost a Comment