Sabtu, 01 April 2017

Evaluasi Tengah Semester - Pemrograman Web Kelas D

Selamat malam semua! :)

Kali ini saya ingin mengepost mengenai desain web sederhana yang telah saya buat. :)

Saya membuat suatu web mengenai "Save the Children".

Save the Children sendiri merupakan organisasi nyata yang menaungi anak-anak yang aslinya berasal dari Inggris. Seiring berjalannya waktu Save the Children sudah mengembangkan sayapnya dan sudah memiliki kantor cabang di berbagai negara di dunia.

Berikut desain web yang telah saya buat:

                                                                         Home:



About Us: 


Gallery:



Contact Us:


Nama: R. Sidqi Tri Priwi
NRP: 5115100153
Kelas: Pemrograman Web D



Read More..

Jumat, 10 Maret 2017

Tugas 3 Pemrograman Web Kelas D

Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Formulir Registrasi Lomba Cerdas Cermat</title>
        <style type="text/css">
            body {
                font-size: 40px;
                font-family: "Comic Sans MS";
            }
            h1 {
                color: red;
            }
            td {
                padding: 15px;
                padding-bottom: 2px;
                padding-top: 2px;
            }
            #registrasi input, select{
                width: 300px;
                border: 1px solid #000099;
                border-radius: 5px;
                font-size: 20px;
                padding: 5px;
            }
            #registrasi input[value="Daftar"]{
                height: 70px;
                width: 120px;
                color: white;
                background-color: #339966;
                cursor:pointer;
            }
            #registrasi input[value="Daftar"]:hover{
                background-color: #67A8FF;
            }
            #registrasi input[value="Batal"]{
                height: 70px;
                width: 120px;
                color: white;
                background-color: ##cc0000;
                cursor:pointer;
            }          
            #registrasi input[value="Batal"]:hover{
                background-color: #FF6666;
            }  
        </style>
        <script>
            function popUp(){
                window.alert("Terima kasih, Anda sudah terdaftar!:)");
            }
        </script>
    </head>
    <body>
       
        <form id="registrasi" method="get">
            <table align="center" >
                <tr>
                    <td colspan="2" align="center"><h2>Formulir Registrasi Lomba Cerdas Cermat</h2></td>
                </tr>
                <tr>
                    <td>Nama Peserta</td>
                    <td><input type="text" name="Nama Peserta"/>  </td>
                </tr>
                <tr>
                    <td>NISN</td>
                    <td><input type="text" name="NISN" list="NISN"/> 
                        <datalist id="NISN">
                            <option value="00001">
                            <option value="00002">
                            <option value="00003">
                            <option value="00004">
                            <option value="00005">
                        </datalist>
                    </td>
                </tr>
                <tr>
                    <td>Mata Pelajaran</td>
                    <td><input type="text" name="Mata Pelajaran" list="Mata Pelajaran"/> 
                        <datalist id="Mata Pelajaran">
                            <option value="Matematika">
                            <option value="Fisika">
                            <option value="Kimia">
                            <option value="Biologi">
                        </datalist>
                    </td>
                </tr>
                <tr>
                    <td>Tingkat Sekolah</td>
                    <td><input type="text" name="Tingkat Sekolah"/>   </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="Daftar" onclick="popUp()"/>
                        <input type="submit" value="Batal"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Hasil:


Nama : R. Sidqi Tri P.
NRP : 5115100153
Kelas : Pemrograman Web D
Read More..

Selasa, 28 Februari 2017

Tugas 2 Pemrograman Web Kelas D

HTML & CSS Code:
<!DOCtype html>
<html>
<head>
<title>
 Pemesanan Tiket Kereta Api Online
 </title>

<style>
body {
 background-color: rgb(236, 232, 229);
}
h1 {
 color: rgb(104, 132, 146);
  font-family: arial;
}
form {
 text-align: left;
    font-family: segoe ui;
    font-size: 100%;
    margin: 20px 500px 20px 550px;
    padding: 20px;
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
#s {
 background-color: rgb(54, 150, 211);
 color : white;
 padding: 10px;
 margin: 5px 5px 0;
 border: none;
}
#b {
 background-color: rgb(226, 72, 8);
 color: white;
 padding: 10px;
 margin: 5px 5px 0;
 border: none;
}
#e {
 background-color: rgb(4, 57, 111);
 color: white;
 padding: 10px;
 margin: 5px 5px 0;
 border: none;
}
#h {
 background-color: rgb(209, 21, 19);
 color: white;
 padding: 10px;
 margin: 5px 5px 0;
 border: none;
}
tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>
 <h1><img src="http://1.bp.blogspot.com/-2s9cZJG_HFY/UJO3hmzNITI/AAAAAAAAAMk/M9ZevDExqp4/s400/Logo+Kereta+Api+baru+cdr.png" style="height:50px;"> Selamat Datang !!!</h1>  
 <form name = "input" action = "html_form_action.asp" method = "get">
  <pre>
  Nama Kereta  : <input type="text" name="train"><br>
  Tanggal Berangkat : <input type="date" name="arrive"><br>
  Tanggal Tiba  : <input type="date" name="go"><br>
  Jam Berangkat  : <input type="time" name="dtg"><br>
  Jam Tiba  : <input type="time" name="pgi"><br>
  Dari   : <input type="text" name="asal"><br>
  Ke   : <input type="text" name="tujuan"><br>
  Kelas   : <input type="" name=""><br>
    <input id="s" type="submit" value="Simpan"> <input id="b" type="submit" value="Batal">
  </pre>
 </form>
 <table>
  <tr>
    <th>No.</th>
    <th>Nama Kereta</th>
    <th>Jadwal Berangkat</th>
    <th>Jadwal Tiba</th>
    <th>Dari</th>  
    <th>Ke</th>
    <th>Harga (Kelas)</th>
    <th> </th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Argo Parahyangan</td>
    <td>2014-04-22 - 06:00</td>
    <td>2014-04-22 - 08:45</td>
   <td>Gambir, Jakarta Pusat</td>
   <td>Bandung, Bandung</td>
   <td>Bisnis - 90.000</td>
   <td> <input id="e" type="submit" value="Edit"> <input id="h" type="submit" value="Hapus"></td>
  </tr>
  <tr>
    <td>2.</td>
 <td>Argo Parahyangan</td>
    <td>2014-04-23 - 13:01</td>
    <td>2014-04-23 - 15:00</td>
   <td>Gambir, Jakarta Pusat</td>
   <td>Surabaya</td>
   <td>Eksekutif - 100.000</td>
   <td> <input id="e" type="submit" value="Edit"> <input id="h" type="submit" value="Hapus"></td>
  </tr>
</table>
</body>

Hasil:





Nama : R. Sidqi Tri P.
NRP : 5115100153
Kelas : Pemrograman Web D
Read More..
Related Posts Plugin for WordPress, Blogger...