HTML - Webbsidans grundstruktur
HTML (HyperText Markup Language) är grunden för alla webbsidor. Det definierar strukturen och innehållet genom att använda element som kallas "taggar". Tänk på HTML som skelettet som håller ihop din webbsida.
Grundläggande HTML-struktur
Varje HTML-dokument följer en grundläggande struktur:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min webbsida</title>
</head>
<body>
<header>
<h1>Välkommen till min webbsida</h1>
</header>
<main>
<p>Det här är huvudinnehållet.</p>
</main>
<footer>
<p>© 2024 Min webbsida</p>
</footer>
</body>
</html>Viktiga HTML-element
Här är de mest använda HTML-elementen:
Textinnehåll
<h1> - <h6>- Rubriker i olika storlekar<p>- Stycken med text<span>- Inline-text<strong>- Viktig text (fet)<em>- Betonad text (kursiv)
Strukturella element
<header>- Sidans eller sektions huvud<nav>- Navigationsområde<main>- Huvudinnehållet<section>- Tematiska sektioner<article>- Fristående innehåll<footer>- Sidfot
Listor och länkar
<ul>- Onumrerad lista<ol>- Numrerad lista<li>- Listelement<a>- Länkar
Bilder och media
<img>- Bilder<video>- Videor<audio>- Ljudfiler
CSS - Styling och design
CSS (Cascading Style Sheets) är det som gör din webbsida vacker och användbar. Det kontrollerar allt från färger och typsnitt till layout och animationer.
Så länkar du CSS till HTML
Det finns tre sätt att lägga till CSS:
1. Extern CSS-fil (rekommenderas)
<link rel="stylesheet" href="styles.css">2. Intern CSS (i HTML-filens head)
<style>
body {
background-color: #f0f0f0;
}
</style>3. Inline CSS (direkt på element)
<p style="color: red;">Röd text</p>CSS-selektorer
Selektorer bestämmer vilka element som ska stylas:
Grundläggande selektorer
/* Element-selektor */
p {
color: blue;
}
/* Klass-selektor */
.my-class {
font-size: 18px;
}
/* ID-selektor */
#my-id {
background-color: yellow;
}
/* Attribut-selektor */
[href] {
text-decoration: none;
}Viktiga CSS-egenskaper
Typografi
.text-styling {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
color: #333;
text-align: center;
}Box Model
Alla HTML-element har en "låda" runt sig som består av:
.box-model {
width: 300px;
height: 200px;
padding: 20px; /* Inre avstånd */
border: 2px solid #ccc; /* Kant */
margin: 10px; /* Yttre avstånd */
}Bakgrund och färger
.background-styling {
background-color: #f0f0f0;
background-image: url('bg-image.jpg');
background-size: cover;
background-position: center;
}Layout med Flexbox
Flexbox är ett kraftfullt verktyg för att skapa flexibla layouts:
Flexbox-container
.flex-container {
display: flex;
justify-content: space-between; /* Horisontell fördelning */
align-items: center; /* Vertikal centrering */
gap: 20px; /* Avstånd mellan element */
}Flexbox-element
.flex-item {
flex: 1; /* Tar upp tillgängligt utrymme */
flex-shrink: 0; /* Krymper inte */
flex-grow: 2; /* Växer dubbelt så mycket */
}CSS Grid för komplexa layouts
CSS Grid är perfekt för tvådimensionella layouts:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Tre kolumner */
grid-template-rows: auto 1fr auto; /* Tre rader */
gap: 20px;
height: 100vh;
}
.header {
grid-column: 1 / -1; /* Täcker alla kolumner */
}
.sidebar {
grid-row: 2;
}
.main-content {
grid-row: 2;
}
.footer {
grid-column: 1 / -1;
grid-row: 3;
}Responsiv design
Gör din webbsida anpassningsbar för alla skärmstorlekar med media queries:
/* Desktop först */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Tablet */
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
.navigation {
flex-direction: column;
}
}
/* Mobil */
@media (max-width: 480px) {
.container {
padding: 0 10px;
}
.text-large {
font-size: 18px;
}
}CSS-variabler (Custom Properties)
Använd CSS-variabler för att göra din kod mer underhållbar:
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--border-radius: 8px;
}
.button {
background-color: var(--primary-color);
color: white;
border-radius: var(--border-radius);
padding: 10px 20px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: var(--secondary-color);
}Animationer och övergångar
Lägg till liv i din webbsida med CSS-animationer:
Enkla övergångar
.smooth-transition {
transition: all 0.3s ease;
}
.smooth-transition:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}Keyframe-animationer
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.slide-in {
animation: slideIn 0.5s ease-out;
}Bästa praxis
- Semantisk HTML: Använd rätt element för rätt syfte
- Separation of concerns: Håll HTML och CSS separata
- Konsistens: Använd konsekvent namngivning och struktur
- Kommentera: Förklara komplex kod med kommentarer
- Validera: Använd W3C-validatorer för att kontrollera din kod
Vanliga misstag att undvika
- Använda för många div-element istället för semantiska element
- Inline CSS för stora projekt
- Glömma att testa på olika skärmstorlekar
- Använda fasta pixelvärden istället för relativa enheter
- Inte optimera för prestanda
Slutsats
HTML och CSS är grundstenarna i webbutveckling. Med HTML skapar du strukturen och med CSS formar du designen. Genom att behärska dessa teknologier kan du bygga professionella och responsiva webbsidor som fungerar på alla enheter.
Kom ihåg att övning är nyckeln till framgång. Experimentera med olika tekniker och bygg egna projekt för att fördjupa din förståelse.
Vill du lära dig mer? Våra webbutvecklingskurser täcker allt från grunderna till avancerade tekniker.