Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul P.web 1

    Diunggah oleh

    Riska Hairuni Apriliana
    40 tayangan14 halaman

    Judul Asli

    modul P.web 1

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    40 tayangan14 halaman

    Modul P.web 1

    Diunggah oleh

    Riska Hairuni Apriliana

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 14

    LAPORAN RESMI PRAKTIKUM PEMPROGRAMAN WEB MODUL I DESAIN HTML

    Disusun Oleh : TGL. PRAKTIKUM NAMA NRP KELOMPOK DOSEN : 26 September 2012 : Henny Elvandari : 10.04.1.1.1.00046 :A : Hermawan, S.T. M.Kom

    TELAH DISETUJUI TANGGAL : ........................................... ASISTEN PRAKTIKUM

    Idealetika Yunia Fitri (09.04.1.1.1.00013)

    LABORATORIUM COMMON COMPUTING JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS TRUNOJOYO MADURA 2012

    BAB I PENDAHULUAN

    1.1 LATAR BELAKANG Web merupakan kata yang sudah tidak asing lagi. Web itu sendiri merupakan suatu hasil atau perwujudan dari program yang khusus di bidang web. Desain web dapat digunakan dengan banyak bahasa program web.

    Program web yang akan dipelajari dalam modul ini menggunakan bahasa pemograman web berbasis HTML. HTML (Hypertext Markup Language) adalah bahasa format dari tag XML(Extended Markup Language) yang digunakan sebagai standar tampilan dari halaman Web.

    1.2 TUJUAN Tujuan mahasiswa mengikuti praktikum ini adalah : 1. Mahasiswa dapat mengetahui Desain HTML. 2. Mahasiwa dapat memahami konsep HTML. 3. Mahasiswa dapat menggunakan pemprograman HTML untuk pembuatan aplikasi berbasis web.

    BAB II DASAR TEORI

    1.1 HTML HTML (Hypertext Markup Language) adalah bahasa format dari tag XML(Extended Markup Language) yang digunakan sebagai standar tampilan dari halaman Web. HTML dapat diterima sebagai tampilan halaman Web setelah melalui proses interpretasi dari Web browser. Selain itu HTML memiliki struktur yang fleksibel, tanpa lojik serta toleran terhadap kesalahan. Standar Minimum elemen HTML: Document Type Declaration (DTD) Head Body

    <DTD> <html> <head> <!Terdiri dari elemen-elemen yang mendeklarasikan konten sebagai pendukung lingkungan seperti title, meta dokumen, CSS, Java Script --> </head> <body> <!Terdiri dari elemen-elemen yang diinterpretasikan sebagai tampilan web --> </body> </html> 1.2 DTD Sebagai standar versi dokumen W3C yang digunakan sebagai representasi setiap elemen pada dokumen Web, Contoh: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

    Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <!DOCTYPE Transitional//EN" transitional.dtd">

    html

    PUBLIC

    "-//W3C//DTD

    XHTML

    1.0

    "http://www.w3.org/TR

    /xhtml1/DTD/xhtml1-

    Standar tipe dokumen tersebut dapat digunakan untuk validasi elemen halaman Web.

    1.3 META DOKUMEN Elemen meta sebagai identitas dari halaman Web yang biasa terdiri dari owner, keywords, layout, ataupun inisialisasi proses seperti refresh. Contoh: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="owners" content="myWeb" /> <meta name="keywords" content="Sistem Informasi, Jurnal, Publikasi Ilmiah" /> <meta name="layout" content="main" /> <meta HTTP-EQUIV="REFRESH" content="0; url=/myweb/myurl">

    1.4 ELEMEN HTML Jenis-jenis elemen data yang akan ditampilkan pada halaman Web seperti: Form, Text, Image, Table, Drop-Box, Button dan lainnya. Title Ditampilkan pada header browser <title>Praktikum Pemrograman Web</title> Text <h1>Selamat Datang Di Website Kami!</h1> <h2>Web Ini Adalah Tutorial Pemrograman Web</h2> <h3>Praktikum Pemrograman Web</h3> <p> <a href="http://informatika.trunojoyo.ac.id"> Teknik Informatika UTM </a> </span> link for your success way </p>

    Image <img src="images/myphoto.jpg" alt="photo"/> width="180" height="200"

    Form <form method="POST" action="response2.jsp" enctype="multipart/formdata">

    Drop-Box <select name="My Lab"> <option value=CC>Lab. Praktikum Common Computing</option> <option value=SI> Lab. Sistem Informasi </option> <option value=CAI> Lab. Computing & AI </option> </select>

    File Browser <input type="file" name="upload" value="" width="200" />

    Table <table border="1" width="10"> <thead> <tr> <th>NIM</th> <th>Mahasiswa</th> </tr> </thead> <tbody> <tr> <td>123</td> <td>Andi Hartono </td> </tr> <tr> <td>124</td> <td>Achmad</td> </tr> </tbody> </table>

    List Bidang Minat: <ol> <li>Sistem Informasi <ul> <li>Data Warehousing </li> <li>Enterprise Architecture </li> </ul> </li> <li>Multimedia <ul> <li>Komputer Grafik </li> <li>Machinema </li> </ul> </li> </ol>

    BAB III IMPLEMENTASI

    3.1 KEGIATAN PRAKTIKUM SourceCode form1.html <html> <head> <title>Praktikum Pemrograman Web</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h1>Selamat Datang Di Website Kami!</h1> <h2>Web Ini Adalah Tutorial Pemrograman Web</h2> <h3>Praktikum Pemrograman Web</h3> <p> <span <a href="http://informatika.trunojoyo.ac.id"> Teknik Informatika UTM </a> </span> link for your success way </p> <img src="images/Koala.com" width="230" height="300" alt="photo"/> <form method="POST" action="response2.jsp" enctype="multipart/formdata" </form> <select name="My Lab"> <option value=CC>Lab. Praktikum Common Computing</option> <option value=SI> Lab. Sistem Informasi </option> <option value=CAI> Lab. Computing & AI </option> </select> <input type="file" name="upload" value="" width="200" /> <table border="1" width="10"> <thead> <tr> <th>NIM</th> <th>Mahasiswa</th> </tr> </thead> <tbody> <tr> <td>100411100046</td>

    <td>Henny Elvandari </td> </tr> <tr> <td>100411100098</td> <td>Prafa Inanda </td> </tr> </tbody> </table> Bidang Minat: <ol> <li>Sistem Informasi <ul> <li>Data Warehousing </li> <li>Enterprise Architecture </li> </ul> </li> <li>Multimedia <ul> <li>Komputer Grafik </li> <li>Machinema </li> </ul> </li> </ol> </body> </html>

    Running form1.html

    1. Lakukanlah perubahan pada kode HTML sesuai keinginan anda, Pernakah terjadi error ketika ada kesalahan kode...? Ya pernah jika ada kesalahan (kurang atau lebih) pada saat mengetikkan (memasukkan) tag. 2. Cobalah ubah nilai meta refresh <meta HTTP-EQUIV="REFRESH" content="5; url=http://google.co.id"> apa yang terjadi...?, maka jelaskan apa diantara kegunaan meta dokumen...? Saat meta di ubah menjadi perintah seperti diatas, dalam hitungan 5 detik terjadi pengrefreshan dan perpindahan url menjadi google.co.id. Jadi fungsi elemen meta sebagai identitas dari halaman Web yang biasa terdiri dari owner, keywords, layout ataupun inisialisasi proses seperti refresh. 3. Jelaskan fungsi tag HTML pada Table: thead, tbody, tr, th serta td...! <thead> berfungsi sebagai head dari sub tag, biasanya berisi meta dokument dan title. <tbody> perintah yang berisi semua elemen html kecuali yang ada dalam DTD dan Thead. <tr> perintah untuk membuat baris(row) <th> berfunsi sebagai header(kepala tabel). <td> perintah untuk membuat kolom 4. Coba gunakan editor WySWyG dari HTML plugin pada Netbeans sesuai dengan contoh script diatas, jelaskan seberapa membantukah penggunaan tools tersebut...! Komponen WYSIWYG (Visual Penuh) memiliki sifat What You See Is What You Get. Kompenin ini merupakan komponen yang terlihat saat desain maupun saat dijalankan(run). Membantu dalam pengecekan dan menemukan kata yang pengguna cari Contoh : jTextField(Netbeans)

    BAB IV TUGAS PRAKTIKUM

    4.1 PERTANYAAN Dengan menggunakan HTML desainer yang terdapat pada Netbeans buatlah desain form HTML, sebagai berikut:

    4.2 JAWABAN SourceCode form2.html <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF8"> </head> <body> <h1> Form HTML </h1> <div align="left" >

    <form method="post"> <table> <tr> <td>Nama: </td> <td><input type="text" name="nama"</td> </tr> <tr> <td>Gender: </td> <td> <input type="radio" value="Man" name="jenkel" />Man <input type="radio" value="Women" name="jenkel"/>Women </td> </tr> <tr> <td>Address: </td> <td><input type="text" name="address"</td> </tr> <tr> <td>Country: </td> <td> <select> <option values="Indonesia">Indonesia<option> <option values="Malaysia">Malaysia<option> <option values="Singapura">Singapura<option> </select> </td> </tr> <tr> <td>Email: </td> <td><input type="text" name="email"</td> </tr> <tr> <td>Photo: </td> <td><input type="file"></td> </tr>

    <tr> <td>Comment: </td> <td><textarea cols="50" type="submit"</td> </tr> </table> </form> </div> </body> </html>
    Running form2.html

    rows="10"/></textarea>

    <input

    BAB V PENUTUP

    5.1 KESIMPULAN HTML (Hypertext Markup Language) adalah bahasa format dari tag XML(Extended Markup Language) yang digunakan sebagai standar tampilan dari halaman Web. Standar Minimum elemen HTML: 5.2 SARAN
    1. Selama

    Document Type Declaration (DTD) Head Body

    praktikum berlangsung tolong asisten mendampingi dan

    mengawasi praktikan supaya tidak ada yang ketinggalan

    Anda mungkin juga menyukai