Alamat

Jl. Jatirejo No 29A, Jatirejo RT 02/21, Sendangadi, Mlati, Sleman, Daerah Istimewa Yogyakarta

Senin - Jum'at (09:00-17:00 WIB)

0878-2877-3103

0878-2877-3103

Cara Membuat Website Dengan HTML dan CSS Untuk Pemula

Farid Efendi
  • 03 Dec 2020
  • 12 menit dibaca
Cara Membuat Website Dengan HTML dan CSS Untuk Pemula

Membuat website di era sekarang relatif lebih mudah daripada 16 tahun yang lalu sebelum hadirnya WordPress, Joomla, serta CMS (Content Management System) lainnya. Sekarang orang yang tidak belajar ilmu pemrograman-pun bisa menciptakan website yang keren dengan CMS.
Apakah diperlukan lagi cara membuat website dengan HTML dan CSS dari awal setelah adanya shortcut pembangun website?, cara membuat website dari awal tanpa CMS tentu saja masih diperlukan untuk beberapa alasan dan dilatarbelakangi tujuan tertentu.

Mengapa masih perlu membuat website dengan HTML dan CSS dari awal?

Website yang dibangun secara scratch dari awal ini biasanya karena mereka memiliki kebutuhan halaman website yang lebih mudah untuk di-custom ke arah web application. Memangnya CMS tidak dapat di-custom?, bisa saja karena penciptanya masih memberikan ruang bagi pengembang untuk menambahkan ekstensi tertentu. Para pengembang atau web developer sebagian besar lebih tertarik untuk membangun website custom dari awal dengan framework tertentu daripada menggunakan CMS karena banyak fitur - fitur yang tidak akan terpakai dari CMS yang berpotensi memberi beban dari segi kecepatan website, space, juga kurang flexible.

Cara Termudah membuat website dengan HTML dan CSS untuk pemula

HTML (Hypertext Markup Language) adalah bahasa pemrograman standard untuk membuat halaman website. Adanya kolom, tabel, paragraf adalah hasil bentukan dari bahasa pemrograman HTML. Tampilan dari HTML akan terlihat kasar jika tidak dibantu oleh CSS (Cascading Style Sheets). CSS juga merupakan bahasa pemrograman untuk membantu mempercantik tampilan halaman website. Contohnya tabel yang ingin ditambahkan warna background, memiliki jarak (margin) tertentu dari tabel lainnya, isi tabelnya punya jarak tertentu dari pembatas kolom (yang disebut dengan padding), lalu berubah posisinya agar website dapat dibaca dengan sempurna di smartphone, inilah yang dilakukan CSS. 

Ada cara membuat website dengan HTML dan CSS termudah agar tidak perlu mendalami lama tentang HTML dan CSS yakni dengan memanfaatkan bantuan CSS Framework. CSS Framework adalah kumpulan library dari style CSS untuk memoles tabel, paragraf, font, dll. Banyak sekali bertebaran CSS Framework siap pakai yang sangat bagus, setidaknya 5 terpopuler saja yang perlu diketahui diantaranya Bootstrap, Foundation, Material Design, UIkit, dan Sematic UI.

Kali ini kita akan memanfaatkan Bootstrap untuk ujicoba cara membuat website dengan html yang lebih mudah dan cepat. Pengembangan Bootstrap kini sudah sampai versi ke-4, pengembangnya pasti telah melakukan langkah - langkah penyempurnaan dari versi sebelumnya, jadi framework ini sangat layak untuk digunakan karena versi sebelumnya sudah sangat populer (banyak dipakai). Dokumentasi untuk layouting, komponen dan utilities lainnya sudah tersedia di halaman https://getbootstrap.com/docs/4.0/getting-started/introduction/. Di awal belajar, halaman ini akan bolak balik kita kunjungi jadi bisa di bookmark saja pada browser Anda agar lebih mudah untuk melihat dokumentasinya.

Langkah 1 - Buat Halaman HTML dan Load Library Bootstrap

Langkah pertama membuat website HTML ini, buatlah sebuah dokumen dengan nama belajar-html-css.html, simpan di folder manapun bebas. Buka file atau dokumen tersebut dengan editor Notepad, atau text editor lainnya, lebih bagus lagi jika Anda sempat meng-install Notepad++, Adobe Dreamweaver, atau PhpStorm. Isikan file belajar-html-css.html dengan konten awal seperti ini :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Load Library Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Belajar Membuat Halaman Website</title>
  </head>
  <body>
    <h1>Hello, saya sedang belajar membuat halaman website.</h1>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Baris <linkrel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"crossorigin="anonymous"> adalah meminta library bootstrap dari CDN. Asumsinya Anda terkoneksi dengan internet saat nanti menjalankan file belajar-html-css.html di browser karena perlu library bootstrap yang diminta dari suatu server di internet.

Jika terkendala dengan koneksi internet, download 3 file bootstrap.min.cssjquery-3.2.1.slim.min.js, dan bootstrap.min.js dan letakkan ketiganya pada 1 folder dengan file belajar-html-css.html. Ketiga library tersebut dapat di download dari https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css , https://code.jquery.com/jquery-3.2.1.slim.min.js dan https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js. Setelah berhasil di download, jangan lupa ubah source library dari https://maxcdn.bootstrapcdn.com menjadi <linkrel="stylesheet"  href="../bootstrap.min.css" > , <script src="../jquery-3.2.1.slim.min.js"></script> dan <script src="../bootstrap.min.js"></script> untuk library javascriptnya jika tidak ingin memakai koneksi internet untuk membukanya di browser.

Buka file belajar-html-css.html di browser, double click dokumen tersebut atau klik kanan dan pilih open with Google Chrome (atau browser lainnya Mozilla Firefox, Opera, Safari). Tampilan awalnya akan menjadi :

cara-membuat-website-first-step

Langkah 2 - Buat Header, Content dan Footer

Header adalah kolom paling atas yang biasanya berisi logo, menu, slider. Content ialah bagian tengah dari halaman yang berisi isi utama dari halaman website. Sedangkan Footer merupakan kolom paling bawah untuk informasi menu - menu lainnya, form subscribe, copyright, atau form kontak.

Header
Content
Footer

Buatlah Header menjadi 2 kolom, logo di sebelah kiri kemudian menu di sebelah kanan.

<div class="row border-bottom p-2">
    <div class="col-lg-3">
        <!-- ini kolom pertama untuk logo -->
        <img src="https://www.slightsite.com/uploads/posts/belajar-html-css.png" class="img-fluid">
    </div>
    <div class="col-lg-9">
        <!-- ini kolom kedua untuk menu -->
        <ul class="nav justify-content-end mt-3">
            <li class="nav-item">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</div>

Bootstrap menyediakan class grid sebanyak 12 kolom. col-lg-1 sampai col-lg-12 untuk ukuran resolusi layar yang besar. col-md-1 sampai col-md-12, col-sm-1 sampai col-sm-12, dan col-xs-1 sampai col-xs-12 untuk resolusi mobile phone. Pada header di atas, kolom sebelah kiri menggunakan class col-lg-3 dan kanan col-lg-9, jika dijumlahkan kolomnya jadi tepat 12. Anda dapat bereksperimen sendiri dengan mengganti angka tersebut dengan nilai maksimal 12.

Untuk Content utama akan diisi section dalam 2 baris. Baris pertama disusun oleh 4 kolom kemudian baris kedua hanya 2 kolom.

<div class="row p-3 mt-3"><!-- ini baris pertama yang berisi 4 kolom -->
    <div class="col-md-3 col-sm-6 col-xs-6"> <!-- kolom 1 -->
        <div class="text-center">
            <a href="#">
                <img src="https://www.slightsite.com/uploads/posts/course01.jpg" class="img-fluid img-thumbnail" alt="">
                <i class="course-link-icon fa fa-link"></i>
            </a>
            <div class="p-1">
                <a href="#">Beginner to HTML</a>
                <br/>
                <span class="course-category">Web Development</span>
                <span class="course-price course-free">Free</span>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-6"> <!-- kolom 2 -->
        <div class="text-center">
            <a href="#">
                <img src="https://www.slightsite.com/uploads/posts/course02.jpg" class="img-fluid img-thumbnail" alt="">
                <i class="course-link-icon fa fa-link"></i>
            </a>
            <div class="p-1">
                <a href="#">Introduction to CSS</a>
                <br/>
                <span class="course-category">Web Design</span>
                <span class="course-price course-free">Premium</span>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-6"> <!-- kolom 3 -->
        <div class="text-center">
            <a href="#">
                <img src="https://www.slightsite.com/uploads/posts/course03.jpg" class="img-fluid img-thumbnail" alt="">
                <i class="course-link-icon fa fa-link"></i>
            </a>
            <div class="p-1">
                <a href="#">The Ultimate HTML</a>
                <br/>
                <span class="course-category">Drawing</span>
                <span class="course-price course-free">Premium</span>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-sm-6 col-xs-6"> <!-- kolom 4 -->
        <div class="text-center">
            <a href="#">
                <img src="https://www.slightsite.com/uploads/posts/course04.jpg" class="img-fluid img-thumbnail" alt="">
                <i class="course-link-icon fa fa-link"></i>
            </a>
            <div class="p-1">
                <a href="#">Free Course</a>
                <br/>
                <span class="course-category">Web Development</span>
                <span class="course-price course-free">Free</span>
            </div>
        </div>
    </div>

</div>
<div class="row p-3 mt-3"> <!-- ini baris kedua yang berisi 2 kolom -->
    <div class="col-md-7"> <!-- kolom pertama baris kedua -->
        <h3>Persius imperdiet incorrupte et qui, munere nusquam et nec.</h3>
        <p class="text-muted">Libris vivendo eloquentiam ex ius, nec id splendide abhorreant.</p>
        <p class="text-justify">No vel facete sententiae, quodsi dolores no quo, pri ex tamquam interesset necessitatibus. Te denique cotidieque delicatissimi sed. Eu doming epicurei duo. Sit ea perfecto deseruisse theophrastus. At sed malis hendrerit, elitr deseruisse in sit, sit ei facilisi mediocrem.</p>
    </div>

    <div class="col-md-5"> <!-- kolom kedua baris kedua -->
        <a href="#">
            <img src="https://www.slightsite.com/uploads/posts/about-video.jpg" class="img-fluid img-thumbnail" alt="">
        </a>
    </div>
</div>

Masing - masing baris memiliki class yang bernama row. Pada baris pertama terdiri dari 4 kolom yang setiap kolomnya mempunyai class col-md-3 yang artinya di resolusi besar, lebar kolom sama dengan 3/12 atau 1/4 dari total lebar layar. Pada resolusi kecil didefinisikan class col-sm-6 dan col-xs-6 yang berarti 6/12 atau 1/2 dari total lebar layar.
Sedangkan baris kedua disusun oleh 2 kolom di mana lebar kolom sebelah kiri 7/12 (col-md-7) dan kolom sebelah kanan 5/12 (col-md-5).

Buat Footer dengan 1 kolom yang berisikan text.

<div class="row border-top p-2">
    <div class="col text-center">
        Copyright © 2018. Belajar HTML
    </div>
</div>

Pada Bootstrap versi keempat ini terdapat tambahan class col yang secara otomatis mendeteksi seberapa lebar kolom yang tersedia. Jika dalam 1 row terdapat 2 class col maka kolom akan terbagi 2.

Inilah akhir kode HTML dari file belajar-html-css.html setelah kontennya diberikan tambahan beberapa class dari Bootstrap.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Load Library Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Belajar Membuat Halaman Website</title>
</head>

<body>
    <div class="container p-3">
        <!-- awal header -->
        <div class="row border-bottom p-2">
            <div class="col-lg-3">
                <!-- ini kolom pertama untuk logo -->
                <img src="https://www.slightsite.com/uploads/posts/belajar-html-css.png" class="img-fluid">
            </div>
            <div class="col-lg-9">
                <!-- ini kolom kedua untuk menu -->
                <ul class="nav justify-content-end mt-3">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- akhir header -->

        <!-- awal content -->
        <div class="row p-3 mt-3"> <!-- ini baris pertama yang berisi 4 kolom -->

            <div class="col-md-3 col-sm-6 col-xs-6"> <!-- kolom 1 -->
                <div class="text-center">
                    <a href="#">
                        <img src="https://www.slightsite.com/uploads/posts/course01.jpg" class="img-fluid img-thumbnail" alt="">
                        <i class="course-link-icon fa fa-link"></i>
                    </a>
                    <div class="p-1">
                        <a href="#">Beginner to HTML</a>
                        <br/>
                        <span class="course-category">Web Development</span>
                        <span class="course-price course-free">Free</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6"> <!-- kolom 2 -->
                <div class="text-center">
                    <a href="#">
                        <img src="https://www.slightsite.com/uploads/posts/course02.jpg" class="img-fluid img-thumbnail" alt="">
                        <i class="course-link-icon fa fa-link"></i>
                    </a>
                    <div class="p-1">
                        <a href="#">Introduction to CSS</a>
                        <br/>
                        <span class="course-category">Web Design</span>
                        <span class="course-price course-free">Premium</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6"> <!-- kolom 3 -->
                <div class="text-center">
                    <a href="#">
                        <img src="https://www.slightsite.com/uploads/posts/course03.jpg" class="img-fluid img-thumbnail" alt="">
                        <i class="course-link-icon fa fa-link"></i>
                    </a>
                    <div class="p-1">
                        <a href="#">The Ultimate HTML</a>
                        <br/>
                        <span class="course-category">Drawing</span>
                        <span class="course-price course-free">Premium</span>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-6"> <!-- kolom 4 -->
                <div class="text-center">
                    <a href="#">
                        <img src="https://www.slightsite.com/uploads/posts/course04.jpg" class="img-fluid img-thumbnail" alt="">
                        <i class="course-link-icon fa fa-link"></i>
                    </a>
                    <div class="p-1">
                        <a href="#">Free Course</a>
                        <br/>
                        <span class="course-category">Web Development</span>
                        <span class="course-price course-free">Free</span>
                    </div>
                </div>
            </div>

        </div>
        <div class="row p-3 mt-3"> <!-- ini baris kedua yang berisi 2 kolom -->
            <div class="col-md-7"> <!-- kolom 1 -->
                <h3>Persius imperdiet incorrupte et qui, munere nusquam et nec.</h3>
                <p class="text-muted">Libris vivendo eloquentiam ex ius, nec id splendide abhorreant.</p>
                <p class="text-justify">No vel facete sententiae, quodsi dolores no quo, pri ex tamquam interesset necessitatibus. Te denique cotidieque delicatissimi sed. Eu doming epicurei duo. Sit ea perfecto deseruisse theophrastus. At sed malis hendrerit, elitr deseruisse in sit, sit ei facilisi mediocrem.</p>
            </div>

            <div class="col-md-5"> <!-- kolom 2 -->
                <a href="#">
                    <img src="https://www.slightsite.com/uploads/posts/about-video.jpg" class="img-fluid img-thumbnail" alt="">
                </a>
            </div>
        </div>
        <!-- akhir content -->

        <!-- awal footer -->
        <div class="row border-top p-2">
            <div class="col text-center">
                Copyright © 2018. Belajar HTML
            </div>
        </div>
        <!-- akhir footer -->
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Tampilan dari code di atas  jika dibuka melalui browser :

cara membuat-website dengan html css

Demikian pembahasan tentang cara membuat website dengan HTML dan CSS. Lebih lanjut tentang HTML, CSS, dan Bootstrap akan dibahas pada artikel selanjutnya.

Farid Efendi
Farid Efendi

Seneng mempelajari hal baru, gak cuma di Pemrograman, SEO, IM, tapi di luar topik internet juga OK. Biar sakti kayak James Bond.

Tinggalkan Komentar :

bikin website

Ingin belajar membuat website?

Bikin website tuh gak sulit amat, si Amat aja bisa loh bikin website yang bagus dan murah. Mau tau caranya?

Lihat Rahasianya