Tabel HTML

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom
menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan
kelompok data dalam satu kesatuan.
Sebuah tabel mempunyai judul, tempat anda menjelaskan kolom/baris yang dilibatkan, baris untuk
informasi dan sel untuk setiap itemnya. Pada tabel berikut, kolom pertama berisi informasi header,
setiap baris menjelaskan sebuah tag tabel HTML dan setiap sel berisi sebuah pasangan tag atau
penjelasan dari fungsi tag.


Atribut Tabel
Catatan: atribut yang didefinisikan dalam <TH>…</TH> atau <TD>…</TD> akan menggantikan
alignment default yang didefinisikan dalam <TR>…</TR>.


Contoh membuat tabel dalam HTML :
________________________________________________________________________________

<HTML>
<BODY>
<P>Setiap tabel dimulai dengan sebuah tag TABLE.<BR>
Setiap baris dimulai dengan sebuah tag TR.<BR>
Setiap data dimulai dengan sebuah tag TD.</P>
<H4>Satu Kolom:</H4>
<TABLE BORDER=1>
<TR>
<TD>Kolom 1</TD>
</TR>
</TABLE>
<H4>Satu Baris dan Tiga Kolom:<H4>
<TABLE BORDER=1>
<TR>
<TD>Kolom 1 </TD>
<TD>Kolom 2 </TD>
<TD>Kolom 3 </TD>
</TR>
</TABLE>
<H4>Dua Baris Tiga Kolom:</H4>
<TABLE BORDER=1>
<TR>
<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>
<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>
</TABLE>
<H4>Tabel Tanpa Border:</H4>
<TABLE BORDER=0>
<TR>
<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>
<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>
</TABLE>
</BODY>
</HTML>
________________________________________________________________________________


Contoh tabel dengan Caption dan Header
________________________________________________________________________________

<HTML>
<BODY>
<H4>This tabel has a caption, and a thick border</H4>
<TABLE BORDER=4>
<CAPTION>This is a Caption</CAPTION>
<TABLE BORDER=6>
<TR>
<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>
<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>
</TABLE>
<H4>Tabel Header:</H4>
<TABLE BORDER=1>
<TR>
<TH>Nama</TH>
<TH>Alamat</TH>
<TH>Telepon</TH>
</TR>
<TR>
<TD>Jon Keboy</TD>
<TD>Jl. Angker Indah</TD>
<TD>7878787</TD>
</TR>
<TR>
<TD>Frank de Pengky</TD>
<TD>Jl. Ongol-ongol</TD>
<TD>7779988</TD>
</TR>
</TABLE>
</BODY>
</HTML>
________________________________________________________________________________


Jumlah baris tabel ditentukan dengan banyaknya <TR>..</TR> yang dituliskan dalam elemen tabel,
dari <TABLE>…</TABLE>
Jumlah kolom dalam tabel ditentukan dengan banyaknya <TD>…</TD> di dalam setiap definisi baris,
dari <TR>…</TR>
Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.

Link List HTML

A. LINK HTML
Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu
teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser Web
akan menyorot (“highlight”) teks atau gambar yang diidentifikasi sebagai link dengan warna dan /
atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (hyperlink atau link).
- TAG ANCHOR
Tag <A> digunakan untuk membuat suatu link kepada dokumen lain dalam web dengan
menambah atribut “href” sebagai definisi lokasi link. Contoh :

<A HREF=”http://www.microsoft.com”> clik here to show it</A>

Ada tiga jenis link yaitu : Link relatif, Link absolute, Link dalam dokumen yang sama.
- Link Relatif
Digunakan jika membuat suatu link pada page anda ke page lain pada komputer yang sama.
Bila dua page berada pada direktori sama, anda dapat menuliskan nama file html seperti
berikut :
<A HREF = “page_2.html”> Next </A>

- Link Absolut
Digunaka apabila anda membuat link ke page web lain yang berada pada web site lain di
internet. Contoh:
<A HREF = “http://www.mangosoft.com”>Click here if you want to see my home page</A>

- Link ke bagian lain dalam dokumen
Link ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam
browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk
penelusuran dokumen dapat dimudahkan dengan membuat link antar bagian, dengan menandai
setiap bagian tersebut dengan memberinya nama. Sehingga pada tempat di dalam dokumen
akan ada bagian yang bernama, dan di bagian lainnya dapat diletakkan link untuk menuju ke
bagian-bagian tersebut.
Memberi nama suatu bagian dalam dokumen,
Letakkan kursor pada baris atau teks yang menjadi awal dari bagian tersebut,
Sisipkan nama bagian tersebut dengan: <A NAME= “nama bagian”>
Membuat link yang menuju pada bagian dokumen yang sama dapat dilakukan dengan cara yang
sama seperti link absolut atau relatif, namun nama dokumen dalam link diganti dengan nama
bagian dokumen dengan ditambah tanda # yang ditulis sebelum nama bagian tersebut. Contoh:
<A HREF= “#nama bagian”> Bagian tentang link</A>


Contoh Link.html
________________________________________________________________________________

<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME="TOP">
<A HREF="#LINK RELATIF">Link relatif</A><BR>
<A HREF="#LINK ABSOLUT">Link Absolut</A><BR>
<A HREF="#LINK WITH NEW WINDOW">Link with New Window</A><BR>
<A HREF="#NO UNDERLINE">Link without underline</A><BR>
</A>
<BR>
<A NAME="LINK RELATIF">
<H1>Link secara relatif, lihat contoh di bawah ini:</H1>
<P>
<A HREF="page_2.html">Klik di sini </A>jika mau ke halaman berikutnya.
</P>
</A>
<A NAME="LINK ABSOLUT">
<H1>Link secara absolut, lihat contoh di bawah ini:</H1>
<P>
Klik <A HREF="http://www.mangosoft.com">my home page</A> if you want to
see my personality.
</P>
</A>
<A NAME="LINK WITH NEW WINDOW">
<H1>Membuat window baru untuk link:</H1>
<P>
Open <A HREF="http://www.mangosoft.com" target="_blank"> my home page</A>
with new window.
</P>
</A>
<A NAME="NO UNDERLINE">
<H1>Membuat link tanpa garis bawah:</H1>
<P>
<A HREF="http://www.mangosoft.com" style=" text-decoration:none">Klik
This Link </A> ,
Looks it's not use underline.
</P>
</A>
<HR>
<A HREF="#TOP"> kembali ke atas</A>
<HR>
</BODY>
</HTML>
________________________________________________________________________________


B. LIST HTML
List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu, jenisjenis
list dalam HTML adalah:
list tanpa nomor
list dengan nomor
list definisi
Unordered List (List tanpa nomor)
Untuk membuat list tanpa nomor (bulleted list):
- Mulai dengan tag pembuka list <UL>
- Masukkan setiap item list dengan menggunakan tag <LI> kemudian tuliskan itemnya (satu
saja), tag penutup item </LI>
- Ulangi lagi langkah kedua untuk menuliskan item list berikutnya
- Akhiri seluruh list dengan sebuah tag penutup </UL>
Unordered list disebut juga sebagai bulleted list, mempunyai bullet default berupa noktah. Jenis bullet
bisa diubah contohnya dengan mengisi atribut “type” dengan disk atau box.
Ordered List (List dengan nomor)
Untuk list dengan nomor, disebut juga ordered list, tag <UL> dubah dengan <OL>, demikian juga
</UL> diganti dengan </OL>. Nomor item secara default adalah menggunakan angka 1,2,3..dst sampai
dengan sejumlah item dalam list tersebut. Untuk keperluan penyajian tertentu kita dapat mengubah
nomor dalam ordered list dengan model angka yang lain, dengan mengisi atribut “type” pada tag <OL>

Contoh sintaks List HTML
________________________________________________________________________________


<HTML>
<BODY>
<H4>Default Bullets List:</H4>
<UL>
<LI>Gemblonk</LI>
<LI>Combro</LI>
<LI>Lontong</LI>
</UL>
<H4>Disc Bullets List:</H4>
<UL TYPE="disc">
<LI>Gado-gado</LI>
<LI>Ketoprak</LI>
<LI>Pangsit</LI>
</UL>
<H4>Circle Bullets List:</H4>
<UL TYPE="circle">
<LI>Bajigur</LI>
<LI>Sekutenk</LI>
</UL>
<H4>Nested List:</H4>
<UL TYPE="circle">
<LI>Kue Cucur</LI>
<LI>Uli</LI>
<LI>Tape</LI>
<UL TYPE="square">
<LI>Tape Ketan</LI>
<LI>Tape Singkong</LI>
</UL>
<LI>Kue Basah</LI>
</UL>
</BODY>
</HTML>
________________________________________________________________________________

Frame pada HTML

Pada tulisan kali ini akan dibahas mengenai frame pada HTML.

Windows dalam browser yang dibagi menjadi beberapa windows disebut Frame. Model ini
sering digunakan untuk lebih memperjelas penyajian informasi, dengan menu sajian selalu
ditampilkan.

Sintaks:
<FRAMESET BORDER=# {[ROWS|COLS]}={#,[#[,...]]}>
<FRAME SRC=”url” NAME=”nama frame”>
</FRAMESET>

Target Frame
Nama frame predefined: _self, _top, _parent, _blank, sering digunakan untuk menunjukkan
target penampilan dari suatu link.


Atribut NAME merupakan atribut wajib, jika frame yang bersangkutan akan dijadikan sebagai
tempat untuk menampilkan URL suatu link.
IFRAME
Pada browser Internet Explorer versi 3.0 dan selanjutnya dikembangkan sebuah model FRAME
yang disebut sebagai IFRAME, memungkinkan pemrograman web untuk membuat frame
windows yang mengambang, frame ini berlaku mirip seperti suatu text box, jika browser
melakukan secroll maka frame ini juga turut terscroll.


Sintaks:
<IFRAME NAME=”nama frame” SRC=”url” ROWS=# COLS=#>
</IFRAME>

________________________________________________________________________________


Contoh Frame berbentuk Kolom:
<HTML>
<FRAMESET COLS="25%,50%,25%">
<FRAME SRC="tabel6.html">
<FRAME SRC="form1.html">
<FRAME SRC="list3.html">
</FRAMESET>
</HTML>


Contoh Frame berbentuk baris:
<HTML>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="tabel6.html">
<FRAME SRC="form1.html">
<FRAME SRC="list3.html">
</FRAMESET>
</HTML>


Contoh frame campuran:
<HTML>
<FRAMESET ROWS="25%,75%">
<FRAME SRC="tabel6.html">
<FRAMESET COLS="75%,25%">
<FRAME SRC="form1.html">
<FRAME SRC="list3.html">
</FRAMESET>
</FRAMESET>
</HTML>



Contoh Frame navigasi:
Frame3.html:
<HTML>
<FRAMESET COLS="25%,75%">
<FRAME SRC="menu.html">
<FRAME SRC="open.html" NAME="showframe">
</FRAMESET>
</HTML>
Menu.html:
<HTML>
<H4>Contoh-contoh HTML:</H4>
<A HREF="image3.html" TARGET="showframe">Image HTML</A><BR>
<A HREF="list1.html" TARGET="showframe">List HTML</A><BR>
<A HREF="form1.html" TARGET="showframe">Form HTML</A><BR>
</HTML>
Open.html:
<HTML>
<H4>Klik pada menu contoh-contoh HTML</H4>jika ingin melihat
contoh html-html yang sederhana sekaliiii!
</HTML>
Menu.html
________________________________________________________________________________

HTML tutorial : Attribute tag (Link, Body dan Image)

Masih melanjut dari tutorial sebelumnya mengenai tag pada HTML, kali ini kita akan membahas mengenai penyisipan Link, Body dan juga menambah image. Langsung saja kita mulai dari membuat sebuah link.

A. Tag <a>...</a>

Anda tentu sering surfing di internet dan mengklik suatu tulisan atau gambar yang menuju

halaman website lainnya. Tulisan atau gambar itu adalah link. Ya, link adalah tulisan atau

gambar yang merujuk/membuka halaman suatu website. Segala tulisan atau tag lainnya yang

diapit tanda <a> dan </a> akan dianggap link oleh browser.

Silahkan ketikan coding berikut

__________________________________________________________________________________

<html>

<head>

<title>Atribut dari tag A</title>

</head>

<body>

<p>Tag a digunakan untuk menuju/membuka link alamat suatu website. Link merupakan

tulisan yang merujuk suatu alamat website. Semua tulisan ataupun tag yang berada

dalam tag &lt;a&gt; dan &lt;/a&gt; akan dianggap link oleh browser. Atribut yang

sangat penting dalam tag a adalah atribut <i>href</i>. Isi dari atribut ini

adalah alamat website yang dituju.</p>

<p>Contoh link ke alamat Google</p>

<a href="http://www.google.com">Ini link ke google.com</a>

<p>Link juga mempunyai atribut <i>target</i> yang fungsinya berhubungan dengan

window. Isi dari atribut target dapat berupa "_blank", "_self", "_parent",

"_top". Atribut "_blank" akan membuka alamat website pada window yang baru. Isi

atribut default dari target adalah "_self" dimana alamat website akan dibuka pada

window yang sama.

<p>Contoh link dengan atribut target="_blank"</p>

<a target="_blank" href="http://www.rahasia-webmaster.com">Bagaimana Menjadi

Webmaster dalam 30 Hari</a>

<p>Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena Thomas

Alfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukan

bohlam.</p>

</body>

</html>

__________________________________________________________________________________

Simpan dengan nama tag_a.html, maka hasilnya akan seperti gambar berikut :

B. Tag <body>...</body>

Seperti namanya body artinya tubuh. Maka atribut yang diset pada tag body akan berpengaruh

pada seluruh tubuh/body dokumen. Pada tag body terdapat beberapa atribut namun ada dua

yang terpenting yaitu background dan bgcolor. Atribut background digunakan untuk

membuat sebuah gambar menjadi latar dari halaman. Sedangkan bgcolor digunakan untuk

menset warna dari latar halaman website. Kali ini yang akan dibahas hanyalah tag bgcolor

karena tag background nilainya sama dengan tag image yang akan dibahas kemudian.

Silahkan ketikan coding berikut

__________________________________________________________________________________

<html>

<head>

<title>Atribut dari Tag Image</title>

</head>

<body bgcolor="#000000" link="http://www.google.com">

<font color="#ffffff" face="verdana">

<p><b>Ini body dengan bgcolor="#000000" atau samadengan "black"</b><br> dan font

color diset ="#ffffff" atau samadengan "white".</p>

<p>Di dalam html anda dapat menggunakan perpaduan warna antara angka dan huruf

seperti "#cgcgcg" akan menghasilkan warna abu-abu.</p>

</body>

</html>

__________________________________________________________________________________

Simpan dengan nama tag_body.html, maka hasilnya akan nampak seperti gambar berikut:

C. Tag <img>

Suatu website yang bagus pasti memiliki gambar di dalamnya. Dan suatu waktu

anda tentu ingin menambahkan gambar didalam website anda. Untuk menampilkan gambar

pada halaman dapat digunakan tag <img>. Format file yang dapat didukung oleh tag img

bermacam-macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag img memiliki beberapa atribut

yaitu

‐ src : letak file gambar yang akan ditampilkan

‐ border: tebal bingkai gambar

‐ height: menentukan tinggi image/gambar

‐ width: menentukan lebar image/gambar

Nilai dari atribut src jika letak file gambar berada pada direktori yang sama dengan direktori file

html anda. Maka cukup tuliskan nama filenya saja, contohnya src=”nama_file.jpg”. Dan jika

letak filenya berada pada sub folder/direktori maka nilainya adalah

src=”sub_folder/nama_file.jpg”. Lalu bagaimana jika letaknya pada folder/direktori diatas

file html saya?. Caranya hampir sama hanya saja ditambahkan tanda ../(titik dua dan slash).

Yang artinya pindah satu folder keatas, jika letaknya di dua folder diatas file html saya. Sama

tinggal menambah ../../ (artinya pindah dua folder ke atas). Contohnya

src=”../nama_folder/nama_file.jpg”.

Untuk contoh kali ini masuklah ke direktori/folder HTML yang telah anda buat sebelumnya.

Buatlah satu buah folder dalam direktori HTML tersebut. Dan berilah nama folder itu gambar.

Lalu copykan satu gambar apa saja kedalam folder gambar tersebut.

Lalu ketiklah kode berikut ini. Ingat ganti nilai dari src sesusai dengan nama file gambar anda.

__________________________________________________________________________________

<html>

<head>

<head>

<title>Atribut dari Tag img</title>

</head>

<body>

<p><b>Tag img hanya dengan atribut <i>src</i></b></p>

<img src="../gambar/e-book.jpg">

<p><b>Tag img dengan border="1"</b></p>

<img src="../gambar/e-book.jpg" border="1"</b><p>

<p><b>Tag img dengan height dan width</b></p>

<img src="../gambar/e-book.jpg" border="1" height="300" width="200">

</body>

</html>

__________________________________________________________________________________

Lalu simpan dengan nama tag_img.html.

HTML tutorial : Attribute tag (Form, Input, Select dan Option)

Melanjut dari tutorial sebelumnya, pada tulisan kali ini masih membahas seputar fungsi Tag pada codingan HTML, langsung saja kita mulai dari Form.


A. Tag <form>...</form>
Tag <form> berguna untuk mengirimkan(mem-post) variabel yang bersisi data ke file tujuan
yang memproses variabel tersebut. Tag-tag yang biasa digunakan bersama tag form adalah tag
<input> dan <textarea>.
Atribut form yang banyak digunakan adalah method dan action. Atribut method menentukan
jenis pengiriman data bisa berupa “POST” atau “GET”. Sedangkan action adalah file tujuan yang
akan memproses data yang ada diantara tag <form>...</form>.
Untuk lebih jelasnya lihatlah cuplikan script di bawah ini.
__________________________________________________________________________________

<form action="coba.php" method="post">
......................................
ISI
......................................
</form>
__________________________________________________________________________________


Seperti dikatakan sebelumnya tag form tidak dapat digunakan sendirian. Ia harus mempunyai
data didalamnya untuk itulah digunakan tag-tag lain. Tag yang sering digunakan adalah.


B. Tag <input>
Tag <input> memiliki atribut type yang fungsinya sangat vital dalam output tampilan. Isi dari
atribut type dapat menentukan jenis tampilan apakah itu textbox, password box, checkbox,
radio button dan sebagainya.
Daripada banyak berteori lebih baik kita praktek saja. Seperti biasa buat file baru dan ketik
kode di bawah ini.
__________________________________________________________________________________

<html>
<head>
<title>Atribut tag Form dan Input</title>
</head>
<body><font face="verdana" size="2">
<form action="coba.php" method="post">
<p><b>Tag input dengan atribut type="text"</b><br>
<input type="text" name="teks_ku" size="16" maxlength="20"><br>
Ini textbox dengan nama <i>teks_ku</i> ukuran <i>16 chr</i> dan maksimal karakrer
yang dapat ditampung <i>20 chr(character)</i>.</p>
<p><b>Tag input dengan atribut type="password"</b><br>
<input type="password" name="password_ku" size="16" maxlength="20"<br>
Ini passwordbox dengan nama <i>password_ku</i> ukuran <i>16 chr</i> dan maksimal
karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>
<p><b>Tag input dengan atribut type="radio"</b><br>
<input type="radio" name="radio_ku" value="isi_1">Radio 1 --> nama
<i>radio_ku</i> isi/value <i>isi_1</i><br>
<input type="radio" name="radio_ku" value="isi_2">Radio 2 --> nama
<i>radio_ku</i> isi/value <i>isi_2</i><br>
<b>Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk
membuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahui
perbedannya.</b></p>
<p><b>Tag input dengan atribut type="checkbox"</b><br>
<input type="checkbox" name="checkbox_ku_1" value="isi_1">Checkbox 1 --> nama
<i>checkbox_ku_1</i> isi/value <i>isi_1</i><br>
<input type="checkbox" name="checkbox_ku_2" value="isi_2">Checkbox 2 --> nama
<i>checkbox_ku_2</i> isi/value <i>isi_2</i><p>
<p><b>Tag input dengan atribut type="submit"</b><br>
<input type="submit" value="Tombol Submit"><br>
Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang ada
pada form ke file tujuan (action="file_tujuan"))</p>
<p><b>Tag input dengan atribut type="reset"</b><br>
<input type="reset" value="Bersihkan"><br>
Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh isian
form. Coba isikan semua textbox dan radio lalu tekan tombol ini.</p>
<p><b>Tag input dengan atribut type="hidden"</b><br>
<input type="hidden" value="data_ku" name="data">

Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah
didefinisikan. Dan tidak menampilkan output apapun.</p>
<p><b>Tag input dengan propeti type="image"</b><br>
<input type="image" src="letak_file_gambar_anda" height="98" width="98"><br>
Image memiliki fungsi yang sama dengan type submit</p>
</form></font>
</body>
</html>
__________________________________________________________________________________


Simpan dengan nama tag_form_input.html dan jalankan. Hasilnya akan seperti yang terlihat
pada gambar 2.4.


C. Tag <select>...</select> dan <option>
Mengapa kita langsung membahas 2 tag?. Pertanyaan yang bagus dan jawabannya sama
dengan dengan pembahasan diatas. Tag select tidak bisa berdiri sendiri dan harus
menggandeng tag option untuk dapat menampilkan output. Dan cara kerjanya hampir sama
dengan tag radio hanya saja tag select lebih singkat.



Ketik coding seperti berikut
__________________________________________________________________________________


<html>
<head>
<title>Propeti tag Select dan Option</title>
</head>
<body>
<p><b>Penggunaan select dan dan option</b></p>
<p>Daftar kategori silahkan pilih kategori</p>
<form action="coba.php" method="post">
Kategori: <select name="Pilihan">
<option value="Kategori 1">Kategori 1
<option value="Kategori 2">Kategori 2
<option value="Kategori 3">Kategori 3
</select>
<p><input type="submit" value="KIRIM"></p>
</form>

</body>
</html>
__________________________________________________________________________________


Simpan dengan nama tag_form_select.html lalu jalankan pada browser. Ingat agar Save as
type nya adalah HTML Document.

HTML tutorial : Attribute tag (Paragraf, Font, dan Table)

Ada banyak macam attribute dari tag pada pengkodean menggunakkan HTML, pada kesempatan kali ini, saya akan membahas 3 dari attribute tersebut yaitu <p> </p>, <font> </font>, dan juga <table> </table>.

Silahkan buka software pembuat HTML yang anda pakai, disini saya menggunakan PHP Designer.
Buat lembar kerja baru untuk HTML, maka akan nampak sebuah lembar kerja kosong seperti pada Microsoft Word.
Langsung saja kita mulai dari attribute yang pertama tag <p><p> :

A. Tag <p>…</p>
Tag <p> digunakan untuk membuat paragraf dalam sebuah halaman web. Kita semua tahu
kalau paragraph ada yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih memperjelas
ketik kode di bawah ini.
__________________________________________________________________________________

<html>
<head>
<title>Atribut Tag <P></title>
</head>
<body>
<p align="left"><b>Teks ini berada di kiri</p>
<p align="center">Teks ini berada di tengah</p>
<p align="right">Teks ini berada di kanan</b></p>
<p align="justify">Paragraph ini bertipe justify. Dimana semua teks akan dibuat
lurus sama dengan batas tepi halaman. Oh ya, tag &lt;p&gt;&lt;/p&gt; merupakan
default atau bentuk baku tag &lt;p&gt;&lt;/p&gt; dimana teks atau paragraf akan
berformat rata kiri. Jika anda tidak memberi atribut <i>align</i> pada tag
&lt;p&gt; maka browser akan menganggap rata kiri.</p>
Temukan rahasia menjadi webmaster dalam 30 hari hanya di http://www.rahasia-webmaster.com/
</body>
</html>

__________________________________________________________________________________

Setelah selesai simpan file tersebut dengan mengklik menu File – Save. Akan muncul kotak
dialog Save, arahkan ke drive C:\ lalu HTML(jika anda membuat folder lain silahkan simpan di
folder anda tersebut) lalu Bab 2. Pada isian File Name isikan tag_p.html dan pastikan Save as
Type adalah HTML Document. Untuk menjalankan anda cukup tekan tombol F5 maka akan
muncul output dari kode anda.

B. Tag <font>…</font>

Fungsi tag <font> adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf. Pada bab 1

telah kita singgung penggunaan atribut font.

Namun kita akan lebih bereksperimen dengan atribut ini.

Seperti biasa klik File – New – HTML/XHTML.

Ketik kode di bawah ini.

__________________________________________________________________________________

<html>

<head>

<title>Atribut dari Tag Font</tile>

</head>

<body>

<p><font face="Arial">Ini Font Arial</font></p>

<p><font face="Arial"><i>Ini Font Arial dan miring</i></font></p>

<p><font face="verdana" size="4" color="blue"><b>Ini Font Verdana berukuran 12 pt

berwarna biru sekaligus tebal</b></font>

<p align="center"><font face="Tahoma" color="red"><b>Ini Font Tahoma berwarna

merah, tebal dan berada di tengah</b></font><p>

<p align="center"><font face="Arial" color="red">Ini Font Arial berwarna Merah,

</font><font face="Verdana" color="blue">Sedangkan ini adalah font Verdana

berwarna biru</font></p>

</body>

</html>

__________________________________________________________________________________

C. Tag <table>...</table>

Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Lihat tabel daftar tag pada

bab 1 untuk melihat daftar atributnya. Dalam tag <table> juga terdapat 2 tag yang penting

yang penting yaitu tag <tr></tr> untuk membuat baris dan tag <td></td> untuk membuat

kolom.Tag <table> adalah tag yang penting dalam pendesainan sebuah tampilan situs. Jadi

anda harus cukup menguasai tag ini.

OK, sekarang buatlah file baru seperti biasa klik File – New – HTML/XHTML. Ketik kode

dibawah ini.

__________________________________________________________________________________

<html>

<head>

<title>Atribut dari tag tabel</title>

</head>

<body>

<p><b>Membuat Tabel</b></p>

<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"

cellspacing="0" width="100%">

<tr> <!-- <tr> artinya membuat sebuah baris -->

<td>Ini kolom 1 pada baris 1</td> <!-- <td> = membuat sebuah kolom. -->

<td>Ini kolom 2 pada baris 1</td> <!-- </td> mengakhiri sebuah kolom -->

</tr> <!-- mengakhiri sebuah baris -->

<tr>

<td>Ini kolom 1 pada baris 2</td>

<td>Ini kolom 2 pada baris 2</td>

</tr>

</table>

<p><b>Contoh 2: Membuat Tabel</b></p>

<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"

cellspacing="0" width="100%">

<tr bgcolor="yellow">

<td align="center">Ini kolom 1 pada baris 1</td>

<td align="right">Ini kolom 2 pada baris 1</td>

</tr>

<tr>

<td align="center" bgcolor="red"><font color="white">Ini kolom 1 pada baris

2</font></td>

<td align="right">Ini kolom 2 pada baris 2</td>

</tr>

</table>

<p><b><font color="blue">Tabel sebagai bingkai dari paragraf</font></b></p>

<table border="1" style="border-collapse: collapse" cellpadding="8"

bgcolor="white" width="100%" bordercolor="black">

<tr>

<td><p>Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web.

Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman

web.</p>

<p>Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi.

Sebenarnya itu adalah tabel hanya saja atribut <font

color="red"><b>border="0"</b></font> sehingga tabel seakan tidak

ada(transparan).</p>

<p>Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai

paragraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama.

Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel

yang berada di dalam tabel utama</p>

<p align="center">

<!-- tag <table> untuk tabel anak -->

<table border="1" style="border-collapse: collapse" bgcolor="white"

bordercolor="black" cellpadding="8" width="80%">

<tr bgcolor="yellow">

<td><b>Nama Barang</b></td>

<td><b>Harga Barang</b></td>

</tr>

<tr>

<td>Monitor</td><td>Rp. 500.000,-</td>

</tr>

<tr>

<td>CDRW</td><td>Rp. 245.000,0</td>

</tr>

<!-- </table ini untuk menutup tabel anak -->

</table>

</tr>

</table>

__________________________________________________________________________________

Setelah itu simpan dengan nama tag_tabel.html

PENGENALAN HTML

Nama     : Rizky Chandra

NPM       : 56410168

Kelas      : 2IA08

Tugas Softskill Pengantar Web Science Pertemuan I

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Untuk mempelajari HTML saat ini tidaklah sulit karena sudah banyak program yang mampu menghasilkan dokumen dalam format HTML, misalnya semua produk Microsoft office, MotMetal, HotDog, HTMLLed dsb. Bahkan dengan hadirnya Microsoft Frontpage 2000 dan Frontpage XP (experience) untuk membuat dokumen atau web page sudah sangat mudah sekali, karena berbagai kebutuhan yang berhubungan dengan pembuatan web page sudah tersedia seperti component, hyperlink dsb.

Penamaan Dokumen

            File yang disimpan dalam format HTML   akan berekstensi HTM atau HTMl. File yang berakhiran HTM atau HTML ini sama untuk berbagai jenis sistem operasi seperti Linux, Unix, Windows dsb.

Elemen HTML

            Dokumen HTML disusun oleh elemen-elemen. “Elemen “ adalah merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Bebrapa contoh elemen adalah head, body , table, paragraf , list. Elemen dapat berupa teks murni atau buakan teks atau keduanya.

Definisi TAG

            Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan TAG.

Petunjuk menggunakan TAG adalah :

' Tag HTML diapit dengan dua karakter kurung bersusdut (angle bracket) < dan >

' Tag HTML secara normal selalu berpasangan seperti <b> dan </b>

' Tag pertama dalam suatu pasangan adalah tag awal dan tag yang kedua merupakan tag

      akhir

' Tag HTML tidak case sensitive . <b> berarti sama dengan <B>

' Jika dalam suatu tag ada tag lagi maka penulisan tag akhir tidak boleh bersilang harus 

     berurut. Misalnya <b><I>Huruf Tebal dan Miring</I><b>

Gunakan tag dengan huruf kecil (lowercase)

Nama elemen ditunjukkan dengan nama tagnya. Suatu elemen didalam dokumen HTML harus ditandai dengan penulisan tagnya yang berpasangan. Ada beberapa elemen yang tidak mengharuskan tagnya dituliskan secara berpasangan, elemen tersebut adalah :

' paragraf dengan tag <p>

' ganti baris- line break dengan tag<br>

' garis datar- horizontal rule dengan tag <hr>

' list item dengan tag <li>

Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan :

            <namatag>    ……..  </namatag>

Elemen HTML yang dibutuhkan

            Elemen yang dibutuhkan untuk membuat suatu dokumenHTML dinyatakan dengan tag <html>, <head>, dan <body> berikut tag-tag pasangannya.

Setiap dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang sebenarnya tersusun dari link, grafik, paragraf dan elemen lainnya.

Secara umum dokumen web dibagi menjadi dua bagian yaitu  head dan body. Sehingga setiap dokumen html harus mempunyai pola dasar sebagai berikut :

            <html>

            <head>

                        ……informasi tentang dokumen HTML

            </head>

            <body>

                        ……informasi yang ditampilakn dalam browser web

            </body>

            </html>

 setiap dokumen  html harus diawali dengan menuliskan tag <html> dan tag</html> diakhir dokumen. Tag ini menandai bahwa dokumen ini adalah dokumen HTML. Dalam satu dokumen hanya ada satu elemen html.

Elemen head ditandai dengan tag <head> dan diakhiri dengan tag </head>. Bagian ini berisi informasi tentang dokumen HTMLnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampailkan pada caption bar dari window browser, ditandai dengan menggunakan tag <title> dan diakhiri dengan </title>.

Elemen body ditandai dengan tag <body> dan diakhiri </body>. Bagian ini merupakan elemen terbesar di dalam dokumen html. Elemen ini berisi isi dokumen yang akan ditampilkan pada browser, meliputi paragraf, grafik, link, tabel dsb.

Persyaratan system

¨ Sebuah komputer yang siap web. Komputer dengan windows 95/98/NT, Mac atau

    Unix

¨ Editor teks, notepad atau lainnya

¨ koneksi ke server web(kalau mungkin koneksi ke internet)

¨ Browser web, direkomendasikan Internet Explorer atau Netscape navigator.

Tag-Tag Dasar HTML

            Tag dasar berarti elemen dasar. Dokumen HTML secara mendasar akan terdiri atas teks informasi.

           

HTML

            Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen HTML.

<html> di awal dokumen dan </html> di akhir dokumen.

Head

            Merupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan

<head> di awal setelah <html>, dan </head> di akhir section head

Title

            Merupakan tag di dalam head yang harus dituliskan untuk memberikan judul/ informasi pada caption browser web tentang topik atau judul dari dokumen web yang ditampilkan dalam browser.

<title> judul dokumen</title>

Body

            Merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen  yang akan ditampilkan di dalam browser harus dituliskan.

<body> di awal, segera setelah tag </head>

</body> di akhir, diletakkan sebelum tag </html>

Paragraf

            Informasi yang disajikan dalam dokumen harus mengikuti kaidah kaidah dalam penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraf.

Setiap paragraf harus dimulai dengan memberi tag <p>. diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf. Setiap pergantian paragraf harus dimulai dengan <p> kembali.

Contoh Pembuatan HTML

Ikuti seperti gambar berikut, maka hasil akan seperti pada gambar ke-2 saat dijalankan di browser :

Line Break

            Kita dapat memaksakan ganti baris pada dokumen web. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf. Untuk menampilkan suatu teks ditampilkan pada baris yang baru dalam suatu paragraf, maka harus digunakan tag <br> sebelum teks yang dimaksud dituliskan.

Contoh Line Break

Ikuti seperti gambar berikut, maka hasil akan seperti pada gambar ke-2 saat dijalankan di browser :

Heading

            Teks dalam dokumen umumnya mempunyai judul topik, pada dokumen HTML judul ini disebut heading. Heading tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan nomor 6. Nomor 1 merupakan heading terbesar. Setiap heading dalam dokumen harus diberi tag, tergantung pada kebutuhan teks tersebut, jika dianggap sebagai heading1-digunakan tag <h1>

Contoh Heading

Sintaks elemen heading

<hy> Teks yang menjadi heading </hy>, dimana y adalah nomor heading

Mengatur letak Heading

Tag heading mempunyai atribut yang digunakan untuk mengatur letak heading dalam baris –align. Aligment heading

M kiri-left

M tengah –center

M kanan-right

Contoh mengatur letak heading

Maka hasil yang dapat dilihat di browser seperti gambar dibawah ini :

Jika atribut align tidak diisi maka heading secara default akan ditampilkan rata sebelah kiri.

Penggaris Mendatar

            Sebuah garis dapat dsisipkan dalam dokumen web, umumnya digunakan sebagai pemisah antar bagian atau paragraf.

            Tag<hr>disisipkan pada tempat garis akan disisipkan dokumen.

Contoh penggaris mendatar

Maka hasil yang keluar pada browser anda seperti gambar berikut :

Garis yang disisipkan dapat dalam bentuk penggaris karena lebar garis dapat diatur, ukuran garis dapat dalam bentuk point atau dalam bentuk relatif dalam window browser.

Komentar

            Dalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai catatan atau komentar terhadap program itu sendiri. Catatan/komentar dalam dokumen tidak ditampilkan dalam browser.

            Komentar disisipkan pada section body, diletakkan pada bagian-bagian teks dokumen yang memang perlu dikomentari. 

Tag komentar dapat digunakan untuk menyembunyikan sebagian dokumen web. Teks yang berfungsi sebagai komentar disimpan dalam dokumen ditandai dengan tag <!—sebagai awal, kemudian teks yang dikomentari, dan tag à sebagai akhir tag.

Khusus untuk tag komentar ini, tag penutup tidak menggunakan tanda garis miring sebelumnya.

Keadilan Hukum bagi kaum Tertindas

Nama : Rizky Chandra
NPM : 56410168
Kelas : 1IA15


Keadilan Hukum bagi kaum Tertindas.. 


Hukum Indonesia dinilai belum mampu memberikan keadilan kepada masyarakat yang tertindas. Justru sebaliknya, hukum menjadi alat bagi pemegang kekuasaan untuk bertindak semena-mena.

Demikian pernyataan Direktur Eksekutif Perkumpulan untuk Pembaharuan Hukum Berbasis Masyarakat dan Ekologis (HuMa), Asep Yunan Firdaus dalam seminar "Stagnasi Hukum di Indonesia" di Jakarta, Kamis (5/8). "Dalam situasi seperti ini, hukum sedang berada pada kondisi stagnan yaitu, situasi dimana negara gagal menjadikan sistem dan praktik hukum memberikan keadilan kepada masyarakat miskin dan paling tertindas."

HuMa memandang ada tujuh faktor utama yang menyebabkan stagnasi hukum di Indonesia. Pertama, politik dan arah pembaruan hukum yang elitis. Kedua, kualitas legislasi nasional dan daerah yang rendah. Ketiga, penegakan hukum yang sarat korupsi dan melahirkan mafia hukum. Keempat, lembaga peradilan tidak mewujud menjadi agen dan ujung tombak pembaharuan hukum. Sementara itu yang kelima dikatakan bahwa, Mahkamah Konstitusi sebagai The Guardian of the Constitution lebih banyak dimanfaatkan oleh kelompok elit. Sedangkan yang keenam huma menyebutkan, pendidikan hukum yang bergeser orientasinya menjadi pelayan pasar.

"Terakhir, ketidakmampuan institusi hukum dan pemerintah menyelesaikan konflik yang melibatkan rakyat banyak dan miskin dengan cara-cara yang memenuhi rasa keadilan rakyat," ujar Asep.

Menurut Asep, politik dan arah pembaharuan hukum di Indonesia cenderung elitis. Karena agenda-agenda pembaharuan hukum sejatinya masih state centered maupun imposed by international organization yang memiliki akses terhadap kekuasaan legislatif dan eksekutif. 

Pada ranah legislasi, DPR bukan hanya mampu memenuhi 68% target pembahasan RUU dan kualitasnya pun banyak yang kontroversial, seperti Undang-undang Informasi  dan Transaksi Elektronik (UU ITE), UU Pornografi, UU Investasi, dan sebagainya. Selain itu, dalam penegakan hukum juga tidak lepas dari jual beli pasal (legal commodification) dan suburnya mafia hukum (broker/makelar).  

"Penegakan hukum tidak bertarung menghadapi kejahatan kerah putih  seperti kasus BLBI, Century, lumpur Lapindo di Sidoarjo, Jawa Timur, pembalakan liar, dan penggusuran tanah masyarakat. Sebaliknya, penegakan hukum begitu tegas terhadap Nenek Minah, Manisih, Toro dan Pori, Lanjar dan Masyarakat Samin," kata Asep. 

Sementara itu Koordinator Eksekutif LC HuMa, Mirna Safitri menambahkan, penegakan hukum di Indonesia seperti mata tombak yang tajam ke bawah tetapi tumpul ke atas. Misalnya Mahkamah Agung (MA) sebagai lembaga peradilan tertinggi, cenderung lebih banyak absen dalam agenda pembaharuan hukum. MA tidak hadir sebagai pemimpin dan motor penggerak pembaharuan hukum di Indonesia. Selain itu, Mahkamah Konstitusi (MK), justru lebih banyak dimanfaatkan oleh Politikus dan Elit. 

Dari penelitian atas 478 putusan MK, setidaknya pemohon dari kalangan partai politik berjumlah 232 (48,5%), disusul kelompok elit/melek hukum berjumlah 205 (42,8%) dan sisanya 6,4% adalah permohonan yang diajukan oleh publik (rakyat yang didukung oleh LSM, Lembaga Perguruan Tinggi/Mahasiswa, Lembaga Keagamaan, Lembaga Tradisional).