BAGIAN 1 : PENDAHULUAN

Transkripsi

1 BAGIAN 1 : PENDAHULUAN INTERNET Internet berasal dari kata interconnection networking yang mempunyai arti hubungan berbagai komputer dengan berbagai tipe yang membentuk sistem jaringan yang mencakup seluruh dunia (jaringan komputer global) dengan melalui jalur telekomunikasi seperti telepon, wireles, dan sebagainya. Jaringan komputer ini diintegrasikan oleh protokol-protokol yang umum disebut TCP/IP. TCP (Transmission Control Protocol) memastikan bahwa semua hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) mentransmisikan data dari satu komputer ke komputer lain. TCP/IP secara umum berfungsi untuk memilih rute terbaik transmisi data, memilih rute alternatif jika suatu rute tidak dapat digunakan, mengatur dan mengirimkan paket-paket data, dan lain-lain. Untuk dapat menggunakan fasilitas internet, biasanya Anda harus berlangganan ke salah satu ISP (Internet Service Provider). Dengan memanfaatkan internet, pemakai komputer di seluruh dunia dimungkinkan untuk mencari berbagai informasi yang dibutuhkan, memakai data bersama-sama, berkomunikasi dengan cara saling kirim atau menggunakan fasilitas chatting, membahas topik tertentu pada news group, dan lain-lain. WEB SERVER DAN WEB BROWSER WWW (World Wide Web) merupakan jaringan beribu-ribu komputer yang dikategorikan menjadi dua: client dan server dengan menggunakan software khusus membentuk sebuah jaringan yang disebut jaringan client-server. Dalam cara kerja WWW ada dua hal yang terpenting yaitu software web server dan software web browser. Web server menyimpan/menyediakan informasi dan memproses permintaan dari client, apabila ada client yang meminta informasi maka server mengirimkannya. Informasi yang diakses dapat berupa teks, gambar, suara, maupun animasi. Server juga mengirimkan perintah-perintah ke client bagaimana cara menampilkan semua informasi tersebut dalam bentuk HTML (Hypertext Markup Language). Client membuat permintaan informasi dan kemudian menangani pengaksesan informasi kepada end user. Web browser merupakan suatu software yang dirancang untuk mengambil informasiinformasi dari suatu server komputer pada jaringan internet. Software web browser ini juga biasa disebut dengan browser saja. Beberapa contoh browser yang banyak digunakan antara lain: 1 Internet Explorer dari Microsoft Corporation 2 Netscape Navigator dari Netscape Communication 3 OPERA dari Opera Software ASA 4 Mosaic buatan NCSA 5 Lynx, browser teks pada sistem Unix WEBSITE Website (situs web) merupakan alamat URL (Uniform Resource Locator) yang berfungsi sebagai tempat penyimpanan data dan informasi dengan topik tertentu. Suatu situs web terdiri atas: 1 Web page (halaman web), merupakan halaman khusus dari website tertentu yang tersimpan dalam bentuk file. Dalam web page tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lain baik dalam web page yang sama maupun web page yang lain pada website yang berbeda. 2 Homepage (halaman utama) merupakan halaman pertama atau sampul dari suatu website yang biasanya digunakan untuk memberikan informasi singkat mengenai isi dari website tersebut dan siapa pemiliknya.

2 Website yang ada di internet dapat dikategorikan menjadi: 1 Web statis, yaitu web berisi/menampilkan informasi-informasi yang sifatnya statis (tetap). 2 Web dinamis dan interaktif, merupakan web yang dapat menampilkan informasi secara dinamis dan up-to-date serta dapat melakukan interaksi dengan user. Agar dapat memberikan informasi yang relevan, website dinamis biasanya terhubung dengan database sehingga informasi yang ditampilkan pada website sesuai dengan data yang ada pada database. Untuk membuat website yang bersifat dinamis dan interaktif diperlukan bahasa pemrograman khusus. PEMROGRAMAN WEB Teknologi pemrograman web dibedakan menjadi dua: 1 Client-side programming. Client-side programming merupakan teknik pemrograman web dimana perintah program dijalankan di web browser, sehingga ketika client meminta dokumen yang mengandung script, maka script tersebut akan didownload dari servernya kemudian dieksekusi pada browser yang bersangkutan. Pemrograman web yang tergolong client-side programming: JavaScript, VbScript, HTML. 2 Server-side programming. Pada server-side programming, perintah-perintah program (script) terlebih dahulu dieksekusi di web server, kemudian hasilnya dikirimkan ke browser dalam bentuk HTML biasa. Pemrograman web yang tergolong server-side programming: CGI/Perl, ASP, JSP, PHP, ColdFussion, dan sebagainya.

3 BAGIAN 2 : HTML (HYPERTEXT MARKUP LANGUAGE) HTML (hypertext markup language) merupakan suatu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu platform tertentu. Dokumen HTML adalah suatu dokumen teks biasa dan disebut markup language karena menggunakan tanda-tanda tertentu yang disebut tag untuk mengatur bagaimana suatu dokumen ditampilkan pada browser. Pada mulanya HTML didesain untuk menjadi sebuah bahasa yang menggambarkan suatu struktur dokumen yang tidak terikat pada perangkat keras dan perangkat lunak tertentu. Tetapi dalam penggunaannya, HTML menjadi semacam bahasa untuk mengatur format tampilan dokumen saja. HTML dirasakan sangat terbatas untuk mendukung pembuatan aplikasi-aplikasi rumit pada website. Untuk membuat program aplikasi yang berjalan di atas web, Anda harus terlebih dahulu menguasai HTML. Saat ini telah banyak terdapat paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG (what you see is what you get) seperti Microsoft FrontPage, Macromedia DreamWeaver, Netscape Composer dan sebagainya, yang memudahkan Anda untuk merancang suatu halaman web tanpa harus menguasai tag-tag HTML. Akan tetapi untuk menjadikan halaman web Anda lebih dinamis dan lebih interaktif, penguasaan terhadap terhadap tag-tag HTML akan sangat diperlukan. Untuk membuat situs web yang dinamis dan interaktif, tidak cukup dengan mengandalkan HTML saja, terlebih lagi dalam membangun suatu web database. Anda akan melibatkan bahasa scripting seperti PHP, ASP, JavaScript, dan sebagainya. Dalam bahasa scripting, script diletakkan di antara tag-tag HTML, sehingga tanpa penguasaan terhadap tag-tag HTML tentu saja Anda tidak akan tahu dimana akan meletakkan suatu script di dalam suatu dokumen HTML. Sebaliknya banyak tag HTML yang dimasukkan di dalam suatu script, misalnya untuk pindah baris, membuat tabel, memasukkan gambar, link, dan untuk keperluan lainnya. Tentu saja Anda harus mengetahui tag apa saja yang diperlukan untuk keperluan tersebut. STRUKTUR 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. Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser sesuai keinginan. Hal tersebut dapat dilakukan dengan menambahkan elemen atau sering disebut sebagai tag. Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap tag ditandai dengan simbol < dan >. Pasangan dari sebuah tag ditandai dengan simbol /. Misalnya pasangan dari tag <contoh> adalah </contoh>. Dalam hal ini <contoh> disebut 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 tidak bersifat case sensitive, artinya penggunaan huruf kecil ataupun kapital tidak menjadi masalah. Script HTML dapat dituliskan dalam text editor seperti Notepad, kemudian disimpan dengan ekstensi.htm atau.html. Untuk mengeksekusi file HTML dapat dilakukan dengan menggunakan browser seperti Internet Explorer atau Netscape Navigator melalui menu File Open, kemudian browse ke lokasi dan nama file dimana file HTML disimpan.

4 Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut: <title>berisi teks yang akan muncul pada title bar browser</title> <body> berisi teks, gambar, atau apapun yang ingin ditampilkan pada halaman web ada pada bagian ini. Seperti terlihat, struktur file HTML diawali dengan sebuah tag dan ditutup dengan tag. Di dalam tag ini terdapat dua bagian besar, yaitu bagian yang diapit oleh tag... dan tag <body>... Bagian yang diapit oleh tag... merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title>...</title> yang berfungsi untuk menampilkan judul pada title bar window web browser dan tag lain misalnya <meta>. Bagian 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 kepada pengguna nantinya. KODE WARNA Sebelum mempelajari lebih jauh tentang tag-tag HTML alangkah baiknya terlebih mengetahui kode warna yang akan sering digunakan dalam penulisan tag-tag HTML. Pengaturan warna untuk halaman HTML menggunakan kode warna RGB (red, green, blue) yang mana setiap warna ditampilkan dalam dua digit 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, dan seterusnya. Berikut ini adalah contoh beberapa kode warna standar: Warna Heksa Warna Heksa Aqua = Cyan (biru air) #00FFFF Maroon (merah tua) # Aquamarine (biru kehijauan) #70DB93 Navy (biru gelap) # Black (hitam) # Olive (hijau kekuningan) # Blue (biru) #0000FF Orange #FF7F00 Brass (kuning tua) #B5A642 Pink (merah muda) #FF6EC7 Chocolate (cokelat) #5C3317 Purple (ungu) # Copper (keunguan) #B87333 Red (merah) #FF0000 Fuchsia (merah keunguan) #FF00FF Silver (perak) #C0C0C0 Gray (abu-abu) # Teal (biru kehijauan) # Green (hijau) #00FF00 Violet #9F5F9F Lime (hijau terang) #00FF00 White (putih) #FFFFFF Magenta #FF00FF Yellow (kuning) #FFFF00 BAGIAN HEAD Bagian head tidak harus ada pada sebuah dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Bagian ini menyimpan informasi yang berguna mengenai dokumen. Isi bagian head tidak ditampilkan ketika dokumen HTML diakses melalui browser, kecuali bagian title yang merupakan judul dokumen. Elemenelemen yang terdapat pada bagian head antara lain:

5 Tag <title> Tag ini digunakan untuk memberi judul dokumen. Judul dokumen sebaiknya tidak terlalu panjang, tetapi mampu mencerminkan isi dari dokumen. <title>judul dokumen</title> Tag <base> Tag ini berfungsi untuk menentukan basis URL sebuah dokumen. Basis URL ini berguna bila dalam dokumen tersebut terdapat link-link yang bersifat relatif, agar link tersebut tetap bekerja meskipun dokumen dipindahkan ke direktori lain atu ke komputer lain. Elemen <base> mempunyai sebuah atribut, yaitu href yang menunjukkan sebuah alamat URL. <base href= > Tag <link> Tag ini berfungsi untuk menunjukkan relasi antar dokumen HTML. Penggunaanya: <link rev= made Tag <meta> Tag ini sangat berguna untuk memberikan deskripsi mengenai suatu dokumen HTML, seperti refresh, description, author (pengarang), keyword (kata kunci), dan lain-lain. Properti description dan keyword merupakan properti yang penting dan dijadikan referensi bagi kebanyakan program search engine yang ada di internet untuk menemukan suatu situs. <meta name= keywords content= asyik, lucu,humor > BAGIAN BODY Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link, dan lain-lain. Atribut elemen body background bgcolor text link vlink alink bgproperties topmargin leftmargin = lokasi dan nama file latar belakang image dokumen = warna latar belakang dokumen, default putih = warna teks dokumen, default hitam = warna link dokumen, default biru = warna visited link dokumen, default ungu = warna active link dokumen, default merah = [fixed none] (mengatur properti gambar latar belakang) = batas atas dokumen (pixel) = batas kiri dokumen (pixel) PENGATURAN FORMAT DOKUMEN HTML Heading <hn> Tag heading <hn> berfungsi untuk memformat heading (judul dan sub-judul) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada enam buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>. Latihan01.html <title>latihan-1: Heading</title> <body bgcolor=# text=#ffff00>

6 <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>peralatan Kantor</h3> <h4>meja, Kursi, File manager, Dll.</h4> Paragraph <p> Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web Anda. Untuk mengatur perataan paragraf, digunakan atribut: align=[ left center right], sebagai defaultnya adalah left Break <br> Tag break <br> berfungsi untuk memberikan baris baru dalam halaman web Anda. Walaupun dalam pengetikan pada text editor terdapat perpindahan baris, namun browser akan membacanya sebagai satu baris apabila tidak terdapat tag <br>.tag break tidak memerlukan tag penutup </br> Horizontal Rule <hr> Tag horizontal rule <hr> berfungsi untuk menampilkan garis horisontal di halaman web Anda. Tag ini sekaligus akan membuat baris baru. Tag <hr> tidak memerlukan elemen penutup </hr>. Atribut elemen horizontal rule align = [ left center right ] (perataan horisontal, default center) size = tebal garis, pixel, default 2 width = lebar garis, pixel atau persen, default 100%) color = warna garis batas noshade (garis solid) Latihan02.html <title>latihan-2: Paragraf dan Break</title> <body bgcolor=# 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> <h3>buku-buku Pelajaran</h3> <p>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p> <h3>peralatan Kantor</h3> <p>meja<br>kursi<br>file manager<br>dll.</p>

7 Preformatted <pre> Tag <pre> digunakan untuk membuat tampilan dokumen pada browser sama dengan tampilan pada text editor (preformatted). Dengan menggunakan tag <pre> maka tag <p> dan tag <br> tidak diperlukan lagi. Latihan03.html <title>latihan-3: Penggunaan Tag PRE</title> <body bgcolor=#ffffcc> Tag pre dapat digunakan untuk membuat tampilan seperti ini: <pre> Tabel Mahasiswa: ====================================================== Id Nama Mahasiswa No. Mhs Jurusan Sem. ====================================================== 1 Budi S Teknik 4 2 Yulia Prastica Manajemen 4 3 Andi Mulyana Manajemen 6 4 Leni Susanti Teknik 8 ====================================================== Script program: for($id = 1; $id <= 4; $id++) { if($nama!= ) print($nama); else print( Kosong ); } </pre> PEMFORMATAN KARAKTER Font pada halaman HTML dapat diformat sesuai dengan desain yang Anda tentukan, baik ukuran, jenis maupun warna dengan menggunakan tag <font>. Atribut elemen font size = ukuran huruf, default 3 color face = warna huruf, default black = nama_huruf Elemen ragam karakter <b> teks bold </b> <i> teks italic </i> <u> teks underline </u> : menghasilkan teks tebal (bold) : menghasilkan teks miring (italic) : menghasilkan teks bergaris bawah (underline)

8 Latihan04.html <title>latihan-4: Format Karakter</title> <body bgcolor=# text=#ffffff> <h1 align=center> <font color=#ffff00 face=arial>toko BUKU SERBA MURAH</font></h1> <hr width=360 align=center> <font size=5><b>toko kami menyediakan</b></font> <p align=left><font color=red><b><u>alat Tulis</u></b></font></p> <p align=left><i>pensil<br>ballpoint<br>penggaris<br>dll.</i></p> <p align=center> <font color=cyan><b><u>buku-buku Pelajaran</u></b></font></p> <p align=center> <u><i>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</i></u></p> <p align=right> <font color=lightgreen><b><u>peralatan Kantor</u></b></font></p> <p align=right> <b><u><i>meja<br>kursi<br>file manager<br>dll.</i></u></b></p> ELEMEN LIST Properti <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 <ol type=tipe_list> type = [ 1 a A i I ] (tipe penomoran, default 1) Unordered list <ul type=tipe_list> type = [ disc square circle ] (tipe bullet, default disc) Latihan05.html <title>latihan-5: Menggunakan List</title> <body bgcolor=# 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>kimiya <li>biyologi </ul> <li>ilmu bumi

9 <li>sejarah <li>dll. </ol> <h2>peralatan Kantor</h2> <ol type=i> <li>meja <li>kursi <ul type=square> <li>kursi lipat <li>kursi plastik <li>kursi-kursian </ul> <li>file manager <li>dll. </ol>