Rabu, 19 September 2012

Memakai Align dan Penggunaan List dalam HTML

Kita langsung saja ke latihan.

Latihan 2.1

<html>
<head>
<title>pertemuan 2a</title>
</head>
<body>

<center><h1>UNIVERSITAS BUNDA MULIA</h1></center>
<center><h3>Jl. Lodan Raya No. 2, Ancol - Jakarta Utara</h3></center>
<center><h3>Telp. (021) 692-9090 - Fax (021) 690-9712</h3></center>
<center><h3>Call Center: (021) 690 9090</h3></center>

<hr />



<p align="left">NIM : 32100057 </p>
<p align="left">Nama : Cristoforus Armando </p>
<p align="left">Tempat, tgl lahir : Jakarta, 27 Desember 1991 </p>
<p align="left">Alamat : Bekasi Selatan </p>

<p align="right">Fakultas Teknik dan Desain</p>
<p align="right">Teknik Informatika</p>
<p align="right">2010</p>

</body>
</html>

Penggunaan heading (dari h1-h3) terdapat perbedaan didalamnya, h1 dari huruf yg paling besar dan seterusnya hingga ukuran font kecil.

Lalu penggunaan "align" diketik pada isi <p>. Tinggal kita tentukan saja ingin diletakkan dibagian mana "align"nya. "left", "right", "center".

Hasil :



Latihan 2.2


<html>
<head>
<title>pertemuan 2b</title>
</head>
<body>

<center><h1>MENU</h1></center>
<!--
<center><h3>Jl. Lodan Raya No. 2, Ancol - Jakarta Utara</h3></center>
<center><h3>Telp. (021) 692-9090 - Fax (021) 690-9712</h3></center>
<center><h3>Call Center: (021) 690 9090</h3></center>
-->

<hr />

Appetizer :
<p></p>

<ul type="circle">
<li>Dumplings</li>
<li>Sweet Bun</li>
</ul>

Main :
<p></p>

<ul type="circle">
<li>Steak</li>
<ul type="square">
<li>Tenderloin Steak</li>
<li>Sirloin Steak</li>
<li>Salmon Steak</li>
</ul>
<li>Pasta</li>
<ul type="square">
<li>Spagheti Carbonara</li>
<li>Spagheti Bolognaise</li>
<li>Lasagna</li>
</ul>


</body>
</html>

Terdapat tanda "<!-- -->" itu merupakan tanda untuk membuat koding HTML tidak berfungsi. Jika di Visual Basic seperti "/* */". dan pada Java "//".

Ada tanda <ul> itu membuat list tanpa menggunakan urutan, maka tipenya tidak bisa angka atau huruf berurutan. tipe yg bisa dipakai seperti bulat(circle) ,kotak(square) dan lainnya. Tapi jika tidak diberikan tipe, maka "circle"nya tidak seperti "circle" yg biasanya melainkan "circle"nya berwarna hitam (seperti titik hitam).

Tanda <li> merupakan anakan dari koding list, <li> akan mengeluarkan tanda sesuai tipe yang telah ditentukan.

Hasilnya :

Latihan 2.3

<html>
<head>
<title>pertemuan 2c</title>
</head>
<body>

<center><h1>MENU</h1></center>
<!--
<center><h3>Jl. Lodan Raya No. 2, Ancol - Jakarta Utara</h3></center>
<center><h3>Telp. (021) 692-9090 - Fax (021) 690-9712</h3></center>
<center><h3>Call Center: (021) 690 9090</h3></center>
-->

<hr />

Drinks :
<p></p>

<ul>
<li>Juice</li>
<ol type="1">
<li>Guava</li>
<li>Mango</li>
<li>Avocado</li>
</ol>
</ul>

<ul>
<li>Hot/Cold</li>
<ol type="1">
<li>Guava</li>
<li>Mango</li>
</ol>
</ul>

Desert :
<p></p>

<ol type="A">
<li>Chocolate/Mango/Coconut</li>
<li>Apple/Jackfruit Pie</li>
<li>Banana Split</li>
</ol>



</body>
</html>

Seperti pada latihan 2.2, dijelaskan bahwa jika <ul> tidak diberikan tipe maka hasilnya akan terbentuk seperti titik hitam "black circle".

Dan terdapat fungsi <ol>, jika <ul> tidak dapat di urutkan maka <ol> kebalikannya. <ol> merupakan tanda yang dapat memberikan pengurutan (ex: 1,2,3,dst atau A,B,C,dst). Tinggal diberikan tipe yang seperti apa sesuai keinginan.

Hasilnya :


Terima Kasih dan Selamat Mencoba ^^



Tidak ada komentar:

Posting Komentar