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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
BUKU AJAR DESAIN WEBOleh Moh.Erdda Habiby, S,ST
DAFTAR ISI :
Bab I HTML ….................................................................................................................... 2Bab II CSS ........................................................................................................................ 20Bab III JAVASCRIPT …..................................................................................................... 34Bab IV SUMBER .............................................................................................................. 41
1
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 DOKUMENBerikut 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
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.
CONTOHAtribut bgcolor : <body bgcolor=”blue”> atau <body bgcolor=”0000FF”>
...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 headlineUntuk 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!
Tag Style SederhanaKini 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>
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
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
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
TRY THIS.....<html><head><title>tag pre untuk pre-formatted text</title><body><pre>TO : LEE SMITHFROM : CHRIS BROWNSUBJECT : MEETING SCHEDULE AND AGENDA FOR WEB SITE TEAMDATE : THURS, 14 AUG 1997 22:00:059/20/97 8:00 AM ROOM 2189/21/97 9.00 AM ROOM 2189/22/97 2.00 PM ROOM 111AT THE FIRST MEETING, WE SHOULD DISCUSS HOW TO USE THE <STYLE> 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.
<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
<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
<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
</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.
ALIGN : Untuk menentukan apakah rata kiri, tengah, atau kanan.NOSHADE: jika ditulis maka garis dibuat tanpa bayangan, jika tidak maka garisnya memiliki bayanganSIZE : 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 :
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
<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-label-kategori.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.
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 :
<ANAME=”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
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>.
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
<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>)
<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).
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
noresizescrolling=”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>
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
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 INPUTMacam macamnya :
• <input type="jenis" name="nama" id="id" value="nilai" disabled>type : text, password, radio, checkbox, image, submit, reset, button, hidden, filename : identifier untuk sisi serverid : identifier untuk sisi browservalue : nilai defaultdisabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)
readonly : jika disebutkan maka elemen tidak bisa diubah nilainyasize : 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 gambaralt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar
TAG TEXTAREA, SELECT, BUTTON
• <textarea name="nama" rows="b" cols="k">nilai</textarea>nilai : nilai defaultrows : 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
• <button type="jenis" name="name" value="nilai">tampilan</button>type : submit, reset, buttontampilan : 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
• h1, h2, h3, h4, h5, and h6 • strong • em • abbr • acronym • address • bdo • blockquote • cite • q • code • ins • del • dfn • kbd • pre
18
• samp • var • br
Links• a • base
Images and Objects• img • area • map • object • param
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
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
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 : <!-- -->
<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 Heading 2 </h2><p class="right"> Class Paragraf</p>
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.
<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">
</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.
Syntax penulisan pada CSS :a:link {property : value}
Selector Keterangana:link Keadaan awal pemicu link aktifa:visited Keadaan pemicu link setelah dikunjungia:active Keadaan pemicu yang sedang aktifa:hover 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
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">
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>
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 JAVASCRIPTJavascript 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 JAVASCRIPTStruktur 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
PropertiProperti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.Penulisan : Nama_objek.nama_properti = nilai window.defaultStatus = ”Selamat Belajar JavaScript”;
34
MetodeMetode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek.
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>
<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
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>val2"+"<br>")document.write(val1>val2)document.write("<br>"+"val1<val2"+"<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
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">
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.valueif (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
</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
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,