KODE DASAR HTML

KODE DASAR HTML

19:14


Memulai Membuat Halaman Web

Pertama, bukalah notepad++ atau editor yang lain kemudian ketik perintah berikut.

Simpan file diatas dengan nama tes.html di suatu folder (misalnya di c:\belajar). Kemudian buka file tersebut dengan browser kesayangan kamu dan lihat hasilnya.
Jika kamu melihat tanda < dan > pada kode diatas itu adalah tag atau yang berarti tanda/label. Kode diatas akan menampilkan sebuah paragraf bertuliskan "Belajar HTML". Itu dikarenakan kita memakai tag <p>. Terus tag html kemana?? Kode tersebut hanya memberitahukan kepada browser (Mozilla, Chrome, Safari, Opera, dll) bahwa file tersebut adalah dokumen html. Jadinya kalian tidak akan lihat tag tersebut.
Satu hal yang penting, semua tag pembuka <...> pasti mempunyai pasangan tag penutup </...>. Jika kalian lupa memakai tag penutup, maka tidak akan terbaca oleh browser. Kecuali Standalone Tag.

Standalone Tag

Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi untuk menempatkan sebuah elemen pada halaman web. Atau bahasa sederhananya itu tag tersebut dapat berdiri sendiri. Ada beberapa Standalone tag yang sering digunakan. Yaitu seperti :
  1. < img> berfungsi untuk menampilkan gambar.
  2. < hr> berfungsi untuk memberi garis.
  3. < br> berfungsi memberikan jarak antar teks.
  4. < meta> merupakan tempat untuk meletakkan konten tentang dokumen yang tidak perlu ditampilkan di layar. Biasanya diletakkan di < head>
dan masih banyak lagi, silahkan cari sendiri di google yah…. :-)

Struktur Dasar HTML

Selanjutnya adalah mengenal struktur dari file html itu sendiri. Buka editor terus ketik script berikut:
Pada Code HTML diatas, dapat dilihat ada tag html, head, title, body. Bagian Tag html sudah saya jelaskan diatas, yaitu untuk memberitahukan browser jika file tersebut adalah file html. Tag head dan Tag title berfungsi menjelaskan pada browser, tentang judul dari document htmlnya. Tag body berfungsi sebagai isi untuk menuliskan script – script yang mana nantinya diterjemahkan sebagai halaman web oleh browser. Untuk Tag-tag html yang lain, kamu bisa lihat pada tabel dibawah ini beserta contohnya.

Tabel Tag HTML Beserta penjelasan dan contohnya

Tag HTML Penjelasan dan contoh
<a> ANCHOR tag berfungsi untuk membuat suatu link menuju ke situs/website tertentu.
Contoh :
<a href="http://pulung.net">Membuat Link</ a>
<abbr> ABBREVIATION tag menunjukkan penafsiran makna ke browser dan mesin pencari untuk seperti jenis singkatan sepert “dll”, “sbb”.
Contoh :
Lauk pauk hari ini adalah nasi ,ikan, <abbr title="dan lain-lain">dll</abbr>
<acronym> ACRONYM tag menunjukkan penafsiran makna ke browser dan mesin pencari untuk seperti jenis singkatan sepert “WHO”, “FBI”.
Contoh :
<acronym title="World Health Organization">WHO</acronym> adalah salah satu badan-badan asli milik <acronym title="Perserikatan Bangsa-Bangsa">PBB</acronym>
<address> ADDRESS tag digunakan untuk mengidentifikasi informasi dari pembuat atau penulis.
Contoh :
<address>
Penulis <a href="mailto:webmaster@example.com">Pulung Tri Brata</a>.<br>
Situs:<a href="http://pulung.net">Pulung Tri Brata</ a> <br>
Malang<br>
Indonesia
</address>
<applet> elemen APPLET tag digunakan untuk menanamkan dan memanggil aplikasi Java dalam sebuah halaman HTML
<area> AREA tag mendefinisikan bagian dari suatu gambar.
<b> BOLD tag adalah tag yang menentukan <b>bagian tebal</b> dalam dokumen teks.
<base> BASE tag mendefinisikan informasi mengenai ke halaman web pada link tertentu.
<basefont> BASEFONT tag mendefinisikan perubahan dari semua tampilan teks pada halaman web.
<bdo> BDO tag adalah menetapkan arah layar teks dengan nilai default dari Kiri ke Kanan.
Contoh :
<bdo dir="rtl">Kanan ke Kiri</bdo>
<bgsound> BGSOUND tag adalah mendefinisikan suara latar belakang untuk halaman web.
Contoh :
<html>
  <head>
    <bgsound src="Balonku.wav" loop="3">
  </head>
  <body>
  </body>
</html>
<big> BIG tag membuat teks menjadi <big>Lebih besar</big>
<blockquote> BLOCKQUOTE tag memisahkan bagian teks dari teks sekitarnya.
Contoh :
<blockquote>Bagian yang terpisah</blockquote>
<blink> BLINK membuat teks untuk<berkedip-kedip>blink</blink> secara berulang. Internet Explorer tidak mendukung tag ini.
<body> <html>
  <head>
  </head>
  <body>
      Body tag mengidentifikasi semua konten yang ada pada website.
  </body>
</html>
<br> BR tag berfungsi untuk Berpindah ke baris baru
<button> BUTTON tag berfungsi untuk Membuat tombol
Contoh :
<button type="button">Tombol</button>  
<caption> <table>
  <caption>CAPTION tag menambahkan keterangan ke tabel.</caption>
    <tr>
      <td>
      </td>
    </tr>
</table>
<center>
<center>CENTER tags membuat text, gambar, dll ke bagian tengah.</center>
<cite> <cite>CITE tags berfungsi untuk menampilkan kota dengan teks miring.</cite>
<code> CODE tags digunakan untuk menampilkan teks sepert kode, script, dll <code>htmltags.html</code>
<col> COL digunakan untuk mendefinisikan sifat kolom untuk kolom tabel.
<table>
  <colgroup span="2">
    <col width="60" align="left"></col>
    <col width="80" align="center"></col>
  </colgroup>
  <tr>
    <td>1st Column</td>
    <td>2nd Column</td>
  </tr>
</table>
<colgroup> COLGROUP digunakan untuk mengkelompok kolom tabel.
<table>
  <colgroup span="2">
    <col width="60" align="left"></col>
    <col width="80" align="center"></col>
  </colgroup>
  <tr>
    <td>1st Column</td>
    <td>2nd Column</td>
  </tr>
</table>
<dd> DD digunakan Menjelaskan suatu kata.
<dl>
  <dt>NASA</dt>
    <dd>National Aeronautics and Space Administration</dd>
  <dt>MBA</dt>
    <dd>Master of Business Administration</dd>
</dl>
<dfn> DFN digunakan untuk menekankan definisi.
Contoh :
<dfn>PC</dfn>: Personal Computer.
<del> DEL digunakan untuk Menunjukkan <del>teks yang terhapus</del>
<dir> DIR tag mendefinisikan daftar direktori.
Contoh :
<dir>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</dir>
<dl> DL berfungsi membuat daftar definisi (definition list).
Contoh :
<dl>
  <dt>CSU</dt>
    <dd>California State University</dd>
  <dt>UN</dt>
    <dd>United Nations</dd>
</dl>
<div> DIV merupakan bagian penggabungan dari sebuah dokumen web.
Contoh :
<div>
  <h1>Home Pets</h1>
    <p>Cats</p>
    <p>Dogs</p>
</div>
<dt> DT berfungsi mendefinisikan sebuah istilah (definition term).
Contoh :
<dl>
  <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>
<embed> EMBED tag berfungsi memberikan perintah kepada browser untuk memasukkan unsur-unsur multimedia, seperti video, file suara kedalam dokumen web.
Contoh :
<embed src="noah.mov" width="100" height="100">
<embed src="peterpan.mid" width="50" height="50">
<em> EM tag berfungsi memberikan penekanan (emphasize) kepada kata/kalimat tertentu.
Contoh :
<em>Contonh emphasize</em>
<fieldset> FIELDSET tag berfungsi menciptakan suatu bentuk untuk semua elemen di dalamnya.
Contoh :
<fieldset>Contoh FIELDSET.</fieldset>
<font> FONT tag berfungsi untuk memodifikasi font/tulisan pada halaman web.
Contoh :
<font face="cursive, serif">font</font>,
<font color="#0000ff">color</font>, dan
<font size="4">size</font>
<form> Form tag berfungsi untuk mendefinisikan sebuah formulir.
Contoh :
<form action="kontak.html" method="post">
  Email:
    <input type="text" name="email" maxlength="80" value="" /><br />
  Nama:
    <input type="text" name="name" maxlength="80" value="" /><br />
    <input type="submit" value="Send" />
</form>
eMail: Nama:
<frame> Frame tag berfungsi mendefinisikan setiap frame dalam frameset.
Contoh :
<html>
<head>
  <title>Contoh Frame </title>
</head>
<noframes>
  <body>
    <h1>Maaf, Browser yang anda pakai tidak mendukung fitur ini.</h1>
  </body>
</noframes>
<frameset cols="35%, 65%">
  <frame src ="frame1.html" />
  <frame src ="frame2.html" />
</frameset>
</html>
<frameset> FRAMESET tag berfungsi menentukan tata letak frame.
Contoh :
<html>
<frameset cols="45%">
  <frame src ="frame.html" />
  <frame src ="frame2.html" />
</frameset>
</html>
<h1> - <h6> H1 – H6 mendifinisikan level 1-6 headers.
Contoh :

<h1>Header 1</h1>

<h2>Header 2</h2>

<h3>Header 3</h3>

<h4>Header 4</h4>

<h5>Header 5</h5>
<h6>Header 6</h6>
<head> Head tag mendefinisikan informasi umum tentang dokumen judul halaman, meta-tag, script dan link untuk diikuti oleh browser.
Contoh :
<html>
  <head>
    <title>Head Tag</title>
    <meta name="keywords" content="html tags, head tag" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="javascript.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>
<hr> HR tag berfungsi membuat garis horizontal.
Contoh :
Ada 2 pilihan, yaitu : <hr> oatau <hr />
<html> HTML tag mengandung unsur HTML, dan memberikan perintah untuk browser untuk membaca dokumen sebagai dokumen HTML.
Contoh :
<html>
  <head>
  </head>
  <body>
  </body>
</html>
<iframe> iFrame tag menciptakan kerangka inline yang berisi halaman web lain di dalamnya.
Contoh :
<iframe src="http://pulung.net" name="site" width="540" height="100" align="left"></iframe>
<img> IMG tag berfungsi untuk menampilkan gambar.
Contoh :
<img src="http://www.fillster.com/images/tutorial.gif" width="60" height="62" alt="judul gambar" />
<input> INPUT tag berfungsi untuk membuat input fields, check boxes, radio buttons.
Contoh :
<form action="contact.html" method="post">
  Email:
    <input type="text" name="email" maxlength="80" value="" /><br />
  Nama:
    <input type="text" name="nama" maxlength="80" value="" /><br />
    <input type="radio" name="Level" value="Web Designer" />Web Designer<br />
    <input type="radio" name="Level" value="Web Developer" checked="checked" />Web Developer<br />
    <input type="checkbox" name="Computer" value="Windows" />Windows<br />
    <input type="checkbox" name="Computer" value="Mac" />Mac<br />
    <input type="submit" value="Send" />
</form>
eMail: Name:
Web Designer
Web Developer
Windows
Mac
<ins> INS tag berfungsi untuk menyisipkan teks.
Contoh :
<ins>Teks sisipan</ins>
<isindex> ISINDEX tag berfungsi mendefinisikan field input single-line.
Contoh :
<isindex prompt="Contoh: ">
<i> <I> tag berfungsi untuk menentukan <i>italic text</i>.
<kbd> KBD tag singkatan dari <kbd>keyboard text</kbd>
<label> LABEL tag berfungsi mendefinisikan label untuk sebuah form.
Contoh :
<p>Dimana kamu tinggal?</p>
<form action="">
  <input type="radio" name="negara" id="idn" />
    <label for="idn">Indonesia</label><br />
  <input type="radio" name="negara" id="uk" />
    <label for="uk">UK</label>
</form> Dimana kamu tinggal?
<legend> LEGEND tag berfungsi memberikan keterangan dalam elemen fieldset.
Contoh :
<legend>daftar pertanyaan</legend>
<p>Dimana kamu tinggal?</p>
<form action="">
  <input type="radio" name="negara" id="idn" />
    <label for="idn">Indonesia</label><br />
  <input type="radio" name="negara" id="malaysia" />
    <label for="malaysia">Malaysia</label>
</form>
daftar pertanyaan Dimana kamu tinggal?
<li> LI tag berfungsi mendefinisikan daftar ordered (memakai angka) dan unordered (memakai simbol).
Contoh :
<ol>
    <li>HTML</li>
    <li>PHP</li>
    <li>JavaScript</li>
</ol> <ul>
    <li>HTML</li>
    <li>PHP</li>
    <li>JavaScript</li>
</ul>
  1. HTML
  2. PHP
  3. JavaScript
  • HTML
  • PHP
  • JavaScript
<link> LINK tag berfungsi mendefinisikan link ke dokumen eksternal, seperti Style Sheets Eksternal.
Contoh :
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<marquee> MARQUEE tag berfungsi membuat teks berjalan.
Contoh :
<marquee>Contoh Marquee</marquee>
<menu> MENU tag berfungsi mendefinisikan daftar menu.
Contoh :
<menu>
    <li>Google</li>
    <li>Yahoo</li>
    <li>MSN</li>
</menu>
  • Google
  • Yahoo
  • MSN
    •
    <meta> META tag berfungsi menyatakan informasi untuk robot mesin pencari dan crawler.
    Contoh :
    <html>
      <head>
        <meta name="description" content="Deskripsi website anda.">
        <meta name="keywords" content="meta tags, html tags, meta">
      </head>
      <body>
      </body>
    </html>
    <noframe> NOFRAME tag berfungsi menentukan tata letak halaman web alternatif untuk browser yang tidak mendukung frame.
    Contoh :
    <html>
    <head>
      <title>Contoh noframe</title>
    </head>
    <noframes>
      <body>
        <h1>Maaf, browser yang anda pakai tidak mendukung fitur ini!</h1>
      </body>
    </noframes>
    <frameset cols="35%, 65%">
      <frame src ="frame.html" />
      <frame src ="frame2.html" />
    </frameset>
    </html>
    <noscript> NOSCRIPT tag berfungsi menentukan tata letak halaman “noscript” untuk versi browser yang tidak mendukung “SCRIPT”. Tag NOSCRIP digunakan dalam pemakaian elemen JavaScript atau VBScript.
    Contoh :
    <script type="text/javascript" language="javascript">
      document.write("Belajar dasar HTML");
    </script>
    <noscript>
      Maaaf, browser yang anda pakai tidak mendukung fitur JavaScript, VBScript.
    </noscript>
    <optgroup> OPTGROUP tag berfungsi menciptakan pilihan menu drop-down perkelompok.
    Contoh :
    <select>
      <optgroup label="Kota">
        <option value ="malang">Malang</option>
        <option value ="surabaya">Surabaya</option>
      </optgroup>
      <optgroup label="Negara">
        <option value ="malaysia">Malaysia</option>
        <option value ="singpura">Singapura</option>
      </optgroup>
    </select>
    <option> OPTION tag berfungsi menciptakan menu drop-down. OPTION Tag bekerja hanya dalam hubungannya dengan SELECT tag.
    Contoh :
    <select>
        <option value ="pemula" selected="selected">Pemula</option>
        <option value ="menengah">Menengah</option>
        <option value ="mahir">Mahir</option>
    </select>
    <ol> OL tag berfungsi mendefinisikan daftar ordered item.
    Contoh :
    <ol>
        <li>Merah</li>
        <li>Hijau</li>
        <li>Biru</li>
    </ol>
    1. Merah
    2. Hijau
    3. Biru
    <p> <P> tag berfungsi menentukan paragraf dan menciptakan baris baru.
    Contoh :
    <p>Mencoba menggunakan paragraf.</p>
    <q> <Q> tag berfungsi menetapkan kutipan singkat. Fungsi ini mirip dengan tag blockquote kecuali bahwa tag <Q> tidak merusak baris teks.
    Contoh :
    <q>Emang gue pikirin</q> - adalah kata-kata anak muda jaman sekarang.
    <s> <S> tag berfungsi sama seperti DEL tag. <S> tag sudah usang dan tidak didukung di XHTML 1.0 Strict DTD, oleh karena itu dianjurkan untuk menggunakan tag DEL sebagai gantinya gantinya.
    Contoh :
    <s>Contoh tag S HTML.</s>
    <samp> SAMP tag berfungsi menentukan lebar font yang tetap.
    Contoh :
    <samp>
    Contoh SAMP tag - 1     <samp>
    <script> SCRIPT tag berfungsi mendefinisikan script dalam halaman web dan membiarkan browser web tahu bahwa itu bukan bagian HTML. Kamu dapat menempatkan sebuah tag SCRIPT di mana saja dalam HTML, tetapi praktek terbaik adalah dengan menempatkannya di antara tag <HEAD></HEAD>.
    Contoh :
    <html>
      <head>
        <script src="javascript.js" type="text/javascript"></script>
      </head>
      <body>
        <script type="text/javascript">
            document.write("Contoh memakai script tag.")
        </script>
      </body>
    </html>
    <select> SELECT tag berfungsi menciptakan menu pada formulir.
    Contoh :
    <select>
        <option value ="kota" selected="selected">Kota</option>
        <option value ="malang">Malang</option>
        <option value ="surabaya">Surabaya</option>
    </select>
    <small> SMALL tag berfungsi menciptakan teks kecil.
    Contoh :
    <small>Contoh small tag</small>
    <span> SPAN tag berfungsi menetapkan bagian dari dokumen.
    Contoh :
    <div>
        <p>Kota Malang <span style="color:red;">mulai panas.</span></p>
    </div>
    <strike> STRIKE tag berfungsi sama seperti DEL tag. <STRIKE> tag sudah usang dan tidak didukung di XHTML 1.0
    Contoh :
    <strike>contoh strike tag</strike>
    <strong> STRONG tag menentukan teks yang tebal.
    Contoh :
    <strong>Contoh Strong tag.</strong>
    <style> STYLE tag menetapkan link dan lokasi ke style sheet, dan memberikan perintah untuk browser mengenai tata letak untuk halaman web
    Contoh :
    <html>
      <head>
        <title>Contoh Style tag</title>
        <link rel="stylesheet" type="text/css" href="style.css" />         <style type="text/css">
            h1{text-align: center; font-style: italic}
            p{color:#ff0000}
        </style>
      </head>
      <body>
      </body>
    </html>
    <sub> SUB tag berfungsi mendefinisikan teks subscript. Tag SUB adalah menciptakan sub teks subscript
    Contoh :
    <sub>contoh SUB tag.</sub>
    <sup> SUP tag berfungsi mendefinisikan teks superscripted. Tag SUP SUP tag adalah menciptakan superscripted.
    Contoh :
    <sup>contoh SUP tag.</sup>
    <table> TABLE tag berfungsi mendefinisikan tabel.
    Contoh :
    <table>
      <tr>
        <td>Baris pertama</td>
        <td>baris kedua</td>
      </tr>
    </table>
    <td> TD tag berfungsi menciptakan sel data
    Contoh :
    <table>
      <tr>
        <td>sel data pertama</td>
        <td>sel data kedua</td>
      </tr>
    </table>
    <th> TH tag berfungsi menciptakan table header (kepala tabel)
    Contoh :
    <table>
      <tr>
        <th colspan="2">Daftar kota</th>
      </tr>
      <tr>
        <td>Malang</td>
        <td>Surabaya</td>
      </tr>
    </table>
    <tr> TR tag berfungsi menciptakan sebuah baris dalam tabel
    Contoh :
    <table>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </table>
    <tbody> TBODY tag berfungsi menciptakan table body (badan tabel)
    Contoh :
    <table>
      <thead>
        <tr>
          <td colspan="2">>Belajar HTML Dasar</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tags</td>
          <td>Attributes</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Footer</td>
        </tr>
      </tfoot>
    </table>
    <textarea> TEXTAREA tag berfungsi menciptakan text area
    Contoh :
    <textarea rows="4" cols="30">
      asukan teks disini...
    </textarea>
    <tfoot> TFOOT tag berfungsi menciptakan table footer
    Contoh :
    <table>
      <thead>
        <tr>
          <td colspan="2">>Belajar HTML Dasar</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>HTML Tag</td>
          <td>HTML Attributes</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Footer</td>
        </tr>
      </tfoot>
    </table>
    <thead> THEAD tag berfungsi menciptakan table header
    Contoh :
    <table>
      <thead>
        <tr>
          <td colspan="2">>MAsukan teks header disini.</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Element - 1</td>
          <td>Element - 2</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Footer.</td>
        </tr>
      </tfoot>
    </table>
    <title> TITLE tag berfungsi menyatakan judul dari dokumen HTML
    Contoh :
    <html>
      <head>
        <title>Masukan Judul disini.</title>
      </head>
      <body>
      </body>
    </html>
    <tt> TT tag berfungsi menciptakan teks teletype
    Contoh :
    <tt>Contoh TT tag.</tt>
    <u> U tag berfungsi membuat teks digarisbawahi
    Contoh :
    <u>Garis bawah.</u>
    <ul> UL tag berfungsi mendefinisikan daftar unordered item
    Contoh :
    <ul>
        <li>Code</li>
        <li>Script</li>
        <li>Tag</li>
    </ul>
    • Code
    • Script
    • Tag
    <var> VAR tag berfungsi menunjukkan parameter variabel
    Contoh :
    <var>Contoh VAR tag<var>

    About

    This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

    Next
    « Prev Post
    Previous
    Next Post »
    Langganan: Posting Komentar (Atom)