MODUL -1 Pengenalan Internet dan Web Browse

Transkripsi

1 Modul : KBMI3204-Internet & WEB Desain Hal : 1 MODUL -1 Pengenalan Internet dan Web Browse A. Pendahuluan Media Informasi tanpa batas yang belakangan populer dengan sebutan Cyberspace, seperti halnya dunia nyata (hitam-putih), didunia maya juga ada hal positif dan negatifnya. Internet bisa memberikan informasi yang sifatnya mendidik, positif dan bermanfaat bagi kemaslahatan ummat manusia. tapi juga bisa dijadikan sebagai lahan kejelekan dan kemaksiatan. Hanya etika, mental dan keimanan masing-masinglah yang menentukan batasbatas nya. Interconnected Network - atau yang lebih populer dengan sebutan Internet - adalah sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia. Setiap komputer dan jaringan terhubung - secara langsung maupun tidak langsung - ke beberapa jalur utama yang disebut internet backbone dan dibedakan satu dengan yang lainnya menggunakan unique name yang biasa disebut dengan alamat IP 32 bit. Contoh: Komputer dan jaringan dengan berbagai platform yang mempunyai perbedaan dan ciri khas masing-masing (Unix, Linux, Windows, Mac, dll) bertukar informasi dengan sebuah protokol standar yang dikenal dengan nama TCP/IP (Transmission Control Protocol/Internet Protocol). TCP/IP tersusun atas 4 layer (network access, internet, host-to-host transport, dan application) yang masing-masing memiliki protokolnya sendiri-sendiri. Bila anda mempunyai Komputer minimal prosessor 486, Windows 95, Modem, dan line telepon, maka anda telah bisa bergabung dengan ribuan juta komputer lain dari seluruh dunia dan mengakses harta karun informasi di internet. 1 B. Web Browse 1. Pengenalan Browser WWW adalah layanan yang paling sering digunakan dan memiliki perkembangan yang sangat cepat karena dengan layanan ini kita bisa menerima informasi dalam berbagai format (multimedia). Untuk mengakses layanan WWW dari sebuah komputer (yang disebut WWW server atau web server) digunakan program web client yang disebut web browser atau browser saja. Jenis-jenis browser yang sering digunakan adalah: Netscape Navigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena, Lynx, dan lain-lain. 2. Tampilan Internet Explorer dan Fungsi Tools-nya

2 Modul : KBMI3204-Internet & WEB Desain Hal : 2 3. Surfing / Browsing Surfing merupakan istilah umum yang digunakan bila menjelajahi dunia maya atau web. Tampilan web yang sangat artistik yang tidak hanya menampilkan teks tapi juga gambargambar yang di tata sedemikian rupa sehingga selalu membuat betah netter untuk surfing berjam-jam. Karena itu para netter harus sangat memperhitungkan rencana web mana saja yang akan dikunjungi atau batasi informasi yang ingin diakses, karena bila tidak netter akan tersesat kedalam rimba informasi yang maha luas. 4. Langkah-Langkah dalam Browsing 1. Klik double pada icon Internet Explorer. 2. Pastikan nama situs yang akan Anda browsing, mis. Situs berita islam eramuslim 3. Ketikkan nama situs tersebut ( pada kolom address. 4. Tekan 'enter'. Atau klik tombol 5. Tunggu beberapa saat hingga tampilan keseluruhan selesai dan tertulis 'Done' di Status Bar. (tampilannya akan seperti di bawah ini) 6. Jika ingin membuka halaman baru dengan page yang sama, dapat dilakukan dengan cara: klik File pada menu, klik New, dan klik Window. Atau dengan Menekan tombol Ctrl+N 7. Jika sudah selesai, Internet Explorer ditutup dengan cara mengklik 'Close' pada menu files 5. Menyimpan Web Pages: Untuk menyimpan data di situs yang sedang terbuka bisa dilakukan dengan 3 cara : 1. Simpan ke hard disk dengan meng-klik

3 Modul : KBMI3204-Internet & WEB Desain Hal : 3 FILE Save As, dan pilih folder untuk penyimpanan Save dan anda bisa membukanya kembali dirumah/rental sesuai dengan aslinya dengan penuh gambar ( formatnya ber-ekstensi *.html) 2. Bila anda hanya membutuhkan text-nya saja dan imagenya nggak perlu (file yang dihasilkan dengan penyimpanan cara (1) sangat besar) maka anda bisa mengambil teksnya saja dengan cara : High light (sorot) text-nya copy (Ctrl+C) dan pastekan (Ctrl+V) di Ms Word 3. Bila anda seorang programmer komputer yang menginginkan program asli dari tampilan website tsb anda dapat melakukan : Klik kanan teks tsb, akan muncul Menu Pop Up Buka kode html-nya dengan klik View Source Source Code Akan muncul pada NotePad, kemudian simpan filenya dengan : File, Save, Pada file name, ganti extension file txt dengan htm

4 Modul : KBMI3204-Internet & WEB Desain Hal : 4 MODUL 2 Search Engine dan Elektronik Mil ( ) A. Search Engine Search engine adalah salah satu fasilitas internet yang dijalankan melalui browser untuk mencari informasi yang kita inginkan. Search engine menampung database situs-situs dari seluruh dunia yang jumlahnya milyaran halaman web, cukup dengan memasukkan kata kunci-nya maka search engine akan menampilkan beberapa link situs yang disertai dengan keterangan singkat. Langkah mengaktfikan dan menggunakan search engine Google: 1. Buka browser dan buka 2. Pada kolom ketikkan kata kunci informasi yg ingin dicari mis. Teknologi+Islami 3. Tekan Enter atau klik tombol Mesin Cari Google (Google Search) 4. Situs search engine tsb akan menampilkan maksimal 10 link situs yang berkaitan dengan kata kunci. 5. Pilih link yang menurut anda tepat dengan cara mengerakkan mouse pada halaman web, bila tanda mouse berubah mejadi gambar tangan () pada text atau gambar tertentu, itu menandakan bahwa teks atau gambar tersebut merupakan link, kalau kita klik link tersebut, maka halaman akan berganti sesuai dengan link yang kita klik. 6. Apakah halaman web yang terbuka menyajikan informasi yang kita cari, bila ya simpan, bila tidak maka kembali lagi ke halaman sebelumnya dengan meng-klik ikon back

5 Modul : KBMI3204-Internet & WEB Desain Hal : 5 B. Elektronik Mail ( ) Sebelum menggunakan fasilitas di yang ada di yahoo terlebih dahulu kita harus memiliki account di yahoo dengan cara mendaftar terlebih dahulu. Adapun langkah-langkah sebagai berikut: 1. Mendaftar di Yahoo Klik browser Internet Explorer atau Netscape Communicator Ketik alamat yang diinginkan Kemudian klik Sign Up Now

6 Modul : KBMI3204-Internet & WEB Desain Hal : 6 Setelah tampilan dibawah ini: Kemudian setelah formulir terisi kliklah SUBMIT THIS FORM 2. Membuka dan Mengirim Setelah anda mendaftar dan memiliki ID di yahoo.com anda dapat membuka dan mengirim Membuka Klik browser Internet Explorer atau netscape communicator Ketik alamat

7 Modul : KBMI3204-Internet & WEB Desain Hal : 7 Masukkan Yahoo ID dan Password lalu tekan Sign In Setelah itu klik Check Klik Inbox Klik subject yang ada pada Inbox 2. Mengirim Klik Compose apabila anda ingin mengirim anda dapat mengisi kolom yang tersedia yaitu 2. Mengirim Klik Compose apabila anda ingin mengirim anda dapat mengisi kolom yang tersedia yaitu To : Alamat yang dituju Cc : Alamat Lain (surat berantai) BCc : Alamat yang lain lagi Subject : Hal Surat / Isi setelah anda selesai mengisi kolom-kolom tersebut anda dapat mengirimnya dengan mengklik SEND

8 Modul : KBMI3204-Internet & WEB Desain Hal : 8 Apabila anda menerima dan ingin mengirimnya dengan cepat tanpa membuka tampilan sebelumnya dan mengklik Compose anda dapat menggunakan button Replay ataupun Forward Melalui kita juga bisa mengirim file yaitu dengan cara: klik ATTACHMENTS, maka akan muncul tampilan seperti berikut: Klik Browse, pilih file yang diinginkan Klik Attach file kemudian klik Done Akan ditampilkan window Compose, klik Send C. Mailing List (Milis) 1. Apa Itu Mailing List Mailing list merupakan satu salah fasilitas internet untuk berdiskusi melalui , kelompok diskusi mailing list ada banyak sekali dan dibagi menjadi 2 kategori: 1. Berdasarkan topik, topik mailing list beraneka ragam mulai dari tentang hobby memelihara ikan sampai penelitian tentang NASA, biasanya mailing list ini terbuka untuk umm. 2. Berdasarkan kelompok tertentu, misalnya mailing list Medan-Linux, HMI, Alumni-Binus, KAMMI, PK-Sejahtera, PAN,, PEMA, BEM, dll. Biasanya mailing list ini tertutup atau hanya untuk anggota saja. 2. Pendaftaran Mailing List Mailing list diatur oleh server mailing list, server atau penyedia mailing list gratis yang paling terkenal adalah Yahoogroups. Untuk mengikuti mailing list anda harus mendaftar terlebih dahulu. Cara pendaftaran mailing list ada dua cara : 1. Via web : Pendaftaran mailing list melalui web, misalnya mailing list di Yahoogroups Buka home page milis di Misalnya nama milis ilmukomputer.com, maka url home page milis di Kemudian klik Join untuk mendaftar dan ketik alamat anda

9 Modul : KBMI3204-Internet & WEB Desain Hal : 9 2. Via Pendaftaran mailing list melalui Kirim ke namamilis-subscribe@yahoogroups.com Misalnya nama milisnya kammi_sumut, maka kirim ke ilmukomputer-subscribe@yahoogroups.com Setelah mendaftar mailing list (baik via web atau via ), maka secara otomatis server mailing list akan mengirim konfirmasi kepada subscriber (pendaftar). Cek segera inbox anda bila pendaftaran yang pertama berhasil maka akan ada message dari Yahoo Groups dengan subject Please Confirm Your.., segera balas tersebut apa adanya (tanpa dikotak-katik). Bila berhasil anda telah menjadi subsciber (anggota mailing list). 3. Membuat Mailing list sendiri di Yahoo 1. Buka url

10 Modul : KBMI3204-Internet & WEB Desain Hal : Setelah Muncul Tampilan Seperti diatas maka Klik Sign In ini jika anda sudah mempunyai account di Yahoo. Jika tidak maka Click here to register perintahnya sama ketika kita membuat di Yahoo.com. 3. Jika anda ingin membuat Group Milis sendiri maka klik Start a new Group! dan pilih kategory milis yang ingin kita buat pada Browse Group Categories, sesuaikan dengan choice yang disediakan. Misal : Programming Languages dstnya Setelah selesai maka Klik 5. Masukkan Group Name 6. Masukkan anda di Enter your Group address

11 Modul : KBMI3204-Internet & WEB Desain Hal : Isikan Describe dari Milis anda berupa Salam pembuka untuk Milis yang dimaksud. 8. Setelah selesai maka klik Continue untuk masuk ke step berikutnya 9. isikan form diatas dan klik Continue 10. Jika berhasil maka akan ditampilkan nama milis yang telah anda buat. Lalu lanjutkan untuk membuat Konfigurasi Milis anda dengan mengklik Customize Group atau jika ingin standart maka langsung saja ajak rekan2 anda untuk bergabung di Milis anda dengan mengklik Invite People.

12 Modul : KBMI3204-Internet & WEB Desain Hal : Membuka dan Menjawab diskusi mailing list pada halaman inbox, buka mailing list yang masuk dengan cara meng-klik judul mailing list tsb, ciri mailing list ilmukomputer adalah judul nya diawali dengan Subject:[ilmukomputer] OOT: hasil Kloning PC!!! isi mailing list akan segera tampil pada halaman web untuk membalas tersebut, kilk ikon Reply selanjutnya akan muncul halaman seperti halaman compose, hanya bedanya pada To, dan Subject sudah ada tulisan, kita tidak perlu merubah kolom tersebut. Ketiklah kata-kata balasannya, kemudian klik Send

13 Modul : KBMI3204-Internet & WEB Desain Hal : 13 MODUL 3 Chatting dan Yahoo Massenger 1. Langkah-langkah chatting menggunakan yahoo.com 1. Browsing yahoo.com 2. Klik Chat 3. Klik Enter Chat Room, tunggu beberapa saat untuk connect to server, Klik Continue Maka akan muncul tampilan seperti berikut, Input pesan pada Chatt dan click Send, click satu atau beberapa ID yang anda inginkan yang tertera disebelah kanan monitor anda. Untuk mengganti room, click Change Room Untuk membuat room, click Create Room 2. Chatting dengan menggunakan Yahoo Messenger. Sebelum menggunakan Yahoo Messenger, anda harus sudah memiliki account di Yahoo. 1. Aktifkan Yahoo Messenger seperti pada gambar berikut ini.

14 Modul : KBMI3204-Internet & WEB Desain Hal : Klik Menu Login Login 3. Masukkan Yahoo ID dan Password anda 4. Klik Chat, maka akan tampil join room, dan anda dapat memilih room mana yang anda inginkan. Seperti pada gambar berikut ini: 5. Setelah memilih salah satu room, maka anda dapat mengirimkan Personal Message (PM) kepada satu atau beberapa ID yang tertera, dengan cara mengklik double ID tersebut, seperti pada gambar berikut ini:

15 Modul : KBMI3204-Internet & WEB Desain Hal : Menambah Friend List a. Klik satu atau beberapa ID Maka akan muncul tampilan seperti berikut, b. Klik Friend, kemudian Klik Add as Friend. Maka akan muncul tampilan seperti berikut, c. Klik Finish 4. Melihat Profile (View Profile) Bertujuan untuk melihat profile dari ID yang dimaksud. Pada Tampilan PM, lakukanlah langkah-langkah berikut ini: 1. Klik Friend 2. Klik View Profiles, tunggulah beberapa saat, maka profile akan ditampilkan dalam browser (Internet Explorer) 5. Mengirim File Jika anda ingin mengirimkan file kepada ID tertentu maka dapat dilakukan melalui PM dengan cara : 1. Klik Friend 2. Klik Send File Maka akan muncul tampilan sebagai berikut : 3. Klik Browse, pilih dimana file yang akan dikirimkan 4. Setelah selesai, klik Send Maka proses pengiriman akan berlangsung. 6. Mengirimkan Offline Messages Offline Messages berguna untuk mengirimkan pesan kepada ID yang dituju ketika ID tersebut offline. 1. Klik ID yang dituju. 2. Input pesan yang akan dikirimkan 3. Klik Send

16 Modul : KBMI3204-Internet & WEB Desain Hal : 16 MODUL - 4 HTML(Hyper Text Markup Language) Hypertext Markup Language (HTML) adalah bahasa standar dalam menulis halaman web, HTML merupakan pengembangan dari standar pemformatan dokumen teks. HTML sebenarnya adalah dokumen dalam bentuk ASCII atau teks biasa yang dapat diterjemahkan oleh browser web menjadi suatu halaman yang menarik. Struktur Dokumen HTML Sesuai dengan namanya yaitu Hypertext Markup Language (HTML) maka dokumen HTML terdiri dari tanda-tanda (markup) untuk menandai perintah-perintahnya (yang selanjutnya akan kita sebut sebagai tag). Tag HTML biasanya adalah tag-tag yang berpasangan dan ditandai dengan simbol < dan >, sedangkan pasangan atau akhir perintah dari sebuah tag ditandai dengan tanda /, misalnya pasangan dari tag <tag> adalah </tag>. Perintah atau taq html bisa ditulis dari notepad atau ( langkahnya: ), untuk membuka notepad Klik Start Program Accessories Notepad, kemudian akan muncul menu notepad seperti dibawah ini: Bentuk Struktur dari HTML. <HTML> </HTML> Masing-masing baris di atas disebut tag (sekali lagi kita pakai istilah aslinya). Ada tag pembuka dan ada tag penutup. Untuk menuliskan tag penutup cukup tambahkan / di depan tag pembuka. Sebagian besar, tapi tidak semua, tag memiliki tag penutup. Anggaplah tag ini sebagai cara kita berbicara dengan browser, atau lebih tepat memberikan perintah. Yang baru saja anda katakan pada browser adalah "ini adalah awal dokumen HTML" (<HTML>) dan "ini adalah akhir dokumen HTML" (</HTML>). Sekarang kita perlu mengisinya dengan sesuatu. Setiap file HTML memerlukan pasangan tag HEAD. <HTML> <HEAD> </HEAD> </HTML> Satu-satunya yang harus kita pikirkan tentang isi tag HEAD (untuk saat ini) adalah TITLE.

17 Modul : KBMI3204-Internet & WEB Desain Hal : 17 <HTML> <HEAD> <TITLE></TITLE> </HEAD> </HTML> Dan isi sesungguhnya dari file tersebut akan kita tempatkan di antara tag BODY. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <isi dari program> </BODY> </HTML> Sebagai contoh coba anda ketikkan code html berikut ini: Sekarang simpanlah file tersebut, bukan sebagai file teks (.txt), tetapi sebagai file html. Simpan dengan nama Coba1.html di suatu folder baru. Kalau anda bingung bagaimana melakukannya, inilah yang harus anda lakukan. Di windows Notepad klik File kemudian Save As. Anda akan menghadapi dialog box. Buat folder baru dengan menekan ini -> Beri nama apa saja. Kemudian klik dua kali untuk membukanya. Di kotak File name: tuliskan Coba1.html Pada kotak Save as type: pastikan bahwa jenis file ini adalah All Files (*.*). Kemudian tekan tombol Enter! Perhatikan gambar berikut:

18 Modul : KBMI3204-Internet & WEB Desain Hal : 18 Tugas anda berikutnya nanti adalah mengisi halaman tersebut dengan beberapa hal. Cara terbaik untuk adalah membuka Notepad dan dua window yaitu dengan Internet Explorer ( ) atau Netscape atau program yang lainnya untuk menjalankan hasil program yang telah anda buat. Anda dapat berpindah-pindah dengan meng-klik salah satu dari ketiganya, pada saat terjadi kesalahan atau pengeditan pada source codenya anda tinggal mengklik notepadnya dan jika ingin menjalankannya klik Internet Explorer. Di Program Internet Explorer klik File/Open File In Browser dan cari file tadi (coba1.html). Untuk membuka filenya, - Klik File Open, muncul dialog berikut: - Klik Tombol Browse, muncul dialog berikut: cari direktory, folder d nama filenya kemudian klik Open dan klik OK. Untuk menjalankan programnya, pastikan dulu anda membuka salah satu menu apakah itu netscape, opera atau internet explorer. Kemudian pastikan pada addressnya file yang anda simpan tadi, hasilnya akan seperti dibawah ini: <title> </title> <body></body> Heading (Judul)

19 Modul : KBMI3204-Internet & WEB Desain Hal : 19 Berfungsi untuk membuat judul dalam halaman home page yang kita desain. Format heading ini ada 7 format dimulai dari <h1> yang paling besar sampai ke <h7>. Bila program diatas dijalankan hasilnya akan seperti berikut ini: Contoh:

20 Modul : KBMI3204-Internet & WEB Desain Hal : 20 Hasilnya akan seperti berikut ini: Ada satu kode yang berarti "spasi" bagi browser -> (non-breaking space)

21 Modul : KBMI3204-Internet & WEB Desain Hal : 21 MODUL - 5 Format Font (Teks) HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Sebuah halaman web minimal mempunyai empat buat tag, yaitu : <HTML> Sebagai tanda awal dokumen HTML. <HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META. <TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar). Contoh : <TITLE>Tips HTML -- <BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain. Atribut : BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN. Contoh : <BODY bgcolor="#000000" background="images/pcb.gif" text="#ffffff" link="#ff0000" vlink="ffff00" alink="#0000ff"> Sebuah contoh sederhana dokumen HTML : <HTML> <HEAD> <TITLE>Halaman pembuka </TITLE> </HEAD> <BODY bgcolor="#ffffff" background="images/gambar1.gif" text="#ff0000"> Letakkan text, images, dan link Anda di sini </BODY> </HTML> untuk tempat mengetikkan listing program bia anda gunakan Notepad. - Klik Start Program Acsesories Notepad, muncul editor notepad seperti berikut:

22 Modul : KBMI3204-Internet & WEB Desain Hal : 22 Pengaturan Teks Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks : Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1-6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil. Contoh : <H2>Tutorial Html</H2> Hasilnya akan terlihat seperti : Tutorial Html Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Line Break: <BR> Digunakan untuk pindah ke baris baru. No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang. Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR. SIZE: Ukuran font yang digunakan, berkisar antara 1-7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar. FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic. COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya). Contoh : <FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teks yang berwarna merah</font> Hasilnya akan terlihat seperti : Contoh teks yang berwarna merah Contoh lainnya : <FONT SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC"> Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT. Contoh :

23 Modul : KBMI3204-Internet & WEB Desain Hal : 23 <BASEFONT SIZE=2 FACE="Arial,Helvetica" COLOR="#FF0000"> Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu : Perhatian : Semua tag di bawah ini membutuhkan tap penutup. <B> Bold text <I> Italic text <U> Underscore <TT> Typewriter <S> Strikeout - draws a line through the text <PRE> Preformatted Text <DFN> Definition <BLINK> Text berkedip (lebih baik jangan digunakan) <STRONG> Strong <ADDRESS> <CITE> Digunakan untuk quoting text <CODE> Monospaced font (digunakan bila Anda ingin meletakkan memperlihatkan) kode HTML pada dokumen HTML Anda) <SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) <KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) <BIG> Ukuran teks akan lebih besar satu ukuran <SMALL> Ukuran teks akan lebih kecil satu ukuran <SUP> Membuat teks superscript <SUB> membuat teks sub script <ABBREV> Abbreviations <ACRONYM> Untuk akronim <PERSON> Digunakan untuk indexing <Q> Membuat short inline quotation <VAR> Membuat variable name, selalu dalam italics Perhatikan contoh sederhana dibawah ini:

24 Modul : KBMI3204-Internet & WEB Desain Hal : 24 Hasilnya sebagai berikut: Paragraph Untuk memformat paragraf kita bisa menggunakan tag <P>. Untuk mengatur posisi tulisan kita menggunakan atribut ALIGN tag <BR> untuk pindah baris, <HR> untuk membuat garis, <BLOCKQUOTE> untuk membuat kutipan, <PRE> untuk menampilkan text sama dengan yang anda ketikkan dalam dokumen HTML Hasilnya akan seperti ini:

25 Modul : KBMI3204-Internet & WEB Desain Hal : 25 Untuk membuat warna dari body. Anda dapat juga menggunakan gambar sebagai latar belakang. (Ingat, file gambar tersebut harus berada pada direktori yang sama dengan file HTML anda. Ini akan kita bahas lagi nanti.) <BODY BACKGROUND="swirlies.gif"> Sesuatu yang menarik </BODY> Inilah gambar latar belakangnya. Agar gambar tadi bisa tampil, browser harus dapat menemukannya. Untuk saat ini, kita ingin menempatkannya di direktori yang sama dengan file HTML anda (hal1.html). Cara termudah untuk itu adalah dengan meng-klik kanan gambar di atas dan memilih Save Image As (kurang lebih seperti itu). Cari direktori yang berisi hal1.html dan simpan gambar tersebut di sana. Nanti kita akan membahas hal ini lebih rinci lagi.

26 Modul : KBMI3204-Internet & WEB Desain Hal : 26 MODUL 6 List dan Image Terdapat tiga tipe list yang dapat digunakan, yaitu : Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>. Contoh : Hasil dari kode di atas adalah: Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point. Contoh : <UL COMPACT TYPE=square> Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag. Contoh : Hasil dari kode di atas adalah :

27 Modul : KBMI3204-Internet & WEB Desain Hal : 27 Untuk TYPE Anda dapat juga menggunakan : Definition Lists: <DL> Contoh : Hasil dari kode di atas adalah : Images Digunakan untuk menampilkan image atau animasi gif dan Jpg umumnya dapat ditampilkan pada web anda tetapi lebih bagus kita membuat program dan menyimpan file gambar (image) yang akan anda panggil nanti berada dalam 1 folder. Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height Contoh :

28 Modul : KBMI3204-Internet & WEB Desain Hal : 28 <IMG SRC="logo.gif" alt="ini adalah logo halaman pembuka" width=200 height=100> <IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2> Perhatikan Folder berikut: Gambar yang akan dipanggil Programnya Notepadnya: Setelah programnya dijalankan hasilnya seperti berikut:

29 Modul : KBMI3204-Internet & WEB Desain Hal : 29 A. Links MODUL 7 Link dan Tabel Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah dan bila pointer mouse diarahkan kepada teks tersebut maka biasanya pointer mouse berubah jadi tanda gambar tangan. Contoh: : <A HREF="halaman2.html">Klik di sini</a> Untuk membuat link ke halaman lain. <A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</a> Untuk membuat link pada alamat . <A HREF="#aplikasi">Klik di sini</a> Untuk membuat link ke bagian lain pada halaman yang sama. <A HREF="halamanlain.html#aplikasi">Klik di sini</a> Untuk membuat link kebagian lain pada halaman yang berbeda. <A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> B. Tabel Untuk membuat link dengan menggunakan gambar. Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> <TABLE> Terdiri dari atribut : align - perataan : rata kiri (left), tengah (center) atau kanan (right). bgcolor - warna latar belakang (background) dari tabel. border - ukuran lebar border tabel (dalam pixel). cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).

30 Modul : KBMI3204-Internet & WEB Desain Hal : 30 cellspacing - jarak antar cell (dalam pixel). width - ukuran tabel dalam pixel atau percent. Contoh : <TABLE align="center" bgcolor="#0000ff" border="2" cellpadding="5" cellspacing="2" width="90%"> <TR> Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut: align - perataan : rata kiri (left), tengah (center) atau kanan (right). bgcolor - warna latar belakang dari baris. valign - perataan vertikal : top, middle atau bottom. Contoh : <TR align="right" bgcolor="#0000ff" valign=top> <TD> Tag ini digunakan untuk membuat kolom baru pada tabel. align - perataan background - image yang digunakan sebagai latar belakang dari kolom. bgcolor - warna latar belakang colspan - lihat gambar contoh height - ukuran tinggi cell dalam pixels. nowrap - membuat supaya isi dari kolom tetap berada pada satu baris. rowspan - lihat gambar contoh valign - perataan vertikal :top, middle atau bottom. width - ukuran kolom dalam pixel atau percen. Contoh : <TD align="right" background="back.gif" bgcolor="#0000ff" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300">

31 Modul : KBMI3204-Internet & WEB Desain Hal : 31 Perhatikan contoh-contoh dibawah ini: a. Contoh 1: Hasilnya akan seperti berikut :

32 Modul : KBMI3204-Internet & WEB Desain Hal : 32 b. Contoh 2: Hasilnya akan seperti berikut:

33 Modul : KBMI3204-Internet & WEB Desain Hal : 33 MODUL 8 Forms Misalnya anda ingi membuat form anda berarti selalu dekat dengan textbox, combo box, command button dan yang lainnya. a. Combo contoh: Agama: <select size= 1 name= xagama > <option value= Islam >Islam</option> <option value= Protestan >Protestan</option> <option value= Katolik >Katolik</option> <option value= Hindu >Hindu</option> <option value= Budha >Budha</option> b. Text Box contoh : Nama Karyawan: <Input type= text name= xnama maxlength= 8 > c. Commandbutton Contoh: <input type="submit" name="xsimpan" Value="Simpan"> <input type="reset" name="xhapus" Value="Hapus"> d. RadioButton Contoh: <input type="radio" name="radio3"> <option value="slta">slta</option><br> <input type="radio" name="radio2"> <option value="d-iii">d-iii</option><br> <input type="radio" name="radio"> <option value="sarjana">sarjana</option> e. Textarea Contoh: <Textarea name= xalamat rows= 4 cols= 44 ></Textarea> f. CheckBox Contoh: <input type="checkbox" value="yes" name="jenkel"> <option value="pria">pria</option>

34 Modul : KBMI3204-Internet & WEB Desain Hal : 34 perhatikan contoh berikut ini:

35 Modul : KBMI3204-Internet & WEB Desain Hal : 35 hasilnya akan seperti dibawah ini:

36 Modul : KBMI3204-Internet & WEB Desain Hal : 36 Contoh 2:

37 Modul : KBMI3204-Internet & WEB Desain Hal : 37 Hasilnya:

38 Modul : KBMI3204-Internet & WEB Desain Hal : 38 MODUL - 9 Frame Apa ya frame itu? Jangan bayangin kayak piguranya foto ya.. Hompege yang menggunakan frame itu membagi halaman situs menjadi beberapa bagian, dan tiap bagian menampilkan file yang berbeda. Lihat contoh layout berikut ini: File: "judul.html" File= "isi.html" File= "menu.html" Lihat layout di atas. Dalam satu layar monitor sebenarnya kita menampilkan tiga buah file yang berbeda, yaitu file judul.html, file menu.html dan file isi.html. Agak mirip dengan waktu pembahasan tabel (membuat layout halaman web), bedanya kalau tabel hanya menampilkan satu file sedangkan ini tiga file. Tentu ada keuntungan tersendiri dong. Tapi sebelum saya bercerita lebih lanjut, kita coba dulu membuat frame, ikuti langkah-langkah berikut: Salin kode HTML berikut kemudian simpan dengan nama "judul.html". Saya sarankan gunakan notepad. Hasilnya seperti berikut: Berikutnya salin juga kode HTML berikut dan simpan dengan nama "menu.html". Jangan lupa untuk menyimpan semua file di folder yang sama.

39 Modul : KBMI3204-Internet & WEB Desain Hal : 39 Hasilnya akan seperti ini: Persiapan terakhir, salin tulisan ini (saran saya gunakan copy-paste) dan simpan dengan nama "isi.html".

40 Modul : KBMI3204-Internet & WEB Desain Hal : 40 Hasilnya seperti berikut ini: Sekarang kita mulai membuat hompege dengan frame. Tag yang diperlukan untuk bikin frame nggak banyak kok, cuman dua, yaitu <FRAMESET> dan <FRAME>. Terus setelah punya tiga file tadi, kita perlu bikin file induk yang nanti kita namakan induk.html. Hasilnya sepert berikut:

41 Modul : KBMI3204-Internet & WEB Desain Hal : 41 Di antara tag <FRAMESET> dan </FRAMESET> nantinya akan kita isi tag <FRAME>. Perhatikan juga tidak ada tag <BODY> karena file induk memang tidak memerlukannya. Sekarang kita perdetil file induk kita. Kita akan membuat layout file kita berbentuk seperti di atas, sebuah judul, kemudian menu di samping, dan di kanannya merupakan isi. Berarti dari layout tersebut kita memerlukan dua buah baris (anda masih ingat definisi baris dan kolom bukan, seperti yang kita bicarakan saat tutorial membuat tabel), dan pada baris yang bawah kita bagi menjadi dua buah kolom. Berarti yang kita perlukan adalah seperti ini. Kita akan membagi dulu menjadi dua baris, baris atas sebesar (tepatnya setinggi) 20% dan baris bawah 80%. Kodenya adalah seperti ini. Perhatikan di mana saya meletakkan tanda petik, ROWS="20%,80%". Sekarang baris yang bawah kita bagi menjadi dua kolom, kiri dan kanan. Kolom kiri selebar 25% dan kolom kanan selebar 75%. Kodenya adalah seperti ini.

42 Modul : KBMI3204-Internet & WEB Desain Hal : 42 Nah kita sudah membagi layoutnya. Kini kita tentukan isinya dengan menggunakan tag <FRAME>. Untuk baris yang atas kita memanggil file judul.html, dan untuk baris bawah kita memanggil file menu.html dan isi.html. Perhatikan kode berikut (catatan untuk FRAME anda tidak perlu menutup dengan tag </FRAME>): Hasilnya seperti berikut:

43 Modul : KBMI3204-Internet & WEB Desain Hal : 43 Selamat. Selesailah frame pertama anda. Simpan kode di atas dengan nama induk.html (bebas sih namanya), kemudian panggil dengan browser favorit anda. Hasilnya harus seperti ini. :p Secara garis besar anda telah memahami cara membuat frame. Namun kini kita akan memperhatikan atribut-atributnya secara lebih detil sehingga anda akan dapat mengatur frame anda dengan lebih fleksibel. Kita mulai dengan tag <FRAMESET>. Tag ini memiliki beberapa atribut, seperti bentuk di bawah: <FRAMESET COLS="..." ROWS="..." BORDER="..." BORDERCOLOR="..." FRAMEBORDER="YES">... </FRAMESET> Baik, saya bahas satu-persatu. Anda kelihatannya sudah faham atribut COLS dan ROWS karena tadi telah kita gunakan. Namun lebih baik tetap saya jelaskan. Atribut COLS akan membagi bidang menjadi beberapa kolom. Anda dapat menulis COLS="30%,70%" untuk membagi bidang menjadi dua kolom berukuran (urut dari kiri) 30% dan 70%. Juga anda dapat menulis COLS="20%,20%,60%" untuk membagi bidang menjadi tiga kolom, dst. Anda juga dapat membaginya bukan dalam persen, seperti COLS="250,450" yang membagi bidang menjadi dua kolom berukuran 250 pixel dan 450 pixel. Atau bahkan anda dapat membagi menjadi COLS="200,300,*" yang artinya anda membagi menjadi 3 kolom berukuran 200 pixel, 300 pixel dan sisanya. Ini akan bermanfaat jika anda tidak yakin lebar halaman seluruhnya, sehingga ukuran frame anda tidak kurang atau berlebihan. Yang lebih asyik, anda dapat membagi menjadi seperti ini COLS="200,*,2*" yang berarti kolom ketiga berukuran dua kali lipat kolom kedua. (Catatan: hati-hati saat membagi bidang dalam %, karena ukuran layar yang anda gunakan bisa jadi berbeda dengan pemakai lainnya. Dalam persen, ukuran frame anda akan mengikuti besar layar. Ukuran layar monitor yang umum adalah 640x480, 800x600 dan 1024x768) Seperti halnya COLS, atribut ROWS juga berfungsi membagi bidang. Bedanya ROWS membagi menjadi beberapa baris, bukan kolom. Aturannya persis sama, bisa dalam persen maupun dalam pixel.

44 Modul : KBMI3204-Internet & WEB Desain Hal : 44 Atribut berikutnya adalah BORDER yang menentukan tebal batas antar frame. Anda dapat menset BORDER="0" (sama dengan tanpa border), BORDER="2" (ada batas tipis) atau BORDER="10" (memakai batas tebal). Anda dapat melihat contoh file yang tadi dengan border="2" dan dengan border="10". O, ya kodenya menjadi seperti ini. <HTML> <HEAD> <TITLE>Pertama kali bikin frame</title> </HEAD> <FRAMESET ROWS="20%,80%" BORDER="10"> <FRAME SRC="judul.html"> <FRAMESET COLS="25%,75%"> <FRAME <FRAME SRC="isi.html"> SRC="menu.html"> </FRAMESET> </FRAMESET> </HTML> Kemudian atribut BORDERCOLOR berguna untuk menentukan warna pembatas antar frame. Anda dapat mengeset dengan menggunakan istilah seperti BORDERCOLOR="red" ataupun menggunakan kode warna yang telah kita pelajari, seperti BORDERCOLOR=#00CCFF. Ini contoh file tadi dengan border="10" dan BORDERCOLOR="green", silakan klik. Kalau file di atas, kodenya seperti ini: <HTML> <HEAD> <TITLE>Pertama kali bikin frame</title></head> <FRAMESET ROWS="20%,80%" BORDER="10" BORDERCOLOR="green"> <FRAME SRC="judul.html"> <FRAMESET COLS="25%,75%"> <FRAME SRC="menu.html"> <FRAME SRC="isi.html"> </FRAMESET> </FRAMESET> </HTML> Terakhir adalah atribut FRAMEBORDER. Jika kita menggunakan FRAMEBORDER="YES" maka batas akan ditampilkan dalam bentuk 3 dimensi, dan jika menggunakan FRAMEBORDER="NO", batas akan ditampilkan dalam bentuk datar (tidak jelas terlihat). Sekarang kita akan membicarakan mengenai atribut pada tag <FRAME> Bentuk umumnya adalah sebagai berikut: <FRAME BORDERCOLOR="..." FRAMEBORDER="YES" MARGINHEIGHT="..." MARGINWIDTH="..." NAME="..." NORESIZE SCROLLING="YES" SRC="...">

45 Modul : KBMI3204-Internet & WEB Desain Hal : 45 Atribut BORDERCOLOR dan FRAMEBORDER fungsinya persis seperti pada tag <FRAMESET>. Di sini warna yang didefinisikan oleh tag yang lebih dalam akan menang melawan warna yang didefinisikan oleh tag yang luar, juga ada tidaknya border akan ditentukan oleh tag yang lebih dalam (bingung kan, tapi saat mendapat masalah ini anda akan mengerti :)). Kemudian MARGINHEIGHT berfungsi menentukan besar margin antara batas atas dan bawah frame, dengan isinya. Sedang MARGINWIDTH menentukan besar margin kiri dan kanan. Kedua atribut tersebut memiliki harga minimal 1. Karena adanya margin dan border, maka ukuran 'benda' (bisa gambar atau apapun) harus 8 pixel lebih kecil dari ukuran frame untuk memberikan tampilan yang diinginkan. Setelah itu atribut NORESIZE berfungsi untuk membuat ukuran frame tidak dapat diubah. Coba anda buka file induk yang tadi (klik ini), kemudian geser-geser border yang ada. Anda dapat menggesernya bukan? Dengan kata lain anda dapat mengubah ukuran frame karena tidak dituliskannya atribut NORESIZE ini pada file induk.html. Berikutnya atribut SCROLLING yang berfungsi untuk menentukan ada tidaknya scrollbar. Hey anda tahu kan yang dimaksud dengan scrollbar? Kalau anda ingin melihat bagian atas halaman tutorial ini, maka anda menggerakkan scrollbar ke atas. Ya, itu dia. Nah atribut SCROLLING="YES" akan menyebabkan selalu ada scrollbar pada frame, atribut SCROLLING="NO" menyebabkan tidak ada scrollbar dalam kondisi apapun dan atribut SCROLLING="AUTO" menyebabkan scrollbar akan muncul saat dibutuhkan, yaitu saat isi frame lebih besar daripada ukuran frame. Ngerti kan? Ngerti lah yau, saya pusing nech neranginnya kalau belum ngerti. :) Kemudian atribut SRC adalah atribut yang utama, yaitu memanggil file yang akan mengisi frame. Pada file induk.html, dengan atribut SRC kita telah memanggil file judul.html, menu.html dan file isi.html. SRC tidak selalu harus memanggil file html, kita juga dapat menuliskan SRC="tintin.gif" untuk menampilkan gambar di dalam frame misalnya. Anda dapat bereksperimen, terserah. Terakhir - sengaja nech saya akhirkan - adalah atribut NAME. Atribut ini berfungsi memberi nama frame. Yup, itu saja. Sama seperti saat anda memberi nama pada hewan kesayangan anda. Untuk apa? Tentu saja agar anda dapat memanggilnya bukan? Sekarang kita mulai permainan yang menarik. Sebelumnya, sebagai persiapan anda harus membuat sebuah file lagi, namakan file itu tambahan.html. Isi filenya adalah sebagai berikut: <HTML> <HEAD></HEAD> <BODY BGCOLOR="green"> <FONT SIZE=5 COLOR="yellow"> <B>Ini isinya cuman tambahan kok.</b> </FONT> </BODY></HTML> Nah kita sudah siap untuk memulai permainan ini. Sekarang edit file menu.html anda menjadi seperti ini. <HTML> <HEAD></HEAD> <BODY BGCOLOR="yellow"> Menu:<BR> <A HREF="tambahan.html" target="kiri">di sini</a><br> <A HREF="tambahan.html" target="kanan">di sana</a><br>

46 Modul : KBMI3204-Internet & WEB Desain Hal : 46 <A HREF="tambahan.html" target="atas">di atas</a><br> <A HREF=" target="_blank">link saya</a><br> <A HREF=" target="_top">link lain</a><br> <A HREF=" target="_self">link lain lagi</a><br> <A HREF=" target="_parent">link aneh</a> </BODY></HTML> Simpan dengan nama menu2.html. Anda lihat pada file menu2.html saya menambahkan beberapa link dan tag <A HREF... TARGET=...>. Nanti akan saya terangkan manfaatnya di bawah. Kemudian edit juga file induk.html anda menjadi seperti di bawah dan namakan dengan nama final.html. Perhatikan bahwa saya menambahkan atribut NAME pada tiap frame. Dan juga saya mengubah salah satu SRC, dari menu.html menjadi menu2.html <HTML> <HEAD> <TITLE>Pertama kali bikin frame</title></head> <FRAMESET ROWS="20%,80%"> <FRAME NAME="atas" SRC="judul.html"> <FRAMESET COLS="25%,75%"> <FRAME NAME="kiri" SRC="menu2.html"> <FRAME NAME="kanan" SRC="isi.html"> </FRAMESET> </FRAMESET> </HTML> Mari saya cek, anda punya file judul.html, menu2.html dan isi.html. Anda juga punya file final.html. OK semuanya siap, buka file "final.html" dengan browser anda, dan klik link-link yang ada. Apa yang terjadi? Lihat di sini. Yup, dahulu saya pernah menjanjikan untuk menerangkan fungsi atribut TARGET pada tag <A HREF>. Kini akan saya terangkan. Kita dapat mengisi target dengan nama-nama frame sehingga saat mengklik, file baru akan terbuka di frame yang dituju. Di sini kita menamakan frame kita dengan "atas", "kiri" dan kanan". Kita juga dapat mengisi target dengan empat hal berikut: _blank, ini akan membuka window baru dan menampilkan alamat yang dipanggil di sana. _top, akan menampilkan alamat yang dipanggil di window yang sama - full satu window - tidak peduli sebelumnya ada frame atau tidak. _self, menampilkan alamat yang dipanggil di tempat yang sama. Kalau yang memanggil adalah sebuah frame, maka halaman yang dipanggil akan ditampilkan di frame itu. _parent, ini akan menampilkan alamat yang dipanggil di frameset satu tingkat lebih tinggi dari frame yang memanggil.

47 Modul : KBMI3204-Internet & WEB Desain Hal : 47 Jadi kalau anda bermain dengan frame, yang paling aman adalah menggunakan target="_top" yang berarti alamat yang dipanggil akan muncul lengkap mengisi satu window, full; atau sekalian memakai target="_blank" yang berarti alamat yang dipanggil akan muncul di window baru. Terakhir, anda harus memperhatikan bahwa ada browser tertentu yang tidak mensupport frame. Artinya halaman situs anda tidak akan tampak, saat mereka panggil. Untuk mensiasatinya anda dapat menggunakan tag <NOFRAME>. Tempatkan tag ini di dalam tag <FRAMESET>. Jika browser tidak mensupport frame, maka tulisan yang ada di dalam tag NOFRAME lah yang akan ditampilkan. Perhatikan contoh berikut. <HTML> <HEAD> <TITLE>Pertama kali bikin frame</title></head> <FRAMESET ROWS="20%,80%"> <NOFRAME> Tulisan yang berada di sini akan ditampilkan oleh browser yang tidak mensupport frame. Di sini anda dapat menulis apapun, termasuk menampilkan gambar dan link. </NOFRAME> <FRAME NAME="atas" SRC="judul.html"> <FRAMESET COLS="25%,75%"> <FRAME NAME="kiri" SRC="menu2.html"> <FRAME NAME="kanan" SRC="isi.html"> </FRAMESET> </FRAMESET> </HTML>

48 Modul : KBMI3204-Internet & WEB Desain Hal : 48 MODUL 10 Gabungan Link dan Gambar Sebelum kita lanjutkan, anda harus tahu tentang satu hal. Kalau anda memakai gambar dalam dokumen anda, ingat bahwa gambar tersebut berisi banyak sekali data dan karenanya butuh cukup banyak waktu untuk menampilkannya. Satu cara untuk mengurangi ukuran gambar (ukuran yang saya maksud adalah Kb) adalah dengan memperkecil dimensinya. Mengurangi panjang dan lebar gambar setengahnya akan menghasilkan gambar yang berukuran hanya 1/4 ukuran aslinya. Anda dapat juga mengurangi jumlah warna yang dipakai. Sebagai contoh: Semua pengeditan gambar dikerjakan dengan Paint Shop Pro. (Versi sebelumnya yang tanpa batasan waktu pemakaian tersedia di sini. Biarpun versi lama dan tidak secanggih versi terbaru, graphics editor ini sangat bagus - cocok untuk para pemula.) Sudah jelas, gambar pertama lebih besar, lebih bagus dan kualitasnya lebih baik, tetapi bayangkan ini... jika dokumen anda butuh waktu yang sangat lama untuk tampil, pengunjung anda kemungkinan besar akan berpindah halaman dan mereka tidak akan melihat apapun. Pilihan lain yang dapat digunakan jika anda menggunakan banyak gambar adalah dengan menyediakan thumbnail (gambar kecil) berisi link ke gambar yang lebih besar. Misalkan saya ingin menampilkan tiga gambar mobil dari beberapa koleksi mobil saya (I wish). Klik untuk menampilkan gambar yang lebih besar Hal pertama yang perlu anda lakukan adalah membuka image editor dan membuat versi kecil dari gambar anda, yang sekaligus juga akan membantu mengurangi jumlah warna. Hal ini sangat penting. Saya sering melihat seseorang mencoba membuat thumbnail hanya dengan mengurangi dimensinya pada tag <IMG>. Dengan ini, yang dilakukan sebenarnya adalah memasukkan gambar asli ke tempat yang lebih kecil. Yang harus anda lakukan adalah

49 Modul : KBMI3204-Internet & WEB Desain Hal : 49 membuat copy gambar tersebut dengan ukuran yang lebih kecil dan menggunakannya sebagai link ke gambar yang lebih besar. Mari kita coba. Saya akan pakai Corvette (yang berwarna biru kalau anda tidak tahu). Copykan gambar besar dan yang kecil ke folder anda. Sekali lagi, caranya adalah dengan klik kanan & Save Image As pada window Netscape. (Kalau anda tidak menggunakan Netscape, caranya kurang lebih sama.) Mulailah dengan tag <IMG>. <BODY> <IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62> </BODY> Tambahkan tag <A>. <BODY> <A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A> </BODY> Kemudian tambahkan URL gambar besar dan selesailah sudah! <BODY> <A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A> </BODY> Kalau anda mau, anda bisa hilangkan garis biru di sekeliling gambar. Atau anda biarkan saja supaya orang tahu bahwa gambar tersebut adalah sebuah link. Terserah anda. <BODY> <A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0></A> </BODY>

50 Modul : KBMI3204-Internet & WEB Desain Hal : 50 Tanya: Kalau saya membuat link gambar di Netscape, muncul garis bawah biru kecil di sampingnya. Juga ada spasi di antaranya, sedangkan yang saya inginkan gambar-gambar tersebut saling bersambungan. Saya tidak mengerti... hal ini tidak terjadi di Explorer. Jawab: Netscape menginterpretasikan carriage return (Enter) di antara gambar sebagai spasi. IE tidak. Itu saja. Garis berwarna biru kecil tersebut adalah garis bawah link pada spasi. Solusinya adalah menghilangkan carriage return sebelum atau sesudah gambar tadi. Inilah kode HTML untuk gambar di atas: kalau kita ubah menjadi seperti ini garis bawah biru tersebut akan hilang: Penyesuaian sedikit lagi dan spasinya akan hilang juga: Membingungkan? Hanya jika anda tidak mengerti apa yang terjadi dan bagaimana memperbaikinya. Apakah Netscape browser yang kurang handal? Tidak, hanya berbeda dari IE. Browser kadang-kadang memberikan hasil berbeda untuk kode HTML yang sama. Cara lain menggunakan link adalah tidak saja menunjuk ke suatu halaman, tetapi ke bagian tertentu halaman tersebut. Klik di sini untuk menampilkan kembali bagian di mana kita pertama kali bicara tentang URL. Saya akan coba jelaskan cara membuatnya.

51 Modul : KBMI3204-Internet & WEB Desain Hal : 51 Pertama-tama tentukan tempat tujuan link tersebut. Pilih satu kata dan tambahkan pasangan tag <A>. <A>Tambahkan</A> URL-nya dan selesailah sudah! Kemudian beri nama (NAME)untuk tempat tersebut. <A NAME="upabit">Tambahkan</A> URL-nya dan selesailah sudah! Yang baru saja anda lakukan adalah menandai tempat tadi. Sekarang tempat tersebut bisa dijadikan tujuan link. Mulai menuliskan link. Klik <A>di sini</a> untuk menampilkan kembali bagian... Tambahkan file yang dijadikan tujuan... Klik <A HREF="web6.html">di sini</a> untuk menampilkan kembali bagian... Dan terakhir, tambahkan anchor NAME yang menunjuk ke bagian tertentu tadi... Klik <A HREF="web6.html#upabit">di sini</a> untuk menampilkan kembali bagian... Begitulah! Tidak sesulit yang anda bayangkan, bukan??

52 Modul : KBMI3204-Internet & WEB Desain Hal : 52 MODUL 11 Link dan Tabel A. Links Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah dan bila pointer mouse diarahkan kepada teks tersebut maka biasanya pointer mouse berubah jadi tanda gambar tangan. Contoh: : <A HREF="halaman2.html">Klik di sini</a> Untuk membuat link ke halaman lain. <A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</a> Untuk membuat link pada alamat . <A HREF="#aplikasi">Klik di sini</a> Untuk membuat link ke bagian lain pada halaman yang sama. <A HREF="halamanlain.html#aplikasi">Klik di sini</a> Untuk membuat link kebagian lain pada halaman yang berbeda. <A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> Untuk membuat link dengan menggunakan gambar. B. Tabel Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> <TABLE> Terdiri dari atribut : align - perataan : rata kiri (left), tengah (center) atau kanan (right). bgcolor - warna latar belakang (background) dari tabel. border - ukuran lebar border tabel (dalam pixel).

53 Modul : KBMI3204-Internet & WEB Desain Hal : 53 cellpadding - jarak antara isi cell dengan batas cell (dalam pixel). cellspacing - jarak antar cell (dalam pixel). width - ukuran tabel dalam pixel atau percent. Contoh : <TABLE align="center" bgcolor="#0000ff" border="2" cellpadding="5" cellspacing="2" width="90%"> <TR> Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut: align - perataan : rata kiri (left), tengah (center) atau kanan (right). bgcolor - warna latar belakang dari baris. valign - perataan vertikal : top, middle atau bottom. Contoh : <TR align="right" bgcolor="#0000ff" valign=top> <TD> Tag ini digunakan untuk membuat kolom baru pada tabel. align - perataan background - image yang digunakan sebagai latar belakang dari kolom. bgcolor - warna latar belakang colspan - lihat gambar contoh height - ukuran tinggi cell dalam pixels. nowrap - membuat supaya isi dari kolom tetap berada pada satu baris. rowspan - lihat gambar contoh valign - perataan vertikal :top, middle atau bottom. width - ukuran kolom dalam pixel atau percen. Contoh : <TD align="right" background="back.gif" bgcolor="#0000ff" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300">

54 Modul : KBMI3204-Internet & WEB Desain Hal : 54 Perhatikan contoh-contoh dibawah ini: c. Contoh 1: Hasilnya akan seperti berikut :

55 Modul : KBMI3204-Internet & WEB Desain Hal : 55 d. Contoh 2: e. Hasilnya akan seperti berikut:

56 Modul : KBMI3204-Internet & WEB Desain Hal : 56 MODUL 12 Layar dan Tampilan Web Sejauh ini sudah cukup banyak yang kita bahas. Manipulasi teks dan font, gambar, serta link. Sebagai dasar, tidak terlalu banyak lagi yang harus kita pelajari. Saya rasa sekarang saatnya kita bicara tentang resolusi layar. Ukuran layar yang biasa saya gunakan untuk bekerja adalah 800x600 pixels (picture elements). Cukup banyak yang menggunakan ukuran 640x480 dan beberapa memilih resolusi 1024x768. Saya yakin lebih sedikit lagi yang memakai ukuran lain. Apa sebetulnya pengaruh resolusi ini? Ukuran ini menentukan bagaimana halaman yang kita rancang tampil di layar pengunjung situs web kita. Berikut ini adalah beberapa contoh tampilan pada berbagai resolusi yang berbeda Akan sangat berguna kalau anda bisa memeriksa web page anda pada beberapa resolusi yang lain. Sayang sekali kalau sesudah merancang dengan susah payah halaman anda tampil terpotong. Terutama bila anda mengerjakannya pada resolusi yang lebih tinggi. Coba lihat kreasi anda pada resolusi yang lebih rendah dan mungkin anda akan terkejut. Untuk pemakai Windows95, ada program yang merupakan bagian dari MS Powertoy yang disebut Quickres. Program ini memungkinkan anda mengubah resolusi layar secara mudah. Sekarang kita akan bahas beberapa pemformatan teks yang bisa anda gunakan. Yang pertama adalah <BLOCKQUOTE>. Pada kebanyakan browser ini berarti menambah lebar margin di kiri dan kanan teks. (Teksnya terdorong ke dalam.) <BODY> <BLOCKQUOTE> Kami bangsa Indonesia dengan ini menyatakan kemerdekaan Indonesia. Hal-hal mengenai perpindahan kekuasaan dan lain-lain akan diselenggarakan dengan seksama dan dalam tempo sesingkat-singkatnya. </BLOCKQUOTE> </BODY> Kami bangsa Indonesia dengan ini menyatakan kemerdekaan Indonesia. Hal-hal mengenai perpindahan kekuasaan dan lain-lain akan diselenggarakan dengan seksama dan dalam tempo sesingkatsingkatnya. Suatu cara pemformatan lain yang akan sangat banyak berguna adalah LIST (daftar). Ada dua macam daftar, yaitu ORDERED lists (daftar berurutan) dan UNORDERED lists (daftar tak berurutan).

57 Modul : KBMI3204-Internet & WEB Desain Hal : 57 Ini adalah ordered list 1. Puntadewa 2. Bima 3. Arjuna 4. Nakula 5. Sadewa Ini adalah unordered list merah biru lama baru ungu Pertama-tama, kita akan membuat UNORDERED list. Mulailah dengan ini... <BODY> Kepribadian yang saya sukai </BODY> Kepribadian yang saya sukai Catatan - secara teknis kita belum mulai membuat daftar tersebut. Ini baru semacam judul. Tambahkan pasangan tag unordered list. <BODY> Kepribadian yang saya sukai <UL> </UL> </BODY> Kepribadian yang saya sukai Tambahkan daftarnya. <BODY> Kepribadian yang saya sukai <UL> <LI>pribadi yang jujur </UL> </BODY> Kepribadian yang saya sukai pribadi yang jujur

58 Modul : KBMI3204-Internet & WEB Desain Hal : 58 Tambahkan beberapa hal lagi... <BODY> Kepribadian yang saya sukai <UL> <LI>pribadi yang jujur <LI>rumah pribadi <LI>mobil pribadi <LI>sekretaris pribadi </UL> </BODY> Kepribadian yang saya sukai pribadi yang jujur rumah pribadi mobil pribadi sekretaris pribadi Beres! Anda sudah bisa membuat list! Bagaimana cara membuat ordered list? Gampang! Ubah tag <UL> menjadi <OL>. <BODY> Kepribadian yang saya sukai <OL> <LI>pribadi yang jujur <LI>pribadi yang ramah <LI>rumah pribadi <LI>mobil pribadi <LI>sekretaris pribadi </OL> </BODY> Kepribadian yang saya sukai 1. pribadi yang jujur 2. pribadi yang ramah 3. rumah pribadi 4. mobil pribadi 5. sekretaris pribadi

59 Modul : KBMI3204-Internet & WEB Desain Hal : 59 Salah satu jenis list yang lain adalah definition list. Program Studi Kesatuan rencana belajar sebagai pedoman penyelenggaraan pendidikan akademik dan/atau profesional yang diselenggarakan atas dasar suatu kurikulum yang ditujukan agar mahasiswa dapat menguasai pengetahuan, keterampilan, dan sikap yang sesuai dengan sasaran kurikulum. Kita mulai dengan ini... <BODY> <DL> </DL> </BODY> Kemudian tambahkan definition title... <BODY> <DL> <DT>Program Studi </DL> </BODY> Program Studi Dan penjelasannya. <BODY> <DL> <DT>Program Studi <DD>Kesatuan rencana belajar sebagai pedoman penyelenggaraan pendidikan akademik dan/atau profesional yang diselenggarakan atas dasar suatu kurikulum yang ditujukan agar mahasiswa dapat menguasai pengetahuan, keterampilan, dan sikap yang sesuai dengan sasaran kurikulum. </DL> </BODY> Program Studi Kesatuan rencana belajar sebagai pedoman penyelenggaraan pendidikan akademik dan/atau profesional yang diselenggarakan atas dasar suatu kurikulum yang ditujukan agar mahasiswa dapat menguasai pengetahuan, keterampilan, dan sikap yang sesuai dengan sasaran kurikulum. Sebagai sentuhan akhir saya akan menebalkan definition title-nya. Hal ini bukan keharusan, tapi saya pikir akan lebih bagus kalau dibuat demikian. <BODY> <DL> <DT><B>Program Studi</B> <DD>Kesatuan rencana belajar sebagai pedoman penyelenggaraan pendidikan akademik dan/atau profesional yang diselenggarakan atas dasar suatu kurikulum yang ditujukan agar mahasiswa dapat menguasai pengetahuan, keterampilan, dan sikap yang sesuai dengan sasaran kurikulum. </DL>

60 Modul : KBMI3204-Internet & WEB Desain Hal : 60 </BODY> Program Studi Kesatuan rencana belajar sebagai pedoman penyelenggaraan pendidikan akademik dan/atau profesional yang diselenggarakan atas dasar suatu kurikulum yang ditujukan agar mahasiswa dapat menguasai pengetahuan, keterampilan, dan sikap yang sesuai dengan sasaran kurikulum.

61 Modul : KBMI3204-Internet & WEB Desain Hal : 61 a. Link MODUL 13 Lanjutan Link dan Image Seperti pada pertemuan sebelumnya kita sudah membahas masalah link, pertemuan ini kita akan membahas pembuatan link tersebut yang mana hal ini sebenarnya sederhana sekali, missal kita akan membuat link ke Yahoo Mulai dengan ini... <BODY> Lihat Yahoo! </BODY> Lihat Yahoo! Kemudian tambahkan sepasang anchor tag. <BODY> Lihat <A>Yahoo!</A> </BODY> Lihat Yahoo! Tambahkan URL-nya dan selesailah sudah! URL adalah singkatan dari Universal Resource Locator. Ini adalah istilah canggih yang diciptakan oleh orang-orang komputer. Mereka memang punya kecenderungan untuk banyak melakukan hal-hal seperti ini. URL sebenarnya adalah sekedar alamat saja. <BODY> Lihat <A HREF=" </BODY> Lihat Yahoo! Mari kita coba satu lagi. <BODY> Lihat PTS Online! </BODY> Lihat PTS Online! <BODY> Lihat <A HREF=" Online!</A> </BODY>

62 Modul : KBMI3204-Internet & WEB Desain Hal : 62 Lihat PTS Online! Link untuk dibuat dengan cara yang sama. Hanya kita gunakan alamat sebagai ganti alamat web page. <BODY> Kirimi saya <A HREF="mailto:bram@tutorial.or.id">Mail!</A> </BODY> Kirimi saya Mail! b. Image Mari kita coba bahas masalah mengambil gambar dan perlu anda perhatikan folder tempat penyimpanan gambar tersebut untuk mengambil gambar ke halaman yang kita buat. Kita akan menggunakan gambar di bawah ini. Sekali lagi, klik kanan dan simpan gambar tersebut atau copykan dari folder gambar. Anda menyatakan pemakaian gambar dengan tag <IMG> (image). <BODY> <IMG> </BODY> Kita juga harus menyebutkan sumber (nama dan tempat) serta ukurannya. <BODY> <IMG SRC="chef.gif" WIDTH= 130 HEIGHT= 101 > </BODY> Perlu saya tekankan bahwa sumber tersebut tidak hanya menerangkan gambar apa yang kita maksud, tetapi juga menyatakan di mana letaknya. Gambar di atas, "chef.gif", menyatakan bahwa browser akan mencari gambar dengan nama chef.gif di folder (atau direktori) yang sama dengan dokumen html itu sendiri. Di bawah ini disajikan beberapa diagram.

63 Modul : KBMI3204-Internet & WEB Desain Hal : 63 SRC="chef.gif" berarti gambar tersebut ada di folder yang sama dengan dokumen html SRC="images/chef.gif" berarti gambar tersebut terletak satu folder di bawah (sub folder) dokumen html. Anda bisa membuat sub-sub folder sebanyak yang anda mau. SRC="../chef.gif" berarti gambar tersebut terletak satu folder di atas dokumen html. SRC="../../chef.gif" berarti gambar tersebut terletak dua folder di atas dokumen html. SRC="../images/chef.gif" berarti gambar tersebut terletak satu folder di atas kemudian satu folder ke bawah di direktori images. SRC="../../../other/images/chef.gif" Saya bahkan tidak akan mencoba mengutarakannya dalam kata-kata. Ada satu cara lagi untuk menuliskan keterangan tempat tersebut. Semua keterangan yang mengacu ke gambar dapat menggunakan URL (Uniform Resource Locator/alamat) lengkap sebagai sumbernya. Sebagai contoh: Mungkin anda bertanya-tanya, mengapa lebih baik menggunakan URL relatif (parsial) dibandingkan dengan pemakaian URL absolut (lengkap)?? Karena anda dapat merancang web site anda di hard disk anda sendiri dan semua link akan berfungsi. Sesudah anda selesaikan seluruhnya, anda tinggal meng-upload (mengcopykan ke server di internet) file-file tersebut dan semuanya juga tetap berfungsi dengan baik. Sebagai tambahan, dengan cara

64 Modul : KBMI3204-Internet & WEB Desain Hal : 64 ini lebih mudah bagi browser mencari gambar-gambar tersebut dan file anda akan lebih cepat ditampilkan. Adakah alasan untuk menggunakan URL absolut? Tentu, jika gambar tadi terletak di server yang sama sekali berbeda. Atribut IMG yang juga perlu anda perhatikan adalah ALT... <IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef"> ALT adalah teks pengganti gambar jika pengunjung anda memakai browser yang (apapun alasannya) tidak menampilkan gambar. Seseorang mungkin menggunakan browser yang hanya bisa menampilkan teks, barangkali dia mematikan fungsi tampilan gambar supaya lebih cepat atau bisa juga dia menggunakan screen reader (browser yang membacakan isi web page). Dalam kasus ini, atribut ALT bisa sangat penting bagi mereka. Ada satu hal yang sangat menarik yang harus anda tahu tentang gambar dan ukurannya. Coba ini... <BODY> <IMG SRC="chef.gif"> </BODY> Seperti anda lihat, browser bisa menentukan sendiri seberapa besar gambar tersebut. Kalau begitu untuk apa repot-repot menuliskan dimensinya? Karena jika ada dimensinya, browser dengan mudah bisa mencadangkan tempat untuk gambar tersebut kemudian menampilkan isi halaman lainnya. Jika seluruhnya sudah ditampilkan, browser dapat kembali dan mengisi tempat tadi dengan gambar yang dimaksud. Tanpa dimensi, pada saat menemukan gambar browser harus berhenti sejenak, menampilkan gambar tersebut, kemudian baru melanjutkan menampilkan sisanya. Kesimpulannya, browser berfungsi jauh lebih baik bila kita memberi dimensi pada gambar. Coba yang ini... <BODY> <IMG SRC="chef.gif" WIDTH= 300 HEIGHT= 101 > </BODY> <BODY> <IMG SRC="chef.gif" WIDTH= 40 HEIGHT= 200 > </BODY>

65 Modul : KBMI3204-Internet & WEB Desain Hal : 65 Anda bisa menyatakan berapapun dimensinya sesuai keinginan anda dan mengabaikan ukuran aslinya. Masih tidak tahu di mana menariknya? Baiklah, coba lihat titik merah kecil ini -> Titik merah ini berukuran 1x1. Sangat kecil memang, tapi lihat apa yang bisa saya lakukan dengan itu... <BODY> <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH= 500 HEIGHT= 1 > <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH= 500 HEIGHT= 2 > <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH= 500 HEIGHT= 8 > <P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH= 2 HEIGHT= 200 > </BODY> NB : Pastikan semua gambar yang akan kita panggil sudah ada dan tau dimana letak foldernya.