Tag HTML
Seperti yang telah dijelaskan sebelumnya, elemen dalam HTML dikenal sebagai tag. Html terdiri dari beberapa tag yang dibagi menjadi dua kategori.
Tag kosong: Semua tag yang tidak ditutup atau ditutup sendiri. Misalnya. <br>, <img>, <link> dll.
Tag Tidak Kosong: Semua tag yang ditutup. Misalnya. <body>, <p>, <title> dll.
Jenis Tag
Meta Tag: DOCTYPE, title, link, meta and style.
Text Tag: <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>,<kbd>, <pre>, <samp>, <var>, <br> dll.
Link Tag: <a> and <base>.
Image dan Object tag: <img>, <object>, <map>, <area> and <param>.
List Tag: <ul>, <ol>, <li>, <dd>, <dt> and <dl>.
Table tag: <table>, <th>, <tr>, <td>, <tbody>, <thead>, <tfoot>, col, colgroup dan caption.
Form tag: <form>, <input>, <textarea>, <select>, <option>, <button>, <label>, <fieldset>, <legend> dan <optgroup>.
Scripting tag: <script>, <noscript>.
Tag Dasar HTML
Heading Tag: Tag ini mewakili header dokumen. Dalam penerapan dikatakan baik jika setiap dokumen dimulai dengan Heading. Tag heading berkisar dari H1 hingga H6 yaitu enam level berbeda di mana H1 adalah ukuran maksimal dan H6 adalah ukuran minimum.
Contoh:
<!DOCTYPE html> <html> <head> <title>Contoh Judul</title> </head> <body> <h1>Tutorial dan Contoh</h1> <h2>Tutorial dan Contoh</h2> <h3>Tutorial dan Contoh</h3> <h4>Tutorial dan Contoh</h4> <h5>Tutorial dan Contoh</h5> <h6>Tutorial dan Contoh</h6> </body> </html>
Tag Paragraf: Tag
ini memungkinkan teks dokumen HTML Anda disusun menjadi paragraf yang berbeda. Tag ini bukan tag kosong, jadi <p> untuk pembuka dan </p> untuk tag penutup.
contoh:
<!DOCTYPE html> <html> <head> <title>Contoh Paragraf</title> </head> <body> <p>Ini adalah Situs Tutorial dan Contoh</p> <p>Anda sedang membaca tutorial HTML</p> </body> </html>
Output:
Ini adalah Situs Tutorial dan Contoh Anda sedang membaca tutorial HTML
Tag Baris Baru: Tag ini adalah tag kosong yang memungkinkan programmer untuk memutuskan baris segera setelah penempatannya. Apa pun yang mengikutinya dimulai dari baris baru.
Contoh:
<!DOCTYPE html> <html> <head> <title>Contoh Baris Baru</title> </head> <body> <p>Anda sedang membaca Tutorial di <br>Situs Web Sukamenak.com<br>Terima kasih.</p> </body> </html>
Output:
Anda sedang membaca Tutorial di Situs Web Sukamenak.com Terima kasih.
Tag Tengah: Tag ini digunakan untuk meletakkan konten atau sel tabel apa pun di tengah halaman.
Contoh:
<!DOCTYPE html> <html> <head> <title>Contoh Tag Center</title> </head> <body> <p>Sukamenak.com </p> <center><p>Sukamenak.com </p><center> </body> </html>
Output:
Sukamenak.com
Sukamenak.com
PRESERVE FORMATTING: Seperti namanya, ini memungkinkan teks Anda untuk mengikuti format yang tepat dengan cara penulisannya, yaitu mempertahankan teks Anda pada format apa yang ditulis.
Sintaksnya adalah <pre>….</pre>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Preserve Formatting </title>
</head>
<body>
<pre>Sukamenak.com adalah situs web yang menyediakan tutorial
{banyak teknologi}. Juga yang tercepat (Situs web yang berkembang) memiliki peringatan
(persentase kepercayaan sangat tinggi)</pre>
</body>
</html>
Output:
Sukamenak.com adalah situs web yang menyediakan tutorial
{banyak teknologi}. Juga yang tercepat (Situs web yang berkembang) memiliki peringatan
(persentase kepercayaan sangat tinggi)
Spasi Non-breaking: Digunakan saat kita tidak ingin browser membagi teks menjadi dua baris. Sintaksnya adalah  .
Contoh:
<!DOCTYPE html> <html> <head> <title>Contoh Non-breaking Space</title> </head> <body> <p>Contoh dasarnya adalah TutorialDanContoh</p> </body> </html>
Output:
Contoh dasarnya adalah Tutorial Dan Contoh
Atribut HTML
- Atribut HTML memberikan informasi tambahan tentang elemen HTML.
- Atribut selalu ditentukan dalam tag awal.
- Atribut biasanya datang berpasangan.
lang Attribute
Atribut ini membantu dalam mendeklarasikan bahasa dokumen. Seluruh dokumen Atribut Lang dideklarasikan dalam tag html.
<!DOCTYPE html> <html lang="en-US"> <body> … </body> </html>
href Attribute
Atribut ini disematkan dengan tag anchor (<a>) di mana href menentukan alamat tautan.
<a href="https://www.sukamenak.com">Tutorial dan contoh link</a>
Size Attribute
Ini mendefinisikan ukuran yaitu Tinggi, Lebar gambar, gif, tombol dll. Ini dapat dengan mudah dipahami dengan properti gambar seperti yang ditunjukkan di bawah ini.
<img src="te.jpg" width="104" height="142">
Alt Attribute
Memberikan teks alternatif ketika gambar tidak dapat ditampilkan. Teks ini ditampilkan ketika karena alasan apapun gambar tidak dimuat tetapi pengguna dapat membaca teks alternatif untuk mendapatkan informasi referensi tentang gambar.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Style Attributes
Membantu dalam penataan elemen HTML. Sintaksnya sebagai berikut:
<tagname style="property:value;">
Contoh:
<h1 style="color:blue;">Tutorial dan Contoh</h1> <h1 style="font-size:300%;">Tutorial dan Contoh</h1>
Output:
Tutorial dan Contoh
Tutorial dan Contoh
Elemen HTML
Elemen HTML adalah tag awal dan tag penutup dari beberapa konten. Jadi kita juga dapat mengatakan bahwa elemen HTML adalah semuanya mulai dari tag awal hingga tag penutup.
Sebagai contoh:
<tagname>beberapa konten</tagname>
Contoh dalam penerapannya:
<h1>Ini judul pertamaku</h1>
Catatan: Dalam HTML memiliki beberapa elemen khusus yang tidak memiliki konten. Misalnya elemen <br>. Jadi elemen ini disebut elemen kosong. Dengan kata yang lebih sederhana, kita dapat mengatakan bahwa elemen kosong tidak memiliki tag akhir.
Elemen HTML bersarang:
Dalam HTML, elemen dapat bersarang yang berarti elemen HTML dapat berisi elemen lain. Semua dokumen HTML terdiri dari elemen HTML bersarang. Berikut empat contoh elemen HTML:
<html>
<body>
<h1>
<p>
Contoh:
<html> <body> <h1>Apple</h1> <p>Apel adalah buah yang dapat dimakan yang dihasilkan oleh pohon apel (Malus domestica). Pohon apel dibudidayakan di seluruh dunia dan merupakan jenis yang paling banyak ditanam dalam genus Malus. Pohon itu berasal dari Asia Tengah, di mana nenek moyang liarnya, Malus sieversii, masih ditemukan sampai sekarang</p> </body> </html>
Output:
Apple
Apel adalah buah yang dapat dimakan yang dihasilkan oleh pohon apel (Malus domestica). Pohon apel dibudidayakan di seluruh dunia dan merupakan jenis yang paling banyak ditanam dalam genus Malus. Pohon itu berasal dari Asia Tengah, di mana nenek moyang liarnya, Malus sieversii, masih ditemukan sampai sekarang
Dalam contoh dasar ini, kita dapat dengan jelas melihat bagaimana elemen HTML mengandung elemen lain. Jadi, dalam contoh itu seperti yang kita lihat bahwa kita memiliki elemen <html>, ini dikenal sebagai elemen root dan digunakan untuk mendefinisikan seluruh elemen html.
Memiliki tag awal dan tag penutup juga, tetapi seperti yang dapat kita lihat di antara tag-tag tersebut, kita memiliki banyak elemen seperti tag <body> yang digunakan untuk mendefinisikan badan dokumen. Ini memiliki tag awal dan tag penutup juga.
Seperti yang kita lihat di dalam elemen body, kita memiliki dua elemen lain yaitu tag <h1> dan tag <p>. Elemen <h1> mendefinisikan sebuah heading yang juga memiliki tag pembuka dan penutup. Dan elemen <p> itu mendefinisikan sebuah paragraf. Itu juga dilengkapi dengan tag pembuka dan penutup.
Jangan pernah melewatkan Tag Akhir:
Ada beberapa elemen dalam html yang akan ditampilkan dengan benar bahkan setelah Anda lupa memasukkan tag penutup. Misalnya: tag <p>. Tetapi kita tidak boleh mengandalkan ini karena pada saat eksekusi, mungkin muncul kesalahan yang tidak terduga, jika Anda lupa tag penutup. Contoh berikut menunjukkan cara kerja tag paragraf tanpa tag penutupnya.
Contoh:
<html> <body> <p>Ini adalah paragraf tanpa tag penutupnya <p>Ini juga merupakan paragraf tanpa tag penutupnya </body> </html>
Output:
Ini adalah paragraf tanpa tag penutupnya
Ini juga merupakan paragraf tanpa tag penutupnya
Tag HTML kosong:
Elemen HTML tanpa konten disebut elemen kosong (empty). Misalnya: tag <br> digunakan untuk mendefinisikan jeda baris dalam html, dan merupakan elemen kosong karena tidak memiliki tag penutup. Dan ketika sebuah tag tidak memiliki tag akhir maka tidak ada gunanya memberikan elemen tersebut sebuah konten. Jadi begitulah cara kerja elemen html kosong.
contoh:
<html> <body> <p>Ini adalah paragraf<br>dengan jeda baris.</p> </body> </html>
Output:
Ini adalah paragraf
dengan jeda baris.
HTML tidak peka huruf besar/kecil:
HTML bukan bahasa case sensitive artinya <p> sama dengan <P>. Dalam html, tidak membedakan tag huruf kecil dan besar.
HTML Tag:
Ada beberapa tag html seperti <html>, <body>, <h1>……sampai <h6>. Memiliki deskripsi yang berbeda untuk masing-masing tag ini.
