0015 startsida
I mappen webbutveckling lägger du till filerna
index.html stil.css
Skriv ditt namn som rubrik på sidan.
Lägg till en bild på något som du gillar eller på dig själv. Alternativt lägger du bilden som en bakgrund för sidan.
Lägg till länkar till de uppgifter som du har gjort, så att man lätt kan ta sig till övriga uppgifter som du har gjort.
Har du gjort uppgifter på JSFiddle så länkar du till dem också.
Testa att länkarna fungerar.
tips
Nytt - tjusigt och lättläst
Layout
Ordna layouten på din sida så att det blir lätt att hitta bland länkarna till de olika uppgifterna du har gjort.
Utseende
Ordna utseendet så att sidan blir tjusig. Använd gärna en bakgrundsbild.
Använd minst 4 andra bilder. Sätta width, height och alt för bilderna. Se till att width och height matchar bildens verkliga mått i pixlar. Därtill ska alt beskriva vad som visas på bilden. Exemplet nedan visar hur det kan se ut.
Typsnitt (betyg C)
Använd två olika typsnitt från Google Fonts. Ett för rubriker och ett annat för vanlig text.
Mobil version (betyg A)
Gör även en mobil version av startsidan. Layouten för den mobila versionen av sidan och versionen tänkt för en stor skärm ska vara mycket olika.
Nytt - validera
HTML o CSS (betyg E)
Se till att din sida validerar i HTML och CSS.
i18n (betyg C)
i18n i18n är en förkortning av internationalization. Det är 18 bokstäver mellan det första i:et och det sista n:et. Kontrollerar att språket för sidans innehåll är angivet.
länkar (betyg C)
W3C link checker Kontrollerar att alla länkar leder till en sida. Observera att sida måste laddas upp till webbhotellet innan testen kan göras.
Nytt - fler tester
Webbläsare (betyg E)
Kontrollera att sidan ser lika dan ut olika webbläsare. Testa i t.ex. Edge, (IE), Firefox, Chrome, Opera, Safari. Berätta om olikheter.
Wave (betyg A)
Wave hos WebAIM. Sidan som ska valideras måste ligga på webbhotellet.
Konstrasttest (betyg A)
Color Contrast Checker, WebAIM
WebAIM - förkortad checklista (betyg A)
Men enbart följande punkter:
- 1.1.1 Non-text content: punkt 1 och 2
- 1.3.1 Info and realtionships: punkt 1
- 1.3.2 Meaningful sequence
- 1.4.1 Use of color
- 1.4.3 Contrast
- 2.2.2 Pause, stop, hide: punkt 1
- 2.3.1 Three flashes or below treshold
- 2.4.2 Page title
- 2.4.4 Link purpose: punkt 1
- 3.1.1 Language of page
- 4.1.1 Parsing
Screen readers (betyg A)
Testa en screen reader på din hemsida. Använd till exempel NVDA eller JAWS. Mer om dem nedan. Hur låter din sida. Är den tillgänglig? Kan du göra din sida mer tillgänglig? Gör det.
Screen Reader User Survey #6 Results, WebAIM
Using NVDA to Evaluate Web Accessibility, WebAIM
Using JAWS to Evaluate Web Accessibility, WebAIM
Ladda upp till webbhotellet
Ladda upp din startsida till webbhotellet. Ladda upp filerna som finns i mappen webbutveckling till mappen public_html.
Gör sedan mappar på webbhotellet i mappen public_html. Gör mappar med samma namn som i den lokala mappen webbutveckling. Målet är att mappen public_html ska bli en kopia av mappen webbutveckling. Var noga med stavningen. Ett felaktigt tecken kommer att göra att sidan inte visas som den ska. Det räcker att en bokstav blir stor istället för liten för att det inte ska fungera.
Nu återstår det att ladda upp filerna till var och en av mapparna. Alla filer ska med.
Kontrollera att din publika hemsida fungerar.
Lämna in på itslearning
Lämna in en länk till din sida på itslearning.