Cara Menciptakan Website Sederhana Dengan Html Dan Css, Disertai Source Code!
Cara Membuat Website Sederhana Dengan HTML dan CSS - Halo Sobat Blogger,
bagaimana kabar Anda? Semoga baik dan tetap penuh semangat.
Kali ini kita akan berguru pemrograman sederhana.
Apa yang akan kita bahas?
Nah, jadi sesuai judulnya,
kita akan menciptakan sebuah website sederhana yang sanggup dipakai sebagai website profil pribadi,
atau juga website company profile yang biasanya hanya menampilkan data - data statis saja.
dan alasannya ini yaitu website sederhana, maka kita hanya akan memakai HTML dan CSS saja.
HTML akan kita gunakan untuk membangun struktur sebuah halaman web,
dan CSS akan kita manfaatkan untuk manipulasi tampilan dari websitenya.
Yang perlu dipersiapkan sebelum memulai project ini diantaranya adalah:
- Kode editor, yang ini akan kita gunakan untuk menuliskan baris - baris isyarat html dan css.
- Selain isyarat editor, kita juga akan butuh memakai web server.
Di mana fungsinya yaitu untuk menguji halaman website yang dibentuk sebelum benar – benar dipublikasikan secara online.
Ada banyak isyarat editor yang sanggup anda gunakan. Diantara yang cukup terkenal yaitu SublimeText.
Sebenarnya, isyarat editor juga sanggup memakai aplikasi teks editor yang ada pada sistem operasi windows.
Seperti Notepad, barangkali anda sudah sering menggunakannya.
Semua bahasa pemrograman intinya sanggup ditulis memakai Notepad ini.
Hanya saja, akan sangat merepotkan kalau anda bekerja dengan project besar,
di mana baris isyarat yang harus ditulis sanggup jadi sangat banyak.
Maka bersama-sama , kita belum membutuhkan web server.
File html masih sanggup tampil dengan baik hanya dengan mengakses filenya secara pribadi dan membukanya dengan web browser.
Akan tetapi jikalau anda ingin menggukan web server, maka sah – sah saja.
alasannya jikalau sudah memakai web server, maka untuk membuka file html di browser,
kita hanya perlu menuliskan nama folder daerah di mana file index dengan ektensi html tersimpan.
Nah, untuk itu aku persilahkan anda memilih pilihan antara memakai web server atau tidak.
Dalam percobaan kali ini, aku akan memakai web server yang sudah ada dalam kegiatan XAMPP.
Silahkan unduh, install dan lalu jalankan apache web server yang terdapat dalam xampp.
Setelah itu masuk ke folder di mana aplikasi xampp terinstall, contohnya F:\xampp\htdocs
Silahkan unduh, install dan lalu jalankan apache web server yang terdapat dalam xampp.
Setelah itu masuk ke folder di mana aplikasi xampp terinstall, contohnya F:\xampp\htdocs
lalu buat folder gres untuk project kalian,
aku akan menamai foldernya dengan “webhtml” jadi struktur foldernya akan menjadi F:\xampp\htdocs\webhtml
kini buatlah file dan beri nama index.html, lalu simpan filenya di dalam folder webhtml tadi.
Saya sudah menyiapkan struktur html untuk mengisi file index.html.
anda sanggup mengcopy isyarat html berikut ini dan paste di dalam file index.html lalu simpan filenya:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web HTML dan CSS</title> </head> <body> <div class="wrapper"> <div class="header"> <div class="title"> <h1><a href="">My Website</a></h1> <p>My website tagline</p> </div> <nav class="menu"> <ul> <li><a href="" class="active">Home</a></li> <li><a href="">About</a></li> <li><a href="">Service</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Contact Us</a></li> </ul> </nav> </div> <div class="featured"> </div> <div class="content"> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2> <p class="meta">30 April 2018 - By : <a href="#">Admin</a></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat beatae soluta iure facere distinctio cum molestiae neque nam in laboriosam qui inventore nobis ab sed at dolor perferendis, quaerat esse, dignissimos praesentium? Quam minus provident sequi, expedita saepe! Cum id ea inventore fugit illo culpa possimus esse dicta illum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit error est in libero commodi atque soluta, necessitatibus saepe aliquid eius, labore, hic voluptas officia quo animi. Velit, reiciendis dicta! In.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate obcaecati eum eveniet atque expedita neque vero dolor eaque. Architecto, accusantium.</p> </div> <div class="sidebar"> <h3>About Us</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, quos, dignissimos amet voluptatibus placeat nulla dolorum ad in assumenda praesentium.</p> <h3>Service</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat minima, beatae exercitationem. Ea.</p> <h3>Portfolio</h3> <p>Voluptatem distinctio odit quasi neque ex expedita quas blanditiis! Soluta accusamus, assumenda placeat.</p> <h3>Contact Us</h3> <p>Atque, culpa pariatur, quod temporibus quos, consequuntur dolores facilis voluptatem ut harum nisi.</p> </div> <div class="clear"></div> <div class="footer"> <p>Copyright © 2018 - Designed by : Aulia Rahman</p> </div> </div> </body> </html> Sekarang coba anda jalankan untuk melihat hasil dari isyarat html di atas.
Jika anda tidak memakai web server,
maka jalankan filenya dengan cara klik kanan pada file index.html
lalu pilih open with dan pilih web browser mozzila atau chrome.
Jika anda memakai web server,
maka jalankan apache web server yang ada dalam aplikasi xampp.
Caranya buka xampp control panel, lalu klik start pada modul Apache,
dan pastikan running, ditandai dengan warna hijau.
Sekarang buka web browser dan ketik http://localhost/webhtml
Hasilnya sanggup dipastikan masih berantakan,
alasannya script html ini memang belum dimanipulasi dengan isyarat css.
Untuk itu kini buatlah sebuah file dengan nama style.css dan simpan di dalam folder “webhtml”
lalu copy isyarat css yang sudah aku tuliskan di bawah ini ke dalam file style.css tadi.
Tapi tunggu dulu sobat,
jangan buru – buru melihat tampilan web kalian ya,
alasannya kita harus memanggil file css tadi biar di load di dalam file html yang telah kita buat.
Sekarang buka file index.html yang tadi dibuat.
Kemudian tambahkan baris isyarat berikut ini di dalam tag <head> </head>
Selanjutnya jangan lupa untuk menyimpan filenya.
Contoh penerapan kodenya sanggup dilihat pada baris isyarat berikut ini:
Sekarang anda sudah sanggup melihat hasilnya.
Coba jalankan filenya di web browser kalian. Pasti tampilannya sudah jauh lebih anggun kan!
Sobat, kalian sanggup bereksperimen sendiri ya dari isyarat css tadi.
coba saja ubah nilai dari masing masing elemen class dalam css.
Jangan lupa save dan jalankan website kalian setiap kali melaksanakan perubahan.
tujuannya biar kalian tahu perubahan apa yang kalian buat.
Jika kalian tertarik untuk mempelajari dengan file yang sudah jadi,
di sini aku sudah menyiapkan file yang merupakan hasil selesai dari project berguru ini.
silahkan di download.
Nah, Sobat blogger,
itu beliau artikel wacana cara menciptakan website sederhana dengan html dan css.
Jangan lupa bagikan artikel ini ya,
barangkali ada teman atau kerabat kalian yang juga butuh topik wacana website html dan css.
Terima kasih.
dan pastikan running, ditandai dengan warna hijau.
Sekarang buka web browser dan ketik http://localhost/webhtml
Hasilnya sanggup dipastikan masih berantakan,
alasannya script html ini memang belum dimanipulasi dengan isyarat css.
 |
| website html sebelum di tambahkan style css |
Untuk itu kini buatlah sebuah file dengan nama style.css dan simpan di dalam folder “webhtml”
lalu copy isyarat css yang sudah aku tuliskan di bawah ini ke dalam file style.css tadi.
/* css reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body{ font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; background: #F4F7FA; } a{ text-decoration: none; color: #0374A8; } /*Elemen pembungkus utama*/ .wrapper{ width: 980px; margin: 0 auto; background: #fff; box-shadow: 0 0 10px 1px grey; } /*Elemen header berisi Title dan Menu*/ .header{ height: 70px; padding: 20px 0 20px 0; } /*Elemen title berada di dalam header dan dibentuk rata ke kiri*/ .title{ float: left; margin: 0 0 0 25px; } .title h1{ font-size: 40px; margin-bottom: 7px; font-weight: bold; } .title h1 a{ cursor: pointer; text-decoration: none; color: #0374A8; } .title h1 a:hover{ color: #333; } .title p{ font-size: 16px; } /*Elemen hidangan di dalam header di buat sejajar title dan rata ke kanan*/ .menu{ float: right; margin: 15px 25px 0 0; } .menu ul{ list-style: none; font-size: 20px; text-transform: uppercase; } .menu ul li{ display: inline-block; padding: 10px; text-align: center; cursor: pointer; } .menu ul li a{ text-decoration: none; color: #000; } .menu ul li a.active{ color: #0374A8; } .menu ul li a:hover{ color: #0374A8; } /*Elemen featured untuk menampilkan gambar atau content pilihan*/ .featured{ height: 320px; background-image: url(featured.jpg); background-size: cover; background-position: 0 -200px; border-top: 5px solid #0374A8; } /*Elemen content untuk menampilkan content atau post*/ .content{ float: left; width: 600px; padding: 20px 25px; } .content h2{ font-size: 30px; margin: 0 0 10px 0; cursor: pointer; } .content h2:hover{ color: #0374A8; } .content p{ font-size: 18px; margin: 0 0 15px 0; line-height: 1.5em; } .content p.meta{ font-size: 14px; margin: 0 0 30px 0; } /*Elemen sidebar untuk menampilkan content di sidebar*/ .sidebar{ float: right; width: 300px; padding: 20px 25px 0 0; } .sidebar h3{ font-size: 20px; margin:0 0 5px 0; color: #0374A8; cursor: pointer; } .sidebar p{ font-size: 16px; margin-bottom: 15px; } /*Elemen footer untuk menampilkan footer*/ .footer{ height: 40px; background: #021E31; color: #608DAC; font-size: 13px; text-align: center; padding: 20px 0 0 0; } .clear{ clear: both; } Tapi tunggu dulu sobat,
jangan buru – buru melihat tampilan web kalian ya,
alasannya kita harus memanggil file css tadi biar di load di dalam file html yang telah kita buat.
Sekarang buka file index.html yang tadi dibuat.
Kemudian tambahkan baris isyarat berikut ini di dalam tag <head> </head>
<link rel="stylesheet" href="style.css"> Selanjutnya jangan lupa untuk menyimpan filenya.
Contoh penerapan kodenya sanggup dilihat pada baris isyarat berikut ini:
<head> <meta charset="UTF-8"> <title>Web HTML dan CSS</title> <link rel="stylesheet" href="style.css"> </head> Sekarang anda sudah sanggup melihat hasilnya.
Coba jalankan filenya di web browser kalian. Pasti tampilannya sudah jauh lebih anggun kan!
 |
| Hasil akhir |
Sobat, kalian sanggup bereksperimen sendiri ya dari isyarat css tadi.
coba saja ubah nilai dari masing masing elemen class dalam css.
Jangan lupa save dan jalankan website kalian setiap kali melaksanakan perubahan.
tujuannya biar kalian tahu perubahan apa yang kalian buat.
Jika kalian tertarik untuk mempelajari dengan file yang sudah jadi,
di sini aku sudah menyiapkan file yang merupakan hasil selesai dari project berguru ini.
silahkan di download.
Nah, Sobat blogger,
itu beliau artikel wacana cara menciptakan website sederhana dengan html dan css.
Jangan lupa bagikan artikel ini ya,
barangkali ada teman atau kerabat kalian yang juga butuh topik wacana website html dan css.
Terima kasih.