Kumpulan Kode HTML

Posted by Unknown on 07.06 with No comments
     Berikut adalah sebagian dari kode-kode dasar HTML yang sangat sering digunakan. Untuk penulisan kode tersebut, harap memperhatikan deklarasi jenis dokumen (DTD) yang di gunakan. Adakalanya, beberapa jenis tag HTML tidak didukung oleh suatu jenis dokumen. Selain itu, sangat penting memperhatikan penulisan tag HTML, utamanya tag akhir (Tag penutup) dalam dokumen XHTML
Contoh sederhana penulisan tag HTML yang berbeda adalah penulisan baris baru. Dalam HTML 4.01, penulisan baris baru adalah <br> sedangkan dalam xhtml, penulisannya adalah <br />. Hal ini juga berlaku pada penulisan tag garis dan gambar.
Kode dasar HTML 
Penulisan teks untuk HEADING menggunakan kode:
<h1> Teks </h1>. Heading pada halaman terdiri dari kode <h1> sampai <h6>
Penulisan teks tebal dan besar (Penguatan huruf atau teks) menggunakan kode:
<strong>Teks disini</strong>

Penulisan teks tebal menggunakan kode:
<b>Teks disini</b>

Penulisan teks besar menggunakan kode:
<big> Teks </big>

Penulisan teks kecil menggunakan kode:
<small> Teks </small>
Penulisan teks bercoret menggunakan kode yang didefenisikan dengan tag <s> atau tag alternatif lainnya yaitu <del>
<s> Teks bercoret </s><del> Teks bercoret </del>

Penulisan teks miring atau gaya italic menggunakan kode: 
<i> Teks italic </i>
Teks huruf berwarna. Kodenya: 
<font color="kode_warna"> teks disini </font> 
Kode warna ditulis menggunakan nama warna dalam bahasa inggris (RGB) atau dalam bentuk HEX yang diawali symbol pagar #
Membuat Paragraf dalam HTML dituliskan dengan kode: 
<p> teks anda disini </p>
Menyelaraskan teks paragraf. 
Untuk teks rata kanan gunakan 
<p align="left"> teks anda disini </p> 
teks rata tengah 
<p align="center"> teks anda disini </p> 
dan teks rata kiri 
<p align="right"> teks anda disini </p>

Membuat kode referensi atau link pada halaman. Kodenya: 
<a href="url">Link Teks</a>
Penulisan nama link yang berwarna seperti home adalah: 
<a href="URL"><font color="red"><b>Link</b></font></a> 
Membuat garis. Untuk garis sederhana gunakan kode <hr />. Untuk lebar dan tebal garis, anda tinggal menyesuaikan misalnya:
<hr width="50%" />
<hr width="80%" />
<hr width="100%" /> 
Garis dengan ukuran dan warna 
<hr style="color: yellow; size: 5; width: 75%;" />. 
Anda juga dapat membuat tampilan garis yang unik menggunakan CSS Style.

Huruf atau teks dengan ukuran kodenya: 
<font size="22px">Teks</font>. 
Anda bisa menggunakan unit EMS (em), PIXELS (px), PERSEN (%), dan POINT (pt) dalam menentukan ukuran huruf.

Membuat Link dengan gambar seperti dibawah










Kodenya adalah : 
<a href="URL">
<img src="URL_GAMBAR" alt="Judul_Alternatif" />
</a>
Mengubah ukuran gambar menjadi tampilan penuh 
Kodenya adalah : 
 <img src="url_gambar" width="100%" height="100%" alt="Judul alternatif" />

Memperkecil ukuran gambar dari ukuran yang sebenarnya seperti ini:

Kodenya adalah : 
<img src="url_gambar" width="lebar_gambar" height="tinggi_gambar" alt="Judul alternatif" /> 
Anda tinggal menyesuaikan ukuran lebar dan tinggi gambar dengan menggunakan unit px atau %
Membuat Ikon halaman seperti yang terdapat disudut kanan atas halaman ini atau lebih dikenal dengan nama Favicon ICO dengan kode: 
<link rel="shortcut icon" type="images/x-icon" href="url_gambar" />.
Ukuran file gambar sebaiknya 16x16 Pixels dalam format ICO atau PNG


Membuat tombol Button yang dapat diklik seperti
Kodenya: 
<input type="button" value="HOME" />

Radio Button 

Kodenya:
 : On/Off
<input type="radio" name="ok" value="Example" />
Body halaman dengan latarbelakang gambar kodenya: 
<body style="background-image: url_gambar"> 
Body halaman dengan latar belakang warna kodenya: 
<body style="background-color: kode_warna">

Body tags didefenisikan dengan: 
<body alink="red" valink="maroon" link="yellow" text="white" bgcolor="black"> 
Body tags menyangkut body dokumen, seperti hyperlink, gambar, teks, list, background dan sebagainya.
Daftar Tanpa Nomor atau list-style di defenisikan dengan tag <ul> sedangkan item didefenisikan dengan <li>. Untuk type item list dapat disesuaikan menggunakan list-type: disc, circle atau square. 
  • Item list default menggunakan type DISC
  • Teks
  • Teks
  • Teks
Penulisan kode tersebut adalah: 
<ul>
<li>Teks</li>
<li>Teks</li>
<li>Teks</li>
</ul> 
Daftar list dengan penomoran otomatis di defenisikan dengan tag <ol>. Contohnya:
  1. Teks
  2. Teks
  3. Teks
Penulisan kode tersebut adalah: 
<ol>
<li>Teks</li>
<li>Teks</li>
<li>Teks</li>
</ol>

Membuat kotak textarea copy paste yang didefenisikan dengan kode tag <textarea> 
Contoh:
Teks atau kode
Dianjurkan untuk menentukan jumlah baris dan kolom dalam penulisan kotak area teks. Kodenya adalah: 
<textarea cols="Jumlah_kolom" rows="jumlah_baris">
Text, kode disini
</textarea>
Membuat  Teks berlatarbelakang warna dengan kode HTML <span>. Contoh diatas menggunakan kode:
<span style="background-color: #800; color: lime;"><b>Text Berstabilo</b></span>. 
Tag <span> juga biasanya digunakan pada gaya inline dalam dokumen.
Membuat Text Berbayang 
Kodenya adalah : 
<font color="#ff0000" style="text-shadow: #ffff00 1px 1px 1px;"><b>Text Berbayang</b></font>