Cara Membuat Website dengan HTML CSS PHP

Ada banyak cara yang bisa kamu coba untuk membuat website. Kamu bebas memilih cara membuat website dengan HTML CSS PHP. Ketiga platform tersebut memang jadi bahasa pemrograman paling umum digunakan untuk membuat website.

JIka memang berminat membuat website dari nol, coba deh pertimbangkan beberapa cara dari kami ini!

Cara Membuat Website dengan HTML CSS PHP

Ada beberapa bahasa pemrograman yang bisa kamu coba yakni HTML, CSS, juga PHP. Ketiga website ini bakal amat membantumu dalam proses pembuatan website. Cek sini untuk cara lengkapnya:

1. Cara Membuat Website dengan HTML dan CSS

Ada beberapa langkah yang harus kamu lakukan untuk membuat website pakai HTML. Cek langkahnya sini:

Pertama buat folder penyimpanan di VS Code untuk membuat struktur project web.
Lalu buat folder baru menggunakan nama images. Tujuannya menyimpan gambar/assets.
Kemudian buat file bernama index.html dan style.css.
Kemudian tambahkan kode di file index.html.

Pada bagian tag head, kamu perlu deklarasi informasi tentang title website, meta tag charset, juga link external seperti CSS dan JavaScript.

Bagian head ini untuk menyimpan file CSS. Pastikan filenya ada di folder yang juga ada di HTML. Kalau berbeda, pastikan kamu memasukkan path yang sesuai di bagian href.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Personal Website</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Personal Website</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>

Lalu, masuk pada tag body. Di bagian pertama ada tampilan awal yang terdiri dari bar navigasi, text container, juga gambar. Navigation bar berupa menu yang ada di header website.

Kamu pun bisa menambahkan tulisan pada awal website saat baru diakses. Contoh:

<body>
    <section>
        <!-- navigation -->
        <nav>
            <!-- logo -->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!-- menu -->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <!-- text -->
        <div class="text-container">
            <p>Hello,</p>
            <p>I&#8217;M NIDA</p>
            <p>SEO Technical Writer & Developer</p>
            <p>An Aquarius girl who loves music, watching movies, and<br>of course writing.</p>
            <button class="hire-btn">Hire me</button>
            <button class="down-cv">Download CV</button>
        </div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">
    </section>
</body>

Kamu bisa juga menambahkan bagian service atau layanan. Contohnya dengan menuliskan kode ini:

<div class="box-container">
    <!-- services/layanan -->
    <div class="services">
        <!--text-->
        <div class="services-text">
            <p>Services</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
        <div class="box-container">
            <!--- 1 --->
            <div class="box-1">
                <span>1</span>
                <p class="heading">Technical Writing</p>
                <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                <button>Read More</button>
            </div>
            <!--- 2 --->
            <div class="box-2">
                <span>2</span>
                <p class="heading">Web Design</p>
                <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                <button>Read More</button>
            </div>
            <!--- 3 --->
            <div class="box-3">
                <span>3</span>
                <p class="heading">Web Development</p>
                <p class="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                <button>Read More</button>
            </div>
        </div>
    </div>
</div>

Kamu pun bisa menambahkan berbagai hal. Jika website yang dibuat adalah website portofolio, maka kamu bisa mengisinya dengan review juga rating dari klien.

Jangan lupa tambahkan link script fontawesome di bagian head. Jika tidak, maka ikon bintang yang dipakai bakal nunjukin rating kepuasan klien. Contohnya:

<!--testimonials-->
<div class="testimoni">
    <!--text-->
    <div class="testimoni-text">
        <p>What Our Client Says..</p>
    </div>
    <div class="testimoni-col">
        <div class="testimoni-1">
            <img src="images/ava1.png">
            <div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                <h3>Client Pertama</h3>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
            </div>
        </div>
        <div class="testimoni-2">
            <img src="images/ava2.png">
            <div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                <h3>Client Kedua</h3>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
            </div>
        </div>
    </div>
</div>

Pada bagian footer, kamu bisa menambahkan sosial media juga kontak yang dapat dihubungi. Adapun kode untuk logo media sosial bisa dicari di website penyedia seperti fontawesome. Contoh kodenya:

<!-- footer -->
<footer>
    <p>Interested In Using Our Services?</p>
    <!--paragraph-->
    <p>I try to work on your project as quickly as possible. Guarantee for revision until you are satisfied with my work.</p>
    <!--social-->
    <div class="social-icons">
        <a href="#"><i class="fab fa-whatsapp"></i></a>
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>
    </div>
    <!--copyright-->
    <p class="copyright">Copyright by Niagahoster Tutorial</p>
</footer>
<!--social-attach-bar-->
<div class="social">
    <a href="#"><i class="fab fa-whatsapp"></i></a>
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-youtube"></i></a>
</div>
</body>
</html>

Semua kode di atas harus dijadikan satu. Website sederhanamu sudah jadi. Tapi karena belum dilanjutkan dengan CSS, maka tampilannya kurang maksimal.

2. Membuat Website dengan CSS

Cara selanjutnya yakni dengan menambahkan kode di file style.css. Tentu tujuannya agar laman lebih rapi dan agar website tidak sebatas teks saja. Kamu bisa coba pakai kode ini sebelum menjadikan style milikmu sendiri:

@charset "utf-8";
/* CSS Document*/
body{
    background-color:#ffffff;
    margin:0px;
    padding:0px;
}
ul{
    list-style:none;
}
a{
    text-decoration:none;
}
section{
    width:100%;
    height:95vh;
    position: relative;
}
nav{
    display: flex;
    justify-content: space-between;
    align-items:center;
    height:60px;
    background-color:#FFFFFF;
    box-shadow:2px 2px 12px rgba(0,0,0,0.2);
    padding:0px 5%;
}
nav ul{
    display: flex;
}
nav ul li a{
    margin:30px;
    font-family:myriad pro regular;
    color:#505050;
    font-size: 15px;
    font-weight:700;
}
.logo{
    font-family:RoadTest;
    color:#000000;
    font-size: 22px;
    font-weight: bold;
}
.active{
    color:#2d2a2a;
    font-weight:bold;
}
.text-container p:nth-child(1){
    font-family: calibri;
    font-weight: bold;
    color: #6d6d6d;
    font-size: 22px;
}
.text-container p:nth-child(2){
    font-family: calibri;
    font-weight: bold;
    letter-spacing: 2px;
    color: #1a1a1a;
    font-size: 60px;
}
.text-container p:nth-child(3){
    font-family: myriad pro regular;
    color: #403e3e;
    font-size: 30px;
    line-height: 30px;
}
.text-container p:nth-child(4){
    font-family: calibri;
    color: #403e3e;
    font-size: 17px;
    margin-top: 10px;
    line-height: 30px;
}
.text-container p{
    line-height: 0px;
    margin: 55px 0px 25px;
}
.text-container{
    position: absolute;
    left: 13%;
    top: 42%;
    transform: translate(-13%, -42%);
}
.text-container button{
    width: 130px;
    height: 42px;
    border-radius: 10px;
    font-family: calibri;
    font-weight: bold;
    font-size: 14px;
    outline: none;
    margin: 0px 10px;
}
.hire-btn{
    border: 2px solid #373636;
    color: #373636;
}
.down-cv{
    background-color: #0b0b0b;
    color: #ffffff;
    border: none;
}
button:active{
    transform: scale(1.1);
}
.model{
    height: 560px;
    position: absolute;
    bottom: 60px;
    left: 80%;
    transform: translateX(-70%);
}
.services{
    height:600px;
    background-color:#f6f5f5;
    padding: 2% 10% 0px 10%;
}
.services-text p:nth-child(1){
    font-family: calibri;
    font-weight:bold;
    color:#1d1c1c;
    font-size:30px;
    line-height:0px;
    text-align: center;
    margin-bottom: 40px;
}
.services-text p:nth-child(2){
    font-family:calibri;
    color:#7e7d7d;
}
.services-text{
    margin:50px 0px;
}
.box-container{
    display:flex;
    justify-content:space-between;
}
.box-1,.box-2,.box-3{
    width: 300px;
    height:320px;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow:2px 2px 18px rgba(0,0,0,0.3);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    margin: 0px 4px;
}
.box-1{
    background-image:url("images/services-1.png");
}
.box-2{
    background-image:url("images/services-2.png");
}
.box-3{
    background-image: url("images/servies-3.png");
}
.box-1 span,
.box-2 span,
.box-3 span{
    width:40px;
    height:40px;
    border-radius:50%;
    background-color:#ffffff;
    display: flex;
    justify-content: center;
    align-items:center;
    font-family: calibri;
    font-weight: bold;
}
.box-1 p:nth-child(2),
.box-2 p:nth-child(2),
.box-3 p:nth-child(2){
    color:#FFFFFF;
    font-family: calibri;
    font-size: 23px;
    line-height:0px;
}
.box-1 p:nth-child(3),
.box-2 p:nth-child(3),
.box-3 p:nth-child(3){
    font-family: calibri;
    color:#8F8F8F;
    text-align:center;
    width: 230px;
    margin:0px 0px 20px 0px;
}
.box-1 button,
.box-2 button,
.box-3 button{
    width:100px;
    height:30px;
    background-color:#FFFFFF;
    border:none;
    outline: none;
    border-radius:5px;
}
.testimoni{
    height:500px;
    background-color:#FFFFFF;
    padding: 2% 10% 0px 10%;
    text-align: center;
    margin: auto;
}
.testimoni-text p:nth-child(1){
    font-family: calibri;
    font-weight:bold;
    color:#1d1c1c;
    font-size:30px;
    line-height:0px;
}
.testimoni-text{
    margin:70px 0px;
}
.testimoni-col{
    display:flex;
    justify-content:space-between;
}
.testimoni-1,.testimoni-2{
    flex-basis: 44%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
    background: #f4f2f4;
    padding: 25px;
    cursor: pointer;
    display: flex;
    width: 500px;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
}
.testimoni-col img{
    height: 60px;
    margin-left: 5px;
    margin-right: 30px;
    margin-top: 20px;
    border-radius: 50%;
}
.testimoni-col p{
    padding: 0;
}
.testimoni-col h3{
    margin-top: 15px;
    text-align: left;
}
.testimoni-col .fas, .testimoni-col .far{
    color: #f44336;
}
footer p{
    font-family: calibri;
}
footer p:nth-child(1){
    font-size: 30px;
    font-weight:bold;

Selanjutnya yakni dengan langsung buka teks editor serta browser secara bersamaan. Nantinya setiap perubahan yang terjadi di file HTML serta CSS bisa langsung kelihatan. Maka pembuatannya semakin gampang dilakukan.

Guna menjalankan website, kamu hanya perlu buka file index.html di browser. Jangan lupa refresh laman website untuk melihat perubahannya.

3. Membuat Website dengan PHP

Seperti judul yang harus menjelaskan cara membuat website dengan HTML CSS PHP, maka sekarang waktunya tahu gimana cara bikin website dengan PHP.

Adapun hal yang harus kamu persiapkan adalah PHP Editor, Web Browser, dan juga Web Server.

Setelah itu harus membuat file index.php. Buka Sublime Text kemudian File > New File. Lalu coba input source code ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Website dengan PHP | Niagahoster</title>
    <meta charset="UTF-8">
    <meta name="description" contents="Niagahoster">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <header>
        <h1 class="title">nama bisnis</h1>
        <h3 class="desc">Membuat Website dengan PHP dari Awal</h3>
        <nav id="navigation">
            <ul>
                <li><a href="index.php?page=home">Home</a></li>
                <li><a href="index.php?page=about">About</a></li>
                <li><a href="index.php?page=contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="contents">
        <?php
        if (isset($_GET['page'])) {
            $page = $_GET['page'];
            switch ($page) {
                case 'home':
                    include "home.php";
                    break;
                case 'about':
                    include "about.php";
                    break;
                case 'contact':
                    include "contact.php";
                    break;
            }
        } else {
            include "home.php";
        }
        ?>
    </div>
    <footer>
        &copy; Copyright nama bisnis 2021 | bisnis terbaik di indonesia
    </footer>
</body>
</html>

Kalau selesai, save file dengan nama index.php di folder websitephp.

Sedangkan untuk membuat website tidak hanya berisikan teks belaka, bisa langsung menambahkan file CSS seperti cara kedua tadi agar tampilannya jadi lebih menarik. Bisa pakai yang kami berikan dan bisa juga pakai source code milikmu sendiri.

Setelah selesai, tambahkan atau simpan dengan nama style.css.

Kemudian bikin halaman home. Caranya buat file baru lalu ketik kode ini:

<div class="page">
    <h2>Website Hebat Berawal dari Unlimited Hosting</h2>
    <p>Kami berikan penawaran terbaik unlimited web hosting. Fitur terlengkap, harga terjangkau, dan dukungan teknis 24/7 telah tersedia untuk Anda.</p>
</div>

Simpan file dengan nama home.php.

Selanjutnya buat file about.php yakni dengan File > New File kemudian tuliskan source code ini:

Save menggunakan nama about.php.

Kemudian kamu bisa membuat file contact.php. Lakukan tambah file baru lalu masukkan source code ini:

<div class="page">
    <h2>Tentang Kami</h2>
    <p>Sudah dipercaya banyak orang. Kredibilitas terjamin dan pelayanan memuaskan</p>
</div>
<div class="page">
    <h2>Hubungi Kami</h2>
    <p>Telp: isi sendiri
        <br>WA: isi sendiri
        <br>Senin - Minggu
        <br>24 Jam Non Stop
    </p>
    <p>Isi alamat lengkap
        <br>55581
    </p>
</div>

Simpanlah dengan nama contact.php.

Setelah semuanya selesai, bisa cek website lewat browser. Buka XAMPP Control Panel kemudian klik Start di modul Apache juga MySQL