Pengenalan Script. Definisi HTML

Transkripsi

1 1 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.

2 2 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 Notepad++ adalah aplikasi editor text gratis yang ringan, dan memiliki banyak fitur. Salah satunya adalah fitur pewarnaan code untuk memudahkan penulisan HTML.

3 3 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.

4 4 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).

5 5 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=" adalah sebuah link</a> Pada kode HTML diatas, href= adalah atribut. href merupakan nama dari atribut, dan adalah value atau nilai dari atribut tersebut.

6 6 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.

7 7 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.

8 8 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:

9 9 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>:

10 10 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.

11 11 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 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!.

12 12 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.