Friday 27 March 2015
Apa itu biografi?
Menurut Wikipedia, 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.
Mengapa kali kita membahas biografi?
Kali ini kita mebahas biografi karena ada tugas dari ibu Aviarini Indriati (dosen Pemrograman Berbasis WEB di kelas 4ka23) untuk membuat biografi pribadi dengan menggunakan koding HTML sederhana. Jadi, mari kita bahas cara pembuatannya.
Lalu, apa itu HTML?
Untuk siapa saja yang biasa mengotak-atik koding, internet, blog, bahkan friendster di jaman saya SMP dulu, tentu cukup paham seperti apa basic dari HTML walau hanya sekedar edit teks bold dengan <b>, teks miring dengan italic <i>, dan lain-lain. Nah, untuk lebih jelasnya, menurut Wikipedia, Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Pertama-tama, siapkan dulu software editor html untuk membuat atau mengetik kodingan HTML. Contoh yang paling sering kita pakai adalah Notepad++ dan Adobe Dreamweaver atau versi lamanya yaitu Macromedia Dreamweaver. Namun selain itu ada pula HTML editor lainnya seperti bluefish, CoffeCup, Firebug, Page Freeze, Brackets, Netbeans (netbeans bukan cuma Java loh, sebab ada fitur membuat web juga), dll. Selain itu adapula HTML editor online yang terdapat di situs-situs pengembang web tertentu. Disini saya akan menggunakan Adobe Dreamweaver CS6 yang sudah terinstal di laptop saya sebagai editor HTML yang akan dibuat.
- Maka, langkah awal untuk membuat biografi dengan HTML ini adalah dengan membuka Adobe Dreamweaver. Caranya bisa dengan mencari letak shortcut di desktop maupun dengan start-all programs pada OS Windows 7. Gambar di bawah ini, disebelah kiri adalah icon dari Adobe Dreamweaver CS6 dan di sebelah kanan adalah splash screen loader yang muncul saat loading. Sedangkan gambar dibawahnya adalah tampilan shortcut icon pada desktop.
- Jika muncul jendela seperti gambar di bawah ini, pilih dan klik HTML
- Maka akan muncul tampilan html editor seperti gambar berikut ini. Disini yang terlihat adalah mode split, dimana sebelah kanan adalah kodingannya dan sebelah kiri adalah tampilan outputnya.
- Sebelum lupa, save html tadi dengan cara klik file - Save As.... Di gambar sebelah kiri berikut ini adalah tampilan dropdown menu file. Jika Save As... diklik, maka akan muncul jendela seperti gambar sebelah kanan di bawah ini. Save dengan namafile.html, misalnya biografi.html, klik Save.
- Setelah itu, saya mendownload sebuah background untuk latar belakang biografi saya. Saya menyimpan background yang saya download ke folder yang sama dengan folder tempat saya menyimpan biografi.html yang telah disimpan tadi.
- Setelah itu, mulai mengkoding bagian <body> pada file biografi.html untuk mensetting background yang telah di download. Berikut adalah screenshot koding dan outputnya.
- Selanjutnya saya membuat deklarasi <div> untuk header dan content untuk isinya. Berikut adalah tampilan kodingan dan outputnya
- Setelah mendeklarasikan div header dan content, saya membuat judul halaman di dalam header dengan menggunakan table 1x1 agar mudah dimodifikasi.
- Selanjutnya saya membuat tabel baru pada <div> content untuk menampilkan foto pada biografi saya.
- Setelah itu, baru memulai mengetik tulisan mengenai biografi pribadi pada content di bawah foto. Simpan foto pada folder yang sama dengan tempat menyimpan background.png dan biografi.html. Berikut adalah tampilan potongan koding dan outputnya.
- Selanjutnya saya memodifikasi tabel dan mengisi biografi yang telah ada dengan mengubah warna dan tampilan menjadi transparan. Berikut adalah tampilan potongan koding beserta outputnya.
- Untuk menjalankan htmlnya, klik icon gambar global bumi - lalu pilih mau View in "browser mana?". Misalnya, pilih View in Firefox.
- Berikut adalah tampilan yang muncul di browser Firefox.
- Maka, tugas membuat biografi dengan HTML sudah berhasil diimplementasikan.
- Berikut adalah source code aplikasinya
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body background="background.jpg" style="background-size:100%">
<div id="header">
<table style="border:#306 medium groove;; text-align:left; background-color: rgba(92,0,92,0.8);"width="100%">
<tr>
<td height="42"><center>
<strong><font face="snap itc" color="white" size="+2">Biografi Saya</font></strong>
</center></td>
</tr>
</table>
<br />
<div id="content" align="justify">
<table width="100%" style="border:#C06 medium dashed; text-align:left; background-color: rgba(244,114,137,0.8);">
<tr>
<td height="45"><center>
<img src="../pas.jpg" width="600" height="800" alt="pasfoto" style="width:140px;height:200px;border:#900 medium" />
</center></td>
</tr>
<tr>
<td align="justify"><p><font face="segoe print" color="black">Nama saya adalah Princess Gladys Ingrid. Saya adalah mahasiswi tingkat akhir Universitas Gunadarma angkatan 2011 kelas 4ka23. Saya kuliah di jurusan Sistem Informasi (SI), Fakultas Ilmu Komputer dan Teknologi Informasi (FIKTI). </font><font face="segoe print" color="black">Saya adalah anak terakhir dari tiga bersaudara dari pasangan berdarah Manado yang bernama Grietje Catherina M. dan Johly Allan P. Supit. Kedua orangtua saya lahir di tahun 1956, sehingga saat ini keduanya telah berumur 58 tahun. Saya lahir di kota Jakarta, 14 November 1993, sehingga sekarang saya berumur 21. Saya memiliki satu kakak laki-laki dan satu kakak perempuan. Kakak laki-laki saya bernama Prince Franklin M. Supit, yang saat ini berumur 32 tahun. Sedangkan kakak perempuan saya bernama Angel Christy P yang kini berumur 28 tahun. Kami sekeluarga berkewarganegaraan Indonesia dan beragama Kristen Protestan. Kami sekeluarga tinggal bersama di Perumahan Bumi Cibinong Endah Jalan Sarikaya RT/RW 03/12 Kelurahan Sukahati, Kecamatan Cibinong, Kabupaten Bogor.</font></p>
<p><font color="black" face="segoe print">Sekitar tahun 1999 ketika saya berumur 6 tahun, saya disekolahkan di salah satu sekolah dasar negeri yang bernama SD Negeri Pajeleran 01 yang terletak kurang lebih 1 KM dari rumah saya. Saya belajar di sekolah dasar tersebut selama 6 tahun. Lalu sekitar tahun 2005 ketika saya berumur 11 tahun, saya meneruskan pendidikan di SMP Negeri 2 Cibinong yang letaknya pun tidak jauh dari rumah. Sehingga dari SD sampai dengan SMP saya hanya perlu berjalan kaki untuk pulang maupun pergi ke sekolah. Setelah itu, saya melanjutkan pendidikan saya di SMA Negeri 2 Cibinong yang terletak di daerah Karadenan yang dapat diakses hanya dengan satu kali naik angkutan umum (angkot) dari depan perumahan. Setelah lulus SMA, saya melanjutkan pendidikan di Universitas Gunadarma jurusan Sistem Informasi sampai dengan semester 8 saat ini. Semester ini saya mendapatkan SK skripsi, sehingga saat-saat ini saya sedang berjuang untuk menyelesaikan skripsi saya. Semoga saja saya bisa cepat menyelesaikan tanggung jawab saya dalam menyelesaikan tugas akhir skripsi, agar dapat cepat lulus dan menjadi Sarjana Komputer lulusan Sistem Informasi di Universitas Gunadarma. Amin.</font></p>
</tr>
</table>
</div>
</body>
</html>
- Lalu berikut ini adalah tag HTML beserta fungsinya masing-masing
TAG-TAG HTML dan FUNGSINYA
|
|
Tag HTML
|
Fungsi
|
<html>...</html>
|
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah
HTML
|
<head>...</head>
|
Kepala dari dokumen HTML
|
<body>...</body>
|
Tag untuk menampilkan isi dokumen HTML
|
<title>...</title>
|
Judul dari dokumen HTML yang ditampilkan pada judul jendela
browser
|
<br>
|
Tag untuk ganti baris
|
<h1>...</h1>
|
Header 1, untuk judul sebuah web
|
<h2>...<h2>
|
Header 2, sub judul sebuah web
|
<h3>...</h3>
|
Header 3, sub judul sebuah web
|
<h4>...</h4>
|
Header 4, sub judul sebuah web
|
<h5>...</h5>
|
Header 5, sub judul sebuah web
|
<h6>...</h6>
|
Header 6, sub judul sebuah web
|
<b>...<b>
|
Bold, tag html yang berfungsi untuk mempertebal teks
|
<i>...<i>
|
Italic, tag html yang berfungsi untuk membuat tampilan teks
tercetak miring
|
<center>...</center>
|
Tag html berfungsi untuk menampilkan teks dengan posisi
horizontal ditengah
|
<font>...</font>
|
Tag html berfungsi untuk merubah jenis, ukuran dan warna dari
tampilan huruf
|
<table>...</table>
|
Tag yang berfungsi untuk membuat suatu data yang terdiri dari
baris dan kolom
|
<tr>...</tr>
|
Table Row, mendefiniskan baris pada tabel, dan tag ini harus ada
dalam tag TABLE
|
<td>...<td>
|
Table Data, terletak di dalam tag TR, yang berfungsi untuk
memasukkan data-data
|
<img>
|
Tag html untuk menampilkan gambar
|
<a>...</a>
|
Tag html yang berfungsi untuk menghubungkan ke internal atau
ekserrnal halaman web
|
Berikut ini uraiannya :
Tag
|
Parent
|
Fungsi
|
<table>
</table> |
---
|
tag utama
|
<tr></tr>
|
<table>
|
Tag baris
|
<th></th>
|
<tr>
|
Header table
|
<td></td>
|
<tr>
|
Tag sel-sel tabel
|
Berikut ini beberapa atribut
tag tabel
Atribut
|
Fungsi
|
bgcolor
|
warna background
|
width, height
|
lebar dan tinggi tabel (dalam % atau pixel)
|
border
|
lebar garis batas, 0=tanpa garis batas
|
align (left, right, center)
|
pengaturan posisi horisontal isi sel, rata
kanan/kiri/tengah
|
Tugas:
Pemrograman Berbasis WEB (Membuat Biografi dengan HTML)
Dosen :
Ibu Aviarini Indriati
Oleh:
Princess
Gladys Ingrid
4ka23 -
15111582
SI - FIKTI
- Universitas Gunadarma
Sumber:
Subscribe to:
Post Comments
(Atom)
UNIVERSITAS GUNADARMA
CLOCK
0 comments:
Post a Comment