1 Introduktion till webbsidor

• Vi tittar på några hemsidor.
• Du kan använda _Ctrl-U_ för att titta på koden!
• 🔗 svd
• 🔗 htsit
• 🔗 Hall of fame
• server
• webbläsare
• url
• html
• css
• editor
• 🔗 Webb editorn flem

2 Skapa en enkel sida - en introduktion till HTML

Läraren skapar en enkel sida utifrån dagens inspiration.

• 🔗 Bob Ross - Om att skapanågot.

3 Webbläsaren och editorer

• Notepad++
• Visual Code
• Filsystem - Mappar och filer
• Komprimera filer
• 🔗 Exempel på egen sida
• Gör din egen sida!

4 Terminologi, Header och dess element

• Webb terminologi
• lang="sv"
• header
• <meta charset="utf-8" />
• <title>Välkommen till IT på HTS!</title>
• <link rel="stylesheet" href="styles.css">
• Fortsätt med din sida.

5 För att ge utseende till text.

• Header element: h1, h2, …, h6
• Paragrapher element: p
• Betonad text
• Element att undvika: i, b
• Ny rad: br
• Lista om html element

6 Listor och lnkar

• li - Element
• ol - Ordnat lista
• ul - Punkt lista
• 🖋 Exemple på lista
• a - En länk till en annan sida.

7 Bilder

• img
• src
• 🔗 Exempel
• alt
• 🔗 Exempel
• bildformat såsom png, jpg och gif
• längdenheter såsom px med flera.
• width och height
• “aspect ratio”, se till att inte göra bilden konstig.
• 🔗 Exempel
• Finns också en css egenskap “background-image”

8 Div och span

För att skapa struktur i sidan och i text.

• “div” är för struktur på sidan.
• 🔗 Exempel
• “span” är för struktur i text.
• 🔗 Exempel
• id, för att ge namn till ett element.
• class, för att gruppera element.
• 🔗 Exempel
• Importera en css filen “base.css”,
• 🔗 Exempel

9 Enkel stil på sidan

• Vad är css?

10 Vanliga CSS egenskaper

11 Enkel layoute

12 Repetition och inlämning

• Webb terminologi
• Lista om html element
• Några kommentarer som av olika anledningar inte kunde vara i själva uppgiften.
• 🔗 Filer till inlämningen