Menghias HTML dengan CSS

0 komentar


Cascading Style Sheet (CSS) adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.


Pada tulisan sebelumnya, telah dibuat tutorial membuat CV pada website. Saat ini saya akan menunjukkan CSS pada script CV pada website yang telah saya buat sebelumnya.

Produk :

Website Curiculum Vitae.

Persiapan:

Siapkan Notepad++ sebagai lembar kerja editor. Pastikan telah menginstal browser Google Chrome atau Firefox pada pc/laptop.

Setelah semua persiapan dilakukan, saatnya untuk mengkoding. Silahkan buka Notepad++ kemudian ketikan script dibawah ini untuk halaman pertama:

1:  <head>  
2:  <style>  
3:  #wrapper{  
4:  height: 1048px;  
5:  width: 1200px;  
6:  background-image: url('spongebob-fresh-hd-wallpaper.jpg');  
7:  background-repeat: no-repeat;  
8:  margin: 0 auto;  
9:  background-size:1200px;        
10:  font-family:Impact, Charcoal, sans-serif;        
11:  background-color: rgb(118, 206, 241);background-position-y: 292px;  
12:    
13:  }  
14:  .box {  
15:  margin: 31px 31px 31px 31px;  
16:  width: 580px;  
17:  background: #fff;  
18:  padding: 20px;  
19:  border-radius: 12px;  
20:  }  
21:    
22:  #title {  
23:  padding-top: 10px;  
24:  text-align: center;  
25:  font-size: 23px;  
26:  }    
27:  #title h1 {  
28:  font-size: 2em;  
29:  }  
30:  table {  
31:  width: 580px;  
32:  }  
33:  table td{  
34:  vertical-align:top;  
35:  }  
36:  </style>  
37:  </head>  
38:  <body>  
39:  <div id='wrapper'>  
40:  <div id='title'><h1>Nur Putri Agustiyani</h1>@mioagustiyani</div>        
41:  <table style="  
42:    position: absolute;  
43:    right: -51px;  
44:    top: 196px;  
45:  "><tbody><tr><td><img src="mio cantik.jpg" style="  
46:    width: 330px;  
47:  "></td></tr></tbody></table>  
48:  <div class='box'>  
49:  <table>  
50:  <tr><td colspan="3"><h3>Biodata</h3></td></tr>  
51:  <tr><td>Nama         </td><td>:</td><td>Nur Putri Agustiyani</td></tr>  
52:  <tr><td>Tempat / Tanggal lahir</td><td>:</td><td>Jakarta, 18 Agustus 1991</td></tr>  
53:  <tr><td>Jenis kelamin     </td><td>:</td><td>Perempuan</td></tr>  
54:  <tr><td>Alamat        </td><td>:</td><td>Perum. Depok Mulya II jalan kaimana blok AF-12<br/> Beji-Depok 16421</td></tr>  
55:  <tr><td>Kewarganegaraan        </td><td>:</td><td>Indonesia</td></tr>  
56:  <tr><td>E-mail        </td><td>:</td><td>putri.agustiyanie@gmail.com</td></tr>  
57:  </table>  
58:  </table>  
59:    
60:  </div><a href='hal2.php' style="float: right;margin-right: 112px;">Halaman Berikutnya >></a>  
61:    
62:  <div class='box'>  
63:  <table>  
64:  <tr><td colspan="3"><h3>Pendidikan Formal</h3></td></tr>  
65:  <tr><td>1997 - 2003      </td><td>:</td><td>SDIT Nurul Fikri Depok</td></tr>  
66:  <tr><td>2003 - 2006      </td><td>:</td><td>SMPIT Nurul Fikri Depok</td></tr>  
67:  <tr><td>2006 - 2009      </td><td>:</td><td>Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
68:  <tr><td>2009 - sekarang        </td><td>:</td><td>Fakultas Ilmu Komputer Jurusan Sistem Informasi<br/> Universitas Gunadarma</td></tr>  
69:  </table>  
70:  </div>  
71:    
72:  <div class='box'>  
73:  <table>  
74:  <tr><td colspan="3"><h3>Pengalaman Kerja/Organisasi</h3></td></tr>  
75:  <tr><td>2006 - 2009      </td><td>:</td><td>Sekretaris Jendral Organisasi Intra Sekolah (OSIS)<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
76:  <tr><td>2008         </td><td>:</td><td>Peserta magang bagian informatika unit rekam medis<br/> Rumah Sakit Sofa Marwa Depok</td></tr>  
77:  <tr><td>2010         </td><td>:</td><td>Pengajar ekstrakurikuler paduan suara<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
78:  <tr><td>2010         </td><td>:</td><td>Pengajar ekstrakurikuler komputer<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
79:  <tr><td>2012 - sekarang        </td><td>:</td><td>Asisten tetap Laboratorium Pengembangan Pengolahan Citra<br/> Universitas Gunadarma</td></tr>  
80:  </table>  
81:  </div>  
82:  </div>   
83:    
84:  </body>  
85:    

Pada contoh program di atas, script untuk CSS dimulai dari tag <style> sampai </style>.

Berikut adalah penjelasannya:

· #wrapper{}
Digunakan untuk mendeklarasikan selektor ID 'wrapper'. Di dalam tanda buka kurung kurawal {} dapat dituliskan script untuk mendeklarasikan selektor ID tersebut.

· .box{}
Digunakan untuk mendeklarasikan class 'box'. Class 'box' ini dapat diterapkan di beberapa tag/bagian. Di dalam tanda buka kurung kurawal {} dapat dituliskan script untuk mendeklarasikan class 'box' tersebut.

· #title{}
Digunakan untuk mendeklarasikan selektor ID 'title'. Di dalam tanda buka kurung kurawal {} dapat dituliskan script untuk mendeklarasikan selektor ID tersebut.

· #title h1{}
Digunakan untuk mendeklarasikan selektor ID 'title h1'. Title dalam script ini berupa judul utama web, yaitu 'Nur Putri Agustiyani' dan pada baris selanjutnya '@mioagustiyani'. Di dalam tanda buka kurung kurawal {} dapat dituliskan script untuk mendeklarasikan selektor ID tersebut.


Untuk hasil akhirnya adalah sebagai berikut:


Demikianlah tutorial website sederhana dengan menggunakan script CSS. Semoga bermanfaat. Terima kasih..

Read More »»  

Kriteria Manager Proyek yang Baik

0 komentar

Manager adalah orang atau seseorang yang harus mampu membuat orang-orang dalam organisasi yang berbagai karakteristik, latar belakang budaya, akan tetapi memiliki ciri yang sesuai dengan tujuan dan teknologi. Manajer Proyek (Project Manager) adalah seseorang yang brtindak sebagai pimpinan dalam suatu proyek. PM ini sangat berperan penting dalam adanya suatu proyek, karena kegagalan dan keberhasilan dari proyek tersebut di tentukan oleh PM itu sendiri.
Pemilihan seorang manajer proyek merupakan satu dari dua atau tiga keputusan paling utama mengenai proyek. Manajer proyek perlu memiliki kerangka harapan agar dapat berhasil dengan baik.
Berikut ini adalah 3 karakteristik yang dapat digunakan untuk mengukur tingkat kualifikasi seseorang untuk menjadi Manajer Proyek:

       I.            Karakter Pribadinya

  • Memiliki pemahaman yang menyeluruh mengenai teknis pekerjaan dari proyek yang dikelola olehnya.
  • Mampu bertindak sebagai seorang pengambil keputusan yang handal dan bertanggung jawab.
  • Memiliki integritas diri yang baik namun tetap mampu menghadirkan suasana yang mendukung di lingkungan tempat dia bekerja.
  • Asertif
  • Memiliki pengalaman dan keahlian yang memadai dalam mengelola waktu dan manusia.


    II.            Karakteristik Kemampuan Terkait dengan Proyek yang Dikelola

  • Memiliki komitmen yang kuat dalam meraih tujuan dan keberhasilan proyek dalam jadwal, anggaran dan prosedur yang dibuat.
  • Pelaksanakan seluruh proses pengembangan proyek IT sesuai dengan anggaran dan waktu yang dapat memuaskan para pengguna/klien.
  • Pernah terlibat dalam proyek yang sejenis.
  • Mampu mengendalikan hasil-hasil proyek dengan melakukan pengukuran dan evaluasi kinerja yang disesuaikan dengan standar dan tujuan yang ingin dicapai dari proyek yang dilaksanakan.
  • Membuat dan melakukan rencana darurat untuk mengantisipasi hal-hal maupun masalah tak terduga.
  • Membuat dan menerapkan keputusan terkait dengan perencanaan.
  • Memiliki kemauan untuk mendefinisikan ulang tujuan, tanggung jawab dan jadwal selama hal tersebut ditujukan untuk mengembalikan arah tujuan dari pelaksanaan proyek jika terjadi jadwal maupun anggaran yang meleset.
  • Membangun dan menyesuaikan kegiatan dengan prioritas yang ada serta tenggat waktu yang ditentukan sebelumnya.
  • Memiliki kematangan yang tinggi dalam perencanaan yang baik dalam upaya mengurangi tekanan dan stres sehingga dapat meningkatkan produktifitas kerja tim.
  • Mampu membuat perencanaan dalam jangka panjang dan jangka pendek.


 III.            Karakteristik Kemampuan Terkait dengan Tim yang Dipimpin

  • Memiliki kemampuan dan keahlian berkomunikasi serta manajerial.
  • Mampu menyusun rencana, mengorganisasi, memimpin, memotivasi serta mendelegasikan tugas secara bertanggung jawab kepada setiap anggota tim.
  • Menghormati para anggota tim kerjanya serta mendapat kepercayaan dan penghormatan dari mereka.
  • Berbagi sukses dengan seluruh anggota tim.
  • Mampu menempatkan orang yang tepat di posisi yang sesuai.
  • Memberikan apresiasi yang baik kepada para anggota tim yang bekerja dengan baik.
  • Mampu mempengaruhi pihak-pihak lain yang terkait dengan proyek yang dipimpinnya untuk menerima pendapat-pendapatnya serta melaksanakan rencana-rencana yang disusunnya.
  • Mendelegasikan tugas-tugas namun tetap melakukan pengendalian melekat.
  • Memiliki kepercayaan yang tinggi kepada para profesional terlatih untuk menerima pekerjaan-pekerjaan yang didelegasikan darinya.
  • Menjadikan dirinya sebagai bagian yang terintegrasi dengan tim yang dipimpinnya.
  • Mampu membangun kedisiplinan secara struktural.
  • Mampu mengidentifikasi kelebihan-kelebihan dari masing-masing anggota tim serta memanfaatkannya sebagai kekuatan individual.
  • Mendayagunakan setiap elemen pekerjaan untuk menstimulasi rasa hormat dari para personil yang terlibat dan mengembangkan sisi profesionalisme mereka.
  • Menyediakan sedikit waktu untuk menerima setiap ide yang dapat meningkatkan kematangan serta pengembangan dirinya.
  • Selalu terbuka atas hal-hal yang mendorong kemajuan.
  • Memahami secara menyeluruh para anggota tim yang dipimpinnya dan mengembangkan komunikasi efektif di dalamnya.



Sumber:http://udifq.wordpress.com/kriteria-manajer-proyek-yang-baik/

http://111pang.blogspot.com/2012/04/kriteria-manager-proyek-yang-baik.html

Read More »»  

COCOMO dan Jenisnya

0 komentar

I.   Pengertian COCOMO

COCOMO adalah sebuah model yang didesain oleh Barry Boehm untuk memperoleh perkiraan dari jumlah orang-bulan yang diperlukan untuk mengembangkan suatu produk perangkat lunak. Satu hasil observasi yang paling penting dalam model ini adalah bahwa motivasi dari tiap orang yang terlibat ditempatkan sebagai titik berat. Hal ini menunjukkan bahwa kepemimpinan dan kerja sama tim merupakan sesuatu yang penting, namun demikian poin pada bagian ini sering diabaikan.

II.   Sejarah COCOMO

COCOMO pertama kali diterbitkan pada tahun 1981 Barry Boehm W.'s Book ekonomi Software engineering sebagai model untuk memperkirakan usaha, biaya, dan jadwal untuk proyek-proyek perangkat lunak. Ini menarik pada studi dari 63 proyek di TRW Aerospace mana Barry Boehm adalah Direktur Riset dan Teknologi Perangkat Lunak pada tahun 1981. Penelitian ini memeriksa proyek-proyek ukuran mulai dari 2.000 sampai 100.000 baris kode, dan bahasa pemrograman mulai dari perakitan untuk PL / I. Proyek-proyek ini didasarkan pada model pengembangan perangkat lunak waterfall yang merupakan proses software umum pembangunan di 1981.
Referensi untuk model ini biasanya menyebutnya COCOMO 81. Pada tahun 1997 COCOMO II telah dikembangkan dan akhirnya diterbitkan pada tahun 2000 dalam buku Estimasi Biaya COCOMO II Software dengan COCOMO II. adalah penerus dari COCOMO 81 dan lebih cocok untuk mengestimasi proyek pengembangan perangkat lunak modern. Hal ini memberikan lebih banyak dukungan untuk proses pengembangan perangkat lunak modern, dan basis data proyek diperbarui. Kebutuhan model baru datang sebagai perangkat lunak teknologi pengembangan pindah dari batch processing mainframe dan malam untuk pengembangan desktop, usabilitas kode dan penggunaan komponen software off-the-rak. Artikel ini merujuk pada COCOMO 81.

III.  Jenis COCOMO


1. Basic (COCOMO I 1981)

Menghitung dari estimasi jumlah LOC (Lines of Code);
Dengan menggunakan estimasi parameter persamaan (dibedakan menurut tipe sistem yang berbeda) upaya pengembangan dan pembangunan durasi dihitung berdasarkan perkiraan DSI.
Dengan rincian untuk fase ini diwujudkan dalam persentase. Dalam hubungan ini dibedakan menurut tipe sistem (organik-batch, sebagian bersambung-on-line, embedded-real-time) dan ukuran proyek (kecil, menengah, sedang, besar, sangat besar).

2. Intermediate (COCOMO II 1999)

Menghitung dari besarnya program dan “cost drivers” (faktor-faktor yangberpengaruh langsung kepada proyek), seperti: perangkat keras, personal, danatribut-atribut proyek lainnya;
Mempergunakan data-data historis dari proyek-proyek yang pernah menggunakanCOCOMO I, dan terdaftar pengelolaan proyeknya dalam COCOMO database.
Persamaan estimasi sekarang mempertimbangkan (terlepas dari DSI) 15 pengaruh faktor-faktor; ini adalah atribut produk (seperti kehandalan perangkat lunak, ukuran database, kompleksitas), komputer atribut-atribut (seperti pembatasan waktu komputasi, pembatasan memori utama), personil atribut ( seperti aplikasi pemrograman dan pengalaman, pengetahuan tentang bahasa pemrograman), dan proyek atribut (seperti lingkungan pengembangan perangkat lunak, tekanan waktu pengembangan). Tingkat pengaruh yang dapat diklasifikasikan sebagai sangat rendah, rendah, normal, tinggi, sangat tinggi, ekstra tinggi; para pengganda dapat dibaca dari tabel yang tersedia.

3. Advanced

Memperhitungkan semua karakteristik dari “intermediate” di atas dan “cost drivers” dari setiap fase (analisis, desain, implementasi, dsb) dalam siklus hiduppengembangan perangkat lunak.
Dalam hal ini adalah rincian untuk fase tidak diwujudkan dalam persentase, tetapi dengan cara faktor-faktor pengaruh dialokasikan untuk fase. Pada saat yang sama, maka dibedakan menurut tiga tingkatan hirarki produk (modul, subsistem, sistem), produk yang berhubungan dengan faktor-faktor pengaruh sekarang dipertimbangkan dalam persamaan estimasi yang sesuai. Selain itu detail cocomo dapatmenghubungkan semua karakteristik versi intermediate dengan penilaian terhadap pengaruh pengendali biaya pada setiap langkah (analisis, perancangan, dll) dari proses rekayasa PL.



Sumber: 
http://dwiyuliani-dwiyuliani.blogspot.com/2011/04/cocomo.html
http://bar0eb0eat.blogspot.com/2012/04/cocomo-constructive-cost-model-dan.html
Read More »»  

Alasan Menggunakan Software Open Source dalam Membuat Aplikasi

0 komentar

Open source software adalah istilah yang digunakan untuk software yang membuka/membebaskan source codenya untuk dilihat oleh orang lain dan membiarkan orang lain mengetahui cara kerja software tersebut dan sekaligus memperbaiki kelemahan-kelemahan yang ada pada software tersebut. Dan yang menarik dan salah satu keunggulannya adalah bahwa Open source software dapat diperoleh dan digunakan secara gratis tanpa perlu membayar lisensi. Biasanya orang mendapatkan software ini dari internet. Salah satu open source software yang terkenal yaitu Linux.

Keberadaan open source software ini sangat ditunjang oleh internet. Mula-mula open source software diambil dari internet kemudian digunakan oleh orang dan diperbaiki apabila ada kesalahan. Hasil perbaikan dari open source ini kemudian dipublikasikan kembali melalui internet yang memungkinkan orang lain menggunakan dan memperbaikinya. Dan begitulah seterusnya. Saat ini sangat mudah mendapatkan open source software di internet.

Pengembangan open source software melibatkan banyak orang dari berbagai penjuru dunia yang berinteraksi melalui internet. Maka bermunculanlah berbagai macam software yang dibuat berbasis open source ini yang dipublikasikan melalui internet. Pola open source ini telah melahirkan developer-developer handal dari berbagai penjuru dunia.

Dengan pola open source orang dapat membuat dan mengembangkan apa yang disebut dengan free software. Software ini dapat digunakan tanpa perlu membayar lisensi atau hak cipta karena memang dikembangkan dengan pola open source. Jadi, dengan pola open source orang dapat mengembangkan software dan mempublikasikannya dengan bebas melalui internet. Maka tidak heran apabila kita akan banyak menemukan free software ini di internet dan bisa secara bebas mendownloadnya tanpa perlu membayar uang sepeser pun kepada pengembang software tersebut.

Free software disini juga bukan program kacangan. Anggapan bahwa barang yang gratis jelek kualitasnya tidak berlaku buat free software. Karena sudah terbukti kehandalannya. Dan karena free software berbasis open source maka software tersebut sudah melalui proses perbaikan yang terus menerus. Jadi tidak ada alasan tidak mau menggunakan free software ini dengan alasan kualitasnya yang tidak baik.

Dengan karakteristik yang telah disebutkan di atas maka tidak salah apabila kita menaruh harapan pada open source ini sebagai platform alternatif yang bisa kita gunakan dalam komputer kita. Penerapan pola open source di Indonesia juga dapat menghilangkan pemakaian software komersial secara ilegal dan memungkinkan bangsa Indonesia dikenal karya ciptanya dengan ikut mengembangkan open source software.

Keuntungan software open source:

  1.  Ketersedian source code dan hak untuk memodifikasi
  2. Hak untuk mendistribusikan modifikasi dan perbaikan pada code
  3. Hak untuk menggunakan software
  4. Legal
  5. Penyelamatan devisa negara
  6. Keamanan negara atau perusahaan
  7. Keamanan Sistem

Kerugian software open source:

  1. Tidak ada garansi dari pengembangan
  2. Masalah yang berhubungan dengan intelektual property
  3. Kesulitan dalam mengetahui status project



Sumber:http://yudithtesalonika.blogspot.com/2011/06/kenapa-anda-dianjurkan-menggunakan.html 
http://cap-cip-cupzz.blogspot.com/2011/03/vclass-keuntungan-dan-kerugian.html
Read More »»  

Website Curiculum Vitae

0 komentar
Semua orang pasti memiliki cv yang mereka gunakan untuk kepentingan masing-masing. Biasanya cv tersebut dibuat semenarik mungkin agar sang pembaca cv tertarik. Banyak cara yang digunakan untuk membuat sebuah cv salah satunya dengan memanfaatnya teknologi. Berikut ini adalah langkah dalam pembuatan CV pada website.
Produk :
Website Curiculum Vitae terdiri dari dua halaman.

Persiapan:
siapkan dulu notepad++ sebagai lembar kerja editor
pastikan telah menginstal browser google chrome atau firefox pada pc/laptop

Setelah semua persiapan dilakukan, saatnya untuk mengkoding.. silahkan dibuka notepad++ nya kemudian ketikan script dibawah ini untuk halaman pertama

1:  <head>  
2:  <style>  
3:  #wrapper{  
4:  height: 1048px;  
5:  width: 1200px;  
6:  background-image: url('spongebob-fresh-hd-wallpaper.jpg');  
7:  background-repeat: no-repeat;  
8:  margin: 0 auto;  
9:  background-size:1200px;        
10:  font-family:Impact, Charcoal, sans-serif;        
11:  background-color: rgb(118, 206, 241);background-position-y: 292px;  
12:    
13:  }  
14:  .box {  
15:  margin: 31px 31px 31px 31px;  
16:  width: 580px;  
17:  background: #fff;  
18:  padding: 20px;  
19:  border-radius: 12px;  
20:  }  
21:    
22:  #title {  
23:  padding-top: 10px;  
24:  text-align: center;  
25:  font-size: 23px;  
26:  }    
27:  #title h1 {  
28:  font-size: 2em;  
29:  }  
30:  table {  
31:  width: 580px;  
32:  }  
33:  table td{  
34:  vertical-align:top;  
35:  }  
36:  </style>  
37:  </head>  
38:  <body>  
39:  <div id='wrapper'>  
40:  <div id='title'><h1>Nur Putri Agustiyani</h1>@mioagustiyani</div>        
41:  <table style="  
42:    position: absolute;  
43:    right: -51px;  
44:    top: 196px;  
45:  "><tbody><tr><td><img src="mio cantik.jpg" style="  
46:    width: 330px;  
47:  "></td></tr></tbody></table>  
48:  <div class='box'>  
49:  <table>  
50:  <tr><td colspan="3"><h3>Biodata</h3></td></tr>  
51:  <tr><td>Nama         </td><td>:</td><td>Nur Putri Agustiyani</td></tr>  
52:  <tr><td>Tempat / Tanggal lahir</td><td>:</td><td>Jakarta, 18 Agustus 1991</td></tr>  
53:  <tr><td>Jenis kelamin     </td><td>:</td><td>Perempuan</td></tr>  
54:  <tr><td>Alamat        </td><td>:</td><td>Perum. Depok Mulya II jalan kaimana blok AF-12<br/> Beji-Depok 16421</td></tr>  
55:  <tr><td>Kewarganegaraan        </td><td>:</td><td>Indonesia</td></tr>  
56:  <tr><td>E-mail        </td><td>:</td><td>putri.agustiyanie@gmail.com</td></tr>  
57:  </table>  
58:  </table>  
59:    
60:  </div><a href='hal2.php' style="float: right;margin-right: 112px;">Halaman Berikutnya >></a>  
61:    
62:  <div class='box'>  
63:  <table>  
64:  <tr><td colspan="3"><h3>Pendidikan Formal</h3></td></tr>  
65:  <tr><td>1997 - 2003      </td><td>:</td><td>SDIT Nurul Fikri Depok</td></tr>  
66:  <tr><td>2003 - 2006      </td><td>:</td><td>SMPIT Nurul Fikri Depok</td></tr>  
67:  <tr><td>2006 - 2009      </td><td>:</td><td>Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
68:  <tr><td>2009 - sekarang        </td><td>:</td><td>Fakultas Ilmu Komputer Jurusan Sistem Informasi<br/> Universitas Gunadarma</td></tr>  
69:  </table>  
70:  </div>  
71:    
72:  <div class='box'>  
73:  <table>  
74:  <tr><td colspan="3"><h3>Pengalaman Kerja/Organisasi</h3></td></tr>  
75:  <tr><td>2006 - 2009      </td><td>:</td><td>Sekretaris Jendral Organisasi Intra Sekolah (OSIS)<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
76:  <tr><td>2008         </td><td>:</td><td>Peserta magang bagian informatika unit rekam medis<br/> Rumah Sakit Sofa Marwa Depok</td></tr>  
77:  <tr><td>2010         </td><td>:</td><td>Pengajar ekstrakurikuler paduan suara<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
78:  <tr><td>2010         </td><td>:</td><td>Pengajar ekstrakurikuler komputer<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>  
79:  <tr><td>2012 - sekarang        </td><td>:</td><td>Asisten tetap Laboratorium Pengembangan Pengolahan Citra<br/> Universitas Gunadarma</td></tr>  
80:  </table>  
81:  </div>  
82:  </div>   
83:    
84:  </body>  
85:    

berikut adalah penjelasan untuk halaman pertama :

· <div id=’title’><h1>Nur Putri Agustiyani</h1>@mioagustiyani</div>
Digunakan untuk mengatur jenis dan ukuran dari teks yang ingin ditampilkan.

· <div class=’box’>
Digunakan untuk memberikan section class yaitu box.

· <table>
Digunakan untuk membuat sebuah table pada website.

· <table style="
position: absolute;
right: -51px;
top: 196px;
"><tbody><tr><td><img src="mio cantik.jpg" style="
width: 330px;
"></td></tr></tbody></table>
Digunakan untuk mengatur tata letak maupun resolusi pada gambar yang akan ditampilkan.

· <tr><td colspan=”3”><h3>Biodata</h3></td></tr>
Digunakan untuk membuat baris di dalam sebuah table yang kemudian di definisikan didalam cell pada table,dengan heading teks (h3).

· <table>
Digunakan untuk membuat sebuah table pada website.

· </div>
Digunakan untuk mengakhiri section.

· <div class=’box’>
Digunakan untuk memberikan section class yaitu box.

· <table>
Digunakan untuk membuat sebuah table pada website.

· <tr><td colspan=”3”><h3>Pendidikan Formal</h3></td></tr>
Digunakan untuk membuat baris di dalam sebuah table yang kemudian di definisikan didalam cell pada table,dengan heading teks (h3).

· </div><a href=’hal2.php’ style=”float: right;margin-right:112px;”>Halaman Berikutnya >></a>
Digunakan memberikan link menuju ke halaman berikutnya dengan tipe style float, margin kanan dan ukuran 112px untuk font.

· <div class=’box’>
Digunakan untuk memberikan section class yaitu box.

· <tr><td colspan=”3”><h3>Pengalaman Kerja/Organisasi</h3></td></tr>
Digunakan untuk membuat baris di dalam sebuah table yang kemudian di definisikan didalam cell pada table,dengan heading teks (h3).

· </div>
Digunakan untuk mengakhiri setiap section.

· </body>
Digunakan untuk mengakhiri statement pada body.

Selain pada halaman pertama, kini kita buat untuk halaman kedua. Pada halaman ini kita hanya akan menampilkan gambar.
silahkan tulis script dibawah ini :

1:  <head>  
2:  <head>  
3:  <body>  
4:  <img src='spongebob 2.jpg' style='width:100%'/>  
5:  </body>  

berikut adalah penjelasan untuk halaman kedua :


· <head>
Digunakan untuk menuliskan keterangan dokumen HTML, misalnya berupa judul halaman.

· <body>
Digunakan untuk menuliskan tag-tag atau isi yang akan menjadi konten website.

· <img src='spongebob 2.jpg' style='width:100%'/>
Digunakan untuk memasukkan gambar pada halaman web.

· </body>
Digunakan untuk mengakhiri statement pada body.

Untuk hasil akhirnya adalah sebagai berikut :

Halaman pertama pada Website



Halaman kedua pada Website


Taraaaaaa.... sudah selesai website CV kita dan siap untuk di upload ke website pribadi kita, bagaimana? mudah kan? demikianlah tutorial sederhana ini, semoga bisa membantu teman-teman dalam mempelajari dasar dari HTML.. Terima Kasih :D

Read More »»