Website Alam memberikan tutorial pembuatan website tentang alam dengan menggunakan bahasa pemrograman HTML. Tutorial ini membahas tentang instalasi perangkat lunak seperti XAMPP dan Adobe Fireworks, dasar-dasar HTML, rancangan aplikasi berupa flowchart dan desain, serta cara pembuatan website yang terdiri dari berbagai halaman seperti home, profile, photos, about us, dan berbagai kategori seperti pengertian alam, cara melestarikan alam, serta foto-foto keind

1. TUGAS LAPORAN PROYEK APLIKASI
TUTORIAL WEB
“WEBSITE ALAM”
Disusun Oleh :
Nama :Nova Muhdalifah
NISN : 9973492387
Kelas : X RPL 1
SMK Negri 1 Depok
Jl.Raya Tapos, Gg Bhakti Suci No 100 Kel. Cimpaeun Kec. Tapos, Kta
Depok Telp(021)87907233

2. DAFTAR ISI
Halaman
KATA PENGANTAR .................................................................................................................
BAB I. INSTALASI SOFTWARE PENGEMBANG.................................................................
1.1. XAMPP ....................................................................................................................
1.2. Editor gambar (AdobeFirewoks) ..............................................................................
BABII MEMAHAMI DASAR-DASAR PEMOGRAMAN BERBASIS WEB..........................
2.1 Pengertian HTML......................................................................................................
2.2 Kode kode HTML......................................................................................................
BAB III. RANCANGAN APLIKASI .........................................................................................
3.1. Flowchart ..................................................................................................................
3.2 Desain Web................................................................................................................
BAB IV. PEMBUATAN APLIKASI WEB................................................................................
4.1 Cara Membuat Website..............................................................................................
4.2 Membuat HOME........................................................................................................
4.3 Membuat PROFILE...................................................................................................
4.4 Membuat PHOTOS....................................................................................................
4.5 Membuat ABOUT US...............................................................................................
4.6 Membuat Categoris Pengertian Alam........................................................................

3. KATA PENGANTAR
Puji dan syukur kami panjatkan atas kehadbirat Allah SWT yang telah melimpahkan
rahmat dan karunianya sehingga penulis dapat menyelesaikan tugas ini yang berjudul
TUTORIAL WEB, tak lupa shalawat dan salam tercurah kepada Nabi Muhammad SAW
beserta para keluarga dan sahabat dan pengikut-pengikutnya sampai akhir jaman.
Selanjutnya penulis mengucapkan terima kasih kepada guru bidang study yang telah
memberi kesempatan untuk pembuatan tugas.
Penulis menyadari bahwa dalam pembuatan tugas ini masih banyak terdapat
kekurangan, oleh karena itu pun penulis membuaka diri untuk menerima kritik dan saran
sebagai masukan guna kesempurnaan tugas ini. Maaf jika ada kesalahan dalam penulisan.
Penulis berharap semoga tugas ini dapat manfaat sebagai tambahan pengetahuan dan
informasi.
Terimakasih

4. BAB I
Instalisasi Software Pengembang
1.1 XAMPP
XAMPP merupakan kepanjangan dari XAMPP yaiut Apache, PHP, MySQL dan
phpMyAdmin. XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam
satu buah paket. Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan
konfigurasi web server Apache, PHP dan MySQL secara manual. XAMPP akan
menginstalasi dan mengkonfigurasikannya secara otomatis untuk anda atau auto konfigurasi.
Cara Menginstal XAMPP sebagai berikut :
1. Klik tulisan XAMPP dan tunggu beberapa saat
2. Ini adalah tampilan awal dari instalisasi XAMPP, lalu klik Next..

5. 3. Setelah itu tunggu beberapa saat kemudian. Pilih folder tujuan install XAMPP, lalu NEXT
4.Setelah instalasi selesai, jalankan XAMPP, lalu klik Start Apache dan Start MySQL
5. Web yang kita buat, akan beralamat di http://localhost, akses dengan browser sesuka anda.
1.2. Editor gambar (Adobe Firewoks)
Adobe Firewoks merupakan salah satu aplikasi paling populer yang digunakan untuk
mendesain sebuah web. Fireworks memberikan fasilitas desain secara visual serta berbagai
teknologi desain yang mumpuni untuk menghasilkan sebuah desain web yang profesional.
Dan ini cara bagaimana menginstal Adobe Firewoks :

6. 1. Double klik Firewoks
2. Setelah di double klik, akan muncul tampilan dibawah ini lalu klik NEXT..
3. klik accept

7. 4. Proses instalisasi, tunggu sampai proses selesai
5. Instalasi selesai , dan anda bisa mengeditnya sesuka keinginan anda.

8. BAB II
Memahami dasr-dasar pemograman berbagis WEB
2.1 Pengertian HTML
HTML atau Hypertext Marksup Language merupakan salah satu format yang
digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web.
Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai
Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk
mengatur format tampilan suatu dokumen.
2.2 Kode kode HTML
<html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag
tersebut adalah file HTML.
<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita bisa
meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE
& META.
<title> .. </title> Sebagai titel atau judul halaman/form. Kalimat yang terletak di
dalam tag ini akan muncul pada bagian paling atas browser Anda
(pada title bar).
<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan
sebagai isi halaman web. Di dalam tag ini bisa diletakkan
berbagai page attribute seperti bgcolor, background, text, link,
vlink, alink, leftmargin dan topmargin.
a. <body>, digunakan mendefinisikan teks beserta formatnya yang hendak
ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page
attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan
topmargin.
1) Background = digunakan untuk mengatur latar belakang dengan
gambar/image.
2) Bgcolor = digunakan untuk mengatur warna latar belakang dokumen,
dengan warna putih sebagai default-nya.
3) Teks = digunakan untuk mengatur warna teks dokumen, dengan
warna hitam sebagai warna default.
4) Link = Untuk mengatur warna link dokumen dengan warna biru
sebagai warna default
5) Vlink = Untuk mengatur warna visited link dokumen dengan default
ungu
6) Alink = digunakan untuk mengatur warna active link dokumen dengan
default merah.

9. b. Heading: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header.
"n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1>
merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.
c. Paragraph Baru: <P> Digunakan untuk pindah alinea atau membuat paragraf
baru. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Dalam tag ini juga
bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu
dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan
JUSTIFY.
d. Line Break: <BR> Digunakan untuk pindah ke baris baru.
e. No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak
secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
f. Font <FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag FONT
mempunyai attribut, yaitu: SIZE, FACE, COLOR.
 SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan
berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan
ukuran terbesar.
 FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih
maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat
spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_).
Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita
gunakan pada halaman web kita nantinya akan terdapat pada komputer
pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah
menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar.
Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa
menggunakan graphic.
 COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan
menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna
(red misalnya).
g. Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut
sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.

10. Contoh:
<basefont size=2 face="arial,helvetica" color="#ff0000">
Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang berhubungan dengan
pengaturan teks, yaitu:
Perhatian: Semua tag di bawah ini membutuhkan tap penutup.
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>
Italic
<CITE> Digunakan untuk quoting text
<CODE> Monospaced font (digunakan bila Anda ingin meletakkan
(memperlihatkan) kode HTML pada dokumen HTML Anda)
<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan
(memperlihatkan) kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan
(memperlihatkan) kode HTML pada dokumen HTML Anda)
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics.
h. <HR>, digunakan untuk membuat garis horisontal. Tag ini mempunyai atribut SIZE,
WIDTH, ALIGN dan NOSHADE.
Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut
WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE akan
menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.

11. i. LISTS
Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga
item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda
khusus/symbol.
Terdapat tiga tipe list yang dapat digunakan, yaitu:
 Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet
(tidak bernomor). List entries didefinisikan dengan tag <LI>. Pada jenis ini tidak
memerlukan pengurutan data.
Bentuk item tanda pada Unordered List dapat diubah dengan menggunakan
atribut TYPE kedalam tag <UL> dengan nilai “circle” untuk bentuk lingkaran
tengahnya putih, “square” untuk bentuk kotak padat hitam dan “disc” bentuk
lingkaran pada warna hitam.
 Ordered Lists: <OL> Juga digunakan untuk membuat daftar item bernomor,
dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga
didefinisikan dengan <LI> tag. Atribut yang ada pada Ordered List adalah TYPE
dan START.
 Preformatted Text: <PRE>. Digunakan untuk mengatur format tampilan agar
sesuai dengan aslinya.
 Definition Lists: <DL>, digunakan untuk menjelaskan istilah-istilah.
Definition List dinyatakan dengan tag <DL> dan diantara tag tersebut
ditambahkan tag <DT> Definition Term yaitu bagian istilah yang dijabarkan dan
tag <DD> Definition Data yang merupakan penjabaran dari istilah.

12. BAB III
Rancangan Aplikasi
3.1 Flowchart
Flowchart merupakan angkan hubungan antara proses digambarkan dengan garis
penghubung. gambar yang memperlihatkan urutan dan hubungan proses berserta intruksinya.
Gambaran ini dinyatakan simbol dengan demikian setiap simbol menggambarkan proses
tertentu. Sed
Flowchart merupakan langkah awal membuat program. Dengan adanya Flowchart
urutan proses kegiatan lebih jelas. Jika ada penambahan proses maka dapat dilakukan lebih
mudah. Setelah Flowchart selesai disusun, selanjutnya pemrograman (programmer)
menerjemahkannya program dengan bahasa pemrograman.
Simbol Simbol Flowchart
Flowchart disusun dengan simbol – simbol ini dipakai sebagai alat bantu
menggambarkan proses di dalam program.
Dalam pembuatan Flowchart tidak ada rumus atau patokan yang bersifat mutlak
karena flowchart merupakan gambaran hasil pemikiran dalam menganalisa suatu masalah
dengan computer sehingga flowchart yang dihasilkan dapat beragam antara satu pemrogram
dengan pemrogram lainnya.
Namun secara garis besar, setiap pengolahan selalu terdiri dari tiga bagian utama,
yaitu:
1. Input ialah bahan mentah
2. Proses pengolahan
3. Output ialah bahan jadi
Untuk mengolah data dengan komputer, dapat dirangkum urutan dasar untuk pemecahan
suatu masalah, yaitu:
1. START : Berisi instruksi untuk persiapan peralatan yang diperlukan sebelum
menangani pemecahan masalah.
2. READ : Berisi instruksi untuk membaca data dari suatu peralatan input.
3. PROCESS : Yang berkaitan dengan pemecahan persoalan sesuai dengan data yang
dibaca.
4. WRITE : Berisi instruksi untuk merekan hasil kegiatan ke peralatan

13. 5. END : Mengakhiri kegiatan pengolahan.
Flowchart Website Alam
3.2 Desain WEB
HOME

14. PROFILE
PHOTOS

15. ABOUT US
CATEGORIS PENGERTIAN ALAM

16. CATEGORIS CARA MELESTARIKAN ALAM
CATEGORIS FOTO FOTO KEINDAHAN ALAM

17. BACKGROUND
BANNER

18. FORM MENU

19. BAB IV
Pembuatan Aplikasi Web
4.1 Cara membuat website
1. Klik start lalu buka Notepad
2. Dan akan tampil notepad
3. lalu masukan sripnya.

20. 4. 2 Membuat HOME
1. Script
2. Tampilan

21. 4.3 Membuat PROFILE
1. Script PROFILE
2. Tampilan PROFILE

22. 4.4 Membuat PHOTOS
1. Script PHOTOS
2. Tampilan PHOTOS

23. 4.5 Membuat ABOUT US
1. Script ABOUT US
2. Tampilan ABOUT US

24. 4.6 Membuat Categoris Pengertian Alam
1. Srcipt Categoris Pengertian Alam

25. 2. Tampilan Categoris Pengertian Alam

26. 4.7 Membuat Categoris cara melestarikan Alam
1.Srcipt cara melestarikan alam

27. 2. Tampilan Cara melestarikan Alam
4.8. Membuat Categoris Foto foto Keindahan Alam
1. Categoris foto foto keindahan alam

28. 2. Tampilan Categoris foto foto keindahan alam

29. PENUTUP
Demikian yang dapat kami paparkan mengenai materi yang menjadi pokok bahasan
dalam makalah ini, mtentunya masih banyak kekurangan dan kelemahannya, kerena
terbatasnya pengetahuan dan kurangnya rujukan atau referensi yang ada hubungannya dengan
judul makalah ini.
Penulis banyak berharap para pembaca yang budiman suci memberikan ktritik dan
saran yang membangun kepada penulis demi kesempurnaan ini dan penulisan makalah di
kesempatan-kesempatan berikutnya. Semoga makalah ini berguna bagi penulis
padaakhususnya juga pada pembaca yang budiman pada umumnya.