Oct 29, 2023

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.

HTML Page Title

 Naslov stranice (Page Title) je tekst koji se prikazuje u naslovnoj traci web pregledača i koristi se za identifikaciju i opisivanje sadržaja web stranice. Naslov stranice je ključan za SEO (optimizacija za pretraživače) i za korisničko iskustvo, jer pomaže korisnicima i pretraživačima da brže razumeju o čemu se radi na web stranici.

Evo objašnjenja i primera za postavljanje naslova stranice u HTML dokumentu:

Objašnjenje:

<title> oznaka: Naslov stranice se postavlja unutar <title> oznake u <head> delu HTML dokumenta. Sadržaj ove oznake je ono što će se prikazivati u naslovnoj traci web pregledača kada posetilac otvori stranicu.

Primeri:

Postavljanje osnovnog naslova stranice:

<!DOCTYPE html>

<html>

<head>

    <title>Ovo je naslov moje web stranice</title>

</head>

<body>

    <h1>Dobrodošli na moju web stranicu</h1>

    <p>Ovo je primer kako se postavlja naslov stranice.</p>

</body>

</html>

Upotreba dinamičkog naslova na web stranici koristeći JavaScript:

<!DOCTYPE html>

<html>

<head>

    <title id="dinamickiNaslov">Ovo je početni naslov</title>

</head>

<body>

    <h1>Dobrodošli na moju web stranicu</h1>

    <button onclick="promeniNaslov()">Promeni naslov</button>

    <p>Ovo je primer kako se dinamički menja naslov stranice.</p>

    <script>

        function promeniNaslov() {

            document.getElementById("dinamickiNaslov").innerText = "Novi naslov stranice";

        }

    </script>

</body>

</html>

Korišćenje promenljive vrednosti naslova na stranici (na primer, naslov se može učitati iz baze podataka):

<!DOCTYPE html>

<html>

<head>

    <title><?php echo $naslovIzBaze; ?></title>

</head>

<body>

    <h1>Dobrodošli na moju web stranicu</h1>

    <p>Ovo je primer kako se dinamički menja naslov stranice na osnovu promenljive vrednosti.</p>

</body>

</html>

Naslov stranice je važan za SEO jer pomaže pretraživačima da indeksiraju i razumeju sadržaj stranice. Takođe je važan za korisničko iskustvo, jer pruža jasne informacije o tome šta posetioci mogu da očekuju na stranici.