Kode HTML

Membuat baris baru
<br/>

Membuat paragraf baru
<p>

Teks tebal
<b>Teks disini</b>

Teks ketik

Membuat baris baru
<br/>

Membuat paragraf baru
<p>

Teks tebal
<b>Teks disini</b>
Teks ketik
<tt>Teks disini</tt>

Teks bercoret
<s>Teks disini<s>

Teks garis bawah
<u>Teks disini</u>

Teks sup ^atas
^{Teks disini}

Teks sub _bawah
<sub>Teks disini</sub

Teks rata kiri

<div style="text-align:left;"> Teks rata kiri</div>

Teks rata kanan

<div style="text-align:right;"> Teks rata kanan</div>

Teks rata kanan kiri
<div style="text-align:justify;"> Teks disini</div>

Teks berada di tengah
<div style="text-align:center;"> Teks disini</div>

Teks baris pertama menjorok ke dalam
<p style="text-indent:30px;"> Teks disini</p>

Teks menjorok ke dalam semua

<blockquote> Teks disini</blockquote>

Teks berwarna
<span style="color:#f00">Teks disini</span>

Teks stabilo
<span style="background:#0f0;color:#f00">Teks disini</span>

Membuat textarea
<textarea cols="20" rows="2">teks disini</textarea>

Textarea huruf warna
<*textarea name="code" rows="3" cols="20" style=";color:#ff0000;">Teks disini

Textarea dengan bingkai
<textarea name="code" rows="3" cols="20" style="border:5px inset #00ffff;">Teks disini

Textarea dengan bingkai dan huruf berwarna
<textarea name="code" rows="3" cols="20" style="color:#ff1493;border:5px inset #9932cc;">Teks disini

Textarea dengan background
<*textarea name="code" rows="3" cols="20" style="background:#ff6347;">Teks disini

Textarea dengan background dan bingkai
<*textarea name="code" rows="3" cols="20" style="background:#000080;border:5px inset #ff7f50;">Teks disini

Textarea dengan background dan bingkai serta huruf berwarna
<textarea name="code" rows="3" cols="20" style="background:#9932cc;color:#ff6347;border:5px inset #ff1493;">Teks disini

Textarea dashed
<textarea name="code" rows="3" cols="20" style="background:#0f0;color:#295F00;border:5px #295F00 dashed;line-height:1.5em;padding:5px;">Teks disini

Textarea dotted
<textarea name="code" rows="3" cols="20" style="background:#ef0090;color:#FFEFF9;border:5px dotted #FFEFF9;line-height:1.5em;padding:5px;">Teks disini

Membuat garis

---

<hr>  

Membuat garis warna

---

<hr style="color:red">  

Mengatur ukuran garis

---

<hr style="color:#00f" width="60%">  

Garis sebelah kiri

---

<hr style="color:#00f" width="60%" align="left">  

Garis sebelah kanan

---

<hr style="color:#00f" width="60%" align="right">  

Membuat garis dengan background

---

<hr style="height:3px;background:#00f;color:#f00;">  

Garis titik-titik

<div style="border-bottom:3px dotted #00f;"> </div>

Garis putus-putus

<div style="border-bottom:3px dashed #00f;"> </div>

Membuat daftar

• Daftar 1
• Daftar 2
• Daftar 3

<ul> <li>Daftar 1</li> <li>Daftar 2</li> <li>Daftar 3</li> </ul>

Menampilkan Link dengan teks
<a href="http://url-tujuan">nama link</a>

Menampilkan gambar
<img src="http://url-gambar">

Menampilkan URL gambar dengan Teks
<a href="http://url-gambar">nama link</a>

Menampilkan link dengan gambar
<a href="http://url-tujuan"><img src="http://url-gambar"></a>

Menampilkan link dengan gambar dan teks

<a href="http://url-tujuan"><img src="http://url-gambar">teks</a>

Merubah ukuran gambar
<img src="http://url-gambar" width="100" height="100"> semakin kecil angkanya maka semakin kecil pula gambarnya

Menampilkan gambar di samping post sebelah kiri
<img src="http://url-gambar" style="float:left;margin:0 3px 3px;">Teks disini

Menampilkan gambar di samping post sebelah kanan
<img src="http://url-gambar" style="float:left;margin:0 3px 3px;">Teks disini

Membuat bingkai pada gambar
<img style="border:5px solid #0f0;" src="http://url-gambar"/>

Untuk mengganti bingkai, "solid" ganti dengan; ridge, groove, double, dashed, dotted, inset, outset

Merubah warna background

<div style="background:#0f0"> Teks disini</div>

Membuat background dengan bingkai

Posisi di kanan
<div style="background:#ccc; border:3px solid #000;padding: 3px;margin-right:20px"> Teks disini</div>

Posisi di tengah
<div style="background:#ccc; border:3px solid #000;padding: 3px;margin:20px"> Teks disini</div>

Posisi di kiri
<div style="background:#ccc; border:3px solid #000;padding:5px;margin-left:20px"> Teks disini</div>

.

HTML file
Nama Anda;
Nama depan

Nama belakang:
Nama depan <input title="nama" id="first" name="first" type="text" size="20"/><br/>Nama belakang: <input title="nama" id="first" name="first" type="text" size="20"/>

HTML radio
Jenis Kelamin;

Laki-laki
Perempuan
<input type="radio" name="food"/> Laki-laki<br/><input type="radio" name="food"/> Perempuan

HTML checkbox
Hoby;

Sepak bola
Volly
Basket
<input type="checkbox" name="sport" value="football"> Sepak bola<br/><input type="checkbox" name="sport" value="vollyball"> Volly<br/><input type="checkbox" name="sport" value="basketball"> Basket

HTML password
Masukkan password

<input type="password" title="password" size="20"/>

Tombol bottom
<a href="http://url tujuan"><input type="submit" value="Nama tombol"/></a>

Membuat tabel

teks	teks
teks	teks

<table border="1" width="100%"<tr><th colspan="2">TEKS</th></tr> <tr><td style="width=50%">teks</td><td style="width=50%">teks</td></tr> <tr><td>teks</td><td>teks</td></tr> </table>

Sumber : ahmad-whydoerie.yu.tl

Konsep Dasar HTML

Dalam mendesain web, kita tidak akan bisa lepas yang namanya HTML (Hypertext Markup Language). HTML adalah bahasa standar yang digunakan untuk menyusun/membangun suatu halaman web.

Meskipun sekarang ini telah bermuncul software-software yang dapat digunakan untuk membangun suatu halaman web secara instan tanpa susah-susah memperhatikan struktur HTML, tidak ada salahnya kalau HTML itu sendiri dipelajari. Manfaat yang diperoleh apabila mempelajari HTML selain mampu membangun halaman web, juga dapat dikembangkan untuk pemrograman web. Pemrograman web akan selalu terkait dengan HTML tersebut. Pemrograman web biasanya dikembangkan untuk membangun web yang dinamis.

1. Struktur Dokumen HTML

Syarat perlu mempelajari suatu bahasa pemrograman adalah mengetahui Strukturnya. Program/dokumen HTML (tag) dapat ditulis/dibuat melalui berbagai macam editor, misalnya Notepad, EditPlus, Notepad++, Wordpad, Macromedia Dreamweaver, dll. Tag-tag tersebut dapat dituliskan dengan huruf besar ataupun huruf kecil. Setelah tag HTML ditulis dengan menggunakan editor tersebut diatas, simpanlah file tersebut dengan format file nama_file.htm atau nama_file.html

HTML terdiri dari Kepala Program/Dokumen dan Badan Program/Dokumen dengan strukturnya sbb :

       <html>
      <head>
            ......... Kepala Program
     </head>
     <body>
           ......... Badan Program
     </body>
     </html>

Dokumen HTML adalah suatu dokumen yang diapit dengan tag <HTML>Kepala program diapit dengan tag <HEAD> dan untuk badan program diapit dengan tag <BODY>. Berikut ini akan diberikan contoh program HTML yang sederhana :

<html>
<head>
     <title>Ini Homepage Pertama Saya</title>
</head>
<body>
<center>
   <h1>Homepage-Ku</h1>
   Inilah <b>Homepage </b> Pribadiku <i>Yang Pertama</i>
</center>
</body>
</html

 Tampilan Program :



Sumber : Sosmiadi.com