Dasar-dasar Text HTML


pada kesempatan kali ini kita akan belajar mengenai dasar-dasar dari teks (HTML) HyperText Markup Language, (HTML) sendiri  adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda. silahkan untuk dicoba satu persatu..!!


Membuat Center,gunakan kode :

<p align=”center”>oziq14.wordpress.com</p>

hasilnya seperti:

oziq14.wordpress.com


Membuat Posisi kekanan gunakan kode :

<p align=”right”>oziq14.wordpress.com</p>

hasilnya seperti :

oziq14.wordpress.com


Membuat Posisi kekiri gunakan kode:

<p align=”left”>oziq14.wordpress.com</p>

hasilnya seperti :

oziq14.wordpress.com


Membuat Huruf Tebal gunakan kode:

<b>oziq14.wordpress.com</b>

hasilnya seperti :

oziq14.wordpress.com


Membuat Huruf Garis Bawah gunakan kode :

<u>oziq14.wordpress.com</u>

hasilnya seperti :

oziq14.wordpress.com


Membuat Huruf bercetak Miring gunakan kode :

<i>oziq14.wordpress.com</i>

hasilnya seperti :

oziq14.wordpress.com


Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :

<b><i><u>oziq14.wordpress.com</u></i></b>

hasilnya seperti :

oziq14.wordpress.com


Membuat Huruf tebal strong gunakan kode :

<srong>Belajar</strong>

hasilnya seperti :

Belajar


Membuat Huruf Hidden gunakan kode :

<span style=”visibility: hidden”>oziq14.wordpress.com</span>

hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..


Membuat Huruf Besar semua (uppercase) gunakan kode :

<span style=”text-transform: uppercase”>oziq14.wordpress.com</span>

hasilnya seperti :

OZIQ14.WORDPRESS.COM


Membuat Huruf Small caps gunakan kode:

<span style=”font-variant: small-caps”>oziq14.wordpress.com</span>

hasilnya seperti ini:

oziq14.wordpress.com


Membuat Huruf Subscribe / kecil di bawah gunakan kode:

<p>14<sub>oziq14.wordpress.com</sub></p>

hasilnya seperti ini:

14oziq14.wordpress.com


Membuat Huruf Superscribe / pangkat gunakan kode:

<p>4<sup>2</sup></p>

hasilnya seperti ini:

14oziq14.wordpress.com


Membuat Huruf bergaris atas gunakan kode:

<span style=”text-decoration: overline”>oziq14.wordpress.com</span>

hasilnya seperti ini:

oziq14.wordpress.com


Membuat Huruf bergaris tengah gunakan kode:

<strike>oziq14.wordpress.com</strike>

hasilnya seperti ini:

oziq14.wordpress.com


Menentukan ukuran huruf gunakan kode:

<a style=” font-size: 22px; “>oziq14.wordpress.com</a>

hasilnya seperti ini:

oziq14.wordpress.com


Menentukan warna huruf gunakan kode:

<a style=”color: #FF0000; “>oziq14.wordpress.com</a>

hasilnya seperti ini:

oziq14.wordpress.com


Membuat bullet dot bolong gunakan kode:

<ul type=”circle”>
<li>oziq14.wordpress.com</li>
<li>oziq14.wordpress.com</li>
<li>oziq14.wordpress.com</li>
</ul>

hasilnya seperti ini:


Membuat bullet dot kotak gunakan kode:

<ul type=”square”>
<li>oziq14.wordpress.com</li>
<li>oziq14.wordpress.com</li>
<li>oziq14.wordpress.com</li>
</ul>

hasilnya seperti ini:


Membuat bullet dot bulat gunakan kode:

<ul>
<li>oziq14.wordpress.com</li>
<li>oziq14.wordpress.com</li>
<li>oziq14.wordpress.com</li>
</ul>

hasilnya seperti ini:


Mengatur posisi bullet gunakan kode:

<blockquote>
<blockquote>
<blockquote>
<ul>
<li>oziq14.wordpress.com</li>
<li>oziq14.wordpress.com</li>
<li>oziq14.wordpress.com</li>
</ul>
</blockquote>
</blockquote>
</blockquote>

hasilnya seperti ini:


Menentukan kombinasi warna, dan ukuran huruf gunakan kode:

<a style=”color: #FF0000; font-size: 22px;>oziq14.wordpress.com</font></a>

hasilnya seperti ini:

oziq14.wordpress.com


Membuat tabel border solid gunakan kode:

<table border=”1″ width=”200″>
<tr>
<td style=”border-style: solid”>oziq14.wordpress.com</td>
</tr>
</table>

hasilnya seperti :

oziq14.wordpress.com

Membuat tabel border dot gunakan kode:

<table border=”1″ width=”200″
style=”border-style: dotted”>
<tr>
<td border=”2″ style=”border-style:
dotted”>oziq14.wordpress.com</td>
</tr>
</table>

hasilnya seperti ini:

oziq14.wordpress.com

Membuat tabel border dashed gunakan kode:

<table border=”1″ width=”200″ style=”border-style: dashed”>
<tr>
<td style=”border-style: dashed”>oziq14.wordpress.com</td>
</tr>
</table>

hasilnya seperti ini:

oziq14.wordpress.com

Membuat tabel border groove gunakan kode:

<table border=”1″ width=”200″ style=”border-style: groove”>
<tr>
<td>oziq14.wordpress.com</td>
</tr>
</table>

hasilnya seperti ini:

oziq14.wordpress.com

Membuat tabel border Ridge gunakan kode:

<table border=”1″ width=”200″ style=”border-style: ridge”>
<tr>
<td>oziq14.wordpress.com</td>
</tr>
</table>

hasilnya seperti ini:

oziq14.wordpress.com

Membuat tabel border Insert gunakan kode:

<table border=”1″ width=”200″ style=”border-style: inset”>
<tr>
<td>oziq14.wordpress.com</td>
</tr>
</table>

hasilnya seperti ini:

oziq14.wordpress.com

Membuat tabel border Outset gunakan kode:

<table border=”1″ width=”200″ style=”border-style: outset”>
<tr>
<td>oziq14.wordpress.com</td>
</tr>
</table>

hasilnya seperti ini:

oziq14.wordpress.com

Membuat Tabel Biasa gunakan kode :

<table border=”1″width=”200″><td>oziq14.wordpress.com</td></table>

hasilnya seperti:

oziq14.wordpress.com

Membuat Tabel berwarna gunakan kode :

<table border=”1″width=”200″bgcolor=”green”><td>oziq14.wordpress.com</td></tabel>

hasilnya seperti :

oziq14.wordpress.com

Membuat Tabel berwarna tak berbingkai gunakan kode :

<table border=”0″width=”200″bgcolor=”blue”><td>oziq14.wordpress.com</td></tabel>

hasilnya seperti:

oziq14.wordpress.com

Dan lain-lain


Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer seperti dreamweaver atau situs-situs penyedia layanan HTML…!!

Posted on 24 May, 2011, in Tutorial, Wordpress and tagged , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s