Pada kesempatan kali ini saya akan memberikan tutorial untuk membuat website, yaitu dengan menggunakan HTML5, CSS3 dan Bootstrap. Berikut adalah struktur kode HTML yang harus ada di halaman web :
<html>
<head>
<title>Judul</title>
<meta name="description" content="tulis deskripsi/penjelasan singkat halaman website di sini">
<meta name="keyword" content="tulis kata kunci halaman di sini">
</head>
<body>
Isi halaman
</body>
</html>
Contoh diatas adalah format dasar dalam membuat website dengan menggunakan HTML. Latihan selanjutnya adalah membuat list. Untuk membuat list kita perlu menulis kode sebagai berikut :
List berupa angka :
<ol>
<li>ini adalah list pertama</li>
<li>ini adalah lisr kedua</li>
<li>ini adalah list ketiga
</ol>
Jika telah kita buat sepeti diatas, maka hasilnya akan seperti di bawah ini
Contoh diatas adalah format dasar dalam membuat website dengan menggunakan HTML. Latihan selanjutnya adalah membuat list. Untuk membuat list kita perlu menulis kode sebagai berikut :
List berupa angka :
<ol>
<li>ini adalah list pertama</li>
<li>ini adalah lisr kedua</li>
<li>ini adalah list ketiga
</ol>
Jika telah kita buat sepeti diatas, maka hasilnya akan seperti di bawah ini
List berupa lingkaran :
<ul>
<li>ini adalah list bullet pertama</li>
<li>ini adalah list bullet kedua</li>
<li>ini adalah list bullet ketiga</li>
</ul>
Jika telah kita buat seperti diatas, maka hasilnya seperti berikut
Selanjutnya, saya akan memberikan contoh untuk membuat paragraf dan quote, seperti dibawah :
<p>Pendidikan vokasi di Universitas Indonesia bertujuan menyiapkan peserta didik menjadi tenaga profesional pada bidang keahliannya. Terdapat 3 bidang/rumpun keahlian yaitu rumpun Kesehatan ; rumpun Pariwisata, Bisnis dan Perkantoran; rumpun Sain dan Teknologi. Saat ini terdapat 11 program studi, dan terus dikembangkan program studi lain untuk mengisi kebutuhan keterampilan-keterampilan khusus di industri dan pemerintahan. Program studi baru hanya dikembangkan untuk mengisi tenaga terampil pada bidang-bidang tertentu maupun lintas bidang studi sehingga lulusannya akan memiliki jalur karier yang spesifik dan hanya dapat diisi oleh para lulusan program vokasi.Program vokasi merupakan pendidikan tinggi kejuruan diploma (D3 dan D4) dimana lulusannya diarahkan untuk menguasai kemampuan dalam bidang kerja tertentu sebagai tenaga kerja di industri, lembaga pemerintahan/swasta atau berwiraswasta. Pola pengajaran pada program ini lebih mengutamakan pada pengajaran keterampilan dan keahlian praktek dibandingkan dengan penguasaan teori. Para lulusan SMA ipa/ips dan SMK dapat mengikuti pendidikan ini agar dapat mengisi kebutuhan tenaga-tenaga ahli profesional di negeri sendiri dan di negara lain.</p>
<blockquote><i>Program ini telah didukung oleh kerjasama antara Universitas Indonesia dengan industri-industri terkemuka di Indonesia untuk penyediaan kegiatan-kegiatan praktek lapangan dan magang. Oleh sebab itu, lulusannya sebagian besar langsung bekerja. Lama pendidikan vokasi di Universitas Indonesia ditempuh selama 3 tahun untuk program D3 dan pendidikan lanjutan 1 tahun untuk program D4 (masih dalam proses).</i></blockquote>
Jika kita tulis format sama seperti diatas, maka hasilnya akan seperti dibawah :
 |
Tanda <i></i> digunakan untuk membuat tulisan miring, <b></b> untuk menebalkan tulisan, dan <u></u> untuk memberikan underline pada tulisan.
Akan saya teruskan ke pembuatan tabel, untuk membuat tabel dibutuhkan format seperti dibawah :
<table border="1">
<tr>
<th>judul 1</th>
<th>judul 2</th>
<tr>
<td>baris satu kolom satu</td>
<td>baris satu kolom dua</td>
</tr>
<tr>
<td>baris dua kolom satu</td>
<td>baris dua kolom dua</td>
Hasilnya adalah sebagai berikut
Kode 'border="1"' berfungsi untuk menambah garis yang mengelilingi tabel, <th></th>berfungsi untuk membuat judul tabel, dan <td></td> berfungsi untuk membuat isi tabel.
Selanjutnya saya akan menjelaskan tentang CSS. CSS yang berarti Cascading Style Sheets merupakan bahasa yang mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Dalam konteks sebuah website, CSS dapat diartikan sebagai bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.
Ada dua cara penulisan CSS, yaitu :
1.Inline style sheet, yaitu penulisan atribut css langsung kedalam kode HTML yang dimaksud. Contoh penulisan dasar nya sebagai berikut :
2.Embeded style sheet, yaitu penulisan CSS dengan mendefinisikan terlebih dahulu kedala sebuah tag, style harus terletak diantara tag <head> dan </head>. Contoh penulisan dasarnya sebagai berikut :
Berikut ini adalah contoh penulisan CSS dengan embeded style:
Hasilnya seperti dibawah :
CSS biasa digunakan untuk menambahkan warna tulisan atau warna background
Berikutnya adalah cara menggunakan bootstrap. Apa itu bootstrap? Bootstrap adalah sebuah framework CSS, yang menyediakan yang menyediakan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.
Pertama download bootstrap, lalu buat folder dan buat file index.html, ekstrak zip bootstrap, copy semua folder yang telah di ekstrak kedalam folder buatan kita. Tambahkan link ke file bootstrap.css di folder css dalam tag <head> dan include javascript files di paling akhir dari tag <body>, seperti contoh berikut :
Jika kita menambah format dibawah ini kedalam tag <body> diatas javascript
Maka akan muncul hasil seperti berikut :
Bootstrap sangat berguna dalam mendesain web, dan dapat kita gunakan untuk membuat website yang kita sukai.
Demikian informasi yang saya berikan semoga bermanfaat :)
Sumber referensi :
1. www.academia.edu/6204469/Apa_itu_Bootstrap
2. www.rajaputramedia.com/article/article-programing/pengertian-css-dan-apa-itu-css.php
