Arsip untuk ‘Aplikasi IT’ Kategori

HTML 05

Terkirim Januari 13, 2009
Filed under: Aplikasi IT |

10.1 Form

Form adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif , karena akan mendaptakan umpan balik dari pengunjung situs web. Form dapat digunakan untuk membuat buku tamu, formulir pemesanan, survey, meminta komentar dan lain sebagianya.

Gambar 10.1 Contoh Form

Adapun cara untuk membuat form adalah dengan menggunakan elemen FORM kemudian ditambah dengan komponen-komponen pembentuk form seperti input, checkbox, option dan sebagainya.

Perintah untuk membuat form yaitu :

<INPUT>

</FORM>

Method digunakan untuk menentukan bagaimana form diberlakukan, sedang action sering diisi dengan URL tempat pemrosesan form selankjutnya.

10.2 Elemen-elemen pada Form

Bagian berikut menerangkan elemen-elemen yang dapat ditempatkan dalam suatu form :

Elemen	Atribut	fungsi
INPUTTop of FormBottom of Form	TYPE	Bentuk masukan. Diisi dengan TEXT atau PASSWORD
NAME	Nama komponen input
VALUE	Isi/nilai dari komponen input
SIZE	Panjang komponen input
MAXLENGTH	Batasan panjang penulisan isi input
INPUTTop of FormBottom of Form	TYPE	Bentuk masukan RADIO
NAME	Nama komponen input radio
VALUE	Pemberian nilai pada radio
CHEKED	Memilih salah satu radio
INPUTTop of FormBottom of Form	TYPE	Bentuk masukan CHECKBOX
NAME	Nama komponen input checkbox
VALUE	Pemberian nilai pada checkbox
CHEKED	Memilih checkbox
SELECTTop of FormBottom of Form	NAME	Nama komponen select /pull down list
OPTION	Pilihan dalam list
VALUE	Isi pada list
SELECTED	Option yang dipilih
SIZE	Ukuran list
TEXTAREATop of FormBottom of Form	TYPE	Bentuk komponen TEXTAREA
NAME	Nama komponen textarea
ROWS	Jumlah baris pada textarea
COLS	Jumlah kolom pada textarea
INPUT	TYPE	Bentuk masukan tombol. Diisi dengan SUBMIT atau RESET
VALUE	Judul pada tombol

Contoh pembuatan form

<HTML>

<HEAD>

<TITLE>Contoh Membuat Form</TITLE></HEAD>

<BODY>

<H1 ALIGN=”CENTER”>FORM PENDAFTARAN ONLINE</H1>

<TABLE>

<TR>

</TR>

<TR>

<TD><B>Alamat :</B></TD>

</TR>

<TR>

<TD><B>Agama :</B></TD>

<OPTION>Islam</OPTION>

<OPTION>Kristen</OPTION>

<OPTION>Budha</OPTION>

<OPTION>Hindu</OPTION>

</SELECT> </TD>

</TR>

<TR>

<TD><B>Password :</B></TD>

</TR>

</TABLE>

<B>Jenis kelamin: </B><INPUT CHECKED TYPE=”Radio” NAME=”Kelamin” VALUE=”Pria”>Pria

<INPUT TYPE=”Radio” NAME=”Kelamin” VALUE=”Wanita”>Wanita

<BR>

<INPUT TYPE=”Checkbox” NAME=”Kelamin” VALUE=”Soccer”>Sepakbola

<INPUT CHECKED TYPE=”Checkbox” NAME=”Hobi” VALUE=”Badminton”>Bulutangkis

<INPUT TYPE=”Checkbox” NAME=”Hobi” VALUE=”Computer”>Komputer <BR>

<INPUT TYPE=”Checkbox” NAME=”Hobi” VALUE=”Game”>Permainan video

<INPUT CHECKED TYPE=”Checkbox” NAME=”Hobi” VALUE=”Internet”>Internet

<BR>

<B>Komentar</B><BR>

</FORM>

</BODY>

</HTML>

Hasil pembuatan form dapat dilihat sebagai berikut :

10.2 Form Pendaftaran

Baca selebihnya »

HTML 06

Terkirim Januari 13, 2009
Filed under: Aplikasi IT |

Tinggalkan sebuah Komentar

11.1 Frame Frame digunakan untuk membagi suatu halaman web menjadi beberapa bagian. Beberapa bagian tersebut dapat digunakan untuk berbagai keperluan. clip_image002 Gambar 11.1 Penggunaan Frame Adapun cara untuk membuat frame pada halaman web adalah dengan menggunakan perintah :

diabaikan jika browser mampu menampilkan frame11.2 Atribut-atribut Frame Bagian berikut menerangkan atribut-atribut yang dapat ditambahkan pada elemen frame : Atribut fungsi ROWS Menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapat berupa pixel, % setelah nilai atau nilai relatif (*) COLS Fungsi sama sepert ROWS hanya digunakan untuk kolom. NAME Menentukan nama frame sehingga dapat berfungsi sebagai TARGET dari URL lain SRC Berisi URL yang menjadi sumber dari frame MARGINWIDTH Untuk menentukan margin frame bagian kanan dan kiri MARGINHEIGHT Menetukan margin frame bagian atas dan bawah. SROLLING Menentukan scrollbar pada frame Diisi dengan YES selalu menampilkan scrollbar, NO tidak menapilkan srollbar BORDER Mengubah ketebalan pembatas frame BORDERCOLOR Memberikan warna pada pembatas frame FRAMEBORDER Pembatas frame. Dapat dihilangkan dengan memberi nilai NO NORESIZE Mencegah pengguna untuk mengubah ukuran dari frame Untuk membuat halaman web yang memiliki frame biasanya akan dibuat satu halaman web utama yang memiliki frame ditambah dengan file-file HTML lainnya yang digunakan sebagai sumber untuk frame tersebut. Berikut akan diberikan contoh penggunaan frame pada suatu halaman web. (Satu.html)

Halaman Satu dari File Satu.Html

(Dua.html)

Halaman Dua dari File Dua.Html

(Tiga.html)

Halaman tiga dari File tiga.Html

File dengan framerows :

maaf hanya bisa tampil pada web yang mendukung frameFile dengan framecols

maaf hanya bisa tampil pada web yang mendukung frameContoh gabungan dari framecols dan framerows

maaf hanya bisa tampil pada web yang mendukung frameclip_image004 Gambar 11.2 Halaman Web dengan Tiga Frame Sebagai tambahan, file-file sumber dapat dibuat hyperlink ke file-file lain dengan mengarah ke salah frame yang ada di halaman web tersebut. Berikut akan diberikan contoh file yang membuat target ke salah satu frame. (judul.html)

Mas Awonk’S Web

(home.html) Membuat Frame- Home

Halaman Utama.

Selamat datang di homepage saya! Homepage ini pasti menarik dan mudah diikuti karena guru saya, selain SANGAT menarik dan menyenangkan, telah mengajarkan cara yang benar dalam membuat Frame!

Selamat menikmati!(Daftar.html) Membuat Frame- Daftar

—Daftar—

Home

Ke File-1
atau ke File-2

atau kunjungi
UNIKOM WESITE
Web Tutorial (Master.html) maaf hanya bisa tampil pada web yang mendukung frame clip_image006 Gambar 11.3 Hasil Akhir Halaman web dengan Frame

HTML 04

Terkirim Januari 13, 2009
Filed under: Aplikasi IT |

Tinggalkan sebuah Komentar

9.1 Pemanfaatan Tabel

Tabel biasanya digunakan untuk menempatkan data secara spreadset, tapi untuk desain suatu web, selain untuk menempatkan data, tabel digunakan untuk merapikan teks, ataupun gambar.

Dengan menggunakan tabel, teks ataupun gambar dapat disusun menjadi lebih rapi. Tampilan halaman web akan menjadi lebih baik, apabila dasar/kerangkanya menggunakan tabel.

Gambar 9.1 Penggunaan Tabel Pada Halaman Web

(www.tutorial.or.id\tabel\contoh\)

9.2 Tag Pembuatan Tabel

Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah :

Elemen	Kegunaan
TABLE	Tag utama. Digunakan untuk memberitahu browser “ini adalah tabel”, bersama dengan beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi. Tag <TABLE>..<TABLE>
TR	Baris Tabel, yaitu baris-baris pada suatu tabel, yang dinyatakan dalam pasangan tag <TR>..</TR>
TD	Data tabel, yaitu tempat dimana informasi/data dimasukkan dalam tabel. tabel data adalah colom dari suatu baris tabel. tabel data dinyatakan dengan tag <TD>..<TD>
TH	Judul tabel, biasnya terletak di bagian paling atas atau paling kiri dari suatu tabel. Tabel header yang terletak di bagian atas adalah judul kolom tabel, sedang tabel header yan terletak di bagian kiri adalah judul baris tabel. Tag yang digunakan adalah <TH>…</TH>
CAPTION	Judul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel. tag <CAPTION>..</CAPTION>

Selain elemen-elemen diatas, tabel juga mempunyai bermacam-macam atribut yang dapat mempercantik bentuk tabel tersebut, seperti atribut-atribut :

Atribut	Nilai	Keterangan
Border	Angka 0, 1 dst	Digunakan untuk menentukan tebal garis batas tepi tabel
Cellspacing	Angka 1,2,3 dst	Digunakan untuk menentukan jumlah spasi/celah diantara tiap-tiap sel
Cellpadding	Angka 1,2,3 dst	Digunakan untuk menentukan jumlah spasi antara data dalam suatu sel
width	Pixel / persentase	Digunakan untuk mengatur lebar tabel, dapat menggunakan ukuran piksel atau persentasi %
Align	Left, center.right	Digunakan untuk perataan tabel secara horizontal
Valign	Middle, bottom, baseline	Digunakan untuk perataan tabel secara vertikal
bgcolor	Warna/bil.hexadesimal	Warna latar dari tabel atau pada sel
Rowspan	Angka 1,2,3 dst	Menggabungkan beberapa baris tabel
Colspan	Angka 1,2,3 dst	Menggabungkan beberapa kolom tabel

9.3 Tabel Sederhana

Untuk membuat suatu tabel minimal diperlukan tiga elemen tabel. Tag TABLE digunakan sebagai awal pembuatan tabel, tag TR digunakan untuk mendifinisikan berapa banyak baris pada tabel, dan tag TD digunakan untuk menampung sel data dari tabel tersebut.

<table>

<tr>

<td>Tabel sederhana Tanpa border</td>

</tr>

</table>

Untuk membuat garis batas, dapat ditambahkan dengan atribut border seperti berikut :

<tr>

<td>Tabel sederhana dengan menggunakan border.</td>

</tr>

</table>

Lebar dari border dapat diatur dengan memberikan nilai pada atribut tersebut

<tr>

<td>Tabel sederhana dengan menggunakan border=6.</td>

</tr>

</table>

Gambar 9.2 Tabel dengan Border

9.4 Tabel Dua Dimensi

Tabel biasanya tidak hanya terdiri dari dari 1 dimensi atau 1 kolom saja , tapi bisa 2, 3 atau sesuai dengan kebutuhan kita. Contoh berikut adalah pengembangan dari tabel diatas dengan dengan menambahkan 2 kolom lagi didalamnya.

<tr>

<td>Tabel Kolom Pertama </td>

<td>Tabel Kolom Kedua </td>

<td>Tabel Kolom ketiga </td>

</tr>

</table>

Untuk membuat tabel dua dimensi, dibutuhkan elemen TR sebanyak 2 kemudian kolom tabel disusaikan dengan data yang akan diisikan.

<tr>

<td>Baris 1 Kolom 1 </td>

<td>Baris 1 Kolom 2 </td>

<td>Baris 1 Kolom 3 </td>

</tr>

<tr>

<td>Baris 2 Kolom 1 </td>

<td>Baris 2 Kolom 2 </td>

<td>Baris 2 Kolom 3 </td>

</tr>

</table>

Gambar 9.3 Tabel dua dimensi

9.5 Judul Tabel

Suatu tabel biasanya memiliki judul. Judul pada tabel dibedakan menjadi tiga macam yaitu, judul tabel itu sendiri, judul kolom tabel, dan judul baris tabel.

Untuk membuat judul diluar tabel, tag yang digunakan adalah CAPTION, sedang untuk membuat judul kolom atau baris pada tabel menggunakan tag TH. Bagian yang merupakan judul tabel akan ditebalkan penulisannya.

<caption><b>Judul Tabel dengan Caption</b></caption>

<tr>

<td>Baris 1 Kolom 1 </td>

<td>Baris 1 Kolom 2 </td>

<td>Baris 1 Kolom 3 </td>

</tr>

<tr>

<td>Baris 2 Kolom 1 </td>

<td>Baris 2 Kolom 2 </td>

<td>Baris 2 Kolom 3 </td>

</tr>

</table>

<br>

<caption><b>Judul Tabel dengan Tabel Header</b></caption>

<tr>

<th>Baris 1 Kolom 1 </th>

<th>Baris 1 Kolom 2 </th>

<th>Baris 1 Kolom 3 </th>

</tr>

<tr>

<th>Baris 2 Kolom 1 </th>

<td>Baris 2 Kolom 2 </td>

<td>Baris 2 Kolom 3 </td>

</tr>

</table>

Gambar 9.4 Tabel dengan Judul Tabel

9.6 Sel Kosong

tabel yang memiliki judul kolom dan judul baris biasanya memiliki suatu sel kosong pada bagian kiri atasnya. Untuk membuatnya, cukup dengan mendefinisikan sel tersebut dengan elemen TD atau TH tanpa diisi dengan data apapun.

<table border=5><caption><b>Jadwal DokterJaga</b> </caption>

<tr>

<th>Senin</th>

<th>Selasa</th>

</tr>

<tr>

<td>Dr Santi </td>

<td>Dr Irawan </td>

</tr>

<tr>

<th>Siang </th>

<td>Dr Andri </td>

</tr>

<tr>

<th>Malam </th>

</tr>

</table>

<table border=5><caption><b>Jadwal DokterJaga</b> </caption>

<tr>

<th>Senin</th>

<th>Selasa</th>

</tr>

<tr>

<td>Dr Santi </td>

<td>Dr Irawan </td>

</tr>

<tr>

<th>Siang </th>

<td>Dr Andri </td>

</tr>

<tr>

<th>Malam </th>

</tr>

</table>

Pada kode yang pertama, sel yang dikosongkan tampak tidak terlihat. Untuk memunculkan sel tersebut, diberikan perintah BR untuk memunculkan sel tersebut.

Gambar 9.5 Tabel dengan sel kosong

9.7 Perataan Tabel

Tabel dapat diratakan baik secara horizontal maupun secara vertikal. Seperti diketahui perataan horizontal mempunyai orientasi ke kiri, kanan dan tengah. Sedang perataan vertikal orientasinya ke atas, bawah dan tengah.

Atribut	Elemen	Value
ALIGN	CAPTION	top,bottom
TH, TR, TD	left, right, center

Atribut	Elemen	Value
VALIGN	TH, TR, TD	top, middle, bottom, baseline

Berikut adalah contoh perataan tabel dengan menggunakan perintah ALIGN dan VALIGN.

<caption><h4> Perataan Pada Tabel</h4>

</caption>

<tr>

<th><h3>Tengah</h3></th>

<th><h3>Kanan </h3></th>

</tr>

<tr>

</tr>

<tr>

<th><h3>Tengah </h3></th>

</tr>

<tr>

<th><h3>Bawah </h3></th>

</tr>

</table>

Gambar 9.6 Perataan pada Tabel

9.8 Mengatur Lebar Tabel

Lebar suatu tabel diatur besarnya dengan menggunakan atribut WIDTH. Atribut WIDTH digunakan untuk mengubah lebar tabel maupun lebar kolom suatu tabel. Elemen-elemen yang dapat disisipi dengan atribut WIDTH adalah ;

Atribut	Elemen	Orientasi	Value
WIDTH	TABLE	Lebar tabel terhadap browser	“xx%” atau pixel
TH	Lebar kolom terhadap tabel	“xx%” atau pixel
TD	Lebar kolom terhadap tabel	“xx%” atau pixel

Berikut diberikan contoh penggunaan width pada tabel dan pada tabel data :

<caption align=”bottom”> <h5> tabel dengan width 70%</h5>

</caption>

<tr>

<td width=”50%”>width 50%</td>

</tr>

<tr>

<td>lebar sel 50% dari lebar tabel</td>

</tr>

</table>

<caption align=”bottom”> <h5> tabel dengan width 100%</h5>

</caption>

<tr>

<td width=”30%”>width 30%</td>

<td width=”70%”>width 70%</td>

</tr>

<tr>

<td>lebar sel 30% dari lebar tabel</td>

<td>lebar sel 70% dari lebar tabel</td>

</tr>

</table>

Gambar 9.7 Pengaturan Lebar Tabel

9.9 Pewarnaan Tabel

Pemberian warna dapat dilakukan pada tabel, sel maupun pada border dari suatu tabel. Warna dapat ditulis dengan menggunakan bilangan Hexadesimal RRGGBB atau dengan menyebutkan warnanya. Atribut BGCOLOR digunakan pada perintah TABLE, TD, TR. Sedang untuk mengubah warna border tabel, hanya dapat dilakukan pada internet explorer yang menyediakan beberapa macam atribut, yaitu

Atribut	fungsi
BORDERCOLOR	Warna border tabel
BORDERCOLORLIGHT	Warna border bagian atas dan kiri
BORDERCOLORDARK	Warna border bagian bawah dan kanan

Ketiga atribut diatas harus digunakan bersama atribut BORDER. Berikut ini adalah contoh pewarnaan yang terjadi pada suatu tabel.

<center>

<table border=1 width=”40%” bordercolorlight=”red” bordercolordark = “yellow”>

<caption><h5> warna pada tabel</h5>

</caption>

<tr bgcolor=”yellow”>

<td align=”center”>warna kuning</td>

</tr>

<tr>

<td align=”center” bgcolor=”red”>warna merah</td>

<td align=”center” bgcolor=”green”>warna hijau</td>

</tr>

</table>

</center>

Gambar 9.8 Tabel dengan Warna

9.10 Mengantur Spasi Tabel

Atribut yang digunakan untuk mengatur spasi dalam tabel yaitu CELLSPACING dan CELLPADDING. CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah sel dalam sebuah tabel, sedangkan CELLPADDING digunakan untuk menentukan jumlah spasi yang terdapat diantara border sel dan dengan isi yang ada didalam sel tersebut. Berikut adalah contoh tabel yang menggunakan perintah cellpadding dan celspacing.

<tr>

<td>hallo</td>

</tr>

<tr>

<td>hallo</td>

</tr>

</table>

Gambar 9.9 Pengaturan Spasi Tabel

9.11 Menggabungkan Kolom dan Baris

Seperti tabe umumnya, kita dapat menggabungkan dua atau lebih kolom/baris menjadi satu buah kolom/baris. Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN. Kedua atribut ini bisa dikenakan pada sembarang sel dalam suatu tabel (TH atau TD) dan untuk menggunakannya cukup dengan menentukan berapa banyak kolom atau baris yang akan digabungkan. Berikut adalah contoh penggunaan atribut COLSPAN dan ROWSPAN pada tabel.

<html>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

<br>

Tabel dengan ROWSPAN<br>

<tr>

</tr>

<tr>

</tr>

</table>

<br>

Tabel Gabungan ROWSPAN dan COLSPAN<br>

<tr>

<th colspan=2>COLSPAN</th>

</tr>

<tr>

<th>Kolom 1</th>

<th>Kolom 2</th>

</tr>

<tr>

<th rowspan=2>ROWSPAN</th>

<th>Baris 1</th>

</tr>

<tr>

<th>Baris 1</th>

</tr>

</table>

</body>

</html>

Gambar 9.10 Tabel dengan Penggabungan Baris dan Kolom

HTML 03

Terkirim Januari 13, 2009
Filed under: Aplikasi IT |

Tinggalkan sebuah Komentar

8.1 Menyisipkan Gambar

Selain teks, halaman web juga dapat memuat gambar/image. Terdapat beberapa jenis format gambar yang dapat digunakan pada halaman web, antara lain :

GIF (Grafical Interchange Format) (.gif)
JPEG (Joint Photographic Expert Image) (.jpg)
PNG( Portable Network Graphic) (.png)
BMP (Bitmap) (.bmp)

Untuk menyisipkan suatu gambar dalam halaman web dapat dilakukan dengan menggunakan tag <IMG>. Tag tersebut memiliki elemen tambahan sebagai berikut :

ELEMEN	ATRIBUT	KETERANGAN
SRC	URL gambar	Diisi dengan alamat yang menunjuk pada sumber file gambar
ALT	teks	Menentukan tulisan yang akan ditampilkan (biasanya ditempatkan antara tanda petik). Apabila browser tidak dapat menampilkan gambar untuk alasan tertentu.
ALIGN	Center \| Justify \| Left \| Right \| Baseline \| Top \| Bottom \| Middle	Top, bottom, middle digunakan untuk menentukan posisi image terhadap teksLeft, Right, Center untuk menentukan posisi image pada dokumen
HEIGHT	angka	Digunakan untuk menentukan ukuran tinggi gambar
WIDTH	angka	Digunakan untuk menentukan ukuran lebar gambar
BORDER	angka	Digunakan untuk memberikan bingkai pada gambar

Terdapat dua cara untuk memuat gambar dalam web dengan menggunakan tag <IMG> :

Penggunaan Absolute path, biasanya gambar diletakkan pada folder yang sama dengan halaman web, sehingga cukup dipanggil nama filenya saja, atau dapat berupa alamat dari suatu website.

Contoh :

Penggunaan relative path, yaitu file gambar disimpan pada folder yang terpisah dengan folder halaman webnya

Penggunaan gambar dapat diletakkan dibagian mana saja dari suatu dokumen web, yang harus dilakukan hanya memanggil tag <IMG> dimana gambar tersebut akan dimunculkan.

Gambar 8.1 halaman web dengan gambar

Berikut ini adalah contoh penggunaan gambar pada suatu halaman web dengan atribut yang dimilikinya.

<html>

<body>

<p>

<img src=”constr4.gif” width=”144″ height=”50″ border=”1”> Contoh penyisipan gambar

<img src=”hackanm.gif” width=”48″ height=”48″>tinggal letakkan tag IMG di bagian yang akan disisipi gambar Secara default atribut align adalah <i><b>bottom</b></i>

</p>

<p>

<img src=”hackanm.gif” width=”60″ height=”60″ align=”top”>Atribut align <u>TOP</u>

</p>

<p>

<img src=”hackanm.gif” width=”60″ height=”60″ align=”middle”>Atribut align <u>MIDDLE</u>

</p>

<p>

<img src=”hackanm.gif” width=”60″ height=”60″ align=”right”>Atribut align <u>RIGHT</u>

</p>

<p>

<img src=”logounikom.gif” width=”100″ height=”60″ alt=”logo unikom”>Penggunaan Atribut <u>Alt</u>, karena gambar tidak dapat dimunculkan

</p>

<p>

<img src=”../logounikom.gif” width=”100″ height=”60″ alt=”logo unikom”>Penggunaan <u>relative address</u>, karena letak gambar berada di folder lain

</p>

</body>

</html>

Gambar 8.2 Penggunaan Atribut pada Gambar

8.2 Menyisipkan Latar Belakang Gambar

Gambar juga dapat dijadikan latar belakang (background) dari suatu halaman web. Tag yang digunakan untuk menyisipkan gambar sebagai background adalah <BODY BACKGROUND=”nama gambar.extensinya”>. Apabila background berupa warna maka dapat menggunakan tag <BODY BGCOLOR=”warna”>.

Berikut ini adalah contoh penulisan tag tersebut dalam suatu dokumen HTML

Background gambar :	<BODY BACKGROUND=”background.jpg”>
Background warna :	<BODY BGCOLOR=”#d0d0d0”>

Selengkapnya dapat dilihat pada pada contoh berikut :

<html>

<!—untuk background warna–>

<p>

<h3><center>CONTOH PENGGUNAAN BACKGROUND WARNA</center></h3>

</p>

</body>

</html>

<html>

<!-untuk background gambar–>

<h3>Image Background</h3>

<p>File bertipe jpeg dan gif dapat digunakan sebagai background HTML</p>

<p>Apabila gambar tersebut berukuran kecil, maka gambar tersebut akan disambung

hingga halaman tersebut tertutupi oleh gambar tersebut.</p>

</body>

</html>

Gambar 8.3 Contoh Background Warna

Gambar 8.4 Contoh Background Gambar

8.3 Link

Link adalah suatu kemampuan yang dimiliki oleh halaman web. Link berfungsi untuk menghubungkan halaman-halaman web, situs yang lain atau bagian-bagian tertentu pada suatu halaman web. Tag <A>….</A> digunakan untuk membentuk suatu link ke dokumen atau sumber yang akan dimuat ketika user melakukan klik pada link tersebut. Atribut yang digunakan pada tag <A> terdiri dari :

ATRIBUT	ARGUMEN	KETERANGAN
HREF	URL/ Halaman web	Diisi dengan nama halaman web atau nama URL yang akan di-link-kan
NAME	#namabagian	Digunkan untuk link dalam satu dokumen web

Penulisannya dapat dilihat seperti berikut :

<A HREF=”url atau hal.web lain”>teks ditandai dengan link </A>

<A HREF=”#bagian dari halaman web”> teks</A> (sebagai penghubung)

<A NAME=”bagian dari halaman web”> (bagian yang dihubungkan)

Dibawah ini adalah contoh link yang menghubungkan dengan suatu halaman atau alamat di World Wide Web.

<html>

<body>

<p>

<a href=”matakuliah.html”>Mata kuliah</a>

Digunakan untuk menghubungkan dengan halaman matakuliah pada suatu web site.

</p>

<p>

<a href=”http://www.microsoft.com/”>Link Ke Microsoft</a>

Link yang menghubungkan dengan suatu halaman di World Wide Web.

</p>

</body>

</html>

Gambar 8.5 Contoh Link

Berikutnya adalah contoh untuk membuat link dalam satu dokumen html

<html>

<body>

<p>

<p><a href=”#C2″>Klik untuk merujuk pada bab 2 </a></p>

<p><a href=”#C4″>Klik untuk merujuk pada bab 4 </a></p>

<p><a href=”#C6″>Klik untuk merujuk pada bab 6</a></p>

</p>

<p>

<p>Bab 1 berisi mengenai Pendahuluan</p>

<p>Bab 2 berisi mengenai Landasan Teori</p>

<p>Bab 3 berisi mengenai Analisis</p>

<p>Bab 4 berisi mengenai Perancangan</p>

<p>Bab 5 berisi mengenai Implementasi</p>

<p>Bab 6 berisi mengenai Kesimpulan dan Saran</p>

</body>

</html>

Gambar 8.6 Link Pada Satu Dokumen

Selain menggunakan teks, link juga dapat dibuat dengan menggunakan image/gambar. Caranya adalah dengan mengkombinasikan antara tag <A> dan tag <IMG>. Berikut ini adalah contoh dokumen HTML yang menggunakan image sebagai link

<html>

<body>

<p>

Image juga dapat dijadikan Link <a href=”halakhir.html”>

</body>

</html>

Adapun hasilnya dapat dilihat pada browser berikut

Gambar 8.7 Link Dengan Image

HTML 02

Terkirim Januari 12, 2009
Filed under: Aplikasi IT |

Tinggalkan sebuah Komentar

7.1 Heading

Heading adalah sekumpulan kata atau frasa yang menjadi judul atau subjudul dalam suatu dokumen HTML. Sekalipun sama-sama merupakan judul, tetapi heading berbeda dengan elemen <TITTLE> yang hanya muncul pada title bar dari suatu jendela browser, bukan di dalam web page.

HTML menyediakan enam buah tingkat heading. Heading level 1 biasanya merupakan judul yang penting atau judul utama, sedangkan heading level berikutnya merupakan bagian atau sub judul dari judul utama.

Untuk menyatakan heading, digunakan tag <Hx> dimana x merupakan nomor level heading dari 1 sampai 6, sedangkan untuk mengakhirinya digunakan tag akhir </Hx>. Berikut ini adalah contoh penggunaan heading level 1 sampai 6.

<H1>Heading Level 1</H1>

<H2>Heading Level 2</H2>

<H3>Heading Level 3</H3>

<H4>Heading Level 4</H4>

<H5>Heading Level 5</H5>

<H6>Heading Level 6</H6>

Gambar 7.1 Contoh Tag Heading

Atribut yang dapat ditambahkan pada elemen heading adalah ALIGN dimana memiliki nilai sebagai berikut :

Align=”left”, untuk meratakan heading ke kiri
Align=”center”, untuk meratakan heading di tengah
Align=”right”, untuk meratakan heading ke kanan

Contoh penulisan adalah

<H1 ALIGN=”center”>Heading di rata Tengah</H1>

7.2 Phisical Style

Phisical style adalah suatu jenis format yang diberikan pada teks tanpa tergantung pada jenis dari elemen dasar teks tersebut. Elemen-elemen ini sudah sering kita pakai dalam program pengolah kata, seperti menebalkan atau membuat miring suatu teks. Adapun elemen-elemen pisik yang dapat diterapkan pada dokumen HTML adalah :

Elemen	Fungsi
<B>…………..</B>	Untuk menebalkan teks
<I>……………</I>	Untuk membuat teks terlihat miring
<U>…………..</U>	Untuk menggarisbawahi teks
<S>……………</S>	Untuk memberikan coretan pada teks
<BLINK>…….</BLINK>	Membuat teks berkedip (khusus netscape)
<TT>……..…..<TT>	Menampilkan teks dalam format typewriter
<BIG>………<BIG>	Untuk membesarkan teks
<SMALL>…..<SMALL>	Untuk mengecilkan teks
<SUB>………..<SUB>	Membuat teks subscript
<SUP>……..…<SUP>	Membuat teks superscript

Berikut adalah contoh tampilan phisical style pada browser

Gambar 7.2 Tag-tag Physical Style

7.3 Font

HTML 3.2 menyediakan elaman FONT yang dapat digunakan untuk mengubah warna, ukuran dan jenis font suatu teks.

7.3.1 Menentukan Ukuran Teks

Untuk mengatur ukuran suatu teks, elemen FONT menyediakan atribut SIZE dengan nilai dari 1 sampai 7. Semakin besar angka, maka semakin besar ukuran teks tersebut.

Contoh berikut memperlihatkan kode HTML dengan menggunakan berbagai ukuran font :

<font size=1>ukuran teks=1</font>

<font size=2>ukuran teks=2</font>

<font size=3>ukuran teks=3</font>

<font size=4>ukuran teks=4</font>

<font size=5>ukuran teks=5</font>

<font size=6>ukuran teks=6</font>

<font size=7>ukuran teks=7</font>

Gambar 7.3 Ukuran Font

7.3.2 Mengubah Warna Teks

penggunaan warna pada teks mulai diperkenalkan oleh Internet Explorer 1.0 dengan menggunakan atribut COLOR pada elemen FONT. Pendefinisian warna dapat dilakukan dengan dua cara yaitu, melalui nama warna atau menggunakan nilai RGB warna. Adapun warna yang dikenal pada HTML 3.2 hanya 16 warna.

AquaBlackBlueFuchsia

Gray

Green

Lime

Maroon

NavyOlivePurpleRed

Silver

Teal

White

Yellow

Penggunaan pada HTML

<font color =”red”>teks berwarna merah</font>

<font color=”#8A2BE2”>Teks berwarna Blueviolet</font>

7.3.3 Mengubah Jenis Font

Internet Explorer memperkenalkan atribut FACE pada elemen FONT yang dapat digunakan untuk membuat bermacam-macam jenis font pad suatu page. Jenis-jenis font seperti ARIAL, TIMES NEW ROMAN, CENTURY GOTHIC, COURIER NEW dan sebagainya.

Penggunaannya pada HTML

<Font Face=”arial”>Font jenis Arial</font>

<Font Face=”Comic San MS”> Jenis Font Comic San MS</font>

Secara garis besar atribut-atribut yang digunakan elemen FONT adalah sebagai berikut :

Atribut	Argumen	Keterangan
Size	Diisi dengan angka 1 sampai 7	Digunakan untuk mengatur ukuran font
Color	Nama warnaRGB (#XXXXXXXXX)	Digunakan untuk mengubah warna font
face	Jenis font	Digunakan untuk mengubah jenis font

Penggunaan atribut-atribut tersebut dapat di satukan dalam satu elemen FONT sehingga akan diperoleh gabungan dari warna, ukuran dan jenis font.

Contoh dalam HTML

<font size=”6” color=”green” face=”arial”>Gabungan beberapa atribut pada suatu teks</font>

7.4 Ganti Baris dan Garis Horizontal

Elemen yang digunakan untuk ganti baris adalah BR (break rule) berguna untuk menuliskan teks pada baris berikutnya. Dengan adanya elemen ini, kita tidak lagi memerlukan elemen PRE jika menulis pada suatu baris baru. Penulisan tag BR tidak memerlukan penutup.

<Font Face=”arial”>Font jenis Arial</font>

<br>

<Font Face=”Comic San MS”> Jenis Font Comic San MS</font>

Sedangkan untuk membuat garis horizontal, diperlukan elemen HR (horizontal rule). Ada beberapa atribut yang dapat digunakan untuk mengubah tampilan garis seperti untuk mengubah panjang, ketebalan, warna dan efek bayangan(3-D).

Berikut ini adalah atribut-atribut yang dapat ditambahkan pada elemen HR, yang mana pemakaiannya dapat digabungkan dengan elemen HR

Atribut	Argumen	Keterangan
Align	CenterLeftRight	Digunakan untuk melakukan perataan pada garis yang dibuat
Noshade	noshade	Untuk memunculkan efek tanpa bayang-bayang 3-D
Size	Piksel%	Digunakan untuk menentukan ukuran ketebalan garis argumen dapat berupa piksels atau persen
Width	Piksel%	Digunakan untuk memntukan ukuran panjang garis, argumen dapat berupa piksels atau persen
Color	Nama warnaRGB	Untuk memberi warna pada garis yang dibuat

Contoh penggunaan pada HTML

<hr>

Ditampilkan dalam browser sebagai berikut

7.4 Contoh Garis

7.5 List (Daftar)

Salah satu cara yang efektif dan mudah untuk dibaca dalam menyampaikan informasi adalah dengan menggunakan daftar. HTML mewnyediakan beberapa jenis daftar, yaitu :

Ordered list/numbered list (daftar berurut/daftar dengan nomor atau abjad)
Unordered list/bulleted list (daftar tidak berurut/menggunakan bullet)
Menu list (daftar menu)
Directory list
Definition list (glossary/daftar istilah)

7.5.1 Ordered list

Ordered list atau numbered list adalah suatu daftar dimana item-item yang ada di dalam daftar tersebut memiliki nomor secara berurut. Ordered list dimulai dengan tag awal <OL> dan diakhiri dengan tag akhir </OL>. Sedang untuk menyatakan list item, menggunakan tag <LI>. Berikut ini contoh penggunaan ordered list :

<html>

<body>

<h4>Contoh Ordered List:</h4>

<ol>

<li>Fakultas Teknik dan Ilmu Komputer</li>

<li>Fakultas Ekomnomi</li>

<li>Fakultas Desain</li>

<li>Fakultas Hukum</li>

<li>Fakultas Sosial Politik</li>

</ol>

</body>

</html>

Gambar 7.5 Contoh Ordered list

Ordered list memiliki atribut-atribut yang dapat digunakan untuk mengganti nomor menjadi huruf atau bilangan romawi. Kita juga dapat mengatur nomor awal untuk daftar kita.

Atribut	Argumen	Keterangan
Type	A	Daftar dengan huruf besar (A,B,C dst)
a	Daftar dengan huruf kecil (a,b,c, dst)
I	Daftar dengan bilangan romawi besar (I,II dst)
i	Daftar dengan bilangan romawi kecil (i,ii, dst)
1	Daftar dengan nomor berurut (1,2,3 dst)
Start	x	X diisi dengan angka/huruf yang akan dijadikan awal daftar.

Untuk lebih meperjelas penggunaan atribut Type, berikut akan diberikan contoh penggunaan atribut type pada dokumen html

Contoh List Nomor<ol><li>Apel </li><li>Pisang</li>

<li>Mangga</li>

<li>Jambu</li>

</ol>

Contoh List huruf besar<ol type=”A”><li>Apel </li><li>Pisang</li>

<li>Mangga</li>

<li>Jambu</li>

</ol>

Contoh List huruf kecil<ol type=”a”><li>Apel </li><li>Pisang</li>

<li>Mangga</li>

<li>Jambu</li>

</ol>

Contoh List angka romawi besar<ol type=”I”><li>Apel </li><li>Pisang</li>

<li>Mangga</li>

<li>Jambu</li>

</ol>

Contoh List angka romawi kecil<ol type=”i”><li>Apel </li><li>Pisang</li>

<li>Mangga</li>

<li>Jambu</li>

</ol>

Pada browser akan ditampilkan seperti berikut :

Gambar 7.6 Penggunaan Ordered List

7.5.2 Unordered list

Unordered list/bulleted list adalah suatu daftar dimana urutan tidak diutamakan, jadi item-item dalam daftar bisa muncul dalam sembarang urutan. Unordered list dimulai dengan tag <UL> dan diakhiri dengan tag </UL>. Sedang isi daftar menggunakan tag <LI>. Berikut contoh penggunaan tag unordered list

<html>

<body>

<h4>Atribut Pada Unordered List</h4>

<ul >

<li>atribut Type=”disc”</li>

<li>atribut Type=”circle”</li>

<li>atribut Type=”square”</li>

</ul>

</body>

</html>

Adapun atribut yang dapat ditambahkan pada tag unordered list adalah atribut TYPE

Atribut	Argumen	Keterangan
Type	Disc	Simbol berupa disk
Circle	Simbol berupa lingkaran
Square	Simbol berupa kotak

Supaya lebih jelas, berikut ini akan diberikan contoh tentang atribut type dan hasilnya pada browser

Contoh List type disk<ul type=”disc”><li>Apel</li><li>Mangga</li>

<li>Jeruk</li>

<li>Pepaya</li>

</ul>

Contoh List type circle<ul type=”circle”><li>Apel</li><li>Mangga</li>

<li>Jeruk</li>

<li>Pepaya</li>

</ul>

Contoh List type square<ul type=”square”><li>Apel</li><li>Mangga</li>

<li>Jeruk</li>

<li>Pepaya</li>

</ul>

Gambar 7.7 Penggunaan Unordered List

7.5.3 Kombinasi Ordered List dan Unordered List

Untuk daftar yang bertingkat, dapat menggunakan kombinasi dari ordered list dan unordered list. Kedaunya dipakai secara bersama-sama untuk membentuk suatu daftar. Berikut adalah contoh penggunaan kombinasi dari kedua list untuk membentuk suatu daftar.

<html>

<body>

<h4>Contoh Kombinasi Ordered List dan Unordered List:</h4>

<ol>

<li>Kopi

<li>Arabika</li>

<li>Capucino</li>

</ul>

</li>

<li>Teh

<li>Teh hitam</li>

<li>Teh hijau</li>

</ul>

</li>

</ol>

</body>

</html>

Hasilnya dapat dilihat pada browser dibawah ini

Gambar 7.8 Kombinasi List

7.6 List Definisi

List definisi digunakan untuk mendefinisikan atau menjelaskan istilah-istilah, oleh karena itu disebut juga daftar istliah (glossary list). Terdapat tiga tag yang digunakan untuk menyusun suatu daftar istilah :

<DL>….<DL>	Untuk menyatakan list definisi
<DT>	Istilah yang akan didefinisikan, tag tunggal tanpa penutup
<DD>	Definisi dari istilah tersebut, tag tunggal tanpa penutup

Berikut ini adalah contoh penggunaan dari list definisi dalam HTML

<html>

<body>

<h4>Contoh List Definisi:</h4>

<dl>

<dd>Hyper Text Markup Language, merupakan bahasa markup yang digunakan untuk membuat halaman-halaman web.

</dd>

<dt>Internet Explorer</dt>

<dd>Web browser yang merupakan bawaan dari sistem operasi Windows, digunakan untuk menampilkan halaman-halaman web.

</dd>

</dl>

</body>

</html>

Adapun hasilnya dapat dilihat pada browser

Gambar 7.9 Contoh List Definisi

HTML 01

Terkirim Januari 12, 2009
Filed under: Aplikasi IT |

Tinggalkan sebuah Komentar

6.1 Definisi HTML

HTML (Hyper Text Markup Languange) adalah bahasa pengkodeaan untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web. HTML terlihat seperti bahasa pengkodean lama, yang di awali dan diakhiri dengan kode-kode html dimana menunjukkan bagaimana keluarannya pada saat di jalankan pada sebuah web browser.

6.2 Program Editor HTML

Untuk membuat aplikasi web, dalam hal ini menggunakan HTML , maka kita membutuhkan suatu editor guna mengetikkan,mengedit atau menyimpan dokumen-dokumen HTML. Editor untuk memdesain suatu web dibagi 2 yaitu yang bersifat text murni dan yang WYSIWYG (Graphic) Editor untuk text, anatara lain Notepad dan Ultra Edit. Sedang editor WYSIWYG adalah Netscape dan Front Page.

Gambar 6.1 Editor HTML (Ultra edit dan Front Page)

6.3 Struktur Dasar HTML

Seperti umumnya dokumen lain, dokumen HTML terdiri dari teks-teks dan bahkan lebih dari dari itu. Dokumen HTML juga dapat mengandung suatu gambar, suara, ataupun video. Satu hal yang membedakan dokumen HTML dengan dokumen-dokumen lainnya adalah adanya elemen-elemen HTML beserta tag-tagnya. Elemen dan tag HTML berfungsi untuk menformat atau menandai suatu bagian tertentu dari dokumen HTML dan juga untuk menentukan struktur bagian tersebut dalam dokumen HTML. Elemen dan Tag inilah yang merupakan ciri utama dari suatu dokumen HTML. Secara garis besar, untuk menulisakn sebuah dokumen HTML dibutuhkan kerangka penulisan dengan tag-tag dasar sebagai berikut HTML, HEAD,TITLE dan BODY.

Sebagai contoh berikut ini adalah penulisan HTML minimal yang menggunakan tag-tag dasar tersebut

<HTML>

<HEAD>

<TITLE> Judul dokumen </TITLE>

</HEAD>

<BODY>

data-data yang akan di tampilkan

</BODY>

</HTML>

TAG	FUNGSI
HTML	Untuk penenda bahwa dokumen yang dibuat adalah dokumen web
HEAD	Untuk bagian judul, boleh ada atau tidak
TITLE	Judul untuk masing-masing halaman, ditampilkan diatas browser
BODY	Informasi yang ingin dimunculkan diletakkan di bagian ini

6.4 Elemen dan Tag HTML

Dua komponen utama pembentuk dokumen HTML adalah Elemen dan Tag Dengan adanya dua komponen ini, maka kita dapat membuat dokumen HTML dengan baik

6.4.1 Elemen

Dalam dokumen HTML, elemen dibagi menjadi dua kategori utama, yaitu elemen-elemen <HEAD> yang berikan informasi tentang dokumen tersebut, seperti judul dokumen astau hubungannya dengan dokumen lain. Elemen-elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list (daftra), tabel dan lain-lain. Di dalam elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut.

6.4.2 Tag

Pada saat web browser menampilkan suatu web page, browser tersebut akan membaca teks-teks pada dokumen HTML, dan mencari kode khusus yang disebut tag. Tag diapit oleh tanda <>. Tag biasanya merupakan pasangan, yang disebut tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> sedang tag akhir dinyatakan dalam bentuk </nama tag>.

Format umum suatu tag berpasangan adalah :

<nama tag> Teks yang akan ditampilkan </nama tag>

Catatan :

§ HTML tidak membedakan penulisan huruf besar dan huruf kecil pada penulisan elemen maupun tag. Penulisan <i> dan <I> dianggap sama, campuran antara huruf besar dan kecil pun tidak berpengaruh <i>text</I>§ Tidak semua tag didukung oleh semua browser. Jika suatu browser tidak mengenali suatu tag tertentu, browser tersebut akan mengabaikan tag yang tidak dikenalnya dan menuliskan isi di dalam tag tersebut sebagai teks biasa.

Sebagai contoh untuk menampilkan teks dalam format miring digunakan elemen I (italic), seperti contoh di bawah ini:

<i> Teks ini akan tercetak miring bila dilihat di browser </i>

Penulisan program yang baik adalah secara terstruktur. Artinya antara tag pertama dan tag berikutnya tidak saling tumpang tindih.

Penulisan tag yang tumpang tindih :

Penulisan tag yang benar :

<tag1>teks tag1<tag2>teks tag 2

</tag1>

</tag2>

<tag1>teks tag1<tag2>teks tag 2

</tag2>

</tag1>

Kemungkinan kesalahan yang terjadi adalah lupa memberi tag awal atau tag akhir sehingga web page yang dihasilkan akan terlihat lain dari yang diinginkan.

Tidak semua tag mengikuti aturan seperti diatas, terdapat beberapa macam bentuk tag yang dikenal oleh HTML, di mana umumnya tag-tag dalam HTML muncul dalam bentuk seperti berikut :

Sebagai contoh :

<Title> Home Page Irawan </Title>

<BR>

<A Href=http://www.unikom.ac.id/>WebSite UNIKOM </a>

6.5 Desain HTML

Untuk mempermudah pemahaman diberikan contoh dalam bentuk file HTML

<html>

<head>

<title>Modul Pengantar Ilmu Komputer</title>

</head>

<body>

<h1>Klasifikasi dan Kegunaan Komputer</h1>

Komputer berasal dari kata <i>to compute</i> yaitu menghitung.Jadi pada awalnya komputer hanya digunakan sebagai alat hitung, namun perbedaan yang mendasar dengan kalkulator adalah bahwa komputer mempunyai perkembangan zaman, komputer digunakan manusia untuk memproses pemecahan masalah.

<hr>

Untuk lebih jelas tentang kegunaan komputer, komputer dibagi dalam beberapa klasifikasi, yaitu :

<h5>

<ol>

<li><a href=”jenis_data.html”>Berdasarkan Jenis Data Yang Diolah </a> </li>

<li><a href=”kemampuan.html”>Berdasarkan Kemampuan Komputer </a> </li>

<li><a href=”ukuran_fisik.html>Berdasarkan Ukuran Fisik</a></li>

<li><a href=”bidang_masalah.html> Berdasarkan Bidang Masalah </a> </li>

</ol>

</h5>

</body>

</html>

Untuk menampilkan hasilnya, kita buka internet explorer dan buka file html tersebut.

Gambar 6.2 Browse Halaman Web

Penjelasan dari elemen dan tag html yang digunakan untuk program diatas :

Perintah HTML digunakan sebagai awalan untuk suatu dokumen html.
Perintah HEAD digunakan untuk menunjukkan bagian judul dokumen. Sifatnya opsional (boleh ditulis/tidak)
PerintahTITLE digunakan untuk memberikan judul pada masing.masing dokumen. Judul ini akan ditampilkan dibagian atas web browser.
Perintah BODY menunjukkan bagian isi dari dokumen html tersebut.
Perintah H1 digunakan untuk penetapan besar huruf (heading). Apabila angka yang menyertai huruf H semakin besar, maka huruf semakin kecil.
Perintah HR digunakan untuk membuat garis
Perintah OL digunakan untuk membuat daftar. LI untuk isi daftar.
Perintah A HREF digunakan untuk membuat link.

6.6 Elemen Dasar HTML

HTML tidak hanya menyediakan teks saja dalam dokumennya, tetapi juga mampu menampilkan objek-objek multimedia seperti gambar, suara, video, dan bahkan telah merambah lebih jauh dengan adanya VRML serta applet-applet Java. Untuk informasi yang berupa teks, HTML telah menyediakan bermacam-macam elemen, seperti :

PARAGRAPH untuk membuat suatu paragraf
BLOCKQUOTE untuk membuat suatu kutipan teks
PREFORMATTED TEXTuntuk menampilkan teks seperti yang dituliskan
DIVIDER digunakan untuk mengelompokkan suatu teks tertentu

6.6.1 Paragraf

Elemen <P>………..</P> digunakan untuk menandai sekumpulan teks sebagai suatu paragraf.Tag <P> untuk awal paragraf dan tag </P> digunakan untuk mengakhiri paragraf.

Tag paragraf memiliki atribut yang dapat dipakai sebagai tambahan untuk pemformatan paragraf

Atribut	Argumen	Keterangan
Align	RightCenterLeftJustify	Digunakan untuk perataan suatu paragraf, apakah rata kiri,kanan, tengah ataupun rata kiri/kanan (justify)

Berikut, diberikan contoh-contoh kode HTML untuk menampilkan paragraf

<html>

<body>

<p>Paragraf satu.</p>

<p>Paragraf dua.</p>

<p>Paragraf tiga.</p>

<p>Elemen paragraf didefinisikan dengan menggunakan tag P.</p>

</body>

</html>

Contoh kode HTML dengan tambahan atribut :

<html>

<body>

<p align=”right”>Paragraf dengan perataan kanan.</p>

<p align=”center”>Paragraf dengan rata tengah.</p>

<p align=”left”>Paragraf tiga.</p>

<p align=”justify”>Paragraf dengan perataan justify.</p>

</body>

</html>

Hasil dapat dilihat pada browser sebagai berikut :

Gambar 6.3 Contoh Tag Paragraf

Gambar 6.4 Contoh Tag paragraf dengan Perataan

6.6.2 Blockqoute

Tag <BLOCKQUOTE> digunakan untuk menuliskan suatu kutipan teks. Browser biasanya menampilkan kutipan teks dengan mengidentifikasikan teks tersebut atau dengan mengabaikan spasi dalam teks seperti tag paragraf . kutipan teks dinyatakan dengan indentasi yang menjorok ke dalam dan berbeda dalam satu paragraf.

Berikut ini, contoh dokumen HTML yang menggunakan tag blockquote :

<html>

<body>

<h3>Teknologi Universal Serial Bus (USB)</h3>

Pada awal tahun 1977 tepatnya komputer dengan prosesor Pentium, beberapakomputer sudah mempunyai piranti baru untuk memudahkan pengguna komputer dalam menangani masalah kabel yang bayak.<br>

Teknologi baru tersebut dinamalan Universal Serial Bus atau yang lebih

dikenal dengan USB. Memang masih bayak yang tidak mengetahui apa dan

fungsi

S	S	R	K	J	S	M
« Mei
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

M.Wisapgiman’s Blog

Arsip untuk ‘Aplikasi IT’ Kategori

HTML 05

HTML 06

Halaman Satu dari File Satu.Html

Halaman Dua dari File Dua.Html

Halaman tiga dari File tiga.Html

Mas Awonk’S Web

Halaman Utama.

—Daftar—

HTML 04

HTML 03

HTML 02

HTML 01

Halaman Utama

Kalender

Kategori

Blogroll

Komentar Terakhir

Follow “M.Wisapgiman's Blog”