Senin, 22 Februari 2010

Minggu ke-3

LEBIH MENGENAL TAG <TABLE>

Pertama yang harus kita tuliskan adalah tag <table> dan diakhiri oleh </table> setelah tag <body>, untuk menuliskan berapa banyak baris yang kita pakai dalam tabel kita tinggal menambahkan tag <tr> </tr> didalam tag <table> sementara untuk kolom kita menambahkan tag <td> </td> ataupun tag <th> </th> perbedaannya tag <th> untuk header didalam tabel dan tag <td> adalah isi dari tabel tersebut

Contoh - contoh tabel dan code html nya:




<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>Tabel Keahlian</CAPTION>
<TR><TH>Nama</TH><TH>Keahlian</TH></TR>
<TR><TD>Superman</TD><TD>Bisa Terbang</TD></TR>
<TR><TD>Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR>
<TR><TD>Mbah Boedy</TD><TD>Bisa Ngajar :)</TD></TR>
</TABLE>
</BODY>
</HTML>

ini tabel yang sangat standard, dan tidak memakai border jika ingin memakai border dan background pada tabel kita tinggal memasukan tag <table border="10" bgcolor="green&quot;>

contoh tabel dan html nya:


<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<TABLE BGCOLOR="yellow" BORDER="5">
<CAPTION>Tabel Keahlian</CAPTION>
<TR><TH>Nama</TH><TH>Keahlian</TH></TR>
<TR><TD>Superman</TD><TD>Bisa Terbang</TD></TR>
<TR><TD>Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR>
<TR><TD>Mbah Boedy</TD><TD>Bisa Ngajar :)</TD></TR>
</TABLE>
</BODY>
</HTML>

MENGENAL CELLPADDING DAN CELLSPACING:

Pengaturan jarak pada tabel diatur oleh atribut CELLPADDING dan CELLSPACING pada tag <TABLE>. CELLPADDING digunakan untuk mengatur jarak antara teks dengan batas tepi kiri, atas, dan bawah dari suatu cell dan CELLSPACING digunakan untuk mengatur jarak antar cell.

contoh tabel dan code html nya:


<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="300" HEIGHT="200">
<CAPTION>Tabel Keahlian</CAPTION>
<TR><TH>Nama</TH><TH>Keahlian</TH></TR>
<TR><TD>Superman</TD><TD>Bisa Terbang</TD></TR>
<TR><TD>Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR>
<TR><TD>Mbah Boedy</TD><TD>Bisa Ngajar :)</TD></TR>
</TABLE>
</BODY>
</HTML>

ROWSPAN DAN COLSPAN:

Untuk melakukan penggabungan cell dapat dilakukan dengan mengatur atribut COLSPAN dan ROWSPAN pada tag <TD> ataupun <TH>. Atribut COLSPAN digunakan untuk mengatur penggabungan kolom sedangkan atribut ROWSPAN digunakan untuk penggabungan baris.
contoh contoh tabel dan html nya:


<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="5">
<CAPTION>Data Mamalia di Kebun Binatang</CAPTION>

<TR>

<TH ROWSPAN="2" COLSPAN="2">Mamalia</TH>
<TH COLSPAN="3">Jenis Mamalia</TH>
</TR>
<TR>
<TH bgcolor=>Orang Utan</TH>
<TH>Gajah</TH>
<TH>Zebra</TH>

</TR>
<TR>
<TH ROWSPAN="2">Jenis Kelamin</TH>
<TH>Jantan</TH>
<TD>15</TD>
<TD>5</TD>
<TD>8</TD>

</TR>
<TR>
<TH>Betina</TH>
<TD>25</TD>
<TD>7</TD>
<TD>10</TD>
</TR>

</Table>
</BODY>
</HTML>

contoh:


<HTML>
<BODY>
<table border="3"width="400" height="400">
<tr>
<th colspan="3"><img src="Desert.jpg" width="50" height="50"><h2 align="center">Global Solution</h2></th>
</tr>
<tr>
<td rowspan="4">Global solution.........</td>
</tr>
<tr>
<td><ol type="1">
<li>____</li>
<li>____</li>

<li>____</li>
</td>
</tr>
<tr>
<td>
Rencana kedepannya....
</td>
</tr>
<tr>
<td>
tujuan perusahaan....
</td>
</tr>
</table>
</BODY>
</HTML>

contoh:


<html>
<head>
</head>
<body>
<table border="1">
<tr><td bgcolor="black">hitam</td> <td colspan="3"></td> <td bgcolor="black">hitam</td> </tr>
<tr><td colspan="2"></td> <td bgcolor="black">black</td> <td colspan="2"></td> </tr>

<tr><td colspan="1"></td><td bgcolor="black">hitam</td><td></td> <td bgcolor="black">hitam</td> <td colspan="1"></td> </tr>
<tr><td colspan="2"></td><td bgcolor="black">hitam</td><td colspan="2"></td></tr>
<tr><tr><td bgcolor="black">hitam</td> <td colspan="3"></td> <td bgcolor="black">hitam</td> </tr></tr>

</table>
</body>
</html><html>
<head>
</head>
<body>
<table border="1">
<tr><td bgcolor="black">hitam</td> <td colspan="3"></td> <td bgcolor="black">hitam</td> </tr>
<tr><td colspan="2"></td> <td bgcolor="black">black</td> <td colspan="2"></td> </tr>

<tr><td colspan="1"></td><td bgcolor="black">hitam</td><td></td> <td bgcolor="black">hitam</td> <td colspan="1"></td> </tr>
<tr><td colspan="2"></td><td bgcolor="black">hitam</td><td colspan="2"></td></tr>
<tr><tr><td bgcolor="black">hitam</td> <td colspan="3"></td> <td bgcolor="black">hitam</td> </tr></tr>

</table>
</body>
</html>




diposting oleh PEMROGRAMAN WEB @ 09.00   0 Komentar

Sabtu, 20 Februari 2010

Minggu ke 2

Latihan Teori Minggu ke-2

Latihan Teori:
code HTML nya:
<html>
<head>
</head>
<body bgcolor="orange">
<div align="center"><b><h1><u>Welcome to The Front Page</b></h1></u></div><br>
H<sup>2</sup>C<sup>4</sup>
<hr>
<div align="center"><font color="green"><b>Joomla! Community Center</b></div></font>
<br>
<pre>
written by <b><i>adminstrator</i></b>

</pre>
<h2><b>Wednesday, 18 February 2009</h2></b><br>
<pre><font face="times new roman" size="3">
The <b>Joomla!</b> Community Portal is now online. There you will find a
constant source of information about the activities of contributor powering the <b>Joomla!</b> project. Learn about <b>Joomla!</b> event worldwide, and see is there is a <b>Joomla!</b>
User group nearly.<br>

The <b>Joomla!</B> Community Magazine promises an interesting overview of feature articles, community accomplishments, learning topics, and project updates each month.
also, check out JoomlaConnect<sup>TM</sup>. This aggregated RSS feed brings together <b>Joomla!</b> news from all over the world in your language. Get the latest and greatest by
clicking here.
</pre></font>
<hr>
<hr align="center" width="50%" size="20" color="red">
<div align="center"><font>&copy; Nama-NRP</font><br>
S<sup>e</sup>K<sup>i</sup>A<sub>N</sub>

</body>
</html>

Latihan Praktikum:


Code HTML nya:

<HTML>
<BODY background="hehe.jpg">
<H2 Align="Center"> <b><u> HTML</u> Color Themes</b><h2>
<hr color="grey">
<H2 align="center" <font color="orange"><b> Mari Kita <u>Belajar</u> Membuat Halaman <u> HTML</u></b></font></h2>

<br>
<pre>
<Font size="5" face="Times New Roman"> M. ari
B.elajar
M. Membuat
S. ebuah
H. alaman
W. eb
Y. ang

M. enarik !</font></pre>
<hr color="blue">
<center><font color="White"><b>
&copy NRP - NAMA - <a href=<xxxxxxx@ mail.com" target="_blank"> xxxxxx@ mail.com</a><br>
Kelas Pemrograman web Genap 2009/2010<br>

<Font size="5"> <b>Fandy -Bakti Jean Yoke<b> </font><br></bf
</font></center>



</pre>
</body>
</html>

Bahan Materi Minggu ke-2

Mengenal Tag <MARQUEE>

Code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<FONT SIZE="7" COLOR="BLUE">
<MARQUEE DIRECTION="RIGHT">
Mbah Boedy
</MARQUEE>
</FONT>
</BODY>
</HTML>

Menyisipkan file gambar sebagai background:

ternyata tinggal memasukkan kata : background="gambar.ekstensinya" di <body>. Seperti ini :

contoh:

<html>
<head>
<title>background bergambar</tittle>
</head>
<body background="gambar.png">

Mengenal Tag <IMG>

Tag ini bermanfaat untuk menyisipkan gambar dalam file .html bisa di atur panjang dan lebar gambar tersebut.

contoh code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Gambar 1
<IMG SRC="pic1.jpg">
Bunga Matahari
</BODY>
</HTML>

Mengenal Tag Table

Untuk membuat tabel pada suatu dokumen HTML akan melibatkan beberapa tag seperti <TABLE>,
<CAPTION>, <TR>, <TH>, dan <TD>.
Tag <TABLE> digunakan sebagai penanda dimulai dan diakhirinya suatu tabel.
Tag <TR> digunakan untuk membuat baris / row baru.
Tag <TH> digunakan untuk membuat judul kolom / baris
Tag <TD> digunakan untuk mengisikan data pada suatu cell.

contoh:


code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>Tabel Keahlian</CAPTION>
<TR><TH>Nama</TH><TH>Keahlian</TH></TR>
<TR><TD>Superman</TD><TD>Bisa Terbang</TD></TR>
<TR><TD>Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR>
<TR><TD>Mbah Boedy</TD><TD>Bisa Ngajar :)</TD></TR>
</TABLE>
</BODY>
</HTML>
Untuk

Untuk mengganti warna latar pada suatu table dapat dilakukan dengan mengatur attribut BGCOLOR
pada tag <TABLE> dan untuk mengatur ketebalan garis tepi dari suatu table dapat dilakukan dengan
mengatur atribut BORDER pada tag <TABLE>.

contoh:

code HTML nya:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<TABLE BGCOLOR="yellow" BORDER="5">
<CAPTION>Tabel Keahlian</CAPTION>
<TR><TH>Nama</TH><TH>Keahlian</TH></TR>
<TR><TD>Superman</TD><TD>Bisa Terbang</TD></TR>
<TR><TD>Spiderman</TD><TD>Bisa Panjat Dinding</TD></TR>
<TR><TD>Mbah Boedy</TD><TD>Bisa Ngajar :)</TD></TR>
</TABLE>
</BODY>
</HTML>

Mengenal Link / Hyperlink

Link / Hyperlink dalam dokumen HTML digunakan untuk berpindah dari suatu halam ke halaman
lainnya. Tag yang berperan dalam membuat link adalah tag <A> atau yang biasa dikenal sebagai tag
anchor / jangkar. Tag <A> akan memiliki suatu atribut yang sangat penting yaitu atribut HREF yang
digunakan untuk menentukan halaman tujuan dari suatu link.
Pada contoh kali ini terdapat dua buah file dokumen HTML di mana pada masingmasing
dokumen
terdapat suatu link yang apabila dipilih (diklik) akan memanggil dokumen lainnya.
nama file: halaman1.html

contoh:

<HTML>
<HEAD>
<TITLE>Halaman Pertama</TITLE>
</HEAD>
<BODY>
<H1>Ini adalah halaman pertama</H1>
<A HREF="halaman2.html">Ke Halaman 2</A>
</BODY>
</HTML>

tidak hanya bisa di hyperlink ke document .html tapi juga bisa memanggil/hyperlink ke .img, folder, atau ekstensi lainnya.


diposting oleh PEMROGRAMAN WEB @ 22.57   0 Komentar

Sabtu, 13 Februari 2010

Dasar-Dasar HTML Minggu ke-1

Memasukan Isi:
Code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Ini Isinya :)
</BODY>
</HTML>

Mengubah Background:

Code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY BGCOLOR="aqua">
Ini Isinya :)
</BODY>
</HTML>


Menyertakan Komentar:

Code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY BGCOLOR="aqua">
<!Ini
adalah keterangan yang ditulis
dengan diapit penanda komentar dan
tidak ditampikan oleh web browser >
Ini Isinya :)
</BODY>
</HTML>

Mengenal Tag <BR>:

tag <BR> digunakan untuk membuat tulisan di baris yang berbeda atau sama dengan fungsi tombol enter
Code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Mbah Boedy <BR>
akan menururnkan ilmu <BR>
web ke siswanya <BR>
</BODY>
</HTML>

Mengenal Tag <P> dan <DIV>:

Pada dokumen HTML untuk mengelompokkan suatu text ke dalam suatu paagraf dapat menggunakan
tag <P> atapu tag <DIV>.
Kedua tag ini akan memberikan efek yang sama.
Code HTML nya:

<html>
<head>
<title>Ini Judul</title>
</head>
<body>
<p align="CENTER">
Bagian ini dibuat <br />
dengan menggunakan <br />
tag P
</p>
<div align="RIGHT">
Kalau yang ini<br />
dengan menggunakan<br />
tag DIV<br />
Keduanya berefek sama
</div>
</body>
</html>
</div>
</div></div><span style="font-weight: bold;">
</span></div></div></div></div></div>

Mengenal Tag Heading:

Pada dokumen HTML terdapat 6 ukuran heading mulai dari <H1> sampai dengan <H6>
<H1> adalah heading dengan ukuran terbesar dan <H6> dalah heading dengan ukuran terkecil
Code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Heading 1</H1>
<H2 ALIGN="RIGHT">Heading 2</H2>
<H3 ALIGN="LEFT">Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 6</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>

Mengenal Tag <HR>:

Pada dokumen HTML untuk membuat suatu garis mendatar / horisontal dapat menggunakan tag
<HR>
Tag <HR> memiliki attribut seperti WIDTH untuk mengatur panjang garis, SIZE untuk mengatur
ketebalan garis, ALIGN untuk mengatur alignment, NOSHADE untuk menghilangkan efek bayangan,
dan COLOR untuk mengatur warna garis.
Code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Salam Hangat
<HR>
Dari Mbah Boedy
<HR WIDTH="5%" SIZE="20" ALIGN="CENTER" NOSHADE>
<HR WIDTH="10%" SIZE="20" ALIGN="CENTER" NOSHADE>
<HR WIDTH="20%" SIZE="20" ALIGN="CENTER" NOSHADE>
<HR WIDTH="40%" SIZE="20" ALIGN="CENTER" NOSHADE>
</BODY>
</HTML>

Mengenal Tag <SUB>, <SUP>, <TT>, dan <DEL>:
Pada dokumen HTML tag <SUB> digunakan untuk memberikan efek subscript
pada suatu teks, dan
tag <SUP> digunakan untuk memberikan efek superscript
pada suatu teks sedangkan tag <TT>
digunakan untuk memberikan efek mesin ketik pada suatu teks. Tag <DEL> digunakan untuk
memberikan efek coretan pada suatu teks.
Code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Percobaan yang <DEL>salah</DEL><BR>
<TT>Senyawa dan Satuan</TT><BR>
H<SUB>2</SUB>SO<SUB>4</SUB><BR>
Satuan Luas adalah
meter<SUP>2</SUP><BR>
Satuan Volume adalah
meter<SUP>3</SUP><BR>
</BODY>
</HTML>

Mengenal Tag <PRE>:

Teks yang akan ditampilkan akan sama keadaannya seperti yang tertulis pada kode
HTML nya.
Code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<PRE>
Mbah Boedy melakukan pengembaraan
ke Bumi Parahyangan
untuk menambah wawasan dan kesaktian
</PRE>
</BODY>
</HTML>

Mengenal Tag <ACRONYM>:

Tag <ACRONYM> pada dokumen HTML digunakan untuk memberi keterangan tambahan terhadap
suatu istilah ataupun singkatan yang ditampilkan yang disertakan pada atribut TITLE.
Code HTML nya:

<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
Mbah Boedy sangat mendukung<BR>
upaya pemberantasan<BR>
<ACRONYM TITLE="Korupsi, Kolusi, dan Nepotisme">KKN</ACRONYM>
</BODY>
</HTML>

diposting oleh PEMROGRAMAN WEB @ 20.18   0 Komentar

Aturan Kelas Pemrograman Web


Aturan dalam pembelajaran Pemrograman Web

Aturan Kelas:
  • Kehadiran 75% untuk dapat mengikuti UAS
  • Titip Absen Nilai: E
  • Wajib Mengenakan Pakaian Rapi dan Celana yang diijinkan (pakaian berkerah)
  • Telepon genggam harap dinonaktifkan
  • Meninggalkan kelas seijin dosen
  • Harus menjaga kesopanan dan tata krama dalam kelas
  • Pelanggaran akan berakibat pada penalti
Silabus Materi:
  • Pra UTS
  1. Dasar HTML
  2. Objek-Objek HTML
  3. CSS
  • Pasca UTS
  1. CSS Lanjut
  2. Java Script
  3. XML

diposting oleh PEMROGRAMAN WEB @ 18.38   2 Komentar