Buku ajar desain web

1,691 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,691
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Buku ajar desain web

  1. 1. BUKU AJAR DESAIN WEB Oleh Moh.Erdda Habiby, S,ST DAFTAR ISI : Bab I HTML ….................................................................................................................... 2 Bab II CSS ........................................................................................................................ 20 Bab III JAVASCRIPT …..................................................................................................... 34 Bab IV SUMBER .............................................................................................................. 41 1
  2. 2. I. HYPERTEXT MARKUP LANGUAGE (HTML) TUJUAN : 1. Memahami tentang konsep WWW 2. Memahami tentang struktur dokumen HTML 3. Memahami tentang dasar-dasar HTML 4. Memahami tentang pengaturan teks, daftar item, gambar, tabel, form, meta dll. LAYANAN-LAYANAN DI INTERNET • • • • • • • • • • Dokumen/World Wide Web/WWW (HTTP) e-mail (POP, SMTP, IMAP) Chatting (IRC) Pertukaran file (FTP) Akses komputer jarak jauh (telnet) Direktori (LDAP) Monitoring jaringan (NMAP) Modul aplikasi (SOAP) Suara (VoIP) dll. WORLD WIDE WEB Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut : • Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW. • Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet. • HTML digunakan untuk membuat document yang bisa di akses melalui web. PENGENALAN HTML Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu: • Mengontrol tampilan dari web page dan contentnya. • Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia. • Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. • Menambahkan object-object seperti image, audi, video dan juga java applet dalam document HTML. BROWSER DAN EDITOR Browser Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya. Editor Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad. TAG DASAR YANG DIBUTUHKAN DALAM DOKUMEN Berikut ini adalah tag dasar yang dibutuhkan dan harus ada dalam dokumen HTML : <HTML> dan </HTML> <HEAD> dan </HEAD> <TITLE> dan </TITLE> <BODY> dan </BODY> 2
  3. 3. TRY THIS..... <HTML> <HEAD> <TITLE>Latihan HTML</TITLE> </HEAD> <BODY> Selamat Belajar HTML<BR> Semoga Sukses ! </BODY> </HTML> Atribut dasar Tag <BODY> • • • • • • Bgcolor : warna background documen. Leftmargin : ukuran margiin kiri dokumen. Rightmargin : ukuran margin kanan dokumen. Topmargin : ukuran margin atas dokumen. Bottommargin : ukuran margin bawah dokumen. Link, vlink, alink : warna link, aktif link dan link yang sudah dikunjungj pada dokumen. CONTOH Atribut bgcolor : <body bgcolor=”blue”> atau <body bgcolor=”0000FF”> Atribut leftmargin,rightmargin,topmargin ,dan bottommargin : <body leftmargin=”25” rightmargin=”25” topmargin=”20” bottommargin=”30”> Atribut link,alink, dan Vlink <body link=”fuchsia” alink=”white” vlink=”silver”> TRY THIS..... <HTML> <HEAD> <TITLE>LATIHAN WEB</TITLE> </HEAD> <BODY bgcolor=”blue” link=”fuchsia” alink=”white” vlink=”silver” leftmargin=”25” rightmargin=”25” topmargin=”20” bottommargin=”30”> ...teks dokumen pertamaku ini ditulis di area body <br> <a href=””>ini link ke 1</a></br> <a href=””>ini link ke 2</a> </BODY> </HTML> FORMAT TAMPILAN SEDERHANA Tag untuk headline Untuk membuat text HEADLINE (judul), kita harus, melingkupi text tersebut dengan tag pembuka dan tag penutup headline. Tag headline ditulis dengan aturan sebagai berikut: Tag pembuka <HX> dan tag penutup </HX>. Perhatikan , X diganti dengan angka! 3
  4. 4. TRY THIS..... <HTML> <HEAD> <TITLE>Format tampilan sederhana </TITLE> </HEAD> <BODY> <H1>HEADLINE LEVEL 1</H1> <H2>HEADLINE LEVEL 2</H2> <H3>HEADLINE LEVEL 3</H3> <H4>HEADLINE LEVEL 4</H4> <H5>HEADLINE LEVEL 5</H5> <H6>HEADLINE LEVEL 6</H6> </BODY> </HTML> Tag Style Sederhana Kini akan dibahas beberapa text style. Tag-tag tersebut digunakan untuk mengatur format text. Contoh: • Untuk membuat text tebal bisa menggunakan <strong> atau <b> • Untuk membuat text miring <em> atau <i> • Untuk membuat text digaris bawahi <u> • Untuk membuat text seperti teletype writer <tt> • Untuk membuat text seperti font courier <code> • Untuk membuat text seperti code <samp> TRY THIS..... <HTML> <HEAD> <TITLE> Format tampilan sederhana</TITLE> </HEAD> <BODY> <H1>HEADLINE LEVEL 1</H1> <H2>HEADLINE LEVEL 2</H2> <H3>HEADLINE LEVEL 3</H3> <H4>HEADLINE LEVEL 4</H4> <H5>HEADLINE LEVEL 5</H5> <H6>HEADLINE LEVEL 6</H6> Tulisan ini ditulis dengan <strong>”tag strong, agar tebal”</strong> <br> Tulisan ini ditulis dengan <em>”tag EM, agar miring”</em> <br> Tulisan ini ditulis dengan <code>”tag code, agar seperti kode program”</code> <br> </BODY> </HTML> MENAMBAHKAN BULLETS DAN NUMBERING Untuk memudahkan ada dua jenis bullet yang akan dibahas dalam buku ini, yaitu Unordered list atau disingkat menjadi <UL> dan ordered list yang disingkat <OL> Dengan menggunakan <UL> kita hanya bisa membuat bullet saja, sedangkan untuk menampilkan list dengan memberikan nomer di awal text adalah dengan menggunakan pilihan <OL> untuk membuat list setiap kali anda harus menggunakan <li> di awal setiap kalimat atau text yang akan 4
  5. 5. menggunakan <ul> atau <ol>. Karena <li> lah yang dijadikan patokan sebagai awal penulisan list dalam suatu dokumen. TRY THIS..... <html> <head><title>menambahkan bullets dan numbering</title> </head> <body> <h3> mencoba bullets dan numbering </h3> <b> seri operating system </b> <ul> <li> microsoft windows 2000 profesional </li> <li> microsoft windows 2000 server </li> <li> instalasi dan konfigurasi windows</li> </ul> <b> seri microsoft office</b> <ol> <li>microsoft word 2000</li> <li>microsoft access 2000</li> <li>microsoft power point 2000</li> </ol> </body> </html> Penggunaan tag <DL>, <DT>, <DD> untuk menampilkan daftar khusus dengan tampilan menjorok ke kanan. TRY THIS TOO..... <HTML> <HEAD> <TITLE>Daftar Definisi</TITLE> </HEAD> <BODY> <B>Kamus Teknologi Informasi:</B> <DL> <DT>HTML</DT> <DD>Bahasa yang digunakan untuk menyusun Web</DD> <DT>HTTP</DT> <DD>Protokol yang dipakai untuk mentransfer HTML</DD> </DL> </BODY> </HTML> MENEMPATKAN KOMENTAR komentar dalam suatu dokumen amatlah penting. Komentar ditempatkan di antara program untuk memberikan komentar atas program yang dibuat. Sehingga bagi orang lain yang membaca program tersebut bisa dimengerti tanpa menanyakan kepada orang yang membuatnya. Syntax : diawali dgn <!-diakhiri dgn --> 5
  6. 6. TRY THIS..... <html> <head> <title>menambahkan bullets dan numbering</title> </head> <body> <h3> mencoba bullets dan numbering </h3> <b> seri operating system </b> <!-- Menampilkan bullets --> <ul> <li> microsoft windows 2000 profesional </li> <li> microsoft windows 2000 server </li> <li> instalasi dan konfigurasi windows</li> </ul> <b> seri microsoft office</b> <!-- Menampilkan number --> <ol> <li>microsoft word 2000</li> <li>microsoft access 2000</li> <li>microsoft power point 2000</li> </ol> </body> </html> FORMAT ELEMENT ARRAY <P> TAG UNTUK PARAGRAPH Tag <p> digunakan untuk menampilkan satu blok text dalam bentuk paragraph. Blok text tersebut diawali dengan <p> dan ditutup dengan </p>, penggunaan tag </p> sebagai penutup akan memastikan bahwa paragraph akan disertai dengan extra space. TRY THIS..... <html> <head> <title> tag P untuk paragraph</title> </head> <body> <p> pergunakan tag p untuk membuat paragraph.element text yang dimulai dengan tag p akan dimulai dengan baris baru, dan akan ditambahkan baris kosong padanya.</p> <p> ini adalah line break dengan extra baris kosong, yang dibuat dengan tag p. <br> ini adalah line break yang dibuat dengan tag br, coba bandingkan dengan tag p. </body> </html> <PRE> TAG PRE -FORMATED TEXT tag <pre> merupakan tag yang digunakan untuk membuat satu blok tulisan yang tata letaknya dapat kita atur sesuai dengan tampilan pada saat pembuatan. 6
  7. 7. TRY THIS..... <html> <head> <title>tag pre untuk pre-formatted text</title> <body> <pre> TO : LEE SMITH FROM : CHRIS BROWN SUBJECT : MEETING SCHEDULE AND AGENDA FOR WEB SITE TEAM DATE : THURS, 14 AUG 1997 22:00:05 9/20/97 8:00 AM ROOM 218 9/21/97 9.00 AM ROOM 218 9/22/97 2.00 PM ROOM 111 AT THE FIRST MEETING, WE SHOULD DISCUSS HOW TO USE THE &LT;STYLE&GT; TAG TO MAKE OUR HOME PAGE MORE INTERESTING. </pre> </body> </head> </html> <DIV> TAG UNTUK MEMFORMAT ALIGNMENT SATU BLOK TEXT Tag <div> digunakan untuk mengatur alignment satu blok text, memungkinkan pengaturan rata kiri atau rata kanan atau rata tengah. syntax: <div align = ”left” | ”center” | ”right” > TRY THIS..... <html> <head> <title> Tag div untuk alignment text</title> </head> <body> <div align=right> <H1>aligning a block of content to right </H1> <p>you can use a div tag to align a block of content to the right.</p> <p>the content can include anything you like, including tables,images, lists, and so on. Note, however, that right-aligned lists often do not look very neat.<p> </div> </body> </html> TAG - TAG UNTUK MEMFORMAT TEXT PHYSICAL FORMATTING <B> ... </B> Untuk Bold text <I> ... </I> Untuk italic text <U> ... </U> Untuk Underline Text <BIG> ... </BIG> Untuk ukuran yang lebih besar dari normal <SMALL> ... </SMALL> Untuk ukuran yang lebih kecil dari normal <STRIKE> ... </STRIKE> Untuk memberi garis di tengah text <SUP> ... </SUP> Untuk Superscript text <SUB> ... </SUB>UNtuk Subscript text 7
  8. 8. <CENTER> ... </CENTER> Untuk Center document LOGICAL FORMATTING <EM> ... </EM> / <I> Text miring <STRONG> … </STRONG> / <B> Text tebal <DEL> ... </DEL> / <STRIKE> Mencoret text <INS> ... </INS> / <U> Underline text <SPAN> TAG UNTUK MEMFORMAT TEXT DALAM BARIS Tag <span> digunakan untuk memformat sejumlah text pada suatu baris kalimat tanpa mengganggu text lain dalam baris yang sama syntax: <span style=”color : warna; font-weight : bold | reguler; font-style : italic | normal”> TRY THIS..... <html> <head> <title>tag div untuk alignment text</title> </head> <body> <p>here is some normal paragraph text. It looks OK, but it would lookmuch better if it were <span style=”color:red; font-weight:bold; font-style:italic”> in bright, bold, italic merah. </span> </body> </html> <CENTER> TAG UNTUK CENTER TEXT Tag <center> akan menyebabkan text atau tulisan yang diapit oleh tag <center> dan </center> akan diposisikan center atau ditengah secara horizontal. TRY THIS..... <html> <head> <title> tag div untuk alignment text</title> </head> <body> <center><H1>Perguruan Tinggi Raharja</H1></center> selamat datang di jurusan sistem komputer CCIT </body> </html> <BR> TAG UNTUK LINE BREAK Tag <BR> akan menyebabkan text atau tulisan yang ada di sebelah kanannya turun ke bawah satu baris (line break). Tag <BR> tidak mempunyai penutup. TRY THIS..... <html> <head> <title> tag div untuk alignment text</title> 8
  9. 9. </head> <body> Tulisan ini berada pada baris pertama <br>tulisan ini turun karena tag BR <br> tulisan ini juga karena tag BR. </body> </html> <HR> TAG UNTUK MEMBUAT GARIS PEMISAH HORIZONTAL Tag <HR> digunakan untuk membuat garis pemisah antar baris atau untuk membuat suatu garis horizontal sepanjang lebar halaman homepage. tag<HR> memiliki tag penutup. Syntax: <HR ALIGN=”CENTER” | “LEFT”| “RIGHT” NOSHADE SIZE = “THICKNESS” WIDTH=”WIDTH” > ALIGN : Untuk menentukan apakah rata kiri, tengah, atau kanan. NOSHADE: jika ditulis maka garis dibuat tanpa bayangan, jika tidak maka garisnya memiliki bayangan SIZE : untuk menentukan ketebalan garis (dalam pixel) WIDTH : untuk menentukan lebar dan panjang garis (dalam persen %) TRY THIS..... <html> <head> <title> tag div untuk alignment text</title> </head> <body> <P> This text appears above a thick, unshaded, centered horizontal rule. <HR NOSHADE ALIGN=”center” width=”50%” SIZE=”8”> <P>this text appears below the horizontal rule. </body> </html> <MARQUEE> TAG Kadang-kadang kita memerlukan text dalam web yang dibangun sedikit bergerak atau berjalan ke kiri atau kekanan adalah sebagai berikut : Syntax : <MARQUEE align="center" direction="right" height="50" scrollamount="2" width="80%"> …. </MARQUEE> Atribut yang biasa digunakan : 1. Widht = lebar blok teks dalam pixel atau persen. 2. Title = pesan yang akan muncul saat mouse berada di atas teks. 3. Direction = “left / right / up / down” untuk arah gerakan teks. 4. Scrollmount = kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya. 5. Bgcolor = warna background teks. 6. Behavior = “scroll / slide / alternate” untuk mengatur perilaku gerakan 9
  10. 10. TRY THIS..... <HTML> <HEAD> <TITLE>LATIHAN WEB</TITLE> </HEAD> <BODY> <marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" align="center" width="100%" height="200"> <a href="http://miscah.blogspot.com/2009/04/cara-pasang-search-engine-diblog.html">Cara Pasang Search Engine </a> <br> <a href="http://miscah.blogspot.com/2009/04/trik-membuat-read-more.html">Trik Membuat Read More (Template Baru) </a> <br> <a href="http://miscah.blogspot.com/2009/04/membuat-favicon.html">Cara Membuat Favicon </a> <br> <a href="http://miscah.blogspot.com/2009/04/cara-membuat-labelkategori.html">Cara Membuat Label (Kategori) </a> <br> </marquee> </BODY> </HTML> Pengaturan Warna Font Untuk mengatur warna font dapat melalui 2 cara, pertama melalui tag <body> dan yang kedua melalui tag <font> seperti yang akan anda lihat dibawah ini. TRY THIS..... <HTML> <HEAD> <TITLE>Warna - Bagian 2</TITLE> </HEAD> <BODY BGCOLOR = "black" TEXT = "gray"> Normal<BR> <FONT COLOR = "blue">Warna Biru</FONT><BR> <FONT COLOR = "green">Warna Hijau</FONT><BR> <FONT COLOR = "red">Warna Merah</FONT><BR> <FONT COLOR = "yellow">Warna kuning</FONT><BR> </BODY> </HTML> <FONT> TAG Dalam menulis suatu dokumen kita perlu mengatur ukuran huruf. Misalnya untuk judul bisa menggunakan lebih besar, untuk sub judul lebih kecil dibandingkan judul, dan untuk isi biasanya ukuran kecil atau sedang. Untuk ukuran / size font dimulai dari 1 sampai 7, nilai default nya 3. Ada juga font color yang digunakan untuk memberikan warna pada font. Lalu ada juga font face yang dimaksud font face adalah tipe dari font tersebut. Misalnya arial, times new roman dll. 10
  11. 11. Syntax : <font color=”color” face=”font type” size=”1 until 7” > …. </font> TRY THIS..... <HTML> <HEAD> <TITLE>Jenis Font</TITLE> </HEAD> <BODY> Normal: 012345ABCD<BR> <FONT COLOR="blue" FACE = "Arial">Arial: 012345ABCD</FONT> <BR> <FONT COLOR="green" FACE = "Courier" SIZE="5"> Courier: 012345ABCD</FONT> <BR> </BODY> </HTML> ANCHOR DAN LINK Tag <A> memungkinkan kita untuk mendefinisikan anchors. (point atau tempat dimana kita dapat mengaksesnya sewaktu-waktu) dan links (pemanggil anchors atau dokumen .html lain, yang membawa kita masuk ke anchor tersebut ketika link kita click). <A> sebagai Anchor sebuah anchor mengedintifikasi suatu lokasi dalam suatu dokumen HTML. Untuk mengedintifikasi bahwa tag <A> digunakan sebagai anchor, kita harus mengisi parameter NAME pada tag <A> Syntax : <A NAME=”anchor name” > … </A> <A> Sebagai Link Untuk mendefinisikan suatu link, pergunakan tag <A> dengan mengisi parameter HREF pada tag <A>, untuk memberitahu tujuan dari sebuah link ketika user menekan click isi atau text yang berada di antara tag <A HREF> dan </A>. Nilai yang diisikan pada parameter HREF adalah berupa URL (uniform resource locators). Jika kita menginginkan link membuka dokumen baru, maka nilai HREF harus merupakan nama dokumen yang dituju. Namun, apabila kita menginginkan link membawa arah tampilan ke suatu tempat pada dokumen yang sama, maka nilai HREF harus merupakan nama dari anchor tujuan yang diawali dengan simbol “#” (contoh : #bagian 1). 11
  12. 12. Syntax : <A HREF=”location atau nama dokumen” > … </A> TRY THIS..... <HTML> <HEAD> <TITLE>link pada dokumen yang sama</TITLE> </HEAD> <BODY> <A NAME=section2> <H2>A Cold Autum Day</H2></A> if this anchor is in a file called “nowhere.htm” you could define a link that jumps to the anchor as follows : <P>Jump to the second section <A HREF=”#section2”>A cold Autumn day</A> in the mystery “A man from nowhere.” </BODY> <HTML> AND THIS..... <HTML> <HEAD> <TITLE>link untuk memanggil dokumen yang sama</TITLE> </HEAD> <BODY> <A HREF=”coba.html”>Panggil dokumen coba.html</A>untuk melihat link memanggil dokumen lain. </BODY> <HTML> IMAGE Untuk menampilkan gambar pada html dapat menggunakan 2 cara yang pertama memanfaatkan tag <body> dan yang kedua menggunakan tag <img>. <BODY BACKGROUND> TAG <HTML> <HEAD> <TITLE>Menampilkan Gambar</TITLE> </HEAD> <BODY BACKGROUND = "../citra/gunung.jpg"> Gambar Komputer terbaru <IMG SRC = "komputer.gif" ALIGN = "MIDDLE"> </BODY> </HTML> 12
  13. 13. <IMG> TAG Tag <IMG> digunakan untuk menentukan file image yang akan ditampilkan dalam dokumen html. File format image yang umum digunakan adalah: • GIF (Graphics Interchange Format) • JPEG (Joint Photograpic Experts Group) Syntax : <IMG SRC=”location” ALT=”Alternativetext” ALIGN=”alignment” BORDER=”border width” HEIGHT=”height” WIDTH=”width” > TRY THIS..... <HTML> <HEAD> <TITLE> MEMBUAT IMG<TITLE> </HEAD> <BODY> <img src=”Violets.JPG” alt=”voilets” width=150 height=113> </BODY> </HTML> TABLES <TABLE> TAG Tag <Table> digunakan tag yang berfungsi untuk mendefinisikan sebuah tabel. Di dalam tebel berisi baris dan sel. Untuk membuat baris gunakan tag <tr>, untuk membuat baris heading gunakan tag <th>, sedangkan untuk membuat sel gunakan tag <td>. Syntax : <table align=”left | right | center” bgcolor=”color” border=”value” cellpadding=”value” cellspacing=”value” height=”height” width=”width” cols=”numofcols” hspace=”horizmargin” vspace=”vertmargin” > … </tabel> 13
  14. 14. <CAPTION> TAG Tag <caption> digunakan untuk mendefinisikan judul dari suatu tabel. Tag ini diletakkan di dalam tag <table> (antara <table> dan </table>) Syntax : <caption align=”bottom” | “top”>......</caption> <TR> TAG Tag <TR> berfungsi untuk mendefinisikan baris dalam tabel. tag ini diletakkan di dalam tag <table> (antara <table> dan </table>) Syntax : <tr align=”center | left | right” valign=”baseline | bottom | middle | top” bgcolor=”color” > ... </tr> <TD> TAG Tag <td> digunakan mendefinisikan sel dalam bari. Tag <td> ini diletakkan di dalam tag <tr> (antara <tr> dan </tr>). Syntax : <td align=”center | left | right” vlign=”baseline | bottom | middle | top” bgcolor=”color” colspan=”value” rowspan=”value” height=”pixelheight” width=”pixelwidth” nowrap=”value” > …. </td> <TH> TAG Tag <th> digunakan untuk mendinisikan baris heading dalam tabel. Tag ini diletakkan di dalam tag <TR> (antara <tr> dan </tr>) Syntax : <th align=”center | left | right” vlign=”baseline | bottom | middle | top” bgcolor=”color” colspan=”value” rowspan=”value” height=”pixelheight” 14
  15. 15. width=”pixelwidth” nowrap=”value” > ….. </th> TRY THIS..... <html> <head> <title>membuat table</title> </head> <body> <table border cellpadding=”8” cellspacing=”4” bgcolor=”yellow”> <tr><th> english </th><th> spanish </th><th> german </th></tr> <tr><td> one </td><td> uno </td><td> ein </td><tr> <tr><td> two </td><td> dos </td><td> zwei </td><tr> <tr><td> three </td><td> tres </td><td> drei </td><tr> <caption align=”bottom”> <b> Table 1</b> : tables are as easy as one, two, three </caption> </table> </body> </html> FRAMES <FRAMESET> TAG Tag <frameset> digunakan untuk mendefinisikan suatu set yang terdiri dari beberapa frame yang akan ditampilkan pada window browser. Dalam tag <frameset> (antara <frameset> dan </frameset>) terdiri dari beberapa tag <frame>, dan tiap tag frame merupakan definisi dari suatu frame (bagian). Syntax : <frameset cols = “column width list” rows=”row height list” border=”pix width” bordercolor=”color” frameborder=”yes” | “no” > ... </frameset> <FRAME> TAG Tag <frame> adalah tag yang digunakan untuk membuat frame. Frame ini merupakan suatu bagian pada web browser yang dapat diatur secara individual (atau bisa dibilang window di dalam window). Tag <frame> harus digunakan di dalam tag <frameset> (antara <frameset> dan </frameset> Syntax : < frame name=”frame name” 15
  16. 16. noresize scrolling=”yes” | “no” | “auto” src=”url” > <NOFRAMES> TAG Tag <noframes> menampilkan isi dokumen apabila browser yang digunakan oleh user tidak mendukung frame. Tag ini tidak akan diakses apabila browser yang digunakan adalah browser yang mendukung frame. Syntax : <noframes>....<noframes> TRY THIS..... Perhatian : Sebelum mencoba contoh di atas, dianjurkan untuk ,membuat dokumen HTML dengan nama : frleft.htm, frtop.htm dan frmain.htm <html> <head> <title>membuat frame</title> </head> <frameset cols=”20%,*”> <frame src=”frleft.htm” name=”noname”> <frameset rows=”30%,*”> <frame src=”frtop.htm” name=”toptoc”> <frame src=”frmain.htm” name=”outer”> </frameset> </frameset> <noframes> <body> you must use a browser that can display frames to see this page. </body> </noframes> </html> PENGGUNAAN FORM dan ELEMENT INPUT Kegunaan Form Berikut ini beberapa contoh kegunaan Form dalam web: 1. memperoleh data-data user baik nama, alamat dan data lainnya 2. memperoleh informasi pembelian secara online 3. memperoleh feedback dari user mengenai website anda. Form Element Tag <FORM> digunakan untuk membuat form dalam document HTML. ACCEPT : Mendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form. Syntax: ACCEPT=”Internet Media Type” METHOD : Menentukan bagaimana data akan di kirim ke server. GET – data akan di kirim dengan menggunakan query string pada URL. POST – data akan di kirim ke server sebagai block data ke script. Syntax: METHOD = ” POST | GET ” 16
  17. 17. ACTION : Menentukan lokasi dari script yang akan memproses data dari form Syntax: ACTION=”URL” Mengenal komponen input Dalam penulisan dokumen html khususnya yang berhubungan dengan form ada beberapa komponen input yang sering digunakan, misalnya radio button,check box,check list, dan sebagainya. • Teks satu baris (single-line text) <input type="text"> • • • • • • • • • Teks banyak baris (multi-line text) <textarea></textarea> Teks rahasia (password) <input type="password"> Pilihan tunggal (single selection) <input type="radio">, <select></select> Pilihan majemuk (multiple selections) <select multiple></select> Centang (on/off) <input type="checkbox"> Data bawaan/tersembunyi (hidden) <input type="hidden"> File <input type="file"> Koordinat 2D dalam sebuah bidang gambar <input type="image"> Aksi user melalui penekanan tombol <input type="submit">, <input type="reset">, <input type="button">, <button></button> TAG INPUT Macam macamnya : • <input type="jenis" name="nama" id="id" value="nilai" disabled> type : text, password, radio, checkbox, image, submit, reset, button, hidden, file name : identifier untuk sisi server id : identifier untuk sisi browser value : nilai default disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan) • <input type="[text | password]" name="nama" readonly size="m" maxlength="n"> readonly : jika disebutkan maka elemen tidak bisa diubah nilainya size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS) maxlength : banyaknya karakter maksimal yang dapat dimasukkan user • <input type="[radio | checkbox]" name="nama" checked> checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih • <input type="image" src="gambar" name="nama" alt="alternatif"> src : nama file gambar alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar TAG TEXTAREA, SELECT, BUTTON • <textarea name="nama" rows="b" cols="k">nilai</textarea> nilai : nilai default rows : banyaknya baris yang ditampilkan (tinggi) cols : banyaknya kolom/karakter yang ditampilkan (lebar) • <select name="nama" multiple size="r"> <option value="nilai 1" selected>teks 1</option> <option value="nilai 2">teks 2</option> … </select> multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl) size : banyaknya baris pilihan yang ditampilkan (default = 1) selected : jika disebutkan maka defaultnya dalam keadaan terpilih 17
  18. 18. • <button type="jenis" name="name" value="nilai">tampilan</button> type : submit, reset, button tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol TRY THIS..... <HTML> <HEAD> <TITLE>Contoh Penggunaan Formulir</TITLE> </HEAD> <BODY> <FORM ACTION = "info.htm" METHOD = "POST"> Nama : <INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20" MAXLENGTH = "20"> <BR> Hobby : <INPUT TYPE = "TEXT" NAME = "hobby" SIZE = "25" MAXLENGTH = "40"> <BR> <INPUT TYPE = "SUBMIT" VALUE = "Kirim"> <INPUT TYPE = "RESET" VALUE = "Kosongkan"> </FORM> </BODY> </HTML> File info.htm yang dituju oleh web diatas. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> INFO.................. </BODY> </HTML> TAG TAG HTML LENGKAP • • • • • • • • • • • • • • • • Structure • html • head • body • div • span Meta Information • DOCTYPE • title • link • meta • style Text • p 18 h1, h2, h3, h4, h5, and h6 strong em abbr acronym address bdo blockquote cite q code ins del dfn kbd pre
  19. 19. • samp • var • br • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • Links • a • base Images and Objects • img • area • map • object • param Lists • • • • • • ul ol li dl dt dd Tables • • • • • • • • • • table tr td th tbody thead tfoot col colgroup caption Forms • • • • • • • • • • form input textarea select option optgroup button label fieldset legend Scripting • script • noscript Presentational • b, i, tt, sub, sup, big, small, hr The Whole Shebang • a • abbr • acronym 19 address area b base bdo big blockquote body br button caption cite code col colgroup dd del dfn div dl DOCTYPE dt em fieldset form h1, h2, h3, h4, h5, and h6 head html hr i img input ins kbd label legend li link map meta noscript object ol optgroup option p param pre q samp script select small span strong style sub
  20. 20. • • • • • • • • • • • • • sup table tbody td textarea tfoot th thead title tr tt ul var TUGAS : 1. Buatlah Website Dinamis dengan tema e-commerce dan personal BAB II.CASCADING STYLE SHEETS (CSS) TUJUAN : 1. Memahami tentang konsep CSS 1. Memahami aturan penulisan pada CSS 2. Memahami selector sebagai pengontrol design 3. Memahami pembuatan background 4. Memformat text pada web 5. Memahami pengaturan bentuk font 6. Membuat pengaturan tabel dan pewarnaannya 7. Membuat hyperlink dan tombol yang menarik dll Konsep CSS Apa itu CSS : • Feature untuk membuat dynamic HTML. • Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template) • Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru) • Support ke semua browser. Aturan penulisan : • Nilai untuk property tidak boleh dalam tanda petik. contoh : color : green; • Nama property bersifat case sensitive. color : green; property : color value : green Cara penggunaan CSS : • External Style Sheet Bentuk : <link rel=“stylesheet” type=“text/css” href=“css_files.css”> dimana : • <link, merupakan tag pembuka diakhiri dengan tanda “>” • rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet • type=“text/css”, file yang dipanggil berupa css • href=“css_files.css”, alamat dokumen stylesheet yang dipanggil Contoh Penggunaan : script efek.css nya..... body { color: green; background: white; font-family : arial; } 20
  21. 21. HTML nya...... <HTML> <HEAD> <TITLE>centranet</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css"> </HEAD> <BODY> <H1>STIKOM PGRI</H1> <P> STIKOM adalah kampus teknik yang concern ke bidang IT </BODY> </HTML> • Internal Style Sheet Bentuk umum : <style type=“text/css”> ...definisi style... </style> Contoh Penggunaan : <HTML> <HEAD> <TITLE>Stikom PGRI</TITLE> <STYLE type="text/css"> body { color: white; background: green; font-family : arial; } </STYLE> </HEAD> <BODY> <H1>STIKOM PGRI</H1> <P> STIKOM adalah kampus teknik yang concern ke bidang IT </BODY> </HTML> • Inline Style sheet Contoh Penggunaan : <HTML> <HEAD> <TITLE>centranet</TITLE> </HEAD> <BODY style="color: white; background: green; font-family : arial; "> <H1>ZEFNET</H1> <P>ZEFNET adalah sebuah web 21
  22. 22. Developer dan Linux Center </BODY> </HTML> ATURAN PENULISAN PADA CSS Syntaxis CSS dibagi dalam 3 bagian : selector {property : value} dimana : selector : tag HTML yang akan didefinisikan (body, H1, Link , dll). property : atribut yang akan diubah Cara penulisan : FONT-FAMILY : sans-serif; FONT-SIZE : small; Cara penulisan yang salah : FONT-FAMILY : “sans-serif”; FONT-SIZE : ‘small’; Cara mendeklarasikan kelompok : (tanda koma serta &) H1, H2 {color : green}; H3, H4 & H5 {color : red}; Cara menuliskan komentar : • Menggunakan tanda : /* ..... */ • Menggunakan tanda : <!---> Bentuk ukuran : SELECTOR SEBAGAI PENGONTROL DESIGN 1. Selector untuk merubah body. <HTML> <HEAD> <TITLE> Selector </TITLE> </HEAD> <style type="text/css"> body{ FONT-FAMILY: Geneva, Arial; FONT-SIZE: 20px; color: red; BACKGROUND-COLOR: green; } </style> <BODY> 22
  23. 23. Halaman efect CSS </BODY> </HTML> 2. Jenis-jenis selector a. Selector bebas <HTML> <HEAD> <TITLE> Selector </TITLE> <style type="text/css"> gbawah{ TEXT-DECORATION: underline; } </style> </HEAD> <BODY> <gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah> </BODY> </HTML> b. Selector dengan class <HTML> <HEAD> <TITLE> Selector </TITLE> <style type="text/css"> .right { text-align : right } </style> </HEAD> <BODY> <h2 class="right">Class <p class="right"> Class Heading 2 </h2> Paragraf</p> </BODY> </HTML> c. Selector Id <HTML> <HEAD> <TITLE> Selector </TITLE> <style type="text/css"> #BODY_115 { FONT-SIZE: 20px; TEXT-DECORATION: underline; COLOR: blue; FONT-FAMILY:Comic Sans MS; } </style> </HEAD> 23
  24. 24. <BODY id="BODY_115"> Menggunakan ID Selector </BODY> </HTML> MEMFORMAT HALAMAN WEB 1. Format dengan margin <HTML> <HEAD> <TITLE>Pengaturan Margin</TITLE> <STYLE ="text/css"> BODY { margin-top : 1cm; margin-right : 2cm; margin-bottom : 1cm; margin-left : 2cm; } </STYLE> </HEAD> <BODY> Pengaturan Margin Halaman (1cm,2cm,1cm,2cm) </BODY> </HTML> 2. Pemetaan menggunakan padding Padding hampir sama dengan margin : a. Margin hanya digunakan untuk membuat batasan-batasan sisi halaman. b. Padding dapat membuat batasan-batasan pada komponen web lain seperti tabel, disamping pengaturan batas halaman. <HTML> <HEAD> <TITLE>Pengaturan Margin</TITLE> <STYLE ="text/css"> BODY { padding-top : 10%; padding-right : 20%; padding-bottom : 40%; padding-left: 20%; } </STYLE> </HEAD> <BODY> Text ini berada di tengah halaman , karna di lakukan pengaturan halaman dengan menggunakan padding atas 10%, kanan 20%,bawah 40%,dan kiri 20%. </BODY> </HTML> 24
  25. 25. MEMBUAT BACKGROUND 1. Background warna <HTML> <HEAD> <TITLE>Menggunakan Background Warna</TITLE> <STYLE type="text/css"> BODY { background-color : yellow} </STYLE> </HEAD> <BODY> Halaman ini di buat Berwarna Kuning </BODY> </HTML> 2. Background campuran <HTML> <HEAD> <TITLE>Menggunakan Background Warna</TITLE> <STYLE ="text/css"> body {background-color : #99CCFF} h2 {background : green} h3 {background-color : transparent} p {background : rgb(240,248,255)} </STYLE> </HEAD> <BODY> <h2>Header 2,Background Hijao</h2> <h3>Header 3 , Bakground Transparan</h3> <p>Background pada paragraph</p> </BODY></HTML> 3. Background gambar Properties background-image background-repeat Value url repeat repeat-x repeat-y no-repeat Keterangan Alamat gambar yang dituju Diulang dlm halaman Diulang sumbu x Diulang sumbu y Tampil 1 gbr Backgroundposition top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos Atas kiri hal Atas tngh hal Atas kanan hal Tgh kiri hal Pusat hal Tngh kanan hal Bwh kiri hal Bwh tgh hal Bwh kanan hal Pakai nilai % 25
  26. 26. Contoh 1 : <HTML> <HEAD> <TITLE>Menggunakan Background Gambar</TITLE> <STYLE ="text/css"> BODY { background-image: url("drums.jpg"); background-repeat: repeat-x; } </STYLE> </HEAD> <BODY> Background Berulang pada Sumbu X </BODY> </HTML> Contoh 2 : <HTML> <HEAD> <TITLE>Menggunakan Background Gambar</TITLE> <STYLE ="text/css"> BODY { background-image:url ("motor.jpg"); background-repeat: no-repeat; background-position: center center; } </STYLE> </HEAD> <BODY> Background di Pusat Halaman </BODY> </HTML> FORMAT TEXT PADA WEB Properties Value Keterangan Pengaturan warna color green, dll Pengaturan Spasi (jrk antar karakter) letter-spacing Normal Ukrn standar HTML Length Ukrn panjang (cm,px) Perataan Text text-align left right center justify text-decoration none Bentuk standar underline Bergaris bwh overline Bergaris atas line-through Text dicoret blink Text berkedip 26
  27. 27. Pengaturan text indentasi text-indent length % Pengubahan Bentuk Karakter text-transform capitalize uppercase lowercase none Dengn cm, px Dengan persentase Contoh 1 : <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css"> p {color : green; letter-spacing: 0.5cm} h4 {letter-spacing: -2px} </STYLE> </HEAD> <BODY> <p>Pengaturan Spasi Pada Paragraph </p> <h4> Header 4</h4> </BODY> </HTML> Contoh 2 : <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css"> h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} </STYLE> </HEAD> <BODY> <h1>Header 1,Di tengah</h1> <h2>Header 2 , Di kiri</h2> <h3>Header 3 ,Di kanan</h3> </BODY> </HTML> Contoh 3 : <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css"> em {text-decoration : overline} h2 {text-decoration: blink} h3 {text-decoration: underline} a {text-decoration: none} </STYLE> </HEAD> 27
  28. 28. <BODY> <em>Bentuk Overline</em> <h2>Header 2, Bentuk Line-through</h2> <h3>Header 3,Bentuk Underline</h3> <p> <a href="http://justerda.wordpress.com"> Penggunaan Dalam Link,Nilai NONE</a></p> </BODY> </HTML> Contoh 4 : <HTML> <HEAD> <TITLE>Format Text </TITLE> <STYLE ="text/css"> p.besar {text-transform: uppercase} p.kecil {text-transform: lowercase} </STYLE> </HEAD> <BODY> <p class="besar"> pengubahan kedalam hurup Besar </p> <p class="kecil"> PENGUBAHAN KEDALAM HURUF KECIL </p> </BODY> </HTML> PENGATURAN FONT Properties Jenis Font font-family Ukuran Huruf Font-size Value arial, dll Small Medium Large Length % Pengaturan gaya pada font font-style normal italic oblique Ketebalan huruf font-weight Keterangan Kecil Menengah Besar Besar font (pt,px) Persentase normal bold 100 ~ 900 Contoh 1 : <HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE ="text/css"> p.italic 28
  29. 29. { font-size :200 % ; font-style: italic; } p.normal{ font-family : verdana ; font-style: normal; } p.oblique {font-style: oblique} </STYLE> </HEAD> <BODY> <P class="italic">Menggunakan Style Italic</P> <P class="normal">Menggunakan Style Normal </P> <P class="oblique">Menggunakan Style Oblieque</P> </BODY> </HTML> Contoh 2 : <HTML> <HEAD> <TITLE>Pengaturan Font</TITLE> <STYLE ="text/css"> p.normal { font-family : verdana ; font-weight: normal; } p.thick { font-family : verdana ; font-weight: bold; } p.thicker { font-family : times ; font-weight: 900; } </STYLE> </HEAD> <BODY> <p class="normal"> This is a paragraph</p> <p class="thick"> This is a paragraph</p> <p class="thicker"> This is a paragraph</p> </BODY> </HTML> 29
  30. 30. PENGATURAN TABEL Yang perlu diperhatikan adalah pengaturan border, padding dan margin suatu tabel. 1. Pengaturan padding <HTML> <HEAD> <TITLE>Pengaturan Padding Table</TITLE> <style type="text/css"> td.kiri{ padding-top: 2cm; padding-right: 2cm; padding-bottom: 2cm; padding-left: 2cm ; background-color : #F0F8FF; } </style> </HEAD> <BODY> <TABLE BORDER="1"> <TR> <TD class="kiri">Pading dengan jarak 2cm dari kiri,atas,kanan,dan bawah</TD> <TD>Tanpa jarak </TD> </TR> </TABLE> </BODY> </HTML> 2. Menggunakan file css untuk mempercantik pembuatan tabel. File table_specbody.css /* CSS Document */ TH { color : #FFFFFF; background-color : #336699; border-width: 1px ; border-style:solid; border-color :red ; font-size: 9pt; } TD { color : red; background-color : #E6E6FA; border-width: 1px ; border-style:solid; border-color :blue ; font-size: 9pt; } File html yang akan memanggil file css <HTML> <HEAD> 30
  31. 31. <TITLE>Pengaturan Table spec</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="table_specbody.css"> </HEAD> <BODY> <table width="468" border="0" cellpadding="5" cellspacing="0" > <tr> <th width="112" >Nama Computer</th> <th width="91">Prossesor</th> <th width="96">Ram</th> <th width="137" >System Operasi</th> </tr> <tr> <td>Clnt-1</td> <td >IP 4 1,8 Ghz</td> <td >10 GB</td> <td >Redhat Linux</td> </tr> <tr> <td >Clnt-2</td> <td >IP 2 Ghz C</td> <td >6 GB</td> <td >Mandrake Linux</td> </tr> <tr> <td >Clnt-2</td> <td >XP 2000+ </td> <td >20 GB</td> <td>Windows</td> </tr> </table> </BODY> </HTML> PENGATURAN HYPERLINK & TOMBOL YANG MENARIK Syntax penulisan pada CSS : a:link {property : value} Selector a:link a:visited a:active a:hover Keterangan Keadaan awal pemicu link aktif Keadaan pemicu link setelah dikunjungi Keadaan pemicu yang sedang aktif Kejadian pada pemicu link saat mouse digerakkan diatasnya 1. Penggunaan property selector <HTML> <HEAD> <TITLE>Pengaturan pada link</TITLE> <STYLE type="text/css"> /*Konversi pengaturan Link pada contoh 31
  32. 32. sebelumya menggunakan css */ A:link {color : green;} A:hover { color : pink;} </STYLE> </HEAD> <BODY> <a href="http://justerda.wordpress.com" target="_self">Contoh Hyperlink menggunakan CSS</a> </BODY> </HTML> 2. Pembuatan tombol dengan tabel <HTML> <HEAD> <TITLE>Pengaturan Pada Link background</TITLE> <STYLE ="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover { font-weight:none; color: red; background-color:blue;} </STYLE> </HEAD> <BODY> <TABLE border="1"> <TR> <TD width="144"> <a href="#">Arahkan Mouse ke sini</a> </TD> </TR> <TR> <TD width="144"> <a href="#">Arahkan Mouse ke sini</a> </TD> </TR> </TABLE> </BODY> </HTML> 3. Membuat tombol visual 3D a. Pembuatan file css /* CSS Document */ .leftlinks { border:1px solid #22476C; padding:5px; margin:5px; 32
  33. 33. text-align:middle; background-color:#336699; width:150px; } .leftlinks a { display:block; margin:3px 0px; border-top:1px solid #4C86C0; border-left:1px solid #4C86C0; border-right:1px solid #22476C; border-bottom:1px solid #22476C; padding: 4px 10px; text-align:center; background-color:#336699; color:#EDEDED; text-decoration:none; } .leftlinks a:link { color:#EDEDED; } .leftlinks a:visited { color:#EDEDED; } .leftlinks a:hover { display:block; margin:3px 0px; border-top:1px solid #22476C; border-left:1px solid #22476C; border-bottom:1px solid #4C86C0; border-right:1px solid #4C86C0; padding: 5px 9px 3px 11px; text-align:center; background-color:#336699; color:#EED929; text-decoration:none; } b. Pembuatan file HTML utk memanggil css <HTML> <HEAD> <TITLE>Pengaturan Pada Link Visualisasi tombol</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="link_frtombol.css"> </HEAD> <BODY> <div class="leftlinks"> <a href="index.htm">Teras Wamika</a> <a href="profil.htm">Pssrofil Organisasi</a> <a href="struktur.htm">Struktur</a> 33
  34. 34. <a <a <a <a </div> </BODY> </HTML> href="pembimbing.htm">Pembimbing Org</a> href="dpo.htm">DPO Organisasi</a> href="kegiatan.htm">Kegiatan Rutin</a> href="berita.htm">Berita UKM</a> Fungsi tag <div> : hampir sama dengan tag paragraf <p>, berguna untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik yang sama. TUGAS : 1. Buatlah Website yang sudah dilengkapi CSS. BAB III. JAVASCRIPT TUJUAN : 1. Memahami tentang struktur javascript 2. Memahami tentang pemrograman di javascript 3. Memahami tentang pemakaian obyek dan form SEKILAS TENTANG JAVASCRIPT Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien. STRUKTUR JAVASCRIPT Struktur dari JavaScript adalah sbb : <SCRIPT LANGUAGE = ”JavaScript”> <!- Penulisan kode javascript // - - > </SCRIPT> Keterangan : Kode <!- // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser. JAVASCRIPT SEBAGAI BAHASA BERORIENTASI PADA OBYEK Properti Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil. Penulisan : Nama_objek.nama_properti = nilai window.defaultStatus = ”Selamat Belajar JavaScript”; 34
  35. 35. Metode Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. Penulisan : Nama_objek.nama_metode(parameter) document.write (”Hallo”) LETAK JAVASCRIPT DALAM HTML Sintaks Javascript dalam dokumen HTML dapat diletakkan pada : 1. Bagian Head 2. Bagian Body (jarang digunakan). 3. LATIHAN – LATIHAN : A. DASAR-DASAR JAVASCRIPT 1. Pemakaian alert sebagai property window <HTML> <HEAD> <TITLE>Alert Box</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript"> <!-window.alert("Ini merupakan pesan untuk Anda"); //--> </SCRIPT> </BODY> </HTML> 2. Pemakaian metode dalam objek. <HTML> <HEAD> <TITLE>Skrip JavaScript</TITLE> </HEAD> <BODY> Percobaan memakai JavaScript:<BR> <SCRIPT LANGUAGE = "JavaScript"> <!-document.write("Selamat Mencoba JavaScript<BR>"); document.write("Semoga sukses!"); //--> </SCRIPT> </BODY> </HTML> 3. Pemakaian prompt <HTML> <HEAD> <TITLE>Pemasukan Data</TITLE> </HEAD> 35
  36. 36. <BODY> <SCRIPT LANGUAGE = "JavaScript"> <!-var nama = prompt("Siapa nama Anda?","Masukkan nama anda"); document.write("Hai, " + nama); //--> </SCRIPT> </BODY> </HTML> 4. Pembuatan fungsi dan cara pemanggilannya <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <SCRIPT language="Javascript"> function pesan(){ alert ("memanggil javascript lewat body onload") } </SCRIPT> <BODY onload=pesan()> </BODY> </HTML> DASAR-DASAR PEMROGRAMAN DI JAVASCRIPT 1. Operasi dasar aritmatika <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <SCRIPT language="Javascript"> function test (val1,val2) { document.write("<br>"+"Perkalian : val1*val2 "+"<br>") document.write(val1*val2) document.write("<br>"+"Pembagian : val1/val2 "+"<br>") document.write(val1/val2) document.write("<br>"+"Penjumlahan : val1+val2 "+"<br>") document.write(val1+val2) document.write("<br>"+"Pengurangan : val1-val2 "+"<br>") document.write(val1-val2) document.write("<br>"+"Modulus : val1%val2 "+"<br>") document.write(val1%val2) } </SCRIPT> <BODY> <input type="button" name="button1" value="arithmetic" onclick=test(9,4)> </BODY> </HTML> 36
  37. 37. 2. Operasi relational <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <SCRIPT language="Javascript"> function test () { val1=window.prompt("Nilai I :") val2=window.prompt("Nilai II :") document.write("<br>"+"val1==val2"+"<br>") document.write(val1==val2) document.write("<br>"+"val1!=val2"+"<br>") document.write(val1!=val2) document.write("<br>"+"val1&gtval2"+"<br>") document.write(val1>val2) document.write("<br>"+"val1&ltval2"+"<br>") document.write(val1<val2) } </SCRIPT> <BODY> <input type="button" name="button1" value="relational" onclick=test()> </BODY> </HTML> 3. Seleksi kondisi (if..else) <HTML> <HEAD> <TITLE>Contoh if-else</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript"> <!-var nilai = prompt("Nilai (0-100): ", 0); var hasil = ""; if (nilai >= 60) hasil = "Lulus"; else hasil = "Tidak Lulus"; document.write("Hasil: " + hasil); //--> </SCRIPT> </BODY> </HTML> 4. Penggunaan operator switch untuk seleksi kondisi <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <SCRIPT language="Javascript"> function test () { 37
  38. 38. val1=window.prompt("Input Nilai (1-5):") switch (val1) { case "1" : document.write("bilangan satu") break case "2" : document.write("bilangan dua") break case "3" : document.write("bilangan tiga") break case "4" : document.write("bilangan empat") break case "5" : document.write("bilangan lima") break default : document.write("bilangan lainnya") } } </SCRIPT> <BODY> <input type="button" name="button1" value="switch" onclick=test()> </BODY> </HTML> 5. Pemakaian looping < for > <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> <!-for (x=0;x<=10;x++) document.write(x+"<br>") // --> </SCRIPT> </BODY> </HTML> 6. Pemakaian looping < do..while > <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> 38
  39. 39. <!-var x=0 do{ document.write(x+"<br>") x++; } while (x<=10) // --> </SCRIPT> </BODY> </HTML> 7. Pemakaian looping < while > <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> <!-var x=0 while (x<=10){ document.write(x+"<br>") x++; } // --> </SCRIPT> </BODY> </HTML> PEMBUATAN FORM 1. Form input : <html> <head> </head> <SCRIPT language="Javascript"> function test () { var val1=document.kirim.T1.value if (val1%2==0) document.kirim.T2.value="bilangan genap" else document.kirim.T2.value="bilangan ganjil" } </SCRIPT> <body> <form method="POST" name="kirim"> <p>BIL <input type="text" name="T1" size="20"> MERUPAKAN BIL <input type="text" name="T2" size="20"> </p> <p><input type="button" value="TEBAK" name="B1" onclick=test()> </p> 39
  40. 40. </form> </body></html> 2. Form button : <HTML> <HEAD> <TITLE>Objek document</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript"> <!-function ubahWarnaLB(warna) { document.bgColor = warna; } function ubahWarnaLD(warna) { document.fgColor = warna; } //--> </SCRIPT> <H1>TES</H1> <FORM> <INPUT TYPE = "BUTTON" VALUE = "Latar Belakang Hijau" onClick = "ubahWarnaLB('GREEN')"> <INPUT TYPE = "BUTTON" VALUE = "Latar Belakang Putih" onClick = "ubahWarnaLB('WHITE')"> <INPUT TYPE = "BUTTON" VALUE = "Teks Kuning" onClick = "ubahWarnaLD('YELLOW')"> <INPUT TYPE = "BUTTON" VALUE = "Teks Biru" onClick = "ubahWarnaLD('BLUE')"> </FORM> <SCRIPT LANGUAGE = "JavaScript"> <!-document.write("Dimodifikasi terakhir pada " + document.lastModified); //--> </SCRIPT> </BODY> </HTML> TUGAS : 1. Buatlah Website yang dilengkapi Javascript 40
  41. 41. BAB IV. SUMBER • • • The Ultimate HTML Reference, Ian Lloyd, SitePoint Pty Ltd, Australia. Siapa saja bisa membuat website dengan HTML dan CSS, Untung Rahardja. Mendesain web menggunakan HTML,CSS dan Javascript, Moh.Erdda Habiby, http://justerda.wordpress,com 41

×