Membuat Web Statis dengan HTML

membuat web statis sederhana hmtl

SeputarTI.Com | Saya ingin sharing membuat Website Statis sederhana dengan HTML. Untuk membuat website statis dengan HTML perlu kita tahu dasar-dasar HTML mulai dari pengenalan, tag-tag html, atribut tag, nilai atribut, dan lainnya. Seperti pada umumnya web statis html selalu didahului dengan tag <html> yang di tutup dengan </html>.

Pada artikel ini saya contohkan membuat web statis sederhana dengan html tentang wisata pantai parangtritis. Wisata parangtriris berada di yogyakarta, dimana web statis ini berisi profil, fasilitas, serta galery foto. Untuk membuat web statis wisata pantai parangtritis silahkan siapkan tool/text editor terlebih dahulu seperti notepad/dreamweaver.

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

membuat web statis sederhana hmtlKeterangan :

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>

membuat web statis 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:

web statis dengan html

Belajar membuat web statis dengan html sederhana sangat mudah. Jika agan ingin membuat web statis tampak rapi maka baca juga artikel Membuat Web Statis dengan Tabel HTML. Makasih udah berkunjung, jika ada pertanyaan silahkan berkomentar. Oke…. 🙂

ini link downloadnya Gan :

DOWNLOAD CONTOH WEB DINAMIS HTML

About Mr.Gng 247 Articles
Si Anak dari Orang Tua tersayang ingin berbagi ilmu dengan harapan bermanfaat bagi orang lain. Situs SeputarTI.Com ini sebagai salah satu media berbagi saya, khususnya dibidang TI. Salam Kenal dari saya... :-)

2 Comments

Leave a Reply

Your email address will not be published.


*