Iklan 728x90

Dasar HTML: Pengaturan Text Menggunakan HTML

HTML
HTML

Agar halaman web baik secara tampilan, Untuk mendapatkan halaman web yang baik harus dilakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan baris.
Pengaturan text
1. Penggunaan <PRE> untuk menampilkan teks apa adanya.

<HTML>
<HEAD>
<TITLE>Praformat </TITLE>
</HEAD>
<BODY>
<H2>Daftar Harga Keladi:</H2>
<PRE>
              Buku...............5.000
              Pensil.............2.000
              Penghapus..........1.000
</PRE>
Harga sewaktu-waktu bisa berubah.
</BODY>
</HTML>

2. Pengaturan Font : Face (untuk jenis Font), Size (untuk ukuran Font), Color (untuk warna)

<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
Normal: 012345ABCD<BR>
<FONT COLOR="blue" FACE = "Arial">Arial:
012345ABCD</FONT>
<BR>
<FONT COLOR="green" FACE = "Courier" SIZE="5">
Courier: 012345ABCD</FONT>
<BR>
</BODY>
</HTML>

3. Pengaturan warna background : BGCOLOR

<HTML>
<HEAD>
<TITLE>Warna - Bagian 2</TITLE>
</HEAD>
<BODY BGCOLOR = "black" TEXT = "gray">
Normal<BR>
<FONT COLOR = "blue">Warna Biru</FONT><BR>
<FONT COLOR = "green">Warna Hijau</FONT><BR>
<FONT COLOR = "red">Warna Merah</FONT><BR>
<FONT COLOR = "yellow">Warna kuning</FONT><BR>
</BODY>
</HTML>

4.Penggunaan tag <UL> untuk daftar list yang tidak diberi nomor; tag <LI> untuk daftar item yang
diberi bulatan.

<HTML>
<HEAD>
<TITLE>Contoh Pemakaian Tag UL dan LI</TITLE>
</HEAD>
<BODY>
<H2>Daftar Menu Wateg :</H2>
<UL>
<LI>Ayam Goreng <BR>
<LI>Nasi Soto <BR>
<LI>Nasi Rawon <BR>
<LI>Bali telor <BR>
</UL>
</BODY>
</HTML>

5.Penggunaan tag <OL> untuk menampilkan daftar item dengan nomor urut.

<HTML>
<HEAD>
<TITLE>Tag OL dengan TYPE</TITLE>
</HEAD>
<BODY>
<B>Dengan huruf kapital:</B>
<OL TYPE = "A">
<LI>Jakarta<BR>
<LI>Surabaya<BR>
</OL>
<HR>
<B>Dengan angka romawi:</B>
<OL TYPE = "i">
<LI>Jakarta<BR>
<LI>Surabaya<BR>
</OL>
</BODY>
</HTML>

6.Penggunaan tag <DL>, <DT>, <DD> untuk menampilkan daftar khusus dengan tampilan
menjorok ke kanan.

<HTML>
<HEAD>
<TITLE>Daftar Definisi</TITLE>
</HEAD>
<BODY>
<B>Kamus Teknologi Informasi:</B>
<DL>
<DT>TCP/IP</DT>
<DD>Protokol yang digunakan untuk jaringan internet</DD>
<DT>TCP/IP</DT>
<DD>Protokol yang digunakan untuk jaringan internet</DD>
</DL>
</BODY>
</HTML>

7.Penggunaan <BODY BACKGROUND> untuk menampilkan background dan <IMG SRC>
untuk menampilkan gambar.

<HTML>
<HEAD>
<TITLE>Menampilkan Gambar</TITLE>
</HEAD>
<BODY BACKGROUND = "../data/pasir.jpg">
Gambar Komputer terbaru
<IMG SRC = "kucing.gif" ALIGN = "MIDDLE">
</BODY>
</HTML>

PENGGUNAAN TABEL
1. Tag-tag yang digunakan :
<TABLE> untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai.
<CAPTION> menentukan judul tabel
<TR> membuat baris dalam tabel
<TH> membuat judul kolom
<TD> membuat sebuah sel data

<HTML>
<HEAD>
<TITLE>Tabel dengan Garis</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Harga</CAPTION>
<TR><TH>Nama</TH><TH>Harga</TH></TR>
<TR><TD>Mainboard</TD><TD>15.000</TD></TR>
<TR><TD>Procesor</TD><TD>10.000</TD></TR>
<TR><TD>Ram Memory</TD><TD>20.000</TD></TR>
</TABLE>
</BODY>

Penggabungan sel dengan tag <ROWSPAN> dan <COLSPAN>
a. Atribut ROWSPAN ditempatkan pada tag <TD>

<HTML>
<HEAD>
<TITLE>Penggunaan ROWSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Propinsi dan Kota</CAPTION>
<TR>
<TD ROWSPAN = "3">Jawa Timur</TD>
<TD>Surabaya</TD>
</TR>
<TR><TD>Gresik</TD></TR>
<TR><TD>Sidoarjo</TD></TR>
</TABLE>
</BODY>

b. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>

<HTML>
<HEAD>
<TITLE>Penggunaan COLSPAN</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Target</CAPTION>
<TR>
<TH COLSPAN = "2">Area: Jawa Tengah</TH>
</TR>
<TR><TD>klaten</TD><TD>15.000</TD></TR>
<TR><TD>Surakarta</TD><TD>11.000</TD></TR>
</TABLE>
</BODY>

c. Pengaturan jarak dalam tabel :
CELLSPACING mengatur jarak bagian sel thd tepi dalam bingkai tabel.
CELLPADDING mengatur jarak teks terhadap tepi kiri

<HTML>
<HEAD>
<TITLE>Tombol dengan Tabel</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "5" CELLSPACING = "5"
CELLPADDING = "5" BGCOLOR = "green">
<TR><TD>
<FONT COLOR = "red"><B>e-mail</B></FONT>
</TD></TR>
</TABLE>
</BODY>
</HTML>

PEMBUATAN LINK
a. Penggunaan tag <A HREF>

<HTML>
<HEAD>
<TITLE>Halaman Utama</TITLE>
</HEAD>
<BODY>
<H1>Halaman Utama</H1>
Silakan klik pada link-link berikut:<BR>
<A HREF = "halsatu.htm">Halaman X</A><BR>
<A HREF = "https://www.google.com">Homepage
google</A><BR>
<A HREF = "computer.jpg"><IMG SRC = “computer.jpg> Membuat
link dengan gambar </A><BR>
</BODY>
</HTML>

Buatlah file halsatu.htm, sehingga ketika diklik pada Halaman satu akan menuju file yang di tuju

b. Menggunakan bookmark pada suatu halaman web yang panjang.

<HTML>
<HEAD>
<TITLE>Bookmark</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>BUKU</H1>
<B>Daftar Isi:</B><BR>
<A HREF = "#bab1">Bab 1</A><BR>
<A HREF = "#bab2">Bab 2</A><BR>
<HR>
<A NAME = "#bab1">
<H2>BAB 1</H2>
...<BR>
...<BR>
<HR>
<A NAME = "#bab2">
<H2>BAB 2</H2>
...<BR>
...<BR>
<HR>
</CENTER>
</BODY>
</HTML>

Sumber: PENS-ITS

Post a Comment

1 Comments