Belajar Dasar - Dasar HTML

Source Code illustration Photo by Sai Kiran Anagani on Unsplash

Struktur Dasar HTML

Struktur dasar html terdiri dari tag <html>...</html> yang didalam tag tersebut terdapat tag <head>...</head> dan tag <body>...</body> yang bisa dilihat pada source code berikut.

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

</body>
</html>

Membuat Paragraf Menggunakan HTML

Membuat paragraf pada html dapat diketik di dalam bagian tag <body>...</body> menggunakan tag <p>...</p> seperti pada contoh source code dibawah ini.

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

<p>Ini Adalah Paragraf</p>

</body>
</html>

Membuat Heading Pada HTML

Untuk membuat heading pada html dapat diketik didalam bagian tag <body>...</body> menggunakan tag <h1>...</h1> sampai dengan <h6>...</h6> semakin besar angka yang digunakan maka teks heading akan semakin kecil berikut contoh source code html menggunakan tag heading.

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Dasar HTML - Heading</title>
</head>
<body>
<h1>Ini adalah heading 1 yang secara default merupakan heading terbesar</h1>
<h2>Ini adalah heading 2 yang secara default lebih kecil dari h1 tapi lebih besar dari h3</h2>
<h3>Ini adalah heading 3 yang secara default lebih kecil dari h2 tapi lebih besar dari h4</h3>
<h4>Ini adalah heading 4 yang secara default lebih kecil dari h3 tapi lebih besar dari h5</h4>
<h5>Ini adalah heading 5 yang secara default lebih kecil dari h4 tapi lebih besar dari h6</h5>
<h6>Ini adalah heading 6 yang secara default merupakan heading terkecil</h6>

</body>
</html>

Membuat Hyperlink pada HTML

Hyperlink pada html dapat diketik didalam bagian tag <body>...</body> menggunakan tag <a>...</a> ditambah dengan atribut href="..." pada tag <a> sebagai link yang akan dituju ketika teks di klik. berikut contoh source code html menggunakan tag hyperlink pada html.

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Dasar HTML - Hyperlink</title>
</head>
<body>

<a href="http://www.google.com">Link ini akan menuju ke google.com</a>

</body>
</html>

Memasukan Gambar di HTML

Untuk menambahkan gambar di html. dapat menggunakan tag <img> dengan menambahkan atribut src="..." untuk memasukan source dari gambar tersebut. selain itu, bisa juga ditambahkan atribut alt="..." atau bisa disebut alternative text untuk menentukan ukuran gambar bisa menggunakan atribut width dan height. berikut contoh pengetikan tag <img> pada source code html.

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Dasar HTML - Img</title>
</head>
<body>

<img src="gambar.jpg" width="50px" height="50px" alt="sebuah gambar">

</body>
</html>

Membuat Button pada HTML

Menambahkan button pada html dapat menggunakan tag <button>...</button>

berikut adalah contoh penggunaan button:

Berikut adalah contoh pengetikan button pada source code html:

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Dasar HTML - button</title>
</head>
<body>

<button>Ini adalah button</button>

</body>
</html>

Membuat List dengan HTML

Menambahkan List menggunakan HTML dapat dilakukan dengan dua cara yaitu menggunakan tag <ul>...</ul> yang bisa disebut unordered list dan menggunakan tag <ol>...</ol> yang bisa disebut ordered list. Yang mana didalam tag tersebut ditambahkan tag <li>...</li>.

Berikut adalah contoh penggunaan tag <ul>...</ul> atau unordered list.

List 1
List 2
List 3
List 4

Jika ditulis dalam source code html seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Dasar HTML - Unordered List</title>
</head>
<body>

<ul> 
 <li>List 1</li>
 <li>List 2</li>
 <li>List 3</li>
 <li>List 4</li>
</ul>

</body>
</html>

Berikut adalah contoh penggunaan tag <ol>...</ol> atau ordered list.

List 1
List 2
List 3
List 4

Jika diketik pada source code html berikut adalah contoh pengetikan tag <ol>

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Dasar HTML - Ordered List</title>
</head>
<body>

<ol> 
 <li>List 1</li>
 <li>List 2</li>
 <li>List 3</li>
 <li>List 4</li>
</ol>

</body>
</html>

Membuat Komentar pada HTML

Ketika ingin membuat komentar pada html menggunakan tag . Tag ini dipakai ketika kita ingin memberi penjelasan terhadap code yang kita buat. Teks yang ditulis di tag komentar hanya bisa dibaca melalui text editor saja dan tidak bisa dibaca oleh sembarang orang.

Berikut adalah contoh pengetikkan Komentar pada source code:

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Dasar HTML - HTML</title>
</head>
<body>

<!-- Ini Adalah Komentar Menggunakan HTML -->

</body>
</html>

Froblema