Ansyari Study: PTI

Tampilkan postingan dengan label PTI. Tampilkan semua postingan

Minggu, 06 Maret 2011

Cascading Style Sheet I

                                    Cascading Style Sheet I

A. Tujuan Praktikum
      1. Mahasiswa dapat menggunakan format-format css.
      2. Mahasiswa dapat mengatur format tampilan halaman web dengan css

B. Dasar Teori
     Cascading Style Sheet (CSS) adalah alat untuk penambahan tata letak pada website. Sebagai
     misal latar belakang halaman web akan diwarnai merah, perintah HTML adalah sebagai berikut;
        <body bgcolor="#FF0000">
     Dengan CSS sebagai berikut:
         body {background-color: #FF0000;}
     hasilnya akan sama. Sintak CSS adalah sebagai berikut:
     selektor { properti: harga }
     - Selector: berupa tag HTML sebagai misal: body
     - Properti: berupa properti tag sebaagai misal: body
     - Harga: berupa harga properti sebagai misal: warna latarbelakang merah ("#ff0000")
     Berdasakan letak kode CSS dapat dibagi menjadi 3 yaitu: sekrang.

     1. In-line (gaya atribut)
     Salah satu cara untuk menerapkan CSS untuk HTML adalah dengan menggunakan atribut
     HTML style. Bentuk contoh diatas dengan warna latar belakang merah, dapat diterapkan
     seperti sebagai berikut:
     skrip 6.1 Css Inline___________________________________________________________
      1. <html>
      2. <head>
      3. <title>Contoh</title>
      4. </head>
      5. <body style="background-color: #FF0000;">
      6. <p>Halaman ini warnanya merah </p>
      7. </body>
      8. </html>

    skrip 6.2 Css Internal___________________________________________________________
      1. <html>
      2. <head>
      3. <title>Contoh</title>
      4. <style type="text/css">
      5.      body {background-color: #FF0000;}
      6. </style>
      7. </head>
      8. <body>
      9. <p> Halaman ini warnanya merah </p>
     10. </body>
     11. </html>

3. Eksternal (link ke style sheet)
Sebuah style sheet eksternal hanyalah sebuah file teks dengan ekstensi. Css. Caranya adalah dengan membuat link dari doumen HTML(default.htm) ke style sheet (style.css). Link tersebut dapat dibuat dengan satu baris kode HTML:

   Skrip 6.3 File Css 9 (setil/setil.css)_______________________________________________
     1. hr {
     2.      color: #CC0000;
     3.      height: 5
     4. }
     5.
     6. body {
     7.       background-color: #FF9900;
   8.       color: #000099;
     9.       font-family: Broadway;
    10.      font-size: 14pt;
    11. }
    12. h1, h3{
    13.      text-align: center;
    14. }
    15.
    16.
    17. a {
    18.      color: #cc0000;
    19. }
    20.
    21. a:visited {
22.     color: #00cccc;
23. }
24.
25. a:hover {
26. color: #000000;
27. {

   skrip 6.4 Dokomen HTML Css eksternal
     1. <html>
     2. <head>
     3. <title>
     4. <limk rel="stylesheet" type="text/css" href="setil/setil.css"/>
     5. </head>
     6. <body>
     7. <h1>Latihan Css Eksternal</h1>
     8. <h3>Ini percobaan Css lho...</h3>
     9. <hr>
    10.     Pilihan link:
    11. <ol>
    12.     <li><a href="http://hwww.google.com">Google</a></li>
    13. <li><a href="http://is.uad.ac.id">Information system Ahmad Dahlan
14. University </a> </li>
    15. <li><a href="http://blog.uad.ac.id/suprihatin/">Pak Prih Blog
    16. </a></li>
    17.    </ol>
    18. </body>
    19. </html>

skrip 6.5. File Css(setil/setil2.css)__________________________________________________
1. hr {
2.      color: #cc0000;
3.      height: 5
4. }
5.
6. body {
7.      background-color: #FF9900;
8.      color: #000099;
9.      font-family: Broadway;
10.    font-size: 14pt;
11. }
12. h1, h3{
13.     text-align;center;
14. }
15.
16.
17. a {
18.     color: #cc0000;
19. }
20.
21. a:visited {
22.    color: #00cccc;
23. }
24.
25. a:hover {
26.    color: #000000;
27. }
28. ul {
29. list-style-image: url (pines.gif);
30. }

C. Tugas
     1. Cobalah skrip 6.1 dan skrip 6.2 dan amati hasilnya
     2. Buatlah folder baru di dalam folder dokumen anda beri nama setil
     3. Ketik dan simpanah skrip 6.3 di folder setil
     4. Cobalah skrip 6.4 (jangan lupa disimpan di folder dokumen anda).
     5. Carilah model bullet simpanlah di folder setil berilah nama pines.gif
     6. Modifikasi skrip 6.3 menjadi skrip 6.5
     7. Modifikasi skrip 6.4 sehinga menjadi list yang tidak berurut dan mempergunakan setil2.css

Sabtu, 05 Maret 2011

FRAME

FRAME

A. Tujuan Pratikum
      1. Mahasiswa dapat mengerti atribut Frameset dan Frame
      2. Mahasiswa dapat mengatur halaman web dengan frame

B. Dasar Teori
     Frameset adalah tag HTML yang digunakan untuk menampilkan bingkai-bingkai tersendiri pada
     doumen HTML. FRAMESET digunakan bersamaan dengan tag FRAME yang berguna untuk
     menampilkan file sumber dari bingkai untuk dijadikan bagian dari tag FRAMESET. Cara kerja
     FRAMESET sama seperti cara kerja tag TABLE dimana tag TABLE digunakan untuk membuat
     halaman dokumen HTML menjadi beberapa bagian kolom dan baris. Hal ini juga dilakukan oleh tag
     FRAMESET yang dapat membagi halaman dokumen HTML menjadi kolom dan baris, bedanya,
     pada tag FRAMESET, isi dari setiap kolom dan barisnya berbentuk bingkai yang bersumber dari
     dokumen HTML lain. Adapun atribut Frameset adalah sebagai berikut:

                                             Tabel 5.1 Atribut Frameset

Attribut                                  Kegunaan
ROWS                                     Menentukan lebar baris
COLS                                      Menentukan lebar kolom
Border Color Menentukan warna kolom

                                                     Tabel 5.2 Atribut Frame

Atribut Kegunaan
Scr                                           Menentukan nama file HTML sebagai isi bingkai
Marginheght                            Menentukan batas atas dan bawah antar dokumen dengan bingkai
                                                (dalam pixel)
Marginwidth                            Menentukan batas kiri dan kanan antar dokumen dengan bingkai
                                                 dalam pixel.
Crolling                                    Nilai: YES, NO, AUTO (Yes: ada scroll bar )
Noresize                                   Jika disebutkan berarti frame tidak dapat diubah
Name                                        Mendefenisikan nama frame yang berguna untuk tujuan link
Border                                       Menentukan ukuran bingkai
Berikut adalah contoh skrip-skripnya:

skrip 5.1. Frame dari klikbelajar_____________________________________________________
1. <html>
2. 
4. <HEAD>
5. <TITLE>Dasar pembuatan Frame</TITLE>
6. </HEAD>
7.
8.    <FRAMESET COLS="60%, 40%" ROWS="75%,25%">
9.                       <FRAME SRC="a.html">
10.                     <FRAME SRC="b.html">
11.    <FRAME SRC="c.html">
12. <FRAME SRC="d.html">
13.   </FRAMESET>
14.
15. </HTML></html>

skrip 5.2. Frame dari codetutorials____________________________________________________
1. <html>
2. 
4. <HTML>
5. <HEAD>
6. <TITLE>Great Recipes</TITLE>
7. </HEAD>
8. <FRAMESET ROWS="15%,*">
9.             <FRAME SRC="prg22.html" NAME=TITLE SCROLLING=NO>
10.
11.             <FRAMESET COLS="20%,*">
12.                           <FRAME SRC="prg31.html" NAME=SIDEBAR>
13.                           <FRAME SRC="prg41.html" NAME=RECIPES>
14.
15.    </FRAMESET>
16. </FRAMESET>
17. </HTML>

skrip 5.3. Percobaaan Frame_______________________________________________________
1. <HTML>
2. <html>
3. <head>
4. <title>Percobaan Frame </title>
5. </head>
6. <FRAMESET rows="15%, 70%, 15%">
7. <FRAMESET rsc= "homepage.htm" NAME="Frame1">
8. <FRAMESET cols="15%, 70%, 15%">
9. <FRAMESET SRC="menu.htm" NAME="Frame2">
10. <FRAMESET SRC="menu2.htm" NAME="Frame3">
11. <FRAMESET SRC="menu3.htm" NAME="Frame4">
12. </FRAMESET>
13. </FRAME SRC="homepage.htm" NAME="BIG">
14. </FRAMESET>
15. </FRAMESET>
16. </HTML>

skrip 5.4. Tugas Frame__________________________________________________
1. <HTML>
2. <head>

3. <title>Percobaan Frame</title>
4. </head>
5. <frameset rows=20%,* framespacing="0" border="0" frameborder="0">
6. <frame name=atas src=header.html scrolling="no" noresize>
7. <frameset cols=25%,* framespacing="0" border="0" frameborder="0">
8. <frame name=kiri src=kiri.html scrolling="no" noresize>
9. <frame name=kanan src=kanan.html scrolling="no" noresize>
10. </frameset>
11. </frameset>
12. </FRAMESET>
13. </HTML>

C. Tugas
      1. Ketiklah skrip 5.1 s/d 5.3 dengan notepad simpan amatilah hasilnya.
      2. Buatlah dokumen dokumen HTML untuk mengisi frame-framenya menurut selera anda

Jumat, 04 Maret 2011

Gambar dan Tabel

                                                    Gambar dan Tambel

A. Tujuan Praktikum
     1. Mahasiswa dapat menampilkan gambar
     2. Mahasiswa dapat membuat tabel

B. Dasat Teori
     Tag yang digunakan unuk menampilkan image atau animasi gif pada halaman web adalah:
                                 <img src="nama file gambar">

    Attribut yang dimiliki tag <img> adalah: alt, align=(center, left, right), hspace, vspace, border,
    width dan height. Jika attribut ukuran gambar tidak dituliskan, maka gambar ditampilkan sesuai
    dengan ukuran aslinya. Untuk mengatur ukuran gambar, menggunakan attribut width dan height.
    Attribut align digunakan untuk perataan posisi gambar. Attribut border digunakan untuk memberi
    bingkai pada gambar. Sedangkan alt, digunakan untuk memberi keterangan pada gambar jika
    mouse
berada diatasnya. Untuk mengatur letak gambar dapat menggunakan attribut hspace dan vspace.
    Gambar dapat dipakai sebagai latar belakang di body dengan bentuk:
                              <body background="namagambar">
    Tabel dokumen HTML dipergunakan tag tabel, tabel berikut untuk keperluan menampilkan tabel:
                                    Tabel 4.1 Tag untuk Tabel
    Start Tag                 Kegunaan
    <table>                     Mendefenisikan sebuah table
    <th>                          Mendefenisikan sebuah header table
    <td>                          Mendefenisikan suatu sel dalam table
    <caption>                 Mendefenisikan sebuah caption untuk table
    <colgroup>               Mendefenisikan sekelompok kolom dalam table
    <col>                        Mendefenisikan nilai attribut untuk satu atau lebih kolom dalam sebuah tabel
    <thead>                    Mendefenisikan sebuah head table
    <tbody>                   Mendefenisikan suatu badan tabel
    <tfoot>                     Mendefenisikan suatu footer table

    Berikut contoh skrip-skripnya:
Skrip 4.1 Menampilkan Gambar
1.    <html>
2. <head>
3. <title>Percobaan Gambar</title>
4. </head>
5. <body background="floral_background_a1.gif">
6. <center>
7. <b><font color="#cffc0f" size = "9">UNIVERSITAS AHMAD DAHLAN </font>
8. </b> <hr>
9. <marquee direction=right>
10. Fakultas Matematika dan Ilmu Pengetahuan Alam ...</marquee>
11. <hr>
12. <img alt="tux-transparent (1).gif (28k)"
13. src="tux-transparent%20(1). height="100" width="80"
14. align="left">
15. <img alt="bunga.gif (61k)" src="bunga.gif" height="80" width="100"
16. align="right">
17. <img alt="Logo Universitas Ahmad Dahlan" src="UADStandar_BW2.gif"
18. height="250" width="250" align="middle" >
19. </center>             </body>
20. </html>

skrip 4.2 Tabel Dua Baris Dua Kolom________________________________________________
1. <html>
2. <hrad>
3. <title>Penggunaan Tabel Biasa</title>
4. </head>
5. <body>
6. <table border="1">
7. <tr>
8.        <td>baris 1, kolom 1</td>
9.        <td>baris 2, kolom 2</td>
10. </tr>
11. <tr>
12.      <td>baris 2, kolom 1</td>
13.      <td>baris 2, kolom 2</td>
14. <tr>
15. </table>
16. sumber :
17. <a href="http://klikbelajar.com/pembuatan-situs/html/membuat-tabel-
18. pada-html.php"> Klikbelajar</a>
19. </body>
20. </html>

skrip 4.3. Penggabungan kolom______________________________________________________
1. <html>
2. <head>
3. <title> Penggabungan kolom </title>
4. </head>
5. <body>
6. <table>
7. <tr>
8.         <td colspan="2">Ini adalah kolom yang digabungkan</td>
9. </tr>
10. <tr>
11.       <td>baris 2, kolom 1</td>
12.       <td>baris 2, kolom 2</td>
13. </tr>
14. <tr>
15.       <td>baris 3, kolom 1</td>
16.       <td>baris 3, kolom 2</td>
17. </tr>
18. </table>
19. sumber:
20. <a href="http://klikbelajar.com/pembuatan-situs/html/membuat-tabel-
21. pada-html.php"> Klikbelajar</a>
22. </body>
23. </html>

skrip 4.4 Penggabungan baris dan kolom____________________________________________
1. <html>
2. <head>
3.     <title>Penggabungan baris</title>
4. </head>
5.             <body>
6.                 <table>
7. <tr>
8.     <td colspan="2">Ini adalah kolom yang digabungkan</td>
9. </tr>
10. <tr>
11.    <td rowspan="2">baris 2, kolom 1</td>
12.    <td>baris 2, kolom 2</td>
13. </tr>
14. <tr>
15. <td>baris 3, kolom 2</td>
16. </tr>
17. </table>    </body>
18. sumber:
19. <a href="http://klikbelajar.com/pembuatan-situs/html/membuat-tabel-
20. pada-html.php"> Klikbelajar</a>
21. </html>

skrip 4.5. Rancangan Tugas_________________________________________________________

1. <html>
2. <head>
3.   <title>Rancangan Tugas</title>
4. </head>
5. <body>
6. <table border="1" width="100%">
7. <tr>
8. <td colspan="4">baris 1 c1 </td><td rowspan="2">baris 1 c5</td></tr>
9. <tr><td>baris 2 c1 </td><td>baris 2 c2 </td><td>baris 2 c3 </td><td>baris 2 c4
10. </td></tr>
11. <tr><td colspan="5">baris 3 c1</td></tr>
12. </table></body>
13. </html>

C.Tugas
        1. Ketiklah skrip 4.1 dengan notepad simpan dengan nama prg41.html
        2. Doubleklik-lah file:prg41.html amati hasilnya
        3. Lakukan yang sama untuk skrip 4.2 sampai 4.5

Kamis, 03 Maret 2011

List dan Link

                                                           List dan Link

A. Tujuan Praktikum
      1. Mahasiswa dapat membuat List dan Link yang terurut maupun tidak terurut.
      2. Mahasiswa dapat membuat Link Halaman.

B. Dasar Teori
     Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item
     yang ada memilki nomor urut atau bisa juga berupa tanda-tanda khusus/simbol. Terdapat 2 tipe list
     yang dapat digunakan yaitu :

    Unorderet List: <UL> untuk membuat daftar item dengan tanda bullet (tidak bernomor). List
    entries didefenisikan dengan tag <LI>. Pada jenis ini tidak memerlukan pengurutan data. Bentuk
Item tanda pada Unorderet List dapat diubah dengan menggunakan atribut TYPE kedalam tag
    <UL> dengan nilai "circle" untuk bentuk lingkaran tengahnya putih, "square" untuk bentuk
kotak padat hitam dan "disc" bentuk lingkaran pada warna hitam.

   Ordered List: <OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item
   dapat menggunakan angka arab atau angka romawi. List entries juga didefenisikan dengan <LI>
   tag. Atribut yang ada pada ordered List adalah TYPE dan START. Type terdiri dari 1 default), i (ii,
   iii,...), I (II,III,...), a (a,b,c,...) dan type A (A,B,C,...)

Link digunakan untuk membuat link/penghubung antara satu halaman dengan halaman lain, ke
URL lain, juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain atau ke
lokasi tertentu dalam satu halaman yang sama.
Sintak tag lain adalah sebagai berikut:
   <a href=url_tujuan>nama_link</a>
url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai
yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak
antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat diatur
dalam tag <body>.

Berikut contoh-contoh skripnya :

skrip3.1 List Tidk Terurut___________________________________________________________
1. <html>
2. <head>
3. <title>List Takterurut</title>
4. </head>
5. <body>
6. Pekerjaan hari ini yang harus dilakukan:
7. <ul>
8. <li>Servis motor </li>
9. <li>Belanja sembako</li>
10.<li>Ngajari anak belajar</li>
11.</li>Memberi makan ikan</li>
12.</ul>
13.</body>
14.</html>

skrip3.2 List Terurut_______________________________________________________________
1. <html>
2. <head>
3. <title>List Terurut</title>
4. </head>
5. <body>
6.   Pekerjaan hari ini yang harus dilakukan:
7. <ol>
8. <li>Servis motor </li>
9. <li>Belanja sembako</li>
10.<li>Ngajari anak belajar</li>
11.</li>Memberi makan ikan</li>
12.</ol>
13.</body>
14.</html>

skrip3.3 List dalam list_____________________________________________________________
1. <html>
2. <head>
3. <title>List Dalam List</title>
4. </head>
5. <body>
6. <font color= "ff0000"> <h1>Universitas Ahmad Dahlan Kampus 3
7.   </h1> </font>
8. <font size="4" color="#000066">
9. <ol>
10. <li> Fakultas Matematika dan Ilmu Pengetahuan Alam
11. <ul>
12.     <li>Program Studi Sistem Informasi</li>
13.     <li>Program Studi matematika</li>
14.     <li>Program Studi Fisika</li>
15.     <li>Progam Studi Biologi</li>
16.   </ul>
17. </li>
18. <li>Fakultas Farmasi
19. <ul>
20.      <li>Program Studi Farmasi</li>
21.      <li>Program Studi Kedokteran</li>
22. <ul>
23. </li>
24. <li> Fakultas Teknologi Industri
25. <ul>
26. <li>Program Studi Teknik Informatika</li>
27. <li>Program Studi Teknik Industri</li>
28.     <li>Program Studi Teknik Elektro</li>
29.     <li>Program Studi Teknik Kimia</li>
30.    </ul>
31.   </li>
32. <li>Fakultas Teknologi Pendidikan
33. <ul>
34.     <li>Program Studi Matematika</li>
35.     <li>Program Studi Biologi</li>
36.     <li>Program Studi Fisika</li>
37.    </ul>
38.   </li>
39. </ol>
40.</font>
41.</body>
42.</html>

skrip3.4 Link Eksternal____________________________________________________________
1. <html>
2. <head>
3. <title>Percobaan Link Eksternal</title>
4. </head>
5. <body>
6. <font color= "000080">
7. <h3>Mau Link ke.....</h3>
8. </font>
9. <ul>
10.<li> <a href="prg22.html#Here">Melihat Rumus Matematika</a></li>
11.<li> <a href="#prg28.html#Here">UAD Kampus 3 </a> </li>
12.<li> <a href="http://www.google.co.id/"> Ke Google </a> </li>
13.<li> <a href="http://uad.ac.id/"> Universitas Ahmad Dahlan Yog Yess
14.           </a> </li>
15.</ul>
16.</body>
17.</html>

skrip3.5 Link Internal_______________________________________________________________
1. <html>
2. <head>
3. <title>Link Internal</title>
4. </head>
5. <body>
6. <a href="#kunci1">Etimologi </a> <br>
7. <a href="#kunci2">Terminologi </a> <br>
8.   <a href="#kunci3">Nama-nama lain Al-Qur'an </a> <br>
9.   <a href="#kunci4">Struktur da pembagian Al-Qur'an </a> <br>
10. <a href="#kunci5">Surat, ayat, dan Ruku' </a> <br>
11. <a href="#kunci6">Juz dan Manzil </a> <br>
12. <hr>
13 .<font color="0000ff"><a name="#kunci1"> Etimologi </a> </font>
14. <p>
15. Uraaian tentang Etimologi
16. </p>
17. <font color="0000ff"><a name="#kunci2"> Terminologi </a> </font>
18. <p>
19. Uraian Terminologi
20. <P>
21.<font color="0000ff"><a name="#kunci3"> Nama-nama lain Al-Qur'an </a> </font>
22. <p>
23. Dalam Al-Qur'an sendiri terdapat beberapa ayat yang menyertakan nama lain
24. yang digunakan untuk merujuk kepada Al-Qur'an itu sendiri
25. Berikut adalah nama-nama tersebut dan ayat yang mencantumkannya:
26. <ul>
27. <li>Al-Kitab QS(2:2), QS(44:2)</li>
28. <li>Al-Furqan (pembeda benar salah): QS(25:1)</li>
29. <li>Adz-Zikr (pemberi peringatan): QS(15:9)</li>
30. <li>Al-Mau'idah9pelajaran/nasihat): QS(10:57)</li>
31. <li>Al-Hukm (peraturan/hukum): QS(13:37)</li>
32. <li>Al-Hikmah (kebijaksanaan): QS(17:39)</li>
33. <li>Asy-Syifa' (obat/penyembuh): QS(10:57), QS(17:82)</li>
34. <li>Al-Huda (petunjuk): QS(72:13), QS(19:33)</li>
35. <li>At-Tanzil (yang diturunkan): QS(26;192)</li>
36. <li>Ar-Rahmat (karunia): QS(22:77)</li>
37. <li>Ar-Ruh (Ruh): QS(42:52)</li>
38. <li>Al-Bayan (penerang): QS(3:138)</li>
39. <li>Al-Kalam (ucapan/firman): QS(9:6)</li>
40. <li>Al-Busyra (kabar gembira ): QS(16:102)</li>
41. <li>An-Nur (cahaya): QS(4:174)</li>
42. <li>Al-Basha'ir (pedoman): QS(45:20)</li>
43. <li>Al-Balagh (penyampaian/kabar): QS(14:52)</li>
44. <li>Al-Qaul (perkataan/ucapan): QS(28:51)</li>
45. </ul>
46. </p>
47. <font color="0000ff"> <a name="#kunci4">Struktur dan pembagian Al-Qur'an </a>
48. </font>
49. <p>
50. Artikel utama untuk bagian ini adalah: Surat dalam Al-Qur'an, Makkiyah, dan Madaniyah
51. </p>
52. <font color="#0000ff"> <a name="kunci5">Surat, ayat, dan Ruku'
55. <p>
56. <font color="#0000ff"> <a name="kunci6">Juz dan Manzil </a> </font>
57. <p>Dalam skema pembagian lain, Al-Qur'an juga terbagi menjadi 30 bagian
58. dengan panjang ama yang dikenal dengan nama juz.
59. Pembagian ini untuk memudahkan mereka yang ingin mrnuntaskan bacaan
60. Al-Qur'an dalam 30 hari (satu bulan).
61. Pembagian lain yakni manzil memecah Al-Qur'an menjadi 7 bagian
62. dengan tujuan menyelesaikan bacaan dalam 7 hari (satu minggu).
63. Kedua jenis pembgian ini tidak meiliki hubungan dengan pembagian subyek bahasan
64. tertentu.
65. </P></body>
66. </html>

C. Tugas
1. Ketiklah skrip 3.1 dengan notepad simpan dengan nama prg31.html

2.Doubleklik-lah file:prg31.html amati hasilnya gantilah baris 7 dengan <ul type="circle"> atau
   <ul type="square">

3. Ketiklah skrip 3.2 dengan notepad simpan dengan nama prg32.html

4. Double klik-lah file: prg32.html amati hasilnya gantilah baris 7 dengan <ol type="i"> atau
    <ol type="A">

5. Cobalah skrip 3.3 sampai 3.5 amati hasilya.

6. Buatlah link internal yang dapat kembali kehalaman atas.

Javascript I

                                              Javascript I

A. Tujuan Praktikum
     a. Mahasiswa dapat membuat dokumen HTML dengan javascript
     b. Mahasiwa dapat memanfaatkan form menampilkan dialog pesan
     c. Mahasiwa dapat memanfaatkan form untuk program penjumlahan dengan javascript

B. Dasar Teori
     Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini
     dinamakan "LiveScript" yang berfungsi sebagai bahasa sederhana untuk browse Netscape Navigator
     2. Pada masa itu bahasa ini banyak dikritik karena kurang aman, pengembangannya yang terkesan
     buru-buru dan tidak ada pesan kesalahan yang ditampilkan setiap kali kita membuat kesalahan pada
     saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape
     dan Sun (pengembang bahasa pemrograman "Java") pada 4 desember 1995. Pada saat yang
     bersamaan microsoft sendiri mencoba untuk mengadaptasikan Javasript adalah bahasa yang
     berbentuk kumpulan script yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang
     sejarah internet bahasa ini adalah bahasa pertama untuk web. Bahasa ini adalah bahasa
     pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan
     mengijinkan pengeksekusian perintah perintah di user, yang artinya disisi browser bukan disisi
     server web.
   Terdapat dua cara untuk menuliskan kode-kode Java Script gar dapat ditampilkan pada halaman
   HTML yaitu:
   a). Javascript ditulis pada file yang sama
     Untuk penulisan dengan cara ini, perintah yang digunakan adalah :
     <HTML>
     <HEAD> \ <TITLE>...... . \ </TITLE>
     </HEAD>
     <BODY>
     <SCRIPT LANGUAGE="Javascript">
        //kode javascript disini
     </SCRIPT>
      //KODE html DISINI
     </BODY>
     </HTML>

      b). Javascript ditulis pada file terpisah
      Kode Javascript bisa juga kita buat dalam file terpisah dengan tujuan agar dokumen HTML isinya
      tidak terlalu panjang. Atibut yang digunakan adalah
      <SCRIPT SRC="namafile.js">...\<\SCRIPT>
      Diantara tag </SCRIPT.....> dan \ <SCRIPT> tidak perlu lagi kode Javascriptnya karena sudah
      dibuat dalam file terpisah. File yang mengandung Javascript berekstensi .js
      Tidak seperti bahasa pemrograman lainnya, Javascript tidak memiliki tipe data secara explist.
      Hal ini dapat dilihat dari beberapa contoh variabel ditas. Anda mendeklarasikan variabel tapi tidak
      menentukan tipenya. Meskipun Javascript tidak memiliki tipe data secara explist. JavaScript
      mempunyai tipe data implist. Terdapat empat macam tipe data implist yang dimiliki oleh
     JavaScript yaitu : Numerik, String, Boolean, Null.
     Operator pada JavaScript terbagi enam, yaitu: ritmetika, Pemberian nilai (Asign), Pemanipulasian
     bit (bitwise), Pembanding, Logika, string.

skrip 9.1 Halo JavaScript________________________________________________________
1. <html>
2. <head>
3. <title>Halo Javascript</title>
4. </head>
5. <body>
6. <SCRIPT language="Javascript">
7. document.write("Halo saya baru belajar JAVASCRIPT !");
8. </SCRIPT>
9. </body>
10.</html>

skrip 9.2 Menulis dokumen dengan Javascript__________________________________________
1. <html>
2. <head>
3. <title>Halo Javascript</title>
4. </head>
5. <body>
6. <SCRIPT language="Javascript">
7. document.write("<h3> Pekerjaan hari ini: </h3>");
8. document.write("<ul>");
9. document.write("<li> Servis motor </li>");
10.document.write("<li> Belanja Sembako </li>");
11. document.write("<li> Memberi makan ikan </li>");
12. document.write("<li> Ngajari anak belajar </li>");
13. document.write("</ul>");
14. </SCRIPT>
15. <h1> Ini di luar javascript </h1>;
16. </body>
17. </html>
18. </head>

skrip 9.3 Eksternal Javascript______________________________________________________
1. <html>
2. <head>
3. <title>Eksternal Javascript</title>
4. </head>
5. <body>
6. <SCRIPT language="Javascript" src="isi.js"></SCRIPT>
7.<h1> Ini diluar Javascript </h1>
8. </body>
9. </html>

skrip 9.4 Operasi Aritmatik dan string________________________________________________

1. <html>
2. <head>
3. <title>Operasi Aritmatik dan String</title>
4. </head>
5. <body>
6. <SCRIPT language="Javascript">
7. documen.writeln("<PRE>");
8. documen.writeln("<h3>Operasi Aritmatik dan String</h3>");
9. var A = "1";
10. var B = "2";
11. var C = "3";
12. var D = "4";
13. var E = "A+B";
14. documen.writeln(' Hasil "1" + "2" = ' + E);
15. E = B + C;
16. document.writeln(' Hasil "2" + 3 = ' + E);
17. E = C + D;
18. document.writeln(' Hasil 3 + 4 = ' E);
19. document.writeln("</PRE>");
20. </SCRIPT> </P>
21. </body>
22. <html>

Selasa, 01 Maret 2011

Tag Dasar

Tag Dasar

A. Tujuan Praktikum
      1. Mahasiswa dapat mengerti struktur dasar HTML
      2. Mahasiswa dapat membuat halaman web dengan tag dasar

B. Dasar Teori
     HTML atau Hypertext Markup Language merupakan salah satu format yang digunakan dalam      pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Dokumen HTML disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk sebuah aplikasi teks editor. Dokumen HTML berekstensi HTML atau HTM. Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut :
skrip 1.1 Struktur dasar HTML
1. <html>
2.<head>
3.   <title>Judul Halaman web</title>
4. </head>
5.              </body>
6.                        Isi Halaman WEB
7.              </body>
8. </html>
Tag dasar dasar HTML adalah sebagai berikut :
Tabel 1.1 Tag Dasar
Start Tag                 Kegunaan
      <html>                             Mendefenisikan sebuah dokumen html
        <body>                            Mendefenisikan isi /badan suatu dokumen
        <h1>-<h6>                      Mendefenisikan heading ke 1 s/d heading ke 6
        <p>                                  Mendefenisikan sebuh paragraph
        <br>                                 Menyisipkan sebuah line break
        <hr>                                 Mendefenisikan sebuah garis horizontal
        <!-->                                Mendefenisikan komentar dalam kode sumber HTML

skrip 1.2. Heading_________________________________________________________________
1. <html>
2.<head>
3.    <title>Judul Halaman web</title>
4.</head>
5.              <body>
6.              <h1>Ini adalah heading 1</h1>
7.              <h2>Ini adalah heading 2</h2>
8.              <h3>Ini adalah heading 3</h3>
9.              <h4>Ini adalah heading 4</h4>
10.            <h5>Ini adalah heading 5</h5>
11.            <h6>Ini adalah heading 6</h6>
12.
13.           </body>
14.</html>

skrip 1.3 Paragraph_________________________________________________________________
1. <html>
2. <head>
3. <title>Judul Halaman Web,/title>
4. </head>
5. <body>
6.     <h1>Dasar teori</h1>
7.     <p>
8. HTML atau Hypertext Markup Language merupakan salah satu format yang digunakan
9. dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Dokumen HTML
10. disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu
11. yang digunakan untuk mengatur format tampilan suatu dokumen.
12. </p> <p>
13. Untuk membuat
14. dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor. Dokumen HTML berekstensi
15. HTML atau HTM. Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai
16. berikut:
17. </p>
18.    </body>
19. </html>

skrip 1.4 Garis Horizontal dan Line Break___________________________________________
1. <html>
2. <head>
3. <title>Judul Halaman Web</title>
4. </head>
5.                 <body>
6.               <h1>Dasar teori,/h1>
7.               <hr>
8.               <p>
9.   HTML atau Hypertext Markup Language merupakan salah satu format yang digunakan
10. <br>
11. dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Dokumen HTML
12. <br>
13. disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu
14. yang digunakan untuk mengatur format tampilan suatu dokumen.
15. </p> <p><,hr>
16. Untuk membuat
17. dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor. Dokumen HTML berekstensi
18. HTML atau HTM. Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai
19. berikut:
20. </p>
21. </body>
22. </html>

skrip 1.5 Komentar-komentar tambahan______________________________________________
1. <html>
2. <head> 
3.     <title>Judul Halaman Web</title>
4.   </head>Tag penutup head-->
5.     <body> 
6.   <h1>Dasar teori</h1>
7.   <hr> 
8. <p> 
9. HTML atau Hypertext Markup Language merupakan salah satu format yang digunakan
10. <br> 
11. dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Dokumen HTML
12. <br>
13. disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu
14. yang digunakan untuk mengatur format tampilan suatu dokumen.
15. </p> <p><,hr>
16. Untuk membuat
17. dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor. Dokumen HTML berekstensi
18. HTML atau HTM. Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai
19. berikut:
20. </p>
21. </body>
22. </html>

C. Tugas:

1. Ketiklah skrip 1.1 dengan notepad simpan dengan nama prg11.html
2. Doubleklik lah file: prg11.html amati hasilnya tujukan judulnya
3. Modifikasi skrip1.1 menjadi skrip 1.2 simpan dengan nama prg1.2 .html
4. Amati hasilnya dengan cara double klik file nya
5. Modifikasi skrip1.2 menjadi skrip 1.3 simpan dengan nama prg1.3 .html
6. Amati hasilnya dengan cara double klik file nya
7. Modifikasi skrip1.3 menjadi skrip 1.4 simpan dengan nama prg1.4 .html
8. Amati hasilnya dengan cara double klik file nya
9. Modifikasi skrip1.4 menjadi skrip 1.5 simpan dengan nama prg1.5 .html
10. Amati hasilnya dengan cara double klik file nya

Ansyari Study