modul 9

1. TUJUAN

Kita dapat memahami bahasa XML sebagai bahasa pengolah data dalam web server.

1. LANDASAN TEORI

XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam. XML merupakan kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa standar untuk melacak Internet. XML didesain untuk mampu menyimpan data secara ringkas dan mudah diatur. Kata kunci utama XML adalah data (jamak dari datum) yang jika diolah bisa memberikan informasi. XML menyediakan suatu cara terstandarisasi namun bisa dimodifikasi untuk menggambarkan isi dari dokumen. Dengan sendirinya, XML dapat digunakan untuk menggambarkan sembarang view database, tetapi dengan suatu cara yang standar.

1. ALAT DAN BAHAN
2. PC / Komputer
3. Notepad ++
4. Browser Google Chrome / Mozila firefox
5. Internet
6. Modul Praktikum Pemrograman Web

1. LANGKAH PRAKTIKUM

PERCOBAAN 1 ( file XML )

Modul 8

MODUL 8

A. TUJUAN

     Kita dapat memahami dan mengetahui dasar – dasar pemrograman web server menggunakan bahasa ASP ( Active Server Pages ).

B. LANDASAN TEORI

     Active Server Pages atau ASP merupakan suatu script yang bersifat server-side yang ditambahkan pada HTML untuk membuat sebuah web menjadi lebih menarik, dinamis dan efektif. Dengan ASP kita dapat mengolah data konsumen yang diambil dengan sebuah form, membuat aplikasi-aplikasi tertentu dalam sebuah web, dan database dalam sebuah web.

    Microsoft merupakan perusahaan software yang menciptakan teknologi ASP ini. ASP bukanlah sebuah bahasa pemrograman karena ia masih menggunakan instruksi-instruksi yang ada pada script lain yaitu VBScript dan Jscript. VBScript dan Jscript merupakan bahasa script stpenggunar yang digunakan ASP. Karena itu tak heran jika kemudian ASP menjadi script pemrograman yang popular dan laku di pasaran. Karena bersifat server-side untuk memberikan kemudahan plus bagi para pemrograman web agar dapat dijalankan pada sebuah PC biasa berbasis windows, maka PC tersebut harus disimulasikan menjadi web server dengan menambahkan fasilitas Personal Web Server (PWS), yaitu sebuah server mini yang dapat menguji script ASP pada komputer pribadi tanpa memerlukan koneksi ke internet. ASP berjalan didalam lingkungan IIS atau Internet Information Server . keatas yang dijalankan dengan OS Windows NT dan PWS atau Personal Web Server, yang dijalankan dengan OS Windows NT Workstation dan Windows 9x. untuk Windows Professional, Server, Advanced Server dan Data Center, semuanya menggunakan IIS 5.O. akses ke database merupakan fasilitas ASP yang paling sering digunakan. ASP mendukung akses ke database manapun selama database tersebut mendukung OLEDB atau ODBC.

C. ALAT DAN BAHAN

     1. PC / Komputer

     2. Notepad ++

     3. Browser Google Chrome / Mozila firefox

     4. Internet

     5. Modul Praktikum Pemrograman Web

D. LANGKAH PRAKTIKUM

Modul 7

A.      TUJUAN

Mengetahui dan memahami bahasa Javascript dalam pemrograman web.

B.      LANDASAN TEORI

JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti halnya PHP akan tetapi javascript berjalan di sisi Client.

Misalnya, jam ditampilkan pada halaman yang update sendiri untuk menunjukkan waktu saat ini pada komputer pengguna. Desain JavaScript dipengaruhi oleh banyak bahasa pemrograman, termasuk C, tetapi dimaksudkan untuk lebih digunakan oleh non-programmer. JavaScript tidak didasarkan pada atau terkait ke Java, ini adalah kesalahpahaman umum. JavaScript seringkali disertakan dalam file HTML atau link dari file HTML dan dijalankan secara lokal oleh web browser. Ini berarti bahwa server bebas untuk mengerjakan sesuatu yang lain daripada pemrosesan instruksi untuk setiap klien. Hal ini telah membuat JavaScript pilihan yang lebih populer daripada bahasa yang memerlukan server untuk melakukan pengolahan.

Sejarah Javascript

JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.
Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX.[6] JavaScript adalah bahasa yang digunakan untuk AJAX

Beberapa contoh menggunakan adalah:

1.       berputar atau bergulir teks.

membuat bagian dari suatu bentuk terlihat atau tidak terlihat. Sebagai contoh, dalam sebuah formulir pemesanan, jika pengguna kutu kotak centang “menyampaikan kepada alamat yang berbeda”, bagian ekstra dengan kotak teks dengan streetname pengiriman, nomor, dan tempat dapat dibuat terlihat.

2.       drop down menu.

3.       mengambil informasi tambahan dari server (Ajax) untuk sebagian me-refresh halaman.

4.       memvalidasi input pengguna pada formulir.

5.       perhitungan tanpa perlu kembali ke server.

6.       menentukan jenis browser.

jelas beberapa informasi dari jenis tertentu dari pengguna, seperti alamat email dari bot.

Bahasa server-side seperti PHP atau Perl adalah cara terbaik untuk memodifikasi halaman sebelum loading, meskipun ada beberapa kasus Server-JavaScript (SJS). Tidak semua browser memiliki juru JavaScript (seperti browser hanya teks Lynx), atau menjalankan versi terbaru. Selain itu, beberapa pengguna mematikan kemampuan JavaScript dengan pilihan. Umumnya, halaman web harus menggunakan JavaScript untuk meningkatkan pengalaman pengguna, bukan bergantung padanya. Hal ini sering disebut sebagai degradasi anggun (yaitu jika pengguna telah dimatikan JavaScript, halaman harus selalu masih beban, menyajikan informasi yang sama tetapi tanpa fungsi tambahan yang disediakan oleh JavaScript.)

Hubungan ke Java

Meskipun nama yang mirip, Java dan JavaScript, hampir tidak ada hubungannya selain dari sintaks antara dua bahasa. Bahkan mereka dikembangkan oleh dua perusahaan yang sama sekali berbeda, dengan tujuan dan pemikiran yang berbeda: Netscape mengembangkan JavaScript dan Sun Microsystems mengembangkan Java. Hanya saja kedua nama tersebut membingungkan bagi orang yang belum tau.

JavaScript dapat diinterpretasikan oleh browser yang paling  langsung dan cepat, sementara Java memerlukan terpisah “Java Virtual Machine” harus dimulai sebelum menjalankan. JavaScript dan Java sama-sama menggunakan sintaks yang mirip (berdasarkan bahasa C) tetapi perintah yang digunakan banyak yang sangat berbeda. Ada juga perbedaan teknis. Java adalah bahasa diketik statis yang membutuhkan deklarasi semua variabel dan jenis mereka (misalnya integer, string atau boolean). Sebaliknya, Javascript adalah “longgar” bahasa diketik, memungkinkan variabel yang akan digunakan tanpa deklarasi sebelumnya.

Sebagai contoh, membandingkan dua metode penulisan ke tampilan (halaman).
Di Java, untuk menulis “Halo dunia!”, Kode akan membaca: System.out.println (“Halo dunia!”);
Sedangkan dalam JavaScript (di browser), akan berkata: document.write (“Halo dunia! “);

Untuk lebih jelasnya dibawah contoh penulisan javascript,

Penulisan JavaScript

Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag

<script type=”teks/javascript”>.
<script type=”teks/javascript”>
alert(“Halo Dunia!”);
</script>

Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:

<script type=”teks/javascript” src=”alamat.js”>
</script>

Script pada bagian head
Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum digunakan (dipanggil).

<html>
<head>
<script type=”teks/javascript”>
…
</script>
</head>
</html>

Script pada Body
Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.

<html>
<head>
</head>
<body>
<script type=”teks/javascript”>
…
</script>
</body>
</html>

Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas.

External JavaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.js document.write(“pesan ini tampil ketika halaman diload”);
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut “src” pada tag <script> pada halaman HTML-nya.

<html>
<head>
</head>
<body>
<script src=”xxx.js”>
</script>
<p>Script di atas berada di berkas “xx.js” (eksternal) </p>
</body>
</html>

C.      ALAT DAN BAHAN

Alat dan bahan yang digunakan untuk praktikum adalah :

1.       PC (Personal Computer)

2.        Sistem Operasi Windows

3.       Browser (Mozila Firefox/Chrome)

4.        Notepad

5.        Buku Praktikum

D.      LANGKAH-LANGKAH

Modul 6

A. TUJUAN

Mengimplementasikan web PHP dengan gabungan CSS untuk memperindah tampilan website

B.      LANDASAN TEORI

          Cascading Style Sheet (CSS)merupakan salah satu bahasa pemrograman web   untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi  pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

             CSS dapat mengendalikan ukuran gambar, warna body 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 dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

                  PHP (HyperText Preprocessor) merupakan bahasa pemrograman server side programming yang berfungsi untuk membuat website bersifat dinamis. Halaman website dinamis memberikan kesempatan kepada user untuk dapat berinteraksi dengan memberikan kesempatan kepada user untuk dapat berinteraksi dengan halaman web tersebut. Contoh diperlukannya halaman web dinamis ketika ingin membuat halaman buku tamu, atau ingin membuat aplikasi-aplikasi database. Halaman Web dinamis juga mempermudah admin situs untuk merawat (maintenance) situs yang dimilikinya. Sebuah website yang interaktif dan dinamis, tentu membutuhkan penyimpanan data yang fleksibel dan cepat untuk diakses. Salah satu database untuk server adalah MySQL. Jenis database ini sangat popular dan digunakan pada banyak website di internet sebagai bank data.

           XAMPP adalah perangkat lunak bebas (free) yang mendukung banyak system operasi, merupakan kompilasi dari beberapa program. Berfungsi sebagai server yang berdiri sendiri (localhost), yang terdiri dari program Apache HTTP server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat system operasi apapun), Apache, MySQL, PHP, dan Perl.

C.      ALAT DAN BAHAN

      Alat dan bahan yang digunakan untuk praktikum adalah :

1.       PC (Personal Computer)

2.       Sistem Operasi Windows

3.       Browser (Mozila Firefox/Chrome)

4.       Notepad

5.       Server local XAMPP

6.       Modul Praktikum Pemrograman Web 

D.      LANGKAH-LANGKAH PRAKTIKUM

       Sebelum melakukan percobaan, ikuti langkah-langkah berikut;

1.      Install software xampp

2.      Buat folder di C:\htdocs\mahasiswa

3.    Buat database dengan nama mahasiswa, table dengan nama mhs seperti modul 4 kemarin, atau  bisa menggunakan data dari modul 4 kemarin

PERCOBAAN 

1. Modifikasi script percobaan 1 modul 4 dengan menambahcss dibagian bawah tag body. berikut script lengkap

<!DOCTYPE HTML> <head> <title>Data Mahasiswa</title> </head><body> <link rel="stylesheet" href="style.css"> <?php //koneksi ke database $koneksi=mysql_connect ('localhost','root',''); $db=mysql_select_db('mahasiswa'); ?> <style> table { border: 1px solid #000000; } th{ background-color: #2B95EC; color: #ffffff; } tr:hover{ background-olor: #00ccff; } button { background-color :#2B95EC; } </style> <table width="600" cellpadding="3" cellspasing="3" align="center" border="1"> <tr> <th colspan="2">Input Data Mahasiswa</th></tr> <form action="form.php" method="POST" enctype"multipart/form-data"> <tr> <td width="500">NIM</td> <td width="600"><input type="number" name="txtnim" required="required" size="25" ></td> </tr> <tr> <td width="500"> nama</td> <td width="600"><input type="text" name="txtnama" required="required" size="45"></td> </tr> <tr> <td width="600">jenis kelamin</td> <td><input type="radio" name="radiokelamin" value="Laki-laki" required="required">Laki-laki <input type="radio" name="radiokelamin" value="Perempuan" required="required">Perempuan</td> </tr> <tr> <td width="500"> Alamat</td> <td width="600"><.textarea name="txtalamat" rows="5" required="required" cols="45"></.textarea></td> </tr> <tr> <td width="500"> jurusan</td> <td width="600"><input type="text" name="txtjurusan" required="required" size="45"></td> </tr> <tr> <td width="500"></td> <td width="600"><input id="submit" type="submit" name="submit" value="simpan"> <input id="submit" type="reset" value="Batal"></td> </tr> </form> </table> <?php if (isset ($_POST ['submit'])){ $nama = $_POST['txtnama']; $nim = $_POST['txtnim']; $jeniskelamin = $_POST['radiokelamin']; $alamat = $_POST['txtalamat']; $jurusan = $_POST['txtjurusan']; $input="insert into mhs (nim, nama, jenis_kelamin, alamat, jurusan) values ('$nama', '$nim', '$jeniskelamin','$alamat','$jurusan')"; if($nim==''){ echo "<br>"; }else{ mysql_query($input); echo'<br>Data berhasil dimasukan'; } } ?> <hr> <h2 align="center"> Data mahasiswa</h2> <?php $warna1 = "#FFFFFF"; $warna2 = "#CCFFFF"; $warna = $warna1; $sql = mysql_query("SELECT * FROM mhs ORDER BY nim"); if(!$sql) die ("Query salah"); echo"<table cellpadding=4 border=1 align=center> <tr> <th>No</th> <th>Nim</th> <th>Nama</th> <th>Jenis Kelamin</th> <th>Alamat</th> <th>Jurusan</th> <th>Pilihan</th></tr> "; $no=+1; while ($baris=mysql_fetch_row($sql)) { $nim = $baris[0]; $nama = $baris[1]; $jeniskelamin = $baris[2]; $alamat = $baris[3]; $jurusan = $baris[4]; if($warna == $warna1) { $warna = $warna2; } else { $warna = $warna1; } echo" <tr bgcolor=$warna> <td align=center>$no</td> <td align=center>$nim</td> <td align=center>$nama</td> <td align=center>$jeniskelamin</td> <td align=center>$alamat</td> <td align=center>$jurusan</td> <td align=center><a href='hapus.php?nim=$nim'>Hapus</a> |<a href='update.php?nama=$nama&nim=$nim&jeniskelamin=$jeniskelamin&alamat=$alamat&jurusan=$jurusan'> ubah</a></td></tr> "; $no++; } echo"</table> "; ?> </body> </html>

1. Menyimpan file dengan nama form.php pada folder yang sudah dibuat sebelumnya

Membuka file dengan menggunakan browser
         Hasilnya

Modul 5



A.      TUJUAN

Memahami dan mengetahui fungsi dari CSS (Cascading Style Sheet) sebagai bahasa pemograman guna mengatur desain dan layout web.

B.      LANDASAN TEORI

CSS (Cascading Style Sheet) adalah sebuah cara untuk memisahkan isi dengan layout dalam halaman-halaman  web yang dibuat. CSS dapat menciptakan halaman yang tampak sama dengan resolusi layar dari pengunjung yangberbeda tanpa memerlukan suatu tabel. Dengan CSS, akan lebih mudah melakukan setting tampilan keseluruhan web hanya dengan menggantikan atribut-atribut atau perintah dalam style CSS dengan atribut yang dinginkan tanpa harus mengubah satu per satu atribut tiap elemen yang ada dala situs yang dibuat.

C.      ALAT DAN BAHAN

1.       Satu buah PC

2.       Aplikasi Notepad

3.       Web browser

4.       Lembar kerja percobaan

D.      LANGKAH-LANGKAH PRAKTIKUM

1.       Membuat folder di Dekstop dengan memberi nama folder dengan NIM

2.       Untuk menyimpan file dengan ekstensi css , tulis nama file dengan ekstensi “.css”

3.       Untuk menyimpan file dengan ekstensi html , tulis nama file dengan ekstensi “.html”

E.        Percobaan 1 (Border)

Langkah-langkah praktikum        :

1.       Buka Aplikasi Notepad.

2.       Ketikkan script berikut ke dalam notepad.

<html> <head><title>Border</title> <style type="text/css"> p.dotted {border-style:dotted} p.dashed {border-style:dashed} p.sholid {border-style: solid} p.double{border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} </style> </head> <body> <p class='dotted'> A dotted border</p> <p class='dashed'> A dashed border</p> <p class='solid'> A solid border</p> <p class='double'> A double border</p> <p class='groove'> A groove border</p> <p class='ridge'> A ridge border</p> <p class='inset'> An inset border</p> <p class='outset'> An outset border</p> </body> </html>

Hasil :

Percobaan 2 (Gambar)

Langkah-langkah praktikum :

1. Letakkan sebuah file gambar ber-ekstensi .jpg didalam folder yang dibuat, beri nama file gambar tersebut dengan nama gambar.jpg

2. Buka apikasi Notepad

3. Ketik script berikut :

Modul 4

A. Tujuan

      mengimplementasikan bahasa pemrograman PHP dengan menggunakan database MySQL ke             dalam sebuah aplikasi berbasis web.

B. Landasan Teori

     Bahasa PHP --> merupakan bahasa pemrograman server side programming yang berfungsi untuk        membuat website bersifat dinamis. Halaman web site dinamis memberikan kesempatan kerja              user untuk dapat berinteraksi dengan halaman web tersebut .

     Database MySQL --> sebuah website yang interaktif dan dinamis, tentu membutuhakan                    penyimpanan data yang fleksibel dan cepat untuk diakses. Salah satu database untuk server adalah      MySQL , jenis database ini sangat populer dan digunakan pada banyak website di internet sebagi        bank data.

C. Alat dan Bahan

     Alat dan bahan yang digunakan dalam praktikum ini adalah : 

1. PC
2. Aplikasi Notepad
3. AppServ
4. Web Browser (Google Chrome)
5. Lembar kerja percobaan

D. Langkah-langkah Praktikum

1. Install software Xampp ke komputer
2. Jalankan Xampp, pastikan MySQL dalam keadaan aktif
3. Buat folder baru di direktori localhost, beri nama folder tersebut dengan NIM (L200120099), folder ini yang akan digunakan untuk menyimpan file percobaan.

     Percobaan 

1. Buka Browser dan buka http://localhost/phpmyadmin
2. Buat database baru dengan nama database "mahasiswa" pada kolom create new database

      3. Buat tabel baru dengan nama "mhs" dengan jumlah field "5" pada database yang sudah dibuat.
      4. Isikan field yang sudah dibuat dengan isi sebagai berikut :
          a. NIM                   (Varchar 20)
          b. Nama                 (Char 40)
          c. Jenis Kelamin    (enum "Laki-Laki", "Perempuan")
          d. Alamat               (text)
          e. Jurusan               (Varchar 45)

   5. Buka aplikasi notepad++
   6.Ketikkan script berikut dalam notepad++

Modul 3

MODUL 3

PHP (Hypertext Preprocessor)


A. Tujuan
      Mengetahui dan memahami bahasa pemrograman PHP sebagai bahasa dalam server side programming         dalam website.

B. Landasan Teori
     PHP adalah bahasa pemrograman yang berfungsi untuk membuat website dinamis maupun aplikasi web.        berbeda dengan HTML yang hanya bisa menampilkan konten statis, PHP bisa menampilkan konten yang      dinamis dari sebuah website. PHP ditulis (dirumuskan) oleh Rasmus Lerdorf, seorang software engineer        asal Greenland sekitar tahun 1995. pada awalnya PHP digunakan untuk mencatat jumlah pengunjung.
     Penulisan script PHP
     semua script PHP harus diapit oleh tanda :

•  <?php.....?>
• <script language='php'>.....</script>
• <?.............?>
• <%.....%>

C. Alat dan Bahan

Modul 2

1. Langkah Percobaan

1.         Percobaan 1 (Hyperlink)

a.      Buka notepad

b.     Mencari gambar icon google
c.   Mengetik script berikut 

<html> <head><title>hYPERLINK</TITLE><head> <h1> INI ADALAH HALAMAN 1</H> </BR> UNTUK PERGI KEHALAMAN 2 KLIK <a href='halaman2.html' TARGET ='_TOP'> DISINI </a> </BR> UNTUK PERGI KEHALAMAN GOOGLE SILAHKAAN KLIK GAMBAR DI BAWAH INI: </BR> <a href='http://www.google.com' target'_blank'> <img src='225757.jpg' width='200' height='50' alt='google'></a> </br> Untuk melihat refrensi tentang pemograman web silahkan klik teks dibawah ini:<br> <a href= '#refrensi'><b>Lihat refrensi tentang pemograman web</b></a> </BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR></BR> <a name='refrensi'><b>Refrensi Pemograman Web</b></a> </BR> Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web. Disini adalah teks berisi tentang pemograman web. </br> </body> </html>

Modul 1

1. Langkah Percobaan

1.         Percobaan 1 (Dokumen HTML)

a.      Buka notepad

b.      Mengetik script berikut

<html> <head><title>Dokumen HTML</title></head> <body bgcolor="skyblue"> Ini adalah sebuah dokumen HTML dengan judul "Dokumen HTML" dan warna latar/background biru langit. Terimakasih </body> </html>

c.       Menyimpan dengan nama dikumen.html

d.      Membuka dengan app web browser

2.         Percobaan 2 (Heading)

a.      Buka notepad

b.      Mengetik script berikut

<html> <head><title>Heading</TITLE></HEAD> <body> <h1> Teks dengan ukuran heading one</h1> <h2> Teks dengan ukuran heading two</h2> <h3> Teks dengan ukuran heading three</h3> <h4> Teks dengan ukuran heading four</h4> <h5> Teks dengan ukuran heading five</h5> <h6> Teks dengan ukuran heading six</h6> </BODY> </HTML>

c.       Menyimpan dengan nama heading.html

d.      Membuka dengan app web browser

3.         Percobaan 3 (Font)

Mouse Hover

script Css

.dropdown { background:#7FFF00; height:50px; margin: 0; } .dropdown li { border-right: solid 2px white; float: left; height: 50px; } .dropdown li a { color: #FF8C00; display: block; font-size:30px; font-family:"Times New Roman"; line-height: 25px; font-weight: bold; padding: 10px; text-decoration: none; } .dropdown li:hover { background: #008000; position: relative; } .dropdown li:hover a { text-decoration: none; } .dropdown li:hover ul { border: 3px; left: 0px; padding: 3px; top: 30px; width: 100px; } .dropdown li:hover ul li { border: 0; height: 20px; } .dropdown li:hover ul li a { background-color: #FFFF00; border: 1px solid transparent; color: #FF0000; display: block; font-size: 20px; height: auto; line-height: 13px; padding: 3px; text-indent: 0px; width: 150px; padding: 3px; } .dropdown li:hover ul li a:hover { background: #0F0; color: #FFFFFF; height: 18px; padding: 3px; } .dropdown ul { left: -9999px; list-style-type: none; position: absolute; top: -9999px; } </style>

Script HTML

<div> <html> <head> <title>Dream team</title> <link href="style2.css" rel="stylesheet" type="text/css" /> </head> <body> <ul class="dropdown"> <li> <a href="">Depan</a>       <ul> <li><a href="">Rooney</a></li> <li><a href="">Boas</a></li> <li><a href="">Ronaldo</a></li> </ul> <li><a href="">Tengah</a>     <ul> <li><a href="">Rooben</a></li> <li><a href="">Ribery</a></li> <li><a href="">Cleverley</a></li> <li><a href="">Carick</a></li> </ul> <li><a href="">Belakang</a>     <ul> <li><a href="">Thiago Silva</a></li> <li><a href="">Rafael</a></li> <li><a href="">Phil Jone</a></li> </ul> </li> </ul> </body> </html>

Table Zebra

Tugas Table Zebra
css  + HTML


<html> <title>TableZebra</title> <head> <style> #zebra{ background-color:red; } .satu { width:80%; margin-top:20px; margin-left:100px; border:1px solid black; font-family:Chalibri, Arial, Comic Sans MS; text-align:center; } td{ border: 1px solid red; } th{ text-align:center; align:center; } #atas { text-align:center; background-color:#00FF00; border-radius:30px; } #tengah { text-align:center; background-color:#A52A2A; border-radius:30px; } #tiga { text-align:center; background-color:#00FFFF; border-radius:30px; } tr:hover {color:blue; cursor: pointer;} transition: all 1s; </style> </head> <body id="zebra"> <table width="86%" class="satu"> <tr id="atas"> <td width="16%">Supra X </td> <td width="15%">Astrea</td> <td width="15%">CB-R</td> <td width="15%">Vario</td> <td width="12%">Beat</td> <td width="14%">Green</td> <td width="13%">MegaPro</td> </tr> <tr id="tengah"> <td>Jupiter</td> <td>Mio</td> <td>Vega</td> <td>Vixion</td> <td>Bison</td> <td>Mio fino </td> <td>Juoiter MX </td> </tr> <tr id="tiga"> <td>Titan</td> <td>Smash</td> <td>Scorpio</td> <td>Spin</td> <td>Shogun</td> <td>Thuder</td> <td>Ninja</td> </tr> </table> </body> </html>

Tampilannya: 

SEJArAH DAN DEFINISI CSS

Sejarah CSS

·         CSS 1

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.

CSS 1 mendukung pengaturan tampilan dalam hal :

1. Font (Jenis ketebalan).

2. Warna, teks, background dan elemen lainnya.

3. Text attributes, misalnya spasi antar baris, kata dan  huruf.

4. Posisi teks, gambar, table dan elemen lainnya.

5. Margin, border dan padiing.

·         CSS 2

Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. 

·         CSS 3 

CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.

Fitur terbaru CSS 3 :

1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.

2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".

3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.

Pengertian

CSS adalah singkatan dari Cascading Style-Sheet, sebuah pengembangan atas kode HTML yang sudah ada sebelumnya. Dengan CSS, kita bisa menentukan sebuah struktur dasar halaman web secara lebih mudah dan cepat, serta irit size. CSS juga membantu kita untuk menyeragamkan seluruh halaman website dengan tampilan yang konsisten. Misalnya, kita mau seluruh font yang ada di website kita adalah font "Tahoma", maka dengan bantuan CSS kita bisa bikin proses itu menjadi otomatis tanpa harus mengganti-ganti font secara manual di setiap halaman.

Dahulu kala, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan <table>. jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table <tr> dan <td> diberi tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak SEO friendly.

Pada perkembangannya CSS sudah masuk lelvel 3 untuk sekarang, dimana dimulai CSS level 1 atau yang sering di sebut CSS aja, kemudian level 2 yang merupakan penyempurnaan dari CSS level sebelumnya, yaitu CSS level 1.
CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya :
- Ukuran file lebih kecil
- Load file lebih cepat
- Dapat berkolaborasi dengan JavaScript
- Pasangan setia XHTML
- Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
- Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.
- Dan banyak lagi yang lainnya.

Kelebihan penggunaan CSS :
1. halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly
2. anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.

Kekurangannya penggunaan CSS :
sayangnya susah untuk dimengerti dibandingkan dengan bahasa pemrograman lainnya contohnya: HTML, PHP, Java Script, dan lain-lain dan CSS ini memerlukan waktu yang sangatlah lama untuk bisa mahir untuk mempelajari CSS ini..

Perkembangan HTML

Ø  Pada tahun 1980 IBM mulai untuk mengembangkan sebuah bahasa pemograman dimana text dan format sebuah dokumen dijadikan satu dalam bahasa pemrograman yang sering kita sebut sebagai HTML (Hyper Text Markup Language) akan tetapi pada saat itu pihak IBM memberikan sebuah nama GML (Generalized Markup Language).

1. Ø  Pada tahun 1986 ISO mengeluarkan sebuah standarisasi tentang bahasa pemograman tersebut dan menyatakan sebuah nama baru dari GML tersebut dengan sebutan SGML (Standard Generalized Markup Language)
   Ø  Pada tahun 1989, Sebuah nama HTML muncul dari pemikiran Caillau Tim yang bekerja sama dengan Banners Lee Robert yang ketika itu masih bekerja di CERN memulai mengembangkan bahasa pemrograman ini, dan dipopulerkan pertama kali dengan browser Mosaic. Nah mulailah dari tahun 1990 HTML sangat berkembang dengan cepat hingga mencapai versi HTML versi 5.0 yang digarap pada 4 Maret 2010 kemarin oleh W3C
   Ø  HTML versi 1.0 ini adalah versi pertama sejak lahirnya nama html tersebut, memiliki sebuah kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta memiliki dukungan dalam peletakan sebuah gambar
   Ø  HTML versi 2.0 pada 14 Januari 1996, pada versi ini ada beberapa tambahan kemampuan diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah interaktif dan mulai dari versi ini yang menjadikan sebuah pioneer dalam perkembangan homepage interaktif.
   Ø  Tak lama kemudian HTML versi 3.0 dirilis pada 18 Desember 1997 yang sering disebut sebut sebagai HTML+ yang mempunyai kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi ini tidak bertahan lama.
   
   
   Ø  Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai pengganti dan penyampurnaan versi 3.0 ini yaitu HTML versi 3.2, keluarnya versi ini dikarenakan adanya beberapa kasus yang timbul pada pengembang browser yang telah melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi popular, maka di bakukan versi 3.2 untuk mengakomodasi praktek yang banyak digunakan oleh pengembang browser dan diterima secara umum, dapat dikatakan bahwa versi 3.2 ini merupakan versi 3.0 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.
   Ø  Nah yang terakhir perombakan terjadi pada tahun 1999 tepatnya tanggal 24 Desember yaitu HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps , image dan lain lain sebagai penyempurnaan versi 3.2
   
   
   Ø  Pada 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0 masih dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0

SEJARAH HTML

Sejaran HTML dan Perkembangannya

Pada tahun 1969, ketika Department US, DAPRA, mengadakan riset tentang bagaimana cara menggabungkan komputer sehingga terbentuk menjadi jaringan. dengan ARPANET.

Pada tahun 1972, keberhasilan seorang bernama Roy Tomlinson dalam melengkapi Program e-mail yang dia ciptakan sendiri. Tidak dipungkiri e-mail menjadi sangat terkenal bahkan sangat popular sampai sekarang. Kemudian, jaringan ARPANET terus dikembangkan sampai ke luar Amerika.

Sejarahnya internet juga merupakan hasil pemikiran para ahli yang sangat inovatif dan dampaknya sangat besar bagi dunia. Melihat begitu banyaknya kapasitas serta layanan yang luas, sungguh dapat menjangkau seluruh daerah yang ada di dunia ini.

Salah satu ahli, seperti Lani Sidharta, menyatakan bahwa internet adalah suatu interkoneksi sebuah jaringan komputer yang dapat memberikan layanan informasi secara lengkap. Dan, terbukti bahwa internet dilihat sebagai media maya yang dapat menjadi rekan bisnis, politik, sampai hiburan. Semuanya tersaji lengkap di dalam media ini.

Ada juga para ahli, seperti Khoe yao tung, yang menyatakan bahwa intenet adalah jaringan yang satelit komunikasi yang fungsinya sangat beragam dan tentu merupakan pendukung internet di seluruh dunia.

Sedangkan pengertian internet menurut para ahli wikipedia yang tidak diketahui namanya adalah merupakan, bentuk rangkaian komputer yang saling berhubungan ke beberapa rangkaian yang menggunakan TCP dan rangkaian tersebut merupakan packet switching communication protocol. Dengan demikian, maka rangkaian tersebut disebut dengan jaringan terbesar yang dinamakan internet atau internetworking.

Sejarah html berawal pada tahun 1980, ketika IBM berniat membuat bahasa kode untuk menggabungkan teks dengan perintah pemformatan agar mengenali elemen dokumen. Bahasa yang menggunakan tanda-tanda ini dinamakan markup language, sedangkan IBM memberinya nama Generalized Markup Language (GML). 

Namun, pada tahun 1986, ISO mengeluarkan standarisasi bahasa markup berdasarkan GML dengan nama Standard Generalized Markup Language (SGML). Bahasa SGML ini kemudian banyak digunakan di dunia penerbitan dan percetakan.

Pada tahun 1989, Caillau Tim bekerja sama dengan Barners Lee Robert, ketika mereka bekerja di CERN, sebuah lembaga penelitian fisika energi tinggi di Jenewa, mencoba mengembangkan SGML.

Dari merekalah lahir HTML atau hyper text markup language, yang digunakan untuk membuat halaman website. HTML dipopulerkan pertama kali oleh browser Mosaic.

Web browser pertama kali dibuat hanya berbasiskan teks pada komputer saat itu. Namun, penggunaan web browser tersebut perlahan-lahan ditinggalkan sejak kedatangan web browser yang bernama Mosaic.

Mosaic merupakan hasil dari sebuah penelitian yang lebih baik, karena memudahkan pengguna dalam pengoperasiannya juga sudah berbasis grafik. Kemudian, kepopuleran Mosaic digantikan oleh Netscape Navigator ciptaan Silicon Graphics. Microsoft juga ikut meramaikan hadirnya web browser bernama Internet Explorer.

Sejak tahun 1990, bahasa pemformatan ini mengalami perkembangan yang sangat pesat. Apalagi sejak tahun 1996, World Wide Web Consortium (W3C) turut mengembangkan html dan mengeluarkan versi html 3.2. Sejak saat itu, html digunakan sebagai bahasa standar internet yang dikendalikan penggunaannya oleh W3C.

Pada 1994, Netscape Navigator merupakan web browser yang banyak digunakan selain Internet Explorer. hingga kini banyak web browser selain Explorer dan Netscape, di antaranya Mozilla Firefox buatan Mozilla Corporation dan Opera buatan Opera Software ASA.

Struktur HTML

Dengan web browser seperti Netscape, Internet Explorer, Mozilla Firefox atau Opera, kita akan mendapatkan tampilan situs yang penuh warna, bisa melihat cuplikan video dan suara asalkan komputer kita mempunyai fasilitas tambahan berupa VGA card dan sound card.

Tujuan utama dari web browser adalah untuk membawa sumber informasi kepada pengguna. Proses ini dimulai ketika pengguna memasukkan sebuah Uniform Resource Identifier (URL), misalnya, http://anneahira.com ke dalam browser.

Sumber yang telah diambil web browser akan ditampilkan. HTML ditampilkan ke mesin tata letak browser dan akan diubah dari markup ke dokumen interaktif. Selain dari HTML, web browser umumnya bisa menampilkan setiap jenis konten yang menjadi bagian dari suatu halaman web.

Html sendiri sebenarnya bukan merupakan bahasa pemprograman, melainkan kode pemformatan sederhana yang ditulis dan disimpan dalam format Ascii. Melalui kode yang dinamakan tag, sebuah dokumen Ascii dapat ditampilkan sebagai home page melalui penjelajah web internet, seperti Internet Explorer, Mozilla, ataupun Chrome. Tag ditulis dengan memberikan tanda lebih kecil ().

Memahami pengertian web browser harus juga memahami tentang rinciannya. Kita semua tahu apa itu web browser seperti yang terlihat, tapi ada baiknya untuk mengetahui rincian lengkap dari berbagai bagian browser web. Bagian-bagian dari browser termasuk sebagai berikut.

Ø  Status Bar. Ini adalah kotak di bagian bawah jendela browser Anda. Status bar menampilkan segala macam informasi, tergantung pada apa yang Anda lakukan pada saat itu. Sebagian besar untuk menunjukkan kecepatan beban dan URL dari alamat yang sedang ditunjuk oleh mouse.

Ø  Address Bar. Ini adalah kotak di bagian atas jendela browser Anda yang menampilkan seluruh URL atau alamat situs web.

Ø  Title Bar. Bar judul ada di bagian paling atas jendela browser Anda. Anda akan melihat judul halaman web di sana, misalnya Anda akan melihat "Anne Ahira untuk Indonesia" ketika Anda membuka situs anneahira.com.

Ø  Toolbar Ikon. Toolbar dan ikon perusahaan browser yang ada di bagian atas kanan jendela browser Anda, di bawah Title Bar. Di sinilah Anda akan melihat tombol Back, tombol Home, tombol Refresh, dll.

Ø  Display Window. Jendela Display hanyalah istilah mewah untuk ruang kerja browser Anda. Ini berupa frame di mana Anda melihat halaman website.

Ø  Scroll Bar. Jika ketika Anda membuka situs web dan Anda harus "scroll ke bawah" untuk membaca sesuatu, maka Anda telah menggunakan scroll bar.

Website itu sendiri terbagi menjadi dua jenis, yaitu website statis dan website dinamis. Website statis adalah website yang informasi didalamnya tidak dimaksudkan untuk diperbarui. Website ini biasanya memiliki seorang atau sebuah tim administrator yang menangani penggunaan software editor.

Sedangkan website dinamis adalah website yang informasi di dalamnya diperbarui secara berkala. Penggunaan website ini biasanya berhubungan dengan pengguna publik yang membutuhkan interaksi dua arah (antara administrator website dengan pengguna).

Misalkan, kita mengisi sebuah form, setelah kita klik submit, halaman website akan terhubung ke halaman baru yang menerangkan informasi yang telah kita input ke form yang kita isi sebelumnya. Beberapa web browser yang tersedia bagi Anda yang bisa didownload secara gratis.

• Microsoft Internet Explorer. Sebagian besar pengguna internet menggunakan Internet Explorer karena mudah digunakan dan sebagian besar situs web yang ditulis dengan Internet Explorer, yang berarti bahwa mereka lebih kompatibel.

• Opera. Opera merupakan browser populer yang mudah digunakan, namun memiliki beberapa masalah kompatibilitas dengan berbagai situs.

• Mozilla Firefox. Firefox adalah web browser yang cukup cepat dalam memperoleh pengguna. Ia berada di belakang Internet Explorer karena memiliki tabbed browsing, fitur keamanan superior, dan akses yang cepat.

• Google Chrome. Google Chrome adalah web browser yang dirancang untuk sistem Windows. Ia menawarkan desain minimal dan 'teknologi canggih', untuk membuat akses lebih cepat, aman, dan mudah.

• Mac Safari. Khusus untuk pengguna Mac, Safari adalah pilihan yang sangat baik untuk sebuah web browser. Safari berkemampuan akses cepat dan kompatibilitas yang baik.

Ada beberapa elemen dalam bahasa html, seperti struktur, presentasional, hypertext, dan elemen widget. Struktur bahasa html memperlihatkan adanya tingkatan yang ditandai dengan tag h1, h2, h3, dan seterusnya.

Struktur inilah yang akan menginformasikan kepada browser dalam melakukan identifikasi. Struktur ini juga dibedakan setidaknya dalam tiga bagian, yaitu bagian kepala (header), tubuh (body), dan bagian kaki (footer). 

Apabila Anda mempunyai sebuah blog atau situs dan ingin mendapatkan kunjungan dalam jumlah yang banyak, maka Anda setidaknya harus menempatkan keyword pada bagian header. Karena di sinilah mesin pencari akan membaca isi sebuah website.

Oleh karena itu, apabila Anda menghendaki traffic yang bagus dari blog atau situs yang Anda buat, tak ada salahnya bila Anda juga memahami sejarah html maupun bahasa html, meski secara umum.