1 - Universitas Dian Nuswantoro
advertisement
Modul Pemrogram Web Dasar - Universitas Dian Nuswantoro Semarang BAB 2 Tujuan Instruksional Umum Mahasiswa dapat mengerti Pengenalan HTML. Tujuan Instruksional Khusus Mahasiswa dapat mengerti teori dasar HTML. Mahasiswa dapat mengerti dasar–dasar tag. Mahasiswa dapat mengerti tentang komentar. Mahasiswa dapat mengerti penggunaan tag <P>. Mahasiswa dapat mengerti penggunaan tag <BR>. Mahasiswa dapat mengerti penggunaan tag judul. Mahasiswa dapat mengerti penggunaan tag <CENTER>. Mahasiswa dapat mengerti penggunaan tag <HR>. Mahasiswa dapat mengerti penggunaan tag <PRE>. Mahasiswa dapat mengerti mengatur teks secara fisik. Mahasiswa dapat mengerti penggunaan list & warna. Mahasiswa dapat mengerti karakter khusus dalam HTML. Pengenalan HTML 2.1 Teori Dasar HTML Untuk membangun sebuah web page dibutuhkan sebuah bahasa pemrograman yang lebih dikenal dengan sebutan web scripting. Dikatakan script karena perintah kode program tersebut akan di–interpreter dan tidak ada kompilasi untuk menjadikannya executable. Berdasarkan letak proses interpreter maka web scripting dibagi menjadi dua kategori, yaitu yang bersifat client side dan server side. Client side dilakukan oleh web browser seperti Internet Explorer, Netscape, Opera, dan Firefox. Untuk contoh bahasa client side adalah HTML, CSS, Javascript, VBscript, dan XML. Sedangkan server side dilakukan oleh web server seperti PWS (Personal Web Server untuk Sistem Operasi Windows 98), IIS (untuk Sistem Operasi Windows 2000/Windows XP), Apache, Tomcat, Xitami, dan ZOPE. Untuk contoh bahasa server side adalah ASP (.Net), PHP, JSP, CFM, dan CGI/PL. 8 Modul Pemrogram Web Dasar - Universitas Dian Nuswantoro Semarang Web scripting yang bersifat client side akan menghasilkan web page yang statis artinya lebih menekankan pada desain format tampilan informasi dan informasi yang disajikan tidak dapat di–update seketika, karena tidak dapat dilakukan request interaktif dari pengguna dan proses tidak terjadi di server sehingga tidak akan menghasilkan output apa pun. Sehingga sangatlah tidak mungkin untuk menciptakan aplikasi web yang bersifat dinamis dengan web scripting bersifat client side ini, tetapi harus dikombinasikan juga dengan web scripting yang bersifat server side. HTML (Hypertext Markup Language) adalah bahasa dasar untuk web scripting bersifat client side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia dan juga untuk menghubungkan antar tampilan web page (hyperlink). Tidak diperlukan suatu program editor khusus untuk menggunakan kode perintah–perintah HTML. Anda dapat mempergunakan Notepad, Edit Plus, ataupun editor lainnya yang berbasis GUI (Graphical User Interface) seperti Microsoft Frontpage, Macromedia Dreamweaver, Adobe GoLive dan sebagainya (dengan program–program ini Anda tidak perlu mengetik kode HTMLnya, semua perintahnya di wujudkan secara icon base). Tetapi bagi seorang pengembang aplikasi web maka kemampuan penguasaan terhadap kode– kode HTML sangat diperlukan, sehingga sangatlah disarankan untuk menguasai kode perintah HTML pergunakanlah editor teks (misalnya Notepad). 2.2 Dasar–dasar Tag Aturan penulisan HTML ini sebagai berikut: 1. Memiliki struktur minimal dari dokumen HTML adalah: <HTML> <HEAD> <TITLE> Judul Web Page </TITLE> </HEAD> <BODY> Isi Dokumen </BODY> </HTML> 2. Bentuk penulisan seperti di atas disebut TAG. Tag memiliki pembuka <TAG>, tetapi tidak semua tag punya penutup </TAG>, tag memberi instruksi interpreter kepada browser (misalnya Internet Explorer). Contoh pada dokumen di atas, tag yang pertama memberitahukan kepada browser bahwa dokumen tersebut adalah dokumen HTML dengan tag <HTML> </HTML> di awal dan di akhir dokumen. Dalam dokumen HTML penggunaan tag–tag penutup HTML disesuaikan dengan urutan penggunaan tag tersebut. 3. Di dalam sebuah tag HTML terdapat atribut tag. Atribut yang terkandung dalam tag satu dengan yang lainnya belum tentu sama. Atribut yang dipakai tidak memiliki urutan pendefinisian tertentu. Atribut tag digunakan untuk memodifikasi sifat–sifat dari tag, bergantung dari nilai yang diberikan. Namun, juga ada atribut tag yang tidak memiliki nilai. 9 Modul Pemrogram Web Dasar - Universitas Dian Nuswantoro Semarang 4. Penulisan TAG bersifat non case–sensitive, yang artinya bahwa penulisan tag huruf besar dan atau huruf kecil akan dianggap sama. Sebagai contoh <HTML> akan sama dengan <html> atau <HtMl>. 5. Setelah tanda “<” harus langsung diikuti oleh nama TAG dan ditutup tanda “>” tidak boleh ada spasi, angka, tanda baca, dan nama TAG tidak dapat dibuat sendiri. Nama TAG harus mengikuti standar W3C, yaitu sebuah lembaga atau organisasi internasional yang mengatur standarisasi web (http://www.w3c.org). 6. Dalam dokumen HTML diperlukan tag <HEAD> </HEAD>, dalam tag ini diletakan judul web page dengan menggunakan tag <TITLE> judul web page </TITLE>, sedangkan di dalam tag <BODY> </BODY> berisikan isi dari web page Anda. Untuk ekstensi dari file HTML perlu ditambahkan .html atau .htm di belakang nama file–nya (misalnya: coba.htm). 7. Penulisan tag–tag HTML tidak akan terpengaruh oleh perintah langsung keyboard seperti penekanan tombol enter atau spasi, sehingga diperbolehkan menyusun tag–tag HTML secara countinue horizontal seperti berikut ini: <HTML> <HEAD> <TITLE> Judul Web page </TITLE> </HEAD> ... dan seterusnya. 2.3 Komentar Seperti dalam bahasa pemrograman yang lainnya, HTML juga memiliki komentar yang diatur oleh tanda <!-- sebagai pembuka dan tanda --> untuk penutup. Komentar tidak akan di–interpreter oleh web browser, hanya menjadi keterangan saja. 2.4 Menggunakan Tag <P> Untuk memformat paragraf agar dapat rata kiri, kanan, tengah dan justify digunakan tag pembuka <P align=”...”> dan penutup </P>, isi dari atribut “align” adalah left untuk rata kiri, right untuk rata kanan, center untuk rata tengah dan justify untuk rata kiri dan kanan. Antara paragraf dalam HTML akan dibatasi secara otomatis oleh sebuah jeda baris. 2.5 Menggunakan Tag <BR> Tag <BR> ini digunakan untuk berpindah ke baris baru dalam isi dokumen. Ini adalah salah satu tag HTML yang tidak memiliki tag penutup. 2.6 Menggunakan Tag Judul HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag – tag judul ini berupa : <H1> … </H1> <H2> … </H2> <H3> … </H3> <H4> … </H4> <H5> … </H5> <H6> … </H6> 10 Modul Pemrogram Web Dasar - Universitas Dian Nuswantoro Semarang Tampilan : 2.7 Menggunakan Tag <CENTER> Untuk menengahkan suatu teks, kita juga bisa menggunakan tag <CENTER>. Tentu saja untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak ditengahkan) kita perlu menyertakan </CENTER>. 2.8 Menggunakan Tag <HR> Tag yang digunakan untuk membuat garis horizontal adalah <HR>, adapun atribut yang dimiliki adalah “align” untuk perataan, “size” untuk mengatur ketebalan garisnya (dalam pixel), dan “width” untuk mengatur lebar garisnya (dalam pixel atau persen). Penggunaan satuan persen memiliki arti bahwa ukuran garis horizontal akan diambil persentase terhadap width dari tampilan jendelanya. Tag HR ini juga tidak memiliki tag penutup. 2.9 Menggunakan Tag <PRE> Untuk memformat dokumen HTML dengan menggunakan fasilitas Preformat. Dengan fasilitas ini tampilan yang akan diformat sama persis dengan isi yang ada di dalam tag <PRE> isi </PRE>. Di dalam tag <PRE> tombol enter untuk ganti baris atau spasi untuk jeda dapat digunakan. 2.10 Mengatur Teks Secara Fisik Berikut adalah cara memberikan efek cetak huruf dalam dokumen HTML. 1. Untuk memberikan efek huruf tebal (bold) : <b> cetak tebal </b> 2. Untuk memberikan efek huruf miring (italic) : <i> cetak miring </i> 3. Untuk memberikan efek huruf yang diberi garis bawah (underline) : <u> garis bawah </u> 4. Untuk memberikan efek huruf sebagai subscript (X2) : <sub> cetak subscript </sub> 5. Untuk memberikan efek huruf sebagai superscript (X2) : <sup>cetak superscript</sup> 6. Untuk memberikan efek huruf yang dicoret (strike) : <s> cetak stripe </s> 11 Modul Pemrogram Web Dasar - Universitas Dian Nuswantoro Semarang 2.11 Menggunakan List Dalam dokumen HTML dapat menampilkan daftar list seperti Bullet & Numbering pada aplikasi program Microsoft Word. Ada dua macam list, yaitu UnorderList (mirip Bullets) dan OrderedList (mirip Numbering). Pada Unorderlist digunakan tag <UL> sebagai pembuka dan tag </UL> sebagai tag penutup, untuk item–item list yang ada di dalamnya digunakan tag <LI> untuk mengawalinya. Unordered List mempunyai atribut “type” yaitu bentuk dari bullet–nya, ada beberapa jenis tipe yaitu disc (default) untuk lingkaran tidak berlubang, circle untuk bentuk lingkaran berlubang, square untuk kotak. Ordered List juga memiliki atribut tipe untuk menentukan tipe penomorannya, tipe–tipenya adalah : 1 untuk penomoran 1, 2, 3,.... A untuk penomoran A, B, C..... I untuk penomoran I, II, III...... a untuk penomoran a, b, c........ i untuk penomoran i, ii, iii........ Bila Anda tidak mendefinisikan tipenya, maka secara default Ordered List akan memberikan penomoran angka (1,2,3,....). 2.12 Menggunakan Warna Dalam HTML nilai warna yang dapat diberikan pada atribut bgcolor adalah dengan mengunakan aturan komposisi RGB (Red–Green–Blue) dengan angka hexadecimal maksimal adalah FF (setara dengan 255 decimal) tiap komposisinya. Sebagai contoh bila diinginkan untuk memberikan warna merah (red) maka nilainya adalah “#FF0000”, warna hijau (green) nilainya adalah “#00FF00” dan warna biru (blue) nilainya adalah “#0000FF”. Atau dapat juga menggunakan pre– define color seperti red, green, blue, yellow, cyan, magenta, aqua, maroon, lime, navy, fuschia dan sebagainya. Adapun untuk nilai atribut background adalah nama file gambar lengkap dengan lokasi folder dan ekstensi file–nya. Format file gambar yang didukung oleh HTML antara lain adalah JPEG, PNG, dan GIF. 2.13 Karakter Khusus dalam HTML Dikarenakan penulisan tag HTML telah menggunakan tanda < dan > maka tanda tersebut tidak dapat dipakai dalam isi dokumen HTML. Sebagai gantinya maka penggunaan tanda < digunakan perintah &lt dan > digunakan perintah &gt. Beberapa perintah khusus yang dapat digunakan dalam HTML antara lain : Tanda kutip (“) menggunakan &quot Tanda ampersand (&) menggunakan &amp Tanda kali (x) menggunakan &times Tanda bagi (÷) menggunakan &divide 12 Modul Pemrogram Web Dasar - Universitas Dian Nuswantoro Semarang <body bgcolor=”yellow “> <H1 align=”center”>data diri</h1> <br> <hr color=”blue”> <br> <h2>NIM : A12.2009.0001</h2> <br> <h5>Nama : Slamet </h5> <br> <FONT FACE="VERDANA" COLOR="#00FF00" size=”25”> Hoby </font> </body> Dinus.net/~a1209xxxxxx/matrikulasi/latih1.html DATA DIRI NIM NAMA ALAMAT KOTA HOBY Kelompok : SSI-02 <marquee behavior="alternate">Data Diri</marquee> <body> <h1 ALIGN="CENTER">DAFTAR MENU</h1> <FONT FACE="VERDANA" COLOR="#00FF00" SIZE="4"><br> <b><u>AUDIO</B></u> <OL> <LI>dvd</LI> <LI>vcd</LI> </OL> <i><b><u>VIDEO</B></u><i> <ul> <li>TV</li> <li>Sound</li> </ul> </body> 13 Modul Pemrogram Web Dasar - Universitas Dian Nuswantoro Semarang <body bgcolor=”red”> <body background=”..\data\anak.jpg”> <body background="039.jpg"> <font size="+6" color="#CCCC00"><center>SAYA</center></font> <table> <TR> <TD style=" ">SSSSS</TD> </TR> </table> </body> Link <a href="http://www.google.co.id">komentar</a> <a href="lat1.html">komentar</a> <a href="../lat1.html">komentar</a> Gambar <img src="file:///C|/AppServ/www/WEB/039.jpg" /> Gambar diliank <a href=”lat1.html><img src="file:///C|/AppServ/www/WEB/039.jpg" /></a> 14