Download to read offline
belajar dan studi kasus HTML untuk pemula
- 1. File: latihan_1.html “Membuat fileHTML pertama untuk website” <!DOCTYPE html> <html lang="id"> <head> <title>Latihan HTML</title> </head> <body> <h1>Ini adalah judul halaman web</h1> <p>Ini adalah paragraf pertama.</p> <p>Ini adalah paragraf kedua.</p> </body> </html> Keterangan: • Tag <!DOCTYPE html> digunakan untuk memberitahu browser bahwa file yang akan dibuka adalah file HTML. • Tag <html lang="id"> digunakan untuk menentukan bahasa yang digunakan dalam halaman web. • Tag <head> digunakan untuk menyimpan informasi tentang halaman web, seperti judul, meta tag, dan gaya CSS. • Tag <title> digunakan untuk menentukan judul halaman web. • Tag <body> digunakan untuk menyimpan konten halaman web. • Tag <h1> digunakan untuk membuat judul dengan ukuran besar. • Tag <p> digunakan untuk membuat paragraf.
- 2. File: latihan_2.html “Membuat tabledengan tag <table> “ <!DOCTYPE html> <html lang="id"> <head> <title>Latihan HTML</title> </head> <body> <table> <tr> <th>Nomor</th> <th>Nama</th> <th>Umur</th> </tr> <tr> <td>1</td> <td>John Doe</td> <td>25</td> </tr> <tr> <td>2</td> <td>Jane Doe</td> <td>23</td> </tr> </table> </body> </html> Keterangan: • Tag <table> digunakan untuk membuat tabel. • Tag <tr> digunakan untuk membuat baris dalam tabel. • Tag <th> digunakan untuk membuat kolom judul dalam tabel. • Tag <td> digunakan untuk membuat kolom data dalam tabel. untuk menampilkan garis table ubahlah <table> menjadi <table border=”1”>
- 3. File: Latihan_3.html “Membuat daftarlist tidak berurutan pakai symbol titik sepeti keterangan … “ <!DOCTYPE html> <html lang="id"> <head> <title>Latihan HTML</title> </head> <body> <ul> <li>Daftar item 1</li> <li>Daftar item 2</li> <li>Daftar item 3</li> </ul> </body> </html> Keterangan: • Tag <ul> digunakan untuk membuat daftar tidak berurutan. • Tag <li> digunakan untuk membuat item dalam daftar. “Membuat daftar list berurutan 1, 2, 3, 4, dst… “ <!DOCTYPE html> <html lang="id"> <head> <title>Latihan HTML</title> </head> <body> <ol> <li>Daftar item A</li> <li>Daftar item B</li> <li>Daftar item C</li> </ol> </body> </html> Keterangan: • Tag <ol> digunakan untuk membuat daftar berurutan ( 1, 2, 3, 4, ..dst..). • Tag <li> digunakan untuk membuat item dalam daftar.
- 4. File: Latihan_4.html “memasukan gambarke dalam HTML (lokasi gambar harus dalam 1 folder dengan file Latihan_4.html” <!DOCTYPE html> <html lang="id"> <head> <title>Latihan HTML</title> </head> <body> <img src="gambar.jpg" alt="Gambar"> </body> </html> Keterangan: • Tag <img> digunakan untuk membuat gambar. • Atribut src digunakan untuk menentukan alamat/lokasi gambar berada. • Atribut alt digunakan untuk memberikan keterangan gambar. “memasukan gambar ke dalam HTML dengan menggunakan Alamat link http:// atau www.” <!DOCTYPE html> <html lang="id"> <head> <title>Latihan HTML</title> </head> <body> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_ color_272x92dp.png" alt="Gambar" > </body> </html> Keterangan: • Harus terkoneksi kedalam jaringan internet untuk memunculkan gambar • Tag <img> digunakan untuk membuat gambar. • Atribut src digunakan untuk menentukan alamat/lokasi gambar berada. • Atribut alt digunakan untuk memberikan keterangan gambar.
- 5. File: Latihan_5.html “membuat linkpada HTML yang dapat berguna untuk berpindah halaman/file dari file 1 ke file 2 atau halaman A ke halaman B” <!DOCTYPE html> <html lang="id"> <head> <title>Latihan HTML</title> </head> <body> <a href="https://www.google.com">Google</a> </body> </html> Keterangan: • Tag <a> digunakan untuk membuat link. • Atribut href digunakan untuk menentukan alamat link.