Membuat Daftar List Dengan HTML

Ada banyak kesempatan ketika kita perlu menggunakan daftar. HTML menyediakan kami dengan tiga jenis:

1. Daftar Memerintahkan adalah daftar di mana setiap item dalam daftar adalah bernomor. Misalnya, daftar mungkin serangkaian langkah-langkah untuk resep yang harus dilakukan dalam rangka, atau kontrak hukum di mana setiap titik harus diidentifikasi oleh suatu bagian jumlah.
2. Daftar berurutan adalah daftar yang dimulai dengan titik peluru (Bukan karakter yang menunjukkan perintah).
3. Daftar definisi terdiri dari satu set istilah bersama dengan definisi untuk masing-masing istilah tersebut.

Daftar memerintahkan

<Ol> => daftar memerintahkan dibuat dengan <ol> elemen.  

<Li>  => Setiap item dalam daftar tersebut ditempatkan antara pembuka <li> tag dan <li /> tag penutup.

<ol>
 <li>Download Modul 1: Menginstal PC</li>
 <li>Download Modul 2: Mendiagnosis Permasalahan PC dan Periferal</li>
 <li>Download Modul 3: Melakukan perbaikan dan Setting ulang sistem PC</li>
 <li>Download Modul 4: Melakukan perbaikan Periferal</li>
 <li>Download Modul 5: Melakukan perawatan PC</li>
 <li>Download Modul 6: Melakukan perawatan Periferal</li>
 <li>Download Modul 7: Menginstalasi Sistem Operasi Berbasis GUI</li>
</ol>

Result

Daftar berurutan

<Ul>  = > Daftar unordered dibuat dengan <ul> elemen. 
<Li>  => Setiap item dalam daftar tersebut ditempatkan antara pembuka <li> tag dan <li /> tag penutup

<ul>
 <li>Download Modul 9: Menginstalasi Sistem Operasi Berbasis Text</li>
 <li>Download Modul 10: Menginstalasi Perangkat Jaringan Lokal (LAN)</li>
 <li>Download Modul 11: Mendiagnosis Permasalahan PC yang Tersambung<br/>Jaringan</li>
 <li>Download Modul 12: Melakukan Perbaikan dan Setting Ulang Koneksi Jaringan</li>
 <li>Download Modul 13: Menginstalasi Sistem Operasi Jaringan Berbasis GUI</li>
 <li>Download Modul 14: Menginstalasi Sistem Operasi Jaringan Berbasis Text</li>
</ul>

Result

Daftar definisi

<Dl> = > Daftar definisi dibuat dengan yang <dl> elemen dan biasanya terdiri dari serangkaian persyaratan dandefinisi mereka. Dalam <dl> elemen Anda akan biasanya melihat pasang <dt> dan <Dd> elemen.
<Dt>  = > Ini digunakan untuk mengandung istilah didefinisikan (definisi istilah).
<Dd> = > Ini digunakan untuk mengandung definisi.

<dl>
 <dt>Semut Wifii</dt>
  <dd>Semutwifi berbagi tetorial tentang dunia website</dd>
 <dt>Backspace</dt>
  <dd>Backspace merupakan komunitas kami</dd>
 <dt>Semut & Backspace</dt>
</dl>

Result

Anda dapat menempatkan sebuah daftar kedua dalam sebuah <li> elemen untuk membuat sublist sebuah atau daftar bersarang.

<ul>
 <li>Download Modul 1: Menginstal PC</li>
 <li>Download Modul 2: Mendiagnosis Permasalahan PC dan Periferal</li>
 <li>Download Modul 3: Melakukan perbaikan dan Setting ulang sistem PC</li>
 <li>Download Modul 4: Melakukan perbaikan Periferal</li>
 <li>Download Modul 5: Melakukan perawatan PC</li>
 <li>Download Modul 6: Melakukan perawatan Periferal</li>
 <li>Download Modul 7: Menginstalasi Sistem Operasi Berbasis GUI</li>
  <ul>
   <li>Berbasis Windows</li>
   <li>Linux</li>
   <li>Mac</li>
  </ul>
 <li>Download Modul 8: Membackup dan Merestore Software</li>
</ul>

Result

Membuat Link dan Menghubungkan ke Situs Lain

Metode berikut akan mengajarkan bagaimana membuat suatu hubungan dengan halaman web satu dengan yang lainnya, atau bagaimana memanggil suatu webpage, objek yang kita klik lalu muncul halaman selanjutnya yaitu disebut link.

Memanggil ke Situs Lain

<a> lain-sites.html HTML Link yang diciptakan menggunakan <a> elemen yang memiliki atribut disebut href. Nilai dari Atribut href adalah halaman yang Anda ingin orang untuk pergi ke ketika mereka mengklik pada link. Pengguna dapat mengklik apa pun yang muncul antara pembukaan tag <a> dan penutupan </a> tag dan akan dibawa ke halaman ditetapkan dalam atribut href. Ketika Anda link ke yang berbeda website, nilai href atribut akan menjadi web penuh alamat untuk situs, yang dikenal sebagai URL absolut. Browser menampilkan link warna biru dengan garis bawah secara default

<p>Link Semut wifi
	<ul>
		<li>
			<a href="http://www.semutwifi.blogspot.com">Blog</a>
		</li>
		<li>
			<a href="http://www.semutwifii.blogspot.com">Wordpress</a>
		</li>
		<li>
			<a href="http://www.facebook.com/semutwifii">Facebook</a>
		</li>
	</ul>
</p>

Result

 


URL singkatan dari Uniform Resource Locator. setiap web Halaman memiliki URL sendiri. Ini adalah alamat web yang Anda akan ketik ke browser jika Anda ingin kunjungi halaman tertentu. URL absolut dimulai dengan nama domain untuk situs tersebut, dan dapat diikuti oleh path ke halaman tertentu. Jika tidak ada halaman yang ditentukan, situs akan menampilkan homepage.

Memanggil ke Halaman Lain di Situs Sama 

<a> Ketika Anda terhubung ke lainnya halaman dalam situs yang sama, Anda tidak perlu menentukan nama domain dalam URL. Kamu dapat menggunakan singkatan yang dikenal sebagai URL relatif. Jika semua halaman situs yang di folder yang sama, maka nilai dari atribut href hanyalah nama file. Jika Anda memiliki halaman yang berbeda dari situs di folder yang berbeda, maka Anda dapat menggunakan sedikit lebih kompleks sintaks untuk menunjukkan di mana Halaman ini dalam kaitannya dengan saat ini halaman.

<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>

 

Result

Ketika menghubungkan ke halaman lain dalam situs yang sama, Anda dapat menggunakan URL relatif. Ini adalah seperti versi singkat dari mutlak URL karena Anda tidak perlu untuk menentukan nama domain.  beberapa bermanfaat pintas yang dapat digunakan untuk menju link ke halaman lain pada Anda sendiri situs web.

Membuat Tabel dan beberapa baris

Sebelumnya telah anda buat bagaimana tabel dengan satu baris, berikut ini akan dijelaskan bagaimana membuat tabel dengan banyak baris, selanjutnya anda harus mendefinisikan tag <TR> beserta <TD> untuk membuat beberapa baris dan kolomnya. Ok 

berikut langsung saja anda buat scriptnya

 <html>
 <head>
  <title>Belajar Table</title>
 </head>
 <body>
  <table border="10" width="700" height="300"
  <tr>
   <th rowspan="2">NO</th>
   <th rowspan="2">NAMA</th>
   <th colspan="3">NILAI</th>
   <th rowspan="2">KET</th>
  </tr>
   <tr>
    <td><b><center>UTS</center></b></td>
    <td><b><center>UAS</center></b></td>
    <td><b><center>Rata-Rata</center></b></td>
   </tr>
   <tr>
    <td><center>1</center></td>
    <td>UDIN</td>
    <td><center>90</center></td>
    <td><center>90</center></td>
    <td><center>90</center></td>
    <td><center>LULUS</center></td>
   </tr>
   <tr>
    <td><center>2</center></td>
    <td>UJANG</td>
    <td><center>80</center></td>
    <td><center>80</center></td>
    <td><center>80</center></td>
    <td><center>LULUS</center></td>
   </tr>
   <tr>
    <td><center>3</center></td>
    <td>ISIN</td>
    <td><center>87</center></td>
    <td><center>78</center></td>
    <td><center>82,5</center></td>
    <td><center>LULUS</center></td>
   </tr>
   <tr>
    <td><center>4</center></td>
    <td>SURISIN</td>
    <td><center>50</center></td>
    <td><center>70</center></td>
    <td><center>60</center></td>
    <td><center>TIDAK LULUS</center></td>
   </tr>
   <tr>
    <td><center>5</center></td>
    <td>ICIH</td>
    <td><center>80</center></td>
    <td><center>79</center></td>
    <td><center>9,5</center></td>
    <td><center>LULUS</center></td>
   </tr>
 </body>
</html>
   

 

Hasilnya sebagai berikut

Menentukan Ukuran pada huruf beserta warna

Ukuran huruf didalam sebuah halaman web atau webpage sangat penting perannya, karena tidak mungkin membuat ukuran dalam suatu halaman memiliki ukuran yang sama karena nantinya akan terlihat kurang berkualitas juga professional. Maka dengan menggunakan tag font anda dapat menentukan ukuran huruf juga warna yang nantinya akan anda terapkan dalam halaman web yang anda desain.

<font size=”nilai” color=”pilih warna” face=”pilih huruf>

Keterangan dari atribut font diatas sebagai berikut.

• Size : Dapat anda masukan nilai angka mulai dari 1 sampai 7 jika anda ingin ukuran yang lebih besar bisa menggunakan operator tambah(+), contoh(+3).
• Color : Menentukan warna pada teks atau hurufnya.
• Face : Menentukan jenis hurufnya contohnya(arial,verdana,Calibri) Contoh scriptnya sebagai berikut.

<html>
 <head>
  <title>Menentukan kuran Teks Warna</title>
 </head>
  <body>
   <font size="+3" color="blue" 
   face="Times New Roman,Times,serif">
   Ini adalah Ukuran Teks Huruf Times New Roman,Times,serif
   
   </font>
  </body>
</html>

Hasilnya sebagai berikut.

Tata Letak Area Kerja

Tata Letak Area Kerja Area Kerja tempat dimana letak kursor pertama dalam menuliskan semua isi webpage. Seperti halnya anda meletakan kursor pertama kali dalam pembuatan kalimat atau paragraph pada Microsoft Word maka akan terlihat bahwa huruf pertama kali berada disebelah kiri dan batasannya telah diatur secara otomatis, tapi bisa juga batasan antara kiri, kanan, atas dan bawah dalam Microsoft Word anda atur sendiri. Begitu pula di dalam halaman web, anda bisa mengatur halaman itu sesuai keinginan anda sendiri dengan menggunakan atribut pada body, sebagai berikut.

 <body leftmargin=”nilai” topmargin=”nilai” marginwidth=”nilai” marginheight=”nilai”>

 Penjelasan dari atribut diatas : 

• Leftmargin : Menentukan batas kiri 
• Topmargin : Menentukan batas atas 
• Marginwidth : Menentukan batas lebar 
• Marginheight : Menentukan batas tinggi.

Contoh script tata letak area kerja sebagai berikut :

<html>
 <head>
  <title>Tata Letak Area Kerja</title>
 </head>
  <body  leftmargin="50" 
      topmargin="50" 
      marginwidth="50" 
      marginheight="50">
      
   Ini adalah Halaman area kerja dengan <br>
   batas kiri 20, <br>
   batas atas 20, <br>
   lebar 20, dan <br>
   tinggi 20
   
  </body>
</html>

Kemudian hasilnya seperti berikut ini :

Memberi Warna Text

Latar belakang atau background secara standar akan menampilkan suatu warna putih, maka secara otomatis halaman akan memberikan text defaultnya berwarna hitam, seperti halnya anda mengetikan suatu kalimat ada lembaran atau halaman di Microsoft Word maka latar belakang berwarna putih dan teks berwarna hitam. Tapi jika anda jenuh melihat warna itu-itu saja. maka anda bisa merubah warna tulisannya. Dengan mendeklarasikan atribut text pada bagian tag body seperti berikut.

<body text=”tentukan warnanya”>…isi halamannya…</body>

Contoh script dengan teksberwarna adalah sebagai berikut :

<html>
 <head>
  <title>Memberi Warna Teks</title>
 </head>
  <body text="green">
   Ini adalah Text Warna Hijau
  </body><br>
  <body text="green">
   Ini adalah Text Warna Hijau
  </body><br>
  <body text="green">
   Ini adalah Text Warna Hijau
  </body>
</html>

Kemudian hasilnya seperti berikut ini :

Membuat Background Bergambar

Pada tag Body anda dapat memberikan background atau latar belakang dalam suatu pembuatan atau rancangan dalam website. Fungsinya agar suatu halaman website yang nanti kita buat akan lebih terlihat professional. Dan juga tidak membosankan. Dengan atribut background yang terdapat pada tag body anda bisa memasukan gambar apapun kedalam latar belakang suatu webpage atau halaman yang sedang anda rancang, untuk dapat mengubahnya anda cukup mendeklarasikannya menggunakan atribut <background> pada tag <body>, seperti berikut.

<body background="alamat gambar file">...isi...</body>

Contoh script dengan background bergambar adalah sebagai berikut :

<html>
	<head>
		<title>Latar belakang</title>
	</head>
		<body background="background.png">
			Ini adalah background bergambar
		</body>
</html>

Kemudian hasilnya seperti berikut ini

Memahami Strukur HTML

Dalam membuat program dibahasa pemrograman HTML anda mesti memahami Struktur HTML itu sendiri, karena jika anda tidak mengetahui strukturnya maka anda akan kebingungan dalam merancang sebuah website nantinya. Maka dari pada itu saya akan menjelaskan struktur dalam HTML. Berikut adalah strukturnya.

Informasi Tentang Dokumen

<html></html>

Kepala Dokumen
<head></head>
Badan Dokumen
<body></body>

Struktur Standar Dokumen HTML

<html>
 <head>
   ................
 </head>
  <body>
   ..... Tuliskan tag html disini .....
  </body>
</html> 

Terimakasih....