Bab 1 – Pengenalan HTML

HTML adalah bahasa markup standar untuk halaman Web.
Dengan HTML Anda dapat membuat situs web Anda sendiri.
HTML mudah dipelajari – Anda akan menikmatinya!


Apa itu HTML? #

  • HTML adalah bahasa markup standar untuk membuat halaman Web.
  • HTML adalah singkatan dari Hyper Text Markup Language
  • HTML menggambarkan struktur halaman Web
  • HTML terdiri dari serangkaian elemen
  • Elemen HTML memberi tahu browser cara menampilkan konten
  • Elemen HTML diwakili oleh tag
  • HTML memberi label label pada konten seperti “heading”, “paragraf”, “table”, dan sebagainya
  • Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk membuat konten halaman

Sintaks HTML Sederhana #

Contoh :

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

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Penjelasan dari sintaks contoh diatas :

  • Deklarasi <!DOCTYPE html> mendefinisikan dokumen ini sebagai HTML5
  • Elemen <html> adalah elemen root dari halaman HTML
  • Elemen <head> berisi informasi meta tentang dokumen
  • Elemen <title> menentukan judul untuk dokumen
  • Elemen <body> berisi konten halaman yang terlihat
  • Elemen <h1> mendefinisikan heading besar
  • Elemen<p> mendefinisikan paragraf

Tag HTML #

Tag HTML adalah nama elemen yang dikelilingi oleh kurung sudut :

<tagname>konten</tagname>
  • Tag HTML biasanya berpasangan seperti <p> dan </p>
  • Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
  • Tag akhir ditulis seperti tag awal, tetapi dengan garis miring dimasukkan sebelum nama tag

Tag awal juga disebut tag pembuka, dan tag akhir adalah tag penutup.

HTML Bersifat Not Case Sensitive.
Tag HTML tidak peka huruf besar-kecil :
<H1> artinya sama dengan <h1>.

Standar HTML5 tidak memerlukan tag huruf kecil, tetapi Webgrafis merekomendasikan huruf kecil dalam HTML, dan menuntut huruf kecil untuk tipe dokumen yang lebih ketat seperti XHTML.

Di Webgrafis, kami selalu menggunakan Tag dengan huruf kecil.


Web Browser #

Tujuan dari browser web (Chrome, Edge, Firefox, Safari) adalah untuk membaca dokumen HTML dan menampilkannya.

Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk menentukan cara menampilkan dokumen :


Struktur HTML #

Di bawah ini adalah visualisasi struktur halaman HTML :

Visualisasi struktur HTML

Catatan : Hanya konten di dalam bagian </body> (area putih di atas) yang ditampilkan di browser.


Deklarasi <!DOCTYPE> #

  • Deklarasi <!DOCTYPE> mewakili tipe dokumen, dan membantu browser untuk menampilkan halaman web dengan benar.
  • Itu harus hanya muncul sekali, di bagian atas halaman (sebelum tag HTML apa pun).
  • Deklarasi <!DOCTYPE> tidak peka huruf besar-kecil.
  • Deklarasi <!DOCTYPE> untuk HTML5 adalah :
<!DOCTYPE html>

Versi HTML #

Sejak awal web, ada banyak versi HTML :

Versi Tahun
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014