Praktek Front-end Frameworks dan Libraries
Praktek Front-end Frameworks dan Libraries
1. Setup Bootstrap
- Buka file HTML Anda (misalnya, index.html).
- Tambahkan tautan ke CSS Bootstrap dari CDN (Content Delivery
Network) ke dalam tag <head>.
|
<head> <meta charset="UTF-8"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>Landing Page
Sederhana</title> <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"> </head> |
2. Struktur HTML Dasar
- Buat struktur HTML dasar dengan tag <header>, <section>, dan <footer>.
|
<body> <header class="container-fluid
bg-dark text-white py-3"> </header> <section class="container
py-5"> </section> <footer class="container-fluid
bg-dark text-white py-3"> </footer> <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </body> |
3. Tambahkan Komponen Bootstrap
- Navbar: Tambahkan navbar Bootstrap ke dalam tag <header>.
|
<header
class="container-fluid bg-dark text-white py-3"> <nav class="navbar navbar-expand-lg
navbar-dark bg-dark"> <a class="navbar-brand"
href="#">Landing Page</a> <button
class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation"> <span
class="navbar-toggler-icon"></span> </button> <div class="collapse
navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link
active" aria-current="page"
href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link"
href="#">Fitur</a> </li> <li class="nav-item"> <a class="nav-link"
href="#">Kontak</a> </li> </ul> </div> </nav> </header> |
2. Tombol: Tambahkan tombol Bootstrap ke
dalam tag <section>.
|
<section class="container
py-5">
<div class="text-center"> <a href="#" class="btn
btn-primary btn-lg">Daftar Sekarang</a>
</div> </section> |
3. Form: Tambahkan form Bootstrap ke dalam
tag <section>.
|
<section class="container
py-5">
<h2>Formulir Kontak</h2>
<form> <div class="mb-3"> <label for="nama"
class="form-label">Nama Lengkap</label> <input type="text"
class="form-control" id="nama" placeholder="Masukkan
nama lengkap Anda"> </div> <div class="mb-3"> <label for="email"
class="form-label">Alamat Email</label> <input type="email"
class="form-control" id="email"
placeholder="Masukkan alamat email Anda"> </div> <div class="mb-3"> <label for="pesan"
class="form-label">Pesan Anda</label> <textarea
class="form-control" id="pesan"
rows="3"></textarea> </div> <button type="submit"
class="btn btn-primary">Kirim</button>
</form> </section> |
4. Responsive Design
Grid
System: Gunakan grid system Bootstrap untuk membuat
layout responsif.
|
<section
class="container py-5"> <div class="row"> <div class="col-md-6"> <h2>Judul Seksi 1</h2> <p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p> <a href="#"
class="btn btn-primary">Pelajari Lebih Lanjut</a> </div> <div class="col-md-6"> <img src="image.jpg"
alt="Gambar" class="img-fluid"> </div> </div> </section> |
Full KODE :
|
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Landing Page Sederhana</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"> </head> <body>
<header class="container-fluid bg-dark text-white
py-3"> </header>
<section class="container py-5"> </section>
<footer class="container-fluid bg-dark text-white
py-3"> </footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </body> <header
class="container-fluid bg-dark text-white py-3">
<nav class="navbar navbar-expand-lg navbar-dark
bg-dark"> <a class="navbar-brand"
href="#">Landing Page</a> <button
class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation"> <span
class="navbar-toggler-icon"></span> </button> <div class="collapse
navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link
active" aria-current="page"
href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link"
href="#">Fitur</a> </li> <li class="nav-item"> <a class="nav-link"
href="#">Kontak</a> </li> </ul> </div>
</nav> </header> <section class="container
py-5">
<div class="text-center"> <a href="#" class="btn
btn-primary btn-lg">Daftar Sekarang</a>
</div> </section> <section class="container
py-5">
<h2>Formulir Kontak</h2>
<form> <div class="mb-3"> <label for="nama"
class="form-label">Nama Lengkap</label> <input type="text"
class="form-control" id="nama" placeholder="Masukkan
nama lengkap Anda"> </div> <div class="mb-3"> <label for="email"
class="form-label">Alamat Email</label> <input type="email"
class="form-control" id="email"
placeholder="Masukkan alamat email Anda"> </div> <div class="mb-3"> <label for="pesan"
class="form-label">Pesan Anda</label> <textarea
class="form-control" id="pesan"
rows="3"></textarea> </div> <button type="submit"
class="btn btn-primary">Kirim</button>
</form> </section> <section class="container
py-5">
<div class="row"> <div class="col-md-6"> <h2>Judul Seksi 1</h2> <p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p> <a href="#"
class="btn btn-primary">Pelajari Lebih Lanjut</a> </div> <div class="col-md-6"> <img src="image.jpg"
alt="Gambar" class="img-fluid"> </div>
</div> </section> |
OUTPUT
HASIL :
https://onlinelearning.uhamka.ac.id
Nama : Moh. Ansori
Nim :
2203015004
Kelas : 4F
Tugas : Praktikum Pemrograman Web
Komentar
Posting Komentar