Format Teks Halaman WEB

Ahmad Fahmi Anwari
Makatabahabdillah.esy.es Pemrograman WEB
Format Teks Halaman Web
Kompetensi Dasar :
1. Memahami format teks pada halaman web
2. Menyajikan teks dalam format tertentu pada halaman web
Materi Pokok : Format Teks Halaman Web

1. Anatomi dokumen web
2. Pemformatan teks dan paragrap
3. Pembuatan list minimal
4. 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.
Pemrograman WEB Ahmad Fahmi Anwari

SMK Karya Guna Bhakti 2 maktabahabdillah.esy.es
Ahmad Fahmi Anwari
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.

Ahmad Fahmi Anwari
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 :

Ahmad Fahmi Anwari
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>

Ahmad Fahmi Anwari
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>
<HR SIZE = "10">
Jl. Solo Km 14<BR>
Yogyakarta<BR>
Indonesia<BR>

Ahmad Fahmi Anwari
</BODY>
</HTML>
Contoh penggunaan atribut width :
<HTML>
<HEAD>
<TITLE>Atribut WIDTH dan ALIGN pada Tag HR</TITLE>
</HEAD>
<BODY>
<HR ALIGN = "CENTER" WIDTH = "5%" SIZE = "10" NOSHADE>
</BODY>
</HTML>
Contoh penggunaan atribut Noshade :
<HTML>
<HEAD>
<TITLE>Atribut NOSHADE pada Tag HR</TITLE>
</HEAD>
<BODY>
<H1>KEBUN PESONA</H1>
<HR SIZE = "10" NOSHADE>
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 :

Ahmad Fahmi Anwari
<HTML>
<HEAD>
<TITLE>Tag CENTER</TITLE>
</HEAD>
<BODY>
<CENTER>
<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>

Ahmad Fahmi Anwari
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> :

Ahmad Fahmi Anwari
Contoh tag <I><I/> atau <EM></EM> :
Contoh tag <U></U> :

Ahmad Fahmi Anwari
Contoh tag keseluruhan :

Ahmad Fahmi Anwari
2. Mengatur Teks Secara Logis
Tag Untuk Mengatur Secara Logis
Tag Deskripsi
Menyatakan teks adalah kutipan

<CITE>Teks</CITE>
Menyatakan bahwa teks adalah kode atau program komputer.

<CODE>Teks</CODE>
Umumnya teks ditampilkan dengan font monoskrip.
Menyatakan penekanan pada teks. Umumnya teks

<EM>Teks</EM>
ditampilkan miring.
Menyatakan teks adalah masukan dari keyboard. Teks seperti

<KBD>Teks</KBD>
ini umumnya ditampilkan dengan font monospasi.
Menyatakan bahwa teks adalah suatu konstanta sederetan

<SAMP>Teks</SAMP>
karakter. Biasanya ditampilkan dengan font monospasi.
<STRONG>Teks</ Menyatakan bahwa teks yang sangat penting untuk

STRONG> diperhatikan orang. Biasanya disajikan dengan ditebalkan.
Menyatakan teks adalah variabel atau ekspresi matematika

<VAR>Teks</VAR> 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 :

Ahmad Fahmi Anwari

Ahmad Fahmi Anwari
Contoh Tag Face :

Ahmad Fahmi Anwari
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
Contoh :

Ahmad Fahmi Anwari
Contoh atribut BGCOLOR dan TEXT pada Tag BODY :
4. Mengatur Default Font

HTML menyediakan tag bernama <BASEFONT> yang berfungsi untuk menentukan ukuran
default font untuk seluruh halaman. Contoh :

Ahmad Fahmi Anwari
5. Entitas Karakter dan Numerik
Kode HTML untuk menuliskan karakter-karakter khusus
Simbol HTML Simbol HTML

Ä Ä ä ä
Ë Ë ë ë
Ï Ï ï ï
Ö Ö ö ö
Ü Ü ü ü
Β ß
© © ½
® ® ¾
™ &#8482 ¼
Spasi

Ahmad Fahmi Anwari
& &
» »
« «
< <
> >
x ×
÷ ÷
Contoh :
6. Pembuatan Daftar Item (List)

Tag <UL>..</UL> Unorder List, biasa kita kenal dengan Bullet ,memiliki antribut :
 Type (jenis bullet), nilai: disc, square, circle

Ahmad Fahmi Anwari
Tag <OL>...</OL> Penggunaan tag <OL> untuk menampilkan daftar item dengan nomor
urut. Atribut Type (jenis numbering), nilai: 1, A, a, I, i
Contoh :

Ahmad Fahmi Anwari

Ahmad Fahmi Anwari
Latihan
1. Buatlah dan tulislah kode HTML dari tampilan halaman WEB dibawah ini :

Ahmad Fahmi Anwari
Format Tabel Halaman Web
Kompetensi Dasar :
1. Memahami format tabel pada halaman web

2. Menyajikan tabel pada halaman web
Materi Pokok :
1. Anatomi tabel minimal
2. Tabel dengan spanning
3. Tabel di dalam tabel
4. Desain halaman web dengan konsep tabel
Pembahasan
Dalam membuat tampilan sebuah tabel pada perintah HTML memiliki 3 komponen perintah
antara lain:
1. <TABLE> … </TABLE>
Berfungsi untuk memulai perintah mendefinisikan tampilan tabel.
2. <TR>… </TR>
Berfungsi untuk mendefinisikan baris dalam tabel.
3. <TD> … </TD> atau <TH> … </TH>
Berfungsi untuk mendefinisikan kolom dalam baris tabel.

Ahmad Fahmi Anwari
Contoh Pendefinisian Tampilan Tabel :
<table border=1>
<tr> <th> Judulkolom1</th>
<th> Judulkolom2</th>
<th> judulkolom4</th>
</tr>
<tr> <td> baris2,kolom1</td>
<td> baris2,kolom2</td>
</tr>
<tr> <td> baris3,kolom1</td>
</tr>
</table>

Ahmad Fahmi Anwari
Hasilnya :
Dari contoh diatas dapat dipahami bahwa dalam membuat sebuah tampilan tabel pada
HTML dengan cara mendefinisikan baris tabel dengan perintah <TR> terlebih dahulu
kemudian baru mendefinisikan cell isi dari baris tabel yang bersangkutan dengan perintah
<TD> atau <TH>.
Catatan :
Untuk mendefinisikan tabel dengan tampilan 1 baris dan 1 kolom, ketiga komponen
perintah HTML wajib didefinisikan.
I. Perbedaan dari perintah <TD> dengan <TH>:
Gunakan perintah <TH> jika akan mendefinisikan cell yang berfungsi sebagai judul
kolom tabel (biasanya cell-cell isi baris pertama pada tabel). Kelebihannaya adalah jika
isi kolom diapit dengan perintah <TH> … </TH> maka isi kolom tersebut ditampilkan

Ahmad Fahmi Anwari
dengan huruf tebal dan rata tengah. Sedangkan <TD> digunakan untuk mendefinisikan
isi kolom biasa dimana nanti akan ditampilkan dengan huruf tidak ditebalkan dan rata
kiri.
II. Atribut pada komponen-komponen perintah tabel:

● Border = Angka, Atribut pada perintah TABLE untuk mengatur ketebalan bingkai
tabel. Semakin besar angkanya maka garis bingkai akan semakin besar pula.
● Bordercolor = “warna”, Atribut pada perintah TABLE untuk mengatur warna
bingkai tabel.
● Bgcolor= ”warna”, Atribut untuk mengatur warna latar belakang. Atribut ini bisa
diletakkan pada ketiga komponen perintah tabel.
<Table Bgcolor=”warna”> berpengaruh pada satu tabel.
<TR Bgcolor=”warna”> berpengaruh pada satu baris tabel.
<TD Bgcolor=”warna”> berpengaruh pada satu cell tabel saja.
● Background= ”filegambar”, Atribut untuk mengatur warna latar belakang dengan

tampilan gambar. Atribut ini bisa diletakkan pada ketiga komponen perintah tabel
● CellSpacing=angka, Jarak antar cell dalam tabel
Cellspacing
● CellPadding=angka, Jarak antara isi cell dengan bingkai cell
Cellpadding
…isi cell…
Bingkai tabel

Ahmad Fahmi Anwari
Kotak cell
● Width = angka atau persen, menentukan lebar tabel. Jika didefinisikan dengan
angka berarti mendefinisikan lebar tabel dengan menggunakan satuan pixel dan
jika menggunakan persen berarti lebar tabel adalah sebanding dengan persentase
lebar windows browser penampil. Atribut ini juga bisa digunakan pada perintah
<TD> atau <TH> untuk menentukan lebar kolom pada tabel. Jika atribut ini tidak
didefinisikan maka lebar tabel mengikuti lebar cell yang bergantung pada
panjangnya isi pada masing-masing cell.
● Height = angka atau persen, menentukan tinggi tabel. Pendefinisiannya sama
dengan penggunaan atribut Width.
III. Menggabung Cell
Pada pemrograman HTML hanya mengenal perintah menggabung cell (merge cell)
tetapi tidak mengenal perintah memecah cell. Perintah pendefinisiannya adalah
sebagai atribut perintah <TD> atau <TH>.
● <TD Colspan=angka>  menggabung cell beda kolom

● <TD Rowspan=angka>  menggabung cell beda baris
Contoh penggunaan perintah menggabung cell:
<table border=1>
Baris 1
<tr bgcolor=”green”>

Ahmad Fahmi Anwari
<th> judulkolom4</th>
</tr>
<tr>
<td bgcolor="pink"> baris2,kolom1</td>
Baris 2
<td rowspan=2> baris2&3,kolom2</td>
<td rowspan=2 colspan=2> baris2&3,kolom3&4 </td>
</tr>
Baris 3
<tr>
<td bgcolor="pink"> baris3,kolom1</td>
</tr>
<tr>
<td colspan=2> baris4,kolom1&2</td>
Baris 4
Ahmad Fahmi Anwari
</tr>
</table>
Width
Hasilnya:
judulkolom4 Judulkolom3 Judulkolom2 Judulkolom1
baris2&3,kolom3
baris2&3,kolom2 baris2,kolom1
&4
baris3,kolom1
baris4,kolom3 baris4,kolom2 baris4,kolom1&2
Contoh Listing Membuat Tampilan Tabel :
Tabel.html
<HTML> 1.
<HEAD></HEAD> 2.
<BODY> 3.
<font face="arial narrow"> 4.

Ahmad Fahmi Anwari
<table border=1 cellspacing=0 cellpadding=2 5.
bodercolor=”black”>
<tr bgcolor="black"> 6.
<th colspan=3> 7.
<font color="White"> 8.
Harga Komoditas Beras <br> 9.
di Kota Surakarta 10.
</font> 11.
</th> 12.
</tr> 13.
<tr bgcolor="gray"> 14.
<th width=150> 15.
<font color="White">Komoditas 16.
</font>
</th> 17.
<th width=50> 18.

Ahmad Fahmi Anwari
<font color="White">Satuan </font> 19.
</th> 20.
<th width=100> 21.
<font color="White">Harga </font> 22.
</th> 23.
</tr> 24.
<tr> <td> Beras C4 Super</td> 25.
<td align="center"> 1 kg</td> 26.
<td align="right"> Rp. 4.600,- </td> 27.
</tr> 28.
<tr> <td> Beras C4 Biasa</td> 29.
</tr> 32.

Ahmad Fahmi Anwari
<tr> <td> Mentik Wangi</td> 33.
</tr> 36.
</table> 37.
</font> 38.
</BODY> 39.
</HTML> 40.
Hasilnya :
s/d no.13
Harga Komoditas
Beras

Ahmad Fahmi Anwari
di Kota Surakarta
Baris no.24
s/d no.28
Satuan Komoditas
Harga
Baris no.29
s/d no.32
1 kg Beras C4 Super
Rp. 4.600,-
Baris no.33
s/d no.36
1 kg Beras C4 Biasa
Rp. 4.400,-
Rp. 4.500,- 1 kg Mentik Wangi


Format Teks Halaman WEB

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Format Teks Halaman WEB

Diunggah oleh

Hak Cipta:

Format Tersedia

Ahmad Fahmi Anwari

Makatabahabdillah.esy.es Pemrograman WEB

Format Teks Halaman Web

Materi Pokok : Format Teks Halaman Web

Elemen-elemen dasar HTML

1. Atribut Tag Pada HTML

Pemrograman WEB Ahmad Fahmi Anwari

Pemrograman WEB Ahmad Fahmi Anwari

Pemrograman WEB Ahmad Fahmi Anwari

Pemrograman WEB Ahmad Fahmi Anwari

4. Tag <HR> Horizontal Line, Untuk mempercantik halaman, seringkali pembuat

Atribut yang terdapat pada tag <HR>, diantaranya :

Pemrograman WEB Ahmad Fahmi Anwari

Contoh penggunaan atribut width :

Contoh penggunaan atribut Noshade :

Pemrograman WEB Ahmad Fahmi Anwari

Pemrograman WEB Ahmad Fahmi Anwari

1. Mengatur Teks Secara Fisik

Tag Untuk Mengatur Secara Fisik

<B>Teks</B> Teks ditampilkan dalam keadaan ditebalkan

<I>Teks</I> Teks ditampilkan dalam keadaan miring

<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> :

Pemrograman WEB Ahmad Fahmi Anwari

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

Contoh tag <U></U> :

Pemrograman WEB Ahmad Fahmi Anwari

Contoh tag keseluruhan :

Pemrograman WEB Ahmad Fahmi Anwari

2. Mengatur Teks Secara Logis

Tag Untuk Mengatur Secara Logis

Menyatakan teks adalah kutipan

Menyatakan bahwa teks adalah kode atau program komputer.

Menyatakan penekanan pada teks. Umumnya teks

Menyatakan teks adalah masukan dari keyboard. Teks seperti

Menyatakan bahwa teks adalah suatu konstanta sederetan

<STRONG>Teks</ Menyatakan bahwa teks yang sangat penting untuk

Menyatakan teks adalah variabel atau ekspresi matematika

Tag <FONT color=”red”>…</FONT> berguna untuk mengatur jenis, ukuran, maupun

Contoh Tag Size :

Pemrograman WEB Ahmad Fahmi Anwari

Pemrograman WEB Ahmad Fahmi Anwari

Contoh Tag Face :

Pemrograman WEB Ahmad Fahmi Anwari

Contoh atribut color :

Daftar nama warna pada atribut penentu warna

Nama Warna RGB Nama Warna RGB

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

Pemrograman WEB Ahmad Fahmi Anwari

Contoh atribut BGCOLOR dan TEXT pada Tag BODY :

4. Mengatur Default Font

Pemrograman WEB Ahmad Fahmi Anwari

5. Entitas Karakter dan Numerik

Kode HTML untuk menuliskan karakter-karakter khusus

Simbol HTML Simbol HTML