Belajar HTML: Body Page

Well,, kawan-kawan semua, setelah membahas pengenalan html pada postingan sebelumnya sekarang saya akan membahas lebih banyak tentang basic body html, seperti paragraf, heading, stlying font dan sebagainya.

Pertama kita bahas tentang paragraf. elemen ...digunakan untuk menandai sekumpulan teks sebagai suatu paragraf. Tag paragraf memiliki atribut yang dapat dipakai sebagai tambahan untuk pemformatan paragraf.

Atribut Value Keterangan
Align Right Rata Kanan
Center tengah
Left Rata Kiri
Justify Rata Kiri Kanan


Kemudian dalam sebuah isi html tentunya akan ada Heading. Heading sendiri merupakan sekumpulan frasa yang menjadi judul atau sub judul dalam suatu dokumen HTML. Sekalipun sama-sama merupakan judul, heading berbeda dengan elemen <title> yang hanya muncul pada title bar dari suatu jendela browser, bukan didalam web page.

Html menyediakan 6 buah tingkat heading. Heading 1 biasanya merupakan judul utama, sedangkan heading level berikutnya  merupakan sub judul dari judul utama. Untuk menyatakan heading digunakan tag <hx> dimana x merupakan nomor lvl heading dari 1sampai 6, dan </hx> dipakai untuk mengakhirinya.

Atribut yang dapat digunakan pada tag <h> adalah <align> dimana memiliki nilai left,right dan center. Contoh penulisannya: <h1 align="center"> Heading Rata di Tengah </h1>

Setelah membahas heading, sekarang kita beranjak ke Pysical Style. Apa sih Pyhsical Style itu?? Physical Style adalah suatu jenis format yang diberikan pada teks tanpa tergantung pada jenis dari elemen dasar tersebut. Elemen-elemen ini sudah sering kita pakai dalam program pengolah kata, seperti menebalkan suatu teks atau membuat miring tulisan teks tersebut.

Nah untuk elemen-elemen fisik tersebut bisa anda lihat pada tabel berikut:
Elemen Fungsi
 <b>...........</b>   Untuk menebalkan teks
<i>...........</i>   Untuk membuat teks terlihat miring
<u>...........</u>   Untuk Menggaris bawahin te
<s>...........</s>   Untuk memberikan coretan pada teks
<blink>...........</blink>   Untuk membuat teks berkedip
<tt>...........</tt>   Menampilkan teks dalam bentuk typewriter                    
<big>...........</big>   Untuk memperbesar teks
<small>...........</small>      Untuk mengecilkan teks
<sub>...........</sub>    Membuat teks subcript
<sup>...........</sup>    Membuat teks supersubcript


Setelah membahas physical style, sekarang kita beralih ke preformated text. Pada tag paragraf, penekanan tombol enter, tab  dan spasi tidak memberikan pengaruh pada halaman web yang kita buat. Bagaimana jika misalnya kita betul-betul ingin menambahkan spasi dan enter pada teks dalam web kita. Masalah tersebut dapat kita pecahkan dengan menggunakan tag <pre>..</pre>. Dengan menggunakan tag <pre>, teks yang berada dalam tag pre akan mengikuti sesuai dengan pengetikan teks yang kita lakukan.

Untuk mengujinya, anda bisa melakukan latihan. Ketikan pada notepad halaman HTML dibawah ini:

<html>

<body>
<h2> Contoh Penggunaan Tag Pre </h2>

<pre>
Teks ini  menggunakan s p a s i dan ENTER
untuk berpindah ke baris ini.
</pre>

<p> Tag pre juga sangat cocok untuk  menampilkan  baris-baris kode program seperti dibawah ini </p>
<pre><b>
for i = 1 to 500
      write('Saya senang belajar HTML)
</pre></b>

<p> Kita juga dapat membuat gambar dengan format teks seperti ini : </p>
<pre>
                                   Couple in love

                                  . ♥/(,")\.(".)♥★
                                  . .★/♥\♥/█\♥★
                                    .♥_| |__| |_ ♥ 
</pre>

</body>
</html>


Huft,, paragrap udah, fisikal style udah, preformated text udah, apalagi ya... Oh iya, mengatur font. Dalam setiap dokumen html pasti terdapat banyak teks yang kita tulis, tentu saja banyak orang yang menggunakan ukuran tekt, warna teks dan jenis font yang berbeda-beda. So, langsung saya jelasin nih bagaimana cara mengatur font dalam html.

Pertama dalam segi ukuran, untuk menentukan ukuran besarnya font, kita dapat menggunakan atribut <size> pada element font dengan nilai 1 sampai 7. Semakin besar angka, semakin besar ukuran teks tersebut.

Sebagai contoh: <font size="1"> ukuran teks=1 </font>
                           <font size="2">ukuran teks=2</font>

Kedua dalam segi warna. Penggunaan warna pada teks sendiri mulai diperkenalkan oleh internet explorer dengan menambahkan atribut <color> pada element <font>. Pendefinisian warna dapat dilakukan dengan dua cara yaitu melalui nama warna atau menggunakan nilai RGBwarna

Contoh:
<font color="red"> teks berwarna merah </font>
<font color=#0000> teks berwarna putih </font>

Dan yang terakhir mengubah jenis font. Banyak jenis-jenis font yang kini bisa kita gunakan, mulai dari Times New Roman, Aerial, Curlz MT, Calibri dll. Nah untuk menentukan jenis font yang ingin kita gunakan dalam dokumen html adalah dengan menggunakan atribut <face> dalam element <font> dan menentukan nilai valuenya dengan jenis font yang kita mau.

Contoh:
<font face="calibri"> Font jenis calibri </font>

Gimana sobat? Mudah kan?? Ayo buat yang pengen belajar HTML harus semangat dan sering melakukan latihan.. Supaya terbiasa dengan bahasacode HTML...

Fiuh,, cape sodara-sodara hahahaa... mungkin postingan nya saya cukupkan dulu sampai disni.. Semoga apa yang saya bahas kali ini dapat bermanfaat bagi kita semua.
Sebelumnya saya ucapkan terimakasih kepada kalian semua sudah mau mampir di blog saya, jangan bosen-bosen ya hehehe.

Oh iya ampir lupa, terima kasih kepada Dosen saya Bapa Erick Wijaya, S.Kom yang telah mengajarkan materi ini kepada saya dan teman-teman sekelas saya :)
Well.. See You Later in next post..

Share:

0 comments