Kmom02: Bygg ut din webbplats

By . Latest revision .

Vi fortsätter att bygga ut me-sidan. Detta moment är en vidare genomgång av grunder i HTML och CSS. Efter kursmomentet så har du en me-sida version 2 som innehåller några av de vanligaste konstruktionerna som återfinns i flertalet “riktiga” webbplatser.

Vi använder fler enkla PHP-konstruktioner för att dra nytta av PHP och dess fördelar.

Vi börjar också prata om hur vi bör strukturera vår kod i filer, kataloger och vi börjar bygga en terminologi för olika typer av kod.

Mikaels me-sida version 2.

Mikaels me-sida version 2.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läs & Studera

(ca: 4-8 studietimmar)

#HTML & CSS

Läs följande för att fortsätta bekanta dig med teknikerna.

  1. Läs igenom följande sektion i guiden “Kom igång med HTML och CSS”.

#PHP

Läs följande för att fortsätta bekanta dig med tekniken.

  1. I kursboken Webbutveckling med PHP och MySQL är följande kapitel relevanta att läsa igenom.

    • Kapitel 5 Villkorssatser
    • Kapitel 6 Iterationer (ej foreach)
  2. Läs igenom följande sektioner i guiden “Kom igång med programmering i PHP”.

  3. Det finns en videoserie som bygger på innehållet i guiden, kika gärna på den som ett komplement till guiden. Kika på de videor som är markerade “[Typer]” och “[Kontrollstrukturer]”.

#W3C

Bekanta dig kort med det arbetet som organisationen W3C utför när det gäller standardiseringar av HTML och CSS.

Vi pratar mest om HTML och CSS vilket är en del av W3C’s arbete inom Web design and Applications.

De har sammanställt arbetet inom HTML och CSS och där kan man bland annat se nuvarande status och versioner av de standarder de jobbar med.

Se till att du vet hur standarderna för HTML och CSS ser ut, bara så du vet. Det kan vara viktiga dokument för en professionell webbprogrammerare.

#Videor

Du fick länkar till kursens inspelade och sparade videor i försa kursmomentet. Kika där om du glömt länkarna.

#Övningar & Uppgifter

(ca: 8-12 studietimmar)

#Övningar

Genomför följande övningar.

  1. Jobba igenom övningen “Gör en me-sida med HTML, CSS och PHP - steg 2”. Övningen bygger vidare på grunderna i HTML, CSS och PHP och visar hur du bygger ut din webbplats med några vanliga bra-att-ha konstruktioner.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

  1. Gör uppgiften “PHP lab 2: villkor, loopar och inbyggda funktioner”. Spara alla filerna i katalogen me/kmom02/lab2.

  2. Gör uppgiften “Bygg ut din me-sida till version 2”. Spara alla filerna i katalogen me/kmom02/me2.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

  • Beskriv hur väl du kan HTML/CSS (nybörjare, erfaren).
  • Me-sidan börjar bli en liten webbplats, vad tycker du om dess struktur av filer och kataloger, känns det okey eller ovant?
  • Hur bekant är du med PHP och programmering rent allmänt, hur känns det att utveckla med PHP?
  • Vad tyckte du om PHP-labben, enkel eller utmanande?
  • Vilken är din TIL för detta kmom?

#Revision history

  • 2020-08-28: (J, mos) Genomläst, mindre redaktionella uppdateringar i text.
  • 2019-09-06: (I, mos) Ny videoserie tillsammans med guiden.
  • 2018-08-21: (H, mos) Uppdaterad inför ht18.
  • 2017-08-28: (G, mos) Bort referens till Firebug.
  • 2017-06-15: (F, mos) Uppdaterad labbserie.
  • 2016-08-31: (D, mos) Lade till rätt videoserie från youtube.
  • 2016-02-22: (C, mos) Bort med not om kursutveckling och länk till version 1.
  • 2015-08-06: (B, mos) Genomgång inför ht15.
  • 2015-05-11: (A, mos) Första utgåvan för htmlphp version 2 av kursen.

Document source.