MODUL 3 PENANGANAN TEKS DAN WARNA

Pada modul ini, Praktikan akan mengetahui dan memahami tentang :

  1. Penanganan Teks
  2. Penanganan Warna

Hypertext Markup Language (HTML) merupakan konsep dasar yang harus dipahamioleh seseorang yang belajar pemrograman web.

3.1 Penanganan Teks

Teks merupakan komponen terpenting dalam menyampaikan informasi. Oleh karena itu, agar informasi yang disampaikan melalui web dapat dipahami dengan mudah oleh pengunjung web, maka perlu diketahui apa saja yang dapat dilakukan oleh HTML terhadap teks. Berikut ini beberapa tag yang berhubungan dengan hal tersebut.

  1. Tag <h>

Tag <h> digunakan membuat dengan ukuran tertentu, mulai dari tag <h1> sampai dengan tag <h6>. Tag <h1> menandakan bahwa teks akan tercetak dengan ukuran huruf yang lebih besar daripada ukuran standar. Biasanya tag <h1> digunakan untuk Judul sebuah konten, tag <h2> untuk sub judul dan seterusnya.

Tag ini mempunyai satu atribut, yaitu align yang berfungsi untuk mengatur perataannya. Contoh <h1 align=center>Selamat Datang</h1>

2. Tag <b>, tag <i>, tag <u>

Ini merupakan tag yang umum, dimana tag <b> (bold) digunakan untuk membuat teks tercetak tebal, tag <i> (italic) untuk membuat teks tercetak miring dan tag <u> (underline) untuk membuat teks bergaris bawah. Ketiga tag ini tidak mempunyai atribut.

3. Tag <small>, tag <big>

Tag <small> digunakan untuk membuat teks tercetak dengan ukuran kecil, sebaliknya tag <big> akan membuat teks tercetak dengan ukuran besar.

4. Tag <sup>, tag <sub>

Tag <sup> digunakan untuk membuat teks naik setengah pt (point), sebaliknya tag <sub> digunakan untuk turun setengah pt. Biasanya tag ini digunakan dalam pembuatan rumus kimia atau perpangkatan.

5.Tag <font>, Tag <basefont>

Tag <font> digunakan untuk menentukan jenis huruf, ukuran dan warna yang digunakan terhadap teks, sedangkan tag <basefont> digunakan untuk menetapkan default warna, ukuran, dan jenis huruf untuk semua teks yang ada dibawah elemen ini. Tag <basefont> ini hanya didukung oleh browser IE.

6. Tag <P>

Tag <p> digunakan untuk membuat paragraf baru dan mengatur perataannya.

7. Tag <dl>,<dt>,<dd>

Tag ini digunakan untuk memformat teks dalam pendefinisian sebuah istilah.

8. Tag <pre>

Digunakan untuk menampilkan teks apa adanya, seperti yang ditulis di editor.

9. Tag <address>

Biasanya digunakan untuk menampilkan informasi pemilik web atau penulis artikel.

10. Tag <abbr>

Digunakan untuk memberikan kepanjangan dari sebuah singkatan.

PRAKTIKUM

Dalam praktikum modul 3, praktikan akan belajar penggunaan tag-tag HTML yang berhubungan dengan penanganan teks dan warna. Kerjakan contoh dibawah ini, pahami lalu ambil kesimpulan.

1.    Tag <h>

2.   Tag <b>, tag <i>, tag <u>

3.   Tag <small>, tag <big>

4.   Tag <sup>, tag <sub>

5.   Tag <font>, Tag <basefont>

6.    Tag <p>

7.   Tag <dl><dt><dd>

8.   Tag <pre>

9.    Tag <address>

10. Tag <abbr>

3.2 Penanganan Warna

Tata pewarnaan konten web sangat mempengaruhi kualitas website. Oleh karena itu

diperlukan pengetahuan bagaimana cara mengatur pewarnaan tersebut. Dalam bahasa

HTML, perintah-perintah untuk menampilkan warna dapat dilakukan dengan dua cara,

yaitu :

1.   Menggunakan Istilah bahasa warna yang umum, seperti :

Kode Bahasa Warna Arti
   
Black Warna hitam
   
Yellow Warna kuning
   
Green Warna hijau
   
Blue Warna biru
   
dst Dan seterusnya
   

2. Menggunakan kombinasi bilang Hexadecimal, yaitu bilangan yang terdiri dari 1,2,3,4,5,6,7,8,9.0.a.b.c.d.f. Dengan aturan : diawali oleh tanda # diikuti oleh

tiga  atau  6  bilangan  tersebut.  Contoh  :  #fff  (warna  putih),  #ffd700  (warna

kuning)

Berikut ini contoh dan fungsi pengaturan warna ini :

Tag

<body bgcolor=red color=yellow>

<font color=green>

Fungsi

bgcolor merupakan perintah untuk memberi warna latar belakang. Jika diletakkan pada tag body, maka akan berpengaruh pada seluruh halaman web.

Hanya berpengaruh pada teks yang diberi tag font hingga tag tersebut di tutup.

<table bgcolor=cyan> Memberikan  efek  warna  latar  belakang  pada  sebuah
<tr bgcolor=magenta> tabel, baris atau sel.
<td bgcolor=purple>  
   
 

Contoh :

Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil kesimpulan :

1.    Latihan 1 :

2.    Latihan 2 :

3.    Latihan 3 :

Selamat belajar,

REFERENSI LANJUTAN :

  1. http://www.w3schools.com/tags/ref_colornames.asp
  2. http://www.w3schools.com/tags/tag_font.asp http://www.w3schools.com/tags/tag_basefont.asp