Beranda » Tutor HTML ateonsoft.com » Tutorial HTML-9 (ateonsoft.com/ayomaju.com)

Tutorial HTML-9 (ateonsoft.com/ayomaju.com)

HTML Pada tutorial HTML lengkap 8 telah dibahas tentang kode warna dasar, perataan atau align dan format text dan indentasi atau quotes. Pada tutorial kali ini tetap akan membahas topik yang sama hanya saja kode-kode lainnya berkaitan dengan memformat halaman agar blog atau website menjadi indah dan memiliki fungsi maksimal.

Kali ini membahas Preformatted text dan Grouping element.

Preformatted text

Tag preformatted text <PRE> digunakan untuk menampilkan text sesuai dengan format aslinya. Agar langsung dimengerti dengan mudah maka sebaiknya langsung praktek dengan contoh dibawah ini:

<code><html>
<head>
<title>Formating Font</title>
</head>
<body>
<font color="#9966FF" size="5">
Coba fungsi tag PRE
</font>
<p>
<font color="#FF6600"><pre></font>
Mepet kiri
     Agak menjorok
          Lebih menjorok lagi
               Sangat menjorok
<font color="#FF6600">

Hasilnya silahkan dilihat. Eh iya buat saja filenya dengan notepad. Agar langsung mengerti silahkan copy kode-kode diatas dan paste di notepad. Kemudian save as dengan nama latihan9.html. Ingat ketikkan .html setelah nama latihan9. Maksudnya adalah membuat penyimpanan file dalam format HTML. Lalu buka dengan browser (firefox atau IE, atau lainnya).

Agar mengerti perbedaan antara diberi kode <PRE> dan tidak, maka buat dua file HTML dan yang satunya buang kode <PRE> yang saya warnai orange diatas.

Untuk apa penggunaan yang tepat untuk kode ini? adalah untuk menulis kode-kode agar terlihat seperti penulisan kode, aduh kok mbulet ya? pokoknya biasanya saya menggunakan kode ini jika menuliskan kode HTMT. Jika penasaran lihat source halaman ini. Karena kode-kode diatas juga diapit oleh kode <PRE>.

Grouping element

Grouping element adalah mengelompokkan sebuah elemen HTML. Kode yang digunakan biasanya Tag DIV dan SPAN. Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content sementara div digunakan untuk block-level content.

Agar lebih mengerti silahkan buat file HTML dengan notepad dari kode dibawah ini:

<code><html><br><head><br><title>Div dan Span</title><br></head><br><body><br><div><br>Divisi 1<br><p><br>Tag DIV digunakan untuk mengelompokkan group<br>element biasanya untuk block-level element.<br></p><br></div><br><div align="right"><br>Divisi 2<br><p><br>Ini didalam divisi kedua.<br>di tulis dengan alignment kanan.<br></p><br></div><br><span style="font-size:18px; color:#FF0000"><br>baris ini dalam span dengan warna merah.<br></span><br></body><br></html><br></code>

Hasilnya kira-kira seperti dibawah ini, tapi bisa beda karena tampilan dibawah telah dipengaruhi CSS blog ini.

Divisi 1

Tag DIV digunakan untuk mengelompokkan group
element biasanya untuk block-level element.

Divisi 2

Ini didalam divisi kedua.
di tulis dengan alignment kanan.

baris ini dalam span dengan warna merah.

Sudah dulu tutorialnya disambung lagi pada tutorial HTML lengkap berikutnya yang membahas hyperlink yang meliputi Absolute Address, Relatif Address, dan Link ke Section tertentu dalam document.

feed dari situs: http://www.ateonsoft.com

Source: Tutorial HTML lengkap 9 from Gudang Informasi

Link and Search

Belum ada tanggapan untuk "Tutorial HTML-9 (ateonsoft.com/ayomaju.com)"

Post a Comment