Membuat list dan menampilkan gambar pada HTML

Membuat list dan memasukkan gambar pada tampilan HTML    

    Sebuah list kadang diperlukan jika kita ingin mengurutkan sesuatu hal apalagi saat kita membuat halaman HTML dan juga akan sangat membosankan jikalau sebuah web HTML tidak dilengkapi oleh gambar, lalu bagaimana sih caranya memasukan sebuah gambar pada HTML ataupun cara membuat list pada HTML ? Yuk disimak. .

Membuat List :

Ada dua macam list yang hanya sebatas simbol dan tidak memperhatikan urutan,  ada juga list yang memperhatikan urutan misalnya nomer,  abjad,  angka romawi.

 List yang pertama dalam halaman HTMl yaitu unordered list,  Bullet adalah karakter tertentu yang berupa karakter symbol, misalkan bullet dengan bentuk persegi, bulat, dll.
Untuk membuat list pada HTML dengan menggunakan sebuah bullet digunakan tag <ul> (unordered list) Sebagian  tanda tag awal dan </ul> sebagai tag penutup.

Bentuk dasar <ul>....</ul>
Untuk lebih jelasnya anda dapat mengetikan contoh berikut :

<!DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> Lat7.html </title>
</head>
<body>
<ul type="circle">
<li> ms-word </li>
<li> ms-excel </li>
<li> ms-access</li>
<li> ms-powerpoint</li>
</ul>
<ol type=1 start=1>
<li type=1> ms-word </li>
<li type=1> ms-excel </li>
<li> ms- access </li>
<li type=1> ms-powerpoint </li>
<li> ms- photodraw </li>
</ol>
</body>
</html>

Dan inilah hasilnya :

list and image in HTML


















Ada tiga bentuk list yang dapat dibuat pada halaman HTML yaitu yg dapat dipilih pada attribute type : disc, square, circle.

 Tipe list pada halaman HTML yang kedua adalah ordered list.  Ordered list adalah daftar yg tiap bagiannya disertai dengan penomoran ordered list dimulai dengan tag <ol> dan diakhiri dengan tag</ol>. Atribut typedigunakan untuk bentuk penomoran. Ada lima bentuk penomoran yg dapat dipilih pada atribut type, yaitu :
·         1 (1,2,3,...)
·         A(A,B,C,....)
·         a(a,b,c,...)
·         I(I,II,II,...)
·         i(i,ii,iii....)
Bentuk dasar <ol>...</ol>

Menampilkan Gambar pada HTML :


Perhatikan bentuk dasar cara memasukkan gambar pada tampilan HTML. 

bentuk dasar :
<img src=”gambar.gif” alt=”gambar 1”>

    Ekstensi gambar atau grafik yang bisa ditampilkan oleh (x)HTML adalah GIF,JPG,dan BMP.
Attribut ALT bisa dipakai untuk menampilkan teks pengganti gambar sebagai alternative bagi             gambar. Jika gambar yg dimaksud tidak dapat ditampilkan.

Sekarang buat sebuah folder dan tempatkan sebuah gambar didalam folder. Tuliskan contoh code berikut.
<!DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> Lat9.html </title>
</head>
<body>
<p> dibawah ini adalah gambar yang ingin tampilkan di halaman web lalu disimpan difolder                yg sama dengan folder tempat html ini di simpan pada folder D:\menampilkan gambar</p>
<img src=”lomba komputer” alt=”gambar lomba”>
</body>
</html>


Mengatur ukuran gambar pada HTML :

Bila dirasa gambar anda terlalu kecil/besar anda dapat menentukan sebdiri
Lebar dan panjang gambar dgn mengatur attribut WIDTH dan HEIGHT pada tag <img>

Bentuk dasar <img scr=”nama file gambar” width=”n px” height=”n px” alt=”gambar satu”>

Sekian materi saya mengenai cara membuat list dan memasukkan gambar pada HTML.  Terima kasih telah berkunjung . . . 

Comments

Post a Comment