Saturday, March 17, 2012

Belajar Dasar Membuat Web Sesi 2 "Paragraf, Garis, Bullet Numbering, Format Karakter, Font, Hyperlink"

Menindak lanjuti postingan "Belajar Dasar Membuat Web Part 1 "HTML, HEAD, TITLE, BODY" ", kini saya akan sharing bagaimana mengatur paragraf, membuat garis, membuat list bullet numbering, format karakter, pengaturan font, dan hyperlink. Langsung ke TKP aja ya. Aktifkan wamp (bisa yang lain), buka web editor dan buka browser.

Tuliskan code dasar html seperti code dibawah
<html>
    <head>
        <title>Belajar HTML Part 2</title>
    </head>
    <body>

    </body>
</html>
  
Membuat tag paragraf dan tag garis pada web, tuliskan code di bawah antara tag body
<p>Cara membuat paragraf dengan default rata kanan.</p>
<p align="center">Cara membuat paragraf agar berada di tengah dengan menggunakan atribut "align center". </p>
<p align="justify">Cara membuat paragraf agar rata kanan kiri dengan menggunakan atribut "align justify".</p>
<blockquote>Cara membuat paragraf agar menjorok ke dalam.</blockquote>
 Tag hr adalah tag yang digunakan untuk membuat garis, seperti garis di bawah ini.
<hr>
<p align="center">&copy; www.spirit221.blogspot.com</p>
<hr>


 Hasilnya akan seperti ini:



 Membuat tag bullets numbering pada web, tuliskan code di bawah antara tag body
Membuat tag numbering diapit tag "ol" dengan type a. Type numbering : 1, a, A, i, I (default 1)
 <ol type= "a">
            <li>Numbering pertama</li>
            <li>Numbering kedua</li>
            <li>Numbering ketiga</li>
 </ol>
    
 Membuat tag bullets diapit tag "ul" dengan type circle. Type bullets : disc, squre, circle (default disc)
 <ul type="circle">
            <li>Bullets pertama</li>
            <li>Bullets kedua</li>
            <li>Bullets ketiga</li>
 </ul>
 <hr>
 <p align="center">&copy; www.spirit221.blogspot.com</p>
 <hr>
 Hasilnya:


 Membuat tag format karakter, tuliskan code di bawah antara tag body
 <b>Membuat karakter menjadi cetak tebal</b> <br>
<i>Membuat karakter menjadi cetak miring</i> <br>
<u>Membuat karakter terdapat garis bawah </u> <br>
<tt>Menampilkan huruf seperti pada mesin ketik</tt> <br>
<strike> Menampilkan garis horizon pada tengah huruf. </strike> <br>
<big>Untuk menmampilkan huruf lebih besar</big> <br>
<small>Untuk menampilkan huruf lebih kecil</small> <br>
Untuk menampilkan <sub>subscript</sub> <br>
Untuk menampilkan  <sup>superscript</sup> <br>
                
 <hr>
<p align="center">&copy; www.spirit221.blogspot.com</p>
<hr>
Hasilnya :
 

 Membuat variasi tag font, tuliskan code di bawah antara tag body:

 <font face="Verdana">Teks ini menggunakan atribut face Verdana.</font><br>
 <font size="+3">Teks ini menggunakan atribut size dengan size +3.</font><br>
 <font color="red">Teks ini menggunakan atribut color dengan warna merah.</font> <br>
 <font color="#990000">Teks ini menggunakan atribut color #990000</font><br>
 <font color="blue" size="+2" face="Verdana">Teks ini menggunakan atribut color = blue, size = +2, dan face = Verdana</font>

 <hr>
 <p align="center">&copy; www.spirit221.blogspot.com</p>
 <hr>
 Hasil:

 Membuat hyperlink pada web, tuliskan code di bawah antara tag body:
(Asumsi file tentang bullet numbering tadi diberi nama BulletNumbering.html dan file tentang font tadi diberi nama font.html)

 <a href="Font.html">Teks ini melakukan link ke file Teks.html.</a><br>
 <a href="BulletNumbering.html" target="_new">Teks ini melakukan link ke file BulletNumbering.html dengan target new(tab baru pada browser).</a><br>
 <a href="http://spirit221.blogspot.com" target="_new">Teks ini melakukan link ke website http://spirit221.blogspot.com dengan target new(tab baru pada browser).</a><br>

 <hr>
 <p align="center">&copy; www.spirit221.blogspot.com</p>
 Hasilnya:
 


Tunggu kelanjutan "Belajar Dasar Membuat Web Part 3" ya... Di sana InsyaAllah saya akan membahas tentang cara membuat tabel dan frame pada web. Selain itu juga nantikan kedatangan "Belajar Dasar Membuat Web Part 4" yang sangat ditunggu-tunggu nantinya, yaitu membahas tentang CSS. Apa itu? Nantikan saja, setidaknya dengan hanya bermodalkan tutorial ini dari Part 1 - Part 4 kalian bisa membuat web statis sederhana. Semoga menambah pengetahuan teman-teman semua....

0 comments:

Post a Comment