Membuat Hello World dengan Bootstrap CSS
Kerangka Dasar
Itu adalah kerangka dasar HTML. <!DOCTYPE html> di awal untuk menunjukkan bahwa kita menggunakan HTML versi 5. Tag <html></html> adalah isi semua skripnya. <head></head> isinya adalah semua skrip yang nggak tampil di halaman browser. <body></body> adalah semua skrip yang tampil di halaman browser.
Lalu di dalam <head></head> ada <title></title> yang merupakan judul dari halaman web tersebut. Biasanya tampil di tab halaman web.
Melengkapi Bagian dalam <head></head>
Dalam tag <title></title> sudah kita isi dengan Hello World.
<meta charset="utf-8"> berarti kita menggunakan UTF-8 sebagai landasan encoding karakternya sehingga bisa menampilkan huruf-huruf selain huruf latin seperti huruf Arab dan huruf Jepang.
<meta name="viewport" content="width=device-width, initial-scale=1"> viewport berfungsi untuk menyesuaikan font dan berbagai element supaya sama antara di laptop dan di HP.
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css"> berarti kita mengimport style Bootstrap CSS yang berada di folder vendor/bootstrap/css.
Membuat Hello World Menyesuaikan dengan Aturan Bootstrap CSS
Sekarang perhatikan yang di dalam <body></body> ya.
Nah, di situ aku menggunakan aturan dari Bootstrap. Kalau untuk aturan dasarnya, <div></div> itu berarti menandai satu elemen, entah apapun bentuknya tapi biasanya dianalogikan dengan kotak kosong. <h1></h1> berarti heading 1, font huruf yang paling besar. <hr> berarti garis pemisah. <p></p> berarti berada di dalam satu paragraf.
Untuk aturan khusus dari Bootstrap adalah class container di dalam <div></div>. Class container berarti elemen di dalamnya berada di tengah-tengah halaman.
Silahkan lihat source code dari tutorial ini.