Home » Uncategorized » Tugas 11. Membuat Tampilan Website

Tugas 11. Membuat Tampilan Website

Oke, kita langsung saja untuk membuat  situs web  statistik sederhana Ikuti langkah-lengkah berikut.

 

1. Desain Layout Website

Untuk membuat  situs web yang bisa membuat kita membuat Layout atau bagannya, biasanya penulis membuat  situs web Layout   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 :
    1. <html>
    2. <head>
    3. <!–Element-elemen tag <head> tulis disini–>
    4. <title>WEBSITE PERDANA SAYA</title>
    5. </head>
    6. <body>
    7. <!–Element-elemen tag <body> tulis disini–>
    8. </body>
    9. </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 :
      1. <body>
      2. <!–Element-elemen tag <body> tulis disini–>
      3. <main>
      4. <div>
      5. </main>
      6. </div>
      7. </body>
    • Berikut contoh penulisan kode HTML yang BENAR :
      1. <body>
      2. <!–Element-elemen tag <body> tulis disini–>
      3. <main>
      4. <div></div>
      5. </main>
      6. </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>.
    1. <body>
    2. <!–Element-elemen tag <body> tulis disini–>
    3. <header> <!–Section HEADER–>
    4. </header>
    5. <main> <!–Section MAIN BODY–>
    6. </main>
    7. <footer> <!–Section FOOTER–>
    8. </footer>
    9. </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.
    1. <body>
    2. <!–Element-elemen tag <body> tulis disini–>
    3. <header> <!–Section HEADER–>
    4. <div>LOGO</div>
    5. <div>NAVIGASI</div>
    6. </header>
    7. <main> <!–Section MAIN BODY–>
    8. <div>KONTEN</div>
    9. <div>SIDEBAR</div>
    10. </main>
    11. <footer> <!–Section FOOTER–>
    12. <div>FOOTER</div>
    13. </footer>
    14. </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>.
    1. <link rel=“stylesheet”href=“layout.css” />

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

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.

  1. <body>
  2. <!–Element-elemen tag <body> tulis disini–>
  3. <header> <!–Section HEADER–>
  4. <div class=“logo”>LOGO</div>
  5. <div class=“navigasi”>NAVIGASI</div>
  6. </header>
  7. <main> <!–Section MAIN BODY–>
  8. <div class=“konten”>KONTEN</div>
  9. <div class=“sidebar”>SIDEBAR</div>
  10. </main>
  11. <footer> <!–Section FOOTER–>
  12. <div class=“footer”>FOOTER</div>
  13. </footer>
  14. </body>
  1. 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 :
    1. .logo {}
    2. .navigasi {}
    3. .konten {}
    4. .sidebar {}
    5. .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.

  2. 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.
    1. body {
    2. width: 960px; /*set lebar body website*/
    3. margin: 30px auto/*set posisi body (auto; left; right; center)*/
    4. }
    5. main {
    6. display: flex;
    7. }
    8. .logo,
    9. .navigasi,
    10. .konten,
    11. .sidebar,
    12. .footer {
    13. margin-bottom: 5px;
    14. padding: 15px 0;
    15. }
    16. .logo {
    17. width: 100%;
    18. height: auto;
    19. background: #99D9EA;
    20. text-align: center;
    21. }
    22. .navigasi {
    23. width: 100%;
    24. height: auto;
    25. background: #99D9EA;
    26. text-align: center;
    27. }
    28. .konten {
    29. width: 70%;
    30. background: #EFE4B0;
    31. }
    32. .sidebar {
    33. width: 30%;
    34. background: #FD7E00;
    35. }
    36. .footer {
    37. width: 100%;
    38. background: #C3C3C3;
    39. text-align: center;
    40. }

     

    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 :


2 Comments

Leave a comment

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