Dasar HTML: Pengaturan Text Menggunakan HTML

HTML
HTML

Agar halaman net baik secara tampilan, Untuk mendapatkan halaman internet 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...............Five.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 historical past : 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 document halsatu.Htm, sehingga ketika diklik pada Halaman satu akan menuju report 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

0 Response to "Dasar HTML: Pengaturan Text Menggunakan HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel