Tutorial HTML dasar untuk pemula -

HTML (Hypertext Markup Language) adalah bahasa markup digunakan untuk membuat website. HTML digunakan untuk membuat heading, paragraf, tabel dan sebagainya. Browser tidak menampilkan kode HTML tetapi merender menjadi konten web.

Dalam HTML ada istilah Tag, Element dan Attribute

Tag adalah sintaks yang digunakan untuk HTML disimbolkan dengan tanda <tag>

Tag HTML harus dibuka dan ditutup seperti ini <tag></tag>

Contents

Konstruksi Dasar HTML

Setiap halaman HTML harus dimulai dengan tag <!DOCTYPE html>

Sedangkan untuk memulai kode HTML harus menggunakan tag <html> dan diakhiri dengan </html>

Di dalam tag <html> ada 2 tag penting harus harus dideklarasikan yaitu tag <head> dan <body>

Tag <head> merupakan tag yang menyimpan informasi metadata seperti menulis judul website atau memanggil library untuk web

Sedangkan tag <body> digunakan untuk menyimpan konten untuk website

Berikut penulisan kode konstruksi HTML

<!DOCTYPE html>
<html>
<head>
	
</head>
<body>

</body>
</html>

Selanjutnya kita akan membahas beberapa tag yang sering digunakan antara lain:

HTML Title
HTML Heading
HTML Paragraphs
HTML Table
HTML Image
HTML Hyperlinks
HTML Div
HTML Span

HTML Title

Tag <title>ditempatkan di tag <head>digunakan untuk menulis judul website

<head>

	<title>Ini contoh Tag Title</title>

</head>

HTML Heading

Untuk membuat heading di HTML kita gunakan tag <h1><h2><h3><h4><h5><h6>

Setiap tag heading juga ditutup seperti aturan awal

Contoh penulisan heading

<!DOCTYPE html>
<html>
<head>
	<title>Ini contoh heading</title>
</head>
<body>

	<h1>Ini heading 1</h1>
	<h2>Ini heading 1</h2>
	<h3>Ini heading 1</h3>
	<h4>Ini heading 1</h4>

</body>
</html>

HTML Paragraphs

Untuk membuat paragraf gunakan tag <p></p>

Contoh penggunaan paragraf

<!DOCTYPE html>
<html>
<head>
	<title>Ini contoh Paragraf</title>
</head>
<body>

	<p>Ini contoh paragraf 1</p>

	<p>ini contoh paragraf 2</p>

	<p>ini contoh paragraf 3</p>
	
</body>
</html>

HTML Table

HTML Table digunakan untuk membuat table dengan tag <table></table>

Table terdiri dari baris dan kolom. Untuk membuat baris pada table gunakan tag <tr></tr> dan untuk membuat kolom gunakan tag <td></td>

<table border="1">
  <tr>
    <td>Faqih</td>
    <td>Bandung</td>
    <td>08654522246</td>
  </tr>
</table>

Untuk membuat table dengan header gunakan tag <th></th>

<!DOCTYPE html>
<html>
<head>
	<title>Ini contoh Table</title>
</head>
<body>

	<table border="1">
	  <tr>
	    <th>Nama</th>
	    <th>Alamat</th>
	    <th>No Telp</th>
	  </tr>
	  <tr>
	    <td>Faqih</td>
	    <td>Bandung</td>
	    <td>08654522246</td>
	  </tr>
	  <tr>
	    <td>Doni</td>
	    <td>Jakarta</td>
	    <td>0856222246</td>
	  </tr>
	</table> 

</body>
</html>

HTML Image

Untuk menggunakan gambar di <img>

Untuk mengambil source dari gambar kita gunakan artibut src <img src="">

Misal memanggil gambar logo ngodingdata.com dengan tag <img>

<!DOCTYPE html>
<html>
<head>
	<title>Ini contoh src</title>
</head>
<body>

	<img src="https://ngodingdata.com/wp-content/uploads/2019/10/logo_ngodingdata2-1.png">

</body>
</html>

HTML Hyperlinks

HTML Hyperlinks menghubungkan halaman satu dengan halaman lainnya. Hyperlinks didefinisikan dengan tag <a> tag dan biasanya saat kurson berada disekitar link bentuk kursor kan berubah bentuk tangan.

<!DOCTYPE html>
<html>
<head>
	<title>Ini contoh hyperlinks</title>
</head>
<body>

	 <a href="https://ngodingdata.com">Tutorial Data Online</a> 

</body>
</html>

HTML Div

Tag <div> merupakan wadah kosong, yang mendefinisikan suatu bagian. <div> digunakan sebagai wadah untuk elemen HTML lainnya dan mengkombinasikannya dengan CSS atau JavaScript.

<!DOCTYPE html>
<html>
<head>
	<title>Ini contoh div</title>
</head>
<body>

	 <div>
	    <h3>Ini judulnya</h3>
	    <p>Ini paragraf 1</p>
	    <p>Ini paragraf 2</p>
	</div>


</body>
</html>

dengan <div> kita dapat memanipulasi konten yang berada di dalamnya seperti ukuran warna, ukuran, background dari tag yang ada di dalam <div>

HTML Span

Tag <span> juga merupan wadah kosong seperti <div>. <div> merupakan tag Block-line yaitu merupakn kelompok tag yang berdiri sendiri sedangkan <span> merupakan tag In-line yang tidak membuat blok baru di dalam HTML

<!DOCTYPE html>
<html>
<head>
	<title>Ini contoh div</title>
</head>
<body>

	 <div>
	    <h3>Ini judulnya</h3>
	    <p>Ini <span>paragraf 1</span></p>
	    <p>Ini <span>paragraf 2</span></p>
	</div>


</body>
</html>

output yang dihasilkan juga akan sama persis dengan <div> karena tidak ada manipulasi di dalamnya

HTML class Attribut

HTML class digunakan untuk manipulasi blok tertentu yang telah dibikin. Misal kita mempunyai dua tag <div> yang berbeda dan ingin melakukan manipulasi warna kita dapat gunakan class atribut

Note : untuk memberi warna pada tag <div> kita gunakan tag <style> dan kita panggil nama class pertama

<!DOCTYPE html>
<html>
<head>

	<title>Ini contoh class atribut</title>

	<style>
		.pertama {
			color: red;
		}	
	</style>

</head>
<body>

	 <div class="pertama">
	    <h3>Ini div pertama</h3>
	    <p>Ini <span>paragraf 1</span></p>
	    <p>Ini <span>paragraf 2</span></p>
	</div>

	<div class="kedua">
	    <h3>Ini div kedua</h3>
	    <p>Ini <span>paragraf 1</span></p>
	    <p>Ini <span>paragraf 2</span></p>
	</div>

</body>
</html>

Hasilnya adalah div yang pertama yang hanya berubah warnanya

Contoh lain misal kita ingin merubah warna text di tag <p>

<!DOCTYPE html>
<html>
<head>

	<title>Ini contoh class atribut</title>

	<style>
		p {
			color: blue;
		}	
	</style>

</head>
<body>

	 <div class="pertama">
	    <h3>Ini div pertama</h3>
	    <p>Ini <span>paragraf 1</span></p>
	    <p>Ini <span>paragraf 2</span></p>
	</div>

	<div class="kedua">
	    <h3>Ini div kedua</h3>
	    <p>Ini <span>paragraf 1</span></p>
	    <p>Ini <span>paragraf 2</span></p>
	</div>

</body>
</html>

Hasilnya text di tag <p> berubah jadi warna biru

Tutorial HTML dasar untuk pemula