Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Hur ska jag lära mig HTML och CSS?

I samband med att vi publicerade inlägget om hur man bygger en blogg från grunden så nämnde vi också att man bör lära sig språken HTML och CSS innan för att förstå hur man använder det, men vi berättade aldrig hur man lär sig det. Vi drar språkreferensen igen, för HTML och CSS klassas faktiskt som språk på riktigt; du lär dig inte ett nytt språk över en natt, tyvärr. Det gäller att plugga, nöta, läsa, testa, prova. Till en början kanske det inte känns så roligt, men försök hitta dina egna sätt att lösa ett problem. Säg att du vill göra inläggstexten större, men du förstår inte vad i stilmallen som är inläggstexten. Däremot har du stenkoll på vilken del i kodmallen som är inläggstexten, och du kan lite HTML; lägg en HTML-tagg där då istället. Det är inte korrekt, och hade kanske ogillats i professionella kretsar, folk som jobbar med det, men om det är vad du kan och det löser det problem; gör så!

Lära sig nya saker – HTML och CSS

Det viktiga är att man är öppen för att lära sig nya saker, lära sig vad som faktiskt är rätt och vad som är fel. Om det du gör löser ditt problem så betyder det per automatik inte att det är rätt, men det är inte heller fel. Med HTML och CSS är saker och ting inte svarta eller vita, även om man kanske inte hade blivit godkänd i en skolkurs om man gjorde ”den lätta lösningen”. I filmen nedan förklarar jag hur grundläggande HTML och CSS fungerar. Jag går igenom de olika taggarna, de olika selektorerna och hur man kopplar samman CSS & HTML i de olika dokumenten man har för att bygga en blogg. Och sedan är det bara för dig att testa, nöta, plugga och prova. Det är enda sättet man lär sig på tyvärr, och mer än så kan vi inte riktigt säga om saken. Det finns inga genvägar, utan du måste försöka själv och tillåta dig själv att både lyckas och misslyckas med dina designer, bara du som sagt är öppen för nya lösningar och har tålamodet och viljan.

 

Text nedan är från filmen:

Så fungerar HTML och CSS

Hej
Idag så ska jag lära er hur man kan göra egna koder i sin stilmall och sin kodmall. Vi kommer börja med att tala om CSS:en, alltså om stilmallen.

På blogg.se så är det stilmallen som är vårt så kallade CSS-sheet. CSS används för att specificera HTML så att man slipper förändra alla sidor varje gång man ska ändra ett typsnitt eller storlek på en text till exempel. Tänk hur jobbigt det skulle vara varje gång man ville ändra alla menyrubriker så skulle man vara tvungen att lägga till nya koder i alla våra kodmallar vid varje menyrubrik. Istället styr vi menyrubrikerna så att all sådan text som är markerad att vara en menyrubrik ska se likadan ut och när vi ändrar behöver vi bara ändra i stilmallen. Det underlättar väldigt mycket och sparar oss väldigt mycket tid.

Jag kommer i detta tips att kalla CSS-sheetet för stilmallen för att inte förvirra er men kom ihåg att CSS-sheet är det samma som våran stilmall. Ett stycke i stilmallen kallas för regel. En regel kan börja med en hashtag, en punkt eller inte ha något av det framför namnet på regeln. Det finns ytterligare sätt som en regel kan börja med, men dessa är dem jag kommer visa er och berätta om idag i och med att det är dessa vi är vana vid att använda på blogg.se.

Exempel på # som ni kan se i er stilmall är #wrapper, #header och #side. Om man väljer att använda hashtag så betyder det att man vill göra en regel som är unik, som alltså bara använda en gång i HTML. Exempel på punk kan vara .navheader, .entrybody och .commentheader. Dessa använda ifall man ska ha en stil eller en regel som upprepas flera gånger i HTML. Exempel på när det inte är något framför regelns namn är body, p och h3. Dessa regler styr sedan vår HTML, alltså kodmallarna, via taggar och element.

På blogg.se är det kodmallarna som är våra HTML-sheets. Jag kommer därför att kalla HTML-sheetsen för kodmallar i detta tips för att inte förvirra er. Som sagt så finns det så kallade taggar och element i kodmallarna. Taggarna är oftast från vad vi är vana vid, en id-selektor eller en class-selektor.

Vi börjar med id-selektorn. Id-selektorn är det som styrs utav våra regler som börjar med hashtags. Id selektorn använder id attributet för att hämta regeln från stilmallen. Ni får här se ett exempel. Vår tagg som ni såg överst i det förra exemplet, alltså HTML-koden har ett id attribut efter div-taggen. Det betyder att den kommer att styras utav en hashtag-regel. Stilregeln som ni sedan såg, den undre delen av exemplet, alltså CSS-regeln styr då HTML-element.

Vi går vidare till class-selektorn. Class-selektorn är det som styrs utav våra regler som börjar med punkt. Class-selektorn använder class-attributet för att hämta regeln från stilmallen. Ni får här se ett exempel. Vår tagg, som ni såg överst i det förra exemplet, alltså HTML-koden har ett class-attribut efter div-taggen. Det betyder att den kommer att styras utav en punktregel. Stilregeln som ni sedan såg, den undre delen av exemplet, alltså CSS-regeln styr då de HTML-element som heter class=navheader inom citationstecken.

Det ni egentligen behöver hålla koll på är att hashtag hör ihop med id-attributet och punkt hör ihop med class-attributet. En regel i stilmallen som börjar med hashtag kan således endast styras utav en div-tagg som har ett id-attribut och en punktregel i stilmallen kan endast styras utav en div-tagg som har ett class-attribut.

Man bör också vara medveten om det jag nämnde i början av filmen att en hashtag-regel och ett id-attribut är sådana element som endast används en gång i HTML medan punktregel och ett class-attribut kan användas upprepade gånger.

Gå in i din stilmall och din kodmall och kolla. Visst är det så att div id side endast finns en gång, likadant med exemplet div id header. Däremot har vi till exempel div class navheader som finns flera gånger. Det upprepas alltså. Om du däremot har gjort så att ett id-attribut tillsammans med en hashtag-regel förekommer flera gånger så föreslår jag att du ändrar detta till en punktregel och ett class-attribut istället.

Då ska vi börja göra egna koder. Det första du ska fundera på är om det är en kod eller en regel som kan komma att upprepas. En regel som ska styra en text till exempel, den kan komma att upprepas flera gånger däremot om du ska göra två menyer och därmed lägga till ytterligare en meny så kommer denna bara förekomma en gång. Det andra du ska fundera på är vad du ska döpa din regel till. Mitt förslag är att du försöker använda engelska uttryck då å, ä och ö inte fungerar. Annars kan du bara byta ut å, ä och ö mot a och o. Du får heller inte börja din regel med en siffra, däremot kan det finnas en siffra i namnet på regeln, men alltså inte i början.

Jag gör här ett exempel för er. Jag vill göra en kod som ska styra min profiltext då jag kan komma att använda den här regeln på flera texter så är det givet att det är en punktregel tillsammans med ett class-attribut som jag ska skapa. Jag väljer att döpa den till .profiletext därefter i en CSS-regel så följer en klammerparantes som pekar åt vänster. Efter det börjar jag skapa min regel. Jag väljer typsnitt, storlek, bakgrund, färg och så vidare. Till er hjälp har jag skapat CSS skola med alla olika CSS stilar som ni kan använda. Länk finns nedanför denna video.

Varje rad börjar med min egenskap följt utav ett kolon sedan kommer en beskrivning och efter ett semikolon. Sist men inte minst avslutas regeln med en klammerparantes som pekar åt höger. När jag är färdig med min CSS-regel så ska jag testa den och se så att jag blir nöjd och för att kunna se min CSS-regel så måste jag göra ett HTML-element som styrs utav .profiletext. Jag år in i min kodmall och skriver div class= profiletext inom citationstecken, jag skriver sedan min profiltext. Hej, mitt namn är Sanna & jag är 22 år gammal. Min blogg handlar om bloggdesign & Photoshop, vilket är älskar att pilla med. Jag avslutar med en /div vilket är mycket viktigt.

Om man ska lägga till egna taggar så är det givetvis otroligt viktigt att man avslutar varje tagg annars blir ju resten av HTML-dokumentet också styrt utav den CSS-regeln. Om jag inte skulle lägga till en /div då skulle resten av mitt HTML-dokument ha CSS-regeln profiletext. Det betyder att det kommer vara liten text och det kommer att vara en speciell färg och ja, det går helt enkelt inte att göra så. Plus att man kan göra så att hela bloggen blir helt fucked up faktiskt, så jätteviktigt att man avslutar varje tagg med /div.

Jag klickar sedan på förhandsgranska för att se om det blev bra. Om det inte blev bra så är det bara att spara, gå tillbaka till stilmallen och justera värdena i regeln tills man blir nöjd och så gör man egna koder. Jag hoppas verkligen att ni har lärt er något av denna videon och så får jag önska er en fortsatt trevlig kväll. Ha det så gott. Hej hej.

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras.