amazing.me: Membuat Halaman Web dengan Menggunakan HTML5, CSS3, dan Bootstrap

HTML5

HTML (HyperText Markup Language) adalah sebuah bahasa pemrograman untuk membuat sebuah halaman web agar dapat menampilkan berbagai informasi serta suatu konten dalam web browser. Sedangkan HTML5 merupakan revisi kelima dari standar HTML, yang direkomendasikan oleh world wide web consortium, dan bertujuan untuk meningkatkan HTML versi sebelumnya dengan dukungan multimedia terkini dan mudah dibaca oleh manusia dan secara konsisten dimengerti oleh komputer dan perangkat.

Dalam HTML5 kita dapat menggunakan coding yang lebih singkat dibanding dengan coding yang digunakan pada HTML standar. Dalam HTML5 juga terdapat fitur untuk menampilkan multimedia, graphics, serta aplikasi.

Berikut adalah beberapa contoh elemen yang sering digunakan dalam HTML5 yang sering digunakan.

1. Membuat List

ol: adalah untuk ordered list, yaitu membuat list yang berurutan.

ul: adalah unordered list, yaitu membuat list yang urutannya bebas.

Cara membuat icon list yang berbeda:

Cukup tambahkan "style" seperti gambar diatas dan masukkan tipe ikon yang anda inginkan.

Tambahkan keterangan disc untuk ikon seperti ini

Tambahkan keterangan "1" untuk ikon seperti ini

Dan masih banyak ikon-ikon lain yang dapat anda cantumkan.

Menggunakan CSS pada HTML

Ada 2 cara umum dalam menggunakan CSS dalam HTML, yang pertama adalah dengan metode tergabung langsung dengan dokumen HTML, yang kedua dengan melalui link ke file CSS. Cara pertama dengan menggunakan tag elemen STYLE pada bagian HEAD dokumen HTML.

Dalam HTML5, kita tidak perlu lagi menuliskan coding style type=”text/css” atau “text/javascript”. Kita dapat menuliskannya dengan lebih ringkas seperti berikut:

Cara mengubah font, text align, dan font color:

Karena tag tersebut hanya dikhususkan untuk bagian H1, maka hanya bagian H1 yang akan berubah. Akan berbeda jika ada teks khusus yang ingin dimuat berbeda.

Berikan “class” pada teks khusus yang ingin dimuat berbeda:

Cara agar menulis kode syntax css dapat terbaca sebagai teks dalam web:

Dari kode-kode diatas maka hasilnya akan seperti ini:

Berikut merupakan cara kedua penggunaan CSS, yaitu dengan melalui link ke file CSS seperti Bootstrap dan Jquery yang merupakan framework berbasis HTML, CSS, dan JavaScript. Dengan Bootstrap dan JQuery anda dapat mengubah tambilan web anda dengan kode-kode yang telah disediakan oleh kedua framework tersebut. Sebelumnya, pastikan anda telah mendownload file Bootstrap dan JQuery agar HTML yang anda buat bisa berjalan. Pastikan juga sumber yang anda tulis sama dengan lokasi sebenarnya file tersebut.