PD – kursusgang 2 Introduktion til Frames og Cascading Style Sheets

Mål Viden om Frames og deres anvendelse Viden CSS i tre niveauer  CSS egenskaber  Boks-modellen Viden om et udvalg af CSS egenskaber Overordnet viden om hvad det vil sige at programmere

VALIDERING

Standarder - igen For at sikre at alle er enige om hvordan HTML dokumenter skal opfattes og præsenteres har man indført de såkaldte HTML standarder. World Wide Web Consortium står for denne udvikling af HTML (og meget andet)

Validering Processen hvor man verificerer at et dokument overholder reglerne for sproget (XHTML) kaldes validering. Et værktøj som kan udføre en validering kaldes for en validator. Et dokument som godkendes af validerings processen siges at være validt.

Validator (X)HTML validator CSS validator Link 1Link 2

FRAMES

Frames (1) Vi har mulighed for at vise mere end et dokument af gangen i et browser-vindue Browser-vinduet opdeles i rektangulære ”vinduer” – også kaldet frames Link frameset hovedside.html menuindhold blank.htmlmenu.html

Frames (2) Vores Projekt src – hyperlink til det dokument som skal vises i en bestemt frame name – det navn vi vil bruge når vi refererer til en bestemt frame cols – hvor meget skærmplads vores frames må optage

Frames (3) Vores Menu Hjem Problemformulering … target – her angiver vi navnet på den frame hvori vores link reference skal vises

Frames (4) Advarsel – det er dog ikke alle browsere som understøtter frames  Alt som kun understøtter HTML 3.2  Pocket-pc  Opera mobil

Hvad kan en projektside bruges til? Formidling i forhold til vejledere Formidling i forhold til samarbejdspartnere Formidling i forhold til resten af verden Samlingspunkt for litteratur referencer  Emneords database Referater Definitioner af begreber Huskelister Mødeindkaldelser Andet? Link

CASCADING STYLE SHEETS

Cascading Style Sheets HTML bruges hovedsageligt til at strukturere tekst Men hvordan specificerer vi hvordan vores tekst skal præsenteres i en browser? CSS

Hvorfor CSS? Vi separerer information (tekst) og præsentation  Nemmere at ændre de to dele hver for sig  Vi kan koncentrere os om en ting af gangen  Vi kan lave konsistente ændringer i vores web dokumenter I det CSS er en standard har vi én måde at specificere præsentation på, som virker i alle browsere – sådan da :-) Link

Hvad er CSS? (1) CSS inkluderer et antal egenskaber (properties): egenskab: værdi; font-size: 38pt; Egenskaber kaldes properties/property

Hvad er CSS? (2) CSS egenskaber kan grupperes som følger:  Fonte  Farver and baggrunde  Tekst  Box’e og layout  Lister  Elementer/Tags

Hvad er CSS? (3) Der er tre niveauer af style sheets: 1. Indlejret Gælder for indholdet af et specifik element 2. Dokument Gælder for hele kroppen af et dokument 3. Ekstern Kan gælde for flere dokumenter Indlejrede style sheets har precedence (forrang) over Dokument style sheets som har precedence over Eksterne style sheets

Indlejrede style sheet definitioner <tag_navn style=”egenskab_1: værdi; egenskab_2: værdi;...” > … Eksempel: <p style=”font-size: 20pt; background-color: red;” > … Link

Dokument niveau style sheet definitioner (1) Styles på dokument niveau defineres i delen af et HTML dokument: selector { egenskab_1: værdi; egenskab_2: værdi; … } De elementer i vores HTML dokument som matcher på en selector kaldes for dennes subjects

Dokument niveau style sheet definitioner (2) Eksempel: p { font-size: 20pt; background-color: red; } Link

Eksterne style sheet definitioner (1) Eksterne styles defineres også i delen af et HTML dokument: Det eksterne style sheet er opbygger på sammen måde som indholdet af dokument niveau style sheet definitioner: selector { egenskab_1: værdi; egenskab_2: værdi; … }

Eksterne style sheet definitioner (2) Filen external_level_eks1.css: body { font-size: 20pt; background-color: red; } Link

CSS eksempel - Links (1) Styles for link tags,, er delt op i fire pseudo-klasser: a:link – gælder for ikke besøgte links a:visited – gælder for besøgte links a:hover – gælder for det link musecursoren svæver over a:active – gælder for det link der klikkes på Rækkefølgen er vigtig!

CSS eksempel - Links (2) a:link { color: green; } a:visited { color: red; } a:hover { color: blue; } a:active { color: yellow; } Link

Style classes (1) Til tider har vi behov for variationer i præsentationen af bestemte elementer Vi kan for eksempel have behov for at have forskellige slags paragraffer  Noget Tekst …  Noget Stor Tekst …  Noget Fed Tekst …

Style classes (2) … p { font-size: 26pt; } p.stor { font-size: 38pt; } p.fed { font-weight: bold; } Link

Style classes (3) Vi kan også definere generelle style classes.stor { font-size: 38pt; } … Link

Farver og baggrunde (1) Skrift farve color: en_farve; Baggrundsfarve background-color: en_farve; Baggrundsbillede background-image: url(”marble.png”);

Farver og baggrunde (2) body { color: red; background-color: black; } p { color: blue; background-color: yellow; } body { background-image: url(”url_til_et_billed.jpg/.png/.gif..”); } p { background-image: url(”url_til_et_billed.jpg/.png/.gif..”); } background-repeat: repeat | repeat-x | repeat-y | no-repeat; Link

Farver (1) Der er i alt 16 farver som det garanteres at alle browsere kan vise: black000000green silverC0C0C0lime00FF00 gray808080olive whiteFFFFFFyellowFFFF00 maroon800000navy redFF0000blue0000FF purple800080teal fuchsiaFF00FFaqua00FFFF Link

Farver (2) Vi kan også bruge talværdier i form af rgb-værdier (red,green,blue) – fra 0 til 255 Rød Tekst eller Rød Tekst eller Rød Tekst Link

Properties for fonte og tekst (1) font-family  font-family: Gill, Helvetica, sans-serif;  font-family: ’Times New Roman’, serif; font-size  font-size: 12pt;  font-size: 12px;  font-size: 150%; Link

Properties for fonte og tekst (2) font-style  font-style: normal | italic | oblique; font-variant  font-variant: normal | small-caps; font-weight  font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; Link

Properties for fonte og tekst (3) text-decoration  text-decoration: none | underline | overline | line-through | blink; text-align  text-align: left | right | center | justify; text-indent  text-indent : 10px;  text-indent : 3em; Link

Box-model (1)

Box-model (2) margin-top, margin-right, margin-bottom, margin-left, margin  margin: 12px 12px 12px 12px; padding-top, padding-right, padding-bottom, padding-left, padding  padding: 12px 12px 12px 12px; border-top, border-right, border-bottom, border-left, border  | |  border: thick solid red; Link

Box-model (3) Float er en egenskab vi oftest bruger på billeder og tabeller  float: left | right | none Og der er flere muligheder endnu – så som absolut og relativ positionering – kig på  Box model  Visual formatting model Link

og bruges når vi har behov for at specificere præsentationen af et enkelt ord eller en mindre samling af ord  har ikke noget fast defineret layout bruges når vi har behov for at specificere præsentationen af en samling af paragraffer  Vi skal altså ikke ændre i egenskaben style for hver paragraf  har ikke noget fast defineret layout Link 1Link 2

PROGRAMMERING

Programmering (1) Når vi programmerer instruerer vi computeren i at udføre algoritmer  En algoritme er essentielt set en slags kogebogsopskrift hvori man trin for trin beskriver hvad computeren skal gøre  Et program beskriver altså en fremgangsmåde (algoritme) Programbeskrivelse  Kildeprogrammet - skrevet af programmøren Programudførelse  Det kørende program - defineret af programbeskrivelsen

Programmering (2) Men, hvad er programmering så når vi arbejder med web- sider? Ved hjælp af klient-side programmering kan vi  Validere forms  Reagere på brugerinteraktion  Lave dynamisk HTML Ved hjælp af server-side programmering kan vi  Dynamisk producere HTML sider  Producere HTML sider baseret på en database

Klient-side afvikling af JavaScripts Web-server JavaScript WWW Web-browser HTML Page Web-klient

Mål Viden om Frames og deres anvendelse Viden CSS i tre niveauer  CSS egenskaber  Boks-modellen Viden om et udvalg af CSS egenskaber Overordnet viden om hvad det vil sige at programmere