5 Sep
2014
Posted in: HTML
By    No Comments     |    

Verktyg och metoder för HTML

Hur jobbar man effektivt när man skriver html-kod

Du har redan en minimal sida som ligger på webben. Nu 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 komihå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
  • Ha alltid dina lokala filer och filerna på webbplatsen ordnade på exakt samma sätt
  • <!DOCTYPE html ><html><head><meta charset=utf-8><title></title></head><body></body></html>

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.

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.

brackets bracket2

 

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.

brackets5  brackets3

Om du behöver göra en akut ändring  så ta vad du har till hands och öppna gärna filerna i Anteckningar igen. Fortsätt annars i editorn och jobba på att lära dig mer om vad din editor 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

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

valid

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

valid2

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.

valid4_001

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.

valid4_002

Börja alltid uppifrån. Försök rätta ett fel i taget, validera på nytt (uppdatera sidan i webbläsaren och tacka ja till att skicka på nytt).

valid4

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 validering av din sida, lägg in följande kod

Det blir så här: Validera sidan

OBS länken fungerar bara när sidan ligger på webben, så använd även sättet att validera dina filer lokalt som är beskrivet ovan.

 

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:

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”

I Windows 8 finns det direkt under View > Kryssa ur Hide file extensions

Mac finns det 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 webadressen. 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

På just vårt nätverk?

Vi rekommenderar att jobba mot skrivbordet men spara ofta en exakt kopia i din nätverksmapp på mifs. Och ladda alltid upp alla uppdaterade filer på webben ofta, ofta.

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
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

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 återvinningbar, 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

 

Några frågor eller kommentarer?