Home » » Dasar HTML Ketiga

Dasar HTML Ketiga

Posted by Catatan Wong Awam on Monday, 10 February 2014



Dasar Tag HTML < Text Alignment >

Text Alignment
<html>
                <head>
                                <title>Latihan 05</title>
                </head>
<body>
                <h1 align=center>Text Alignment</h1>
                <p align=center>Set in the centre of the window
                <p>Back to Normal
                <p align=right>Align to Right
                <p align=left>Align to Left
</body>
</html>
 Style pada Font
<b>……</b>
Tag ini untuk membuat bold (tebal)
<i>.…..</i>
Tag ini untuk membuat italic (miring)
<u>…..</u>
Tag ini untuk membuat underline (garis bawah)
<tt>…..<tt>
Tag ini untuk membuat huruf dengan efek mesin ketik (font Courier)


Style pada Font
<html>
                <head>
                                <title>Latihan 07</title>
                </head>
<body>
                <b>If you set words in bold</b>
                <p>
<i>If you set words in italic</i>
                <p>
<u>If you set words in underline</u>
                <p>
<tt>If you set words in typewriter</tt>
</body>
</html>

             Background
                <html>
                                <head>
                                                <title>Latihan 08</title>
                                </head>
                <body bgcolor=blue>
                </body>
                </html>
                Catatan:  Pemberian warna pada background dapat juga menggunakan kode  heksadesimal

o  Catatan:
                Browser akan mengabaikan spasi yang berlebihan. Sehingga Anda dapat membuat spasi sekehendak hati Anda untuk memudahkan pembacaan kode Anda.

                <html>
                                <head>
                                <title>Latihan 09</title>
                                </head>
                <body>
                <h2>Words1&nbsp;&nbsp;Words2</h2>
                </body>
                </html>

Bullet & Numbering
                Variasi bullet pada HTML:
o  Disc, memberikan efek lingkaran (default)
o  Square, memberikan efek persegi empat
o  Circle, memberikan efek lingkaran yang transparan

  Bullet & Numbering

<html>
                                <head>
                                  <title>Latihan 10</title>
                                </head>
                <body>
                <h3>Daftar Fakultas:
                                <ul type=disc>
                  <li>Fakultas Ekonomi</li>
                                  <li>Fakultas Hukum</li>
                  <li>Fakultas Ilmu Komputer</li>
                                  <li>Fakultas Teknik Sipil</li>
                                </ul>
                </h3>
                </body>
                </html>

Catatan: ul = unordered list
                       li  = list item 

  Bullet & Numbering

<html>
                                <head>
                                  <title>Latihan 11</title>
                                </head>
                <body>
                <h3>Daftar Fakultas:
                                <ul type=square>
                  <li>Fakultas Ekonomi</li>
                                  <li>Fakultas Hukum</li>
                  <li>Fakultas Ilmu Komputer</li>
                                  <li>Fakultas Teknik Sipil</li>
                                </ul>
                </h3>
                </body>
                </html>

o  Bullet & Numbering

<html>
                                <head>
                                  <title>Latihan 12</title>
                                </head>
                <body>
                <h3>Daftar Fakultas:
                                <ul type=circle>
                  <li>Fakultas Ekonomi</li>
                                  <li>Fakultas Hukum</li>
                  <li>Fakultas Ilmu Komputer</li>
                                  <li>Fakultas Teknik Sipil</li>
                                </ul>
                </h3>
                </body>
                </html>

  Bullet & Numbering

<html>
                                <head>
                                  <title>Latihan 12</title>
                                </head>
                <body>
                <h3>Daftar Fakultas:
                                <ul type=circle>
                  <li>Fakultas Ekonomi</li>
                                  <li>Fakultas Hukum</li>
                  <li>Fakultas Ilmu Komputer</li>
                                  <li>Fakultas Teknik Sipil</li>
                                </ul>
                </h3>
                </body>
                </html>

Bullet & Numbering
                Daftar bernomor pada HTML:
o  i adalah angka romawi kecil, misal: i,ii,iii,iv,dst
o  I adalah angka romawi besar, misal: I,II,III,IV,dst
o  a adalah huruf kecil, misal: a,b,c,d,dst
o  A adalah huruf kapital, misal: A,B,C,D,dst
o  1 adalah angka dalam standar, misal: 1,2,3,4,dst

Bullet & Numbering
<html>
   <head>
<title>Latihan 13</title>
   </head>
<body>
   <h3>Daftar Fakultas:
   <ol type=A>
   <li>Fakultas Ekonomi</li>
   <li>Fakultas Hukum</li>
   <li>Fakultas Ilmu Komputer</li>
   <li>Fakultas Teknik Sipil</li>
   </ol>
   </h3>
</body>
</html>
Catatan: ol = ordered list

  Bullet & Numbering
<html>
   <head>
<title>Latihan 14</title>
   </head>
<body>
   <h3>Daftar Fakultas:
   <ol type=a>
   <li>Fakultas Ekonomi</li>
   <li>Fakultas Hukum</li>
   <li>Fakultas Ilmu Komputer</li>
   <li>Fakultas Teknik Sipil</li>
   </ol>
   </h3>
</body>
</html>

 Bullet & Numbering
<html>
   <head>
<title>Latihan 15</title>
   </head>
<body>
   <h3>Daftar Fakultas:
   <ol type=I>
   <li>Fakultas Ekonomi</li>
   <li>Fakultas Hukum</li>
   <li>Fakultas Ilmu Komputer</li>
   <li>Fakultas Teknik Sipil</li>
   </ol>
   </h3>
</body>
</html>

  Bullet & Numbering
<html>
   <head>
<title>Latihan 16</title>
   </head>
<body>
   <h3>Daftar Fakultas:
   <ol type=i>
   <li>Fakultas Ekonomi</li>
   <li>Fakultas Hukum</li>
   <li>Fakultas Ilmu Komputer</li>
   <li>Fakultas Teknik Sipil</li>
   </ol>
   </h3>
</body>
</html>


0 comments:

Post a Comment

Translate

Arsip Blog

.comment-content a {display: none;}