elegantbizapps.com

Contoh Coding HTML Web | Cocok Buat Kamu yang Mau Latihan Desain Website

contoh coding html web

Berbicara tentang belajar dan latihan membuat coding website, memang sebuah proses yang panjang. Baik itu untuk website e-commerce, profil perusahaan, maupun layanan produk. Dibutuhkan komitmen dan konsistensi untuk belajar agar skill dapat berkembang.

Dalam kesempatan ini, akan diberikan informasi lengkap terkait contoh coding HTML web sebagai bahan latihan dan belajar kamu membuat website. Sebelum terlalu jauh, kamu harus memahami dulu apa itu HTML web agar kamu lebih mengerti kedepannya.

HTML adalah adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website. HTML sebenarnya bukanlah bahasa pemrograman, artinya HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis.

Mempersiapkan Tools yang Akan Digunakan

Sebelum berlatih membuat website, kamu harus mempersiapkan tools yang digunakan untuk belajar. Berikut beberapa tools yang harus kamu siapkan:

  1. Teks editor: VS Code atau Teks Editor Lain
  2. Kode program : HTML5 dan CSS3
  3. Web browser: Chrome

Nah, selanjutnya akan diberikan beberapa contoh coding HTML web yang bisa kamu praktekkan untuk berlatih membuat website. Simak yuk!

Adapun contoh struktur dasar dari HTML yang dapat kamu pelajari dan praktekkan di antaranya sebagai berikut ini.

 

<html>

<head>

  <title>Dicoding Indonesia Website</title>

</head>

<body>

  <main>

    <h1>Dicoding Indonesia</h1> 

    <h2>Gudangnya developer handal</h2>

    <p>Mencetak banyak lulusan terbaik khususnya para developer.</p> 

    <img src=”logo_dicoding.png” alt=”Image dicoding”> 

    <p>Paragraph two with a <a href=”https://dicoding.com”>klik disini</a></p>

  </main>

</body>

</html>

 

Selanjutnya, kita akan mempraktekkan membuat website portofolio. Pertama buka teks editor kamu. Setelah dibuka kita akan membuat folder proyek terlebih dahulu. Kamu dapat menyimpan folder di sembarang tempat. Disini, kita akan membuat 2 buah file yaitu index.html dan style.css.

 

Kode Lab: index.html

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <link rel=”stylesheet” href=”style.css”>

    <title>Web | Portofolio</title>

</head>

<body>

    <div class=”container”>

        <div class=”sidebar”>

            <nav>

                <ul>

                    <li><a href=””>About</a></li>

                    <li><a href=””>Portofolio</a></li>

                    <li><a href=””>Blog</a></li>

                    <li><a href=””>Contact</a></li>   

                </ul>

            </nav>

        </div>

        <main class=”content”>

              <section class=”hero”>

                  <img src=”online.png” alt=””>

              <div class=”hero-content”>

                  <h1>Profesi</h1><br></h2>Junior Content Writer at Dicoding</h2><br><br>   

<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, aperiam dolore assumenda velit repellendus recusandae magni consectetur mollitia facere incidunt inventore perspiciatis  debitis doloribus ullam minima culpa voluptatem. Repellendus, option.</p>

<a href=”” class=”action-btn”>Profile Saya</a>

              </div>

                </section>

        </div>

        <div class=”footer”>

            <footer>

            <ul>

                <li><img src=”instagram.png” alt=””><p>Instagram</p></a></li>

                <li><img src=”facebook.png” alt=””><p>Facebook</p></a></li>

                <li><img src=”twitter.png” alt=””><p>Twitter</p></a></li>

                <li><img src=”telegram.png” alt=””><p>Telegram</p></a></li>

            </ul>

            </footer>

        </div>

    </div>    

</body>

</html>

 

Kode Lab: style.css

* {

      margin: 0;

      padding: 0;

  }

  body {

      background-color: #eff1f2;

      font-family: sans-serif;

  }

.content {

    grid-area: content;

}

.sidebar{

    grid-area: sidebar;

    background: linear-gradient(to right, rgba(200,107,142,1), rgba(218,105,250,1),

     rgba(110,125,253,1)) ;

    justify-content: center;

}

.footer {

    grid-area: footer;

    background: white;

}

.container {

    font-size: 1.5em;

    width: 100%;

    height: 100;

    height: 100vh;

    display: grid;

    grid-template-areas: “sidebar” “content” “footer”;

    grid-template-columns: 1fr;

    grid-template-rows: 130px 800px 250px;

}

.content, .sidebar, .footer{

    padding: 1em;

}

nav ul {

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: space-between;

    text-align: center;

}

nav li{

    list-style: none;

    padding: 1em 0;

}

nav li a {

    color: white;

    font-weight: 700;

    opacity: 0.6;

    text-decoration: none;

    transition: 0.3s;

}

nav li a:hover {

    opacity: 1;

}

.hero {

    max-width: 90 px;

    margin: 0 auto;

    text-align: center;

}

.hero img {

    width: 200px;

}

.hero h1 {

    font-size: 2em;

    font-weight: 300;

    color: #373046;

}

.hero p {

    font-weight: 300;

    line-height: 1.3em;

    color: #98aBad;

}

.action-btn {

    display: inline-block;

    text-decoration: none;

    color: white;

    font-weight: 700;

    background: #567bfb;

    padding: 0.5em 2em;

    border-radius: 60px;

    margin: 1em 0;

    transition: 0.3s;

}

footer ul {

max-width: 640px;

margin: 2em auto;

padding: 0;

text-align: center;

display: flex;

flex-direction: row;

}

footer ul li {

    list-style: none;

    align-self: flex-end;

}

footer ul li a{

    text-decoration: none;

    color: #c1c6ce;

}

footer ul li img {

    width: 30%;

}

footer p {

    font-size: 0.8em;

}

@media (min-width: 1040px){

    .container {

        grid-template-areas:”sidebar content” “sidebar footer” ;

        grid-template-rows: 1fr auto ;

        grid-template-columns: 300px 1f;

    }

    nav ul{

        display: flex;

        justify-content: space-between;

        flex-direction: column;

    }

    .sidebar{

        background: linear-gradient( rgba(200,107,142,1), rgba(218,105,250,1),

        rgba(110,125,253,1)) ;

        padding-top: 10em;

    }

    .hero{

        text-align: left;

        margin: 7em 0;

    }

    .hero img {

        width: 200px;

        float: right;

    }

    .hero h1{

        font-size: 3em;

    }

    .hero p{

        width: 60%;

    }

    footer ul {

        max-width: 900px;

        margin: 0 auto;

        padding: 1em 0;

    }

    footer ul li a img {

        width: 20%;

    }

}

Nah, itu dia contoh coding HTML web yang bisa kamu coba. Kamu bisa menambahkan beberapa icon atau gambar jika diinginkan, serta melakukan pengaturan tambahan sesuai keinginan. Mudah bukan?

Improvisasi selama berlatih bisa kamu lakukan untuk mengembangkan kemampuan coding yang kamu miliki. Sebagai pemula, kamu juga bisa mengambil kelas pembuatan website agar belajar kamu lebih terarah oleh para ahli. Namun belajar secara otodidak juga bukan pilihan buruk selama kamu bisa konsisten dan disiplin dalam berlatih. Selamat mencoba!

Contoh Coding HTML Web | Cocok Buat Kamu yang Mau Latihan Desain Website
Exit mobile version