Web-Programming-#1

Latihan 1

  1. Salin html dibawah
  2. Simpan dengan nama html-text.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</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author=" content="Suharmoyo">
<meta name="description" content="Membuat web pertama">
<meta name="keywords" content="html, imdkom, website">
</head>
<body>

<h2>Judul Tulisan</h2>
<p>Belajar membuat halaman web dengan format dokumen HTML. Awal nya nggak begitu paham, lama2 asik juga.</p>

</body>
</html>

 

 

Latihan 2

  1. Salin html dibawah
  2. Simpan dengan nama html-list.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 2 - Buat Daftar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author=" content="Suharmoyo">
<meta name="description" content="Membuat Daftar">
<meta name="keywords" content="html, imdkom, website">
</head>
<body>

<h2>Nama Buah-buahan</h2>
<ul>
<li>Mangga</li>
<li>Pepaya</li>
<li>Durian</li>
<li>Belimbing</li>
<li>Sirsak</li>
</ul>

<h2>Nama Buah-buahan - Pakai Nomor</h2>
<ol>
<li>Mangga</li>
<li>Pepaya</li>
<li>Durian</li>
<li>Belimbing</li>
<li>Sirsak</li>
</ol>

</body>
</html>

 

Latihan 3

  1. Salin html dibawah
  2. Simpan dengan nama html-table.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 3 - Buat Tabel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author=" content="Suharmoyo">
<meta name="description" content="Membuat Tabel">
<meta name="keywords" content="html, imdkom, website">
</head>
<body>

<h2>Daftar Kontak</h2>
<table border="1">
  <tr>
    <th>Nama</th>
    <th>Email</th>
    <th>No.WA</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>123@gamil.com</td>
    <td>081328987262</td>
  </tr>
  <tr>
    <td>Yudha</td>
    <td>144@gmail.com</td>
    <td>08126284973</td>
  </tr>
  <tr>
    <td>Imam</td>
    <td>133@gmail.com</td>
    <td>081262848888</td>
  </tr>
</table>

</body>
</html>

Latihan 4 – Menambahkan Gambar

Gambar Durian

  1. Download gambar di atas, dengan cara klik kanan save picture/image as ..
    simpan di folder images/durian.jpg
  2. Salin html dibawah
  3. Simpan dengan nama html-images.html di lokasi folder masing-masing
  4. Ubah author dan keterangan lainnya
  5. Tampilkan di browser
<!DOCTYPE html>
<html lang="id-ID">
<head>
<title>Latihan 4 - Menambahkan Gambar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author=" content="Suharmoyo">
<meta name="description" content="Menambahkan Gambar">
<meta name="keywords" content="html, imdkom, website">
</head>
<body>

<h2>Gambar Durian</h2>
<img src="images/durian.jpg">

</body>
</html>

 

Latihan 5 – Menambahkan Audio

File Audio

 

Download Link — Klik disini 

 

  1. Untuk download file di atas, dengan cara klik kanan tulisan Download Link, pilih save as ..
    simpan di folder media/horse.mp3    ( pastikan file tersimpan dalam format MP3 )
  2. Salin html dibawah
  3. Simpan dengan nama html-audio.html di lokasi folder masing-masing
  4. Ubah author dan keterangan lainnya
  5. Tampilkan di browser
<!DOCTYPE html>
<html lang="id-ID">
<head>
<title>Latihan 5 - Menambahkan Audio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author=" content="Suharmoyo">
<meta name="description" content="Menambahkan Audio">
<meta name="keywords" content="html, imdkom, website">
</head>
<body>

<h2>Tebak ini bunyi apa</h2>
<audio controls>
  <source src="media/horse.mp3" type="audio/mpeg">
</audio>

</body>
</html>

 

Latihan 6- Menambahkan Video

File Video

 

  1. Download file di atas, dengan cara klik kanan save video as ..
    simpan di folder media/mov_bbb.mp4
  2. Salin html dibawah
  3. Simpan dengan nama html-video.html di lokasi folder masing-masing
  4. Ubah author dan keterangan lainnya
  5. Tampilkan di browser
<!DOCTYPE html>
<html lang="id-ID">
<head>
<title>Latihan 6 - Menambahkan Video</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author=" content="Suharmoyo">
<meta name="description" content="Menambahkan Video">
<meta name="keywords" content="html, imdkom, website">
</head>
<body>

<h2>Menambahkan Video MP4</h2>
<video width="400" controls>
  <source src="media/mov_bbb.mp4" type="video/mp4">
</video>

</body>
</html>

 

Latihan 7 – Menambahkan Video Youtube

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

Untuk menyalin Kode semat Youtube ( iframe )

  1. https://youtu.be/fiVjGm8UCns
  2. Biarakan jalan sebentar
  3. Klik Kanan
  4. Salin kode semat
<!DOCTYPE html>
<html lang="id-ID">
<head>
<title>Latihan 7 - Menambahkan Video Youtube</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author=" content="Suharmoyo">
<meta name="description" content="Menambahkan Video Youtube">
<meta name="keywords" content="html, imdkom, website">
</head>
<body>

<h2>Menambahkan Video Youtube</h2>
<iframe width="853" height="480" src="https://www.youtube.com/embed/fiVjGm8UCns" title="INFORMASI IMDKOM BENGKAYANG 2022" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

</body>
</html>

 

 

Latihan 8 – Menambahkan Peta / Map

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

Untuk menyalin Kode semat peta / map ( iframe )

  1. Buka https://www.google.com/maps/
  2. Cari lokasi IMDKOM Bengkayang
  3. Klik Bagikan
  4. Klik Sematkan peta
  5. Salin HTML
<!DOCTYPE html>
<html lang="id-ID">
<head>
<title>Latihan 8 - Menambahkan Peta / Map </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author=" content="Suharmoyo">
<meta name="description" content="Menambahkan Peta / Map">
<meta name="keywords" content="html, imdkom, website">
</head>
<body>

<h2>Menambahkan Peta / Map</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.3877653186137!2d109.48237967436278!3d0.8417425991500954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31e335db02aacaed%3A0x8cdad2dec7ed3765!2sImdkom%20Bengkayang!5e0!3m2!1sid!2sid!4v1701054375971!5m2!1sid!2sid" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

</body>
</html>

 

 

************ Lanjutkan Penggunaan CSS – klik saja disini ********************