1. Paragraf dan line Break
<html>
<body>
<p>
Paragraf ini
mengandung spasi dan baris
dalam kode sumbernya,
tetapi browser
akan mengabaikannya.
Mengapa begitu?
</p>
<p>
Sedangkan yang ini memiliki spasi
panjang.
</p>
<p>
Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.
</p>
</body>
</html>
Ketikan kode tersebut pada notepad kemudian simpan dalam format .html. Kemudian buka file tersebut melalui browser dan akan muncul tampilan seperti berikut
Terlihat ada perbedaan tampilan antara teks yang dituliskan pada kode program dan teks yang muncul pada browser. Hal ini dikarenakan pada kode program HTML tidak mengenal spasi dan perpindahan baris tanpa menggunakan tag tertentu. Spasi dan perpindahan baris pada kode program hanya dimaksudkan untuk merapikan kode program tersebut, tidak berpengaruh pada tampilan output pada browser.
2. Background Colour dan Heading
<html>
<body>
<body bgcolor="yellow">
<p>
Perhatikan bahwa halaman ini seharusnya berwarna kuning.
</p>
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan
menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakan
tag lain untuk keperluan itu. </p>
Output dari kode program tersebut adalah :
Nah itulah beberapa contoh penerapan kode HTML dasar beserta outputnya. Berikut ini masih ada beberapa contoh lagi, silahkan dicoba sendiri pada browser kesayangan anda masing-masing. Jangan lupa simpan file kodenya dengan format .html.
3. Garis Horisontal dan komentar tersembunyi
<html>
<body>
<p>Tag hr mendefinisikan sebuah garis horisontal, default-nya adalah rata tengah:</p>
<hr color=”green” >
<p align=”left”>Terdapat paragraf disini</p>
<hr width=”80%” size=”10” align=”left”>
<p align=”right”>Terdapat paragraf disini</p>
<hr width=”400” size=”6” align=”right” color=”red”>
<center>
<p>Terdapat paragraf disini</p>
</center>
<!— Ini adalah komentar yang tidak akan ditampilkan di layar browser -->
</body>
</html>
<body>
<p>Tag hr mendefinisikan sebuah garis horisontal, default-nya adalah rata tengah:</p>
<hr color=”green” >
<p align=”left”>Terdapat paragraf disini</p>
<hr width=”80%” size=”10” align=”left”>
<p align=”right”>Terdapat paragraf disini</p>
<hr width=”400” size=”6” align=”right” color=”red”>
<center>
<p>Terdapat paragraf disini</p>
</center>
<!— Ini adalah komentar yang tidak akan ditampilkan di layar browser -->
</body>
</html>
4. Pemformatan Teks
<html>
<body>
<b>Teks ini tebal </b>
<br>
<strong> Teks ini juga tebal </strong>
<br>
<big> Teks ini hurufnya besar </big>
<br>
<em> Teks ini miring </em>
<br>
<i> Teks ini juga miring </i>
<br>
<small> Teks ini hurufnya kecil </small>
<br>
Teks ini berisi <sub> subscript </sub>
<br>
Teks ini berisi <sup> superscript </sup>
</body>
</html>
<body>
<b>Teks ini tebal </b>
<br>
<strong> Teks ini juga tebal </strong>
<br>
<big> Teks ini hurufnya besar </big>
<br>
<em> Teks ini miring </em>
<br>
<i> Teks ini juga miring </i>
<br>
<small> Teks ini hurufnya kecil </small>
<br>
Teks ini berisi <sub> subscript </sub>
<br>
Teks ini berisi <sup> superscript </sup>
</body>
</html>
5. Teks Yang di preformat
<html>
<body>
<pre>
Ini adalah
Teks yang di-preformat.
Preformat akan menampilkan spasi dan
<body>
<pre>
Ini adalah
Teks yang di-preformat.
Preformat akan menampilkan spasi dan
line break apa adanya.
</pre>
<p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
</pre>
<p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
6. List Unordered dan Ordered
<html>
<body>
<h4>Sebentuk list unordered:</h4>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
<br>
<h4>Sebentuk list ordered:</h4>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
<body>
<h4>Sebentuk list unordered:</h4>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
<br>
<h4>Sebentuk list ordered:</h4>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
SELAMAT MENCOBA ^_^
No comments:
Post a Comment