Yulandari's Blog

April 22, 2013

Contoh penggunaan css pada html pembuatan cv

Filed under: Uncategorized — yulandari @ 11:30 am

Disini script css yang saya gunakan adalah menggubah warna text dan ukuran text, sebagai berikut :

<p style=’color : brown ; font-size: 300%’> CURRICULUM VITAE </p>

Maka akan menjadi

CURRICULUM VITAE

dan berikut adalah koding html pembuantan CV yang diberi css style

<html>

<body>

<p style=’color : brown ; font-size: 300%’> CURRICULUM VITAE </p>

</body>
<head>
<title>Curicullum Vitae</title>
</head>

//

Karena kita sedang memakai bahasa HTML tentunya di awali dengan <html>, ini wajib karena sebagai pembuka dalam menulis script-script yang lain.
pada bagian ini adalah untuk memberikan judul dari web/html anda (pada tab), pada contoh kali ini title html ini adalah “Curicullum Vitae”.

//
<body>
<p align=”center”>
<strong>C U R R I C U L U M&nbsp;&nbsp; V I T A E</strong></p><hr/>
<p align=”center”>
<strong>&nbsp;</strong></p>
<p align=”left”>
<p align=”left”><img src=”file:///F|/Photos/1_cat.jpg” width=”140? height=”187? /></p>

<p style=’color : brown ; font-size: 100%’><strong>Dian Putri Yulandari</strong><br />
Komp. Pamulang Permai 1 Blok B8 No. 4<br />
Tangerang &ndash; Banten<br />
<strong>Phone : 021- 7491144 / 0856.9750.6210</strong><br />
<strong>E-mail : dianputriyulandari@yahoo.com</strong><strong> </strong></p>
<br/><hr/>

//

Body Berfungsi sebagai isi untuk menuliskna script-script yang mana nanti nya akan muncul pada halaman web.
seperti hal nya pada Microsoft Word fungsi Align adalah untuk meratakn tulisan dalam hal ini di gunakan Align Center yaitu rata tengah pada tulisan “CURICULLUM VITAE”
Dalam hal ini adalah koding untuk memasukkan gambar dengan menggunakan <img di sertai dengan posisi dan nama dari image tersebut.

Strong adalah untuk mempertebal huruf, sama halnya dengan <b>…</b> sedangkan <hr/> adalah untuk menggambarkan garis.
Fungsi br adalah untuk membuat baru=is baru , sama fungsinya engan tombol enter pada keyboard.

//

<p align=”center” style=’color : brown ; font-size: 100%’><strong>A. DATA PRIBADI</strong><br /> &nbsp;</p><hr/>
<p style=’color : brown ; font-size: 100%’>
Jenis Kelamin&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Perempuan<br />
Tpt / Tgl Lahir&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Jakarta, 22 Juli 1991<br />
Tinggi Badan&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 170 cm<br />
Berat Badan&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 55 Kg<br />
Status&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Single<br />
Agama&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Islam <hr/>
</P>
//

&nsbp sama fungsinya dengan penggunaan spasi.

//

<p align=”center” style=’color : brown ; font-size: 100%’><strong>B. KEPRIBADIAN</strong><br/></p><hr/>
<p align=”center” style=’color : brown ; font-size: 100%’>Percaya diri, Ramah, Mampu Beradaptasi, Memiliki motivasi dan semangat yang tinggi, Berusaha untuk menjadi yang terbaik dalam hidup.</p>
<br /><hr/>

<p align=”center” style=’color : brown ; font-size: 100%’><strong>C. HOBI</strong><br /><hr/>
<p style=’color : brown ; font-size: 100%’>
– Olahraga &nbsp;&nbsp;&nbsp;&nbsp; : Basket, berenang, bulu tangkis.<br />
– Bacaan &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : Majalah dan Surat Kabar<br />
– Lainnya&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : Menghabiskan waktu didepan komputer<br />
– Interest&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : Mengikuti perkembangan T.I terbaru
&nbsp;</p>
<br /><hr/></p>

<p align=”center” style=’color : brown ; font-size: 100%’><strong>D. PENDIDIKAN FORMAL</strong><br /> &nbsp;</p><strong><hr/>
<br/>

<div align=”center”>
<table border=”3?>
<tr>
<td width=”189? valign=”top”><br /> <p align=”center” style=’color : brown ; font-size: 100%’><u>Tingkat</u> </td></p>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’><u>Institusi Pendidikan</u></p></td>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’><u>Tahun</u></p></td>
</tr>

<tr>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’>SMP</p></td>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’>SMPN 1 Pamulang</p></td>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’>2003 &ndash; 2006</p></td>
</tr>

<tr>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’>SMA </p></td>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’>SMAN 1 CISAUK</p></td>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’>2006 &ndash; 2009</p></td>
</tr>

<tr>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’>Strata1 (S1)</p></td>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’>Universitas Gunadarma</p></td>
<td width=”189? valign=”top”><p align=”center” style=’color : brown ; font-size: 100%’>2009 &ndash; sekarang</p></td>
</tr>
</table>
<br/>
<hr/>

//

Koding diatas adalah koding untuk membuat table, border = 3 menunjukkan ketebalan garis border table adalah 3, jika kita tulis 0 maka garis border tidak akan nampak tr di gunakan untuk mengiri isi pada baris tabel.
td di gunakan untuk mengisi isi dari kolom, besarnya dapat di atur dengan menggunakan Width(lebarnya) dan Valign(tingginya).

//

<p align=”center” style=’color : brown ; font-size: 100%’>
<strong>D. QUALIFIKASI</strong><br /><hr/></p>
<br />
<p align=”left” style=’color : brown ; font-size: 100%’><strong><em><u>Bahasa :</u></em></strong></p>
<ul>
<p style=’color : brown ; font-size: 100%’>
<li>Bahasa Indonesia&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Menulis, Membaca, Dan Komunikasi</li>
<li>English&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>Menulis, Membaca, Dan Komunikasi </li></p>
</ul>
</div>
<p align=”left” style=’color : brown ; font-size: 100%’><strong><em><u>Applications Program ( Computer ) :</u></em></strong></p>
<ul>
<p style=’color : brown ; font-size: 100%’>
<li> Office Applications&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ms Excel, Ms Word, MS Power Point,Visual Basic.</li>
</ul><p><strong>&nbsp;</strong></p><hr/></P>

//

ul dan li digunakan untuk menggunakan bullet/simbol dalam penulisan bahasa html

//

</div>
<p align=”left” style=’color : brown ; font-size: 100%’>Atas perhatiannya saya ucapkan banyak terima kasih.</p>
<p align=”left” style=’color : brown ; font-size: 100%’>Hormat Saya</p>
<p align=”left” style=’color : brown ; font-size: 100%’>&nbsp;</p>
<p align=”left” style=’color : brown ; font-size: 100%’>&nbsp;</p>
<div align=”left” ><br clear=”all” />
<br />
<p style=’color : brown ; font-size: 100%’>
Dian Putri Yulandari
</p>
<br/>
<br/>
<br/>
<p><u><em><strong><a href=”cip.htm”>Next</a></strong></em></u></p>
</div>
</body>
</html>

//    Untuk mengelink ke page berikutnya kita menggunakan <a>….</a> , di tuliskan judul html halaman selanjutnya , maka ketika di klik akan otomatis mengelink ke halaman cip.htm
Jika semua perintah sudah selesai jangan lupa untuk menutup kembali HTML tersebut dengen </html>

Maka hasil nya adalah

CURRICULUM VITAE

// Karena kita sedang memakai bahasa HTML tentunya di awali dengan , ini wajib karena sebagai pembuka dalam menulis script-script yang lain. pada bagian ini adalah untuk memberikan judul dari web/html anda (pada tab), pada contoh kali ini title html ini adalah “Curicullum Vitae”. //

C U R R I C U L U M   V I T A E


 

Dian Putri Yulandari
Komp. Pamulang Permai 1 Blok B8 No. 4
Tangerang – Banten
Phone : 021- 7491144 / 0856.9750.6210
E-mail : dianputriyulandari@yahoo.com

 


// Body Berfungsi sebagai isi untuk menuliskna script-script yang mana nanti nya akan muncul pada halaman web. seperti hal nya pada Microsoft Word fungsi Align adalah untuk meratakn tulisan dalam hal ini di gunakan Align Center yaitu rata tengah pada tulisan “CURICULLUM VITAE” Dalam hal ini adalah koding untuk memasukkan gambar dengan menggunakan … sedangkan


adalah untuk menggambarkan garis. Fungsi br adalah untuk membuat baru=is baru , sama fungsinya engan tombol enter pada keyboard. //

A. DATA PRIBADI
 


Jenis Kelamin                                      Perempuan
Tpt / Tgl Lahir                                     Jakarta, 22 Juli 1991
Tinggi Badan                                      170 cm
Berat Badan                                        55 Kg
Status                                                  Single
Agama                                                 Islam


// &nsbp sama fungsinya dengan penggunaan spasi. //

B. KEPRIBADIAN


Percaya diri, Ramah, Mampu Beradaptasi, Memiliki motivasi dan semangat yang tinggi, Berusaha untuk menjadi yang terbaik dalam hidup.

 


C. HOBI


– Olahraga      : Basket, berenang, bulu tangkis.
– Bacaan         : Majalah dan Surat Kabar
– Lainnya        : Menghabiskan waktu didepan komputer
– Interest         : Mengikuti perkembangan T.I terbaru  

 


D. PENDIDIKAN FORMAL



Tingkat

Institusi Pendidikan

Tahun

SMP

SMPN 1 Pamulang

2003 – 2006

SMA

SMAN 1 CISAUK

2006 – 2009

Strata1 (S1)

Universitas Gunadarma

2009 – sekarang



// Koding diatas adalah koding untuk membuat table, border = 3 menunjukkan ketebalan garis border table adalah 3, jika kita tulis 0 maka garis border tidak akan nampak tr di gunakan untuk mengiri isi pada baris tabel. td di gunakan untuk mengisi isi dari kolom, besarnya dapat di atur dengan menggunakan Width(lebarnya) dan Valign(tingginya). //

D. QUALIFIKASI



Bahasa :

 

  • Bahasa Indonesia                                             Menulis, Membaca, Dan Komunikasi
  • English                                                            Menulis, Membaca, Dan Komunikasi

Applications Program ( Computer ) :

 

  • Office Applications                                           Ms Excel, Ms Word, MS Power Point,Visual Basic.

 


// ul dan li digunakan untuk menggunakan bullet/simbol dalam penulisan bahasa html //

Atas perhatiannya saya ucapkan banyak terima kasih.

Hormat Saya

 

 

Dian Putri Yulandari

Next

// Untuk mengelink ke page berikutnya kita menggunakan …. , di tuliskan judul html halaman selanjutnya , maka ketika di klik akan otomatis mengelink ke halaman cip.htm Jika semua perintah sudah selesai jangan lupa untuk menutup kembali HTML tersebut dengen

 

 

 

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: