Tutorial membuat halaman utama website

 Assalammualaikum warahmatullahi wabarakkhatu

    Pertama tama marilah kita panjatkan puji serta syukur kita atas kehadirat Allah SWT yang mana telah memberikan nikmat serta karunianya sehingga saya dapat menulis artikel tentang tutorial membuat halaman home pada website kali ini.

    Sholawat beserta salam tak lupa kita curahkan kepada junjungan kita habibana wanabiana Muhammad SAW kepada para keluarganya, sahabatnya, dan tak lupa kepada kita semua yang selaku umatnya yang semoga patut dan taat atas ajarannya sampai yaumul akhir aamiin ya rabbal alamin.

Pada artikel ini saya akan memberikan tutorial bagaiman cara membuat halaman depan pada website, biasanya saaya menggunakan apk VS Code untuk ngoding.

Ada apa aja sih yang ada di dalam tampilan menu home ini? Biasanya dalam menu home ini terdapat Logo, menu navigasi, judul/heading, paragraf dan lain-lain.

Apasih logo itu? dan bagaimana cara memasukkan gambar logo dalam website?

Logo adalah gambar, lambang atau sketsa yang mewakili atau identik dengan suatu perusahaan, negara, produk dan lain lain. Lambang atau logo ini harus bersifat singkat dan mudah diingat sebagai pengganti dari nama aslinya.

Cara menambahkan logo kedalam Website adalah dengan cara memasukkan koding pada html, koding atau bahasa markahnya adalah sebagai berikut:

<div class="navbar"></div>

 Catatan:

1. <div> adalah tag untuk mengelompokkan tag atau elemen menjadi satu grup.
2. class="logo" adalah attribut adalah untuk menentukan nama class nya, class disini adalah logo.

Selanjutnya yaitu adalah menu navigasi.

Apa itu menu navigasi? dan bagaimana cara membuatnya pada website?

Menu navigasi adalah menu yang disusun untuk mengatur link yang mengarah ke halaman yang dituju. Biasanya yang terdapat pada menu navigasi antara alin Home, Profile, dan lain-lain tergantung si pembuatnya.

Cara membuat menu navigasi kedalam website adalah dengan cara memasukkan koding pada html, koding atau bahasa markahnya adalah sebagai berikut:

<div class="navbar">

    <ul>

        <li class="active"><a href="#">Home</a></li>

        <li><a href="#">Profil</a></li>

        <li><a href="#">Tutorial</a></li>

        <li><a href="#">Video Tutorial</a></li>

    </ul>

</div>

 Dan untuk kode CSS nya adalah sebagai berikut:

            ul{

                float: right;

                margin-top: 35px;

            }

            ul li{

                display: inline-block;

            }

            ul li a{

                text-decoration: none;

                color: white;

                padding: 5px 20px;

                border: 2px solid white;

                border-radius: 20px;

                transition: 0,6s;

                margin: 10px;

                font-size: 12px;

                font-weight: bold;

            }

            ul li a:hover{

                background-color: white;

                color: black;

            }

            ul li.active a{

                background-color: white;

                color: black;

            }

            .navbar{

                max-width: 1200px;

                margin: auto;

            }

 Catatan HTML:

1. ul adalah tag untuk simbol atau karakter pada html untuk mengurutkan list daftar.
2. li adalah tag untuk menampilkan item di ul.
3. a href="#" adalah tujuan link atau halaman yang ingin dibuka atau dituju, saya menggunakan # disini untuk menggantikan linknya karena belum membuat link yang akan dituju.

Catatan CSS:

1. float; right; adalah atribut untuk mengatur letak dari tag.
2. margin-top: 35px adalah attribut penggaris untuk mengatur jarak ke atas antara elemen pada html.
3. display: inline-blok; adalah untuk menetapkan elemen html bergerak horizontal.
4. text-decoration: none; adalah untuk menetralkan dekorasi atau hiasan pada text.
5. color adalah untuk memilih warnanya.
6. padding adalah yang mengatur jarak pada elemen atau tag html.
7. border adalah untuk memberikan kotak.
8. border-radius adalah untuk mengatur agar ujung kotak nya tidak lancip.
9. transition: 0,6s adalah perpindahan dalam waktu 0,6 second.
10. font-size adalah untuk ukuran font.
11. font-weight: bold; adalah untuk menebalkan font.
12. background-color adalah untuk mewarnai latar belakangnya.

Selanjutnya ada judul atau heading.

Heading atu judul adalah untuk menunjukkan informasi yang penting, judul disini sama dengan judul yang ada pada majalah atau yang lainnya. Cara memasukkan heading pada html:

<h1>Tutocoeg</h1>

 Untuk CSS nya:

            h1{

                color: white;

                font-size: 70px;

                text-shadow: -4px 4px 4px black;

            }

 Catatan:

1. text-shadow adalah untuk mengatur bayangan yang ada pada h1 atau heading

Selanjutnya adalah Paragraf

Paragraf adalah sekumpulan kalimat, cara menambahkan paragraf pada html adalah sebagai berikut:

<P>Selamat datang di Tutocoeg mari belajar ngoding bareng</P>

 Untuk CSS nya:

            p{

                color: blue;

                font-size: 20px;

                text-align: center;

                margin-right: 400px;

            }

 Yang terakhir adalah Button

Button adalah tombol untuk menuju halaman yang ingin dibuka. Cara memasukkan html nya adalah sebagai berikut:

            <div class="button">

                <a href="#" class="btn">MULAI</a>

            </div>

 Untuk CSS nya:

.button{

                position: absolute;

                top: 50%;

                left: 36%;

                margin-top: 60px;

                font-weight: bold;

            }

            .btn{

                border: 2px solid white;

                padding: 10px 30px;

                color: white;

                text-decoration: none;

                transition: 0,6s ease;

                border-radius: 20px;

                margin: 10px;

                background-color: red;

                margin-left: 120px;

            }

            .btn:hover{

                background-color: blue;

                color: white;

            }

Nah itulah bagaimana cara membuat halaman utama pada website, sekian artikel yang dapat saya tulis kali maafkan bila anda kurang memahaminya karena saya disini juga masih belajar. Terima kasih karena telah mengunjungi blog saya.

Untuk tutorial lebih jelasnya silahkan simak video di bawah ini.