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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Similar to HTML for nettredaktører

Similar to HTML for nettredaktører (20)

More from Kenneth Eriksen

More from Kenneth Eriksen (20)

HTML for nettredaktører