Educational Technologi: Oktober 2013

KATA PENGANTAR

Puji syukur Alhamdulillah penyusun panjatkan kehadirat Allah SWT yang telah memberikan nikmat-NYA, sehingga penyusun mampu menyelesaikan Makalah ini sesuai dengan waktu yang telah ditentukan. Makalah ini dibuat dalam rangka memenuhi salah satu syarat penilaian mata kuliah Teknologi Informasi dan Komunikasi. Yang meliputi nilai tugas dan nilai keaktifan.

Penyusunan makalah ini tidak berniat untuk mengubah materi yang sudah tersusun. Namun, hanya lebih pendekatan pada study banding atau membandingkan beberapa materi yang sama dari berbagai referensi yang semoga bisa memberi tambahan pada hal yang terkait dengan Tekhnologi Informasi dan Komunikasi.

Saya sebagai penyusun pastinya tidak pernah lepas dari kesalahan. Begitu pula dalam penyusunan makalah ini, yang mempunyai banyak kekurangan. Oleh karena itu, saya mohon maaf atas segala kekurangannya. Saya mengucapkan terima kasih kepada Bapak Septia Luthfi, S.Kom, M.Kom sebagai pengajar mata kuliah Teknologi Informasi dan Komunikasi yang telah membimbing dalam penyusunan makalah ini. Tidak lupa pula kepada rekan-rekan yang telah ikut berpartisipasi. Sehingga makalah ini selesai tepat pada waktunya

Penyusun

BAB I

PENDAHULUAN

A. Latar belakang

Teknologi informasi adalah suatu teknologi yang digunakan untuk mengolah data, termasuk memproses, mendapatkan, menyusun, menyimpan, memanipulasi data dalam berbagai cara untuk menghasilkan informasi yang berkualitas, yaitu informasi yang relevan, akurat dan tepat waktu, yang digunakan untuk keperluan pribadi, bisnis, dan pemerintahan dan merupakan informasi yang strategis untuk pengambilan keputusan. Secara implisit dan eksplisit IT tidak sekedar berupa teknologi komputer, tetapi juga mencakup teknologi komunikasi.

Dengan kata lain, yang disebut Teknologi Informasi adalah gabungan antara Teknologi Komputer dan Teknologi Telekomunikasi. membahas informatika pastinya sangat berhubungan dengan bahasa pemrograman. Bahasa pemrograman itu sendiri sering diistilahkan dengan bahasa komputer, adalah teknik komando atau instruksi standard untuk memerintah komputer, untuk itu bahasa pemrograman merupakan suatu alat yang sangat penting bagi programer untuk mengoprasikan komputer.

B. Rumusan Masalah

1. Sejarah dan perkembangan

2. Fitur yang ada pada HTML5?

3. Kelebihan dan kekurangan yang dimiliki HTML5?

4. Bahasa komputer dalam HTML5?

5. Bagaimana perbandingan HTML5 dengan HTML sebelumnya?

C. Tujuan

1. Mengetahui sejarah dan perkembangan HTML5

2. Mengetahui fitur yang ada pada HTML5

3. Mengetahui kelebihan kekurangan yang dimiliki HTML5 d.

4. Mengetahui cara membuat bahasa komputer dalam HTML5

D. Manfaat

Dengan dibuat makalah ini diharapkan para pembaca dapat mengetahui dan memahami pengertian dan contoh penerapan dari HTML5 dengan contoh-contoh bahasa pemogramannya, untuk nantinya bisa di aplikasikan di dunia pendidikan atau bidang yang lain.

BAB II

PEMBAHASAN

A. Perkembangan

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 lahir pada tahun 2009 yang merupakan standar baru untuk HTML, XHTML dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan situs dunia semakin berkembang.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web.

HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Saat ini ditulis kita banyak menjumpai aplikasi web yang masih menggunakan standard HTML4 namun beberapa sudah mulai migrasi ke standard web HTML5.

Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Tujuan dibuatnya HTML5 antara lain:

1. Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.

2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

3. Penanganan kesalahan yang lebih baik.

4. Lebih banyak markup untuk menggantikan scripting.

5. HTML5 merupakan perangkat mandiri.

Fitur baru dalam HTML5:

1. Unsur kanvas untuk menggambar.

2. Video dan elemen audio untuk media pemutaran.

3. Dukungan yang lebih baik untuk penyimpanan secara offline.

4. Elemen konten yang lebih spesifik, seperti artikel, footer, header, navigation, section.

5. Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.

Beberapa kelebihan yang dijanjikan pada HTML5:

1. Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.

2. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.

3. Integrasi ('inline') dengan doctype yang lebih sederhana.

4. Penulisan kode yang lebih efisien.

5. Konten yang ada di situs lebih mudah terindeks oleh search engine.

Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5.Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini

HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.

B. Fitur HTML5

HTML5 adalah generasi berikutnya dari html 4, dimana pada html 5 ini ditambahkan fitur – fitur baru yang mengedepankan penjalanan konten yang berat pada device dengan tenaga rendah yang pastinya membuat para programer lebih mudah dalam menerapkannya dan berakibat lebih user friendly dari sisi pengguna.

Pada HTML5 terdapat fitur elemen <video>, <audio> dan <canvas>, tetapi juga integrasi dari konten gambar grafis vektor (yang sebelumnya kita ketahui dengan tag <object>). Artinya, konten multi media dan grafis dalam website akan dapat ditangani dan dieksekusi dengan lebih mudah dan lebih cepat, tanpa membutuhkan plugin dan dan API tambahan. Adapun fitur yang tersedia :

1. <canvas>, memungkinkan menggambar menggunakan script kode seperti JavaScript. Dibandingkan dengan versi terdahulunya yang perlu menggunakan aplikasi tambahan untuk membuat interaksi seperti flash.

2. <audio> dan <video>, merupakan tag penanda untuk konten audio dan video. Jadi kita dapat menyisipkan konten audio dan video secara langsung, berbeda dengan generasi sebelumnya yang harus menggunakan flash untuk menyisipkan konten ini digunakan untuk menampilkan konten interaktif (plugin) atau aplikasi eksternal.

3. <section>, digunakan untuk mendefinisikan section apapun pada dokumen. Dapat dikategorikan bekerja seperti div yang memisahkan section yang berbeda.

4. <article>, mendifinisikan artikel, komentar pengguna atau sesuatau konten yang independen.

5. Local Storage, berfungsi sebagai pengganti cache sebagai media penyimpan halaman history web. memungkinkan menyimpan data cache lebih banyak pada local dibanding dengan browser biasa.

6. Web Workers, pada dasarnya membuat proses load java script yang kadang kali mengganggui dengan menjadikan proses lambat menjadi lebih cepat, shingga dapat dilakukan proses multi tasking.

7. Semantic, membuat halaman web lebih dinamis, diantaranya akan menghentikan programer dalam menggunakan tag div atau nav sebagai navigasi.

1. Doctype

HTML5 memerlukan DOCTYPE yang ditentukan untuk memastikan bahwa browser merender atau membaca halaman situs dalam mode standar. Deklarasi DOCTYPE untuk sintaks HTML dan bersifat case-sensitive, <DOCTYPE html!>. Doctypes dari versi sebelumnya dari HTML lebih panjang karena masih berbasis SGML dan karena itu diperlukan suatu referensi untuk DTD. Dengan HTML5 ini tidak lagi digunakan dan browser hanya memerlukan syntax yang lebih sederhana, <DOCTYPE html!>.

HTML5 DOCTYPE

<!DOCTYPE html>

Vesri HTML sebelumnya DOCTYPE menggunakan rerferensi DTD, seperti contoh ini:

HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. HTML5 Set Karakter

Untuk menampilkan halaman HTML dengan benar, browser harus tahu apa Character Sets (charset) yang digunakan. Pada HTML 5 charset Anda dapat menggunakan elemen <meta> dengan atribut charset yang menentukan pengkodean.

Berikut adalah contoh sederhana:

Contoh di atas dapat menggantikan pemakaian <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> meskipun sintaks tersebut masih diperbolehkan.

Contoh struktur dokumen HTML5 minimum :

<!DOCTYPE html>

<html>

<head>

</head>

<body>

...

</section>

</article>

</body>

</html>

C. Kelebihan

HTML5 adalah sebuah prosedur pembuatan tampilan web baru yang merupakan penggabungan antara CSS, HTML itu sendiri dengan Java Script. Teknologi ini mulai diluncurkan pada tahun 2009, namun sampai saat ini masih dalam tahap pengembangan. Beberapa kelebihan yang dimiliki oleh HTML5 (sebagai hipotesis awal) adalah:

1. Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script.

2. Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.

3. Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”

4. Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.

5. Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.

6. Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.

7. Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.

8. Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)

9. Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi.

10. Fitur kanvas untuk menggambar menggunakan script code

11. Fitur video dan audio untuk media pemutar file multimedia

12. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya

13. Integrasi (‘inline’) dengan doctype yang lebih sederhana

14. Penulisan kode yang lebih efisien

15. Penanagan kesalahan yang lebih baik

16. Mengurangi kebutuhan untuk plugin eksternal

17. Lebih markup untuk menggantikan scripting

Tag Baru seperti header, footer, nav, section, asidedll memungkinkan browser untuk mengakses konten dengan mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class.

D. Kekurangan

Kekurangan yang dimiliki HTML 5, saat ini HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser. Beberapa browser yang sudah mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

E. Membuat Kode HTML

Belajar HTML sebernarnya diperlukan kalau kita ingin terjun di dunia online, misalnya bisnis online karena sedikit banyak akan menuntut kemampuan kita dalam mengedit kode - kode HTML. Walaupun kita menggunakan blog engine seperti Wordpress yang mempunyai plugin - plugin yang lengkap, namun sering ditemui kita harus mengedit sidebar, menempatkan kode HTML, mengedit kode warna HTML, menempatkan tabel dan banyak kasus lainnya kita harus menguasai dasar - dasar kode atau script HTML.

Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah:

<html>

<head>

<title>Tulis Judul Anda di Sini</title>

</head>

<body>

Di sini adalah konten / isi halaman anda

</body>

</html>

Latihan 1. Belajar membuat halaman sederhana dengan kode HTML

Sebagai bahan untuk belajar HTML, sekarang buka program Notepad anda. Caranya klik " start " pilih program, cari program Notepad, jika sudah anda buka kemudian tuliskan kode - kode HTML di bawah ini :

<html>

<head>

<title>Modul Belajar HTML</title>

</head>

<body>

Modul HTML ini berisi latihan - latihan sederhana untuk beljar membuat sebuah halaman website agar dapat online di internet. Bagi anda yang masih pemula sebaiknya mengikutinya dengan memparaktekkan secara langsung agar lebih mudah dalam memahami setiap variasi kode - kode HTML.

</body>

</html>

Setelah selesai menuliskan kode - kode HTML di atas kemudian anda simpan. Caranya : klik " file " kemudian pilih " save as " tentukan lokasi penyimpanan, misalnya pada folder " latihan " di " my document " , pada "

file name " tulis nama file misalnya " latihan1.html " pada save as type isikan " all file " kemudian klik " save ".

Untuk mengetahui hasilnya pada browser, caranya sebagai berikut :

ari file " latihan1.html " yang anda simpan pada folder " latihan " di " my document " , setelah ketemu kemudian klik kanan, pilih " open with " lalu pilih browsernya misalnya " internet explorer

Latihan 2. Belajar membuat link atau tautan dengan kode HTML :

misalnya : kata yang terlihat dalam link ( ancor text ) adalah "cara membuat website"

sedangkan alamat/URL dari halaman yang dituju tersebut adalah http://edyutomo.com/internet-dan-komputer/cara-membuat-website

maka kode HTML nya adalah :

<a href="http://edyutomo.com/internet-dan-komputer/cara-membuat-website">cara membuat website</a>

Latihan 3. Belajar kode warna HTML untuk mengedit warna teks :

<font color="red">kata yang diedit</font>, ini akan mengubah warna teks menjadi merah.

Lihat contoh berikut ini :

<font color="red">Modul HTML</font> ini berisi latihan - latihan.....

Latihan 4. Kombinasi kode warna HTML, paragraf baru, ukuran huruf dan jenis huruf :

<p align="left"><font face="arial" size="6" color="red">kata yang diedit</font></p>

ini akan membuat paragraf menjadi rata kiri, dengan jenis huruf arial, ukuran 6 dan warna teks menjadi merah

Contoh : color="#ed260b"

mudah - mudahan jelas ya.

Kode HTML lainnya :

<p>isi paragraf</p> , untuk membuat paragraf baru

<br>isi kalimat</br> , untuk membuat baris baru

<b>kata/kalimat</b> , untuk membuat teks tebal

<i>kata/kalimat</i> , untuk membuat kata miring

<u>kata/kalimat</u> , untuk membuat garis bawah

Latihan 5. Belajar cara menyisipkan gambar dengan kode HTML :

Sebelum kita menyisipkan gambar, terlebih dahulu kita harus mengupload foto atau gambar untuk mendapatkan link dari gambar tersebut untuk keperluan menyisipkan gambar yang telah kita tentukan. Lihat cara upload foto atau gambar.

sebagai contoh saya telah mengupload gambar pada situs image hosting http://photobucket.com, sehingga saya mendapatkan url link gambar seperti berikut ini :

http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif

Sebagai contoh, lihat ilustrasi contoh penerapan kode HTML di bawah ini :

<p>di bawah ini adalah contoh gambar :</p>

Latihan 6. Belajar kode HTML untuk menyisipkan link pada gambar

Sebagai contoh, berdasarkan gambar di atas, kita akan menyisipkan link menuju halaman http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak, maka kode HTML yang perlu dibuat adalah sebagai berikut :

<ahref="http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak"><img src="http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif"></a>

Jika diklik gambarnya akan terbuka halaman yang dituju.

HTML5 Semantic

HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam HTML5 untuk mendukung struktur halaman yang lebih rapi. Beberapa elemen baru digunakan untuk mengurangi pemakaian tag <div>.

Elemen-elemen baru yang ditambahkan pada HTML5 adalah: Tag	Keterangan
<article>	Menspesifikasikan konten yang bersifat independen, seperti artikel, blog post, forum post, dan sejenisnya.
<aside>	Digunakan untuk sebuah subkonten. Biasanya digunakan di dalam tag <article>.
<bdi>	Untuk teks yang tidak boleh terikat pada arah teks-elemen induknya
<command>	Sebuah button, atau radiobutton, atau checkbox.
<details>	Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen.
<summary>	Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag <details>
<figure>	Untuk mengelompokkan sekumpulan section, biasanya berupa video.
<figcaption>	Berisi caption/keterangan yang ditempatkan di dalam tag <figure>
<footer>	Digunakan sebagai footer dari sebuah halaman
<header>	Digunakan sebagai header dari sebuah halaman

BAB III

PENUTUP

A. Simpulan

Dalam pembuatan website, dikenal dua komponen penting yaitu www dan HTML. Dimana www merupakan suatu protokol standar dari internet, sedangkan HTML merupakan script atau program standar yang dijalankan oleh www atau internet. Proyek HTML ini dibuat dengan menggunakan media web editor notepad.

Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan bagian tubuh (body). Pembuatan proyek web/HTML sekolah dengan menggunakan notepad ini dimulai dengan pembuatan bahasa HTML dalam notepad. Yang kemudian untuk setiap baris dalam proyek ini selalu dibuat dengan bahasa HTML tersendiri sesuai dengan apa yang akan kita buat.

DAFTAR PUSTAKA

http://pelitarezza.blogspot.com/2013/01/kelebihan-dan-kekurangan-html5.html

diakses tanggal 04 oktober 2013

http://wellysan99.blogspot.com/2013/03/kelebihan-html-5.html

diakses tanggal 04 oktober 2013

http://under-88.blogspot.com/2012/05/definisi-dan-pengertian-html5.html

diakses tanggal 04 oktober 2013

http://rvp17.blogspot.com/2013/10/perbandingan-html5-dan-html-sebelumnya.html

diakses tanggal 23 oktober 2013

http://arif-rahmans.blogspot.com/

diakses pada tanggal 22 oktober 2013

http://ti-cenatcenut.blogspot.com/2013/01/sejarah-dan-pengertian-html5.html