Modul 02. Konsep Dasar HTML. Belajar HTML merupakan proses pertama yang umumnya dilakukan oleh para web programer.

(1)

Rika Febriana, SKom, MMSI Page 1 Modul 02. Konsep Dasar HTML

Belajar HTML merupakan proses pertama yang umumnya dilakukan oleh para web programer.

A. Pengertian HTML

Sebuah bahasa pemrograman yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi dan dapat juga digunakan sebagai link-link menuju halaman web yang lain dengan kode tertentu.

Pengertian HTML menurut para ahli :

 Menurut Sibero (2013:19) “HyperText Markup Language atau HTML adalah bahasa yang digunakan pada dokumen web sebagai bahasa untuk pertukaran dokumen web”.

 Menurut Arief (2011:23) “HTML atau HyperText Markup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web”.

 Menurut Suyanto (2007:83) ”HTML itu adalah bahasa yang digunakan untuk menulis halaman web, biasanya menggunakan extensi .htm, .html atau .shtml”.

 Menurut Nugroho (2013:5) “HTML adalah kependekan dari (HyperText Markup Language), merupakan sebuah bahasa Scripting yang berguna untuk menuliskan halaman Web”.

Dari beberapa pendapat diatas dapat disimpulkan bahwa HTML (HyperText Markup Language) adalah salah satu format bahasa Scripting yang digunakan untuk meneyebarkan informasi, pembuatan dokumen dan aplikasi yang berjalan dihalaman web .

B. Sejarah HTML

Pada tahun 1980 ketika IBM berniat membuat bahasa kode untuk menggabungkan teks dengan perintah pemformatan agar mengenali elemen dokumen. Bahasa yang menggunakan tanda-tanda ini dinamakan markup language, sedangkan IBM memberinya nama Generalized Markup Language (GML).

(2)

Rika Febriana, SKom, MMSI Page 2 Pada tahun 1980 ISO mengeluarkan standarisasi bahasa markup berdasarkan GML dengan nama Standard Generalized Markup Language (SGML). Baha SGML ini kemudian banyak digunakan di dunia penerbitan dan percetakan.

Subset dari SGML ini antara lain :

 XML (eXtensible Markup Language)

 SMIL (Synchronized Multimedia Integration Language)

 MathML(Mathematical Markup Language)

 CML(Chemical Markup Language)

Tahun 1989 Caillau Tim bekerja sama dengan Barners Lee Robert ketika mereka bekerja di CERN sebuah lembaga penelitian isika energy tinggi di jenewa, mencoba mengembangkan SGML. Dari merekalah lahit HTML (Hypertext Markup Language) yang digunakan untuk membuat halaman website

HTML dipopulerkan pertama kali oleh browser Mozaic. Sejak tahun 1990, bahasa pemformatan ini mengalami perkembangan yang sangat pesat. Pada November 1995 IETF (Internet Engineering Task Force) merilis versi HTML 2.0 yang merupakan penyempurnaan dari HTML+ (1993) yang menyusul kemudian versi 3.0 di tahun yang sama.

Tahun 1996 World Wide Web Consortium (W3C) turut mengembangkan HTML untuk meluncurkan versi 3.2. Kemudian Januari 1997 dirilis secara resmi versi HTML 3.2. Sejak saat itu, HTML digunakan sebagai bahasa standar internet yang dikendalikan kegunaannya oleh W3C. 18 Desember 1997 dirilis versi HTML 4.0 kemudian 24 April 1998 dirilis versi HTML 4.01

26 janurai 2000 : XHTML 1.0 dirilis dari rumusan HTML 4.01 dalam XML. XHTML adalah standar baru untuk HTML yang bertujuan :

 Memungkinkan sebuah dokumen web dapat dibaca oleh divice baru seperti PDA, ponsel dll

31 Mei 2001 XHTML 1.1 dilanjutkan dengan versi 1.2 yang direkomendasikan W3C

(3)

Rika Febriana, SKom, MMSI Page 3 Tahun 2002 – 2006 dirilis versi XHTML 2.0 dan minornya. Pada 22 Januari 2008 W3C merilis versi HTML5. HTML5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang tepat tentang bagaimana untuk menangani semua elemen HTML dan bagaimana memulihkan dari kesalahan.

Pada tahun 2014, merupakan waktu dimana HTML mengalami upgrade yang cukup signifikan dan terdapat fitur semantic untuk memudahkan pengembang website dalam menyusun kode dan memberitahukan makna dari konten tersebut, sebagai contoh <article>, <footer>, dan <header>.

C. Konsep Dasar HTML

D. Mengenal Tag-tag HTML

Tag HTML merupakan tag dasar yang mendefinisikan bahwa dokumen adalah dokumen html. Tag ini merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen html. Aturan dalam menuliskan Tag-tag HTML yaitu :

 Tag ditulis dengan format diawali tanda < dan diakhiri tanda >, seperti <HTML>

 Tidak boleh ada spasi setelah tanda <. Contoh : <TITLE> tidak boleh dituliskan dengan < TITLE>

(4)

Rika Febriana, SKom, MMSI Page 4

 Tag boleh ditulis dengan huruf kecil, huruf capital, ataupun kombinasi keduanya.

Tag HTML tidak case sensitive. Ini artinya <html> sama dengan <HTML>

 Tag HTML secara normal selalu berpasangan misal (<i>...</i>)

 Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir.

 Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan.

Misalnya :

<b><I>..Tebal dan Miring..</I></b>

Untuk menampilkan teks dihalaman web, dengan mengetikkan teks dalam tag

<BODY>…</BODY>, dan untuk mengatur peletakan teks, ada beberapa Tag yang digunakan antara lain :

Nama Tag Basic Keterangan / Kegunaan

<!DOCTYPE> Tag untuk menentukan tipe dokumen

<html> Tag untuk membuat sebuah dokumen HTML

<title> Tag untuk membuat judul dari sebuah halaman

<body> Tag untuk membuat tubuh dari sebuah halaman

<h1> to <h6> Tag untuk membuat heading

<p> Tag untuk membuat paragraf

<br> Memasukan satu baris putus

<hr> Tag untuk membuat perubahan dasar kata didalam isi

<!–…–> Tag untuk membuat komentar Formatting

<acronym> Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5)

<abbr> Tag untuk membuat sebuah singkatan

<address> Tag untuk membuat kontak alamat

<b> Tag untuk membuat huruf bercetak tebal

<bdi> Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)

<bdo> Mengganti arah teks

<big> Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)

<blockquote> Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain

<center> Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport

(5)

Rika Febriana, SKom, MMSI Page 5 lagi di HTML5)

<cite> Tag untuk membuat judul karya

<code> Tag untuk membuat potongan kode komputer di antara text

<del> Tag untuk membuat teks yang telah dihapus dari dokumen

<dfn> Tag untuk membuat sebuah istilah definisi

<em> Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5)

<font> Tag untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi di HTML5)

<i> Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood

<ins> Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen

<kbd> Tag untuk membuat input keyboard

<mark> Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)

<meter> Tag untuk membuat pengukuran skalar

<pre> Tag untuk membuat teks terformat

<progress> Memperlihatkan kemajuan tugas (tag baru HTML5)

<q> Tag untuk membuat kutipan pendek

<rp> Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5)

<rt> Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur)

<ruby> Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5)

<s> Tag untuk membuat teks yang tidak lagi benar

<samp> Tag untuk membuat contoh keluaran dari program komputer

<small> Tag untuk membuat teks kecil

<strike> Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5)

<strong> Tag untuk membuat teks penting

<sub> Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)

<sup> Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)

<time> Tag untuk membuat tanggal / waktu (tag baru HTML5)

<tt> Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)

<u> Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya

<var> Tag untuk membuat sebuah variabel

<wbr> Tag untuk membuat kemungkinan garis-putus Forms

<form> Tag untuk membuat sebuah form HTML untuk input pengguna

<input> Tag untuk membuat sebuah kontrol input

(6)

<textarea> Tag untuk membuat sebuah kontrol input multibaris (text area)

<button> Tag untuk membuat sebuah tombol yang dapat diklik

<select> Tag untuk membuat sebuah daftar drop-down

<optgroup> Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down

<option> Tag untuk membuat pilihan dalam daftar drop-down

<label> Tag untuk membuat sebuah label untuk sebuah elemen <input>

<fieldset> Grup unsur terkait dalam bentuk

<legend> Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, <

figure>, atau <details>

<datalist> Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)

<keygen> Tag untuk membuat key-pair generator kolom input (tag baru HTML5)

<output> Tag untuk membuat hasil penghitungan (tag baru HTML5) Frames

<frame> Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5)

<frameset> Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5)

<noframes> Tag untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5)

<img> Tag untuk membuat gambar

<map> Tag untuk membuat gambar-peta

<area> Tag untuk membuat area dalam gambar-peta

<canvas> Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5)

<figcaption> Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)

<figure> Menentukan konten mandiri (tag baru HTML5) Audio/Video

<audio> Tag untuk membuat isi suara (tag baru HTML5)

<source> Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5)

<track> Tag untuk membuat trek teks untuk elemen media (<video> dan

<audio>) (tag baru HTML5)

<video> Tag untuk membuat sebuah video atau film (tag baru HTML5) Links

<a> Tag untuk membuat hyperlink

<nav> Tag untuk membuat navigasi link (tag baru HTML5) Lists

<ul> Tag untuk membuat daftar dengan selain nomor

(7)

<ol> Tag untuk membuat daftar dengan nomor

<li> Tag untuk membuat sebuah item daftar

<dir> Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5)

<dl> Tag untuk membuat sebuah daftar definisi

<dt> Tag untuk membuat istilah (item) dalam daftar definisi

<dd> Defines a description of an item in a definition list

<menu> Tag untuk membuat deskripsi dari item dalam daftar definisi

<command> Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag baru HTML5)

Tables

<table> Tag untuk membuat tabel

<caption> Tag untuk membuat sebuah caption tabel

<th> Tag untuk membuat sebuah sel header tabel

<tr> Tag untuk membuat baris dalam sebuah tabel

<td> Tag untuk membuat sel dalam sebuah tabel

<thead> Mengelompokan isi header dalam sebuah tabel

<tbody> Mengelompokanisi tubuh dalam sebuah tabel

<tfoot> Mengelompokan isi footer dalam sebuah tabel

<col> Menentukan properti kolom untuk setiap kolom dalam elemen

<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat

Style/Sections

<div> Tag untuk membuat sebuah bagian dalam dokumen

<span> Tag untuk membuat sebuah bagian dalam dokumen

<header> Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)

<footer> Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)

<hgroup> Pengelompokan elemen heading (<h1> sampai <h6>) (tag baru HTML5)

<section> Tag untuk membuat bagian dalam dokumen (tag baru HTML5)

<article> Tag untuk membuat sebuah artikel (tag baru HTML5)

<aside> Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5)

<details> Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5)

<dialog> Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5)

<summary> Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5)

Meta Info

<head> Tag untuk membuat informasi tentang dokumen

(8)

<base> Menentukan URL dasar / target untuk semua URL relatif dalam dokumen

<basefont> Menentukan standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5)

Programming

<applet> Tag untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di HTML5)

<param> Tag untuk membuat sebuah parameter untuk objek

E. Kelebihan dan kekurangan HTML

Kelebihan-kelebihan yang dimiliki HTML

1. html merupakan bahasa yang bersifat cross-platform (bisa digunakan dibanyak platform) seperti: Linux, macOS, Windows, da lainnya. Karena HTML sendiri memiliki karakter ASCII, sehingga cukup ditulis dalam text editor,

2. html juga bersifat open-source (gratis),

3. merupakan bahasa markup yang rapih dan juga konsisten,

4. tidak memerlukan kopiler sehingga dijalankan secar alami disetiap web browser,

5. html sudah terintegrasi dengan bahasa lain seperti: Node.js, Php, Backend, Active Server Pages, VBScript, Tcl, Perl dan lainnya. Dengan begitu akan memperbagus dan juga memepercantik halaman web,

standar web resmi oleh world wide web consortium (W3C),

6. bisa menyisipkan gambar, animasi berupa java applet, hyperlink, dan banyak lagi.

Kekurangan-kekurangan yang dimiliki HTML

1. halaman yang dihasilkan statis, untuk itu jika kita ingin membuat halaman web yang dinami kita memerlukan

2. pemrograman lain seperti: Javascript, VBScript dan lainnya, 3. kurang cepat untuk fitur-fitur baru di beberapa browser, 4. memiliki banyak tag yang harus dipelajari.

(9)

Rika Febriana, SKom, MMSI Page 9 5. halaman tidak interkaktif, untuk itu kita perlu pemrograman lain seperti: Perl atau Tcl.

6. Perilaku web browser dalam membaca document html susah diprediksi, contohnya browser lama yang tidak bisa merender tag-tag html yang baru.

Dalam penulisan dokumen HTML dapat digunakan :

1. Text editor:

a. Notepad b. Pspad c. Notepad++

d. dll

2. Web rowser a. Mozilla firefox b. Google chrome c. Opera

d. Internet explorer

F. Format Dokumen HTML

Struktur dasar dokumen HTML adalah sebagai berikut:

<hmtl>

<head>

<title> Judul Halaman Web </title>

</head>

<body>

Isi atau konten halaman web </body>

<html>

Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:

a. Tag

Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body>

adalah tag dengan nama body. Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini

(10)

Rika Febriana, SKom, MMSI Page 10 adalah tag penutup isi dokumen HTML.

b. Element

Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML. Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML </title> ini adalah tag penutup judul

dokumen HTML. Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.

Contoh penulisan tag-tag yang benar :

<p>

<b>

...

</b>

</p>

c. Attribute

Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai.

Penulisannya adalah sebagai berikut:

<TAG>

nama-attr="nilai-attr"

...

</TAG>

Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk

membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">

(11)

Rika Febriana, SKom, MMSI Page 11 Latihan 1 :

Ayo kita mencoba menjalankan html di browser. Adapun tahapannya : 1. Buka Notepad ( All Programs Accessories Notepad) 2. Ketik sintaks ini di notepad :

Note : DOCTYPE menandakan Documen Type atau tipe dokumen dalam hal ini html

3. Simpan file notepad dengan nama latihan1.htm

 Pilih menu file  Save As

 Beri nama latihan1.html

 Pada bagian Save As type pilih All Files(*.*) lalu klik tombol save

4. Klik dua kali file HTML yang telah dibuat ( Klik dan Drag ke Web Browser boleh menggunakan internet explorer/ google chrome / firefox). Maka akan muncul tampilan sebagai berikut

(12)

Rika Febriana, SKom, MMSI Page 12 Latihan 2 :

Buatlah Nama File : contoh1.html

<html>

<head>

<title>Latihan1-1</title>

</head>

<body>

Belajar bahasa pemrograman web gampang, kok :) </body>

</html>

Latihan 3 :

Buatlah Nama File: contoh2.html

<html>

<head>

<title>Latihan1-2</title>

</head>

<body text="red">

Belajar bahasa pemrograman web gampang, kok:) </body>

</html>