modul 1 pmrg 2
TRANSCRIPT
MODUL 1 PENGENALAN 1. Pengenalan Pemrograman Internet / Web Pemrograman yang dalam bahasa English adalah programming dan diartikan proses, cara, perbuatan program (secara bahasa indonesia). Internet sebuah jaringan komputer yang sangat besar (meliputi seluruh dunia). jaringan besar yang menghubungkanjaringan-jaringan kecil menggunakan protokol transmisiberbasis TCP/IP. Di bawah ini adalah gambar contoh jaringan internet :
Pemrograman internet adalah jenis pemrograman yang menerapkan arsitektur sistem terdistribusi dan menggunakan jaringan internet sebagai media komunikasi. Pemrograman web diambil dari 2 suku kata yaitu pemrograman dan web Definisi Web : jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi melalui protokol transfer hypertext. Contoh : (http://www.artikata.com/arti-201588-web.php).
Orang banyak mengenal web dengan istilah WWW (world wide web), World Wide Web adalah layanan internet yang paling populer saat ini internet mulai dikenal dan digunakan secara luas setelah adanya layanan WWW . WWW adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi . WWW berjalan dengan protokol HyperText Transfer Protokol (HTTP). Halaman Web merupakan file teks murni (plain text) yang berisi sintaks-sintaks HTML yang dapat dibuka/dilihat/diterjemahkan dengan Internet Browser . 2. Macam-macam Web Browser Informasi yang ada di web ditampilkan melalui Web Pages. Web Pages disimpan disuatu komputer yang bisa disebut sebagai Web Server. Kita dapat mengakses Web Pages tersebut melalui sebuah program yang disebut Web Browser. Web Browser yang terkenal antara lain :
Mozilla Firefox
Opera 10.0 RC (Build 1733)
Google Chrome 2.0.172.43 / Google Chrome 4.0.203.2 Beta
Internet Explorer 8.
Web Browser ini dapat mengakses Web Pages melalui suatu alamat tertentu atau yang biasa kita sebut dengan URL (Uniform Resources Locator). Contoh alamat URL : http://www.someone.com/page.html. Semua Web Pages memiliki suatu instruksi-instruksi tertentu untuk tampilan. Ketika Web Browser akan menampilkan Web Pages maka Web Browser tadi akan membaca instruksi-instruksi tampilan yang dimiliki oleh Web Pages. Instruksi tampilan yang paling standar adalah HTML. Interface Web Browser Umumnya web Browser mempunyai tombol tombol berikut : 1. Back : Kembali Satu halaman sebelumnya
2. Forward : Maju satu halaman
3. Refresh atau biasa disebut reload, digunakan untuk mengulang akses terhadap
halaman yang dituju.
4. Stop : Menghentikan akses terhadap halaman tersebut
5. Home : kembali ke home pemakai
6. Address Bar : untuk menginputkan alamat URI ( Uniform Resource identifier )
7. Status bar : Menunjukan loading saat mengakses sebuah halaman dan juga menunjukan URI ketika sebuah mouse di letakan disekitar link
MODUL 5 BAHASA SCRIPT Bahasa scripting (biasa disebut bahasa pemrograman scripting atau bahasa script) adalah bahasa pemrograman komputer yang diterjemahkan secara khas dan dapat diketik langsung dari keyboard. Dengan begitu, script sering dibedakan dari program, karena program akan dikonversi secara permanen ke dalam file executable basis biner (yaitu, nol dan satu) sebelum mereka dijalankan. Script tetap dalam bentuk aslinya dan menterjemahkan intruksi demi intruksi oleh setiap kali dijalankan. Script diciptakan untuk mempersingkat proses kompilasi hingga dijalankan. Contoh dari bahasa script adalah JavaScript, Ruby, Lua, dan PHP. Perbedaan Script dan Bahasa Pemrogaman 1. Pada dasarnya, Script lebih sederhana daripada bahasa pemrograman. Namun pada perkembangannya, bahasa scripting pun sekarang sudah cukup kompleks.
2. Untuk menterjemahkan Script (me-run) tidak perlu suatu kompiler khusus yang komplit, sedangkan bahasa pemrograman membutuhkan suatu kompiler khusus untuk me-run program tersebut. Kompiler sebuah Script biasa hanyalah sebuah modul (semacam plug-in) pada sisi pemroses Script; dalam hal ini aplikasi server web seperti apache.
3. Dalam kasus halaman web, Script diakses melalui browser di internet, sedangkan bahasa pemrograman diakses dengan membuka file/program aplikasinya. Dilihat dari prosesor mana yang mengeksekusi Script, penulisan Script pada dasarnya dibagi menjadi dua, yakni client-side scripting dan server side scripting. Client-Side Scripting
Client-side scripting melibatkan blok skrip tambahan untuk ditambahkan di file HTML. Dalam hal ini server web tidak akan memperlakukan skrip lain dari tag-tag lain yang sudah ada di halaman HTML, sebaliknya browser-lah yang akan menerjemahkan mereka padakomputer user. Karena itu, scripting jenis ini disebut client-side, yang bekerja di komputer user, bukan di server.
Kelebihan client-side scripting:
Tidak diperlukan server khusus untuk menjalankan skrip.
Tidak membebani kerja server web, terutama di server web dengan traffic tinggi. Kekurangan client-side scripting: Harus didukung oleh browser pihak klien (walaupun secara umum hampir bisa dibilang semua browser mendukung bahasa-bahasa skrip seperti JavaScript atau VBScript,
Kode skrip menjadi terlihat oleh user (visible) dan dapat ditiru. Namun demikian, di era open source seperti sekarang ini kebanyakan skrip memang hasil cut & paste.
Contoh bahasa client-side script: JavaScript - JavaScript secara umum didukung oleh dua browser populer, yakni Microsoft Internet Explorer dan Netscape Navigator, hanya saja mereka mendukung dengan caranya masing-masing, tetapi kebanyakan script JavaScript dapat berjalan di kedua browser ini. Demikian pula pada browser lain seperti Opera atau FireFox. Pada tahun 1997 terbentuk TheEuropean Computer Manufacturers Association sebagai penyedia standar untuk JavaScript. Netscape baru-baru ini mengumumkan keluarnya JavaScript versi 1.3. VBScript - Kebanyakan VBScript hanya didukung oleh Microsoft Internet Explorer. Tersedia plug-in untuk memungkinkan klien menggunakan VBScript di Netscape Navigator, tapi plug-in ini tidak gratis. Server-Side Scripting Server-side scripting mengunakan script yang dijalankan di server web, hasilnya saja yang dikirim ke browser pada sisi klien. Kelebihan server-side scripting: Karena script berjalan di server, Anda tahu pasti apa yang dapat Anda lakukan dengan script tersebut dan software apa yang tersedia,
Jika script Anda menghasilkan output dalam bentuk HTML yang baku, hampir semua browser akan dapat melihatnya. Kekurangan server-side scripting:
Menambah beban kerja Server,
Anda harus punya akses/permission khusus untuk menggunakan server-side scripting
Beberapa contoh server-side script antara lain: CGI - CGI ini boleh dibilang teknologi klasik (tertua di Web), untuk melakukan fungsi-fungsi server-side. Kebanyakan program CGI menggunakan Perl, bahasa scripting yang cocok untuk scripting di Web. Walaupun sebenarnya anda dapat menulis program CGI hampir dengan semua bahasa, termasuk C++, Python, dan Java. Tapi, tanpa perencanaan yang hati-hati, CGI dapat membuka lubang keamanan (security hole) di server Anda, dan biasanya program CGI susah di-debug, dan susah dipelajari dan dipraktekkan terutama bagi web designer yang bekerja di platform non-*NIX. Server-Side Java, JavaScript, dan VBScript -Microsoft IIS server dapat menerjemahkan Java, JavaScript, dan VBScript di server (juga untuk PerlScript). Sever Netscape juga mendukung Java dan Javascript untuk dijalankan di Server. ASP - Andalan Microsoft untuk teknologi Scripting Web, terutama didukung oleh Microsoft IIS Server. ASP ini sebenarnya VBScript yang berjalan di sisi server. PHP - Bahasa scripting yang baru-barui ini menjadi populer. PHP kadang dikelompokkan dengan sistem operasi Linux dan Web Server Apache, karena sifatnya yang open source dan gratis.
Cold-Fusion - Dikeluarkan oleh Allaire, Cold-Fusion mulai meningkat kepopulerannya terutama dengan kemampuan pengembangan di lingkungan development Visual (ColdFusion Studio) yang ditawarkan. Miva - Dulu dikenal dengan HTMLScript, mirip dengan PHP, tapi ditawarkan secara komersial. Servlets - Servlets sedang meningkat popularitasnya untuk menulis Java Objects yang meningkatkan fungsi server. Sifat Java yang berorientasi obyek (object oriented) membuat pemrogram mudah menuliskan Servlets. Untuk beberapa kalangan, Java Servlets dianggap lebih effisien daripada CGI.
ISAPI, NSAPI, and Native Server APIs - Semua yang ”berbau” API (Application Program-ming Interface) ini kebanyakan hanya untuk pemrogram hard-core.
MODUL 6 HTML HTML (Hypertext Markup Language) adalah bahasa format dari tag XML(Extended Markup Language) yang digunakan sebagai standar tampilan dari halaman Web. HTML dapat diterima sebagai tampilan halaman Web setelah melalui proses interpretasi dari Web browser. Selain itu HTML memiliki struktur yang fleksibel, tanpa lojik serta toleran terhadap kesalahan. HTML dapat diterima sebagai tampilan halaman Web setelah melalui proses interpretasi dari Web browser. Selain itu HTML memiliki struktur yang fleksibel, tanpa lojik serta toleran terhadap kesalahan.
Latih1.html <HTML> <HEAD> <TITLE> Mencoba HTML </TITLE> </HEAD> <BODY> Hallo, Tulisan ini dibuat dengan perintah HTML </BODY> </HTML> Keterangan: 1. Ketik perintah diatas dengan Notepad atau sembarang Editor
2. Simpan dengan nama file beserta extensinya: “.html” ( wajib ! ) dan jangan hanya nama filenya saja. Contoh: filename= Latih1.html 3. Untuk menampilkan di browser, pilih salah satu cara: a. Buka folder tempat menyimpan file html yang bersangkutan kemudian cari filenya, jika sudah ketemu klik 2x hingga secara otomatis akan ditampilkan dibrowser.
b. Aktifkan browser (misal:internet explorer). Dari Menu pilih File\Open kemudian ketik lokasi file html pada kotak “Open” atau klik tombol “Browse” untuk mencari lokasi file secara interaktif.
I. Sifat Penulisan Perintah HTML Penulisan perintah HTML tidak bersifat Case Sensitife. Hal ini berarti perintah HTML dapat diketik dengan huruf besar atau kecil. Namun sudah menjadi standar pada umumnya Website profesional, perintah HTML diketik dengan huruf Kapital.
Perintah HTML diapit dengan tanda kurung “ < ” dan “ > ”.
Hampir semua perintah HTML berupa perintah pasangan pembuka dan penutup. Perbedaan perintah pembuka dengan penutup adalah untuk perintah penutup ditambahkan tanda “slash” ( / ) pada awal perintah. Setiap objek yang diatur oleh perintah yang berpasangan harus diletakkan diantara perintah pembuka dan penutup. Perintah pembuka
Perintah penutup Contoh: <center> perintah menengahkan </center>
Hampir semua perintah HTML memiliki atribut (perintah pelengkap), format penulisannya adalah sebagai berikut: <Perintah atribut1=”nilai” atribut2=”nilai” … atributn=”nilai”> . . . objek yang diatur … </Perintah> Atribut bersifat optional. Sebuah Atribut bisa digunakan oleh beberapa perintah. Ada perintah HTML yang dapat digunakan bila ditulis dengan atributnya, namun ada pula perintah HTML yang memang tidak memiliki atribut. Perintah yang memiliki atribut bisa digunakan semua atributnya atau hanya sebagian saja.
Setiap atribut memiliki nilai, jika nilai berupa kata-kata dalam huruf maka cara mendefinisikan nilainya harus diapit dengan petik ganda ( “ ), sedangkan bila nilainya adalah angka atau persen maka cara mendefinisikannya tanpa perlu diapit oleh tanda petik ganda.Contoh mendefinisikan atribut pada sebuah perintah HTML:Perintah utama = BODY Atribut = Bgcolor Nilai atribut = “Orange” Latih1.html <HTML> <HEAD> <TITLE> Mencoba HTML </TITLE> </HEAD> <BODY Bgcolor= “Orange”> Hallo, Tulisan ini dibuat dengan perintah HTML </BODY> </HTML> Keterangan: 1. Editlah file latih1.html dengan menambahkan contoh atribut diatas kemudian disimpan (Notepad = File/Save atau tekan tombol “Ctrl” dan “s”)
2. Aktifkan Browser (Internet Explorer) yang menampilkan Latih1.html kemudian klik tombol “refresh” untuk melihat perubahan tampilan dokumen setelah ditambahkan perintah atribut diatas. Catatan: Salahsatu atribut pada perintah BODY adalah Background.
Fungsi dari Background adalah untuk mengatur warna latar belakang.
Background juga merupakan atribut pada perintah <TABLE>, <TR>, <TD>, dll
Nilai dari atribut Background adalah warna. Untuk mendefinisikan warna bisa dengan cara disebutkan menggunakan sebutan warna dalam bahasa Inggris (Merah=”Red”, Ungu=”Purple”, Coklat=”Brown”,dll) atau dengan menyebutkan dengan kode warna RGB.
Penulisan kode warna RGB= “# x x x x x x” ( x = angka hexadesimal), 2 angka I mendefinisikan intensitas warna “Merah”, 2 angka II mendefinisikan intensitas warna “Hijau” dan 2 angka III mendefinisikan intensitas warna “Biru”. Contoh mendefiniskan warna dengan kode warna RGB: #000000 = Hitam #00ff00 = Hijau #ffffff = Putih#ff0000 = Merah #0000ff = Biru #ff9227 = Orange Kode warna RGB dapat mendefinisikan 16 juta warna
Dalam mendefinisikan warna disarankan menggunakan pendefinisian menggunakan kode warna RGB untuk ketepatan warna yang dimunculkan.
II. Sifat Pengaturan Text Penggunakan Perintah Pemrograman pada Dokumen HTML Fungsi tombol enter pada penulisan program di editor (Notepad) tidak dianggap sebagai perintah ganti baris.
Perintah untuk ganti baris pengetikan menggunkan perintah <BR>.
Contoh: Latih1.html <HTML> <HEAD> <TITLE> Mencoba HTML </TITLE></HEAD> <BODY Bgcolor= “Orange”> Hallo, Tulisan ini dibuat dengan perintah HTML Hallo, Tulisan ini dibuat dengan perintah HTML Hallo, Tulisan ini dibuat dengan perintah HTML Hallo, Tulisan ini dibuat dengan perintah HTML Hallo, Tulisan ini dibuat dengan perintah HTML </BODY> </HTML> Hasilnya:
Keterangan: Karena disetiap ujung baris kalimat ditambahkan perintah <BR> maka kalimat berikutnya diletakkan pada baris dibawahnya. Fungsi tombol spacebar untuk memunculkan karakter kosong ( “ “ ) pada penulisan program di editor (Notepad) dianggap hanya sebagai pemisah kata dalam kalimat dan hanya ditampilkan 1 karakter kosong saja jika ditampilkan dibrowser. Karakter kosong dari spacebar hanya bisa ditampilkan jika diletakkan di tengah diantara kata dan tidak bisa ditampilkan jika diletakkan di awal atau di akhir kalimat atau ketikan kedua dan seterusnya. Contoh: Jarak antar huruf 2 karakter kosong yang diketik dari tombol Spacebar <HTML> <HEAD> <TITLE> Mencoba HTML</TITLE> </HEAD> <BODY> S o l o B e r s e r i </BODY> </HTML>
Hasilnya: Jarak antar huruf hanya ditampilkan
1 karakter kosong
Untuk menampilkan karakter kosong yang diletakkan di awal atau akhir baris kalimat atau diletakkan di tengah untuk karakter kosong kedua dan seterusnya, diwakilkan dengan perintah kode:   (harus diketik dengan huruf kecil semua) Setiap huruf diapit 2 perintah   Contoh: <HTML> <HEAD> <TITLE> Mencoba HTML</TITLE> </HEAD> <BODY>   S  o  l  o   B  e  r  s  e   r  i  </BODY> </HTML>
Hasilnya:
Jarak antar huruf 2 karakter kosong
Panjang baris kalimat dipengaruhi oleh lebar windows browser penampil.
Panjang baris kalimat mengikuti lebar windows browser penampil
PERINTAH PENGATURAN TEXT DAN PARAGRAPHPADA PEMROGRAMAN HTML
I. Pengaturan tampilan default (standar) pada dokumen HTML dengan perintah BODY.
Fungsi dari perintah BODY adalah untuk tempat mendefinisikan isi dari suatu dokumen HTML. Setiap isi yang ditampilkan pada dokumen yang bersangkutan harus ditulis diantara penulisan perintah <BODY> … </BODY>. Pada perintah ini memiliki beberapa atribut antara lain: Background=”file_gambar”
Menampilkan dokumen dengan latar belakang gambar bitmap.
Bgcolor=”warna”
Mengatur warna latar belakang dokumen, jika tidak didefinisikan dokumen ditampilkan dengan warna putih
Link=”warna” Mengatur warna Hyperlink (menu dalam bentuk tulisan yang jika di-klik maka tampilan akan berubah sesuai tujuan definisi hyperlink) yang belum pernah digunakan / di-klik. Jika tidak didefinisikan maka menggunakan warna biru. VLink=”warna”
Mengatur warna Hyperlink (menu dalam bentuk tulisan yang jika di-klik maka tampilan akan berubah sesuai tujuan definisi hyperlink) yang sudah pernah digunakan / di-klik. Jika tidak didefinisikan maka menggunakan warna ungu. Text=”warna”
Contoh sebuah hyperlink Jika kursor melintas diatasnya bentuk kursor akan berubah dari ke
Mengatur warna tulisan dokumen, jika tidak didefinisikan menggunakan warna
Contoh penggunaan atribut pada perintah BODY: <HTML> <HEAD> <TITLE> Mencoba HTML </TITLE> </HEAD> <BODY link="yellow" vlink="blue" text="white" bgcolor="black"> <A href="latih2.html"> Ini Hyperlink </A> <br> Yang ini hanya tulisan biasa </BODY>
</HTML> Keterangan: Pada penggunaan perintah BODY diatas diatur tampilan pada dokumen untuk warna tulisan berwarna putih (text="white") dengan latar belakang dokumen berwarna hitam (bgcolor="black") dan sebagai penanda jika suatu hyperlink belum pernah di-klik berwarna kuning (link="yellow") dan penanda jika hyperlink sudah pernah di-klik berwarna biru (vlink="blue"). Catatan:
Jika perintah BODY didefinisikan tanpa atribut apapun maka bentuk tampilan dokumennya adalah: Warna latar belakang dokumen putih
Warna huruf hitam
Warna hyperlink biru dengan garis bawah
Warna hyperlink yang sudah diklik berwarna ungu dengan garis bawah II. Pengaturan tampilan huruf tulisan dokumen dengan perintah FONT.
Penggunaan perintah FONT harus menggunakan atribut yang dimilikinya. Berikut ini atribut pada perintah FONT: Face=”jenis font”.
Mengatur tampilan jenis font yang digunakan pada tulisan yang diapit oleh perintah font. Contoh: <FONT face=”Arial, Helvetica, San Serif”> ini tulisannya </FONT>
Keterangan: Pada contoh diatas diatur tampilan tulisan yang diapit oleh perintah FONT menggunakan type huruf Arial, jika type huruf tersebut tidak ada dikomputer pengguna maka menggunakan type huruf Helvetica dan jika keduanya tidak ada maka menggunakan type huruf San Serif. Namun jika ketiga huruf tersebut tidak ada pada komputer pengguna maka menggunakan seting jenis huruf default pada masing-masing browser penampil dokumen. Pengaturan tampilan jenis font default pada browser: Internet Explorer: Menu:\Tools \Internet Options \Tab General \Tombol Font
Mozilla FireFox: Menu \Tools \Options \Tab General \Font & Colors
Opera : Menu \Tools \Options \Preferences \Web Pages \ Tombol Normal Font. Catatan: Pengaturan type font pada dokumen HTML sebaiknya menggunakan type font standar, yaitu type font yang ada disetiap komputer baik windows, linux, macintosh, dll. Jika terpaksa harus menggunakan tampilkan huruf yang tidak
standar, misalnya tulisan dengan bentuk, sebaiknya tulisan tersebut ditampilkan dalam bentuk gambar. Tulisan seperti ini sebaiknya dibuat dalam bentuk gambar sehingga terhindar dari permasalahan perbedaan tampilan dikomputer. Tulisan Indah Color=”Warna”.
Mengatur tampilan warna tulisan yang diapit oleh perintah font. Contoh: <FONT color=”Blue”> tulisan ini berwarna biru </FONT> Size= angka 1 s/d 7
Mengatur ukuran huruf tulisan yang diapit oleh perintah font. Semakin besar angkanya semakin besarpula tulisannya Contoh: <FONT Size=3> ini tulisan berukuran sedang </FONT> Catatan: Nilai atribut size pada perintah font bisa juga bernulai +n atau -n jika sebelumnya telah didefinisikan ukuran standar huruf pada dokumen dengan perintah <BASEFONT Size=angka>. “+” jika ukuran dibesarkan dari ukuran standar dan “-“ untuk mengecilkan. Contoh: <BASEFONT Size=5 >. <FONT Size= +2> tulisan ini dibesarkan dari ukuran standar </FONT> <br> <FONT Size= -3> tulisan ini dikecilkan dari ukuran standar </FONT> Contoh penggunaan atribut pada perintah FONT: <FONT Color=”Purple” Size=5 Face=”Arial Narrow”>
Mencoba perintah pengaturan tampilan <FONT Color=”red”> tulisan </FONT></FONT>
Keterangan: Pada contoh diatas diatur tampilan tulisan menggunakan ukuran 5 (agak besar) dengan bentuk huruf Arial Narrow. “Mencoba perintah pengaturan tampilan” ditampilkan dengan warna ungu (puple) sedangkan “tulisan” menggunakan warna merah (red). III. Perintah-perintah pengaturan tampilan style tulisan pada dokumen.
Pada perintah pemrograman HTML juga memiliki pengaturan style tulisan seperti menebalkan, memiringkan, memberi garis bawah, dll. Berikut ini perintah-perintah style tulisan pada program HTML: <B> Menebalkan </B>
<I> Memiringkan </I>
<U> Memberi garis bawah </U>
<S> Memberi coret ditengah </S>
<TT> Menampilkan tulisan seperti huruf mesin ketik manual </TT>
<BIG> Membesarkan ukuran tulisan </BIG>
<SMALL> Mengecilkan ukuran tulisan</SMALL>
<SUP> Superscript-tampilan pangkat atas </SUP>
<SUB> Subscript-tampilan pangkat bawah </SUB>
Contoh penggunaan:
2<SUB><U> a. <I>b </I></U></SUB> = X <SUP>2</SUP> . Y Perintah perataan tampilan tulisan pada dokumen.
Untuk tulisan biasa bukan paragrap atau suatu judul (heading) pada dokumen HTML hanya bisa diatur dua posisi perataan yaitu: Rata kiri (default)
<LEFT> … Tulisan yang diatur perataannya … </LEFT> Rata tengah
<CENTER> … Tulisan yang diatur perataannya … </CENTER> V. Perintah mendefinisikan suatu paragrap.
Dalam suatu dokumen HTML pentuk tulisan dibedakan antara lain berupa Tulisan biasa dan tulisan paragrap. Tulisan paragrap biasanya terdiri dari beberapa kalimat yang menyatu. Suatu kalimat yang didefinisikan sebagai suatu paragrap bisa diatur perataannya kalimatnya antara lain rata kiri (default), tengah dan kanan. Sedangkan rata kanan-kiri (justify) tidak bisa didefinisikan menggunakan perintah HTML. Berikut ini format penggunaan perintah pengaturan suatu paragrap:
<P Align=”posisi perataan”> …isi paragrap yang diatur … </P> Nilai atribut Align (posisi perataan): Left = Perataan isi paragrap rata kiri (default)
Center = Perataan isi paragrap rata tengah
Right = Perataan isi paragrap rata kanan
Keterangan: Jika atribut Align tidak didefinisikan, atau hanya didefinisikan seperti berikut ini: <P> … isi paragrap yang diatur … </P>, maka paragrap tersebut ditampilkan dengan perataan kiri.
VI. Perintah mendefinisikan suatu judul. Setiap dokumen pasti memerlukan suatu judul. Judul suatu bab pada dokumen, judul sub bab dan berbagai bentuk judul lainnya. Untuk membuat tampilan judul pada perintah HTML menggunakan perintah Heading. Karena sudah ada fasilitas pendefinisian judul para HTML maka untuk setiap tampilan judul jangan didefinisikan sebagi tulisan biasa. Dengan mengguakan perintah heading posisi perataan judul tersebut bisa diatu rata kiri, tengah atau kanan. Berikut ini format pendefinisian perintah Heading:
<Hx Align=”posisi perataan”> … Judul yang ditampilkan … </Hx> Keterangan: x ( pada Hx ) : didefinisikan menggunakan angka 1 s/d 7.
Semakin besar angkanya, tulisan judul akan semakin mengecil. Align =”posisi perataan” : atribut pengatur posisi perataan judul, nilai untuk atribut ini adalah: “Left” untuk rata kiri, “Center” untuk rata tengah, “Right” untuk rata kanan. 1 2 3 4 5 6 7 1 2 3 4 5 6 7 <B><U>Tampilan heading:</U></B>
<H1> heading 1 </H1> <H2> heading 2 </H2> <H3> heading 3 </H3> <H4> heading 4 </H4> <H5> heading 5 </H5> <H6> heading 6 </H6> <H7> heading 7 </H7>
VII. Pengaturan tampilan tulisan menggunakan Preformated Text. Dengan perintah Preformated Text membuat browser dalam menampilkan isi tulisan dokumen akan ditampilkan seperti yang ditulis pada program. Hal ini berarti setiap karakter apapun yang diketik akan dimunculkan apa adanya termasuk menekan tombol Enter akan dianggap sebagai perintah ganti baris kalimat
dan karakter kosong dari menekan tombol Spacebar akan ditampilkan sejumlah karakter kosong yang diketik diprogram. Namun demikian tampilan huruf yang digunakan adalah jenis Monospaced (setiap karakter memiliki lebar karakter yang sama), tampilan jenis ini seperti halnya huruf yang digunakan pada mesin ketik manual. Tapi walaupun demikian pengaturan style tulisan masih bisa digunakan seperti menebalkan <B>, memiringkan <I> dan garis bawah <U>. Berikut ini adalah format penggunaan perintah Preformated Text: <PRE> … isi tulisan yang diatur … </PRE>
Contoh penggunaan: <B><U>Preformated Text:</U></B> <PRE> Ganti baris menggunakan tombol <B><I>ENTER</I></B> S p a c e B a r tanpa <B>&NBSP</B> ---------- ---- / ..........\ ///// / |...........\///// /-|| B O M |)))### \-|| A T o M |====### \ |=========== |)))### \|========== /\\\\\
==========/ \\\\\ ---- </PRE>
VIII. Menampilkan asesoris garis horiontal Agar tampilan dokumen menarik, dapat digunakan asesoris garis horisontal. Untuk menampilkan garis horisontal dapat menggunakan perintah <HR> , dengan atribut antara lain: Size = Angka. Mengatur ketebalan garis, semakin besar angka semakin tebal garis.
Width = Angka (pixel) atau Persen. Mengatur lebar garis, jika menggunakan angka berarti menggunakan satuan pixel sedangkan persen berbanding dengan lebar window browser penampil.
Align = “Left”/ ”Center” / ”Right”. Mengatur tampilan perataan garis. Nilai defaultnya adalah rata tengah.
Color = “warna”. Mengatur warna garis yang ditampilkan.
Noshade. Garis ditampilkan tanpa bayangan 1 Contoh penggunaan:
2 <HR> 3 <HR Width=150 Color="blue"> 4
<HR Width=50% Size=5 Align="left"> 2 <HR Size=10 Noshade> Hasilnya: 1 2 3 4
PERINTAH PENGATURAN TABEL PADA PEMROGRAMAN HTML Cara membuat tabel. Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan. Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom
<table border="1">
<tr> <td>Cell 1 - Baris 1 Kolom 1</td> <td>Cell 2 - Baris 1 Kolom 2</td> </tr> <tr> <td>Cell 3 - Baris 2 Kolom 1</td> <td>Cell 4 - Baris 2 Kolom 2</td> </tr> <tr> <td>Cell 5 - Baris 3 Kolom 1</td> <td>Cell 6 - Baris 3 Kolom 2</td></tr> </table> Hasil:
Cell 1 – Baris 1 Kolom 1 Cell 2 – Baris 1 Kolom 2Cell 3 – Baris 2 Kolom 1 Cell 4 – Baris 2 KolomCell 5 – Baris 3 Kolom 1 Cell 6 – Baris 3 Kolom 2
Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>. Mengatur lebar dan tinggi tabel. Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height. Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px. <table border="1" width="75%"> <tr> <td style="width:50%;height:40px;">Baris 1 Kolom 1</td> <td>Baris 1 Kolom 1</td>
</tr>
<tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> <tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr> </table> Hasil:
Baris 1 kolom 1 Baris 1 kolom 1Baris 1 kolom 2 Baris 2 kolom 2Baris 3 kolom 1 Baris 3 kolom 2
Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut. Menggabungkan kolom pada tabel Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan. Untuk menggabungkan kolom dalam tabel digunakan atribut colspan. <table border="1" width="75%"> <tr> <td colspan="2">Gabungan Kolom 1&2 pada Baris 1</td>
</tr> <tr> <td style="width:50%">Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> <tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr> </table> Hasil: