Mengenal HTML5.doc

7/27/2019 Mengenal HTML5.doc

1/35

MENGENAL HTML5

Makalah ini disusun sebagai tugas mata kuliah Teknologi Informasi dan Komunikasi

Dosen pengampu !eptia Lutfi"!#Kom" M#Kom

$leh

Ti%a &angestika &utri

''()*')''*

+ombel ,

-.+.!AN K.+IK.L.M DAN TEKN$L$GI &ENDIDIKAN

/AK.LTA! ILM. &ENDIDIKAN

.NI0E+!ITA! NEGE+I !EMA+ANG

)(',

1


2/35

DA/TA+ I!I

Halaman

Halaman !ampul

Daftar Isi 1111111111111111111111111111# )

2A2 I# &ENDAH.L.AN

A# Latar 2elakang 1111111111111111111111 ,

2# Tu3uan 1111111111111111111111111# *

2A2 II# &EM2AHA!AN

A# &engertian111111111111111111111111 *

2# &engenalan !truktur HTML511111111111###11111 *

4# !e3arah HTML51111##11111111111111111# '(

D# 4ara Membuat 2log 0alid dengan HTML511111111111##'

E# HTML 5 Men3adi !olusi &ara 6eb De7elopment111111111)*

/# Mampukah HTML5 Menggantikan Mobile Nati7e Apps8 11111# )9

2A2 III# &EN.T.&

A# Kesimpulan 11111111111111111111111# ,)

2# !aran 11111111111111111111111111 ,,

DA/TA+ &.!TAKA 11111111111111111111111## ,*

2


3/35

2A2 I

&ENDAH.L.AN

A. Latar Belakang

!emakin pesatn%a perkembangan teknologi menuntut otak manusia untuk

berfikir keras demi memperoleh hasil kar%a %ang bermanfaat untuk manusia itu

sendiri di muka bumi# &erkembangan teknologi seakan memba:a manusia ke dalam

dunia modern dimana nantin%a semua kegiatan manusia tidak luput dari %ang

naman%a teknologi# Teknologi semakin lama semakin pesat dan mau tidak mau "

manusia harus memenuhi kebutuhann%a dengan memanfaatkan perkembangan

teknologi tersebut# Kreatifitas %ang dimiliki oleh masing;masing indi7idu bisa

dituangkan le:at dunia n%ata maupun dunia ma%a # Hingga kreati7itas %ang dimiliki

oleh masing;masing indi7idu diketahui oleh khala%ak" bahkan dari sebuah kreati7itas

tersebut indi7idu bisa mendapatkan penghasilan untuk memenuhi kebutuhan hidup

sehari;harin%a# Dengan mempublikasikan kreati7itas tersebut" indi7idu mau tidak

mau harus mengembangkan kreati7itas untuk mampu bersaing di dalam bisnis

tersebut # Nah" mungkin memublikasikann%a bisa dengan le:at blog" dll# !ebelum

masuk ke dalam dunia ma%a untuk mempublikasikan kreati7itas %ang ingin

dituangkan" indi7idu harus mangetahui konsekuensi apa sa3a %ang harus diterima saat

indi7idu tersebut sudah masuk dalam dunia ma%a# Karena dalam dunia ma%a "

terdapat semua hal apa sa3a %ang dibutuhkan oleh semua manusia# 2aik hal tersebut

meliputi hal %ang positif maupun hal negatif # Apalagi 3ika anak usia rema3a %ang

menuangkan kreati7itas tersebut masuk dalam dunia ma%a# &erlu penga:asan %ang

ketat dari orangtua dan orang;orang di sekitarn%a " agar tidak ter3erumus dalam dunia

3


4/35

%ang harusn%a asik dan bermanfaat untuk kehidupann%a# Nah" untuk publikasi di

sunia ma%a" perlu adan%a blog pribadi # Dalam blog tersebut bisa dibuat dengan html"

html 5 misaln%a# Dalam makalah ini" kita akan mempela3ari bagaimana membuat

blog dengan html 5 #

B. Tujuan

Adapun tu3uan pembuatan makalah ini adalah untuk memenuhi tugas mata

kuliah teknologi informasi dan komunikasi" serta untuk mengetahui

bagaimana untuk mendefinisikan sebuah bahasa markah tunggal %ang dapat

ditulis dengan


5/35

penanda# !emanti< sendiri mempun%ai arti bahasa %ang berfokus pada penanda untuk

mengetahui arti %ang terkandung di dalamn%a#

B. Pengenalan Struktur HTML5

!eiring dengan perkembangan 6eb %ang semakin ino7atif" HTML * %ang

telah berkibar selama hampir satu dekade ini akhirn%a mulai semakin dikembangkan

kearah %ang lebih baik atau kita kenal dengan nama HTML 5# HTML 5 men3an3ikan

fleksibilitas lebih bagi penulis" memungkinkan 6ebsite lebih menarik dan interaktifserta memperkenalkan dan meningkatkan berbagai /itur" seperti Kontrol bentuk" A&I"

multimedia" struktur" dan semantik#

HTML 5 Mulai beker3a pada tahun )((*" diba:ah asuhan 6,4 HTML 6G

dan 6HAT6G# 2ahkan" Empat 0endor 2ro:ser besar seperti /irefo@" Apple"

$pera" Dan Google kabarn%a ikut mengembangkan HTML 5#

!truktur Dasar HTML dapat di lihat diba:ah ini

Gambar diatas adalah !truktur HTML * %ang masih menggunakan Elemen

di7 %ang masing;masing memberikan id deskriptif atau kelas untuk menggambarkan

bagian;bagian khusus# 0ersi HTML * masih kekurangan semantik# HTML 5 mulai

memperbaiki hal ini dengan membuat masing;masing elemen me:akili bagian %ang

5
http://rossydian.files.wordpress.com/2012/08/7.jpg


6/35

berbeda dan tidak perlu menggunakan penggambaran khusus# 4ontohn%a seperti

gambar diba:ah ini

Gambar diatas menun3ukkan bah:a Elemen;elemen di7 dapat digantikan

dengan unsur;unsur baru header" na7" bagian" artikel" samping" dan footer#

Markup untuk Dokumen dapat digambarkan sebagai berikut

Bbod%C

BheaderC1BheaderC

Bna7C1Bna7C

Barti


7/35

Bse


8/35

BheaderC

BheaderC

Bh'CE@ample 2logBh'C

Bh)CInsert tag line here#Bh)C

BheaderC

!etelah itu bagian lainn%a adalah /ooter %ang berisi data hak 4ipta" Link ke halaman

Terkait dan lainn%a" !trukturn%a seperti diba:ah ini

BfooterC )('( D- Note In


9/35

BulC

BliCBa hrefF)('((9C!eptember )('(BaCBliC

BliCBa hrefF)('((CAugust )('(BaCBliC

BliCBa hrefF)('((C-ul% )('(BaCBliC

BulC

BasideC

!elan3utn%a" !e


10/35

BheaderC

Bh*CBa hrefF mulai membuat standar baru

ini pada tahun )((*ketika Konsortium 6,4 sedang fokus pada pengembangan

?HTML )#( di masa depan" sementara HTML *#(' belum pernah diperbarui se3ak

tahun )(((#P)Q !e3ak tahun )((9" 6,4 dan 6HAT6G beker3a sama dalam

pengembangan HTML5 setelah 6,4 mengakhiri Kelompok Ker3a &engembangan

?HTML )#(#P,Q

Meskipun HTML5 telah dikenal luas oleh para pengembang :eb se3ak lama"

HTML5 baru men


11/35

,# &enanganan kesalahan %ang lebih baik#

*# Lebih ban%ak markup untuk menggantikan s dengan do


12/35

/irefo@" dan $pera# Kabarn%a IE9 =Internet E@plorer> akan mendukung beberapa fitur

dari HTML5#

&embuatan HTML5 3uga di karenakan !tandard HTML* %ang di3umpai

ban%ak memiliki kelemahan untuk mendukung aplikasi :eb %ang interaktif# Akibat

hal ini ban%ak orang menambahkan fitur baru baik disisi aplikasi :eb ataupun disisi

bro:ser# !olusi ini dikenal dengan plugin dan salah satun%a adalah /lash dan

!il7erlight# !emakin men3amurn%a plugin didalam aplikasi atau bro:ser membuat

aplikasi :eb ini susah untuk menembus ban%ak bro:ser# Hal ini dikarenakan setiap

plugin mempun%ai


13/35

HTML5 ini dibuat men%ederhanakan kompleksitas penggunaan media 7ideo

dengan standard baru %aitu penggunaan tag B7ideoC# Dengan fitur baru ini maka kita


14/35

e. "ang Perlu #iketahui Tentang HTML5

$. #%CT"P&

D$4T&E ditulis sebelum tag BhtmlC# /ungsi dari D$4T&E adalah

memberitahukan ke bro:ser bah:a tipe dokumen %ang digunakan adalah HTML#

Dalam dokumen HTML 7ersi sebelumn%a D$4T&E dituliskan dengan

BOD$4T&E HTML &.2LI4 ;6,4DTD HTML *#(' TransitionalEN

http:::#:,#orgT+

html*loose#dtdC

!edangkan dalam HTML5 D$4T&E han%a ditulis

BOD$4T&E HTMLC

'. Tidak adanya Tye ada (crit dan link

!our


15/35

Blink relFst%lesheet hrefFpathtost%lesheet#


16/35

B7ideo


17/35

digunakan untuk menun3ukan :aktu" biasan%a digunakan untuk menun3ukkan :aktu

publish artikel" komentar" forum dan lain sebagain%a# BtimeCmemiliki atribut

datetime %ang berisi :aktu bisa dalam format %%%%;mm;dd atau 3am seperti '9((#

0igure1 dan 0igcati!n1

BfigureC digunakan sebagai pembungkus untuk tag BimgC# Tetapi tidak selalu semua

tagBimgC kita bungkus dengan BfigureC" han%a gambar;gambar %ang utama sa3a atau

gambar;gambar %ang ingin kita beri label# Nah kita memberi labeln%a dengan

Bfig


18/35

Membantu !ear


19/35

B8@ml 7ersionFR'#(R en


20/35

Bbif


21/35

Bbin


22/35

Bimg altFRHTML5R sr


23/35

b. Langkah/Langkah mengurangi 8 meminimali(ir err!r( dan 9arning(

bl!g 8 9eb(ite

&ertama"


24/35

4ari tanda dash pada kode 4!! kemudian hapus# 4ontohn%a

[;;;;;;;;;;;;;; HEADE+ ;;;;;;;;;;;;;;[

!ehingga men3adi

[ HEADE+ [

-angan simpan dulu" tetapi


25/35

2an%ak aplikasi %ang selama ini han%a sebatas akses di komputer dan harus diinstal

terlebih dahulu" kini aplikasi :ebsite memberikan ruang pada kita untuk men sebuah organisasi menentukan standar internasional :ord 6ide 6eb

pada tahun '99 memperkenalkan HTML ,#) %ang memiliki ban%ak fitur tambahan

seperti table" applet" supers


26/35

masih merasakan %ang naman%a HTML * adalah kemampuan design :eb %aitu

dengan menggunakan


27/35

/itur aksesibilitasn%a# !eperti atribut alt dan summar%

Tekn!l!gi aa yang akan di erkenalkan HTML5

A&I =Apli


28/35

se


29/35

Elemen strong menegaskan le7el kepentingan" bukan sekadar penekanan

emphasis lagi#

Elemen hr dapat digunakan untuk memisahkan le7el paragraf sesuai pokok

pikirann%a#

dan lain;lain#

&lemen dan atribut yang tidak digunakan

2erikut ini beberapa elemen dan atribut %ang tidak lagi mun


30/35

F. Mamukah HTML5 Menggantikan M!bile


31/35

!ebagai teknologi %ang tergolong baru" menggunakan HTML5 untuk

membuat aplikasi untuk mobile menggantikan nati7e app bukanlah tanpa tantangan#

Mari kita pilah;pilah beberapa poin %ang men3adi masalah

'# Nati7e App lebih


32/35

5# HTML5 tidak efisien#

Aplikasi nati7e


33/35

isi dari 6aring 6era 6anua" sebuah teknologi inti dari Internet# HTML5 adalah

re7isi kelima dari HTML=%ang pertama kali di dan hingga bulan -uni )('' masih dalam

pengembangan#HTML5 dapat digunakan untuk membuat blog agar 7alid" dapat 3uga

untuk mengetahui blog %ang telah dibuat sudah 7alid apa belum # HTML5 3uga

memperkenalkan beberapa teknologi


34/35

DA/TA+ &.!TAKA

+oss%dian# )(') Diambil dari url

httpross%dian#:ordpress#


35/35

Mengenal HTML5.doc

Documents

Transcript of Mengenal HTML5.doc