Mohamad Mustakim: MAKALAH HTML5

MAKALAH

PENGENALAN PROGRAM HTML5

Disusun Oleh:

Nama :MOHAMAD MUSTAKIM

NIM :2114R0851

Jurusan :TEKNIK INFORMATIKA

Guru Pembimbing :Septia Lutfi S,COM.M,COM

KATA PENGANTAR

Puji dan syukur saya panjatkan kehadirat Tuhan Yang Maha Esa yang telah memberikan rahmat dan karunia-Nya kepada saya, sehingga saya dapat menyelesaikan makalah Teknologi Informasi dan Komunikasi ini dengan judul “Pengenalan program HTML5 dalam pembelajaran ”. Makalah ini disusun dalam rangka memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi . Terimakasih sebesar-besarnya

Saya menyadari bahwa dalam menyusun makalah ini masih jauh dari sempurna, untuk itu saya sangat mengharapkan kritik dan saran yang sifatnya membangun guna sempurnanya makalah ini. Saya berharap semoga makalah ini dapat bermanfaat bagi saya khususnya dan bagi pembaca umumnya.

DAFTAR ISI

Cover...........................................................................................................

Kata Pengantar..........................................................................................

Daftar Isi ....................................................................................................

BAB I PENDAHULUANA.

   Latar Belakang ........................................................................................
B.     Rumusan Masalah...............................................................................
C.     Tujuan Penulisan.................................................................................
D.    Manfaat Penulisa.................................................................................

BAB II PEMBAHASAN1.

A. Pengertian HTML5...............................................................................                                                                             B. Sejarah HTML5.......................................................................................................
C. Dasar-dasar HTML5............................................................................                                                                 D.    Kelebihan HTML5.......................................................................................................
E. Kelemahan HTML5 .............................................................................
F.   Fugsi HTML5 ......................................................................................
G. Karakteristik .......................................................................................                             H. Bahasa Pemorgaman HTML5.......................................................................................................
I. Struktr HTML5......................................................................................

BAB III PENUTUPA.

Kesimpulan................................................................................................... Saran......................................................................................................... Daftar Pustaka.........................................................................................

BAB I

PENDAHULUAN

A. Latar Belakang

Perkembangan dunia informatika memang selalu mengalami peningkatanyang sangat pesat.

Hal ini terbukti dengan adanya penggunaan internet di berbagaibidang. Tidak hanya di kalangan instansi-instansi saja yang menggunakannya,

orang awam pun bebas mengaksesnya, karena dengan adanya internet dapat memudahkan pekerjaan mereka. Mengingat pentingnya dunia internet, para programmer berusaha membuat dan mendesain program - program dan aplikasi yang dibutuhkan saat melakukan browsing internet. Hal inilah yang melatarbelakangi penulis menyusun makalah ini. Namun dari sekian pemrograman yang ada, yang akan dibahas pada makalah ini adalah mengenai pemrograman HTML. Pada makalah ini akan dijelaskan langkah -langkah membuat dokumen HTML yang baik.

B. RUMUSAN MASALAH

1. Apa Pengertian HTML5 ?

2. Bagaimana Sejarah HTML5 ?

3. Dasar-dasar apa saja pada HTML5 ?

4. Apa saja Kelebihan dan mafaat pada HTML5 ?

5. Apa saja Kelemahan pada HTML5 ?

6. Apa Fugsi pada HTML5 ?

7. Bagaimana Karakteristik HTML5 ?

8. Bagaimana bahasa pemorgaman HTML5 ?

9. Apa struktur pada HTML5 ?

C. TUJUAN

a) Untuk mengetahui pengertian HTML5

b) Untuk mengetahui sejarah HTML5

c) Untuk mengetahui dasar-dasar HTML5

d) Untuk mengetahui apa saja kelebihan

e) Untuk mengetahui kelemahan

g) Untuk mengetahui karakteristik HTML5

BAB II

PEMBAHASAN

A. Pengertian HTML (Hypertext Mark up Language)

HTML (Hypertext Mark up Language) yaitu suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program. HTML atau HyperText Markup Language merupakan protokol yang digunakan untuk mentransfer data atau dokumen dari web server ke dalam browser (Internet Explorer atau Netscape Navigator).

Dari pengertian HTML apabila di jabarkan berdasarkan kata-kata penyusunannya HTML dapat diartikan lebih dalam lagi menjadi :

1. Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

2. Markup

Pada pengertiannya disini markup menunjukan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada WWW.

3. Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa intruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Pada awalnya HTML dikembangkan sebagi subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana dari pada SGML yang lebih di tekankan pada format dokumen yang berorientasi pada aplikasi.

B. SEJARAH HTML5

Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0. 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." HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuahPenjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML.(Wikipedia). Dengan HTML kita dapat mengitegrasikan gambar dengan tulisan, mengintegrasikan berkas suara dan rekaman gambar hidup, membuat form interaktif, dan lain-lain. Perkembangan teknologi pembutan sebuah website sekarang ini, berkat pengembangan dari HTML. Pada awal kemunculan html, tampilan website masih terlihat kaku, terdiri dari teks dan gambar pada dokumen tanpa memperbolehkan wrapping. Pada versi html 2.0, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapatmemasukkan nama, alamat, serta saran/kritik. Selanjutnya, terus berkembang html 3.0, html 4.0, sampai yang sekarang masih dalam tahap pengembangan html 5.0.

CSS level 1 mendukung pengaturan tampilan dalam hal:

· Font (jenis, ketebalan),

· Warna teks, latar belakang, dan elemen lainnya,

· Text attributes, misalnya spasi antar baris, kata, dan huruf,

· Posisi text, gambar, tabel, dan elemen lainnya,

· Marjin, border, dan padding.

Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan standard CSS2 (CSS level 2) – yang menjadi standard hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada International accesibility and capability khususnya media-specific CSS. Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3 dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.

Menurut Wikipedia, Cascading Style Sheets (CSS) adalah:

“bahasa pemrograman untuk mengatur tampilan suatu website atau blog”

Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS merupakan kelebihan tersendiri. Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepad untuk menciptakan script CSS sendiri.

Manfaat dari CSS:

v Kode HTML menjadi lebih sederhana dan lebih mudah diatur,

v Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,

v Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,

v Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia XHTML,

v Digunakan dalam hampir semua web browser.

C. Dasar-Dasar HTML

Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.

Mendesain HTML dapat dilakukan dengan dua cara:

1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.

2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.

Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML.

Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.

D. KELEBIHAN DAN MANFAAT HTML5

a) Dukungan suara dan video

Pengembang web bekerja tanpa lelah untuk membuat software yang streaming video, animasi layar dan mengintegrasikan dengan situs web Jaringan pribadi seperti Facebook dan Twitter. Dalam pencarian mereka untuk membuat aplikasi gambar dan video mereka harus belajar dan menerapkan alat-alat, termasuk Silverlight dan Flex atau tool JavaScript lainnya. Namun, ini meningkatkan waktu dan kompleksitas untuk mengembangkan Aplikasi Web umum dan perangkat lunak. Dengan dukungan HTML, audio dan embedding video mungkin, serta grafik dan gambar berkualitas.

b) Peningkatan membentuk elemen objek

c) Format HTML5 juga menawarkan bentuk ditingkatkan untuk mencari kotak, input teks dan bidang lain yang relevan dan menawarkan validasi data yang mudah dan interaksi dengan elemen halaman serta perbaikan yang berarti lainnya.

d) Geo-Lokasi

HTML5 mendukung fitur geo-lokasi canggih, terlepas dari apakah yang diberikan oleh GPS atau tidak, secara langsung diterapkan pada semua browser HTML5 kompatibel. Lintang Google pada iPhone adalah contoh terbaik dari Geo-lokasi. Aplikasi geo-lokasi benar-benar platform independen.

e) User-friendly interface

Format HTML5 juga fitur baru dan lebih baik Database API umum digunakan secara lokal. Sederhananya, ia menyediakan penyimpanan yang jelas database yang memberikan pengembang kesempatan untuk menyimpan atau menyimpan data terstruktur. Database ini digunakan ketika Anda ingin menyimpan belanja produk keranjang untuk situs belanja secara online.

HTML5 tidak dapat diandalkan dalam hal format karena web browser yang berbeda karena mereka tidak mendukung salah satu format tunggal.

Beberapa kelebihan yang dimiliki oleh HTML5 (sebagai hipotesis awal) adalah:

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.
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.
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”
Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.
Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.
Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.
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)
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.

Selain kelebihan diatas, terdapat pula kelebihan HTML5 yang lain, yaitu :

Dukungan yang lebih baik untuk penyimpanan secara offline
Unsur kanvas untuk menggambar
Video dan elemen audio untuk media pemutaran file multimedia
Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search
Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
Integrasi ('inline') dengan doctype yang lebih sederhana.
Penulisan kode yang lebih efisien.
Konten yang ada di situs lebih mudah terindeks oleh search engine.
HTML5 merupakan perangkat mandiri
Penanagan kesalahan yang lebih baik
Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
Lebih markup untuk menggantikan scripting

Adapun kelebihan yang paling menonjol dari HTML 5 adalah kemudahan akses yang lebih baik. 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. Dengan tag html 5 yang baru, browser mampu menjelajah dokumen HTML dengan lebih baik lagi. Selain itu dukungan yang lebih baik terhadap video dan audio. Beberapa Peramban yang sudah mendukung HTML 5 yaitu Safari, Chrome, Firefox, dan Opera.

. e

E. KELEMAHAN HTML5

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.

Selain kelemahan diatas, ada pula kelemahan HTML5 lainnya yaitu:

Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini hanya support untuk browser modern/terbaru
Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada bisa saja berubah
Fitur keamanan yang ditawarkan HTML5 masih terbatas

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isidari 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. Dikarenakan HTML5 masih dalam perkembangan, mungkin terdapat kekurangan yang secara teknis saja yang ada pada HTML5, salah satunya yaitu tidak semua browser mendukung HTML5, serta yang masih diperdebatkan dalam pengembangan HTML 5:

ü Makna semantik beberapa elemen presentasioal.

ü Fitur aksesibilitasnya. Seperti atribut alt dan summary.

Selain itu, pada HTML5 terdapat Aturan baru saat melakukan parsing berorientasi pada towards dan kompatibilitas, tidak berbasis pada SGML. Hal tersebut memberikan aturan detail untuk meleksikalkan dan memparsing sebagai persyaratan agar berbagai peramban web tetap memberikan hasil yang sama saat terjadi kesalahan sintaks.

berikut adalah beberapa kekurangan atau kelemahan pada HTML5 yang lainnya:

Ø Masalah keamanan pada HTML5

Bagi pengguna yang mengerti pemograman dan sejenisnya, peluang untuk mendobrak aplikasi HTML5 jauh lebih mudah dibandingkan aplikasi native. Misalnya saja, aplikasi Angry Bird berbasis HTML5 dapat dengan mudah di-hack untuk membuka semua level setelah beberapa jam di-launching.

Ø HTML5 belum tentu bisa dijalankan di semua perangkat.

Walaupun dikatakan write once run everywhere, HTML5 tidak sepenuhnya bisa dijalankan di mana-mana. Salah satu akibatnya adalah dukungan browser sendiri yang belum tentu mendukung semua fitur dari HTML5, apalagi W3C selaku badan yang membuat standar HTML5 menyatakan standar HTML5 mungkin baru akan rampung 2014.

Ø HTML5 masih menstranfer data dari server

meskipun HTML5 dapat berjalan dengan baik di perangkat mobile yang tealah ada saat ini, namun kelemahan yang ada pada HTML5 yaitu bahwa HTML5 masih harus transfer data dari server ke perangkat tangan Anda dibandingkan dengan native app.

Ø HTML5 tidak efisien.

HTML5 dapat dikatakan tidak efisien dikarenakan developer berbasis Web HTML5, dia harus memikirkan berbagai kemungkinan yang pada ujungnya sehingga harus mengorbankan efisiensi.

Ø kemampuan HTML5 lebih terbatas

kemampuan HTML5 lebih terbatas, hal ini dimungkinkan karena sampai saat ini HTML5 masih dalam perkembangan dan belum, rampung maka banyak akses yang tidak dapat dilakukan oleh HTML5 seperti banyaknya video yang belom support pada versi HTML5. HTML5 Hanya berfungsi pada browser yang sudah kompatibel.

F. Fungsi HTML

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu :

· Membuat halaman web.

· Menampilkan berbagai informasi di dalam sebuah browser Internet.

· Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

· Membentuk tata letak dokumen, dalam hal ini menentukan jenis huruf, gambar, dan komponen dokumen lainnya.

· Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa komputer yang termasuk dalam katagori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file standar ASCII yang berisi kode-kode untuk mengatur dokumen.

· Menentukan ukuran dan alur tulisan.

· Mengintegerasikan gambar dengan tulisan.

· Membuat Pranala.

· Mengintegerasikan berkas suara dan rekaman gambar hidup.

· Membuat form interaktif.

· Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

· Kita dapat menampilkan tulisan dalam bentuk cetakan tebal

· Kita dapat menampilkan sekelompok kata dalam bentuk miring.

· Kita dapat menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik.

· Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

G. KARAKTERISTIK HTML5

HTML5 memiliki karakteristik baru, seperti dibawah ini:

· HTML5 lebih bersih dan sederhana. Dibanding cara penulisan XHTML, cara penulisan HTML5 lebih sederhana dan simpel. Contoh, untuk penulisan script HTML5 saja, yang kita butuhkan hanyalah tag <!DOCTYPE HTML>. Bandingkan dengan membuat script XHTML.

· Tag-tag baru yang ada di HTML5 lebih bersifat semantik. Oleh karena itu, satu browser dengan lainnya memiliki cara menampilkan tag yang agak berbeda. Sebagai contoh, jika kita menulis tag <h1> maka yang akan terlihat adalah teks berukuran besar tanpa menyuruh kita menspesifikasikan berapa ukuran font yang digunakan dan jenis font yang dipakai.

· HTML5 tetep terikat oleh CSS (cascading Style Sheet). Dalam dunia website saat ini, script HTML5 saja kurang cukup mumpuni karena tag – tag didalamnya tidak didesain secara penuh untuk mempercantuk desain, digunakanlah CSS. Jadi dapat diibaratkan, tag HTML5 berfungsi untuk menentukan pengaturan – pengaturan bagian dan fungsi tiap-tiap elemen di dalam sebuah website. Sedangkan CSS mengatur bagaimana bagian-bagian dan fungsi itu akan terlihat di dalam website.

· HTML5 sering berinteraksi dengan Javascript. Ada beberapa tag yang tak bisa bekerja dengan optimal jika tidak dilengkapi dengan Javascript. Misalnya tag <canvas>.

· Untuk mengetahui apakah browser yang anda pakai mendukung seluruh tag beserta atribut HTML5 atau tidak, serta untuk “ mengintip” tag-tag apa saja yang belum di support, kunjungilah situs www.html5test.com .

· Sampai saat ini, Google chrome merupakan browser yang paling banyak mendukung HTML5. Untuk menguji score tiap browser, silahkan klik tab Other Browser.

H. Bahasa-Bahasa Pemprograman HTML

Bahasa HTML adalah bahasa yang digunakan untuk membangun sebuah website atau blog. Bahasa HTML yang mempunyai kepanjangan Hyper Text Markup merupakan bahasa yang paling dasar dalam pemrograman sebuah website atau blog dan juga bahasa yang paling mudah dipelajari atau di aplikasikan dalam pemubuatan website atau blog. Tidak hanya pembuatan website atau blog saja, bahasa HTML juga terkadang dapat digunakan untuk pembuatan bagian perangkat lunak (software) tertentu.

Tutorial singkat ini mengenai beberapa bahasa pemrograman web:

1. Hyper Text Markup Language (HTML)

—–> Ekstensi file: .html, .htm, .html4

Bahasa HTML adalah bahasa yang sederhana dan hanya memiliki sedikit kesulitan. Bahasa yang merupakan dasar dari framework Internet ini ditemukan oleh Tim Berners-Lee pada tahun 1989. Hampir setiap situs web menggunakan bahasa ini, entah sekedar menampilkan texs, animasi, tampilan grafis ataupun suara.

Bahasa HTML sebenarnya berasal dari bahasa lama yang disebut dengan SGML (Standard Generalized Markup Language). Namun perkembangan HTML sudah dimulai sejak kurang lebih 10 tahun bahasa tersebut diperkenalkan.

v Berikut ini struktur dasar bahasa HTML:

· <HTML> Tanda bagi browser untuk mengenali bahea itu adalah bahasa html.

· <HEAD> Informasi header halaman. Di dalam tag inilah kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

· <TITLE> Sebagai judul halaman. Text yang anda letakkan didalam tag ini akan muncul pada title bar (Bagian paling atas browser).

· <BODY> Di dalam bagian inilah semua atribut diletakkan seperti Font, bgcolor, background dll.

v Berikut ini contoh halaman web sederhana:

· <HTML>

· <HEAD>

· <TITLE>Hallo dunia</TITLE>

· </HEAD>

· <BODY bgcolor=”#000000″ background=”images/dark.gif” text=”aqua”><palign=”Justify”>Ini contoh halaman web</p>

· </BODY>

· </HTML>

2. Dynamic HTML (DHTML)

—–> Ekstensi file: .dhtml

DHTML adalah bahasa yang bisa diakses dan dimodifikasi oleh bahasa script seperti Vbscript, Javascript. DHTML sering dimanfaatkan untuk menampilkan animasi-animasi seperti efek text, perubahan warna, dan lain sebagainya bahkan untuk game juga bisa. Bahasa ini sering juga disebut sebagai versi objek dari HTML.

3. eXtensible Markup Language (XML)

—–> Ekstensi File: .xml

XML adalah bahasa yang sifatnya lebih terbatas daripada elemen-elemen HTML. Dengan XML, orang bisa menentukan elemen-elemennya sendiri lalu kemudian mengembangkannya.

Menentukan elemennya sendiri? Yeah, semuanya berpusat pada Document Type Definitions atau biasa disingkat DTD. DTD-lah yang telah menentukan tag awal dan tag akhir dari suatu file XML sehingga data yang ditampilkan dapat dipahami.

4. XHTML

—–> Ekstensi File: .XHTML

Bahasa ini masih dalam pengembangan. XHTML merupakan gabungan dari bahasa HTML dan XML. Seperti halnya XML, bahasa ini juga masih tergolong baru namun diramalkan akan sangat berperan dalam mewarnai dunia web di masa depan. Info selengkapnya mengenai bahasa ini bisa kamu temukan di www.w3r.org.

5. Personal Home Page (PHP)

—–> Ekstensi File: .php, php3, atau tanpa ekstensi

PHP ditulis oleh Rasmus Lerdorf yang pada awalnya ia gunakan untuk mencatat jumlah pengunjung situs yang membuka halaman resumenya. Ia kemudian menulis ulang kode-kodenya dengan bahasa C yang kemudian menjadikan bahasa itu menjadi lebih kaya kemampuan.

Barulah setelah itu banyak bermunculan tokoh-tokoh yang berjasa dalam perkembangan PHP seperti Zeev Suraski dan Andi Gutmans yang menulis kembali parsing Engine unuk menciptakan PHP versi 3. PHP kemudian menjadi modul Apache yang paling sering digunakan.

v Berikut ini contoh script PHP yang akan menampilkan text Hallo Dunia.

Ø <html>

Ø <head>

Ø <title>PHP menampilkan Halo Dunia</title>

Ø </head><?php echo “<br><br><h1>Hallo dunia<br><br></h1>”;?>

Ø </html>

6. CGI (Common Gateway Interface)

—–> Ekstensi File: .cgi, .pl

CGI (Common Gateway Interface) merupakan standar Internet tertua dan paling berkembang sebagai suatu alat lewatnya informasi dari web server ke suatu program dan mengembalikan hasilnya ke browser.

v Suatu program CGI dapat ditulis dengan bahasa-bahasa berikut:

· Perl

· Java

· C, C++

· Script-script UNIX

· Visual Basic

· MacOS atau AppleScript

Karena itulah CGI sebenarnya kurang tepat jika dikategorikan sebagai bahasa karena program CGI sendiri dapat ditulis menggunakan beragam bahasa.

7. PERL (Practical Extraction and Report Language)

—–> Ekstensi File: .pl atau bisa apa saja

PERL merupakan bahasa pemrograman tingkat tinggi yang ditemukan oleh Larry Wall (1987). PERL memiliki kemampuan untuk dapat diterapkan pada hampir semua jenis Operating System dan yang terpenting, perl bisa didapatkan secara gratis.

Pada Web, eksekusi perl biasa dijalankan dengan CGI (Common Gateway Interface) sebagai mkanisme untuk menampilkan output text ke browser.

8. ColdFusion

—–> Ekstensi File: .cfm

Coldfusion adalah sistem pengembangan aplikasi yang dikembangkan oleh Alaire. Komponen utama Coldfusion adalah:

1) ColdFusion Application Server

2) ColdFusion Markup Language

3) ColdFusion Studio

File-file CFM disimpan dalam bentuk plain text, sama halnya seperti PERL dan PHP sehingga siapapun dapat melihat isinya.

9. ASP (Active Server Page)

—–> Ekstensi file: .asp

ASP diciptakan khusus bagi server IIS milik microsoft. Bahasa ini merupakan bahasa pemrograman web yang dinamis. ASP dapat digunakan untuk mengeksekusi beragam request terhadap suatu database atau perintah-perintah pada system lokal.

v Berikut contoh sederhana berikut yang akan menampilkan tanggal dan jam pada sebuah halaman web untuk server-side:

· <%@ language=”VBSCRIPT” %><html><body><h1>Tanggal:</h1><% =date %><h1>Jam</h1><% =time %></body></html>

v Sedangkan fungsi yang sama pada Client-Side:

· <html>

· <body><script type=”text/vbscript”>

· document.write(“<h1>Tanggal:</h1>”)

· document.write(“<br>” & date() & “<br>)

· document.write(“<h1>Jam:</h1>”)

· document.write(“<br>” & time() & “<br>)

· </script>

· <body>

· </html>

10. JAVA

—–> Ekstensi File: Tidak ada

11. JHTML

—–> Ekstensi File: .jhtml

Bahasa standard JavaSoft keluaran SUN yang dicptakan untuk mengikutsertakan Java dalam sebuah file HTML ini memiliki tag tersendiri yang diproses sebelum mengirimkan output pada browser. JHTML hampir mirip dengan HTML, hanya saja memiliki tambahan tag <Java> . Berikut contoh sangat-sangat sederhana dari kode JHTML yang akan mengeluarkan tampilan “Hallo Dunia, Saya datang dari cyber”

· <Java>

· out.print(“Hallo Dunia, Saya datang dari cyber”);

· </java>

I. Struktur HTML

1. Struktur dasar HTML

HTML merupakan sebuah bahasa pemrograman yang berisikan perintah kepada browser yang telah terinstal pada computer clien. Bahasa pemograman ini terdapat sebuah elemen, tag dan attribute didalam perintahnya.

Secara umum Web dokumen terdiri dari menjadi dua elemen ataupun section yaitu head dan body, kedua elemen tersebut dipisahkan oleh beberapa tag, untuk lebih jelasnya dapat anda lihat sebuah pola dasar HTML dibawah ini:

<html>

<head>

“Informasi Tentang Dokumen HTML”

</head>

<body>

“Informasi yang akan ditampilkan dalam web Browser”

</body>

</html>

Dari pola diatas dapat digambarkan adanya sebuah dokumen HTML mulai dari tag pembuka <html> sampai tag penutup </html>, sedangkan isi dari dokumen html tersebut adalah dua buah elemen atau section yaitu:

ð “HEAD” yang dimulai dari tag pembukanya <head> sampai tag penutup head </head>,

Pada elemen ini biasanya berisikan:

Ø Title, merupakan judul dokumen

Ø Meta tag, informasi yang akan diberikan oleh pengunjung tentang isi halaman web

Dalam Meta Tag dapat kita isikan beberapa atribut penjelasan antara lain, Content, Name, URL. Sedangkan dalam atribut tersebut terdapat sebuah value, adapun beberapa value yang dapat kita isikan antara lain abstract, author, copyright, description, distribution, expires, keywords, revist, refresh maupun language.

Ø Script java, CSS dan beberapa perintah lain yang nantinya akan diesekusi browser tanpa ditampilkan oleh browser untuk sebagian besar, dengan kata lain pada elemen ini kebanyakan hanya mengatur informasi dan visualisasi web tersebut, untuk elemen keduanya adalah

Ø “BODY” mulai dari tag pembuka <body> sampai tag penutupnya </body> pada elemen ini berisikan informasi dan pengaturannya yang akan ditampilkan dalam browser.

Di dalam bahasa pemrograman HTML terdapat beberapa atributh yang perlu kita pelajari, adapun contoh atributh dan kegunaannya sebagai berikut :

§ <DFN>, untuk menandai sebuah subdefinisi dari daftar ataupun table definisi

§ <STRONG>, Untuk menandai bagian text ataupun kata dari penting dari sebuah kalimat, paragraph ataupun dokumen

§ <VAR>, untuk menampilkan nama variable

§ <CITE>, Menandai kutipan

§ <CODE>, Menampilakan sebuah kode pemrograman.

§ <EM>, Penekanan sebuah kalimat

§ <SAMP>, untuk membuat contoh ataupun sample didalam sebuah dokumen

§ <KBD>, menandai suatu text dimana text tersebut harus dimasukan oleh user melalui keyboard

§ <B>, Bold membuat tampilan tebal huruf, kata ataupun kalimat

§ <I>, Italic membuat tampilan miring

§ <U>, Underline membuat tampilan garis bawah

§ <TT>, Membuat tampilan jenis huruf menyerupai huruf mesin ketik

§ <STRIKE>, membuat garis tengah pada sebuah kalimat

§ <BIG>, memperbesar ukuran huruf

§ <SMALL>, memperkecil ukuran huruf

§ <SUP>, menampilkan superscript

§ <SUB>, menampilkan subscript

§ <FONT>, merupakan sebuah pengaturan huruf, kata ataupun kalimat bahkan paragraph di mana dalam atribut ini terdapat value yang mengatur tampilan huruf tersebut seperti color. Size, style dan lainnya

§ <P>, Paragrah untuk membuat sebuah paragraph

§ <BR>, Line break berfungsi untuk mengganti baris

§ <H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan sebuah header dimana dari keenam jenis tersebut mempunyai perbedaan ketebalan dan ukuran huruf

§ <PRE> Preformatted Text berfungsi menampilkan text apa adanya

§ <CENTER> membuat sebuah text berada di posisi tengah

§ <LEFT> membuat sebuah text berada di posisi kiri

§ <RIGHT> membuat sebuah text berada di posisi kanan

§ <Basefont size=”pixel”>mengubah ukuran sebuah huruf

§ <HR> Horizontal rule berfungsi untuk membuat garis bawah

§ <OL>, membuat penomoran pada daftar

§ <UL>, Membuat sebuah tanda pada daftar tanpa nomor (bullet)

§ <LI>, tag yang berada di dalam attribute UL ataupul OL digunakan untuk memisah baris daftar yang akan di beri penomoron ataupun tanda bullet

§ <TABLE>, membuat sebuah table

§ <TR>, Membuat row atau baris didalam table <TH>, membuat judul kolom di table

§ <TD> membuat isi pada kolom table, ketiga tag ini diisikan pada atribut table

§ Rowspan, Colspan merupakan pengaturan merge cell pada atribut table

§ <FORM> untuk membuat form

§ <A HREF=”url link”>Hypertext</A> Hyper Link

§ <IMG SRC=”url img”> insert image

Inilah beberapa atributh dasar yang digunakan dalam pemrograman HTML, pada atribut diatas merupakan sebuah tag pembuka yang pada akhir atribut tersebut harus ditutup dengan tag penutup atributh tersebut </…..>, untuk lebih jelasnya dilain waktu saya akan mencoba bahas satu persatu atributh tersebut dan akan saya lengkapi dengan syntax dan contohnya kompleksnya.

Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML diapit oleh tag awal <HTML> dan tag akhir </HTML>. Standar penulisannya adalah:

<HTML>

<HEAD>

Deskrisi dokumen

</HEAD>

<BODY>

Isi dokumen

</BODY>

</HTML>

Keterangan:

Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark web Anda, maka judul inilah yang akan disimpan.

Referensi Tag HTML

1. Heading

Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.

Contoh:

<HTML>

<HEAD>

<TITLE>Headings</TITLE>

</HEAD>

<BODY>

<H1>Heading Level 1</H1>

</BODY>

</HTML>

2. Paragraf

Untuk membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.

Contoh:

<HTML>

<HEAD>

<TITLE>Paragraf</TITLE>

</HEAD>

<BODY>

</P>

</BODY>

</HTML>

3. Blockquote

Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (meng-identasi teks) atau menampilkan teks dalam bentuk huruf miring.

Contoh:

<HTML>

<HEAD>

<TITLE>BLOCKQUOTE</TITLE>

</HEAD>

<BODY>

<H3>Sesuatu yang tidak perlu dicoba</H3>

</BLOCKQUOTE>

</BODY>

</HTML>

4. Preformatted Text

Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).

Contoh:

<HTML>

<HEAD>

<TITLE>Preformatted Text</TITLE>

</HEAD>

<BODY>

<PRE>

</PRE>

</BODY>

</HTML>

5. Begin Row (BR)

Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris baru tanpa memberi baris kosong di bawahnya.

Contoh:

<HTML>

<HEAD>

<TITLE>Begin Row</TITLE>

</HEAD>

<BODY>

<P>Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga cara yang paling sering dilakukan ,yaitu:

<BR>Instalasi melalui FTP

<BR>Instalasi melalui CDROM

<BR>Instalasi melalui partisi DOS

</BODY>

</HTML>

6. Ukuran Font

Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.

Contoh:

<HTML>

<HEAD>

<TITLE>Ukuran font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=1>Ukuran font 1</FONT>

<FONT SIZE=2>Ukuran font 2</FONT>

<FONT SIZE=3>Ukuran font 3</FONT>

<FONT SIZE=4>Ukuran font 4</FONT>

<FONT SIZE=5>Ukuran font 5</FONT>

<FONT SIZE=6>Ukuran font 6</FONT>

<FONT SIZE=7>Ukuran font 7</FONT>

</BODY>

</HTML>

7. Jenis Font

Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.

Contoh:

<HTML>

<HEAD>

<TITLE>Jenis Font</TITLE>

</HEAD>

<BODY>

<FONT FACE = “Arial”>Arial, contoh AC Milan <P>

<FONT FACE = “Verdana”>Verdana , contoh Persebaya <P>

<FONT FACE = “Times New Roman”>Times New Roman, contoh Indonesia P>

</BODY>

</HTML>

8. Warna Font

Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.

Contoh:

<HTML>

<HEAD>

<TITLE>Warna Font</TITLE>

</HEAD>

<BODY>

<FONT COLOR = “red”>PSM Makassar<P>

<FONT COLOR = “#FF0000″>tetap PSM Makassar kan?<P>

<FONT COLOR = “#00FF00″>Ini baru Persebaya<P>

</BODY>

</HTML>

9. Link

Perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada browser</A>.

Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag <A>. Misalnya <A NAME = “Bugs”</A>. Cara melakukan link ke bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A>.

Contoh:

<HTML>

<HEAD>

</HEAD>

<BODY>

<A NAME=”lengkap”>Pemain-pemain AC Milan menurut abjad</A>

<P>Abbiati ,<A HREF=”#abbiati”>info lengkap</A>

<P>Ayala

<P>Ambrosini

<P>Albertini

<P>Boban

<P>

<A HREF=”linktujuan.html”>kalo mau tahu lagi klik disini</A>

</BLOCKQUOTE>

<P><A NAME=”abbiati”>Abbiati</A>

<P>Kiper ketiga timnas Italia runner up Euro 2000

<BR>Kiper utama U-21 juara Piala Eropa U-21

<BR>Kiper utama AC Milan juara Seri-A 1998-1999

</BLOCKQUOTE>

<P><A HREF=”#lengkap”>kembali ke atas</A>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Link tujuan</TITLE>

</HEAD>

<BODY>

<P ALIGN=”center”> Maaf, hanya sedikit

<BR>Chamot

<BR>Dida

<BR>Shevchenk

<BR><A HREF=”contohlink.html”>kembali</A>

</BODY>

</HTML>

BAB III

PENUTUP

A. Kesimpulan

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

B. Saran

Pembuatan web/HTML merupakan dasar yang penting sehingga dapat membantu ketika kita memulai sebuah proyek web tanpa menggunakan cara yang praktis.