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

Hur ska jag lära mig HTML och CSS?

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.







24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

14 kommentarer

  1. SvaraTherese Gustavsson

    Hej!
    Jag har precis bytt från att ha egen mall till att använda mig av temat Whimsical. Kan ni hjälpa en med det eller är det bara egen mall som gäller här på designadinblogg? 🙂
    Jag chansar och hoppas att ni kan hjälpa mig med några saker.
    * Hur får jag bakgrunden i menyn att INTE vara genomskinlig/transparent? Det blir konstigt när menytexten lägger sig över resten av bloggen och det blir otydligt vad som står.
    * Hur ändrar jag ”gilla knappen”, tycker inte att den gröna färgen var så fin! 😉
    * Jag vill inte ha mobilversionen utan vill att temat Whimsical ska synas när man kollar via mobilen med. Enda problemet, varför blir headern inte i mitten och hur löser jag det? 🙂

    Mvh Therese

  2. SvaraTherese Gustavsson

    1. Löste sig, var ett reglage vid sidan av där man bytte meny bakgrund som man kunde ändra hur genomskinlig den skulle vara 🙂
    2. Fick en länk till ett bra tips så det löste sig också!
    3. Denna var klurig, lyssnade igenom videon och försökte att lägga in koden för ”extra små enheter” eftersom jag bara har problem med hur bloggen (eller egentligen bara headern) ser ut när man går in via mobilen. Med den ”färdiga” koden hände inget, sen testade jag att ändra lite olika siffror på exempelvis headern men det blev och såg bara värre ut då den tog bort mer av headern…
    Mvh Therese


    1. Author
      SvaraSanna Preifelt

      Gör en liten header, som är typ 300px bred, och den använder du under extra små enheter, såhär:

      #header {
      background: transparent url('din lilla header') no-repeat left;
      max-width: 350px !important; /* eller hur bred headern är */ 
      height: 100px; /* eller hur hög headern är */ 
      }

      och eventuellt margin-left, margin-top, margin-bottom & margin-right och allt sånt.

  3. SvaraTherese Gustavsson

    Två saker till som jag inte kan lista ut.
    4. Ska man lägga in koderna i alla fyra kodmallar nu med eller räcker det med ”bara” startsidan? Låter som en dum fråga kanske men när jag skulle lägga in en egen bild i browsern så fungerade det oavsett om jag bara la in koden på startsidan. Så då tänkte jag att det kanske är onödigt att lägga in i alla 🙂
    5. Hur får jag in en ”läs mer” länk i menyn jag har nu. Den texten kommer väl ifrån ”Inställningar”- ”profil”. Och inte ifrån något som ligger i kodmallen – kunde inte hitta min ”om mig text” där iallafall 🙁


    1. Author
      SvaraSanna Preifelt

      1. Om det inte finns <head></head> i de andra kodmallarna så kan du inte lägga in det + då läses det som finns på startsidan in automatiskt. Brukar stå nåt i stil med:

      {% extends &quot;std.index&quot; %}

      2. Gå in i kodmallen och leta upp detta:

      &lt;section id=&quot;about&quot;&gt;
      &lt;a href=&quot;http://profile.publishme.se/profile/view/{{ profile.id }}/&quot; title=&quot;{{ profile.name }}&quot;&gt;&lt;img src=&quot;{{ blog.blog_path }}profile.jpg&quot;&gt;&lt;/a&gt;
      &lt;span&gt;{{ profile.name }}&lt;/span&gt;&lt;br&gt;
      {{ profile.description }}
      &lt;/section&gt;

      Sedan lägger du till din länk efter {{ profile.description }}.

      1. Therese Gustavsson

        3. Går tyvärr fortfarande inte, saknar liksom en del utav bilden fast att den ”ligger rätt” eller vad man ska säga.
        2. Gjorde så både innan jag frågade dig samt provade ännu en gång men blev likadant igen. Länken kommer som den ska men ordet ”här” (där länken ligger inom) hoppar ner en rad samt utropstecknet också. Varför? 🙂
        Sen försökte jag få ordet ”här” i fetstil med [ ] men gick inte det heller..


      2. Author
        Sanna Preifelt

        1. Då får du göra den ännu mindre, eller använda dig av margin.
        2. Troligtvis för att det finns någon typ av display:block; på den klassen eller något sådant. Du kan lägga den efter </section> och testa hur det blir här.
        3. <b></b> är korrekt, inte []

  4. SvaraTherese

    1. Nu är hela menyn förstörd av någon anledning, och bilderna går låångt utanför bloggen.. Blir värre och värre så fort jag försöker bättra något känns det som 🙁

    2. Testade det med men ingen skillnad. Det var som jag försökte skriva 😉 Det blir ändå inte fetstil.


    1. Author
      SvaraSanna Preifelt

      1. Kan inte se att det är något fel på menyn, ej heller att bilderna går utanför bloggen.
      2. Som sagt ligger det troligtvis någon typ av display:block; på elementet, så du får kika på det. Men jag ser också att du har ju lagt ordet här helt utanför </section> då är det ju inte så konstigt att den hamnar på en ny rad i och med att ett element avslutas däremellan. Prova att lägga b-taggen inuti a-taggen, så att länken läses först och fetstilen därefter. Jag menade i så fall att du skulle länka hela meningen och lägga det utanför section.

      Angående headern, jag gick in och kollade i din stilmall och din header heter inte #header, den heter .header, så ändra till det i det responsiva.
      En bra idé kan vara att titta på denna video: http://www.designadinblogg.se/sahar-fungerar-css/ så att du får förståelse för hur bloggdesign och webbdesign fungerar över huvud taget.

  5. SvaraTherese

    2. Jag kunde inte lösa det tyvärr. Nu fick det bli en länk efter section.
    3. Ändrade från # till . men blev ingen skillnad.


    1. Author
      SvaraSanna Preifelt

      Prova att ändra så att det ser ut såhär:

      #header {
      max-width: 100% !important;
      }
      .header {
      background-color: transparent !important;
      background-image: url(https://cdn3.cdnme.se/4345118/8-3/liten_55119037e087c329e9e54299_5511d4bb9606ee670bbabfd6.jpg) !important;
      background-repeat: no-repeat !important;
      background-position: left !important;
      max-width: 200px !important; /* eller hur bred headern är */
      height: 105px !important; /* eller hur hög headern är */
      }
  6. SvaraTherese Gustavsson

    Tror vi får ge upp :/
    Ser fortfarande ut som om bilden vore kapad. Förstår inte varför!

  7. SvaraHanna Westman

    Hej, om du kollar på min inläggssida så är den genomskinlig, varför? vill ha en vit inlädgssida (där texten är)
    Använder mig utav temat whimsical 🙂

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

OBS! Om du skall skriva kod måste du göra på följande sätt: [code]Din kod här[/code]

Genom att använda DDB, godkänner du användning av cookies. mer info

Denna sajten använder cookies för bästa användarupplevelsen. Genom att använda sajten accepterar du att cookies används.

OK