Belajar HTML : Dasar HTML, Heading, Paragraf, Gambar, Link, List

Update Terakhir pada

HyperText Markup Language (HTML) adalah bahasa inti dari hampir semua konten Web. Sebagian besar dari apa yang Anda lihat pada layar browser anda adalah sebuah deskripsi, secara mendasar, menggunakan HTML. Lebih tepatnya, HTML adalah bahasa yang menggambarkan struktur dan isi semantik dari sebuah dokumen Web.

Adapun konten yang dimaksud adalah teks ukuran besar, teks paragraf, gambar, tabel, formulir dan lain sebagainya. Jadi, HTML itu untuk mendefinisikan semua.

Berikut ini adalah contoh dasar script kode HTML.

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
	<title&gt;Dasar HTML</title&gt;
</head&gt;
<body&gt;

	<h1&gt;Ini adalah Teks Heading</h1&gt;
	<p&gt;Ini adalah Teks Paragraf</p&gt;

</body&gt;
</html&gt;

Dari sekumpulan baris kode atau script tersebut, akan menghasilkan tampilan seperti berikut ini pada aplikasi Web Browser.

Deskripsi singkat dari kode tersebut:

  • Deklarasi <!DOCTYPE html> mendefinisikan dokumen ini sebagai HTML5
  • Elemen <html> adalah elemen root dari halaman HTML
  • Elemen <head> berisi informasi meta tentang dokumen
  • Elemen <title> menentukan judul untuk dokumen
  • Elemen <body> berisi konten halaman yang terlihat
  • Elemen <h1> mendefinisikan heading besar
  • Elemen <p> mendefinisikan paragraf

Aturan Penulisan:
Berdasarkan contoh dasar di atas, berikut ini adalah penjelasan aturan penulisan script HTML.

<namakonten> Isi konten disiniā€¦ </namakonten>

Berikut ini rinciannya:

  • Tag HTML biasanya berpasangan seperti <p> ?? dan </p>
  • Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
  • Tag akhir ditulis seperti tag awal, tetapi dengan garis miring dimasukkan sebelum nama tag

Aplikasi Web Browser yang bisa digunakan adalah Chrome, Internet Explorer, Firefox, Safari.

Nah, berikut ini akan kita kupas sedikit demi sedikit nama tag konten HTML.

 

 

HEADING

Teks Heading adalah teks yang digunakan untuk mendefinisikan judul tiap halaman.


Heading ini terdiri dari beberapa ukuran, yaitu <h1> sampai <h6>. Berikut ini scriptnya

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
	<title&gt;Dasar HTML</title&gt;
</head&gt;
<body&gt;

	<h1&gt;Ini adalah Teks Heading ke-1</h1&gt;
	<h2&gt;Ini adalah Teks Heading ke-2</h2&gt;
	<h3&gt;Ini adalah Teks Heading ke-3</h3&gt;
	<h4&gt;Ini adalah Teks Heading ke-4</h4&gt;
	<h5&gt;Ini adalah Teks Heading ke-5</h5&gt;
	<h6&gt;Ini adalah Teks Heading ke-6</h6&gt;

</body&gt;
</html&gt;

Berikut ini adalah hasilnya di browser:

 

 

PARAGRAF

Dalam html, ada paragraf yang mendefinisikan teks deskripsi yang biasa tersusun dari beberapa kalimat lalu menjadi paragraf.

Berikut ini adalah script kodenya :

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
	<title&gt;Dasar HTML</title&gt;
</head&gt;
<body&gt;

	<p&gt;Ini adalah paragraf pertama.</p&gt;
	<p&gt;Ini adalah paragraf kedua.</p&gt;
	<p&gt;Ini adalah paragraf ketiga.</p&gt;

</body&gt;
</html&gt;

Dan beginilah hasilnya di browser.

 

 

GAMBAR

Dalam sebuah website, tentunya ada gambar yang akan membantu informasi sebuah website menjadi makin tegas dan jelas.

Gambar HTML didefinisikan dengan tag <img>.

File sumber (src), teks alternatif (alt), lebar, dan tinggi disediakan sebagai atribut:

Berikut ini adalah kodenya :

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
	<title&gt;Dasar HTML</title&gt;
</head&gt;
<body&gt;

	<h2&gt;Gambar HTML</h2&gt;
	

	<img src="gambarku.jpg" alt="Web Design" width="350" height="230"&gt;

</body&gt;
</html&gt;

Dan beginilah hasilnya di browser :

 

 

TEKS LINK HTML

Teks link ini menggunakan tag <a>. Tujuannya supaya website kita bisa diarahkan ke website lain, berikut contoh kodenya :

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
	<title&gt;Dasar HTML</title&gt;
</head&gt;
<body&gt;

	<h2&gt;Teks Link pada HTML</h2&gt;
	<p&gt;Menggunakan tag a, supaya website diarahkan ke alamat web lainnya....</p&gt;

	<a href="https://www.webhozz.com/"&gt;Buka Link Webhozz</a&gt;

</body&gt;
</html&gt;

Maka beginilah hasilnya di browser.

 

 

LIST

List HTML mirip seperti Bullets & Numbering pada Microsoft Word. List HTML didefinisikan dengan tag <ul> (unordered / bullet list) atau <ol> (urutan / daftar bernomor), diikuti oleh tag <li> (daftar item).

Berikut ini script kodenya :

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
	<title&gt;Dasar HTML</title&gt;
</head&gt;
<body&gt;

	<h2&gt;Unordered HTML List</h2&gt;

	<ul&gt;
	  <li&gt;HTML</li&gt;
	  <li&gt;CSS</li&gt;
	  <li&gt;Javascript</li&gt;
	</ul&gt;  

	<h2&gt;Ordered HTML List</h2&gt;

	<ol&gt;
	  <li&gt;HTML</li&gt;
	  <li&gt;CSS</li&gt;
	  <li&gt;Javascript</li&gt;
	</ol&gt; 

</body&gt;
</html&gt;

Maka beginilah hasilnya di browser :

Nah, demikianlah untuk dasar-dasar HTML ini. Akhir kata semoga bermanfaat ya, dan selamat mencoba.