Mengenal Perintah Dasar Html Dan Cara Kerjanya

HTML atau HyperText Mark-up Language merupakan bahasa mark-up yang di gunakan untuk membuat konstruksi suatu internet (situs internet atau aplikasi berbasis internet).

HTML di anggap bukan sebagai suatu bahasa pemrograman karena strukturnya yang sederhana, oleh karena itu situs internet atau aplikasi berbasis internet dinamis tidak mungkin di buat hanya menggunakan HTML saja, misalnya di kombinasikan dengan PHP yang merupakan salah satu bahasa pemrograman internet paling populer saat ini.

Persiapan Awal

Hal pertama yang anda butuhkan untuk mempelajari HTML adalah sebuah textual content editor. Karena, nantinya kita akan menulis kode didalamnya dan memyimpannya dalam ekstensi .html

Silahkan down load dan set up terlebih dahulu software yang dibutuhkan. Berikut simak penjelasanya...

<! DOCTYPE html>

Tag ini adalah perintah dasar HTML yang di gunakan untuk menginformasikan internet browser bahwa dokumen yang di berikan adalah dokumen HTML, dengan begitu internet browser dapat mengetahui bagaimana dokumen harus di interpretasikan.

<html> … </html>

Tag ini adalah perintah dasar HTML yang di gunakan sebagai wadah untuk semua elemen dari keseluruhan dokumen HTML, semua elemen HTML harus ada dalam tag <html> … </html>.

<head> … </head>

Tag ini adalah perintah dasar HTML yang berisi informasi tentang dokumen HTML yang digunakan oleh internet browser dan internet crawlers namun sebagian besar tidak ditampilkan ke pengunjung situs internet. Tujuan dari penggunaan tag adalah memberikan informasi tentang dokumen itu sendiri.

<title> … </title>

Tag ini adalah perintah dasar HTML yang di butuhkan untuk menetapkan judul dokumen HTML. Judul halaman tidak di tampilkan di halaman internet, namun di gunakan sebagai nama halaman oleh seek engine dan di tampilkan pada tab internet browser juga di gunakan sebagai nama halaman dari halaman internet yang di bookmark.

<body> … </body>

Berfunsi sebagai perintah dasar HTML yang berisi keseluruhan isi halaman internet. Tag merupakan elemen HTML yang paling penting. Isi elemen adalah apa yang di tampilkan kepada pengguna yang mengunjungi halaman internet melihat dokumen internet.

<p> … </p>

Berfunsi sebagai perintah dasar HTML yang di gunakan untuk mengidentifikasi blok teks. Tag ini mendefinisikan sebuah paragraf teks (belupa blok).

Nah disini saya akan coba satukan ke-enam pasang tag di atas menjadi satu kesatuan membentuk struktur dasar halaman HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML Bersama Dinotech</title>
  </head>
  <body>
    <p>Belajar Ilmu komputer & teknologi</p>
  </body>
</html>

<b> … </b> & <strong> … </strong>

Tag <b> perintah dasar HTML yang di gunakan untuk menarik perhatian pada teks dengan menampilkan huruf tebal secara semantik, pada HTML5 ada tag lain yang serupa dengan tag <b> (untuk menampilkan teks tebal) adalah tag <strong>, tag <strong> di gunakan untuk mengidentifikasi teks yang lebih penting dari pada teks di sekitarnya.

<i> … </i> & <em> … </em>

Tag <i> adalah perintah dasar HTML yang di gunakan untuk membedakan kata dari teks sekitarnya dengan menata teks yang di tandai dengan huruf miring tanpa menyiratkan penekanan tambahan pada kata-kata yang dicetak miring, untuk teks dengan makna yang tersirat secara tekstual HTML5 menyediakan tag <em> untuk kebutuhan tersebut.

<u> … </u>

Tag <u> adalah perintah dasar HTML yang di gunakan untuk mengidentifikasi teks yang harus di garisbawahi, namun teks tersebut tidak berartikulasi walaupun menjadi berbeda dari teks di sekitarnya.

<a> … </a>

Tag <a>, atau tag anchor, adalah perintah dasar HTML yang di gunakan untuk membuat hyperlink ke halaman web lain atau lokasi lain dalam halaman web yang sama. Hyperlink yang di buat oleh elemen anchor dapat di terapkan pada teks, gambar, atau konten HTML lainnya yang berada di antara tag <a> dan </a>.

Nah sekarang kita coba satukan tag di atas menjadi satu kesatuan membentuk halaman web dengan beragam format teks.

 <!DOCTYPE html>
           <html>
             <head>
               <title>Belajar HTML Bersama Dinotech</title>
             </head>
             <body>
               <p>Belajar ilmu komputer & teknologi</p>
               <b>Teks tebal dengan tag BOLD</b>
               <strong>Teks tebal dengan tag STRONG</strong>
               <i>Teks miring dengan tag ITALIC</i>
               <em>Teks miring dengan tag EMPASIZE</em>
               <u>Teks bergarisbawah dengan tag UNDERLINE</u>
               <a href="https://www.dinotech.my.id">Teks link dengan tag ANCHOR</a>
             </body>
           </html>

<ul> ... </ul>

Tag <ul> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan list item yang tidak berurutan (unordered list, ul). Tag <ul> menyajikan list item di dalamnya tanpa urutan numerik.

<ol> … </ol>

Tag <ol> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan list item yang berurutan (ordered list, ol). Tag <ol> menyajikan list item di dalamnya dengan urutan numerik (1, I, i) atau alfabet (A, a).

<li> … </li>

Tag <li> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan list item yang merupakan bagian dari tag <ul> atau tag <ol>. Tampilan list item tergantung pada jenis list yang di gunakan.

Copy dan pastekan diteks editor milik anda untuk melihat perbedaanya:

[tab title=”Unordered List”]

<ul>
  <li>Software</li>
  <li>Hardware</li>
  <li>Brainware</li>
</ul>

<ul type='circle'>
  <li>Software</li>
  <li>Hardware</li>
  <li>Brainware</li>
</ul>

<ul type='disc'>
  <li>Software</li>
  <li>Hardware</li>
  <li>Brainware</li>
</ul>

[tab title=”Ordered List”]

<ol>
  <li>Software</li>
  <li>Hardware</li>
  <li>Brainware</li>
</ol>

<ol type='A'>
  <li>Software</li>
  <li>Hardware</li>
  <li>Brainware</li>
</ol>

<ol type='a'>
  <li>Software</li>
  <li>Hardware</li>
  <li>Brainware</li>
</ol>

<ol type='I'>
  <li>Software</li>
  <li>Hardware</li>
  <li>Brainware</li>
</ol>

<ol type='i'>
  <li>Software</li>
  <li>Hardware</li>
  <li>Brainware</li>
</ol>

<table> ... </table>

Seperti namanya, tag <table> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan tabel, sebuah tabel setidaknya terdiri dari satu kolom dan satu baris.

<tr> … </tr>

Tag <tr> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan baris pada tabel (table row), tag <tr> harus di simpan tepat di dalam tag <table>, dalam satu baris bisa terdapat satu atau lebih tag <td> atau tag <th>.

<th> … </th>

Tag <th> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan heading pada tabel (table heading), tag <th> harus di simpan tepat di dalam tag <tr>.

<td> … </td>

Tag <td> adalah perintah dasar HTML yang di gunakan untuk mendefinisikan tabel data, tag <td> harus di simpan tepat di dalam tag <tr>.

Contoh struktur tabel:

<table border='1'>
  <tr>
    	<th>No.</th>
	<th>Nama Barang</th>
	<th>Harga Barang</th>
  </tr>
  <tr>
    	<td>1</td>
	<td>Smartphone</td>
	<td>Rp 5.000.000</td>
  </tr>
  <tr>
    	<td>2</td>
	<td>komputer</td>
	<td>Rp 10.000.000</td>
  </tr>
</table>

<img/>

Tag <img> adalah perintah dasar HTML yang di gunakan untuk menampilkan gambar statis pada halaman web. Semua tag <img> harus memiliki atribut “src” yang di tentukan. Atribut “src” mendefinisikan gambar yang akan di tampilkan. Biasanya, “src” adalah URL.

<audio> … </audio>

Tag <audio> adalah perintah dasar HTML yang di gunakan untuk menambahkan media audio ke dokumen HTML yang akan di mainkan oleh dukungan untuk pemutaran audio yang terpasang pada browser.

<video> … </video>

Tag <video> adalah perintah dasar HTML yang di gunakan untuk menambahkan video ke halaman web, video akan di putar oleh dukungan pemutaran video native, tag <video> membutuhkan URL video ke elemen tersebut dengan menggunakan atribut src elemen <video> antara tag pembuka dan penutup <video>.

Contoh:

[tab title=”Image”]

<img src='dinotech.png' alt='gambar'/>

[tab title=”Audio”]

<audio src='dinotech.mp3' controls></audio>

[tab title=”video”]

<video src='dinotech.mp4' controls></video>

<form>

Tag <form> adalah perintah dasar HTML yang di gunakan untuk membuat formulir pada halaman web. Elemen <form> di gunakan sebagai wadah induk untuk menampung elemen formulir seperti elemen <input> dan <textarea>.

<input>

Tag <input> adalah perintah dasar HTML yang di gunakan untuk membuat kolom formulir yang menerima masukan dari pengguna. Bentuk elemen <input> dapat di sajikan dengan berbagai cara, termasuk teks box, button, check box, menu drop-down, dan banyak lagi.

<textarea>

Tag <textarea> adalah perintah dasar HTML yang di gunakan untuk membuat area input teks dengan panjang yang tak terbatas. tag <textarea> paling sering di gunakan dalam <form>.

<button>

Tag <button> adalah perintah dasar HTML yang di gunakan untuk membuat tombol HTML. Teks yang muncul antara tag pembuka dan penutup akan muncul sebagai teks pada tombol.

<select>

Tag <select>, adalah perintah dasar HTML yang di gunakan bersama dengan satu atau lebih tag <option>, kombinasi kedua tag tersebut digunakan untuk membuat daftar opsi drop-down untuk formulir pada halaman web. Tag <select> membuat daftar dan setiap elemen <option> di tampilkan sebagai pilihan yang tersedia dalam daftar tersebut.

<option>

Tag <option> adalah perintah dasar HTML yang di gunakan bersamaan dengan elemen <select> untuk membuat menu drop-down dalam formulir halaman web. Setiap elemen <option> di tampilkan sebagai pilihan yang tersedia di menu drop-down yang di hasilkan, tag <option> harus di letakkan tepat di dalam tag <select>.

Contoh:

<form>
  Nama : <br/>
  <input type='text'><br/>
  Jenis Kelamin : <br/>
  <select>
    <option>Laki-laki</option>
    <option>Perempuan</option>
    <option>Khusus</option>
  </select>
  <br/>
  Alamat : <br/>
  <textarea cols='5' rows='5'> </textarea><br/>
  <button>Simpan</button>
</form>

<style>

Tag <style> adalah perintah dasar HTML yang di gunakan untuk menambahkan kode CSS ke dokumen HTML. Elemen ini sebaiknya di letakkan di bagian <head>, walaupun tetap dapat berguna jika di letakkan dalam <body>.

<script>

Tag <script> adalah perintah dasar HTML yang berisi kode yang di tulis dalam bahasa pemrograman selain HTML atau menentukan lokasi sumber skrip eksternal.

Nahh demikian pembahasan mengenai perintah dasar HTML, gunakan text editor seperti Sublime Text, NotePad++, atau text editor lain favorit Anda untuk memudahkan editing kode di atas, semoga bermanfaat untuk Anda yang membutuhkan.

Mengenal Perintah Dasar Html Dan Cara Kerjanya

Mengenal Perintah Dasar Html Dan Cara Kerjanya

Postingan Populer

Usefull Links

Company

Formulir Kontak

Hallo!