Photobucket Weblog ini dibuat semata2 hanya untuk pribadi, bertujuan untuk Berbagi imajinasi,Kreasi, dan Pengetahuan, yok... kita berkarya dan berbagi ilmu bersama meski sedikit ilmu namun berguna bagi bersama
  • Home 1
  • Bisnis
  • Contact
  • TV
  • Log In
  • Rabu, 27 Juli 2011

    Belajar HTML Bag. 3 ( Text & Font Formatting )

    Keindahan dan daya tarik sebuah judul, tulisan ataupun kombinasi dari keduanya tidak hanya berasal dari isi dari konten tersebut, keindahan kombinasi warna, ukuran, jenis font dan paragraf formatting juga sangat berpengaruh. Pada bagian ini kita akan belajar melakukan formatting pada font dan text / paragraf. Disini kita akan mengunakan sample kode dan hasilnya beserta penjelasan kode-kode tesebut, agar lebih mudah dan cepat anda pahami.
    Font Formatting
    Untuk melakukan font formatting kita menggunakan tag font, dengan atribut sbb:

    color
    Digunakan untuk merubah warna font.
    Contoh : <font color=”blue”> Font Warna Biru </font>

    size
    Digunakan untuk merubah ukuran font.
    Contoh : <font size=”10”> Font Ukuran 10 </font>

    face
    Digunakan untuk merubah jenis font.
    Contoh : <font face=”verdana”> Font Verdana </font>
    Penggunaan ketiga atrribut diatas dapat digabung menjadi 1 tag sbb :
    <font color=”blue” size=”10” face=”verdana”> Font Formatting </font>
    Selain formatting dengan tag standard font, ada beberapa tag formating lain sbb :

    bold → Memberikan effect tebal.

    italic → Memberikan effect miring.

    underline → Memberikan effect garis bawah.

    strike → Memberikan effect strike / coretan

    big → Memberikan effect huruf besar

    small → Memberikan effect huruf kecil.

    code → Memberikan effect kode

    script → Memberikan effect script

    strong → Memberikan effect strong

    sup → Memberikan effect superscript

    sub → Memberikan effect subscript
    Untuk lebih jelasnya silahkan anda gunakan tag-tag tersebut dalam file html dan jalankan pada browser. Cobalah code dibawah ini untuk melihat hasilnya :
    Code :
    <html>
    <head>
    <title> kebangsaan Tutorial </title>
    </head>
    <body>
    <font color=”blue”> Font warna biru </font> <br>
    <font size=”10”> Font ukuran 10 </font> <br>
    <font face=”verdana”> Font huruf verdana </font> <br>
    <font color=”blue” size=”10” face=”verdana”> Font Formatting gabungan </font> <br>
    <b> Font tebal </b> <br>
    <i> Font miring </i> <br>
    <u> Font garis bawah </u> <br>
    <s> Font strike </s> <br>
    <big> Font big </big> <br>
    <small> Font small </small> <br>
    <code> Font code </code> <br>
    <script> Font script </script> <br>
    <strong> Font strong </script> <br>
    <sup> Font superscript </sup> <br>
    <sub> Font subscript </sub> <br>
    </body>
    </html>

    Hasil :


    Pada contoh kode diatas saya beri tambahan tag break → <br> yang berfungsi untuk berganti baris.
    Paragraph Formatting
    Untuk paragraf formatting tag-tag yang disediakan sebanyak tag-tag yang digunakan untuk font formatting.
    Untuk menandai sebuah text sebagai paragraph, kita harus memberikan tag <p> untuk text tersebut. Contohnya sbb:
    <p> Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. Ini adalah sebuah paragraph. </p>
    Tag <p> sendiri memiliki atribut align yang nilainya dapat diberikan sbb:

    left → Untuk membuat paragraf rata kiri.

    right → Untuk membuat paragraf rata kanan.

    justify → Untuk membuat paragraf rata kanan-kiri.

    center → Untuk membuat paragraf rata tengah.


    Code :
    <html>
    <head>
    <title> Kebangsaan Tutorial </title>
    </head>
    <body>
    <p> Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. Ini adalah paragraf standard. </p>
    <p align="left"> Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. Ini adalah paragraf rata kiri. </p>
    <p align="right"> Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. Ini adalah paragraf rata kanan. </p>
    <p align="justify"> Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. Ini adalah paragraf rata kanan-kiri. </p>
    <p align="center"> Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. Ini adalah paragraf rata tengah. </p>
    </body>
    </html>
    Hasil :


    semoga bermanfaat

    yang lainnya:

    Belajar HTML Bag.1 ( Mengenal HTML ), Belajar HTML Bag. 2 ( Basic HTML ),
    Belajar HTML Bag. 3 ( Text & Font Formatting ), Belajar HTML Bag. 4 ( Lists )