Kita telah sama-sama mempelajari tentang struktur dasar HTML, dan dapat membedakan antara elemen, tag dan attribute.

Pada bagian ini, kita akan sama-sama belajar tentang dasar-dasar tag yang ada dalam HTML, diantaranya membuat heading atau judul, paragraph, line break, dan lain-lain.

Membuat Heading dalam HTML

Dari sekarang sebaiknya kita memahami betul fungsi dari heading dalam HTML, karena heading ini penting untuk kemudian hari dalam proses pembuatan website.

Kode heading dalam HTML direpresentasikan menggunakan huruf h, yang merupakan kependekan dari heading, gampang ngapalinnya.

Setidaknya ada 6 level heading dalam HTML, yaitu heading 1, heading 2, sampai 6, maka dalam penulisan tag pun ditulis h1, h2, h3, h4, h5, dan h6.

Masih ingat penulisan tag kan? Yaa betul .. ketika kita menulis tag, maka harus ada tag pembuka yang berarti <h1> dan harus ada tag penutuf </h1> untuk menjadi 1 elemen utuh.

Artinya, ketika akan menulis judul maka kodenya <h1>Judul pertama</h1> (contoh judul dengan tag h1)

Contohnya berikut ini:

<!DOCTYPE html>
<html>

<head>
    <title>Belajar HTML bersama Maya Tentang Heading</title>
</head>

<body>
<h1>Sebuah Judul dalam HTML menggunakan h1</h1>
<h2>Sebuah Judul dalam HTML h2</h2>
<h3>Sebuah Judul dalam HTML h3</h3>
<h4>Sebuah Judul dalam HTML h4</h4>
<h5>Sebuah Judul dalam HTML h5</h5>
<h6>Sebuah Judul dalam HTML h6</h6>
</body>

</html>

Maka kode tersebut menghasilkan tampilan seperti ini:

Sebuah Judul dalam HTML menggunakan h1

Sebuah Judul dalam HTML h2

Sebuah Judul dalam HTML h3

Sebuah Judul dalam HTML h4

Sebuah Judul dalam HTML h5

Sebuah Judul dalam HTML h6

Heading 1 atau h1 biasanya untuk judul utama, sedangkan h2, subjudulnya, h3, subjudul dari subjudul, dan seterusnya, levelingnya begitu.

Nah dibawah heading kita mengenal paragraph, alias alenia.

Membuat Paragraph dalam HTML

Huruf p adalah representasi tag dari paragraph dalam HTML, jadi penulisannya seperti yang sudah kita ketahui bersama juga <p>ini adalah paragraph</p>.

Contohnya:

<!DOCTYPE html>
<html>

<head>
    <title>Belajar HTML bersama Maya Tentang Paragraf</title>
</head>

<body>
<p>Ini adalah sebuah paragraf yang mana antara satu paragraf dan lainnya dibedakan menggunakan tag p, begitu indahnya paragraf ini, ku melihat seperti dalam dongeng saja, wahh inilah paragraf, hehe</p>
<p>Ini adalah sebuah paragraf yang mana antara satu paragraf dan lainnya dibedakan menggunakan tag p, begitu indahnya paragraf ini, ku melihat seperti dalam dongeng saja, wahh inilah paragraf, hehe</p>
<p>Ini adalah sebuah paragraf yang mana antara satu paragraf dan lainnya dibedakan menggunakan tag p, begitu indahnya paragraf ini, ku melihat seperti dalam dongeng saja, wahh inilah paragraf, hehe</p>
</body>

</html>

Ini hasilnya:

Ini adalah sebuah paragraf yang mana antara satu paragraf dan lainnya dibedakan menggunakan tag p, begitu indahnya paragraf ini, ku melihat seperti dalam dongeng saja, wahh inilah paragraf, hehe

Biasanya dalam sebuah paragraph kita ingin satu baris dibawahnya, tetapi bukan paragraph baru, dalam Bahasa Inggris dikenal dengan line break, atau menaruh sebuah baris dalam paragraph.

Tag Line Break

Line break direpresentasikan dengan dua huruf yaitu br, kependekan dari break, kali ya. Hehe.

Line break ini sangat unik, karena tidak seperti tag lain yang kita ketahui memiliki awalan dan penutup.

Tag ini hanya memiliki satu perintah yaitu dengan <br/> maka baris berikutnya akan turun kebawah, tetapi masih dalam satu element tertentu, atau masih dalam 1 paragraf.

Penulisannya harus lengkap <br/> menulis dengan <br> meski kadang berfungsi, tetapi pada beberapa browser dianggap tidak valid. Maka sebaiknya tetap gunakan <br/>

Contohnya:

<!DOCTYPE html>
<html>

<head>
    <title>Belajar HTML bersama Maya Tentang Line Break</title>
</head>

<body>
<p>Kepada<br/>Yang Terhormat<br/>Ibu Ketua RW<br/>Di tempat</p>
<p>Sehubungan Dengan Sebuah kondisi ini maka begini saya berencana begitu</p>
</body>

</html>

Hasilnya:

Kepada
Yang Terhormat
Ibu Ketua RW
Di tempat

Sehubungan Dengan Sebuah kondisi ini maka begini saya berencana begitu

Nonbreaking Spaces

Kalau tadi kita ngobrolin tentang satu baris dalam paragraph yang kita turunkan, sekarang, jika ingin satu kaliamat utuh jangan sampai terputus.

Biasanya ini kita gunakan kalau ada judul film, misalnya “Si Buta dari Gua Hantu” kita ingin jangan sampai kalimat itu terputus karena ukuran screen yang secara otomatis membuat kalimat terputus.

Dengan menggunakan   sebagai pengganti spasi, maka kita memerintahkan browser untuk tidak memisahkan kalimat tersebut.

Ini contohnya:

<!DOCTYPE html>
<html>

<head>
    <title>Belajar HTML bersama Maya Tentang Nonbreaking Spaces</title>
</head>

<body>
<p>Sehubungan Dengan diluncurkannya sebuah film berjudul "Si Buta Dari Gua Hantu" Maka kami mengundang bapak ibu untuk nonton</p>
</body>

</html>

Dan ini hasilnya

Sehubungan Dengan diluncurkannya sebuah film berjudul “Si Buta Dari Gua Hantu” Maka kami mengundang bapak ibu untuk nonton

Kesimpulan

Sebuah element utuh biasanya terdiri dari <tagpembuka>isi</tagpenutup>
Mebuat heading atau judul menggunakan tag h, yang mana ada 6 level, yaitu h1, h2, h3, h4, h5, dan h6
Membuat paragraf menggunakan tag huruf p
ada tag yang tidak membutuhkan penutup, salah satunya <br/> untuk break line.

Tag Pembuka	Content	Tag Penutup
<h1>	Konten Heading 1	</h1>
<h2>	Konten Heading 2	</h2>
<h3>	Konten Heading 3	</h3>
<h4>	Konten Heading 4	</h4>
<h5>	Konten Heading 5	</h5>
<h6>	Konten Heading 6	</h6>

Penulisan Heading / Judul

Tag Pembuka	Content	Tag Penutup
<p>	Konten paragraf	</p>
</br>	Konten yang di-break
	Konten Satu Baris

Penulisan Paragraf

Latihan

Silahkan sekarang buat satu file html utuh, yang berisi:

Judul besar
Sub judul
Paragraph yang terdiri dari line break dan nonbreaking spaces.

Selamat mencoba.

Ditulis oleh: Maya

Maya adalah tokoh hayalan, hanya tampaknya ada, tetapi nyatanya tidak ada, tokoh Maya dibangun untuk lebih mendekatkan karyamaya pada kalian.

Semua tulisan Maya | Website

Dasar-dasar Tag Dalam HTML bagian 1