Jumat, 07 Februari 2014

Menampilkan Garis secara Vertikal

<html>
<head>
</title> </title>
</head>
<body>
<script>
var i,j,dx;
dx=100;
document.write("<table><tr height=1000px>")
for(i=1;i<=10;i++)
{
document.write("<td><div style='width:3px;height:",dx,"% ;background-color:#000000;'></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>");
// document.write("<hr width=",dx,"% >");
dx=dx-10;
}
document.write("</tr></table>")
</script>
</body>
</html>
Diposting oleh di Tidak ada komentar:

tutorial pernyataan bersyarat


Diposting oleh di Tidak ada komentar:

Kamis, 06 Februari 2014

Pernyataan IF dan SWITCH

berikut adalah program untuk menghitung nilai akhir dengan menggunakan if dan switch

<html>
<head>
<title>..:: NILAI AKHIR ::..</title>
<style>
body
{
margin :50px 50px 50px 50px;
color     : blue;
background-color:#F88158;
}
</style>
<body>
<h1> BELAJAR PERNYATAAN IF DAN SWITCH</h1>
<script type="text/javascript">
function x()
{
var NT,NM,NS,hasil;
NT=document.forms[0].NT.value;
NM=document.forms[0].NM.value;
NS=document.forms[0].NS.value;
hasil=(NT*2+NM*3+NS*5)/10

 document.forms[0].NA.value=hasil;
if(hasil<50)
ket="D";
else if (hasil<60)
ket="C";
else if (hasil<70)
ket="B+";
else if (hasil<80)
ket="B";
else if (hasil<=100 && hasil>=80)
ket="A";
else
ket="Input Salah >> 0-100";
document.forms[0].nh.value=ket;
}

 </script>
</head>
<body>
<table>
<form>
<h3>NILAI AKHIR</h3>
<tr>
<label><td>Nilai Tugas</td></label>
<td><input type="text" name=NT /></td>
</tr>

 <tr>
<label><td>Nilai Mid</td></label>
<td><input type="text" name=NM /></td>
</tr>

 <tr>
<label><td>Nilai Uas</td></label>
<td><input type="text" name=NS /></td>
</tr>
<tr>
<label><td>Nilai Ahir</td></label>
<td><input type="text" name=NA /></td>
</tr>

 <tr>


<label><td>Keterangan</td></label>
<td><input type="text" name=nh /></td>
</tr>
<tr>
<td><input type="button" value="Hitung" onClick="x()" /></td>
<td><input type="reset" value="Reset" /></td>
</tr>
</form>
</table>
</body>
</html>



Diposting oleh di Tidak ada komentar:

Cara Membuat Form Mahasiswa

berikut adalah program html untuk menampilkan form mahasiswa

<html>
<head>
<title>Form Mahasiswa</title>
</head>
<body>
<form>
<table border=1 width=600px align=center height=10px bgcolor=yellow>
<tr>
<td colspan=3 align=center bgcolor=green><font size=40px color=red>Form Mahasiswa</font></td>
</tr>
<tr>
<td>NPM</td>
<td>:</td>
<td><input type=text size=12 name=npm maxlength=9 ></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=text size=50 name=nama></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea cols=20 rows=5></textarea></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td align=center><input type=radio name=jk value=laki-laki>laki-laki
<input type=radio name=jk value=perempuan>perempuan
</td>
<tr>
<td>Tempat/tgl_lhr</td>
<td>:</td>
<td><input type=text size=10 name=tmplhr>,
<select name=tgl>
<option value=tanggal>Tanggal</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=10>10</option>
<option value=11>11</option>
<option value=12>12</option>
<option value=13>13</option>
<option value=14>14</option>
<option value=15>15</option>
</select>

 <select name=bln>
<option value=bulan>Bulan</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=10>10</option>
<option value=11>11</option>
<option value=12>12</option>
</select>

 <select name=thn>
<option value=tahun>Tahun</option>
<option value=1>1990</option>
<option value=2>1991</option>
<option value=3>1992</option>
<option value=4>1993</option>
<option value=5>1994</option>
</select>
</td>
</tr>
<tr>
<td>Jurusan</td>
<td>:</td>
<td><select name=jrs>
<option value=jurusan>Jurusan</option>
<option value=teknik informatika>Teknik Informatika</option>
<option value=sistem informasi>Sistem Informasi</option>
<option value=manejemen informatika>Manejemen Informatika</option>
<option value=komputer akuntansi>Komputer Akuntansi</option>
</select></td>
</tr>
<tr>
<td>Fakultas</td>
<td>:</td>
<td><select name=fkl>
<option value=fakultas>Fakultas</option>
<option value=ilmu komputer>Fakultas Ilmu Komputer</option>
<option value=ekonomi>Fakultas Ekonomi</option>
<option value=hukum>Fakultas Hukum</option>
<option value=pertanian>Pertanian</option>
</select></td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td><input type=checkbox name=hobi value=sepakbola>Sepakbola
<input type=checkbox name=hobi value=badminton>Badminton
<input type=checkbox name=hobi value=berenang>Berenang
<input type=checkbox name=hobi value=membaca>Membaca

 </td>
</tr>
<tr>
<td colspan=3 align=center><input type=submit name=submit value=SIMPAN>
<input type=reset name=reset value=BATAL>
</table>

 </form>
</body>
</html>

 <html>
<script type="text/javascript">

 </script>
</html>

Diposting oleh di Tidak ada komentar:

Membuat Pohon Natal dengan perulangan Javascript

berikut adalah program html untuk menampilkan pohon natal

 <html>
<head>
<title>Untitled Document</title>
 <style>
  h1{
      background-color:#0000FF;
 color:#FFFF00;
 font-size:24px;
 font-family:Arial, Helvetica, sans-serif;
 text-align:center;
 }
 </style>
</head>

 <body>
   <h1>POHON NATAL TEKNIK INFORMATIKA 2013</h1>
    <table align="center" bgcolor="black">

<script>
var dx,i,j;
dx=1;for (i=1;i<=15;i++)
 {
document.write("<tr><td align=center>");
for (j=1;j<=dx;j++)
{
if (j % 2 == 0)    
document.write("<blink><font color=red>*</font></blink>");
else
document.write("<font color=yellow>*</font>");
}
dx=dx+2;
document.write("</td></tr>");
}
for (i=1;i<=5;i++)
{
document.write("<tr><td align=center>");
for (j=1;j<=3;j++)
{
document.write("<font color=white>*</font>");
}
document.write("</td></tr>");
}  
   </script>
   </table>
</body>

</html>


Diposting oleh di Tidak ada komentar:

Menampilkan Tabel Perkalian dengan JavaScript

menampilkan tabel perkalian 1 sampai dengan 10

 <html>
<head>
<title>Untitled Document</title>
 <style>
  h1{
      background-color:#0000FF;
 color:#FFFF00;
 font-size:24px;
 font-family:Arial, Helvetica, sans-serif;
 text-align:center;
 }
 </style>
</head>

 <body>
   <h1>Tabel Perkalian 1 x 1 s.d 10 x 10</h1>
    <table align="center" bgcolor="#00FF00">
    <script>
 var i;
 for (i=1;i<=10;i++)
  {
    document.write("<tr><td>1 X ",i,"=",i*1,"</td><td>2 X ",i,"=",2*1,"</td><td>3 X ",i,"=",3*1,"<td>4 X ",i,"=",4*i,"</td></tr>");
  }
</script>
   </table>
</body>

</html>


Diposting oleh di Tidak ada komentar:

Menampilkan Angka Kelipatan Descending

menampilkan angka kelipatan secara descending

<html>
<head>
<title>Untitled Document</title>
</head>

 <body>
    <script>
 var i;
 for (i=0;i<=100;i+=4)
  {
    document.write(i," ");
  }
</script>
</body>
</html>





Diposting oleh di Tidak ada komentar:

Mencetak Kata dengan Perulangan

berikut adalah program html untuk menampilkan kata dengan perulangan for

<html>
<head>
<title>cetak unika </title>
</head>
<body>
<script>
var i;
for(i=1;i<=10;i++)
{
document.write("UNIKA<br>");
}
</script>
</body>
</html>
Diposting oleh di Tidak ada komentar:

Menampilkan Angka Kelipatan Ascending

berikut adalah program html untuk menampilkan angka kelipatan misalnya kelipatan 4

<html>
<head>
<title>kelipatan </title>
</head>
<body>
<script>
var i;
for(i=0;i<=100;i+=4)
{
document.write(i," ");
}
</script>
</body>
</html>


Diposting oleh di Tidak ada komentar:

Menampillkan Penjumlahan & Perkalian dengan JavaScript

berikut adalah program html untuk menampilkan hasil penjumlahan dan perkalian dengan JavaScript

<html>
<head>
<title>javascript</title>
</head>
<script>
var a,b,c;
a=10;
b=5;
c=a+b;
d=c*a;
document.write("hasil penjumlahan="+c);
document.write("hasil perkalian="+c);
alert("hasil penjumlahan="+c);
function jumlah()
{
var a,b,c;
a=5;
b=7;
c=a*b
alert("hasil perkalian="+c)
}

 </script>

 <body>
<input type=button value=jumlah name=but on click="
</body>
</html>


Diposting oleh di Tidak ada komentar:

CSS secara Eksternal

Program html untuk menampilkan CSS secara Eksternal

<html>
<head>
<link rel ="stylesheet" href="style.css" type="text/css">
<title>EKSTERNAL CSS</title>
</head>
<body>
<h1>Marilah kita berdoa!!</h1>
<p>Bapa Kami Yang Ada Di Surga Dimuliakanlah Namamu
Datanglah Kerajaan Mu Jadilah KehendakMu Seperti
Dibumi Seperti Di surga. Berilah Kami Rejeki pada hari ini.
Dan Ampunilah Kesalahan kami seperti kamipun mengampuni 
orang yang bersalah kada kami</p>

</body>
</html>

setelah itu kita buat style dari CSS untuk eksternal diatas:

h1 { background-color: pink;
       color: black;
       font-vamily: verdana;
       text-align:center;
       border: 7px solid red;
}
h1 { background-color: pink;
       color: black;
       font-vamily: verdana;
       text-indent:70pt;       
         line-height:10pt;




Diposting oleh di Tidak ada komentar:

Menampilkan Baris dan Kolom


<html>
<head>
<title>kolom</title>
</head>
<body>
<table border="1px" width="80%" >

 <tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>

</tr>

 <tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>

 <tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>

 <tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
</tr>
</table>
</body>
</html>

Diposting oleh di Tidak ada komentar:

CSS secara Inline

program html  untuk menampilkan tulisan dengan css secara inline

 <html>
<head>
<title>inline css </title>
</head>
<body>
<p style ="font-size:84px;color:#F6358A;font-family:Lucida Handwriting;text-align:center"> 
Teknik Informatika St.Thomas Medan</p>
<span style="background-color:#98AFC7;color:red;font-size:54px;text-align:center">
 Sistem Informasi St.Thomas Medan</span>
</body>
</html>

program html  untuk menampilkan tulisan dengan css secara internal

<html>
<head>
<title>Embedded style sheet(internal CSS) css </title>
</head>

<style type="text/css">
body{background-color:#F778A1;}
p{font-size:77px;color:#43BFC7;font-family:Matura MT Script Capitals; text-align:center; }
p.cth1{font-size: 40px; color:#FDD017;}

span{font-family:Curlz MT;font-size:77px;text-decoration:underline;text-align:right;color:#52F3FF;}

a{font-size:50px; color:#6CC417; text-decoration:none;}
a:hover{color:#FFFC17;background-color:#C38EC7;}
a:active{background-color:white;color:#F76541;}

</style>
<body>
<p class="cth1">kamu terukir indah dihatiku</p>
<span>kamu membuatku selalu terpanah</span><br>
<a href=" ">selalu teringat senyummu</a>

</body>
</html>

Diposting oleh di Tidak ada komentar:

Menampilkan frame

program untuk menampilkan frame dengan link praktek 1,2, dan 3

 <html>
<head>
<title>LATIHAN FRAME</title>
</head>
<body>
<table border=1 px width=200px>
<tr>
<td align =center bgcolor=green>
<font color=red size=30px>Menu</font></td>
</tr>
<tr>
<td align=center><a href="">Frame 1</a></td>
</tr>
<tr>
<td align=center><a href="">Frame 2</a></td>
</tr>
<tr>
<td align=center><a href="">Frame 3</a></td>
</tr>
</table>
</body>
</html>


setelah itu, maka buatlah 1 folder program pertama, kedua, dan ketiga..
setelah itu jalankan kembali program praktek-4



















Diposting oleh di Tidak ada komentar:

Tampilan Login

Program html untuk menampilkan tampilan login

 <html>
<head>

 <title> Pertemuan 3</title>
</head>
<body bgcolor=pink topmargin=180px>
<form>

 <table border=1px width=40% align=center>

 <tr bgcolor=red>
<td colspan=3 align=center><marquee direction=right behavior=alternate>LOGIN</marquee></td>


 </tr>

 <tr bgcolor=brown>
<td>user</td>

<td>:</td>

<td><input type=text size=25 name = txtuser</td>

 </tr>
<tr bgcolor=brown>
<td width = 35%>password</td>

<td width =10px>:</td>

<td><input type=password size=25 name = txtpass</td</td>

  </tr>


 <tr bgcolor=red>
<td colspan=3 align=center><input type=submit value=LOGIN>
<input type=reset value=CANCEL></td>



 </tr>

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


Diposting oleh di Tidak ada komentar:

Tampilan Google

berikut adalah program untuk menampilkan tampilan google dan gambar berjalan

<html>
<head>
<title> PERTEMUAN II</title>
</head>
<body bgcolor="red">
<table   border="1px"
                width="80%"
                align="center"
                height="50%"
                bgcolor="pink">
<tr>
<td valign="top" align="center" colspan="6">
<font color="blue" size="+10"><blink>Google</blink></font>
<br><br>
<form>
<input type=text size=50>
<input type=submit value="search">
</form>
</td>
</tr>
<tr>
<td>
<marquee direction="right"><img src="koala.jpg" width="100px" height="100px"></marquee>
<a href=prak1.html>PRAK1</a>
</td>
<td>
<marquee direction="right"><img src="Jellyfish.jpg" width="100px" height="100px"></marquee>
<a href=prak2.html>PRAK2</a>
</td>
<td>
<marquee direction="right"><img src="Chrysanthemum.jpg" width="100px" height="100px"></marquee>
<a href=prak3.html>PRAK3</a>
</td>
<td>
<marquee direction="right"><img src="Penguins.jpg" width="100px" height="100px"></marquee>
<a href=prak4.html>PRAK4</a>
</td>
<td>
<marquee direction="right"><img src="Lighthouse.jpg" width="100px" height="100px"></marquee>
<a href=prak5.html>PRAK5</a>
<td>
<marquee direction="right"><img src="Hydrangeas.jpg" width="100px" height="100px"></marquee>
<a href=prak6.html>PRAK6</a>
</td>

</td>

</tr>

</table>
</body>

</html>


Baca selengkapnya »
Diposting oleh di Tidak ada komentar:

Menampilkan Kalimat

BBerikut adalah program untuk menampilkan kalimat "Selamat Datang"  di web Browser...


<html><!--menandakan bahwa file tersebut tag html--!>
<head>
<title>Halaman1</title>
</head>
<body>
<p>selamat datang</p>
</body>
</html>

 hasilnya adalah

Diposting oleh di Tidak ada komentar:

MATERI UMUM PEMOGRAMAN WEB

WEBSITE DAN HTML

A.WEBSITE

Berikut adalah beberapa istilah tentang website:

a.WWW(World Wide Web) adalah kumpulan web server dari seluruh dunia yang berfungsi menyediakan data dan informasi untuk digunakan bersama.

b.Web adalah fasilitas hypertext yang mampu menampilkan data berupa            teks,gambar,suara,animasi dan multimedia.

c.Website (situs web) adalah tempat penyimpanan data dan informasi berdasarkan topik tertentu.

d.Web Pages(halaman Web) adalah sebuah halaman khusus dari situs web tertentu.

e.Homepage adalah sampul halaman yang berisi daftar isi atau menu dari sebuah situs web.

B.HTML (HyperText Markup Language)

        HTML adalah bahasa pemograman (script) yang digunakan untuk  menyusun dokumen-dokumen web. Dokumen HTML disimpan dalam format teks reguler berupa *.html atau *.htm.HTML tidak mbesar dan huiruembedakan penulisan hurur kecil pada penulisan elemen tag.

STRUKTUR HTML
<html>
<head>
<title>.......</title>
</head>
<body>
...........................
..........................
</body>
</html>

Perintah dasar HTML
  1. Format Teks
© Header <hn>: digunakan untuk menulis judul dan sub judul dengan huruf-huruf yang berukuran tertentu. Ada pun tingkatan header adalah 1 sampai 6.dimana <h1> header yang paling besar dan <h6> adalah header paling kecil.

© Paragraf<p>: digunakan untuk menandai sekumpulan teks sebagai suatu paragraf.adapun atribut yang dapat ditambahkan pada paragraf adalah Atribut Align. Align Right(perataan kanan),Center(perataan tengah),Left(perataan kiri),dan Justify(perataan kiri-kanan)

©Bold<b>: digunakan untuk membuat tulisan tebal

©Italic<i>: digunakan untuk membuat tulisan miring

©Underline<u>: digunakan untuk membuat tulisan bergaris bawah

©<marquee>: digunakan untuk membuat teks berjalan.

©Subscript<sub>: digunakan untuk membuat tulisan turun setengah spasi

©Superscript<sup>: digunakan untuk membuat tulisan naik setengah spasi
.
©<pre>: digunakan untuk membuat isi sesuai dengan yang dituliskan

©Font<font>: digunakan untuk mengatur ukuran teks

Nb. Semua tag text diletakkan didalam tag <body>


2.Format Table<table>

©Baris tabel<tr></tr> yaitu barisnpada tabel

©Tabel data<td></td>: tempat menyimpan data dalam tabel

©Tabel header<th></th>: judul tabel yang diletakkan dibagian paling atas atau paling kiri dari tabel

©Border: digunakan untuk menentukan tegal garis batas tepi tabel (nilai 1/dst)

©Cellspacing: digunakan untuk menentukan jumlah spasi diantara tiap sel (nilai 1/dst)

©Celpadding: digunakan untuk  menentukan jumlah spasi antara data dalam suatu sel (nilai: 1/dst)

©Width: digunakan untuk mengatur lebar tabel (nilai pixel/persen %)

©Align: perataan tabel secara horizontal(left,center,right)

©Valign: perataan tabel secara vertikal(middle,bottom,baseline)]

©Bgcolor: warna latar dari tabel

©Rowspan: menggabungkan beberapa  baris tabel

©Colspan: menggabungkan beberapa kolom tabel

3.      3.Format Form<form>

   ©Button:digunakan untuk membuat tombol yang akan mengeksekusi atau menjalankan perintah yang telah ditentukan.

     ©Checkbox:digunakan agar user bisa memilih beberapa option.

     ©Radio button:harus memiliki nama yang sama sehingga user hanya bisa memilih 1 option saja.

    ©Text:digunakan untuk single line control. Atribute size digunakan untuk menentukan jumlah karakter yang bisa ditampilkan.



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