Safira Atika: Tutorial Membuat halaman web dengan menggunakan HTML5, CSS3, dan Bootstrap

Hai, saya safira atika. Kali ini saya ingin berbagi ilmu untuk membuat halaman web dengan HTML5,CSS3 dan bootstrap. Ayuk simak post-an saya kali ini...

A. HTML5

HTML5 adalah bahasa pemrograman yang digunakan untuk menulis format dokumen bentuk Web. Penulisannya menggunakan text biasa tetapi harus dilengkapi dengan tag HTML. Untuk Membuat Halaman Web dengan HTML5 ini, kita harus menggunakan Program / Aplikasi Text Editor Seperti Notepad. Tag HTML adalah kode yang digunakan untuk Merubah teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. Ada tag pembuka yaitu <html> dan ada tag penutup yaitu </html> yang ditandai dengan tanda slash { Garis Miring }. Tag ini digunakan untuk menulis isi dari dokumen HTML diantara kedua tag tersebut. Bila terdapat kesalahan dalam penulisan HTML, walopun hanya satu karakter saja, maka akan berpengaruh terhadap dokumen html kita, bahkan bisa membuat dokumen html kita tidak dapat ditampilkan dibrowser. Berikut langkah-langkah membuat dokumen web menggunakan HTML5:

Step 1:
1. Basic Markup
Kita harus mengetahui fungsi masing-masing tag. Tag tersebut adalah:

- <!Doctype html>
Elemen yang membantu browser untuk mengetahui tipe HTML yang akan diuraikan.
-<html> dan </html>
Elemen yang memberitahu browser type dokumen tersebut bertipe HTML, dan yang terpenting setiap tag harus ada pembuka dan penutup. Contoh: <tags> harus ditutup dengan </tags>
-<title>Judul Website</title>
Untuk memberitahu Judul Website yang akan dibuat
-<body>...</body>
Untuk menampilkan isi dokumen HTML yang didalamnya disusun dengan kode-kode.

Berikut contoh membuat dokumen web dengan HTML5
1. ketik <!doctype html>
2. ketik <html> dan jangan lupa ditutup dengan </html>

3. Di dalam html terdapat Head yang didalamnya terdiri dari Judul dokumen web yang akan dibuat. Misalnya <title>dokumen HTML Index</title> Selanjutnya head juga terdiri dari <meta name="Author" content="Safira Atika" /> untuk mendeskripsikan bahwa dokumen web itu dibuat oleh Safira Atika. sedangkan keyword merupakan kata kunci untuk membuka web HTML5

4. Kemudian untuk menuliskan isi dari dokumen web itu, kita menggunakan tag <body> dan ditutup dengan </body>

5. Di dalam body, terdiri dari Header yang merupakan judul kepala dokumen, Article untuk menuliskan isi dari dokumen web yang ingin diuraikan, dan lalu ada Footer untuk menulis catatan kaki dari halaman web tersebut.

6. Inilah hasil akhir dari membuat halaman web dengan HTML5

B. CSS3
Salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat digunakan untuk membuat heading, subbab, bodytext,footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file) Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. Versi untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. Yang kita bahas kali ini adalah CSS3.
CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Berikut cara membuat halaman web dengan CSS3:

1. Gambar dibawah ini merupakan layout yang ingin kita terjemahkan dengan menggunakan CSS. Dilayout tersebut terdapat 4 kerangka website, yaitu bagian Header, Body Sidebar, dan Footer.

http://script-media.net/wp-content/uploads/2013/06/layout2.jpg

2. Buatlah sebuah file dengan nama style.css dan isi dengan kode CSS berikut ini untuk mendesain layout yang telah dibuat:

Buatlah tag html dan head terlebih dahulu, lalu jangan lupa sertakan tag title dari web tersebut

3.. Karena CSS3 digunakan untuk mendesain halaman website yang kita buat, maka ada tag seperti ini: <style type="text/css">. Tag tersebut bisa digunakan untuk mengatur mengatur jenis tulisan dari dokumen misalnya jika kita ingin header dari website yang kita buat, fontnya arial, dengan warna tulisan merah dan letaknya ke tengah, maka dengan seperti ini font-family : Arial; text-align: center; dan color : red;

4. Dengan CSS ini juga kita dapat mengatur warna background dari halaman web kita
5. Selain itu, bedanya dari CSS3 ini, bila kita ingin mengutip kata-kata khusus dalam artikel kita, maka

kita bisa gunakan tag <blockquote>, lalu kita atur jenis tulisan, ukuran, dam warna tulisan dalam style type css.

6. Inilah hasil akhir membuat dokumen web dengan css3:

C. BOOTSTRAP

sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan. Berikut cara membuat halaman web dengan bootstrap:

1. Pertama, download bootstrap, versi 2.1.1

2. Buat folder lalu buat file Bootstrap.html . Ekstrak zip bootstrap, copy semua folder (css, img, js) ke dalam folder contoh kita.

3. Lalu kita membuat <!doctype html> beserta tag-tagnya terlebih dahulu

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap</title>
</head>
<body>
</body>
</html>

4.Tambahkan link ke file bootstrap.css di folder css dalam tag  <head>

 dan termasuk file javascript di paling akhir dari tag <body>.

  <link rel="stylesheet" type="text/css" 
     href="./bootstrap/css/bootstrap.min.css" />
  <script type="text/javascript" src="jquery-2.1.1.min.js"></script>

Javascript  
  <script type="text/javascript">
  $(document).ready (function() {
   $('.tombol-jquery').click( function() {
    $('.tersembunyi').slideDown(3000) ;
  }) ;
 }) ;
 </script>
</head>
<body>

5. Kita akan mulai mendesain. Tetapi kita harus ingat bahwa bootstrap

menggunakan 12 grids. Untuk membagi grids tersebut kita akan menggunakan “span”,

misal : bila ingin membuat menu disebelah isi, kita dapat membaginya jadi “span4″ 
untuk menu dan “span 8″ untuk isi. Kita akan membuat :

- Homepage

-Berita

-Artikel

-Gosip

Jadinya seperti ini:

<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
  <li><a href="#">Homepage</a></li>
  <li><a href="#">Berita</a></li>
  <li><a href="#">Artikel</a></li>
  <li><a href="#">Gosip</a></li>
</nav>

6. Tambahkan ini dalam tag <body> di atas javascript files.

 <header>
  <h3>Dokumen Web menggunakan Bootstrap</h3>
  <div class="jumbotron">
    <h1><img src="./makaraui.png" /> Selamat Datang!</h1>
 <p>Dokumen web dibuat dengan menggunakan framework Bootstrap!
 </p>
 <p><a href="#" class="btn btn-primary tombol-jquery">Munculkan Section</a></p>
  </div>
</header>

7.  Selanjutnya kita membuat tag section. Tag ini untuk mendeskripsikan jenis-

jenis dari Berita, Artikel, dan, News. Maka seperti ini tag-tagnya:

<section class="row tersembunyi">
  <section class="col-md-4">
    <h3><i class="glyphicon glyphicon-globe"></i> News!</h3>
 <ul>
   <li>Judul Berita 1</li>
   <li>Judul Berita 2</li>
   <li>Judul Berita 3</li>
   <li>Judul Berita 4</li>
   <li>Judul Berita 5</li>
 </ul>
 <a href="#" class="btn btn-primary">Berita Lainnya. . .</a>
  </section>
  
  <section class="col-md-4">
    <h3><i class="glyphicon glyphicon-folder-open"></i> Artikel!</h3>
 <ul>
   <li>Judul Artikel 1</li>
   <li>Judul Artikel 2</li>
   <li>Judul Artikel 3</li>
   <li>Judul Artikel 4</li>
   <li>Judul Artikel 5</li>
 </ul>
 <a href="#" class="btn btn-primary">Artikel Lainnya. . .</a>
  </section>
  
  <section class="col-md-4">
    <h3><i class="glyphicon glyphicon-heart"></i> Gosip!</h3>
 <ul>
   <li>Judul Gosip 1</li>
   <li>Judul Gosip 2</li>
   <li>Judul Gosip 3</li>
   <li>Judul Gosip 4</li>
   <li>Judul Gosip 5</li>
 </ul>
 <a href="#" class="btn btn-primary">Gosip Lainnya. . .</a>
  </section>
</section>

8. Maka ini hasil akhir dari halaman web yang kita buat dengan menggunakan

bootstrap:

Referensi:
- https://phpsabila.wordpress.com/2013/08/19/tutorial-bootstrap-2-bagaimana-cara-menggunakan-bootstrap/
-http://anisahicha.wordpress.com/2012/04/21/membuat-web-sederhana-dengan-html/
-http://script-media.net/news/membuat-layout-website-dengan-css

Safira Atika-1306470666-MID A 2013

<!DOCTYPE html>
Docktype merupakan deklarasi elemen yang membantu browser untuk mengetahui tipe HTML yang akan diuraikan. Doctype yang singkat adalah ciri khas dari HTML 5. Untuk mengetahui deklarasi doctype yang lebih lengkap silahkan lihat di sini (http://www.w3schools.com/tags/tag_doctype.asp)
<html> dan </html>
Tags yang berfungsi memberitahu browses type dokumen tersebut bertipe html, yang perlu diperhatikan semua tag html harus ada pembuka dan penutup, maksudnya seperti <tags> harus diakhiri dengan tag penutup </tags>.
<title>Judul Website </title>
Tags ini untuk memberitahu apa judul website yang akan dibuat.
<body>…</body>
Bagian Body adalah isi dari dokumen HTML yang didalamnya telah disusun kode sehingga akan menampilkan halaman website yang dikehendaki.
- See more at: http://blog.sevima.com/tutorial-sederhana-membuat-halaman-website-menggunakan-html5.html#sthash.Kq8e8Fh8.dpuf

Step 1

Basic Mark Up

Sebelum ke step berikutnya, kita perlu mengetahui fungsi tags berikut ;
<!DOCTYPE html>
Docktype merupakan deklarasi elemen yang membantu browser untuk mengetahui tipe HTML yang akan diuraikan. Doctype yang singkat adalah ciri khas dari HTML 5. Untuk mengetahui deklarasi doctype yang lebih lengkap silahkan lihat di sini (http://www.w3schools.com/tags/tag_doctype.asp)
<html> dan </html>
Tags yang berfungsi memberitahu browses type dokumen tersebut bertipe html, yang perlu diperhatikan semua tag html harus ada pembuka dan penutup, maksudnya seperti <tags> harus diakhiri dengan tag penutup </tags>.
<title>Judul Website </title>
Tags ini untuk memberitahu apa judul website yang akan dibuat.
<body>…</body>
Bagian Body adalah isi dari dokumen HTML yang didalamnya telah disusun kode sehingga akan menampilkan halaman website yang dikehendaki.
- See more at: http://blog.sevima.com/tutorial-sederhana-membuat-halaman-website-menggunakan-html5.html#sthash.Kq8e8Fh8.dpuf

Step 1

Basic Mark Up

Step 1

Basic Mark Up

Step 1

Basic Mark Up

Step 1

Basic Mark Up

Pages

Safira Atika

Senin, 27 Oktober 2014

Tutorial Membuat halaman web dengan menggunakan HTML5, CSS3, dan Bootstrap

0 komentar:

Posting Komentar

Blog Archive

Mengenai Saya