AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

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.).

Sintaxă:
<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">
<h2>Constanta</h2>
<p>Constanta este un oras din Romania cu port</p>
</div>

</body>
</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>
Tags: HTML id, exemple, diferenta dintre class si id

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.