Translate

Dasar Dasar HTML

Contoh HTML

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Kode HTML di atas jika ditampilkan dijendela browser akan tampak seperti Gambar 001

Contoh Dijelaskan

  • Deklarasi DOCTYPE mendefinisikan jenis dokumen
  • Teks antara <html> dan </ html> menjelaskan halaman web
  • Teks antara <body> dan </ body> adalah isi halaman yang terlihat
  • Teks antara <h1> dan </ h1> ditampilkan sebagai judul
  • Teks antara <p> dan </ p> ditampilkan sebagai sebuah paragraf

 Deklarasi DOCTYPE adalah untuk HTML5. <DOCTYPE html!>

Apa itu HTML?

HTML adalah bahasa untuk mendeskripsikan halaman web.
  • HTML singkatan H yper T ext M arkup L anguage
  • HTML adalah markup language
  • Sebuah bahasa markup adalah seperangkat markup tag
  • Tag menjelaskan isi dokumen
  • Dokumen HTML berisi HTML tag dan polos teks
  • Dokumen HTML juga disebut halaman web

HTML Tag

HTML markup tag biasanya disebut tag HTML
  • Tag HTML adalah kata kunci (nama tag) dikelilingi oleh kurung sudut seperti <html>
  • Tag HTML biasanya datang berpasangan seperti <b> dan </ b>
  • Tag pertama dalam pasangan adalah dengan tag awal, tag kedua adalah tag akhir
  • Tag akhir ditulis seperti tag awal, dengan garis miring sebelum nama tag
  • Mulai dan tag akhir juga disebut tag pembuka dan tag penutup
<tagname> konten </ tagname>

Elemen HTML

"HTML tag" dan "HTML elemen" sering digunakan untuk menggambarkan hal yang sama.
Tapi tegasnya, sebuah elemen HTML adalah segalanya antara tag awal dan tag akhir, termasuk tag:
Elemen HTML:
<p> Ini adalah sebuah paragraf. </ p>

Web Browser

Tujuan dari web browser (seperti Google Chrome, Internet Explorer, Firefox, Safari) adalah untuk membaca dokumen HTML dan menampilkannya sebagai halaman web. Browser tidak menampilkan tag HTML, tetapi menggunakan tag untuk menafsirkan isi halaman:
Browser
Gambar 001

Halaman HTML Struktur

Di bawah ini adalah visualisasi dari sebuah struktur halaman HTML:
<html>
<body>
<h1> Ini sebuah Pos </ h1>
<p> Ini adalah sebuah paragraf. </ p>
<p> ini adalah ayat yang lain. </ p>
</ Body>
</ Html> 
 
 
Ada beberapa Versi HTML 
Versi Tahun
HTML      1.991
HTML +      1.993
HTML 2.0      1.995
HTML 3.2      1.997
HTML 4.01      1.999
XHTML 1.0           2.000
HTML5      2.012
Xhtml5      2.013

The <DOCTYPE!> Deklarasi

The <DOCTYPE!> Deklarasi membantu browser untuk menampilkan halaman web dengan benar.
Ada berbagai dokumen di web, dan browser hanya dapat menampilkan halaman HTML 100% benar jika ia tahu jenis dan versi HTML yang digunakan.

Deklarasi Umum

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

DTD ini berisi semua elemen HTML dan atribut, tapi TIDAK TERMASUK presentasional elemen atau usang (seperti font). Framesets tidak diperbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transisi

DTD ini berisi semua elemen HTML dan atribut, TERMASUK elemen presentasional (seperti font). Framesets tidak diperbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Ini sama dengan DTD HTML 4.01 Transitional, namun memungkinkan penggunaan Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML Strict 1.0

DTD ini berisi semua elemen HTML dan atribut, tapi TIDAK TERMASUK presentasional elemen atau usang (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transisional 1.0

DTD ini berisi semua elemen HTML dan atribut, TERMASUK elemen presentasional (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

Ini sama dengan DTD XHTML 1.0 Transitional, namun memungkinkan penggunaan Frameset.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

Ini sama dengan DTD XHTML 1.0 Strict, tetapi memungkinkan Anda untuk menambahkan modul (misalnya untuk memberikan dukungan ruby ​​untuk bahasa Asia Timur).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 Sumber


 
Label:
Copyright © 2012 Naimatulmarwa | Naima Design - Moch. Hidayat, Design Architect