Repository Universitas Komputer Indonesia

Komputer Aplikasi IT-1
Download gambar pendukung, extrak pada folder htm

Suryana, Taryana

Gambar Pendukung

Pemrograman Web 1
Navigasi Tab adalah cara untuk menavigasi di sekitar situs web. Biasanya,
navigasi tab menggunakan tombol navigasi (tab) yang disusun bersama
dengan tab yang dipilih atau disorot

 
 
W3.CSS NAVIGATION dan JAVASCRIPT 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
 
13. W3.CSS NAVIGATION TAB 
Navigasi Tab adalah cara untuk menavigasi di sekitar situs web. Biasanya, 
navigasi tab menggunakan tombol navigasi (tab) yang disusun bersama 
dengan tab yang dipilih atau disorot.  
Contoh berikut ini menggunakan elemen dengan nama kelas yang sama 
yaitu ("kota"), dan mengubah gaya antara display: none dan display: block 
untuk menyembunyikan dan menampilkan konten yang berbeda: 
Membuat Tab dan Link ketika Nama Suatu Kota Di Click, maka Deskripsi 
dari Kota tersebut akan ditampilkan pada Bar bagian bawah Menu. 
 
Gambar 13.1.Contoh Menu Tab 
 
 
 
13.1. Membuat Menu Horizontal 
 
Pada bagian ini akan dibahas mengenai bagaimana cara membuat Menu Tab 
dengan arah menyamping (horizontal). Adapun Isi dari Tab yang di Click 
akan tampil pada bar bagian bawah menu tersebut. 
 
NamaFile:menu1.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-container"> 
  <h2>Membuat Menu Tab dan Link</h2> 
  <p>Click Pada Menu Dibawah</p> 
</div> 
 
<div class="w3-bar w3-black"> 
  <button class="w3-bar-item w3-button" onclick="openKota('Bandung')">Bandung</button> 
  <button class="w3-bar-item w3-button" onclick="openKota('Garut')">Garut</button> 
  <button class="w3-bar-item w3-button" onclick="openKota('Tasik')">Tasik</button> 
</div> 
 
<div id="Bandung" class="w3-container kota"  style="display:none"> 
  <h2>Bandung</h2> 
   <p>Dikenal dengan Julukan Kota Kembang, adalah Ibu Kota dari Provinsi Jawa Barat.</p> 
</div> 
 
<div id="Garut" class="w3-container kota"  style="display:none"> 
  <h2>Garut</h2> 
  <p>Dikenal dengan Julukan Kota Dodol, dan  jaman juga dikenal dengan Jeruk Garut</p> 
</div> 
 
<div id="Tasik" class="w3-container kota"  style="display:none"> 
  <h2>Tasik</h2> 
  <p>Atau Tasikmalaya Dikenal dengan Julukan Kota Intan, dan Kota Kerajinan Tangan</p> 
</div> 
 
 
<script> 
function openKota(namaKota) { 
  var i; 
  var x = document.getElementsByClassName("kota"); 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none";   
  } 
  document.getElementById(namaKota).style.display = "block";   
} 
</script> 
 
</body> 
</html> 
 
 
 
Simpan dengan nama File:menu1.html, dan kemudian jalankan pada Browser seperti biasa 
dan jika hasilnya benar, akan ditampilkan halaman menu seperti berikut: 
 
 
 
 
Gambar 13.2. Menampilkan Tab dan Link kota 
Java Script Untuk Menampilkan isi Link yang di Click 
 
<script> 
function openKota(namaKota) { 
  var i; 
  var x = document.getElementsByClassName("kota"); 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none";   
  } 
  document.getElementById(namaKota).style.display = "block";   
} 
</script> 
 
 
 
13.2. Membuat Menu Vertical 
 
Pada bagian ini akan dibahas mengenai bagaimana cara membuat Menu Tab 
dengan arah vertikal. Adapun Isi dari Tab yang di Click akan tampil pada bar 
bagian kanan. 
 
NamaFile:menu2.html 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="w3.css"> 
<body> 
 
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:130px"> 
  <h5 class="w3-bar-item">MENU</h5> 
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event, 
'Bandung')">Bandung</button> 
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event, 
'Garut')">Garut</button> 
 
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event, 
'Tasik')">Tasik</button> 
  <button class="w3-bar-item w3-button tablink" onclick="openCity(event, 
'Cirebon')">Cirebon</button>  
</div> 
 
<div style="margin-left:130px"> 
  <div class="w3-padding">Menu Tab Vertikal</div> 
 
  <div id="Bandung" class="w3-container city" style="display:none"> 
    <h2>Bandung</h2> 
     <p>Ibukota dari Provinsi Jawa Barat</p>  
  </div> 
 
  <div id="Garut" class="w3-container city" style="display:none"> 
    <h2>Garut</h2> 
    <p>Garut kota yang terkenal dengan Dodol dan domba nya</p>  
   </div> 
 
  <div id="Tasik" class="w3-container city" style="display:none"> 
    <h2>Tasik</h2> 
    <p>Terkenal dengan sebagai kota Intan.</p> 
  </div> 
 
   <div id="Cirebon" class="w3-container city" style="display:none"> 
    <h2>Cirebon</h2> 
    <p>Terkenal dengan sebagai kota Udang.</p> 
  </div> 
</div> 
 
<script> 
function openCity(evt, cityName) { 
  var i, x, tablinks; 
  x = document.getElementsByClassName("city"); 
  for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
  } 
  tablinks = document.getElementsByClassName("tablink"); 
  for (i = 0; i < x.length; i++) { 
    tablinks[i].className = tablinks[i].className.replace(" w3-green", "");  
  } 
  document.getElementById(cityName).style.display = "block"; 
  evt.currentTarget.className += " w3-green"; 
} 
</script> 
 
</body> 
</html> 
 
 
 
Gambar 13.3.Menu Tab Vertikal 
 
Jika anda ingin menambahkan Efek Animasi ketika menampilkan Teks atau gambar pada 
kota yang di Click, maka dapat ditambahkan perintah  w3-animate,  contoh misalnya ketika 
di Click Cirebon, maka tulisan mengenai Cirebon akan ditampilkan dengan mode zoom 
 
<div id="Cirebon" class="w3-container city w3-animate-zoom" style="display:none"> 
   <h2>Cirebon</h2> 
    <p>Terkenal dengan sebagai kota Udang.</p> 
  </div> 
 
  
 
 
TUGAS 13.  
Dengan Menggunakan perintah yang sudah diajarkan barusan dan perintah lainya yang sudah 
diajarkan sebelumnya, buat program untuk menampilkan Menu Seperti berikut: 
 
Catatan: 
1. Jika di Click Tab Mobil Maka akan ditampilkan gambar Mobil dengan Animasi  
w3-animate-fading 
2. Jika di Click Tab UnikomMart Maka akan ditampilkan gambar Unikom Mart dengan 
Animasi w3-animate-bottom 
3. Jika di Click Tab Kampus Maka akan ditampilkan gambar Kampus dengan Animasi  
w3-animate-top 
4. Jika di Click Tab Foto Maka akan ditampilkan gambar Foto dengan Animasi  
w3-animate-zoom 
 
Semua Gambar, Banner, Link dan isinya boleh disesuaikan dengan isi tugas yang ingin kamu 
buat, Menu Boleh Horizontal atau Vertical 
 
 
Gambar Tugas13.Ketika di Click Mobil 
 
 
Gambar Tugas13.Ketika di Click UnikomMart 
 
 
 
Gambar Tugas13.Ketika di Click Kampus 
 
 
 
Gambar Tugas13.Ketika di Click Foto 
 
Adapun File yang dikumpulkan adalah file tugas13.html dan gambar atau foto yang kamu 
gunakan. Kirim ke Kuliah Online file yang sudah dalam bentuk zip atau rar, TUGAS13.ZIP 
 


Pertemuan 14:navigation Tab Dan Java Script

GEOLOGI LINGKUNGAN
Kilas Mengenai Gelogi dan Lingkungan di Ngarai Siano

Widya, Amilia

NGARAI SIANOK 
Diajukan untuk memenuhi salah satu persyaratan Mata Kuliah Geologi 
Lingkungan 
 
 
Dosen : 
Amilia Widya, S.Pd., M.T. 
 
Disusun Oleh :  
Jepry Apriyanto (10619022) 
Ath Thariq Rizki Putra H (10619013) 
Anita Tri Oktavia (10619024) 
Zalfa Nafisa Alfiyah M (10619023) 
Shiva Noviani (10619009) 
Ahmad Nur Faridzi (10619011) 
Mateus Simon Sewa (10619007) 
 
PROGRAM STUDI PERENCANAAN WILAYAH DAN KOTA 
FAKULTAS TEKNIK DAN ILMU KOMPUTER 
UNIVERSITAS KOMPUTER INDONESIA 
2020 
BAB I 
PENDAHULUAN 
 
1.1 Latar Belakang  
Ngarai Sianok Terletak di perbatasan kota Bukittinggi, di kecamatan IV Koto, 
Kabupaten Agam, Sumatera Barat. Lembah ini memanjang dan berkelok sebagai 
garis batas kota dari selatan ngarai Koto Gadang sampai ke nagari Sianok Anam 
Suku, dan berakhir di kecamatan Palupuh. Ngarai Sianok merupakan sebuah lembah 
sempit yang dikelilingi oleh bukit-bukit bertebing curam yang dihiasi dengan aliran 
sungai kecil di tengahnya. Kontur Lembah Sianok terbentuk karena proses turunnya 
sebagian lempengan bumi, sehingga menimbulkan patahan berwujud jurang yang 
curam. Ngarai Sianok merupakan wujud visual yang paling jelas dari aktivitas 
pergerakan lempeng bumi (tektonik) di Pulau Sumatera ini. Proses terbentuknya 
patahan tersebut menghasilkan sebuah kawasan yang subur dengan panorama yang 
indah. Kawasan ini memiliki sebutan lain yaitu, Lembah Pendiam, karena 
suasananya yang tenang dan damai. Didukung dengan udaranya yang bersih dan 
sejuk, diiringi latar suara kicauan burung dan gemericik air sungai, ngarai ini cocok 
sebagai tempat melepaskan beban pikiran dari rutinitas sehari-hari. 
 Dari uraian yang telah dikemukakan sebelumnya, maka penulis akan melakukan 
analisis terhadap geologi lingkungan di Ngarai Sianok 
 
 
1.2 Tujuan  
Tujuan dari penulisan makalah ini adalah untuk mengatahui sejarah 
terbentuknya, proses geologi, bentang alam, jenis batuan, flora dan fauna, analisis 
rentan bencana, pemanfataan lahan, kondisi alam yang unik dan juga mitos atau 
budaya yang berada di Ngarai Sianok Sumatera Barat. 
 
 
 
 
BAB II 
TINJAUAN PUSTAKA 
 
 
2.1 Proses Geologi  
 Proses Geologi adalah semua aktivitas yang terjadi dibumi baik yang berasal 
dari dalam bumi (endogen) maupun yang berasal dari luar bumi (eksogen). Gaya 
endogen adalah gaya yang berasal dari dalam bumi seperti orogenesa dan 
epirogenesa, magmatisme dan aktivitas vulkanisme, sedangkan gaya eksogen adalah 
gaya yang bekerja di permukaan bumi seperti pelapukan, erosi dan wass wasting 
serta sedimentasi.  
2.2 Bentang Alam  
 Bentang alam adalah terjemahan dari Landform yang artinya sebagai suatu 
unit geomorfologis yang pengelompokannya berdasarkan pada sejumlah 
karakteristik.  Jenis jenis bentang alam adalah lembah, bukit, tanjung, dll 
2.3 Batuan  
 Batuan meruapakan kumpulan atau agregat dari mineral yang telah dalam 
keadaan mengeras dan membeku. Batuan juga dikenal sebagai benda alam yang 
menjadi penyusun utama materi bumi. Batuan diklasifikasikan dengan berdasarkan 
komposisi dan kimia, dengan tekstur partikel unsur dan proses pembentukannya.  
2.4 Batuan Filit  
 Batuan filit merupakan tipe batuan metamorf berfoliasi yang terbuat dari 
batusabak yang termetamorfosis lebih jauh dan menyebabkan mika putih berbutir 
sangat halus menjadi memiliki orientasi tertentu. Filit memiliki kompoisisi utama 
berupa kuarasa, serisit mika, dan klorit.  
2.5 Batuan Kuarsit  
 Batuan Kuarsit adalah batuan metamorf non foliasi yang keras, yang 
merupakan hasil perubahan metamorfisme dari batupasir kuarsa. Kuarsi murni 
biasanya berwarna putih hingga abu abu, tetapi kuarsit juga sering ditemukan dalam 
berbagai nuasa merah muda dan merah karena jumlah yang bervariasi dari besi 
oksida. 
2.6 Batuan Lanau  
Batuan lanau adalah batuan sedimen yang utamanya tersusun karena partikel 
berukuran lanau. Arti berukuran disininmengacu pada skala ukuran butir yang bisa 
dilihat pada skala wenworth. Batu lanau terbentuk dimana air, angin, atau endapanes 
membawa material berukuran lanau dan kemusian terakumulasi, terpadatkan dan 
tersementasi menjadi batuan. 
2.7 Batuan Tuff  
 Batuan tuff adalah jenis batuan yang terbuat dari abu vulkanik yang 
dikeluarkan dari lubang angin saat terjadi letusan gunung erapi. Setelah ejeksi dan 
deposisi, abu tersebut mengalami litifikasi menjadi batuan padat. Batuan yang 
mengandung abu lebih dari 75% dianggap tuff, sedangkan batuan yang mengandung 
25% sampai 75% abu disebut tufan. 
2.8 Batuan Piroklastik  
 Batuan Piroklastik adalah batuan yang dihasilkan dari proses litifikasi bahan 
yang dihembuskan dari pusat vulkanik delama masa erupsi yang memiliki sifat 
eksplosif. Dimana nantinya bahan bahan tersebut akan jatuh ke permukaan bumi 
yang kemudian akan mengalami litifikasi baik itu sebelum di transport maupun hasil 
dari reworking. 
2.9 Flora dan Fauna  
Flora secara umum adalah segala jenis tumbuhan serta tanaman yang ada di 
muka bumi dan Fauna adalah segala jenis hewan yang hidup di muka bumi. Flora 
dan fauna memiliki jenis yang begitu banyak dan beragam hingga tidak lagi 
terhitung jumlahnya. Beragam hewan dan tumbuhan tersebut memiliki tempat 
tinggal yang beragam mulai di laut, atau bisa pula di darat. 
2.10 Rentan Bencana  
 Potensi Ancaman adalah suatu kondisi atau situasi yang mangancam 
jiwa,kesehatan, harta dan lingkungan. Geologi adalah Ilmu yang mempelajari bumi, 
komposisinya, struktur, sifat-sifat fisik, sejarah, dan proses pembentukanya. 
Bahaya geologi diantaranya seperti gelombang tsunami, gempa bumi, letusan 
gunung berapi, tanah longsor 
2.11 Pemanfaatan Lahan  
 Pemanfaatan lahan diartikan sebagai setiap bentuk intervensi (campur tangan) 
manusia terhadap lahan dalam rangka memenuhi kebutuhan hidupnya. Pemanfaatan 
lahan harus disesuaikan dengan kemampuan tanah dan pemberian perlakuan harus 
disesuaikan dengan syarat-syarat yang diperlukan, agar tanah dapat berfungsi 
dengan baik tanpa harus mengurangi tingkat kesuburannya, sehingga kebutuhan 
hidup dapat terpenuhi. Agar pemanfaatan lahan sesuai dengan kemampuan tanah 
dan tidak terjadi kerusakan lingkungan, maka perlu adanya suatu perencanaan tata 
guna lahan, sehingga pemanfaatan lahan ditunjukan untuk suatu peruntukan tertentu. 
2.12 Mitos dan Budaya  
 Mitos adalah suatu cerita tradisional mengenai peristiwa gaib dan kehidupan 
dewa-dewa. Istilah mitos berasal dari bahasa latin yang artinya “perkataan” atau 
“cerita”. Budaya adalah segala daya dari budi, yakni cipta, rasa dan karsa yang 
merupakan adat istiadat atau suatu yang sudah terjadi menjadi kebiasaan yang sukar 
diubah, budaya adalah suatu cara hidup yang berkembang dan dimiliki bersama oleh 
sebuah kelompok tertentu.  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
BAB III 
GAMBARAN UMUM 
 
3.1 Lokasi Ngarai Sianok  
 Ngarai Sianok adalah destinasi wisata alam di Sumatera barat. Tepatnya di 
perbatasan kota Bukittinggi, di kecamatan IV Koto, Kabupaten Agam, Sumatera 
barat. 
Gambar 3.1 Peta Lokasi Ngarai Sianok 
 
 
 
 
 
 
 
 
 
 
  
 
Sumber : Google Earth 
 
3.2 Kondisi Fisik Ngarai Sianok 
Daerah ngarai Sianok mempunyai bentuk lahan bergelombang dan berbukit, 
kondisi dataran Kota Bukittinggi mempunyai kemiringan lereng dibawah 8% hingga 
diatas 40%. Kemiringan lerengnya umumnya kurang dari 10% dengan ketinggian 
berkisar antara 865-920 m di atas permukaan laut. 
BAB IV 
PEMBAHASAN 
 
Ngarai Sianok terletak di perbatasan kota Bukittinggi, di kecamatan IV koto, 
Kabupaten Agam, Sumatera Barat. Lembah ini memanjang dan berkelok sebagai 
garis batas kota dari selatan ngarai Koto Gadang sampai ke nagari Sianok Anam 
Suku, dan berakhir di kecamatan Palupuh. Sejarah terbentuknya Ngarai Sianok ini 
terbentuk akibat letusan gunung api purba yang lokasinya di Danau Maninjau 
sekarang.gunung itu bernama Gunung Tinjau. Melalui gerakan pergeseran 
horizontal sebesar 2 mm/hari selama ribuan tahun, terbentuklah celah lebar ngarai 
sianok ini. Proses geologi yang terjadi di Ngarai Sianok ini adalah berasal dari luar 
bumi (eksogen) dan dalam bumi (endogen). Dan bentang alam yang dihasilkan 
adalah sebuah lembah dan tebing yang menjulang luas.  
 
Gambar 4.1 Ngarai Sianok 
 
 
 
 
 
 
 
 
 
 
 
Jenis batuan yang berada di ngarai sianok adalah batuan filit, batuan kuarsit, batuan 
lanau, batuan tuff dan batuan piroklastik.  
Gambar 4.2 Batuan filit 
 
 
 
 
 
 
 
Gambar 4.3 Batuan Kuarsit 
 
 
 
 
 
 
 
 
 
Gambar 4.4 Batuan Lanau 
 
 
Gambar 4.5 Batuan Tuff 
 
 
 
 
 
 
 
 
 
Gambar 4.5 Batuan Piroklastik 
 
 
 
 
 
 
 
 
Flora dan Fauna yang ada di Ngarai Sianok adalah untuk Flora ada Bunga 
Rafflesia dan tumbuhan Obatobatan. Untuk Fauna di Ngarai Sianok terdapat Macan 
tutul, Monyet, Siamang, Rusa, Babi Hutan, Tapir dan Kerbau.  
 Analisis Rentan Bencana yang terdapat di Ngarai Sianok adalah beresiko 
terjadinya Longsor dan rawan bencana gerakan tanah dan juga banjir.  
 Kondisi alam yang unik yang terdapat di Ngarai Sianok adalah tebing yang 
menjulang tinggi dan juga terdapat sungai kecil ditengah lembah Ngarai Sianok.  
 Pemanfaatan Lahan di Ngarai Sianok yaitu adalah Pariwisata, Permukiman, 
dan Pertanian atau Peternakan.  
 Mitos yang ada di ngarai sianok adalah menurut masyarakat pada jaman 
dahulu terdapat seorang laki-laki yang mempunyai tubuh besar, kulit sekeras 
tembaga, dan sakti bernama Katik Muno. Ia datang untuk mengiringi pimpinannya 
yaitu Sang Sapurba.Selama tinggal di Minangkabau si Katik Muno ini sangat ingin 
menjadi penguasa. Keinginannya yang amat kuat membuat Katik Muno yang 
awalnya mempunyai sifat lemah lembut berubah menjadi orang yang jahat dan 
kasar. Kejahatannya mengakibatkan penderitaan untuk penduduk di sekitarnya. 
Melihat hal itu Sang Sapurba pun merasa sangatlah malu. Agar tidak berkonflik 
dengan atasannya, Si Katik Muno berubah menjadi naga dan kemudian membagi 
daratan itu menjadi 2 bagian. Daratan yang terbagi itu merupakan Ngarai Sianok 
pada saat ini. Saat awal terbentuk, dasar ngarai itu dialiri oleh api yang membara. 
Namun setelah pertempuran antara Katik Muno dan atasannya yaitu Sang Sapurba 
yang dimenangkan oleh Sang Sapurba selesai si Katik Muno mengubah aliran api 
menjadi aliran air yang menyejukkan sebagai permohonan maaf. 
 Budaya yang di sajikan di ngarai sianok ada beberapa yaitu: 
a. gerakan tari piring  
melambangkan kerja sama ketika warganya berada di sawah. Koreografi ini meniru 
cara petani bercocok tanam dan menunjukkan ungkapan rasa syukur mereka saat 
menuai hasil panen yang bakal menghidupi seisi rumah. Piring di tangan mereka 
diisi makanan yang lezat untuk dipersembahkan kepada dewa. Tetapi sejak agama 
Islam masuk, tari piring mempersembahkan sesajennya kepada majelis keramaian 
dan raja-raja atau pembesar negeri. 
 b. semburan api  
semburan api adalah salah satu budaya di Mana seorang menyemburkan api dari 
mulut ke luar yang bisa dikaitkan dengan hewan suci naga digunakan dalam 
kehidupan masyarakat China sebagai salah satu wujud perlindungan terhadap 
keselamatan para penduduknya 
 
 
 
BAB V 
KESIMPULAN 
 
Dari hasil analisis Geologi Lingkungan Ngarai Sianok, Ngarai Sianok 
terbentuk karena proses geologi yang berasal dari dalam bumi (endogen) dan luar 
bumi (eksogen) yaitu berupa lipatan (rebah), patahan dan sungai. Di Ngarai Sianok 
itu sendiri terdapat batuan filit, kuarsit, lanau, tuff dan juga piroklastik. Bentang alam 
yang ada di Ngarai Sianok ada sungai, Air terjun, Lembah dan juga tebing tebing 
yang menjulang tinggi. Analisis rentan bencana yang dapat terjadi di Ngarai Sianok 
adalah longsor, banjir dan juga rawan pergerakan tanah. Mitos yang berasal dari 
Ngarai Sianok adalah mitos bahwa pertempuran antara Katik Muno dan atasannya 
yaitu Sang Sapurba yang dimenangkan oleh Sang Sapurba selesai si Katik Muno 
mengubah aliran api menjadi aliran air yang menyejukan sebagai permohonan maaf. 
Budaya yang ada di Ngarai Sianok adalah Tarian Piring dan Semburan Api.  
 
 
 
 
 
 
 
 
 
 
 
 
 
DAFTAR PUSTAKA 
 
Noor, D. (2014). Pengantar geologi. Deepublish. 
Imanda, A. (2013). Penanganan permukiman di kawasan rawan bencana gerakan 
tanah studi kasus: Permukiman sekitar Ngarai Sianok di Kelurahan 
Belakang Balok, Kota Bukittinggi. Journal of Regional and City Planning, 
24(2), 141-156. 
Rudy. 2019. Ngarai Sianok, Indahnya Pahatan Sang Pencipta. 
https://www.nativeindonesia.com/ngarai-
sianok/#:~:text=Secara%20sejarah%20geologi%2C%20Ngarai%20ini,cel
ah%20lebar%20ngarai%20sianok%20ini. [diakses tanggal 29 Desember 
2020]. 
Nugraha, M Catur. 2020. Ngarai Sianok, Patahan Lempeng Sumatra yang Amat 
Elok. https://www.jelajahsumbar.com/ngarai-sianok/ [diakses tanggal 29 
Desember 2020] 
Anonim. 2018. Legenda Ngarai Sianok “Peran Strategis Sastra Dalam 
Pengembangan Pariwisata Daerah” 
http://bukittinggiminangkabau.blogspot.com/2018/05/legenda-ngarai-
sianok-peran-strategis.html [diakses pada tanggal 29 Desember 2020] 
Dinata, F. A., & Suasti, Y. (2019). Evaluasi Penetapan Batas Sempadan Ngarai 
Sianok Terhadap Bahaya Mikrozonasi Gerakan Tanah Bagi Permukiman 
Di Kota Bukittinggi. JURNAL BUANA, 3(1), 174-182. 


Pertemuan 12 : Geologi Ngarai Sianok

Aplikasi IT-1 (Web Program)
Materi ini membahas, bagaimana mempublikasikan halaman web yang dibuat ke Internet, sehingga dapat diakses atau dibuka dari mana saja

 
 
PUBLIKASI WEB KE INTERNET 
 
Oleh:Taryana Suryana M.Kom 
Teknik Informatika Unikom 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
Line/Telegram: 081221480577 
 
14.1.HOSTING WEB 
Agar program dan latihan html yang pernah dibuat dapat dibuka dari seluruh dunia maka program 
tersebut harus di hosting di web server. Ada dua pilihan layanan, yaitu yang berbayar dan yang gratis. 
Anda boleh menghosting atau mempublikasikan di server mana saja, silahkan anda bisa cari di google 
dengan mengetikan “hosting gratis”  atau “free hosting” dan lain-lain. 
 
Sebelum memulai materi 14 ini, alangkah baiknya perbaiki dulu yang tugas13.html, supaya lebih bagus 
lagi, adapun ketentuannya adalah: 
1. Supaya lebih gampangl lagi, simpan semua file dalam folder baru, misalnya tugas14, semua 
file termasuk file html, gambar dan file w3.css simpan disana 
2. Ganti nama File Tugas13.html menjadi index.html  menggunakan huruf kecil semua 
3. Nama File Gambar juga harus huruf kecil semua, dan jangan menggunakan spasi. 
4. Tambahkan satu Tab menu Profile, yang isinya Nim,Nama,Kelas, tambahin Foto kamu juga 
boleh. 
5. Karena Akan di Onlinekan di Internet, tambahkan dan atur agar tulisan dan gambarnya sesuai. 
 
 
 
 
 
 
 
 
 
 
Pada materi ini akan dibahas bagaimana hosting di web server yang gratis yang beralamat di : 
https://www.000webhost.com/. 
Langkah-langkahnya adalah sebagai berikut: 
1. Jalankan browser buka alamat berikut: https://www.000webhost.com/ ,  
Selanjutnya akan ditampilkan jendela berikut: 
 
 
Gambar 14.1 Halaman Utama 
2. Pilih Free Web Hosting, dan Click tombol GET STARTED 
3. Pilih FREE SIGN UP 
 
Gambar 14.2. Memilih Jenis Hosting 
 
 
4. Jika Anda memiliki email di Google, gunakan dan Click LOG IN WITH GOOGLE 
 
Gambar 14.3 Halaman Sign Up / Pendaftaran 
 
5. Masukan Username dan Password Google Anda, jika berhasil akan ditampilkan jendela seperti 
berikut: 
 
Gambar 14.4 Halaman Jika Berhasil Login 
 
6. Click LET’S CREATE SOME MAGIC,  Akan ditampilkan pilihan berikut: 
 
 
 
Gambar 14.5. Pilih Jenis Website 
7. Click Create Web Design 
 
Gambar 14.6. Pilih Kategori Website 
 
8. Click Other, masukan nama Project, kemudian click ok 
Nama Project, masukan Nama Depan kamu, harus UNIK kalau udah ada yang menggunakan akan 
ditolak oleh server: 
Nama Project: Penting banget di ingat, nantinya akan menjadi nama domain website kamu di 
internet: misal kalau tadi name Projectnya:taryanarx maka domain internetnya menjadi : 
https://taryanarx.000webhostapp.com/ 
Alamat inilah yang nantinya bisa dibuka dari mana saja. 
 
 
 
Gambar 14.7. Masukan Nama Project 
 
Tunggu beberapa saat jika, project berhasil dibuat akan ditampilkan jendela berikut:, jika tidak  
berhasil, ulangi isi kembali nama project nya. 
 
Jika berhasil ditampilkan jendela berikut: 
 
Gambar 14.8. Halaman Upload Your Site 
 
9. Click tombol Upload Your Site 
 
 
 
Gambar 14.9. Pilic Public_html dan Upload Files 
 
10. Pada layar sebelah kiri, click Public_html, kemudian pada jendela atas kanan, click tombol 
Upload Files 
 
Gambar 14.10. Select Files 
 
11. Click tombol Select Files 
 
 
 
Gambar 14.11. Semua File yang akan di upload dipilih 
 
12. Select semua file yang digunakan untuk membuat Website kamu, File tugas13.html file w3.css 
dan semua gambar yang digunakan, kemudian click OPEN: 
Nama file tugas13.html harus diganti namanya menjadi index.html 
 
 
Gambar 14.12. Upload File yang tadi di Select 
 
 
13. Click tombol Upload. Untuk mengirimkan Files ke Server, dan jika berhasil dikirim akan 
ditampilkan jendela seperti berikut: 
 
 
 
Gambar 14.13. Contoh semua file telah di Upload ke Server 
 
 
14. Untuk melihat hasilnya buka tab baru di jendela browser, kemudian ketikan 
https://namaproject. 000webhostapp.com 
 
NamaProject adalah NamaProject anda Masing-masing, misalnya tadi namaproject saya adalah 
taryanarx. Maka buka di Browsernya menjadi  https://taryanarx.000webhostapp.com/ 
 
Hasilnya kira-kira seperti ini. 
 
 
 
 
Ok, selamat belajar dan jangan lupa terus mencoba, kamu harus bisa, harus berhasil……tetep 
semangat 
 
“Tidak Berat Membawa Ilmu Berapapun Banyaknya” 
 
 
Kamu bisa Coba di Webhosting yang lain, kalau untuk latihan boleh yang gratisan dulu, nah  kalau 
kamu serius ingin memiliki website premium dengan domain sendiri kamu bisa membelinya via 
webhosting yang tersedia. 
 
Contohnya: 
www.hostinger.co.id 
www.masterweb.com 
www.jagoanhosting.com 
www.qwords.com 
 
 
Nb: 
Jika sudah berhasil dan Online di Internet, silahkan kirimkan, link atau alamat website kamu: 
Di File Tugas14.pdf  
Tuliskan 
 
Nim: 
Nama Lengkap: 
Kelas: 
Alamat Website: 
 
 
Terimakasih, sampai jumpa lagi di Semester berikutnya, tetap jaga Protokol Kesehatan, semoga 
kita diberi rizki dan sehat selalu 
 
Aamiin YRA 
 
Taryana Suryana.M.Kom 
Teknik Informatika 
  


Not a member yet

Gambar Pendukung

Pertemuan 14:navigation Tab Dan Java Script

Pertemuan 12 : Geologi Ngarai Sianok

Pertemuan 15. Mempublikasi Halaman Web Ke Internet

Pertemuan 15. Mempublikasi Halaman Web Ke Internet

Humas Internal Dan Eksternal

Opini Publik

Media Humas

Komunikasi Non Verbal Dalam Bisnis

Persiapan Dunia Kerja - Interview Kerja

15,029

70,114