Introduktion

Ta kontroll över stilen

Bilder på rätt plats

Förstärk användbarhet och tillgänglighet på rätt sätt

presentera med ljud och video

Gå vidare själv

<span class="videotext-meta-versioner">

Inspelad i Wordpress 4.9.

</span>

<div id="course_description">
<h2>HTML handlar om att skapa struktur (2018)</h2>
Lär dig ändra stil och struktur på din blogg eller webbsida med HTML och CSS. Utseende och placering av bilder, text, video och ljudspelare kan ändras i det oändliga. Med smart struktur skapar du en bra grund som visuellt slår igenom på alla dina sidor.

I kursen lär du dig stegvis att ta full kontroll på avstånd mellan bild och text, utseende på länkar, bildtexter och typsnitt. En praktisk och exempelrik kurs för dig som vill lära dig lägga till och ändra i befintlig HTML- och CSSkod.

Poängen med kursen är inte att du ska lära dig att göra hemsidor från grunden, utan du ska kunna ändra och fixa i mallar, så att det blir som du vill ha det!

<strong>MAJ 2021:</strong> Den här kursen är nu <strong>gratis för alla att se</strong>. Den är en del av <a href="https://moderskeppet.se/skrotat/">Moderskeppet återvinning</a> – kurser i ämnen vi inte valt att fördjupa Moderskeppet inom. Som du därför får se utan kostnad.

</div>

<div id="course_extra" class="course_menu"><h2>Stödmaterial</h2>

<a href="https://some.moderskeppet.se/resurs/sa-skriver-du-masvingar/">Så skriver du måsvingar</a>

<a href="https://codepen.io/pen/">Codepen</a>

<a href="https://cdnstream.moderskeppet.se/html-och-css-wordpress/Extra/arbetsmaterial_grunder_html_css.zip">Övningsfiler</a> (ZIP, 45 MB)

</div>

<div id="course_larare"><h2>Om läraren</h2>

<img class="alignright wp-image-26307" src="https://moderskeppet.se/wp-content/uploads/2019/05/Therese_sv_kv.jpg" alt="Therese Forsberg" width="110" height="110" />Therese Enlund är webbutvecklaren och vetenskapsjournalisten som älskar ljudproduktion och att programmera. <a href="https://moderskeppet.se/om-larare/therese-forsberg/">Läs mer om Therese här</a>.

</div>

<p><h2>HTML handlar om att skapa struktur (2018)</h2></p><p>Lär dig ändra stil och struktur på din blogg eller webbsida med HTML och CSS. Utseende och placering av bilder, text, video och ljudspelare kan ändras i det oändliga. Med smart struktur skapar du en bra grund som visuellt slår igenom på alla dina sidor.</p><p>I kursen lär du dig stegvis att ta full kontroll på avstånd mellan bild och text, utseende på länkar, bildtexter och typsnitt. En praktisk och exempelrik kurs för dig som vill lära dig lägga till och ändra i befintlig HTML- och CSSkod.</p><p>Poängen med kursen är inte att du ska lära dig att göra hemsidor från grunden, utan du ska kunna ändra och fixa i mallar, så att det blir som du vill ha det!</p><p><strong>MAJ 2021:</strong> Den här kursen är nu <strong>gratis för alla att se</strong>. Den är en del av <a href="https://moderskeppet.se/skrotat/">Moderskeppet återvinning</a> – kurser i ämnen vi inte valt att fördjupa Moderskeppet inom. Som du därför får se utan kostnad.</p>

I den här kursen lär du dig grunderna i css och html, för att kunna ändra på din egen blogg eller hemsida på till exempel Wordpress.

Välkommen till kursen HTML och CSS i Wordpress

Välkommen

Ordning och reda i html, stil med css på textavsnitt, bilder, video och ljud. Det är några av sakerna som tas upp i kursen.

Kursens upplägg – HTML och CSS i Wordpress

Kursens upplägg

Html handlar om att skapa struktur för ditt innehåll som du vill presentera. Det är där ditt webbäventyr börjar.

Gör en bra struktur – HTML och CSS i Wordpress

Gör en bra struktur

Bli kvitt dubbla mellanslag och oönskade radbrytningar enkelt och snabbt.

Kopiera in text – HTML och CSS i Wordpress

Kopiera in text på rätt sätt

Css ger webben färg och form. Du lär dig komma åt dina html element och sätta färg på din rubrik.

Rubrik med färg – HTML och CSS i Wordpress

Rubrik med färg från bilden

Typsnitt kan vara roliga, strikta eller eleganta. Här lär du dig sätta form på din text med typsnitt från google fonts.

Välja eget typsnitt – HTML och CSS i Wordpress

Välja ett eget typsnitt

Hitta namn på html element och se hur sidan ser ut i mobilen med inspektorn.

Använd inspektorn – HTML och CSS i Wordpress

Använd inspektorn

Ändra form och design genom att flytta textblock där du vill ha dem med hjälp av float.

Kurs: HTML och CSS i Wordpress. Ändra form och design genom att flytta textblock där du vill ha dem med hjälp av float.

Högerställ ingredienslistan

Kurs: HTML och CSS i Wordpress. Öva på rubriker och listor i Codepen.

Sammanfattning grunderna 

Bilder har blivit en viktig del av berättandet på webben. Html elementet för att lägga in bilder introduceras.

Berätta med bilder – HTML och CSS i Wordpress

Berätta med bilder

Hur du hittar adressen till bilden i Wordpress som behövs för att bildelementet ska fungera.

Kurs: HTML och CSS i Wordpress. Hur du hittar adressen till bilden i Wordpress som behövs för att bildelementet ska fungera.

Lägg in bilder och bildtext 

Positionering är roligt och klurigt här ges några verktyg för grundläggande positionering.

Bilden bredvid text – HTML och CSS i Wordpress

Bilden bredvid text

Alla element på webben bor i en låda i enlighet med boxmodellen. Här lär du dig få rätt avstånd på lådorna. Rundade kanter på ramar och bilder lär du dig också.

Kurs: HTML och CSS i Wordpress. Alla element på webben bor i en låda i enlighet med boxmodellen. Här lär du dig få rätt avstånd på lådorna. 

Avstånd mellan bild och text

Bilder med genomskinlighet, som till exempel frilagda bilder, kräver rätt filformat.

Kurs: HTML och CSS i Wordpress. Bilder med genomskinlighet, som till exempel frilagda bilder, kräver rätt filformat.

Rätt filformat för frilagda bilder

Hantera bakgrunder på ett klurigt sätt så de automatiskt anpassas till innehållet.

Bilder i bakgrunden – HTML och CSS i Wordpress

Bilder i bakgrunden

En god struktur sparar tid och arbete. Här ser du hur det kan löna sig när ett nytt inlägg skapas.

Kurs: HTML och CSS i Wordpress. En god struktur sparar tid och arbete. Här ser du hur det kan löna sig när ett nytt inlägg skapas.

Fler inlägg med samma stil

Öva på att centrera vad som helst mitt på sidan på ett enkelt sätt som alltid fungerar i Codepen.

Kurs: HTML och CSS i Wordpress. Öva på att centrera vad som helst mitt på sidan på ett enkelt sätt som alltid fungerar i Codepen.

Sammanfattning om positionering

Prova på att använda webben utan synen till hjälp med skärmläsare. Det ger insikter om vikten av att underlätta för männiksor med nedsatt synförmåga.

Kurs: HTML och CSS i Wordpress. Prova på att använda webben utan synen till hjälp med skärmläsare. 

Testa på skärmläsaren

Förstärk orden med tillgänglighet i åtanke. Här lär du dig htmlelementen em och strong.

Kurs: HTML och CSS i Wordpress. Förstärk orden med tillgänglighet i åtanke. Här lär du dig htmlelementen em och strong.

Förstärka enstaka ord

Element kan vara av typen inline eller block. Med elementet span kan du skilja ut ett avsnitt i löpande text visuellt.

Kurs: HTML och CSS i Wordpress. Element kan vara av typen inline eller block. Med elementet span kan du skilja ut ett avsnitt i löpande text visuellt.

Skilja ut en del av texten visuellt

Ataggen är den som gör internet till internet. Här lär du dig använda den.

Kurs: HTML och CSS i Wordpress. Ataggen är den som gör internet till internet. Här lär du dig använda den.

Hantera länkar

Öva på att sätta css på länkarnas alla pseudoelement i Codepen.

Kurs: HTML och CSS i Wordpress. Öva på att sätta css på länkarnas alla pseudoelement i Codepen.

Sammanfattning – förstärka språkligt och visuellt

Sammanfattning om att förstärka språkligt och visuellt

Med videotaggen ser du till att alla kan se din film oavsett webbläsare. Du kan också välja att videon ska spelas direkt och börja utan ljud.

Kurs: HTML och CSS i Wordpress. Med videotaggen ser du till att alla kan se din film oavsett webbläsare. 

Lägg till video

Invertera, gör svartvitt, öka kontrast ochlägg sepiaton. Med filter gör du bilder och videos enhetliga.

Kurs: HTML och CSS i Wordpress. Invertera, gör svartvitt, öka kontrast ochlägg sepiaton. Med filter gör du bilder och videos enhetliga.

Sätt ett filter på video eller bild

Snygg ljudspelare med audiotaggen och positionering.

Kurs: HTML och CSS i Wordpress. Snygg ljudspelare med audiotaggen och positionering.

Fixa en ljudspelare

Med kunskap om hur en htmlsida är uppbyggd kan du göra sidor som verkligen sticker ut från mängden.

Kurs: HTML och CSS i Wordpress. Med kunskap om hur en htmlsida är uppbyggd kan du göra sidor som verkligen sticker ut från mängden.

Förbättra din läskunnighet

Knepen för att kolla och säkerställa att din sida inte bara ser rätt ut och fungerar hemma hos dig.

Kurs: HTML och CSS i Wordpress. Knepen för att kolla och säkerställa att din sida inte bara ser rätt ut och fungerar hemma hos dig.

Undvik Det funkar hos mig

Med kommentarer blir det lättare att återkomma till din kod och fortsätta jobba senare.

Kurs: HTML och CSS i Wordpress. Med kommentarer blir det lättare att återkomma till din kod och fortsätta jobba senare.

Kommentera det du gör

Lös problemen steg för steg, ta pauser och bli inte frustrerad.

Kurs: HTML och CSS i Wordpress. Lös problemen steg för steg, ta pauser och bli inte frustrerad.

Så blir du en problemlösare

Nu är du väl rustad för att jobba vidare på egen hand och bygga på dina kunskaper i css och html.

Hej då – HTML och CSS i Wordpress

Hej då

HTML och CSS i Wordpress

<img class="alignright wp-image-26307" src="https://moderskeppet.se/wp-content/uploads/2019/05/Therese_sv_kv.jpg" alt="Therese Forsberg" width="110" height="110" /><p>Therese Enlund är webbutvecklaren och vetenskapsjournalisten som älskar ljudproduktion och att programmera. <a href="https://moderskeppet.se/om-larare/therese-forsberg/">Läs mer om Therese här</a>.</p>