Kel 1 Editbgfgffgfgf

PENGEMBANGAN APLIKASI BERBASIS WEB (HTML)
Kel : 1 Ega wandanu(111109100000)
Nurul Ainis (1111091000003)

Rifal Mafaza(1111091000005)
HTML
HTML ( HyperText Markup Language) adalah sebuah bahasa standar yang digunakan browser Internet untuk membuat halaman dan dokumen pada sebuah web yang kemudian dapat diakses dan di baca layaknya sebuah artikel. HTML ini memiliki beberapa kegunaan diantaranya adalah :

Kita dapat menampilkan teks dalam bentuk cetakan tebal Kita dapat menampilkan sekelompok kata dalam bentuk miring Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul heading dan sebaginya
Introduction
Contoh
Penjelsan
<!DOCTYPE html> <html> <body>

<h1>My First Heading</h1> <p>My first paragraph.</p>
Deklarasi DOCTYPE mendefinisikan tipe dokumen

Teks antara <html> dan </ html> menjelaskan halaman web Teks antara <body> dan </ body> adalah isi halaman yang terlihat Teks antara <h1> dan </ h1> ditampilkan sebagai judul Teks antara <p> dan </ p> ditampilkan sebagai sebuah paragraf
</body> </html>
HTML Table
HTML Table
Source Code
Result
baris 1, sel 1 baris 1, sel 2
baris 2, sel 1
baris 2, sel 2
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
</body> </html>
Table Header
Header dalam table di definisikan dengan tag <th>
Source Code
Result
Header 1
Header 2
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
</body> </html>
HTML List
HTML Unordered Lists

Unordered list dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li> Daftar item ditandai dengan lingkaran hitam biasanya kecil
Source Code
<!DOCTYPE html>
<html> <body>
Result
Coffee
Milk
<ul> <li>Coffee</li> <li>Milk</li> </ul>
HTML Ordered Lists

Ordered list dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>. Daftar item ditandai dengan angka
Source Code
<!DOCTYPE html>
<html> <body> <ol> <li>Coffee</li> <li>Milk</li> </ol> </body> </html>
Result
1.
2.
Coffee
Milk
HTML Description Lists

Tag <dl> mendefinisikan daftar deskripsi. Tag <dl> digunakan dalam hubungannya dengan <dt> (mendefinisikan istilah / nama) dan <dd> (menjelaskan setiap istilah / nama)
Source Code
<!DOCTYPE html> <html> <body> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html>
Result
Kopi - Hitam minuman panas Susu - Minuman dingin putih
HTML Form
HTML Form
Bentuk HTML dapat mengandung unsur-unsur masukan seperti bidang teks, checkbox, radio button, tombol submit dan banyak lagi. Formulir juga dapat berisi daftar pilih, textarea, fieldset, legenda, dan elemen label
Text Fields
<input type="text"> mendefinisikan satu baris field input pengguna dapat memasukkan teks ke:
Source Code
<!DOCTYPE html>
<html> <body>
Result
Nama depan Nama belakang : :
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> </body> </html>
Password Field
<input type="password"> mendefinisikan kolom password:
Source Code
<!DOCTYPE html>
<html> <body> <form> Password: <input type="password" name="pwd"> </form> </body> </html>
Result
Password :
Radio Buttons
Source Code
<!DOCTYPE html>
<html> <body> <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> </body> </html>
Result
Checkbox
<input type="checkbox"> mendefinisikan kotak centang. Checkbox membiarkan pengguna pilih ZERO atau LEBIH pilihan dari sejumlah pilihan
Source Code
<!DOCTYPE html>
<html> <body> <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> </body> </html>
Result
Submit Button
<input type="submit"> mendefinisikan tombol kirim
Source Code
<!DOCTYPE html>
<html> <body> <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> </body> </html>
Result
HTML Headings
Judul HTML didefinisikan dengan <h1> untuk <h6> tag
Source Code
<!DOCTYPE html> <html> <body> <h1>This is heading 1</h1>
Result
This is heading 1
This is heading 2 This is heading 3 This is heading 4
<h2>This is heading 2</h2>

<h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>
This is heading 5
This is heading 6
HTML Paragraf
Paragraf HTML di definisikan dengan <P> tag
Source Code
!DOCTYPE html> <html>
Result

This is a paragraph. This is a paragraph. This is a paragraph.
<body>
<p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
HTML Links
HTML Link di definisikan dengan <a> tag
Source Code
<!DOCTYPE html> <html> <body> <a href="http://www.w3schools.com"> This is a link</a> </body> </html>
Result
This is a link
HTML Image
HTML Image di definisikan dengan <img> tag
Source Code
<!DOCTYPE html> <html> <body> <img src="w3schools.jpg" width="104" height="142"></body> </html>
Result
HTML Media

HTML Object HTML Audio HTML Video HTML Youtube
HTML Object
HTML Object
HTML Helpers (Plug-ins) adalah sebuah program komputer yang memperluas Fungsionalitas standar browser. Contoh Plug-ins yang terkenal adalah Adobe Flash Player dan QuickTime Plug ins ini dapat ditambahkan ke halaman web melalui tag <object> atau tag <embed>
QuickTime - Play WAV Audio

<!DOCTYPE html> <html>
<body>
<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="liar.wav"> <param name="controller" value="true"> </object> </body> </html>
Adobe Flash Player - Play SWF Video

<!DOCTYPE html> <html>
<body>
<object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> <param name="SRC" value="bookmark.swf"> <embed src="bookmark.swf" width="400" height="40"></embed> </object> </body> </html>
Windows Media Player - Play WMV Movie

Contoh di bawah menunjukkan kode yang digunakan untuk menampilkan file Windows Media
<object width="100%" height="100%" type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="url" value="3d.wmv"> <param name="filename" value="3d.wmv"> <param name="autostart" value="1"> <param name="uiMode" value="full">
<param name="autosize" value="1">

<param name="playcount" value="1"> <embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed> </object>
</body>
</html>
HTML Audio
Menggunakan Elemen <embed>

Tag <embed> mendefinisikan wadah untuk konten eksternal (non-HTML)
<!DOCTYPE html>
<html>
<body> <embed height="50" width="100" src="horse.mp3">
<p>If you cannot hear the sound, your computer or browser doesn't support the sound format.</p>
<p>Or, you have your speakers turned off.</p> </body>
</html>
Menggunakan Elemen <embed>

Tag <embed> mendefinisikan wadah untuk konten eksternal (non-HTML)
Source Code
<!DOCTYPE html> <html> <body> <embed height="50" width="100" src="horse.mp3"> <p>If you cannot hear the sound, your computer or browser doesn't support the sound format.</p> <p>Or, you have your speakers turned off.</p>
Problems

Browser mendukung berbagai format audio yang berbeda Jika browser tidak mendukung format file, audio tidak akan bermain tanpa plug-in
Jika plug-in tidak diinstal pada komputer pengguna, audio tidak akan bermain
Jika Anda mengkonversi file ke format lain, tetap saja tidak akan bermain di semua browser
</body> </html>
Menggunakan Elemen <object>

The <object tag> tag juga dapat mendefinisikan sebuah wadah untuk konten eksternal (non-HTML)
Source Code
Problems
Browser mendukung berbagai format audio yang berbeda

Jika browser tidak mendukung format file, audio tidak akan bermain tanpa plug-in Jika plug-in tidak diinstal pada komputer pengguna, audio tidak akan bermain Jika Anda mengkonversi file ke format lain, tetap saja tidak akan bermain di semua browser
<object height="50" width="100" data="horse.mp3"></object> <p>If you cannot hear the sound, your computer or browser doesn't support the sound format.</p>
<p>Or, you have your speakers turned off.</p>
</body> </html>
Menggunakan <audio> Element HTML5
HTML5 tag <audio> mendefinisikan suara, seperti musik atau audio stream lainnya.
Unsur <audio> bekerja di semua browser modern.

Contoh berikut menggunakan tag <audio>, dan menentukan satu file MP3 (untuk Internet Explorer, Chrome, dan Safari), dan satu file OGG (untuk Firefox dan Opera)
Menggunakan <audio> Element HTML5

Source Code
Problem
Anda harus mengkonversi file audio ke format yang berbeda
<audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> Your browser does not support this audio format. </audio>
Unsur <audio> tidak bekerja di browser lama
</body> </html>
Solusi Terbaik HTML

Contoh di bawah ini menggunakan elemen HTML5 <audio> dan mencoba untuk bermain audio baik sebagai MP3 atau OGG
Source Code
Problem
Anda harus mengkonversi file audio ke format yang berbeda
<audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio>
Unsur <embed> tidak bisa "jatuh kembali" untuk menampilkan pesan kesalahan
</body> </html>
Yahoo Media Player - Sebuah Cara untuk Tambah Audio ke Situs Anda
Anda dapat menambahkannya ke halaman Anda (atau blog) dengan satu baris kode, dan mudah mengubah halaman HTML Anda ke daftar putar profesional:
Source Code
<!DOCTYPE html> <html> <body> <p><a href="horse.mp3">Play mp3</a></p> <p><a href="liar.wav">Play wav</a></p> <script src="http://mediaplayer.yahoo.com/latest"></script> </body> </html>
Result
Play mp3
Play wav
HTML Video
Playing Videos in HTML

<!DOCTYPE html> <html> <body> <video width="320" height="240" controls autoplay> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed width="320" height="240" src="movie.swf"> </object> </video> </body> </html>
<embed> Element
Tujuan dari tag <embed> adalah elemen multimedia menanamkan dalam halaman HTML. Berikut fragmen HTML menampilkan video Flash yang tertanam di halaman web:
Source Code
<!DOCTYPE html> <html> <body> <h2>Playing the Object</h2>
Problem
Jika browser tidak mendukung Flash, video tidak akan bermain

iPad dan iPhone tidak mendukung Flash video Jika Anda mengkonversi video ke format lain, tetap saja tidak akan bermain di semua browser
<embed src="intro.swf" width="200" height="200"><p>If you cannot see this, your computer doesn't support the format</p> </body> </html>
Menggunakan Elemen <object>

Tujuan dari tag <object> adalah elemen multimedia yang berada dalam halaman HTML Berikut fragmen HTML menampilkan video Flash yang berada di halaman web:
Source Code
<!DOCTYPE html> <html> <body> <object height="200" width="200" data="intro.swf"></object> </body> </html>
Problem
Jika browser tidak mendukung Flash, video tidak akan bermain
iPad dan iPhone tidak mendukung Flash video

Jika Anda mengkonversi video ke format lain, tetap saja tidak akan bermain di semua browser
Menggunakan <video> Element HTML5

HTML5 tag <video> mendefinisikan video atau film Unsur <video> bekerja di semua browser modern
Source Code
Problem
Anda harus mengkonversi video Anda ke berbagai format

Unsur <video> tidak bekerja di browser lama
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> Your browser does not support video </video>
</body> </html>
Solusi Terbaik HTML
Contoh di bawah ini menggunakan 4 format video yang berbeda. HTML 5 elemen <video> mencoba untuk memutar video baik dalam MP4, OGG, atau format WebM. Jika gagal, kode "jatuh kembali" untuk mencoba elemen <object>. Jika ini juga gagal, itu "jatuh kembali" ke elemen <embed>:
Source Code
Problem
Anda harus mengkonversi video Anda ke berbagai format
<video width="320" height="240" controls autoplay> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed width="320" height="240" src="movie.swf"> </object> </video>
</body> </html>
Video Youtube
Example Youtube iFrame
<!DOCTYPE html>
<html> <body> <iframe width="420" height="345"
Example- Youtube Embedded

<!DOCTYPE html> <html> <body> <embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash"> </embed> </body> </html>
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe> </body>
</html>
http://www.w3schools.com
Wassalamualaikum

Kel 1 Editbgfgffgfgf

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Kel 1 Editbgfgffgfgf

Diunggah oleh

Hak Cipta:

Format Tersedia

PENGEMBANGAN APLIKASI BERBASIS WEB (HTML)

Kel : 1 Ega wandanu(111109100000)

Nurul Ainis (1111091000003)

<!DOCTYPE html> <html> <body>

Deklarasi DOCTYPE mendefinisikan tipe dokumen

baris 1, sel 1 baris 2, sel 1

HTML Unordered Lists

<ul> <li>Coffee</li> <li>Milk</li> </ul>

HTML Ordered Lists

HTML Description Lists

<h2>This is heading 2</h2>

This is a paragraph. This is a paragraph. This is a paragraph.

HTML Object HTML Audio HTML Video HTML Youtube

QuickTime - Play WAV Audio

Adobe Flash Player - Play SWF Video

Windows Media Player - Play WMV Movie

<param name="autosize" value="1">

Menggunakan Elemen <embed>

Menggunakan Elemen <embed>

Menggunakan Elemen <object>

Browser mendukung berbagai format audio yang berbeda

<p>Or, you have your speakers turned off.</p>

Menggunakan <audio> Element HTML5

Unsur <audio> bekerja di semua browser modern.

Menggunakan <audio> Element HTML5

Anda harus mengkonversi file audio ke format yang berbeda

Unsur <audio> tidak bekerja di browser lama

Solusi Terbaik HTML

Anda harus mengkonversi file audio ke format yang berbeda

Playing Videos in HTML

Jika browser tidak mendukung Flash, video tidak akan bermain

Menggunakan Elemen <object>

Jika browser tidak mendukung Flash, video tidak akan bermain

iPad dan iPhone tidak mendukung Flash video

Menggunakan <video> Element HTML5

Anda harus mengkonversi video Anda ke berbagai format

<video width="320" height="240" controls autoplay>

<source src="movie.mp4" type="video/mp4">

Solusi Terbaik HTML

Anda harus mengkonversi video Anda ke berbagai format

Example- Youtube Embedded

Anda mungkin juga menyukai