# 🦉 Skapa en post
```
author: krm
created: 2025-04-22
status: alpha
```

# 👁️‍🗨️ Om detta avsnitt

Du ska göra en bra post för instagram eller liknade. 

# 🏷 Namn som används


- 🏷 **NAME** Namnet på posten som du vill skapa
- 🏷 **X** Formatet på bild filen.

# 1. Ladda ned exempel projektet.

Ladda ned denna fil:

- [https://htsit.se/f/post.zip](https://htsit.se/f/post.zip)

# 2. Packa upp alla filer!

Detta kallas ibland för att extrahera.

# 3. Titta igenom de exemplena som redan finns.

Titta på all kod och alla filer. Du måste inte förstå allt, men försäk 
få en överblick.

# 4. Fundera igenom något du skulle vilja lägga upp på Instagram eller liknande. 

Du kan gärna göra en skissa.

# 5. Kom på ett namn, gärna ett ord för du ska döpa filer till detta namn sedan.

Detta namn kommer du använda på flera ställen.

# 6. Kom på en text som du vill ha på bilden

Tänk på att den inte får vara för lång.

# 7. Hitta en bild som du har rätt att använda.

Ska du lägga ut en bild behöver du ha rätt att använda den. Du kah 
hitta bilder som du har rätt att anvädna här:

- + [Wikimedia common](https://commons.wikimedia.org/wiki/Main_Page)

# 8. Ladda ned den till "image" mappen

Döp om bilden så den hetter NAME.

Det gör att den är lätt att skapa en sökväg till.

# 9. Om du inte själv har copyright på den så måste du lägga till en länk till "COPYRIGTHS.md" filen.

Du behöver inte skriva exapt på samma sätt som de andra bilderna som 
finns i dokumentet. Men det räcker med att du lägger till en llänk till 
den.

# 10. Kopiera filen "cat.html" till "NAME.html"

Du ska nu skapa din egen variant av filen.

```
cp cat.html NAME.html
```

Kommandot ovan fungera på *UNIX system sås som linux och finns med här 
som en referens.

# 11. Gå in i din html fil och ändra texten till det du har tänkt.

Du hittar tyexten i ett h1-element.

```html
<h1> Välkommen till IT! </h1>
```


# 12. Ändra länken till den externa css filen. 

Du ska anävnda en extern css fil. Ändra sökvägen i fillen till 
"./css/NAME.css".

```html
<link rel="stylesheet" href="./css/cat.css" />
```

# 13. Gå in i "css" mappen och kopier filen "cat.css" till "NAME.css"

Se till att vi har en egen css fil för din poster.

```
cp cat.css NAME.css
```

Vi bör alltid använda en extern css fil.

# 14. Gå in i din css-fil och ändra bilden.

Ändra sökväg "../image/NAME.X"

```css
background-image: url("../image/cat.jpg");
```

# 15. Gå in i din css-fil och ändra texten så den blir som du vill ha den. Du kan:

- Ändra text egenskaper
- Ändra font, ta gärna en web font som i tidigare övning.
- Ändra font egenskaper såsom storlek och font vikt.
- Du får gärna ha en webbfont.

# 16. ✔️ Öppna html filen i en webbläsare. 

Gör gärna ändringa enligt punkt 15 tills det blir bra.

Du borde nu ha en bra poster som du kan använda på social medier.