Membuat Halaman Web dengan HMTL5,CSS3, dan Bootstrap
Untuk membuat sebuah halaman web ada beberapa cara, namun kali ini akan saya bahas mengenai membuat halaman web dengan menggunakan HTML5,CSS3, dan Bootstrap.
Pasti untuk kalian penggemar IT sudah tidak asing lagi dengan sebutan HTML5,CSS3, maupun Bootstrap untuk itu langsung saja segera simak tutorial untuk membuat halaman web menggunakan HTML5,CSS3, dan Bootstrap berikut ini.
1. Buka Notepad ++
Langkah pertama yaitu bukalah Notepad++ yang akan digunakan sebagai media dalam pembuatan web, jika anda belum mempunyai aplikasi notepad++ bisa mengunduh dulu dan menginstalnya di sini >>
2. Tuliskan Kode
Untuk pertama kalinya tuliskan kode-kode dasar yang pada umumnya digunakan untuk membuat sebuah halaman web.Salin kode-kode dibawah ini.
3. Tulis Title
Kemudian tulislah titlenya yaitu ditulis antara tag <head> dan tag </head>. Jangan lupa sekalian dengan tag penutupnya (</title>). Ditengah-tengahnya tuliskan "Bootstrap" karena saat ini kita sedang membuat halaman web dengan menggunakan Bootstrap.
4. Tuliskan Kode Link
Setelah menuliskan titlenya,kemudian tuliskan kode link tepat dibawah title seperti dibawah ini.
5. Tulis Kode Script
Tuliskan kode script tepat dibawah HREF dan diatas tag tutupnya </head>\
6. Masuk ke Bagian Body
Nah setelah menyelesaikan bagian head selanjnya kita akan melanjutkan kebagian "BODY". Di dalam body ada kode NAV yang harus dituliskan. Tulis kode nav seperti contoh dibawah ini. Jangan pernah lupa untuk menuliskan juga tag penutup untuk NAV ( </nav> )
7. Buat Unordered List
Setelah selesai membuat nav, didalam nav lalu isikan dengan kode untuk membuat list seperti dibawah ini dengan menggunakan "UL".
8. Buat List
Didalam <UL> berilah kode untuk menuliskan daftar list yaitu <LI> dan jangan sampai lupa tuliskan juga Tag Penutup untuk </LI>. Untuk lebih jelasnya lihat contoh dibawah ini.
9. Header
Didalam body lebih tepatnya dibawah nav tuliskan headernya. Penulisan Header ini tepat ditaruh dibawah nav. Lihat contoh dibawah ini.
10. Section
Buatlah section tepat dibawah tag tutup header ( </header> )
8. Buat List
Didalam <UL> berilah kode untuk menuliskan daftar list yaitu <LI> dan jangan sampai lupa tuliskan juga Tag Penutup untuk </LI>. Untuk lebih jelasnya lihat contoh dibawah ini.
9. Header
Didalam body lebih tepatnya dibawah nav tuliskan headernya. Penulisan Header ini tepat ditaruh dibawah nav. Lihat contoh dibawah ini.
Buatlah section tepat dibawah tag tutup header ( </header> )
11. Tulisan Selamat datang di website
Untuk menuliskan tulisan selamat datang di wesite kita, maka didalam section diisi dengan kode seperti contoh dibawah ini.
12. Section List
Tuliskan kode untuk section seperti dibawah ini.
Untuk menuliskan tulisan selamat datang di wesite kita, maka didalam section diisi dengan kode seperti contoh dibawah ini.
12. Section List
Tuliskan kode untuk section seperti dibawah ini.
13. Glypichon
Tuliskan kode- kode glypichon untuk memunculkan gambar seperti yang diinginkan.
contoh dibawah ini adalah untuk memunculkan gambar Globe.
14. Tambah List
Tambahakan list- list apa saja yang akan dimasukkan dalam website tersebut seperti contoh dibawah ini.
15. Buat Icon Lainnya
Buatlah icon untuk membawa pengguna dalam mencari berita/ artikel lainnnya dengan sebuah menu.
16. Tambah List Artikel
Untuk menambah list dalam website buatlah section lagi sama dengan section untuk berita. Kurang lebih contohnya seperti ini.
Tambahkan list untuk gosip- gosip terbaru yang akan diinfokan dalam website tersebut.
18. Selesai
Nah setelah semuanya selesai maka refreshlah web yang sudah kita buat, maka hasilnya akan seperti dibawah ini.
#REFERENSI :
- http://www.w3schools.com/bootstrap/default.asp
- Hidayatullah. priyanto (2014). Pemrogaman Web.Bandung : BI-OBSES.
- http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default
SEKIAN...
TERIMAKASIH..
SEMOGA BERMANFAAT..
Nama : Desy Triana Afifudin
NPM : 1306471100
Kelas : MID- B (2013)
