Praktikum Pemograman Web 1 Modul 3

LAPORAN PRAKTIKUM

PEMOGRAMAN WEB 1

DISUSUN OLEH :

Nurintan Yuliani

2015091076

SI 2015 B

Laboraturium Komputer
UNIVERSITAS KUNINGAN

Jl.Cut Nyak Dhien No.36A Cijoho Kuningan Telp.Faks/ : 0232-874824

2016-2017

BAB I

DASAR TEORI

A.Dasar Teori HTML5

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (Word Wide Web Consortium,W3C) untuk mendefinisikan sebuah bahasa markah tunggal yag dapat ditulis dengan cara HTML atau XHTML.HTML5 merupakan jawaban atas pengembangan dari 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:

> Forms 2.0 :perbaikan form web HTML dimana 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 Event :memperkenalkan event yang mengalir dari web server ke web browser yang disebut server-sent Event (SSE).

> Canvas : ini mendukung gambar dua dimensi surface yang dapat diprogram dengan java script.

> Audio dan Video : anda dapat menamkan/embeded audio atau video pada halaman web anda tanpa menggunakan plugin pihak ketiga.

> Geolocation : Pengunjung dapat memilih untuk berbagi lokasi mereka dengan aplkasi web anda.

> Microdata : ini memungkinkan anda membuat kosa kata anda sendiri diluar 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.

HTML 5 merupakan DOCTYPE yang ditentukan untuk memastikan bahwa browser merender atau membaca halaman situs web dalam mode standar.Deklarasi Doctype untuk sintaks HTML dan bersifat case-sensitif,<DOCTYPE html!> . DOCTYPE dari versi sebelumnya dari HTML masih panjang karena masih berbasis SGML dan karena itu diperlukan suatu referensi untuk DTD.Dengan HTML 5 ini tidak lagi digunakan dan browser hanya memerlukan syntax yang lebih sederhana yaitu: <DOCTYPE html!>.

BAB II

PRAKTIKUM DAN ANALISIS

Praktikum2_modul3

<!DOCTYPE.html>

<style>

body

{font-family: Verdana,sana-serif;font-size:0.em;}

header, nav,section,article,footer

{border,1px solid grey; margin:5px; padding : 8px;}

nav ul {margin :0; padding:0;}

nav ul li {display:inline; margin:5px;}

</style>

</head>

<body>

<h1>HTML5 Skeleton</h1>

</header>

<nav>

<ul>

<li><a href="#">About</a></li>

</ul>

</nav>

<h2> UNIKU FACULTY</h2>

<p> Fakultas Ilmu Komputer </p>

</article>

<p> Fakultas Ilmu Pendidikan</p>

</article>

<p> Fakultas Ilmu Kehutanan </p>

</article>

</section>

<p>© @Intan Yuliani FKOM FACULTY</p>

</footer>

</body></html>

Tampilannya :

Analisisnya :

Pada Praktikum kali ini membuat halaman web dengan menggunakan HTML5,pada HTML5 ini ada tag-tag baru yang tidak digunakan di HTML sebelumnya contohnya tag : <!DOCTYPE.html> mendifinisikan bentuk dokument , dan contoh selanjutnya seperti script praktikum 2 pada

<style>

body

{font-family: Verdana,sana-serif;font-size:0.em;}

header, nav,section,article,footer

{border,1px solid grey; margin:5px; padding : 8px;}

nav ul {margin :0; padding:0;}

nav ul li {display:inline; margin:5px;}

</style>

pada secrip ini pembuatan dengan tag <style> yaitu untuk mendefinisikan informasi style untuk dokumen HTML
untuk pembuatan style untuk sebuah halaman web yaitu dengan menggunakan tanda {} (kurung kurawal) untuk mendefinisikan pengaturan huruf atau yang lainnya contohnya {font-family: Verdana,sana-serif;font-size:0.em;}
contohnya untuk menentukan jenis huruf dengan font-family : dan penulisan jenis huruf misalkan ARIAL font-family : Arial ; di akhir pengisian diberikan (;) untuk memisahkan satu perintah dengan perintah yang lainnya
tag <nav> yaitu untuk membuat navigasi link yaitu link Home,Menu,About

<nav>

<ul>

<li><a href="#">About</a></li>

</ul>

</nav>

tag <article> yaitu untuk membuat sebuah artikel yaitu artikel dari penulisan text tampilan yang ada di web seperti :

<p> Fakultas Ilmu Komputer </p>

</article>

tag <section> untuk membuat bagian dalam dokumen
tag <footer> untuk mendefinisikan bagian footer seperti :

<p>© @Intan Yuliani FKOM FACULTY</p>

</footer>

Praktikum3_modul3

<! Doctype html>

<html>

<head>

<body>

<option value="volvo">Volvo</option>

</select>

The cat was playing in the garden.

</textarea>

<button type="button" onclick="alert('Anda menekan Tombol Click Me')">Click Me!</button>

</datalist>

</form>

</body>

</html>

Tampilannya :

Analisisnya :

Pada praktikum3 banyak mengandung tag tag dari HTML sebelumnya seperti :

tag <form> untuk mendefinisikan sebuah form HTML untuk input form
tag <select> untuk membuat daftar drop-down dengan perintahnya

<option value="volvo">Volvo</option>

</select>

pada <option> adalah untuk pemilihan yang ad di dalam daftar

untuk <textarea> adalah untuk membuat kolom yang multiline

The cat was playing in the garden.

</textarea>

tag <button> untuk membuat tombol ,jadi apa bila kita mengklik Click Me! maka akan muncul text Anda menekan Tombol Click Me

<button type="button" onclick="alert('Anda menekan Tombol Click Me')">Click Me!</button>

tag <datalist> untuk menentukan daftar pilihan yang telah ditetapkan untuk kontrol input

<datalist="browser">

</datalist>

ini adalah tampilannya setelah diklik

Praktikum5_modul3

<!DOCTYPE html>
<html><body>
<p>circle
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"/>
sorry,your browser does not support inline svg.
</svg>

<p>Rectangle
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255); stroke-width:10; stroke:rgb(0,0,0)"/>
</svg>

<p>Start
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;"/>
</svg>
<p>logo
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
<text fill="#ffffff" font-size="45"
font-family="verdana" x="50" y="85">svg</text>
sorry,your browser does not support inline svg.
</svg>
</body>
</html>

Tampilannya :

Analisisnya :

Pada praktikum5 ini yaitu pembuatan simbol-simbol dan sebuah logo untuk pembuatannya yaitu dengan mendefinisikan simbol apa yang akan di buat seperti lingkaran :

<p>Circle

<circle cx="50" cy="50" r="40"

stroke ="green" stroke-width="4" fill="yellow"/>

Sorry your browser does not support inline SVG.

</svg>

pada tag <p> untuk membuat paragraf yaitu sebuah paragraf text Circle.
selanjutnya mengatur ukuran dan warna untuk simbol lingkaran tersebut dengan menggunakan perintah <svg> </svg> yaitu untuk mendeskripsikan gambar sebagai garis dan bentuk contohnya <svg width="100" height="100">
dan untuk mengatur warna dan untuk menentukan ukuran dari simbol circle tersebut dengn perintah <circle cx="50" cy="50" r="40"
stroke ="green" stroke-width="4" fill="yellow"/>
dan diakhiri dengan tag </svg> untuk pembuatan satu buah simbol dan disini ada 4 buah simbol dengan bentuk berbeda-beda

Praktikum6_modul3

Tampilannya :

Analisisnya :

pada praktikum6 ini kita akan memutar 2 video di halaman webnya dengan menggunakan tag

tag <video> untuk membuat video atau film dengan mendefinisikannya sebagai berikut

untuk mendefinisikan video apa yang akan kita putar di halaman webnya dan memberi akhiran .mp4 pada akhiran file vidio yang akan kita putar dan dengan typenya video/mp4

karna membut 2 video maka membuat double perintah :

jangan lupa untuk menyimpan video bersamaan dengan script HTMLnya.

BAB III

TUGAS

Jelaskan kelebihan HTML5 dibandingkan dengan HTML sebelumnya dan berikan contohnya dalam bentuk script
Buatlah Script HTML untuk memutar video .mp4

Jawab !!

kelebihan HTML5

kelebihan HTML5 ini memudahkan untuk merancang sebuah halaman web dan dapat pula menmpilkan video,music,game,bahkan film pada halaman web,namun pada html sebelumnya tidak dapat menyisipkan video atau musik pada halaman webnya.
Aplikasi multimedia juga mendapat manfaat dari HTML5 karena memuat lebih cepat dari pada memakai HTML sebelumnya.
Terdapat fitur-fitur canggih pada HTML5 dan lebih simpel dan fleksibel.

contoh scrip HTML5 memutar musik

<!DOCTYPE html>

<html>

<head>

<title> Cara Memasukkan Playlist Lagu Pada Dokumen HTML </title>

</head>

<body>

</audio>

</body>

</html>

Tampilannya :

Analisisnya :
disini saya membuat pemutar music yang menggunakan HTML5 yang disebutkan tadi bahwa HTML5 bisa menyisipkan audio dengan perintah tag <audio> </audio>
bukan hanya audio karna bisa juga untuk membuat pemutar video di html5 ini dengan bantuan tag <video> </video> yang sudah saya coba di praktikum6

HTML sebelumnya

<html>
<body background="Chrysanthemum.jpg">
<h1><center>data registrasi mahasiswa<br>
sistem informasi<br></h1></center>
<from name"from 1" method="get">
<pre><center>
NIM <input type="text">
Nama<input type="text">
Jenis Kelamin<input type="radio" name="Jk1" value="p" checked>perempuan
<input type="radio" name="Jk2" value="l">laki-laki
Hobi <input type="checkbox" value="renang">membaca
<input type="checkbox" value="baca">berenang
</pre></center>
</body>
</html>

Tampilannya :

Analisisnya :
pada HTML sebelumnya ini saya membuat sebuah form yang berisi NAMA,NIM,JKenis Kelamin yang menggunakan inputan type radio ya dapat memilih hanya salah satu dan Hobi yang menggunakan inputan type chekbox yang dapat memilih lebih dari satu
dan pada halaman web terdapat background gambar.
pada html sebelumnya belum banyak animasi atau fitur-fitur yang bisa dimasukan .

2. membuat scrip untuk memutar video

<html>

<head>

<title>Video</title>

</head>

<body>

</embed>

</body>

</html>

Tampilannya :

Analisisnya :

pada tugas kali ini saya membuat pemutar video yang apabila di panggil di browser dengan otomatis video tersebut akan langsung memutar,

dengan penggunaaan tag <embed> untuk menyisipkan atau membuat video atau musik dan tergantung pada browser yang di pakai .
tidak perlu membuat tag <video> untuk membuat video atau tag <audio> untuk membuat pemutar music cukup dengan menyisipkan tag <embed> maka akan mengikuti file yang di masukan tergantung pada type dari jenis file apa yang akan dimasukan .contohnya : type="video/mp4"
dan ini lah scrip dari pembuatan video dengan tag <embed>

</embed>

untuk memutar secara otomatisnya yaitu dengan perintah autostart="true" .

Sekian Laporan Praktikum HTML5 dari saya mohon maaf jika ada salah kata

Terima Kasih

Cari Blog Ini

Laporan Praktkum Pemograman Web 1

Praktikum Pemograman Web 1 Modul 3

Komentar

Posting Komentar

Postingan populer dari blog ini

Laporan Praktikum Pemograman Web Modul 4 CSS (Cascading Style Sheet),Class dan Id CSS

Laporan Praktikum Pemograman Web 1 Modul 8 ,PHP DASAR

Laporan Praktikum Pemograman Web 1, Modul 1