Pages

Subscribe:

Sabtu, 08 Februari 2014

Struktur


Javascript

Javascript merupakan bahasa pemrograman yang populer berbasis script dan memiliki kemampuan untuk menciptakan halaman website yang dinamis. Berikut adalah pemahaman tentang Javascipt serta struktur penulisan kode javascriptnya.

<script language="Javascript">
<!= Isi Komentar Javascrip //-->
</script>

Keterangan :
Merupakan tag awal untuk penulisan kode javascript. Tag dapat ditempatkan diman saja diantara tag html, head, body dan form.

Penulisan javascript dapat menggunakan file eksternal dan ekstensi ".js"
Untuk memanggil file eksternal dapat meletakkan baris kode diantara tag <head></head> dengan menggunakan atribut "scr"

<html>
<head>
<script type="text/javascript" src="/nama_file.js"></script>
</head>
<body>
</body>
</html>

Type Data dan Variabel pada Javascript

Variabel digunakan untuk menyimpan data atau informasi. Nilai dari sebuah variabel dapat diubah. Ketentuan nama variabel dalam javascript adalah sebagai berikut :
  • Variabel harus terdiri dari rangkaian huruf, angka, dan underscore.
  • Case sensitive, artinya membedakan huruf kecil dan besar.
  • Harus diawali dengan huruf
  • Tidak harus deklarasi variabel dan tercipta sendiri ketika pertama kali digunakan. 
  •  Berbentuk varian (tidak terikat pada satu tipe data, tetapi dapat diisi oleh tipe data yang   berbeda dengan awalnya ketika pertama kali digunakan).
Berbentuk varian (tidak terikat pada satu data, tetapi dapat diisi oleh tipe data yang berbeda dengan awalannya ketika pertama kali digunakan).
Contoh Pendeklarasikan variabel pada javascript :
Variabel diawali var
contoh var=10;
Variabel tanpa diawali dengan var
contoh A=10; 
Javascript mempunyai tiga tipe data :
  • Strings    
  • Numbers
  • Booleans : true false
<html> 
<head>
<title>Belajar Variabel Pada Javascript</title>
</head> 
<body> 
<script> 
var a,b,c;
var a=10;
var b=30;
c=a+b; 
document.write("Nilai A = " +a,"<br>" );
document.write("Nilai B = " +b,"<br>");
document.write("Nilai C = " +c); 
</script> 
</body> 
</html> 


hasilnya :





 

CSS Eksternal




Eksternal style sheet ideal ketika style diterapkan untuk beberapa halaman. Dengan sebuah eksternal style sheet, perubahan untuk keseluruhan halaman web dilakukan dengan merubah satu file saja. Internal dan Eksternal sebenarnya konsepnya sama hanya dalam CSS Eksternal Filenya terpisah File HTML nya kita dapat mengetikkan kode pada notepad. 

h1{font-family: comic sans ms;
font-size: 20pt;
text-align: center;
color: red;
}
h2{font-family: calibri;
font-size: 12pt;
text-align: justify;
color: green;
text-align: center;
}
p{color: red;
  font-family:payurus;
  font-size: 15pt;
text-align: center;
}

File Diatas disimpan pada folder yang sama dan ber extensi “.css” dan untuk HTML-nya kode pada dibawah ini : 


Memahami CSS


<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>


hasilnya :


Jumat, 07 Februari 2014

Merancang Frame

<html>
<head>
<title>Latihan Frame</title>
</head>
<body>
<table border=1px width=200px>
<tr>
    <td align=center bgcolor=green>
    <font color=red size=30px>Menu</font></td>
</tr>
<tr>
    <td align=center><a href="prak1.html" target=b>Frame 1</a></td>
</tr>
<tr>
    <td align=center><a href="prak3.html" target=c>Frame 2</a></td>
</tr>
<tr>
    <td align=center><a href="prak32.html" target=d>Frame 3</a></td>
</tr>
</table>
</body>
</html>

hasilnya :





<html>
  <head>
    <title>Latihan 1</title>

  </head>
  <body bgcolor="#AAFF00">
    <h1>Pemrograman Web</h1>
    <p>Belajar Pemrograman Web. Pada hari ini
       kami mahasiswa Prodi Sistem Informasi
       mulai belajar pemrograman Web.
       Materi dimulai dengan mempelajari
       asal usul kata web, sumber daya
       internet, bahasa standar web - HTML,
       struktur HTML, dan tag-tag dasar
       HTML. Saya berkomitmen untuk belajar
       web dengan baik sehingga dapat menjadi
       bekal saya di kemudian hari.
       Sukses................!</p>
    <p>Belajar Pemrograman Web. Pada hari ini
       kami mahasiswa Prodi Sistem Informasi
       mulai belajar pemrograman Web.
       Materi dimulai dengan mempelajari
       asal usul kata web, sumber daya
       internet, bahasa standar web - HTML,
       struktur HTML, dan tag-tag dasar
       HTML. Saya berkomitmen untuk belajar
       web dengan baik sehingga dapat menjadi
       bekal saya di kemudian hari.
       Sukses................!</p>
     <hr>
     <marquee>Selamat Siang Teman..</marquee>
     <p>Mungkin teman-teman belum tahu
        bawah <b>WEB</b> awalnya hanyalah
        teknologi yang digunakan oleh periset
        di <i>CERN</i>. <u>Tim Bearner Lee</u>
        yang merupakan anggo riset kesulitan
        dalam membagi informasi hasil riset
        ke rekan kerja yang domisilinya
        bukan hanya di lokasi riset.<br>
        Tim Bearner Lee kemudian menciptakan
        teknologi yang disebut dengan web
        yang memungkinkan hasil riset di
        distribusikan dengan cepat.</p>
        <a href=prak2.html>File Prak-2</a>
  </body>
</html>

hasilnya :


Merancang TAG Form

<html>
   <head>
      <title>Praktikum 3-2</title>
   </head>
   <body>
       <table border=1px width=85% align=center>
          <tr bgcolor=red height=70px>
               <td></td>
               <td width=25%></td>
          </tr>
          <tr height=300px>
               <td> <form>
      <table border=1px width=40% align=center>
          <tr bgcolor=blue>
             <td colspan=2 align=center><font color=white>LOGIN</font></td>
          </tr>
          <tr>
             <td>User</td>
             <td><input type=text size=30 name=txtuser></td>
          </tr>
          <tr>
             <td>Password</td>
             <td><input type=password size=30 name=txtpass></td>
          </tr>
          <tr>
             <td colspan=2 align=center><input type=submit value=LOGIN>
             <input type=reset value=CANCEL></td>
          </tr>
       </table>
    </form></td>
               <td bgcolor=yellow></td>
          </tr>
          <tr bgcolor=red height=70px>
               <td colspan=2></td>
          </tr>
       </table>
   </body>
</html>

dan hasilnya adalah sebagai berikut :


Memahami TAG Table Imgsrc

<html>
   <head>
       <title>Latihan - 2 </title>
   </head>
   <body>
     <table  border="1px"
                width="85%"
                align="center"
                height="75%">
         <tr>
             <td valign="top" align="center" colspan=6>
                 <font size="+2" color="red">Pencarian Gambar</font>
                   <br>
                   <br>
                   <form>
                       <input type=text size=35>
                       <input type=submit value=Search>
                   </form>
             </td>
          </tr>
          <tr>
              <td><img src=desert.jpg width="100px" height="100px"></td>
              <td><img src=tulips.jpg width="100px" height="100px"></td>
              <td><img src=penguins.jpg width="100px" height="100px"></td>
              <td><img src=jellyfish.jpg width="100px" height="100px"></td>
              <td><img src=koala.jpg width="100px" height="100px"></td>
              <td><img src=hydrangeas.jpg width="100px" height="100px"></td>
          </tr>
     </table>
   </body>
</html>

dan hasilnya adalah sebagai berikut :




Struktur HTML

<html>
<head>
<title>...:: Struktur HTML ::...</title>
</head>
<body>




</body>
</html>

Di dalam tag body inilah kita bekerja atau kita masukkan kode program yang mau kita kerjakan / masukkan, dan hasilnya adalah