BAB-2 HTML Tingkat DASAR

Ukuran: px

Mulai penontonan dengan halaman:

Download "BAB-2 HTML Tingkat DASAR"

Johan Widjaja
7 tahun lalu
Tontonan:

1 BAB-2 HTML Tingkat DASAR Dasar dari semua pemrograman web adalah pemrograman HTML, sehingga dikatakan bahwa tidak akan dapat membangun suatu gedung tanpa ada fondasi yang mendasari dari gedung tersebut. Apapun bagus dan kuatnya gedung tersebut bila tanpa fondasi maka tidak akan dapat bertahan lama. Dalam buku ini semua contoh pemrograman dicoba pada browser MSIE akan tetapi tidak menutup kemungkinan untuk menggunakan browser yang lainnya seperti Netscape Communicator dan lainnya. 2.1 Format Penulisan HTML Untuk memulai pembuatan halaman HTML maka dapat dimulai dengan menyiapkan editor yang akan digunakan, misalkan menggunakan EditPlus atau Notepad, yang dilakukan disini adalah menggunakan EditPlus karena mempunyai fasilitas yang mendukung guna pembuatan HTML maupun PHP nantinya. Format halaman HTML adalah terdiri dari dua bagian yaitu bagian Header dan bagian Body, yang semuanya itu dibuka dan ditutup dengan <tag>. Seperti tag <html> adalah digunakan untuk tanda awal dari suatu halaman HTML, sedangkan tag </html> (diawali tanda slash) digunakan untuk tanda akhir dari suatu halaman HTML. Tag-tag tersebut dapat ditulis dengan huruf kecil maupun huruf besar, karena HTML tidak mengenal case sensitive (membedakan huruf kecil dan besar). Berikut ini diberikan contoh format standar dari penulisan HTML: <html> <head> <title> Judul ditampilkan pada baris teratas browser </title> </head> <body> <!... ISI dari HTML... > </body> </html> 12

2 Berikut ini contoh pembuatan halaman web dengan HTML menggunakan editor EditPlus: Gambar 2.1 Tampilan Editor EditPlus Sedangkan halaman hasil dari HTML diatas adalah: Gambar 2.2 Tampilan Browser MSIE dari halaman Web Editor EditPlus Suatu tampilan browser dari halaman web biasanya menggunakan judul (title) yang digunakan untuk menamakan suatu halaman web dan untuk memberikan nama pada saat suatu halaman web akan disimpan atau didata pada menu browser (menu Favorite). Judul ini akan ditampilkan pada bagian kiri atas dari suatu browser seperti tampilan Gambar 2.2 diatas. Untuk memberikan nama maka digunakan tag <title> yang didahului dengan tag <head> kemudian ditutup dengan tag </title> untuk membatasi judul dan tag </head> untuk menutup bagian format header. 13

3 2.2 Style dari Teks Ada dua cara untuk pengaturan style teks, yaitu menggunakan Heading dengan tag <H> atau menggunakan font dengan tag <font>. Heading menyediakan 6 style teks yang dapat diatur menggunakan angka dari 1 sampai 6, dimana angka 1 adalah ukuran yang paling besar, biasanya digunakan untuk judul atau sub judul, yang dicetak besar dan tebal (bold). Heading mempunyai parameter untuk mengatur justify yaitu LEFT, CENTER dan RIGHT. Sedangkan bila menggunakan cara kedua maka digunakan tag <font> dimana tersedia 7 style teks yang dapat dipilih menggunakan tingkatan dari 1 sampai 7, yang merupakan kebalikan dari heading, dimana 1 adalah ukuran yang terkecil sedangkan 7 adalah ukuran terbesar, dan tidak tebal. Berikut contoh penggunaan heading dan font. <TITLE>Text Style using Heading</TITLE> <H1 ALIGN=CENTER>JUDUL MENGGUNAKAN HEADING 1</H1> <H2 ALIGN=CENTER>JUDUL MENGGUNAKAN HEADING 2</H2> <H3 ALIGN=CENTER>JUDUL MENGGUNAKAN HEADING 3</H3> <H4 ALIGN=CENTER>JUDUL MENGGUNAKAN HEADING 4</H4> <H5 ALIGN=CENTER>JUDUL MENGGUNAKAN HEADING 5</H5> <H6 ALIGN=CENTER>JUDUL MENGGUNAKAN HEADING 6</H6> Gambar 2.3 Tampilan Style Teks Heading menggunakan tag <Hn> 14

4 <TITLE>Font Size & Face</TITLE> <FONT SIZE=6> TEKS INI MENGGUNAKAN UKURAN 6<BR> DENGAN FONT FACE "DEFAULT" BROWSER<P> <FONT SIZE=5> <FONT FACE="ARIAL"> TEKS INI MENGGUNAKAN UKURAN 5<BR> DENGAN FONT FACE "ARIAL"<P> </FONT> Gambar 2.4 Tampilan Style Text menggunakan tag <font> 2.3 Pengaturan format tata letak teks Pengaturan format tata letak disini adalah mengatur tampilan teks agar terlihat rapi dan sesuai dengan keinginan, yaitu meliputi pengaturan paragraph, ganti baris baru, pengaturan posisi judul atau sub judul yaitu diletakkan pada posisi kiri, tengah atau kanan dari halaman web, mencetak secara miring untuk penekanan suatu kata, dan lain sebagainya. Adapun tag-tag yang digunakan disini adalah meliputi tag paragraph <p>, tag ganti baris <br>, tag preformatted <pre>, tag indentasi <blockquote>, tag tebal <b> atau <strong>, tag subscript <sub>, tag superscript <sup>, tag miring <i>, tag kecil <small>, tag besar <big> dan tag emphasize <em>. Berikut diberikan contoh penggunaan dari beberapa tag tersebut diatas. 15

5 <TITLE>Text Formatting with tag <p></title> Modul ajar ini disusun berdasarkan berbagai referensi yang ada, baik bersumber pada buku teks dan dari alamat-alamat URL yang ada di <big>internet</big>. Ditambah dengan pengalaman penulis selama mengajar di <strong>politeknik Elektronika Negeri Surabaya</strong>, sehingga modul ajar ini diharapkan dapat menunjang mata kuliah Pemrograman Web. <P> Penulis mengucapkan banyak terima kasih kepada rekanrekan yang telah banyak merelakan waktunya, guna terselesaikannya pembuatan modul ajar ini, semoga amal dan kebaikan rekan-rekan mendapatkan pahala yang setimpal dengan yang telah diberikannya. <P> Sekali merengkuh dayung, dua tiga pulau terlampaui, <small>sambil menyelam minum air</small>, begitulah harapan penulis, dengan sekali modul ajar ini dibuat maka dapat dimanfaatkan untuk beberapa tingkat pendidikan di Politeknik sekaligus, mulai dari D1, D3 dan D4. Gambar 2.5 Tampilan teks yang diatur paragrafnya menggunakan tag <p> 16

6 Berikut ini diberikan contoh penggunaan tag <br> untuk ganti baris baru, dan meskipun pada editor telah dilakukan penyusunan baris baru maka pada tampilan di layar browser akan berbeda, dimana akan ditampilkan secara bersambungan, seperti contoh script dibawah ini: <TITLE> Text Formatting with tag <br> </TITLE> Dalam pengaturan format teks pada halaman web biasanya menggunakan beberapa tag<br> untuk mengatur tampilan teks agar sesuai dengan keinginan dari pembuat halaman web.<br> Misalkan saja untuk mengatur penulisan teks ganti baris baru, maka dapat dilakukan<br> dengan menggunakan tag BR, yang berarti pindah baris. Karena suatu teks dalam HTML dianggap satu baris, meskipun ditulis sudah dalam keadaan ganti baris pada editor teks, seperti halnya contoh teks disini. Teks ini akan ditulis sambung dengan teks sebelumnya, karena tidak menggunakan tag BR. Gambar 2.6 Tampilan teks baris baru menggunakan tag <br> 17

7 Tag <blockquote> digunakan untuk pengaturan indentasi teks, sehingga teks ditampilkan masuk beberapa kolom, seperti contoh dibawah ini: <TITLE>Text Formatting with tag <blockquote> </TITLE> <H5>KATA MUTIARA</H5> <BLOCKQUOTE> <I>Berakit rakit ke hulu berenang-renang ketepian, bersakit-sakit dahulu bersenang-senang kemudian</i> <BR> Mempelajari <b>pemrograman web</b> tidaklah semudah membalik tangan, diperlukan kemauan yang tinggi untuk dapat mempelajarinya, dengan jalan <em>mempertinggi jam terbang</em> yaitu sering mencoba dan mencoba lagi sehingga mampu untuk membuat halaman web <sub>statis</sub> maupun <sub>dinamis</sub> secara <sup>baik</sup> dan <sup>benar</sup>. </BLOCKQUOTE> Gambar 2.7 Tampilan teks menggunakan tag <blockquote> Terkadang diinginkan untuk menampilkan teks seperti apa adanya, misalkan suatu teks program, dimana susunan dari tiap kalimat harus sama persis dengan aslinya. Untuk keperluan tersebut maka dapat digunakan tag <pre> yang berfungsi untuk menampilkan teks apa adanya seperti aslinya, untuk lebih jelasnya perhatikan contoh penggunaan tag <pre> dibawah ini: 18

8 <TITLE>Text Formatting with tag <pre> </TITLE> <H3>CONTOH PROGRAM PHP</H3> <PRE> <?php $a=9; $b=5; for($i=0; $i<10; $i++) { $c=$c + $a; $d=$c - $b; $e=$c / $d; } print $c; print $d;?> </PRE> Gambar 2.8 Tampilan teks menggunakan tag <pre> Karena karakter < dan > merupakan karakter khusus yang digunakan untuk membuat tag, maka untuk menampilkan karakter tersebut apa adanya pada halaman browser maka digunakan entitas karakter, yang terdiri dari tiga karakter yaitu & (ampersand), # (crash) dan ; (semicolon). Entitas ini mempunyai sifat case sensitive, dimana memperhatikan penulisan antara huruf kecil dan besar. 19

9 Berikut diberikan table karakter entitas dimana sering ditemukan pada halaman web dan bahkan sering digunakan untuk keperluan tertentu, seperti contoh pada Gambar 2.8 diatas. Tabel 2.1 Daftar Karakter Entitas Kode Nama Tampilan Arti < < < Lebih kecil = > > Lebih besar & & & Ampersand " " Petik ganda Terdaftar - Merek Dagang Hak cipta &#247 Pembagian &#215 Perkalian 2.4 Tugas (dikumpulkan pada pertemuan berikutnya) Buatlah halaman web sederhana sebagai homepage pribadi, yang berisi tentang data pribadi misalkan nama, NRP, alamat rumah, tempat & tanggal lahir, riwayat pendidikan, , hobby, karya-karya penelitian/ program yang pernah dibuat, pengalaman kerja, kesan pertama masuk PENS, citacita, pengalaman suka-duka, bahasa program yang dikuasai, programprogram komputer (software) yang pernah dicoba, system operasi yang dikuasai dan lain-lain. Gunakan tag-tag yang telah dipelajari diatas. 20

dokumen-dokumen yang mirip

Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa

Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa Tujuan Kuliah Mampu Menjelaskan mengenai: Pengertian struktur dasar tag-tag HTML membuat aplikasi dengan perintah-perintah HTML HTML Hyper Text Markup