Web-Programming-#2

Latihan 1 – Inline CSS

  1. Salin html dibawah
  2. Simpan dengan nama css-inline.html di lokasi folder masing-masing
  3. Ubah author dan keterangan lainnya
  4. Tampilkan di browser
<!DOCTYPE html>
<html lang="id-ID">
<head>
<title>Latihan 1 - Inline CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author=" content="Suharmoyo">
<meta name="description" content="Menggunakan Inline CSS">
<meta name="keywords" content="html, imdkom, website">
</head>
<body>

<h1 style="color:blue;text-align:center;">Ini Bagian Judul</h1>
<p style="color:red;">Paragraf ini diatur menggunakan Inline CSS. Warna tulisan diubah menjadi merah.</p>

</body>
</html>

 

Latihan 2 – Internal CSS

  1. Salin html dibawah
  2. Simpan dengan nama css-internal.html di lokasi folder masing-masing
  3. Ubah author dan keterangan lainnya
  4. Tampilkan di browser
<!DOCTYPE html>
<html lang="id-ID">
<head>
<title>Latihan 1 - Internal CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author=" content="Suharmoyo">
<meta name="description" content="Menggunakan Internal CSS">
<meta name="keywords" content="html, imdkom, website">

<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>Internal CSS</h1>
<p>Pengaturan style tidak langsung pada bagian ini, akan tetapi dituliskan di atas, yaitu di dalam bagian head.</p>

</body>
</html>

 

Latihan 3 – Bootstrap 5 – Tampilan Responsive

  1. Salin html dibawah
  2. Simpan dengan nama bs5-grid.html di lokasi folder masing-masing
  3. Ubah author dan keterangan lainnya
  4. Tampilkan di browser

 

<!DOCTYPE html>
<html lang="id-ID">
<head>
  <title>Contoh Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid mt-3">
  <h1>Tampilan Kolom Responsive</h1>
  <p>Ubah ukuran browser untuk melihat hasilnya.</p>
  <p>Kolom ditampilkan berjajar horisontal untuk ukuran layar besar dan akan berjajar vertikal jika jendela browser diperkecil.</p>
  <div class="row">
    <div class="col-sm-3 p-3 bg-primary text-white">Kolom-1</div>
    <div class="col-sm-3 p-3 bg-dark text-white">Kolom-2</div>
    <div class="col-sm-3 p-3 bg-primary text-white">Kolom-3</div>
    <div class="col-sm-3 p-3 bg-dark text-white">Kolom-4</div>
  </div>
</div>

</body>
</html>

 

Latihan 4 – Javascript – Klik

  1. Salin html dibawah
  2. Simpan dengan nama js-click.html di lokasi folder masing-masing
  3. Ubah / tambahkan author dan keterangan lainnya
  4. Tampilkan di browser
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraf sudah diubah.";
}
</script>
</head>
<body>

<h2>Menggunakan JavaScript</h2>

<p id="demo">Paragraf semula</p>
<button type="button" onclick="myFunction()">Coba Klik</button>

</body>
</html>