Belajar HTML Kelas Ringkas

(1)

Penulis
Editor Naskah
Tata Letak
Desain Sampul
Penerbit
Website
Cetakan

:
:
:
:
:

Argi Noor Hidayat

Argi Noor Hidayat
Argi Noor Hidayat
Argi Noor Hidayat
ANH-BOOKS,
Wonogiri-Jawa Tengah. Indonesia.
: anh-books.blogspot.com
: Pertama, 8 Mei 2015

Hak Cipta 2015 pada Penulis Argi Noor Hidayat.

Dilarang keras mengutip, menjiplak, memfotocopi sebagian
atau seluruh isi buku ini serta memperjualbelikan tanpa seizin
tertulis dari Penulis Argi Noor Hidayat.
HAK CIPTA DILINDUNGI OLEH UU REPUBLIK INDONESIA
NO. 19 TAHUN 2002 PASAL 72 Ayat 1 dan 2.
Penerbit

ANH-BOOKS
Wonogiri-Jawa Tengah. Indonesia.
www.anh-books.blogspot.com
Belajar HTML Kelas Ringkas

(2)

KATA PENULIS
Assalamu alaikum.. salam sejahtera bagi kita semua,
Puji syukur kehadirat Allah SWT karena hanya dengan limpahan
rahmat dan hidayah-Nya penulis dapat menyelesaikan buku
digital pertama dengan judul Belajar HTML Kelas Ringkas.
Di dalam buku Belajar HTML Kelas Ringkas, penulis uraikan
dari pengertian HTML, sejarah HTML, fungsi HTML, jenis-jenis
HTML, tingkatan HTML dan kumpulan HTML sederhana dan
mengenal HTML5 serta penulis berikan bonus yaitu HTML widget
countdown keren. Dengan pokok bahasan tersebut penulis
berharap semoga pembaca dapat memahami seluk beluk HTML.
Ucapan terimakasih tidak lupa penulis sampaikan kepada sdr.
Muhammad Adam Hussein yang selalu membimbing penulis
dalam hal menulis dan blogging, semoga kebaikan beliau
mendapatkan balasan ganda dari Allah SWT. Tidak lupa penulis
ucapkan terimakasih kepada para pembaca yang budiman, yang
semoga selalu mengikuti rekam jejak dari buku digital penulis.
Demikian pengantar buku ini, kritik dan saran yang membangun
dari pembaca sangat penulis butuhkan demi perbaikan buku ini.
Selamat menyimak dan semoga bermanfaat.
Wonogiri, 8 Mei 2015
Penulis

Belajar HTML Kelas Ringkas

(3)

DAFTAR ISI

Kata Penulis
Daftar Isi

Halaman
3
4

Pengertian HTML
Sejarah HTML
Fungsi HTML
Jenis-jenis HTML
Tingkatan HTML
Kumpulan HTML Sederhana
Mengenal HTML5
Kesimpulan
Bonus HTML Widget CountDown Keren

5
6
7
9
11
13
14
15
16

Referensi Penulis
Tentang Penulis
Tribute Page

18
19
20

Belajar HTML Kelas Ringkas

(4)

BELAJAR HTML KELAS RINGKAS

Oleh: Argi Noor Hidayat
PENGERTIAN HTML
Menurut Wikipedia Indonesia, Hyper Text Markup Language
(HTML) adalah sebuah bahasa markah yang digunakan untuk
membuat sebuah halaman web, menampilkan berbagai
informasi di dalam sebuah penjelajah web Internet dan
pemformatan hiperteks sederhana yang ditulis dalam berkas
format ASCII agar dapat menghasilkan tampilan wujud yang
terintegerasi. Dengan kata lain, berkas yang dibuat dalam
perangkat lunak pengolah kata dan disimpan dalam format ASCII
normal sehingga menjadi halaman web dengan perintahperintah HTML.
Dokumen HTML mengandung perintah-perintah teks yang
disebut tag untuk menampilkan tulisan, gambar, warna, suara,
video, animasi serta link yang menghubungkan dengan berbagai
topik. Dengan bentuk Hypertext maka halaman Internet akan
dapat dibangun dengan cepat serta ditampilkan dengan cantik.
Dalam konsep hypertext ini, pembacaan suatu dokumen tidak
harus urut namun bisa meloncat antar topik bahkan di print
maupun dicopy ke media penyimpan lokal (hardisk). Format
hypertext juga memungkinkan pemakai mesin yang hanya bisa
mengenali teks untuk mengakses dokumen dalam bentuk teks
saja. Perbedaanya terletak pada tidak ditampilkannya gambar,
grafik, animasi, video, suara dan warna.
Belajar HTML Kelas Ringkas

(5)

Jadi, HTML adalah bahasa kode pemrograman yang menjadi

dasar terwujudnya WEB. Dengan HTML seluruh sistem komputer
yang saling berbeda dapat mengenali format-format yang
ditampilkan dalam situs-situs intermet tanpa perbedaan yang
berarti, termasuk di dalamnya penampilan multimedia (grafik,
suara dan citra video). HTML berbasis teks yang sangat
sederhana dan praktis sehingga dapat dipahami oleh berbagai
jenis komputer dalam platform sistem yang berbeda-beda.

SEJARAH HTML
Setelah membahas tentang Pengertian HTML, sekarang mari
kita ikuti pembahasan mengenai Sejarah HTML.
Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang
akan mengenali setiap elemen dari dokumen dengan suatu
tanda tertentu. IBM kemudian mengembangkan suatu jenis
bahasa yang menggabungkan teks dengan perintah-perintah
pemformatan dokumen. Bahasa ini dinamakan Markup
Language, sebuah bahasa yang menggunakan tanda-tanda
sebagai basisnya. IBM menamakan sistemnya ini sebagai
Generalized Markup Language atau GML.
Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep
tentang dokumen yang sangat baik, dan kemudian
mengeluarkan suatu publikasi (ISO 8879) yang menyatakan
markup language sebagai standar untuk pembuatan dokumendokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi
memberinya nama lain, yaitu SGML (Standard Generalized
Belajar HTML Kelas Ringkas

(6)

Markup Language). ISO dalam publikasinya meyakini bahwa

SGML akan sangat berguna untuk pemrosesan informasi teks dan
sistem-sistem perkantoran. Tetapi di luar perkiraan ISO, SGML
dan terutama subset dari SGML, yaitu HTML juga berguna untuk
menjelajahi
internet.
Khususnya
bagi
mereka
yang
menggunakan World Wide Web. Versi terakhir dari HTML saat
ini adalah HTML5.
Singkatnya, HTML dibuat oleh kolaborasi Caillau TIM dengan
Berners-lee Robert ketika mereka bekerja di CERN pada tahun
1989 (CERN adalah lembaga penelitian fisika energi tinggi di
Jenewa).

FUNGSI HTML
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan
di dunia penerbitan dan percetakan yang disebut dengan SGML
(Standard Generalized Markup Language), HTML adalah sebuah
standar yang digunakan secara luas untuk menampilkan
halaman web.
Adapun fungsi HTML secara terperinci sebagai berikut :
1. Membuat Halaman Web
HTML sebagai bahasa pemrograman memiliki fungsi
khusus yang berbentuk kode-kode yang diorganisir
sehingga terbentuk halaman web yang keren dan
menarik. Seiring perkembangan zaman HTML memang
sudah menjadi teman bagi blogger, mengapa karena
Belajar HTML Kelas Ringkas

(7)

di masa ini blogger Indonesia pun sudah mampu membuat

design template web yang sangat elegant dan berkelas
dunia. Banyak juga situs-situs pembuat template lokal
dari Republik Indonesia tercinta.
2. Menampilkan Informasi dalam Bentuk Apapun pada
Browser Internet
Fungsi selanjutnya dari HTML adalah menampilkan
informasi dalam bentuk apapun pada browser internet,
hal itu benar adanya karena salah satu keistimewaan
HTML sendiri mampu mengubah kode menjadi suatu
bentuk multimedia/ aplikasi.
3. Membuat Link Menuju Halaman Tertentu (Pranala)
Link menuju halaman tertentu atau biasa disebut pranala
dalam dunia internet memang hanya bisa dilakukan
dengan HTML. Memang banyak form yang digunakan
untuk membuat pranala, namun form tersebut juga
dibuat menggunakan HTML. Untuk lebih jelasnya
mengenai fungsi HTML pada form, silahkan baca fungsi
selanjutnya.
4. Membuat Form Interaktif
Yaps, seperti yang sebelumnya HTML memang bumbu
utama dalam membuat form interaktif yang biasanya
terpasang
pada
website/situs.
Namun
seiring
perkembangan zaman, kita tidak perlu membuat form
menggunakan HTML lagi karena sudah ada banyak situs
gratis yang menyediakan pembuatan form. Situs terbesar
Belajar HTML Kelas Ringkas

(8)

dalam pembuatan form adalah Google Drive, memang

Google sebagai perusahaan internet terbesar di seluruh
penjuru dunia tidak diragukan lagi jika dilihat dari segi
fasilitas yang diberikan kepada penggunanya.
5. Mengintegerasikan Berkas Suara dan Rekaman Gambar
Hidup
Banyak dijumpai situs yang dibubuhi musik sehingga para
pengunjung akan merasa terheran-heran. Namun saat ini
penggunaan musik pada situs dinilai menjadi kelemahan
karena akan menambah beban loading situs tersebut.
Untuk rekaman gambar hidup juga sudah merajalela
hampir di seluruh situs lokal maupun foreign, biasanya
gambar hidup digunakan sebagai advertisment/iklan.

JENIS-JENIS HTML
XHTML Basic
XHTML Basic adalah Rekomendasi kedua dalam serangkaian
spesifikasi XHTML. Jenis dokumen XHTML Basic mencakup
seperangkat minimal modul yang diperlukan untuk menjadi Host
Bahasa XHTML jenis dokumen, dan di samping itu termasuk
gambar, bentuk, tabel dasar, dan dukungan objek. Hal ini
dirancang untuk klien Web yang tidak mendukung set lengkap
fitur XHTML, misalnya, klien Web seperti ponsel, PDA, pager,
dan kotak settop.
Jenis dokumen cukup kaya untuk authoring konten. XHTML
Basic dirancang sebagai basis umum yang dapat diperpanjang.
Belajar HTML Kelas Ringkas

(9)

Sebagai contoh, sebuah modul peristiwa yang lebih generik

daripada HTML tradisional 4 peristiwa sistem bisa ditambahkan
atau bisa diperpanjang oleh modul tambahan dari XHTML
modularisasi seperti Modul Scripting. Tujuan dari XHTML Basic
adalah untuk melayani sebagai bahasa umum yang didukung
oleh berbagai jenis agen pengguna.

XHTML Modularisasi
XHTML modularisasi adalah Rekomendasi ketiga dalam
serangkaian spesifikasi XHTML.
Rekomendasi ini tidak menentukan bahasa markup tetapi
modularisasi abstrak XHTML dan implementasi abstraksi
menggunakan XML Document Type Definisi (DTD) dan (di versi
1.1) XML Schemas. modularisasi ini menyediakan sarana untuk
subsetting dan memperluas XHTML, fitur yang diperlukan untuk
memperluas jangkauan XHTML Teman ke platform muncul.
Modularisasi XHTML membuatnya lebih mudah untuk
menggabungkan dengan tag markup untuk hal-hal seperti vector
graphics, multimedia, matematika, perdagangan elektronik dan
banyak lagi. Penyedia konten akan lebih mudah untuk
menghasilkan konten untuk berbagai platform, dengan jaminan
yang lebih baik tentang bagaimana konten diberikan, dan
bahwa konten tersebut valid.

XHTML-Print
XHTML-Print adalah anggota dari keluarga XHTML Bahasa
ditetapkan oleh modularisasi XHTML. Hal ini dirancang untuk
cocok untuk pencetakan dari perangkat seluler ke printer
Belajar HTML Kelas Ringkas

(10)

rendah biaya yang mungkin tidak memiliki buffer penuh

halaman dan yang umumnya mencetak dari atas-ke-bawah dan
kiri-ke-kanan dengan kertas dalam orientasi potret. XHTMLPrint juga ditargetkan pada pencetakan dalam lingkungan di
mana tidak layak atau diinginkan untuk menginstal driver
printer khusus dan di mana beberapa variabilitas dalam format
output diterima.

TINGKATAN HTML
Tingkatan HTML yang penulis ulas merupakan tingkatan HTML
berdasarkan Versinya, berikut ulasannya:
1. HTML versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain
heading, paragraph, hypertext, list, cetak tebal dan
miring pada teks. Versi ini juga mendukung peletakan
gambar pada dokumennya tanpa memperbolehkan
meletakkan teks disekelilingnya.
2. HTML 2.0
Pada versi ini penambahan kualitas HTML terletak pada
kemampuannya untuk menampilkan suatu form pada
dokumen. Dan dengan adanya form ini, maka kita dapat
memasukkan nama, alamat, serta saran/kritik. HTML
versi 2.0 ini merupakan pionir dari adanya homepage
interaktif.
3. HTML 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru
seperti table. Versi ini yang disebut juga sebagai HTML+
tidak bertahan lama dan segera digantikan HTML ver 3.2.
Belajar HTML Kelas Ringkas

(11)

4. HTML 3.2
Penyempurnaan dari HTML versi 3.0 berada pada versi
3.2 ini, keluarnya versi ini dikarenakan adanya beberapa
kasus yang timbul pada pengembang browser yang telah
melakukan pendekatan dengan cara lain yang justru hal
tersebut menjadi popular. Maka dibakukan versi 3.2
untuk mengakomodasi praktek yang banyak digunakan
oleh pengembang browser dan diterima secara umum.
Dapat dikatakan versi 3.2 ini merupakan versi 3.2 yang
dikembangkan oleh beberapa pengembang browser
seperti Netscape dan Microsoft.
5. HTML 4.0
HTML versi 4 ini memuat banyak sekali perubahan dan
revisi dari pendahulunya. Perubahan ini terjadi di hampir
segala perintah-perintah HTML seperti table, image, link,
text meta, imagemaps, form, dan lain-lain.
6. HTML 4.01
HTML versi 4.01 menjadi rekomendasi W3C. HTML 4.01
adalah minor update, koreksi dan perbaikan bug dari
HTML 4.0.
7. HTML 5
Merupakan HTML versi terbaru sampai saat ini. HTML ini
menyuguhkan
berbagai
fasilitas
baru
sebagai
penyempurnaan
HTML
versi
sebelum-sebelumnya.

Belajar HTML Kelas Ringkas

(12)

KUMPULAN HTML SEDERHANA

1. Membuat kutipan teks
<blockquote>Masukkan teks anda di sini</blockquote>
2. Membuat teks teletype (untuk membedakan tulisan biasa
dengan kode html)
<tt>Masukkan teks anda di sini</tt>
3. Membuat teks miring
<i>Masukkan teks anda di sini</i>
4. Membuat teks tebal
<b>Masukkan teks anda di sini</b>
5. Membuat tulisan dicoret
<strike>Masukkan teks anda di sini</strike>
6. Membuat tulisan digarisbawahi
<u>Masukkan teks anda di sini</u>
7. Membuat teks ke kiri
<p style=text-align: left;>Masukkan teks anda di sini</p>
8. Membuat teks ke tengah
<p style=text-align: center;>Masukkan teks anda di sini</p>
9. Membuat teks ke kanan
<p style=text-align: right;>Masukkan teks anda di sini</p>
10. Membuat Bullet Numberring
<li>Masukkan teks anda di sini</li>
11. Membuat teks lebih besar
<big>Masukkan teks anda di sini</big>
12. Membuat teks lebih ke kecil
<small>Masukkan teks anda di sini</small>
13. Membuat teks agak ke bawah
_{Masukkan teks anda di sini}
Belajar HTML Kelas Ringkas

(13)

14. Membuat teks agak ke atas

^{Masukkan teks anda di sini}
15. Membuat kotak teks area
<textarea>Masukkan teks anda di sini</textarea>
<textarea rows=3 cols=30>textarea</textarea>
16. Membuat tulisan ke bawah (Enter)
<br />
Caranya sisipkan kode tersebut pada kode yang ingin buat
menjadi enter atau ke bawah
17. Membuat tulisan berkedip
<blink>Masukkan teks anda di sini</blink>
18. Membuat tulisan bergerak atau berjalan
<marquee>Masukkan teks anda di sini</marquee>
19. Membuat link pada tulisan atau teks
<a href=Masukkan link anda di sini>Masukkan tulisan atau teks
anda di sini</a>
20. Membuat link pada gambar
<a href=Masukkan link anda di sini><img border=0
width=Masukkan ukuran lebar gambar anda src=Masukkan
lokasi gambar anda height=Masukkan ukuran panjang atau
tinggi gambar anda/></a>

MENGENAL HTML5
HTML5 ini adalah standar baru dari HTML, yang dikembangkan
oleh World Wide Web Consortium (W3C) dan Web Hypertext
Aplikasi Teknologi Working Group (WHATWG). Sebagaimana
pendahulu sebelumnya yaitu: HTML 4.01 dan XTHML 1.1, HTML5
adalah sebuah standar untuk menstrukturkan dan menampilkan
isi pada World Wide Web. Standar ini memperkenalkan fitur
Belajar HTML Kelas Ringkas

(14)

baru seperti memutar video serta drag and drop, Sebelumnya

fitur ini bergantung pada plugins pihak ketiga di penjelajah web
seperti Adobe Flash dan Microsoft Silverlight.
Beberapa fitur yang disuguhkan HTML5 sebagai berikut:
Unsur kanvas untuk menggambar
Video dan elemen audio untuk media pemutaran
Dukungan yang lebih baik untuk penyimpanan secara
offline
Elemen konten yang lebih spesifik seperti artikel, footer,
header, nav, section
Bentuk kontrol form seperti kalender, tanggal, waktu,
email, url, search.
Nah, untuk itu ada beberapa aturan yang harus Anda pelajari
saat belajar HTML5, yaitu :
Fitur baru harus didasarkan pada HTML, CSS, DOM, dan
JavaScript
Mengurangi kebutuhan untuk plugin eksternal (seperti
Flash)
Lebih baik penanganan kesalahan
Lebih banyak penggunaakn markup untuk mengganti
scripting.
HTML5 harus independen

KESIMPULAN
Hyper Text Markup Language (HTML) adalah bahasa kode
pemrograman yang menjadi dasar terwujudnya WEB. HTML
dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert
ketika mereka bekerja di CERN pada tahun 1989.
Belajar HTML Kelas Ringkas

(15)

Kegunaan HTML antara lain untuk membuat halaman web,

membuat link pranala dan sebagainya. Sampai saat ini sudah
ada 7 versi pembaruan HTML dengan HTML5 sebagai versi
penyempurnanya melalui segudang fiturnya.

BONUS: HTML WIDGET COUNTDOWN KEREN

(HITUNG MUNDUR)
Cara pasang widget Countdown keren pada Blogger:
1. Edit HTML Kode di bawah dengan ketentuan
Merah: Ganti dengan Tanggal tujuan Anda
Hijau: Ganti dengan Event/Peristiwa tujuan Anda
2. Copy semua Kode HTML
3. Buka blogger, tata letak, add gadget, HTML/JavaScript
4. Pastekan Kode HTML tadi ke kolom Konten
5. Save/OK
KODE HTML WIDGET COUNTDOWN KEREN
-------------------------------------------------------------------------------<style type="text/css" scoped="scoped">
#tahunbaru2015 {background:black;color:#5CAAFF;fontfamily:Oswald, Arial, Sans-serif;font-size:20px;texttransform:uppercase;text-align:center;padding:10px 0;fontweight:normal;}
.teks {color:white}
</style>
<div id="tahunbaru2015">
<span id="countdown"></span>
</div>
<script type='text/javascript'>
//<![CDATA[
// set the date we're counting down to
Belajar HTML Kelas Ringkas

(16)

var target_date = new Date("May 4, 2015").getTime();

// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + " <span class=\'teks\'>hari</span> "
+ hours + " <span class=\'teks\'>jam</span> "
+ minutes + " <span class=\'teks\'>menit</span> " + seconds + "
<span class=\'teks\'>detik menuju </span>Evaluasi Nasional SMP
2015";
}, 1000);
//]]>
</script>
--------------------------------------------------------------------------------

Belajar HTML Kelas Ringkas

(17)

REFERENSI PENULIS
Tim MGMP TIK Kab Wonogiri. Funtik Untuk SMP.
Wonogiri: CV. Tekad Mandiri.
http://id.wikipedia.org/wiki/HTML (Diakses pada 6 Mei 2015)
http://mypctutorel.blogspot.com/2013/11/pengertian-danfungsi-html-hypertext.html (Diakses pada 6 Mei 2015)
https://parjo8888.wordpress.com/2011/03/30/beberapa-jenisjenis-html-jenis-jenis-html-html/ (Diakses pada 6 Mei 2015)
http://ilucx.pun.bz/jenis-jenis-html-dan-definisinya.xhtml
(Diakses pada 6 Mei 2015)
http://tomy8725.blogspot.com/2015/04/html-5.html
pada 6 Mei 2015)

(Diakses

http://inforay.awardspace.info/berita.html (Diakses pada 18

April 2015)

Belajar HTML Kelas Ringkas

(18)

TENTANG PENULIS
Argi Noor Hidayat, kelahiran Wonogiri
pada 7 Oktober 1999. Ia anak pertama
dari dua bersaudara. Peraih predikat
Siswa Berprestasi se-kab Wonogiri
pada tahun 2011.
Di bulan Mei 2015 ia mulai
minat baru sebagai Penulis
dengan
melaunching
pertamanya berjudul Belajar
Kelas Pemula.

meniti
E-book
e-book
HTML

Disamping Penulis E-book ia juga aktif dalam dunia blogger.

Sejak April 2015, ia resmi menjadi Blogger Indonesia. Dengan
semangat menulisnya, ia bertekad untuk menjadi Penulis
Republik Indonesia disamping profesi utamanya sebagai Pelajar.
Argi Noor Hidayat juga dikenal sebagai sosok yang ramah dan
homuris dikalangan sebayanya. Dalam dunia maya, ia dikenal
sebagai Konsultan Blogger Muda, Online Marketing dan SEO.
Ingin berkonsultasi? Silahkan hubungan contact person berikut:
Facebook
: Argi Noor Hidayat
Phone
: 083 865 871 704
Email
: arginoor_hidayat@yahoo.com
Site
: http://anoorhsite.blogspot.com

Belajar HTML Kelas Ringkas

(19)

TERIMAKASIH TELAH MEMBACA

OLEH:
ARGI NOOR HIDAYAT
WONOGIRI, 08 MEI 2015

Belajar HTML Kelas Ringkas

(20)