Scribd Logo
Unggah

Selamat datang di Scribd!

  • PW - Pertemuan - 2 - Pemrograman HTML Lanjut

    Diunggah oleh

    WAWAN SETIAWAN
    1 tayangan30 halaman

    Judul Asli

    PW_Pertemuan_2_-_Pemrograman HTML Lanjut

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    1 tayangan30 halaman

    PW - Pertemuan - 2 - Pemrograman HTML Lanjut

    Diunggah oleh

    WAWAN SETIAWAN

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 30

    PW – Pertemuan 3

    Pemrograman
    HTML Lanjut

    Harminto Mulyo
    minto@unisnu.ac.id
    +6289 534 062 0398

    Pemrograman Web Harminto Mulyo, S.Kom., M.Kom.


    Rencana Kegiatan Perkuliahan Semester
    # Pokok Bahasan # Pokok Bahasan
    1 Intruduction HTML dan CSS 8 MVC pada PHP Framework
    2 HTML, CSS dan Javascript 9 MVC pada PHP Framework
    3 Server-Side berbasis web 10 POST dan GET
    menggunakan PHP Cookies dan Session
    4 Operator-operator pada PHP 11 POST dan GET
    5 Operator-operator pada PHP Cookies dan Session
    6 Percabangan dan Perulangan 12 Tugas Besar
    pada PHP 13 Presentasi Karya
    7 Integrasi Halaman Website 14 Presentasi Karya
    dengan Database Ujian Akhir Semester
    Ujian Tengah Semester

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Pokok Bahasan

    Audio & Video


    HTML

    Tabel HTML

    Form HTML
    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Video & Audio
    HTML

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Audio Video HTML

    • Sebelum berkembangnya teknologi HTML5, untuk menyisipkan


    audio atau video, diperlukan sebuah plugin seperti Flash Player
    • Dengan HTML5 memiliki tag yang dapat menyisipkan audio
    menggunakan tag <audio> untuk tag pembuka dan <source>
    untuk memanggil url atau alamat direktori file.
    • Sedangkan untuk video menggunakan tag <video>.
    File Format Media Type File Format Media Type
    MP3 audio/mpeg MP4 video/mp4
    OGG audio/ogg WebM video/webm
    WAV audio/wav Ogg video/ogg

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    audio.html
    <!DOCTYPE html>
    <html>
    <head>
    <title>Menampilkan Fasilitas Audio di HTML</title>
    </head>
    <body>

    <audio autobuffer autoloop loop controls>


    <source src="media/cartoon-ketawa.ogg" type="audio/ogg">
    <source src="media/cartoon-ketawa.wav" type="audio/wav">
    Your browser does not support the audio element.
    </audio>

    </body>
    </html>

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Atribut pada tag Audio
    Attribute Value Description
    autoplay autoplay Specifies that the audio will start playing as soon as
    it is ready
    controls controls Specifies that audio controls should be displayed
    (such as a play/pause button etc)
    Specifies that the audio will start over again, every
    loop loop time it is finished
    muted muted Specifies that the audio output should be muted
    auto Specifies if and how the author thinks the audio
    preload metadata should be loaded when the page loads
    none
    src URL Specifies the URL of the audio file

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    video.html
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>

    <video width="400" controls>


    <source src="media/mov_bbb.mp4" type="video/mp4">
    <source src="media/mov_bbb.ogv" type="video/ogg">
    Your browser does not support HTML video.
    </video>

    </body>
    </html>

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Atribut pada tag Video
    Attribute Value Description

    autoplay autoplay Specifies that the video will start playing as soon as it is ready

    controls controls Specifies that video controls should be displayed (such as a play/pause button etc).

    height pixels Sets the height of the video player

    loop loop Specifies that the video will start over again, every time it is finished

    muted muted Specifies that the audio output of the video should be muted

    Specifies an image to be shown while the video is downloading, or until the user hits
    poster URL the play button
    auto
    preload metadata Specifies if and how the author thinks the video should be loaded when the page loads
    none
    src URL Specifies the URL of the video file
    width pixels Sets the width of the video player

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Tabel HTML

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Konsep Tabel di HTML

    Tabel Header [th] th


    Kolom/Column [td]
    Baris/row [tr]

    td
    tr

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Konsep Tabel di HTML

    Baris 1, Kolom 1 Baris 1, Kolom 2

    Baris 2, Kolom 1 Baris 2, Kolom 2

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Konsep Tabel di HTML
    RUMUS UMUM
    <table>
    <tr>
    <td>…</td>
    </tr>
    </table>

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Tabel Padding dan Spacing
    • Tabel Padding adalah ruang antara tepi sel dan isi sel.
    • Tabel Spacing atau Jarak sel adalah ruang antara setiap sel

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Tabel Padding dan Spacing

    • Tabel Padding adalah ruang antara tepi sel dan isi sel.
    • Tabel Spacing atau Jarak sel adalah ruang antara setiap sel

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Tabel Komplek

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Table Colspan dan Rowspan

    • Tabel Colspan adalah penggabungan beberapa kolom menjadi


    satu cell
    • Tabel Rowspan adalah penggabungan beberapa row atau baris
    menjadi satu cell

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Tabel Colspan dan Rowspan

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Kerjakan!!

    Halaman2.4.html

    Halaman2.5.html

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Formulir HTML

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    HTML Form

    • HTML Form merupakan salah satu bagian yang berfungsi


    sebagai input atau masukan dari pengguna yang kemudian
    akan diproses atau diolah untuk dapat digunakan sesuai
    dengan kebutuhan.
    • Contohnya proses pengiriman data, browse, hapus,
    penyuntingan data dan lain sebagainya.
    • HTML Form ditandai dengan tag <form> ..... </form>.

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    HTML Form [Atribut]
    Atribut pada HTML form adalah sebagai berikut :
     Action : Menetapkan URL tujuan tempat dimana data akan diproses setelah tombol submit ditekan.
    Nilai = URL
     Target : Menentukan konteks pada browser, bagaimana respon browser saat data dikirimkan ke server
    Nilai : _blank | _self | _parent | _top
     Method : menentukan metode HTTP (GET atau POST) yang akan digunakan saat mengirimkan data dari
    form
     Enctype : Menentukan jenis MIME type yang digunakan untuk mengirimkan data ke server. Berlaku jika
    mengirim data dalam bentuk method post.
    Nilai : application/x-www-form-urlencoded, nilai default
    multipart/form-data, jika mengirimkan/menyertakan input berjenis file.
    teks/plain

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    HTML Form [Elemen]
    • <label> <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname">
    • <input>
    <h2>The input Element</h2>
    • <select>
    <form action=”#">
    • <textarea> <label for="fname">First name:</label><br>
    • <button> <input type="text" id="fname" name="fname"><br><br>
    <input type="submit" value="Submit">
    • <fieldset> </form>

    • <legend>
    • <datalist>
    • <output>
    • <option>
    Daftar Lengkap
    • <optgroup> https://www.w3schools.com/html/html_form_elements.asp

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    HTML Form [Elemen: input]
    • <input type="button"> • <input type="password">
    • <input type="checkbox"> • <input type="radio">
    • <input type="color"> • <input type="range">
    • <input type="date"> • <input type="reset">
    • <input type="datetime-local"> • <input type="search">
    • <input type="email"> • <input type="submit">
    • <input type="file"> • <input type="tel">
    • <input type="hidden"> • <input type="text"> (default value)
    • <input type="image"> • <input type="time">
    • <input type="month"> • <input type="url">
    • <input type="number"> • <input type="week">
    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Contoh HTML Form [Elemen: input]

    <form action="#" method="POST">


    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br><br>
    <input type="submit" value="Submit">
    </form>

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Contoh HTML Form [Elemen: select]

    <form action="#" method="POST">


    <label for="cars">Choose a car:</label>
    <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>
    <input type="submit"></form>

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Contoh HTML Form [Elemen: textarea]

    <form action="#" method="POST">


    <textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
    </textarea>
    <br><br>
    <input type="submit">
    </form>

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Contoh HTML Form [Elemen: Fieldset dan Legend]

    <form action="#" method="POST">


    <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
    </fieldset></form>

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Tugas Form
    Buatlah form seperti tampak berikut ini tanpa menggunakan CSS, atur tata letak
    sedemikian rupa menggunakan Teknik table!!!

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a
    Sekian

    TERIMAKASIH

    Te k n i k I n f o r m a t i k a – U N I S N U J e p a r a

    Anda mungkin juga menyukai