html for nettredaktører
DESCRIPTION
Dette er presentasjonen fra kurset mitt om HTML for nettredaktører 11. juni 2011. Dette er et halvdagskurs, et nybegynnerkurs, spesialtilpasset nettredaktørens behov for å bruke html-kode for å overstyre sitt eget CMS.TRANSCRIPT
Fredag 10. juni
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
Video the machine is using us
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
Eksempelfil
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>
<li>Punkt 1</li>
<li>Punkt2</li>
<li>Punkt3</li>
</ul>
<ol>
<li>Punkt 1</li>
<li>Punkt2</li>
<li>Punkt3</li>
</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
Oppsummering
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>