 |
| 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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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
Tags
html
thanks for the information
ReplyDelete