Ask Belajar HTML untuk pemula, membuat daftar list dan tautan link AdityaDees

HTML menyediakan cara untuk membuat daftar terurut seperti 1,2,3.. dan daftar tidak berurutan bukan dengan angka. Daftar adalah cara yang baik untuk menyusun daftar item dan membiarkan gaya HTML bekerja.

Terkadang Ada banyak kesempatan ketika kita perlu menggunakan daftar list ini .HTML memberi kita tiga jenis list yang berbeda:

• Ordered list adalah daftar di mana setiap item dalam daftar berada bernomor. Misalnya, daftar tersebut mungkin berupa serangkaian langkah untuk resep yang harus dilakukan dalam rangka, atau kontrak hukum di mana setiap titik perlu diidentifikasi oleh bagian.
• Unordered list adalah daftar yang dimulai dengan poin-poin (bukan karakter yang menunjukkan urutan).
• Definition list terdiri dari satu set istilah bersama dengan definisi untuk masing-masing istilah tersebut.

Membuat Ordered List

Daftar yang dipesan dibuat dengan elemen <ol>. Lalu kemudian Setiap item dalam daftar ditempatkan antara tag <li> pembuka dan tag penutup </li>. Untuk menggunakan list-style atau memperindah tampilan list diperlukan kombinasi dengan property CSS .

				
<ol>
 <li>Potong kentang menjadi empat bagian<li>
 <li>Rebus dalam air asin selama 15-20
  menit sampai empuk</li>
 <li>Panaskan susu, mentega, dan pala</li>
 <li>Tiriskan kentang dan haluskan</li>
 <li>Campurkan ke dalam adonan susu</li>
 </ol>


				

Hasil:

1. Potong kentang menjadi empat bagian
3. Rebus dalam air asin selama 15-20 menit sampai empuk
4. Panaskan susu, mentega, dan pala
5. Tiriskan kentang dan haluskan
6. Campurkan ke dalam adonan susu

Membuat Unordered List

Daftar tidak berurutan dibuat dengan elemen <ul>. Setiap item dalam daftar ditempatkan antara tag <li> pembuka dan tag penutup </li>.

				
				
<ul>
 <li>1kg kentang King Edward</li>
 <li>100ml susu</li>
 <li>50g mentega asin</li>
 <li>pala yang baru diparut</li>
 <li>Secukupnya garam dan merica</li>
 </ul>								
								
				
				

Hasilnya :

• 1kg kentang King Edward
• 100ml susu
• 50g mentega asin
• pala yang baru diparut
• Secukupnya garam dan merica

Membuat Definition List

Daftar definisi dibuat dengan elemen <dl> dan biasanya terdiri dari serangkaian istilah dan definisi mereka. Di dalam elemen <dl> Anda akan biasanya melihat pasangan <dt> dan <dd> elemen.

Terkadang Anda mungkin melihat daftar di mana ada dua istilah yang digunakan untuk definisi yang sama atau dua definisi yang berbeda untuk hal yang memiliki ketentuan sama.

				
								
<dl>
 <dt>Sashimi</dt>
 <dd>Irisan ikan mentah yang disajikan dengan
  bumbu seperti lobak daikon parut atau
  akar jahe, wasabi dan kecap</dd>
 <dt>Skala</dt>
 <dd>Perangkat yang digunakan untuk mengukur secara akurat
  berat bahan</dd>
 <dd>Teknik menghilangkan timbangan
  dari kulit ikan</dd>
 <dt>Makanan</dt>
 <dt>Scamorzo</dt>
 <dd>Keju Italia yang biasanya terbuat dari bahan utuh
  susu sapi (meskipun dibuat secara tradisional
  dari susu kerbau)</dd>
 </dl>	
								
								
				
				

Hasilnya :

Sashimi

Irisan ikan mentah yang disajikan dengan bumbu seperti lobak daikon parut atau akar jahe, wasabi dan kecap

Skala

Perangkat yang digunakan untuk mengukur secara akurat berat bahan

Teknik menghilangkan timbangan dari kulit ikan

Makanan

Scamorzo

Keju Italia yang biasanya terbuat dari bahan utuh susu sapi (meskipun dibuat secara tradisional dari susu kerbau)

Penggunaan daftar list bersarang

Anda dapat memasukkan daftar kedua di dalam elemen <li> untuk membuat sub- daftar atau daftar bersarang. Browser menampilkan daftar bersarang menjorok lebih jauh dari Daftar induknya . Dalam daftar tak berurutan bersarang, browser biasanya akan berubah gaya poin juga.

				
				
				
<ul>
<li>Mousses</li>
<li>Pastries
 <ul>
 <li>Croissant</li>
 <li>Mille-feuille</li>
 <li>Palmier</li>
 <li>Profiterole</li>
 </ul>
</li>
<li>Tarts</li>
</ul>							
								
				

Hasil:

• Mousses
• Pastries
  • Croissant
  • Mille-feuille
  • Palmier
  • Profiterole
• Tarts

Contoh Penggunaan Struktur List

Di sini Anda dapat melihat judul utama diikuti oleh paragraf pengantar. Dan unordered list digunakan untuk menguraikan bahan-bahan dan daftar yang diurutkan digunakan untuk menggambarkan langkah-langkahnya.

				
								
<html>
 <head>
  <title>Daftar</title>
 </head>
 <body>
  <h1>Telur Orak-arik</h1>
  <p>Telur orak-arik adalah salah satu makanan yang mudah di buat.  Ini adalah
  resep telur orak-arik yang kaya rasa.</p>
  <h2>Bahan</h2>
  <ul>
  <li>2 butir telur</li>
  <li>1 sdm mentega</li>
  <li>2 sdm krim</li>
  </ul>
  <h2>Metode</h2>
  <ol>
  <li>Lelehkan mentega dalam wajan dengan api sedang
  panas</li>
  <li>Campur perlahan telur dan krim dalam mangkuk</li>
  <li>Setelah mentega meleleh tambahkan krim dan telur</li>
  <li>Gunakan spatula lipat telur dari tepi
  panci ke tengah setiap 20 detik (seolah-olah
  kamu sedang membuat telur dadar)</li>
  <li>Jika telur masih basah, angkat dari
  panas (akan terus masak di piring
  sampai disajikan)</li>
  </ol>
 </body>
 </html>								
								
								
				

Hasil :

Telur Orak-arik

Telur orak-arik adalah salah satu makanan yang mudah di buat. Ini adalah resep telur orak-arik yang kaya rasa.

Bahan

• 2 butir telur
• 1 sdm mentega
• 2 sdm krim

Metode

1. Lelehkan mentega dalam wajan dengan api sedang panas
2. Campur perlahan telur dan krim dalam mangkuk
3. Setelah mentega meleleh tambahkan krim dan telur
4. Gunakan spatula lipat telur dari tepi panci ke tengah setiap 20 detik (seolah-olah kamu sedang membuat telur dadar)
5. Jika telur masih basah, angkat dari panas (akan terus masak di piring sampai disajikan)

Menautkan ke Situs Lain

Tautan dibuat menggunakan tag <a>elemen yang memiliki atribut disebut dengan href. Nilai dari atribut href adalah halaman yang Anda tuju ,ketika seseorang mengklik akan di arahkann halaman yang anda maksus .

Pengguna dapat mengklik apa saja yang muncul di antara pembukaan tag <a> dan penutup tag </a>dan akan dibawa ke halaman ditentukan dalam atribut href.
Saat Anda menautkan ke situs web yang berbeda, nilai href atribut akan menjadi web lengkap alamat situs, yaitu dikenal sebagai URL absolut.

				
<p>Ulasan Film:
 <ul>
  <li><a href="http://www.namasitus.com">
  Kekaisaran</a></li>
  <li><a href="http://www.namasitus.com">
  Metakritik</a></li>
  <li><a href="http://www.namasitus.com">
  Tomat </a></li>
  <li><a href="http://www.namasitus.com">
  Variasi</a></li>
 </ul>
 </p>				
								
								
				

Hasil :

Ulasan Film:

• Kekaisaran
• Metakritik
• Tomat
• Variasi

Setiap web halaman memiliki URL sendiri. contoh di atas adalah alamat web yang akan Anda ketik ke browser jika Anda ingin menautkan ke halaman tertentu .

URL absolut dimulai dengan nama domain untuk situs tertuju dan dapat diikuti oleh jalan ke halaman tertentu. Jika tidak ada halaman ditentukan, situs akan menampilkan beranda.

Menautkan ke Halaman Lain

Saat Anda menautkan ke halaman yang lain dalam situs yang sama, Anda tidak perlu menentukan nama domain di URL. Anda dapat menggunakan singkatan yang dikenal sebagai URL relatif.

Jika semua halaman situs ada di folder yang sama, lalu masukan nama filenya ke atribut href .tetapi Jika Anda memiliki halaman yang berbeda dan tidak dalam satu folder. maka Andadapat menggunakan sedikit lebih kompleks sintaks untuk menunjukkan di manahalaman dalam kaitannya dengan saat ini halaman berada.

Anda akan belajar lebih banyak tentang ini di halaman artikel lainya nanti. Jika Anda melihat unduhan kode untuk setiap bab, Anda akan lihat bahwa file index.htmlberisi tautan yang menggunakan URL relatif.

				
<p>
<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="about-us.html">About</a></li>
 <li><a href="movies.html">Movies</a></li>
 <li><a href="contact.html">Contact</a></li>
</ul>
</p>
				

• Home
• About
• Movies
• Contact

Email link

Untuk membuat tautan yang tertuku ke email pengguna atau alamat email tertent, Anda bisa menggunakan elemen. Namun, kali ini nilai atribut href dimulai dengan mailto: dan diikuti oleh alamat email yang anda targetkan.Dan ketika diklik maka tautan link aktif, menuju alamat sesuai yang ditentukan dalam tautan.

				
								
<a href="mailto:namaemal.com">Email contoh</a>							
					
				

Hasil :

Email contoh

Contoh struktur link

Contoh ini adalah halaman web tentang film. Elemen <h1> digunakan dengan atribut id di bagian atas halaman ,jadi bahwa tautan dapat ditambahkan untuk membawa pembaca dari bagian bawah halaman ke atas. Ada tautan email untuk memungkinkan pembaca menghubungi penulis halaman web.

Ada juga sejumlah tautan ke URL yang memenuhi syarat. Ini link ke berbagai festival film. Di bawah daftar ini adalah tautan ke URL relatif yang merupakan halaman "tentang" yang berada di direktori yang sama.

				
<html>
 <head>
  <title>Tautan</title>
 </head>
 <body>
  <h1 id="top">Film Rakyat</h1>
  <h2>Buku Harian Festival</h2>
  <p>Berikut adalah beberapa festival film yang kami
  akan hadir tahun ini.<br />Tolong
  <a href="mailto:namaemail@example.com">
  hubungi kami</a> jika Anda ingin lebih
  informasi.</p>
  <h3>Januari</h3>
  <p><a href="http://www.namaURL.com">
  Festival Film Sundance</a><br />
  Park City, Utah, AS<br />
  20 - 30 Januari 2011</p>
  <h3>Februari</h3>
  <p><a href="http://www.namaURL.com">
  Tropfest</a><br />
  Sydney, Australia<br />
  20 Februari 2011</p>
  <!-- konten tambahan -->
  <p><a href="about.html">Tentang Film Rakyat</a></p>
  <p><a href="#top">Halaman bagian atas</a></p>
 </body>
 </html>				
								
				

Hasil:

Film Rakyat

Buku Harian Festival

Berikut adalah beberapa festival film yang kami akan hadir tahun ini.
Tolong hubungi kami jika Anda ingin lebih informasi.

Januari

Festival Film Sundance
Park City, Utah, AS
20 - 30 Januari 2011

Februari

Tropfest
Sydney, Australia
20 Februari 2011

Tentang Film Rakyat

Halaman bagian atas

Selanjutnya