Redigera HTML

Innan du börjar redigera HTML

Om man är van i att skriva HTML, kan man redigera HTML i redigeringsverktyget. Gör så här:

1. I innehållsredigeraren, klicka på </> till höger under redigeringsrutan.
2. Redigera HTML koden
3. Klicka på </> igen, för att byta tillbaka till det vanliga redigeringsverktyget.

Spara ofta och regelbundet

OBS: Det som syns när man redigerar är inte alltid slutresultatet när man sedan sparar sidan. Det är viktigt att dubbelkolla hur sidan visas när man sparar.

Om något blir fel eller om koden bryts kan man alltid gå in i sidhistoriken och återställa det man sparade förut. Därför är det viktigt att spara ofta och regelbundet. Obs! Man kan inte återställa kursöversikten i sidhistorik. Skapa alltid en sandbox-sida om du vill ändra något på kursöversikten.

Allt HTML fungerar inte i appen

Det är en bra idé att ha Canvas-appen öppen medan du redigerar i HTML för att se hur det ser ut i appen. Sidor som ser fantastiska ut på datorn kanske inte fungerar alls i appen.

Färger och hexkoder

Vid behov, kan man hitta andra färgkoder med detta färgverktyg. Links to an external site.

Avdelare

Ett av de mest användbara kodelementen i Studium är avdelare (eller raka streck). De fungerar utmärkt för att bryta upp en sida i mer hanterbara delar. Kopiera koden i gråa rutorna och klistra in i HTML-redigeraren där du vill ha det.

Tunn

<hr />

Tjock

<hr style="border: 1px solid #000000;" />

I appen: Fungerar likadant.

Skriva programkod

Förformaterad text innebär att webbläsaren visar texten som har skrivits i HTML-koden exakt som man skrivit, d.v.s. mellanslag, radbrytningar och tabbar styr utseenden. Texten kommer då att använda ett typsnitt med fast teckenbredd (Courier New). Denna passar bra då man vill skriva programkod t.ex. Taggarna <pre> och </pre> används för detta.

Exempel:

<pre>
int max_av_3 ( int a, int b, int c )
{
  if ( a > b ) {
    if ( a > c )
      return a;
    else
      return c;
  }
  else {
    if ( b > c )
      return b;
    else
      return c;
  }  
}
</pre>

Anmärkning: Du kan även direkt i innehållsredigeraren välja förformatterad text, t.ex. genom att välja Format>Block>Förformaterade eller Format>Format>Block>Pre.

Knappar

Tycker du om den här Tjusiga knappen?

Att göra knappar är enkelt. Skapa först en länk precis som vanligt i innehållsredigeraren, byt sedan till HTML -redigeraren. Hitta länken i koden (det börjar <a href="....">) och lägg till den gulmarkerade delen som visas här:

<a class="btn" href="https://www.uu.se/">Tjusiga</a>

När du byter tillbaka till innehållsredigeraren, kommer ingenting att hända, men när du sedan sparar sidan syns knappen.

I appen: Knappar ser ut som vanliga länkar i appen.

Word-wrap

När man skapar sin kurs är det en bra idé att tänka på hur kursen ser ut på både stora och små skärmar. Vill man skapa tillgängliga sidor så är det bra att begränsa hur långt texten sträcker sig över en sida.

Kopiera denna kod och klistra in högst upp i HTML redigeraren:

<div style="max-width: 1080px;">

Kopiera denna kod och klistra in längst ner i HTML redigeraren:

</div>

I appen: Appen påverkas inte.

Rutor

På den här sidan har vi delat upp informationen i rutor för att skapa en lättförstådd ordning. Varje kod har fått sin egen ruta. Vi har också använt rutornas färger som ett tecken på svårighetsgrad. Andra exempel på hur man kan använda rutorna är som ett ställe att skriva snabb fakta eller viktig information, m.m.

Exempelkod:

Blå ruta:

<div class="content-box" style="background-color: #e5f2f8; padding: 10px 30px 10px 30px;">
Text
</div>

Röd/rosa ruta:

<div class="content-box" style="background-color: #FCE0E0; padding: 10px 30px 10px 30px;">
Text
</div>

Grå ruta:

<div class="content-box" style="background-color:  #F5F5F5; padding: 10px 30px 10px 30px;">
Text
</div>

Koden kopierar du in i HTML redigeraren och sedan klickar du tillbaka till innehållsredigeraren. Då kan du skriva din egen text i rutan och ändra textstorlek, m.m.

I appen: Fungerar likadant.

Bildtips!

Bädda in en bild i början av en paragraf.
Klicka sedan på bilden och tryck vänsterställ eller högerställ. Nu kommer din bild att placeras till vänster om paragrafen eller till höger. Se bild som exempel.

<img style="float: right; margin: 2%;" src="bild.jpeg">

Är texten för nära bilden kan du göra mellanrum i HTML-redigeraren. Kopiera gula texten ovan och klistra in i motsvarande koden i din HTML-redigerare.

I appen: Beroende på skärmstorlek så tar bilden upp hela ytan.

Bild-header

Vill du ha en bild-header på en sida så är det viktigt att den alltid sträcker sig över hela bredden på sidan (i både stora skärmar och små mobilskärmar) Därför rekommenderar vi att du ändrar följande kod (gul markerad):

<img src="bild.jpeg" width="###" height="###">

till

<img src="bild.jpeg" width="100%">

Då kommer bilden alltid justera storleken till skärmstorleken.

I appen: I appen är det här bra eftersom man slipper scrolla sida till sida för att se hela bilden.