[Type text] [Type text] [Type text] HTML. Belajar HTML. Sonya Permata Putri

(1)

Belajar HTML

Sonya Permata Putri

HTML

(2)

1 Sonya Permata Putri

Getting Started With Visual Studio 2008

Untuk bisa menulis HTML dengan Visual Studio 2008, tentu saja kita harus sudah memiliki Visual Studio 2008 di komputer kita. (Untuk permulaan, boleh juga dicoba dengan Visual Studio 2005, tapi ada beberapa fitur baru Visual Studio 2008 yang tidak dimiliki oleh Visual Studio 2005)

1. Bukalah Visual Studio 2008 tersebut sehingga muncul window seperti ini.

2. Di kolom Recent Projects, klik Create Website

(3)

4. Maka, akan muncul window seperti ini.

5. Pilih Empty Web Site, kemudian tulis nama WebSite kita di text box location yang sudah disediakan. Misalnya dalam contoh kali ini, nama folder WebSitenya adalah BelajarHTML. Klik ok.

6. Perhatikan window Solution Explorer yang tadinya kosong, jadi berisi folder baru kita.

7. Klik kanan daerah yang diblok pada gambar di atas (tulisan C:\...\BelajarHTML\), kemudian pilih Add New Item

(4)

8. Add New Item berguna untuk menambahkan file-file berjenis baru di dalam folder website kita. Dalam hal ini, kita ingin menambahkan sebuah halaman HTML yang baru di dalam folder ini. Oleh karena itu, pada templates kita pilih HTML Page, kemudian kita tulis nama filenya. Misalnya dalam contoh, nama file HTML-nya adalah Home.htm. Tekan Enter atau klik Add.

(5)

10. Window Client Object & Events adalah window yang disiapkan untuk writing code. Di sini secara default Visual Studio 2008 sudah menyiapkan kerangka umum HTML Page, yang akan menghemat waktu kita tanpa perlu menulis ulang code-code tersebut.

11. Demikianlah mengenai cara memulai membuat website dengan Visual Studio 2008. Selanjutnya, kita bisa melakukan programming website sesuai dengan keperluan kita.

(6)

Mengenal HTML

HTML adalah sebuah bahasa yang menggunakan logika stabilo. Sesuai dengan kepanjangannya, Hyper Text Markup Language, ketika menggunakan bahasa HTML, tujuan kita meng-kode adalah memberikan efek terhadap tulisan yang akan kita tampilkan, dengan cara marking-up.

Misalnya, kita mau menampilkan tulisan “Aku sudah jago HTML, tahu!” dengan berbagai efek sehingga terlihat seperti di bawah ini.

Aku sudah jago HTML, tahu!

Tulisan yang diberi efek adalah kata “sudah” , kata “HTML”, dan kata “tahu”. Mengapa kita perlu melakukan pengkodean lagi, padahal kita bisa langsung menunjukkan tulisan yang sudah diberi efek?

Itu disebabkan karena kita ingin menyimpan informasi efek tersebut sehingga kapanpun kode tulisan kita diterjemahkan, maka tulisan itu pasti akan diterjemahkan dengan efek yang sama seperti efek yang kita maksudkan.

Kata kuncinya di sini adalah Markup. Dengan HTML, konsepnya adalah kita men-stabilo kata-kata yang ingin kita beri efek, kemudian setiap stabilo yang berbeda akan kita beri keterangan yang berbeda pula. Pen-stabiloannya tidak benar-benar distabilo, akan tetapi secara imajinatif kita memberi tanda (opening sign) di awal titik penstabiloan kita, dan beri tanda penutup(closing sign) di akhir penstabiloan kita. Secara sederhana, peng-Markup-an tulisan tadi akan terlihat seperti ini.

Aku <tebalkan>sudah</tebalkan> jago

<orange>HTML</orange>,<miring>tahu</miring>!

Dengan demikian, di mana pun kita menulis pesan ini, kita tetap bisa mengatur tampilan pesan kita yang ingin kita tampilkan sesungguhnya meskipun di tempat kita menulis tampilan tersebut tidak bisa dimunculkan. Ketika tulisan kita diterjemahkan, maka akan muncul tampilan sebenarnya yang seperti keinginan kita.

Tulisan HTML kita tidak bisa begitu saja dibaca dan langsung dimengerti, oleh karena itu kita perlu penerjemah bahasa HTML. Browser seperti Internet Explorer, Mozilla Firefox, Safari, Opera, dll, adalah penerjemah yang bertugas

(7)

untuk membaca file HTML dan menampilkannya kepada kita dalam bentuk yang lebih layak dan lebih mudah dimengerti.

Untuk menulis halaman HTML, kita harus menyatakan kalau dia adalah sebuah html page, caranya yaitu kita buatlah sebuah mark seperti ini.

HTML terdiri atas dua bagian utama, yaitu Head dan Body. Di block body inilah kita akan menulis tulisan yang akan kita tampilkan.

Di sini kita mulai menulis tulisan </BODY>

</HTML>

Kita sebenarnya tidak perlu repot-repot menuliskan kata-kata ini dalam file kita, karena Visual Studio 2008 secara default akan menyiapkan form-nya buat kita begitu kita me-new HTML page.

Tulisan yang ingin kita tulis cukup kita tuliskan di antara mark<BODY> dan mark </BODY>

Enter dalam bahasa HTML tidak akan mempengaruhi tampilan tulisan kita, meskipun kita menulis kelanjutan tulisan di baris yang baru atau di dua baris berikutnya, di browser tulisan kita tetap akan dikenali sebagai sebuah baris saja. Jika ingin melakukan suatu operasi yang dikenali oleh browser, maka yang harus kita lakukan adalah (lagi-lagi) marking-up dan memberi tag-tag HTML sesuai dengan apa yang ingin kita tampilkan.

Selain itu, pada tag HTML, besar kecilnya huruf tidak akan dihiraukan, jadi kita mau menulis <BODY> atau <body> akan sama saja bagi halaman HTML.

Tag-Tag HTML

Sebelum membuat halaman Web, terlebih dahulu kita harus mempelajari struktur kodenya dulu, yang biasa disebut sebagai tag. Perintah-perintah umum

(8)

yang biasa dipakai dalam penulisan kode HTML adalah seperti pada tabel di bawah ini, sesuai dengan format yang berlaku di Visual Studio 2008.

HTML Tag

Keterangan Struktur Kode

<TITLE> Judul halaman web <TITLE> Diisi dengan Judul </TITLE>

<HEAD> Header halaman <HEAD>Diisi dengan Deskripsi

Halaman</HEAD>

<BODY> Isi halaman <BODY>Di sini isi semua yang ingin kita

tulis</BODY>

Bold/Huruf Tebal Tulisan ini tebal, lho! Italic/Huruf Miring Tulisan ini miring, lho!

Underline/Garis Bawah Tulisan ini digarisbawahi, lho!

Paragraf baru Tulisan ini adalah sebuah paragraf

baru

Break/baris baru Tulisan di baris pertama Tulisan di baris kedua

<center> Rata tengah <center>Tulisan ini letaknya di tengah, lho! </center>

<img> Meng-insert image <img src=”Bengong.jpg” alt=”Ini foto orang

bengong”>

Kalau kita perhatikan di atas, ada tag-tag yang memiliki inning, ada tag-tag yang tidak memiliki inning.

Apa bedanya?

Sebenarnya ini tergantung dengan fungsi tag tersebut. Kalau sebuah tag berfungsi sebagai stabilo, seperti contoh kita yang dulu yaitu misalnya kita ingin mem-bold –kan sebuah kata tertentu, tentu kita harus menstabilonya. Nah, tag penyetabilo inilah yang wajib punya inning, sebab kalau tidak punya inning, apa yang mau distabilokan? Misalnya, … inning …

Karena Bold adalah perlakuan khusus terhadap tulisan tertentu, maka tulisan yang ingin kita perlakukan itulah yang harus kita letakkan sebagai inning dari tag Bold.

Tag-tag yang tidak memerlukan inning adalah tag-tag yang sifatnya hanya sebagai pembubuhan saja. Misalnya seperti karena tidak memerlukan inning, jadi kita langsung beri garis miring penutup saja di opening tag-nya.

(9)

Atau juga insert image oleh tag <img/>, pasti kita Cuma memerlukan sebuah tag img untuk menginsert sebuah gambar, tidak perlu pakai tag penutup lagi karena tidak ada yang di-stabilokan oleh img dalam tulisan itu.

Masih bingung dengan tag-tag? Yang mana yang bisa langsung ditutup, yang mana yang perlu inning?

Tidak perlu bingung, karena Visual Studio 2008 sangat memberi kemudahan buat kita. Tidak perlu pusing-pusing memikirkan cara menulis yang benar, karena Visual Studio secara otomatis akan membuatkan kita format tulisan yang benar. Kemudahan ini akan kita hubungkan juga dengan fitur Visual Studio yang keren, yaitu IntelliSense. Simak saja penjelasannya dalam bahasan berikutnya.

(10)

Kemudahan Membuat HTML Page Dengan Visual Studio 2008

(1)

Kemudahan pertama yang sudah kita bahas tadi adalah Visual Studio 2008 akan secara otomatis membuatkan code-code kerangka umum halaman HTML ketika kita membuat sebuah new HTML page, sehingga kita tidak perlu capek-capek menulisnya lagi.

Intellisense

1. Tidak tahu mau menulis apa? Ketika membuat sebuah tag, coba tekan Ctrl+Spasi, maka akan muncul kotak yang berisi code-code apa yang bisa kita tulis. Kotak bantuan itulah yang kita sebut sebagai IntelliSense. Lihat gambar berikut.

(untuk tag yang belum pernah ditulis, mulailah dengan menulis „<‟ dahulu supaya IntelliSense-nya bisa muncul)

2. IntelliSense juga sangat membantu bagi programmer yang suka mencoba-coba. Karena di dalam kotak tersebut terdaftar code-code apa saja yang

(11)

mungkin ditulis, kita bisa mencoba-coba code-code tersebut satu persatu sehingga hal tersebut bisa menambah wawasan kita akan code-code yang sebelumnya tidak kita ketahui.

3. Tarik scroll button ke bawah, coba temukan tag “br”, kemudian kliklah.

akan berubah menjadi

4. Bagaimanakah penulisan br yang benar? Misalnya kita tidak tahu, kita boleh langsung beri „>‟, maka Visual Studio 2008 akan secara otomatis menutupnya (atau klik dua kali). Jangan lupa bikin „<‟ dulu.

akan menjadi seperti ini

5. Langsung tutup lagi dengan „>‟ . Visual Studio 2008 akan membenarkannya sesuai dengan format yang sebenarnya. Perhatikanlah bahwa kursor kita secara otomatis akan berada di antara dua tag center, sehingga kita bisa langsung mengetikkan kalimat yang mau kita tulis.

(12)

6. Lihat betapa mudahnya menulis code dengan menggunakan Visual Studio 2008. Sebenarnya, kita pun tak perlu repot-repot menekan Ctrl+Spasi supaya IntelliSensenya muncul. Sebab, saat kita sedang mengetikkan tag pun, IntelliSensenya muncul sendiri secara otomatis. Misalnya, kita mau mengetik <blockquote>. Saat karakter „<‟ diketikkan, IntelliSense akan muncul, ketika huruf „b‟ diketik, maka IntelliSense akan pergi ke list yang berawalan b, kemudian saat kita mengetik „l‟, IntelliSense akan mengecek code yang berawalan „bl‟. Apabila code yang di-blok oleh IntelliSense sudah sesuai dengan keinginan kita, kita bisa langsung menekan enter. Lihat contohnya di bawah ini.

(13)

Jika langsung tekan „>‟, akan menjadi

7. Untuk contoh kasus lain lagi, misalnya kita tidak sengaja menghilangkan kotak Intellisense. Contohnya, kita sudah memilih <b + enter kemudian ternyata kita tidak jadi memilih itu. Kita tekan backspace dan kembali lagi ke sebelah huruf b. Ternyata IntelliSense tidak muncul. Cukup tekan Ctrl+Spasi, IntelliSense akan muncul kembali. Atau, kalau misalnya kita mau mengetik blockquote, ketika telah terketik <bl , tekan saja Ctrl+spasi, maka tulisan <blockquote> akan otomatis tercetak.

IntelliSense sangat membantu kita menghemat waktu dan tenaga, selain itu juga IntelliSense sangat membantu bagi programmer yang ingin belajar mencoba-coba semua jenis code di dalam halaman HTML-nya.

(14)

Latihan

Latihan Permulaan

Kita akan belajar membuat code yang sederhana.

1. Buatlah sebuah halaman HTML baru dengan menerapkan langkah-langkah yang pernah dijelaskan sebelumnya.

2. Untuk contoh ini, kita akan memakai folder BelajarHTML dan file Home.htm yang tadi kita buat, tapi sekarang kita pakai default dari Visual Studio 2008, jadi yang kita ketik di Body tadi kita hapus.

3. Ganti judulnya dengan tulisan “Home Website-ku”. Ini adalah judul dari halaman HTML kita saat dimunculkan di browser.

4. Kemudian isi bagian body seperti di bawah ini. Jangan lupa save tiap kali kita melakukan perubahan.

5. Line 8 dan line 10 akan dimunculkan seperti tulisan biasa ketika kita explore di browser.

6. Line 9 menunjukkan kalau kita membuat tulisan di line 9 dan line 10 itu dalam baris yang berbeda.

(15)

7. Coba lihat tampilannya di browser. Melalui Windows Explorer, bukalah direktori tempat kita menyimpan file Home.htm. Kemudian open with Internet Explorer (atau langsung double-click juga bisa).

8. Selanjutnya, kita bisa mencoba code-code lain. Misalnya, kita mau mempraktekkan <blockquote> yang dari tadi kita bicarakan.

9. Coba refresh halaman Internet Explorer kita tadi. Maka akan muncul tampilan yang seperti ini.

(16)

10. Kita bisa bereksperimen, misalnya dengan menambahkan tag dan sebuah kalimat baru, seperti pada contoh.

11. Lihat apa perubahan yang terjadi.

(17)

13. Kemudian kita lihat tampilannya di browser.

Latihan Lanjutan (input)

Kita akan meneruskan latihan permulaan, kali ini topiknya adalah mengenai input.

1. Pertama-tama sebagai pemanasan, kita boleh coba dulu tag <hr />. Tag <hr /> adalah tag untuk membuat horizontal line.

(18)

3. Coba ketik tag input, maka akan muncul seperti ini.

4. Kita boleh coba Ctrl+spasi pada spasi setelah input. Apakah akan muncul IntelliSense? Ternyata ya. Maka kita boleh memilih code apa yang ingin kita pakai. Dalam hal ini, kita akan memilih type. Type berguna untuk menentukan penerima input kita itu akan berupa apa, misalnya berupa Button-kah, CheckBox-kah, atau berupa password, dll.

(19)

5. Selanjutnya, kita tulis =” maka akan muncul IntelliSense lagi. Coba pilih text.

menjadi

(20)

7. Kita bisa set ukuran text box-nya, yakni dengan cara menambahkan code lagi di dalam tag input yang type-nya text. Kali ini kita pilih value. Kemudian kita isi valuenya dengan string “ada deh”.

8. Value itu artinya nilai yang berada di dalam input receiver itu. Kita lihat saja bagaimana tampilannya di browser.

(21)

9. Sekarang kita coba input yang bertipe CheckBox. Coba buat di baris yang baru.

(22)

11. Kita mau membuat tiga buah checkbox lagi. Sebaiknya masing-masing checkbox kita beri identitas supaya kita gampang saat memberi perlakukan yang berbeda pada checkbox tertentu. Cara memberi nama/ identitasnya yaitu dengan menggunakan keyword “id”

12. Lihat di sini ada keunikan dari Visual Studio 2008. Cara yang kita tempuh untuk membuat tiga checkbox lagi adalah dengan copy-paste. Baris 21 pertama-tama ditambahkan dengan keyword id=”CheckBox1”. Setelah itu kita copy baris 21, dan di-paste di baris 22, 23, dan 24. Uniknya, Visual Studio 2008 akan secara otomatis mengganti tulisan CheckBox1 di baris 22 dengan CheckBox2, CheckBox1 di baris 23 dengan CheckBox3, dan CheckBox1 di baris 24 dengan CheckBox4. Adapun tulisan option keduaku, option ketigaku, dan option keempatku diperbaiki secara manual oleh programmer.

(23)

14. Atau kalau kita ingin checkboxnya terurut ke bawah, cukup tambahkan pada codenya.

(24)

Latihan Lanjutan (a href)

1. Seperti yang pernah dijelaskan sebelumnya, tag a href adalah tag yang dipergunakan untuk melakukan link-ing. Kita langsung coba saja.

2. Buatlah sebuah halaman page baru di direktori yang sama, dengan nama About.htm. (caranya sama seperti di topic Getting Started With Visual Studio 2008, yaitu klik kanan folder BelajarHTML, pilih Add New Item, pilih HTML Page, tulis namanya, lalu klik Add.

3. Sekarang kita punya dua buah file HTML di folder BelajarHTML.

(25)

5. Tampilannya adalah seperti ini.

6. Sekarang, bagaimana cara menghubungkan kedua page ini? Coba buka kodingan Home.htm. Dengan menggunakan keyword a href, coba ikuti langkah-langkah di bawah ini.

menjadi

(26)

8. Coba lihat tampilannya di browser.

9. Coba klik GoToAbout, maka tampilannya akan berubah menjadi tampilan About.htm.

(27)

10. Agar adil, buatlah a href satu lagi di Home.htm yang merujuk pada dirinya sendiri, dan juga buatlah dua a href di About.htm yang isinya sama dengan yang kita bikin di Home.htm.

(28)

12. Tampilan pada About.htm sekarang:

13. Ketika GoToHome pada halaman About.htm di-klik, maka halaman yang tampil sekarang akan berganti dari About.htm menjadi Home.htm.

(29)

Demikian pula sebaliknya. Apabila kita meng-klik GoToAbout, maka halaman About.htm akan ditampilkan oleh browser.

(30)

Kemudahan Membuat HTML Page Dengan Visual Studio 2008

(2)

Dari pelajaran sebelumnya, kita telah mempelajari cara membuat input, baik yang berupa text, tombol, ataupun checkbox. Dan itu semuanya kita koding sendiri, dengan kata lain kita baru bisa mendapatkannya dengan cara coba-coba dan kita juga mesti capek-capek menulis kode-kode input itu sampai selesai. Dan lagi, kalau kita mau melihat tampilan website itu, kita mesti capek-capek dulu bolak-balik mengeceknya di browser.

Sungguh tidak praktis. Pertanyaannya, kenapa kita mau merepotkan diri kita sendiri, padahal Visual Studio 2008 sengaja menawarkan fitur yang sangat memanjakan programmer, terutama programmer pemula seperti kita. Fitur-fitur apa sajakah itu?

Split View

Selama ini kita menggunakan Source View. Tampilan yang cuma menampilkan kode-kode kita dalam bentuk kodingan html yang sebenarnya. Padahal sebenarnya kita bisa memilih mode view yang kita inginkan. Misalnya Design view, atau Split view. Coba lihat bar yang ada di bawah scroll bar.

1. Sekarang klik Design, untuk memunculkan mode Design view. Mode ini akan menirukan tampilan halaman HTML kita seperti saat ditampilkan pada browser yang sesungguhnya. Kita bisa langsung mengedit dan mengetik di Design view ini, termasuk membubuhkan properti-properti tambahan.

(31)

2. Sekarang coba pilih Split view. Mode ini akan menampilkan gabungan dari design view dan source view, di mana source view akan berada di bagian atas, dan design view akan berada di bagian bawah. Biasakan untuk sering menggunakan mode ini, karena ini sangat bermanfaat bagi kita yang ingin menghandle code-code website dan menghandle tampilannya juga dalam waktu yang bersamaan.

(32)

View in Browser

Kalau sedari tadi, cara kita menampilkan file HTML ini ke dalam browser adalah dengan cara mencarinya lewat Windows Explorer, sekarang kita bisa langsung mengakses browser dengan cara sebagai berikut.

1. Klik kanan area kosong dalam wilayah editor. (baik di Design view ataupun di Source view, sama saja)

(33)

3. Kebetulan dalam komputer ini, browser default pada komputer yang dipakai adalah Safari. Maka tampilannya bila kita saat itu membuka Home.htm, akan jadi seperti ini.

4. Kita bisa mengeset browser default apa yang akan otomatis membuka halaman HTML kita, misalnya Internet Explorer, kita cukup mengatur setingannya saja di Control Panel.

ToolBox

Ini adalah fitur terajaib di antara semuanya. Dengan adanya fitur ini, bahkan anak TK saja bisa membuat sebuah halaman HTML tanpa perlu tahu bagaimana cara mengkoding!

Dengan adanya fitur ToolBox ini, belajar programming dengan Visual Studio sudah seperti sama saja dengan pelajaran DDP (Drag and Drop Programming). 

Di sini, kita bisa menarik dan meletakkan properti-properti web yang sudah disiapkan oleh Visual Studio 2008 untuk menghemat waktu kita menulis code-code. Coba perhatikan bar yang terletak membujur di sisi kiri

(34)

Coba klik bar ToolBox, maka di situ akan keluar tampilan seperti ini.

Kita bisa memilih toolbox apa yang ingin kita pakai dalam website kita? Misalnya Input(Button). Kalau tadi kita mesti mengetik sendiri kode-kodenya, sekarang kita Cuma perlu mengarahkan pointer mouse kita ke pilihan Input

(35)

(Button), klik dan tahan, kemudian tarik dan letakkan ditempat yang kita inginkan yang terlihat pada Design view. Maka jadilah Input(Button) di website kita.

Misalnya, pada contoh kali ini di halaman About.htm, kita coba drag and drop Input(Button), sehingga jadi seperti yang terlihat pada gambar.

Perhatikanlah bahwa code

Sudah secara otomatis dibuatkan oleh Visual Studio 2008. Mudah, kan?

Sekarang kalau kita mau ubah namanya “button” karena kita anggap terlalu jelek, kita bisa ubah langsung di source codenya, atau kalo masih malas sama kodingan, coba lirik window Properties yang ada di sudut kanan bawah. Sebelumnya kita harus pastikan dulu kalau mouse kita dalam kondisi mengeklik Button1.

(36)

Dengan cara menarik scroll bar, carilah baris Value, di sebelahnya tadinya bertuliskan “button”, tapi sekarang kita ganti dengan “Gantiah”.

Sekarang di tampilan website kita, kata button sudah terganti dengan kata Gantiah.

(37)

Membuat Kode Logika

Biasanya, ketika diminta memasukkan suatu input, user tidak hanya sekedar bisa menulis input, tapi kita juga harus melakukan serangkaian perintah yang bergantung pada input yang dimasukkan oleh user. Misalnya, ketika user disuruh mengklik tombol, lantas apa yang akan terjadi? Saat user memilih list, lantas apa yang akan berubah? Kita harus bisa menghandle event-event yang terjadi selama user melakukan interaksi dengan website kita.

Pada Visual Studio 2008, code-code logika akan dimunculkan ketika kita mendouble klik input yang dimaksudkan.

Contohnya. Input(Button) yang tadi kita buat di About.htm

1. Coba double-klik button tersebut. Maka di Source view akan muncul tampilan Javascriptnya. Akan muncul sebuah fungsi baru yang Button1_onclick(), yang secara otomatis akan tereksekusi saat button1 diklik oleh pengguna.

2. Sekarang, terserah kita mau melakukan apa saat button1 diklik. Kodingan disini adalah kodingan dalam bentuk bahasa java, yang kita sebut juga sebagai javascript dalam HTML. Misalnya kita ingin mengubah tulisan Gantiah menjadi TingTong! Saat kita klik, maka kodingannya akan berbentuk seperti ini.

(38)

3. Untuk mengecek perubahan ini, kita tidak bisa melihatnya lewat Design view. Kita harus mengeceknya langsung di browser.

4. Kita lihat lewat View in Browser. Tampilannya akan menjadi seperti ini.

5. Kalau kita klik button lagi, tulisan TingTong! Tidak akan berubah, karena kita menetapkan kalau setiap pengeklikan hanya akan mengubah tulisan di button1 menjadi TingTong! Coba kita modifikasi sedikit kode-kode yang tadi.

6. Sekarang, kalau kita pencet button berulang kali, akan muncul tulisan Gantiah dan TingTong! Secara bergantian.

(39)