Oct 29, 2023

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.

HTML Images (Slike)

Slike (Images) su ključni deo web stranica i koriste se za vizuelni prikaz grafika, fotografija i drugih vizuelnih elemenata. Da biste uključili slike u HTML dokument, koristite <img> oznaku. Evo objašnjenja i primera za uključivanje slika u HTML dokument:

Objašnjenje:

  • <img> oznaka: Oznaka za prikazivanje slika u HTML dokumentima je <img>. Ova oznaka ne zahteva zatvarajući tag, jer ne sadrži unutrašnji sadržaj. Umesto toga, koristi se atribut src za navođenje putanje do slike.
  • Atribut src: Atribut src (source) se koristi za navođenje putanje do slike. Putanja može biti apsolutna (npr. URL) ili relativna (npr. putanja do lokalne slike na serveru). Na primer, <img src="slika.jpg">.
  • Atribut alt: Atribut alt (alternative text) se koristi za pružanje alternativnog teksta koji se prikazuje ako slika ne može da se učita ili za osobe sa oštećenim vidom. Na primer, <img src="slika.jpg" alt="Opis slike">.


Primeri:

Uključivanje slike sa apsolutnom putanjom:

<img src="https://example.com/slike/mojalogo.png" alt="Logo">

Uključivanje slike sa relativnom putanjom (slika se nalazi u istom direktorijumu kao HTML dokument):

<img src="slika.jpg" alt="Opis slike">

Dodavanje širine i visine slike (koristeći width i height atribute) kako bi se prilagodila:

<img src="slika.jpg" alt="Opis slike" width="300" height="200">

Uključivanje slike kao hyperlinka (slika se može kliknuti i vodi na drugu stranicu):

<a href="stranica.html">

    <img src="slika.jpg" alt="Opis slike">

</a>

Slike su ključni deo web dizajna i često se koriste za poboljšanje vizuelnog sadržaja na web stranicama. Važno je pridržavati se pravila autorskih prava i koristiti odgovarajuće formate slika kako bi se obezbedila dobra performansa i ispravan prikaz na različitim uređajima.