Pengertian HTML, Versi HTML, dan Contoh Cara Membuat HTML
Dalam artikel ini kan dibahas tentang dokumen HTML dalam pembuatan website. Melalui artikel ini diharapkan mampu membuat dokumen HTML sederhana menggunakan text editor dan menampilkannya lewat browser.
Pengertian HTML, Versi HTML, dan Contoh Cara Membuat HTML - HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat dokumen halaman web, sehingga dokumen html tersebut dapat ditampilkan pada penjelajah internet (internet browser). HTML merupakan standar yang digunakan secara luas sebagai bahasa tanda untuk halaman web yang dikelola dan dikendalikan oleh W3C (World Wide Web Consortium).
Dengan HTML kita dapat melakukan hal-hal berikut ini:
Dokumen HTML
Pengertian HTML, Versi HTML, dan Contoh Cara Membuat HTML - HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat dokumen halaman web, sehingga dokumen html tersebut dapat ditampilkan pada penjelajah internet (internet browser). HTML merupakan standar yang digunakan secara luas sebagai bahasa tanda untuk halaman web yang dikelola dan dikendalikan oleh W3C (World Wide Web Consortium).
 |
| image source: usabilitygeek.com |
baca juga:Adapun versi-versi dari HTML meurut tahun diperkenalkanya adalah sebagai berikut:
- HTML 2 (22 September 1995)
- HTML 3.2 (14 Januari 1996)
- HTML 4 (8 Desember 1997)
- HTML 4.01 (24 Desember 1999)
- ISO HTML, ISO 15445:20000 (15 Mei 2000)
- HTML 5 (Januari 2008)
Dengan HTML kita dapat melakukan hal-hal berikut ini:
- Mempresentasikan text, gambar dan multimedia secara online
- Menghubungkan antar dokumen HTML (hyperlink)
- Menghubungkan isi dokumen dan isi dokumen lainya berdasarkan jangkar-jangkar yang telah didefinisikan
- Membuat form interaktif untuk pengiriman data sesuai keinginan .
Dokumen HTML
Format Dokumen HTML
Agar dokumen HTML dapat berjalan, maka dokumen HTML harus mengikuti aturan format penulisan yang diantaranya adalah sebagai berikut:
<html>
Agar dokumen HTML dapat berjalan, maka dokumen HTML harus mengikuti aturan format penulisan yang diantaranya adalah sebagai berikut:
- Dokumen HTML terdiri dari tag-tag berpasangan yang memiliki fungsi-fungsi berbeda
- Setiap tag ada yang mengandung element, atribut dan value
- Setiap dokumen HTML diawali dan diakhiri dengan tag <html>.....</html>
- Ektensi dokumen html adalah .htm atau .html
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>Isi dokumen</body>
</html>
Editor yang dapat digunakan dalam membuat dokumen HTML diantaranya adalah:
Heading dan Sub Heading
Fungsi heading dan sub heading pada HTML adalah untuk membuat judul tulisan dalam dokumen HTML.
Tag HTML yang digunkan untuk membuat heading adalah tag h dengan format penulisan heading sebagai berikut:
<hx atribut=“value”>judul</hx>
Contoh 1:
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1>Latihan heading h1</h1>
<h2>Latihan heading h2</h2>
<h3>Latihan heading h3</h3>
<h4>Latihan heading h4</h4>
<h5>Latihan heading h5</h5>
<h6>Latihan heading h6</h6>
</body>
</html>
Tampilan Hasil 1:
Contoh 2:
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1 align="left">Latihan heading left</h1>
<h2 align="center">Latihan heading center</h2>
<h3 align="right">Latihan heading right</h3>
</body>
</html>
Tampilan 2:
Membuat Garis Horisontal (Tag Hr)
Tag hr digunakan untuk membuat garis horizontal dan memiliki atribut align, size, width, noshade, color. Adapun penjelasan dari masing-masing atribut hr adalah sebagai berikut:
Contoh 3:
<html>
Editor yang dapat digunakan dalam membuat dokumen HTML diantaranya adalah:
- Notepad
- Notepad++
- Eclipse
- Netbean
- Vi
- Homesite
- Dreamweaver
- Dan lain-lain
Heading dan Sub Heading
Fungsi heading dan sub heading pada HTML adalah untuk membuat judul tulisan dalam dokumen HTML.
Tag HTML yang digunkan untuk membuat heading adalah tag h dengan format penulisan heading sebagai berikut:
<hx atribut=“value”>judul</hx>
- Dimana x adalah angka 1 s/d 6
- Dimana atribut adalah align untuk menentukan letak text
- Dimana value adalah left, center atau right
Contoh 1:
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1>Latihan heading h1</h1>
<h2>Latihan heading h2</h2>
<h3>Latihan heading h3</h3>
<h4>Latihan heading h4</h4>
<h5>Latihan heading h5</h5>
<h6>Latihan heading h6</h6>
</body>
</html>
Tampilan Hasil 1:
Latihan heading h1
Latihan heading h2
Latihan heading h3
Latihan heading h4
Latihan heading h5
Latihan heading h6
Contoh 2:
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1 align="left">Latihan heading left</h1>
<h2 align="center">Latihan heading center</h2>
<h3 align="right">Latihan heading right</h3>
</body>
</html>
Tampilan 2:
Latihan heading left
Latihan heading center
Latihan heading right
Membuat Garis Horisontal (Tag Hr)
Tag hr digunakan untuk membuat garis horizontal dan memiliki atribut align, size, width, noshade, color. Adapun penjelasan dari masing-masing atribut hr adalah sebagai berikut:
- Atribut align mempunyai value left, center, right, fungsinya untuk memposisikan dari garis horizontal yang dibuat.
- Atribut size mempunyai value angka dalam pixel, fungsinya untuk menetukan tebal dan tipisnya garis horizontal yang dibuat.
- Atribut width mempunyai value angka dalam pixel dan %, fungsinya untuk menetukan lebar dan sempitnya garis horizontal yang dibuat.
- Atribut color mempunyai value jenis warna, fungsinya untuk memberikan warna dari garis horizontal yang dibuat.
- Atribut noshade tidak memiliki value berfungsi memberikan efek tanpa bayangan
Contoh 3:
<html>
<head>
<title>Latihan HR</title>
</head>
<body>
<hr align="left" width="50%" size="5" color="red">
<hr align="center" width="100" size="5" color="#ffffff" noshade>
</body>
</html>
Tampilan 3:
Contoh 4:
<html>
<head>
<title>Latihan Font</title>
</head>
<body>
<font face="verdana" size="6" color="red">Latihan Font 1</font>
<font face="Times New Roman" size="5" color="blue">Latihan Font 2</font>
<font face="Arial" size="4" color="yelow">Latihan Font 3</font>
</body>
</html>
Tampilan 4:
Latihan Font 1 Latihan Font 2 Latihan Font 3
Tag yang memberikan penekanan pada text
Berikut ini adalah tag-tag yang berfungsi memberikan tekanan pada text pada dokumen HTML:
Contoh 5:
<html>
<head>
<title>Latihan 5</title>
</head>
<body>
Kata berikut ini akan dibuat <strong>tebal</strong>
Berikut ini adalah <u>garis bawah</u><br>
<i>Tulisan ini akan menjadi miring</i><br>
<strike>Tanda ini menujukan koreksi</strike>
</body>
</html>
Tampilan 5:
Kata berikut ini akan dibuat tebal Berikut ini adalah garis bawah
Tulisan ini akan menjadi miring
Tanda ini menujukan koreksi
Sekian artikel tentang Pengertian HTML, Versi HTML, dan Contoh Cara Membuat HTML. Semoga bermanfaat.
Tampilan 3:
Mengatur Font (Tag Font)
Tag font memiliki beberapa atribut yaitu:- Face untuk memilih jenis tipe font
- Size untuk menentukan ukuran dari font
- Color untuk menentukan warna font
Contoh 4:
<html>
<head>
<title>Latihan Font</title>
</head>
<body>
<font face="verdana" size="6" color="red">Latihan Font 1</font>
<font face="Times New Roman" size="5" color="blue">Latihan Font 2</font>
<font face="Arial" size="4" color="yelow">Latihan Font 3</font>
</body>
</html>
Tampilan 4:
Latihan Font 1 Latihan Font 2 Latihan Font 3
Tag yang memberikan penekanan pada text
Berikut ini adalah tag-tag yang berfungsi memberikan tekanan pada text pada dokumen HTML:
- <b>....</b> atau <strong>...</strong> untuk menebalkan teks
- <u>....</u> untuk memberikan garis bawah
- <i>...</i> untuk cetak miring
- <strike>...</strike> untuk coret teks
- <small>...</small> untuk membuat kecil ukuraan font
- <sub>....<sub> untuk cetak bawah
- <sup>....</sup> untuk cetek atas
Contoh 5:
<html>
<head>
<title>Latihan 5</title>
</head>
<body>
Kata berikut ini akan dibuat <strong>tebal</strong>
Berikut ini adalah <u>garis bawah</u><br>
<i>Tulisan ini akan menjadi miring</i><br>
<strike>Tanda ini menujukan koreksi</strike>
</body>
</html>
Tampilan 5:
Kata berikut ini akan dibuat tebal Berikut ini adalah garis bawah
Tulisan ini akan menjadi miring
Sekian artikel tentang Pengertian HTML, Versi HTML, dan Contoh Cara Membuat HTML. Semoga bermanfaat.
