Webbutveckling01 [weuweb01]

Moment02 - HTML & CSS grunder

Introduktion

I detta moment kommer vi börja koda. Vi dyker direkt in och börjar skapa en enkel wwebbsida som blir vår första sida som vi skall ersätta Bineros tråkiga sida på vår egen domän. När vi har gjort denna gemensamma uppgift så kommer vi dyka djupare i html-taggar och css styling.

Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

Centralt innehåll

  • Märkspråk och deras inbördes roller, syntax och semantik – där det huvudsakliga innehållet är standarderna för HTML 5 (Hyper Text Markup Language) och CSS (Cascading Style Sheets) samt orientering om dokumentobjektsmodellen, DOM (Document Object Model) och Ecmaskript.
  • Teckenkodning. Orientering om ASCII (American Standard Code for Information Interchange), ISO-8859, Windows-1252 och Unicode.
  • Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.

Samlingssidan

Vi har gemensamt byggt en enkel samlingssida som du skall ha för redovisningar i denna kursen. Denna sidan skall du bygga vidare på under hela kursen så fort det är någon ny inlämning som skall göras.

Koderna

Här hittar du koderna för den samlingssidan som vi påbörjade medan vi väntade på registrering hos Binero.

Tidigare grupper

Läsåret 2016/17 år så skapade vi denna samlingssidan i tre delar. Den är fri att använda för den som vill.

När du har gjort din samlingssida så döper du om den till index.html och lägger upp den på din domän hos Binero och du skall också se till att du har registrerat din sida bland elevernas sidor så att jag kan bedöma ditt arbete.

Validering

Även om vi får mycket hjälp med kodningen av vår editor och webbläsaren så är det viktigt att den kod vi producerar är korrekt. Detta kan vi själva förenkla genom att indentera koden men det finns också sidor på nätet som hjälper oss med detta.

Gå till Markup Validation Service och klistra in din källkod. Om sidan validerar korrekt så får du meddelandet Document checking completed. No errors or warnings to show.

På samma sätt kan du validera css-koden genom att gå till CSS Validation Service.

Förhoppningsvis är nu både html och css godkända, om de inte är godkända försök lösa de icke korrekta koder som du har skrivit. Ta för vana att alltid validera din kod, det kommer jag göra när jag bedömer ditt arbete. Klarar din sida inte valideringen så komemr du få rätta detta.

När du kodat en stund så finns det stor risk att din kod inte är så snygg längre, då finns det flera tjänster på nätet för att snygga till din kod. En som är smidig att använda är freeformatter.com. Ta även här för vana att snygga till din kod, om inte annat så för din egen skull. Att jobba i stökig kod ökar sannolikheten att du skriver felaktig kod. Webbläsaren struntar i att din kod är stökig, för den fick du gärna skriva allt på en enda rad.

Jag håller på att samla ihop en mängd tips och verktyg för validering av kod och webbplatser, allt ifrån den enkla valideringen till den väldigt avancerade. Allt detta finns i kunskapsdokumentet Validering.

Arbete

Nu har du skapat en enkel sida tillsammans med andra och det är dags att lära sig lite mer om html-taggar och css-egenskaper.

Detta arbete tänkte jag att du skulle få göra med hjälp av den utmärkta webbsidan webbkoda.se som är gjord av en lärare tillsammans med Internetfonden och Internetstiftelsen i Sverige.

HTML-grunder

Gå in på webbkoda.se och välj sedan Webbtekniker > HTML i menyn. Jobba nu igenom de olika avsnitten;

  • "Startkod HTML"
  • "Text & rubriker"
  • "Länkar och navigering"
  • "Bilder"
  • "Listor"
  • "Enkla strukturtaggar"

Välj själv hur du jobbar med de olika delarna, vissa har båda kodexempel och en videofilm medan andra bara har text och kodexempel. Gör sedan någonting av de taggar du jobbar med.
Jag har ännu aldrig träffat någon elev som bara lär sig programmera genom att bara läsa kod eller kolla på film.

Uppgift HTML

  1. Nu vill jag att du gör en html-sida där du visar upp alla taggar som gicks igenom i avsnitten ovan (på webbkoda).
    Skriv också i dokumentet lite om de taggar som du tycker är svåra eller saker du behöver tänka på när du sedan skall återanvända koden.
    OBS: Denna sidan skall redovisas, men den är främst till för din egen skull som ett referensverk. Hur du bygger upp sidan är upp till dig, men vet du inte hur du skall göra så kan det vara bra att bygga en enkel tabell med alla koder. För att skriva ut en tagg så att den blir synlig i webbläsaren behöver du använda koden < för att skriva ut mindre än-tecknet. Om taggen inte börjar som den skall så kommer den inte att ritas ut utan skrivas ut i text.
    Glöm inte att validera och köra beautify på den när du är klar.
  2. Exempel på lösning

    sidan kodförslag
  3. Du skall bygga din egen startkod. Kika på det avsnittet från webbkoda och utgå ifrån hans exempel. Utifrån detta så använder du hans startkod eller så bygger du din egen. Gör den enkel, tänk på att detta är koden du startar alla hemsidor med.
    Visa upp denna startkod på något sätt, du kan bygga in den i dokumentet som du skapde i uppgift 1 eller så lägger du koden i ett inlägg på din WordPress.
    Tips: Det finns en plugin till WordPress som heter crayon syntax highlighter som gör att du kan visa upp kod i ett inlägg. Ibland vill du kunna visa upp kod, som jag gör i Kursolles WordPress och kanske skall du bygga upp dina kodexempel här, då är de lätta att komma åt.

    Om du använder Emmet, fundera på om den grundkoden som kommer där är den du vill använda, skall den anpassas på något sätt? Exakt hur detta görs i din editor får du kolla upp. Google är din bästa vän i denna kursen.

  4. Exempel på lösning

    sidan kodförslag

    Så här ser startkoden ut för Emmet i min konfigurering.

    kodförslag

CSS-grunder

Gå in på webbkoda.se och välj sedan Webbtekniker > CSS i menyn. Jobba nu igenom de olika avsnitten

  • "Färger"
  • "Text & typografi"
  • "Block & boxar"
  • "Boxmodellen"

Välj själv hur du jobbar med de olika delarna, vissa har båda kodexempel och en videofilm medan andra bara har text och kodexempel. Träna nu på att ge olika selektorer olika egenskaper.

Uppgift CSS

Du skall nu med hjälp av css formatera den fil su skapade i uppgift 1 när du jobbade med HTML. Lek fritt med färg och form för att testa en mängd olika selektorer och ge dem egenskaper. Inget kan bli fel i denna övning, vill du ha gröna prickar på en röd bakgrund så gör det.
För din egen skull kan det vara bra att skriva små kommentarer och dokumentera olika delar som du inser att du kommer använda dig av senare.

När du anser att du är klar så validera css-koden så att den är godkänd. Det kan också vara värt att köra någon form av beautifier på koden så att den är snygg och lättläst.

Exempel på lösning

sidan kodförslag

Redovisning

Lägg upp de filer du har jobbat med på din domän och länka sedan från samlingssidan och det inlägg du skriver på din WordPress. Skriv en kort utvärdering om hur momentet har fungerat, om du tycker att teknikerna är svåra eller om du känner att du kommer in i det.
Slutligen skriver du något om hur du tycker att det fungerar att jobba med webbkoda.se.

Om du nu har tid över så använd dina nya kunskaper för att förbättra din samlingssida, denna kommer leva genom hela kursen. Vill du se något kul så spara din första samlingssida som index_v01.html (version01) så kan du senare gå tillbaka och se hur du har utvecklats under kursens gång.