Belajar Dasar-Dasar HTML Untuk Pemula

Pemograman Java pada Context Pemograman Java pada Context

HTML (HyperText Markup Language) merupakan bagian utama dari bahasa pemograman dalam sebuah Website. HTML adalah sebuah kerangka yang akan menampilkan sebuah halaman website melalui sebuah browser. Tanpa kode HTML, sebuah halaman website akan putih bersih dan hanya menampilkan teks polos tanpa pemformatan paragraf. Itulah pentingnya kode HTML.

Kesalahan dalam penulisan kode HTML dapat menyebabkan beberapa browser mengabaikan kode HTML tersebut. Namun tidak jarang ada Browser yang mencekal halaman HTML tersebut dan hanya menampilkan Syntaks Error. Semoga Anda akan lebih berhati-hati dalam menuliskan kode tersebut.

Kini kode HTML telah mencapai ke level HTML 5. Namun disini hanya akan dipelajari konsep-konsep dasar HTML tersebut sehingga Anda akan memahami bagaimana kode HTML bekerja.

Belajar Kode HTML

Kode HTML menggunakan tanda tag <> untuk membatasi kode, dan tanda garis miring (/) untuk menutup kode.

Untuk sebuah kode HTML tunggal, penulisan kodenya adalah sebagai berikut:

<kode_html/>

Sedangkan untuk kode HTML ganda membutuhkan pembuka dan penutup kode dengan format seperti berikut:

<kode_html>data_disini</kode_html>

Yang diatas adalah contoh penformatan, sedangkan untuk tulisan kode_html  dapat diganti dengan huruf berikut:

  • a = hyperlink
  • img = gambar
  • b = huruf tebal
  • i = huruf miring
  • u = huruf bergaris bawah
  • h1 = judul
  • blink = huruf  berkedip
  • font = mengatur huruf
  • table = membuat tabel
  • dan masih banyak lagi…

Contoh sederhana untuk penulisan kode adalah sebagai berikut:

Huruf tebal:

<b>Belajar kode HTML untuk pemula</b>

Hasil: Belajar kode HTML untuk pemula

Huruf miring:

<i>Belajar kode HTML untuk pemula</i>

Hasil: Belajar kode HTML untuk pemula

Huruf bergaris bawah:

<u>Belajar kode HTML untuk pemula</u>

Hasil: Belajar kode HTML untuk pemula

Hyperlink:

<a href="http://www.pramudito.com">Kunjungi Pramudito.com</a>

Hasil: Kunjungi Pramudito.com

Penulisan Dengan Markup HTML Lengkap

Penulisan contoh diatas adalah penulisan kode per-baris. Penulisan kode tersebut belum sempurna dan akan menjadi cacat jika tidak dutuliskan dengan kode HTML yang lengkap. Penulisan kode ini akan diperlukan jika halaman HTML tersebut diupload ke server untuk diakses oleh banyak orang.

Contoh penulisan format HTML lengkap adalah seperti berikut:

 <html>
      <head>
             <title>Judul Halaman (ditampilkan di tab browser)</title>
      </head>
      <body>
             Kode html yang akan ditampilkan di browser
      </body>
</html>

Sekarang kita akan mempelajari bagaimana menuliskan kode yang telah dipelajari sebelumnya pada sebuah Markup HTML lengkap. Berikut ini adalah contoh penulisan kode HTML dengan struktur yang baik:

<html>
  <head>
     <title>Judul Halaman (ditampilkan di tab browser)</title>
  </head>
  <body>
     <b>Ini adalah huruf tebal</b>
     <i>Ini adalah huruf miring</i>
     <u>Ini adalah huruf bergaris bawah</u>
     <a href="http://www.pramudito.com">Kunjungi Pramudito.com</a>
  </body>
</html>

Maka hasilnya adalah sebagai berikut:

Ini adalah huruf tebal Ini adalah huruf miring Ini adalah huruf bergaris bawah Kunjungi Pramudito.com

Oh tidak, tampilannya menjadi tidak rapi 🙁 . Seharusnya tampilannya turun kebawah, bukan kesamping. Apa yang harus saya lakukan?

Untuk membuat tampilan dengan garis baru kebawah, maka kita memerlukan sebuah kode, kode tersebut adalah:

<br/>

Sehingga jika diterapkan dalam kode sebelumnya adalah seperti berikut ini

<html>
  <head>
     <title>Judul Halaman (ditampilkan di tab browser)</title>
  </head>
  <body>
     <b>Ini adalah huruf tebal</b>
         <br/>
     <i>Ini adalah huruf miring</i>
         <br/>
     <u>Ini adalah huruf bergaris bawah</u>
         <br/>
     <a href="http://www.pramudito.com">Kunjungi Pramudito.com</a>
  </body>
</html>

Hasil:

Ini adalah huruf tebal

Ini adalah huruf miring

Ini adalah huruf bergaris bawah

Kunjungi Pramudito.com

Kode HTML Berlapis

Tidak hanya menggunakan satu tag <> saja. Terkadang kita membutuhkan sebuah kode berlapis dari menggunakan element HTML. Misalnya saja sebuah kode untuk membuat tulisan huruf tebal dan miring atau huruf tebal+miring+bergaris bawah, maka bisa menggunakan berlapis-lapis kode HTML

1. Tebal dan miring

<b><i>Belajar Kode HTML untuk Pemula</i></b>

Maka hasilnya adalah seperti berikut:

Belajar kode HTML untuk Pemula

2. Tebal + Miring + Bergaris Bawah

<b><i><u>Belajar kode HTML untuk Pemula</u></i></b>

Maka hasilnya adalah seperti berikut:

Belajar kode HTML untuk Pemula

Selain dua contoh diatas, penggabungan kode HTML dapat dilakukan tanpa batas. Penggabungan ini biasanya dilakukan jika objek yang akan dibuat memerlukan lebih dari satu element. Element HTML tersebut dapat digabungkan dengan cara membuat element utama berada di tengah. Ini dikarenakan browser membaca kode HTML berlapis tersebut dari tengah, jadi urutannya seperti ini:

<u>Belajar kode HTML untuk Pemula</u>
<i><u>Belajar kode HTML untuk Pemula</u></i>
<b><i><u>Belajar kode HTML untuk Pemula</u></i></b>

Masih banyak kode HTML yang bisa kita pelajari, mau belajar lebih lanjut? Tunggu update selanjutnya ya 🙂

3 Comments on Belajar Dasar-Dasar HTML Untuk Pemula

  1. thanks infonya gan..

    Bagi agan yang berminat belajar membuat web bisa dilihat di situs berikut ini Kursus Web di Denpasar

  2. Kalo konsol yang enak untuk develop web apa ya?

Leave a comment

Your email address will not be published.


*