Posted in Informatika

Tutorial HTML 3

Halo, berjumpa lagi dengan saya…
kali ini saya akan membahas beberapa macam tag
yang pertama

<H1><H2><H3>….dst atau disebut juga Header

Header adalah huruf-huruf
berukuran khusus yang digunakan untuk menuliskan judul bab atau sub bab. H1 adalah header yang paling
besar dan H6 adalah header yang paling kecil.

<html>
<body>
<H1>Header level 1</H1>

<H2>Header level 2</H2>

<H3>Header level 3</H3>

<H4>Header level 4</H4>

<H5>Header level 5</H5>

<H6>Header level 6</H6>

</body>
</html>

hasilnya

Header level 1

Header level 2

Header level 3

Header level 4

Header level 5
Header level 6

BARIS DAN PARAGRAF

Sekarang kita akan membuat bagaimana membuat spasi dan baris baru dalam sebuah paragraf


<html> 
<body>

Sukma Arbianto S

ITS

Teknik Informatika

</body>
</html>

Bagaimana hasilnya? Ternyata hasilnya hanya seperti ini:

Sukma Arbianto S ITS Teknik Informatika.

mengapa hasilnya tidak seperti yang anda bayangkan? itu karena menekan enter
pada saat mengedit HTML tidak akan membuat suatu baris baru. Solusinya yaitu
dengan tag <br/>


<html>


<body>

Sukma Arbianto S

<br/>ITS

<br/>Teknik Informatika

</body>

</html>

 

Simpan kemudian lihat hasilnya dengan me-refresh pada browser.
Hasilnya kurang lebih akan seperti ini:

Sukma Arbianto S

ITS

Teknik Informatika

<html><body>

<p>Paragraf pertama</p>

<p>Paragraf kedua<p>

<p>Paragraf ketiga</p>

</body>
</html>

Bila dilihat dalam browser, hasilnya akan seperti ini:

Paragraf pertama

Paragraf kedua

Paragraf ketiga

MEMBUAT SPASI

Kita telah mengetahui bahwa browser tidak mengenal pembuatan baris dengan
tombol Enter. Disamping itu, browser juga tidak mengenal
pembuatan spasi lebih dari satu spasi dengan menekan tombol Spasi ataupun
tombol Tab.
Nah, bagaimana caranya membuat lebih dari satu spasi dalam dokumen html? Pembuatan spasi dalam
kode-kode html diganti tulisan &nbsp;

<html>

<body>

Diantarai satu spasi <br>kata-kata
&nbsp;&nbsp;&nbsp; ini &nbsp;&nbsp;&nbsp;
diantarai &nbsp;&nbsp;&nbsp; lima
&nbsp;&nbsp;&nbsp; spasi

</body>

</html>

Bila dilihat dalam browser hasilnya akan seperti ini:

Kata-kata ini diantarai satu spasi sedangkankata-kata     ini     diantarai     lima     spasi

Ada sejumlah notasi khusus untuk
penulisan karakter-karakter tertentu. Karakter-karakter ini harus dituliskan dengan
notasi khusus mengingat karakter-karakter ini dipakai juga sebagai kode-kode tag
atau karena memang tidak dijumpai dalam karakter teks ASCII.
Berikut beberapa diantaranya:

Karakter Keterangan Notasi
< kurung runcing buka &lt;
> kurung runcing tutup &gt;
& dan &amp;
tanda petik ganda &quot;
+ tanda plus minus &plusmn;
© hak cipta atau copyright &copy;
® terdaftar atau registered &reg;

MENAMPILKAN BENTUK SESUAI KEINGINAN

Misal kita ingin membuat sebuah pantun namun malas untuk membuat bentuknya
misalkan, menjorok ke dalam atau enter atau spasi dan sebagainya, kita dapat
menggunakan tag <pre>

<html>

<body>

<pre>

Berakit-rakit ke hulu

Bersenang-senang kemudian


Bersakit-sakit dahulu
Bersenang-senang kemudian

</pre>

</body>

</html>

Simpanlah file di atas sebagai file html kemudian tampilkan dalam browser,
hasilnya akan seperti ini:

Berakit-rakit ke hulu
Bersenang-senang kemudian

     Bersakit-sakit dahulu
     Bersenang-senang kemudian

bisa juga seperti ini…

---------------------------------------------------------------------------
    /----\    /      /------/      /    /-======-/     /-----/      /
   /    /    /      /   ---/      /        /          /____ /      /
  /----/    /      /------/      /        /          /     /      /______
-------------------------------------------------------------------------

sekian dulu dari saya semoga bermanfaat…

sampai jumpa lagi di tutorial HTML 4 🙂

-END-

Advertisements

Author:

Insan biasa

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