Langsung ke konten utama

TUTORIAL PRAKTIS MEMBUAT HALAMAN WEB MENGGUNAKAN HTML5, CSS3, DAN BOOTSTRAP




Definisi dari HTML (Hypertext Markup Language) merupakan  sebuah bahasa untuk menstrukturkan dan menampilkan isi dari WWW, HTML5 adalah revisi kelima dari HTML yang hingga sampai saat ini masih terus berkembang. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.


Kegunaan HTML5, adalah

  1. Mengintegrasikan gambar dengan tulisan
  2. Membuat link ke dokumen lain
  3. Memodifikasi dan mengontrol dari web page dan content nya
  4. Menambahkan objek-objek seperti image,audio dan video dalam dokumen html
            Sebelum kita mempelajari lebih dalam mengenai sebuat HTML, CSS, dan Bootstrap kita diharuskan untuk memiliki aplikasi-aplikasi yang mendukung pengerjaan sebuah HTML, CSS, dan Booststrap. Web browser merupakan salah satu aplikasi yang bisa kita gunakan dalam mendukung penggunanaan HTML, CSS dan Bootstrap. Tujuan utama dari penginstallan web browser ini adalah untuk menampilkan halaman web yang pada dasarnya terbuat dari HTML dan CSS serta Bootstrap. Web browser yang digunakan bisa apa saja, Mozilla firefox adalah salah satu web browser yang sering dipakai dalam pendukung pembuatan halaman web. Cara utnuk mendownload mozilla firefox dengan mencari di alamat web http://firefox.com . Selain Mozilla firefox ada lagi aplikasi pendukung lainnya yaitu notepad++ yang bisa kita download pada http://notepad-plus-plus.org  





      Disini saya akan menjelaskan secara singkat dan praktis dalam membuat halaman web menggunakan HTML5, CSS3 dan Bootstrap. Inilah tutorialnya secara singkat :


1. Hal pertama yang dilakukan adalah mengecek di dalam masing-masing komputer anda apakah sudah memiliki web browser atau belum. Setelah mengecek web browser, cek juga apakah komputer anda sudah memiliki aplikasi notepad++ atau belum. Jika belum memiliki aplikasi notepad++ bisa download di alamat web http://notepad-plus-plus.org







2. Setelah memiliki aplikasi notepad++, pembuatan halaman web pun dimulai. ketikanlah <!doctype html> sebagai pembuka dalam pembuatan halaman web di dokumen HTML.

 3. Setelah bagian awa, ketiklah <html> sebagai pembuka awal dari isi dokumen. Jangan lupa untuk selalu menutup setiap tag yang dibuat. <html> </html>

4. ketik <head> sebagai tampilan informasi yang ada dalam bagian atas halaman web.
5. Di dalam <head> terdapat <title> yang bertujuan untuk membuat nama judul pada web browser atau pada tab browser.
6. Di dalam <head> terdapat juga meta name dan penghubung dengan CSS dan juga Bootstrap.


7. Setelah head, ketiklah <body> tag ini berfungsi sebagai awal pembuka pada isi halaman browser nanti.

8. Dalam body terdapat banyak sekali yang bisa kita sisipkan salah satunya penggunaan ordered dan unordered list. seperti gambar dibawah ini. penggunaan <ol> atau <ul> sangat mempermudah saat pembuatan list. tergantung kebutuhan sang pemakai.


 9. Penggunaan CSS sangat membantu para pembuat halaman web dalam mendesign halaman nya menjadi cantik karena font atau warna yang disajikan. Berikut ini adalah formula dalam membuat tampilan halaman web dengan tulisan yang menarik.
 


10. Untuk membuat tabel bisa menggunakan formula tag sebagai berikut. seperti yang ada pada gambar.
11. Pada pembuatan halaman web ada lagi yang harus diperhatikan agar tampilan tidak monoton dan tampilan menjadi lebih praktis dengan menggunakan link penghubung, icon pada folder, serta pembagian kolom sesuai kebutuhan pembuat. Formula nya seperti gambar di bawah ini.
12. Pada halaman web bisa ditambahkan tampilan bar pada bagian atas, dengan cara penggunaan formula seperti gambar di bawah ini.

 Jika pekerjaan selesai pada notepad++, maka file disimpan dalam folder yang berisikan bootstrap dan jquery agar bisa ditampilkan dalam browser secara tampilan bootstrap. Dan saat di save harus memakai format .[dot]html .

 Tampilan secara menyeluruh saat di buka dalam browser adalah seperti ini. Ini tampilan contoh bila menggunakan bootstrap pada halaman web.






Daftar Pustaka


Belajar HTML dan CSS.(2013). Retrieved October 28, 2014. From http://www.oke.or.id/download/BelajarHTMLCSS.pdf


Tutorials pount, Simply easy learning.(2013). Retrieved October 28, 2014. From http://www.tutorial-webdesign.com/tag/belajar-html5/


World wide web.(2013). Retrieved October 28, 2014. From http://id.wikipedia.org/wiki/World_Wide_Web
 

HTML5.(2013). Retrieved October 28, 2014. From http://id.wikipedia.org/wiki/HTML5

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

ISU BUDAYA K-POP DI INDONESIA

  Source: bbc.com Indonesia adalah negara yang kaya akan budaya dan tradisi. Memiliki ciri khas tersendiri disetiap suku dan daerah yang ada di Indonesia. Itulah yang membuat negara Indonesia menjadi menarik. Kehidupan bermasyarakat lambat atau cepat selalu mengalami perubahan. Untuk membedakan perubahan sosial dan perubahan kebudayaan dalam kehidupan sehari-hari sangat sukar karena semua masyarakat mempunyai kebudayaan. Sementara itu, semua kebudayaan mewarnai kehidupan dalam masyarakat. Jadi, perubahan sosial masyarakat dengan perubahan kebudayaan akan saling berkaitan. Perubahan sosial adalah proses berubahnya kehidupan individu-individu di dalam masyarakat dari cara-cara kehidupan yang sosial yang sudah ada ke cara kehidupan sosial yang baru. Perubahan sosial, meliputi perubahan dalam teknologi, perubahan perilaku, perubahan tata nilai dan norma, perubahan keyakinan, dan perubahan pola kehidupan. Adapun faktor penghambat perubahan sosial dan budaya yaitu indiv...
Posting Komentar
READ MORE »

RESENSI BUKU "SPIRIT OF SUCCESS" by Aris Ahmad Jaya

Judul Buku      : Spirit o f Success     Penulis             : H. Aris Ahmad Jaya, DVM, MM     Penerbit           : ABCoPulisher     Tahun              : 200 8     ISBN               : 979-15290-0-0 “Tidak ada gunung yang lebih tinggi dari lutut kita selama kita mampu mendaki puncaknya” Disaat kamu merasa terpuruk, masihkah kamu bisa bangkit dari sebuah keterpurukan secara singkat lalu bersyukur? Tidak ada hal yang dapat mengubah dirimu selain dirimu sendiri dan dengan tangan mu sendiri. Terkadang memang tak mudah dalam menjalani ironi kehidupan pada zaman seperti sekarang ini. Namun, ingatlah bahwa semua permasalahan dihidupmu tid...
Posting Komentar
READ MORE »