Dasar pembuatan web (html)

--- Edi Casnadi (2010) ----

MODUL DASAR WEB

Di Susun Oleh

Edi Casnadi, MT

Bandung, 2010

--- Edi Casnadi (2010) ----

MATERI PELATIHAN WEB

1. Pengantar Web

2. Materi Web a. Pengenalan Web

b. Pengenalan Dreamwaver

c. Dasar HTML

d. Xampp

--- Edi Casnadi (2010) ----

KATA PENGANTAR

Puju syukur penulis panjatkan kehadirat Tuhan YME atas rahmat-dan hidayah-Nya, sehingga penulis dapat menyelesaikan pembuatan Modul Web. Pada dasarnya modul ini mempelajari dasar bagaimana cara pembuatan web dari dasar sampai bisa membangun suatu web yang siap online.

Salam buat keluarga besar Bapak Wastika (alm). Semoga

\

--- Edi Casnadi (2010) ----

PENGENALAN WEB

Pada dasarnya Website adalah sebuah cara untuk menampilkan diri Anda di Internet. Website Anda adalah sebuah tempat di Internet, siapa saja di dunia ini dapat mengunjunginya, kapan saja mereka dapat mengetahui tentang diri Anda, memberi pertanyaan kepada Anda, memberikan anda masukan atau bahkan mengetahui dan membeli produk Anda Internet (Inter-Network) adalah sebutan untuk sekumpulan jaringan komputer seluruh dunia baik yang menghubungkan situs akademik, pemerintahan, komersial, organisasi, maupun perorangan. Internet menyediakan akses untuk layanan telekomnunikasi dan sumber daya informasi untuk jutaan pemakainya yang tersebar di seluruh dunia. Layanan internet meliputi komunikasi langsung (email, chat), diskusi (Usenet News, email, milis), sumber daya informasi yang terdistribusi (World Wide Web, Gopher), remote login dan lalu lintas file (Telnet, FTP), dan aneka layanan lainnya. Berikut konfigurasi cara kerja dari internet.

Browsing merupakan suatu kegiatan untuk menjelajahi internet. Menjelajahi internet berarti mencari informasi dengan cara mengunjungi website -website yang ada di internet. Contoh dari Browser yaitu: Mozilla Firefox, Internet Explorer, Opera, Sapari dll. Untuk membangun suatu website, dibutuhkan suatu bahasa tertentu, diantaranya html, css, javascript, php dll.

--- Edi Casnadi (2010) ----

PENGENALAN DREAMWAVER

Dreamwaver merupaka suatu software untuk membuat suatu halaman web dengan berbagai bahasa seperti HTML, CSS, ASP, XML dll. Berikut tampilan dari Dreamwaver CS3.

Cara membuka halaman html File > New> HTML

--- Edi Casnadi (2010) ----

PENGENALAN HTML

A. HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language) merupakan suatu bahasa teks tingkat tinggi yang bekerja untuk membangun suatu dasar web. Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang, seperti Notepad, Dreamwaver, Editplus, flash, Netbeans dll. Dokumen HTML ini dikenal sebagai webpage. Dokumen HTML merupakan dokumen yang terdapat dalam browser web. Pada umumnya file HTML berekstensi .htm atau .html. Nama file/dokumen HTML boleh kombinasi antara huruf kecil dan huruf besar. Tetapi umumnya, di internet suatu file HTML ditulis dengan menggunakan huruf kecil, dikarenakan ada beberapa sistem operasi yang membedakan antara huruf kecil dan huruf besar yang bertujuan untuk mengidentifikasi antara sintaks dan suatu kalimat/statmenet.

B. TAG HTML Setiap penandaan elemen dari dokumen html menggunakan suatu tag. Tag HTML diawali dengan sebuah tanda lebih kecil ( < ) nama tag dan diakhiri dengan tanda lebih besar ( > ). Contoh membuat suatu tag <body> atau <br> atau <html> dll. Penulisan nama tag boleh dikombinasi antara huruf kapital dan huruf kecil. Kebanyakan jenis tag diharuskan memiliki pasangan, jika tidak memiliki pasangan maka dianjurkan menggunakan tanda ( / ) yang diletakan pada akhir tag dalam satu tag. Contoh <br/> yaitu untuk pindah baris, <hr/> yaitu untuk membuat garis horizontal, <img src”..” /> dll. Sedangkan untuk tag yang berpasangan biasanya diawali dengan <nama tag> dan kemudian di bagian akhir ditutup dengan </nama tag>. Contoh <html></html> merupakan sintaks dasar html, <p>ini paragrap</p> untuk membuat suatu paragraf, <marquee>Web Pertama Aku</marquee>, elemen tersebut merupakan perintah untuk membuat suatu teks agar berjalan. Contoh tag tertutup lainnya <b>Ini Huruf Tebal</b>, dll.

C. ELEMEN DASAR HTML Elemen-elemen dasar yang digunakan untuk membuat suatu dokumen HTML adalah menggunakan tag <html> dan </html>, tag <head> dan </head>, tag <title> dan </title>, dan tag <body> dan </body>.

--- Edi Casnadi (2010) ----

Contoh : <html> <head> <title> Web Pertama Ku </title> </head> <body> Disinilah isi dokumen html ditulis. </body> </html>

keterangan : <html> dan </html> : merupakan suatu tag yang menunjukan bahwa dokumen tersebut merupakan dokumen HTML. <head> dan </head> : merupakan yang berisi pengenalan/informasi tentang

dokumen tersebut <title> dan </title> : merupakan judul dari dokumen halaman web. <body> dan </body> : merupakan tag yang menandakan awal dan akhir dari

badan dari dokumen html. Hasil output:

--- Edi Casnadi (2010) ----

D. PENGATURAN TAMPILAN WEBSITE

TAG PENGATURAN TEKS Untuk menampilkan dokumen supaya bisa terlihat lebih baik, maka ada beberapa

tag yang perlu diketahui. Tag-tag tersebut diantaranya berguna untuk mempertebal tulisan (bold), meng-italic-an tulisan, menggarisbawahi tulisan, pengaturan paragraf dan lain-lain. Tag-tag tersebut diantaranya :

Tag Awal Tag Akhir Kegunaan <b> </b> Untuk huruf tebal <i> </i> Untuk huruf miring <u> </u> Untuk garis bawah pada huruf <big> </big> Memperbesar teks 1 tingkat <small> </small> Memperkecil teks 1 tingkat <strong> </strong> Memberikan efek tebal <sub> </sub> Menuliskan teks sebagai subscript <sup> </sup> Menuliskan teks sebagai supersript <font> </font> Mengatur tampilan teks <p> </p> Membuat suatu paragraf <pre> </pre> Menulis teks apa adanya/bebas <h1> </h1> Membuat ukuran huruf dengan range (1 s/d 7)

Contoh <html> <head> <title>Web Pertama Ku</title> </head> <body> <b>Teks ini tebal</b> <br/> <i>Teks ini miring</i> <br/> <u>Teks ini digaris bawahi</u> <br/> <strong>Teks ini String</strong> <br/> <big>Teks ini big</big> <br/> <small>Teks ini small</small> <br/> contoh penggunaan tag sub H<sub>2</sub>O <br/> contoh penggunaan tag sup 2x<sup>3</sup>+2x<sup>2</sup>+3x-3=0 <br/> <font color="red">Teks ini berwarna merah</font> <br/> Penggunaan heading (h) <br/> <h1>Ukuran 1</h1> <h2>Ukuran 2</h2> <h3>Ukuran 3</h3> <h4>Ukuran 4</h4>

--- Edi Casnadi (2010) ----

<h5>Ukuran 5</h5> <h6>Ukuran 6</h6> <h7>Ukuran 7</h7> <P>Marilah belajar Web dengan sungguh-sunguh dan tekun untuk masa depan yang penuh dengan teknologi serta suapay tidak gaptek </P> <pre>Ini penggunaan tag free untuk menulis apa adanya atau bebas </pre> </body> </html> Script tadi akan menghasilkan tampilan web seperti gambar berikut :

--- Edi Casnadi (2010) ----

E. TAG PENGATURAN PARAGRAF

Untuk mengatur paragraf, digunakan tag <p> dan </p>. Tag ini mempunyai atribut align yang boleh terisi dengan center, left, right dan justify.

Contoh : <html> <head> <title>Ini Web Aku</title> </head> <body> <p align=left><b>Rata Kiri</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis </p> <p align=center><b>Rata Tengah</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis</p> <p align=right><b>Rata Kanan</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis</p> <p align=justify><b>Rata Kiri-Kanan</b> PHP dikenal sebagai sebuah bahasa script yang dieksekusi di server dan digunakan untuk membuat suatu halam web yang dinamis</p> </body> </html>

Hasil yang terlihat di browser adalah :

--- Edi Casnadi (2010) ----

F. TAG LIST Tag list digunakan untuk menampilkan beberapa daftar. Ada beberapa jenis list yang dikenal oleh HTML yaitu : 1. List bernomor (ordered list), tag yang dipakai adalah <ol> dan diakhiri dengan </ol> 2. List tidak bernomor (unordered list) , tag yang dipakai adalah <ul> dan </ul> 3. List definisi (definition list), tag yang dipakai adalah <dl> dan </dl> Untuk item listnya, tag yang digunakan dalam list bernomor dan tidak bernomor adalah dengan perintah <li> dan ditutup dengan </li>. Sedangk an untuk list definisi, <dt> dan </dt> sebagai definisi term dan <dd> dan </dd> sebagai definisi description (keterangan dari definisi term).

Bentuk umum untuk membuat list bernomor adalah :

<ol type=”tipenomor”> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol>

Untuk tipenomor, nilai yang bisa diisikan adalah 1 (angka), A (huruf besar), a (huruf kecil), I (romawi kapital), i (romawi kecil).

Bentuk umum untuk membuat list bernomor adalah :

<ul type=”tipebullet”> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>

Untuk tipenomor, nilai yang bisa diisikan adalah disc (bulatan), circle (lingkaran), square (segiempat).

Untuk list definisi, bentuk umumnya adalah :

<dl> <dt>Term 1</dt><dd>Keterangan lengkap mengenai Term 1</dd> <dt>Term 2</dt><dd>Keterangan lengkap mengenai Term 2</dd> <dt>Term 3</dt><dd>Keterangan lengkap mengenai Term 3</dd> </dl>

Contoh script lengkapnya adalah : <html> <head>

--- Edi Casnadi (2010) ----

<title>FORM HTML</title> </head> <body> <p>Kota-Kota Besar Di Pulau Jawa (memakai angka)</p> <ol type="1">

<li>Bandung</li> <li>Jakarta</li> <li>Surabaya</li>

</ol> <p>Kota-Kota Besar Di Pulau Jawa (memakai huruf kapital)</p> <ol type="A">


</ol> <p>Kota-Kota Besar Di Pulau Jawa (memakai bulatan)</p> <ul type="disk">


</ul> <p>Kota-Kota Besar Di Pulau Jawa (memakai segiempat)</p> <ul type="square">


</ul> <p>Kota-Kota Besar Di Pulau Jawa (dalam bentuk seperti daftar pustaka)</p> <dl>

<dt><b>Bandung</b></dt><dd>Bandung adalah ibukota Jawa Barat</dd> <dt><b>Jakarta</b></dt><dd>Jakarta adalah ibukota DKI Jakarta</dd> <dt><b>Surabaya</b></dt><dd>Surabaya adalah ibukota Jawa Timur</dd>

</dl> </html>

--- Edi Casnadi (2010) ----

Hasil tampilan script diatas :

--- Edi Casnadi (2010) ----

G. TAG PEMBUATAN TABEL Untuk membuat suatu tabel dalam suatu halaman web site, maka tag yang dipakai adalah <table> dan </table>, <tr> dan </tr> yang terarti table row, <td> dan </td> yang berarti kolom tabel. Bentuk dari tabel adalah seperti berikut : <html> <head> <title>Membuat Kolom</title> </head> <body> <table border="1"> <tr><td>Kiri Atas</td><td>Kanan Atas</td></tr> <tr><td>Kiri Bawah</td><td>Kanan Bawah</td></tr> </table> </body> </html>

Hasil output

Latihan 1 Buatlah tabel sebagai berikut: No Nama Alamat Telp 1 Dafa Jl. Bandung Timur (022) 2735451 2 Desi Jl. Gagak (022) 2535444 3 Amira Jl. Dipatiukur (022) 2507833

Caranya sebagai berikut: <html> <head> <title>Membuat Kolom</title>

--- Edi Casnadi (2010) ----

</head> <body> <table border="1" width="70%"> <tr bgcolor="#CCCCCC"><td>No</td><td>Nama</td><td>Alamat</td> <td>Telp</td> </tr> <tr><td>1</td><td>Dafa</td><td>Jl. Bandung Timur</td><td>(022) 2735451</td> </tr> <tr><td>2</td><td>Desi</td><td>Jl. Gagak</td><td>(022) 2535444</td></tr> <tr><td>3</td><td>Amira</td><td>Jl. Dipatiukur</td><td>(022) 2507833</td></tr> </table> </body> </html>

Hasilnya

Latihan 2 Buatlah tabel dengan menggunakan colspan dan rowspan sebagai berikut:

Berikut coding untuk masalah di atas. <html> <head> <title>Membuat Kolom</title> </head> <body> <table border="1" width="70%"> <tr bgcolor="#CCCCCC"><td rowspan="2">No</td><td rowspan="2">Nama</td> <td colspan="2" align="center">Nilai</td></tr> <tr bgcolor="#CCCCCC"><td>UTS</td><td>UAS</td></tr> <tr><td>1</td><td>Desi</td><td>90</td><td>80</td></tr>

--- Edi Casnadi (2010) ----

<tr><td>2</td><td>Amira</td><td>80</td><td>70</td></tr> <tr bgcolor="#CCCCCC"><td colspan="2">Rata-rata</td><td>85</td><td>75</td> </tr> </table> </body> </html>

Tugas Buatlah tampilan sebagai berikut:

H. TAG GAMBAR Untuk memperbagus tampilan html, maka kadang diperlukan gambar baik gambar yang tetap atau yang animasi. Tag yang dipakai untuk menampilkan gambar adalah tab <img>. Beberapa atribut yang sering digunakan dalam tag ini adalah : 1. src : menunjukan lokasi file gambar 2. border : tebal bingkai gambar 3. width : lebar gambar 4. height : tinggi gambar 5. align : peletakan gambar Contoh coding memanggil gambar: <html> <head> <title>IMAGE HTML</title> </head> <body> <p><img border=3 src="image/satu.jpg" width="100" height="64" align="middle"> Image dengan border 3 dengan align middle</p> <p><img src="image/dua.jpg" width="100" height="64" align="right"> Image dengan tanpa border dengan align right, gambar ini merupakan gambar resmi simbol dari php.</p> <p><img src="image/tiga.jpg" width="100" height="64" align="left">Image dengan

--- Edi Casnadi (2010) ----

tanpa border dengan align left, gambar ini merupakan gambar resmi simbol dari php.</p> </body> </html>

Hasil outputnya, yaitu

I. TAG LINK HTML Kelebihan utama dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks dan atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser akan menyorot (highlight) teks atau gambar yang diidentifikasi sebagai link dengan warna dan atau garis bawah untuk menunjukkan bahwa itu adalah hypertext link . Untuk membuat sebuah link, maka tag yang dipakai adalah tag <a> dan </a>. Atribut-atribut dari tag ini adalah : 1. href : lokasi yang dituju, bisa alamat internet, file atau folder 2. target : lokasi link tersebut ditampilkan. Gunakan _blank jika ingin menampilkan link

yang dituju di browser baru/lain. Contoh script : <html> <head> <title>IMAGE HTML</title> </head> <body>

--- Edi Casnadi (2010) ----

<p>Home page ini menyediakan beberapa link ke search engine :</p> <p><a href="http://www.yahoo.com" target="_blank">www.yahoo.com</a></p> <p><a href="http://www.lpka.com" target="_blank">lpka</a></p> <p><a href="http://www.google.com" target="_blank">google</a></p> <p><a href="http://www.php.net"><img border=3 src="image/satu.jpg" width="120" height="64" align="middle"></a> link dengan gambar</p> <p><a href="http://www.mysql.com"><img border=0 src="image/satu.jpg" width="167" height="87" align="middle"></a> link dengan gambar tanpa border</p> </body> </html> Hasil dari coding di atas yaitu

J. TAG FORM Kadang-kadang ketika kita berjalan-jalan / surfing, kita diminta untuk mengisikan suatu data yang akan dikirim ke penyedia web site. Data-data tersebut bisa berupa data nama, alamat, no kartu kredit, gambar, atau file. Untuk membuat suatu form yang dapat berinteraksi dengan visitor, maka pengembang web harus membuat suatu form dalam dokumen html-nya. Untuk membuat suatu form dalam dokumen html, tag yang digunakan adalah <form> </form>. Di antara kedua tag tersebut, elemen-elemen form dituliskan.

--- Edi Casnadi (2010) ----

Perintah umum tag form adalah

<form name=”namaform” method="jenismethod" action="fileeksekusi"> disinilah elemen-elemen form ditulis </form>

Atribut name diisi dengan nama dari form tersebut. Atribut method diisi dengan GET atau POST Atribut action diisi dengan nama file yang akan dieksekusi ketika tombol submit ditekan.

Ada beberapa jenis elemen form yang dapat digunakan diantaranya : Contoh script : JENIS TYPE KEGUNAAN

Cara pakai : <input type=”namatipe” name=namaelemen value=”tulisan”>

Text Box text Memasukan 1 baris teks

Radio Button radio Pilihan yang hanya bisa dipilih 1 dari beberapa option

Check Box checkbox Pemilihan dimana boleh memilih lebih dari satu option

Submit submit Tombol untuk melakukan proses

Reset reset Tombol untuk me-reset form ke kondisi sebelum adanya pengisian data

Button button Tombol biasa

File Upload file Untuk pemilihan file yang akan di upload ke server

TextArea, digunakan untuk menampilkan teks yang ukurannya besar. cara pakainya adalah :<textarea name=”namatextarea” rows=”banyakbaris” cols=”banyakkolom” size=”banyakitemditampilkan”>isi teks diisi disini </textarea>

Select, digunakan untuk menampilkan pilihan yang telah disediakan. Cara pakainya adalah :<select name=namaoption> <option value=”Bandung” selected>Bandung</option><option value=”Jakarta” >Jakarta</option> <option value=”Surabaya”>Surabaya</option> </select>

--- Edi Casnadi (2010) ----

Berikut contoh penggunaan form

<html> <head> <title>FORM HTML</title> </head> <body> <form method="post" action="www.lpka.com"> <p>Text Box <input type="text" name="T1" size="20"></p> <p>Radio Button <input type="radio" value="V1" checked name="R1">Pilihan </p> <p><input type="checkbox" name="C1" value="ON">Pilihan 1</p> <p><input type="file" name="F1" size="7"></p> <p><select size="1" name="D1"> <option selected value="Bandung">Bandung</option> <option value="Jakarta">Jakarta</option> <option>Surabaya</option> </select></p> <p><textarea rows="5" name="S1" cols="27">Disini saya bisa ditulis dalam beberapa paragraf. Saya bisa menampung teks dengan banyak. </textarea></p> <input type="Submit" value="Submit" name="B1"> <input type="button" value="Button" name="B2"> <input type="reset" value="Reset" name="B3"> </form> </body> </html>

Script di atas akan menghasilkan tampilan berikut di browser.

--- Edi Casnadi (2010) ----

--- Edi Casnadi (2010) ----

MODUL CSS

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Untuk mengakhiri suatu sintaks dalam CSS menggunakan tanda titik koma ( ; ) dan event di apit dengan perintah { }. Dengan menggunakan Metode CSS ini kita dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs, sekaligus memformat ulang situs yang kita buat (merubah secara cepat). Berikut cara penulisan CSS

<style type="text/css"> b { color : blue } //untuk membuat bold dan memiliki warna biru </style>

Dalam penulisan CSS terdapat dua hal yaitu: dalam html dan diluar html (di file lain) sebetulnya ini tidak terlalu berperan secara signifikan tetapi hanya peletakan suatu sintak saja. Marilah kita bahas teknik penulisan satu-persatu, yaitu: 1. Penulisan CSS dalam html

Contoh-1 <html> <head> <style type="text/css"> b { color : blue } </style> <title>Belajar CSS</title> </head> <body> <b> Belajar CSS </b> </body> </html>

Contoh-2 <html> <head> <style type="text/css"> i { color : red } </style> <title>Belajar CSS</title> </head> <body> <i> Belajar CSS </i> </body> </html>

--- Edi Casnadi (2010) ----

Kita lihat bagaimana penggunaan b dan i, di mana ketika pemanggilan i (italic) dan b (bold) memiliki efek warna merah dan biru. Bagaimana dengan penggunaan tag u (underline) apakah bisa ? jawabannya bisa. Perhatikan contoh berikut: <html> <head> <style type="text/css"> u,i { color : red } b { color : green } </style> <title>Belajar CSS</title> </head> <body> <i> Belajar CSS </i> <br/> <b> Belajar CSS </b> <br/> <u> Belajar CSS </u> </body> </html>

2. Penulisan CSS di luar html

1. Mendesain Web dengan CSS

a. Code CSS body { padding-left: 5em; font-family: Georgia, "Times New Roman", Times, serif; color: white; padding-right: 5em; background-color: #555555 } judul { padding: 0; margin: 0; left: 0; position: absolute; background:url(header-bg.png); } ul.navbar {

--- Edi Casnadi (2010) ----

list-style-type: none; padding: 0; margin: 0; position: absolute; top: 12em; padding-left: 5em; left: 1em; width: 9em } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.5em; border-right: 1em solid #FF6600 } ul.navbar a { text-decoration: none; } h1 { font-family: Helvetica, Geneva, Arial, Sans-Regular, sans-serif; padding-left: 12em;} p { font-family: Helvetica, Geneva, Arial, Sans-Regular, sans-serif; padding-left: 12em; } .tengah { padding: 0; margin: 0; padding-top: 2em; padding-left: 12em; } .bawah { padding: 0; margin: 0; padding-top: 12em; padding-left: 0; }

--- Edi Casnadi (2010) ----

1. Cara Menginstal XAMPP

Klik double aplikasi Xampp atau seperti icon berikut

Kemudian akan muncul dialog sebegai berikut:

Jika Anda akan menginstal xampp ke lokasi lain maka klik tombol

Brows tetapi jika Anda ingin instal secara default maka biarkan saja

(direktori default instal xampp yaitu drive C). Kemudian tekan tombol

instal dan akan muncul dialog seperti berikut:

Tunggu sampai proses pengintalan selesai.

2. Cara menjalankan XAMPP

--- Edi Casnadi (2010) ----

a. Aktifkan XAMPP Control Panel, dengan cara mengklik double pada shortcut

pada desktop, sehingga muncul gambar sebagai berikut:

Gambar 10.1 Control xampp

Kemudian aktifkan kontrol Apache dan My Sql dengan mengklik tombol masing-masing, seperti gambar di atas sampai status menjadi Running. b. Kemudian bukalah browser seperti Internet Explorer atau Mozile Firefox setelah

itu ketikan pada URL sebagai berikut: http://localhost/xampp, seperti gambar berikut:

(enter) Gambar 10.2 Alamat localhost

c. Kemudian akan menampilkan gambar berikut:

Gambar 10. 3. Tampilan awal xampp Berarti Anda sudah berhasil menggunakan Xampp

--- Edi Casnadi (2010) ----

3. Configurasi Lokasi server Perhatian untuk meletakan server secara default terletak pada direktori sebagai berikut: C:\xampp\htdocs Folder htdocs merupakan tempat untuk meletakan project web yang akan kita buat. Tetapi jika kita akan merubah lokasi servernya maka ikuti langkah-langkah sebagai berikut:

a. Buka file httpd.conf, yang terletak di direktori sebagai berikut: C:\xampp\apache\conf

b. Kemudian buka dengan bantuan Notepad, seperti tampilan berikut:

Kemudian cari file “DocumentRoot "C:/xampp/htdocs" “ kemudian ganti rootnya sesuai dengan root folder yang anda inginkan contoh DocumentRoot "D:/Belajarweb".

Matikan/Stop Apache kemudian Start Apache kembali.

Coba Anda test dengan cara membuka browser seperti IE atai Mizila Firefox, tuliskan alamat sebagai berikut: http://localhost/

--- Edi Casnadi (2010) ----

Dasar pembuatan web (html)

Education