Intan Eka: Membuat Halaman Web dengan Menggunakan HTML5, CSS3 dan Bookstrap

Tentu selama ini kita sering menggunakan Web untuk mencari informasi, membuka halaman Web untuk mencari informasi-informasi yang kita perlukan untuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya.

Kali ini saya akan menjelaskan cara-cara untuk membuat halaman web dengan menggunakan HTML5, CSS3 dan Bootstrap.

Berikut ini bagaimana cara membuat halaman web menggunakan dengan cara yang pertama:

HTML5

HTML5 adalah standar baru untuk HTML, XHTML, dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan website dunia semakin berkembang. Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser yang sudah mendukung HTML5.

HTML5 merupakan hasil proyek dari World Wide Web Consortium dan Web Hypertext Application Technology Working Group. Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Ini adalah cara membuat halaman web dengan menggunakan HTML5:

Step 1

Anda membutuhkan notepad++ diinstal di laptop atau komputer yang anda gunakan untuk membuat halaman web

Step 2

Basic Mark Up, ini adalah kode-kode yang wajib digunakan saat membuat halaman web

<!DOCTYPE HTML>

<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
Contoh text yang ditampilkan di halaman web, By:Intan Eka Putri
</body>
</html>

Step 3

<!doctype html>

<html>

<head>

<title>Dokumen HTML Index</title>

</head>

<body>

<h1>dokumen HTML Intan Eka Putri </h1>

</header>

<p> ini adalah isi dari paragraf pertama dokumen HTML5. HTML5 adalah generasi kelima dari standar HTML. </p>

<p> web ini digunakan menggunakan software notepad++. notepad++ adalah software untuk menulis dokumen teks ASCII</P>

<P> HTML adalah standard de fakto untuk menampilkan informasi</p>

<footer>
<p>copyrights 2014 - Intan Eka Putri</p>

</footer>

</article>

</body>

</html>

Displaying Screenshot 2014-10-28 20.22.51.png

Step 3
Tambahkan tag ini setelah header didalam tag body jika kalian ingin membuat

<article>
  <p>Berikut adalah berbagai contoh elemen HTML 5 yang sering digunakan: </p>
  <ol>
    <li>Ini adalah list pertama</li>
 <li>Ini adalah list kedua</li>
 <li>Ini adalah list ketiga</li>

  </ol>
  
  <ul>
    <li>Ini bullet list pertama</li>
 <li>Ini bullet list kedua</li>
 <li>Ini bullet list ketiga</li>
  </ul>
  
  <p>Berikut adalah konsep membuat Rendang: </p>

  <ul>
    <li>Bahan:
 <ol>
   <li>Daging sapi 1Kg</li>
   <li>Kelapa Parut 500gr</li>
   <li>Cabe giling 200gr</li>
   <li>Bawang Merah 100gr</li>

   </ol>
 </li>
 <li>Cara Memasak: 
   <ol>
     <li>Rebus daging sampai empuk</li>
  <li>Tumis semua bumbu</li>
  <li>Campur daging dengan semua bumbu</li>
  <li>Diamkan hingga daging dan bumbu mengering</li>

   </ol>
 </li>
  </ul>
  
  </article>

cara ini bisa digunakan untuk membuat tampilan web jadi seperti ini...

Step 4
Jika kita ingin membuat tabel di halaman web kita bisa menggunakan tag

<table>
 <tr>
   <th>bording kolom pertama</th>
   <th>bording kolom kedua</th>

   <th>bording kolom ketiga</th>
 </tr>
   <tr>
     <td class="merah">Ini adalah kolom pertama baris pertama</td>
  <td>Ini adalah kolom kedua baris pertama</td>
  <td>Ini adalah kolom ketiga baris pertama</td>
   </tr>

   <tr>
     <td>Ini adalah kolom pertama baris kedua</td>
  <td class="biru">Ini adalah kolom kedua baris kedua</td>
  <td>Ini adalah kolom ketiga baris kedua</td>
   </tr>
   <tr>
     <td>Ini adalah kolom pertama baris ketiga</td>

  <td>Ini adalah kolom kedua baris ketiga</td>
  <td class="pink">Ini adalah kolom ketiga baris ketiga</td>
 
 </table>

diatas adalah tag membuat tabel kolom 3 dan baris 3

dan kasih tulisan "class" di dalam tag <td> lalu setelah tambahkan kode di bawah   ini setelah tag <style>

        }
 
 td.merah {
   background-color: red;
 }

td.biru {
   background-color: blue;
 }
 
 td.pink {
   background-color: pink;
 }


lalu jadilah tampilan web kalian menjadi seperti ini....

Step 5
Simpan kode-kode tadi di notepad++ dengan menggunakan nama index.html

Cara kedua untuk membuat halaman web bisa menggunakan:

CSS3

CSS (Cascading Style Sheet) adalah sekumpulan kode yang berfungsi menata tata letak halaman dan bertanggung jawab atas penampilan pada suatu website. Di dalam dunia web design, CSS adalah suatu kode yang dianggap wajib oleh para web designer , karena selain untuk menata tampilan pada halaman website, CSS ini juga berfungsi sebagai SEO.

Jenis penulisan CSS ada 3: Inline CSS,Internal CSS dan External CSS

Step 1

Buka notepad++ kalian

Step 2

Masukan kode-kode berikut sebagai basic markup

<!DOCTYPE html>

<html>

<head>

<title>Ilmu CSS</title>

</head>

<body>

<p style="background: black">Ini adalah contoh paragraph</p>

</body>

</html>

Yang diberi bold itu merupakan contoh dari kode CSS online yang disisipkan di dalam sebuah tag HTML dan pada atribut style yang kebetulan pada tag p (paragraph). Dan yang diberi warna hijau itu adalah kode CSSnya.

Step 3
Maukan kode ini ke dalam notepad++ kalian
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#halaman{ background-color:#660099;
min-width: 700px;
height:200px;
}
#atas {background-color:#CF0;
height:100px;}
#kiri {background-color:#0C0;
max-width:200px; float:left;
height:400px;}
#kanan {background-color:#063;
max-width:200px; float:right;
height:400px;}
#bawah {background-color:#F00;
height:100px;}
#tengah {background-color:#000000;
height:400px;}
</style>
</head>
<body>
<div id="halaman">
    <div id="atas">bagian atas halaman </div>
    <div id="kiri"> bagian kiri halaman </div>
    <div id="tengah">
    <div id="kanan"> bagian kanan halaman </div>
    <div id="isi"> bagian isi halaman </div>
</div>
<div id="bawah">Bagian bawah halaman</div>
</div>
</body>
</html>

Step 4
Ini adalah hasilnya

Ini adalah cara lain untuk membuat halaman web yaitu menggunakan:

Bootstrap

Cara ketiga ini untuk membuat halaman web bisa juga menggunakan Bootstrap, dengan menggunakan Bootsrap kita bisa membuat Responsive dalam waktu singkat, tanpa perlu pusing dengan segala macam teknik CSS3, HTML5 ataupun JavaScript untuk merespon ukuran layar dari mobile device.

Bootsrap adalah mobile first front-end framework yang ringan dan cukup mudah untuk digunakan dan membantu mempercepat pekerjaan kita sebagai web designer atau web developer. Bootstap bisa dibilang adalah Framework nomer 1 atau paling populer. Bootstrap juga solusi bagi anda yang ingin membuat template responsive, dimana template bisa tampil baik jika dibuka di berbagai perangkat. Banyak orang sudah menggunakan bootstrap, sebagiannya ada yang membagikan template buatannya untuk dipakai oleh orang lain yang ingin bekerja lebih cepat. Contohnya template bootstrap gratis adalah Piccolo dan Munter.

Berikut step untuk membuat halaman web menggunakan Bootstrap:

step 1

Pertama, silahkan masuk ke notepad++

Step 2

kita perlu menambahkan JQuery agar halaman web dapat berjalan 
dengan Baik. Dalam hal ini saya menggunakan JQuery versi 1.8.3


Step 3

Langkah terakhir adalah membuat sebuah tampilan sederhana untuk 
tampilan halaman website kita yang akan memanggil jendela modal 
bootstrap. saya menggunakan script