HTML for nettredaktører

Hvem er jeg?
 Kenneth Eriksen, 37 år
 Siviløkonom og daglig leder i Webgruppen
 Fagansvarlig for webanalyse og sosiale medier

 Har bl.a. vært nettredaktør, intranettredaktør og
webanalytiker i DnB NOR, konseptutvikler for internett i
Hakon Gruppen og Netaxept

 Kunne programmere (BASIC) da jeg var 10 år
 Lærte HTML i påsken 1996

Hvorfor må vi kunne HTML ?
 HTML styrer struktur og form

 Vi må kunne HTML for å kunne redigere
 HTML for å justere og finpusse

 HTML for å overstyre CMS

Mål for dagen

 Kunne bruke aktivt noen utvalgte og viktige tagger
 Hele den siste timen er viet tabeller

 Ikke lære overfladisk om alle mulighetene
 Ikke lære å lage websider fra scratch

Basisstruktur på HTML
 Start-tag + slutt-tag
 <> </>
 <p> </p>

 En tagg med både start og slutt
 < />
 <br />
 <meta content=”” name=”” />

Sideoppbygning
 HTML + språkdefinisjon

 Header

 Body

 CSS

Viktige tagger
 <p>
 <br/>
 <b> eller <strong>
 <u>
 <center>
 <img src=”” />
 <a href=””>
 <font>
 <ul> eller <ol> + <li>

Praktisk oppgave - notepad
 Åpne notepad

 Lag følgende side …

 Mac’ere … last opp i TextEdit
 Lagre i TextEdit som Webarchive
 Åpne i Safari

Attributter
 <img src=””>
 Width=””
 Height=””
 Align=””

 Border
 Vspace
 Hspace

Endre teksten

 <b>
 <center>
 <font> </font>
 Size
 Color

 <H2> Overskrift </H2>

Litt mer avansert…
 Tooltip på lenke (title=””)

 Target (åpner lenken i ny fane eller vindu)
 _blank
 _new

 Tekst på bilde (alt=””)
 Lenke på bilde ( <a href=””> <img src=”” /> </a> )

Punktlister
 <ul>  <ol>
 <li>Punkt 1</li>  <li>Punkt 1</li>
 <li>Punkt2</li>  <li>Punkt2</li>
 <li>Punkt3</li>  <li>Punkt3</li>
 </ul>  </ol>

Legg til:
Under bildet, men over lenken:

Prøv disse kursene:
 Skriving for web og sosiale medier
 Retotrikk og overtalelse på nett
 Facebook for salg om markedsføring

Table – tabell på norsk
<table>
<tr>
<td></td> <td> </td>
</tr>
<tr>
<td> </td> <td> </td>
</tr>
</table>

Få luft inn i tabellen
 Cellspacing og Cellpadding

Justeringer, vertikalt og horisontalt
 align og valign

 <td align=”left, right, center” valign=”top, middle”>

Slå sammen celler
 colspan og rowspan

Viktige tagger
 <p>
 <br/>
 <b> eller <strong>
 <center>
 <img src=”” />
 <a href=””>
 <font>
 <ul> eller <ol> + <li>

Tabeller er litt vanskeligere
<table>
<tr>
<td> </td>
</tr>
</table>

Takk for idag
Kunnskapskilder for HTML-kode:

 Http://www.htmlcodetutorial.com/quicklist.html
 http://www.htmlcodetutorial.com/characterentities.html
 http://www.w3schools.com/tags/default.asp
 http://www.webmonkey.com/2010/02/html_cheatsheet/
 http://www.yourhtmlsource.com/text/specialcharacters.html

 http://www.coffeecup.com/html-editor/

Eksempelkode
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <HEAD>

 <!-- Det som står i headingen vises som hovedregel ikke på websiden.
 Headingen inkluderer viktig informasjon til nettleseren, om form på sidene,
 f.eks. CSS/stylesheet, meta description og annen meta-informasjon.

 Headingen inkluderer også Sideittelen --!>

 <TITLE> Dette er sidetittelen </TITLE>

 </HEAD>

 <BODY>

 <h5>Overskrift</h5>
 <p><b>HTML-koding</b> er en enkelt form for programmering.<br/>
 Likevel, for den som ikke kan det ennå kunne det like gjerne vært gresk.<br/>
 Målet idag er å komme over på den "rette siden" ;-)</p>

 <p>Under kan dere legge inn et lite bilde av greske eller egyptiske bokstaver.<br />
 <img border="0" hspace="20" vspace="20" src="http://www.ibiblio.org/koine/greek/lessons/drawgreek.gif" height="100" align="left" alt="her forteller jeg mer om bildet" />
 </p>

 <ul>
 <li>Punkt 1</li>
 <li>Punkt2</li>
 <li>Punkt3</li>
 </ul>

 <a title="her kan jeg si mer om lenken" target="_new" href="http://www.webgruppen.no">Klikk her for å gå til Webgruppens nettside</a>

 </BODY>

 </html>

HTML for nettredaktører

More Related Content

Viewers also liked (8)

Similar to HTML for nettredaktører (20)

More from Kenneth Eriksen (20)

HTML for nettredaktører