TUGAS KELOMPOK WEB PRO



Ketua Kelompok :Luqman Hakim(1503015080)

Anggota : -Arika Roihanah(1503015028)
                 -Diasni Nurul Agustia(1503015040)
                 -Tri Handriyo(1503015140)
                 -Riki Julian(1303015100)





1) Form HTML

Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan web. Pengunjung dapat memasukan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button, dropdown dan lain-lain. Selain itu pengunjung  juga dapat melakukan pemilihan data mengunakan elemen select list atau dengan istilah lain combo box atau drop-down list. Form membuat sebuah halaman web menjadi web interaktif dan dinamis, karena form merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna.
Berikut source kodenya:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>


Hasil Output:



2)This is Heading dan Paragraph

Heading berbeda dengan HEAD dalam HTML. Kalau HEAD berfungsi sebagai Kepala HTML yang akan muncul pada bagian atas browser (Jendela browser), sedangkan Heading tidak ada hubungannya dengan HEAD. Heading digunakan untuk mengatur besar kecilnya judul konten/isi website dan terdapat pada bagian body (tag body). 
Berikut source kode:



<!DOCTYPE html>


<html>

<title>HTML Tutorial</title>

<body>



<h1>This is a heading</h1>

<p>This is a paragraph.</p>



</body>

</html>


Hasil Output:


3) IMAGE PADA HTML

HTML image (img) tag. Tutorial dan panduan mengenai element <img /> yang digunakan untuk memasukkan gambar di dalam dokumen HTML. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <img> (image).
img menunjukkan image yang berarti gambar dan oleh karenanya digunakan untuk menyisipkan gambar. Gambar didalam sebuah dokumen HTML tidak dimasukkan sepenuhnya pada file (.html, misalnya) akan tetapi, hanya merujukkan file sumber gambar tersebut berada (disimpan).
Berikut source kodenya:
<!DOCTYPE html>
<html>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg" width="104" height="142">
</body>
</html>

Hasil Output :


4)INPUT ELEMEN

HTML <input> element digunakan untuk menunjukkan sebuah inputan (masukkan) dalam bentuk kotak dan sejenisnya yang dapat diedit/diketik untuk diisi data tertentu (seperti memasukkan data diri nama, email, tanggal dan lain sebagainya).
Berikut source kodenya
<!DOCTYPE html>
<html>
<body>

<h2>The input Element</h2>

<form action="/action_page.php">
  Enter your name:
  <input name="firstname" type="text">
  <br><br>
  <input type="submit">
</form>

</body>
</html>


Hasil Output :


5) LINK

Link dalam web disebut juga hyperlink. link digunakan untuk memberi rujukan dokument lain ke dokumen yang dituju. Link biasanya digunakan untuk memberikan rujukan tautan, baik melalui gambar maupun melalui tulisan (text). Pengertian Link jika diartikan dalam bahasa indonesia disebut dengan Tautan.

<!DOCTYPE html>
<html>
<body>


<p><a href="https://luqman-elhakim97.blogspot.co.id">This is a link</a>

</body>
</html>


Hasil Output :

6) LIST

List adalah Bagian teks yang didalam dokumen yang berisi daftar item dari suatu kelompok atau grup atau bisa juga di artikan sebagai prosedur(urutan langkah-langkah) dari suatu pekerjaan tertentu yang sifatnya harus dilakukan secara berurutan dari langkah pertama hingga terahir.



<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

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

<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

</body>
</html>


Hasil Output :


7) LOGIN

Login adalah proses masuk ke jaringan komputer dengan memasukkan identitas akun minimal terdiri dari username/akun pengguna dan password untuk mendapatkan hak akses.


 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
</style>
</head>
<body>

<h2>Modal Login Form</h2>

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>

<div id="id01" class="modal">
  
  <form class="modal-content animate" action="/action_page.php">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="img_avatar2.png" alt="Avatar" class="avatar">
    </div>

    <div class="container">
      <label for="uname"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>
        
      <button type="submit">Login</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Remember me
      </label>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      <span class="psw">Forgot <a href="#">password?</a></span>
    </div>
  </form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>













8) select elemen defines a drop down list 

 Tag select di dalam HTML digunakan untuk membuat objek form yang berupa list pilihan yang dapat dipilih oleh user. Biasanya tag select digunakan untuk “memaksa” user memilih salah satu dari pilihan yang tersedia. Pilihan ini telah didefenisikan pada saat form dibuat.

 <!DOCTYPE html>
<html>
<body>

 <h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>

 <form action="/action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>

 </body>

</html>


9)This is HTML
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
  • Berikut Source kodenya :
<!DOCTYPE html>
<html>
<body>

<h1> This Is HTML </h1>

</body>
</html>
Hasil Outputnya
10. Button (Tombol)

Pada HTML, tag didefinisikan sebagai suatu “tombol tekan” yang berfungsi menjalankan suatu script apabila di-klik. Nah, di dalam suatu elemen “button” ini kita dapat memasukan muatan baik berupa teks atau image. Secara umum, fungsi tag dapat dispesifikasikan menjadi 3 tipe, yaitu :
1. Tag sebagai “tombol” (“button”) biasa 
2. Tag untuk “submit”
3. Tag untuk “reset” 
  • Berikut Source Kodenya  :
<!DOCTYPE html>
<html>
<body>

<button>click me </button>

</body>
</html>

Hasil Outputnya


Comments

Post a Comment