Dasar HTML

Photo by Gabriel Heinzer on Unsplash

Sebelum kita masuk ke bab ini, pastikan terlebih dahulu sudah memiliki text-editor seperti sublime text, notepad++, atau yang lainnya (silakan pilih salah satu). jika tidak, saya sarankan cek artikel sebelumnya untuk mengenal editor dan bagaimana cara menyimpan file html.

Elemen/Tag

Pada bab sebelumnya, kita sudah mengetahui bahwa html terdiri dari sekumpulan tag yang mewakili suatu konten. jadi, untuk membuat suatu konten kita harus mengetahui terlebih tag yang digunakan. suatu HTML biasanya terdiri dari tag pembuka, dan tag penutup dengan konten/isinya berada di kedua tag tersebut.

Bentuk baku :

<tagname>isi dari tag yang kita buat</tagname>

<h3>contoh tag pembuatan judul </h3>
<p>contoh pembuatan paragraf </p>

 

Attribute

Pada Umumnya semua elemen/tag HTML memiliki attribute. Attribut berisi informasi tambahan mengenai tag yang akan kita buat. contohnya kita akan membuat suatu judul dengan membuat H6. H6 ini ingin rata tengah maka kita bisa menambahkan align=”center”. Attribute pada html disimpan di tag pembuka dan biasanya bentuk umum dari suatu attribute adalah name=”value”.

<h6 align="center">Judul dengan rata tengah</h6>
<p align="left">Paragraph dengan rata kiri </p>
<a href="https://www.mangcoding.com" target="_blank">Klik disini</a>

 

Headings digunakan untuk membuat judul pada artikel atau paragraf yang akan kita buat. Heading terdiri dari h1, h2,h3, sampai dengan h6

<h1>ini heading 1</h1>
<h2>ini heading 2</h2>
<h3>ini heading 3</h3>
<h4>ini heading 4</h4>
<h5>ini heading 5</h5>
<h6>ini heading 6</h6>

 

Untuk membuat paragraf, kita cukup menggunakan tag p, jika kita menggunakan sublime text 3, kita cukup mengetikkan huruf p di keyboard kemudian pencet tab maka secara otomatis akan memunculkan tag pembuka dan tag penutup. untuk mendapatkan tulisan dengan dummy text lorem ipsum, kita cukup mengetikkan lorem kemudian pencet tab

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum esse inventore reiciendis voluptate, sapiente, perspiciatis minima et debitis dignissimos harum nisi ex? Odit non perspiciatis adipisci. Dicta nisi, cupiditate alias. </p>

 

Formatting text

Seperti halnya belajar software pengolah text, kadang kala kita membutuhkan tulisan berbentuk tebal, miring, dll. HTML menyediakan tag untuk formatting text, berikut adalah tag-tag yang dipakai untuk membuat format text

Tag Description
<b> Untuk membuat text menjadi tebal
<em> Untuk membuat text menjadi miring
<i> Untuk membuat text menjadi miring
<small> Untuk membuat text menjadi lebih kecil
<strong> Untuk membuat text menjadi tebal
<sub> Untuk membuat tulisan seperti H2O
<sup> Untuk membuat tulisan seperti M2
<ins> Untuk membuat garis dibawha tulisan
<del> Untuk membuat tulisan yang dicoret
<mark> Untuk menandai tulisan (defaultnya warna kuning)

List

List terbagi menjadi 2, yaitu ordered list dan unordered list

Ordered List

  1. ordered list digunakan untuk list dengan penomoran berurut
  2. tag ol digunakan untuk membuka ordered list
  3. tag li digunakan untuk isi list
  4. tag ol memiliki attribute type “a”, “A”, “I”, “i”, “1”

Unordered List

  • unordered list digunakan untuk list dengan tidak memandang urutan
  • tag ul digunakan untuk membuka ordered list
  • tag li digunakan untuk isi list
  • tag ol memiliki attribute type “square”, “circle”, “disc”, “none”

untuk memahami Ol dan Ul silakan anda buat file dibawah ini kemudian save lalu buka di browser kesayangan anda.

<h2 align="center">Mengenal List</h2>
<p>List itu terbagi menjadi 2</p>
<h4>Ordered List</h4>
<ol>
  <li>tag ol digunakan untuk membuka ordered list</li>
  <li>tag li digunakan untuk isi list</li>
  <li>tag ol memiliki attribute type "a", "A", "I", "i", "1"</li>
</ol>
<h4>Unordered List</h4>
<ul>
  <li>tag ul digunakan untuk membuka ordered list</li>
  <li>tag li digunakan untuk isi list</li>
  <li>tag ol memiliki attribute type "square", "circle", "disc", "none"</li>
</ul>
<a href="dasar.html" target="_parent">Halaman dasar</a>

 

Hyperlink digunakan untuk membuat link dari satu halaman ke halaman lain atau ke url diluar website kita. misalnya kita punya file index.html lalu dengan mengklik tombol tertentu maka akan menuju ke halaman about.html atau ketika kita klik lari ke halaman facebook kita. untuk melakukan semua itu diperlukan suatu hyperlink.
Contoh penulisan hyperlink adalah sebagai berikut :

<a href="url/link tujuan">link text</a>
<a href="https://www.facebook.com/mangcoding/" target="_blank">Lihat FB saya</a>

 

cara default, semua link html akan muncul seperti ini di smua browser :
  • Link yang belum dikunjungi akan terlihat berwarna biru dan bergaris bawah
  • Link yang sudah dikunjungi akan terlihat berwarna purple namun tetap bergaris bawah
  • Link memiliki attribute target (“_blank”,”_self”,”_top”,”_parent”)

Menyisipkan Gambar

Tag yang digunakan untuk menyisipkan image dalam HTML adalah img. selain src img memiliki attribut width dan height untuk mengatur lebar dan tinggi gambar, serta alt untuk memberikan keterangan pada gambar

<img src="gambar.jpg" alt="gambar anda" width="200px" height="auto" />

 

Demikian penjelasan singkat untuk dasar HTML, mudah-mudahan bermanfaat. Keep Learning ^_^
Semangat.