Jumat, 21 Agustus 2015

PENGERTIAN JAVASCRIPT dan PERINTAH-PERINTAHNYA



Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.
Pengertian
JavaScript adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Hal-Hal Yang Harus Diperhatikan
Ada beberapa hal yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil, Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t. Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dan banyak yang lainnya.
avaScript adalah pemrograman sisi klien yang akan dijalankan oleh browser dari pengunjung, dan program JavaScript biasa ditanamkan didalam halaman web untuk menghasilkan halaman yang dinamis. Untuk mempelajari JavaScript sebaiknya anda menguasai dasar-dasar HTML Script sehingga akan memudahkan anda untuk menyisipkan program JavaScript secara baik dan benar.

Perintah dasar  merupakan perintah yang digunakan sebagai operasi yang paling dasar dalam pemrograman Javascript, yaitu
  1. perintah assigment
  2. perintah untuk menampilkan output
  3. perintah untuk menerima input
  4. operator melakukan manipulasi data
Assignment adalah proses memasukkan data ke dalam variabel, baik variabel tunggal atau variabel jamak, atau proses pengisian variabel dengan data.
contoh:
nama = 'Rudianto'
angka = 11
umur = 25
namalengkap = 'Teknik Komputer'
Perintah assignment juga dapat dilakukan sambil mendeklarasikan suatu variabel yang bisa diberi nilai awal atau yang disebut juga dengan proses inisialisasi.
contoh:
var nama = 'Rudianto'
var angka = 9
var umur = 25
Dalam Javascript, setiap variabel dapat digunakan untuk mendefinisikan lebih dari satu jenis data. Artinya suatu variabel bisa berganti isi dengan tipe data yang berbeda.
contoh:
var angka = 'sembilan'
var angka = 9
Dalam satu pernyataan assignment juga bisa diisikan data lebih dari baris, dan setiap pindah baris ditutup dengan menuliskan karakter backslash(\).
contoh:
kalimat = " Selamat datang di program studi Teknik Komputer \
Politeknik NSC Surabaya \
semoga bermanfaat"
Perintah Output

document.write(namavariabel)
document.write("Kalimat"+namavariabel)
alert("Kalimat"+namavariabel)

Contoh:

<html>
<head>
<title>Teknik Komputer</title>
</head>
<body>
 <h1>Contoh menampilkan output dan alert</h1>
 <script type="text/javascript" language="javascript">
  nama = "Rudianto"
  umur = 35
  document.write("Nama : "+nama)
  document.write("<br>")
  document.write("Umur : "+umur)
  alert("Nama anda : "+nama+"\n"+"Umur anda : "+umur)
 </script>
</body>
</html>

Hasil Running
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMH6M2qJxfnDlpZk4YxGjbJb9X9CwFj4doGtQdEwv1k9a7YoMBpsUWDpgkrPDvm-5-0uZP7CfMXFrpsYv0k4ZAAgL8zZZk_8-VXzjkuJRjvpZ0oXqRTl_u0sC-K3b2BK-LEDBG8C_x4Q4C/s320/output.jpg
Perintah Input dengan prompt
namavariabel = prompt("Pesan" , nilaidefault)
dimana nilai default adalah nilai awal yang diberikan apabila pengguna tidak mengubahnya.

contoh:

<html>
<head>
<title>Teknik Komputer</title>
</head>
<body>
 <h1>Contoh menerima input</h1>
 <script type="text/javascript" language="javascript">
  nama = prompt("Siapa nama anda ? " , "Teknik Komputer")
  umur = prompt("Berapa umur anda ? ", 25)
  document.write("Nama : "+nama)
  document.write("<br>")
  document.write("Umur : "+umur)

 </script>
</body>
</html>

Hasil running
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkt-ij6vYjOMRXfq-k9szYB_8gtpPLVwyB5jZim8kSprAWwvWDd1g5yH7xi6S34ZlrSS6c-aI7Z_dbsd457muMjjwVXWFx1vdf13lPxbSNjZNvT58uGlO0X31EV2Prj2Xbnp7LaPyykXnI/s320/input.jpg
setelah diisi akan ditampilkan
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNuf7lKIUwgblDROW3k4lA0B6vcUSgFEVZDmP_g00sNmppoLzIGsgTTzleIkjFIYdYjNji9HY9C4DiG5Hy4BNyacI_Avj0x2AZahRiyDIC_CQ9fra7cXIbN3qZXTs73FPHOMZmU6YUYGYF/s320/input1.jpg

Pengertian dan Perintah CSS

PENGERTIAN CSS DAN PERINTAH-PERINTAHNYA



 Pengertian CSS Dasar

CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita  .
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Fakta & kesimpulan CSS adalah;
  • CSS singkatan dari Cascading Style Sheets
  • Styles mendefinisikan bagaimana menampilkan elemen HTML
  • Styles ditambahkan ke HTML 4.0 untuk memecahkan masalah
  • Style Sheets Eksternal dapat menyimpan banyak pekerjaan
  • Style Sheets Eksternal disimpan dalam file CSS.
  • Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
  • Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
  • Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
  • Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
  • Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
  • CSS adalah layouting “Masa Depan” dengan penggabungan bersama XHTML.
Sedangkan untuk menulis perintah css anda bisa menggunakan text editor atau dreamweaver. css sendiri berfungi untuk mengatur  halaman website anda baik berupa pengaturan warna, background gambar, font dan masih banyak lagi, dengan menggunakan css seorang developer web sangat dimudahkan karena tidak perlu lagi melakukan perintah-perintah pengaturan secara manual dengan menulis langsung kode html.

terdapat 3 cara untuk menuliskan perintah CSS (style sheet/lembar perintah CSS) :
  • Eksternal style sheet
  • Internal style sheet
  • Inline style
Penulisan css internal kode css ditulis langsung pada halaman website anda diantara
<head>
</head>
Berikut contoh penulisan css internal yang ditaruh pada file index.html
·         <html>
·         <head>
·         <title> judul web </title>
·         <style type=text/css> body {     background-color:#999; }    </style> </head> <body> </body> </html>
·          Penulisan css secara external kode css disimpan dengan nama file yang berbeda
contoh: pada dreamweaver klik file new–>blank page –>CSS lalu create setelah itu tulis kode dibawah ini;
·         <style type=text/css> body {     background-color:#999; }    </style>
·         Anda dapat meyimpan kode dengan extention css. contoh simpan kode diatas dengan nama seting.css
contoh Penulisan css Inline style.
penulisan ini langsung ditaruh di tag css:
·         <p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

Eksternal Style Sheet

Eksternal style sheet sangat ideal digunakan untuk halaman web yang banyak. Dengan cara ini, apabila Anda ingin mengubah tampilan web, Anda hanya perlu mengedit/mengubah file CSS saja. Untuk menggunakannya, setiap halaman harus di link-kan ke style sheet menggunakan tag link. Tag link diletakkan dibagian head.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
style.css merupakan nama file style sheet (CSS). File ini ditulis dengan perintah CSS tanpa mengandung tag HTML. Serta disimpan dengan ekstensi .css. Berikut contoh dari file style.css :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Catatan : Ketika menuliskan value property dan unitnya, jangan menambahkan spasi (seperti “margin-left:20 px”). Namun yang benar ialah :
margin-left:20px

 

Internal Style Sheet

Cara ini, perintah CSS akan didefinisikan langsung dibagian head HTML, dengan menggunakan tag style.
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Style

Cara ini, perintah CSS didefinisikan langsung pada tag HTML. Gunakan cara ini apabila perintah CSS yang didefinisikan sangat pendek.
Contoh berikut akan menambahkan warna dan margin pada paragraf :
<p style="color:sienna;margin-left:20px">Ini adalah sebuah paragraf.</p>
 

 

Jumat, 07 Agustus 2015

Pengertian dan Perintah HTML

HTML (HyperText Mark up Language) merupakan suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program.

Pengertian HTML bila di jabarkan berdasarkan kata-kata penyusunnya HTML nya adalah sebagai berikut:

1. Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

2. Markup 

Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.

3. Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi. 


Adapun Perintah - Perintah Dasar dari HTML adalah sebagai berikut:

1. <H1> sampai <H6> <H1>  </H1>font ukuran besar

        <H2>  </H2>

         ....         ....

        <H6>   </H6>font semakin kecil


      2.  <HR>

        Fungsi : perintah untuk membuat garis horizontal    penuh layar

        cth :

      3. <I>

        Fungsi : membuat teks miring

     4. <B>

        Fungsi : membuat teks tebal

     5. <U>

        Fungsi : membuat teks bergaris bawah

     6.  <CENTER>

        Fungsi : membuat text ke tengah layar

     7. <ALIGN>

        Fungsi : Membuat teks rata kiri dan rata kanan

        Sintak

        <P ALIGN=right>untuk rata kanan

        <P ALIGN=left>untuk rata kiri

        <P ALIGN=center>untuk rata tengah

        <P ALIGN=justify>untuk rata kiri dan rata kanan


        atau


        <H?ALIGN=right>

        <H?ALIGN=left>

        <H?ALIGN=center>

        <H?ALIGN=justify>


        Contoh pemakaian:

        <H2 Align=right>Selamat Datang Ke Website Kami <H2>


      8. <BR>

        Fungsi : memasukkan fungsi enter

        Cth : Jika perintah <BR> diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya

      9. <!->

        Fungsi : membuat komentar

        Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan

     10.  <P>

        Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain

     11. <DD>

        Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam

     12. <BASEFONT>

        Fungsi : Mengubah ukuran font

        Contoh :

        <BASEFONT SIZE=6>

        WELCOME TO MY WEBSITE

        <B>WELCOME TO MY WEBSITE DAN TEBAL</B>

      13. <FONT>

        Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib

     14. <FACE>

        Fungsi : mengubah jenis font

     15.  <SUP>

        Fungsi : membuat cetak naik suatu teks

        Contoh :

        Kami adalah yang pertama:1stin the world

     16.  <SUB>

        Fungsi : membuat suatu teks cetak turun

        Contoh :

        contoh-contoh teks cetak turun :

        H2O (Disebut Air) dan

        C2127No (Disebut Methadon)

     17.  <UL> atau Unorder List

        Fungsi : membuat bullet

    18.   <LI>

        Fungsi : juga untuk membuat bullet

        Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu

        Contoh :

        <UL>

        <LI>

        <H2> Jawa Timur </H2>

        <UL>

        <LI> SURABAYA </LI>

        <LI> MALANG </LI>

        <LI> GRESIK </LI>

        </UL>

        </LI>

        </BR>

        <LI>

        <H2> Jawa Barat </H2>

        <UL>

        <LI> Bandung </LI>

        <LI> Sukabumi </LI>

        <LI> Bogor </LI>

        </UL>

        </LI>

        </UL>

    19.   <IMGSRC>

        Fungsi : memasukkan gambar ke dalam Website

        Anda dapat juga memasukkan gambar berakhiran *.Jpg,   *.Gif, *.Bmp dll

        Sintak :<IMG BORDER="5">

        "5" merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda

    20.    <BGSOUND>

        Fungsi : memasukkan suara atau musik ke dalam Website

        Sintak : <BGSOUND loop=infite Src="d:/Selamat datang.WAV">


    Link dengan sorot

    Berikut adalah contoh program bagaimana membuat link hanya dengan sorot saja (link tak perlu diklik, tetapi cukup disorot dengan mouse.

    <HTML>

    <HEAD>

    <TITLE> </TITLE>

    <META Name="description"Content=" ">

    <META Name="keywords"Content=" ">

    <META Name="generator"Content="Cute HTML">

    </HEAD>

    <BODY BG Color="#FFFFFF"Text="#000000="#"0000FF"VLink="#800080">

    <Center>

    <A href=" "target=main on mouse over="Window.open('c:/html/keterangan.html'):">

    <Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e>

    </CENTER>

    </BODY>

    </HTML>


    Link dengan tombol

    Berikut adalah contoh program link dengan tombol

    Sintak :

    <Input type="button"Value="Nama Tombol"

    On Click="parent.location="Link anda disini" >


    Contoh

    Buatlah link dengan nama

    tentang_kami.html

    produk_kami.html

    cara_memesan.html



    < HTML >

    < HEAD >

    < TITLE > </TITLE>

    < META name="description"Content=" ">

    < META name="keywords"Content=" ">

    < META name="generator"Content="Cute HTML">

    < /HEAD >

    < BODY BGCOLOR="#FFFFFF"Text="#000000"Vlink="#800080" >

    < Center >

    < h1 > PT.OCTA >

    < Input Type="button"value="Tentang Kami"

    on click="parent.location="c:/website/tentang_kami.html'" >

    < Input Type="button"value="Produk Kami"

    on click="parent.location="c:/gambar/produk_kami.html'" >

    < Input Type="button"value="cara memesan"

    on click="parent.location="c:/gambar/cara_memesan.html'" >

    < /Center >

    < /Body >

    < /HTML >


    Kolom

    < tr > adalah perintah untuk membuat kolom pada notepad

    Berikut adalah contoh perintah cara membuat kolom pada notepad

    < html >

    < head >

    < title > Belajar membuat kolom < /title >

    < /head >

    < H3 Align="Center" > DAFTAR MAHASISWA < H3 >

    < table border="3" border color="red"

    < tr >

    < td > No

    < td > Nama

    < td > Alamat

    < td > No. Phone

    < td > Gambar

    < /tr >

    < tr >

    < td > 1

    < td > Octa

    < td > Padang Bulan

    < td > 8214773

    < td > < Img src="C:\Documents and Settings\XP\My Documents\My Webs\octa_pic1.JPG" > < /tr >


    Hasilnya menjadi


    Membuat Frame


    -Framecols : membagi layar dalam bentuk kolom

    -FrameRows : membagi layar dengan bentuk baris

    -Frame Src : menampilkan file dalam frame

    Bentuknya

    (Frame cols="30%,*")

    (Frame Src="Nama.file Name="Teks")

    (Frame Rows="40%,*")

    (Frame Src="Nama.file"Nama="teks")

    (Frame Src="Nama.file"Nama="Teks)

    (/Frameset)


    Contoh Program Frame


    < Html >

    < Head >

    < Title >Melink dengan sorot < /Title >

    < /Head >

    < Frameset cols="30%,*" >

    < Frame Src="Nama file"Nama="Teks" >

    < Frame Rows="40%%,*" >

    < Frame Src="Gambar File’Nama="Gambar" >

    < Frame Src="Nama File"Nama="Teks >

    < /Frameset >


Contoh HTML :

struktur dasar bahasa HTML.


<html>

<head>

<title> tempat menulis judul halaman web </html>

<head>

<body>

tempat untuk menulis isi dari halaman web

</body>

</html>

 kita coba latihan,,

langkah pertama

buka lah satu program  aplikasi pengolah kata seperti notepad atau wordpad ataupun aplikasi pengolah kata lainnya.

langkah kedua

tuliskan tag html di bawah ini pada aplikasi pengolah kata:

<html>

<head>
<title>
LATIHAN 1 HTML OLEH ALIM di INDONESI4KU.WORDPRESS.COM
</title>
</head>
<body>
<br>
<p>HTML adalah bahasa standar yang digunakan untuk membuat halaman web.<br>
salah satu tutorial atau contoh latihannya dapat kita lihat di situs<br>
Indonesi4ku.wordpress.com.
</body>
</html>
langkah ketiga
simpanlah file tadi dengan ekstensi atau tipe file “.html”. contoh: latihan1.html
langkah keempat
bukalah file yang sudah kita simpan tadi, dengan cara mengklik dua kali pada nama filenya.