Scribd
Unggah
8 tayangan19 halaman

Materi HTML Kanisius

Diunggah oleh

aaron adrian
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
8 tayangan19 halaman

Materi HTML Kanisius

Diunggah oleh

aaron adrian
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 19

PENGENALAN HTML

WWW adalah kependekan dari World Wide Web atau lebih dikenal web. Web adalah
layanan yang didapat oleh pemakai komputer apabila komputernya tersambung dengan
internet.

Cara kerja WWW adalah :


• Pertama, informasi yang yang dibuat disimpan dalam sebuah dokumen web pages
pada sebuah tempat penyimpanan yaitu harddisk.
• Dokumen web yang disimpan dalam sebuah harddisk pada sebuah komputer dapat
disebut dengan web server apabila komputer yang dimaksud telah dilengkapi dengan
web server seperti Iis, PWS, atau Aphace Server. Dalam hal ini komputer bertugas
sebagai Server sekaligus menyimpan informasi “Reply” pada komputer Server.
• Komputer yang bertugas sebagai Client atau Web Client membaca informasi yang
terdapat pada web pages melalui sebuah jaringan internet /intranet dengan mengambil
“get” informasi yang tersimpan pada komputer yang bertugas sebagai Server.
• Computer Web Client menampilkan halaman web dengan menggunakan sebuah
program khusus, yaitu web browser.

Browser Web adalah program yang digunakan untuk menampilkan informasi dari suatu
halaman web yang tersimpan dalam komputer. Dengan menerapkan GUI(Grafik User
Interface), maka para pengguna internet dengan mudah mengakses informasi-informasi yang
terdapat di dalam internet.

HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata cara
penulisan yang digunakan dalam dokumen web. Dokumen HTML adalah sebuah sebuah
dokumen teks murni yang dapat dibuat dengan text editor web seperti Frontpage,
Dreamweaver, Notepad, Wordpad, Kwrite, Microsoft Word. Kemudian dieksekusi oleh
sebuah web browser seperti Internet Explorer, Mozila, Opera, Netscape Navigator, Google
Chrome dan lain-lain.

HTML merupakan salah satu standar varian dari SGML (Standar Generalized Markup
Language), yaitu sebuah standarisasi untuk pertukaran dokumen secara elektronik yang telah
ditetapkan oleh international Organization For Standardization(ISO).

Istilah – istilah yang sering digunakan dalam pemrograman web antara lain:
• Internet(International Networking) artinya jaringan komputer berskala
international/globalyang dapat membuat masing2 komputer saling berkomunikasi.
• Intranet merupakan jaringan komputer berskala kecil, hanya memiliki beberapa Web
Server yang diperutukan organisasi atau perusahaan, dan digunakan sebagai sarana
berkomunikasi antara komputer dalam organisasi tersebut.
• TCP/IP(Transmission Control Protokol/Internet Protokol) artinya ptokol yang terdiri
dari sub protokol yang beropersai pada lapisan yang berbeda. Ini merupakan protokol
standar internetProtokol ini memberikan nomor unix pada setiap komputer yang
terkoneksi.
• URL(Uniform Resource Locators)artinya sebuah alamat didalam internet yang terdiri
atas 2 bagian. Bagian pertama adalah pengenal protokol dan bagian kedua adalah
pengenal domain.

Materi HTML, Canisius College hal : 1


• HTTP (Hyper Text Transfer Protocol) artinya protokol yang berfungsi untuk
mendefinisikan dan menjelaskan bagaimana server dan client berinteraksi dalam
mengirim dan menerima dokumen web.
• FTP(File Transfer Protocol) artinya sebuah protokol yang dipergunakan untuk
mengirim berkas diantara dua komputer.

Untuk dokumen yang disimpan dengan menggunakan format HTML, maka setiap dokumen
yang disimpan harus ditambahkan sebuah akhiran .html/.htm. Karena pada dasarnya tiap
dokumen html akan dieksekusi pada sebuah browser yang didalamnya dapat mengenali
extention .htm/.html.

Tag html :

Tag atau elemen terdiri dari dua macam yaitu Container Tag dan Stand Alone Tag. Container
Tag menandai suatu bagian dari dokumen diawal dan diakhir. Sedangkan Stand Alone Tag
tidak memerlukan tanda awal dan akhir.
Secara utuh struktur dokumen dan elemen pendukungnya dapat ditulis sebagai berikut:

<html>
<head>
<title>…..isi dari title…..</title>
</head>
<body>
….. isi /informasi body yang akan
ditampilkan pada browser web…..
</body>
</html>

TAG <BODY>

Tag ini memerintahkan browser untuk menampilkan semua elemen yang berada dalam tag
<body>.
Atributnya:
• Alink=”warna”  warna link(aktif)
• background=”nama_file/url”  berupa image
• bgcolor=”warna” berupa warna
• link=”warna”  warna link(umum)
• text=”nama warna” warna text
• vlink=”nama warna”  warna link(sudah dikunjungi)

TAG UTAMA HTML

Tag dasar html sangat mutlak diperlukan browser untuk mengenali sebuah dokumen html
karena pada dasarnya html merupakan teks murni, artinya dokumen html tidak akan memiliki
keiistimewaan apapun apabila tidak dieksekusi pada sebuah browser. Sedangkan browser
hanya dapat mengeksekusi sebuah dokumen html apabila didalam dokumen tersebut telah
dilengkapai dengan tag-tag dasar html yang meliputi <html>, <head>, <title>, <body>.

Tag utama html adalah tag yang digunakan untuk memanipulasi dokumen html, terdiri dari:

Materi HTML, Canisius College hal : 2


1. Heading
Tag heading adalah tag yang digunakan untuk membuat judul dari isi sebuah
dokumen html. Tag heading memiliki 6 buah bilangan terdiri dari 1, 2, 3, 4, 5, dan 6.
Masing2 bilangan berfungsi untuk mewakili ukuran terbesar(H1) dan terkecil(h6).
Sintaksnya:
<hn[properti]>……………..</Hn>
ket:
n adalah bilangan yang terdiri dari 1 sampai dengan 6.
properti adalah kemampuan tambahan yang dimiliki tag heading.
Properti  align adalah pengaturan letak heading

2. Paragraf
Sintaks:
<p[properti]>…………….</p>
ket:
properti align adalah pengaturan letak paragraf(center, left, right, dan justify).

3. Font
Tag yang digunakan untuk mengatur bentuk dan tampilan suatu huruf dalam
dokumen.Sintaksnya:
<font[properti]>…………….</font>
properti  face adalah bentuk tulisan dan nama huruf
size adalah ukuran huruf
color adalah warna huruf

4. Break line
Tag yang digunakan untuk memotong kalimat didalam dokumen html.
Sintaksnya:
……kalimat……<br>……….kalimat………….<br>

5. Horizontal line
Tag yang digunakan untuk pemisah/garis antar paragraf dalam dokumen html.
Sintaksnya:
<hr[properti]>
ket:
properti  align adalah letak garis(center, left, right dan justify)
size adalah ukuran ketebalan, defaultnya 2.
width adalah lebar garis, satuanya dalam pixels atau persen
color adalah warna garis
noshade adalah efek bayangan (shading)
6. Marquee
Adalah sebuah text berjalan pada dokumen html. Sintaksnya:
<marquee[properti]>………isi/text marquee….</marquee>
Ket :
properti  behavior adalah cara atau teknik dari marquee untuk berjalan(scroll, slide,
dan alternate).
Direction adalah arah teks berjalan(left, right)
Height adalah tinggi marquee nilainya dlm presentase/pixels
Width adalaha lebar marquee nialainya dlm persetase/pixels
Continously adalah pengulang teks secara terus menerus, nilainya adalah
loop sebanyak n kali.

Materi HTML, Canisius College hal : 3


Bgcolor adalah warna background marquee.
Style adalah untuk memformat font, paragraf, border, numbering dan
position.
Scrollamount untuk kecepatan

FORMAT TEXT

Kelompok dalam pemformatan teks pada dokumen html, diantaranya:

1. Format Text
• Cetak Tebal <b>….teks…</b>
• Cetak miring  <I>….teks….</I>
• Cetak Garis bawah  <u>….teks…</u>
• Mengecilkan huruf  <small>….teks…</small>
• Membesarkan huruf  <big>…teks….</big>
• Teks yang ditebalkan(sama dgn <b>) <strong>…..teks…..</strong>
• Penekanan teks(sama dgn <I>)  <emphasis>…teks…</emphasis>
• Mencoret teks  <strike>….teks….</strike>
• Subscript dan superscript  <sub>…teks…</sub> dan <sup>…teks…</sup>
• Penyisipan teks dan penghapusan teks/insert dan delete
Umumnya browser akan mencoret teks yang dihapus dan menggaris bawahi
yang diinsert.
Delete  <del>….teks…</del>
Insert  <ins>….teks…</ins>

LIST HTML

List adalah sebuah uraian yang terdiri atas item-item dari suatu daftar yang dilengkapi
dengan nomor baik nomor alpabetik atau numerik. Dalam dokumen terdapat dua bentuk
daftar atau list, yaitu:

1. Ordered List / List Bernomor


Model dari suatu daftar yang setiap itemnya diberikan nomor. Sintaksnya:
<ol [atribut]>
<li>........isi list...........</li>
<li>........isi list...........</li>
<li>........isi list...........</li>
</ol>
keterangan:
• Tag OL diambil dari nama bentukOrdered List.
• Atribut berisi type atau start / mulai penomoran list.
• Ada empat bentuk type: a, A, i, I.

2. Unordered List / List Tanpa Nomor


Model dari suatu daftar yang setiap itemnya tidak diberikan nomor, akan tetappi
digantikan dengan bulleted list. Sintaksnya:
<ul [atribut]>
<li>........isi list...........</li>
<li>........isi list...........</li>
<li>........isi list...........</li>

Materi HTML, Canisius College hal : 4


</ul>
ket:
• Tag UL diambil dari nama bentukUnordered List.
• Atribut berisi type atau start / mulai penomoran list.
• Ada tiga bentuk type: disc(), square(), circle().

FORMAT FONT

• FORMAT FONT  Format font dalam sebuah dokumen HTML memiliki beberapa
atribut, diantaranya:

 FONT FACE digunakan untuk menampilkan bentuk dari huruf / struktur yang
akan digunakan. Sintaksnya:
<font face=”bentuk huruf yang digunakan..”>…teks…</font>

<FONT FACE="Arial">Ini memakai font arial.</FONT>


<FONT FACE="Arial Black">Ini memakai font arial black.</FONT>
<FONT FACE="Comic Sans MS">Ini memakai font comic sans MS.</FONT>
<FONT FACE="Courier New">Ini memakai font courier new.</FONT>
<FONT FACE="Helvetica">Ini memakai font helvetica.</FONT>
<FONT FACE="Impact">Ini memakai font impact.</FONT>
<FONT FACE="Times New Roman">Ini memakai font times new roman.</FONT>
<FONT FACE="Verdana">Ini memakai font verdana.</FONT>

 FONT COLOR digunakan untuk menampilkan warna dari sebuah huruf atau
karakter yang akan digunakan. Sintaksnya:
<font color=”nama warna/nilai hexadesimal”>..teks..</font>

<FONT COLOR="red">Ini warna merah.</FONT>


<FONT COLOR="blue">Ini warna biru.</FONT>
<FONT COLOR="green">Ini warna hijau.</FONT>
<FONT COLOR="yellow">Ini warna kuning.</FONT>
<FONT>Ini warna hitam (tanpa menulis color, tulisan anda berwarna hitam sebagai
default. </FONT>

catatan:
penggunaan properti warna dapat menggunakan nilai hexadesimal dari warna tersebut.
Misalnya untuk warna hitam / black, maka nilai hexadesimalnya adalah #000000 atau
warna merah/red nilai hexadesimalnya #ff0000.

 FONT SIZE digunakan untuk menampilkan ukuran dari sebuah huruf/karakter


yang akan digunakan. Sintaksnya:
<font size=”nilai numerik”>…teks…</font>

<FONT SIZE="1">Ini ukuran 1.</FONT>


<FONT SIZE="2">Ini ukuran 2.</FONT>
<FONT SIZE="3">Ini ukuran 3.</FONT>
<FONT SIZE="4">Ini ukuran 4.</FONT>
<FONT SIZE="5"> Ini ukuran 5.</FONT>

Materi HTML, Canisius College hal : 5


<FONT SIZE="6"> Ini ukuran 6.</FONT>
<FONT SIZE="7"> Ini ukuran 7. </FONT>

Anda dapat melihat bahwa urutan antara FACE, SIZE, dan COLOR di dalam tag FONT tidak
memiliki aturan baku, dalam arti anda bebas menulis mana duluan. Selain itu anda dapat
menulis dengan huruf besar, seperti "FONT" maupun dengan huruf kecil, seperti "font".
Keduanya akan memberikan hasil yang sama.

<FONT SIZE="4" FACE="Comic Sans MS" COLOR="green"><B> Ini huruf


tebal, memakai font Comic Sans MS, berukuran 4, berwarna hijau.
</B></FONT>

Anda juga dapat mengubah ukuran huruf dengan tag heading, yaitu <H1> sampai <H6>, di
mana <H1> adalah yang terbesar, dan <H6> adalah yang terkecil. Perhatikan contoh berikut:

<H1>Ini menggunakan Heading 1</H1>


<H2>Ini menggunakan Heading 2</H2>
<H3>Ini menggunakan Heading 3</H3>

<H4>Ini menggunakan Heading 4</H4>

<H5>Ini menggunakan Heading 5</H5>

<H6>Ini menggunakan Heading 6</H6>

Dalam memanipulasi tulisan, anda harus mengenal tiga tag berikut:


<CENTER> : Tag ini berfungsi membuat tulisan berada di tengah.</CENTER>
<BR> : Tag ini berfungsi untuk membuat baris baru.
<P> : Tag ini berfungsi untuk membuat paragraf baru.</P>

Tag <P> mempunyai atribut align, seperti <P align="left"> yang membuat paragraf menjadi
rata kiri, <P align="right"> yang membuat paragraf menjadi rata kanan dan <P align =
"center"> membuat paragraf menjadi berada di tengah.

Coba menulis kode berikut menggunakan notepad agar lebih memahami.


<HTML>
<BODY>
<H1>Pemakaian tag</H1>
<P align="right"><FONT COLOR="red"><B> Paragraf ini memberi contoh
penggunaan tag P align="right" yang menyebabkan keseluruhan paragraf
menjadi rata kanan. Penggunaan tag FONT COLOR="red" menyebabkan
seluruh huruf berwarna merah, dan tag B menyebabkan semua menjadi huruf
tebal. </B></FONT></P>

Materi HTML, Canisius College hal : 6


Sedang kalau paragraf ini memberi contoh <BR>
pengunaan tag BR. <BR>
Dapat anda lihat walaupun masih tersisa banyak space di kanan, dengan <BR>
menggunakan <BR>
tag BR tulisan dipaksa membuat baris baru. Tanpa tag BR tulisan akan terus mengalir
membentuk paragraf yang wajar seperti yang sekarang anda baca. Tulisan tanpa tag
BR ini hanya akan membentuk baris baru manakala space sudah habis terisi semua.

<P align="center">Sekarang adalah contoh penggunaan tag P align="center". Tag ini


menyebabkan tulisan menjadi berada di tengah, seperti dapat anda lihat sekarang.
Juga anda mungkin dapat merasakan perbedaan antara tag P dengan tag BR. Kalau tag
BR hanya menyebabkan pindah ke baris baru, tag P menyebabkan lompat membentuk
paragraf baru. </P>

</BODY>
</HTML>

FRAME HTML
Adalah layout sebuah HTML untuk menampilkan beberapa halaman web secara bersamaan
dan ditampilkan dalam sebuah window browser. Berdasarkan fungsinya, frame terbagi atas:

1. Frame Kolom
adalah Frame yang menampilkan informasi dalam sebuah web browser dalam bentuk
kolom. Misalnya kita akan membuat tiga buah frame kolom dengan ukuran masing-
masing frame adalah 30, 40, dan 30 (dilustrasikan 1 browser web memiliki ukuran
total adalah 100). Kita akan membuat 4 buah halaman web, dengan komposisi 1
halaman web dan 3 halaman pendukung.

Sintaksnya: (halaman utama)

<frameset cols=”#,#,...”>
<frame name=”namaframe” src=”lokasi web”>
...................
</frameset>
contohnya:
<html>
<head>
<title>
contoh frame kolom</title>
</head>
<frameset cols="30,40,30">
<frame name="left" src="kolom1.htm">
<frame name="center" src="kolom2.htm">
<frame name="right" src="kolom3.htm">
</frameset>
</html>

Materi HTML, Canisius College hal : 7


2. Frame Baris
adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk
baris.

Sintaksnya: (halaman utama)

<html>
<head>
<title>
contoh frame baris</title>
</head>
<frameset rows="30,50,20">

<frame name="left" src="kolom1.htm">


<frame name="center" src="kolom2.htm">
<frame name="right" src="kolom3.htm">
</frameset>
</html>

3. Frame Campuran
adalah frame yang menampilkan informasi dalam sebuah web browser dalam bentuk
baris dan kolom.

Sintaksnya: (halaman utama)

4. Frame Navigasi

5. Frame Inline

FORMAT IMAGE
Image atau gambar adalah semua jenis file yang disusun dari pixels. Yang berfungsi untuk
menambah daya tarik dari sebuah halaman web. Pada umumnya yang ditampilkan
mempunyai format gambar GIF(Graphics Interchange Format) dan JPEG(Joint Photographics
Experts Group).

Fungsi pengolahan gambar terdiri atas:

1. Image Alignment/Perataan Teks Pada Gambar


Perataan teks pada gambar terdiri dari dua bagian yaitu Horisontal(left/center/right) dan
Vertikal(Top/Middle/Bottom). Sintaksnya:
<img src=”Gambar/Sumber Data Gambar” align=”left/center/right”>
<img src=”Gambar/Sumber Data Gambar” align=”top/middle/bottom”>

2. Image Adjustment/Ukuran Gambar


Digunakan untuk mengatur lebar dan tinggi dari sebuah gambar dalam sebuah halaman
web. Sintaksnya:

Materi HTML, Canisius College hal : 8


<img border=”ukuran/angka” src=”Gambar/Sumber Data Gambar” width=”angka”
height=”angka”>

3. Image Alternate/Teks Gambar


Digunakan untuk menampilkan teks pada saat kursor mouse berada diatas gambar.
Sintaksnya:
<img srcr=”Gambar/Sumber Data Gambar” width=”angka” height=”angka” alt=”…..isi
teks……”>

4. Image Link/Link Gambar


Digunakan untuk mengaitkan gambar dengan halaman tertentu didalam sebuah halaman
web. Sintaksnya:
<p align=”left/center/right”><a href=”nama_file.html”><img src=”Gambar/Sumber Data
Gambar” width=”angka” height=”angka”></p></a>

5. Image Map/Pemetaan Gambar


Digunakan satu untuk memasang beberapa link dalam satu gambar. Hal tersebut akan
memudahkan kita memanggil sebuah halaman web dengan hanya menempatkan
sekelompok gambar menjadi satu gambar.
Sintaksnya:
<map>
<img scr=”Gambar/Sumber Data Gambar” usemap=”#nama_map”>
<map name=”nama_map”>
<area shape=”default/rect/cicr/poly” coords=”keterangan” href=”link” alt=
”ket_link”>
</map>

Keterangan:
• Apabila shape=”default”, digunakan untuk menyatakan kemana link akan pergi, jika
link khusus tidak didefinisikan didalam area. Coords tidak digunakan.
• Apabila shape=”rect” maka coord=”x, y, w, z” dimana x, y adalah titik koordinat kiri
atas dan w, z adalah koordinat kanan bawah area link.
• Apabila shape=”circ” maka coord =”x, y, w” dimana x, y adalah titik koordinat pusat
lingkaran dan w adalah radius llingkarannya.
• Apabila shape=”poly” maka coords =”w, z, w, z…” dimana w, z adalah koordinat
setiap titik poligon.

LINK HTML
Link adalah fasilitas dimana dapat berpindah tempat dari halamn satu ke halaman lain yang
ditandai dengan menggarisbawahi teks yang akan dilink, atau pointer mouse
akan berubah menjadi bentuk jari apabila berada pada objek link (gambar/teks)
yang diikuti dengan tersorotnya objek link (gambar/teks) .

Hyperlink dalam sebuah dokumen HTML menggunakan tag Anchor<a> dan diakhiri dengan
</a>.

Sintaksnya:
<a href=”nama_dokumen yang dilink” [atribut]>……..teks/gambar,,,,,,</a>

Dalam dokumen HTML hyperlink secara garis besar dibagi menjadi 3, yang terdiri dari:

Materi HTML, Canisius College hal : 9


1. Link Absolut
adalah link yang digunakan untuk mengaitkan halaman web yang sate dengan
halaman web yang lainnya di dalam situs internet. Contoh
<a href=http://www.ikmi.ac.id>Pusat Pengolahan Data Akademik</a>

2. Link Relatif
adalah link yang digunakan untuk mengaitkan halaman web yang satu dengan
halaman web yang lainnya didalam satu situs internet seperti pada link absolut.
Contoh:
<a href =“Contoh Latihan_link”>Ke latihan_link</a>

3. Link Self
adalah link yang digunakan untuk mengaitkan bagian yang satu dengan yang lainnya
di dalam satu halaman web. Contoh:
<a href=”#bab1”>Lihat bab1</a>

TABLE/TABEL
• Tabel adalah sebuah sarana untuk menginformasikan data berupa baris dan kolom.
• Sebuah tabel dimulai dengan tag <TABLE> dan diakhiri dengan </TABLE>.
• Setiap baris tabel dibentuk dengan tag <TR>……….</TR>, dan setiap kolom tabel
dibentuk dengan tag <TD>…….</TD>.

• Tiap kotak dalam tabel disebut cell. <TH> berfungsi untuk membuat header dari tabel.

• Atribut BORDER pada tag <TABLE> akan membentuk border di sekeliling tabel.
Default atribut adalah BORDER=0 yang berarti tidak menggunakan border. Tabel dengan
border dimatikan bisa dimanfaatkan untuk me-layout halaman dengan banyak gambar.

• Selain border, berikut adalah atribut lain yang dapat dipakai dalam <TABLE>, yaitu:
 Bordercolor=”kode_warna”  mengatur warna border, jika border digunakan.
 Align=”left|center|right”  mengatur posisi tabel di layar.
 Cellpadding=”angka”  mengatur jarak antara border dengan isi sel (vertikal dan
horizontal) dalam satuan pixel.
 Cellspacing=”angka”  mengatur tebal frame dalam satuan pixel.
 Width=”angka”  mengatur lebar tabel dalam satuan pixel atau persen.

• Sedangkan berikut ini adalah beberapa atribut dalam tag <TD> yang sering digunakan:
 Bgcolor=”kode_warna”  mengatur warna latar belakang cell.
 Background=”gambar.gif”  menggunakan gambar sekaligus sebagai latar
belakang cell.
 Align=”left|right|center”  mengatur perataan isi cell (teks, gambar, dan lain-lain)
secara horizontal.
 Valign=”top|bottom|middle”  mengatur perataan isi cell (teks, gambar, dan lain-
lain) secara vertikal.
 Colspan=”angka”  untuk menggabung cell kosong.
 Width=”angka”  mengatur lebar cell dalam satuan pixel atau persen.

Catatan:

Materi HTML, Canisius College hal : 10


Anda dapat mengganti kode <td>....</td> dengan <th>....</th> agar teks di dalam
cell dicetak dengan huruf tebal. Ini akan menghemat beberapa byte ukuran file
karena Anda tidak perlu menggunakan tag <b>.....</b> lagi untuk membuat huruf
tebal dalam sebuah cell.

Contoh dokumen HTML membuat Tabel Colspan

<html>
<head>
<title>Tabel</title>
</head>
<body>
<center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br>
<table align="center" border="5" cellspacing="2" cellpadding="5" width=50% height=50% >
<tr>
</tr>
<th colspan="3" align="center">baris1, kolom1</th>
<tr>
<td>baris2, kolom1</td>
<td>baris2, kolom2</td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris3, kolom1</td>
<td>baris3, kolom2</td>
<td>baris3, kolom3</td>
</tr>
</table>
</body>
</html>

Contoh Dokumen HTML membuat Tabel Rowspan

<html>
<head>
<title>Tabel</title>
</head>
<body>
<center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br>
<table align="center" border="5" cellspacing="5" cellpadding="5" width=50% height=50% >
<tr>
<td rowspan="3" align="center">baris1, kolom1</td>
<td>baris1, kolom2</td>
<td>baris1, kolom3</td>
</tr>
<tr>
<td>baris2, kolom2</td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris3, kolom2</td>

Materi HTML, Canisius College hal : 11


<td>baris3, kolom3</td>
</tr>
</table>
</body>
</html>

Contoh Dokumen HTML membuat Tabel terdapat Gambar

<html>
<head>
<title>Tabel</title>
</head>
<body>
<center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br>
<table align="center" border="5" cellspacing="5" cellpadding="5" width=50% height=50% >
<tr>
<td>baris2, kolom1</td>
<td rowspan="3" align="center"><img src="C:\My
Documents\web\jeannedanc.gif"></img></td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris2, kolom1</td>
<td>baris2, kolom3</td>
</tr>
<tr>
<td>baris2, kolom1</td>
<td>baris3, kolom3</td>
</tr>
</table>
</body>
</html>

Contoh Dokumen HTML Membuat Tabel

<html>
<head>
<title>Tabel</title>
</head>
<body>
<center>MEMBUAT TABEL DENGAN TIGA BARIS DAN TIGA KOLOM</center><br>
<table align="center" border="1" width=50% height=50% >
<tr>
<th>baris1, kolom1</th>
<td>baris1, kolom2</td>
<th>baris1, kolom3</th>
</tr>
<tr>
<td>baris2, kolom1</td>
<td>baris2, kolom2</td>
<td>baris2, kolom3</td>

Materi HTML, Canisius College hal : 12


</tr>
<tr>
<td>baris3, kolom1</td>
<td>baris3, kolom2</td>
<td>baris3, kolom3</td>
</tr>
</table>
</body>
</html>

PENGATURAN BORDER
Border adalah garis yang mengelillingi sebuah tabel. Sintaksnya:
<table border=”angka”>
................
</table>

CELLPADDING DAN CELLSPACING


Cellpading digunakan untuk mengatur jarak antara tepi tabel dengan isi sel baik vertikal
maupun horisontal dalam satuan pixel.
Cellspasing digunkanan untuk mengatur tebal frame dalam satuan pixel. Sintaksnya:

<table border=”angka” cellpadding=”angka” cellspasing=”angka”>


..........................
</table>

COLSPAN DAN ROWSPAN


Colspan digunakan untuk menggabungkan beberapa kolom menjadi satu kolom atau satu sel
kolom.
Rowspan digunakan untuk menggabungkan beberapa baris menjaadi satu baris atau satu sel
baris.

Sintaksnya:
<th rowspan/colspan=”jumlah kolom/baris”> atau
<td rowspan/colspan=”jumlah kolom/baris”>
...........................
</th> atau
</td>

PERATAAN ISI SEL, BACKGROUND ISI SEL, DAN BACKGROUND TABEL


Digunakan apabila menginginkan isi sel yang ditampilkan tertata rapi dan menarik.
Sintaksnya:
<th align=”left/center/right” bgcolor=”warna”> atau
<td align=”left/center/right” bgcolor=”warna”>
....................
</th> atau
</td>
sedangkan untuk tabel, sintaksnya:
<table border=”angka” bgcolor=”warna”>
....................
</table>

Materi HTML, Canisius College hal : 13


FORM
Adalah Input/masukkan dari pengguna yang kemudian diproses untuk mendapatkan hasil
yang diinginkan pengguna, proses penyimpanan, proses sunting atau edit, proses hapus dan
browse.

Sintaksnya:

<Form Name=”Nama_Form” Methode=”Post/Get” action=”URL”>


.....
</Form>

Keterangan:
1. Nama Form adalah nama form yang sedang digunakan.
2. Methode adalah metode yang digunakan dalam penyimpanan ke dalam server.
3. Action adalah alamat yang digunakan untuk pemrosesan input form di dalam server.
Form memiliki kontrol form yang digunakan untuk mengklasifikasikan input/masukkan dari
pengguna. Kontrol Form terdiri dari :

1. Kontrol Text digunakan untuk memberikan input atau masukkan berupa kotak isian.

Sintaksnya :
<Input Type=”Text” [Properti]>
Ket properti:
- Name : Nama dari kontrol text
- Size : Ukuran dari kontrol text
- Value : Text yang tertulis pada kontrol text
- Maxlength : Panjang maximal karakter yang diijinkan
- Style : Pengaturan Style dalam kontrol text, nilainya bisa berupa font,
paragraf, numbering, border, position.
- Dir : Pengaturan arah text dari kontrol text, seperti rlt(right to left)/kanan
ke kiri dan kebalikannya yaitu ltr(left to right).

Contoh :
....
<body>
<form>
<input type=”text” name=”text1” size=”40” maxlength=”50” style=”font-family:Comic
San Ms; Font-size=12; text-align=left”><br>
</form>
</body>
....

2. Kontrol Password adalah sebuah kontrol html yang penggunaanya mirip dengan kontrol
text akan tampil dengan text biasa, sedangkan kontrol password akan ditampilkan dengan
tanda asteris(*).

Sintaksnya :
<Input Type=”Password” [Properti]>

ket properti:

Materi HTML, Canisius College hal : 14


– Name
– Size
– Value
– Maxlength
– Style
– Dir

Contoh:
....
<body>
<form>
<input type=”Password” name=”pass” size=”40” maxlength=”50” style=”font-
family:Comic San Ms; Font-size=12; text-align=left”><br>
</form>
</body>
....

3. Kontrol Radio digunakan untuk menampilkan salah satu pilihan dari satu kumpulan/grup
pilihan.

Sintaksnya :
<Input Type=”Radio” [Properti]>

Ket properti:
- Name
- Value
- Checked adalah Kontrol radio yang menjadi pilihan
- Default adalah Kontrol radio yang terpilih secara default.

Contoh :
....
<body>
<form>
<font face=”Comic San Ms”>
Jenis Kelamin Anda :<br>
<input type=”Radio” name=”OptJenis” Value=”Pria” checked>Pria<br>
<input type=”Radio” name=”OptJenis” Value=”Wanita” >Wanita<br>
</form>
....

4. Kontrol CheckBox digunakan untuk memilih beberapa pilihan dari pilihan yang tersedia.
Pengunaanya sama dengan dengan kontrol radio, perbedaanya terletak pada pilihan yang
dimungkinkan lebih dari satu.

Sintaksnya :
<Input Type=”CheckBox” [Properti]>

Ket properti:
- Name
- Value
- Checked

Materi HTML, Canisius College hal : 15


- Default

Contoh:
....
<body>
<form>
<font face=”Comic San Ms”>
Hobby Anda Adalah :<br>
<input type=”CheckBox” name=”C1” Value=”ON” >Olah Raga<br>
<input type=”CheckBox” name=”C2” Value=”ON” >Musik<br>
</form>
</body>
....

5. Kontrol Select digunakan untuk membuat sebuah daftar pilihan.

Sintaksnya:
<select [properti]>
...<option> item 1
...<option> item2
....
....
</select>

Ket properti:
- name
- value
- selected adlah item yang dipilih
- Size adalah banyaknya item yang ditampilkan pada layar monitor(defaultnya 1).
- Multiple adalah Tampilan dari drop down box, seperti tombol spinner.
- Dir

Contoh :
....
<body>
<form>
<font face=”Comic San Ms”>
Agama Yang Ada Di Indonesia Adalah :<br>
<Select size=”1” name=”CBOAgama” >
<option selected value=”Islam”>Islam</option>
<option value=”Kristen”>Kristen</option>
<option value=”Katolik”>Katolik</option>
<option value=”Hindu”>Hindu</option>
<option value=”Budha”>Budha</option>
<option value=”Keyakinan”>Keyakinan</option>
</select></font></p>
</form>
</body>
.....

Materi HTML, Canisius College hal : 16


6. Kontrol Text Area merupakan kontrol text yang dapat menliskan text lebih banyak
karena memiliki ruang/kapasitas lebih besar dibandingkan dengan kontrol text.
Sintaksnya:
<TextArea [properti]>
....Isi text area....
</textarea>

Ket Properti:
- Name
- Value
- Cols adalah jumlah kolom dari kontrol text area
- Rows adalah jumlah baris dari kontrol text area
- Maxlength
- Dir

Contoh :
...
<body>
<form
<font face=”Comic San MS”> Komentar Anda :
<textarea rows=”4” name=”Area1” cols=”40”></text area></font>
</form>
</body>
...

7. Kontrol Button digunakan untuk mengontrol suatu aksi atau menjalankan sebuah
prosedur / event. Ada tiga tipe yang termasuk dalam kontrol button, yaitu Button, Submit,
Reset. Button digunakan untuk mengontrol atau menjalankan suatu prosedur atau event
dari VBScript. Submit digunakan utnuk mengirim data-data ke server (lebih banyak
berhubungan dengan pemrogramman yang berbasis Server Side seperti ASP), Sedangkan
Reset digunakan untuk meghapus data-data yang ada pada suatu form.
Sintaksnya:
<Input Type=”Button” [properti]>
<Input Type=”Submit” [properti]>
<Input Type=”Reset” [properti]>

Ket properti:
- Name
- Value
- Dir

8. Kontrol Image digunakan untuk mengolah /mengelola gambar.

Sintaksnya:
<Input Type=”Image” [properti]>

Ket properti:
- Align : meratakan teks di sekeliling gambar
- Alt : teks yang muncul jika tombol mouse berada diarea gambar
- Border : Batas tepi dari kontrol image

Materi HTML, Canisius College hal : 17


- Heigth : Ketinggian dari gambar
- Hspace : Pengatran batas(margin) horisontal gambar
- Ismap : Penentuan gambar sebagai imagemap
- Lowsrc : Pengaturan gambar dengan resolusi rendah
- Name
- Src
- Usemap :Penentuan gambar sebagai imagemap
- Vspace : Pengaturan batas(margin) vertikal gambar
- Width : Lebar dari gambar

Contoh:
<html>
<head>
<title>Buku Tulis</title>
</head>
<body text="white">
<form method="POST" action="Simpan.ASP">
<table cellpadding="10" cellspacing="1" width="100%" height="100">
<tr>
<td width="100%" colspan="2" align="center" heigth="48" bgcolor="red">
<font face="Microsoft San Serif" size="6" color="white">Buku Tamu</font></td>
</tr>

<tr>
<td width="23%" heigth="19" bgcolor="blue">Password</td>
<td width="77%" heigth="19" bgcolor="blue">
<input type="password" name="passwd" size="40">
</td>
</tr>

<tr>
<td width="23%" heigth="19" bgcolor="blue">Nama lengkap</td>
<td width="77%" heigth="19" bgcolor="blue">
<input type="text" name="textnama" size="40">
</td>
</tr>
<td width="23%" height="19" bgcolor="blue">Jenis Kelamin</td>
<td width="77%" heigth="19" bgcolor="blue">
<input type="radio" value="Pria" checked name="OptJenis">Pria
<input type="radio" value="Wanita" name="OptJenis">Wanita
</td>
</tr>

<tr>
<td width="23%" height="19" bgcolor="blue">Agama</td>
<td width="77%" height="19" bgcolor="blue">
<select size="1" name="cboagama">
<option selected value="Islam">Islam</option>
<option value="Katolik">Katolik</option>
<option value="Kristen">Kristen</option>
<option value="Hindu">Hindu</option>

Materi HTML, Canisius College hal : 18


<option value="Budha">Budha</option>
<option value="Keyakinan">Keyakinan</option>
</select></td>
</tr>

<tr>
<td width="23%" height="19" bgcolor="blue">Hobby</td>
<td width="33%" height="19" bgcolor="blue">
<input type="checkbox" name="c1" value="ON">Sport
<input type="checkbox" name="c2" value="ON">Nonton</td>
</tr>

<tr>
<td width="23%" height="19" bgcolor="blue"></td>
<td width="77%" height="19" bgcolor="blue">
<input type="checkbox" name="c3" value="ON">Musik
<input type="checkbox" name="c4" value="ON">Panjat Tebing</td>
</tr>

<tr>
<td width="23%" height="16" bgcolor="blue">Komentar</td>
<td width="77%" height="16" bgcolor="blue">
<textarea rows="6" name="S1" cols="60"></textarea></td>
</tr>
<tr>
<td width="100" heigth="51" bgcolor="blue" colspan="2">
<p align="center">
<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2">
</td>

</tr>
</table>
</form>
</body>
</html>

Materi HTML, Canisius College hal : 19

Anda mungkin juga menyukai