Your browser does not support JavaScript!

Gaswad.Com

— Apapun Informasinya Yang Penting Berguna
    Follow :

Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML
Sep 28th, 2017

Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML

Category : Tutorials | Posted by G-admin at at September 28th, 2017 03:19 am
6337 | 2

Kali ini kita akan membuat website statis sederhana, kenapa statis? Karena ketika selesai dalam pembuatannya maka konten website yang sudah kita masukan tidak bisa di ubah lagi alias fixed. Loh’, kalo gitu ngga bisa update isi website donk?? Kata siapa tidak bisa, update konten atau isi website tetap bisa di lakukan hanya saja caranya berbeda dengan website dinamis.

Website dinamis memiliki halaman khusus untuk Admin agar dapat mengelola konten-konten website-nya, halaman-halaman ini biasa kita kenal dengan istilah CMS (Content Management System) seperti WordPress, Joomla, Drupal, dll. merupakan salah satu dari sekian banyak aplikasi CMS berbasis web.

Berbeda dengan website dinamis, maka website statis tidak memiliki halaman admin sehingga untuk update konten atau isi website harus di ubah langsung dari skrip nya atau biasa di sebut dengan Hard-Coding.

Pada tutorial kali ini penulis sengaja berbagi ilmu bagaimana cara membuat website statis sebagai dasar kalian terutama untuk pemula. Untuk membuat website pertama kalian harus paham dulu dengan kode HTML dan CSS.

HTML atau Hypertext Markup Language merupakan bahasa pemrograman yang menjadi standar untuk pembuatan website entah itu website statis atau dinamis. Sedangkan CSS atau Cascading Style Sheet sendiri secara tidak langsung merupakan bagian dari HTML yang fungsi utamanya yaitu untuk mengkustomisasi elemen-eleman pada HTML.

Jadi secara garis besar kita membuat struktur atau bagan website menggunakan HTML, setelah jadi kita tinggal mendisain tampilan layout-nya dengan CSS menjadi sedemikian rupa sehingga tampilan website menjadi lebih menarik dan berkarakter.

Pada tutorial ini kita tidak belajar elemen-elemen HTML atau CSS secara mendalam, tapi kalian bisa merujuk ke W3School sebagai referensi.

Okeh, kita langsung saja untuk membuat website statis sederhana silahkan ikuti langkah-lengkah berikut.

 

1. Desain Layout Website

Untuk membuat sebuah website pastikan kita buat dulu Layout atau bagannya, biasanya penulis membuat Layout website di kertas tulis, Ms Paint, atau di Adobe Photoshop.

Contoh gambar Layout di atas merupakan contoh layout yang masih baku karena belum kita tentukan section mana yang akan di jadikan Header, Main Body dan Footer, oleh karena itu harus kita tentukan dulu section-section mana yang akan merangkap untuk ketiga elemen tersebut. Berikut contoh gambar yang sudah di tentukan section-nya :

Kenapa kita harus menentukan HEADER, MAIN BODY dan FOOTER?

Kalian pasti pernah akses beberapa website yang menarik seperti website Gaswad.Com, saat kalian beralih dari artikel satu ke artikel yang lain atau membuka halaman satu lalu beralih ke halaman lainnya tentu kalian memperhatikan bahwa LOGO, NAVIGASI atau FOOTER dari website tersebut tidak pernah berubah alias tetap sama, itu karena elemen-elemen yang di khususkan untuk section HEADER, SIDEBAR atau FOOTER merupakan elemen yang fixed atau tidak berubah isi kontennya.

Sedangkan section MAIN BODY di khususkan untuk elemen-elemen yang kontennya selalu berubah-ubah, mengapa berubah-ubah karena konten atau isi artikelnya dinamis atau tidak sama, seperti pada halaman artikel dimana halaman artikel isi kontennya selalu berbeda-beda.

 

2. ‎Hard Coding Layout Website

Setelah kalian selesai menentukan layout, sekarang kita mulai penulisan kode website-nya. Silahkan ikuti langkah-langkah berikut :

  1. Buat file HTML dengan nama ‘index.html‘ lalu masukan kode HTML standar sebagai berikut :
    <html>
      <head>
        <!--Element-elemen tag <head> tulis disini-->
        <title>WEBSITE PERDANA SAYA</title>
      </head>
    
      <body>
        <!--Element-elemen tag <body> tulis disini-->
      </body>
    </html>
  2.  Kode di atas merupakan kode standar HTML dan wajib di gunakan jika kalian ingin membuat website. Perlu di perhatikan, setiap tag HTML harus ada tag pembuka (Misal : <html>; <header>; <footer>) dan tag penutup (Misal : </html>; </header>; </footer>).
    •  Berikut contoh penulisan kode HTML yang SALAH :
      <body>
        <!--Element-elemen tag <body> tulis disini-->
        
        <main>
      
        <div>
      
        </main>
      
        </div>
        
      </body>
    • Berikut contoh penulisan kode HTML yang BENAR :
      <body>
        <!--Element-elemen tag <body> tulis disini-->
        
        <main>
      
          <div></div>
      
        </main>
        
      </body>
  3. Selanjutnya kita merujuk kembali pada Layout website yang sudah kita buat diatas dimana pada Layout tersebut ada 3 section, yaitu section HEADER, MAIN BODY dan FOOTER, silahkan kalian masukan ketiga section tersebut ke dalam tag <body>.
    <body>
      <!--Element-elemen tag <body> tulis disini-->
    
      <header> <!--Section HEADER-->
      </header>
    
      <main> <!--Section MAIN BODY-->
      </main>
    
      <footer> <!--Section FOOTER-->
      </footer>
    
    </body>
  4. Section sudah kita tambahkan, sekarang kita lebih mendalam lagi, jika kalian perhatikan di gambar Layout untuk section HEADER terdapat 2 elemen (LOGO dan NAVIGASI), MAIN BODY 2 elemen (KONTEN dan SIDEBAR), lalu FOOTER tidak memiliki elemen. Silahkan kalian masukan elemen-elemen tersebut ke section-nya masing-masing.
    <body>
      <!--Element-elemen tag <body> tulis disini-->
    
      <header> <!--Section HEADER-->
        <div>LOGO</div>
        <div>NAVIGASI</div>
      </header>
    
      <main> <!--Section MAIN BODY-->
        <div>KONTEN</div>
        <div>SIDEBAR</div>
      </main>
    
      <footer> <!--Section FOOTER-->
        <div>FOOTER</div>
      </footer>
    
    </body>
  5. Selesai, sampai sini kalian sudah berhasil membuat struktur HTML untuk website kalian, silahkan kalian simpan perubahan yang sudah kalian buat tadi dan sekarang coba kalian buka file index.html di Browser yang kalian pakai maka kurang lebih tampilannya akan seperti ini :

    Kok’,
    tampilannya ngga sesuai dengan Layout-nya gan? Secara kasat mata memang belum terlihat seperti pada Layout karena kita belum melakukan Styling Layout, namun secara struktur HTML sudah sesuai.

3. ‎Styling Layout dengan CSS

Selanjutnya kita akan melakukan Styling Layout CSS agar penampakannya sama dengan Layout yang sudah kita buat sebelumnya. Silahkan ikuti langkah-langkah berikut :

  1. Silahkan kalian buat file CSS dengan nama ‘layout.css‘ lalu simpan file tersebut ke dalam folder yang sama dengan file index.html yang kalian buat tadi.
  2. Setelah selesai silahkan kalian buka kembali file index.html tadi lalu tambahkan kode berikut ke dalam tag <head>.
    <link rel="stylesheet" href="layout.css" />

    Kode di atas akan me-load file layout.css seketika file index.html di buka atau di akses.

  3. Tambahkan class ke dalam tag dari elemen-elemen yang kalian buat sebelumnya karena pemrograman CSS hanya bisa memanggil ID atau Class yang sudah di definisikan ke dalam elemen.
    <body>
      <!--Element-elemen tag <body> tulis disini-->
    
      <header> <!--Section HEADER-->
        <div class="logo">LOGO</div>
        <div class="navigasi">NAVIGASI</div>
      </header>
    
      <main> <!--Section MAIN BODY-->
        <div class="konten">KONTEN</div>
        <div class="sidebar">SIDEBAR</div>
      </main>
    
      <footer> <!--Section FOOTER-->
        <div class="footer">FOOTER</div>
      </footer>
    
    </body>

    Untuk nama class kalian bebas menentukan sendiri namanya.

  4. Selanjutnya silahkan kalian buka file *.CSS yang sudah kalian buat tadi lalu definisikan kembali nama-nama class pada elemen-elemen HTML sebelumnya di file *.CSS. Berikut format penulisannya :
    .logo {}
    .navigasi {}
    .konten {}
    .sidebar {}
    .footer {}

    Setiap nama class yang kalian definisikan ke dalam file *.CSS harus di mulai dengan simbol ‘titik‘ ( . ) di depan nama class-nya, kalau kalian menggunakan ID pada element HTML (id = “nama_id”), maka penulisan di file *.CSS harus di mulai dengan simbol ‘pagar‘ ( # ).
    Sedangkan tanda ‘kurawal‘ setelah penulisan nama class pada file *.CSS adalah tempat dimana kita akan menaruh kode CSS di dalamnya.

  5. Terakhir tinggal kalian masukan kode-kode CSS berikut untuk tiap-tiap class tersebut agar membentuk tampilan atau Layout seperti pada gambar Layout yang sudah kita buat sebelumnya.
    body {
      width: 960px; /*set lebar body website*/
      margin: 30px auto; /*set posisi body (auto; left; right; center)*/
    }
    
    main {
      display: flex;
    }
    
    .logo,
    .navigasi,
    .konten,
    .sidebar,
    .footer {
      margin-bottom: 5px;
      padding: 15px 0;
    }
    
    .logo {
      width: 100%;
      height: auto;
      background: #99D9EA;
      text-align: center;
    }
    
    .navigasi {
      width: 100%;
      height: auto;
      background: #99D9EA;
      text-align: center;
    }
    
    .konten {
      width: 70%;
      background: #EFE4B0;
    }
    
    .sidebar {
      width: 30%;
      background: #FD7E00;
    }
    
    .footer {
      width: 100%;
      background: #C3C3C3;
      text-align: center;
    }

     

    Sekarang tugas kalian ialah mengisi konten-konten pada elemen-elemen HTML tadi agar benar-benar sesuai dengan Layout yang kalian buat. Sedangkan untuk referensi kode-kode CSS bisa merujuk ke link berikut agar memudahkan kalian memahami bahasa pemrograman CSS.

Pembuatan website statis sudah selesai. Selamat! Kalian sudah berhasil maju satu langkah untuk menjadi seorang Web Programmer.

Bagaimana? Ngga sulit khan? Nggalah, gampang itu mah’, orang cuma gitu-gitu doank yang penting jangan berenti untuk belajar dan berusaha dan tetap merujuk ke W3School sebagai referensi kalian mengenai elemen-elemen yang terdapat di dalam HTML dan CSS.

Hasil akhir pembuatan website :

Source code :

Download source code

Sekian artikel kali ini, jika kalian merasa sudah cukup mahir dalam pembuatan web statis seperti di atas, maka kalian boleh menaikan level skill programming kalian dengan coba membuat web responsif agar support di tampilan Mobile View, silahkan ikuti artikel di bawah ini :

Share :


2 responses to “Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML”

  1. dzz says:

    makasih bangg,,belajar buat web buat mendalami lagi

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Posts

Tutorial : Cara Membuat Template WordPress – Part 2
Tutorial : Cara Membuat Template WordPress – Part 2
Category : Wordpress | October 13th, 2017
389 | 0

Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membahas bagaimana cara mendaftarkan template kita agar terbaca oleh aplikasi WordPress tepatnya di halaman Themes. Jadi bagi kalian yang belum membaca artikel t...

Continue reading
Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
Category : Tutorials | October 12th, 2017
707 | 2

Pada pertemuan kali ini (udah kayak anak kuliahan ajah), penulis ingin berbagi pengetahuan tentang bagaimana cara medaftarkan dan melakukan verifikasi domain kalian di Google Search Console. Bagi kalian yang masih bingung dan tidak tahu bagaimana car...

Continue reading
11 Cara Meningkatkan Keamanan Pada WordPress
11 Cara Meningkatkan Keamanan Pada WordPress
Category : Wordpress | October 10th, 2017
479 | 0

Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website WordPress, yang kebetulan penulis dapat dari hasil searching-searching di Om’ Google. Seperti yang kalian ketahui saat ini WordPress merupakan salah satu...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 1
Tutorial : Cara Membuat Template WordPress – Part 1
Category : Wordpress | October 9th, 2017
582 | 0

Halo para pembaca Gaswad, pada artikel ini penulis ingin membahas tentang bagaimana cara membuat template WordPress. Kenapa penulis membuat artikel ini tidak lain karena ingin berbagi pengetahuan kepada kalian khususnya para pengguna CMS WordPress se...

Continue reading
Pengertian Page View, Visitor Dan Bounce Rate
Pengertian Page View, Visitor Dan Bounce Rate
Category : Others | October 9th, 2017
386 | 0

Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template WordPress, menimbang WordPress merupakan salah satu CMS yang paling banyak di gunakan saat ini. Tapi berhubung tutorialnya agak panjang dan belum rampung ...

Continue reading
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
Category : Tutorials | October 5th, 2017
952 | 0

Hallo… para pembaca Gaswad yang baik dan budiman, yang ganteng dan yang cantik, yang jelek halo juga deh… Setelah beribu-ribu menit dan detik berlalu, jam demi jam telah kita lewati, dari pagi hari sampai sore hari, akhirnya… sampai...

Continue reading
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
Category : Tutorials | September 30th, 2017
1197 | 0

Bootstrap merupakan salah satu CSS Framework yang paling banyak di gunakan oleh para pengembang web saat ini, bagi kalian yang masih belum tau dan mengerti apa yang di maksud dengan Web Framework, maka silahkan kalian merujuk ke link berikut : Apa It...

Continue reading
Cara Mengetahui Kecepatan Page Load Website
Cara Mengetahui Kecepatan Page Load Website
Category : Programmings | September 29th, 2017
471 | 0

Pada artikel kali ini penulis ingin memberikan trick bagaimana cara mengetahui kecepatan Page-Load website kalian, mungkin beberapa dari kalian masih belum tahu seberapa cepat kecepatan website yang kalian miliki pada saat website tersebut di akses a...

Continue reading
​Apa Itu Web Framework?
​Apa Itu Web Framework?
Category : Others | September 29th, 2017
676 | 0

Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awam betul dengan yang namanya Framework. Framework menurut Wikipedia merupakan sebuah aplikasi yang di desain untuk mendukung pengembangan dalam membangun se...

Continue reading
Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML
Tutorial : Cara Membuat Web Statis Sederhana Dengan HTML
Category : Tutorials | September 28th, 2017
6337 | 2

Kali ini kita akan membuat website statis sederhana, kenapa statis? Karena ketika selesai dalam pembuatannya maka konten website yang sudah kita masukan tidak bisa di ubah lagi alias fixed. Loh’, kalo gitu ngga bisa update isi website donk?? Ka...

Continue reading
Tutorial : Menggunakan Font-Awesome Pada Website
Tutorial : Menggunakan Font-Awesome Pada Website
Category : Tutorials | September 26th, 2017
450 | 0

Berikut cara instalasi salah satu simbol ligature yang paling banyak di gunakan oleh para pengembang website, yaitu Font-Awesome. Bagi kalian yang masih belum mengenal apa itu simbol ligature bisa merujuk ke link berikut untuk menambah wawasan dan re...

Continue reading
Tutorial : Instalasi WordPress
Tutorial : Instalasi WordPress
Category : Wordpress | September 20th, 2017
471 | 0

Untuk kalian yang ingin belajar bagaimana cara instlasai CMS WordPress kali ini penulis sengaja membuat artikel ini agar kalian mendapatkan referensi tambahan sebelum menggunakan CMS WordPress. Untuk instalasi CMS WordPress sama sekali tidak susah, m...

Continue reading

Wordpress

  • Oct
    24
    2017
    Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
    Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi ...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 4
    Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 3
    Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambun...
    Read more
  • Oct
    13
    2017
    Tutorial : Cara Membuat Template WordPress – Part 2
    Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membah...
    Read more
  • Oct
    10
    2017
    11 Cara Meningkatkan Keamanan Pada WordPress
    Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website Word...
    Read more
  • More articles
Tips & Tricks

  • Nov
    13
    2017
    Error Reported Attack Page! Waw… Domain Di Blacklist Google??
    Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tamp...
    Read more
  • Oct
    24
    2017
    Panduan SEO ala Google
    Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kali...
    Read more
  • Sep
    15
    2017
    Cara Mudah Download Video Youtube
    Bagi kita-kita yang suka menonton video dari Youtube pasti sering tiba-tiba terbesit seperti in...
    Read more
  • Oct
    29
    2015
    5 Cara Mempercepat Loading Website
    Berbagai macam cara dan usaha yang kita lakukan untuk membuat website kita menjadi benar-benar ...
    Read more
  • Feb
    03
    2015
    Nih! 3 Cara Redirek Domain Yang Baik Dan Benar
    Redirek domain secara definisi berarti mengarahkan domain satu ke domain yang lain. Emang bisa?...
    Read more
  • More articles
Tutorials

  • Nov
    13
    2017
    Cara Menambah Ads Unit Atau Blok Iklan Adsense
    Halo para pembaca Gaswad yang ganteng dan yang cantik-cantik, yang jelek jangan kesinggung ya. ...
    Read more
  • Oct
    16
    2017
    Cara Mendapatkan Uang Dengan Google Adsense
    Setelah beberapa waktu lalu di kantor penulis sempat heboh-hebohnya di karenakan fitur dari Goo...
    Read more
  • Oct
    12
    2017
    Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
    Pada pertemuan kali ini (udah kayak anak kuliahan ajah), penulis ingin berbagi pengetahuan tent...
    Read more
  • Oct
    05
    2017
    Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 2 (Complete)
    Hallo… para pembaca Gaswad yang baik dan budiman, yang ganteng dan yang cantik, yang jele...
    Read more
  • Sep
    30
    2017
    Tutorial : Cara Membuat Web Responsif (Mobile Version) Dengan Bootstrap – Part 1
    Bootstrap merupakan salah satu CSS Framework yang paling banyak di gunakan oleh para pengembang...
    Read more
  • More articles
Others

  • Oct
    31
    2017
    Yang Baru Di Bootstrap 4
    Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membu...
    Read more
  • Oct
    09
    2017
    Pengertian Page View, Visitor Dan Bounce Rate
    Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template...
    Read more
  • Sep
    29
    2017
    ​Apa Itu Web Framework?
    Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awa...
    Read more
  • Feb
    25
    2015
    Cara Memasang Robots.txt Di Website
    Yups! Di jamin pasti banyak yang bingung dengan file robot ini, bagi yang masih awam pasti bera...
    Read more
  • Nov
    26
    2014
    DIY – Lampu Indikator Super KIPS Kawasaki Ninja 150 SS/R/RR
    Bagi kalian pengguna motor Kawasaki Ninja 150 SS/R/RR pasti pernah ngerasain yang namanya ̵...
    Read more
  • More articles
Page generated in : 649.32 ms