HTML 

UNTUK WESBITE KITA

INFO DAN WAWASAN DARI KOPERDI-IND

5WH HTML

#SEMUA itu bisa jadi mudah asal kita mau belajar dan mencobanya 

Apa yang dimaksud dengan HTML?

Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet.


Apa itu HTML dan fungsinya?

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.18 Okt 2023


Apa yang dimaksud dengan HTML dan berikan contohnya?

HTML adalah bahasa pemrograman yang bisa menandai kalimat dengan cetak tebal maupun miring dengan kode tertentu. Selain itu, bahasa markup ini juga bisa difungsikan untuk menandai bagian website. Contohnya seperti bagian navigation, main, footer, dan header.

Apa kegunaan dari HTML dalam pengembangan web?

Mengarahkan Pengguna ke Website lain (Hypertext)

Tag HTML juga memiliki fungsi untuk mengarahkan pengguna ke halaman atau website lain melalui sebuah teks. Fungsi ini disebut juga dengan hypertext yang membuat pengunjung mudah mendapatkan informasi yang berhubungan dengan halaman web yang sedang dibaca.


Bisa juga membuat Jam digital dan hitung mundur dengan HTML yang kita tempelkan di website kita, atau juga running tex / tex berjalan

Bagaimana cara membuat HTML 

Cara paling mudah adalah dengan buka browser lalu ketik HTML jam digital / hitung mundur atau HTML Running Text / Tek berjalan, maka bapak/ibu akan diberikan informasinya seperti contoh dibawah ini : 

Note :

Nanti tinggal copy pastekan di website kita .. maka jadi apa yang kita inginkan 

Beberapa Contoh HTML dan Hasilnya :

HTML HITUNG MUNDUR :  tinggal copy paste  saja

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

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

    <title>Hitung Mundur WhatsApp</title>

    <style>

        body {

            font-family: 'Arial', sans-serif;

            text-align: center;

            margin: 10px;

        }

        #countdown {

            font-size: 5em;

            color: #0000FF;

        }

    </style>

</head>

<body>


<div id="countdown"></div>


<script>

    // Set the date we're counting down to

    var countDownDate = new Date("Dec 31, 2023 00:00:00").getTime();


    // Update the countdown every 1 second

    var x = setInterval(function() {


        // Get the current date and time

        var now = new Date().getTime();


        // Calculate the remaining time

        var distance = countDownDate - now;


        // Calculate days, hours, minutes, and seconds

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));

        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

        var seconds = Math.floor((distance % (1000 * 60)) / 1000);


        // Display the countdown

        document.getElementById("countdown").innerHTML = days + "d " + hours + "h "

        + minutes + "m " + seconds + "s ";


        // If the countdown is over, display a message

        if (distance < 0) {

            clearInterval(x);

            document.getElementById("countdown").innerHTML = "Waktu hitung mundur telah berakhir!";

        }

    }, 1000);

</script>


</body>

</html>

HTML : RUNNING TEXT : Tinggal copy paste saja 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Running Text Example</title>

    <style>

        /* Tambahkan gaya CSS sesuai kebutuhan Anda */

        .running-text {

            white-space: nowrap;

            overflow: hidden;

            animation: marquee 10s linear infinite;

        }


        @keyframes marquee {

            0% { transform: translateX(100%); }

            100% { transform: translateX(-100%); }

        }

    </style>

</head>

<body>

    <div class="running-text">

        <!-- Teks yang bergerak akan ditambahkan di sini -->

        " Tiada hari tanpa Prestasi, tiada Prestasi tanpa Inovasi "

    </div>

</body>

</html>

SILAHKAN MENCOBA Sendiri, pasti bapak/ibu bisa

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Jam Digital</title>

    <style>

        .digital-clock {

            font-family: 'Arial', sans-serif;

            font-size: 2em;

            text-align: center;

            color: #ffff00; 

            margin-top: 10px;

        }

    </style>

</head>

<body>

    <div class="digital-clock" id="digitalClock"></div>


    <script>

        function updateClock() {

            var now = new Date();

            var hours = now.getHours();

            var minutes = now.getMinutes();

            var seconds = now.getSeconds();


            hours = hours < 10 ? '0' + hours : hours;

            minutes = minutes < 10 ? '0' + minutes : minutes;

            seconds = seconds < 10 ? '0' + seconds : seconds;


            var timeString = hours + ':' + minutes + ':' + seconds;


            document.getElementById('digitalClock').innerText = timeString;

        }


        setInterval(updateClock, 1000); // Update setiap 1 detik

    </script>

</body>

</html>

Note :

Sekolah Bapak/Ibu Guru Hebat belum punya website seperti contoh ini www.smpn1maron.sch.id ... Ayo Sharing dengan kami KOPERDI-IND ... insya allah sekolah bapak/ibu insya allah akan mempunyai website sendiri yang elegan, simpel dan mudah di kelola secara mandiri ... 

https://www.niagahoster.co.id/blog/cara-membuat-google-sites/

https://www.niagahoster.co.id/blog/menghubungkan-custom-domain-ke-google-sites/ 

https://bit.ly/AsetMedsos   ....