Candra Zul Isman: Membuat biografi dengan HTML

Pertama-tama perkenalkan dulu, nama saya Candra Zul Isman, disini saya mau share langkah-langkah membuat biografi saya dengan source code HTML menggunakan software atau editor dreamweaver.

sebenarnya tidak harus menggunakan dreamweaver juga, menggunakan notepad ++ pun bisa, kelebihan menggunakan dreamweaver ini kita bisa mendesain tampilan sesuai yang kita suka agar interfacenya kelihatan menarik, tetapi saya tidak memfokuskan ke interface nya, karena ini hanya basic saja.

oke pertama saya jelaskan dulu untuk pengertian HTML itu sendiri.

apa yang dimaksud dengan HTML ?

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.

(wikipedia)

Sekarang kita sudah mengetahui apa itu HTML, untuk selanjutnya saya jelaskan tahap-tahap berikut fungsi masing-masing tag pada html yang saya gunakan.

NB : Disini kalian perlu sebuah aplikasi notepad ++ atau editor dreamweaver, berhubung saya menggunakan dreamweaver jadi saya hanya menjelaskannya dengan dreamweaver.

1. Buka aplikasi dreamweaver

Klik 2 kali pada editor dreamweaver => HTML

2. Buka Tab Code

<!DOCTYPE> Mendefinisikan informasi tipe dokumen
<head>...</head> Kepala dari dokumen HTML
<title> Judul dari dokumen HTML yang ditampilkan pada judul jendela browser
<body>...</body> Tag untuk menampilkan isi dokumen HTML
<html>...</html> Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML

3. Ketik source code berikut pada tab code

<div> mendefinisikan sebuah section dalam dokumen
<center> untuk perataan tengah terhadap teks atau gambar
<h4>...</h4> Header 4, sub judul sebuah web
<font> mendefinisikan jenis font, warna dan ukuran untuk teks
<table> membuat tabel
<tr> membuat baris di dalam sebuah tabel
<th> mendefinisikan sel header di dalam sebuah tabel
<p> membuat sebuah paragraf
<span> mendefinisikan sebuah section dalam dokumen
<style> mendefinisikan informasi style untuk dokuen HTML
<br> memberi baris baru atau pindah baris

untuk lebih jelasnya ini saya tampilkan source code saya :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Biografi</title>

</head>

<body>

BIOGRAFIKU

</font></h4>

<tr>

</tr>

</table>

</center>

<p>Saya bernama lengkap "Candra Zul Isman", lahir di Padang 22 juli 1992.<br>

<span style="text-align: justify;">Saya adalah seorang mahasiswa tingkat akhir semester 8 di UNIVERSITAS GUNADARMA fakultas ilmu komputer, jurusan Sistem Informasi</span>. <span style="text-align: justify;">Saat ini saya tinggal bersama kedua orang tua saya dan kedua adik saya</span>.<br>

<span style="text-align: justify;">Orang tua saya yang bernama Zultomi (Ayah saya) sekarang bekerja sebagai wirausaha, membuka usaha kecil-kecilan dirumah, ibu saya yang bernama Ismaniar sebagai ibu rumah tangga, kemudian adik pertama saya laki-laki yang bernama Epri Junaidi bekerja di capucino, dan terakhir adik saya yang perempuan Widia Faranisa masih menjadi pelajar di SMPN 91.</span><br>

<span style="text-align: justify;">Saya sekeluarga bertempat tinggal di jalan Mangga II RT06/009 No 7a, Cibubur Jakarta Timur.

Sebelum saya memasuki dunia perkuliahan saya sempat bekerja di salah satu perusahaan otomotif PT YAMAHA INDONESIA MOTOR MFG</span>, dan pada akhirnya setelah saya bekerja, saya memutuskan untuk melanjutkan pendidikan saya di jenjang strata 1 atau biasa disebut sarjana. Saat ini saya berada di kelas 4KA23 yang dimana sebelumnya saya berada di kelas KA19 sebelum di pindahkan kelas menjadi KA23 saat di tingkat 2 sesuai aturan dari kampus.</p>

<p>Riwayat pendidikan saya :<br>

SD 01 pg lulus thun 2004, Cibubur Jaktim.<br>

MTS AL-HAMID lulus tahun 2007, Cilangkap Jaktim.<br>

SMK INSAN TEKNOLOGI lulus tahun 2010, Cibubur Jaktim.<br>

Universitas GUNADARMA 2011 - sekarang, Depok.</p></div>

</div>

</body>

</html>

4. Save, simpan file kalian dengan nama biografi, ingat ext nya pasti html, kalau bukan html pasti ada kesalahan saat menyimpan atau kesalahan awal kalian membuka softwarenya.

5. Lakukan uji coba, cukup tekan f12 pada keyboard PC atau laptop kalian. Maka akan keluar tampilan dari code yang sudah kalian buat, seperti ini lah tampilannya, sederhana bukan :)