belajar html kelas ringan
DESCRIPTION
Belajar HTML Kelas RinganTRANSCRIPT
-
Belajar HTML Kelas Ringkas (1)
-
Belajar HTML Kelas Ringkas (2)
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
-
Belajar HTML Kelas Ringkas (3)
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 (4)
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 (5)
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.
-
Belajar HTML Kelas Ringkas (6)
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
-
Belajar HTML Kelas Ringkas (7)
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 (8)
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 (9)
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 (10)
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 (11)
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.
-
Belajar HTML Kelas Ringkas (12)
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 (13)
KUMPULAN HTML SEDERHANA
1. Membuat kutipan teks
Masukkan teks anda di sini
2. Membuat teks teletype (untuk membedakan tulisan biasa
dengan kode html)
Masukkan teks anda di sini
3. Membuat teks miring
Masukkan teks anda di sini
4. Membuat teks tebal
Masukkan teks anda di sini
5. Membuat tulisan dicoret
Masukkan teks anda di sini
6. Membuat tulisan digarisbawahi
Masukkan teks anda di sini
7. Membuat teks ke kiri
Masukkan teks anda di sini
8. Membuat teks ke tengah
Masukkan teks anda di sini
9. Membuat teks ke kanan
Masukkan teks anda di sini
10. Membuat Bullet Numberring
Masukkan teks anda di sini
11. Membuat teks lebih besar
Masukkan teks anda di sini
12. Membuat teks lebih ke kecil
Masukkan teks anda di sini
13. Membuat teks agak ke bawah
Masukkan teks anda di sini
-
Belajar HTML Kelas Ringkas (14)
14. Membuat teks agak ke atas
Masukkan teks anda di sini
15. Membuat kotak teks area
Masukkan teks anda di sini
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
Masukkan teks anda di sini
18. Membuat tulisan bergerak atau berjalan
Masukkan teks anda di sini
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
-
Belajar HTML Kelas Ringkas (15)
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 (16)
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
-
Belajar HTML Kelas Ringkas (17)
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);
//]]>
--------------------------------------------------------------------------------
-
Belajar HTML Kelas Ringkas (18)
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)
-
Belajar HTML Kelas Ringkas (19)
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
-
Belajar HTML Kelas Ringkas (20)
TERIMAKASIH TELAH MEMBACA
OLEH:
ARGI NOOR HIDAYAT WONOGIRI, 08 MEI 2015