LIST DAN MANIPULASI GAMBAR PADA HTML
TUTORIAL MANIPULASI GAMBAR DI HTML
1. Ordered List dan Unordered List
Ol atau ordered list adalah suatu tag untuk mengurutkan daftar dengan menggunakan angka, abjad dan angka romawi pada HTML. Sedangkan ul atau unordered list yaitu tag untuk mengurutkan daftar dengan menggunakan symbol atau special character pada HTML.
sekarang kita akan masuk pada contoh cara membuat ordered list:
Contoh 1:
<head>
<title>Ordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum’at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
<p>Daftar Kuliah : </p>
<ol>
<li>Web Design</li>
<li>Pemrograman Web</li>
<li>Database </li>
</ol>
</body>
</html>
dan hasilnya seperti pada gambar di bawah ini
Contoh 2:
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ol type=”A”>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum’at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
<p>Daftar Kuliah : </p>
<ol type=”i”>
<li>Web Design</li>
<li>Pemrograman Web</li>
<li>Database </li>
</ol>
</body>
</html>
Dan hasilnya seprti di bawah ini
Selanjutnya kita akan masuk pada contoh Unodered List
Contoh 1
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum’at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</body>
</html>
Dan inilah hasilnya
Contoh 2 :
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ul type=”circle”>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum’at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</body>
</html>
Inilah Hasilnya
3. Nested List ( List Bersarang ) :
Cara Membuat List Bersarang. Maksudnya ialah didalam list ada list lagi. Hal yang menarik dari list adalah kita bisa membuat list didalam list. Jadi misalnya list pertama kita adalah angka 1, kemudian di list angka 1 kita membuat list baru dengan huruf abjad, kemudian membuat lagi dengan symbol disc begitu juga seterusnya.
Contoh cara membuat nested list.
<html>
<head>
<title>Nested List</title>
</head>
<body>
<ol>
<li>Buah</li>
<ul type=”circle”>
<li>Semangka</li>
<li>Jambu</li>
</ul>
<li>Bunga</li>
<ul type=”disc”>
<li>Melati</li>
<li>Anggrek</li>
</ul>
<li>Kendaraan</li>
<ul type=”square”>
<li>Mobil</li>
<li>Sepeda Motor</li>
</ul>
</ol>
</body>
</html>
Dan inilah hasilnya
Nah tahap terakhir yaitu manipulasi gambar
contoh
<html>
<head>
<title>Image HTML</title>
</head>
<body>
<p>Gambar Komputer dalam folder yang sama dengan letak file HTML-nya :</p>
<p><img src=”image1.jpg” Width=”102″ height=”102″></p>
<p>Gambar Komputer dari folder yang berbeda dengan letak file HTML-nya : </p>
<p><img src=”file:///E|yuyon/image2.jpg” width=”141″ height=”125″></p>
</body>
</html>
Terima Kasih
2. Definition List (Daftar Definisi), digunakan untuk membuat daftar definisi dari istilah-istilah yang ada dalam dokumen, digunakan terutama untuk glosarium dan indeks.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Definition List</title>
</head>
<body>
<h3>Contoh Definition List</h3>
<dl>
<dt>Web Design</dt>
<dd>Belajar HTML – Macromedia Dreamweaver</dd>
<dt>Pemrograman Web</dt>
<dd>Belajar PHP MYSQL</dd>
</dl>
</body>
</html>
Dan hasilnya di bawah ini
Komentar
Posting Komentar