CARA PEMBUATAN WEB STATIS

 Web Statis

Web merupakan fasilitas hypertext untuk menampilkan data berupa teks,gambar,suara,animasi,dan data multimedia lainnyajika anda ingin meguasai web maka anda perlu  mengenal itu bahasa HTML dan PHP.HTML merupakan bahasa pemrogrman web yang merupakan  pada kategori script client side sedangkan PHP merupakan salah satu script(perintah-perintah program) server side yang sangat populer diterapkan dalam sebuah web.web dapat menjadi alat untuk mempromosikan suatu produk maupun diri kita sendiri jika ingin terkenal  lewat web.web mengalami perkembangan yang sangat pesat dewasa ini.mulai dari situs web e-commerce sampai web non-profit.Situs/web dapat dikategorikan menjadi dua yaitu web statis dan web dinamis..

1.       Web statis

Web statis adalah web yang berisi/menampilkan informasi –informasi yang sifatnya statis(tetap).disebut statis karena pengguna tidak dapat berinteraksi dengan web tersebut.singkatnya,untuk mengetahui suatu web bersifat statis atau dinamis dapat dilihat

Dari tampilannya.jika suatu web hanya berhubungan dengan halaman web lain dan berisi informasi yang tetap maka web tersebut disebut dengan web statis.pada web statis,pengguna hanya dapat melihat isi dokumen pada halaman web dan apabila diklik akan berpindah ke halaman web yang lain.interaksi pengguna hanya terbatas dapat melihat informasi yang ditampilkan .tetapi tidak dapat mengolah informasi yang dihasilkan.web statis biasanya merupakan HTML yang ditulis pada editor teks dan disimpan dalam bentuk .Html atau .htm

2.       Web Dinamis

Web dinamis adlah web yang menampilkan informasi serta dapat berinteraksi dengan pengguna.web yang dinamis memungkinkan pengguna untuk berinteraksi menggunakan form sehingga dapat mengolah informasi yang ditampilkan.web dinamis bersifat interaktif,tidak kaku,dan terlihat lebih indah.

3.       Pemrograman Web

Ada 2 kategori dalam pemrograman web,yaitu pemrograman server side dan client side.pada pemrograman server-side.perintah-perintah program (script) dijalankan di server web.kemudian hasil dikirimkan dalam bentuk HTML biasa.Adapun pada client side,program

Dijalankan pada browser web sehingga ketika klien meminta dokumen script maka script

Dapat didownload dari server kemudian dijalankan pada browser bersangkutan.

4.       Mengenal script client side

Program web yang tergolong dalam client side seperti Javascript,Vbscript,HTML,dan lain-lain.hasil parsing script pemrograman client side (misal javascript dan Vbscript) yang berupa HTML dari server web dapat dilihat dengan memilih menu view >Source Code.Anda dapat melihat bahwa script program yang ditulis ditampilkan pada halaman source code.

5.       Javascript

Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995.pada awalnya bahasa ini dinamakan “Livescript” dan berfungsi sebagai bahasa sederhana utnuk browser Netscape

Navigator 2.Pada masa awal dirilis,bahasa ini banyak dikritik karena kurang aman.tidak ada pesan kesalahan yang ditampilkan saat kita membuat kesalahan program.kemudian sejalan

Dengan kerjasama antara Netscape dengan Sun(pengembang bahasa pemrograman Java) pada masa itu,maka netscape memberi nama “Javascript” kepada bahasa tersebut pada tanggal 4 Desember 1995.Javascript adalah bahasa pemrograman sederhana karena bahasa ini tidak dapat digunakan untuk membuat aplikasi ataupun applet.dengan  Javascript kita dapat dengan mudah  sebuah halaman web yang interaktif.program Java script dituliskan pada file HTML.dengan kata lain anda tidak perlu menuliskan program Javascript pada file terpisah (walaupun anda juga bisa melakukannya).Bahasa ini adalah bahasa  pemrograman untukn memberikan kemampuan tambahan terhadap bahasa HTML.dengan mengizinkan

Pengeksekusian perintah di sisi klien,yang artinya disisi browser bukan disisi server web.Javascript bergantung kepada browser yang memanggiol halaman web berisi script.Javascript tidak memerlukan kompilator atau penerjemah khusus untuk menjalankannya.Pada Javascript kita tidak mungkin menyembunyikan kode script yang kita tulis.kode langsung ditulis dalam dokumen HTML dan sangat mudah terlihat.Javascript adalah bahasa yang “case-sensitive”.artinya,membedakan penamaan variabel dan fungsi

Yang menggunakan huruf besar dan huruf kecil.contoh Variabel atau fungsi dengan nama “KICKADY” berbeda dengan variabel nama” kickady”(tanpa tanda petik).Javascript terletak di dalam dokumen HTML. Script dari Javascript mempunyai bentuk seperti berikut :

<SCRIPT LANGUAGE=”JAVASCRIPT”>

Letakkan script anda disini

</SCRIPT>

Struktur Dokumen HTML

Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML diapit oleh tag awal <HTML> dan tag akhir </HTML>. Standar penulisannya adalah:
<HTML>
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
Contoh:
<HTML>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>
</HEAD>
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
</BODY>
</HTML>

Menambah Objek Gambar

Biasanya orang menggunakan gambar untuk memperindah situsnya. HTML menyediakan tag <IMG> untuk menampilkan gambar dalam halaman web. Dari berbagai macam format gambar yang ada, hanya beberapa saja yang bisa dipergunakan dalam membuat halaman web. Format gambar yang paling sering digunakan adalah GIF dan JPEG. Format penulisannya adalah:

<IMG SRC = “file_gambar” ALT = “nama_alternatif”>

Atribut SRC digunakan untuk menentukan sumber gambar. Atribut ALT berfungsi sebagai teks pengganti gambar untuk browser yang tidak bisa mendukung grafik, atau pada pihak client sengaja mematikan fasilitas pemanggilan gambar.
Contoh:

<HTML>

<HEAD>

<TITLE>Menambah Objek Gambar</TITLE>

</HEAD>

<BODY>

<IMG SRC="1.gif">

</BODY>

</HTML>

<HTML>

 Table

Tabel banyak digunakan karena dapat menampilkan informasi dengan bentuk yang ringkas dan mudah dibaca. Untuk membuat tabel digunakan tag awal <TABLE> dan tag penutup </TABLE>. Tag <TABLE> mewakili beberapa bagian penting, yaitu:

• CAPTION> … </CAPTION> digunakan untuk membentuk judul tabel. Judul tabel ini akan terletak diluar tabel, bisa di bagian atas atau bagian bawah tabel
• <TH> … </TH> berfungsi untuk meletakkan judul tabel di bagian peling atas atau paling kiri dari suatu tabel
• <TD> … </TD> digunakan sebagai tempat menulis data atau informasi dalam tabel

<HEAD>

<TITLE>Tabel</TITLE>

</HEAD>

<BODY>

<TABLE>

<CAPTION>Judul Tabel</CAPTION>

<TR>

<TH>Judul kolom 1</TH>

<TH>Judul kolom 2</TH>

</TR>

<TR>

<TD>baris 2, kolom 1 </TD>

<TD> baris 2, kolom 2</TD>

</TR>

<TR>

<TD> Apa aja </TD>

<TD> Apa aja </TD>

</TR>

<TR>

<TD>Jabarnur</TD>

<TD>Jabarnur resmi jadi anak bageur</TD>

</TR>

<TR>

<TD>Bebas</TD>

<TD>Naon we lakh <BR>

Puyeung…!!!</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Link

Perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada browser</A>.
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 <A>. Misalnya <A NAME = “Bugs”</A>. Cara melakukan link ke bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A>.
Contoh:
<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
<BODY>
<A NAME="lengkap">Pemain-pemain AC Milan menurut abjad</A>
<BLOCKQUOTE>
<P>Abbiati ,<A HREF="#abbiati">info lengkap</A>
<P>Ayala
<P>Ambrosini
<P>Albertini
<P>Boban
<P>
<A HREF="linktujuan.html">kalo mau tahu lagi klik disini</A>
</BLOCKQUOTE>
<P><A NAME="abbiati">Abbiati</A>
<BLOCKQUOTE>
<P>Kiper ketiga timnas Italia runner up Euro 2000
<BR>Kiper utama U-21 juara Piala Eropa U-21
<BR>Kiper utama AC Milan juara Seri-A 1998-1999
</BLOCKQUOTE>
<P><A HREF="#lengkap">kembali ke atas</A>
</BODY>
</HTML>

membuat halaman web statis menggunakan bantuan tabel. Fungsinya, agar lebih rapi dan mudah dipahami. Sebaiknya agan baca artikel diatas.

Oke, untuk membuat web statis kita persiapkan tool kita yaitu text editor. Bisa notepad++, dreamweaver, dll. Selanjutnya, kita buka text editor dan mulai membuat web statis. Kita akan membuat web pribadi yang berisi data diri, hobby, galery. Cukup 3 halaman saja, jika ingin tambah silahkan agan kembangkan sendiri. Oke…

Membuat web statis halaman biodata.html

Oke, langkah awal membuat suatu halaman web html adalah dengan perintah berikut ini:

<html>
<head>
<title>Halaman Biodata</title>
</head>
<body>
</body>
</html>

Save dengan nama biodata.html pada folder namanya web statis atau apa yang agan suka. Untuk setiap tag html di atas jika agan belum paham silahkan baca dasar html link di atas tadi. Di situ sudah saya jelaskan dengan gamblang. he…

Next, selanjutnya kita isi halaman biodata.html dengan table. caranya sebagai berikut:

<body>
<center>
<table width=”80%” border=”1″>
<tr>
<td colspan=”2″>Header web</td>
</tr>
<tr>
<td width=”26%”>sidebar kiri</td>
<td width=”74%”>Isi web</td>
</tr>
<tr>
<td colspan=”2″>Footer</td>
</tr>
</table>
</center>
<body>

Nah, kita save lalu kita buka file biodata.html tadi dengan mozilla. Biasanya file sudah otomatis terindex oleh mozilla/web browser agan. berikut gambarnya:

membuat web statis dengan tabel selanjutnya adalah mengisi setiap kolom yang ada. baik header, sidebar, isi web, dan footer. pada kolom header kita isi dengan kata yang biasanya menggunakan tag <h1></h1>. Silahkan pelajarin pada Mengatur Format Teks Pada HTML. Nah, Kita isi dengan

<h1> Web Profil Ganang</h1>

Selanjunya pada Sidebar Kiri kita isi lagi dengan Link untuk menuju halaman Hobby dan Galery. Caranya sebagai berikut, ganti tulisan “sidebar kiri” menjadi:

<a href=”hobby.html”> Halaman Hobby</a><br>
<a href=”galery.html”> Halaman Galery</a>

Dan Untuk “Isi Web” Kita ganti dengan informasi biodata yang akan kita tampilkan pada web statis yang kita buat. Bebas saja, tapi saya contohkan sbb:

<h3>Halaman Biodata Ganang</h3>
<p>Selamat datang diwebsite pribadi ganang julianto, ini merupakan web profil saya dimana terdapat data mengenail saya dan juga foto galery saya</p>
<p>Berikut detail biodata saya:</p>
<p>Nama : Ganang </p>
<p>Alamat : Bantul, Yogyakarta</p>
<p>Skolah : STMIK ELRAHMA YK</p>
<p>Agama : Islam</p>

Dan pada “Footer” kita ganti dengan tulisan copy right. caranya:

<center>&copy; Copyright 2014</center>

Save file biodata.html lalu jalankan kembali/reflesh pada browser. Maka hasil dari pembuatan web statis sederhana di atas adalah:

Jika file biodata agan tidak berhasil, download saja file biodata.html disini.

Oke, Web statis sederhana dengan tabel html sudah jadi satu halaman biodata. Selanjutnya kita buat halaman hobby dan galery. caranya mudah, kita tinggal save as pada file biodata.html tadi dan kita beri nama dengan hobby.html. Dalam hal ini artinya kita tinggal edit isi halaman saja dan kerangkanya sama. Yang harus diganti pada hobby.html adalah sidebar dan isi web.

Pada sidebar kita ganti link “Halaman Hobby” dengan “Halaman Biodata”. caranya sbb:

<a href=”biodata.html”> Halaman Biodata</a><br>
<a href=”galery.html”> Halaman Galery</a>

Dan untuk isi web kita ganti dengan keterangan tentang hobby kita. saya contohkan sbb:

<h3>Halaman Hobby Ganang</h3>
<p>Halaman ini berisi hobby saya dan kegemaran saya baik yang sering lakukan maupun

jarang. </p>
<p>Berikut Hobby saya:</p>
<ol>
<li>Lari-lari</li>
<li>Badminton</li>
<li>Bersepeda</li>
<li>Internetan</li>
<li>Memancing</li>
</ol>

Kita save halaman html hobby.html. Lalu kita jalankan, maka membuat web statis halaman hobby sbb:

Jika tidak berhasil file agan download hobby.html disini dan coba jalankan. cara membuat web statis dengan html ini cukup mudah kan? halaman biodata dan hobby sudah selesai. berikutnya adalah membuat web statis halaman galery. Masih sama, kita save as halaman hobby dan beri nama galery.html. Kita ganti link sidebar galery dengan hobby. caranya sbb:

<a href=”biodata.html”> Halaman Biodata</a><br>
<a href=”hobby.html”> Halaman Hobby</a>

Dan untuk isinya kita menampilkan gambar tentang kita. untuk penjelasan lengkap menampilkan gambar di html ada pada halaman Menyisipkan Gambar di HTML. Gambar yang ditampilkan kita siapkan. pilih Gambar dari komputer, lalu letakkan gambar persis satu folder dari file html yang kita buat (biodata.html, hobby.html, dan galery.html).  Oke langsung saja pada perintahnya:

<h3>Halaman Galery Ganang</h3>
<p>Halaman ini berisi foto saya</p>
<img src=”gowes3.jpg” width=”200″ height=”200″>

Save dokumen. Maka web statis halaman galery yang kita buat di atas jika kita jalankan akan tampil seperti ini:

Download file galery.html disini. Em, maaf jika gambar kurang jelas. saya kompres soalnya. Gimana mudah cara membuat web statis dengan tabel html kan? Jika kita akan pindah halaman, tinggal klik pada sidebar berupa link.

Membuat halaman website statis menjadi indah atau menarik bisa kita lakukan dengan cara memberi background halaman dan memberi background pada tabel. untuk halaman bisa kita atur dengan mengedit tag <body>. caranya kita ganti dengan warna hijau:

<body bgcolor=”green”>

Untuk tabel Utama, kita beri warna latar putih. dengan cara :

<table width=”60%” border=”1″ bgcolor=”white”>

Selanjutnya pada header dan footer kita ganti dengan background warna kuning.Caranya pada tag <td> kita tambah bgcolor juga, sbb:

<td colspan=”2″ bgcolor=”yellow”>

Pada sidebar kiri, kita beri warna biru muda dengan kode hex sbb:

<td width=”26%” bgcolor=”B6FAF8″>

Selanjutnya kita save. Dan kita jalankan atau reflesh maka hasil dari membuat web statis menjadi indah dan keren sebagai berikut: