MUHAMMADFARHAN_BLOG : Desember 2014

Selasa, 30 Desember 2014

Cara Membuat Tabel biodata dgn Html sederhana dgn menggunakan CSS

Membuat Biodata Dgn HTML & CSS

Assalamualaikum wr.wb.

Alhamdulillah kali ini saya masih diberi kesehatanuntuk bisa memberikan sedikit ilmu tentang cara membuat Tabel Biodata menggunakan html dan css.pertama saya berterimakasih pd umi Siti Alawiyah yg selalu mensuport saya dan selalu mendoakan saya sampai sekarang

Yohoho.. Ngepost lagi deh,, sekarang saya mau ngepost tentang bagaiamana membuat sebuah biodata menggunakan HTML dan CSS, yang kebetulan ni merupakan tugas campus :D,,Sebelum membuat sebuah Biodata alangkah baiknya teman-teman mempersiapkan text editor yang akan memudahkan dalam pengerjaan sepert Notepad++, Code Lobster, Adobe Dreamweaver, dll. tanpa basi-basi lagi langsung cek… =))Disini kita akan membuat 2 file HTML dan 2 file CSS1 file untuk biodata, 1 file untuk detailnya, kemudian duanya dengan CSS.

kita akan membuat HTML nya terlebih dahulu silhakan salin kode berikut :

`<!DOCTYPE html><html><head><meta name="description" content="Biodata"/><meta name="Keywords" content="Biodata"/><meta name="authors" content="farhan/><meta charset="UTF-8"/><title>Biodata</title><link rel="stylesheet" href="styleku.css"/></head><body><form action="#" style="width: 1000px"class="posisi";><fieldset class="h"/><table style="width: 980px;"><tr><td rowspan="15" width="250px"><img src="a.jpg" width="250px" height="420px"/></td></tr><tr><td><b>Nama Lengkap</b></td><td>:</td><td>Muhammad farhan</td></tr><tr><td><b>Nama Panggilan</b></td><td>:</td><td>Farhan</td></tr><tr><td><b>Tempat, Tanggal Lahir</b></td><td>:</td><td>Jakarta,29 agustus 19_ _</td></tr><tr><td><b>Umur</b></td><td>:</td><td>_ _ Tahun</td></tr><tr><td><b>Jenis Kelamin</b></td><td>:</td><td>Laki - Laki</td></tr><tr><td><b>Gol. Darah</b></td><td>:</td><td>O</td></tr><tr><td><b>Agama</b></td><td>:</td><td>Islam</td></tr><tr><td><b>Alamat</b></td><td>:</td><td>Jalan H,kebon baru ,Tebet,jakarta selatan</td></tr><tr><td><b>Status</b></td><td>:</td><td>Belum Menikah</td></tr><tr><td><b>Pekerjaan</b></td><td>:</td><td>Mahasiswa</td></tr><tr><td><b>Kewarganegaraan</b></td><td>:</td><td>Indonesia</td></tr><tr><td><b>Riwayat</b></td><td>:</td><td colspan="1" align="left">Ingin Tahu Riwayatku ? <a href="Detail.html"style="text-decoration: none;" target="_parent"><inputtype="button"value="Profil lengkapku?"/></a></td></tr></table></fieldset></form></body></html>`

Setelah gan copy source HTMLnya kemudian copy CSSnya simpan dengan nama “styleku.css”

`table,tr,td{background-color: LightGoldenRodYellow ;font-family: century gothic;color: green;border: 1px solid aqua;padding: 5px;border-collapse: collapse;}.h{border: 8px groove yellow;padding: 20px;}.posisi{position: absolute;margin-left: auto;margin-right: auto;margin-bottom: auto;margin-top: auto;left: 0;right: 0;top: 100px;bottom: 0;}body{background-image: url('backgroundfarhan.jpg');background-repeat: no-repeat;background-size: 1400px auto;}`Kemudian jalankan source code tersebut maka tampilannya akan seperti berikut, tapi sebelumnya agan-agan cari gambar background kemudian simpan dengan nama “farhan.jpg” hasil html & css yg pertama.

langkah selanjutnya untuk pembuatan detailnya.. salin source code dibawah ini kemudian simpan dengan nama “Detail.html”

`<!DOCTYPE html><html><head><meta name="description" content="Biodata"/><meta name="Keywords" content="Biodata"/><meta name="authors" content="farhan"/><meta charset="UTF-8"/><title>Biodata</title><link rel="stylesheet" href="orapopo.css"/></head><body><form action="#" style="width: 1000px"class="posisi";><table style="width: 950px;"><tr><td colspan="4" style="text-align: center; background-color: Green;color: orange"><b>Riwayat Jenjang Pendidikan Formal</b></td></tr><tr><td style="text-align: center">Jenjang Pendidikan</td><td style="text-align: center">Keterangan</td><td style="text-align: center">Bidang Jurusan</td><td style="text-align: center">Tahun</td></tr><tr><td>SEKOLAH DASAR</td><td>Sekolah Dasar Neger 01 pg</td><td>Tidak ada</td><td>1999 s.d 2000</td></tr><tr><td>SEKOLAH MENENGAH PERTAMA</td><td>SLTP N 265 ,jakarta selatan</td>`<td>Tidak ada</td>`<td>2000s.d 2003</td></tr><tr><td>SEKOLAH LANJUTAN ATAS</td><td>Sekolah Menengah Kejuruan BERLIAN,jakarta selatan</td><td>Teknik Instalasi Listrik</td><td>2003 s.d 2006 </td></tr><tr><td>STRATA I</td><td>Sekolah Tinggi Teknik Informatika dan Teknik Komputer, jakarta</td><td>Sistem Komputer</td><td>2012 s.d Sekarang</td></tr></table><br><table style="width: 750px;"><tr><td colspan="4" style="text-align: center; background-color: Green;color: orange"><b>Informasi Umum</b></td></tr><tr><td>Nomor Telephon</td><td>:</td><td>+6283872784_ _ _</td></tr><tr><td>E-mail</td><td>:</td><td><a href="mailto:farhanfals.blogspot.com style="text-decoration: none;color: black";>another :farhanfals.blogspot.com</a></td></tr><tr><td>Hobi</td><td>:</td><td>Coding, Traveling,Ngaji, Baca Maulid, music iwan fals</td></tr></table><br><table style="width: 750px;"><tr><td colspan="4" style="text-align: center; background-color: Green;color: orange"><b>Keluarga</b></td></tr><tr><td>Nama Ayah</td><td>:</td><td>effendi</td></tr><tr><td>Pekerjaan</td><td>:</td><td>Wiraswasta</td></tr><tr><td>Alamat</td><td>:</td><td>sama dgn alamat saya</td></tr><tr><td colspan="3"></td></tr><tr><td>Nama Ibu</td><td>:</td><td>Siti Alawiyah</td></tr><tr><td>Pekerjaan</td><td>:</td><td>Ibu Rumah Tangga</td></tr><tr><td>Alamat</td><td>:</td><td>sama dengan alamat saya</td></tr><td colspan="3" align="right"><a href="Tugas.html" style="text-decoration: none;"</a><input type="button" onclick="history.back()" value="Kembali"/></td></table></form></body></html>`

langkah terakhir adalah membuat CSS. silahkan agan-agan salin source code dibawah ini kemudian simpan dengan nama “orapopo.css”

`table,tr,td{font-family: century gothic;color: black ;border: 1px solid aqua;padding: 5px;background-color: white;}.posisi{position: absolute;margin-left: auto;margin-right: auto;margin-bottom: auto;margin-top: auto;left: 160px;right: 0;top: 60px;bottom: 0;}body{background-image: url('b.jpg');background-repeat: no-repeat;background-size: 1480px auto;background-attachment: fixed;}`

Baca selengkapnya »

Jumat, 19 Desember 2014

ANALISIS SWOT

Assalamualaikum warahmatullahi wabarakatuh, puji sukur kehadirat tuhan yang maha Esa yg telah memberikan kemudahan bagi saya untuk membuat blog ini agar dapat bermanfaat bagi kawan yang membutuhkan. Kurang lebih nya saya ucap kan terimakasih atas kunjungannya...

Baca selengkapnya »

Langganan: Komentar (Atom)