En minimal HTML-sida för mobilt bruk

Under första veckorna av kursen bör du skaffa dig grundläggande kunskaper och webbproduktion:

  • Hur man planerar och strukturerar innehållet (HTML)
  • Hur man styr utseendet på ett rationellt sätt (CSS)
  • Hur man kan lägga till funktioner genom scriptning (Javascript och PHP)

Du gör detta genom att läsa kursböckerna, delta i övningar och lämna in examinationer. Övningarna leder till en testwebbplats som du kan använda för att fortsätta testa och lära dig mer även när dessa veckor är över.

Vi startar med att jobba praktiskt direkt. Nästa vecka får ni lära er hur och varför man gör webbsidor och måste inhämta det mesta själva via kurslitteraturen.

  • Robbins, ”Learning Web Design” (4th ed.), Chapter 1-7
  • Wroblewski ”Mobile First”; fram till s.67.

En minimal sida i HTML5

I denna övning kommer vi att börja skapa en liten exempelsida som passar att använda i mobil.

Var spara filerna?

Om du sitter i datorsal med våra datorer rekommenderar vi att du arbetar mot datorns skrivbord. Välj annars själv var du sparar dina filer.

Skrivbordet är en bra arbetsplats men inte lagringsplats. Detta betyder att du när du slutar för dagen behöver du flytta mappen till din nätverksplats påvårt nätverk mifs eller till något annat säkert ställe.

Skapa en mapp/katalog som du döper till t.ex. mina_webbfiler

Denna mapp ska framöver innehålla alla de dokument/filer som du ska publicera på webben, ingenting ska placeras utanför.

När du döper filer och mappar/kataloger som ska användas på webben, ska du undvika:

  • konstiga tecken (inkl. å ä ö)
  • mellanslag
  • helst inga versaler

Ställ in texteditor

Öppna en texteditor. Det duger med Notepad/Anteckningar eller TextEdit/Textredigeraren (MAC) än så länge. Vi övergår snart till andra gratisverktyg som är mer användarvänliga när man skriver mycket kod.

Öppna ett nytt dokument i din texteditor t.ex. Notepad eller TextEdit. Vi väljer dessa för att de alltid finns till hands och skriver oformatterad text. En vanlig ordbehandlare lägger in osynligt ”skräp” och passar inte till detta.

I TextEdit för Mac måste du först leta upp Preferences och välja fliken New Document och välja Plain text. Öppna sen ett nytt dokument igen.

Uppdatering: Du måste också kryssa ur Smart quotes/ Smarta citattecken, annars blir det fel så fort du använder citattecken i felen (Gäller bara Mac-användare i TextEdit)

Spara i rätt format

Du ska snart spara den än så länge tomma filen som test.html i din mapp. Filändelsen .html (eller .htm) berättar att detta inte är ett helt vanligt textdokument längre.

När du sparar är det viktigt att du väljer rätt textformat. Programmet är enkelt men har ändå olika textformat för att hjälpa till vid olika språk som använder olika tecken.

Vi ska använda UTF-8 som fungerar för många olika språk. Vissa editorer har flera utf-8-versioner  att välja på. Välj i så fall ”without BOM”.

save

Nu vet du vad du behöver för att spara filen första gången. Gör det. Hädanefter kan du sedan bara välja att spara som vanligt.

Mac-användare? Om Å Ä Ö ser konstigt ut så ta det lugnt. Vi löser det om den stund. Är du otålig så sök längre ner i detta dokument efter ”meta” 

Börja med innehållet

Nu har vi en förberedd fil som ska fyllas med innehåll. Skriv ung. här:

Medieteknik

Några genvägar:

Södertörns högskola www.sh.se

StudentAdmin för medieteknik studentadmin.mi.sh.se

Medietekniks IT-info student.mi.sh.se

Medietekniks blogg mi.sh.se

Schema

Direktlänk till min kurs

Spara filen och stäng programmet. Öppna filen igen genom att dubbelklicka på den. Då öppnas dokumentet i en webbläsare istället. Vad ser du? Texten syns, men utan luft, då html inte visar upp nån formatering alls från textdokumentet, t.ex. radbrytningar.

mini2
mini1

Om filändelser

Eftersom du sparat filen som .html eller .htm kommer dokumentet hädanefter att i första hand öppnas av en webbläsare. För att kunna redigera koden igen måste du öppna dokumentet inifrån en texteditor, exempelvis Notepad eller högerklicka (eller CTRL-klicka på Mac) och välj ”Öppna med”.

När du ska öppna filen i Notepad igen kan det verka som den försvunnit. Det kan bero på att programmet i första hand letar efter filer med ändelsen .txt. Bara dessa visas. Ändra till ”All files” så hittar du den.

OBS du ska inte stänga din editor hela tiden. Låt webbläsarens fönster vara öppet men växla tillbaka till texteditorn och fortsätt skriva. Du kan låta de två fönstren (texteditor med kod och webbläsare med synligt innehåll) ligga delvis överlappande på skärmen och klicka i det fönster du tillfälligtvis vill ha överst. Eller växla mellan fönstren med alt+tab.

Glöm inte att de två fönstren visar samma fil.  Se upp så du inte får flera upplagor av samma dokument. Du ska inte spara filen i webbläsaren, då skrivs den om och dina egna koder ändras. All redigering och alla spara-kommandon ska ske i texteditorn.

Om du inte redan ställt in att din dator visar filändelser så gör det nu, det minskar risken att du blandar ihop filer och längre fram att du skriver fel sökvägar till bilder m.m. Läs här hur du ställer in detta https://student.mi.sh.se/index.php/Fil%C3%A4ndelser_och_filformat

Dags att märka upp sidans innehåll

Sidans struktur och grundkoder

En htmlsida består av fyra grundtaggar:

<html>omger hela sidan

<head>är ett inledande avsnitt med info om själva sidan

<body>är själva sidan, allt som syns

<title>är en del av head, anger sidans titel, som information om vad det är för sida

Varje tag har en starttagg och en sluttagg t.ex.

<html> </html>

Att de omges av < > betyder att de ska tolkas (inte visas) av webbläsaren. Sluttaggen innehåller dessutom ett snedstreck.

Ett minimalt dokument ser ut så här:

<html><head><title></title></head><body></body></html>

För att det ska bli mer lättläst (för dig som kodar) och bli lättare att se var man kan fylla på med innehåll, skriver man oftast så här:

<html>
   <head>
      <title> </title>
   </head>
   <body>

   </body>
</html>

Skriv av eller kopiera koden in till ditt textdokument.

Allt det du redan skrivit på sidan ska bli synligt innehåll och ska finnas mellan <body> och </body>

Spara filen igen och titta på resultatet genom att uppdatera sidan i din webbläsare. Det har nog inte blivit nån större skillnad än.

notepad2
mini1

Titeln på sidan kan vara t.ex.: ”Testwebbplats”. Du skriver alltså in detta mellan
<title>  och </title>.

Kolla i valfri webbläsare att dina koder fortfarande fungerar. Var syns titeln?

webb3
notepad3

Lägg till en tagg som anger att Medieteknik är en viktig rubrik så här

<h1>Medieteknik </h1>

Spara igen i texteditorn och kolla i webbläsare. Du måste välja refresh/reload i webbläsaren för att se din uppdatering.

notepad4
webb4

Länkar som exempel på hur man lägger till mer till sina koder

Nu ska vi göra så att dina ”genvägar” blir länkar.

Man kan utvidga sina koder enligt följande mönster:

<kod attribut=”värde”>Innehåll i elementet</kod>

eller på engelska:

<elementname attributename=”value”>Content</elementname>

Exemplet länk ser ut så här:

<a href="http://www.sh.se">Södertörns högskola</a>

 a betyder anchor

href betyder hypertext reference

I ditt textdokument har du redan några platser och adresser. Gör om dessa till länkar enligt ovanstående mönster. OBS att alla länkadresser måste inledas med protokollet dvs http://

Spara och testa.

notepad5
webb5

Nu ska det fungera men ser inget vidare ut. Tänk på att detta är en ofärdig sida och att den egentligen ska ses på mobil.

Schema? Leta gärna upp länk till schemat och gör en länk direkt dit.
Du hittar den långa adressen via t.ex. StudentAdmin eller sh.se/schema. Gör gärna inställningar i schemasystemet så du får schemat som du vill ha det innan du hämtar länken

OBS! Om du vill prenumerera på schemat till din kalender-app måste du leta upp en annan länk. Gå via Anpassa > Exportera > Länk för prenumeration…

image3

Fler vettiga genvägar? Välj själv vad du vill lägga till. Kanske en direktlänk till just din kurs på StudentAdmin?

En helt ok webbsida!

En korrekt webbsida har lite mer kod och specifikationer än du hunnit få med hittills.  Dags för det sista viktiga:

Nu ska du lägga till

  • Elementet doctype
    <!DOCTYPE html>
    som ska stå först och hjälper webbläsaren att tolka resten av sidan på rätt sätt.
  • Elementet meta
    <meta charset=”utf-8″>
    som ska placeras inom <head> </head> och talar om för webbläsaren vilken teckenkodning du använder

Spara och kolla igen. Om sidan var ok förut så ska den vara likadan nu.

notepad6
webb6

Alla goda ting är tre!

Missa inte att webbsidan egentligen har 3 ansikten: kod, synlig webbsida, API.

För att göra exemplet tydligare har jag

1. lagt in en <p>-tagg för paragraph, som ger nytt stycke runt texten ”Några genvägar”

2. lagt in länkarna i en punktlista som byggs av elementen <ul> (unordered list) och <li> (list item)

kod9
webb9
api9

Dags att publicera

Dags att publicera på webben på riktigt. I kursen kommer ni antagligen att ha egna domäner men då dessa inte är klara än(?) lägger vi på vårt eget nätverk som har en mapp www som speglas på webben.

För att placera filen test.html i denna mapp behöver vi använda protokollet ftp eller sftp (File transfer protocol). Läs här hur du gör. https://medieteknik.info/spara-och-flytta-filer-med-sftp/

(eller om du sitter på vårt trådbundna nätverk så lägg via filhantering i www)

För att surfa till din sida gärna med mobilen skriver du in en lite krånglig adress:

http://mi.sh.se/~sh14§§§§§§/test.html
där sh14§§§§§§ är ditt eget användarnamn och test.html är filnamnet du valde (kanske test.htm?)

Hittar du sidan?

Vi ska nu förenkla adressen.  Filer som heter t.ex. index.html, index.php eller default.htm hittas av servern även om man inte skriver in nåt filnamn alls. Nyckelordet här är index eller default

Gör så här: Gå tillbaka till din lokala version av filen och döp om det till index.html (eller index.htm). Lägg upp den via (s)ftp igen med sitt nya namn. Ta bort test.html från servern. Nu funkar det att ”bara” skriva in  http://mi.sh.se/~sh14§§§§§§ och ändå hamna rätt.

Avsluta med att spara mappen mina_webbfiler som numera innehåller filen index.html på nåt bra ställe. Gärna på vårt nätverk mifs:

  • i din mapp personligt (kan ses av andra studenter)
  • i din mapp privat (bara du kan se)
  • (filen finns redan i mappen www)

Lägga till egna fotografier

[Om du inte vill lägga upp nån bild just nu så hoppa ner till att göra genvägsikoner]

Vi ska nu länka till några av era fotografier.

Detta gör du genom att skriva en instruktion till webbläsaren att visa bilden, inga bilder kan infogas direkt i en html-fil som ju bara består av oformaterad text.

<img src=bildfilnamn.filändelse alt="beskrivande text">

betyder att webbläsaren hämtar bildfilen och visar bilden på sidan.

Citattecken eller inte runt värdet?
I ovanstående exempel används citattecken runt den beskrivande texten men inte runt bildfilens namn. Detta är korrekt. Periodvis satte man alltid ut citattecken runt värdet, men i HTML5 har man valt att dessa bara måste sättas ut när de ”behövs” t.ex. när värdet innehåller ett mellanslag, exempelvis som ovan: ”beskrivande text”.

Men det är tillåtet att alltid använda citattecken runt värden om man vill och de flesta (inkl bokens författare och dessa övningar) väljer att göra så för att det ska bli mer lättläst och konsekvent.  Missa inte att det blir fel om du glömmer det ena av dessa tecken och bara skriver in ett.

Byt gärna namn på de bilder så vill använda så du vet vad de föreställer (undvik versaler, åäö och mellanslag i filnamn).  Lägg dessa bilder i en egen mapp inuti mina_webbfiler som du döper till t.ex. foton eller images.
Gör så här för att lägga in bilden på sidan. Öppna din fil index.html i en texteditor t.ex. Anteckningar. Nånstans inom <body> </body> skriver du ung. så här:

<img src="foton/mitt_foto.jpg" alt="Bild av högskolan i motljus">

img betyder Image
src betyder source/källa = vilken bild ska hämtas
foton är namnet på mappen där bildfilen ligger
mitt_foto.jpg är det exakta filnamnet

alt betyder alternativ text som ska visas om bilden inte syns
”Bild av högskolan i motljus” måste stå inom citationstecken då det består av fler ord som vi binder ihop på detta vis.

Spara och titta, först i webbläsaren på datorn. Kanske bilden är för stor? Öppna i Photoshop och välj att ändra i Image > Image size. Se upp så du inte förvrider bildens proportioner.

Välj att spara igen MEN under nytt namn så du inte förstör originalet. Ändra koden så den leder till den nya bilden. Gör om du vill den lilla bilden till en länk till den stora bilden:

<a href="foton/mitt_foto.jpg">
<img src="foton/mitt_foto_mindre.jpg" alt="SH i motljus">
</a>

En bild blir länkad när <img>-taggen omges av <a href=”http://…”>och </a>. I detta fall leder länken inte till en webbsida utan bara till en större version av bilden.

Spara och kolla i webbläsaren. Om det inte funkar: Har du skrivit rätt filnamn? Ligger sidan och bilden i olika kataloger? Exemplet ovan funkar bara om sidan (index.html) ligger utanför mappen foton.

Ladda upp den nya versionen av sidan och mappen med bildfilen. Använd din mobil eller datorn för att gå till sidan http://mi.sh.se/~sh14§§§§§§§ igen och kolla att bilden syns.

Man tröttnar lätt på att skriva in denna adress. Vi kan spara den som ett bokmärke eller ännu hellre lägga till på hemskärmen i mobilen. Olika mobiler har olika sätt men vi provar nåt enkelt så länge.

Genvägsikoner till din sida

Öppna Photoshop (eller gå till webbtjänsten http://pixlr.com/editor/). Välj att skapa ett nytt dokument i storlek 96 x 96 pixlar med genomskinlig bakgrund.

image4

Rita en enkel ikon, kanske bara en bokstav på genomskinlig bakgrund?

image5

Välj Spara för webb (Spara) och spara som favicon.png (formatet png-24 eller PNG) och lägg bilden direkt i din mapp mina_webbfiler

image6

Nu ska detta få bli vår webbikon.

I sidans head-del (efter title som bör stå först) skriver du

<link rel="icon" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">

Spara och ladda upp sidan (glöm inte att bildfilen också ska laddas upp).

Prova nu att lägga till din sida på hemskärmen i mobilen. Din ikon dyker också upp i din webbläsare på datorn, kolla på flik, eller gör ett bokmärke/favorit.

Nej det funkar inte i alla mobiler, och man kan göra olika varianter för att det ska se bättre ut. Googla gärna och lös det lite mer ordentligt om du vill.

Nu har du en mycket enkel webbsida tänkt för mobil.

Kolla din webbsida så fort du får chansen från olika plattformar, webbläsare, uppkopplingar så du får förståelse för webbens styrka att presentera innehåll så vem som helst kan ta del. Du kommer att märka att det inte alltid ser likadant ut och förstå att det är en del av webbens grundläggande villkor.

Så här kanske din sida blev?