dokumentrepresentation n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Textkodning 2 PowerPoint Presentation
Download Presentation
Textkodning 2

Loading in 2 Seconds...

play fullscreen
1 / 32

Textkodning 2 - PowerPoint PPT Presentation


  • 105 Views
  • Uploaded on

Dokumentrepresentation. Textkodning 2. Idag. Teckenuppsättningar Validering Metadata Elementen div och span Klasser och id:n CSS. Teckenuppsättningar. Varje tecken har en numerisk motsvarighet Binärt system ASCII=7 bitar (=7 positioner) 32=mellanslag (=0100000) 65=A (=1000001)

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Textkodning 2' - brick


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide2
david.gunnarsson@hb.seIdag

Teckenuppsättningar

Validering

Metadata

Elementen div och span

Klasser och id:n

CSS

teckenupps ttningar
Teckenuppsättningar
  • Varje tecken har en numerisk motsvarighet
  • Binärt system
  • ASCII=7 bitar (=7 positioner)
  • 32=mellanslag (=0100000)
  • 65=A (=1000001)
  • 97=a (=1100001)
  • 127=backsteg (=1111111)
ascii tabellen
ASCII-tabellen

32 48 0 64 @ 80 P 96 ` 112 p

33 ! 49 1 65 A 81 Q 97 a 113 q

34 " 50 2 66 B 82 R 98 b 114 r

35 # 51 3 67 C 83 S 99 c 115 s

36 $ 52 4 68 D 84 T 100 d 116 t

37 % 53 5 69 E 85 U 101 e 117 u

38 & 54 6 70 F 86 V 102 f 118 v

39 ' 55 7 71 G 87 W 103 g 119 w

40 ( 56 8 72 H 88 X 104 h 120 x

41 ) 57 9 73 I 89 Y 105 i 121 y

42 * 58 : 74 J 90 Z 106 j 122 z

43 + 59 ; 75 K 91 [ 107 k 123 {

44 , 60 < 76 L 92 ¥ 108 l 124 |

45 - 61 = 77 M 93 ] 109 m 125 }

46 . 62 > 78 N 94 ^ 110 n 126 ~

47 / 63 ? 79 O 95 _ 111 o (127 backsteg)

iso 8859
ISO 8859
  • Infoga i head: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  • ISO-8859-1 är nord- och västeuropeiska språk, även kallad Latin-1
  • Alternativt: <?xml version="1.0" encoding="iso-8859-1"?>
    • Placeras först i dokumentet
teckenentiteter
Teckenentiteter
  • Tecken som inte är definierade i ASCII kan skrivas med teckenentiteter
  • På formen &kod;
  • Exempel: å = &aring; ä = &auml; ö = &ouml; ü = &uuml; Å = &Aring; Ä = &Auml; Ö = &Ouml; Ü = &Uuml; & = &amp; mellanslag = &nbsp;
  • Ange alltid teckenuppsättning
validering
david.gunnarsson@hb.seValidering
  • På http://validator.w3.org kan en webbsida valideras
  • Kontrollerar att webbsidan är korrekt kodad enligt den DTD man har angivit i DOCTYPE
  • Varför ska en webbsida vara valid?
metadata
Metadata
  • Data om data
  • Information som beskriver information
  • Format: Fält, värde
  • <meta name="keywords" content="borås, högskola" />
  • Resource Description Framework (RDF)
  • Dublin Core
metadata1
Metadata
  • Elementet <meta> infogas i <head>

<head>

<title>Titel</title>

<meta name="author" content="David Gunnarsson" />

<meta name="keywords" content="xhtml & css 2 del 1, metadata, dublin core, css, teckenuppsättning" />

</head>

dublin core
Dublin Core
  • Dublin Core Metadata Initiative (DCMI)
  • Ett katalogiserings- och indexeringssystem för webbsidor
  • 15 fält (upphov, titel, språk, publiceringsdatum, nyckelord etc)
    • http://dublincore.org/usage/documents/overview
dublin core1
Dublin Core
  • På formen: DC.fältnamn

<meta name="DC.title" content="Dublin Core Metadata Initiative (DCMI) Home Page" />

<meta name="DC.description" content="The Dublin Core Metadata Initiative is an open forum engaged in the development of interoperable online metadata standards that support a broad range of purposes and business models..." />

<meta name="DC.date" content="2006-08-28" />

<meta name="DC.format" content="text/html" />

<meta name="DC.contributor" content="Dublin Core Metadata Initiative" />

<meta name="DC.language" content="en" />

dublin core2
Dublin Core
  • För examinationsuppgiften:
    • Identifier
    • Creator
    • Title
    • Date
    • Description
    • Subject
klasser
Klasser
  • En klass är en grupp av element som identifieras av ett klassnamn
  • Elementen kan vara av samma typ men behöver inte vara det

I XHTML-koden:

<p class="text">Text</p>

I CSS-koden:

p.text { color: blue; }

Alternativt:

.text { color: blue; }

identifierare
Identifierare
  • En identifierare refererar till exakt ett element i ett dokument

I XHTML-koden:

<span id="firstLetter">A</span>

I CSS-koden:

span#firstLetter { color: blue; font-size: 3em;}

Alternativt:

#firstLetter { color: blue; font-size: 3em;}

n r ska vad anv ndas
När ska vad användas?
  • Tumregel: använd id:n för sektioner (vanligtvis div-element)
  • id:n är också användbart för listor, särskilt länklistor
  • Använd klasser då flera element av samma typ ska ha samma visuella formatering
  • Tänk på att ett id alltid måste vara unikt!
cascading style sheets css
Cascading Style Sheets (CSS)
  • Språk för att skapa stilmallar för layoutmässig design av XHTML, HTML och XML-dokument
  • Finns i version 1 och 2 medan version 3 är under utveckling
vad kan man modifiera med css
Vad kan man modifiera med CSS?
  • Text (typsnitt, storlek, färg, stil)
  • Justering (högerställd, centrerad, vänsterställd, marginaljusterad)
  • Positionering
  • Marginaler
  • Kantlinjer (tjocklek, strecktyp, färg)
  • Bakgrundsbilder
  • Synlighet och visning
regler och selektorer
Regler och selektorer
  • Regel: direktiv som anger hur ett HTML-element ska presenteras
  • Selektor: identifierar det eller de element som skall presenteras med hjälp av en regel
  • Kontextuell selektor: identifierar ett element i en specifik kontext
regler
Regler
  • Regler skrivs på följande sätt:

selektor { egenskap: värde; }

  • Med fler än en egenskap:

selektor { egenskap1: värde; egenskap2: värde; }

  • Mer läsvänligt:

selektor {

egenskap1: värde;

egenskap2: värde;

}

selektorer
Selektorer
  • Element:
    • p { width: 200px; }
  • Klasser:
    • td.leftCol { width: 300px; background: green; }
  • Identifierare:
    • #container { witdh: 500px; }
  • Kontextuella selektorer
    • p.text img { border: 1px solid black; }
mer om regler och selektorer
Mer om regler och selektorer
  • Regel: direktiv som anger hur ett HTML-element ska presenteras
  • Selektor: identifierar det eller de element som skall presenteras med hjälp av en regel
  • Kontextuell selektor: identifierar ett element i en specifik kontext
regler1
Regler
  • Regler skrivs på följande sätt:

selektor { egenskap: värde; }

  • Med fler än en egenskap:

selektor { egenskap1: värde; egenskap2: värde; }

  • Mer läsvänligt:

selektor {

egenskap1: värde;

egenskap2: värde;

}

regler2
Regler

p {

color: blue;

font-family: verdana, arial, sans-serif;

margin-top: 40px;

margin-bottom: 20px;

border: 1px dotted black;

}

kontextuella selektorer
Dokument

Sektion 1

Sektion 2

Rubrik 1

Stycke 1

Sektion 3

<div id="container">

<div id="header"> </div>

<div id="content">

<h1>En rubrik</h1>

<p>Ett stycke text</p>

</div>

<div id="footer"> </div>

</div>

Kontextuella selektorer
kontextuella selektorer1
Kontextuella selektorer
  • div#content h1 för att peka ut rubriken
  • #content h1 fungerar lika bra

div#content h1 {

font-family: georgia;

color: green;

}

kontextuella selektorer2
Kontextuella selektorer

<ul id="navigation">

<li>

<a href="http://runeberg.org/eddan/se-01.html"> Projekt Runeberg</a>

</li>

<li>

<a href="http://www.csszengarden.com/">CSS Zen Garden</a>

</li>

<li>

<a href="http://www.w3schools.com">W3C Schools</a>

</li>

</ul>

kontextuella selektorer3
Kontextuella selektorer
  • ul#navigation li a:link för att peka ut länken

ul#navigation li a:link {

text-decoration: underline;

}

ul#navigation li a:hover {

text-decoration: none;

}

elementen div och span
Elementen div och span

<div id="container">

<div id="header">

</div>

<div id="main">

</div>

<div id="footer">

</div>

</div>

elementen div och span1
Elementen div och span

<div id="main">

<h2><span>Underrubrik</span></h2>

<p class="text">

<span class="leader">

<span class="firstLetter">L

</span>

oren ipsum

</span> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>

</div>

elementen div och span2
Elementen div och span

span.firstLetter {

font-style: italic;

font-size: 3em;

font-family: georgia, serif;

}

span.leader {

font-size: 2em;

font-family: georgia, serif;

font-variant: small-caps;

} Exempel

checklistan kontrollera att
Checklistan, kontrollera att:
  • "Citationstecken förekommer parvis"
  • {Varje vänster krullparentes svarar mot en höger krullparentes}
  • <Varje mindre än-tecken svarar mot ett större än-tecken>
  • <p>Varje starttagg svarar mot en sluttagg</p>
  • Tomma element stängs inom taggen <br />
  • Egenskaper och värden är rätt stavade:
    • Skriv color inte colour
    • Skriv center inte centre
checklistan kontrollera att1
Checklistan, kontrollera att:
  • Öppna sammansättningar är skrivna med bindestreck:
    • font-style används för font style
    • border-bottom-width används för border bottom width
    • sans-serif används för sans serif
  • Inga egenskaper eller värden innehåller mellanslag
    • Skriv 1em inte 1 em
    • Skriv 10px inte 10 px
    • Undantag - teckensnittsnamn med mellanslag omsluts av apostrofer (eller citationstecken):
      • Skriv 'trebuchet ms' iställer för trebuchet ms
      • Skriv 'times new roman' iställer för times new roman
  • Se CSS-specifikationen för tillåtna egenskaper och värden.