Nama : ARIARDIANSYAH (1303015018)
THIA MIRANI (1303015113)
SAUMI AYU SALSABILA (1303015107)

  1. PENGERTIAN FORM
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 perintah dasar Form :

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  Nama:<br>
  <input type="text" name="Saumi" value="Saumi">
  <br>
  Alamat:<br>
  <input type="text" name="Jakarta" value="Jakarta">
  <br><br>
</form> 


</body>
</html>

2.   Pengertian Tag Paragraf  dan Heading dalam HTML


   Pengertian Tag Paragraf  dan Heading dalam HTML, Paragraf dan teks memegang peranan cukup penting dalam desain website. Oleh karena tu, kita perlu mengetahui tag dan aturan menulis kode HTML untuk membuat paragraf serta teks yang mernarik. Untuk memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur HTML sederhana. 
  • Berikut perintah dasar :
<!DOCTYPE html>
<html>
<body>

<h1>Heading Dan Paragraph.</h1>
<p>DAFTAR</p>

</body>
</html>


3.   Pengertian Tag Image dalam HTML

   Tag Image digunakan untuk menampilkan gambar kedalam halaman web.

  • Berikut perintah dasar  :
<!DOCTYPE html>
<html>
<body>

<img src="c:\users\public\pictures\sample pictures\3.png"width="200" height="200">

</body>
</html>

4. Input Element

Penjelasan HTML label. HTML <label> element merepresentasikan sebuah judul atau penamaan untuk item control ( <input> , <select> dan lainnya) yang biasanya berkaitan dengan sebuah form. 
  • Berikut perintah dasar  :
<!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>
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.
  • Berikut perintah dasar  :
<!DOCTYPE html>
<html>
<body>

<a href="https://www.google.com">this is a link</a>

</body>
</html>



6.   List

 List merupakan bentuk yang umum yang biasa kita gunakan untuk immguraikan daftar sesuatu, misalnya jenis-jenis list dalam HTML:
  • list dengan nomor
  • list tanpa nomor
  • list definisi
  • Berikut perintah dasar  :
<!DOCTYPE html>
<html>
<body>

<h2>List Menu Minuman</h2>
<ul>
<li>Tea Jus</li>
<li>Es Tea</li>
<li>POP ICE</li>
</ul>
<h2>List Makanan</h2>
<ol>
<li>Nasgor</li>
<li>Somay</li>
<li>Mie Goreng</li>
</ol>
</body>
</html>

7.   Login

Login jika diartikan adalah log masuk. Login biasanya disebut sebagai log in, logon, log on, signin, sign in. Lalu apa pengertian dari login? Login adalah proses masuk ke jaringan komputer dengan memasukkan identitas akun minimal terdiri dari username/akun pengguna dan password untuk mendapatkan hak akses.
  • Berikut perintah dasar  :
<!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="c:\users\public\pictures\sample pictures\3.png">
    </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.  The Select Element
Select berarti memilih. HTML <select> element merepresentasikan sebuah kontrol yang digunakan untuk menyeleksi (memilih) deretan opsi (daftar pilihan) yang diberikan baik satu ataupun lebih dari satu pilihan.
Penggunaan element <select> dapat ditulis bersamaan dengan element <option> yang berisi daftar pilihan (opsi) yang dapat ditulis beberapa item sebagai daftar pilihan yang akan diseleksi oleh user.
  • Berikut perintah dasar  :
<!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="audi">audi</option>
<option value="honda">honda</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 perintah dasar  :
<!DOCTYPE html>
<html>
<body>

<h1> This Is HTML :)</h1>

</body>
</html>

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 perintah dasar  :
<!DOCTYPE html>
<html>
<body>

<button>click me </button>

</body>
</html>


Komentar

Posting Komentar