di atas, cobalah buat file HTML dengan menggunakan Notepad sehingga menghasilkan dokumen HTML yang akan tampak di browser seperti ini:
World Wide Web (WWW) merupakan sebuah sistem dimana informasi (teks, gambar, suara, dan lain-lain) dipresentasikan dalam bentuk hypertext dan dapat diakses oleh sebuah peraga WWW (yang sering disebut sebagai browser).
Informasi di WWW pada umumnya ditulis dalam bentuk HTML (Hypertext Markup Language). Selain itu, informasi lain dapat berupa gambar (dalam format GIF, JPG, PNG), suara (dalam format AU, WAV), dan objek multimedia lainnya (seperti MIDI, Shockwave, Quicktime Movie, 3D World).
Bila anda masih mengingat pelajaran-pelajaran terdahulu, maka tanpa kesulitan yang berarti anda akan bisa membuat source code untuk menghasilkan tulisan-tulisan di atas. Kode sumbernya kira-kira sebagai berikut:
Informasi di WWW pada umumnya ditulis dalam bentuk HTML (Hypertext Markup Language). Selain itu, informasi lain dapat berupa: gambar (dalam format GIF, JPG, PNG), suara (dalam format AU, WAV), dan objek multimedia lainnya (seperti MIDI, Shockwave, Quicktime Movie, 3D World).
Simpanlah file di atas kemudian buka dalam browser.
NOTASI KHUSUS
Kita telah mengetahui bahwa browser tidak mengenal pembuatan baris dengan tombol Enter. Disamping itu, browser juga tidak mengenal pembuatan spasi lebih dari satu spasi dengan menekan tombol Spasi ataupun tombol Tab. Nah, bagaimana caranya membuat lebih dari satu spasi dalam dokumen HTML? Pembuatan spasi dalam kode-kode HTML diganti tulisan seperti yang bisa kita lihat pada contoh berikut ini:
Beginilah cara penulisannya dengan bahasa HTML:
Tip & Trik ini disajikan untuk para "pemula". Banyaknya ± 75 artikel. Dan setiap artikel terdaftar® dalam direktorat hak cipta©.
<harap maklum>.
MENAMPILKAN APA ADANYA
Meskipun browser tidak mengenali spasi lebih dari sekali , tabulasi dan pembuatan baris dengan enter, namun dengan menggunakan tag maka browser akan menampilkan teks apa adanya, maksudnya spasi dianggap spasi, tabulasi dianggap tabulasi dan enter dianggap enter. Bahkan font-nya pun muncul sesuai aslinya. Begini contohnya:
Pantun Petuah
Berakit-rakit ke hulu
Bersenang-senang kemudian
Bersakit-sakit dahulu
Bersenang-senang kemudian
Simpanlah file di atas sebagai file HTML kemudian tampilkan dalam browser, hasilnya akan seperti ini:
Pantun Petuah
Berakit-rakit ke hulu
Bersenang-senang kemudian
Bersakit-sakit dahulu
Bersenang-senang kemudian
Tag ini sangat diperlukan bila kita ingin menampilkan dalam halaman web sekumpulan karakter ASCII dalam susunan tertentu seperti contoh berikut ini:
___________________
|,-----.,-----.,---.\
|| || || \\
|`-----'|-----||-----\`----.
[ | -||- _| (|
[ ,--. |_____||___/.--. |
=-(( `))-----------(( `))-==
`--' `--'
Awan dan Matahari
.
|
. /
\ I
/
\ ,g88R_
d888(` ). _
- --== 888( ).=-- .+(` )`.
) Y8P( '`. :( . )
.+(`( . ) .-- `. ( ) )
(( (..__.:'-' .=( ) ` _` ) )
`. `( ) ) ( . ) ( ) ._
) ` __.:' ) ( ( )) `-'.:(` )
) ) ( ) --' `- __.' :( ))
.-' (_.' .') `( ) ))
(_ ) ` __.:'
--..,___.--,--'`,---..-.--+--.,,-,,..._.--..-._.-a:f--.
Gedung-gedung
__ __ __
___ .-~~'. ___~~-_.-~~'. ___~ ~~-.-~~'. ___ -~ ~~-.-~~' ___
| ''|`-...--' ~' | ''| `-...--' | ''| `-...-- | ''| `-... | ''|
|' '| -' ': _|' '| ..--' |' '| _....--' |' '| ___....--' |' '|
| ''|_ _ | | ''| _ _ || ''| _ _ | ''| _ _ | ''|
| ''| |_| |____| | ''|| |_| |____|| ''|_| |_| |____| ''||_| |_| |___| ''|
|'' | | | | | |'' || | | | ||'' | | | | | |'' || | | | | |'' |
| ''|____ | | | ''|____ | || ''|____ | | | ''|____ | | | ''|
| ' |'' '|_______| ' |'' '|_______| ' |'' '|_______| ' |'' '|_______| ' |
|' '|' ' |'''' '|' '|' ' |'''' '|' '|' ' |'''' '|' '|' ' |'''' '|' '|
| ' | '''| '' ''| ' | '''| '' ''| ' | '''| '' ''| ' | '''| '' ''| ' |
____ ______________ ______________ ______________ ______________ ___
=||=)(=||===||===||=)(=||===||===||=)(=||===||===||=)(=||===||===||=)(=||
#########################################################################
| \\#// |'' ''' \\#// |'' ''' \\#// |'' '' \\#// |'' ' \\#//
|' |#| ''| '''' | |#| ''| '''' |#| ''| '''' |#| | ''| '''' |#| '|
|''|#| ' |''' '|'|#| '' |''' ' |#| ''' |''' |#|'|''' |''' |#| '|
|' |#| '| ' '' |'|#| ' '| ' '' |#| ' '| ' '' |#|'| ' '| ' ' |#| '|
|#| |#| |#| |#| |#|
Geert-Jan Thomas
Apartemen
_._._._ ^ _._._._ _._._._ ^
| ___ |_._._._| ___ |_._._._| ___ |
| |_| | ___ | |_| | ___ | |_| |
|_III_| |_| |_III_| |_| |_III_| ^!^
^ | ___ |__III__| ___ |__III__| ___ |
^ | |_| | ___ | |_| | ___ | |_| | ^!^
|_III_| |_| |_III_| |_| |_III_|
| ___ |__III__| ___ |__III__| ___ | _)o(_
| |_| | ___ | |_| | ___ | |_| | /(|)\
/) |_III_| |_| |_III_| |_| |_III_| H
_/ ) | ___ |__III__|_____|__III__| ___ | H
~^~^~ | |_| |"""""""||~|~||"""""""| |_| | H
^~'|_III_|@@@@@@@||_|_||@@@@@@@|_III_|^~^H '
@@@@@@@@@@@@@@ @/=====\@ @@@@@@@@@@@@@@
Rumah Klasik
( )
( )
( )
( )
) )
( ( /\
(_) / \ /\
________[_]________ /\/ \/ \
/\ /\ ______ \ / /\/\ /\/\
/ \ //_\ \ /\ \ /\/\/ \/ \
/\ / /\/\ //___\ \__/ \ \/
/ \ /\/ \//_____\ \ |[]| \
/\/\/\/ //_______\ \|__| \
/ \ /XXXXXXXXXX\ \
\ /_I_II I__I_\__________________\
I_I| I__I_____[]_|_[]_____I
I_II I__I_____[]_|_[]_____I
I II__I I XXXXXXX I
~~~~~" "~~~~~~~~~~~~~~~~~~~~~~~~
Kamar Tidur
_ () () _
/ \ ||______________|| / \
/___\ | | /___\
| | ~@@~ | |
(_) |_______ _______| (_)
___/_\___ {_______}{_______} ___/_\___
|__~__| %%%%%%%%%%%%%%%%%% |__~__|
___|_____|__%%%%%%%%%%%%%%%%%%%%__|_____|___
| | %%%%%%%%%%%%%%%%%%%%%% | |
`=====%%%%%%%%%%%%%%%%%%%%%%%%=====`
`=====%%%%%%%%%%%%%%%%%%%%%%%%%%=====`
`=====%%%%%%%%%%%%%%%%%%%%%%%%%%%%=====`
`=====/||||||||||||||||||||||||||||\=====`
`======||||||||||||||||||||||||||||||======`
`=======||||||||||||||||||||||||||||||=======`
`==============================================`
`================================================`
Toilet
|
__________ |
_ __ _ | | |
/_\ / \ /_\ | | |
=|= | // | =|= | | |
! \__/ ! | | |
_ | | |
___ ___ //' | | |
[___] _ :=| |=: __T_||_T__ |p= | |
| ~| =)_)= | | [__________] | | |
| | (_( |xXx| \_ _/ | | |
| | )_) """"" \ / | | |
\___| | | | | |
| `========, | | | | |
__`. .'_________________| |________|_____________|
`. .' (____) \
_| |_... .;;;;;;;;. \
(________);;;; :;;;;;;;;;;:
:::::::' '::::::::'
Secangkir Kopi
.
`:.
`:.
.:' ,::
.:' ;:'
:: ;:'
: .:'
`. :.
_________________________
: _ _ _ _ _ _ _ _ _ _ _ _ :
,---:".".".".".".".".".".".".":
: ,'"`::.:.:.:.:.:.:.:.:.:.:.::'
`.`. `:-===-===-===-===-===-:'
`.`-._: :
`-.__`. ,'
,--------`"`-------------'--------.
`"--.__ __.--"'
`""-------------""'
Botol Sirup
__
)==(
)==(
|H |
|H |
|H |
/====\
/ Dr S \
/========\
:HHHHHHHH H:
|HHHHHHHH H|
|HHHHHHHH H|
|HHHHHHHH H|
\______|=/========\________/
\ :/oO/ |\ /
\ / oOOO Le | \ /
\__/| OOO Grape| \__/
)( | O | )(
)( |==========| )(
)( |HHHHHHHH H| )(
)( |HHHHHHHH H| )(
.)(.|HHHHHHHH H| .)(.
~~~~~~~~~~~~~~~~ ~~~~~~
Botol Air Mineral
_________
|_-_-_-_-_|
|_________|
)_______(
(_________)
|uuuuuuuuu|
/ \
/ \
/ \
/ \
/ \
/ \
(_____________________)
)___________________(
(_____________________)
| |
|_____________________|
)___________________(
|_____________________|
)___________________(
| |
|_____________________|
)___________________(
|_____________________|
)___________________(
| |
| |
|_____________________|
(_____________________)
|_____________________|
(_____________________)
| |
| |
\_____________________/
'-------------------'
Jembatan Gantung
^^
^^ .. ..
[] []
.:[]:_ ^^ ,:[]:.
.: :[]: :-. ,-: :[]: :.
.: : :[]: : :`._ ,.': : :[]: : :.
.: : : :[]: : : : :-._ _,-: : : : :[]: : : :.
_..: : : : :[]: : : : : : :-._________.-: : : : : : :[]: : : : :-._
_:_:_:_:_:_:[]:_:_:_:_:_:_:_:_:_:_:_:_:_:_:_:_:_:_:_:[]:_:_:_:_:_:_
!!!!!!!!!!!![]!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!![]!!!!!!!!!!!!!
^^^^^^^^^^^^[]^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[]^^^^^^^^^^^^^
[] []
[] []
[] []
~~^-~^_~^~/ \~^-~^~_~^-~_^~-^~_^~~-^~_~^~-~_~-^~_^/ \~^-~_~^-~~-
~ _~~- ~^-^~-^~~- ^~_^-^~~_ -~^_ -~_-~~^- _~~_~-^_ ~^-^~~-_^-~ ~^
~ ^- _~~_- ~~ _ ~ ^~ - ~~^ _ - ^~- ~ _ ~~^ - ~_ - ~^_~
Jembatan Lengkung
___....___
^^ __..-:'':__:..:__:'':-..__
_.-:__:.-:'': : : :'':-.:__:-._
.':.-: : : : : : : : : :._:'.
_ :.': : : : : : : : : : : :'.: _
[ ]: : : : : : : : : : : : : :[ ]
[ ]: : : : : : : : : : : : : :[ ]
:::::::::[ ]:__:__:__:__:__:__:__:__:__:__:__:__:__:[ ]:::::::::::
!!!!!!!!![ ]!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!![ ]!!!!!!!!!!!
^^^^^^^^^[ ]^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[ ]^^^^^^^^^^^
[ ] [ ]
[ ] [ ]
[ ] [ ]
~~^_~^~/ \~^-~^~ _~^-~_^~-^~_^~~-^~_~^~-~_~-^~_^/ \~^ ~~_ ^
Ubin Segi Enam
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
Ubin Segi 12
\__ \__ \__ \__ \__ \__ \__ \__ \__ \__ \_
_/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\ \ \ \ \ \ \ \ \ \ \
_/ __/ __/ __/ __/ __/ __/ __/ __/ __/ __/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ / / / / / / / / / /
\__ \__ \__ \__ \__ \__ \__ \__ \__ \__ \_
_/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\ \ \ \ \ \ \ \ \ \ \
_/ __/ __/ __/ __/ __/ __/ __/ __/ __/ __/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
/ / / / / / / / / / /
\__ \__ \__ \__ \__ \__ \__ \__ \__ \__ \_
_/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/
\ \ \ \ \ \ \ \ \ \ \
_/ __/ __/ __/ __/ __/ __/ __/ __/ __/ __/
\__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \__/ \_
Sepeda Balap
/'=----= ______
(( || "--.__."
" @>||_____________//
_______ /^\"""""""""""//\========)
_--"""--/-. "\ // _\-:::-/_-.
." .-"""-/ "_\ "\ == // ;::\:::/::".\
; / _/ " \\ "\-+//--..._\_/:::::\\
. ; o . || ( ()/)======(o)::::::.
. \ ; .| -|.;____...."b:::::;
. -._ _ - ; == :::::::::::;
"-..____.' ls ":::::::'
Mobil Sedan
_____________
..---:::::::-----------. ::::;;.
.'"""""" ;; \ ":.
.'' ; \ "\__.
.' ;; ; \\";
.' ; _____; \\/
.' :; ;" \ ___:'.
.'--........................... : = ____:" \ \
..-"" """' o""" ; ; :
.--"" .----- ..----... _.- --. ..-" ; ; ; ;
.""_- "--""-----'"" _-" .-"" ; ; .-.
.' .' ." ." ; ; /. |
/-./' ." / _.. ; ; ;;;|
: ;-.______ / _________==. /_ \ ; ; ;;;;
; / | """"""""""".---.""""""" : /" ". |; ; _; ;;;
/"-/ | / / / / ;|; ;-" | ;';
:- : """----______ / / ____. . ."'. ;; .-"..T" .
'. " ___ "": '"""""""""""""" . ; ; ;; ;." ." '--"
", __ """ ""---... :- - - - - - - - - ' ' ; ; ; ;;" ."
/. ; """---___ ; ; ; ;|.""
: ": """----. .-------. ; ; ; ;:
\ '--__ \ \ \ / | ; ;;
'-.. """"---___ : .______..\ __/..-""| ; ; ;
""--.. """--" . ". . ;
""------... ..--"" " :
"""""""""""""""""" \ /
"------"
Mobil Balap
_..-------++._
_.-'/ | _|| \"--._
__.--'`._/_\j_____/_||___\ `----.
_.--'_____ | \ _____ /
_j /,---.\ | =o | /,---.\ |_
[__]==// .-. \\==`===========/==// .-. \\=[__]
`-._|\ `-' /|___\_________/___|\ `-' /|_.' hjw
`---' `---'
Mobil Pick-up
.------.
:|||"""`.`.
:||| 7.`.
.===+===+===+===+===||`----L7'-`7`---.._
[] || == | """-.
[]...._____.........||........../ _____ ____|
c\____/,---.\_ ||_________/ /,---.\_ _/
hjw /_,-/ ,-. \ `._____|__________||/ ,-. \ \_[
/\ `-' / /\ `-' /
`---' `---'
Mobil Toyota
___________________
|,-----.,-----.,---.\
|| || || \\
|`-----'|-----||-----\`----.
[ | -||- _| (|
[ ,--. |_____||___/.--. |
=-(( `))-----------(( `))-==
`--' `--'
Mobil Ambulans
EeeiiiiiEEiiiii.....
\|/
n______ .....iiiiiEEiiiieeEE
:~; : \|/
-----;``~' + ;------------ ______n --------------------------------
`-@-----@-= : :~:
=========================== ; + '~``; =============================
=-@-----@-'
jgs------------------------------------------------------------------
_____,_ __________ __,_
------ | + |\__ ----- | ||||||| | | |_|
----- | _ ' _ | ---- | _ . _. |_|tre|
--- `(o)---(o)' --- `-(o)-(o)----(o)'
______________________________________________________________________
Kereta Api
__,-_-_--_-.___ ___,-----._
/,--' || `,---.'-._ -'' .
// \ || / | | _-. `
/'--.--,-'.`---...__| || | `-.
,' ((_ )) H | `-.
|o `--' o H`|-._ |`-.
,--._ ,---.. ,,-----. | `-.| `-.
,' _ |_`_|| ,--. ||_81__|. | -. |`-._
,-' | ((_ )) | : | -. -.| -_ `-
,' |--...__,`--'.__..._-_-. : |-...__| _-
|=_= -_-\::::/-_--_-=_=' : | |`''---
,' | \-_/||||\-_/ _| |
|_______`----'_________ ______.... ......
|=======[____]=========| __ | -- __
_, | || || | | -- --' __/'--'
_,- | || || | | | ___,--'
`--. ''--''--'-' ,----' -
_ '_----_-------','- _
Kapal Perang
|__
|\/
---
/ | [
! | |||
_/| _/|-++'
+ +--| |--|--|_ |-
{ /|__| |/\__| |--- |||__/
+---------------___[}-_===_.'____ /\
____`-' ||___-{]_| _[}- | |_[___\==-- \/ _
__..._____--==/___]_|__|_____________________________[___\==--____,------' .7
| BB-61/
\_________________________________________________________________________|
Matthew Bace
Pesawat Terbang
|
--====|====--
|
.-"""""-.
.'_________'.
/_/_|__|__|_\_\
;'-._ _.-';
,--------------------| `-. .-' |--------------------,
``""--..__ ___ ; ' ; ___ __..--""``
jgs `"-// \\.._\ /_..// \\-"`
\\_// '._ _.' \\_//
`"` ``---`` `"`
Keyboard
________________________________________________
| _____________________________ |
| [][] _____________________________ [_][_][_] |
| [][] [_][_][_] [_][_][_][_] [_][_] [_][_][_] |
| |
| [][] [][][][][][][][][][][][][][_] [][][][] |
| [][] [_][][][][][][][][][][][][][] [][][][] |
| [][] [__][][][][][][][][][][][][_] [][][][] |
| [][] [___][][][][][][][][][][][__] [__][][] |
| [_][______________][_] |
|______________________________________________|
Bunga Mekar
___ .
_~"| ~~ ~.\.~
/ : / / \_
?"" ; ` ,' )
/-, / . . . |
/ ~-_ / dp . . |
.%"": .? |: . . . |
% '. . \|:. . .. . . /
/ '. '.: : :| : .. . . _/
/ ~~~::. .:: ::. . .::.:. ..'~
\::... `'.. : : : " . :. . ~~| _____
(:::. .. '.: .:.::. : . : "/__-"" --
)"".> --~~~__. ::::*## :.:.:) : .:` ~\
|..::' >> ####### '.: .' . .` ?
\_.___ :''> ######### ::.". ~ ..~'" |,
_">~____~~::. #* )#### : ..~ . )
/:.:'';.:::_- _-#####*:;: ::>,, }
o__o___q~_-" _-"###### .:.'' ..~~ ~ |
( o() &@&__--" *::####::" ";.. ~~...::.)
(o& O& O?S).` .:':::*: : ~~~... "/
oS %@&>/ .:' ::::: :. .~ "'. {
\~*~~"" __:/ "::::..L ~ ''/
|::' /##) :':::::\ . %
\:; . |#/ : :::::::-___ -"
\::::: | : :::::::::::\----"
\::::::|:. : :::::::::::|
\::::::|' . : ::::::::::::|
-::::/ \ :.'::::::::::::/
~__/ \. ;:.::::::::::_/
\::.::::::::::::/
--_;::::::_-~/
""""""
Sepatu Laras
.-'\
.-' `/\
.-' `/\
\ `/\
\ `/\
\ _- `/\ _.--.
\ _- `/`-..--\ )
\ _- `,',' / ,')
`-_ - ` -- ~ ,','
`- ,','
\,--. ____==-~
\ \_-~\
`_-~_.-'
_ Seal _ \-~
Rangka Peti
__________________
/\ ______________ \
/::\ \ZZZZZZZZZZZZ/\ \
/:/\.\ \ /:/\:\ \
/:/Z/\:\ \ /:/Z/\:\ \
/:/Z/__\:\ \____/:/Z/ \:\ \
/:/Z/____\:\ \___\/Z/ \:\ \
\:\ \ZZZZZ\:\ \ZZ/\ \ \:\ \
\:\ \ \:\ \ \:\ \ \:\ \
\:\ \ \:\ \_\;\_\_____\;\ \
\:\ \ \:\_________________\
\:\ \ /:/ZZZZZZZZZZZZZZZZZ/
\:\ \ /:/Z/ \:\ \ /:/Z/
\:\ \/:/Z/ \:\ \/:/Z/
\:\/:/Z/________\;\/:/Z/
\::/Z/____________\/Z/
\/ZZZZZZZZZZZZZZZZZ/
Kotak-kotak
______________________
/\ _______ _______ \
/ \ /\ \/\ \ \
/ _ \ \ \ \ \ \
/ /\ \ \ \ \ \ \
/ / \ \ \______\ \______\ \
/ / \ \ / _____/_/ _____/_ \
/ / \_ \ /\ \/\ \ \
/ _\ / _ \ \ \ \ \ \
/ /\ \ / /\ \ \ \ \ \ \
/ / \ \ / / \ \ \______\ \______\ \
/ / \ \/_/ \ \ / / / / \
/ / \_ / \_ \_____________________\
\ \ / _\ / / /
\ \ / /\ \ / / \______\ \______\ /
\ \ / / \ \ / / / / / / /
\ \/_/ \ \/_ / / / / / /
\ / \_ / / / / / /
\ \ / / \/______/\/______/ /
\ \ / / \______\ \______\ /
\ \ / / / / / / /
\ \/_ / / / / / /
\ / / / / / /
\ / \/______/\/______/ /
Di modul ini kita akan mempelajari bagaimana cara untuk menginstal Apache Server, PHP dan MySQL dibawah OS Windows, sebagai referensi saya menggunakan OS Windows XP SP2.
Dibawah ini adalah versi dari program2x yang akan kita gunakan dalam simulasi ini:
- Apache Server 2.2.8-win32-x86-no_ssl.msi
- PHP 5.2.5-Win32.zip
- MYSQL-essential-5.0.51b-win32.msi
Apache Server 2.2.8
Pertama yang harus kita lakukan adalah mendownload Apache http://httpd.apache.org/download.cgi, klik untuk menuju tkp. Kemudian pilih seperti yang telah ditandai dengan warna merah dibawah ini:
Setelah selesai penyedotan double klik file tersebut untuk memulai penginstalasian.
Tanpa basa-basi klik next
Klik next, kemudian isikan seperti di bawah:
Network Domain: localhost
Server Name: localhost
Administrator’s email address: admin@localhost
Klik next pilih: “Typikal” untuk tipe penginstalasian
Setelah anda merasa yakin, klik next untuk melanjutkan.
Kemudian klik instal,
Sebuah icon akan tampil di taskbar seperti pada gambar dibawah ini. Dengan mengklik kiri, dari sini kita dapat menghentikan (stop), memulai (start) dan memulai kembali (restart) Apache Server, perlu diingat bahwa setiap kali kita melakukan perubahan pada file pengaturan (configuration file) selalu lakukan “Restart” agar perubahan segera di baca oleh Server.
Untuk mengetahui bekerja tidaknya server tersebut buka browser dan ketikkan di address bar “localhost” atau “http://localhost/” jika ditampilkan seperti berikut ini berarti server tersebut telah bekerja dengan baik. Congratulations…
Selanjutnya kita akan melakukan sedikit perubahan pada file pengaturan Apache Server ini. File pengaturannya tersebut ada di: “C:\Apache Server\conf\httpd.conf” atau anda bisa mengaksesnya dari: Start Menu > All Programs > Apache HTTP Server 2.2 > Edit the Apache httpd.conf Configuration File.
Ketika kita mengetikkan “http://localhost/” di browser, file yang ditampilkan tersebut berada di “C:\Apache Server\htdocs” ini yang disebut dengan “Documentroot” jadi file yang bernama index didalam folder ini akan secara otomatis ditampilkan oleh browser.
Karena kita nantinya akan sering mengakses folder ini, maka ada baiknya kita menggantinya kesebuah folder tersendiri yang lebih ringkas dan mudah mengaksesnya.
Buat sebuah folder di drive C dengan nama My Websites.
Kemudian buka file configurasi apache server “httpd.conf”
Cari baris yang seperti dibawah ini:
DocumentRoot "C:/Apache Server/htdocs"
Ubah menjadi:
DocumentRoot "C:/My Websites"
Kemudian cari kembali baris seperti berikut:
Ubah menjadi
Buka Notepad salin kode dibawah ini:
Berhasil!!!
Kemudian simpan file tersebut ke C:\My Websites dengan nama index.html
Sekarang Restart server. Kemudian di browser ketik kembali “http://localhost/” dan Enter.
Jika tidak ada problem maka browser akan menampilkan seperti berikut: