Navigasi

• Tugas 2 - Form
• Tugas 3 - Kalkulator
• Tugas 4 - Bootstrap

Daftar Isi

• Mengenal HTML
  • Sejarah HTML
• Menambahkan Paragraf
• Membuat Cetak Tebal
• Membuat Cetak Miring
• Membuat Garis Bawah
• Menambahkan Komentar di HTML
• Menambahkan Link
• Memisahkan Konten dengan <br>
• Memisahkan Konten dengan <hr>
• Menambahkan Gambar
• Membuat Tabel
• Colspan dan Rowspan
• Membuat List
  • Ordered List dengan <ol>
  • Unordered List dengan <ul>
  • List Item dengan <li>

Mengenal HTML

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML bukanlah bahasa pemrograman, melainkan sebuah bahasa markup seperti LaTeX dan semacamnya. 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.

Gambar di atas adalah logo HTML5, yang merupakan versi terbaru dari HTML. HTML5 membawa banyak fitur baru dan peningkatan dibandingkan versi sebelumnya, termasuk dukungan untuk multimedia, grafis, dan interaktivitas yang lebih baik di halaman web.

Sumber: Wikimedia Commons

Sejarah HTML

Berikut adalah perkembangan versi HTML dari HTML 1 hingga HTML5:

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

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>&check;</td>
        <td></td>
    </tr>
    <tr>
        <td>Putri Melati</td>
        <td>240100002</td>
        <td>Kedokteran</td>
        <td></td>
        <td>&check;</td>
    </tr>
    <tr>
        <td>Fachriza Zachri</td>
        <td>261402048</td>
        <td>Teknologi Informasi</td>
        <td></td>
        <td>&check;</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

Dengan menggunakan atribut colspan dan rowspan, kita dapat mengatur tampilan tabel agar lebih rapi dan mudah dibaca oleh pengunjung.

Membuat List

HTML juga memiliki tag yang digunakan untuk membuat daftar. Tag yang umum digunakan adalah <ol>, <ul>, dan <li>.

Ordered List dengan <ol>

Tag <ol> digunakan untuk membuat daftar yang memiliki urutan. Browser akan memberikan nomor pada setiap item.

Contoh penggunaan tag <ol>:

<ol>
    <li>Belajar HTML</li>
    <li>Belajar CSS</li>
    <li>Belajar JavaScript</li>
</ol>

Hasilnya adalah daftar bernomor.

Unordered List dengan <ul>

Tag <ul> digunakan untuk membuat daftar yang tidak memiliki urutan tertentu. Browser biasanya akan memberikan tanda bullet.

Contoh penggunaan tag <ul>:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Hasilnya adalah daftar dengan tanda bullet.

List Item dengan <li>

Tag <li> digunakan untuk membuat satu item di dalam <ol> atau <ul>.

Contoh:

<ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
</ul>

Perbedaannya dapat dilihat pada tabel berikut: