Här är ett avsnitt med olika exempel på HTML-strukturer för att demonstrera olika typer av innehåll och layouter du kan skapa med HTML.
Exempel 1: Enkel artikel med bild och text:
<!DOCTYPE html>
<html>
<head>
<title>Artikel</title>
</head>
<body>
<article>
<h1>Min Resa Till Bergen</h1>
<img src="berg.jpg" alt="Bergsbild">
<p>Under sommaren besökte jag de majestätiska bergen i Bergen. Det var en fantastisk upplevelse...</p>
</article>
</body>
</html>
Exempel 2: Produktlista med tabell:
<!DOCTYPE html>
<html>
<head>
<title>Produkter</title>
</head>
<body>
<h1>Vår Produktsortiment</h1>
<table>
<tr>
<th>Produkt</th>
<th>Pris</th>
</tr>
<tr>
<td>Skor</td>
<td>499 kr</td>
</tr>
<tr>
<td>T-shirt</td>
<td>199 kr</td>
</tr>
<tr>
<td>Byxor</td>
<td>349 kr</td>
</tr>
</table>
</body>
</html>
Exempel 3: FAQ-lista med ordningslistor:
<!DOCTYPE html>
<html>
<head>
<title>Vanliga Frågor</title>
</head>
<body>
<h1>Vanliga Frågor</h1>
<ol>
<li>
<h3>Hur gör jag en beställning?</h3>
<p>För att göra en beställning, besök vår webbplats och...</p>
</li>
<li>
<h3>Kan jag returnera en vara?</h3>
<p>Ja, vi accepterar returer inom 30 dagar från köpdatumet...</p>
</li>
<li>
<h3>Vilka betalningsmetoder accepterar ni?</h3>
<p>Vi accepterar kreditkort (Visa, Mastercard) och PayPal...</p>
</li>
</ol>
</body>
</html>
Exempel 4: Inbäddad video med länkar:
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<h1>Populära Videor</h1>
<a href="video1.html">Kattungelekar</a>
<a href="video2.html">Resa till Thailand</a>
<a href="video3.html">Matlagningstips</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Dessa exempel visar olika typer av innehåll och layouter du kan skapa med HTML. Genom att kombinera dessa strukturer med CSS kan du ytterligare anpassa och styla dina webbsidor enligt dina önskemål.
| « Tillbaka till startsidan | Nästa: CSS » |