HTML ID
Utilizarea etichetei id:
Eticheta ID specifică un id unic pentru un element HTML (valoarea trebuie să fie unică în documentul HTML).
Valoarea ID poate fi folosită de CSS și JavaScript pentru a efectua anumite sarcini pentru elementul cu valoarea specifică de id.
În CSS, pentru a selecta un element cu un id specific, scrieți un caracter hashtag (#), urmat de id-ul elementului:
Notă: Valoarea ID este sensibilă la litere mari și mici.
Notă: valoarea ID trebuie să conțină cel puțin un caracter și să nu conțină spațiul alb (spații, file etc.).
<element id = "denumirea id">.
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Utilizarea etichetei id</title> <style>
#titlulMeu
{
background-color: yellow;
color: maroon;
padding: 22px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="titlulMeu">Titlul unei descrieri</h1>
</body>
</html>
Diferența dintre etichetele class și ID
Un element HTML poate avea doar un singur id care aparține acelui element, în timp ce o eticheta class poate fi utilizat de mai multe elemente:
Exemplu 2:
<!DOCTYPE html>
<html>
<head>
<title>Diferența dintre etichetele class și ID</title>
<style>
#titlulMeu
{
background-color: yellow;
color: maroon;
padding: 22px;
text-align: center;
}
.orase
{
background-color: navy;
color: yellow;
margin: 18px;
padding: 18px;
}
</style>
</head>
<body>
<h1 id="titlulMeu">Titlul unei descrieri</h1>
<div class="orase">
<h2>Bucuresti</h2>
<p>Bucuresti este capitala Romaniei</p>
</div><div class="orase">
<h2>Sinaia</h2>
<p>Sinaia este o statiune turistica din Romania</p>
</div><div class="orase">
</body>
<h2>Constanta</h2>
<p>Constanta este un oras din Romania cu port</p>
</div>
</html>
Utilizarea etichetei id în JavaScript
JavaScript poate accesa un element cu un id specificat folosind metoda getElementById ():
Exemplu 3:
<!DOCTYPE html>
<html>
<head>
<title>Utilizarea etichetei id în JavaScript</title>
<style>
#titlulMeu
{
background-color: yellow;
color: maroon;
padding: 22px;
text-align: center;
size: 26px;
}
</style>
</head>
<body>
<h2>Folosirea etichetei id in JavaScript</h2>
<p>JavaScript poate accesa un element cu
un id specificat folosind metoda getElementById ()</p>
<h1 id="titlulMeu">Hello World! </h1>
<button onclick="displayResult()">Schimba textul</button>
<script>
function displayResult() {
document.getElementById("titlulMeu").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.