Membuat Portal PPDB SMK Negeri 1 Sawit Kab. Boyolali

Hallo sahabat, pada kesempatan kali ini saya akan mengajak teman-teman disini untuk membuat portal, sebelumnya apa sih portal itu???

Portal adalah salah satu jenis web yang digunakan untuk jendela awal untuk menuju ke link atau situs yang akan dituju. Di dalam portal juga kita bisa mengenal terlebih dahulu website apa yang ingin kita buka nantinya. Disini kita akan membuat portal dari awal, sebagai contoh disini saya akan share membuat portal menjadi seperti gambar di atas.

Tetapi sebelum kita membuat portal, pastikan anda sudah memahami dengan baik tentang HTML dan CSS, karena itu adalah pokok dari pembuatan poral ini.

Alat dan Bahan :

PC / Laptop
Text Editor

Tahapan :

Buat folder terlebih dahulu. ( Tidak harus di /html atau htdocx ).
Sekarang kita buat file untuk indexnya. Beri nama index.html.

Penjelasan :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>PPDB SMKN 1 Sawit Boyolali</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="PPDB" />
        <meta name="keywords" content="ppdb" />
        <meta name="author" content="Boge" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href="images/logo.png" rel="shortcut icon" />
    </head>

title : judul untuk web kita yang akan tampil di title web browser.
link : untuk mengambil dokument

li>
                        <a href="#">
                            
                            <div class="ca-content">
                                <img src="images/tkj.png">
                                <h3 class="ca-sub"><img src="images/tkj.png"></h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            
                            <div class="ca-content">
                                <img src="images/tkr.png">
                                <h3 class="ca-sub"><img src="images/tkj.png"></h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            
                            <div class="ca-content">
                                <img src="images/to.png">
                                <h3 class="ca-sub"><img src="images/tkj.png"></h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            
                            <div class="ca-content">
                                <img src="images/fr.png">
                                <h3 class="ca-sub"><img src="images/tkj.png"></h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            
                            <div class="ca-content">
                                <img src="images/ki.png">
                                <h3 class="ca-sub"><img src="images/tkj.png"></h3>
                            </div>
                        </a>
                    </li>

ca-content : isi dari content.
ca-sub : Animasi memutar yang aktif jika kursor kita arahkan pada konten

Semoga Bermanfaat !!!