DASAR-DASAR PEMROGRAMAN WEB YANG HARUS DiKETAHUI

Program dan Pemrograman

Program adalah kata, ekspresi, pernyataan atau kombinasi yang disusun dan dirangkai menjadi satu kesatuan prosedur yang berupa urutan langkah untuk menyelesaikan masalah dan diimplementasikan dengan menggunakan bahasa pemrograman sehingga dapat dieksekusi oleh komputer.

Pemrograman yaitu rangkaian instruksi – instruksi dalam bahasa komputer yang disusun secara logis dan sistematis. Proses pemrograman komputer bertujuan untuk memecahkan suatu masalah dan membuat mudah pekerjaan dari user(pengguna komputer).

2.2.      Pengertian Website

Website dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk mempublikasikan informasi berupa teks, gambar dan program multimedia lainnya berupa animasi (gambar gerak, tulisan gerak), suara, dan atau gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait antara satu page dengan page yang lain yang sering disebut sebagai hyperlink.

2.2.1. Perkembangan Websit

Perkembangan teknologi informasi yang kian pesat memacu munculnya situs baru yang dapat diakses melalui jaringan internet. Data dari survey yang dilakkukan oleh Netcraft (http://news.netcraft.com/archives/web_server_survey.html) menunjukkan bahwa sampai pada bulan Maret 2008 ini jumlah website telah mencapai angka 162.662.052 situs dengan 4,5 juta situs baru pada bulan ini. Hal ini memungkinkan jumlah situs baru pada tahun 2008 ini mencapai 60 juta situs atau meningkat 20% dari perkembangan tahun 2007 yang mencapai 50 juta situs baru. Perkembangan jumlah situs ini tidaklah mengherankan karena semakin banyaknya orang yang melakukan blogging baik melalui Google, blogspot.com, ataupun MySpace.Namun demikian, situs yang benarbenar aktif pada bulan Maret 2008 hanyalah 65,6 juta atau 40,33% dari jumlah total situs. Dengan perkembangan jumlah situs yang luar biasa besar ini menuntut para pemrogram web (web programmer) untuk selalu berkreasi menciptakan ideide baru baik dalam desain layout, penggunaan aplikasi server web, maupunoperating system yang dipakai, agar situs yang dibangunnya tidak kandas dalam persaingan. Perkembangan ini juga membuka peluang kerja yang sangat signifikan dalam bidang web programming tidak hanya bagi lulusan IT namun juga bagi mereka yang mau bekerja keras untuk selalu ‘mengoprek’.

2.2.2. Kriteria Web dan Aspek Keamanan Web

Website yang baik harus memenuhi kriteria dalam aspek fungsionalitas, desain, konten, orisinalitas, profesionalisme dan keefektivan. Sesuai dengan kriteria dalam penghargaan website terbaik tingkat dunia (World Best Website Awards), aspek fungsionalitas yang dinilai meliputi: keteraksesan, kecepatan dan bandwidth, kualitas HTML, navigasi dan link, dan legalitas. Sedangkan dalam aspek desain, sub aspek yang dinilai adalah desain grafis, user friendliness,beauty, layout, dan integritas. Dari segi konten, termasuk aspek yang dinilai adalah tujuan, interaktivitas manusia, proses informasi, ekspresi verbal, ketersediaan konten secara detail. Dalam aspek orisinalitas, sub aspek yang dinilai adalah inovasi, kreativitas, teknologi, dan visi. Untuk aspek profesionalisme dan keefektivan meliputi customer service dan respon client, nilai, focus, komponen tambahan, dan keefektifan situs secara keseluruhan. Kriteriakriteria tersebut dinilai untuk penilaian level 1. Untuk penilaian level berikutnya asek yang paling penting adalah sekuritas server dan rangking search engine. Dengan demikian aspek-aspek tersebut di atas dapat dijadikan acuan dalam pembangunan sebuah website yang baik, sehingga peran programer web dalam hal ini sangat penting.

2.2.3. Cara Kerja Website

Pada saat kita mengetikkan sesuatu alamat pada browser maka data akan dilewatkan oleh suatu protokol HTTP melewati port 80 pada server. Alamat ini adalah URL dari suatu situs yang mempunyai alamat yang unik di internet. Web Browser akan mengirimkan suatu aturan yang telah disepakati sebelumnya, aturan ini biasa disebut protokol, standar protokol menggunkan TCP / IP, proses ini dimulai dengan melakukan 3 way handshake antara sumber dan tujuan.

Web browser, suatu aplikasi client yang akan menampilkan halaman web sites dari internet. Web browser di install disisi user ( OS ) menampilkan informasi ke komputer dengan interpreting bahasa pengkodean HTML, dimana homepage berisi gambar, suara, multimedia, dan resources lainnya yang dapat diakses. File coding pada HTML memberikan datanya ke browser apa yang akan ditampilkan ke sisi client. Isi HTML yang akan ditampilkan bukan dari browsernya tetapi dari web servernya dan browser akan menginterpret tag HTML untuk link ke halaman berikutnya.

2.3. HTML

HTML (Hyper Text Markup Language) adalah suatu bahasa yang digunakan untuk menulis halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu Platform tertentu (Platform independent). Dokumn HTML adalah suatu teks biasa, dan disebut sebagai Markup Language karena mengandung tanda-tanda (tag) tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Pada dokumen HTML yang termasuk system hypertext, kita tidak harus membaca dokumen tersebut secara urut dari atas kebawah atau sebaliknya, tetapi kita dapat menuju pada topic tertentu secara langsung dengan menggunakan teks penghubung yang akan membawa anda kesuatu topik atau dokumen lain secara langsung.

HTML (Hyper Text Markup Language) adalah bahasa yang digunakan untuk menulis halaman web, ciri utama dokumen HTML adalah adanya tag dan elemen, Elemen dalam dokumen HTML dikatagorikan menjadi dua yaitu elemen yang berfungsi memberikan informasi tentang dokumen tersebut dan elemen yang menentukan bagaimana isi suatu dokumen ditampilkan di dalam browser. Sedangkan tag dinyatakan dengan tanda lebih kecil ”<” (tag awal) dan lebih besar ”>” (tag akhir). Dalam penggunaannya sebagian kode HTML tersebut harus terletak diantara tag kontainer, yaitu diawali dengan dan diakhiri dengan (tersapat tanda ”/”). Untuk membuat dokumen diperlukan program penyutingan teks (Noteped, Eordpad, Ms Word,dll), dan suatu program browser (Notscape, Internet Explorer).

Dokumen HTML terbagi 3 tag utama yang membentuk struktur dokumen HTML, HEAD dan BODY. HTML berfungsi untuk menyatakan suatu dokumen HTML, tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML dan tag BODY berfungsi untuk menyimpan informasi data yang akan ditampilakan dalam dokumen HTML.

2.3.1. Struktur HTML

sebagai tanda awal dokumen HTML

****** Bagian HEAD ******,

Sebagai informasi page header untuk tag informasi: title, base, isindex, link, script, style & meta.

************************

****** Bagian Body ******

Berisi page atribut seperti backgroun, warna teks, warna link, warna visited link, warna active link dan lain-lain.

2.3.2. HTML Tag

Tag	Keterangan
…	Menyisipkan hyperlink
…

Membesarkan teks …Teks berkedip

…

Menandai sebagai kutipan …Pasangan tag untuk bagian badan dokumen …Menyisipkan pemenggal baris … Mentengahkan teks …Memformat teks …Menampilkan teks dengan penekanan …Menentukan atribut font …Pasangan tag untuk bagian kepala …Pasangan untuk seluruh dokumen …Teks miring …Teks kecil …Membuat garis mendatar …Menampilkan teks dengan penekanan yang kuat _…Teks subscript ^…Text supscript … Judul dokumen

…

Headine

---

…Garis horisontal …Paragraf

…

Form input Menyisipkan Field input …Mendefinisikan item untuk object SELECT …Menu pop up …Menyisipkan field input …Menyisipkan gambar

…

Menyisipkan keterangan deskripsi dalam daftar definisi …Menyisipkan definisi dari dokumen

…

Judul definisi

…

Item daftar

…

Daftar terurut

…

Daftar tidak terurut …Judul untuk tabel … Memuat tabel …Menyisipkan data sel tabel …Menyisipkan sel judul tabel … Mendefinisikan baris tabel

2.3.3. Kelebihan Hyper Text Markup Language (HTML)

HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. Adapun kelebihan-kelebihan HTML antara lain:

1. Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.

2.   Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran digunakan untuk ‘jump’ ke halaman lain, atau link ke halaman di luar web yang bersangkutan.

3. Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave.

4.  Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.

5.   Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan browser.

2.3.4.   Proses implementasi HTML pada Website

Berikut contoh proses implementasi program data HTML pada website:

1.         Heading

Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

2.         Paragraf

Untuk membuat paragraf digunakan tag . Setelah tag Anda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup
. Anda bisa mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.

Contoh:

Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris.

Kepada pengacaranya, ia meninggalkan dua buah surat yang disegel.Yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari.

Surat yang kedua belum diketahui isinya karena disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah

3.         Blockquote

Perintah tag

digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (meng identasi teks) atau menampilkan teks dalam bentuk huruf miring.

Contoh:

Sesuatu yang tidak perlu dicoba

Sesuatu yang kelihatan mengasyikkan tapi sebenarnya lebih banyak menambah masalah pada remaja adalah narkoba, seks, alkohol dan merokok. Jangan sekali kali mencoba jika tidak ingin membuat masalah baru

4.         Preformatted Text

Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).

Contoh:

Edisi yang lalu dibahas tentang membuat billing system untuk warnet yang dapat langsung mencetak tagihan. Kali ini diulas bagaimana menyimpan setiap transaksi dalam database agar bisa diperoleh beberapa laporan secara periodik.

5.         Begin Row (BR)

Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag
membuat baris baru tanpa memberi baris kosong di bawahnya.

Contoh:

Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga cara yang paling sering dilakukan ,yaitu:

Instalasi melalui FTP

Instalasi melalui CDROM

Instalasi melalui partisi DOS

6.         Ukuran Font

Untuk mengatur huruf dokumen HTML digunakan tag . Tag memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.

Contoh:

Ukuran font 1

Ukuran font 2

Ukuran font 3

Ukuran font 4

Ukuran font 5

Ukuran font 6

Ukuran font 7

7.         Jenis Font

Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.

Contoh:

Arial, contoh AC Milan

Verdana , contoh Persebaya

Times New Roman, contoh Indonesia

8.         Warna Font

Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dan sebagainya. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.

Contoh:

PSM Makassar

tetap PSM Makassar kan?

Ini baru Persebaya

9.         Link

Perintah anchor digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah Teks pada browser. Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag . Misalnya . Cara melakukan link ke bagian tersebut adalah teks pada browser.

2.4. Langkah-langkah Membuat Website Sederhana

Berikut ini adalah langkah-langkah untuk membuat website sederhana

1.         Membuka Program Noteped

Klik Start > All Program > Accessories > Notepad untuk membuka program Notepad.

2.         Tampilan Program Notepad

Tampilan program Notepad seperti gambar di bawah ini. Di Notepad ini nanti kita akan mengetik tag HTML untuk membuat sebuah halaman web.

3.         Membuat Bagian Kepala dan Badan Website

Sebuah halaman web terdiri dari dua bagian, yaitu bagian kepala dan badan. Bagian kepala memberi nama website kita, sedangkan bagian badan berisi halaman inti sebuah web. Bagian kepala dan bagian badan ini nantinya akan membentuk sebuah kesatuan halaman website yang akan kita buat. Tuliskan tag tag berikut dalam Notepad untuk membuat bagian kepala dan badan web.

Selamat datang di website saya

, , ,

adalah beberapa contoh tag yang dipakai untuk membangun sebuah halaman website. Pada contoh di atas terlihat bahwa setiap tag mempunyai pasangan yang ditambahi dengan tanda slash (/). Perlu diingat bahwa tidak semua tag mempunyai pasangan seperti contoh di atas, dan tag-tag yang tidak mempunyai pasangan akan kita bahas di nomer selanjutnya. Kalimat atau kata yang kita tuliskan di antara tag merupakan judul atau deskripsi dari website kita. Sedangkan kalimat di antara merupakan isi dari website kita. Kalau sudah anda ketik klik File > Save / Save As , dan simpan dengan nama file index.html. File ini akan mempunyai icon Internet Explorer atau icon web browser lain yang anda gunakan dalam komputeranda. Klik icon ini untuk melihat tampilan halaman web yang telah anda buat.

Terlihat bahwa di bagian atas halam website terdapat kata kata yang anda tuliskan di antara tag , sedangkan dalam badan website terdapat tulisan yang anda tuliskan di antara tag .

4.         Menambah Warna Background website

Warna background website anda dapat anda ubah dengan menambahkan vkata “bgcolor = warna” setelah tag body. Misalnya anda ingin memberi warna hitam website anda maka anda tinggal tambahkan kode berikut :

Bila sudah anda tambahkan ke ketikan anda dalam Notepad kemudian disave, dan selanjutnya tekan tombol refresh dalam web browser anda. Tampilan website anda akan berubah menjadi seperti di bawah ini. Bila anda ingin mengubahnya menjadi warna lainnya anda tinggal ubah warna yang diketik setelah bgcolor, misalnya : red, green, blue, atau warna lainnya.

5.         Menjadikan Gambar Sebagi Background Website

Anda bisa juga menjadikan sebuah gambar sebagai background website anda dengan menambahkan kode : “background = file gambar” setelah tag body. Misalnya anda ingin menjadikan file gambar pemandangan.jpg sebagai background halaman website anda maka anda tinggal tambahkan kode berikut :

Save dan klik refresh. Tampilan website anda akan seperti gambar di bawah ini.

Perlu diingat bahwa menggunakan gambar sebagai background halaman website anda akan memperlambat loading halaman website anda, terutama bila ukuran file gambar ini terlalu besar. Karena itu usahakan sebisa mungkin agar background website anda tidak menggunakan file gambar

6.         Merubah Tulisan dalam Website

Seperti halnya background website, tulisan dalam website pun bisa juga diubah ubah warnanya. Selain itu jenis dan ukuran tulisan bisa juga kita ubah ubah. Untuk itu kita perlu menyisipkan tag dalam tag . Untuk mengubah warna tulisan kita tambahkan kode “color” setelah font, untuk mengubah jenis tulisan kita tambahkan kode “face”, dan untuk mengubah ukuran tulisan kita tambahkan kode “size”. Khusus untuk size kita bisa mengubah ubah ukurannya dari -7 sampai +7, bila nilainya semakin besar maka semakin besar pula huruf yang akan ditampilkan dalam halaman web. Kita bisa mengubah satu, dua, atau tiga pengaruh tag tag di atas secara bersamaan dengan dipisahkan spasi. Misal kode yang kita tuliskan dalam Notepad :

Selamat datang di website saya

Kode di atas berarti memberi pengaruh tulisan warna putih berjenis Verdana dan berukuran +3. Save dan refresh browser untuk melihat pengaruhnya. Anda bia juga menambahkan efek tulisan bergerak dengan menyisipkan tag sebelum kode

Untuk mengatur posisi tulisan bisa kita sisipkan tag di antara tulisan yang kita tuliskan. Posisi kita isi dengan “left”, “center”, atau “right”. Misalkan kita ingin membuat posisi tulisan ke tengah, maka kita ketikkan:

Selamat datang di website saya

7.         Menyisipkan Gambar atau Foto Dalam Website

Anda bisa menyisipkan foto atau gambar anda dalam website anda dengan mengetikkan tag . Misalkan file yang ingin anda masukkan bernama bajaj.jpg, maka tag yang perlu anda tuliskan adalah :

Untuk memberi jarak antara tulisan anda sebelumnya dengan foto ini maka perlu anda tambahkan tag
.

Selamat datang di website saya

Tampilan website anda akan seperti ini. Ukuran gambar bisa anda atur dengan menambahkan kode “height = ukuran”, dan/atau “width = ukuran”. Misalkan anda ingin gambar anda mempunyai tinggi 100 pixel maka anda tinggal tambahkan “height = 100” setelah kode nama file gambar yang anda sisipkan.

8.         Menambahkan Menu dalam Website

Selanjutnya tinggal anda tambahkan menu-menu dalam website anda. Menu standar yang ada dalam web sederhana biasanya adalah profil, galeri foto, dan link. Untuk itu kita perlu menambah halaman baru yang mempunyai nama file profil.html, galeri.html, dan link.html. Untuk membuat halaman halaman ini anda bisa mengulangi langkah langkah yang telah dijelaskan sebelumnya. Untuk menghubungkan halaman utama website dengan halaman halaman tambahan ini kita perlu ketikkan tag dan ditutup dengan bila kita ingin menghubungkan dengan halaman profil, demikian pula untuk halaman web lainnya. Kode berikut akan menampilkan hubungan antar halaman website yang berjejer.

Profil Galeri Link

Klik Save dan refresh sehingga ditampilkan halaman website seperti berikut. Bila link yang anda buat benar maka kursor mouse akan berubah menjadi tangan bila anda dekatkan ke link yang anda buat.

9.         Link untuk Halaman profil, galeri

Untuk halaman profil, galeri, dan link bisa anda tambahkan sesuka anda seperti langkah langkah sebelumnya. Khusus untuk halaman link, anda bisa mengisinya dengan link ke Friendster, Yahoomail, Google, dan sebagainya. Link yang telah dijelaskan di atas bila kita klik maka halaman baru akan dibuka dalam satu jendela browser yang sama. Bila kita ingin tetap menikmati halaman website kita sedangkan kita juga ingin membuka Friendster misalnya, maka kita perlu menambahkan tag “target = “_blank” setelah alamat Friendster. Misal :

Friendster

Bila anda ingin Friendster ini dibuka di halaman web yang sama maka anda

tinggal hilangkan saja “target = “_blank” nya.

10.       Link ke Halaman Profil Berupa Gambar

Bila anda ingin link ke halaman profil anda berupa gambar profil.jpg misalnya, maka anda perlu menyisipkan file gambar di dalam tag . Sehingga dapat kita tuliskan sebagai berikut :

Bila benar maka kursor mouse akan berubah menjadi tangan bila didekatkan ke gambar profil.jpg. Demikian pula bila link ke Friendster atau Yahoomail juga dalam bentuk gambar, maka anda tinggal menambahkan tag di antara tag .

 

sumber : http://antarakojot.blogspot.com/2012/05/dasar-dasar-pemrograman-web-yang-harus.html

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →