Header Ads

Mengenal HTML dan Belajar Menggunakannya

Februari 03, 2015
Ada yang belum Tau HTML? Kali ini saya akan menjalskan Apa itu HTML dan bagaimana cara membuatnya?
Langsung saja kita bahas dibawah ini.

Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut denganSGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). 

Mari kita sama-sama belajar dari awal menggunakan HTML.
Cara membuatnya sangat mudah, Silahkan kalian buka Aplikasi Notepad di Windows, GEdit di Linux.
Kemudian Ketikkan skrip kode berikut ini, kemudian simpan dengan nama coba.html
Skrip HTML :

<!DOCTYPE html>
<html>
     <head>
         <title>Judul Halaman</title>
     </head>
       <body>
             Belajar HTML Menyenangkan looh..
       </body>
</html>
Keterangan :
  • <html>....</html> bertujuan untuk menggambarkan sebuah dokumen HTML
  • <head>....</head> bertujuan untuk memberikan informasi tentang dokumen.
  • <title>.....</title> bertujuan untuk memberikan judul untuk dokumen.
  • <body>....</body> bertujuan untuk menggambarkan isi halaman yang terlihat

Hasil dari skrip diatas seperti ini :
Skrip diatas adalah skrip HTML yang paling dasar.
Mari kita belajar Skrip HTML yang ke dua.
'Membuat Teks menjadi besar seperti Judul Halaman, Memberikan Baris Baru (atau sering disebut dengan Enter), Memberi ketebalan pada Teks, dan memberi warna pada Teks'

Cara : Buka Notepad/GEdit => Ketikan Skrip berikut => Simpan dengan nama skrip2.html.
Skrip Ke-2 :

<!DOCTYPE html>
<html>
      <head>
          <title>Skrip Kedua</title>
      </head>
   <body>
         <h1>Inilah Judul di Bagian Halaman</h1>
              <br>
         <b>Ini Kalimat dengan Ketebalan</b>
              <br>
         <font color="red">Ini Kalimat dengan warna Merah</font>
   </body>
</html>
Keterangan :
  • <h1>....</h1> bertujuan untuk menggambarkan judul. Bisa diganti dengan <h2> ataupun <h3>
  • <br> bertujuan untuk pindah baris atau sering disebut dengan (ENTER).
  • <b>....</b> bertujuan untuk memberi ketebalan untuk teks.
  • <font>....</font> bertujuan memodifikasi Teks.
  • <font color="red">....</font> bertujuan untuk memberi warna pada Teks. Warna bisa dirubah asalkan menggunakan bahasa inggris.
Jika sudah buka file skrip2.html dengan Web Browser.
Seperti ini tampilannya :

Kemudian kita akan belajar menggunakan Skrip Membuat Tulisan Miring, Perberdaan <h1>, <h2>,<h3>, dst,  Membuat format Paragraf, me-Link kan Halaman, Membuat Teks berada di Kiri, Tengah, Kanan halaman

Buka Notepad/GEdit, Ketikan Skrip berikut, Simpan dengan nama skrip3.html.
Skrip 3 :

<!DOCTYPE html>
<html>
  <head>
    <title>Skrip ke Tiga</title>
  </head>
      <body>
          <i>Ini Tulisan Miring</i>
          <h1>Ini format judul halaman dengan H1</h1>
          <h2>Ini format judul halaman dengan H2</h2>
          <h3>Ini format judul halaman dengan H3</h3>
          <h4>Ini format judul halaman dengan H4</h4>
          <h5>Ini format judul halaman dengan H5</h5>
          <h6>Ini format judul halaman dengan H6</h6>
          <p>Ini Format Paragraf di HTML</p>
          <a href="halaman_tujuan.html">Ini Pemformatan Link di HTML</a>
          <p align="left">Teks ini berada di Kiri Halaman</p>
          <p align="center">Teks ini berada di Tengah Halaman</p>
          <p align="right">Teks ini berada di Kanan Halaman</p>
      </body>
</html>
Keterangan :
  • <i>...</i> bertujuan untuk membuat Teks menjadi Miring
  • <h1>...</h1> bertujuan untuk menggambarkan judul. (paling besar)
  • <h2>...</h2> bertujuan untuk menggambarkan judul. (lebih kecil dari h1)
  • <h3>...</h3> bertujuan untuk menggambarkan judul. (lebih kecil dari h2)
  • <h4>...</h4> bertujuan untuk menggambarkan judul. (lebih kecil dari h3)
  • <h5>...</h5> bertujuan untuk menggambarkan judul. (lebih kecil dari h4)
  • <h6>...</h6> bertujuan untuk menggambarkan judul. (lebih kecil dari h5)
  • <p>...</p> bertujuan untuk membuat format paragraf/memodifikasi paragraf
  • <a href="link_tujuan">...</a> bertujuan untuk me-Link kan Halaman awal ke Halaman Tujuan
  • <p align="left">...</p> bertujuan untuk membuat Teks berada di Kiri Halaman
  • <p align="center">...</p> bertujuan untuk membuat Teks berada di Tengah Halaman
  • <p align="right">...</p> bertujuan untuk membuat Teks berada di Kanan Halaman
Jika sudah, Buka File skrip3.html di Web Browser.
Akan muncul tampilan seperti ini :
Cukup itu saja yang saya kasih tutorial HTML.
Lain kali bakal ada Tutorial Pemrograman Web yang lain.
Terima Kasih

Post a Comment

Tidak ada komentar

Langganan: Posting Komentar ( Atom )