Laporan Praktikum Pemrograman Web Modul III





LAPORAN PRAKTIKUM
PEMROGRAMAN WEB I
MODUL III




Disusun Oleh :

Paulus Diki Sugianto
2015091079
SI 2015 A


SISTEM INFORMASI (S1)
FAKULTAS ILMU KOMPUTER
UNIVERSITAS KUNINGAN
2016



HTML5


A.     Dasar Teori

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.

Fitur yang ada pada HTML5 :

·         New  Semantic  Elements:  Seperti  pada  elemen  <header>,  <footer>,   and
<section>.
·         Forms 2.0: Perbaikan form web HTML di mana atribut baru telah diperkenalkan tag <input>.
·         Persistent      Local     Storage:     Untuk     menghilangkan      ketergantungan pada plugin pihak ketiga.
·         WebSocket: Sebuah generasi teknologi terbaru komunikasi dua arah untuk aplikasi web.
·         Server-Sent Events: memperkenalkan even yang mengalir dari web server ke web browser yang disebut Server-Sent Events (SSE).
·         Canvas: Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan JavaScript.
·         Audio & Video: Anda dapat menanamkan/embed audio atau video pada halaman web Anda tanpa menggunakan plugin pihak ketiga.
·         Geolocation: Pengunjung dapat memilih untuk berbagi lokasi fisik mereka dengan aplikasi web Anda..
·         Microdata: Ini memungkinkan Anda membuat kosakata Anda sendiri di luar HTML5 dan memperluas halaman web Anda dengan kostum semantics.

·         Drag and drop: Drag dan drop item dari satu lokasi ke lokasi lain pada halaman web yang sama.


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, yaitu   :
<DOCTYPE html!>.

HTML5 DOCTYPE
<!DOCTYPE html>

Vesri HTML sebelumnya DOCTYPE menggunakan rerferensi DTD, seperti contoh: 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">

Struktur Dasar HTML5
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


Pre Test

Buatlah web dengan tampilan sebagai berikut :
 
Jawaban coding web adalah :


Praktikum I

Hasil Output adalah :
Analisis :
Di dalam pembuatan web HTML 5 harus menggunakan deklarasi DOCTYPE untuk syntak html dan bersifat case-sensitif. Dengan HTML 5 ini menggunakan syntak yang lebih sederhana dari pada html yang sebelum-sebelumnya yaitu <!DOCTYPE html>

Tag <title> di sana digunakan untuk memberikan judul halaman web yang di tuliskan.

Selanjutnya adalah tag <style> adalah untuk model html yang digunkan sesuai dengan keinginan si perancang di antaranya adalah penggunaan font, ukuran font, bingkai yang di gunakan, dan warna bingkai lalu yang terakhir adalah margin dan juga padding yaitu untuk tataletak tulisan di dalam bingkai.

Tag <nav> di atas adalah untuk membuat daftar/list yang di isi oleh si perancang berbentuk horizontal atau ke samping bukan ke bawah seperti bentuk daftar pada umumnya.

Tag <section> di gunakan untuk memisahkan bagian-bagian dari struktur web yang di tulis di dalam tag <section> itu sendiri.

Tag <article> di dalam tag <section> adalah untuk membentuk pemisah di dalam tag <section> atau membuat bingkai  di dalam bingkai.

Tag <footer> adalah untuk digunakan pada bagian bawah halaman untuk menampilkan beberapa informasi mengenai website.

Praktikum II

Hasil Output adalah :



Analisis :


Seperti perogram yang sebelumnya jika anda ingin  membuat web HTML5 anda harus menggunakan <!DOCTYPE html>.

Tag <form> adalah untuk membuat formulir pendaftaran akun di dalam web yang isinya tentang informasi atau penulisan informasi/data yang di tuliskan secara dinamis, yang menggunakan atribut action.

Tag <select> yaitu untuk daftar pemilihan data yang sudah di isi secara statis yang jika kita mengklik daftar tersebut akan muncul daftar data yang lain berderet ke bawah.

Di dalam tag <select> ada juga tag <option> yaitu untuk data yang di masukan di dalam tag <select>, seperti yang ada pada programm di atas yaitu tentang nama merk mobil.

Tag <textarea> adalah tag yang di gunakan untuk memberikan informasi di dalam text area yang bisa kita hapus dan kita ganti sesuai dengan keinginan kita, ada juga beberapa atribut seperti name yaitu untuk memberikan variable text area tersebut, dan cols & rows yaitu untuk ukuran kotak text area.


Tag <button>di gunakan unntuk menampilkan tombol yang bisa di klik dan menampilkan halaman atau informasi. Ada juga beberapa atribut yang di miliki oleh tag <button> yaitu yang di gunkan oleh scrip di atas adalah atribut type yaitu untuk tipe tombol yang di gunakan, oneclik yaitu untuk menampilkan informasi jika kita mengklik tombol button.



<input> adalam tag untuk memasukan data yang akan di gunakan dan juga atribut list untuk memnuat daftar yang akan di masukan seperti peda program di atas. Ada juga tag <datalist> yaitu untuk memasukan dan menampilkan data yang di masukan.
 Praktikum III 


Hasil Output adalah : 

 Analisis :

Tag <p> di atas adalah untum menampilkan tulisan yang di tulis oleh si perancang.



Tag <svg> adalah untuk menampilkan gambar yang di inputkan dengan tag gambar atau bidang datar, jika kita tidak menggunakan tag < svg> maka akan menampilkan tulisan “sorry, your browser does not support inline SVG.” Ada juga atribut height dan width untuk menentukan ukuran symbol yang akan di tampilkan.



Tag <circle yaitu untuk menampilkan symbol lingkaran dan dengan atribut cx, xy, r adalah untuk menentukan ukuran lingkaran tersebut. Adapun atribut stroke yaitu untuk menampilkan garis di luar lingkaran seperti bingkai. Ada juga tag yang di gunakan untuk meberi warna pada symbol yaitu atribut fill.


Selanjutnya adalah tag <rect> adalah untuk menampilkan symbol persegi panjgan. Adapun beberapa atribut yang di gunakan yaitu width dan height di gunakan untuk menentukan ukuran symbol, selanjutnya adalah atribut style yaitu untuk menampilkan warna menggunakan kode angka seperti pada program di atas (red,green,blue) dan juga ada atribut stroke untuk membuat bingkai.

Tag <polygon> adalah tag untuk membuat symbol bintang tetapi dengan penentuan garis atau sudut yang tepat dengan menggunakan atribut points sehingga membuat hasil yang sempurna, jika penenpatan angkanya salah maka bentuk bintang tidak akan sempurna. Adapun beberapa atribut yang di gunkan seperti symbol yang sebelumya yaitu stroke, style, dan fill.

Yang terakhir adalah tag yang di gunakan untuk menampilkan sebuah logo yaitu tag <defs>, adapun untuk tag untuk memberikan efek warna pada logo yaitu dengan tag <linierGradient>, ada juga tag <stop offset> yaitu untuk penempatan warna di dalam logo atau juga bisa untuk mengombinasikan dua warna yang berbeda di dalam satu logo seperti pada program di atas yaitu warna kuning dengan warna merah.

Tag <ellipse> yaitu untuk menentukan tata letak logo yang diinginkan dengan menggunakan atribut cx dan cy untuk menentukan kolom keberapa logo di tempatkan, sedangkan rx dan ry adalah untuk menentukan seberapa lebar logo yang kita inginkan.


                 Praktikum IV

                
                  Hasil Output adalah :

                  Analisis :

                  
Jika anda ingin menampilkan video di dalam web maka anda harus menggunakan tag <video> lalu gunakan atribut width dan height untuk menentukan ukuran video tersebut.

Tag source src di gunakan untuk mencari file yang ingin di tampilkan dengan syarat file tersebut satu folder dengan script program .

                  Tugas :

Membuat video pribadi lalu menampilkanya di web.

 
                  Hasil Output :



Jelaskan kelebihan HTML 5 dibanding dengan HTML sebelumnya, dan berikan contohnya dalam bentuk script.
Jawaban :
1.HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.
Beberapa kelebihan yang ada pada HTML5 :
  • Doctype lebih sederhana dari html sebelumnya
  • 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.









Komentar

Posting Komentar