FORMAT TEKS HALAMAN WEB

ini blog PEMROGRAMAN WEB Comment

Format Teks Halaman Web

Materi Pokok : Format Teks Halaman Web

Anatomi dokumen web
Pemformatan teks dan paragrap
Pembuatan list minimal
Pembuatan list kombinasi

Pembahasan

Elemen-elemen dasar HTML

1. Atribut Tag Pada HTML

1. <BR> Untuk membuat baris baru gunakan <br>, spasi lebih dari satu akan diabaikan.

2. <P></P> Digunakan untuk membuat paragraf, jika tanpa tag penutup hasilnya seperti menggunakan 2 kali <br>

Di dalam tag <P> bisa disertakan atribut ALIGN yang berguna untuk mengatur peletakan teks di dalam masing-masing baris. Salah satu nilai yang dapat diberikan pada ALIGN adalah CENTER, yang menempatkan teks berada di tengah-tengah layar pada baris yang bersangkutan. Selain CENTER, nilai lain yang dapat diisikan pada ALIGN yaitu :

􀂃 LEFT, mengatur teks rata kiri terhadap halaman

􀂃 RIGHT, mengatur teks rata kanan terhadap halaman

􀂃 JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang.

3. Tag Judul, HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa :

· <H1> ... </H1>

· <H2> ... </H2>

· <H3> ... </H3>

· <H4> ... </H4>

· <H5> ... </H5>

· <H6> ... </H6>

Contoh :

Seperti halnya pada tag <P>, tag judul atau heading ini juga memiliki atribut ALIGN. Nilai yang dapat diberikan pada ALIGN adalah :

· LEFT (default), mengatur teks rata kiri terhadap halaman

· RIGHT, mengatur teks rata kanan terhadap halaman

· CENTER, menempatkan judul di tengah-tengah layar pada baris yang bersangkutan

· JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang.

<HTML>

<HEAD>

<TITLE>Atribut ALIGN</TITLE>

</HEAD>

<BODY>

<H1>Pesona Tanaman Hias</H1>

<H1 ALIGN = "LEFT">Pesona Tanaman Hias</H1>

<H1 ALIGN = "RIGHT">Pesona Tanaman Hias</H1>

<H1 ALIGN = "CENTER">Pesona Tanaman Hias</H1>

</BODY>

</HTML>

4. Tag <HR> Horizontal Line, Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag <HR>. Contoh :

Atribut yang terdapat pada tag <HR>, diantaranya :

1. Size : Menentukan ketebalan garis

2. Width : Menentukan lebar garis

3. Noshade : Menghilangkan bayangan pada garis

4. Align : Menetukan letak teks dalam baris

Contoh penggunaan atribut Size :

<HTML>

<HEAD>

<TITLE>Atribut SIZE pada Tag HR</TITLE>

</HEAD>

<BODY>

<H1>KEBUN PESONA</H1>

Jl. Solo Km 14<BR>

Yogyakarta<BR>

Indonesia<BR>

</BODY>

</HTML>

Contoh penggunaan atribut width :

<HTML>

<HEAD>

<TITLE>Atribut WIDTH dan ALIGN pada Tag HR</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Contoh penggunaan atribut Noshade :

<HTML>

<HEAD>

<TITLE>Atribut NOSHADE pada Tag HR</TITLE>

</HEAD>

<BODY>

<H1>KEBUN PESONA</H1>

Jl. Solo Km 14<BR>

Yogyakarta<BR>

Indonesia<BR>

</BODY>

</HTML>

5. Tag <center> , Untuk menengahkan suatu teks, bisa juga digunakan tag <CENTER>. Tentu saja, untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak ditengahkan), perlu disertakan </CENTER>. Contoh :

<HTML>

<HEAD>

<TITLE>Tag CENTER</TITLE>

</HEAD>

<BODY>

<H2>Berbagai Jenis Keladi yang mempesona:</H2>

Red Flash <BR>

Red Fire <BR>

Fannie Munson <BR>

Pink Beauty <BR>

Hilo Beauty <BR>

Jackie Suthers <BR>

</CENTER>

*****

</BODY>

</HTML>

2. Mengatur Teks

1. Mengatur Teks Secara Fisik

Tag Untuk Mengatur Secara Fisik

Tag	Deskripsi
<B>Teks</B>	Teks ditampilkan dalam keadaan ditebalkan
<BIG>Teks</BIG>	Teks ditampilkan dengan ukuran lebih besar dari ukuran normal
<I>Teks</I>	Teks ditampilkan dalam keadaan miring
<SMALL>Teks</SMALL>	Teks ditampilkan dengan ukuran lebih kecil dari ukuran normal
<SUB>Teks</SUB>	Teks ditampilkan sebagai subskrip
<SUP>Teks</SUP>	Teks ditampilkan sebagai superskrip
<TT>Teks</TT>	Teks ditampilkan dalam bentuk seperti ketikan mesin tik
<U>Teks</U>	Teks ditampilkan dengan diberi garis bawah

Contoh tag <B></B> atau <STRONG></STRONG> :

Contoh tag <I><I/> atau <EM></EM> :

Contoh tag <U></U> :

Contoh tag keseluruhan :

2. Mengatur Teks Secara Logis

Tag Untuk Mengatur Secara Logis

Tag	Deskripsi
<CITE>Teks</CITE>	Menyatakan teks adalah kutipan
<CODE>Teks</CODE>	Menyatakan bahwa teks adalah kode atau program komputer. Umumnya teks ditampilkan dengan font monoskrip.
<EM>Teks</EM>	Menyatakan penekanan pada teks. Umumnya teks ditampilkan miring.
<KBD>Teks</KBD>	Menyatakan teks adalah masukan dari keyboard. Teks seperti ini umumnya ditampilkan dengan font monospasi.
<SAMP>Teks</SAMP>	Menyatakan bahwa teks adalah suatu konstanta sederetan karakter. Biasanya ditampilkan dengan font monospasi.
<STRONG>Teks</STRONG>	Menyatakan bahwa teks yang sangat penting untuk diperhatikan orang. Biasanya disajikan dengan ditebalkan.
<VAR>Teks</VAR>	Menyatakan teks adalah variabel atau ekspresi matematika atau program komputer. Teks akan disajikan dalam bentuk miring.

3. Mengatur Font

Tag <FONT color=”red”>…</FONT> berguna untuk mengatur jenis, ukuran, maupun warna font. Tag <FONT>..</FONT> terdiri dari beberapa atribut :

· Size

· Color

· Face

Contoh Tag Size :

Contoh Tag Face :

Add caption

Contoh atribut color :

Atribut pada tag <FONT> yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna . Jika warna latar belakang yang akan diatur, pengaturan perlu dilakukan melalui tag <BODY> dengan properti berupa BGCOLOR. Tag BODY juga memiliki atribut bernama TEXT yang dapat digunakan untuk mengatur warna teks pada keseluruhan tubuh dokumen.

Daftar nama warna pada atribut penentu warna

Nama Warna	RGB	Nama Warna	RGB
aqua	00FFFF	navy	000080
black	000000	olive	808000
blue	0000FF	purple	800080
fuchsia	FF00FF	red	FF0000
gray	808080	silver	C0C0C0
green	008000	teal	008080
lime	00FF00	yellow	FFFF00
maroon	800000	white	FFFFFF