Cara Menciptakan Website Sendiri
- Website yaitu situs atau daerah yang dipakai untuk menunjukkan informasi didunia internet. Sedangkan Website Statis yaitu situs yang dibuat atau dirancang secara sederhana atau statis. Ada banyak website yang dibangun secara sederhana, sebab tujuan dibentuknya web pun sederhana sehingga cukup dengan rancangan website statis. Contoh website yang dibangun cukup dengan statis yaitu web porto folio atau profile seseorang, web organisasi kecil, dan masih banyak lagi. Intinya website statis hanya dibuat memakai bahasa pemrogramman HTML sebagai bangunan dasar, CSS sebagai desain web dan JAVASCRIPT sebagai pelengkap interaksi. Minimal dua bahasa pemrogramman HTML dan CSS yang harus dipelajari dengan baik untuk sanggup menciptakan website statis.
Misalkan ada pertanyaan menyerupai ini, bagaimana untuk menciptakan tulisan-tulisan atau informasi didalam dinding website tersebut?
Jawabannya: ya tulis saja semua informasi yang terkait didalam HTML nya.
Dari tanya jawab diatas kenapa demikian, sebab website yang dibangun dengan sederhana tanpa ada database yang dipakai untuk menyimpan file, image, data-data yang lain, sehingga berita-berita yang ingin ditulisakan ya pribadi dituliskan di Kode pemrogrammannya yaitu di HTML nya. Lain halnya kalau website yang diranjang yaitu Website Dinamis, maka semua konten, tulisan, informasi dan file akan disimpan didalam Database dan salah satu Kode Server Side menyerupai bahasa pemrogramman yang dipakai yaitu PHP.
Cara Membuat Website Statis Sendiri
Sekarang kita fokus untuk membuat website statis sendiri. Materi yang diharapkan yaitu:
1. HTML
HTML abreviasi dari HyperText Markup Language yaitu bahasa Standard atau Standard Bahasa yang dipakai 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 yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com.</p> <p>Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com.</p> </div> <div id="footer"> <p>Copy right 2017, by <a href="wwww."></a></p> </div> </div> </body> </html>
Penjelasan :
- <!DOCTYPE html> : yaitu merupakan ciri dari kerangka HTML5.
- <html> : yaitu awalan yang harus ada didalam arahan HTML.
- <head> : yaitu serpihan dari kepala website, dan ditutup oleh </head>.
- <title> : yaitu serpihan judul dari website, dan ditutup oleh </title>.
- <body> : yaitu daerah meletakkan konten atau isi dari website, dan ditutup dengan </body>.
Buka file berjudul latihan.html yang sudah dibuat kedalam Browser Web, menyerupai Mozila atau Chrome.
Hasil :
Hasil dari Script HTML diatas yaitu menyerupai dibawah ini:
 |
| Halaman Website Statis |
Ini yaitu masih sekedar halaman HTML saja belum ada campur tangan arahan 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 yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com.</p> <p>Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com. Ini yaitu latihan Latihan Membuat Website Statis di situs www.senikoding.com.</p> </div> <div id="footer"> <p>Copy right 2017, by <a href="wwww."></a></p> </div> </div> </body> </html>
Baca juga: Yang Harus Dikuasai Untuk Belajar Membuat Website
Penjelasan :
Dari arahan HTML diatas hanya ditambahkan pemanggilan arahan CSS di antara <head> dan <.head>.
- <link rel="stylesheet" href="style.css"> : yaitu 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 yaitu mereset jarak padding dan margin ke ukuran 0px, yang default awalnya memiliki 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 yaitu langkah awal untuk menciptakan website. Silakan pelajari lebih dalam untuk mendapat tampilan website yang diinginkan.
PREVIEW Tutorial Belajar HTML: Mambuat Website Statis Dengan HTML+CSS
3. JAVASCRIPT
Sekarang memasuki langkah simpulan dengan pelengkap interaksi dengan bahasa JavaScript. Dengan JavaScript kita sanggup menciptakan interaksi seperti: PopUp pengunjung, Alert Notifikasi, Hidden show dan lain-lain.
Silakan kembangkan sesuai selera ya, bahan Javasecript sanggup dipelajari di sini Belajar JAVASCRIPT.
Semoga bermanfaat, Cara Membuat Website Sendiri.
- Salam -