Senin, 30 Juni 2014

MEMBUAT LIST DALAM DOKUMEN HTML


Pastinya sobat sudah tau kana pa itu LIST ? List adalah sebuah susunan sebuah daftar dari daftar sesuatu, misalnya daftar makanan ataupun daftar siswa dan lain-lain. List Tag pada HTML memiliki 3 varian yaitu:
   1. Unordered List (Bullet)
   2. Ordered List (Daftar Bernomor)
   3. Definition List (Daftar Definisi)
Sedangkan list tanpa nomor adalah list yang menggunakan item di depan daftar list yang kita buat.Silakan lihat contoh dokumen HTML dengan list  di bawah ini :
___________________________________________________

1. Unordered List (Bullet)


<html>
<head>
<title> .::Unordered::.</title>
</head>
<body bgcolor=#ffffcc>
<b><font size=2 Face=tahoma color=red>
hobi saya adalah: </b>
<hr size=2 width=120 align=left>
<ul type=circle>
<li>Renang
</ul> <ul type=square>
<li>surfing
</ul>
<ul type=disc>
<li> Diving
</ul>
</font>
</body>
</html>

Hasilnya :

hobi saya adalah:

  • Renang

  • surfing

  • Diving

___________________________________________________
2. Ordered List (Daftar Bernomor)

<html>

<head>

<title>.::Oriented List.::</title>

</head>

<body bgcolor=#ffffcc>
<b><font size=2 Face=tahoma color=blue>
hobi saya adalah: </b>
<hr size=2 width=120 align=left>
<ol type=1>
<li> Renang
<li> Surfing
<li> Diving
</ol>
</font>
<b> <font size=2 Face=tahoma color=red>
Cita-cita saya adalah: </b>
<ol type=1>
<li> Pilot
<li> Dokter
<li> Singer
</ol>
</font>
</body>
</html>

Hasilnya:

hobi saya adalah:

  1. Renang
  2. Surfing
  3. Diving
Cita-cita saya adalah:
  1. Pilot
  2. Dokter
  3. Singer

___________________________________________________
   3. Definition List (Daftar Definisi)

  <html>
<head>
<title>.::Definition List.::</title>
</head>
<body>
<dl>
<dt>Bagian Pertama
<dd>Sub Bagian Pertama
<dt>Bagian Kedua
<dd>Sub Bagian Kedua
</dl>
</body>
</html>

Hasilnya :



Bagian Pertama
Sub Bagian Pertama
Bagian Kedua
Sub Bagian Kedua
Diposting oleh Unknown di 06.09 0 komentar

Cara Mengatur Posisi Gambar pada HTML dengan Notepad

Agar tak terkesan monoton dalam pemasangan gambar (begitu-begitu aja) kita bisa memodifikasinya dengan merubah letak gambar yang berbeda-beda disetiap tulisan. seperti gaya tulisan di majalah-majalah dan situs-situs berita misalnya. Oleh sebab itu Topik kali ini kita akan membahas cara membuat posisi gambar ilustrasi berada disamping awal teks/tulisan/postingan, caranya lumayan cukup sederhana, hanya tinggal menambahkan beberapa kode HTML (tag, atribut) ke dalam gambar dan teks tersebut, dan bisa di lakukan dengan beberapa cara. 

Cara membuat gambar ilustrasi berada di sisi kiri atau kanan awal teks

gg
Ini adalah contoh gambar PERTAMA yang posisinya berada di samping kiri teks dengan menggunakan tag <p> dan atribut dasar style="float:left;" pada gambar. Margin, padding, width dan alinea teks diatur secara default. Lihat format selengkapnya dibawah ini :
<p ><img src="URL gambar" style="float:left;" />tulis teks disini</p>


Ini adalah contoh gambar KEDUA yang posisinya berada di samping kanan teks masih menggunakan tag <p> , atribut dasar style="float:right;" pada gambar dan tambahan atribut perataan teks (text-align:justify). Margin, padding, dan width diatur secara default. Lihat format selengkapnya berikut ini :
<p style="text-align:justify;"><img src="URL gambar" style="float:right;" />tulis teks disini</p>

Membuat posisi gambar disamping teks dengan beberapa modifikasi

Modifikasi yang dimaksud adalah penambahan warna background dan garis, pengaturan ulang jarak antara teks dengan gambar dsb.
Dan ini adalah contoh gambar KETIGA yang posisinya berada di samping kiri teks menggunakan tag <div>, atribut dasar style="float:left;" pada gambar dan beberapa tambahan modifikasi sebagaimana telah dijelaskan. Lihat format selengkapnya berikut ini :
<div style="text-align:justify;width:75%; background-color:#ff9999; border:1px         solid #000099; padding:8px;"><img src="URL gambar" style="float:left; margin:0                             8px 4px 0;" />tulis teks disini</div>
Keterangan :
  • Nilai atribut Style=”float:left” dipakai untuk menentukan posisi gambar disebelah kiri, ganti kata “left” dengan kata “right” untuk menentukan letak gambar disebelah kanan, untuk meletakan gambar di tengah-tengah teks saya juga belum bisa :mrgreen:
  • Nilai atribut style="text-align:justify;" dipakai untuk merapihkan posisi kanan dan kiri teks agar sejajar rata, tidak digunakan juga tidak apa2
  • Margin 0=atas gambar, 8=kanannya, 4= bawahnya, 0=kirinya di pakai untuk memisahkan jarak antara teks dengan gambar agar tidak menempel / terlalu dekat
  • Atribut width:75% dipakai untuk merubah ukuran lebar teks dan gambar. memperkecil atau memperbesar bila tidak dipakai maka ukuran lebar kembali ke pengaturan default seperti contoh gambar 1 dan 2
  • Untuk memberi ruang pada teks disebelah gambar, tentu ukuran lebar gambar (width) harus dikecilkan. Seberapa kecil tergantung tema yang digunakan.
Diposting oleh Unknown di 05.40 2 komentar

Mengatur Ukuran, Warna dan Jenis Huruf pada HTML

Seperti pada ms word, pada HTML kita juga dapat mengatur ukuran, warna, dan jenis huruf yang akan kita gunakan. Pengaturan huruf ini menggunakan tag <font></font>. Tag ini memiliki 3 atribut yaitu size untuk mengatur ukuran huruf, color untuk mengatur warna huruf, dan face untuk mengatur jenis huruf yang akan digunakan. Untuk lebih jelasnya silakan coba contoh source code di bawah ini :
1. Mengatur Ukuran
<html>
<head>
<title>Font</title>
</head>
<body>
<font size="1">Font dengan size 1</font><br>
<font size="2">Font dengan size 2</font><br>
<font size="3">Font dengan size 3</font><br>
<font size="4">Font dengan size 4</font><br>
<font size="5">Font dengan size 5</font><br>
<font size="6">Font dengan size 6</font><br>
<font size="7">Font dengan size 7</font>
</body>
</html>
hasil setelah dijalankan di browser :
Font dengan size 1

Font dengan size 2

Font dengan size 3

Font dengan size 4

Font dengan size 5

Font dengan size 6

Font dengan size 7
2. Mengatur Warna
<html>
<head>
<title>Font</title>
</head>
<body>
<font color="red">Font dengan warna merah</font><br>
<font color="green">Font dengan warna hijau</font><br>
<font color="blue">Font dengan warna biru</font><br>
<font color="yellow">Font dengan warna kuning</font>
</body>
</html>
hasil setelah dijalankan di browser :
Font dengan warna merah

Font dengan warna hijau

Font dengan warna biru

Font dengan warna kuning
3. Mengatur Jenis Huruf
<html>
<head>
<title>Font</title>
</head>
<body>
<font face="arial">Font dengan jenis arial</font><br>
<font face="comic sans ms">Font dengan jenis comic sans ms</font><br>
<font face="tahoma">Font dengan jenis tahoma</font>
</body>
</html>
hasil setelah dijalankan di browser :
Font dengan jenis arial

Font dengan jenis comic sans ms

Font dengan jenis tahoma
Selamat Mencoba.. ;)


Diposting oleh Unknown di 05.05 0 komentar
Langganan: Postingan (Atom)