Forelesning HTML og XHTML

Hvordan fungerer www:

Nyttige programmer

Studentenes webserver: ASK

Hvordan koble seg til Ask?

Nyttige linker

Hva erXHTML og CSS

HTML – Hyper Text Markup Language. Skape struktur og mening av documenter og linke dem sammen
XHTML – eXtensibleHTML. HTML reformert som XML. En modern versjon av HTML
CSS (Cascading Style Sheets) et språk som brukes til å presentere en webside.

Web standarder

W3C – World Wide Web Consortium. http://www.w3.org/

HTML = CONTENT, CSS = PRESENTATION

Skille på:

innhold og presentasjon
mening og presentasjon
struktur og presentasjon.

Strukturen på et XHTML dokument

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<title> </title>
</head>

<body>
</body>
</html>

mal.html

Dette er den riktige måten skrive et xhtml dokument.

Dessverre viser det seg at IE har problemer med å tolke encodingen i xml headeren <?xml version="1.0" encoding="utf-8"?>

Vi skal nedenfor se på en alternativ måte å løse dette på.

Elementære tagger

<p>Dette er et avsnitt</p>

<p>Dette er et avsnitt til</p>

<h1>Dette er en tittel på nivå1</h1>

<h2>Dette er en tittel på nivå2</h2>

<h3>Dette er en tittel på nivå3</h3>

<h4>Dette er en tittel på nivå4</h4>

<h5>Dette er en tittel på nivå5</h5>

<h6>Dette er en tittel på nivå6</h6>

<br /> Linjeskift

<hr /> Horisontal linje

Linker

<a href="url">TEKST</a>

<a href="http://www.hiof.no/">Besøk HiØ</a>

Lister

<ul>
  <li>Kaffe</li>
  <li>Melk</li>
</ul>

Kaffe
Melk

<ol>
  <li>Kaffe</li>
  <li>Melk</li>
</ol>

Kaffe
Melk

Karaktersett

Hva er et karaktersett

Når programvare skal behandle et tegn må programmet må få tak i riktig tegnebeskrivelse slik at driveren som framstiller tegnet på det aktuell mediet (skjerm eller skriver) viser rett tegn på rett sted.

Aktuelle karaktersett er: ISO-8859-1, UTF-8, eller UTF-16.

Bruk UTF-8

Hust at du må spare dokumentet i riktig karaktersett

<?xml version="1.0" encoding="utf-8"?>

<?xml version="1.0" encoding="ISO-8859-1"?>

Eksempler: utf8.html, utf16.html, iso.html

Dette fungerer dårlig med IE som ikke alltid setter riktig karakterkoding.

En løsning på problemet er å sette encoding som html 4.0

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<title> </title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>

<body>
</body>
</html>

Eksempler: modifisertutf8.html, modifisertutf16.html, modifisertiso.html

En ny og mofifisert mal: mal2.html

DTD - Document Type Definitions

DTD spesifiserer syntaksen til en webside i SGML
En XHTML DTD beskriver i et presist språk syntaksen og gramatikken til XHTML markup.

XHTML kommer som tre dokumenttyper:

STRICT
TRANSITIONAL
FRAMESET

Dokumenttypen skal deklareres øverst på XHTML-dokumentet slik at den er det første som leses.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Stilsett - CSS

Når en browser leser et style sheet, så vil den formatere dokumentene etter de beskrivelse som finnes i style sheet.

Det fines tre måter å sette inn style sheets på i et html-dokument:

Eksterne Style Sheet
Interne Style Sheet
Inline Style Sheet

Eksterne Style Sheet

Eksternt Style Sheet brukes når samme stilsett skal anvendes på mange sider. Stilsettet legges da i en egen side med extension .css
Med eksternt Style Sheet kan du endre utseendet en hel web site ved å endre i en fil.
Hver side må ha en link til aktuelle Style Sheet

Følgende attributter brukes:

rel="stylesheet" : Beskriver relasjonen mellom aktuelle dokument og mål dokumentet.

type="text/css" : Beskriver MIME-typen til URL

href="minstil.css" : URL til stilsettet

<head>
  <link rel="stylesheet" type="text/css" href="minstil.css /">
</head>

Eksempel stilsett

h1, h2, h3 {
  color:green;
}

h1 {
  margin-left:40px;
}

p {
  margin-left:20px;
}

test1.html, minstil1.css

CSS-Syntax

CSS syntaksen består av tre deler: en selektor, en egenskap(property) og en verdi:

selektor {property: verdi}

Selektoren er vanligvis det HTML element/tag som man ønsker å definere,
property/egenskap er det attributtet som man ønsker å endre,
og hver property/egenskap kan motta en verdi.

Selektoren kan også være en klassifikasjon som vi skal se på senere.

body {color: black}

Hvis verdien består av flere ord skal de stå i anførselstegn:

p {font-family: "sans serif"}

Hvis man vil spesifisere flere enn en property, så skal hver property separeres med et semikolon. Hva viser dette eksempelet?

p {text-align:center;color:red}

For å gjøre stildefinisjonen mer leselig kan man beskrive en property for hver linje:

p{
  text-align: center;
  color: black;
  font-family: arial
}

Gruppering

Man kan gruppere flere selektorer. Hver selektor sepreres med et komma. Hva gjør følgende eksempel?

h1,h2,h3,h4,h5,h6 
{
  color: green
}