28,- Internet / WWW & Co. HomePages. -lavdemselv. Introduktion til HTML. Achim Schmidt. 1. Udgave

Størrelse: px
Starte visningen fra side:

Download "28,- Internet / WWW & Co. HomePages. -lavdemselv. Introduktion til HTML. Achim Schmidt. www.knowware.dk. 1. Udgave"

Transkript

1 28,- Internet / WWW & Co. HomePages -lavdemselv Introduktion til HTML Achim Schmidt 1. Udgave

2 Acrobat Reader: tips... F5/F6 åbner/lukker Bogmærker I Menu AVis sindstiller du, hvordan filen vises på skærmen CTRL+0 = Hele siden CTRL+1 = Originalstørrelse CTRL+2 = Vinduesbredde I samme menu kan du osse sætte: Enkelt side, Fortløbende eller Fortløbende - Dobbelsider.. Prøv, saa ser du forskellen. Navigation Pil til højre/venstre: fremad/tilbage en side Alt+Pil Højre/Venstre: som i Browser: fremad/tilbage Ctrl++ forstørrer og Ctrl+ formindsker

3 Forord 3 Forord World Wide Web, som vi i det følgende vil kalde WWW, spiller en stadig større rolle i Internettets verden. Så godt som alle Internet-providere, altså firmaer, der sælger tilslutningen til Internettet, tilbyder nu om dage en vis mængde plads på serveren, hvor man kan publicere sine egne informationer i form af en homepage Men skal disse informationer kunne læses i WWW, må de være skrevet i et specielt kodesprog, der kaldes Hypertext Markup Language forkortet HTML. Vi vil her se på dette sprogs grundelementer. Har du arbejdet dig igennem hæftet, burde du altså kunne skrive din egen homepage, din hjemmeside, med de informationer, som du måtte ønske at viderebringe denne side kan du så sende til din provider via FTP, og så er du præsent i WWW. Selvfølgelig findes der også andre muligheder i HTML muligheder, der går langt ud over, hvad vi kan nå at se på indenfor dette hæfte. Hvis du kombinerer dine sider med et Common Gateway Interface (CGI), kan du således fremstille særdeles interaktive sider altså sider, der reagerer på et input fra læseren. Det skal dog nævnes, at et sådant CGI-skript kræver tæt samarbejde med din server, da det skal køres fra serverens programmel og altså også skal programmeres specielt for dette programmel. Af pladshensyn vil vi som sagt ikke se nærmere på disse muligheder. Men hvis du kan læse tysk, finder du flere informationer om HTML og CGI samt en del links om dette tema på min homepage: Nogle praktiske tips: Addresser i Internettet skrives med Arial, som du kan se i sidste afsnit. HTML-koderne samt den tekst, som de definerer, skrives med Courier. Det lønner sig at læse hæftet foran skærmen du lærer unægteligt hurtigst, når du afprøver alle anvisninger på din egen computer. En tak til min veninde, som var fuld af forståelse for min forfattergerning. Desuden takker jeg især Claudia Bender og Holger Kenn som har læst hæftet, før det blev trykt, og bidrog med mange tips og forslag til, at det blev mere forståeligt. En tak går også til alle, der læste forud-versionen af hæftet på min homepage og bidrog med gode ideer. Endelig takker jeg alle HTML-forfattere, der har stillet deres samlede viden til rådighed på Nettet og løbende deltager i diskussionerne i Internet News. Saarlouis, i maj 1996 Achim Schmidt

4 4 Grundbegreber Grundbegreber World Wide Web World Wide Web, som vi som sagt vil kalde WWW, er ikke en traditionel del af Internettet som , altså elektronisk post, eller FTP, altså filoverførsel. WWW består af mange delkomponenter og koncepter. Disse koncepter sammenfattes i én brugeroverflade, der netop ved sin alsidighed er et fremragende værktøj. Todelt grundopbygning Grundlaget i WWW er et Klient-Server-koncept. Det betyder, at en server eller webserver, så at sige en tilbyder-computer, stiller informationer til rådighed i Nettet. Disse informationer modtages af klient-programmet i den anden ende af ledningen, hvor de omsættes til det ønskede skærmbillede. En sådan klient kaldes også browser på engelsk betyder dette ord, at man bladrer sig igennem noget. En WWW-server er en computer, der normalt fungerer under et styresystem, der tillader multitasking. Det betyder, at systemet kan håndtere flere programmer og brugere samtidig. En sådan server har to opgaver. For det første stiller den informationer i form af HTML-dokumenter til rådighed; for det andet administrer den klient-programmernes aktiveringer af informationerne det vil sige den sender dem på opfordring. I den anden ende af ledningen finder du som sagt WWW-klienterne, altså de programmer, der kontakter den udvalgte server, modtager de ønskede informationer og fremstiller dem ved hjælp af de inkluderede koderinger på skærmen. Den type programmer findes for alle vanlige styresystemer de hedder Netscape, Mosaic, Lynx, for blot at nævne nogle få. Udseendet af en WWW-side på skærmen bestemmes altså udelukkende af det anvendte klientprogram. Desværre findes der store forskelle mellem programmerne og det fører til, at et og samme dokument kan se meget forskelligt ud, alt efter, hvilken klient der tryller det på skærmen. WWW-dokumenter vises via HTML De dokumenter, der anvendes i WWW, skrives normalt i HTML-kodesproget.HTML står for Hypertext Markup Language. Det er ikke noget programmeringssprog i vanlig forstand, men nærmere et tekstbeskrivelses- og layoutsprog for de informationer, der skal vises altså et sprog, der ud over selve teksten indeholder koder, der bestemmer sidelayout og fremvisningsform. Dette sprog blev udviklet specielt for WWW, hvor det er det klassiske dokumentformat. Det kendetegnes især ved de såkaldte hyperlinks henvisninger til andre dokumenter, der kan ligge på andre computere hvorsomhelst i verden. I grunden er HTML en underafdeling af SGML, Standard Generalized Markup Language, der blev udviklet af Dr. Charles F. Goldfarb. Den defineres i ISO-normen Selve HTML-dokumenterne skrives i ren ASCII-tekst medsamt koderne. De kan altså fremstilles og redigeres i en hvilkensomhelst teksteditor. Der findes dog nu om dage specielle HTML-editorer, programmer, der letter fremstillingen af HTML-dokumenter.

5 Grundbegreber 5 Kommunikationssproget: HTTP En speciel protokol, HyperText Transport Protocol (HTTP), definerer, hvordan WWW-server og - browser kan tale med hinanden. En sådan protokol er i grunden et regelsæt for udvekslingen af informationer. HTTP-protokollen er udformet relativt simpelt, for at trække minimal arbejdskraft fra serveren. Kommunikationen forudsætter en yderligere protokol, der definerer den basale forbindelse computerne imellem. I Internettet anvender man TCP/IP(Transmission Control Protocol / Internet Protocol)-protokollen. En kommunikation via HTTP er bygget op på følgende måde: Via TCP/IP etableres forbindelse til den ønskede server, hvorpå de ønskede informationer bestilles med en request. Serveren reagerer med en response, et svar, idet den sender de ønskede informationer. Efter dataoverførslen afbrydes forbindelsen. Overførslen gennemføres principielt med 8bit altså volder en overførsel af binærfiler ingen problemer. Ensformet addressering: URI Forkortelsen URI (Uniform Resource Identifier) står for et bredt grundkoncept, der definerer en ensformig addressering af vilkårlige ressourcer i Internettet. En sådan ressource er et objekt, som kan ligge hvorsomhelst i Nettet. Det kan være en fil, en database, en newsartikel eller en Telnet-session på en bestemt computer, for blot at nævne nogle eksempler. Dette grundkoncept definerer hele filosofien bag WWW: alt, hvad der eksisterer, kan addresseres og fremvises. Dette fleksible koncept betyder, at WWW ikke bare tilbyder isolerede løsninger for enkeltproblemer, men tværtimod er en samling af alle aktuelle Internet-tjenester og på den måde er det en slags universalinstrument for alle Internettets muligheder. Tilbage til den tekniske beskrivelse: URI's underdeles i URNs (Uniform Resource Names) og URLs (Uniform Resource Locators). I praksis vil du dog formodentlig kun møde URLs i WWW. En sådan URL er sat sammen af en protokoldel og en almen del. Protokoldelen angiver, hvilken tjeneste eller hvilket protokol i Internettet det aktuelle objekt benytter for eksempel HTTP (Hypertekst), FTP (filoverførsel), TELNET (arbejde på en anden computer i Nettet) eller andet. Den almene del indeholder objektets adresse.

6 6 HyperText Markup Language (HTML) HyperText Markup Language (HTML) HTML er altså standardsproget for dokumenter i WWW. Denne standard overvåges af en arbejdsgruppe, som alt efter behov definerer den på ny. Hidtil var det version 2.0, der var den vedtagne form. Først i maj 1996 blev en ny standard vedtaget under nummeret 3.2. Version 3.0 var et forslag; men i mellemtiden havde flere klientprogrammer indført programspecifikke koder blandt dem Netscape, der for tiden (september 1996) har en markedsandel på cirka 75%. Den nye standard, HTML 3.2, understøtter så godt som alle de udvidelser, der blev tilføjet til version 2.0 af Netscape, Microsoft Explorer og andre. Det er der ikke noget overraskende i, al den stund disse firmaer deltog i arbejdet med defineringen af den nye standard. Dette hæfte blev skrevet, før den nye standard trådte i kraft men alle her viste koder følger denne standard. HTML er ikke noget vanligt programmeringssprog. Det er nærmere et tekstlayout-sprog, altså et sprog, der indeholder visse bestanddele eller koder, som definerer en sides udseende. Desuden har sproget den specielle evne at kunne forarbejde henvisninger til andre dokumenter, de såkaldte hyperlinks. Faktisk var det sidste den egentlige mening med dette sprog, da det blev udviklet i videnskabelige cirkler. Et hyperlink er en henvisning til et andet dokument eller en ressource i Internettet, der er fast bundet til det første dokument. Klikker man på et sådant hyperlink, aktiveres det andet dokument eller ressourcen. Et HTML-dokuments struktur HTML-dokumenter bygges op med en klart defineret struktur. De er delt op i et dokumenthoved, som på engelsk hedder Head, og en brødtekst, på engelsk Body. I dokumenthovedet finder du de koder, der gælder for hele dokumentet, for eksempel dets titel. Brødteksten, Body, indeholder foruden selve teksten, altså informationerne, også de HTML-koder, der sørger for layoutet og definerer hyperlink ene. Disse HTML-koder har altså en styrende funktion, mens den egentlige tekst findes mellem dem som klartekst. Et HTML-dokument er et rent ASCII-dokument, der indeholder teksten samt de koder, der definerer dens udseende. Altså kan et sådant dokument fremstilles med en hvilkensomhelst ASCII-editor. Som sagt findes der dog også specielle HTML-editorer, der letter arbejdet med layoutet ved at tilbyde de ønskede anvisninger i menupunkter, der automatisk fremstiller de nødvendige koder. Desuden er der på det sidste fremkommet programmer, der direkte viser HTML-kodernes resultat på skærmen et eksempel er Adobe s PageMill. I disse programmer undgår du enhver berøring med HTML-koderne. Alligevel burde du stifte bekendtskab med grundlaget for HTML-sproget. Kun på denne måde kan du nemlig chekke dine HTML-dokumenter nøjere. HTML-koders struktur Også HTML-koderne har en simpel og klart defineret struktur. De kaldes for tags, det engelske ord for kendemærke. Med få undtagelser er de sat sammen af et starttag og et sluttag. Et HTML-tag fungerer som en slags kommando. Det indrammes af spidsklamre (<>). Starttag et indeholder selve koden mellem klamrene; sluttag et derudover en skråstreg, en slash / før selve koden. En HTML-kode har altså principielt følgende udseende: <KODE>... TEKST... </KODE>

7 HyperText Markup Language (HTML) 7 Som du ser, sættes teksten mellem de start- og sluttags, der definerer, hvordan den skal formateres. Start- og sluttag har altså principielt kun betydning for den tekst, der står mellem dem. Nogle få tags fungerer uden sluttag, fordi deres logiske funktion er umiddelbart indlysende. I det følgende vil vi specielt gøre opmærksom på, om en kode tilhører denne gruppe. Grundlaget i et HTML-Dokument Grundlaget i et HTML-dokument defineres ved nogle få koder, der skal findes i ethvert HTMLdokument. Først skal nævnes tag et : det omfatter hele dokumentet og kendetegner det som en fil i HyperText Markup Language. Dets syntaks lyder sådan:... dokument... Et eksempel er: Flere HTML-koder Næst på dagsordenen står tag et. Denne kode betegner dokumenthovedet med dets start- og sluttag. Alt, hvad der indesluttes af dette tagpar,relaterer til hele det følgende dokument Syntaksen lyder:... Anvisninger... Et eksempel: Hoved-Anvisninger Det tredje grundelement i strukturen er tag et. Denne kodes start- og sluttag indbefatter hele brødteksten det vil sige hele den tekst, der skal fremtræde på skærmen, samt de HTMLkoder, der angiver, hvordan den skal fremtræde. Syntaksen er:... Broedtekstanvisninger... Et eksempel:... Hoved-Anvisninger Broedtekstanvisninger...

8 8 HyperText Markup Language (HTML) I dette eksempel har du grundopbygningen af et HTML-dokument. Denne opbygning er altid den samme. I det følgende skal vi se på de enkelte anvisninger, der kan benyttes i dokumenthovedet og brødteksten. Hvis du forresten undrer dig over stavemåden Broedtekst, så er forklaringen, at HTMLsproget skal forstås af alle mulige forskellige computere. Men da forskellige computere bruger forskellige koder for de særlige tegn, der findes i forskellige lande, må man enten omskrive disse særtegn, som vi har gjort det i dette eksempel; eller også må man benytte en speciel HTML-kode for disse særtegn, der forstås af alle computere. Senere i hæftet (på side 19) finder du en liste over disse særtegn, deres internationale betegnelse og deres HTML-kode. Basale HTML-koder Langt de fleste HTML-filer er, som sagt, rene ASCII-filer, der indeholder HTML-koder, som også skrives i ASCII. Disse koder bestemmer tekstens udseende og definerer henvisningerne. Lad os nu se på de grundlæggende styringskoder. Overskrifter Overskrifter kendetegnes i HTML med <H>-tag et, som står for Headline det engelske ord for overskrift. De inddeles i flere niveauer, der kendetegnes ved hvert sit nummer, alt efter prioriteten. HTML kender til seks overskrifter, der indstilles med tag ene <H1>...</H1> til <H6>...</H6> oppefra og nedefter altså betegner <H1> det øverste niveau. Hvis du sætter det følgende dokument op og læser det i din browser, vil du forstå, hvad der menes: Eksempel Overskrifter: <TITLE>Overskrifter i HTML</TITLE> <H1>Overskrift Nr. 1</H1> <H2>Overskrift Nr. 2</H2> <H3>Overskrift Nr. 3</H3> <H4>Overskrift Nr. 4</H4> <H5>Overskrift Nr. 5</H5> <H6>Overskrift Nr. 6</H6> Som du ser, indrammes den tekst, der skal vises, af tag ene <Hx>... </Hx>. Lige som ethvert andet tag kan det blotte <H>-tag udvides med flere angivelser, de såkaldte attributer, som indføjes i det egentlige tag indenfor dets spidsklamre. Et sådant attribut tilføjer mere præcise informationer om fremvisningen af det aktuelle element. I vores eksempel bestemmer attributet align sammen med en af de tre retningsbetegnelser, hvor i billedet overskriften skal placeres: align=left sætter overskriften til venstre, align=center sætter den i midten, align=right sætter den til højre.

9 Basale HTML-koder 9 Eksempel Overskrifter 2: <TITLE>Overskrifter</TITLE> <H1 align=left>venstre</h1> <H1 align=center>centreret</h1> <H1 align=right>hoejre</h1> Linieskift Når ASCII-tekst fremvises i HTML-dokumenter, tages der principielt intet hensyn til mellemrum og linieskift. Derfor er det nødvendigt at indføje en kode, der får browseren til at indsætte et linieskift. Den rette HTML-kode til dette formål er tag et <BR> et af de førnævnte tags, der ikke behøver et afsluttende tag. Eksempel Linieskift: <TITLE>Linieskift</TITLE> <H1>Dette er et eksempel paa linieskift</h1> Denne tekst staar i grunddokumentet i en linie, mens denne tekst staar i naeste linie. Men som du ser, indfoejes der udelukkende automatiske linieskift. Hvis du oensker at indsaette et fast linieskift, maa du anvende det korrekte tag, som her: <BR> Som du ser, foerte det til et linie-<br> skift, lige som ved denne orddeling.

10 10 Basale HTML-koder Undgå et linieskift Hvis du nu ønsker at undgå et lineskift, anvender du tag et <nobr>... </nobr>. Sætter du et helt afsnit ind i dette tag, kan du i dette afsnit kun indsætte linieskift ved hjælp af tag et <br>. Eksempel Undgå linieskift <TITLE>Undgaa et linieskift</title> <NOBR> Denne tekst vises uden automatiske linieskift. Resultatet er, at linierne kan opnaa en saadan laengde, at de straekker sig ud over skaermens rand og kun kan goeres synlige ved at scrolle dem.<br>vil du fremtvinge et linieskift i et saadant afsnit, maa du indsaette det specielle tag <br>. </NOBR> Afsnit Et afsnit markeres i et HTML-dokument ved tag et <P>...</P>. Afsnittets egentlige tekst står som sædvanlig mellem start- og sluttag. Efter afsnittets afslutning indføjes der automatisk et linieskift samt en ekstra linie. Eksempel Afsnit: <TITLE>Afsnit</TITLE> <P> Denne tekst staar i foerste afsnit og indeholder et<br> linieskift. Efter afsnittet indfoejes automatisk et linieskift samt en ekstra lnie. </P> <P> Og her ser du naeste afsnit, som optisk er klart adskilt fra foerste afsnit. </P>

11 Basale HTML-koder 11 Lige som overskrifter kan også afsnit formateres ved justering. Også her anvendes attributet align. Eksempel Justerede afsnit <TITLE>Justerede afsnit</title> <p align=right> Dette afsnit vises hoejrejusteret, da det blev saadan defineret med et tag.</p> <p align=center> Her har vi aendret attributet. Altsaa vises dette afsnit centreret.</p> <p>saettes et afsnits-tag uden attribut, vises det tilhoerende afsnit automatisk venstrejusteret.</p> Centreret visning Hvis du vil vise flere elementer og afsnit centreret, kan du gøre det ved hjælp af tag et <center>... </center>. Al den tekst, der indesluttes af start- og slut-tag et, vil blive vist centreret i browseren. Eksempel Centreret visning <TITLE>Centreret visning</title> <CENTER> <H2>Centreret visning</h2> <P> Denne tekst skal i sin helhed vises centreret, med samtlige overskrifter og afsnit. </P> <H3>Andet afsnit</h3> <P> Ogsaa dette andet afsnit skal vises centreret i browseren. </P> </CENTER> <H3>Tredje afsnit</h3> <P> Tredje afsnit derimod er ikke centreret, da slut-tag et for centreringen staar umiddelbart foer det. </P>

12 12 Basale HTML-koder Listeformater HTML-sproget byder på flere muligheder, hvis du ønsker at opstille lister. Vi vil se på dem i rækkefølge. Simple lister Den simpleste form for liste er netop en simpel liste. Dens enkelte punkter stilles unummereret op efter hinanden. En sådan liste defineres med tag et <ul>...</ul>, som omslutter alle listens punkter. Indenfor dette omsluttende tag kendetegnes listens enkelte punkter hvert for sig med tag et <li>, som ikke behøver noget slut-tag. Eksempel Simpel liste <TITLE>Simple lister</title> <P> Dette eksempel viser en unummereret eller simpel liste: <br> <ul> <li>dette er listens foerste punkt, <li>dette dens anden <li>og dette dens tredje. </ul> Ud over simpelt at angive listens elementer kan du også kendetegne dens enkelte punkter ved en bestemt markering. Det gør du ved hjælp af attributet type. Der er tre mulige værdier for dette attribut. De ser således ud: <ul type=circle> <ul type=square> <ul type=disc> markering ved en cirkel markering ved en firkant markering ved en skive Nummererede lister Nummererede lister anvendes, når man vil opremse informationer og argumenter. En sådan nummereret liste defineres i HTML med tag et <ol>... </ol>, der ligeledes omslutter hele listen. De enkelte punkter betegnes lige som ved en simpel liste med tag et <li>. Eksempel Nummererede lister <TITLE>Nummereret liste</title> <P>Dette eksempel fremviser en nummereret liste:</p> <OL> <LI>Foerste punkt på listen forsynes med "1." i starten <LI>Andet punkt på listen forsynes med "2." i starten <LI>Tredje punkt på listen forsynes med "3." i starten </OL>

13 Basale HTML-koder 13 Denne almindelige nummerering bliver indsat automatisk, når du anvender tag et </ol>. Ønsker du en anden form for nummerering, kan du opnå det ved et attribut, som indføjes efter tag et <ol>. Du har følgende muligheder: <ol type=i> <ol type=i> <ol type=a> <ol type=a> markering med små romertal markering med store romertal markering med små bogstaver markering med store bogstaver Eksempel Alfanumerisk liste <TITLE>Alfanumerisk liste</title> <P> Denne tekst indeholder to alfanumeriske lister: <ol type=a> <li>dette punkt betegnes med et A <li>dette punkt betegnes med et B <li>dette punkt betegnes med et C </ol> </P> <ol type=a> <li>dette punkt betegnes med et a <li>dette punkt betegnes med et b <li>dette punkt betegnes med et c </ol> Selvfølgelig kan du også begynde en liste med et andet nummer end 1. Det gør du ved hjælp af attributet start, som tilføjes til tag et <ol>. En liste, der indledes med tag et <ol start=4>, vil altså vise sit første punkt med nummeret 4.

14 14 Basale HTML-koder Kataloglister Kataloglister kan for eksempel anvendes til opstillinger af fillister, directories eller enkeltelementer. Kataloglister defineres ved tag et <dir>... </dir>. De enkelte led betegnes atter med tag et <li>. Elsempel katalogliste <TITLE>Katalogliste</TITLE> Dette er et eksempel på en katalogliste: <BR> <DIR> <li>foerste punkt <li>andet punkt <li>tredje punkt </DIR> Glossar Et glossar er en anden form for liste: den indeholder på den ene side betegnelser, der skal defineres, og på den anden side disse definitioner. Vil du opstille et sådant glossar i HTML, anvender du tag et <dl>... </dl>, der skal omslutte hele glossarlisten. Til de enkelte punkter i glossaret behøver du to yderligere tags. Det ene, <dt>... </dt>, omslutter den betegnelse, der skal defineres. Det andet, <dd>... </dd>, betegner selve definitionen. Det bliver klarere i det følgende eksempel: Eksempel Glossar <TITLE>Glossar</TITLE> I dette dokument vil vi opstille et glossar. <br> <dl> <dt> 1. betegnelse </dt> <dd>definition af foerste betegnelse</dd> <dt> 2. betegnelse </dt> <dd> definition af anden betegnelse </dd> </dl> Kommentarer Ud over de egentlige styreanvisninger kan du selvfølgelig også indsætte kommentarer i dit HTML-dokument. Sådanne kommentarer omsluttes af tag et <!-- -->. Det ser ud som følger: <!-- Dette er en kommentar --> En sådan kommentar ignoreres af browseren, det vil sige den bliver ikke vist. Men du kan se den, hvis du åbner en HTML-fil med en normal teksteditor.

15 Yderligere anvisninger til formatering 15 Yderlige anvisninger til formatering Ved siden af de allerede nævnte styreanvisninger kender HTML også andre anvisninger, der regulerer visningen af den egentlige tekst. Det er indirekte anvisninger, som ikke angiver, hvordan den tekst, som de relaterer til, skal vises, men nærmere definerer, hvilken teksttype denne tekst hører til. Hvordan den så skal vises, det bestemmes af det enkelte browserprogram. Citater Udsagn, der citeres fra andre kilder, kendetegnes normalt ved en speciel typografi. I et HTMLdokument opnår du det ved at bruge tag et <blockquote>... </blockquote>. Som altid indleder starttag et et citat, mens sluttag et afslutter det. Den omsluttede tekst vises af den anvendte browser på den måde, som den anvender til citater. Eksempel citat <TITLE>ZITATE</TITLE> Og der loed en roest: <blockquote>der blive lys...</blockquote> Udover tag et <blockquote> kan der også benyttes tag et <cite>... </cite> for citater. Adresser Adresser betegnes ligeledes ved et specielt tag, nemlig <address>... </address>. Teksten mellem start- og sluttag vises på den enkelte browsers adresse-måde for det meste er det kursiveret. Eksempel Adresse <TITLE>Adresser</TITLE> Du kan finde os under foelgende adresse:<br> <ADDRESS> Moenstermand GmbH<BR> Moenstergade. 10<BR> Moensterby<BR> </ADDRESS>

16 16 Yderligere anvisninger til formatering Præformateret tekst Hvis du ønsker at vise et afsnit præcist som du selv har skrevet det, altså med samtlige linieskift, mellemrum og styretegn, kan du gøre det ved hjælp af tag et <PRE>... </PRE>. Teksten mellem start- og sluttag vil i browseren blive vist på præcist samme måde, som den blev skrevet. Du må dog være opmærksom på, at du ikke kan fastlægge, hvilken skrifttype den enkelte browser anvender. En præformateret tekst vises principielt i ikke-proportional skrift, så at sige skrivemaskine-skrift. Men den enkelte browsers indstilling bestemmer, hvilken skrifttype der anvendes. Eksempel præformateret tekst <TITLE>Praeformateret tekst</title> Den efterfoelgende tekst skal vises praeformateret:<br> <PRE> Dette er et eksempel paa praeformateret tekst. Den gengives med alle linieskift. </PRE> mellemrum og Eksempler og kildetekst Eksempler og kildetekst behandles på lignende måde som præformateret tekst de vises af browseren med ikke-proportional skrift. Eksempler vises ved hjælp af tag et <tt>... </tt>. Kildetekst er tekst, der indeholder HTML-tekst i ubehandlet form, altså med samtlige koder. Den type tekst kendetegnes ved tag et <code>... </code>. Tekstfremhævelser I visse situationer findes der en grund til at fremhæve et tekstafsnit visuelt på en eller anden måde. HTML-sproget kan også her tilbyde valget mellem flere muligheder. Fed tekst Den mest almindelige måde at fremhæve en tekst på er at skrive den fed. Det opnås ved hjælp af tag et <strong>... </strong>. Tekst, der omsluttes af dette tag, vises af browseren som fed. Eksempel fed tekst <TITLE>Fed tekst</title> Denne tekst indeholder <strong>med fed satte</strong> elementer.

17 Tekstfremhævelser 17 Forøvrigt findes der endnu en måde at sætte tekst som fed nemlig ved hjælp af tag et <b>... </b> De nu følgende formateringsanvisninger indsættes på samme måde som i det foranstående eksempel. Kursiveret Tekst, der omsluttes af tag et <i>... </i>, vises kursiveret. Understreget Nogle browsere kan ud over de nævnte formateringer også vise understreget tekst Det opnår du ved hjælp af tag et <u>... </u>. Blinkende tekst Vil du fremhæve en tekst yderligere, kan du få den til at blinke ved hjælp af tag et <blink>... </blink>. Men vær varsom effekten mister hurtigt sin virkning og bliver let til en irritationskilde. Sænket skrift Vil du sænke tekst indenfor en linie, for eksempel til en anmærkning, kan du gøre det med tag et <sub>... </sub> Hævet skrift Tilsvarende kan du også definere en hævning af teksten, for eksempel til eksponentialer. Det gør du ved hjælp af tag et <sup>... </sup>. Skriftstørrelse Du har selvfølgelig også indflydelse på skriftstørrelsen ved hjælp af en HTML-kode. Der findes ialt 7 forskellige skriftstørrelser standardstørrelsen blandt dem er 3. Skriftstørrelsen defineres med tag et <font>... </font> sammen med attributet size sidstnævnte skal forsynes med en værdi mellem 1 og 7. Modsat overskriftsnummerereringen er 1 her den mindste og 7 den størst5e værdi. Eksempel skriftstørrelse <TITLE>Skriftstoerrelse</TITLE> Dette er normalskrift<br> <font size=2>skriftstoerrelse 2</font><br> <font size=5>skriftstoerrelse 5</font><br> <font size=7>skriftstoerrelse 7</font><br> Udover at sætte en fast værdi kan du også indsætte en relativ værdi her udgår du fra en basisstørrelse, der defineres ved tag et <basefont size=x>, og modificerer den ved angivelse af +(plus) og (Minus).

18 18 Tekstfremhævelser Eksempel relativ skriftstørrelse <TITLE>Relativ skriftstoerrelse</title> <basefont size=2> Denne tekst har stoerrelsen 2,<br> <font size=+2>mens denne er to klasser stoerre<br> </font> Større skrift Ønsker du at vise en tekstpassage større end den omgivende tekst, kan du gøre det med tag et <big>... </big>. Mindre skrift Tilsvarende kan du vise en tekstpassage mindre ved hjælp af tag et <small>... </small>. Farvet skrift Selvfølgelig kan du også vise tekst i forskellige farver. Egentlig hører dette punkt til i et senere afsnit i hæftet, hvor vi vil beskæftige os nærmere med definitionen af farve i HTML se side XX. Men da skriftfarven defineres ved et attribut til tag et <font>, vil jeg lige nævne det. Farver tildeles til tekstafsnit ved hjælp af tag et <font> med attributet color, der tildeles den ønskede farveværdi. Eksempel Farvet tekst <TITLE>>Farvet tekst</title> <font color=#ffffff>hvid tekst</font><br> <font color=#c00000>roed tekst</font><br>

19 Specialtegn i HTML 19 Specialtegn i HTML-dokumenter Mange sprog har specialtegn, der skal defineres på en særskilt måde i HTML. På de følgende sider finder du en tabelle, der anfører specialtegnene og viser den måde, som de skal skrives på i HTML. Ønsker du, at de danske særtegn skal gengives korrekt af den anvendte browser, skal du altså sætte de her viste skrivemåder i din fil, istedet for den vante stavemåde. Eksempel specialtegn <TITLE>Specialtegn</TITLE> Ønsker du at vise de danske særtegn korrekt i en HTMLtekst, må du tage disse gådeagtige koder til hjælp. Specialtegn Int. betegnelse HTML-skrivemåde Æ capital AE diphthong (ligature) Æ Á capital A, acute accent Á  capital A, circumflex accent  À capital A, grave accent À Å capital A, ring Å Ã capital A, tilde Ã Ä capital A, dieresis or umlaut mark Ä Ç capital C, cedilla Ç Ð capital Eth, Icelandic Ð É capital E, acute accent É Ê capital E, circumflex accent Ê È capital E, grave accent È Ë capital E, dieresis or umlaut mark Ë Í capital I, acute accent Í Î capital I, circumflex accent Î Ì capital I, grave accent Ì Ï capital I, dieresis or umlaut mark Ï Ñ capital N, tilde Ñ Ó capital O, acute accent Ó Ô capital O, circumflex accent Ô Ò capital O, grave accent Ò Ø capital O, slash Ø Õ capital O, tilde Õ

20 20 Specialtegn i HTML Ö capital O, dieresis or umlaut mark Ö Þ capital THORN, Icelandic Þ Ú capital U, acute accent Ú Û capital U, circumflex accent Û Ù capital U, grave accent Ù Ü capital U, dieresis or umlaut mark Ü Ý capital Y, acute accent Ý á small a, acute accent á â small a, circumflex accent â æ small ae diphthong (ligature) æ à small a, grave accent à å small a, ring å ã small a, tilde ã ä small a, dieresis or umlaut mark ä ç small c, cedilla ç é small e, acute accent é ê small e, circumflex accent ê è small e, grave accent è ð small eth, Icelandic ð ë small e, dieresis or umlaut mark ë í small i, acute accent í î small i, circumflex accent î ì small i, grave accent ì ï small i, dieresis or umlaut mark ï ñ small n, tilde ñ ó small o, acute accent ó ô small o, circumflex accent ô ò small o, grave accent ò ø small o, slash ø õ small o, tilde õ ö small o, dieresis or umlaut mark ö ß small sharp s, German (sz ligature) ß þ small thorn, Icelandic þ ú small u, acute accent ú û small u, circumflex accent û ù small u, grave accent ù ü small u, dieresis or umlaut mark ü ý small y, acute accent ý ÿ small y, dieresis or umlaut mark ÿ copyright registered trademark < left angular bracket < > right angular bracket > & ampersand &

28,- Internet / WWW & Co. HomePages. -lavdemselv. Introduktion til HTML. Achim Schmidt. www.knowware.dk. 1. Udgave

28,- Internet / WWW & Co. HomePages. -lavdemselv. Introduktion til HTML. Achim Schmidt. www.knowware.dk. 1. Udgave 28,- Internet / WWW & Co. HomePages -lavdemselv Introduktion til HTML Achim Schmidt www.knowware.dk 1. Udgave 2 KnowWare Homepages - Lav dem selv Achim Schmidt 1. udgave, 1. oplag, nov. 1996 2. udgave,

Læs mere

Lav dine egne hjemmesider/websider

Lav dine egne hjemmesider/websider Sider, der skal publiceres på World Wide Web, laves i et særligt format, html, som fortæller browseren, hvordan den skal vise tekst og billeder. Html (Hypertext markup language) er meget fleksibelt og

Læs mere

Grundlæggende HTML. Hjemmesider, kommunikation og kode. mandag den 13. august 12

Grundlæggende HTML. Hjemmesider, kommunikation og kode. mandag den 13. august 12 Grundlæggende HTML Hjemmesider, kommunikation og kode Hvad er HTML? Hyper Text Markup Language Beskrivelsen siger at det er et tekst sprog bestående af markører Bruges til at vise hjemmesider i en browser,

Læs mere

Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det?

Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det? Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det? I dag skal du lære at lave hjemmesider, så du også kan bidrage til at opbygge

Læs mere

Flash Logic Free CMS. Manual og brugervejledning

Flash Logic Free CMS. Manual og brugervejledning Flash Logic Free CMS Manual og brugervejledning Indhold: 1. Funktionalitet 2. Fil-oversigt 3. Baggrundsbillede 4. Banner-billede 5. Redigering af tekst 6. Brug af html-tags 7. Web site navn 8. Upload til

Læs mere

Internet vs WWW. Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information

Internet vs WWW. Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information web som medie Internet vs WWW Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information Internet protokoller (forskellige måder at udveksle information

Læs mere

Større skriftlige opgaver i Microsoft Word 2007 Indhold

Større skriftlige opgaver i Microsoft Word 2007 Indhold Større skriftlige opgaver i Microsoft Word 2007 Indhold Større skriftlige opgaver i Microsoft Word 2007... 1 Inddeling i afsnit... 2 Sideskift... 2 Sidetal og Sektionsskift... 3 Indholdsfortegnelse...

Læs mere

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 TYPO3 manual DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 Det første afsnit, Introduktion til systemet, giver et hurtigt overblik over mulighederne.

Læs mere

ActiveBuilder Brugermanual

ActiveBuilder Brugermanual ActiveBuilder Brugermanual Forfatter: TalkActive I/S Dato: Juni 2004 Version: R. 1.01 Sprog: Dansk Copyright 2004 - Talk Active - all rights reserved. Indhold: 1. INDLEDNING...2 2. QUICK-START...3 3. OPBYGNINGEN

Læs mere

Bilag 1: Ordliste. Bilag 1: Ordliste 141

Bilag 1: Ordliste. Bilag 1: Ordliste 141 Bilag 1: Ordliste 141 Bilag 1: Ordliste Da det behandlede område indeholder mange nye termer, som ikke nødvendigvis alle kender, og da disse termer opfattes forskelligt, har vi udarbejdet denne ordliste,

Læs mere

xgalleri Mulige filtyper Installation web-version

xgalleri Mulige filtyper Installation web-version xgalleri xgalleri opstod ud fra ønsket om at lægge en større samling billeder på nettet. Der findes mange programmer, som kan bruges til at lægge datafiler på nettet; men de fungerer typisk på den måde,

Læs mere

IKT og Videnrepræsentationer

IKT og Videnrepræsentationer IKT og Videnrepræsentationer CSTBI-2 2010 5. kursusgang Introduktion til html Kjeld Svidt ks@civil.aau.dk Personlige hjemmesider De enkelte gruppemedlemmer kan lave egne hjemmesider i mappen public_html

Læs mere

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Systemkrav For at kunne bruge Composite kræves: Windows 95 eller nyere (bemærk - kun Windows kan bruges) Browseren Internet Explorer 6.0 eller

Læs mere

Om styles / typografier / typografiark / stylesheets

Om styles / typografier / typografiark / stylesheets Om styles / typografier / typografiark / stylesheets (dvs. Cascading StyleSheet ~ CSS) CSS er et sprog til at definere layout på HTML-dokumenter. CSS indeholder flere muligheder for layout end HTML og

Læs mere

HTML 48,- Ulf S. Retsloff. www.knowware.dk. Skrevet så alle kan være med... Rigtige hjemmesider for begyndere. 2. udgave

HTML 48,- Ulf S. Retsloff. www.knowware.dk. Skrevet så alle kan være med... Rigtige hjemmesider for begyndere. 2. udgave 48,- Skrevet så alle kan være med... 2. udgave Start med HTML Rigtige hjemmesider for begyndere Dette er hvad rigtige hjemmesider laves af!

Læs mere

Lundtofte skole 2007/08. Åbn FrontPageExpress og Explorer begge programmer skal være åbne når du laver hjemmesiden.

Lundtofte skole 2007/08. Åbn FrontPageExpress og Explorer begge programmer skal være åbne når du laver hjemmesiden. Det vigtigste Hjemmeside i FrontPageExpress Åbn FrontPageExpress og Explorer begge programmer skal være åbne når du laver hjemmesiden. Lav en mappe til din hjemmeside. Find først din mappe på skolens netværk,

Læs mere

Lav din egen forside i webtrees

Lav din egen forside i webtrees Lav din egen forside i webtrees Du behøver ikke at kunne kode eller gøre noget advanceret for at designe din helt egen forside i webtrees. Alt du skal gøre er bare at gøre brug af den indbygget editor.

Læs mere

Martin Geisler. Uge 49, 2001

Martin Geisler. Uge 49, 2001 Min dintprog-browser Martin Geisler Uge 49, 2001 Resumé Dette dokument beskriver tankerne bag min dintprog-browser, en browser skrevet i Java der skal kunne fortolke en mindre delmængde af HTML 4, kaldet

Læs mere

Webmail Gmail Generelt Side 1

Webmail Gmail Generelt Side 1 Webmail Gmail Generelt Side 1 Webmail Gmail Generelt Side 2 Indholdsfortegnelse Oprette en Gmail...... Side 4 Indbakken Oversigt...... Side 9 Skriv en mail...... Side 11 Formateringsværktøjer...... Side

Læs mere

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder:

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder: Design en praktisk guide. Et design udtrykker dit websites grafiske udseende, lige fra hvilke skrifttyper der anvendes op til hvor navigationen er placeret og hvilke interaktive elementer der skal benyttes.

Læs mere

1. Større opgaver i word

1. Større opgaver i word Indholdsfortegnelse 1. Større opgaver i word...1 1.1. Typografier... 1 1.1.1. Normal... 1 1.1.2. Overskrifter... 5 1.2. Dispositionsvisning... 6 1.3. Indholdsfortegnelse... 6 1.4. Krydshenvisninger...

Læs mere

Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site.

Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site. 1 Opstart af et site Opret hovedmappen Opret grafikmappen Opret dit site Mappen skal indeholde alle elementer til dit site. Opret en mappe indeni den første og kald den grafik. Heri lægges alle dine grafikfiler.

Læs mere

Velkommen til denne korte vejledning i hvordan du kan oprette dine egne sider på foreningens hjemmeside.

Velkommen til denne korte vejledning i hvordan du kan oprette dine egne sider på foreningens hjemmeside. Side 1 Velkommen til denne korte vejledning i hvordan du kan oprette dine egne sider på foreningens hjemmeside. Login til mine websider Du starter med at logge ind som medlem. Herefter klikker du på den

Læs mere

En simpel hjemmeside med HTML. Kom i gang med FrontPage

En simpel hjemmeside med HTML. Kom i gang med FrontPage I dette modul skal du lære at oprette og arbejde med hjemmesider med programmet Frontpage 2003. Men først skal du lære lidt om HTML-kodning. Selv om du ikke behøver at kende til HTML for at skabe hjemmesider

Læs mere

Datalogi HTML Aarhus Katedralskole

Datalogi HTML Aarhus Katedralskole HTML HTML er en forkortelse for HyperText Markup Language og er således et markeringssprog og ikke et programmeringssprog! HTML bruges til at opmærke indholdet på en hjemmeside, og skal ses som en måde

Læs mere

Brugervejledning til InfoLand.dk skabelonen

Brugervejledning til InfoLand.dk skabelonen Indhold Indledning... 4 Første gang... 4 Log ind som Administrator og ændre kodeord... 4 Opret Redaktør (dig selv)... 4 Log ind... 4 Log ind med dit eget brugernavn ( Redaktør )... 4 Log ind som Administrator...

Læs mere

HTML 48,- Ulf S. Retsloff. www.knowware.dk 2. Skrevet så alle kan være med 2. Rigtige hjemmesider for begyndere

HTML 48,- Ulf S. Retsloff. www.knowware.dk 2. Skrevet så alle kan være med 2. Rigtige hjemmesider for begyndere 0 48,- Skrevet så alle kan være med 2 Start med HTML Rigtige hjemmesider for begyndere Dette er hvad rigtige hjemmesider laves af!

Læs mere

Kapitel 17 Oprette websider:

Kapitel 17 Oprette websider: Kom i gang med... Kapitel 17 Oprette websider: Gemme dokumenter som HTML-Filer OpenOffice.org Rettigheder Dette dokument er beskyttet af Copyright 2005 til bidragsyderne som er oplistet i afsnittet Forfattere.

Læs mere

Annemette Søgaard Hansen/www.dinwebvejleder.dk

Annemette Søgaard Hansen/www.dinwebvejleder.dk Google Docs Dokumenter Indholdsfortegnelse Værktøjer... Side 3 Menuer... Side 5 Opgave... Side 8 Få adgang til filerne fra din computer... Side 16 Vejledende løsning... Side 17 GoogleDocs Dokumenter 2

Læs mere

Øvelse 1, individuel øvelse billeder, links og undersider

Øvelse 1, individuel øvelse billeder, links og undersider Øvelse 1, individuel øvelse billeder, links og undersider 1. Målsætning I dag skal du lære om principperne bag HTML5 -om hvordan form og indhold er adskilt, og hvordan koden binder dem sammen. Det er et

Læs mere

Elevvejledning til SkoleKomNet - Min egen hjemmeside

Elevvejledning til SkoleKomNet - Min egen hjemmeside Indledning...1 Sådan får du adgang...2 Dit KlasseWeb skrivebord Overblik...2 Dit arbejdsområde...3 Din hjemmeside på nettet...3 Sådan laver du en hjemmeside i 4 trin...3 Trin 1 Dit personlige billede på

Læs mere

Manual CoffeeCup Visitkort konsulenter

Manual CoffeeCup Visitkort konsulenter Manual CoffeeCup Visitkort konsulenter Indhold 2 Start Lidt om sidens layout 3 Åbn den downloadede fil i CoffeeCup og gem den som dit eget projekt 3 Knapperne Ring og Mail Indsæt nyt link på Ring og mail

Læs mere

Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel

Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel Arbejdsgang - Skriv artiklens tekst - Gør billeder klar - Log-in på hjemmesiden - Opret ny artikel - Vælg kategori - Skriv overskrift - Indsæt tekst - Tilføj billeder - Gennemgå artiklens indstillinger

Læs mere

5 ARBEJDE MED EDITOREN

5 ARBEJDE MED EDITOREN 5 ARBEJDE MED EDITOREN Editor (eller Rich Tekst Editor) er et indbygget indholdsredigerings værktøj, hvor man uden nogen kendskab til HTML kodning kan skrive tekst, indsætte billeder, videoer og links.

Læs mere

Orddeling. Automatisk orddeling. Manuel orddeling. Word 2010 18 thoremil.dk. Vælg fanebladet [Sidelayout] Vælg [Orddeling] Markér Automatisk orddeling

Orddeling. Automatisk orddeling. Manuel orddeling. Word 2010 18 thoremil.dk. Vælg fanebladet [Sidelayout] Vælg [Orddeling] Markér Automatisk orddeling Orddeling Automatisk orddeling Vælg [Orddeling] Markér Automatisk orddeling Manuel orddeling Vælg [Orddeling] Klik [Manuelt] For hvert ord, som vises, kan der gøres følgende: Accepter det foreslåede orddelingssted

Læs mere

TinyMCE Bruger Guide. Forord. Contents

TinyMCE Bruger Guide. Forord. Contents TinyMCE Bruger Guide Forord TinyMCE er en platformuafhængig web baseret Javascript HTML WYSIWYG (What You See Is What You Get) editor udgivet som Open Source under LGPL af Moxiecode Systems AB. Dette er

Læs mere

Indholdsfortegnelse. Forord

Indholdsfortegnelse. Forord Indholdsfortegnelse Forord i Indholdsfortegnelse iii Indledning ix 1. Introduktion til HTML 1 Websider laves med HTML 2 Websider læses med en browser 2 Browserspecifikke markører 3 HTML-dokumentet 4 Hvad

Læs mere

Vejledning i redigering af apotekets hjemmeside

Vejledning i redigering af apotekets hjemmeside i redigering af apotekets hjemmeside It-afdelingen Januar 2007 INDHOLDSFORTEGNELSE FEJL! BOGMÆRKE ER IKKE DEFINERET. 1 INTRODUKTION 3 2 ADMINISTRATION 4 3 OPBYGNING 4 SIDER 5 FIL ARKIV 6 ARTIKLER 7 ØVRIGE

Læs mere

I denne manual kan du finde en hurtig introduktion til hvordan du:

I denne manual kan du finde en hurtig introduktion til hvordan du: VORES NORDSJÆLLAND HURTIGT I GANG MANUAL 01: Bruger HVAD INDEHOLDER DENNE MANUAL? I denne manual kan du finde en hurtig introduktion til hvordan du: 1. Finder Vores Nordsjælland hjemmesiden 2. Opretter

Læs mere

Manual til hjemmeside i Typo3

Manual til hjemmeside i Typo3 Manual til hjemmeside i Typo3 Gode tips og genvejstaster Ét linieskift Ctrl + A Ctrl + C Ctrl + X Ctrl + V shift + enter (tasten du normalt bruger til linieskift) Markér alt Kopier Klip Sæt ind Oprettelse

Læs mere

Projekt i Programmering C Menu til hjemmeside.

Projekt i Programmering C Menu til hjemmeside. Projekt i Programmering C Menu til hjemmeside. 10-12-2004 Holstebro HTX Bent Arnoldsen Synopsis. Projektet her er en menu til hjemmesider, som er lavet så den er let at tilrette, når man tilføjer eller

Læs mere

PHP Quick Teknisk Ordbog

PHP Quick Teknisk Ordbog PHP Quick Teknisk Ordbog Af Daniel Pedersen PHP Quick Teknisk Ordbog 1 Indhold De mest brugte tekniske udtryk benyttet inden for web udvikling. Du vil kunne slå de enkelte ord op og læse om hvad de betyder,

Læs mere

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16 GRAFISK WORKFLOW Indhold Grafisk workflow Procesbeskrivelse Inspiration 5 Skitser 6 Flowchart Typografi og farver 8 Skelet 9 Storyboard 2 Html, css og seo 6 Grafisk workflow Opgaven At skabe et nyt og

Læs mere

Manual for Synkron hjemmesider

Manual for Synkron hjemmesider Manual for Synkron hjemmesider Denne manual tilhører: Brugernavn: (username) Adgangskode: (password) 1 Start med sitetræet: Sitetræet er centralt. Det er her, dit website er. Det er her, du bygger dine

Læs mere

Lav hjemmesider i StarOffice 6.0

Lav hjemmesider i StarOffice 6.0 Appendiks til hæftet StarOffice 6.0 af Palle Bruselius Udgivet på Forlaget Libris 1 Copyright 2003 by Palle Bruselius Forside og dtp: Palle Bruselius Dette materiale må ikke gøres til genstand for kommerciel

Læs mere

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING DANSKE BEDEMÆND august 2014 v1.4 1 P a g e INDHOLDSFORTEGNELSE Adgang... 3 Overordnet om Umbraco... 4 Højreklik muligheder i oversigten...

Læs mere

Active Builder - Brugermanual

Active Builder - Brugermanual Active Builder - Brugermanual Version: Release 2.0 Sprog: Dansk Copyright 2014 - Talk Active ApS INDHOLDSFORTEGNELSE INDHOLDSFORTEGNELSE... 2 1. HURTIGT OVERBLIK... 4 1.1 Vælg URL:... 4 1.2 Vælg en skabelon:...

Læs mere

Formatering af tekst, JCE Editor, Joomla

Formatering af tekst, JCE Editor, Joomla Formatering af tekst, JCE Editor, Joomla skrevet af Inge Vittrup Paragraph anvender du ved almindelige sætninger. Heading 1 er hovedoverskrift med største skrift. Heading 2 er overskrift til en artikel

Læs mere

Mini-guide for opdatering af hjemmesiden for. SOIF www.soif.dk

Mini-guide for opdatering af hjemmesiden for. SOIF www.soif.dk Mini-guide for opdatering af hjemmesiden for SOIF www.soif.dk Senest opdateret: 03-07-2009 Indholdsfortegnelse 2 Indholdsfortegnelse 2 Lidt generelt om KlubCMS 3 Brugere/Brugergrupper 3 Sideopbygning:

Læs mere

Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup

Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Niels Sundstrup Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Webteknologi - Carl- Henrik Nielsen - Syddansk Universitet, Kolding - Udlevering: 12. januar 2012 Aflevering: 19. januar

Læs mere

Byg web sider. Introduktion:

Byg web sider. Introduktion: Introduktion: Du kender nu nogle enkle HTML tags, så nu er det på tide, at du kommer i gang med at lave din første side! Når du har nogle HTML-sider klar skal du have dem lagt op, så dine venner kan se

Læs mere

Kom godt i gang med. Gadstrup Fodbolds Hjemmeside. Udarbejdet af:

Kom godt i gang med. Gadstrup Fodbolds Hjemmeside. Udarbejdet af: Kom godt i gang med Gadstrup Fodbolds Hjemmeside Udarbejdet af: Forretningsstøtte Søren Tofte Version 1.0 24.2.2011 Indhold Sådan kommer du i gang?... 3 Log ind... 4 Mine oplysninger... 5 Klub CMS... 6

Læs mere

RIGSPOLITIET. Vejledning i konvertering. fra. Word -dokument. til. PDF-fil. på politi.dk. Rigspolitiets websektion

RIGSPOLITIET. Vejledning i konvertering. fra. Word -dokument. til. PDF-fil. på politi.dk. Rigspolitiets websektion RIGSPOLITIET Vejledning i konvertering fra Word -dokument til PDF-fil på politi.dk Rigspolitiets websektion Indledning Da vi skal leve op til kravene om tilgængelighed på Internettet, skal alle tekster

Læs mere

Åbn Paint, som er et lille tegne- og billedbehandlingsprogram der findes under Programmer i mappen Tilbehør. Åbn også Word.

Åbn Paint, som er et lille tegne- og billedbehandlingsprogram der findes under Programmer i mappen Tilbehør. Åbn også Word. 75 Paint & Print Screen (Skærmbillede med beskæring) Åbn Paint, som er et lille tegne- og billedbehandlingsprogram der findes under Programmer i mappen Tilbehør. Åbn også Word. 1. Minimer straks begge

Læs mere

WEB kursus I. Grundkursus i CMS

WEB kursus I. Grundkursus i CMS WEB kursus I Grundkursus i CMS 1 Link til manual på intranet: http://intranet.regionsyddanmark.dk/cmsmanual Nyttig information Support telefonnummer: 65 41 32 25 Support e-mail: websupport@regionsyddanmark.dk

Læs mere

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside 1. Lidt om hvad du

Læs mere

Redigering af Nyheder

Redigering af Nyheder Redigering af Nyheder Her er først klikket på Liste i venstre kolonne, derefter på Nyheder i næste kolonne: (Husk at man klikker på ordet og ikke på ikonet!) For at tilføje, redigere og slette nyheder

Læs mere

TYPO3 TRIN FOR TRIN 3

TYPO3 TRIN FOR TRIN 3 TYPO3 TRIN FOR TRIN 3 De indledende øvelser er fuldstændig de samme som i TYPO3 TRIN FOR TRIN 1 side 1-2. Du åbner altså din browser, skriver ale.dk/typo3 i Adressefeltet, og klikker på ordet Side i menuen

Læs mere

Indre Missions. Vejledning til TYPO3

Indre Missions. Vejledning til TYPO3 Indre Missions Vejledning til TYPO3 Manual til Typo3 på IM's server 1. Udgave, januar 2010 Daniel Damm, IT afdelingen, Indre Missions Hus Indholdsfortegnelse Indledning...5 Præsentation af begrebet CMS...6

Læs mere

Brugervejledning. Hjemmesider med Cmsimple.

Brugervejledning. Hjemmesider med Cmsimple. 1af23 Brugervejledning. Hjemmesider med Cmsimple. 1. Forord. Denne brugervejledning er fremstillet for at hjælpe personer ved Lokalhistorisk Arkiver i ny Sønderborg kommune, som kun har ringe kendskab

Læs mere

Password-beskyttelse af visse filer

Password-beskyttelse af visse filer W EB DESIGN 101 K ODEORDSBESKYTTELSE A F VISSE FI LER Password-beskyttelse af visse filer P å et websted kan det være interessant kun at give en del af brugerskaren adgang til visse filer. Der er en mængde

Læs mere

1 af 5. Nogle. Word. funktioner. Mvh otto. Indhold. Fortryd

1 af 5. Nogle. Word. funktioner. Mvh otto. Indhold. Fortryd 1 af 5 Nogle funktioner til tekstbehandling i Meningen med vejledningen her er at kursisterne i forbindelse med større skriftlige opgaver f.eks. Historieopgaven, Mini SSO, Større Skriftlig Opgave (SSO)

Læs mere

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold:

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress: Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

Opstilling af festsange med overskrift og vers.

Opstilling af festsange med overskrift og vers. Side 1 af 12 Opstilling af festsange med overskrift og vers. Spalter 1. Skriv overskrift og vers på normal måde. Lad os sige, at der er 7 vers, hvor de 6 skal stå i 2 spalter. Det sidste skal stå alene

Læs mere

Vejledning. hjemmeside-opbygning. - DFIF - Vejledning til CMS: Dansk Firma Idrætsforbund

Vejledning. hjemmeside-opbygning. - DFIF - Vejledning til CMS: Dansk Firma Idrætsforbund Vejledning hjemmeside-opbygning. - DFIF - Side 1 Indholdsfortegnelse INDHOLDSFORTEGNELSE... 2 HURTIGT I GANG... 4 REDIGERE HJEMMESIDEN... 5 LOGIN...5 TEKST PÅ EN SIDE...6 REDIGERINGSMULIGHEDER...6 TEKSTBEHANDLING

Læs mere

Websted? Webside? Hjemmeside?...3 Arbejdsmåden i FrontPage...4 Visningerne i FrontPage...5 Start af FrontPage...6 Opret et websted...

Websted? Webside? Hjemmeside?...3 Arbejdsmåden i FrontPage...4 Visningerne i FrontPage...5 Start af FrontPage...6 Opret et websted... Webværktøj: Tastevejledning FrontPage 2003 Denne tastevejledning sætter dig i stand til at lave enkle websteder bestående af enkeltdokumenter (websider), der er indbyrdes forbundet med link (af og til

Læs mere

Sabine Puk Sørensen Svendeprøve portfolio

Sabine Puk Sørensen Svendeprøve portfolio Sabine Puk Sørensen Svendeprøve portfolio 2016 Grafisk workflow Svendeprøve Kvalitetsvurdering Hjemmesiden fungere som den skal, og kunden er meget glad for resultatet. Siden er simpel, men giver den ønskede

Læs mere

Først skal du oprette dig i systemet, d. v. s. du skal have en såkaldt Googlekonto bestående af en mailadresse og et kodeord.

Først skal du oprette dig i systemet, d. v. s. du skal have en såkaldt Googlekonto bestående af en mailadresse og et kodeord. Gmail Indhold Indhold...1 Introduktion...2 Opret dig i systemet...2 At skrive mails...5 Sende en mail til flere personer...8 Vedhæfte en fil...9 Kladde...10 Signatur...11 Modtagne mails...12 Stjernemarkering...14

Læs mere

SÅDAN BRUGER DU TEKST- BEHANDLING INTRODUKTION

SÅDAN BRUGER DU TEKST- BEHANDLING INTRODUKTION SÅDAN BRUGER DU TEKST- BEHANDLING INTRODUKTION I vejledningen bruger vi det gratis program Writer fra OpenOffice som eksempel til at vise, hvordan man bruger nogle helt grundlæggende funktioner i tekstbehandling.

Læs mere

Hvad bør du vide om layout og typografi

Hvad bør du vide om layout og typografi Hvad bør du vide om layout og typografi Når man vil lave en tekst, som andre skal læse, er det vigtigt at vælge en skrifttype, der er motiverende og inspirerende at læse for målgruppen. Derfor bør man

Læs mere

Kapitel 13 Arbejde med Typografier:

Kapitel 13 Arbejde med Typografier: Kom i gang med Kapitel 13 Arbejde med Typografier: Introduktion til Typografier OpenOffice.org Rettigheder Dette dokument er beskyttet af Copyright 2005 til bidragsyderne som er oplistet i afsnittet Forfattere.

Læs mere

Microsoft Word 2010 Huskesedler

Microsoft Word 2010 Huskesedler Microsoft Word 2010 Huskesedler Indskrivning... 3 Gem og udskriv... 4 Åbn og Luk... 5 Tastatur... 6 Mus... 9 Indsæt specielle tegn og symboler... 10 Formatering af tegn... 11 Formatering af afsnit... 12

Læs mere

Microsoft. fra Word 2003

Microsoft. fra Word 2003 I denne vejledning Microsoft Word 2010 ser meget anderledes ud end Word 2003, og vi har derfor oprettet denne vejledning, så du hurtigere kan komme i gang med at bruge programmet. Læs videre for at få

Læs mere

Billedbehandling Pixlr.com Side 1

Billedbehandling Pixlr.com Side 1 Billedbehandling Pixlr.com Side 1 Billedbehandling Pixlr.com Side 2 Indholdsfortegnelse Det første skærmbillede... Side 3 Navigation... Side 4 Åbne Pixlr Advanced... Side 5 Inde i programmet... Side 6

Læs mere

Her kan du slette enkelte figurer i et diagram ved at klikke på figuren der skal slettes og herefter på Slet.

Her kan du slette enkelte figurer i et diagram ved at klikke på figuren der skal slettes og herefter på Slet. 9. FLOWDIAGRAMMER Der er i D4InfoNet indbygget et program til opbygning af flowdiagrammer. Diagrammerne kan placeres på forsiden af de enkelte håndbøger, og kan tilføjes kapitler eller de enkelte dokumenter.

Læs mere

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

1.0 Velkommen til manualen for Editor 1. 1.1.1 Editorens typiske udseende 1. 1.1.2 HTML-kode 1. 1.1.3 Generelle funktioner og deres ikoner 2

1.0 Velkommen til manualen for Editor 1. 1.1.1 Editorens typiske udseende 1. 1.1.2 HTML-kode 1. 1.1.3 Generelle funktioner og deres ikoner 2 1.0 Velkommen til manualen for Editor 1 1.1 Editoren 1 1.1.1 Editorens typiske udseende 1 1.1.2 HTML-kode 1 1.1.3 Generelle funktioner og deres ikoner 2 1.2 Værktøjslinjer 2 1.3 Ikoner 2 1.3.1 Liste over

Læs mere

SIGIL Sådan opretter du en e- bog Step by Step

SIGIL Sådan opretter du en e- bog Step by Step SIGIL Sådan opretter du en e- bog Step by Step Af Gitte Winter Graugaard Nov. 2013, Sigil version 0.7.2 1 Her følger en intro skridt for skridt til at oprette en e- bog i SIGIL og publicere den på SAXO

Læs mere

Redaktørmanual TYPO3 Version 6.2

Redaktørmanual TYPO3 Version 6.2 Redaktørmanual TYPO3 Version 6.2 www.t3cms.dk TYPO3 Manual Version 6.2 Side 1 af 20 T3CMS Tlf: 70 25 00 22 Indholdsfortegnelse Generel info om TYPO3 3 Rediger din side 4-6 Indsættelse af links 7 Indsæt

Læs mere

Version 1.2: 23/8-2015. Vejledning. Rapportskabelon til Word 2010/2013

Version 1.2: 23/8-2015. Vejledning. Rapportskabelon til Word 2010/2013 Version 1.2: 23/8-2015 Vejledning Rapportskabelon til Word 2010/2013 Indholdsfortegnelse Indledning... 3 Installation af rapportskabelon... 3 Opret et nyt dokument til din rapport... 4 MIM Menu...... 5

Læs mere

Picto Selector. Lav dine egne flotte symbolark på den nemme måde. Version: Oktober 2012

Picto Selector. Lav dine egne flotte symbolark på den nemme måde. Version: Oktober 2012 Picto Selector Lav dine egne flotte symbolark på den nemme måde Version: Oktober 2012 Indholdsfortegnelse Hvad er Picto Selector?...4 USB?...4 Hent programmet...4 Installer programmet på din computer...5

Læs mere

MANUAL - Joomla! Version 1

MANUAL - Joomla! Version 1 MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 3 Log ind... 3 Ret i en artikel, der allerede er oprettet... 4 Opret ny artikel... 8 a) Skriv direkte i tekstfelt... 9 b) Indsæt tekst

Læs mere

Word tips til skriftlig eksamen

Word tips til skriftlig eksamen Word tips til skriftlig eksamen Indhold Word tips til skriftlig eksamen... 1 Forord...2 Sidehoved...3 Sidefod...3 Sidetal og side x af y...4 Gem som skabelon...5 Indsæt sideskift...6 Vis koder...6 Tekstformatering...7

Læs mere

Google Søgninger side 1 af13

Google Søgninger side 1 af13 Google Søgninger side 1 af13 Indholdsfortegnelse Internetforkortelser og adresser m.m.... Side 2 Søgning i Google... Side 4 Nyhed erstatning for det sorte bånd... Side 7 Avanceret søgning... Side 10 Flere

Læs mere

Skærmlayout på websiden

Skærmlayout på websiden Skærmlayout på websiden Af Kaj Søndergaard En bog i et flot layout er dejlig at få i hånden. Man får lyst til at bladre i bogen for at finde ud af om indholdet ser ud til at være værd at ofre tid på. Hvis

Læs mere

Kommandonavn Ændringstaster Tast Menu Accepter Alle Viste. Accepter Ændringer Accepter Alle Ændringer. Accepter Afslut

Kommandonavn Ændringstaster Tast Menu Accepter Alle Viste. Accepter Ændringer Accepter Alle Ændringer. Accepter Afslut Genvejstaster i Word 2003 Kommandonavn Ændringstaster Tast Menu Accepter Alle te Accepter Ændringer Accepter Alle Ændringer Accepter Afslut Afsnit Ned Ctrl+ Ned Afsnit Ned Udvid Ctrl+Skift+ Ned Afsnit

Læs mere

CSS fortsat: Boksmodel, floating & positionering

CSS fortsat: Boksmodel, floating & positionering Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 1. Lidt om hvad du har lært Du har i øvelse

Læs mere

Vejledning for opdatering af hjemmesiden opbygget med. KlubCMS

Vejledning for opdatering af hjemmesiden opbygget med. KlubCMS Vejledning for opdatering af hjemmesiden opbygget med KlubCMS Indholdsfortegnelse Indhold Indholdsfortegnelse... 2 Indledning... 3 Lidt generelt om KlubCMS... 3 Sideopbygning:... 4 Brugere/Brugergrupper...

Læs mere

Typografi og layout i Word 2010

Typografi og layout i Word 2010 Ret&Rigtigt F12 Niels Erik Wille Typografi og layout i Word 2010 Papirformat og papirets orientering (højformat / bredformat) Vælges i menuen Sidelayout: Man kan vælge Retning (højformat / bredformat)

Læs mere

Microsoft Word 2007. thoremil.dk

Microsoft Word 2007. thoremil.dk Microsoft Word 2007 Indskrivning... 3 Gem og udskriv... 4 Åbn og Luk... 5 Tastatur... 6 Mus... 9 Indsæt specielle tegn og symboler... 10 Formatering af tegn... 11 Formatering af afsnit... 12 Punktopstilling...

Læs mere

Manual til Dynamicweb Februar 2010

Manual til Dynamicweb Februar 2010 Manual til Dynamicweb Februar 2010 Login... 2 Skabeloner og formater... 3 Filarkivet... 4 Lav en PDF... 5 Opret en ny side... 7 Navngiv siden... 9 Aktiver siden... 9 Sorter sider... 9 Flyt siden... 11

Læs mere

I gang med Adobe Muse CC

I gang med Adobe Muse CC I gang med MUSE Muse er et program fra Adobe til fremstilling af websites, for de som ikke ønsker at arbejde med koder. De fremstillede websites baserer sig naturligvis på HTML, CSS, Javascript mm., du

Læs mere

Dansk. 1. Er sproget Dansk i Open Office og er der dansk stavekontrol?

Dansk. 1. Er sproget Dansk i Open Office og er der dansk stavekontrol? NEED TO KNOW Nedenstående er et bud på nogle af de funktioner man kan have glæde af i Open Office når man skriver opgaver til skolen. - Nedenstående er alene en anvisning på nogle af de punkter der står

Læs mere

Indhold. 1. Adgang og afslutning

Indhold. 1. Adgang og afslutning 1 Indhold 1. Adgang og afslutning 2. Menupunkter 3. Tekst 4. Billeder 5. Video 6. Lyd 7. Bannere 8. Bokse 9. Dokumenter 10. Links 11. Iframe 12. Markedspladsen 13. Nyheder 14. Job 15. Kalender 16. Selvbetjeningsbjælken

Læs mere

Log ind i administrationspanelet

Log ind i administrationspanelet Kongsgaarden Vester Broby CMS baseret på WordPress Log ind i administrationspanelet... 1 Begreber og visualisering (skabelonen Standard)... 2 Begreber og visualisering (skabelonen Full width)... 2 Sidebars...

Læs mere

Loppemarkedet Word 2010. Åbn et nyt Word dokument og gem det som loppemarkedet.docx på din USB-hukommelse.

Loppemarkedet Word 2010. Åbn et nyt Word dokument og gem det som loppemarkedet.docx på din USB-hukommelse. Opgaven handler om at lave en avis med salg og køb af forskellige effekter. Avisen skal indeholde en titel og et antal spalter med overskrifter og annoncer i. Åbn et nyt Word dokument og gem det som loppemarkedet.docx

Læs mere

Designmanual for websider

Designmanual for websider Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet

Læs mere

Upload af billeder til hjemmesiden m.m.

Upload af billeder til hjemmesiden m.m. Upload af billeder til hjemmesiden m.m. Fremgangsmåde VVS-inst.dk Upload af billeder m.m., Side 1 Så går vi i gang Åben Firefox browseren Gå ind på denne adresse, for at komme til hjemmeside programmet.

Læs mere

Når du har logget dig ind, ser du Randers Kommunes byvåben midt på siden. I venstre side er der en række mapper:

Når du har logget dig ind, ser du Randers Kommunes byvåben midt på siden. I venstre side er der en række mapper: DXP vejledning Generelt: DXP er et værktøj til at fremstille præsentationsmaterialer (foldere, brochurer, løbesedler mv.) DXP egner sig kun til mindre brochurer og lign., da den største skabelon kan rumme

Læs mere