Proses pembuatan web statis sederhana dengan HTML tentang Wisata Pantai Parangtritis.
A. Membuat halaman profil pantai parangtritis dengan memberi judul, isi profil, dan juga link ke menu galery dan fasilitas:
1. Pertama-tama kita akan membuat web statis mengenai profil pantai parangtritis.
2. Buka text-editor, lalu copy-paste kode html membuat web statis profil parangtritis berikut ini :
<html>
<head>
<title>Profil Parangtritis</title>
</head>
<body bgcolor=”#FFFF00″>
<center><h1>Web Wisata Pantai Parangtritis</h1></center>
<hr />
<marquee>Selamat Datang di Website Wisata Pantai Parangtritis
Yogyakarta</marquee>
<h3>Profil Wisata Pantai Parangtritis:</h3>
<p>Berada sekitar 27 km sebelah selatan Kota Jogjakarta. Jalur yang pertama adalah jalur lurus Jogjakarta – Jalan Parangtritis – Kretek – Parangtritis. Tiket masuk kawasan wisata Pantai parangtritis adalah Rp.3000/orang.Parangtritis pantai yang landai dan dipercantik dengan keberadaan bukit berbatu dan karang, bukit pasir (gumuk pasir) dengan pasir berwarna hitam. Pantai Parangtritis yang cantik memiliki banyak fenomena yang menarik,
baik pemandangan alamnya maupun kisah supranaturalnya.</p>
<center>
<h3><a href=”sejarah.html”>Profil</a></h3>
<h3><a href=”galery.html”>Galery Foto</a></h3>
<h3><a href=”fasilitas.html”>Fasilitas</a></h3>
</center>
</body>
</html>
Simpan kode html web statis halaman profil tersebut dan simpan dengan nama profil.html. Simpan di folder baru saja dengan nama “web-statis”, yang nantinya untuk menyimpan halaman galery dan fasilitas juga. Setelah tersimpan, buka file profil.html dengan cara klik kanan lalu “Open With” pilih Firefox atau chrome.
Maka Hasil dari kode html membuat web statis halaman profil pantai parangtritis adalah
Keterangan :
Untuk tag <marquee> merupakan untuk membuat efek tulisan/gambar bergerak. tag <a href> merupakan tag untuk membuat link pada tulisan/gambar.
B. Membuat Web Statis dengan html untuk halaman Fasilitas pantai parangtritis.
Seperti halaman profil sebelumnya, pada notepad/text-editor klik file new. atau buat halaman baru. Selanjutnya copy-paste kode html web statis halaman fasilitas berikut ini:
<html>
<head>
<title>Fasilitas Parangtritis</title>
</head>
<body bgcolor=”rrcc00″>
<center><h1>Web Wisata Pantai Parangtritis</h1></center>
<hr />
<marquee>Selamat Datang di Website Wisata Pantai Parangtritis
Yogyakarta</marquee>
<h3>Fasilitas Wisata Pantai Parangtritis:</h3>
<p><strong>1.</strong> Hotel: Terdapat banyak sekali hotel dan penginapan dengan berbagai harga.<br />
2. Berbagai macam toko souvenir dan oleh-oleh khas Jogjakarta (Bantul).<br/>
3. Wisata kuliner di Pantai Depok yang menyediakan ikan dan makanan laut segar.<br />
4. Di Pantai Depok juga terdapat pasar tradisional.<br />
5. lahan parkir yang luas dan penyewaan kamar mandi.<br />
6. Lokasi foto di kawasan gumuk pasir laksana seperti foto di gurun pasir.<br/>
7. Menikmati Sunset yang Romantis di Parangtritis sambil menikmati jagung bakar.</p>
<center>
<h3><a href=”fasilitas.html”>Profil</a></h3>
<h3><a href=”galery.html”>Galery Foto</a></h3>
<h3><a href=”fasilitas.html”>Fasilitas</a></h3>
</body>
</html>
Setelah kode html diatas di paste pada halaman baru notepad, lalu simpan kode tersebut dengan nama fasilitas.html di folder yang sama dengan profil.html yaitu folder web-statis. Maka halaman web statis fasilitas parangtritis sudah jadi. Untuk membuka halaman fasilitas.html silakan klik link “Fasilitas” pada halaman profil tadi.
3. Membuat Web Statis dengan html untuk halaman Fasilitas pantai parangtritis.
Tahap Selanjutnya membuat web statis halaman galery foto pantai parangtritis. Sebelumnya silahkan cari foto digoogle tentang parangtritis dua file. Lalu simpan foto di folder “web-statis” tadi. Membuat web statis halaman galery masih sama caranya, buat lembar baru notepad/text-editor. Lalu copy-paste kode html membuat web halaman galery berikut ini:
<html>
<head>
<title>galery foto</title>
</head>
<body bgcolor=”#00FFFF”>
<center><h1>Web Wisata Pantai Parangtritis</h1></center>
<hr />
<marquee>Selamat Datang di Website Wisata Pantai Parangtritis Yogyakarta</marquee>
<h3>Galery Foto Wisata Pantai Parangtritis:</h3>
<p><img src=”Parangtritis.jpg” width=”266″ height=”194″ /> <img src=”parangtritis2.jpg” width=”259″ height=”194″ /></p>
<center>
<h3><a href=”profil.html”>Profil</a></h3>
<h3><a href=”galery.html”>Galery Foto</a></h3>
<h3><a href=”fasilitas.html”>Fasilitas</a></h3>
</center>
</body>
</html>
Simpan kode html membuat web statis halaman galery pantai parangtritis di atas dengan nama galery.html pada folder “web-statis”. Untuk melihat hasilnya silahkan klik link “Galery” pada halaman yang sudah dibuka pada web browser.
Hasil web statis halaman galery dengan html sbb:
Keterangan :
EmoticonEmoticon