Tanken är att du ska återvända till detta dokument så ofta du behöver. När du just börjat koda kanske inte allt känns relevant, men du kommer att behöva alla dessa hjälpmedel och råd igen och igen när du kodar.
Hur jobbar man effektivt när man skriver html-kod
Du har redan en minimal sida som ligger på webben. Nu är det dags att grundlägga goda vanor och skaffa bra verktyg för att underlätta jobbet.
Du ska nu lära dig mer om
- hur alla html-sidor måste utformas för att fungera korrekt
- hur du jobbar effektivt med kod
- vilka inställningar och hjälpprogram du bör ha
Viktiga kom-ihåg från vad du redan gjort
- Du redigerar och sparar alltid med en texteditor men kollar resultatet i en webbläsare
- Undvik konstiga tecken som å ä ö, mellanslag, versaler när du namnger filer och kataloger
Byt till en mera kapabel texteditor
Många koder blir det, och då är det bra om man får hjälp med rättstavning, färger för olika typer av taggar, radnummer och allt möjligt annat som en specialinriktad html-editor erbjuder.
Resultatet blir fortfarande exakt samma sorts textfiler (som kan redigeras av Notepad och som tolkas av webbläsarna) men du får mer hjälp på vägen.
Det finns bra gratisverktyg och vi föreslår att du börjar med något av dem t.ex.:
- Brackets (ett Adobe/Open source-projekt som uppdateras var 14e dag). Du kan ladda ner för Mac eller PC här http://brackets.io . Finns också i MC418.
- Notepad ++ (open source för PC) http://notepad-plus-plus.org. Finns också i MC418.
- Sublime text (gratis som testversion, kostar sen, för MAC PC Linux) http://www.sublimetext.com/
Stäng nu Anteckningar/TextEdit och öppna din fil i den specialanpassade editorn istället. Gör en ändring. Spara och kolla i webbläsaren. Behåll både editor och webbläsarfönstret på skärmen och växla mellan dem.
Ställ in Brackets rätt så får du riktigt mycket hjälp.
Börja med att välja File > Open Folder för att berätta var dina filer finns. Brackets ser det som ditt projekt och hjälper dig att länka bilder och filer inom projektet.
Om du behöver göra en akut ändring, så ta vad du har till hands och öppna gärna filerna i Anteckningar eller TextEdit igen. Fortsätt annars i den nya editorn och jobba på att lära dig mer om vad den kan hjälpa till med.
Skriv lättläst kod
För att göra koden mer lättläst bör du använda luft. Detta gör du genom att använda radbrytningar och tabbar för att indentera koden.
Du kan också kommentera din egen kod, för t.ex. att lämna minnesanteckningar direkt på sidan. Osynlig kommentar i html skrivs så här
<!-- Mina kommentarer står här -->Skriv korrekt – Validera din kod
Många småfel dyker givetvis upp när man kodar som kan vara svåra att upptäcka. Det finns hjälp online.
Gå till http://validator.w3.org
Du kan göra på olika sätt, men medan du jobbar lokalt med att uppdatera dina filer är det enklast att välja fliken File upload, sedan bläddra till din fil och välj Check
Om validatorn hittar fel bör du rätta dem även om du tycker det ser ut som sidan fungerar ändå. Annars kan du få problem när sidan utvecklas eller i andra webbläsare eller plattformar.
Scrolla ner på sidan så får du veta på vilken rad felet finns och vad som är fel. Inte alltid lätt att förstå men försök
Var hittar man hjälp? Både om html i allmänhet och validering i synnerhet ?
Tre (3) tips som räcker långt
w3schools.com
HTML-referens som håller hög kvalitet och är utförlig utan att bli svårläst.
Googla!
Du kan klippa ut en hel fras från validatorsvaret och försöka googla. Självfallet finns det träffar som är fel eller inaktuella. Du måste läsa kritiskt.
Studiewebben
Vi har färdiga FAQs och bygger ny kunskap varje kurs med hjälp av forum på Studiewebben.
Om svaret inte redan finns, så kan du ställa frågan där.
Börja alltid uppifrån. Försök rätta ett fel i taget, validera på nytt… att backa i webbläsaren och skicka på nytt är det snabbaste sättet?
Detta arbetssätt är helt nödvändigt då ett litet fel kan generera många genom att resten av kod feltolkas. I exempelbilderna gav ett felaktigt citat-tecken upphov till 15 fel enligt validatorn.
En valideringslänk på din sida
För att få en länk direkt till validering av din sida, lägg in följande kod
<a href="http://validator.w3.org/check/referer">Validera HTML</a>Det blir så här: Validera HTML
OBS att länken fungerar bara när sidan ligger på webben,
så fortsätt använda även sättet att validera dina filer lokalt som är beskrivet ovan.
Gör eventuella valideringslänkar så små och diskreta som det bara går!
Nödvändiga inställningar och goda råd
Visa filändelser
På en PC måste du ställa in din dator så den visar filändelser.
Lite olika beroende på version men ung så här:
I Windows 8 (10?) finns det direkt under View > Kryssa ur Hidefile extensions
Äldre Windows:
Gå till valfri mapp:
Välj Organize [eller Tools] > Folder [and search] options > välj fliken View >
ta bort krysset vid “Hide file extensions for known file types”
På Mac finns det i Finders inställningar/preferences
Hur man döper filer
Hur man döper filer och kataloger för webben – tekniskt:
- gemena bokstäver
- inga konstiga tecken t.ex. å ä ö eller mellanslag
- filändelse välj .htm eller .html (var konsekvent)
Hur man döper filer och kataloger för webben – användarvänligt:
- Filnamnen index.htm, default.html och liknande underförstås av webbläsare och ger därmed enkla adresser som man kan komma ihåg:
– dn.se istället för dn.se/start.htm
– dn.se/mat istället för dn.se/matsidan.html - Namnen på de kataloger där du förvarar dina html-filer kommer alltså att vara synliga som en del av webbadressen. Använd därför katalog/filnamn och struktur för att hjälpa användaren att navigera och dig själv att hålla ordning. Vissa filnamn är “osynligare” än andra, t.ex. bildnamn (och kataloger med bildfiler) syns sällan i adressraden och bör antagligen namnges rationellt för sajtadmin snarare än för besökaren.
Var är mina filer? Varför funkar inte länken/bilden?
- Låt alltid sajtens katalogstruktur vara exakt likadan lokalt som på webbservern så att relativa länkar fungerar.
- Ftp:a ofta dina sidor till webbplatsen. Blir backup och du kan alltid kolla dagens arbete i nån annans mobil på vägen hem.
- Ha gärna sajten på 3 ställen. Då man uppdaterar lokalt men sedan ofta “kör över” de filer som ligger på servern kan det behövas en extra kopia om man varit för snabb. Därför är 3 ställen mycket bättre än 2:
- Lokalt på datorn eller i sin nätverksmapp
- På webben
- Ett ställe till
Var ska du jobba/spara på SHs nätverk?
Vi rekommenderar att jobba mot skrivbordet men spara ofta en exakt kopia i din nätverksmapp. Och ladda alltid upp alla uppdaterade filer på webben ofta, ofta.
Om du sparar din sajt på ett USB-minne, så arbeta inte direkt mot dem.
Ladda istället över en kopia dit då och då.
Hur skriver man bäst? Semantik och syntax
Syntax …
betyder i detta sammanhang ung. grammatik eller satslära, hur man kombinerar olika delar för att få en viss effekt.
Strikt syntax underlättar korrekt uttolkning på olika plattformar, nu och i framtiden.
Med HTML5:s ambition att vara bakåtkompatibel är det ibland tekniskt möjligt att skriva slarvig och inkonsekvent kod. Men detta gör det svårt att överblicka koden och att felsöka. Välj därför ditt eget sätt att koda men var konsekvent! Om du samarbetar med andra, följ de råd och instruktioner som ges.
Låt dig gärna inspireras av t.ex. Googles style guide
https://google.github.io/styleguide/htmlcssguide.html
som alltså inte handlar om hur webbsidan ska se ut utan om hur koden ska skrivas. Tänk på att de är extrema på att hushålla med kod. Du kanske vill skriva med ngt fler tecken för att få det som du vill
Exempel: Både <body> och <BODY> är korrekt.
Rekommendation: använd gemener <body>
Exempel:
Både
<img src="bild.png" alt="Vad bilden föreställer">
och
<img src=bild.png alt="Vad bilden föreställer">
är korrekt.
Rekommendation:
Det är enklast och mest lättläst att vara konsekvent och alltid ha citattecken runt värdet trots att det bara behövs ibland.
Semantik…
Använd om möjligt betydelsebärande d.v.s. semantiska koder (semantik = betydelselära).
T.ex. <h1> och <address> istället för <p> när det överenstämmer med innehållet.
<nav> runt din sidas huvudnavigation ger blindas webbläsare möjlighet att hoppa direkt dit, och viktas antagligen som betydelsefullt innehåll av sökmotorer. Och blir till återvinningsbar, maskinläsbar information/data om din sida.
Kolla din semantik t.ex. genom att titta på sidan helt utan CSS. Är den begriplig? Stämmer sidans inneboende logik med vad som visas även utan CSS? (Du börjar snart med CSS…)
Använd elementen till vad de är avsedda för. Använd table för att visa data i tabellform, inte layout.
Till sist
Sidans titel är viktig, syns inte på sidan men överallt annars. Använd olika titlar på olika sidor.
Kolla ofta i OLIKA webbläsare, olika plattformar, olika uppkopplingar skärmstorlekar, fönsterstorlek.