MATERI 1 PAK ARI PAMBUDI
MATERI 1
DASAR-DASAR HTML
(Hypertext Markup Language)
Padap pertemuan ini akan dipelajari tentang HTML (hypertext markup language)
merupakan salah satu format yang digunakan dalam dokumen dan aplikasi yang
berjalan di web browser. Karena itu, untuk bisa melakukan pemrograman aplikasi di
atas web Anda harus terlebih dahulu menguasai HTML. Walaupun sekarang telah
banyak terdapat tool yang dapat Anda gunakan untuk membuat halaman secara
WYSIWYG (what you see is what you get) seperti Frontpage dan Netscape Editor,
namun Anda tetap harus menguasai HTML terutama untuk membuat aplikasi
dengan teknologi CGI.T I U :
1. Mahasiswa mengenal Dasar HTML
2. Mahasiswa memahami format yang digunakan dalam dokumendan aplikasi yang berjalan pada web browser.
T IK : 1. Mahasiswa mengerti struktur dasar dokumen HTML.
2. Mahasiswa mampu menggunakan pemakaian sintak-sintak HTML.
3. Mahasiswa mampu membedakan format pada sintak HTML
Dasar-Dasar HTML
HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen- dokumen web yang ditulis atau berformat HTML (hypertext markup language).
Dikatakan markup language karena HTML berfungsi untuk ’memperindah’ file teks biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan menambahkan elemen atau sering disebut sebagai tag-tag pada file teks biasa tersebut.
Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan simbol
< dan >. Pasangan dari sebuah tag ditandai dengan tanda ‘/’. Misalnya pasangan dari tag <contoh> adalah </contoh>. Dalam hal ini <contoh> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut : <contoh atribut1=”nilai_atribut1” atribut2=” nilai_atribut2” … >. Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah.
Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut : <html> <head> <title>berisi judul yang muncul pada title bar web browser</title> </head>
Berisi tentang text, gambar, atau apapun yang ingin anda Tampilkan pada dokumen anda ada pada bagian ini.
</body> </html> Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag <head> ... </head> dan tag <body> ... </body>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> ... </title> yang berfungsi untuk mengeluarkan judul pada title bar window web browser. Tag lain misalnya <meta> dan tag-tag lainnya yang akan kita pelajari.
Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini Anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin Anda sampaikan pada pengguna nantinya.
Pengaturan Properti Dokumen
Properti dokument diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link dan lain-lain.
Kode Warna
Dalam pengaturan warna menggunakan kode RGB yan mana ditampilkan dalam nilai heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah dalam kombinasi warna. Berikut ini adalah contoh kode warna :
Warna Heksadesimal
White #FFFFFF Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Magenta #FF00FF Cyan #00FFFF Yellow #FFFF00 Aquamarine #70DB93 Chocolate #5C3317 Violet #9F5F9F Brass #B5A642 Copper #B87333 Pink #FF6EC7 Orange #FF7F00
Atribut Elemen BODY
BACKGROUND = URI (background image for document) BGCOLOR = Color (background color for document, default white) TEXT = Color (text color for document, default black) LINK = Color (link color for document, default blue)
VLINK = Color (visited link color for document, default purple) ALINK = Color (active link color for document, default red)
Elemen Heading <hx> Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading.
Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h7>.
Elemen Paragrap <p> Tag paragrap berfungsi layaknya untuk pengaturan antar paragrap dalam halaman web anda. Dalam elemen paragrap terdapat atribut :
ALIGN=[ left | center | right ] yang berfungsi sebagai pengaturan perataan paragrap. Anda dapat memilih perataan kiri, tengah atau kanan.
Elemen Break <br>
Elemen Break berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web anda. Elemen break tidak memerlukan elemen penutup break.
Elemen Horisontal Rules <hr>
Elemen <hr> berfungsi untuk menampilkan garis horisontal di dalam halaman web anda. Elemen <hr> tidak memerlukan elemen penutup </hr>.
Atribut Elemen Horisontal Rules
ALIGN =[ left | center | right ] (horizontal alignment, default center) SIZE =Pixels (line height, default 2) WIDTH =Length (line width, pixel or percentage, default 100%)
Elemen Pemformatan Karakter <font>
Font pada halaman HTML dapat diformat sesuai dengan desain yang anda tentukan, baik ukuran, jenis maupun warna.
Atribut Elemen Font
SIZE = Number (font size adjustment, default 3) COLOR = Color (font color adjustment, default black) FACE = Number (font face adjustment, default Times New Roman)
Elemen Ragam Karakter
<b>bold</b> menghasilkan huruf tebal <i>italic</i> menghasilkan huruf miring <u>underline</u> menghasilkan huruf bergaris bawah
Elemen List Propertis <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list).
Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>).
Atribut Elemen List
Ordered list TYPE = [ 1 | a | A | i | I ] (numbering style, default 1)
TYPE = [ disc | square | circle ] (bullet style, default disc)
Elemen Image <img>
Anda dapat menampilkan gambar dalam halaman HTML, format filenya berupa JPG atau GIF. Untuk menampilkanya digunakan tag IMG.
<IMG SRC=namafilegambar>
Atribut Elemen Image
SRC = URI (location of image) ALT = Text (alternate text) WIDTH = Length (image width) HEIGHT = Length (image height) ALIGN = [ top | middle | bottom | left | right ] (image alignment) BORDER = Length (link border width)
Latihan: Menggunakan Tag Gambar
Buka contoh sebelumnya dan tambahkan tag berikut ini: <html> <head> <title>latihan 05</title> </head> <body> <img src= logo.gif> …
</body> </html>
Elemen Link/Anchor <a>
Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain, atau ke URL lain bahkan dalam satu halaman untuk berpindah ke sub judul yang lain.
<a href = URL_tujuan>hypertext</A>
Latihan: Menggunakan Link
Link berfungsi untuk melompat ke halaman lain pada web atau ke URL lain (internet). hal ini dinamakan hypertext.
….. …. <ol> <li><A HREF=../motor/sity>nginjhen</A> <li><A HREF=togar.html>togar</A> <li><A HREF=http://www.honda.com>supra cup</A> </ol> ….
….
Pada contoh diatas apabila anda mengklik supra cup maka akan di link ke www.honda.com. dan apa bila anda mengklik togar maka akan di link ke halaman togar.html
Link satu halaman
Untuk membuat link pada satu halaman, digunakan kombinasi tag <A NAME=tujuan1>... </A> dengan tag <A HREF=#tujuan1> ... </A>. Contohnya jika Anda memiliki bagian dokumen sebagai berikut:
… … <H2><A NAME=bab2>BAB 2 Penjualan</A></H2> … … maka bagian lain pada dokumen Anda dapat membuat link ke bagian di atas dengan tag sebagai berikut:
<A HREF=#bab2> BAB 2 Penjualan </A>
Elemen Tabel <table>
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag <table> ... </ table >. Elemen tabel berisi properti <tr> ... </tr> untuk menentukan baris (table row) yang di dalamnya terdapat properti <td> ... </td> untuk menampilkan data pada setiap set tabel (table data).
Struktur lengkap dari elemen tabel adalah sebagai berikut: <table> <tr>
<td>data baria 1 kolom 2</td> </tr> <tr> <td>data baris 2 kolom 1</td> <td>data haris 2 kolom 2</td> </tr> <tr> <td>data baris 3 kolom l</td> <td>data baris 3 kolom 2</td> </tr> </table>
Atribut Elemen Tabel
WIDTH = Length (table width, pixels or percentage) HEIGHT = Length (table height, pixels or percentage) BORDER = Pixels (border width) CELLSPACING = Length (spacing between cells) CELLPADDING= Length (spacing within cells) ALIGN = [ left | center | right ] (table alignment) BGCOLOR = Color (table background color)
Atribut Table Row
ALIGN = [ left | center | right ] (horizontal alignment of cells in group)
BGCOLOR = Color (row background color)
Atribut Table Data
ROWSPAN = Number (rows spanned by the cell) COLSPAN = Number (columns spanned by the cell) ALIGN = [ left | center | right ] (horizontal alignment)
VALIGN = [ top | middle | bottom ] (vertical alignment) WIDTH = Pixels (cell width, pixels or percentage) HEIGHT = Pixels (cell height, pixels or percentage) BGCOLOR = Color (cell background color)
Elemen Form <form> Form HTML merupakan tag yang paling penting khususnya dalam membuat
aplikasi berbasis web. Form menyediakan properti masukan yang dapat berupa textbox, check box, radio button, dan button.
Untuk mendeklarasikan sebuah form digunakan tag <form> ... </form>. Di dalam
tag ini kita akan mendefinisikan elemen-elemen form seperti yang telah disebutkan di atas.
Selain tag elemen form kita juga dapat menuliskan sembarang teks, tag, image.
Atribut Elemen Form
ACTION = URI (form handler) METHOD = [ get | post ] (HTTP method for submitting form)
Properti Masukan Pada Elemen Form <input>, <textarea>, <select>
1. Text Box <input type=”text”>
SIZE = size of the textbox in character, default 20 MAXSIZE = maximum number of character will accept NAME = name of variable to be sent to the application
VALUE = will display its content as the default value
2. Password <input type=”password”> Digunakan untuk memasukkan password.
SIZE = size of the textbox in character, default 20 MAXSIZE = maximum number of character will accept NAME = name of variable to be sent to the application
3. Hidden <input type=”hidden”> Digunakan untuk mengirim data ke suatu aplikasi yang tidak kita inginkan untuk dilihat oleh browser.
NAME = name of variable to be sent to the application
VALUE = will display its content as the default value
4. Check Box <input type=”checkbox”> Check box digunakan untuk dapat memilih lebih dari satu pilihan.
NAME = name of variable to be sent to the application
VALUE = usually set to a value CHECKED (check radio button or checkbox)
Radio button digunakan untuk dapat memilih hanya salah satu pilihan. NAME = name of variable to be sent to the application
VALUE = usually set to a value CHECKED (check radio button or checkbox)
6. Push Button <input type=”button”> Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.
NAME = name of variable to be sent to the application
VALUE = text label on the button
7. Submit <input type=”submit”> Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM. NAME = name of variable to be sent to the application
VALUE = text label on the button
8. Image Submit Button <input type=”image” src=”url”> Digunakan untuk menggantikan tombol standar submit dengan image.
NAME = name of variable to be sent to the application
9. Reset <input type=”reset”>
VALUE = text label on the button
10. Text Area <textarea> … </textarea> Elemen untuk memasukkan teks secara leluasa seperti notepad.
NAME = name of variable to be sent to the application ROWS = number of rows COLS = number of columns
11. Select <select> … </select> Daftar isi dalam properti select mengunakan tag <option> SIZE = set the number of visible choices NAME = name of variable to be sent to the application
Contoh Buat Form HTML <html> <head><title>latihan form</title></head> <body> <form action=# method=get> Nama : <input type=text name=nama><p> Alamat :<input type=text name=alamat> <p>Telepon :<input type=text name=telepon> <p>Email :<input type=text name=email> <p>
<option value=mahasiswa>mahasiswa <option value=pelajar>pelajar <option value=peg_negeri>peg_negeri <option value=presiden>presiden <option value=menteri>menteri </select> <p>Anggota : <input type=radio name=anggota value=ya check>ya <input type=radio name=anggota value=bukan>bukan <p> <input type=submit value="kirim data" name=submit> <input type=reset value="ulangi" name=reset> </form> </body> <html>
Latihan SOAL Latihan 01 :
<html> <head> <title>latihan 01</title> </head>
<h1>TOKO BUKU SERBA MURAH</h1> <h2>Toko kami menyediakan</h2> <h3>Alat Tulis</h3> <h4>pensil, ballpoint, penggaris dll.</h4> <h3>Buku-Buku Pelajaran</h3> <h4>ilmu pasti, ilmu bumi, sejarah dll.</h4> <h3>Alat Kantor</h3> <h4>meja, kursi, file manager dll.</h4> </body> </html>
Latihan 02 :
<html> <head> <title>latihan 02</title> </head> <body bgcolor=#990066 text=#FFCCFF> <h1>TOKO BUKU SERBA MURAH</h1> <hr width=50% align=left> <h2>Toko kami menyediakan</h2> <h3>Alat Tulis</h3> <p>pensil<br>ballpoint<br>penggaris<br>dll.</p>
<p>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p> <h3>Alat Kantor</h3> <p>meja<br>kursi<br>file manager<br>dll.</p> </body> </html>
latihan 03 :
<html> <head> <title>latihan 03</title> </head> <body bgcolor=#000000 text=#FFFFFF> <h1 align=center> <font color=#FFFF00 face=Arial>TOKO BUKU SERBA MURAH</font> </h1> <hr width=360 align=center> <h2>Toko kami menyediakan</h2> <h3><font color=red>Alat Tulis</font></h3> <p align=center>pensil<br>ballpoint<br>penggaris<br>dll.</p> <h3><font color=red>Buku-Buku Pelajaran</font></h3> <p align=right>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p> <h3><font color=red>Alat Kantor</font></h3> <p align=left>meja<br>kursi<br>file manager<br>dll.</p>
</html>
Latihan 04 :
<html> <head> <title>latihan 04</title> </head> <body bgcolor=#990066 text=#FFCCFF> <h1>TOKO BUKU SERBA MURAH</h1> <hr width=50% align=left> Toko kami menyediakan <h2>Alat Tulis</h2> <ol> <li>pensil <li>ballpoint <li>penggaris <li>dll.
</ol> <h2>Buku-Buku Pelajaran</h2> <ol type=A> <li>ilmu pasti <ul> <li>Fisika
<li>biyologi </ul> <li>ilmu bumi <li>sejarah <li>dll.
</ol> <h2>Alat Kantor</h2> <ol type=i> <li>meja <li>kursi <ul type=square> <li>kusi lipat <li>kursi plastik <li>kursi-kursian </ul> <li>file manager <li>dll.
</ol> </body> </html>
latihan 05 :
<html>
<title>latihan 05</title> </head> <body> berikut contoh tabel dengan rowspan dan colspan <table width=80% border=2 cellspacing=0 cellpadding=0> <tr> <td>baris 1 kolom 1</td> <td>baris i kolom 2</td> </tr> <tr> <td colspan=2>baris 2 kolom 1</td> </tr> <tr> <td rowspan=2>baris 3 kolom 1</td> <td>baris 3 kolom 2</td> </tr> <tr> <td>baris 4 kolom 2</td> </tr> </table> </body> </html>
MATERI II - IV
DESAIN TAMPILAN WEB
Pada pertemuan ini akan dipelajari tentang pengaturan tampilan atau desain pada
web. Salah satu tool yang digunakan untuk pengaturan tersebut adalah perangkat
lunak yang bernama Dreamweaver. Dreamweaver mempunyai beberapa fungsi
penting dalam pembuatan suatu halaman web, seperti Layout View – yang
memungkinkan para designer halaman web dapat langsung menempatkan table dan
sel di halaman webnya. Juga terdapat beberapa fungsi tambahan seperti team
collaboration dan peningkatan kemampuan multimedia. T I U :2. Mahasiswa memahami format yang digunakan dalam pengaturan tanmpilan web dengan dreamweaver.
T IK :
1. Mahasiswa mampu menggunakan pemakaian dreamweaver beserta sintak- sintaknya.
2. Mahasiswa mampu mengatur tampilan site dengan dreamweaver.
Mengenal Dreamweaver
Beberapa waktu yang lalu, tool yang digunakan untuk membuat suatu halaman web dibagi menjadi 3 jenis, yaitu: editor HTML berbasis teks, editor yang mengkombinasikan tampilan grafik WYSIWYG (What You See Is What You Get) dengan tampilan kodenya, dan editor yang benar-benar berbasis grafik. Tiap-tiap jenis editor tersebut memiliki grup penggemarnya sendiri, para programmer, para webmaster part-time, dan para grafik desiner. Macromedia Dreamweamer (mulai versi 4) mungkin merupakan editor pertama dengan fitur-fitur lengkap yang memenuhi semua grup diatas. Dreamweaver mempunyai beberapa fungsi penting dalam pembuatan suatu halaman web, seperti Layout View – yang memungkinkan para designer halaman web dapat langsung menempatkan table dan sel di halaman webnya. Juga terdapat beberapa fungsi tambahan seperti team collaboration dan peningkatan kemampuan multimedia.
Pada bab ini, kita akan menggunakan Macromedia Dreamweaver MX versi 6.0. Yang mana, versi ini merupakan versi terbaru dari Dreamweaver.
Memulai Dreamweaver
Bila kita membuat sebuah halaman web dengan Dreamweaver, maka selain document
window, kita juga akan bekerja dengan tiga toolbar dan panel utama, yaitu: Insert Bar,
Property Inspector, dan Site Panel.
Catatan: Jika Insert Bar dan Property Inspector tidak tampil pada Dreamweaver, maka
bisa ditampilkan dengan klik menu:
- - Window - Insert Bar (Ctrl+F2), atau - Window - Property Inspector (Ctl+F3).
Document window: menampilkan dokumen atau halaman web yang sedang kita buat.
Pada bagian bawah dari Document window, kita bisa melihat nama file dari semua dokumen yang sedang kita buka. Dengan meng-klik nama file tersebut maka kita akan dengan mudah berpindah antara dokumen satu dengan lainnya.
Insert Bar terdiri dari beberapa macam icon untuk memasukkan berbagai macam objek
web seperti gambar, layer, dan tabel. Insert Bar ini terdiri dari beberapa tab yang masing- masing terdiri dari beberapa icon yang berkesesuaian.
Property Inspector menampilkan property dari objek yang kita pilih didalam dokument.
Sedangkan Site Panel memungkinkan kita untuk menampilkan dan mengatur semua file dan folder yang merupakan bagian dari website kita.
Gambar 10.1. Elemen window dari Dreamweaver MX 6.0Dreamweaver dapat menampilkan dokumen dalam tiga cara: Design View, Code View, dan Code and Design View.
Pada Design View, kita bisa menampilkan dan mengedit dokumen secara visual. Tampilan dari Design View sama seperti bila kita menampilkannya dengan web browser (seperti Microsoft Internet Explorer).
Pada Code View, kita bisa mengedit langsung halaman web kita dengan menuliskan kode HTML, javascript, PHP, ASP, dan berbagai macam kode-kode yang lain. Tidak terlalu diperlukan untuk bekerja dengan Code View ini, karena hampir semua fungsi yang kita perlukan untuk membuat suatu halaman web dapat di buat lewat Design View.
Sedangkan pada Code and Design View, kita bisa melihat Code View dan Design View secara bersamaan dalam satu tampilan window.
Pengaturan Site
Suatu website merupakan kumpulan dari beberapa dokumen yang saling berhubungan (linked). Dengan Dreamweaver kita dapat membuat dan mengelola suatu dokumen website, termasuk memperbaikinya. Dokumen adalah halaman yang dilihat user ketika mereka mengunjungi website kita. Dokumen bisa berisi teks, gambar, suara, animasi, dan juga link ke dokumen-dokumen yang lain.
Dreamweaver menampilkan suatu site sebagai kumpulan dari file-file yang terdapat didalamnya. Kumpulan file ini bisa dilihat pada Site Panel yang secara default berada di sisi sebelah kanan dari aplikasi Dreamweaver ini.
Gambar 10.2. Site Panel pad Dreamweaver
Untuk memulai membuat website, kita buat suatu site pada Dreamwever dengan
mengklik link Define a Site pada Site Panel. Kemudian akan muncul wizard untuk
mendefinisikan suatu site.Dibawah ini adalah beberapa langkah untuk mendefinisikan suatu site, yaitu: 1. Langkah pertama: kita diminta untuk mengisikan nama dari website kita.
Gambar 10.3. Langkah pertama untuk mendefinisikan siteGambar 10.4. Langkah kedua untuk mendefinisikan site 3. Langkah ketiga: ada 3 pilihan untuk meletakkan file-file dari website kita. Pertama, adalah diletakkan pada drive lokal. Kedua, diletakkan pada server secara langsung menggunakan local network. Ketiga, diletakkan pada server dengan menggunakan FTP atau RDS.
Gambar 10.5. Langkah ketiga untuk mendefinisikan site Pilih yang pertama (local), lalu tentukan lokasi dimana kita ingin menyimpan file dokumen web kita.Gambar 10.6. Langkah keempat untuk mendefinisikan siteWindow terakhir yang muncul adalah summary dari site yang telah kita buat. Setelah kita mengklik tombol Done, maka website kita langsung akan dibuat.
Gambar 10.7. Langkah terakhir sebagai summary dokumen web yang dibuat.
Catatan: pada topik kali ini kita akan memfokuskan pada pembuatan suatu website secara
offline.Setelah semua langkah tersebut kita lakukan, maka pada pada Site Panel akan tampil informasi tentang site yang baru kita buat.
Gambar 10.7. Informasi site pada Site Panel.Membuat Folder
Dreamweaver menyediakan tampilan visual dari website kita melalui Site Panel. Website akan lebih mudah dikelola dan manajemen jika kita mengatur file-file kedalam folder- folder. Contoh, kita buat dua folder yang, yaitu folder images untuk meletakkan file-file gambar site dan folder resources untuk menyimpan file-file lain.
Untuk itu perlu adanya manajemen file pada dokumen web yang kita buat melalui pembuatan folder.
Cara membuat folder: 1. Klik kanan pada folder site kita (misal: My Website), kemudian pilih New Folder.
2. Ketikkan nama folder yang kita buat (misal: images) kemudian tekan Enter.
Bekerja dengan File
Dalam suatu website, kita bisa mempunyai satu atau lebih file dokumen. File dokumen ini yang biasa juga disebut sebagai page. Bila kita mengakses suatu website, biasanya file dokumen yang pertama kali akan diakses adalah file index.htm (tergantung dari setting di Web server). Untuk itu, simpan file dokumen web pertama kali anda dengan nama index.htm.
Cara membuat file:
2. Ketikkan nama file yang kita buat (misal: index.htm) kemudian tekan Enter.
Untuk mulai bekerja dengan file yang telah kita buat, kita bisa me-double-klik pada nama file yang akan kita edit pada Site Panel.
Untuk mengganti title dari website kita, bisa kita isikan pada edit box tittle pada deretan icon pada toolbar di bagian atas Dreamweaver.
Title tersebut akan tampil pada bagian paling atas dari web browser bila kita membuka website kita menggunakan Internet Explorer.
Memasukkan Teks
Memasukkan teks ke dalam dokumen yang kita buat menggunakan Dreamweaver sangat mudah. Setelah dokumen kita buka, tempatkan kursor pada Document Window dan kita bisa langsung mengetikkan teks ke dalam dokumen tersebut. Bila kita ingin memformat teks yang sudah kita masukkan, caranya adalah dengan memblok teks tersebut, kemudian ubah properti dari teks tersebut dengan menggunakan panel Property Inspector. Ada beberapa properti dari teks yang bisa kita atur menggunaka panel Property Inspector tersebut. Yaitu: format teks, ukuran, bentuk huruf, warna, ketebalan, alignment, bullet dan numbering, dan lain-lain.
Memasukkan Objek
Ada banyak sekali objek yang bisa kita masukkan ke dokumen web kita, gambar, tabel, frame, form, flash, dan banyak lagi yang lainnya. Pada Dreamweaver, objek-objek itu dapat kita masukkan kedalam dokumen web kita dengan sangat mudah. Pilih pada Insert
Bar, objek apa yang kita inginkan, kemudian klik dan kita tinggal mengikuti instruksi
yang ditampilkan oleh Dreamweaver. Teks pada dokumen web kita juga dianggap sebagai suatu objek oleh Dreamweaver.
Untuk memasukkan suatu objek kedalam halaman web kita juga bisa dilakukan dengan mengklik menu Insert kemudian pilih objek yang akan kita masukkan kedalam halaman
Sedangkan untuk mengedit objek yang sudah berada pada dokumen web kita, bisa kita lakukan dengan mengklik objek tersebut kemudian kita bisa mengubah propertynya pada
Property Inspector, sesuai dengan yang kita inginkan. Property yang dapat kita ubah
pada Property Inspector akan berbeda-beda, tergantung dari jenis objek yang akan kita edit.
Kita juga bisa menggunakan klik kanan mouse pada suatu objek untuk menampilkan daftar menu favorit yang bisa kita pilih, sesuai dengan objek yang bersangkutan.
Kita juga bisa menggunakan objek layer sebagai tempat dari teks kita. Sehingga kita bisa dengan mudah untuk memformat dan memindah-mindahkna teks kita tersebut. Untuk menggambar suatu layer bisa dilakukan dengan memilih menu Insert Layer, atau dengan mengklik icon Draw Layer pada Insert Bar Common.
Page Properties
Ketika pertama kali kita memulai Dreamweaver, halaman web kita secara default mempunyai title Untitle Document dan tidak mempunyai background. Kita bisa mengeditnya dengan mengakses ke Page Properties. Caranya adalah dengan mengklik menu Modify, kemudian pilih Page Properties. Atau bisa juga dengan menggunakan mouse, caranya: taruh kursor mouse pada dokumen kita, kemudian klik kanan mouse dan pilih Page Properties. Pada Page Properties kita bisa mengedit banyak hal yang berhubungan dengan halaman web kita, seperti warna latar belakang dokumen, warna teks, gambar pada latar belakang, level transparan dari gambar, dan lain-lain.
Gambar 10.8. Kotak dialog Page Properties Membuat TabelPenggunaan tabel sangat berguna untuk pengaturan data. Tabel juga bisa digunakan untuk mengontrol dimana harus meletakkan gambar dan teks pada halaman web. Dengan tabel juga memungkinkan kita untuk memodifikasi isi dari tiap sel pada tabel. Atau kita bisa memblok beberapa sel, kolom, atau baris yang ingin kita atur dengan setting yang sama.
Kita bisa mengontrol hampir semua fitur dari suatu tabel menggunakan Property
Inspector. Untuk memasukkan tabel kedalam dokumen web kita, bisa dilakukan dengan
cara memilih menu Insert Table atau dengan memilih icon Insert Table pada panel
Insert Bar Tables. Kemudian akan muncul kotak dialog untuk memasukkan tabel dimana kita bisa mendefinisikan beberapa parameter disini (misal: jumlah baris, jumlah kolom, dll).
Gambar 10.9. Kotak dialog untuk memasukkan tabel.Merge Tabel
Untuk menggabungkan antar cell dalam tabel, dapat dilakukan melalui langkah berikut: 1. Select beberapa cell yang akan di merge (digabungkan).
2. Klik tombol merge pada panel properties.
Membuat Link
Pada Dreamweaver, kita bisa menambahkan link yang menghubungkan antar halaman web pada website kita, link ke website lain, maupun link ke file dokumen dengan cara yang sangat mudah. Untuk membuat suatu link, baik link ke halaman web maupun link ke file dokumen (seperti file Microsoft Word, file PDF, dll), yaitu: 1. Pilih teks, gambar, atau objek yang ingin kita jadikan sebagai link.
2. Pilih menu Modify Make Link akan muncul kotak dialog Select File.
3. Ketikkan alamat URL dari tujuan link kita kedalam teks box URL atau dengan memilih file menggunakan kotak browser yang ada. Setelah selesai klik OK.
Catatan: Bila file yang kita pilih berada diluar dari folder root dari website kita
maka akan muncul dialog yang menanyakan apakah kita akan mengcopy file Berikut ini latihan dasar HTML, dimana design interface meliputi font, warna, paragraph, background, dan isi halam web ini, dipersilahkan mahasiswa untuk mengembangkan dengan asumsi-asumsi yang dimiliki.
1. Buatlah halaman web untuk menampilkan informasi identitas mahasiswa dan deskripsi (hoby, kemampuan, foto, dll) dengan layout sebagai berikut :
2. Buatlah halaman web untuk kumpulan informasi data mahasiswa yang terdiri dari 3 frame, dimana frame paling atas untuk header dan logo universitas, frame paling kiri untuk list nama-nama mahsiswa yang memiliki link untuk detail identitas mahasiswa tersebut yang terletak di frame bagian kanan.
Layout sebagai berikut :
Foto Identitas Deskripsi lain
Nama Universitas dan Logo List nama mahasiswa, jika di-klik akan memiliki link ke frame sebelah kanan Detail identitas dan deskripsi mahasiswa
Beserta fotonya
PENGENALAN CSS
Pada pertemuan ini akan dipelajari tentang pengaturan tampilan atau desain pada
web dengan style CSS. CSS (Cascading Style Sheets) digunakan dalam kode HTML
untuk menciptakan suatu kumpulan style yang terkadang dapat digunakan untuk
memperluas kemampuan HTML. T I U :1. Mahasiswa mengenal mengenai pemrograman web dengan m,enggunakan Style
CSS
T IK :
1. Mahasiswa mampu membuat halaman web dengan menggunakan kode HTML secara sederhana.
2. Mahasiswa mampu membuat tampilan dokumen HTML denggan permainan
warna dan berbagai jenis tampilan teks.CSS (Cascading Style Sheets) digunakan dalam kode HTML untuk menciptakan suatu kumpulan style yang terkadang dapat digunakan untuk memperluas kemampuan HTML. Sebagai contoh, kode HTML murni tidak memungkinkan untuk menggunakan sebuah definisi font yang diterapkan pada Misalnya diinginkan untuk mengatur ukuran font pada setiap sel sebesar 2. Dengan menggunakan tag <FONT>, semua sel harus diformat dengan menggunakan <FONT SIZE=”2”>, tentu saja tindakan seperti ini tidak praktis. Namun, dengan menggunakan CSS, anda hanya perlu mendefinisikan style sekali saja dan style akan berlaku untuk setiap sel dalam tabel. Mengenali kode Css:
1. Pasangan tag <STYLE> dan </STYLE> digunakan untuk mendefinisikan style sheet menggunakan Css. Oleh karena itu, dalam tag <style> terdapat atribut TYPE dengan nilai berupa “teks/CSS”. Pasangan tag tersebut harus diletakkan dalam pasangan tag <HEAD> dan </HEAD>. Umumnya setelah tag <TITLE> dan </TITLE>.
2. Pasangan <!—dan -->merupakan komentar dalam HTML. Biasa digunakan dengan tujuan agar sekiranya browser tidak mendukung atau tidak mengenali style sheet maka yang terdapat dalam pasangan tersebut akan diabaikan, tetapi penulisan pasangan ini tidak diharuskan. Dan yang berada dalam pasangan ini adalah definisi style. Sintaks Css terdiri dari tiga bagian yaitu selector, properti dan nilai, penulisannya seperti dibawah: nama_tag {properti_1:nilai_1;.....;properti_n:nilai_n}
Selektor biasanya adalah elemen HTML / tag yang Anda inginkan untuk mendefinisikan, properti adalah atribut yang ingin Anda ubah, dan setiap properti dapat mengambil nilai. Properti dan nilai dipisahkan dengan tanda titik dua, dan dikelilingi oleh body {color:black} Jika Anda ingin menentukan lebih dari satu properti, Anda harus memisahkan masing-masing properti dengan titik koma. Contoh di bawah ini menunjukkan bagaimana untuk mendefinisikan sebuah paragraf dengan text rata tengah dan warna teks merah: p { text-align:center;color:red }
Dengan kelas selektor Anda dapat menetapkan berbagai gaya dalam elemen HTML, misalkan Anda ingin memiliki dua tipe paragraf dalam dokumen Anda, yang pertama paragraf dengan format rata kanan, dan yang kedua paragraf rata tengah, maka penulisannya adalah sebagai berikut: p.right {text-align:right} p.center {text-align:center}
Anda harus menggunakan atribut class dalam dokumen HTML Anda seperti berikut: <p class="right">This paragraph will be right-aligned.</p> <p class="center">This paragraph will be center-aligned.</p>
Penggunaan atribut ID dalam Tag
Dalam pasangan tag <STYLE> dan </STYLE>, Anda bisa mendefinisikan suatu nama ID dengan bentuk seperti berikut: #nama_ID{properti_1:nilai_1;....;properti_n:nilai_n;} Pada pendefinisian ini, awalan # selalu digunakan Cara memberi nama ID:
1. Dapat mengandung huruf, angka, atau karakter garis bawah
2. Karakter pertama harus berupa huruf atau karakter garis bawah
Contoh: membuat style bernama tebal yang mengatur teks agar dalam keadaan ditebalkan dan warnanya biru.
#tebal { font-weight:bold;color:blue;}
1. Bukalah lembar kerja baru dengan menggunakan notepad/ textpad
lalu ketikkan script berikut:
body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}
Simpan fle tersebut dengan nama ex1.css. lalu ketikkan script dibawah, simpan dengan nama fle.htm.
<html> <head> <link rel="stylesheet" type="text/css" href="ex1.css" /> </head> <body> <h1>Tulisan ini berukuran 36</h1> <h2>Tulisan ini berwarna biru</h2> <p>Ini paragraf dengan left margin 50 pixels</p>
</html> Jalankan file.htm di browser
2. Ketikkan script berikut: <html> <head> <style type="text/css"> h1 { background-color:#FF0000; } p { background-color:#e0ffff; } div { background-color:#b0c4de; } </style> </head> <body> <h1>Contoh background Css</h1>
Ini text yang menggunakan tag div <p>Ini paragraf yang mempunyai background</p> Ini masih di tag div </div> </body> </html> Jalankan script tersebut dengan browser, lalu amati hasilnya.
3. Modifikasi script tersebut dengan menambahkan properti pada selektor h1 untuk mengubah warna text menjadi putih.
4. Ketikkan script berikut: <html> <head> <style type="text/css"> p.normal {font-style:normal} p.italic {font-style:italic}
</style> </head> <body> <p class="normal">Ini paragraf, dengan font normal.</p> <p class="italic">Ini paragraf, dengan font miring.</p> </body> </html>
5. Ketikkan script berikut: <html> <head> <style> h1 {font-size:40px} h2 {font-size:30px} p {font-size:14px} </style> </head> <body> <h1>Ini heading ukuran 40</h1> <h2>Ini heading ukuran 30</h2> <p>Ini paragraf ukuran 14</p> </body> </html>
6. Tambahkan properti pada masing-masing selektor untuk warna text (warna sesuai keinginan)
KASUS
Buatlah file html yang ada sintaks Cssnya untuk membuat halaman web seperti tampilan di bawah:
Keterangan: Header dengan teks rata tengah, dan warna teks biru.
Satu bagian paragraf dengan format teks rata kanan, dan satu bagian paragraf lain menggunakan rata kanan kiri
Dari tugas modul 2, Aturlah tabel anda tersebut pada tag <table>, <tr>, <td>, <th> (tergantung tag yang anda pakai) yang diatur dalam Css baik mengenai pengaturan teks, warna, border, dll.
MATERI VI
JAVASCRIPT
Pada pertemuan ini akan dipelajari tentang javascript pada web. Javascript
adalah bahasa yang berbentuk kumpulan script yang pada fungsinya berjalan
Bahasa ini memberikan kemampuan tambahan terhadap bahasa HTML dengan
mengijinkan pengeksekusian perintah-perintah disisi user, yang artinya disisi
browser bukan disisi server web. T I U : 2. Mahasiswa mengenal mengenai javascript. T IK :3. Mahasiswa mampu membuat halaman web dengan disisipkan javascript didalamnya.
4. Mahasiswa mampu membuat tampilan dokumen HTML denggan permainan
warna dan berbagai jenis tampilan teks.JavaScript
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan“LiveScript”bahasa ini banyak di kritik karena kurang aman, pengembangannya yangterkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuatkesalahan pada saat menyusun suatu program.