Pengenalan HTML


HTML adalah bahasa markup standar untuk membuat halaman Web.


Apa itu HTML?

  • HTML adalah singkatan dari Hyper Text Markup Language
  • HTML adalah bahasa markup standar untuk membuat halaman Web
  • HTML menggambarkan struktur halaman Web
  • HTML terdiri dari serangkaian elemen
  • Elemen HTML memberi tahu browser cara menampilkan konten
  • Elemen HTML memberi label potongan konten seperti "ini adalah judul", "ini adalah paragraf", "ini adalah tautan", dll.

Dokumen 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>

Contoh Dijelaskan

  • Deklarasi tersebut <!DOCTYPE html>mendefinisikan bahwa dokumen ini adalah dokumen HTML5
  • Elemen <html>adalah elemen root dari halaman HTML
  • Elemen tersebut <head>berisi informasi meta tentang halaman HTML
  • Elemen <title>menentukan judul untuk halaman HTML (yang ditampilkan di bilah judul browser atau di tab halaman)
  • Elemen <body>mendefinisikan tubuh dokumen, dan merupakan wadah untuk semua konten yang terlihat, seperti judul, paragraf, gambar, hyperlink, tabel, daftar, dll.
  • Elemen <h1>mendefinisikan heading besar
  • Elemen <p>mendefinisikan paragraf

Apa itu Elemen HTML?

Elemen HTML didefinisikan oleh tag awal, beberapa konten, dan tag akhir:

< tagname > Konten ada di sini... < /tagname >

Elemen HTML adalah segalanya mulai dari tag awal hingga tag akhir:

< h1 > Judul Pertama Saya < /h1 >
< p > Paragraf pertama saya. < /p >
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

Catatan: Beberapa elemen HTML tidak memiliki konten (seperti elemen <br>). Elemen-elemen ini disebut elemen kosong. Elemen kosong tidak memiliki tag akhir!



Peramban Web

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

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

Lihat di Browser


Struktur Halaman HTML

Di bawah ini adalah visualisasi struktur halaman HTML:

<html>
<kepala>
<title>Judul halaman</title>
</head>
<tubuh>
<h1>Ini adalah judul</h1>
<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah paragraf lain.</p>
</tubuh>
</html>

Catatan: Konten di dalam bagian <body> (area putih di atas) akan ditampilkan di browser. Konten di dalam elemen <title> akan ditampilkan di bilah judul browser atau di tab halaman.


Sejarah HTML

Sejak awal World Wide Web, ada banyak versi HTML:

Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2

Tutorial ini mengikuti standar HTML5 terbaru.