Pada materi sebelumnya, kalian tentu sudah mengenl dengan baik apa itu HTML. Namun mengenal saja tidak cukup, kalian juga harus tahu fungsi dari masing-masing Tag yang ada pada HTML. Tapi ya saya sarankan, kalian telah membaca dan memahami materi sebelumnya tentang Pengenalan Tentang HTML. Agar nanti akan mudah mengerti tentang tag html ini, karena pada materi sebelumnya sudah saya tulis juga sedikit tentang Tag-tag tersebut.

Belajar HTML #3: Mengenal Tag Tag Dasar HTML

Tag dasar berarti elemen dasar. Dokumen Html secara mendasar akan terdiri atas teks informasi. Judul atau topik utama dokumen disimpan dalam section/elemen head, disimpan dalam elemen title, dengan tag <title>….</title>. Title akan ditampilkan pada bagian caption dari window browser web. Hanya elemen title saja dari elemen head yang ditampilkan di web. Hanya elemen title saja dari elemen head yang ditampilkan di browser, elemen laiinya dari head tidak ditampilkan, sebagai elemen yang menjelaskan tentang dokumen HTML yang bersangkutan.

Teks informasi ini akan disimpan dalam section/elemen body – di dalam tag <body> dan </body>. Teks disusun dalam paragraf-paragraf tag <p>. Teks juga mempunyai judul-judul yang menunjukan topik-topik atau bagian-bagian dalam dokumen -judul disebut heading. Heading didalam html mempunyai level 1-6, dinyatakan dengan tag <h1> sampai </h6>.

Baca Juga: Mengenal Lebih Detail Apa Itu Web?

3.1 HTML

Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrogram web untuk menuliskannya sebagi tag pertama dalam dokumen HTML.

<html> diakhiri dengan </html>

3.2 Head

Merupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan.

<head> diakhiri dengan </head>

3.3 Title

Merupakan Tag didalam head yang harus dituliskan untuk memberikan judul/informasi pada caption browser web tentang topik atau judul dari dokumen web yang ditampilkan dalam browser.

<title>diakhiri</title>

3.4 Body

Merupakan section utama dalam dokumen web. Pada section  ini semua isi dokumen yang akan ditampilkan didalam browser harus dituliskan.

<body>Diakhiri dengan </body>

3.5 Paragraf

Informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam kepenulisan. Misalnya satu pikiran utama disimpan dalam satu paragraf. Setiap paragraf harus dimulai dengan memberi tag <p> dan diakhiri dengan </p>. Contoh penggunaanya:

Contoh Programnya:

<!DOCTYPE html>
<html>
<head>
<title>Judul Halamanku</title>
</head>
<body>
Berikut ini contoh paragraf:
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
</body>
</html>

Hasilnya seperti ini:

3.6 Line Break

Kita dapat memaksimalkan ganti baris pada dokumen web. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf. Untuk menampilkan suatu teks ditampilkan pada baris baru dalam suatu paragraf, maka harus digunakan tag <br> sebelum teks yang dimaksudkan tersebut dituliskan.

Contoh programnya:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Ganti Baris</title>
</head>
<body>
<p>
Halo aleks<br> Baris Baru<br> Baris Baru kedua<br>
</p>
</body>
</html>

Dan hasilnya:

3.7 Heading

Teks dalam dokumen umunya mempunyai judul topik, pada dokumen html judul ini disebut heading. Heading ditulis akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukan tingkat keberatian dari teks yang akan dituliskan.

Ada tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar. Setiap heading dalam dokumen harus diberi tag, tergantung pada kebutuhan/keberatian teks tersebut, jika dianggap sangat penting kita bisa menganggap sebagai heading 1.

Berikut contoh Program Tag Heading:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Ganti Baris</title>
</head>
<body>
<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<H5>Ini Heading 5</H5>
<H6>Ini Heading 6</H6>
</body>
</html>

Hasilnya Seperti ini:

3.8 Mengatur Letak Heading

Tag heading mempunyai atribut yang digunakan untuk mengatur letak heading dalam baris-align. Align heading:

  • kiri-left
  • tengah-center
  • kanan-right
Contoh Program:

<!DOCTYPE html>
<html>
<head>
<title>Mengtur Letak Heading</title>
</head>
<body>
<h1 align=center> Heading 1 di tengah</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1 align="right">Heading 1 dikanan</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Hasilnya seperti ini:

3.9 Penggaris Mendatar

Sebuah garis dapat disisipkan dalam dokumen web, umunya digunakan sebagai pemisah antarbagain atau paragraf. Tag <hr> disisipkan pada tempat garis akan disisipkan dalam dokumen.

Contoh Program membuat garis:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Garis </title>
</head>
<body>
<p>Selamat Datang di Alekpedia</p>
<hr>
Pargraf 1
<hr>
Paragraf 2
<hr>
Parafraf 3
</body>
</html>

Hasilnya seperti ini:

3.10 Komentar

Dalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai catatan atau komentar terhadap dokumen itu sendiri. Catatan/komentar dalam dokumen ini tidak ditampilkan dalam browser.

Tag komentar dapat digunakan untuk menyembunyikan sebagian dokumen web. Bisa jadi karena belum adanya kepastian dari isi dokumen yang akan dipublikasikan  terutama dari aspek legal; perlu ada approval sebelum bisa dipublikasikan.

Teks yang berfungsi sebagai komentar yang disimpan dalam dokumen ditandai dengan tag <!– sebagai awal, kemudian teks yang dikomentari , dan tag –> sebagai akhir tag.

Contoh penggunan Komentar:

<!DOCTYPE html>
<!--coba_komentar.html-->
<html>
<head>
<title>Contoh Komentar </title>
</head>
<body>
<!--komentar ini tidak akan ditampilkan-->
<p>Teks Normal</p>
</body>
</html>

Hasilnya seperti ini: