HTML

https://getbootstrap.
com/
Langkah membuat latihan UKM_Pagi
1. Buatlah Folder UKM_Pagi
2. Silahkan download file di https://getbootstrap.com, pilih download, lalu pilih download lagi
3. Extract File downloadan tadi lalu pindahkan folder css dan js ke dalam folder UKM_Pagi
4. Silahkan Buka https://code.jquery.com/jquery-3.4.1.min.js, copy isinya ke dalam text editor, lalu

simpan dengan nama jquery.min.js pada folder js
5. Silahkan buat file index.html, form_registrasi.html, dan profil.html
isi index.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Latihan Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Beranda <span class="sr-

only">(current)</span></a>
<a class="nav-item nav-link" href="profil.html">Profil</a>
<a class="nav-item nav-link" href="form_registrasi.html">Form Registrasi</a>
</div>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.ukm-pct.org/upload/slideshow/1.jpg" class="d-block w-100" alt="Slide

Pertama">
<div class="carousel-caption d-none d-md-block">
<h5>Slide Pertama</h5>
<p>Ini Slide Pertama.</p>
</div>
</div>
<div class="carousel-item">

Kedua">
<h5>Slide Kedua</h5>
<p>Ini Slide Kedua.</p>
</div>
</div>
<div class="carousel-item">

Ketiga">
<h5>Slide Ketiga</h5>
<p>Ini Slide Ketiga.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row p-3">
<div class="col-4">
<div class="card">
<div class="card-body">
Ini adalah kolom pertama dengan lebar 4 kolom
</div>
</div>
</div>
<div class="col-4">
<div class="card">
Ini adalah kolom kedua dengan lebar 4 kolom
</div>
</div>
</div>
<div class="col-4">
<div class="card">
Ini adalah kolom ketiga dengan lebar 4 kolom
</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div class="row">
<div class="col-8">
<img src="https://pmb.palcomtech.com/wp-
content/uploads/PMB-JANUARI-2019-Aja.jpg">
</div>
<div class="col-4">
<h3>Kuliah Komputer ?? PalComTech Aja</h3>
<p class="text-justify">PalComTech adalah lembaga pendidikan

komputer dan internet dengan sistem belajar 100% praktek 100% internet. Berdiri sejak tahun 2003,
PalComTech hingga saat ini telah memiliki 5 training center.</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
isi profil.html
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</button>
<a class="nav-item nav-link" href="index.html">Beranda <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link active" href="profil.html">Profil</a>
<a class="nav-item nav-link" href="form_registrasi.html">Form Registrasi</a>
</div>
</div>
</nav>
<div class="row">
<div class="col-12">
<div class="card">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<tbody>
<tr>
<td>NPM</td>
<td>:</td>
<td>021110062</td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td>Andika Widyanto</td>
</tr>
<tr>
<td>E-mail</td>
<td>:</td>
<td>dika21.pct@gmail.com</td>
</tr>
<tr>
<td>Tempat, Tanggal Lahir</td>
<td>:</td>
<td>Palembang, 21 Desember
1993</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>Laki-laki</td>
</tr>
<tr>
<td>No HP</td>
<td>:</td>
<td>081368330786</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>Jalan Kapten A Sastro Lr.Kulit Gg

Hamim No. 1440 Palembang</td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
</body>
</html>
isi form_registrasi.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</button>
<a class="nav-item nav-link" href="index.html">Beranda <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="profil.html">Profil</a>
<a class="nav-item nav-link active" href="form_registrasi.html">Form Registrasi</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-6 col-sm-12 offset-3">

<div class="card">
<div class="card-header bg-primary text-center text-white">
Form Registrasi
</div>
<form>
<div class="form-group">
<label>NPM</label>
<input type="text" name="npm" class="form-control"

placeholder="NPM">
</div>
<label>Nama</label>
<input type="text" name="nama" class="form-control"

placeholder="Nama">
</div>
<label>Jenis Kelamin</label>
<select class="form-control" name="jk">
<option value="L">Laki-laki</option>
<option value="P">Perempuan</option>
</select>
</div>
<label>Program Studi</label>
<select class="form-control" name="jk">

<option value="S1 Informatika">S1
Informatika</option>
<option value="S1 Sistem Informasi">S1 Sistem

Informasi</option>
<option value="D3 Akuntansi">D3

Akuntansi</option>
<option value="D3 Desain Komunikasi

Visual">D3 Desain Komunikasi Visual</option>
<option value="D3 Sistem Informasi">D3 Sistem

Informasi</option>
</select>
</div>
<button class="btn btn-primary btn-

block">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML

Hochgeladen von

Copyright:

Verfügbare Formate

https://getbootstrap.

Langkah membuat latihan UKM_Pagi

1. Buatlah Folder UKM_Pagi

4. Silahkan Buka https://code.jquery.com/jquery-3.4.1.min.js, copy isinya ke dalam text editor, lalu

5. Silahkan buat file index.html, form_registrasi.html, dan profil.html

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Latihan Bootstrap</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

<a class="nav-item nav-link active" href="index.html">Beranda <span class="sr-

<a class="nav-item nav-link" href="profil.html">Profil</a>

<a class="nav-item nav-link" href="form_registrasi.html">Form Registrasi</a>

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>

<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>

<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>

<div class="carousel-item active">

<img src="https://www.ukm-pct.org/upload/slideshow/1.jpg" class="d-block w-100" alt="Slide

<div class="carousel-caption d-none d-md-block">

<p>Ini Slide Pertama.</p>

<img src="https://www.ukm-pct.org/upload/slideshow/1.jpg" class="d-block w-100" alt="Slide

<p>Ini Slide Kedua.</p>

<img src="https://www.ukm-pct.org/upload/slideshow/1.jpg" class="d-block w-100" alt="Slide

<div class="carousel-caption d-none d-md-block">

<p>Ini Slide Ketiga.</p>

<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<div class="row p-3">

Ini adalah kolom pertama dengan lebar 4 kolom

Ini adalah kolom kedua dengan lebar 4 kolom

Ini adalah kolom ketiga dengan lebar 4 kolom

<h3>Kuliah Komputer ?? PalComTech Aja</h3>

<p class="text-justify">PalComTech adalah lembaga pendidikan

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Latihan Bootstrap</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">

<a class="nav-item nav-link" href="index.html">Beranda <span class="sr-only">(current)</span></a>

<a class="nav-item nav-link active" href="profil.html">Profil</a>

<a class="nav-item nav-link" href="form_registrasi.html">Form Registrasi</a>

<table class="table table-bordered table-hover table-striped">

<td>Tempat, Tanggal Lahir</td>

<td>Jalan Kapten A Sastro Lr.Kulit Gg

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Latihan Bootstrap</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">

<a class="nav-item nav-link" href="index.html">Beranda <span class="sr-only">(current)</span></a>

<a class="nav-item nav-link" href="profil.html">Profil</a>

<a class="nav-item nav-link active" href="form_registrasi.html">Form Registrasi</a>

<div class="col-md-6 col-sm-12 offset-3">

<div class="card-header bg-primary text-center text-white">

<input type="text" name="npm" class="form-control"

<input type="text" name="nama" class="form-control"

<select class="form-control" name="jk">

<select class="form-control" name="jk">