SeniKoding.com - Website adalah situs atau tempat yang digunakan untuk memberikan informasi didunia internet. Sedangkan Website Statis adalah situs yang dibuat atau dirancang secara sederhana atau statis. Ada banyak website yang dibangun secara sederhana, karena tujuan dibentuknya web pun sederhana sehingga cukup dengan rancangan website statis. Contoh website yang dibangun cukup dengan statis adalah web porto folio atau profile seseorang, web organisasi kecil, dan masih banyak lagi. Intinya website statis hanya dibentuk menggunakan bahasa pemrogramman HTML sebagai bangunan dasar, CSS sebagai desain web dan JAVASCRIPT sebagai tambahan interaksi. Minimal dua bahasa pemrogramman HTML dan CSS yang harus dipelajari dengan baik untuk dapat membuat website statis.
Misalkan ada pertanyaan seperti ini, bagaimana untuk membuat tulisan-tulisan atau berita didalam dinding website tersebut?
Jawabannya: ya tulis saja semua berita yang terkait didalam HTML nya.
Dari tanya jawab diatas kenapa demikian, karena website yang dibangun dengan sederhana tanpa ada database yang digunakan untuk menyimpan file, image, data-data yang lain, sehingga berita-berita yang ingin ditulisakan ya langsung dituliskan di Kode pemrogrammannya yaitu di HTML nya. Lain halnya jika website yang diranjang adalah Website Dinamis, maka semua konten, tulisan, berita dan file akan disimpan didalam Database dan salah satu Kode Server Side seperti bahasa pemrogramman yang digunakan adalah PHP.
Cara Membuat Website Statis Sendiri
Sekarang kita fokus untuk membuat website statis sendiri. Materi yang diperlukan yaitu:
1. HTML
HTML singkatan dari HyperText Markup Language adalah bahasa Standard atau Standard Bahasa yang digunakan untuk menampilkan halaman website.
Bagaimana penerapan bahasa HTML didalam website, ayo kita simak:
Tutorial Belajar HTML: Mambuat Website Statis Dengan HTML
Script HTML :
<!DOCTYPE html> <html> <head> <title>Latihan Membuat Website Statis</title> </head> <body> <div id="container"> <div class="menu"> <ul> <li><a href="">Home</a> |</li> <li><a href="">Profile</a> |</li> <li><a href="">Carrier</a> |</li> <li><a href="">Contact</a></li> </ul> </div> <div class="content"> <h1>Latihan Membuat Website Statis</h1> <p>Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com.</p> <p>Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com.</p> </div> <div id="footer"> <p>Copy right 2017, by <a href="wwww.SeniKoding.com">SeniKoding.com</a></p> </div> </div> </body> </html>
Penjelasan :
- <!DOCTYPE html> : adalah merupakan ciri dari kerangka HTML5.
- <html> : adalah awalan yang harus ada didalam kode HTML.
- <head> : adalah bagian dari kepala website, dan ditutup oleh </head>.
- <title> : adalah bagian judul dari website, dan ditutup oleh </title>.
- <body> : adalah tempat meletakkan konten atau isi dari website, dan ditutup dengan </body>.
Buka file berjudul latihan.html yang sudah dibuat kedalam Browser Web, seperti Mozila atau Chrome.
Hasil :
Hasil dari Script HTML diatas adalah seperti dibawah ini:
 |
| Halaman Website Statis |
Ini adalah masih sekedar halaman HTML saja belum ada campur tangan kode CSS. Ayo kita bahas dibawah halaman HTML yang di padukan dengan CSS.
Baca juga: Panduan Membuat Website
2. CSS
CSS kepanjangan dari Cascading Style Sheet. Yang berfungsi untuk mengatur format atau tampilan dalam halaman Website.
Bagaimana penerapan CSS kedalam halaman website, ayo kita simak:
Tutorial Belajar HTML: Mambuat Website Statis Dengan HTML + CSS
Script HTML dan CSS :
HTML :
<!DOCTYPE html> <html> <head> <title>Latihan Membuat Website Statis</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div class="menu"> <ul> <li><a href="">Home</a> |</li> <li><a href="">Profile</a> |</li> <li><a href="">Carrier</a> |</li> <li><a href="">Contact</a></li> </ul> </div> <div class="content"> <h1>Latihan Membuat Website Statis</h1> <p>Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com.</p> <p>Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini adalah latihan Latihan Membuat Website Statis di situs www.senikoding.com.</p> </div> <div id="footer"> <p>Copy right 2017, by <a href="wwww.SeniKoding.com">SeniKoding.com</a></p> </div> </div> </body> </html>
Baca juga: Yang Harus Dikuasai Untuk Belajar Membuat Website
Penjelasan :
Dari kode HTML diatas hanya ditambahkan pemanggilan kode CSS di antara <head> dan <.head>.
- <link rel="stylesheet" href="style.css"> : adalah untuk memanggil file CSS yaitu style.css.
CSS :
* { margin:0; padding: 0;}
body {background: silver;font-family: arial;}
.menu ul li a, .content, #footer p {padding: 10px;}
h1 {color: blue;font-weight: bold;}
.menu {background: black;}
.menu ul li {color: white;font-weight: bold;display: inline-block;padding: 15px 0;}
.menu ul li a {color: white;text-decoration: none;text-transform: uppercase;}
.menu ul li a:hover {color: red;}
.content h1 {margin-bottom: 10px;}
#footer {background: white;}
#footer p {color:black;text-align: center;padding: 5px 0;}
Penjelasan :
* : Tanda bintang artinya adalah mereset jarak padding dan margin ke ukuran 0px, yang default awalnya mempunyai jarak padding dan margin sekitar 5px.
. : Tanda titik artinya Div Class didalam HTML.
# : Tanda pagar artinya Div ID didalam HTML.
Hasilnya :
Hasil dari Script HTML + CSS diatas adalah:
 |
| Halaman Website Statis |
Akhirnya sudah jadi, membuat website sendiri walaupun masih sederhana, tetapi langkah ini adalah langkah awal untuk membuat website. Silakan pelajari lebih dalam untuk mendapatkan tampilan website yang diinginkan.
PREVIEW Tutorial Belajar HTML: Mambuat Website Statis Dengan HTML+CSS
See the Pen Latihan-website statis HTML + CSS (SeniKoding.com) by edisutanto (@edisutanto) on CodePen.
3. JAVASCRIPT
Sekarang memasuki langkah akhir dengan tambahan interaksi dengan bahasa JavaScript. Dengan JavaScript kita bisa membuat interaksi seperti: PopUp pengunjung, Alert Notifikasi, Hidden show dan lain-lain.
Silakan kembangkan sesuai selera ya, materi Javasecript bisa dipelajari di sini Belajar JAVASCRIPT.
Semoga bermanfaat, Cara Membuat Website Sendiri.
- Salam -
Tidak ada komentar
Posting Komentar
Dilarang SPAM Komentar!