Rabu, 19 Januari 2011

Tabel dengan CSS

Fungsi css sendiri adalah mengatur dari desain website itu sendiri, seperti warna background, ukuran/warna/jenis font, paragraf, dll. Sebenarnya dalam file HTML kita biasa menuliskan css tersebut. Namun, hal itu beda dengan yang akan kita pelajari kali ini. File CSS terpisah dengan file HTML. Hal ini yang disebut dengan CSS Eksternal.

  • Pembuatan Tabel dengan CSS ver 1
contoh gambar di bawah ini merupakan tabel yang menggunakan terapan selectortag.css
 Tag CSS nya :
body {
    font-family: Arial, sans-serif;
    background-color: Red;
}

p {
    font-family: Arial, sans-serif;
    color: #000099;
    font-size: 12pt
}

table {
    border-style: dashed;
    border-color: red;
}

th {
    text-align: center;
    background-color: gray;
    font-weight: bold
}  

Tag HTML nya:
<html>
<head>
<title>
Daftar Nilai Pemodelan Kelas VII A
</title>
<link rel=stylesheet href="selectortag.css" type"text/css">
</head>
<body>
<center>
<p><b>Daftar Nilai Pemodelan Kelas VII A</b></p>

<table width=100% height=20% border=1>
<tr>
<th><b>No.</b></td>
<th><b>Nama</b></td>
<th><b>Nilai</b></td>
</tr>

<tr>
<td align=right>1.</td>
<td>Brus Don Mardo</td>
<td align=center>77</td>
</tr>

<tr>
<td align=right>2.</td>
<td>Don Mardo</td>
<td align=center>70</td>
</tr>

<tr>
<td align=right>3.</td>
<td>BruzGG</td>
<td align=center>99</td>
</tr>
</table>
</center>
</body>
</html> 

  • Pembuatan Tabel dengan CSS ver 2
contoh gambar di bawah ini merupakan tabel yang menggunakan terapan selectorbebas.css

Tag CSS nya :
.bodynya {
    font-family: Arial, sans-serif;
    background-color: Pink
}

.paragraf {
    font-family: Arial, sans-serif;
    color: #009900;
    font-size: 12pt
}

.tabelku {
    border-style: dashed;
    border-color: red;
}

.headertabel {
    text-align: center;
    background-color: gray;
    font-weight: bold;
}



Tag HTML nya :
<html>
<head>
<title>
Daftar Nilai Pemodelan Kelas VII A
</title>
<link rel=stylesheet href="selectorbebas.css" type"text/css">
</head>
<body class="bodynya">
<center>
<p class="paragraf"><b>Daftar Nilai Pemodelan Kelas VII A</b></p>

<table class="tabelku" width=100% height=20% border=1>
<tr>
<th class="headertabel"><b>No.</b></td>
<th class="headertabel"><b>Nama</b></td>
<th class="headertabel"><b>Nilai</b></td>
</tr>

<tr>
<td align=right>1.</td>
<td>Brus Don Mardo</td>
<td align=center>77</td>
</tr>

<tr>
<td align=right>2.</td>
<td>Don Mardo</td>
<td align=center>70</td>
</tr>

<tr>
<td align=right>3.</td>
<td>BruzGG</td>
<td align=center>99</td>
</tr>
</table>
</center>
</body>
</html>

sekian.. ^_^
Diposting oleh di Tidak ada komentar:

Minggu, 02 Januari 2011

Pertemuan kedelapan: iframe dan form pembelian






Untuk lebih Jelasnya bisa Download DISINI
Diposting oleh di Tidak ada komentar:

Pertemuan Ketujuh : Latihan model frame pada HTML









Dowload Link : klik disini
Diposting oleh di Tidak ada komentar:

Pertemuan keenam: membuat tabel Data Mahasiswa

Pada praktikum ke-6 membuat tabel data mahasiswa pada HTML.
 PENAMPAKAN :


 CODINGNYA:
<html>
<head>

<title>Data Mahasiswa TI 7</title>
</head>

<body>
<center>
<h1>Data Mahasiswa TI 7</h1>
<table width= 80% height= 20% border="1">
  <tr>
    <td rowspan="2" bgcolor="pink" align="center"><b>No.</b></td>
    <td rowspan="2" bgcolor="pink" align="center"><b>Data Mahasiswa</b></td>
    <td colspan="3" bgcolor="pink" align="center"><b>Persetujuan</b></td>
  </tr>
  <tr>
    <td bgcolor="pink" align="center"><b>Ada</b></td>
    <td bgcolor="pink" align="center"><b>Tidak Ada</b></td>
    <td bgcolor="pink" align="center"><b>Keterangan</b></td>
  </tr>
  <tr>
    <td align="center">1.</td>
    <td>Brus Don Mardo</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">WNI</td>
  </tr>
  <tr>
    <td align="center">2.</td>
    <td>107091002264</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">-</td>
  </tr>
  <tr>
    <td align="center">3.</td>
    <td>021-55650802</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">Telpon Rumah</td>
  </tr>
  <tr>
    <td align="center">4.</td>
    <td>085781147591</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">CROSS CB90</td>
  </tr>
  <tr>
    <td align="center">5.</td>
    <td>onyet.lovers@gmail.com@gmail.com</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">Email</td>
  </tr>
  <tr>
    <td align="center">6.</td>
    <td>bruzteckdunk.blogspot.com</td>
    <td align="center">Ada</td>
    <td align="center">-</td>
    <td align="center">Blog</td>
  </tr>
  <tr>
    <td align="center">7.</td>
    <td>Kp. Cikoneng Girang No. 46 Rt.02/04 Kel. Manis Jaya Kec. Jatiuwung Kota Tangerang</td>
    <td align="center">-</td>
    <td align="center">-</td>
    <td align="center">Alamat Rumah</td>
  </tr>
  <tr>
    <td align="center">8.</td>
    <td>bruz_moza</td>
    <td align="center">-</td>
    <td align="center">-</td>
    <td align="center">YM</td>
  </tr>
    <tr>
    <td align="center">8.</td>
    <td>onyet.lovers@gmail.com</td>
    <td align="center">-</td>
    <td align="center">-</td>
    <td align="center">FB</td>
  </tr>
</table>
</center>
</body>
</html>
 
selamat mencoba ^^
Diposting oleh di Tidak ada komentar:

Selasa, 30 November 2010

Pertemuan Keempat: MEMBUAT FORM, KOTAK SARAN DAN MENU BERTAUTAN

sourcecode FORM nya nih gan:
<html>
<head>
<title>
</title>
</head>
<body>
<h2><font color=”black”>FORM </font></h2></br>
<form methode=”post”
action=”http://agung.iqbal@gmail.co.id/htbin-post/post-query“>
Nama : <input type=text name=”nama” size=10 maxlenght=15><br>
Alamat :<input type=txt name=”alamat”><br>
Password:<input type=password name=”pass”><br>
Kelamin :<input type=radio name=”sex” value=”L” checked>Laki-laki
  <input type=radio name=”sex” value=”P” checked>perempuan <br>
Komputer : <br> <input type=checkbox name=”acer”>acer <br>
  <input type=checkbox name=”hp”>hewlet packard<br>
  <input type=checkbox name=”sony”>sony vaio<br>
  <input type=checkbox name=”toshiba”>toshiba<br>
<select name=”os”>
<option>windows 3.11</option>
<option>windows 95</option>
<option>windows NT</option>
<option>windows 98</option>
<option>windows 2000</option>
<option>windows ME</option>
<option>windows xp</option>
<option>windows mac</option>
<option>windows 7</option>
<option>windows os2</option>
<option>Linux</option>
</select>
<br>
<textarea name=”area” rows=4 cols=40?>
tuliskan komentar dan saran anda di sini </textarea>
 <br>
<input type=submit value=”proses”>
<input type=reset value=”batal”>
<br>
<hr size=5 width=50% color=RED>
<center>
Nama: Brus Don Mardo<br>
TTL: Tangerang, 19 Juli 1989<br>
Nim : 107091002264<br>
No telp: 085781147591<br>
Email:onyet.lovers@gmail.com<br>
Alamat :Jatiuwung, kota tangerang<br>

<hr size=5 width=50% color=red>
</form>
</body>
</html>

sourcecode membuat menu bertautan :
<html>
<head>
<title>membuat link pada sebuat website</title>
</head>

<body>
<h1><center> DAFTAR ISI</center></h1>

<ol>
<li><a href="#isi dengan link yang kita kehendaki">Struktur dasar HTML</a>
<ul>
<li><a href="
#isi dengan link yang kita kehendaki
 ">bagian pertama dari kalimat dan paragraf</a>
<li><a href="
#isi dengan link yang kita kehendaki
">format paragraf</a>
<li><a href="
#isi dengan link yang kita kehendaki
">pre</a>
<li><a href="
#isi dengan link yang kita kehendaki
">blockquote</a>
</ul>

<ul>
<li><a href="
#isi dengan link yang kita kehendaki
">Font</a>
<li><a href="
#isi dengan link yang kita kehendaki
">Tipe Huruf</a>
<li><a href="
#isi dengan link yang kita kehendaki
">Ukuran Huruf</a>
<li><a href="
#isi dengan link yang kita kehendaki
">Warna Huruf</a>
</ul>

<li><a href="
#isi dengan link yang kita kehendaki
">Struktur dasar HTML</a>
<li><a href="
#isi dengan link yang kita kehendaki
">Gambar dan Posisinya</a>
<li><a href="
#isi dengan link yang kita kehendaki
">Tabel Baris dan Kolom</a>

</body>
</html>
Diposting oleh di Tidak ada komentar:

Minggu, 21 November 2010

Pertemuan Ketiga: Membuat Website dengan HTML (lanjutan)

Penampakan nya gan :



Codingnya :
<html>

<head>
<title>Gambar dalam web page</title>
</head>


<body>

<center>

<h1><font color =green>GAMBAR</font></h1>

</center>

Anda dapat menambahkan gambar <img src="1.jpg" width="50" size> di dalam semua web page anda. Gambar ini akan berada di sebelah kiri dan kanan teks yang ada.</br>
</br>

<p><img align=left src="1.jpg" width="50">Gunakan attribut ALIGN=LEFT jika anda ingin meletakkan gambar di sebelah kiri teks anda seperti dalam contoh ini.</br>
</br>
</br>

<p><img align=right src="1.jpg" width="50">Gunakan attribut ALIGN=RIGHT jika anda ingin meletakkan gambar di sebelah kiri teks anda seperti dalam contoh ini.</br>
</br>
</br>


<p>ALIGN=TOP Teks rata dengan bagian atas <img align=top src="1.jpg" width="50"> gambar.
</br>
</br>


<p>ALIGN=MIDDLE Teks rata dengan bagian atas <img align=middle src="1.jpg" width="50"> gambar.
</br>
</br>


<p>ALIGN=BOTTOM Teks rata dengan bagian atas <img align=bottom src="1.jpg" width="50"> (default) gambar.
</br>
</br>

<hr size="5">

<h2>WIDTH dan HEIGHT</h2>

<img width=100 height=90 src="1.jpg">
WIDTH=100, HEIGHT=90

<hr size="5">

<h2>ALT</h2>
Jika gambar tidak tampil akan digantikan sebuah teks alternatif dengan memberi attribut alt, saat gambar di sorot oleh mouse.</br>

<img src="alt.jpg" align=middle width=100 height=90 alt="Gambar diriku"></br>

Arahkan mouse pada gambar yang tidak tampil

<hr size="5">

<dl>
<dt><img src="1.jpg" width="10%"> Menu Satu
<dt><img src="1.jpg" width="10%"> Menu Dua
<dt><img src="1.jpg" width="10%"> Menu Tiga
<dt><img src="1.jpg" width="10%"> Menu Empat
</dl>

<hr size="5">

<center>
<h1>Tabel</h1>
<caption><b>Judul Tabel</b></caption>

<table width=70% height=70% border=1>
<tr>
<th>Baris 1 Kolom 1</th>
<th colspan=2>Baris 1 Kolom 2-3</th>

</tr>

<tr>
<th>Baris 2 Kolom 1</th>
<td rowspan=2>Baris 2-3 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>

<tr>
<th>Baris 3 Kolom 1</th>
<td>Baris 3 Kolom 3</td>
</tr>

<tr>
<td align=left>LEFT</td>
<td align=center>CENTER</td>
<td align=right>RIGHT</td>
</tr>

<tr>
<td valign=top>TOP</td>
<td valign=middle>MIDDLE</td>
<td valign=bottom>BOTTOM</td>
</tr>
</table>




</center>



<center>
<hr width="25%" size="5" color="green">
<img src="1.jpg" width="20%">
<hr width="25%" size="5" color="green">
<address>
Nama    : Brus Don Mardo </br>
TTL    : Tangerang, 19 Juli 1989 </br>
NIM    : 107091002264</br>
No.Tlp    : 085781147591 </br>
E-mail    : onyet.lovers@gmail.com </br>
Ym    : bruz_moza </br>
Fb    : onyet.lovers@gmail.com </br>
Blog    : bruztechdunk.blogspot.com </br>
Alamat    : Kp.Cikoneng Girang No.46 Kel. Manis Jaya Kec. Jaituwung Kota Tangerang-Banten
</address>
<hr size="5" color="blue">
</center>

</body>

</html>
Diposting oleh di Tidak ada komentar:

Minggu, 07 November 2010

Pertemuan Kedua : Membuat Website dengan HTML (lanjutan)

Coding HTML:
<html>
<head>
<! Bagian Kepala dari Dokumen HTML>
<title> Membuat Halaman Web Sendiri
</title>
</head>

<body bgcolor=blue>
<font color = "white" font face= "tahoma"><h3 align=center >MEMBUAT HOME PAGE
 DENGAN HTML</h3></font>

<! Isi dari dokumen HTML>
<b><i><u>Membuat sebuah halaman home page bukanlah suatu hal
yang sulit dan rumit<br></b></i></u>Hanya dengan menggunakan suatu
program editor teks (seperti notepad), dan sebuah browser
(IE Explorer) yang sudah tersedia bahkan dapat diunduh
dari internet. <p>Hal terpenting yang perlu diketahui adalah
cara untuk membuat beberapa elemen HTML, seperti paragraf,
tabel, list (daftar), format teks, teks hyperlink dan
elemen lainnya yang akan digunakan sebagai simulasi.</p>
<hr size=5>
<pre>
"Performatted text: membuat tesks terlihat seperti apa yg diketikan.
Kalimat ini terletak pada baris baru yang dibuat dengan penekanan tombol Enter.
P e r h a t i k a n . . . bahwa kita dapat memberikan spasi sebanyak yang kita suka"</pre>

<hr size="3">

<blockquote>
Blockquote akan memformat teks kedalam format suatu kutipan teks dengan identasi dikiri dan kanan,margin seperti terlihat pada contoh ini
</blockquote>

<hr size="3">
<center><h1>Format Teks</h1>
<b>Teks Tebal</b><br>
<i>Teks Miring</i><br>
<u>Teks Bergaris Bawah</u>

<h2><font color="white"> < FONT > </font></h2>
<h3><font color="yellow">Ukuran Font</font></h3>
<font size=1>Ukuran = 1</font><br>
<font size=2>Ukuran = 2</font><br>
<font size=3>Ukuran = 3</font><br>
<font size=4>Ukuran = 4</font><br>
<font size=5>Ukuran = 5</font><br>
<font size=6>Ukuran = 6</font><br>
<font size=7>Ukuran = 7</font>

<h3><font color="black">Warna Font</font></h3>
<font color=white>Putih</font><br>
<font color=Yellow>Kuning</font><br>
<font color=Purple>Ungu</font><br>

<h3><font color="red">Jenis Font</font></h3>
<font face="Arial">Arial</font><br>
<font face="Times">Times</font><br>
<font face="Wingdings">Wingdings</font><br>

<h1>Daftar/List</h1>
</center>

<ol>
<li>Daftar Berurut &lt;OL&gt;

<ol type=1>
<li>Bilangan Biasa &lt;OL TYPE=1&gt;
</ol>

<ol type=I>
<li>Bilangan Romawi Besar &lt;OL TYPE=I&gt;
</ol>

<ol type=1>
<li>Bilangan Romawi Kecil &lt;OL TYPE=i&gt;
</ol>

<ol type=A>
<li>Huruf Besar &lt;OL TYPE=A&gt;
</ol>

<ol type=a>
<li>Huruf Kecil &lt;OL TYPE=a&gt;
</ol>


<li>Daftar Tak Berurut &lt;UL&gt;

<ul type=disc>
<li>Cakram</ul>

<ul type=circle>
<li>Lingkaran</ul>

<ul type=square>
<li>Kotak</ul>

<li>Daftar Direktori & Menu &lt;DIR&gt; &lt;MENU&gt;

<dir>
<li>autoexec.bat
<li>config.sys
</dir>

<menu>
<li>File
<li>Edit
</menu>

<li>Daftar Definisi &lt;DL&gt;

<dl>
<dt>DL
<dd>Definition List

<dt>DT
<dd>Definition Term

<dt>DD
<dd>Definition Data
</dl>

</ol>

<hr size="3">

<center><img width=210 src  =  "gw.jpg"></center>

<address><center>
Brus Don Mardo<br>
Kp. Cikoneng Girang No.46 Kel.Manis Jaya Kec. Jaituwung<br>
Kota Tangerang<br>
HandPhone : 085781147591<br>
E-mail : onyet.lovers@gmail.com
</address></center>
<hr size=7>


</body>

</html>
 
Hasil Tampilan nya:






Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)