Pengenalan Script - UIGM | Login Student

Pengenalan Internet dan Web untuk Mahasiswa
Pengenalan Script
Pada bab ini akan dibahas bahasa script yang dapat digunakan untuk membuat
halaman web. Untuk dapat membuat halaman web bahasa script pertama yang
harus anda kenal adalah HTML. HTML adalah dasar dari semua halaman web yang
kita lihat di Internet. Tetapi, apa sebenarnya HTML?
Definisi HTML
HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena
di dalam HTML sebuah text biasa dapat berfungsi lain(hyper), kita dapat
membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman
lainnya dengan hanya melakukan klik text tersebut. Kemampuan text inilah yang
dinamakan hypertext, walaupun pada implementasinya nanti tidak hanya text yang
dapat dijadikan link.
Disebut bahasa Markup karena bahasa HTML menggunakan tanda (mark), untuk
menandai bagian-bagian dari text. Misalnya, text yang berada di antara tanda
tertentu akan menjadi tebal, dan diantara tanda lainnya akan tampak besar. Tanda
ini akan kita kenal di HTML sebagai tag.
Jika anda ingin melihat bagaimana sebenarnya HTML, silahkan klik kanan halaman
web, dan pilih View Page Source (di Browser Mozilla Firefox atau Google Chrome)
dan akan tampil sebuah dialog baru yang merupakan kode HTML.
1
Pengenalan Internet dan Web untuk Mahasiswa
HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam
membuat web, jika hanya menggunakan HTML, tampilan web kita akan terasa statis.
Terdapat banyak bahasa script web yang ditujukan untuk memanipulasi kode HTML,
seperti JavaScript dan PHP. Namun sebelum anda belajar JavaScript maupun PHP,
memahami HTML merupakan hal yang paling fundamental.
HTML bukan bahasa pemograman (programming language), tetapi bahasa markup
(markup language), hal ini terdengar sedikit aneh, tapi jika anda telah mengenal
bahasa pemograman lain, dalam HTML tidak akan ditemukan struktur yang biasa di
temukan dalam bahasa pemograman seperti IF untuk kondisi, LOOP untuk
pengulangan, maupun variabel. HTML hanya sebuah bahasa struktur yang fungsinya
untuk menandai bagian-bagian dari sebuah halaman.
Memilih Aplikasi Editor HTML
Memilih sebuah aplikasi editor HTML tidak sulit. Aplikasi editor HTML digunakan
untuk mempermudah kita membuat kode HTML. HTML sendiri pada dasarnya hanya
text biasa yang ditulis dalam kode-kode khusus. Kerja Web Browser yang akan
menerjemahkan kode HTML ini menjadi sebuah tampilan halaman web.
Untuk membuat kode HTML maupun halaman web sederhana, kita tidak perlu
menggunakan aplikasi yang besar dan berat. Aplikasi Notepad dari Windows sudah
cukup untuk membuat kode HTML. Namun untuk editor yang lebih baik anda dapat
menggunakan aplikasi Notepad++.
Aplikasi Notepad++ ini dapat diinstall secara gratis dari http://notepad-plusplus.org/download/. Notepad++ adalah aplikasi editor text gratis yang ringan, dan
memiliki banyak fitur. Salah satunya adalah fitur pewarnaan code untuk
memudahkan penulisan HTML.
2
Pengenalan Internet dan Web untuk Mahasiswa
Bagaimana dengan Adobe Dreamweaver? Aplikasi ini merupakan aplikasi web editor
yang paling populer. Dreamweaver menyediakan fitur melimpah untuk sekedar
membuat halaman web dengan kode HTML. Dreamwever tidak hanya sebuah text
editor untuk HTML saja, namun juga untuk berbagai bahasa pemograman dan script
web lainnya. Tetapi aplikasi ini tidak gratis dan cenderung ‘berat’.
Tetapi apapun text editor yang digunakan, tidak menjadi masalah, karena selama
text editor itu dapat menulis dan menyimpan text, aplikasi tersebut sudah lebih dari
cukup.
Menjalankan File HTML
Untuk memudahkan dalam mengakses file, sebaiknya buat sebuah folder baru di
Drive D computer anda. Folder ini akan kita jadikan tempat seluruh halaman HTML
yang akan dibuat.
Selanjutnya, buka aplikasi Notepad++ atau aplikasi text editor lainnya, lalu ketik text
berikut ini:
Selamat Pagi Dunia, Hello World!
Lalu save sebagai hello.html pada folder di Drive D. Setelah itu jalankan file
hello.html dengan cara double klik file tersebut, atau klik kanan –> Open With –>
Firefox (Jika menggunakan web browser firefox).
Selamat, file HTML kita sudah dapat berjalan, walaupun sebenarnya belum ada
satupun kode HTML didalamnya.
3
Pengenalan Internet dan Web untuk Mahasiswa
Tag dalam HTML
Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web
browser apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list,
atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag.
Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka
dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag
pembuka dan tag penutup ini. Objek disini dapat berupa text, gambar, maupun
video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”.
Berikut adalah format dasar penulisan tag HTML:
<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>
Sebagai contoh, perhatikan kode HTML berikut :
<p> Ini adalah sebuah paragraf </p>

<p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.

</p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka
terletak dari tanda backslash(/)
Jika lupa memberikan penutup tag, umumnya browser akan “memaafkan” hal ini
dan tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup.
Walaupun hal ini memudahkan kita, namun tidak disarankan.
Contoh lainnya, jika kita ingin membuat suatu text dalam sebuah paragraf di tulis
tebal atau miring, di dalam HTML dapat ditulis sebagai berikut:
<p>Ini adalah sebuah paragraf. <i>Hanya kumpulan beberapa kalimat</i>.
Paragraf ini terdiri dari <b>3 kalimat</b></p>.
Hasil dari kode HTML diatas, diterjemahkan oleh browser menjadi:
“Ini adalah sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini
terdiri dari 3 kalimat.”
Tag <i> pada kode HTML diatas memberikan perintah kepada browser untuk
menampilkan text secara garis miring (i, singkatan dari italic), dan tag <b> untuk
menebalkan tulisan (b, singkatan dari bold).
4
Pengenalan Internet dan Web untuk Mahasiswa
Terdapat pengecualian beberapa tag yang tidak berpasangan, seperti <br> untuk
break (pindah baris) atau <hr> untuk horizontal line (garis horizontal). Tag ini dikenal
juga dengan sebutan self closing tag atau void tag, untuk penulisannya bisa ditulis
dengan <br>, maupun <br />.
HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>.
Pada awal kemunculan HTML, programmer web umumnya menggunakan huruf
besar untuk seluruh tag agar membedakan dengan text yang berupa isi dari web.
Namun varian HTML, xHTML mewajibkan huruf kecil untuk semua tag.
Elemen dalam HTML
Elemen adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.
Sebagai contoh, berikut adalah kode HTML:
<p> Ini adalah sebuah paragraf </p>
Pada contoh diatas, “Ini adalah sebuah paragraf” merupakan elemen dari tag <p>.
Elemen tidak hanya berisi text, namun juga bisa tag lain.
Contoh elemen:
<p> Ini adalah sebuah <em>paragraf</em> </p>
Dari contoh diatas, Ini adalah sebuah <em>paragraf</em> merupakan elemen dari
tag <p>.
Atribut dalam HTML
Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa
berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut
memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”. Value
diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).
Contoh kode HTML:
<a href="http://www.duniailkom.com">ini adalah sebuah link</a>
Pada kode HTML diatas, href=”http://www.duniailkom.com” adalah atribut. href
merupakan nama dari atribut, dan http://www.duniailkom.com adalah value atau
nilai dari atribut tersebut.
5
Pengenalan Internet dan Web untuk Mahasiswa
Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag
dengan atribut, terutama atribut id dan class yang sering digunakan untuk
manipulasi halaman web menggunakan CSS maupun JavaScript.
HTML memiliki banyak atribut yang beberapa diantaranya hanya cocok untuk tag
tertentu saja. Sebagai contoh, atribut “href” diatas hanya digunakan untuk tag <a>
saja (dan beberapa tag lain).
Struktur Dasar HTML
Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari : Tag DTD
atau DOCTYPE, tag html, tag head, dan tag body. Inilah yang merupakan struktur
paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.
Agar lebih mudah memahaminya, silahkan buka text editor (Notepad++), lalu
ketikkan kode berikut ini:
Contoh struktur dasar HTML:
Save sebagai halaman.html dan jalankan file dengan cara double klik pada file
tersebut, atau klik kanan –> Open With –> Firefox. Kita akan membahas tag-tag
yang ditulis tersebut pada pembahasan selanjutnya.
6
Pengenalan Internet dan Web untuk Mahasiswa
Tag <html>
Elemen tag <html>.
Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML akan
berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan
</html>
Tag <head>
Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman, seperti
kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.
Tag <title> dalam contoh sebelumnya digunakan untuk menampilkan title dari
sebuah halaman web, dan biasanya ditampilkan pada bagian paling atas web
browser. Contohnya pada tampilan halaman.html, ‘Title dari Websiteku’ akan
ditampilkan pada tab browser.
Tag <body>
Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, seperti
paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>. Sebagian
besar waktu kita dalam merancang web adalah di dalam tag <body> ini.
Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk <html>
yang merupakan tag paling awal dari sebuah halaman web.
Stuktur HTML yang kita bahas disini adalah struktur dasar. Sebuah halaman web bisa
memiliki ratusan bahkan ribuan baris, dan menggunakan berbagai tag HTML.
Membuat Judul (heading) di HTML
HTML menyediakan tag khusus untuk membuat judul atau didalam HTML lebih
dikenal dengan istilah: heading. Heading dirancang terpisah dari paragraf. Tag
Heading biasanya digunakan untuk judul dari paragraf, atau bagian dari text yang
letaknya paling atas.
Tag heading di dalam HTML terdiri dari 6 level, yaitu <h1>, <h2>, <h3>, <h4>, <h5>,
dan <h6>. Tag heading secara default akan ditampilkan oleh web browser dengan
huruf tebal (bold). Tampilan dari tag header juga dibuat bertingkat. Tag header <h1>
memiliki ukuran huruf paling besar, sedangkan <h6> terkecil.
7
Pengenalan Internet dan Web untuk Mahasiswa
Berikut adalah contoh penggunaan tag heading di dalam HTML:
Biasanya dalam sebuah halaman akan ada hanya 1 tag <h1>, dan beberapa tag <h2>
dan <h3> dengan beberapa tag <p>. Berikut adalah contoh struktur artikel HTML
sederhana dengan menggunakan tag <p> dan beberapa tag heading:
8
Pengenalan Internet dan Web untuk Mahasiswa
Dengan menggunakan beberapa tag heading dan paragraf, kita bisa membuat
struktur sederhana konten HTML.
Search Engine seperti Google akan memberikan nilai lebih untuk heading. Biasanya
semakin tinggi tingkat heading, semakin tinggi pula penekanan search engine. Tag
<h1> dianggap lebih bernilai dari pada <h2>. Tag <h1> umumnya digunakan untuk
judul sebuah artikel, sehingga dianggap dapat mewakili keseluruhan artikel.
Cara membuat Tabel
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag
<tabel>, tag <tr>, dan tag <td>:

Tag <tabel> digunakan untuk memulai tabel

Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris
dari tabel.

Tag <td> adalah singkatan dari table data, digunakan untuk menginput data
ke tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:
Contoh penggunaan tag <tabel>:
9
Pengenalan Internet dan Web untuk Mahasiswa
Ketika dijalankan hasilnya seperti dibawah ini
Perhatikan bahwa pada tag <tabel> kita memberikan atribut border. Atribut border
digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel.
border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut
akan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel
tidak memiliki garis tepi.
10
Pengenalan Internet dan Web untuk Mahasiswa
Sebelum standar CSS diimplementasikan ke dalam semua browser, pada sekitar
tahun 2000-an kebanyakan programmer dan desainer web menggunakan tabel
untuk mengatur tampilan web. Membuat menu ada di atas dan sisi kanan web bisa
dilakukan dengan menjadikan halaman web sebagai sebuah tabel yang besar. Hal ini
sebenarnya tidak salah, namun akan membuat pengkodean HTML menjadi rumit.
Saat ini anda masih bisa menggunakan ide tersebut, namun sangat disarankan
menggunakan CSS untuk mengatur tampilan halaman web.
Demikian pembahasan mengenai HTML pada bab ini. Untuk lebih mengetahui dan
memahami lebih lanjut tentang bahasa HTML silakan mengunjungi website
http://www.duniailkom.com
Selanjutnya akan dibahas bahasa script yang lain, yang lebih dinamis dari bahasa
HTML, yaitu bahasa PHP.
Bahasa PHP
PHP: Hypertext Preprocessor adalah bahasa script yang dapat ditanamkan atau
disisipkan ke dalam HTML. Pada dasarnya struktur bahasa php memiliki banyak
kesamaan dengan struktur bahasa HTML. Sama seperti HTML, PHP juga memiliki tag,
elemen dan atribut. Namun tag, elemen dan atribut yang dimiliki PHP lebih ‘kaya’
dan powerful dibanding HTML. Berikut ini contoh sederhana penggunaan bahasa
script PHP yang disisipkan pada kode HTML.
Ketika dijalankan pada localhost hasilnya adalah sebagai berikut
Disini dapat dilihat php menggunakan elemen/sintaks ‘echo’ untuk menampilkan
teks ‘My first PHP script!’.
11
Pengenalan Internet dan Web untuk Mahasiswa
Sintaks Dasar PHP
Tag / Pembatas
PHP hanya menjalankan kode yang ditulis dalam tag pembatas. Apapun di luar
pembatas tidak diproses oleh PHP, meskipun teks PHP ini masih mengendalikan
struktur yang dijelaskan dalam kode PHP. Pembatas yang paling umum adalah
"<?php" untuk membuka dan "?>" Untuk menutup kode PHP. Tujuan dari pembatas
ini adalah untuk memisahkan kode PHP dari kode selain PHP, seperti HTML, CSS dan
Javascript.
Variabel
Variabel diawali dengan simbol dollar $. Pada versi PHP 5 diperkenalkan jenis isyarat
yang memungkinkan fungsi untuk memaksa simbol menjadi parameter objek dari
class tertentu, array, atau fungsi. Namun jenis petunjuk tidak dapat digunakan
dengan jenis skalar seperti angka atau string. Contohnya variabel dapat ditulis
sebagai $nama_varabel.
Penulisan fungsi, penamaan kelas, nama variabel bersifat peka (case sensitive) akan
huruf besar (Kapital) dan huruf kecil . Kedua kutip ganda "" dari string memberikan
kemampuan untuk interpolasi nilai variabel ke dalam string PHP. PHP
menterjemahkan baris sebagai spasi, dan pernyataan harus diakhiri dengan tanda
semicolon atau titik koma ;.
Komentar
PHP memiliki 3 jenis sintaks sebagai komentar pada blok kode yaitu tanda / * * / ,
komentar 2 baris // Serta tanda pagar # digunakan untuk komentar satu baris.
Komentar bertujuan untuk meninggalkan catatan atau dokumentasi pada kode PHP
dan tidak akan dieksekusi ke program.
Fungsi
PHP menyediakan ratusan fungsi utama dan bahkan ribuan fungsi eksternal yang
tersedia melalui berbagai ekstensi tambahan. fungsi-fungsi ini didokumentasikan
dalam dokumentasi PHP.
12