HTML5
Makalah ini diajukan guna melengkapi
mata kuliah Teknologi Informasi dan Komunikasi
dosen pengampu Bapak Septia Lutfi
Oleh :
Ninik Sulistyorini
1102412113
TEKNOLOGI PENDIDIKAN
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG
2013
KATA
PENGANTAR
Puji syukur saya panjatkan kepada Allah SWT yang
telah memberikan rahmat dan karuniaNya sehingga saya dapat menyelesaikan
makalah yang berjudul HTML5 tepat pada waktunya.
Saya menyadari bahwa dalam
penyusunan makalah ini masih jauh dari sempurna. Oleh karena itu dibutuhkan
saran dan kritik yang bersifat membangun selalu saya harapkan demi kesempurnaan
makalah yang saya buat.
Akhir kata, saya ucapkan
terimakasih kepada semua pihak yang telah berperan dalam pembuatan makalah ini
dari awal sampai akhir. Semoga Allah SWT selalu meridhoi segala usaha kita. Amin.
Semarang,
Oktober 2013
Penyusun
BAB I
PENDAHULUAN
A. Latar
Belakang
Pada
kesempatan kali ini saya akan membahas bagaimana cara membuat dropdown
menu menggunakan CSS3 dan HTML5. Dropdown menu yang mengunakan CSS3 dan HTML5
ini berguna sekali dan sangat elegant, pada postingan kali ini saya akan
memperkenalkan sintaks baru yang di gunakan yaitu "nav". Saya mengusun tentang pengertian HTML5 atau semantic
web. Mungkin masih banyak developer website (terutama desainer web) yang masih
belum familiar dan juga belum mengerti bagaimana cara menggunakan HTML5 pada
suatu website. Oke, langsung saja kita menuju ke inti pembahasan.
Sintaks tersebut bisa berdiri sendiri
dalam CSS3 juga bisa di masukan dalam kelompok lain seperti header,ekstra dan
lainnya. Sudah banyak memang yang memberikan tutorial tentang cara membuat
dropdown menu navigasi akan tetapi yang ini berbeda karena ini menggunakan CSS3 dan html5 di sini
saya akan memulainya dari atas yaitu navigasi untuk simple 35 juga bisa di
gunakan oleh sobat dengan memakai template minimal tapi sebelumnya templatenya
di save terlebih dahulu..oke mari kita mulai.
Web
merupakan media untuk menanpilkan halaman. Web terbagi menjadi dua yaitu web
statis dan web dinamis. Web statis adalah media untuk menampilkan halaman
statis atau tetap, tetapi yang mengatur nya adalah web browser. Contoh
teknologi yang berkaitan dengan web statis adalah Client Side seperti HTML,
Java script.
Dibuat
nya makalah ini adalah untuk mempermudah dalam pembelajaran, maksudnya walaupun
kita tidak begitu mrngerti terhadap pembahasan tetapi kita sudah mengenal dan
mngetahui nya. Hal ini telah memudahkan bagi pelajar yang mempelajari tentang
bab ini karena sudah dikelompokkan sesuai dengan bahasannya. Tetapi disamping
itu kita haru rajin berlatih terus mencoba membuat web, baik yang statis
ataupun dinamis. Berdasarkan kenyataan diatas penyusun tertarik untuk membuat
makalah yang berjudul HTML5 dan Java Script.
B. Rumusan Masalah
1. Apa saja yang mendasari HTML5?
2. Apa Itu
CSS?
3. Apa saja yang mendasari HTML5?
4. Apa pengertian HTML5 ?
5. Apa tujuannya dibuatnya
HTML5 ?
6. Apa
saja Fitur baru dalam HTML5 ?
7. Beberapa
kelebihan dari HTML5 ?
8. Bagaimana fungsi HTML5 ?
9. Bagaimana kegunaan HTML5 ?
10. Bagaimana dengan bahasa-bahasa
pemograman HTML5 ?
11. Apa
saja implementasi dari HTML5 ?
C.
Tujuan
a. Untuk
mengetahui pengertian HTML5
b. Untuk
mengetahui sejarah-sejarah/asal mula HTML5
c. Untuk
mengetahui kelebihan HTML5
d. Untuk
mengetahui kekurangan HTML5
e. Agar
mengetahui contoh-contoh HTML5
1. Dasar-Dasar HTML5
Mendesain
HTML5 berarti melakukan suatu tindakan pemrograman. Namun HTML5 bukanlah sebuah
bahasa pemrograman. Namun HTML5 hanyalah berisi perintah-perintah yang telah
terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML5 tidaklah sebatas
hanya memasukkan perintah-perintah tertentu agar HTML5 kita dapat di akses oleh
browser. Mendesain HTML5 adalah adalah sebuah seni tersendiri. Homepage yang
merupakan implementasi dari HTML5 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
HTML5 dapat dilakukan dengan dua cara :
2.
Dengan
cara menuliskan sendiri secara manual satu persatu tag-tag HTML5 ke dalam dokumen
HTML5.
Ada kelebihan dan kekurangan dari dua cara di atas. Cara
pertama kelebihannya adalah HTML5 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 HTML5 maka
cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar
lebih mendalam mengenai HTML5. Sedangkan cara kedua adalah menuliskan secara
manual satu persatu tag-tag HTML5. 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 HTML5 yang akan Anda pelajari,
karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan
berbagai perintah yang biasa dipakai pada bahasa HTML5.
2.
Pengenalan CSS
CSS
adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading
itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari
suatu kode ke kode lain yang saling berhubungan.
Jadi
kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah:
kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format
/ tampilan suatu halaman HTML5.
Keuntungan
Penggunaan CSS
Jika
anda memiliki beberapa halaman website dimana anda menggunakan fontarial untuk
tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ketrebuchet,
anda harus merubah satu per satu halaman website anda dan merubah tipe font
dari arial menjadi trebuchet.
Dengan
menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup
merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Kekurangan
Penggunaan CSS
Tidak
semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang,
tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di
browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua
browser dan menambahkan kode-kode khusus browser tertentu jika memang
dibutuhkan agar tampilan web anda terlihat baik di semua browser.
v Syntax
Syntax /
kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1
property, 1 value.
Format
penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan
bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian
(properti) dari selector yang hendak diatur.
Value adalah nilai dari
pengaturannya.
Contoh
Syntax:
h1 { color: red }
Contoh di
atas menunjukkan
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat
bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke
warna merah (red).
Ø Pengelompokan Selectors
Anda dapat menulis satu kode CSS
untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau
mengatur agar tag h1, h2 dan h3 semua
menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang
dipisahkan oleh koma.
Ø Penggunaan Banyak Properties
Untuk mengatur lebih dari satu
properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red;
font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan
h3 di atur agar menggunakan warna merah, dengan type font arial,
dan ukuran font 150%.
Ø Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode
CSS menggunakan beberapa baris dimana pengaturan property dan values nya di
indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Sekarang anda sudah mengerti aturan
dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda
mengaplikasikan kode CSS ke halaman website.
Ø CSS Comment
Kadang kala, ada baiknya anda menuliskan
komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka
/* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara
tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk
diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
v Implementasi css
Ada 4 cara
memasang kode CSS ke dalam kode HTML5 / halaman web, yaitu:
Inline CSS
Embed atau memasang kode css ke
dalam bagian <head>
Nge link ke external CSS
Import CSS file
ü Inline CSS
Kode CSS dituliskan langsung ke
dalam tag HTML5 yang ingin di format. Penulisan cara ini tidak memerlukan penulisan
selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan
jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P style=”color:blue”>
Isi paragraf.
</p>
Pada contoh di atas, elemen paragraf
<P> di format agar tulisannya menggunakan warnabiru. Elemen
paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya
berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di
mulai dengan kata style: lalu di ikuti dengan syntaxproperty:
value.
ü Embedded CSS
Anda bisa juga menempelkan kode CSS
di antara tag <head> dan </head>.
Penulisan CSS dengan cara ini diawali dengan tag <style> dan
diakhiri dengan tag </style>.
Contoh:
<head>
<style type="text/css"
media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua
elemen <P> dalam halaman web tersebut akan
diformat menggunakan font berwarna biru.
ü External CSS
Kode CSS external di tulis dalam
satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu memanggil
file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini,
anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman
web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
1.
Anda
membuat satu file dengan notepad atau teks editor lain, dan berinama,
misalkan: style.css, lalu tuliskan kode-kode css di dalam file
tersebut.
2.
p {font-family: arial; font-size:
small;}
3.
h1 {color: red; }
4.
Langkah
kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan
memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
ü Import CSS
Anda bisa juga meng-import CSS ke
dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css"; atau
@import url("style.css");
v Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS
untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web,
menggunakan eksternal style sheet untuk memformat elemenH1 sbb:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama,
di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan
saling bertabrakan, dari eksternal style sheet, text-align=left sementara
dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang
akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet
lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode
yang akan diimplementasikan adalah sbb:
color: red;
text-align: right;
font-size: 20pt
·
Class dan Id selector
CLASS SELECTOR
Class
selector adalah penggabungan beberapa properties yang digunakan lebih dari satu
kali.
Cara penulisan Class Selector:
.nama-class
{property:value;}
Untuk menempelkan class ke dalam tag
HTML5:
taghtml.nama-class
{Property:value;}
Perhatikan tanda titik di setiap
awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML5
anda menggunakan tag <div class=nama-class> dan di
akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasil:
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
v
ID SELECTOR
ID Selector mirip dengan Class
selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian
yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian
menu / sidebar.
Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke
dalam tag HTML5:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal
nama ID. Jika anda ingin menggunakan class selector di luar kode HTML5 anda
menggunakan tag <div id=nama-ID> dan di akhiri dengan
tag </div>.
3.
Dasar-Dasar
HTML5
Mendesain
HTML5 berarti melakukan suatu tindakan pemrograman. Namun HTML5 bukanlah sebuah
bahasa pemrograman. Namun HTML5 hanyalah berisi perintah-perintah yang telah
terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML5 tidaklah sebatas
hanya memasukkan perintah-perintah tertentu agar HTML5 kita dapat di akses oleh
browser. Mendesain HTML5 adalah adalah sebuah seni tersendiri. Homepage yang
merupakan implementasi dari HTML5 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
HTML5 dapat dilakukan dengan dua cara:
v Dengan cara menuliskan sendiri
secara manual satu persatu tag-tag HTML5 ke dalam dokumen HTML5.
Ada kelebihan dan kekurangan dari dua cara di atas. Cara
pertama kelebihannya adalah HTML5 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 HTML5 maka
cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar
lebih mendalam mengenai HTML5. Sedangkan cara kedua adalah menuliskan secara
manual satu persatu tag-tag HTML5. 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 HTML5.
4. Pengertian
HTML5
HTML5 adalah Generasi selanjutnya
dari HTML sebelumnya. HTML5 diciptakan dalam pengembangan
bahasa HTML5 untuk memperbaiki konten dan memperbarui teknologi
multimedia yang sudah ada pada HTML 4 dan versi sebelumnya
agar mudah dijalankan olehbrowser dan mudah
dimengerti. HTML5 merupakan kerjasama antara World Wide Web
Consortium (W3C) dan Web Hypertext Application Teknologi Working
Group (WHATWG).WHATWG bekerja dengan bentuk web dan aplikasi,
dan W3C bekerja dengan XHTML 2.0. Pada tahun 2006, mereka
memutuskan untuk bekerja sama dan membuat versi baru
dariHTML yaitu HTML5.
Struktur HTML5 adalah sebagai berkut :
<!DOCTYPE
html><html><head><title>Judul</title></head><body>
Isi dan Konten </body></html>
Penambahan Tag baru
pada HTML5 (Semantic/Structural Elements baru pada HTML5)
<article> Mendefinisikan sebuah
artikel
<aside> Mendefinisikan isi selain
dari konten halaman
<bdi> Isolat bagian dari teks yang
dapat diformat dalam arah yang berbeda dari teks lain di luar itu
<command> Mendefinisikan sebuah
tombol perintah bahwa seorang pengguna dapat meminta
<details> Mendefinisikan rincian
tambahan bahwa pengguna dapat melihat atau menyembunyikan
<summary> Mendefinisikan sebuah judul
terlihat untuk elemen <details>
<figure> Menentukan mandiri konten,
seperti ilustrasi, diagram, foto, daftar kode, dll
<figcaption> Mendefinisikan sebuah
caption untuk elemen <figure>
<footer> Mendefinisikan footer untuk
dokumen atau bagian
<header> Mendefinisikan sebuah header
untuk dokumen atau bagian
<hgroup> Grup seperangkat <h1>
untuk elemen <h6> ketika pos memiliki beberapa tingkat
<mark> Mendefinisikan teks ditandai /
disorot
<meter> Mendefinisikan pengukuran
skalar dalam kisaran dikenal (gauge)
<nav> Mendefinisikan navigasi link
<progress> Merupakan kemajuan tugas
<ruby> Mendefinisikan sebuah
penjelasan ruby (untuk tipografi Asia Timur)
<rt> Mendefinisikan sebuah penjelasan
/ pengucapan karakter (untuk tipografi Asia Timur)
<rp> Mendefinisikan apa yang harus
ditampilkan di browser yang tidak mendukung penjelasan ruby
<section> Mendefinisikan sebuah
bagian dalam sebuah dokumen
<time> Mendefinisikan tanggal / waktu
<wbr> Mendefinisikan sebuah
kemungkinan garis-break
<audio> Mendefinisikan isi suara
<video> Mendefinisikan sebuah video
atau film
<source> Mendefinisikan beberapa
sumber daya media untuk <video> dan <audio>
<embed> Mendefinisikan sebuah wadah
untuk aplikasi luar atau konten interaktif (plug-in)
<track> Mendefinisikan trek teks
untuk <video> dan <audio>
<canvas> Digunakan untuk menggambar
grafik, dengan cepat, melalui scripting (JavaScript biasanya)
<datalist> Menentukan daftar yang
telah ditentukan pilihan untuk kontrol input
<keygen> Mendefinisikan sebuah field
kunci-pasangan generator (untuk bentuk)
<output> Mendefinisikan hasil
perhitungan
5.
Tujuan
dibuatnya HTML5 antara lain :
·
Fitur baru harus didasarkan pada HTML,
CSS, DOM , dan JavaScript
·
Mengurangi kebutuhan untuk plugin
eksternal (seperti Flash)
·
Penanganan kesalahan yang lebih baik
·
Lebih banyak markup untuk menggantikan
scripting
·
HTML5 merupakan perangkat mandiri
6.
Fitur
baru dalam HTML5 :
·
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,
navigation, section
·
Bentuk kontrol form seperti kalender,
tanggal, waktu, e-mail, URL, search
7.
Beberapa
kelebihan yang dijanjikan pada HTML5 :
·
Dapat ditulis dalam sintaks HTML5 (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
8.
Fungsi
dari HTML5 :
Secara
umum, fungsi HTML5 adalah untuk mengelola serangkaian data dan
informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet
melalui layanan web.
Fungsi HTML5
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, HTML5 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.
9.
Kegunaan HTML5
Dengan menggunakan HTML5 anda dapat
membuat antara lain :
a.
Membuat link
Konsep
hypertext pada HTML5 memungkinkan
kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke
bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita
gunakan :
- Link menuju
bagian lain dari page
- Link menuju
page lain dalam satu web site
- Link menuju
resource atau web site yang berbeda
b. Memodifikasi
format teks
Penggunaan HTML5 memungkinkan kita untuk memodifikasi tampilan atau
format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal
yang dapat dilakukan dalam menentukan format dokumen ini adalah :
·
Kita dapat menampilkan suatu kelompok
kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan
sebagainya
·
Kita dapat menampilkan teks dalam
bentuk cetakan tebal
·
Kita dapat menampilkan sekelompok kata
dalam bentuk miring
·
Kita dapat menampilkan naskah dalam
bentuk huruf yang mirip dengan hasil ketikan mesin ketik
·
Kita dapat mengubah-ubah ukuran font
untuk suatu karakter tertentu
c. Menampilkan
daftar sesuatu dalam bentuk point-point (item)
Dengan HTML5 kita dapat menampilkan daftar atau deretan informasi
dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami Membuat link.
Konsep hypertext pada HTML5 memungkinkan kita untuk membuat link pada suatu kelompok
kata atau frase untuk menuju ke bagian manapun dalam World Wide Web.
Ada tiga macam link yang dapat kita gunakan :
1. Link menuju bagian
lain dari page
2. Link menuju page
lain dalam satu web site
3. Link menuju
resource atau web site yang berbeda
d. Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan
lebih menarik, interaktif dan informatif untuk mendukung data-data lainnya
dalam bentuk teks.
e. Menampilkan
informasi dalam bentuk tabel
Penampilan informasi dalam bentuk tabel ini akan mempermudah
pembaca untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga
dapat dilakukan untuk menambah nilai estetika dari page yang akan kita rancang.
10.
Bahasa-Bahasa
Pemprograman HTML5
Bahasa HTML5 adalah bahasa
yang digunakan untuk membangun sebuah website atau blog. Bahasa HTML5 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 HTML5 juga terkadang dapat digunakan untuk pembuatan bagian
perangkat lunak (software) tertentu.
Tutorial singkat ini mengenai beberapa
bahasa pemrograman web:
1. Hyper Text Markup Language (HTML5)
—–> Ekstensi file: .html, .htm,
.html4
Bahasa HTML5 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 HTML5 sebenarnya berasal dari bahasa lama yang disebut dengan
SGML (Standard Generalized Markup Language). Namun perkembangan HTML5 sudah dimulai
sejak kurang lebih 10 tahun bahasa tersebut diperkenalkan.
Berikut ini struktur dasar bahasa HTML5:
<HTML5> Tanda bagi
browser untuk mengenali bahea itu adalah bahasa html5.
<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..
Berikut ini contoh halaman web sederhana:
<HTML5>
<HEAD>
<TITLE>Hallo dunia</TITLE>
</HEAD>
<BODY bgcolor=”#000000″ background=”images/dark.gif”
text=”aqua”>
<p align=”Justify”>Ini contoh halaman web</p>
</BODY>
</HTML5>
2. Dynamic HTML5 (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!!). Bahasa ini sering juga disebut sebagai versi
objek dari HTML5.
3. eXtensible Markup Language (XML)
—–> Ekstensi File: .xml
XML adalah bahasa yang sifatnya lebih terbatas daripada
elemen-elemen HTML5. 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.
3. 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. 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.
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. Lebih jauh tentang Perl dan keamanannya dapat anda temukan di www.w3.org.
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. Informasi
lanjut tentang ColdFusion dapat ditemukan di www.alaire.com.
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.
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>
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
Baca artikel sebelumnya tentang sejarah Java untuk
berkenalan dengan bahasa ini.
11. JHTML
—–> Ekstensi File: .jhtml
Bahasa standard JavaSoft keluaran SUN yang dicptakan
untuk mengikutsertakan Java dalam sebuah file HTML5 ini memiliki
tag tersendiri yang diproses sebelum mengirimkan output pada browser. JHTML
hampir mirip dengan HTML5, 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>
11. Implementasi HTML5 :
5 eksperimen yang
sejauh saya temukan adalah yang paling menarik :
Sebuah
demo galeri foto berkelas. Seperti semua contoh 3D CSS, hal ini
memerlukan browser Safari versi terbaru. Google Chrome saat ini tidak mendukung
transformasi 3D.
Demo
HTML5 lain menggunakan kanvas, ia memperlihatkan kepada Anda beberapa molekul
dalam rotasi.
Video
berputar, klik di mana saja pada video tersebut, gambar akan terurai dengan
pusat pada daerah yang diklik dan beberapa saat kemudian akan kembali lagi
seperti semula. Hal ini sangat eksperimental dan sulit untuk melihat bagaimana pemanfaatannya.
Google
membuat Quake, sebuah game yang populer tahun 90-an dan membutuhkan sumber daya
yang besar di masanya itu, mampu dimainkan hanya dengan menggunakan browser.
Google mengembangkannya dari Jake2, port Quake II ke Java, kemudian
memanfaatkan Google Web Toolkit dan sejumlah teknologi lainnya.
Sebuah eksperimen yang menampilkan 100 tweets terkait dengan HTML5 dan menampilkan
mereka menggunakan mesin berbasis partikel javascript. Setiap partikel mewakili
sebuah tweet – klik pada salah satu dari mereka dan tweet akan muncul di layar.
BAB III
PENUTUP
A.
Simpulan
Dalam
pembuatan website, dikenal dua komponen penting yaitu www dan HTML5. Dimana www
merupakan suatu protokol standar dari internet, sedangkan HTML5 merupakan
script atau program standar yang dijalankan oleh www atau internet. Proyek HTML5
ini dibuat dengan menggunakan media web editor notepad.
Di
dalam HTML5 terdapat dua bagian dokumen
yaitu bagian kepala (head) dan bagian tubuh (body). Pembuatan proyek web/HTML5
sekolah dengan menggunakan notepad ini dimulai dengan pembuatan bahasa HTML5
dalam notepad. Yang kemudian untuk setiap baris dalam proyek ini selalu dibuat
dengan bahasa HTML5 tersendiri sesuai dengan apa yang akan kita buat.
B.
Saran
Bagi
para pemula, pembuatan web/HTML5 merupakan dasar yang penting sehingga dapat
membantu ketika kita memulai sebuah proyek web tanpa menggunakan cara yang
praktis.
Referensi
:
5. cari buku di internet,perpustakaan
