html-programming-WEB/index.html at master · FadhilFirmansyah/html-programming-WEB · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="id">
    <head>
        <title>Programming Page</title>
        <link rel="stylesheet" href="assets/style/style.css">
    </head>

    <body style="background-color: #181818;">

        <ul class="navbar-page">
            <li><a href="#">Programming</a></li>
            <li><a href="algoritma/">Algoritma</a></li>
            <li><a href="profile/">Profile</a></li>
        </ul>

        <h1 style="margin-bottom: 100px;"><i>Programming</i></h1>
        <img src="assets/img/altur-pos.jpg" alt="Penemu mesin pemrograman">
        <br><br>
        <p class="quote"><q>Those who can imagine anything, can create the impossible.</q></p>
        <p style="text-align: right;" class="quote">~ Alan Mathison Turing</p>

        <hr>

        <h2 id="pengertian-programming" style="text-align: center; margin-top: 100px; margin-bottom: 50px;">Apa Itu Programming?</h2>
        <img class="img-pengertian" src="assets/img/img-whatis-one.png" alt="Pengertian Programming">

        <div id="myNav" class="overlay">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

            <div class="overlay-content">
                <p class="para-pengertian">Program merupakan suatu urutan logika dengan input dan output tertentu. Program juga dapat berupa kumpulan perintah agar komputer dapat berfungsi secara optimal sesuai dengan kemauan. Program yang disatukan dengan sistem disebut aplikasi, seperti aplikasi web, maupun android. <br><br>Kamu masih bertanya-tanya kan, apa itu programming? Simpel saja, programming adalah sebuah proses untuk membuat program di komputer. Program yang dibuat bisa berupa software, website, aplikasi android, dsb. <br><br>Lalu, mulai dari manakah agar kamu bisa memulai programming? Untuk membuat program tentunya ada beberapa tahapan. Mulai dari tulis menulis, menguji, merevisi, dan mengevaluasi, serta mengujinya lagi sampai program tersebut benar-benar jadi dan sesuai dengan apa yang diinginkan. <br><br><em> Jadi, programming adalah suatu proses atau kegiatan menulis dan menguji (pemrograman) agar program dapat dibuat, dan hasilnya sesuai apa yang diinginkan.</em> </p>
            </div>
        </div>

        <button id="button-pengertian" onclick="openNav()">Pengertian Pemrograman</button>
        <script>
            function openNav() {
              document.getElementById("myNav").style.width = "100%";
            }

            function closeNav() {
              document.getElementById("myNav").style.width = "0%";
            }
        </script>

        <hr>

        <h2 id="jenis-pemograman" style="text-align: center; padding-top: 80px; padding-bottom: 30px;">Jenis-Jenis Pemrograman</h2>

        <div class="tab">
            <button style="font-size: larger;" class="tablinks" onmouseover="openDescription(event, 'web')"><b>Pemrograman Web</b></button>
            <button style="font-size: larger;" class="tablinks" onmouseover="openDescription(event, 'aplikasi')"><b>Pemrograman Aplikasi</b></button>
            <button style="font-size: larger;" class="tablinks" onmouseover="openDescription(event, 'os')"><b>Pemrograman Sistem Operasi</b></button>
            <button style="font-size: larger;" class="tablinks" onmouseover="openDescription(event, 'game')"><b>Pemrograman Game</b></button>
        </div>

        <div id="web" class="tabcontent">
            <img src="assets/img/ngoding-web.jpg" class="img-center">
            <p id="p-tab-content">Sesuai namanya, fungsi utama dari jenis pemrograman ini adalah untuk menyusun sebuah fungsional sebuah website agar menjadi lebih mudah digunakan. Tentunya semua orang sudah pernah membuka website, bukan? Dari sekian jenis website yang pernah Anda buka dan kunjungi, tentunya Anda akan menyadari bahwa setiap website memiliki tampilan yang berbeda-beda.</p>
        </div>

        <div id="aplikasi" class="tabcontent">
            <img src="assets/img/ngoding-app.png" class="img-center">
            <p id="p-tab-content">Jenis pemrograman aplikasi ini akan lebih berfokus pada hasil untuk menyusun sebuah aplikasi. Para developer yang bekerja di bidang pengembangan aplikasi akan selalu berorientasi pada sistem terbaik yang bisa digunakan untuk menciptakan aplikasi dengan daya kegunaan tinggi. Sehingga, produk ciptaan mereka bisa mengatasi beragam pekerjaan ataupun masalah lainnya.</p>
        </div>

        <div id="os" class="tabcontent">
            <img src="assets/img/ngoding-os.png" class="img-center">
            <p id="p-tab-content">Jenis pemrograman yang satu ini bisa dikatakan sebagai komponen yang penting karena digunakan sebagai jenis pemrograman yang membentuk sebuah perangkat komputer. Sistem operasi harus di-instalasi terlebih dahulu pada sebuah perangkat komputer untuk bisa berfungsi dengan baik. Jika tidak ada sistem operasi, maka seluruh perangkat tidak bisa memiliki fungsi apapun.</p>
        </div>

        <div id="game" class="tabcontent">
            <img src="assets/img/ngoding-game.jpg" class="img-center">
            <p id="p-tab-content">Bisa dikatakan, tipe pemrograman ini merupakan jenis pemrograman yang paling sulit. Ini disebabkan kita harus menggabungkan antara desain visual dan juga sintaks untuk menjalankan algoritmanya. Sebuah game harus memiliki alur cerita yang jelas serta menarik terkait bagaimana proses permainan, apa saja karakter yang terlibat, dan apa saja jenis tantangan yang diberikan untuk diselesaikan pemain.</p>
        </div>

        <script>
            function openDescription(evt, cityName) {
                var i, tabcontent, tablinks;
                tabcontent = document.getElementsByClassName("tabcontent");

                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                }

                tablinks = document.getElementsByClassName("tablinks");

                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" active", "");
                }

                document.getElementById(cityName).style.display = "block";
                evt.currentTarget.className += " active";
            }
        </script>
    </body>
</html>