Oct 29, 2023

HTML JavaScript

JavaScript se koristi za dodavanje dinamičkog ponašanja na web stranici. Na primer, možete koristiti JavaScript za validaciju forme, animaciju, interaktivne elemente i još mnogo toga. Evo osnovnog primera koji koristi JavaScript za prikaz poruke korisniku:

<!DOCTYPE html>

<html>

<head>

    <title>Moj Prvi HTML i JavaScript Primer</title>

</head>

<body>

    <h1>Kliknite na dugme</h1>

    <button id="mojeDugme">Klikni me</button>

    <p id="poruka"></p>


    <script>

        // JavaScript kod

        document.getElementById("mojeDugme").addEventListener("click", function() {

            document.getElementById("poruka").innerText = "Hvala što ste kliknuli!";

        });

    </script>

</body>

</html>

U ovom primeru, JavaScript se koristi da dodamo "slušalac događaja" na dugme. Kada korisnik klikne na dugme, JavaScript reaguje i menja sadržaj paraagrafa sa ID-om "poruka".

Kada kombinujete HTML i JavaScript, možete stvoriti interaktivne i dinamičke web stranice koje omogućavaju korisnicima da komuniciraju sa sadržajem i pruže bogato korisničko iskustvo.

HTML Iframe

<iframe> (Inline Frame) je HTML oznaka koja se koristi za uključivanje druge web stranice ili sadržaja unutar trenutne web stranice. To omogućava ugnježdavanje sadržaja sa drugih stranica unutar vaše stranice. Evo objašnjenja i primera za korišćenje <iframe>:

Objašnjenje:

<iframe> oznaka: Oznaka <iframe> se koristi za uključivanje sadržaja sa druge web stranice ili za prikazivanje sadržaja sa različitih izvora unutar trenutne stranice.

Atributi <iframe> oznake: Ključni atribut za <iframe> oznaku je src, koji definiše izvor (URL) stranice koja će se ugnježdavati. Takođe, možete koristiti druge atribute za postavljanje visine, širine, okvira, i druge osobine.

Primeri:

Uključivanje druge web stranice unutar trenutne stranice:

<iframe src="https://www.example.com"></iframe>

Postavljanje visine i širine <iframe> elementa:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Korišćenje <iframe> za ugnježdavanje Google Mape:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.311408284573!2d-75.1642556857998!3d39.95545347092458!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c6c9d50a31ddc9%3A0x8104c1c46b3e56b9!2sIndependence%20Hall!5e0!3m2!1sen!2sus!4v1636574969032!5m2!1sen!2sus" width="600" height="400"></iframe>

Korišćenje <iframe> za uključivanje YouTube video zapisa:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Važno je napomenuti da <iframe> može predstavljati sigurnosni rizik, posebno ako se uključuje sadržaj sa nepouzdanih izvora. Takođe, prilagodite visinu i širinu <iframe> elementa kako bi odgovarala ugnježdenom sadržaju i izbegavajte promociju sadržaja koji krši autorska prava ili druga pravila.

HTML ID atribut

 ID atribut (Identifier attribute) se koristi za jedinstveno identifikovanje određenog HTML elementa na web stranici. Svaki ID atribut mora biti jedinstven unutar HTML dokumenta, što znači da ne možete dodeliti isti ID više od jednom elementu. ID atribut je često korišćen za ciljanje specifičnih elemenata CSS-om ili za manipulaciju elementima putem JavaScript-a. Evo objašnjenja i primera za ID atribut:

Objašnjenje:

ID atribut: ID atribut se dodeljuje HTML elementima koristeći id atribut, na primer: <div id="mojElement">. Vrednost ID atributa može sadržati slova, brojeve i crte. Obeležje ID atributa treba da bude jedinstveno unutar HTML dokumenta.

Primeri:

Korišćenje ID atributa za ciljanje elementa sa CSS-om:

<!DOCTYPE html>

<html>

<head>

    <style>

        #mojElement {

            color: red;

        }

    </style>

</head>

<body>

    <p>Ovo je <span id="mojElement">crveni</span> tekst.</p>

</body>

</html>

Korišćenje ID atributa za manipulaciju elementa putem JavaScript-a:

<!DOCTYPE html>

<html>

<head>

    <script>

        function promeniTekst() {

            var element = document.getElementById("mojElement");

            if (element) {

                element.innerText = "Promenjen tekst";

            }

        }

    </script>

</head>

<body>

    <p>Ovo je <span id="mojElement">originalni</span> tekst.</p>

    <button onclick="promeniTekst()">Promeni tekst</button>

</body>

</html>

Upotreba ID atributa za navigaciju na određeni deo stranice:

<!DOCTYPE html>

<html>

<head>

    <style>

        #sekcija1 {

            background-color: lightblue;

        }

        #sekcija2 {

            background-color: lightgreen;

        }

    </style>

</head>

<body>

    <nav>

        <ul>

            <li><a href="#sekcija1">Sekcija 1</a></li>

            <li><a href="#sekcija2">Sekcija 2</a></li>

        </ul>

    </nav>

    <section id="sekcija1">

        <h2>Sekcija 1</h2>

        <p>Ovo je prva sekcija.</p>

    </section>

    <section id="sekcija2">

        <h2>Sekcija 2</h2>

        <p>Ovo je druga sekcija.</p>

    </section>

</body>

</html>

ID atribut je koristan za označavanje i identifikovanje specifičnih elemenata na stranici, omogućava ciljanje tih elemenata putem CSS-a ili JavaScript-a, kao i navigaciju na određene delove stranice. Važno je koristiti jedinstvene vrednosti za ID atribut kako biste izbegli konflikte.