Sofyan Gunawan Prawira: Membuat Halaman Web dengan Menggunakan HTML5, CSS3 dan Bootstrap.

HTML (Hyper Text Markup Language)

HTML seperti kepanjangannya Hypert Text Markup Language adalah Markup Language untuk membuat sebuah web. Untuk membuat HTML dokumen simpelnya bisa menggunakan notepad, tapi untuk sekarang saya akan menggunakan notepad++ agar lebih membantu dalam membuat html dokumen.

Gambar dibawah adalah tampilan notepad++

Dalam penulisan dokumen html diperlukan tag syntaks seperti dengan spesial karakter: <, > dan /
berikut contoh penulisan tag html:

terdapat beberapa elemen yang harus ditulis di dokumen html. berikut adalah penulisan sederhana dokumen html:

doctype
<!doctype html>
tag ini harus dibagian paling pertama

html elemen
<html>
...
</html>
tag ini berguna untuk mengidentifikasi dokumen yang kita tulis mengunakan bahasa html

head elemen
<head>
...
</head>
tag ini berfungsi untuk menuliskan metadata dari website. konten yang ditulis di elemen head tidak akan terlihat di web.

body elemen
<body>
...
</body>
body elemen adalah konten utama yang ada di html. karena semua hal yang kita tulis di body elemen akan tercantum di dalam web.

CSS (Cascading Style Sheets)

CSS kepanjangan dari Cascading Style Sheets adalah sebuah style syntax yang dapat membantu dalam pembuatan web dengan html.

CSS memungkinkan kita untuk tidak menuliskan tag html yang sama berulang-ulang.

Karena itu CSS sangat membantu dalam pengkodean html.

berikut adalah cara penulisan syntax menggunakan css:

Selector menunjuk ke elemen HTML yang ingin ditulis dengan CSS.
Declaration berisi satu atau lebih deklarasi dipisahkan oleh titik koma (;).
Setiap deklarasi mencakup Property dan Value, yang dipisahkan oleh titik dua (;).

berikut adalah beberapa contoh penulisan CSS:

Bootsrap

Bootstrap adalah sebuah aplikasi open source yang terdapat di GitHub untuk membuat web dan web aplikasi. Bootstrap berisi HTML, CSS, form, buttons, navigation, dan JavaScript

Jika kita ingin menggunakan Bootsrap kita harus mendownload aplikasi terlebih dahulu, aplikasi ini bersifat open source dan dapat di download disini.

Bootsrap memiliki berbagai konten yang cukup berguna antara lain:

Scaffolding: Contains layout, grid system, fluid grid system, and responsive design
Base CSS: Contains classes for typography, tables, forms, buttons, images, and more
Components: Contains reusable components: icons, dropdowns, navbars, breadcrumbs, alerts, and more
JavaScript Plugins: Contains over a dozen custom jQuery plugins. You can include them all, or one by one
Customizable Components : Customize Bootstrap's components, LESS variables, and jQuery plugins to create your own version

Tapi, jika kita tidak ingin men-download dan meng-host Bootstrap sendiri, kamu dapat menyertakannya dari CDN (Content Delivery Network).

MaxCDN memberikan dukungan CDN untuk CSS Bootstrap dan JavaScript. Juga termasuk jQuery:

Selain itu juga Bootstrap memerlukan elemen HTML untuk membuat bootsrap bekerja di dalam web. terdapat dua cara untuk melakukannya.

Gunakan .container class untuk fixed width container yang responsif
Gunakan .container-fluid class untuk full width container, yang mencakup seluruh layar viewport:

.container class

.container-fluid class

Berikut adalah beberapa alasan kenapa kita menggunakan Bootstrap:

Mobile-first approach: Sejak Bootstrap 3, the framework consists of mobile-first styles throughout the entire library
Browser support: Bootstrap di support berbagai browser populer
Responsive web design: Bootstrap's merespon CSS menyesuaikan Desktops, Tablets, dan Mobile phones
Easy to get started: Hanya dengan mengetahui HTML dan CSS setiap orang bisa menggunakan Bootstrap