Mengenal HTML
HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML terdiri dari berbagai elemen yang digunakan untuk menampilkan konten di web, seperti teks, gambar, tautan, dan lainnya.
HTML menggunakan tag untuk menandai elemen-elemen di dalam dokumen. Tag HTML biasanya terdiri dari tag pembuka dan tag penutup, yang membungkus konten di antara keduanya. Misalnya, tag <p> digunakan untuk membuat paragraf, sedangkan tag <a> digunakan untuk membuat tautan.
Menambahkan Paragraf
Untuk menambahkan paragraf di halaman web, kita menggunakan tag <p>. Tag ini digunakan untuk membungkus teks yang ingin ditampilkan sebagai paragraf. Setiap paragraf biasanya dipisahkan oleh tag <p> yang berbeda.
Contoh penggunaan tag <p>:
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
Dengan menggunakan tag <p>, kita dapat menambahkan teks ke halaman web dan membuatnya lebih mudah dibaca oleh pengunjung.
Membuat Cetak Tebal
Untuk membuat teks menjadi cetak tebal, kita menggunakan tag <b>.
Contoh penggunaan tag <b>:
<p>Ini adalah teks <b>cetak tebal</b>.</p>
Selain menggunakan tag <b>, kita juga dapat membuat teks menjadi tebal menggunakan tag <strong>.
Contoh penggunaan tag <strong>:
<p>Ini adalah teks <strong>cetak tebal</strong>.</p>
Dengan menggunakan tag <b> atau <strong>, kita dapat membuat teks menjadi cetak tebal di halaman web.
Membuat Cetak Miring
Untuk membuat teks menjadi miring, kita menggunakan tag <i>.
Contoh penggunaan tag <i>:
<p>Ini adalah teks <i>miring</i>.</p>
Selain menggunakan tag <i>, kita juga dapat membuat teks menjadi miring menggunakan tag <em>.
Contoh penggunaan tag <em>:
<p>Ini adalah teks <em>miring</em>.</p>
Dengan menggunakan tag <i> atau <em>, kita dapat membuat teks menjadi miring di halaman web.
Membuat Garis Bawah
Untuk membuat teks menjadi bergaris bawah, kita menggunakan tag <u>.
Contoh penggunaan tag <u>:
<p>Ini adalah teks <u>bergaris bawah</u>.</p>
Dengan menggunakan tag <u>, kita dapat membuat teks menjadi bergaris bawah di halaman web.
Menambahkan Komentar di HTML
Untuk menambahkan komentar di dalam kode HTML, kita menggunakan tag <!-- -->. Komentar ini tidak akan ditampilkan di halaman web, tetapi dapat digunakan untuk memberikan catatan atau penjelasan di dalam kode HTML.
Contoh penggunaan komentar di HTML:
<!-- Ini adalah komentar di HTML -->
<p>Ini adalah paragraf.</p>
Dengan menggunakan komentar di HTML, kita dapat memberikan penjelasan atau catatan di dalam kode HTML tanpa mempengaruhi tampilan halaman web.
Menambahkan Link
Untuk menambahkan tautan ke halaman web, kita menggunakan tag <a>. Tag ini memiliki atribut href yang digunakan untuk menentukan URL tujuan dari tautan tersebut.
Contoh penggunaan tag <a>:
<a href="https://satu.usu.ac.id">Kunjungi Satu USU</a>
Dengan menggunakan tag <a>, kita dapat membuat tautan yang mengarahkan pengguna ke halaman web lain atau sumber daya di internet. Tautan ini dapat digunakan untuk navigasi antar halaman atau untuk memberikan referensi tambahan kepada pengunjung situs web.
Memisahkan Konten dengan <br>
Tag <br> digunakan untuk membuat baris baru di dalam teks. Tag ini tidak memiliki tag penutup dan biasanya digunakan untuk memisahkan konten di dalam paragraf atau teks.
Contoh penggunaan tag <br>:
Ini adalah baris pertama.<br>Ini adalah baris kedua.
Dengan menggunakan tag <br>, kita dapat memisahkan konten di dalam teks dan membuatnya lebih mudah dibaca oleh pengunjung.
Memisahkan Konten dengan <hr>
Tag <hr> digunakan untuk membuat garis horizontal yang memisahkan konten di halaman web. Tag ini tidak memiliki tag penutup dan biasanya digunakan untuk memberikan pemisahan visual antara bagian-bagian konten.
Contoh penggunaan tag <hr>:
<hr>
Dengan menggunakan tag <hr>, kita dapat memisahkan konten di halaman web dan membuatnya lebih mudah dibaca oleh pengunjung.
Menambahkan Gambar
Untuk menambahkan gambar ke halaman web, kita menggunakan tag <img>. Tag ini memiliki atribut src yang digunakan untuk menentukan sumber gambar, dan atribut alt yang digunakan untuk memberikan deskripsi alternatif jika gambar tidak dapat ditampilkan.
Contoh penggunaan tag <img>:
<img src="gambar.jpg" alt="Deskripsi Gambar">
Atribut alt digunakan untuk memberikan deskripsi alternatif jika gambar tidak dapat ditampilkan. Ini penting untuk aksesibilitas dan SEO.
Selain itu, kita juga dapat mengatur ukuran gambar menggunakan atribut width dan height. Misalnya:
<img src="gambar.jpg" alt="Deskripsi Gambar" width="300" height="200">
Dengan menggunakan tag <img>, kita dapat menambahkan gambar ke halaman web dan membuatnya lebih menarik bagi pengunjung.
Membuat Tabel
Untuk membuat tabel di halaman web, kita menggunakan tag <table>. Tabel terdiri dari baris dan kolom yang dibentuk oleh tag <tr> (table row) untuk baris, <th> (table header) untuk header kolom, dan <td> (table data) untuk sel data.
Contoh penggunaan tag <table>, <tr>, <th>, dan <td>:
<table border="1">
<tr>
<th>Nama</th>
<th>NIM</th>
<th>Prodi</th>
</tr>
<tr>
<td>Budi Gunawan</td>
<td>240100001</td>
<td>Kedokteran</td>
</tr>
<tr>
<td>Putri Melati</td>
<td>240100002</td>
<td>Kedokteran</td>
</tr>
<tr>
<td>Fachriza Zachri</td>
<td>261402048</td>
<td>Teknologi Informasi</td>
</tr>
</table>
Dalam contoh di atas, kita membuat tabel dengan tiga kolom: Nama, NIM, dan Prodi. Setiap baris data diwakili oleh tag <tr>, dan setiap sel data diwakili oleh tag <td>. Header kolom dibuat menggunakan tag <th>.
Selain itu, kita juga dapat menambahkan atribut border pada tag <table> untuk memberikan garis tepi pada tabel. Nilai dari atribut border menentukan ketebalan garis tepi tabel.
Hasilnya akan menjadi seperti ini
| Nama |
NIM |
Prodi |
| Budi Gunawan |
240100001 |
Kedokteran |
| Putri Melati |
240100002 |
Kedokteran |
| Fachriza Zachri |
261402048 |
Teknologi Informasi |
Dengan menggunakan tag <table>, kita dapat membuat tabel untuk menampilkan data secara terstruktur di halaman web.
Colspan dan Rowspan
Atribut colspan dan rowspan digunakan untuk menggabungkan sel di dalam tabel. Atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu sel, sedangkan atribut rowspan digunakan untuk menggabungkan beberapa baris menjadi satu sel.
Contoh penggunaan atribut colspan dan rowspan:
<table border="1">
<tr>
<th rowspan="2">Nama</th>
<th rowspan="2">NIM</th>
<th rowspan="2">Prodi</th>
<th colspan="2">Jenis Kelamin</th>
</tr>
<tr>
<th>Laki-laki</th>
<th>Perempuan</th>
</tr>
<tr>
<td>Budi Gunawan</td>
<td>240100001</td>
<td>Kedokteran</td>
<td>✓</td>
<td></td>
</tr>
<tr>
<td>Putri Melati</td>
<td>240100002</td>
<td>Kedokteran</td>
<td></td>
<td>✓</td>
</tr>
<tr>
<td>Fachriza Zachri</td>
<td>261402048</td>
<td>Teknologi Informasi</td>
<td></td>
<td>✓</td>
</tr>
</table>
Dalam contoh di atas, kita menggunakan atribut rowspan pada sel "Nama", "NIM", dan "Prodi" untuk menggabungkan dua baris menjadi satu sel. Sedangkan pada sel "Jenis Kelamin", kita menggunakan atribut colspan untuk menggabungkan dua kolom menjadi satu sel.
Hasilnya akan menjadi seperti ini
| Nama |
NIM |
Prodi |
Jenis Kelamin |
| Laki-laki |
Perempuan |
| Budi Gunawan |
240100001 |
Kedokteran |
✓ |
|
| Putri Melati |
240100002 |
Kedokteran |
|
✓ |
| Fachriza Zachri |
261402048 |
Teknologi Informasi |
✓ |
|
Dengan menggunakan atribut colspan dan rowspan, kita dapat mengatur tampilan tabel agar lebih rapi dan mudah dibaca oleh pengunjung.
|