mengenal html5.doc
TRANSCRIPT
-
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
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
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 -
7/27/2019 Mengenal HTML5.doc
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/27/2019 Mengenal HTML5.doc
7/35
Bse
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
9/35
BulC
BliCBa hrefF)('((9C!eptember )('(BaCBliC
BliCBa hrefF)('((CAugust )('(BaCBliC
BliCBa hrefF)('((C-ul% )('(BaCBliC
BulC
BasideC
!elan3utn%a" !e
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
11/35
,# &enanganan kesalahan %ang lebih baik#
*# Lebih ban%ak markup untuk menggantikan s dengan do
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
13/35
HTML5 ini dibuat men%ederhanakan kompleksitas penggunaan media 7ideo
dengan standard baru %aitu penggunaan tag B7ideoC# Dengan fitur baru ini maka kita
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
15/35
Blink relFst%lesheet hrefFpathtost%lesheet#
-
7/27/2019 Mengenal HTML5.doc
16/35
B7ideo
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
18/35
Membantu !ear
-
7/27/2019 Mengenal HTML5.doc
19/35
B8@ml 7ersionFR'#(R en
-
7/27/2019 Mengenal HTML5.doc
20/35
Bbif
-
7/27/2019 Mengenal HTML5.doc
21/35
Bbin
-
7/27/2019 Mengenal HTML5.doc
22/35
Bimg altFRHTML5R sr
-
7/27/2019 Mengenal HTML5.doc
23/35
b. Langkah/Langkah mengurangi 8 meminimali(ir err!r( dan 9arning(
bl!g 8 9eb(ite
&ertama"
-
7/27/2019 Mengenal HTML5.doc
24/35
4ari tanda dash pada kode 4!! kemudian hapus# 4ontohn%a
[;;;;;;;;;;;;;; HEADE+ ;;;;;;;;;;;;;;[
!ehingga men3adi
[ HEADE+ [
-angan simpan dulu" tetapi
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
26/35
masih merasakan %ang naman%a HTML * adalah kemampuan design :eb %aitu
dengan menggunakan
-
7/27/2019 Mengenal HTML5.doc
27/35
/itur aksesibilitasn%a# !eperti atribut alt dan summar%
Tekn!l!gi aa yang akan di erkenalkan HTML5
A&I =Apli
-
7/27/2019 Mengenal HTML5.doc
28/35
se
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
30/35
F. Mamukah HTML5 Menggantikan M!bile
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
32/35
5# HTML5 tidak efisien#
Aplikasi nati7e
-
7/27/2019 Mengenal HTML5.doc
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
-
7/27/2019 Mengenal HTML5.doc
34/35
DA/TA+ &.!TAKA
+oss%dian# )(') Diambil dari url
httpross%dian#:ordpress#
-
7/27/2019 Mengenal HTML5.doc
35/35