Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Membuat Frame dengan HTML

Frame HTML dapat digunakan untuk menampilkan beberapa web page yang ditampilkan dalam satu window browser. Model ini sering dipakai untuk memperjelas penyajian informasi dengan menu-menu yang ada selalu ditampilkan.

Kekurangan penggunaan frame :

  • Developer web harus menjaga dokumen HTML lebih banyak
  • Sulit untuk mencetak (print) semua halaman web.

Tag Frameset :

· Tag <frameset> mendefinisikan bagaimana membagi window ke dalam fram-frame.

· Setiap frameset mendefinisikan sebuah set baris (row) atau kolom (colom)

· Setiap nilai rows/column menunjukkan jumlah tampilan area setiap row/colomn.

Tag Frame

  • Tag <frame> tag mendefinisikan nama dokumen HTML yang dimasukkan dalam frame.

Sebagai contoh dibawah ini adalah frameset dengan dua kolom. Kolom pertama dengan lebar 25% dari browser window. Kolom kedua dengan lebar 75% dari browser window. Dokumen HTML ”frame1.html” diletakkan pada kolom pertama dan dokumen HTML ”frame2.html” diletakkan di kolom kedua.

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

Tag – tag Frame

Tag

Keterangan

<frameset>

Mendefinisikan kumpulan frame

<frame>

Mendefinisikan bagian dari windows (sebuah frame)

<noframes>

Mendefinisikan bagian noframe untuk browser yang tidak dapat menangani frame

<iframe>

Mendefinisikan suatu frame inline

Cara membuat frame HTML dengan dreamweaver :

  • Buka halaman web baru
  • Klik Insert – HTML – Frame
  • Pilih model frame,contoh : top nested left
    clip_image001
  • Sehingga akan muncul design frame sebagai berikut :
    clip_image003

Gambar. Design frame

  • Tampilan di atas terdiri dari tiga frame, yaitu frame top, frame left dan frame main. Sehinnga untuk menyimpannya perlu disimpan dengan empat nama file. Yaitu file untuk frame top (frametop.html), frame left (frameleft.html), frame main (framemain.html) dan frame gabungannya, misalkan disebut frame utama (frameutama.html).
  • Source Code – Listing : frameutama.html

<html>

<head>

<title>Frame Utama</title>

</head>

<frameset rows="80,*" cols="*" frameborder="yes" border="2" framespacing="2">

<frame src="frametop.html" name="topFrame" scrolling="NO" noresize>

<frameset rows="*" cols="142,*" framespacing="2" frameborder="yes" border="2">

<frame src="frameleft.html" name="leftFrame" scrolling="NO" noresize>

<frame src="framemain.html" name="mainFrame">

</frameset>

</frameset>

<noframes><body>

</body></noframes>

</html>

  • Source Code – Listing   : frametop.html

<html>

<head>

<title>Frame Top</title>

</head>

<body>

Frame Top

</body>

</html>

  • Source Code - Listing   : frameleft.html

<html>

<head>

<title>Frame Left</title>

</head>

<body>

Frame Left

</body>

</html>

  • Source Code - Listing   : framemain.html

<html>

<head>

<title>Frame Main</title>

</head>

<body>

Frame Main

</body>

</html>

  • Hasil di Browser :

clip_image005

Gambar  Contoh hasil frame

Frame Kolom

Berikut ini adalah contoh frameset vertikal untuk tiga dokumen yang berbeda.

Contoh :

Source Code - Listing  : frameabc.html

<html><title>Frame tiga kolom</title>

<frameset cols="25%,50%,25%">

<frame src="framea.html">

<frame src="frameb.html">

<frame src="framec.html">

</frameset>

</html>

Source Code - Listing  : framea.html

<html>

<head>

<title>Frame A</title>

</head>

<body bgcolor="#FFBF55">

<strong>Frame A

</strong>

</body>

</html>

Source Code - Listing   : frameb.html

<html>

<head>

<title>Frame B</title>

</head>

<body bgcolor="#FFBFFF">

<strong>Frame B </strong>

</body>

</html>

Source Code - Listing  : framec.html

<html>

<head>

<title>Frame C</title>

</head>

<body bgcolor="#99FFFF">

<strong>Frame C </strong>

</body>

</html>

clip_image007

Gambar  Frame kolom

Frame Baris

Berikut ini adalah contoh frameset horizontal untuk tiga dokumen yang berbeda.

Contoh - Listing : frame3baris.html

<html><title>Frame tiga baris</title>

<frameset rows="30%,30%,40%">

<frame src="framea.html">

<frame src="frameb.html">

<frame src="framec.html">

</frameset><noframes></noframes>

</html>

clip_image009

Gambar  Frame baris

Frame Navigasi

Berikut ini adalah contoh membuat frame navigasi. Navigasi berisi sebuah dartar link dengan frame kedua sebagai target. Frame kedua menampilkan dokumen yang di-link.frame target disebelah kanan dinamakan ”showframe”

Contoh : Source Code - Listing  : framenavigasi.html

<html><title>frame navigasi</title>

<frameset cols="120,*">

<frame src="framenavmenu.html">

<frame src="framenavisi.html"

name="showframe">

</frameset>

</html>

Source Code - Listing  : framenavmenu.html

<html>

<head>

<title>menu</title>

</head>

<body>

<p><a href="framea.html" target="showframe">frame A</a></p>

<p><a href="frameb.html" target="showframe">frame B</a></p>

<p><a href="framec.html" target="showframe">frame C</a></p>

</body>

</html>

Source Code - Listing  : framenavisi.html

<html>

<head>

<title>isi</title>

</head>

<body>

<p>Selamat Datang</p>

<p>Percobaan Frame Navigasi </p>

</body>

</html>

clip_image011

Gambar  Contoh navigasi

Jika di-klik menu frame A, maka akan muncul :

clip_image012

Gambar   Contoh navigasi

Frame Inline

Berikut ini adalah contoh membuat frame inline (frame di dalam sebuah dokumen HTML).

Contoh : Source Code - Listing   : frameinline.html

<html>

<body>

<iframe src="home.html"></iframe>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body></html>

Source Code - Listing  : home.html

<html>

<head>

<title>Home</title>

</head>

<body>

<h1>Belajar Web Design </h1>

<h2>Belajar Web Design </h2>

<h3>Belajar Web Design </h3>

<h4>Belajar Web Design </h4>

<h5>Belajar Web Design </h5>

<h6>Belajar Web Design </h6>

</body>

</html>

clip_image014

Gambar  Frame inline

Baca Selengkapnya

Membuat Form Isian dengan HTML

Form HTML adalah sebuah area yang mengandung elemen – elemen form. Elemen form adalah sebuah elemen yang memungkinkan user untuk memasukkan informasi seperti text, teksarea, menu drop-down, radio button, checkbox,dll.

Sebuah form didefinisikan dengan tag <form>. 

<form>
  …
</form>

Tag – tag Form





































Tag


Keterangan


<form>


Mendefinisikan form untuk masukan user


<input>


Mendefinisikan masukan field


<textarea>


Mendefinisikan textarea


<label>


Mendefinisikan label control


<fieldset>


Mendefinisikan sebuah fieldset


<legend>


Mendefinisikan caption sebuah fieldset


<select>


Mendefinisikan list (drop-down box)


<optgroup>


Mendefinisikan option group


<option>


Mendefinisikan option pada drop-down box


<button>


Mendefinisikan button


Jenis masukan dalam form

Jenis masukan merupakan suatu obyek/komponen yang digunakan untuk memasukkan suatu nilai/data/informasi ke dalam web. Jenis masukan dalam form dibedakan menjadi :


  • Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai yang dimasukkan dapat berupa angka ataupun teks.
  • Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih.
  • Check box : menyediakan beberapa pilihan, pilihan bisa lebih dari satu yang dipilih.
  • Button : digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form.

    • SUBMIT : button yang digunakan untuk mengirim data.
    • RESET : button yang digunakan untuk menginisialisasi (mengosongkan) form.

  • List : menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu.
  • Text Area : digunakan untuk memasukkan data dalam bentuk teks berupa memo.

Tag – tag dan atribut elemen form

· Form


<form name="form1" method="post" action=""></form>


Keterangan :


  • Form : tag yang menandakan sebuah elemen form
  • Name : nama form
  • Methode : metode pengiriman data. Bisa berupa “post” atau “get”
  • Action : nama file dokumen yang memproses pengiriman data. Lebih lanjut akan dibahas di aplikasi web php mysql.

· Text Field


<input type="text" name="textfield">


Keterangan :


  • Input : tag yang menandakan sebuah masukan
  • Type : type sebuah masukan, yaitu ”text”
  • Name : nama text field

· Text Area


<textarea name="textarea" cols="100" rows="5"></textarea>


Keterangan :


  • Textarea : tag yang menandakan sebuah masukan textarea
  • Name : nama textarea
  • Cols : jumlah kolom textarea
  • Rows : jumlah baris textarea

· Check box


<input name="checkbox" type="checkbox" value="checkbox" checked>


Keterangan :


  • Name : nama checkbox
  • Type : type masukan
  • Valuae : nilai yang dikirimkan ke server
  • Checked : menunjukkan bahwa otomatis pilihan tersebut dipilih. Secara default atribut tersebut unchecked (tidak dipilih).

· Radio Button


<input name="radiobutton" type="radio" value="radiobutton">


Keterangan :


  • Name : nama radiobutton
  • Type : type masukan
  • Value : nilai yang akan dikirim ke server

· List Box


<select name="select">

<option value="TI">Teknologi Informasi</option>

</select>


Keterangan :


  • Select : tag yang menandakan sebuah list/menu
  • Name : nama list/menu
  • Option : tag yang menandakan sebuah pilihan list
  • Value : nilai pilihan yang akan dikirim ke server

· Button – Submit


<input type="submit" name="Submit" value="Submit">


· Button – Reset


<input type="reset" name="Reset" value="Reset">


Cara pembuatan form dengan dreamweaver

· Buka halaman web baru

· Klik menu Insert – Form

· Pilih model form

clip_image001

· Contoh memilih textarea, sehinnga muncul design view sebagai berikut :

clip_image002

Gambar  Memilih textarea

· Atur propertiesnya, bisa melalui code design atau design propertiesnya :

clip_image004

Gambar  Pengaturan property

Keterangan :


  • TextField : nama textarea
  • Char width : lebar kolom
  • Num Lines : jumlah baris
  • Wrap : model pengaturan teks dalam textarea
  • Type : pilih singgle line, multiline atau password
  • Init val : nilai default
  • Class : nama class jika menggunakan file CSS

Field Text

Berikut ini adalah contoh penggunakan field text dalam dokumen HTML.

Contoh – Listing   : textfield.html


<html><title>text field</title>

<body>

<form>

Nama Depan :

<input name="NamaBelakang" type="text" id="NamaBelakang">

<br>

Nama Belakang :

<input name="NamaBelakang" type="text" id="NamaBelakang">

</form>

</body>

</html>


clip_image006

Gambar  . Contoh field text

Field Text – Password

Berikut ini adalah contoh Field Text dengan masukan berupa password.

Contoh - Listing : password.html


<html><title>Password</title>

<body>

<form>

Username:

<input type="text" name="user"><br>

Password:

<input type="password" name="password">

</form>

<p>Keterangan : ketika memasukan data di field password, browser akan menampilkan tanda bintang sebagai pengganti karakter. </p>

</body>

</html>


clip_image008

Gambar  . Contoh password


Checkbox

Berikut ini adalah contoh penggunaan checkbox dalam dokumen HTML.

Contoh - Listing  : checkbox.html


<html><title>Check Box</title>

<body>

<p> Hobi :</p>

<form>

<p>Baca Majalah :

<input name="majalah" type="checkbox" id="majalah" value="majalah" checked>

<br>

Olah Raga :

<input name="olahraga" type="checkbox" id="olahraga" value="olahraga">

<br>

Memancing :

<input name="mancing" type="checkbox" id="mancing" value="memancing">

</p>

</form></body>

</html>


clip_image009

Gambar  Contoh checkbox


Radio Button

Berikut ini adalah contoh penggunaan radion button dalam dokumen HTML.

Contoh - Listing: radiobutton.html


<html><title>Radio Button</title>

<body>

<p>Agama : </p>

<form>

<p>Islam :

<input type="radio" checked="checked"

name="agama" value="islam"> <br>

Kristen :

<input type="radio"

name="agama" value="kristen"><br>

Protestan :

<input name="agama" type="radio" value="protestan"><br>

Hindu :

<input name="agama" type="radio" value="Hindu"><br>

Budha :

<input name="agama" type="radio" value="Budha"></p>

</form></p>

</body>

</html>



clip_image010

Gambar   Contoh radiobutton

List Box – Drop Down Menu

Berikut ini adalah contoh penggunaan list box – drop down menu.

Contoh - Listing   : listbox.html


<html>

<head>

<title>List Box</title>

</head>

<body>

<p>Tahun Kelahiran</p>

<form name="form1" method="post" action="">

<select name="select">

<option value="1980" selected>1980</option>

<option value="1981">1981</option>

<option value="1982">1982</option>

<option value="1983">1983</option>

<option value="1984">1984</option>

<option value="1985">1985</option>

</select>

</form>

</body>

</html>


clip_image012

Gambar  COntoh listbox dropdown


Textarea

Berikut ini adalah contoh penggunaan textarea dalam dokumen HTML.

Contoh - Listing   : textarea.html


<html>

<head><title>textarea</title></head>

<body>

<p>Komentar :</p>

<form name="form1" method="post" action="">

<textarea name="textarea" cols="50" rows="5">isikan komentar anda disini</textarea>

</form>

</body></html>



clip_image014

Gambar  Contoh textarea

Button – Submit dan Reset

Berikut ini adalah contoh penggunaan Submit Button dan Reset Button.

Contoh - Listing  : button.html


<html>

<head>

<title>Button</title>

</head>

<body>

<form name="form1" method="post" action="">

<input type="submit" name="Submit" value="Send">

<input type="reset" name="Reset" value="Reset">

</form>

</body>

</html>



clip_image015

Gambar  Contoh button

Contoh form biodata

Source Code - Listing   : biodata.html


<html>

<head>

<title>Biodata</title>

</head>

<body>

<p align="center">Formulir Biodata </p>

<form name="form1" method="post" action="">

<table width="90%" border="0" align="center">

<tr>

<td width="25%">Nama</td>

<td width="2%">:</td>

<td width="73%"><input name="txtnama" type="text" id="txtnama" size="50"></td>

</tr>

<tr>

<td>Tempat Tanggal Lahir </td>

<td>:</td>

<td><input name="tempat" type="text" id="tempat" size="20">

/

<input name="textfield" type="text" size="5">

-

<select name="sBulan" id="sBulan">

<option value="januari" selected>Januari</option>

<option value="pebruari">Pebruari</option>

<option value="maret">Maret</option>

<option value="april">April</option>

<option value="mei">Mei</option>

<option value="juni">Juni</option>

<option value="juli">Juli</option>

<option value="agustus">Agustus</option>

<option value="september">September</option>

<option value="oktober">Oktober</option>

<option value="nopember">Nopember</option>

<option value="desember">Desember</option>

</select>

-

<select name="sTahun" id="sTahun">

<option value="1980" selected>1980</option>

<option value="1981">1981</option>

<option value="1982">1982</option>

<option value="1983">1983</option>

<option value="1984">1984</option>

<option value="1985">1985</option>

<option value="1986">1986</option>

<option value="1987">1987</option>

<option value="1988">1988</option>

<option value="1989">1989</option>

<option value="1990">1990</option>

</select></td>

</tr>

<tr>

<td valign="top">Agama</td>

<td valign="top">:</td>

<td valign="top"><input name="agama" type="radio" value="islam" checked>

Islam<br>

<input name="agama" type="radio" value="kristen">

Kristen <br>

<input name="agama" type="radio" value="protestan">

Protestan<br>

<input name="agama" type="radio" value="hindu">

Hindu <br>

<input name="agama" type="radio" value="budha">

Budha <br> </td>

</tr>

<tr valign="top">

<td>Hobi</td>

<td>:</td>

<td><input name="cHobi" type="checkbox" id="cHobi" value="Olah Raga" checked>

Olah Raga <br>

<input name="cHobi" type="checkbox" id="cHobi" value="Baca Majalah">

Baca Majalah<br>

<input name="cHobi" type="checkbox" id="cHobi" value="Memancing">

Memancing<br></td>

</tr>

<tr>

<td>Komentar</td>

<td>:</td>

<td><textarea name="areaKomentar" cols="50" rows="3" id="areaKomentar"></textarea></td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td><input type="submit" name="Submit" value="Send">

<input type="reset" name="Reset" value="Reset"></td>

</tr>

</table>

</form>

</body>

</html>


clip_image017

Gambar  Contoh pengisian biodata

Baca Selengkapnya

Membuat Tabel dengan html

Membuat Tabel

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi beberapa baris (dengan tag <tr>), dan setiap baris dibagi menjadi beberapa kolom (dengan tag <td>). Td kependekan dari ”table data” yang berarti tempat menyimpan data (data cell). Sebuah cell data dapat berupa teks, image, list, paragraf, form, tabel,dll.

Tag –tag tabel HTML

Tag

Keterangan

<table>

Mendefinisikan tabel

<th>

Mendefinisikan header tabel

<tr>

Mendefinisikan baris tabel

<td>

Mendefinisikan cell tabel

<caption>

Mendefinisikan caption tabel

<colgroup>

Mendefinisikan group kolom tabel

<col>

Mendefinisikan atribut nilai jumlah kolom tabel

<thead>

Mendefinisikan head tabel

<tbody>

Mendefinisikan body tabel

<tfoot>

Mendefinisikan footer tabel

Contoh – Listing : tabel1.html

<html>

<body>

<p><strong>

Satu Kolom:</strong></p>

<table border="1">

<tr>

<td>500</td>

</tr>

</table>

<h4>Satu baris dan lima kolom:</h4>

<table border="1">

<tr>

<td>1000</td>

<td>2000</td>

<td>3000</td>

<td>4000</td>

<td>5000</td>

</tr>

</table>

<h4>Dua baris dan lima kolom :</h4>

<table border="1">

<tr>

<td>1000</td>

<td>2000</td>

<td>3000</td>

<td>5000</td>

<td>6000</td>

</tr>

<tr>

<td>7000</td>

<td>8000</td>

<td>9000</td>

<td>10000</td>

<td>11000</td>

</tr>

</table>

</body>

</html>

clip_image002[4]

Gambar  Contoh pemakaian tabel

Cara membuat tabel dengan dreamweaver

· Buka halaman web baru

· Klik menu Insert –Tabel

clip_image003[4]

Gambar  Pembuatan tabel pada Dreamweaver

· Masukkan atribut tabel

Keterangan :

  1. rows : jumlah baris
  2. column : jumlah kolom
  3. table width : lebar tabel
  4. border thickness : tebal border
  5. cell padding : lebar cell padding
  6. cell spacing : lebar cell spacing

Border, Align dan Background tabel

Tebal border tabel didefinisikan dengan tag border, letak posisi tabel didefinisikan dengan tag align, warna background tabel didefinisikan dengan tag bgcolor.

Contoh – Listing : tabelborder.html

<html><title>Border Tabel</title>

<body>

<h4>border normal, letak di tengah:</h4>

<table border="1" align="center">

<tr>

<td>Baris Pertama - Kolom Pertama </td>

<td>Baris Pertama - Kolom Kedua </td>

</tr>

<tr>

<td>Baris Kedua - Kolom Pertama </td>

<td>Baris Kedua - Kolom Kedua </td>

</tr>

</table>

<h4>border lebih tebal, letah di tengah, lebar tabel 90%:</h4>

<table border="8" align="center" width="90%">

<tr>

<td>Baris Pertama - Kolom Pertama </td>

<td>Baris Pertama - Kolom Kedua</td>

</tr>

<tr>

<td>Baris Kedua - Kolom Pertama</td>

<td>Baris Kedua - Kolom Kedua </td>

</tr>

</table>

<h4>border sangat tebal, letak di tengah, lebar tabel 90%, warna background = #FFDFAA: </h4>

<table width="90%" border="15" align="center" bgcolor="#FFDFAA">

<tr>

<td>Baris Pertama - Kolom Pertama </td>

<td>Baris Pertama - Kolom Kedua</td>

</tr>

<tr>

<td>Baris Kedua - Kolom Pertama</td>

<td>Baris Kedua - Kolom Kedua </td>

</tr>

</table>

</body>

</html>

clip_image005[4]

Gambar Pengaturan tabel

Tabel Tanpa Brder

Terkadang dalam pembuatn tabel tidak diharapkan adanya border (garis-garis). Berikut ini adalah contoh tabel tanpa border.

Contoh – Listing  : tabelnoborder.html

<html><title>Tabel tanpa border</title>

<body>

<h4>Tabel tanda border :</h4>

<table>

<tr>

<td>ABC</td>

<td>DEF</td>

<td>GHI</td>

</tr>

<tr>

<td>JKL</td>

<td>MNO</td>

<td>PQR</td>

</tr>

</table>

</body>

</html>

clip_image007[4]

Gambar  Tabel tanpa border

Tabel Header

Berikut ini adalah contoh tabel header dengan tag <th>.

Contoh – Listing   : tabelheader.html

<html><title>Tabel Header</title>

<body>

<h4>Table header:</h4>

<table border="1">

<tr>

<th>Name</th>

<th>Jurusan</th>

<th>Institusi</th>

</tr>

<tr>

<td>Hasan Abdul Karim </td>

<td>Teknologi Informasi </td>

<td>PENS ITS </td>

</tr>

</table>

<h4>Vertical header:</h4>

<table border="1">

<tr>

<th>Nama :</th>

<td>Hasan Abdul Karim </td>

</tr>

<tr>

<th>Jurusan</th>

<td>Teknologi Informasi </td>

</tr>

<tr>

<th>Institusi</th>

<td>PENS ITS </td>

</tr>

</table>

</body>

</html>

clip_image008[4]

Gambar  Tabel header

Empty Cell

Berikut ini adalah contoh empty cell tabel.

Contoh – Listing : emptycell.html

<html><title>Empty Cell</title>

<body>

<table border="1">

<tr>

<td>Tulisan Teks </td>

<td>Tulisan Teks</td>

</tr>

<tr>

<td></td>

<td>Tulisan Teks</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>Tulisan Teks</td>

</tr>

</table>

<p>Jika suatu tabel tidak ada data, maka akan dianggap tidak ada border seperti terlihat pada baris kedua - kolom pertama. Untuk mengatasinya bisa dengan trik memberikan spasi, yaitu dengan teks di kode &quot;&amp;nbsp;&quot;.

</p>

</body>

</html>

clip_image010[4]

Gambar  Cell kosong

Colspan dan Rowspan

Berikut ini adalah contoh mendefinisikan cell tabel yang dilebarkan lebih dari satu baris atau satu kolom dengan atribut colspan dan rowspan.

Contoh – Listing  : colspan.html

<html><title>Colsapn dan Rowspan</title>

<body>

<h4>Colspan 3 kolom:</h4>

<table border="1">

<tr>

<th>Hari</th>

<th colspan="3">Kuliah</th>

</tr>

<tr>

<td>Senin</td>

<td>Web Design</td>

<td>Aplikasi Web </td>

<td>Database </td>

</tr>

</table>

<h4>Rowspan 3 row:</h4>

<table border="1">

<tr>

<th>Hari:</th>

<td>Senin</td>

</tr>

<tr>

<th rowspan="3">Kuliah</th>

<td>Web Design</td>

</tr>

<tr>

<td>Aplikasi Web</td>

</tr>

<tr>

<td>Database</td>

</tr>

</table>

</body>

</html>

clip_image012[4]

Gambar  Contoh colspan dan rowspan

Tag di dalam suatu tabel

Berikut ini adalah contoh menampilkan elemen di dalam elemen lain.

Contoh – Listing   : tagintabel.html

<html><title>Tag di dalam tabel</title>

<body>

<table border="1">

<tr>

<td><p>Sebuah paragraf </p>

<p>Paragraf lain </p></td>

<td>Cell berisi tabel

<table border="1">

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr><td>C</td>

<td>D</td></tr>

</table>

</td>

</tr>

<tr>

<td>Cell berisi list

<ul>

<li>Senin</li>

<li>Selasa</li>

<li>Rabu</li>

<li>Kamis</li>

</ul>

</td>

<td>PENS ITS </td>

</tr>

</table>

</body>

</html>

clip_image014[4]

Gambar  . Contoh tabel dalam tabel

Cellpadding

Cellpadding digunakan untuk memberikan jarak antara teks dengan tepi border tabel. Cellpadding menggunakan atribut cellpadding

Contoh – Listing  : cellpadding.html

<html><title>cellpadding</title>

<body>

<h4>Tanpa cellpadding:</h4>

<table border="1">

<tr>

<td>ABC</td>

<td>DEF</td>

</tr>

<tr>

<td>GHI</td>

<td>JKL</td>

</tr>

</table>

<h4>Dengan cellpadding:</h4>

<table border="1"

cellpadding="10">

<tr>

<td>ABC</td>

<td>DEF</td>

</tr>

<tr>

<td>GHI</td>

<td>JKL</td>

</tr>

</table>

</body>

</html>

clip_image016[4]

Gambar  Contoh cellpadding

Cellspacing

Cellspacing digunakan untuk memberikan jarak antara border dalam tabel dengan border luar tabel. Cellspacing menggunakan atribut cellspacing.

Contoh – Listing  : cellspacing.html

<html><title>cellspacing</title>

<body>

<h4>Tanpa cellspacing:</h4>

<table border="1">

<tr>

<td>ABC</td>

<td>DEF</td>

</tr>

<tr>

<td>GHI</td>

<td>JKL</td>

</tr>

</table>

<h4>Dengan cellspacing:</h4>

<table border="1"

cellspacing="10">

<tr>

<td>ABC</td>

<td>DEF</td>

</tr>

<tr>

<td>GHI</td>

<td>JKL</td>

</tr>

</table>

</body></html>

clip_image018[4]

Gambar  Cellspacing

Background Pada Tabel

Background pada tabel dapat didefinisikan dengan menggunakan warna atau dengan image. Berikut ini adalah contoh background tabel dengan warna dan image. Untuk memberikan background warna menggunakan atribut ‘bgcolor’. Untuk memberikan background image menggunakan atribut background.

Contoh – Listing  : backgroundtabel.html

<html><title>Background Tabel</title>

<body>

<h4>Dengan background warna:</h4>

<table border="1"

bgcolor="green">

<tr>

<td>ABC</td>

<td>DEF</td>

</tr>

<tr>

<td>GHI</td>

<td>JKL</td>

</tr>

</table>

<h4>Dengan background image:</h4>

<table border="1" background="jpg/bgdesert.jpg">

<tr>

<td>ABC</td>

<td>DEF</td>

</tr>

<tr>

<td>GHI</td>

<td>JKL</td>

</tr>

</table>

</body>

</html>

clip_image020[4]

Gambar  Background pada tabel

Background Cell

Background Cell digunakan untuk memberikan background pada cell tertentu tabel sehingga dimungkinkan banyak warna pada sutau tabel.

Contoh – Listing   : cellbackground.html

<html><title>cell background</title>

<body>

<h4>Cell background:</h4>

<table border="1">

<tr>

<td bgcolor="#FF9F55">ABC</td>

<td>DEF</td>

</tr>

<tr>

<td

background="jpg/bgdesert.jpg">

GHI</td>

<td>JKL</td>

</tr>

</table>

</body>

</html>

clip_image021[4]

Gambar  Background Cell

Mengatur posisi teks dalam tabel

Berikut ini adalah contoh mengatur posisi teks dalam tabel dengan atribut align, sehingga diperoleh layout yang lebih baik.

Contoh – Listing   : aligntabel.html

<html><title>Align Tabel</title>

<body>

<p>Mengatur posisi teks dalam tabel </p>

<table width="400" border="1">

<tr>

<th align="left">Hari</th>

<th align="right">Kuliah-1</th>

<th align="right">Kuliah-2</th>

</tr>

<tr>

<td align="left">Senin</td>

<td align="right">Web Design </td>

<td align="right">Aplikasi Web </td>

</tr>

<tr>

<td align="left">Selasa</td>

<td align="right">Database</td>

<td align="right">Matematika</td>

</tr>

<tr>

<td align="left">Rabu</td>

<td align="right">Bahasa Enggris </td>

<td align="right">RPL</td>

</tr>

</table>

</body>

</html>

clip_image022[5]

Gambar  Pengaturan teks pada tabel

Baca Selengkapnya

Pengenalan HTML

Dokumen HTML

HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam web browser. Ada dua cara untuk membuat web page, denghan HTML editor atau editor text biasa (misal : notepad). Untuk latihan buku ini kita menggunakan Macromedia Dreamweaver. clip_image002

Penamaan Dokumen

Dokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi ”.htm” atau ”.html”

Definisi Elemen

Dokumen HTML disusun elemen-elemen atau komponen dasar pembentu HTML. Contoh dari elemen dokumen HTML adalah : head , body, table, paragraf, list.

Definisi Tag

Tag digunakan untuk menandai elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar. Tag umumnya berpasangan, sebagai contoh <H1> Dengan </H1>. Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan : <namatag> - </namatag>

Baca Selengkapnya

List Dan Pilihan dengan HTML

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).

Contoh: Kita mau mengelompokkan data-data berikut : Pisang, Jambu, Apel, Anggur dapat kita kelompokkan ke dalam kelompok: Buah-buahan.

Ordered List

Untuk membuat list terurut nomor (ordered list), kita gunakan tag pembuka <ol> dan penutup </ol>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.ol kependekan dari Ordered List, li kependekan dari List Item.

Contoh – Listing   orderedlist1.html

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<p>Daftar Hari : </p>

<ol>

<li>Senin</li>

<li>Selasa</li>

<li>Rabu</li>

<li>Kamis</li>

<li>Jum'at</li>

<li>Sabtu</li>

<li>Minggu</li>

</ol>

<p>Daftar Kuliah : </p>

<ol>

<li>Web Design</li>

<li>Pemrograman web</li>

<li>Database </li>

</ol>

</body>

</html>

Nomor item ordered list secara default menggunakan angka 1,2,3,….dst.

Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ol>.

clip_image001

Gambar Contoh hasil list

Atribut type pada tag <ol> :

Type

Arti

I

Angka ditampilkan dengan angka romawi huruf besar

i

Angka ditampilkan dengan angka romawi huruf kecil

A

Angka ditampilkan dengan abjad huruf besar

a

Angka ditampilkan dengan abjad huruf kecil

Contoh - Listing : orderedlist2.html

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<p>Daftar Hari : </p>

<ol type="A">

<li>Senin</li>

<li>Selasa</li>

<li>Rabu</li>

<li>Kamis</li>

<li>Jum'at</li>

<li>Sabtu</li>

<li>Minggu</li>

</ol>

<p>Daftar Kuliah : </p>

<ol type="i">

<li>Web Design</li>

<li>Pemrograman web</li>

<li>Database </li>

</ol>

</body>

</html>

clip_image002

Gambar  Contoh hasil list

Unordered List

Untuk membuat list tidak terurut nomor (Unordered List), kita gunakan tag pembuka <ul> dan penutup </ul>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.ul kependekan dari Unordered List, li kependekan dari List Item

Contoh – Listing  : unorderedlist1.html

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<p>Daftar Hari : </p>

<ul>

<li>Senin</li>

<li>Selasa</li>

<li>Rabu</li>

<li>Kamis</li>

<li>Jum'at</li>

<li>Sabtu</li>

<li>Minggu</li>

</ul>

</body>

</html>

clip_image003

Gambar 5.3. Contoh hasil unordered list

Item unordered list secara default mengunakan noktah.Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut type pada tag <ul>.

Atribut type pada tag <ul> :

Type

Arti

Circle

Bullet Lingkaran

Disc

Bullet Titik

Square

Bullet Kotak

Contoh – Listing  : unorderedlist2.html

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<p>Daftar Hari : </p>

<ul type="circle">

<li>Senin</li>

<li>Selasa</li>

<li>Rabu</li>

<li>Kamis</li>

<li>Jum'at</li>

<li>Sabtu</li>

<li>Minggu</li>

</ul>

</body>

</html>

Keterangan : unordered list dengan type = circle.

clip_image004

Gambar  Contoh hasil pengaturan bullet

Nested List

List item dapat digunakan secara bersarang, maksudnya di dalam list ada list item lagi.

Contoh – Listing  : nestedlist.html

<html>

<head>

<title>Nested List</title>

</head>

<body>

<ol>

<li>Buah</li>

<ul type="circle">

<li>Semangka</li>

<li>Jambu</li>

</ul>

<li>Bunga</li>

<ul type="disc">

<li>Melati</li>

<li>Anggrek</li>

</ul>

<li>Kendaraan</li>

<ul type="square">

<li>Mobil</li>

<li>Sepeda Motor </li>

</ul>

</ol>

</body>

</html>

clip_image005

Gambar Contoh hasil nested list

Definition List

Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri

Contoh - Listing  : definitionlist.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Definition List</title>

</head>

<body>

<h3>Contoh Definition List</h3>

<dl>

<dt>Web Design</dt>

<dd>Belajar HTML - Macromedia Dreamweaver</dd>

<dt>Pemrograman Web</dt>

<dd>Belajar PHP MySQL</dd>

</dl>

</body>

</html>

clip_image006

Gambar  Contoh hasil definition list

Tag-tag List HTML

Tag Awal

Keterangan

<ol>

Mendefinisikan Ordered List

<ul

Mendefinisikan Unored List

<li>

Mendefinisikan List Item

<dl>

Mendefinisikan Definition List

<dt>

Mendefinisikan Definition Term

<dd>

Mendefinisikan Definition Description

Toolbar Dreamweaver untuk tag-tag list HTML

clip_image008

Gambar  Toolbar untuk tag list

Keterangan – tab Text

  • · ul : Unordered List
  • · ol : Ordered List
  • · li : List Item
  • · dl : Definition List
  • · dt : Definition Term
  • · dd : Definition Description

Baca Selengkapnya

HTML (HyperText Markup Language)

HTML yang akan dibahas meliputi beberapa tahap, yaitu level HTML, HTML Extension dan program Editor HTML. HTML adalah format data yang dipakai untuk membuat dokumen HyperText. Dokumen HTML disebut Mark Language, karena berisi tanda tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Pada sistem HyperText pada dokumen HTML, Anda tidak harus membaca dokumen secara urut dari atas ke bawah, melainkan cukup menuju pada topik tertentu secara langsung dalam dokumen. Ini dikarenakan dokumen tersebut menggunakan teks penghubung ke suatu topik/ dokumen lain secara langsung.

Sejak perkembangannya sampai sekarang ini telah tersedia bermacam-macam level HTML, antara lain HTML 1.0; HTML 2.0; HTML 3.0; HTML 3.2; dan HTML Extension.

* HTML 1.0

HTML level 1.0 adalah level pertama untuk HyperText Markup Language. Desainnya sederhana sekali, di antaranya heading, paragraph, hypertext, list dan format teks untuk tebal/ miring. Kelemahan HTML 1.0 adalah tidak ada fasilitas gambar, sehingga teks tak dapat diletakkan di sekeliling suatu image.

* HTML 2.0

HTML level 2.0 mencakup semua fasilitas level 1.0 ditambah dengan fasilitas untuk membuat form. Form ini dipakai dalam Web page untuk meminta saran dari pembaca, dan kotak penyuntingan (edit box). Dengan HTML 2.0, WWW dapat menjadi suatu media informasi dua-arah antara pemilik Web dengan pemakai Web, bukan hanya sekedar sistem penampil informasi.

* HTML 3.0

HTML level 3.0 sangat kompatibel dengan HTML level 2.0, tetapi disertai dengan beberapa fasilitas baru. Fasilitas baru tersebut antara lain penambahan fasilitas pembuatan tabel dan gambar dengan perintah FIGURE. Perintah FIGURE sendiri merupakan perkembangan dari perintah IMAGE .

* HTML 3.2

HTML 3.2 merupakan pengganti dari HTML 3.0 dengan beberapa tambahan, seperti applet Java (teks yang dapat diletakkan di sekeliling gambar), superscript, subscript, perataan pada tabel, background gambar dan warna, fasilitas frame dan sytle sheet ( pemisah layout halaman dengan isinya).

* HTML Extension

Salah satu tambahan pada HTML ini adalah tag < BLINK> yang membuat teks dalam tag tersebut tampil berkedip-kedip dalam Netscape Browser. Pada HTML ini terdapat bermacam-macam daya kreatif untuk mengembangkan HTML yang sangat diperlukan selama tidak mengganggu penampilan dokumen HTML pada browser. clip_image001

Program Editor HTML

Untuk membuat dokumen HTML, sebaiknya Anda menggunakan program editor teks seperti Notepad, Sidekick, dan WS dalam format Non Document untuk aplikasi DOS. Program WYSIWYG, seperti Microsoft Word dan Word Perfect for Win, tidak dapat dipakai untuk membuat dokumen HTML, karena program ini dianggap sebagai dokumen biasa dan tidak dapat diterjemahkan oleh Browser. Program tambahan yang dipakai untuk menyunting HTML adalah Word Internet Assistant dan WordPerfect Internet Publisher.

Selain program editor teks, Anda bisa menggunakan program editor khusus untuk membuat HTML, antara lain program editor HTML berbasis teks dan WYSIWYG yang tidak memerlukan browser lagi.

Baca Selengkapnya

Pemformatan Teks HTML

Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal, miring, digarisbawahi,dll.

Pemformatan Teks

  • Menebalkan huruf (bold)
  • Memiringkan huruf (italic)
  • Digarisbawahi
  • Mengecilkan huruf
  • Superscript
  • Subscript

Contoh – Listing : formatteks.html

<html>

<head>

<title>Format Teks</title>

</head>

<body>

<p><b>Tulisan ini ditebalkan (bold)</b></p>

<p><strong>Tulisan ini ditebalkan (strong)</strong> </p>

<p><em>Tulisan ini miring (emphasize) </em></p>

<p><big>Tulisan ini besar (big)</big></p>

<p><i>Tulisan ini miring (italic) </i></p>

<p>Tulisan ini <sub>subscript</sub> </p>

<p>Tulisan ini <sup>superscript</sup></p>

</body>

</html>

clip_image002

Gambar  Contoh formatteks.html

Teks Preformat

Tag <pre> dan </pre>dapat kita gunakan untuk menampilkan sesuai dengan dokumen web tersebut dalam editor teks.

Contoh – Listing : pre.html

<html>

<head>

<title>Tag Preformatted</title>

</head>

<body>

<pre>

This section provides a brief overview of the menus in Dreamweaver.

The File menu and Edit menu contain the standard menu items for

File and Edit.

menus, such as New, Open, Save, Save All, Cut, Copy, Paste, Undo,

and Redo

</pre>

<pre>

Ini adalah

preformatted text.

Menampilkan spasi

Dan line break apa adanya.

</pre>

<p>Tag PRE cocok digunakan untuk menampilkan kode bahasa pemrograman komputer :</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

clip_image004

Gambar  Contoh pre

Quotation

Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai suatu blok sendiri. Kebanyakan browser umumnya menggunakan margin untuk kutipan teks tadi untuk memisahkan dari teks yang mengelilinginya.

Contoh – Listing  : quotation.html

<html>

<head>

<title>quotation</title>

</head>

<body>

tulisan ini BUKAN quotation

<blockquote>

tulisan ini adalah quotation <br>

tulisan ini adalah quotation <br>

tulisan ini adalah quotation <br>

</blockquote>

</body>

</html>

clip_image006

Gambar Contoh qoutation

Tag-tag Pemformatan

Tag Awal

Keterangan

<b>

Mendefinisikan teks yang ditebalkan

<big>

Mendefinisikan teks yang besar ukurannya

<em>

Mendefinisikan teks yang ditekankan

<i>

Mendefinisikan teks yang dimiringkan – italic

<small>

Mendefinisikan teks yang dikecilkan ukurannya

<strong>

Mendefinisikan teks yang ditebalkan

<sub>

Mendefinisikan teks yang dijaikan subscript

<sup>

Mendefinisikan teks yang superscript

<pre>

Mendefinisikan teks preformatted

<blockquote>

Mendefinisikan quotation yang panjang.

Toolbar Dreamweaver untuk pemformatan teks

clip_image008

Gambar  Toolbar format teks

Keterangan :

  • · B : Bold
  • · I : Italic
  • · S : Strong
  • · Em : Emphasize
  • · [“”] : Blockquote
  • · PRE : Pre

Baca Selengkapnya

Elemen HTML yang diperlukan

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>,<head>, dan <body>.Setiap dokumen terdiri atas tag head dan body. Elemn Head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan ditampilkan di browser.clip_image001[4]

Secara umum dokumen web dibagi menjadi dua section, yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola sebagai berikut :

<html>

<head>

-- Informasi tentang dokumen HTML

</head>

<body>

-- Informasi yang akan ditampilkan dalam web browser

</body>

</html>

Setiap dokumen html harus diwali dengan menuliskan tag <html> dan tag </html> di akhir dokumen. Tag ini menandai dokumen HTML yang berarti adalah dokumen HTML dalam satu dokumen hanya ada satu elemen html.

Section atau elemen head ditandai dengan tag <head> diawal dan tag </head> diakhir. Section ini beiris informasi tentang dokumen HTML, mislnya informasi judul html yang ditandai dengan tag <title> dan diakhiri dengan tag </title>. Section body ditandai dengan tag <body> dan diakhiri dengan tag </body> diakhir. Section body merupakan isi dokumen yang akan ditampilakn pada browser.

Contoh – Listing  : contoh1.html

<html>

<head>

<title>Belajar Web Design</title>

</head>

ini adalah halaman HTML

<body>

</body>

</html>

clip_image001

Gambar  Contoh hasil di browser

Penjelasan Contoh

Tag pertama pada dokumen html anda adalah <html>,. Tag ini memberi tahu bahwa ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen anda adalah </html>. Tag ini memberi tahu browser bahwa ini adalah akhir dari dokuemn HTML. Teks antara <head> dan </head> adalah informasi header. Informasi header tidak ditampilkan pada window browser. Hanya teks yang berada diantara <body> dan </body> yang akan ditampilakan pada browser. Teks diantara <title> dan </title> adalah judul dokumen yang akan ditampilakn pada window caption.

Baca Selengkapnya

Penggunaan Tag HTML

Penggunaan Tag

· Tag HTML diapit dengan dua karakter kurung bersudut, < dan >.

· Tag HTML secara normal selalu berpasangan seperti <H!> dengan </H1>

· Tag HTML tidak ‘case sensitive’, berarti <H1> dama dengan <h1>

Atribut Tag

Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.

Tag berikut tidak mempunyai atribut : <body>. Tag <body> ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna putih.

Tag berikut mempunyai atribut : <body bgcolor=”red”>. Tag <body> ini mempunyai atribut bgcolor dengan nilai “red’. Sehingga background akan menampilkan warna merah.

Tag HTML

Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan keharusan untuk membuat dokumen HTML.Tag <html> sebagai pembuka dokumen HTML dan tag </html> sebagai penutup dokumen HTML.

Contoh – Listing :

<html>

........................

</html>

Tag Head

Merupakan tag setelah <html> untuk menuliskan keterangan tentang dokumen HTML. Isi teks diantara <head> dengan </head> tidak akan ditampilkan di dalam browser.

Contoh – Listing:

<head>

<title>Belajar Web Design</title>

</head>

Title

Merupakan tag yang digunakan untuk menuliskan judul dokumen HTML. Hasil tag ini akan ditampilkan dalam window caption browser.

Contoh – Listing:

<title>Belajar Web Design HTML</title>

Body

Merupakan section dalam dokumen HTML yang akan ditampilkan dalam browser.

Contoh – Listing :

<html>

<head>

<title>Belajar Web Design</title>

</head>

<body>

ini adalah section HTML yang ditampilkan di browser

</body>

</html>

Paragraf

Setiap paragraf harus dimulai dengan memberi tag <p>. Diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf, karena tag <p> tidak didefinisikan mempunyai tag akhir. Setiap paragraf harus dimulai dengan <p> kembali. Setiap pergantian paragraf ditandai dengan tag <p>

Contoh – Listing:

<html>

<head>

<title>Tag Paragraf</title>

</head>

<body>

<p>berikut ini adalah paragraf 1</p>

<p>berikut ini adalah paragraf 2</p>

<p>berikut ini adalah paragraf 3</p>

</body>

</html>

Contoh - Listing : paragraf2.html

<html>

<head>

<title>Paragraf</title>

</head>

<body>

<p>Pada tahun 1950-an Kolonel Sanders (pendiri KFC) mulai mengendarai mobilnya dari kota ke kota untuk memulai bisnis KFC-nya, dengan cara menawarkan resep rahasianya dari satu restoran ke restoran yang lainnya. Kadang beliau tidur di dalam mobilnya dan memakan ayam buatannya sendiri untuk bisa bertahan. Dia baru dapat mencapai tujuannya setelah bertemu dengan orang yang ke-1010. Orang tersebut berpikir ayam Kolonel tersebut cukup bagus untuk di jual ke publik

</p>

<p>Contoh lainnya Thomas Alfa Edison yang mengalami kegagalan sebanyak 9000 kali sebelum akhirnya ia menemukan bola lampu. Dia tidak menyesal dengan kegagalan-kegagalannya, bahkan ia berkata beruntung menemukan 8999 cara yang salah dalam membuat bola lampu. Kemudian ia dapat membuat 1093 paten, orang yang paling banyak memegang paten dalam sejarah Amerika</p>

</body>

</html>

clip_image002

Gambar  Contoh hasil paragraf2.html

Line Break

Kita dapat memaksa ganti baris pada dokumen web dengan tag <br>. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf.

Contoh – Listing :

<html>

<head>

<title>Ganti Baris</title>

<head>

<body>

ini adalah baris ke 1<br>

ini adalah baris ke 2<br>

ini adalah baris ke 3<br>

ini adalah baris ke 4<br>

ini adalah baris ke 5<br>

</body>

</html>

Heading

Tag heading aklan membuat tulisan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading dimanfaatkan untuk menandai judul topic atau untuk menunjukkan tingkat keberartian dati teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar.

Contoh – Listing  :

<html>

<head><title>Heading</title></head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

clip_image003

Gambar  Contoh heading

Garis Pembatas

Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag <hr>

Atribut

Keterangan

Align

Menentukan letak garis : center,left,right

Color

Menentukan warna garis

Size

Menentukan ukuran garis

Width

Menentukan tebal garis

Contoh – Listing :

<html>

<head>

<title>Horizontal Rule</title>

</head>

<body>

<p align=”center”>Paragraf pertama</p>

<hr align=”center” color=”#0000FF” size=”3” width=”90%”>

<p align=”center”>Paragraf keduapertama</p>

</body>

</html>

clip_image004

Gambar Garis Pembatas

Komentar

Dalam sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. Untuk membuat komentar dengan menggunakan tag:

<!-- sebagai awal dan tag --> sebagai akhir komentar.

Contoh – Listing :

<html>

<head>

<title>Horizontal Rule</title>

</head>

<body>

<!-- komentar ni tidak akan ditampilkan di browser -->

<p>Tulisan ini akan ditampilkan di browser</p>

</body>

</html>

Toolbar Dreamweaver untuk dasar HTML

Macromedia Dreamweaver sebagai salah satu aplikasi untuk membuat dan mengembangkan web menyediakan toolbar untuk semua tag dasar HTML. Perhatikan gambar 2.5 dan gambar 2.6 yang menunjukkan toolbar untuk dasar HTML.

clip_image006

Gambar  Toolbar tab Text

Keterangan - tab Text :

· h1 : heading 1

· h2 : heading 2

· h3 : heading 3

· br : Line Break

· p (dibalik) : Paragraf

clip_image008

Gambar Toolbar tab Comment

Keterangan – tab common : terdapat toolbar untuk tag komentar

Baca Selengkapnya
Forum Multimedia Edukasi www.formulasi.or.id
Facebook Twitter Opini
Forum Multimedia Edukasi www.formulasi.or.id

Kategori