All About HTML

by 07.40 0 komentar

Pengertian singkat tentang HTML

HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video.

Macam-macam Tag dan Fungsinya di HTML

Saat kita belajar HTML, pasti kita juga harus mengetaui tentang Tag. Dan sebelum kita mengetaui macam macam tag yang ada di dalam HTML, kita harus mengetahui apa itu Tag terlebih dahulu. Tag adalah sesuatu yang digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML. Tag dalam HTML terdiri dari tanda lebih kecil ( < ), tanda lebih besar ( > ), dan garismiring ( / ). Biasanya Tag dituliskan secara berpasangan, misanya <h1> dan <h1>.
Tag yang tidak menggunakan garis miring ( / ) adalah Tag pembuka atau awal elemen. Sedangkan yang Tag yang mengandung garis miring ( / ) adalah penutup elemen atau akhir elemen. Namun, ada juga Tag yang dalam pemakaiannya tidak berpasangan, diantaranya adalah :
- Tag untuk ganti paragraph yaitu <p>
- Tag untuk ganti baris atau line break yaitu  <br>
- Tag untuk garis datar yaitu <hr>
- Tag list item yaitu <li>
HTML tags adalah sebuah label yang di awali dengan tanda '<' dan di akhiri dgn tanda '>' :
<html>
<title>
<body>
Pada umumnya HTML tags adalah berpasangan:
Dimulai dengan <body> ditutup dengan </body>
Dimulai dengan <h2> ditutup dengan </h2>
Dimulai dengan <p> ditutup dengan </p>
Akan tetapi ada beberapa tags yang juga disebut sebagai 'empty element' dapat berjalan tanpa berpasangan:
<img>
<input>
*Selalu usahakan untuk ingat agar menutup setiap elemen dengan tag penutup!

Beberapa macam Tag dasar yang sering digunakan dalam bahasa HTML

<HTML></HTML>: Tag yang diisi dengan isi dari dokumen HTML.
<BODY></BODY>: Penanda tubuh atau isi dari dokumen web. Dapat disisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Atribut :Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth
<BODY BGCOLOR=”color” TEXT=”color”>: Untuk mengubah warna latarbelakang dan tulisan. Color diisi dengan nama warna atau kode warna.
          Banyak <body bgcolor="red" text="hewan"> di kebun binatang.
          (Contoh: Banyak hewan di kebun binatang.)
<B></B>: Untuk membuat tulisan tebal.
          <b>Banyak hewan di kebun binatang.<b>
          (Contoh: Banyak hewan di kebun binatang.)
<I></I>: Untuk membuat tulisan miring.
         <i>Banyak hewan di kebun binatang.<i>
          (Contoh: Banyak hewan di kebun binatang.)
<U></U>: Untuk membuat tulisan bergaris bawah.
          <u>Banyak hewan di kebun binatang.<u>
          (Contoh: Banyak hewan di kebun binatang.)
<BR>: Untuk membuat baris baru pada dokumen HTML. Tidak mempunyai tag penutup.
<P>: Untuk membuat paragraf baru pada dokumen HTML. Tidak mempunyai tag penutup.
<P ALIGN=”center”>: Untuk membuat paragraf rata tengah.
          <p align="center">Banyak hewan di kebun binatang.
         (Contoh: Banyak hewan di kebun binatang.)
<P ALIGN=”left”>: Untuk membuat paragraf rata kiri.
          <p align="left">Banyak hewan di kebun binatang.
          (Contoh: Banyak hewan di kebun binatang.)
<P ALIGN=”right”>" Untuk membuat paragraf rata kanan.
          <p align="right">Banyak hewan di kebun binatang.
(Contoh: Banyak hewan di kebun binatang.)
<P ALIGN=”justify”>: Untuk membuat paragraf rata kiri dan kanan.
          <p align="justify">Banyak hewan di kebun binatang.
          (Contoh: Banyak hewan di kebun binatang.)
<FONT FACE=”jenis font”></FONT>: Untuk mengubah jenis font.
          <font face="arial">Banyak hewan di kebun binatang.</font>
          (Contoh: Banyak hewan di kebun binatang.)
<FONT SIZE=”ukuran font”></FONT>: Untuk mengubah ukuran font.
          <font size="8">Banyak hewan di kebun binatang</font>
          (Contoh: Banyak hewan di kebun binatang.)
<IMG>: Untuk menyisipkan file gambar.
<BODY BACKGROUND=”nama file gambar“>: Untuk menggunakan gambar sebagai background (latar belakang).
<A HREF=”link“><IMG SRC=”nama file gambar“></A>: Untuk menggunakan gambar sebagai link.
<A HREF=”link“></A>: Untuk menampilkan teks display link.
          BUKA <a href="http://google.com>DISINI</a>.
          (Contoh: BUKA DISINI.)
<MARQUEE></MARQUEE>: Untuk membuat tulisan atau gambar bergerak.
Banyak hewan di kebun binatang.

Contoh tag yang daapat dipakai untuk tulisan berupa kalimat, karakter, ataupun kata

tag <b>..</b> fungsinya untuk menebalkan huruf
tag <i>…</i> fungsinya untuk memiringkan huruf (membuat huruf cetak miring)
tag <u>…</u> fungsinya untuk mencetak huruf bergaris bawah
tag <strong>…</strong> pada dasarnya memiliki fungsi yang sama dengan tag <b>..</b>
tag <font>..</font> digunakan untuk menempatkan selector-selector dan propertinya untuk membuat style suatu huruf pada suatu kata, kalimat, maupun character
tag <blink>…</blink> digunakan untuk membuat tulisan berkedip
tag <marquee>…</marquee> digunakan untuk membuat tulisan berjalan
Tag tingkat paragraf misalnya adalah,
tag <pre>…</pre> fungsinya adalah untuk membuat format suatu paragraf ataupun alinea seperti yang telah kita tentukan pada kodingan.
Contoh konkritnya adalah misalnya kita ingin membuat suatu break line, maka kita tak perlu tag <br>…</br>. Cukup menggunakan tag <pre>…</pre> , kemudian cukup tekan enter pada bagian yang akan diberi kan break line.
tag <p>…</p>  tag ini berfungsi untuk membuat paragraf .
tag <h1>…</h1> tag ini berfungsi untuk membuat heading tipe yang ke-1
tag <h2>…</h2> tag ini berfungsi untuk membuat heading tipe yang ke-2
tag <h3>…</h3> tag ini berfungsi untuk membuat heading tipe yang ke-3
tag <h4>…</h4> tag ini berufngsi untuk membuat heading tipe yang ke-4
tag <h5>…</h5> tag ini berfungsi untuk membuat heading tipe yang ke-5
tag <h6>…</h6> tag ini berfungsi untuk membuat heading tipe yang ke-6

Berikut ini daftar tag-tag pada HTML

Tag                                                                         Description                                                                         DTD
<!--...-->                                               Mendefinisikan komentar HTML                                                               STF
<!DOCTYPE>                                       Mendefinisikan tipe dokumen                                                   STF
<a>                                                        Mendefinisikan anchor link                                                          STF
<abbr>                                                 Mendefinisikan sebuah singkatan                                             STF
<acronym>                                         Mendefinisikan akronim                                                               STF
<address>           Mendefiniskan informasi kontak untuk pemiliki / penulis dokumen           STF
<applet>                                              Ditinggalkan. Medefinisikan applet                                          TF
<area />                                               Mendefinisikan arae di dalam image-map                             STF
<b>                                                        Mendefinisikan tulisan tebal                                                       STF
<base />       Mendefinisikan  URL utama/target untuk semua URL alternatif di dalam dokumen       STF
<basefont />                                      Ditinggalkan.bbsp;Merincikan dari warna,
ukuran dan font default dari semua
tulisan yang ada di dalam dokumen.                                       TF
<bdo>                                                   Menggantikan arah tulisan                                                           STF
<big>                                                     Mendefinisikan tulisan besar                                                      STF
<blockquote>                                    Mendefinisikan kutipan yang panjang                                     STF
<body>                                                Mendefinisikan badan dokumen                                               STF
<br />                                                   Mendefinisikan satu baris baru                                                  STF
<button>                                             Mendefinisikan tombol yang bisa di-klik                                 STF
<caption>                                            Mendefinisikan judul dari tabel                                                  STF
<center>                                             Ditinggalkan. Mendefinisikan tulisan agar ditengah           TF
<cite>                                                   Mendefinisikan kutipan                                                                STF
<code>                                                 Mendefinisikan kode komputer                                                 STF
<col />                  Mendefinisikan nilai atribut dari satu atau lebih kolom pada tabel              STF
<colgroup>Merincikan sebuah grup atau lebih dari kolom-kolom dalam tabel untuk di format         STF
<dd>                                     Mendefinisikan deskripsi dari sebuah item di daftar definisi          STF
<del>                                                    Defines text that has been deleted from a document       STF
<dfn>                                                    Mendefinisikan ketentuan definisi                                           STF
<dir>                                                     Ditinggalkan. Mendefinisikan daftar direktori                      TF
<div>                                     Mendefinisikan sebuah bagian di dalam sebuah dokumen             STF
<dl>                                                       Mendefinisikan daftar definisi                                                    STF
<dt>                      Mendefinisikan ketentuan (dari sebuah item) di dalam daftar definisi       STF
<em>                                                    Mendefinisikan tulisan emphasized                                         STF
<fieldset>   Menggabungkan elemen-elemen yang saling berhubungan di dalam form       STF
<font>                  Ditinggalkan,  mendefinisikan  font, warna, dan ukuran dari tulisan            TF
<form>                                                 Defines an HTML form for user input                                       STF
<frame />                                            Defines a window (a frame) in a frameset                             F
<frameset>                                        Defines a set of frames                                                                  F
<h1> to <h6>                                     Defines HTML headings                                                                 STF
<head>                                                Mendefinisikan informasi mengenai sebuah dokumen    STF
<hr />                                                   Mendefinisikan garis horisontal                                                 STF
<html>                                                 Mendefinisikan inti dari dokumen HTML                                STF
<i>                                                          Mendefinisikan tulisan italic                                                         STF
<iframe>                                             Mendefinisikan inline frame                                                        TF
<img />                                                Mendefinisikan gambar                                                                STF
<input />                                             Mendefinisikan kontrol input                                                      STF
<ins>                     Mendefinisikan tulisan yang telah dimasukkan ke dalam dokumen            STF
<kbd>                                                   Mendefinisikan input keyboard                                                 STF
<label>                                                 Mendefinisikan label dari elemen <input>                            STF
<legend>                                             Mendefinisikan Judul dari sebuah elemen <fieldset>       STF
<li>                                                         Mendefinisikan daftar item                                                         STF
<link />          Mendefinisikan hubungan antara dokumen dari sumber diluar dokumen      STF
<map>                                                  Defines a client-side image-map                                                STF
<menu>                                               Ditinggalkan. Mendifinisikan daftar menu                             TF
<meta />                             Mendefinisikan metada mengenai sebuah dokumen HTML           STF
<noframes>       Defines an alternate content for users that do not support frames             TF
<noscript>  Defines an alternate content for users that do not support client-side scripts STF
<object>                              Mendefinisikan obyek yang tertanam / embedded                           STF
<ol>                                                       Mendefinisikan urutan teratur                                                   STF
<optgroup>             Mendefinisikan grup dari pilihan/option dalam drop-down list yang saling berhubungan  STF
<option>                                             Mendefinisikan pilihan dalam a drop-down list                   STF
<p>                                                        Mendefinisikan paragraf                                                               STF
<param />                                           Mendefinisikan parameter dari sebuah obyek                     STF
<pre>                                                    Mendefinisikan tulisan yang belum di format                       STF
<q>                                                        Mendefinisikan kutipan pendek                                                STF
<s>                                                         Mendefinisikan tulisan strikethrough                                      TF
<samp>                                                Mendefinisikan contoh dari output program komputer   STF
<script>                                                Mendefinisikan client-side script                                               STF
<select>                                               Mendefinisikan drop-down list                                                   STF
<small>                                                Mendefinisikan tulisan yang lebih kecil                                   STF
<span>                                                 Mendefinisikan sebuah bagian dari dokumen                      STF
<strike>                                                Ditinggalkan. Mendefinisikan tulisan strikethrough           TF
<strong>                                              Mendefinisikan tulisan strong                                                     STF
<style>                                                 Mendefinisikan informasi style dari dokumen                     STF
<sub>                                                   Mendefinisikan tulisan subscripted                                          STF
<sup>                                                   Mendefinisikan tulisan superscripted                                      STF
<table>                                                Mendefinisikan tabel                                                                     STF
<tbody>                                               Menggabungkan isi dari badan tabel                                        STF
<td>                                                      Mendefinisikan kolom dari tabel                                               STF
<textarea>                         Mendefinisikan kontrol dari banyak baris input (text area)             STF
<tfoot>                                                Menggabungkan footer menjadi satu grup pada tabel      STF
<th>                                                      Mendefinisikan header dari tabel                                              STF
<thead>                                               Mendefinisikan Grup header dari tabel                                   STF
<title>                                                   Mendefinisikan Judul dari sebuah dokumen                        STF
<tr>                                                       Mendefinisikan baris dari tabel                                                  STF
<tt>                                                       Mendefinisikan tulisan teletype                                                 STF
<u>                                        Ditinggalkan. Mendefinisikan tulisan garis bawah / underline       TF
<ul>                                                       Mendefinisikan urutan acak                                                        STF
<var>                                                    Mendefinisikan variabel                                                                STF

<xmp>                                  Dintinggalkan. Mendefinisikan tulisan yang belum diformat

Adi Triginarsa

Developer

Mahasiswa Teknologi Informasi, Fakultas Teknik, Universitas Udayana yang simpel dan seorang gamers