Tutorial Cara Membuat Website dengan HTML dan CSS bagi Pemula

Tutorial Cara Membuat Website dengan HTML dan CSS bagi Pemula

Dalam web development, mengetahui cara membuat website HTML dan CSS merupakan langkah awal dan mendasar. Terlebih jika kamu seorang pemula, kamu wajib mempelajari kedua bahasa tersebut sebagai pondasi dalam mengembangkan situs web. Keuntungan membuat website dengan HTML dan CSS yaitu fleksibilitas dan kontrol penuh yang dimiliki oleh user. Artinya, dengan bahasa ini, pengguna lebih leluasa untuk merancang dan mengatur tampilan setiap elemen sesuai keinginan mereka. Lalu, bagaimana cara membuat web dengan CSS dan HTML? Yuk, cari tahu informasi dan tutorial lengkapnya di pembahasan kali ini.

Apa Itu HTML dan CSS?

HyperText Markup Language atau HTML adalah bahasa markup standar yang digunakan untuk mengatur dan mendesain tampilan konten halaman. Dengan kode HTML, kamu dapat membuat struktur dan format elemen website seperti teks, gambar, video, dan elemen lainnya.

HTML bisa dibilang sebagai bahasa dasar dalam merancang struktur web beserta kontennya. Bahasa ini memungkinkan kamu mengatur layout, membuat daftar, hyperlink, dan banyak lagi.

Sementara itu, Cascading Style Sheets atau CSS adalah kumpulan perintah yang berfungsi untuk mengontrol tampilan dan tata letak elemen halaman. Dengan CSS, kamu dapat mengatur estetika desain halaman seperti mengganti font, mengatur warna, padding, margin, dan sebagainya.

CSS biasanya dikolaborasikan dengan HTML untuk membangun visual halaman yang menarik dan interaktif. Penggunaan bahasa ini memungkinkan kamu membuat animasi, halaman responsif, serta mengoptimalkan tampilannya pada perangkat berbeda.

Jadi, HTML dan CSS merupakan dua komponen penting yang bisa digunakan secara bersamaan. HTML bertanggung jawab untuk membuat struktur, sedangkan CSS berperan sebagai pengatur tampilan visualnya. Dengan memahami kedua bahasa ini, kamu dapat menciptakan tampilan website yang menarik, interaktif, dan fungsional.

Cara Membuat Website dengan HTML dan CSS

Sebelum mempelajari tutorial membuat website dengan HTML dan CSS, kamu harus menyiapkan text editor dan web browser terlebih dahulu agar prosesnya berjalan lancar. Text editor digunakan sebagai alat coding, sedangkan browser untuk mengakses situs yang dikembangkan.

Hanya dalam empat langkah saja kamu sudah bisa membangun situs web sendiri, lho! Berikut garis besar membuat website dengan CSS dan HTML:Menyusun struktur proyek website

Tambahkan kode pada file index.html

Tambahkan kode pada file style.css

Mengakses website dalam web browser

Kamu dapat memilih tools apa pun sesuai selera. Namun, di panduan ini, kami menggunakan text editor dari Visual Studio Code dan Microsoft Edge sebagai browser-nya. Yuk, ikuti langkah-langkahnya di bawah ini.

1. Menyusun struktur proyek website

Langkah pertama yang harus kamu lakukan adalah menyusun struktur proyek website. Caranya, buatlah folder penyimpanan proyek dengan nama bebas, lalu buka melalui text editor. Pada contoh ini, proyek yang kami buat bernama “CONTOH WEBSITE”.

Selanjutnya, tambahkan folder baru di dalam CONTOH WEBSITE untuk menyimpan assets/gambar. Supaya prosesnya mudah dipahami, atur saja nama foldernya menjadi “images”.

Pada folder images ini, tambahkan dua file baru bernama “index.html” dan “style.css”.html – Merupakan file struktur atau inti halaman yang nantinya diisi oleh konten web.

css – Merupakan file pendukung HTML untuk membuat visual halaman yang lebih interaktif.

2. Tambahkan kode pada file index.html

Tutorial membuat website dengan HTML dan CSS berikutnya adalah menambahkan kode pada index.html. File ini merupakan struktur dasar sehingga kamu perlu mengerjakannya terlebih dahulu sebelum masuk ke tahap selanjutnya.

Bagi yang belum tahu, struktur HTML terdiri dari empat bagian utama, yaitu Tag DTD/Doctype, Tag HTML, Tag Head, dan Tag Body.Tag DTD/Doctype – Berfungsi untuk mendeklarasikan format dokumen yang akan diproses. Tag ini harus dibuat di bagian paling awal.

Tag HTML – Tempat penyimpanan elemen HTML.

Tag Head – Ruang informasi yang tidak ditampilkan secara visual, bisa berupa source css, source js, meta charset, atau lainnya.

Tag Body – Berisi semua elemen atau konten yang ditampilkan di halaman web.

Untuk membuatnya, kamu perlu menambahkan kode tertentu pada file index.html. Berikut langkah-langkahnya:

Langkah 1: Pada bagian tag head, deklarasikan beberapa informasi seperti meta tag charset, title, dan path external sources halaman (contoh: CSS dan JavaScript). Jangan lupa pastikan bahwa lokasi penyimpanan file CSS sudah sama dengan HTML. Jika berbeda, kamu perlu memasukkan path-nya di bagian href.

Berikut adalah kode HTML nya, letakkan kode tersebut pada file index.html

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

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Contoh Web Portofolio</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
            </ul>
        </nav>
 
        <!--- text --->
        <div class="text-container">
            <p>Hi, Guys!</p>
            <p>I’M NURUL HUDA</p>
            <p>Content Writer, SEO Specialist & Web Developer</p>
            <p>An introvert person who loves FPS games, singing,
            <br>learning technology and of course writing.</p>
            <button class="hire-btn">Contact me</button>
            <button class="down-cv">Portfolio</button>
        </div>
        <!-- model -->
        <img alt="model" class="model" src="E:\CONTOH WEBSITE\images\aduhuchiha.png">  
    </section>

<!-- services -->
    <div class="services">
        <!--text-->
        <div class="services-text ">
            <p>What do I Offer?</p>
        </div>
         
        <div class="box-container">
        <!--- 1 --->
            <div class="box-1">
                <span>1</span>
                <p class="heading">Content Writing</p>
                <p class="details">We create content that resonates with your audience and drives results for your business</p>
                <button>Read More</button>
            </div>
        <!--- 2 --->
            <div class="box-2">
                <span>2</span>
                <p class="heading">Search Engine Optimization</p>
                <p class="details">We implement proven strategies to boost your website's ranking and driving organic traffic from potential customers</p>
                <button>Read More</button>
            </div>
        <!--- 3 --->
            <div class="box-3">
                <span>3</span>
                <p class="heading">Web Development</p>
                <p class="details">From frontend design to backend functionality, we build robust and scalable web applications to help your business thrive</p>
                <button>Read More</button>
            </div>
        </div>
    </div>

<!--testimonials-->
    <div class="testimoni">
        <!--text-->
        <div class="testimoni-text ">
            <p>Clients Who are Satisfied with Our Services...</p>
        </div>        
 
        <div class="testimoni-col">
            <div class="testimoni-1">
                <img src="E:\CONTOH WEBSITE\images\johana.png">
                <div>
                    <p>I am amazed by the level of professionalism and creativity this services. I highly recommend their services to anyone seeking top-notch solutions</p>
                    <h3>Johanna</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="E:\CONTOH WEBSITE\images\zila.png">
                <div>
                    <p>Their attention to detail and commitment to excellence are truly remarkable. I am incredibly satisfied with the results they have achieved for my business</p>
                    <h3>Zila</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>

<!-- footer -->
    <footer>
        <p>How to Hire My Services?</p>
             
        <!--paragraph-->
        <p>I work on projects with the best results and according to deadlines. Guaranteed revisions and money back if you are not satisfied with my work.</p>
        <!--social-->
        <div class="social-icons">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-whatsapp"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-tiktok"></i></a>
        </div>
         
        <!--copyright-->
        <p class="copyright">Copyright by Nurul Huda</p>
    </footer>
 
    <!--social-attach-bar-->
    <div class="social">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-whatsapp"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-tiktok"></i></a>
    </div>
</body>
</html>

Berikut adalah kode CSS nya, letakkan kode tersebut pada file style.css

@charset "utf-8";
/* CSS Document*/
body{
    background-color:#dddddd;
    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("E:\CONTOH WEBSITE\images\images\layanan-1.jpg");
}
 
.box-2{
    background-image:url("E:\CONTOH WEBSITE\images\layanan-2.jpg");
}
 
.box-3{
    background-image: url("E:\CONTOH WEBSITE\images\layanan-3.jpg");
}
 
.box-1 span,
.box-2 span,
.box-3 span{
    width:40px;
    height:40px;
    border-radius:50%;
    background-color:#ff7b00;
    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:#000000;
    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:#979797;
    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;
    color:#FFFFFF;
    line-height:10px;
}
 
footer p:nth-child(2){
    font-size: 16px;
    color:#ffffff;
    width:600px;
    text-align: center;
}
 
footer{
    height:300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #5a5a5a;
}
 
.social-icons a{
    width:40px;
    height:40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#e6e3e3;
    margin:20px 10px;
    border-radius:50%;
}
 
.social-icons{
    display: flex;
     
}
 
.social-icons i,.social i{
    color:#000000;
}
 
.social-icons a:hover{
    background-color:#818181;
    box-shadow:2px 2px 12px rgba(0,0,0,0.2);
    transition:all ease 0.5s;
}
 
.social-icons a:hover i,
.social a:hover i{
    color:#ffd900;
    transition:all ease 0.5s;
}
  
.copyright{
    color:rgb(214, 213, 213);
    font-size: 15px;
    position: absolute;
    left:50%;
    bottom:10px;
    transform: translateX(-50%);
}
.social{
    position: fixed;
    top:50%;
    right:0px;
    transform:translateY(-50%);
}
 
.social a{
    display: flex;
    justify-content: center;
    align-items: center;
    width:50px;
    height:50px;
    margin:0px;
    padding: 0px;
    line-height:0px;
    background-color:#FFFFFF;
    border:1px solid #CBCBCB;
    box-shadow:2px 2px 12px rgba(0,0,0,0.2);
}
 
.social a:hover{
    background-color:#6e6e6e;
    transition:all ease 0.5s;
}
 
.social i{
    font-size:20px;
    color:#2B2B2B;
}

Coding