Home » HTML » Tutorial Cara Membuat Web Statis Sederhana Dengan HTML

Tutorial Cara Membuat Web Statis Sederhana Dengan HTML

Ditulis Komentar
Tutorial Cara Membuat Web Statis Sederhana Dengan HTML
Daftar Isi Artikel
Kali ini saya akan bagikan cara membuat web sederhana mengunakan HTML dab CSS untuk mempercantik tampilan web yang akan kita buat.

Ok langsung aja ke TKP... :)


Untuk awalan kita buat file HTML dengan nama ‘index.html‘ lalu masukan kode HTML standar seperti dibawah ini :

  1. <html>
  2. <head>
  3. <!--Element-elemen tag <head> tulis disini-->
  4. <title>WEBSITE PERDANA SAYA</title>
  5. </head>

  7. <body>
  8. <!--Element-elemen tag <body> tulis disini-->
  9. </body>
  10. </html>

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 dibawah ini ke dalam tag <body>.

  1. <body>
  2. <!--Element-elemen tag <body> tulis disini-->

  4. <header> <!--Section HEADER-->
  5. </header>

  7. <main> <!--Section MAIN BODY-->
  8. </main>

  10. <footer> <!--Section FOOTER-->
  11. </footer>

  13. </body>

    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-->

    4. <header> <!--Section HEADER-->
    5. <div>LOGO</div>
    6. <div>NAVIGASI</div>
    7. </header>

    9. <main> <!--Section MAIN BODY-->
    10. <div>KONTEN</div>
    11. <div>SIDEBAR</div>
    12. </main>

    14. <footer> <!--Section FOOTER-->
    15. <div>FOOTER</div>
    16. </footer>

    18. </body>

    Selesai, sampai sini kalian sudah berhasil membuat struktur HTML untuk website kalian..

    Namun masih ada yang kurang karna tampilan masihbelum di hias hehehehhe.:)

    Nah bagai mana cara menghiasnya..???
    kita hatus menambahkan yang namanya CSS.

    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.

    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 yang kita tambahkan di atas akan me-load file layout.css seketika file index.html di buka atau di akses.

    Sekarang 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-->

    4. <header> <!--Section HEADER-->
    5. <div class="logo">LOGO</div>
    6. <div class="navigasi">NAVIGASI</div>
    7. </header>

    9. <main> <!--Section MAIN BODY-->
    10. <div class="konten">KONTEN</div>
    11. <div class="sidebar">SIDEBAR</div>
    12. </main>

    14. <footer> <!--Section FOOTER-->
    15. <div class="footer">FOOTER</div>
    16. </footer>

    18. </body>

    Untuk nama class kalian bebas menentukan sendiri namanya.

    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.

    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. }

    6. main {
    7. display: flex;
    8. }

    10. .logo,
    11. .navigasi,
    12. .konten,
    13. .sidebar,
    14. .footer {
    15. margin-bottom: 5px;
    16. padding: 15px 0;
    17. }

    19. .logo {
    20. width: 100%;
    21. height: auto;
    22. background: #023340;
    23. text-align: center;
    24. }

    26. .navigasi {
    27. width: 100%;
    28. height: auto;
    29. background: #5cb170;
    30. text-align: center;
    31. }

    33. .konten {
    34. width: 70%;
    35. background: #ffffff;
    36. }

    38. .sidebar {
    39. width: 30%;
    40. background: #629999;
    41. }

    43. .footer {
    44. width: 100%;
    45. background: #72b2c2;
    46. text-align: center;
    47. }

    Sekarang tugas kita 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.

    https://www.w3schools.com/css/

    Nah sekarang kita sudah berhasil membuat website sederhana.
    kita lolos menjadi programer.. :)

    Berikut tampilan hasil:























    Download Source Codenya disini

    More posts

    Belum Ada Komentar

    1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
    2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
    3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
    4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
    5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
    6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
    7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
    8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>