Belajar HTML Kelas Ringan

Belajar HTML Kelas Ringkas (1)


Penulis : Argi Noor Hidayat Editor Naskah : Argi Noor Hidayat Tata Letak : Argi Noor Hidayat Desain Sampul : Argi Noor Hidayat Penerbit : ANH-BOOKS, Wonogiri-Jawa Tengah. Indonesia. Website : anh-books.blogspot.com Cetakan : 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


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


DAFTAR ISI

Halaman

Kata Penulis 3

Daftar Isi 4

Pengertian HTML 5

Sejarah HTML 6

Fungsi HTML 7

Jenis-jenis HTML 9

Tingkatan HTML 11

Kumpulan HTML Sederhana 13

Mengenal HTML5 14

Kesimpulan 15

Bonus HTML Widget CountDown Keren 16

Referensi Penulis 18

Tentang Penulis 19

Tribute Page 20


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

perintah 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.


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

dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi

memberinya nama lain, yaitu SGML (Standard Generalized


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


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


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.


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


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. XHTML-

Print 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.


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.


KUMPULAN HTML SEDERHANA

1. Membuat kutipan teks

Masukkan teks anda di sini

2. Membuat teks teletype (untuk membedakan tulisan biasa

dengan kode html)


3. Membuat teks miring


4. Membuat teks tebal


5. Membuat tulisan dicoret


6. Membuat tulisan digarisbawahi


7. Membuat teks ke kiri


8. Membuat teks ke tengah


9. Membuat teks ke kanan


10. Membuat Bullet Numberring


11. Membuat teks lebih besar


12. Membuat teks lebih ke kecil


13. Membuat teks agak ke bawah



14. Membuat teks agak ke atas


15. Membuat kotak teks area


textarea

16. Membuat tulisan ke bawah (Enter)

Caranya sisipkan kode tersebut pada kode yang ingin buat

menjadi enter atau ke bawah

17. Membuat tulisan berkedip


18. Membuat tulisan bergerak atau berjalan


19. Membuat link pada tulisan atau teks

Masukkan tulisan atau teks

anda di sini

20. Membuat link pada gambar

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


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.


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

--------------------------------------------------------------------------------

#tahunbaru2015 {background:black;color:#5CAAFF;font-

family:Oswald, Arial, Sans-serif;font-size:20px;text-

transform:uppercase;text-align:center;padding:10px 0;font-

weight:normal;}

.teks {color:white}

//// set the date we're counting down to


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 + " hari "

+ hours + " jam "

+ minutes + " menit " + seconds + "

detik menuju Evaluasi Nasional SMP

2015";

}, 1000);

//]]>

--------------------------------------------------------------------------------


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-dan-fungsi-html-hypertext.html (Diakses pada 6 Mei 2015)

https://parjo8888.wordpress.com/2011/03/30/beberapa-jenis-jenis-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 (Diakses pada 6 Mei 2015)

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


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 meniti

minat baru sebagai Penulis E-book

dengan melaunching e-book

pertamanya berjudul Belajar HTML

Kelas Pemula.

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 : [email protected]

Site : http://anoorhsite.blogspot.com


TERIMAKASIH TELAH MEMBACA

OLEH:

ARGI NOOR HIDAYAT WONOGIRI, 08 MEI 2015

Documents

Belajar HTML Kelas Ringan