Bliv sponser til 500.dk


Her er det <div> på 100 måder
Style skal ligge mellem <head> og </head>

<div style="background-color:#FF0000;">
<div style="background-color:#000;color:#FFF;text-align:center;">

------------- kode 1 -----------

Title kun på link title kun på link title kun på linktitle kun på link title kun på link Her er et link title kun på link

<style>
a:link{color: #FFFFFF;text-decoration: none;}
a:visited{color: #FFFFFF;text-decoration: none;}
div {
border: 0px solid black;
padding: 10px;
width: 200px;
height: 140px;
text-align: justify;
background-color: #cc0066;}
</style>

<body><div>Her er en tekst<a href="div.php" title="Her er et link">Her
er et link</a></div></body>

------------- kode 1 slut -----------

------------- kode 2 -----------

Title på det hele title på det hele title på det hele title på det hele title på det hele title på det hele title på det hele Her er et link title på det hele

<style>
a:link{color: #FFFFFF;text-decoration: none;}
a:visited{color: #FFFFFF;text-decoration: none;}
div {
border: 0px solid black;
padding: 10px;
width: 200px;
height: 140px;
text-align: justify;
background-color: #cc0066;}
</style>

<body><div title="Her er et link">Her er en tekst<a href="div.php">Her
er et link</a></div></body>
------------- kode 2 slut -----------

------------- kode 3 -----------

Title på det hele title på det hele title på det hele title på det hele title på det hele title på det hele title på det hele Her er et link title på det hele

<style>
a:link{color: #FFFFFF;text-decoration: none;}
a:visited{color: #FFFFFF;text-decoration: none;}
div {
border: 0px solid black;
padding: 10px;
width: 200px;
height: 140px;
text-align: justify;
background-color: #cc0066;}
</style>

<body><div title="Her er et link">Her er en tekst<a href="div.php">Her
er et link</a></div></body>
------------- kode 3 slut -----------

------------- kode 4 -----------

<div> Overskrift

Her er noget tekst!
Html siden


Her er der noget tekst!


<div style="background-color:#FF0000;">
<div style="background-color:#000;color:#FFF;text-align:center;">
<h1>&lt;div&gt; Overskrift</h1>
</div>
<div>
<p>Her er noget tekst!<br/><em><a href="https://www.500.dk/">Html siden</a></em></p>
<hr/>

<p>Her er der noget tekst!</p>
</div>
</div>

------------- kode 4 slut -----------

------------- kode 5 -----------

Her kalder vi et div element frem

Det her er et div element.

Tryk på knappen

Her har vi et < p > element se det blive byttet ud med et div element



<h3>Her kalder vi et div element frem</h3>

<div id="myDIV">Det her er et div element.</div>

<p>Tryk p&aring; knappen</p>

<button onclick="myFunction()">Kald div element frem.</button>

<p id="demo">Her har vi et < p > element se det blive byttet ud med et div element</p>

<script>
function myFunction() {
var x = document.getElementById("myDIV").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>



------------- kode 5 slut -----------

Her er et <div> element med tekst letter-spacing
------------- kode 6 -----------

Her er det letter-spacing det vil sige afstand på bogstaver m.capitalize

div.c {text-transform: capitalize;letter-spacing: 3px;}
<div class = "c"> Her er det letter-spacing det vil sige afstand på bogstaver m.capitalize</div>

Her er det letter-spacing det vil sige afstand på bogstaver m. uppercase


div.d {text-transform: uppercase;letter-spacing: 3px;}
<div class = "d"> Her er det letter-spacing det vil sige afstand på bogstaver m. uppercase</div>


Her er det letter-spacing det vil sige afstand på bogstaver m. lowercase


div.e {text-transform: lowercase;letter-spacing: 1px;}
<div class = "e"> Her er det letter-spacing det vil sige afstand på bogstaver m. lowercase</div>



Her er det letter-spacing det vil sige afstand på bogstaver m. lowercase og justify


div.e {text-transform: lowercase;letter-spacing: 1px;}
<div class = "f"> Her er det letter-spacing det vil sige afstand på bogstaver m. lowercase og justify</div>

------------- kode 6 slut -----------
<div> Progress bar
------------- kode 7 -----------

progress tag:
meter tag: 55%
75%

<div>
progress tag: <progress title="55%"value="55" max="100"></progress><br />
meter tag: <meter title="55%"value="0.55">55%</meter><br/>
<meter title="75%"value="75" max="100">75%</meter><br />
</div>

------------- kode 7 slut -----------
------------- kode 8 -----------

Her er tekst i center

Her er tekst i center


div.container4 {
height: 10em;
position: relative }
div.container4 p {
margin: 0;
background: #hh;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }

<div class=container4>
<p>Her er tekst i center</p>
</div>
------------- kode 8 slut -----------