BROWSERE OG PROGRAMMER... 2 BROWSERE A* SIMPLE TEKSBEHANDLINGSPROGRAMMER B* WYSIWYG - DREAMWEAVER... 2

Transkript

1 Indholdsfortegnelse BROWSERE OG PROGRAMMER... 2 BROWSERE A* SIMPLE TEKSBEHANDLINGSPROGRAMMER B* WYSIWYG - DREAMWEAVER... 2 HTML OG CSS... 3 HTML: HYPERTEXT MARKUP LANGUAGE... 3 BILAG *2 HTML/CSS... 3 HTML TAGS... 4 *3A <HTML>, <HEAD>, <BODY>... 4 TYPISK OPBYGNING AF HTML-DOKUMENT:... 5 *3B EKSEMPLER PÅ HTML TAGS... 5 Bloktags... 7 Inline-tags... 7 *4 SPECIALTEGN... 8 *5 HTML LINKS... 9 *5E LINKS OG DERES UDSEENDE Aktive, ubesøgte, besøgte links og mouse over Ubesøgte links (a:link) Besøgte links (a:visited) Aktive links (a:active) Mouse over (a:hover) *6 INDSÆTTE BILLEDE Billeder og mappestruktur *7 MAPPE- & FILSTRUKTUR BILAG *8 CSS CASCADING STYLE SHEETS DIV ELEMENTER SYNTAKS I CSS STYLESHEETS: INTERNT EKSTERNT INLINE Internt stylesheet Eksternt stylesheet Inline styles BILAG *9 BOKSMODELLEN; PADDING, MARGIN OG BORDER BILAG *10 FLOAT OG CLEAR Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 1

2 Browsere og programmer Browsere En browser er det program, du bruger, når du surfer på Internettet, og som gør det muligt at se websteder. Eksempler på hyppigt brugte browsere: Internet Explorer, Google Chrome, Mozilla Firefox, Safari og Opera. De forskellige browsere kan fortolke og fremstille det samme html-dokument på forskellige måder. Derfor skal du løbende tjekke din webside i forskellige browsere. 1A* Simple teksbehandlingsprogrammer Det eneste, du behøver, for at opbygge et websted er en browser og et simpelt tekstbehandlingsprogram. Fx Windows: Notepad/Notesblok, der som regel ligger i startmenuen under Programs/Programmer under punktet Accessories/Tilbehør. To programmer, der kan det meste af, hvad Dreamweaver kan, og som også er gratis: Notepad++ og Netbeans MAC: TextEdit, der er indbygget i Mac en, og som findes i mappen Programmer. Unix/Linux: Pico, Gedit, Netbeans, Bluefish 1B* WYSIWYG - Dreamweaver Dreamweaver en del af programpakken Adobe Creative Suite. Det er et såkaldt What you see is what you get program (WYSIWYG). Dvs., at du kan se udseendet på det, du laver og ikke kun koderne. Dreamweaver fungerer ens på både Windows- og Mac-computere. Der findes andre grafiske editorer til at opbygge og vedligeholde websteder. Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 2

3 BILAG *2 HTML/CSS HTML og CSS HTML (Hyper Text Markup Language) er det "sprog", som bestemmer strukturen på en webside. HTML fortæller om elementernes betydning i dokumentet, overskrifter, brødtekst, links osv. CSS (Cascading Style Sheets) giver form og design til de forskellige elementer på websiden. CSS supplerer HTML og indgår i en vekselvirkning med HTML. HTML: HyperText Markup Language HTML er en forkortelse af HyperText Mark-up Language. Hyper er noget fx tekst der kan linkes med noget andet. Før i tiden kørte et computerprogram lineært: Dvs., når det havde udført en handling, gik det automatisk til den næste linje i rækken og derfra til næste osv. Med HTML føres man ikke automatisk fra A til B i en forudbestemt rækkefølge. Derimod kan man springe frem og tilbage, både på et websted og mellem flere websteder ved at klikke på links. Text "tekst". Mark-up er det, man gør med fx billeder eller tekst: man markerer teksten op, på samme måde som man sætter et dokument op i et tekstbehandlingsprogram med overskrifter og f.eks. fed tekst. Dette gøres med tags. F.eks. <em>, der viser teksten i kursiv. Language betyder "sprog". HTML er et næsten ganske almindeligt sprog (engelsk) - HTML er ikke et programmeringssprog, men en form for opmærkningssprog! Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 3

4 BILAG *3 HTML/CSS HTML Tags "Tags" er det browseren læser og oversætter inden, den viser webstedet. Tags betyder etiket eller mærkat. Tags kaldes også for markører. Tags med forskellige kommandoer fortæller browseren, hvilken betydning de enkelte dele har. HTML tags er omgivet af < og >. De kommer oftest i par, hvor den første fx <h1> (overskrift 1) kaldes starttag eller startmarkør og det sidste </h1> kaldes sluttag eller slutmarkør. Al information mellem et starttag og sluttag er underlagt den kommando, der står i tag et. Der findes enkelte tags, der både startes og sluttes i samme tag. Disse tags indeholder kommandoer, der ikke er knyttet til et specielt stykke tekst, men er en enkeltstående kommando - f.eks. image (billede) <img/>. Tags skrives med små bogstaver. *3A <html>, <head>, <body> HTML TAGGET <html> </html> En html side starter altid med <html> og slutter med </html> for at fortælle browseren, hvad det er for et sprog, der skrives i. Imellem <html> og </html> er der en head-del og en body-del. HEAD-DELEN <head> </head> En websides head-del indeholder alt det, som ikke vises direkte på den færdige side. Eksempler: <title> </title> indkapsler titlen på din side. Titlen er den, som vises som et faneblad i toppen af browser-vinduet, når siden loades. Fx: Opgave 1: Medieproduktion. Meta-tags bruges blandt andet til at forbedre rangeringen på søgemaskiner. Javascript, som er et programmeringssprog til mere komplekse HTML-sider. CSS (cascading style sheets). CSS bruges til at formgive/layoute websiden. BODY-DELEN <body> </body> Indeholder tags og det (fx tekst/billeder/lyd), som skal fremgå på websiden. Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 4

5 BILAG *3 HTML/CSS Typisk opbygning af HTML-dokument: <html> <head> <title> html </title> </head> <body> <h1> Dette er en overskrift på niveau 1 </h1> <p>pragraf/brødtekst er den form for tekst som der er mest af </p> <h2> h2 er mindre end h1 som overskrift </h2> <p>dette er endnu et afsnit med brødtekst </p> </body> </html> *3B Eksempler på HTML tags (inline-)tag et <strong> fortæller browseren, at alt der står mellem <strong> og </strong> skal skrives med fed skrift. Eksempel 1: <strong>dette skal stå med fed</strong> Vil se sådan ud i browseren: Dette skal stå med fed <h1>, <h2> og <h3> (blok-)tagsene <h1>, <h2>, <h3> osv. fortæller browseren, at den skal skrive en overskrift (h står for "heading" = overskrift), hvor <h1> er den største (og vigtigste), <h2> den næststørste osv. Eksempel 2: <h1>dette er en stor overskrift</h1> <h2>dette er en lidt mindre overskrift</h2> Vil se sådan ud i browseren: Dette er en stor overskrift Dette er en lidt mindre overskrift Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 5

6 BILAG *3 HTML/CSS *3C Tags og attributer Et HTML-tag kan forsynes med tilføjelser - attributter - som præciserer dens egenskaber. F.eks. er det nødvendigt at tilføje attributter, når man opretter hyperlinks eller indsætter et billede. En attribut er en tilføjelse til et tag. Et tag kan godt have mange attributter, men en attribut kan ikke stå alene uden et tag. Der skal altid være ét mellemrum mellem tag og attribut og mellem flere attributter. Eksempel på tags med tilhørende attributter <img src="seo.jpg" alt="billede med alternate tekst"/> src (source) og alt (alternate text) er attributter til <img> (image). Tilsammen angiver de, at her skal der være et billede. <h1 class="funky">overskrift med en attribut</h1> Ved at tilføje elementer en attribut, er det ligesom i eksemplet muligt at style dem ved hjælp af CSS *3D HTML tags Ændring af tekstformat <sub>text</sub> <sup>text</sup> <pre>text</pre> <em>text</em> <strong>text</strong> Eksempler på inline-tags sænker tekst og gør den mindre hæver tekst og gør den mindre skriver tekst nøjagtigt som den er - også mellemrum. gør normalt teksten kursiv gør normalt teksten fed Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 6

7 BILAG *3 HTML/CSS Kontrol af layout Eksempler på blok-tags HTML <p>tekst</p> tekst<br/> <nobr>tekst</nobr> tekst</br> FORKLARING Indsætter paragraph-break efter teksten. (2 linieskift). Indsætter et enkelt linieskift, hvor tagget sættes ind. Slår automatiske linieskift fra Tillader browseren at indsætte et linieskift *3E Blok-tags og inline-tags HTML skelnes mellem blok- og inline-tags Bloktags Her er nogle eksempler på bloktags: <h1> Overskrift 1</h1> h2, h3, h4, h5 og h6 <p>paragraf (afsnit)</p> <address>teksten er kursiv </address> Dette tag viser skriften i kursiv og er beregnet til adresselinjer. <div> Page division </div> Div står for en page division Inline-tags Inline tags må gerne bruges indenfor et område, der er omsluttet af bloktags. Eksempel på en inline-tag: <em> teksten er hermed kursiv </em> Dette tag sætter også teksten i kursiv på samme måde som bloktag et <address>, men dette tag er et inline-tag og kan derfor godt anvendes indenfor en bloktag ets virkeområde. <strong> fed skrift (bold) </strong> Dette tag fremhæver teksten og optegner den med fed. Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 7

8 BILAG *4 HTML/CSS *4 Specialtegn Bogstaverne æ, ø og å fungerer kun i danske browsere. Der findes en lang række koder, som browsere forstår, og som optegner specialtegn korrekt. Alle koder for specialtegn begynder med tegnet & og afsluttes med tegnet ; Hvis du skal lave et mellemrum, skal du skrive som står for non breaking space. (Ordmellemrum er defineret i bloktags ne fx <h1>, <div> og<p>) Tegnet & (ampersand) er også et specielt tegn, så hvis man har brug for at få browseren til at skrive dette tegn, skal man skrive: & Det kan ofte betale sig at bruge funktionen søg/erstat i et andet program inden teksten kopieres over i HTML-dokumentet. Liste med nogle få af de specialtegn, der findes Tegn Navn Kode ASCII-kode æ Lille æ (ae-ligatur) æ æ Æ Stort Æ Æ Æ ø Lille ø (o slash) ø ø Ø Stort Ø Ø Ø å Lille å (a ring) å å Å Stort Å Å Å Mellemrum Mellemrum (non breaking space) & &-tegnet (ampersand) & & Copyright < Mindre end (less than) ⁢ < > Større end (greater than) > Snabel-a I fx programmet Dreamweaver defineres specialtegn og ordmellemrum automatisk. Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 8

9 BILAG *5 HTML/CSS *5 HTML Links Links er den mest fundamentale del af World Wide Web. Det er links, der binder det hele sammen. Man kan betragte et websted som et stor kludetæppe, der er sammenføjet af mange indbyrdes forbundne elementer. En webside kan indeholde links til andre web-steder, som man selv har oprettet, til eksterne web-sider, til billeder og til en række andre filer. Alt dette skaber det samlede site, som browseren optegner. Du skal bruge tag et <a> ('anchor') og attributten 'href' (hyper reference). Attributten href= skal stå i start-tag et og udfyldes med destinationen for linket. Et anker (anchor) må ikke lægges udenpå et blokelement - det SKAL ligge inderst, ellers kan siden ikke passere en valideringstest. Eksempel på et anker i forbindelse med en overskrift: <h1><a href="#nytstedpaasiden">overskrift med internt link</a></h1> Eksempler på blokelementer: <div>div-box</div>, <p>paragraf</p>, <blockquote>indrykning</blockquote>, <pre></pre>, table></table>, <caption></caption>, <tr></tr>, <th></th>, <td></td>, <ul>uordnet (unummereret) liste</ul>, <ol>ordnet liste</ol>, <li></li>, <dl></dl>, <dt></dt>, <dd></dd> Eksempler på forskellige typer links på dit websted: Interne links Links til ankre på den samme side Lokale links Links til steder indenfor det samme websted Globale links Links til sider udenfor det lokale websted Links til mail Links til mailprogram Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 9

10 BILAG *5 HTML/CSS *5A Interne links Du kan indsætte et internt link, der gør det muligt at hoppe fra ét sted på siden til et andet på samme side. Du indsætter et anker på bestemmelsesstedet og et link der, hvor der skal hoppes fra. Du kan fx lave et link, der hopper til bestemte afsnit eller fra bunden af siden til toppen. For at lave en link til et andet sted på samme side, skal dette andet sted først defineres - det skal tildeles en adresse. Det gøres ved at indsætte denne kode om f.eks. et enkelt ord i den øverste linje i det nye sted (bestemmelsesstedet): <a name= navn_på_link_som_der_hoppes_fra id="nytstedpaasiden">hop til dette bestemmelsessted</a> Denne kode kaldes et anker (named anchor). Derefter laves adresseringen til stedet: <a href="#nytstedpaasiden">hop herfra til bestemmelsesstedet</a> Tegnet # skal altid anbringes foran adressen til et "nyt sted på siden". *5B Lokale links Lokale links er links til andre sider indenfor det samme websted. <a href= filnavn.html >Her placeres det man skal klikke på for at komme til linket. fx. tekst/foto/symbol</a> Koden ovenfor består altså af tag et <a> og attributten 'href'. Attributten efterfølges af et lighedstegn =, og derefter kommer der en værdi: html/filnavn.html sat i anførselstegntegn. Tag og attribut står indenfor den samme kodeparentes og danner tilsammen en kode. Kodens afslutning skal blot rumme tag ets navn med en skråstreg foran, som det kan ses i eksemplet ovenfor. Det, der står imellem tag et og afslutningen, bliver vist på siden som noget, der kan klikkes på. Værdien består her af den sti browseren skal følge for at finde den linkede fil. En værdi skal altid stå i anførselstegn. Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 10

11 BILAG *5 HTML/CSS Når siderne ligger i samme niveau: <a href="nextpage.html">et link til næste side</a> Når næste side ligger et niveau lavere: <a href="underfolder/nextpage.html">et link til næste side</a> Når næste side ligger et niveau over: <a href="../nextpage.html">et link til næste side</a> Når næste side ligger 2 niveauer over: <a href="../../nextpage.html">et link til næste side</a> *5C Globale links Globale links er links til en anden side på internettet altså websider uden for den lokale webside. Eksempel på et link til KTS s webside (globalt link): <a href=" Københavns Tekniske Skole </a> *5D Link til mailprogram <a href="mailto: zgu@kts.dk">mail til Zita</a> *5E Links og deres udseende Aktive, ubesøgte, besøgte links og mouse over Selektoren links giver forskellige muligheder for at style links. Dvs. indsætte forskellige egenskaber i forbindelse med links, alt efter om linket er aktivt, ubesøgt, besøgt eller musen føres hen over. Et almindeligt link i Html defineres med <a> og css-reglen kan se sådan ud: a { color: #990000; } Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 11

12 Ubesøgte links (a:link) link angiver egenskaben for alle ubesøgte links. I eksemplet får alle links, der endnu ikke er klikket på en rød baggrund: a:link { background-color: #990000; text-decoration: none; } Besøgte links (a:visited) visited angiver egenskaben for alle besøgte links. I eksemplet får alle links, der er klikket på/besøgt blå tekst: a:visited { color: #blue; text-decoration: none; } Aktive links (a:active) active angiver egenskaben ved et link, der aktiveres af en bruger, eksempelvis når man klikker med musen på linket. I eksemplet får alle links, der aktiveres en rød baggrundsfarve: a:active { background-color: #00CC00; text-decoration: none; } Mouse over (a:hover) hover angiver egenskaben for, når musen føres over links. I eksemplet bliver linket rødt, og der kommer en streg under, til det anvendes egenskaben text-decoration: a:hover { color: #red; text-decoration: underline; } Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 12

13 BILAG *6 HTML/CSS *6 Indsætte billede De eneste billedformater, man kan bruge på internettet er JPEG, GIF eller PNG. Tag et for billeder hedder <img/>. <img /> er en forkortelse for image. Dette tag kræver ikke en afslutningskode, men har derfor en skråstreg til sidst. Tag et skal have to attributter med tilhørende værdier. Attributten src viser, hvilket billede der skal indsættes, og hvor billedet ligger <img src="billede.jpg" /> Attributten src betyder source (kilde) angiver billeddokumentets navn. *6A Beskrivende tekst til billedet Attributten alt (alternate text) indeholder en beskrivende tekst til brug for søgemaskiner. Teksten vil også være synlig, hvis browseren ikke kan vise billeder. Det er også en hjælp til synshæmmede, som automatisk kan få læst teksten op. <img src="billede.jpg" alt= Billede af rummet /> *6B Højde (height), bredde (width) og border på billedet <img src= billede.jpg alt= Billede af rummet height= 143 width= 725 border= 0 /> Angivelsen af bredde (width) og højde (height) er ikke noget du skal ændre i dit HTML-dokument. Ønsker du en anden størrelse eller en anden beskæring på billedet, skal du rette det i et billedbehandlingsprogram fx Photoshop. Attributten border indrammer billedet. Værdien 0 tvinger alle browsere til ikke at vise en ramme. Billeder og mappestruktur Billedfilerne gemmes i en separat mappe (fx images) i rootfolderen (web-mappen). HTML-kode og tekst er én fil, men billedet på siden er en anden fil. På skærmen ser en side ud til at være ét dokument med tekst, billeder og grafik, men det er flere forskellige filer, der er lænket sammen. Det er først, når browseren åbner HTML-dokumentet, at billedet bliver hentet ind og anbragt i sammenhæng med sidens øvrige indhold. Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 13

14 BILAG *7 HTML/CSS *7 Mappe- & filstruktur Der er mange måder at holde orden på HTML-dokumenter, billedfiler, CSS-regler m.m. Du skal forvente at oprette flere mapper under WI grundforløb f.eks: HTML 1, HTML 2, Flash, Billedbehandling, PHP og Webdesign. Hvis opgave 1 laves under HTML modul 1 forløbet, placeres mappen i en mappe, som du kalder HTML_1 Denne grundmodel skal bruges som udgangspunkt på WI grundforløb: Opgave_1 Web Her placeres 'Html' og 'Images' samt index.html Work Her placeres alt ubearbejdet materiale. Fx. billeder og tekster Html Her placeres html dokumenterne (undtaget index.html) Images Her placeres billeder (*.jpg, *.png, *.gif) CSS Her placeres CSS-dokumenter Alle filerne ligger på din arbejdscomputer, mens du arbejder på websiden. Når websiden er færdig, up-loades den til en web-server, og herfra kan alle se det på deres egen computer. Der er altså i princippet mindst 3 computere indblandet, når du arbejder med web-sites: Arbejds pc Webserver Bruger pc Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 14

15 BILAG *7 HTML/CSS Hvis du på din arbejdscomputer har linket til et billede eller en HTML-fil, som ligger udenfor din web-mappe, så sker der i første omgang ikke noget ved det (hvis du bare har det rigtige filnavn og sti-betegnelse). På din egen computer ser det helt rigtigt ud. Men når du up-loader websiden til web-serveren, kommer filerne udenfor din sitemappe ikke med. Når brugeren så åbner siden, vil der være links, der ikke dur, og billeder der ikke bliver vist. Valg af skriftfonte V Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 15

16 BILAG *8 HTML/CSS BILAG *8 CSS Cascading Style Sheets CSS er vejen til at formgive eller layoute websider. Hvor html er strukturen, er CSS udseendet på en webside. Cascading kan oversættes til kaskade eller et væld. En style er en regel, der beskriver, hvordan et stykke html-kode skal se ud. Et sheet er en samling af disse regler. Denne samling skrives typisk i et dokument for sig selv, men kan også stå i den enkelte html-fil. Et væld af regler, der hver især beskriver udseendet af nogle elementer på en webside I et style sheet defineres fx hvilken størrelse, farve og hvilken font (skrifttype) overskrifterne skal have. Hvilken baggrundsfarve og hvordan links skal se ud. På den måde adskilles form og indhold. Div elementer <div>-tag et står for (page)division (sideinddeling). Den kan bruges til at opdele en side i mindre sektioner, som så kan placeres og formgives på et utal af forskellige måder. Det er en slags containere, som kan rumme tekst og billeder m.v. Ved hjælp af CSS defineres <div> ens baggrund, padding, margin, borders. De kan flyttes rundt på siden. Det er et meget simpelt lille stykke HTML-kode, men man bruger ofte mange på samme side, så derfor er det nyttigt at navngive hver enkelt af sine div-elementer, og til dette bruger man blandt andet HTML-attributten id, f.eks: <div id= stor > indhold</div> <div id= lille >Mere indhold</div> Når man har mange div-elementer på en side, er det kun attributten id, der gør det muligt at skelne mellem dem. Derfor er det den, man bruger som selektor for CSSkoderne. Id -attributten udgør en særlig kategori af selektorer som i CSS-koden skrives med en havelåge foran: #stor { } #lille { } Div er et blok-tag og kan derfor have en højde og bredde, der er større end indholdet. Formgivning og placering m.v. defineres med CSS-kode, og her er der rigtig mange muligheder. Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 16

17 BILAG *8 HTML/CSS Syntaks i CSS I CSS starter man altid med navnet på den Html markering, som stylesheet et skal påvirke, derefter angives, hvilken egenskab man ønsker at ændre på og til sidst angives, hvilken værdi markeringen skal antage. Den grundlæggende model: Selector {egenskab: værdi;} Først markeringen, derefter egenskaben, og til sidst, hvilken værdi egenskaben skal have. Hvis man fx ønsker at centrere teksten i alle <h2> tags, skrives det sådan i dit stylesheet: h2 { text-align: center; } Det sidste tegn i kodelinien er et semi-colon (;). Det markerer, at definitionen for egenskaben er slut og en ny kan begynde. Dvs. hvis der skal tilføjes fx en farve til den centrerede tekst i <h2> tagget kan det tilføjes sådan: h2 { text-align: center; color: red; } Stylesheets: internt eksternt inline Internt stylesheet internt stylesheet gælder kun for den side det er på. Stylesheet et skal placeres i head-delen: <head> <style type= text/css > p { text-align: center; color: red; } </style> </head> Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 17

18 Eksternt stylesheet Denne metode er mest anbefalelsesværdig! Eksternt stylesheet har den fordel, at du kan anvende det på alle dine dokumenter, og du koder kun en gang modsat internt stylesheet, hvor du skal kode i alle dokumenter. Eksternt betyder, at det ikke er indbygget, så det skal linkes til dokumentet i <head>delen. Eksterne stylesheets har *.css som filformat. I dette eksempel hedder stylesheet et internettet.css. <head> <link href="css/internettet.css" rel="stylesheet" type="text/css" /> </head> CSS filen er i eksemplet placeret i mappen css, der er placeret i samme niveau som hjemmesiden. Husk at angive filstien i linket til CSS filen korrekt. Inline styles Inline styles er en måde at lave en style direkte på markeringer i dokumentet. Det vil sige, at effekten kun anvendes på markeringen. <p style= color: green; >Dette er et eksempel på inline stylesheet </p> Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 18

19 BILAG *9 Boksmodellen; Padding, margin og border Div-bokse fylder mere en den bredde og højde der sættes: Alle andre afstande skal medregnes. Det gælder for kanter (border), margin og padding. Det er vigtigt at huske, specielt når man arbejder med design, hvor der ofte er placeret bokse inden i andre bokse. Margin afstand fra boksens kant til andre bokse kanter (udvendig afstand) Padding er afstanden fra boksens kant til indhold i boksen (indvendig afstand) Border er boksens kant (streg) Både margin og padding og stregtykkelsen på border skal regnes med i boksens samlede mål. Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 19

20 BILAG *10 Float og clear Clear bruges ofte til at stoppe et efterfølgende element i at lægge sig ved siden af et floated element. Clear rydder altså et område enten til venstre, højre eller på begge sider af et element. Eksempel med et billede 1. I dette eksempel er tekst kombineret med to illustrationer, der float er left. Illustrationerne placeres ved siden af hinanden. img { float: left; } 2. I eksempel 2 er illustrationerne placeret under hinanden. Her anvendes egenskaben clear: left. Clear: left rydder området til venstre for illustrationen, der float er left og spærrer pladsen, så illustrationen ikke kan hoppe op ved siden af det float ede billede. img { clear: left; float: left; } Egenskaben clear forhindrer altså et efterfølgende element i at sætte sig ved siden af et float et element. Tre forskellige måder at clear er et element på: Clear: left Elementet holder sig neden under elementer, der er float ed left, men vil stadig sætte sig ved siden af right-floated elementer Clear: right: Elementet holder sig neden under elementer, der er floated right, men sætter sig stadig ved siden af left-float ede elementer Clear: both: tvinger efterfølgende elementer til at holde sig under både left- og rightfloat ede elementer Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 20

21 Clear:right På billedet til højre ses et eksempel på hvordan floatede elementer kan klumper sig sammen på en webside. 1. Alle billeder har en float:right. Det første billede af collagen wetdesign placerer sig helt til højre, indtil det støder på et omkransende blok-element eller browserkanten. Det andet billede af fotografeleven placerer sig til venstre for den webdesign, fordi det også har en float:right. Det sidste billede af tastatur over øjne ville have placeret sig til venstre for fotografeleven, men da bredden ikke kan være i browserbredden, rykker det under. 2. Ved at tilføje egenskaben clear:right til billederne, forhindres de i at placere sig ved siden af hinanden. De placeres i stedet under hinanden. Clear tilføjet til det andet billede (fotografeleven) forhindrer det i at hoppe op ved siden af det første billede, mens det sidste billedes (tastatur over øjne) clear, tvinger det til at placere sig under billede to etc. Det samme princip gør sig gældende for alle elementer, der er placeret i bokse. Tekst kan tildeles en clear på flere måder eksempelvis ved at style <p> eller ved at placere teksten i en divboks. Html 1: Bilag KTS/WI v/zita Gustafsen ajour: Jan. 2013/zgu. Side 21