# Stara med webben
```
author: krm
created: 2020-08-26
image: /image/courses/house.png
status:alpha
icon: 🏡
```

Om att skapa en enkel hemsida


# 1. Introduktion till webbsidor

- Vi tittar på några hemsidor.
- Du kan använda _Ctrl-U_ för att titta på koden!
- 🔗 [svd](https://svd.se)
- 🔗 [htsit](https://htsit.se)
- 🔗 [Hall of fame](https://htsit.se/h/)
- server
- webbläsare
- url
- html
- css
- editor
- 🔗 [Webb editorn flem](https://flems.io)

# 2. Skapa en enkel sida - en introduktion till HTML

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

- 🔗 [Bob Ross](https://www.youtube.com/watch?v=lLWEXRAnQd0) - Om att skapa
  något.

# 3. Webbläsaren och editorer

- Notepad++
- Visual Code
- Filsystem - Mappar och filer
- Komprimera filer
- 🔗
  [Exempel på egen sida](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8AQgAiAeQDCAFQCaABQCiAAnZQAfAB06gtcqgM6AcwC8m8ADdzWnVggMkEAE43lb5YObwGy2FgZOkPBmIACu8CQAtAAc5soA9K7ugvBk8DDqAGoAJ1AA1ty4zHTKqVBQygCS0soADgCnygAS0gDKwoLxqekQNp12Ds59AEbcSACefVgAjMpg8OMwITxQ3E6oTsjW-dN9terK2u4ewy5HyfNOvEbqnZfXffH72oLcGuceUGS38V+PbzYXs8Sm5BD4sJsSCFtvEGOoMC8noCdGRcEY5k5YNCQKoIGQjDhscoAO5kJDwLDYxLaRGjCaPNTqTiQGAIMi8KjoABMAGZUAB2EAAX0I9CYLHQGAAVlRiDw+BABOhhaKQIxmKwMLAwLKuLx+PBWMKALpCoA)
- Gör din egen sida!

# 4. Terminologi, Header och dess element

- 📄 [Webb terminologi](https://bit.ly/2ENPVEZ)
- 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](https://bit.ly/3hZPeGK)

# 6. Listor och lnkar

- li - Element
- ol - Ordnat lista
- ul - Punkt lista
- 🖋
  [Exemple på lista](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8WAIwA+AAQAxCLglgGAawgAnCQCsGAcwnwAnrGVrucwQHpRYgDp1BAVyjW6EiYKhlJAEQbxuK1a5m7k4ubh4SAMp0ACdQUAwS0BAAbgHmwTahwZExcQlJqWrpHpmu2VGx8YkwhYEZzmXhFXnVKWlBJbZmDmKckDAIZLxU6ABMqCIArCAAvoT0TCzoGOpUxDx8EALos-MgjMysGLBga1y8-PCsDhLApe5g8AC0j3owT-oADhCo8gCOdgY-gA3DYZn0koNhqwRKhRtMZgBdGZAA)
- a - En länk till en annan sida.

# 7. Bilder

- img
- src
- 🔗
  [Exempel](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8ZXAHMABGABOsALwAdEDngAHMKgD0GnGDLwMkDQGsNIhqIgaAVgwBuDMLClkV8APoAjBkgsYVdUUVxDQA+TkgYBDJeKnQABlQAVkSQAF9CeiYWdAwrKmIePggBdDSMkEZmVgxYMHyuXn54VjSAXVSgA)
- alt
- 🔗
  [Exempel](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8ZXAHMABGABOsALwAdEDngAHMKgD0GnGDLwMkDQGsNIhqIgaAVgwBuDMLClkV8APoAjBkgsZRZEkVxBih4BRAAKQBlcShuUW5FDQA+TkgYBDJeKnQABlQANgBOEABfQnomFnQMKypiHj4IAXQyipBGZlYMWDB6rl5+eFYygF1SoA)
- 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](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8ZXAHMABGABOsALwAdEDngAHMKgD0GnGDLwMkDQGsNIhqIgaAVgwBuDMLClkV8APoAjBkgsYVdUUVxBih4BRAAKQBlcShuUW4ggHcyJHgsWQBWAAZxDQA+eTphMUkZcOU1TW14XX1DEzMLazsHJxd3Lx8IPwCgkLDFaNj4xJBxLAgyURxZACZs3IKikolpOUVK9S0dPQNLRtxzSxt7R2dXT29ff0DxgfDhuITk1PSs3Mnp2YWl-JAAL6EehMFjoDBWKjEHh8CACdCA4EgRjMVgYWBgKFcXj8eCsQEAXQBQA)
- 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](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8SMgDcAfAB06AAhlYIAK2mCA9CIkqNM1VLrCxeuUgCnK9Yc6QYCMryroAbKgCsIAL4Bdd0A)
- “span” är för struktur i text.
- 🔗
  [Exempel](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8ABwB8AHToACKVggArKcICnMteqlIyAcwCEkwQHoxBk9NkKlqwWGEM6orXqO37EukbGdIMBGV5U6AAsqACMQSAAvgC6kUA)
- id, för att ge namn till ett element.
- class, för att gruppera element.
- 🔗
  [Exempel](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8SMgDcABGSQBeADpde8BmToQATvIB8suuPGCADtt36wBhrthQGYMHJBrkWrBABWggPRmLm8QYCnpuZ0miIA5gCEnt4hOnqeRjrCYuJWNnbyAEbcAB7ijkjy4h7GyRJS9tZg8EVptvbZOUUlSR4iopqckDAIZLxU6ACsqACMgyAAvgC6E0A)
- Importera en css filen “base.css”,
- 🔗
  [Exempel](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANOLAE4D2UBqA2gAyF0C6xAZgJYxho2gB2AQ1wQ0mHPiIhY5PolmiAPEnYA3AATskAXgA6UmfAHs+EUnoB8OvgoAOlvmrUKwNgQ9hQBYMLpClkFlgQAFYKAPQubuZqNgCnTpF85soA5gCE4Yn2juF2VjnK6h5ePnr+SBbhhdlOhRraep5g8Hpqxd6+AEbkAB6VYdX5tar1vk0tIG1NpSDdPWrl-YPWA6rmkpAwCOwy3OgA7KgAbAC0dKh0IAC+LCBQxgDWe7wggsKinV4QGLDekgCupGoIBw8BsYFQYTCODA7HgGEgYVYYU+kB+f2I8AAnjYROhmliYNcmFcgA)

# 9. Enkel stil på sidan

- Vad är css?

# 10. Vanliga CSS egenskaper

# 11. Enkel layoute

# 12. Repetition och inlämning

- 📄 [Webb terminologi](https://bit.ly/2ENPVEZ)
- 📄 [Lista om html element](https://bit.ly/3hZPeGK)
- Några kommentarer som av olika anledningar inte kunde vara i själva uppgiften.
- 🔗 [Filer till inlämningen](https://htsit.se/f/submission.zip)