HTML 48,- Ulf S. Retsloff. Skrevet så alle kan være med... Rigtige hjemmesider for begyndere. 2. udgave
Størrelse: px
Starte visningen fra side:

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

Transkript

1 48,- Skrevet så alle kan være med udgave Start med HTML Rigtige hjemmesider for begyndere <HTML> <HEAD> <TITLE></TITLE> </HEAD> <P ALIGN= center > Dette er hvad rigtige hjemmesider laves af! </P> </HTML> DET ER SLET IKKE SÅ NØRDET Incl. stor supportpakke,som du henter på nettet. Grundlæggende HTML Din første hjemmeside FtP Filoverførsel Markedsføring Hjælpeprogrammer HTML Quick Indeks Ulf S. Retsloff

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 KnowWare 2 Hæftets opbygning... 4 HTML Support... 4 Symboler... 4 Introduktion til HTML... 5 Url... 5 Internet browsere... 6 HTML sproget... 6 Grundlæggende HTML... 8 I dette kapitel lærer du:... 8 Introduktion til HTML elementer... 9 Syntax regler Specielle tegn Besværlige koder med Erstat HTML s grundlæggende struktur Delopgave Layout og formatering I dette kapitel lærer du: Den første tekst Linieskift og afsnit Linieskift Afsnit Justering Vandrette linier Tekstformatering Standard tekstfarver Fremhævning Skrifttype - størrelse og farve Heading/Overskrift Lister og Opstillinger Ordnede lister Uordnede lister Mere om lister Delopgave Grafik og billeder I dette kapitel lærer du Grafik Baggrundsfarve Baggrundsbillede Billeder Yderligere <IMG> attributter Dimensioner Delopgave Tabeller I dette kapitel lærer du: Den første tabel Flere tabeller Attributter i og <TD> <CAPTION> Billeder i tabeller Delopgave Hyperlink Hyperlink til andre dokumenter Hyperlink til Hyperlink til en fil Henvisning til bogmærker Url s Standard hyperlinkfarver...44 Hyperlink og placering af filer...44 Link konventioner i forbindelse med mappe hierarki Opgave 5a...46 Opgave 5b...47 Specielle elementer I dette kapitel lærer du: Lyd og video...48 Brugerbestemte hændelser Automatiske hændelser Klikbare billeder (Imagemaps)...51 Oprettelse af koordinater...52 Cirkulære og mangekantede områder META information...55!doctype...56 Kommentarer...56 Opgave 6a...57 Opgave 6b...57 Brug hjemmesiden som skabelon...57 Rammer I dette kapitel lærer du: Rammedokument...58 Ramme eksempler...60 Funktionelle rammer Alternativ visning Afsluttende om rammer...64 Rammeopgave Web bud Web-publicering Cute FTP Anskaffelse...68 Installation...68 Første start af CuteFTP...68 Vi går ON-LINE CuteFTP's programvindue Overførsel af filer HTML Quick Indeks HTML elementer...73 Struktur Indlejrings konventioner...76

4 3 Forord Dette er et begynderhæfte for dig, der gerne vil lære at lave rigtige hjemmesider med HTML. Hæftet gennemgår på en let og overskuelig måde, HTML sproget, dets regler og opbygning. Hæftet kræver ingen forudgående kendskab til HTML, men er du allerede bekendt med HTMLsproget, er hæftet også udmærket som reference. Generelle Forudsætninger Jeg forudsætter at du har et grundlæggende kendskab til Windows 95/98 samt brug af Internet, Internet-browser og mailprogram. Inden du går i gang bør du: Have adgang til Internettet via en konto hos en Internet-udbyder samt hjemmesideplads hos den pågældende udbyder. Derudover skal følgende programmer være installeret på din computer: Forord Sprog Da dette er et begynderhæfte vil jeg benytte et, for nogle måske, overdrevet forklarende sprog. Dette blot for at alle skal kunne være med - er du allerede bekendt med HTML, kan grundlæggende forklaringer blot springes over. Hellere én der mere end forstår end hundrede der ikke forstår Fejl, ris og ros Hvis du efter at have læst hæftet, evt. har forslag til ændringer eller forbedringer, er du velkommen til at kontakte mig via på adressen : pctrold@get2net.dk. Tak Tak til alle der har bidraget ved tilblivelsen af hæftet. Speciel tak til Vibeke Larsen for BETA test. Tak til Mariah og Benjamin for sjove infald og til alle de brugere der er igennem tiden er kommet med gode input. 1. Windows Wordpad (findes normalt under Start, Programmer, Tilbehør i Win 95/98). 2. Microsoft Internet Explorer 4.x eller nyere. Inden du går i gang, skal du hente hæftets Support-pakke fra Internettet - læs om pakken i afsnittet HTML Support s. 4. Browserpreference I følge forundersøgelser ved udarbejdelsen af dette hæfte, har jeg erfaret at langt de fleste førstegangsbrugere benytter Microsoft's browser - derfor har jeg valgt denne som reference til hæftets eksempler og øvelser. Netscape kan bruges, men du skal blot være opmærksom på, at screenshots mv. alle er taget fra MSIE. Hæftets eksempler vil i mange tilfælde se anderledes ud i Netscape s browser.! Alle HTML eksempler i hæftet understøttes imidlertid af begge browsere. Ved undtagelser, vil det være anført med enten MSIE eller Netscape.

5 Hæftets opbygning 4 Hæftets opbygning Hæftet er opbygget som een lang sekvens til og med kapitlet Rammer s det er derfor meget vigtigt at du følger disse kapitler slavisk. Sidst i hvert kapitel findes der en opgave, der som hæftet skrider frem, fører frem til din første hjemmeside. Vi bygger ganske enkelt en færdig hjemmeside sideløbende med, at vi gennemgår de enkelte elementer i HTML. Hvert kapitels opgave er tilpasset til de færdigheder, du har erhvervet i det pågældende kapitel. Der er mange eksempler og mindre øvelser i de enkelte kapitler - jeg vil anbefale at du laver dem alle, for derved at være bedre rustet til kapitlernes opgaver og opbygningen af den sideløbende hjemmeside. Hæftets sidste kapitler indeholder sekundære, men vigtige ting som hvordan du lægger en hjemmeside på nettet og markedsfører den, alternative HTML editorer, tips til webdesign mm. Jeg har prøvet at holde sproget så ikke nørdet som muligt. Skulle du alligevel falde over noget der virker helt ulogisk, må du meget gerne lade mig det vide. Der vil kun være medtaget de vigtigste og mest elementære elementer. HTML Support Hæftet introducerer et nyt koncept, idet det støtter sig til den elektroniske Support-pakke HTML Support 1.0, som skal downloades og installeres på din computer, inden du går i gang. HTML Support 1.0 er lavet i HTML format og virker fuldstændigt som en hjemmeside på Internettet - du surfer blot Off-Line. Du vil i supportpakken finde opgave løsninger, eksempel filer og ekstra HTML eksempler. Derudover indeholder Support-pakken en række utilities - det drejer sig om Farveskemaer, Oversigt over Specielle karakterer, Installations vejledninger, Grafik galleri, Animations galleri samt Lyd galleri. Du downloader HTML Support 1.0 via hæftets webside. Følg instruktionerne On-Line. Programmer, kunne finde menupunktet HTML Support 1.0. Herunder kan du starte HTML Support samt læse pakkens readme fil. c:\webtest Denne mappe vil være din øvelses web mappe. Jeg vil konsekvent henvise til denne mappe ved alle eksempler og øvelser. Alle øvelsesfiler skal altid placeres eller oprettes i C:\WEBTEST! Du kan efter installation godt flytte HTML Support s to installations mapper - vær dog opmærksom på, at du i dette tilfælde selv må ændre de genveje der automatisk blev oprettet i Start menuen. Jeg vil med jævne mellemrum henvise til HTML Support, enten i forbindelse med opgave løsninger, ekstra eksempler eller når du skal hente eksempel filer. Det er derfor en god ide altid at have HTML Support åben, når du arbejder med hæftet. Symboler Der benyttes følgende symboler i hæftet: #! $ Browserchcek - Vil optræde efter et eksempel og betyder at du skal checke resultatet i browseren. Henvisning til HTML Support. En vigtig note eller oplysning. En farlig handling. Når du efter download installerer HTML Support 1.0, bliver der oprettet to mapper på C-drevet: c:\hsp10 Denne mappe vil indeholde selve HTML Support. Efter installationen vil du i under Start,

6 5 Introduktion til HTML Introduktion til HTML HTML, Hyper Text Markup Language er det hjemmesider laves af. HTML dokumenter optræder på WWW (World Wide Web), som er den grafiske del af Internettet. Det er her du finder hjemmesider eller Websteder som de også kaldes. En hjemmeside består af ét eller flere hypertekst dokumenter (HTML dokumenter). Der refereres ofte til HTML dokumenter som Internet sider eller blot sider. Man bevæger sig mellem hyper-tekst dokumenter vha. hypertekst, hvilket er henvisninger (link), som via klik, tager dig til et andet sted på nettet - det være sig et andet dokument/side på samme hjemmeside eller til en helt anden hjemmeside et andet sted på kloden. Du kender allerede til fænomenet, f.eks. fra Windows hjælpefiler (HLP) - disse er faktisk også hypertekst dokumenter, idet du her klikker dig fra sted til sted. Hypertekst-dokumenter er i princippet ganske alm. tekstfiler gemt med efternavnet HTM eller HTML. En del af teksten skrives i det man kalder HTML-sprog - et kode sprog som en browser forstår på en bestemt måde (se HTML sproget s. 6).! Jeg vil konsekvent benytte fil-efternavnet HTM. Alle eksempler og øvelser skal gemmes i dette format. En af de største fordele ved at præsentere materiale via HTML på Internettet, er den fleksibilitet hypertekst dokumentet giver. Der er stort set ingen grænser for, hvor mange sider man kan have liggende og hvor mange link der kan oprettes. En hjemmeside skal dog altid opbygges med omtanke, ellers kan det hurtigt blive uoverskueligt. Derfor er det altid en god ide at opbygge sin hjemmeside så logisk som muligt. Følgende illustration viser hvordan en hjemmeside kan opbygges: Det er i princippet den måde, hvorpå der linkes i mellem dokumenter der er afgørende for, hvor overskueligt det bliver, både for dine brugere og dig selv. Url For at identificere HTML dokumenter på Internettet benytter man specielle adresser. Disse kaldes også for URL s (Uniform Ressource Locators). Ethvert HTML dokument kan identificeres ud fra sin URL. En URL er sammensat af flere elementer: Første led i adressen er protokollen. Den fortæller blot, hvordan der skal kommunikeres. Er der tale om dokumenter på WWW der skal læses i en browser, benyttes altid protokollen En anden vigtig protokol du senere vil stifte bekendtskab med, er ftp://. Denne benyttes når man skal overføre en hjemmeside fra sin egen computer til udbyderens server via et FtP program (se s. 68).

7 Introduktion til HTML 6 Næste led fortæller serverens navn som er delt op i tre underled adskilt med punktum (.). www fortæller at der er tale om en server på World Wide web - www er ikke krævet, men benyttes i de fleste adresser. knowware er i dette tilfælde navnet på udbyderens server og dk er en landekode - i dette tilfælde fortælles at serveren er dansk. Andre landekoder kunne f.eks. være se for Sverige, de for Tyskland osv. Amerikanske servere benytter ikke landekoder, men institutionskoder i stedet, f.eks. com for private firmaer eller org for offentlige organisationer. Næste led htmlsup er valgfrit og angiver blot en mappe på serveren. Sidste led angiver navnet på det dokument der er tale om.! Vigtigt! Der er en meget vigtig konvention du skal være bekendt med mht. hjemmesider. En hjemmeside består jo som regel ikke blot af ét enkelt dokument, men af mange sammenhængende dokumenter. En hjemmeside har derfor altid et Hoveddokument, hvorfra der så placeres hyperlink til et antal underliggende dokumenter. Da dette Hoveddokument er det dokument der skal åbnes først i browseren, når hjemmesiden besøges, har man valgt at lade browserne lede efter et bestemt fil-fornavn til lige netop dette dokument, nemlig index. Når der søges på en hjemmeside adresse åbnes automatisk filen med dette navn. Dette betyder, at du altid skal benævne Hoved-dokumentet, dvs. det dokument du vil have åbnet først når hjemmesiden besøges, index.htm. På denne måde behøver brugere ikke spekulere over hvad dit Hoveddokument hedder, men blot søge på den overordnede Internet adresse, f.eks. og Hoveddokumentet vil automatisk åbnes i browseren (alle andre dokumenter end lige Hoveddokumentet kan navngives fuldstændigt som du lyster).! Vigtigt! Ingen regel uden undtagelser - Du skal være opmærksom på, at nogle ganske få Internet udbydere kræver at du benytter et andet fil-fornavn til hjemmesides Hoveddokument. Er du i tvivl må du kontakte din udbyder. Jeg vil konsekvent bruge index i hæftets øvelser. Internet browsere Der findes, som tidligere nævnt, to markante browsere på markedet, nemlig MSIE (Microsoft Internet Explorer) og Netscape. Disse to browsere dominerer tilsammen med ca. 98% på verdensplan. I flere år har det været Netscape der har haft den største andel, men i de senere år er MSIE kommet meget stærkt efter og i dag er udbredelsen af de to browsere ca. fifty fifty. I Danmark og specielt blandt førstegangsbrugere (nye brugere), er det derimod MSIE der helt klart dominerer, hvilket er årsagen til, at jeg har valgt at referere til denne browser i hæftets eksempler. HTML sproget HTML er ikke et programmeringssprog som f.eks. Java, Visual Basic eller C+ som mange fejlagtigt tror. HTML skal ikke oversættes af en såkaldt compiler og der benyttes ikke logiske operatorer som i traditionel programmering. Jeg vil dog i det efterfølgende tillade mig at benytte udtrykket programmering, idet det er den nemmeste måde at referere til det på. HTML er et sæt retningslinier for, hvordan en Internet-browser skal vise en hjemmeside - altså en tekstfil med efternavnet HTM. Selve HTMLfilen indeholder en masse formaterings-koder som kaldes HTML elementer (eng. Tags) - disse udgør HTML sproget. Et eksempel på et HTML element kunne være: <B>Dette er en fed skrift</b> hvilket betyder, at den indlejrede tekst skal vises med Fed skrift i browseren. For at ensarte HTML-sproget finders der et konsortium ( W3C - WWW consortium) der løbende udstikker retningslinier for, hvilke HTML elementer der bør være standard - den sidste nye HTML specifikation hedder HTML 4.0.

8 7 Introduktion til HTML Problemet er, at det er browser producenterne der enerådigt bestemmer, hvilke elementer de vil understøtte og hvordan de skal vises i deres browser. Dette faktum betyder, at du skal optimere dine HTML dokumenter så de kan ses tilfredsstillende af både MSIE og Netscape, da netop disse to browser producenter har forskellig opfattelse af, hvad der skal være standard. Nu er det ikke meningen at du skal fare i flint - begge browsere understøtter alle standard elementer i HTML 4.0 specifikationen - der er tale om relativ få elementer der er specifikke for den enkelte browser. Du skal blot være opmærksom på det, hvis du vil have at alle brugere skal kunne se din hjemmeside ordentligt. Det er derfor altid en god ide, at have begge browsere installeret og så checke sine HTML dokumenter af begge steder, inden man publicere dem (lægger dem op på nettet).! Jeg vil angive, når der er tale om et element der er specifikt for enten MSIE eller Netscape. En sidste ting omkring browsere er, at der også er forskel på versioner og hvad de understøtter. De seneste versioner af både MSIE og Netscape kaldes 4.x. Tidligere browser versioner understøtter f.eks. ikke avancerede ting som Java- Script, CSS (Stylesheets) mv. Jeg har i hæftet valgt at referere til en version 4.x browser, da de fleste efterhånden har opgraderet til denne version.

9 Grundlæggende HTML 8 Grundlæggende HTML I dette kapitel lærer du: Introduktion til HTML-elementer Attribut regler Specielle tegn HTML-dokumentets grundlæggende struktur Dit første simple HTML-dokument over de normale tekstformaterings værktøjer i Wordpad. Vi gemmer lige dokumentet med det samme. 4. Vælg Filer, Gem (Ctrl+S). 1. Åbn Wordpad i et maksimeret vindue. 5. Gå til mappen c:\webtest i feltet Gem i. 6. Skriv test.htm i feltet Filnavn. 2. Vælg Filer, Ny (Ctrl+N). Da HTML dokumenter skal gemmes som rene tekstdokumenter og ikke må indeholde formateringskoder af nogen art, skal dokumentet gemmes i formatet Tekst dokument - MS-DOS format. 7. Vælg Tekst dokument - MS-DOS format i feltet Filtype. 3. Marker Tekstdokument og klik på knappen Ok. 8. Klik på knappen Gem. Vi har nu gemt dokumentet under navnet test.htm i mappen c:\webtest på den rigtige måde og du skal i fremtiden huske altid at benytte denne procedure, når du skal oprette nye HTML dokumenter i Wordpad.! Vi vil genbruge test.htm i mappen c:\webtest til alle eksempler og øvelser. Inden vi går i gang med HTML dokumentets grundlæggende struktur, bliver vi lige nødt til at tage lidt teori Du har oprettet et windows tekstdokument - Læg mærke til, at du nu ikke har rådighed

10 9 Grundlæggende HTML Introduktion til HTML elementer Som tidligere nævnt er HTML-sproget opbygget af ganske almindelig tekst. For at fortælle browseren hvordan tekst og grafik skal vises på skærmen, bruges formaterings-elementer, på engelsk kaldet tags eller elements (Jeg vil efterfølgende bruge det danske udtryk element). HTML opbygges efter nogle specielle regler - disse regler kaldes også HTML sprogets syntax. Et HTML element består af tegnet mindre end (<), en element-kode der definerer elementets egenskab samt tegnet større end (>). Elementer kan deles op i to typer: Lukkede elementer består at både et start element og et slut element. Er der tale om et slut element tilføjes en skråstreg (/) foran element-koden. Lukkede elementer har virkning på alt hvad der står i mellem start -og slut elementet. <B>Denne tekst er bare fed</b> Teksten der står i dette lukkede element bliver vist som Fed skrift i browseren: Denne tekst er bare fed Åbne elementer består kun af et start element og har kun virkning på det sted hvor elementet placeres. <BR> Dette åbne element definerer f.eks. et linieskift.! Der findes meget få åbne elementer i HTML. Jeg vil efterfølgende derfor ikke skelne i mellem åbne og lukkede elementer, men blot benævne dem med deres start element. Gå altid ud fra at der er tale om et lukket element, med mindre andet er angivet. Lad os se på lidt HTML-kode: HTML er <B>ikke</B> kun for <I>nørder</I>. Elementet <B> fortæller at teksten skal vises som Fed (Bold). Elementet <I> fortæller at teksten skal vises som Kursiveret (Italic). Ovenstående HTML-kode vil altså se således ud i browseren: HTML er ikke kun for nørder. Elementer kan også sættes inden i hinanden (indlejring): <I>HTML er ikke kun for <B>nørder</B></I>. Følgende resultat ville fås: HTML er ikke kun for nørder. Elementer må ikke overlappe hinanden: <I>HTML er ikke kun for <B>nørder</I></B>. Ovenstående er forkert! Idet elementerne overlapper.! Der er i øvrigt specielle regler for, hvilke elementer der må indlejres i hvilke elementer, men dette behøver du ikke at spekulere på i første omgang - du kan senere finde regler og konventioner omkring disse ting via HTML Quick Indeks s. 73. Langt de fleste elementer har attributter. Dvs. at deres funktion kan yderligere defineres: <HR> Indsætter en vandret linie i dokumentet med standard tykkelsen 2 pixels. Men hvis vi nu i stedet skrev: <HR SIZE= 5 >

11 Grundlæggende HTML 10 ville linien blive 5 pixels tyk, idet vil har tilføjet attributten SIZE med værdien 5. Der findes mange elementer i HTML og lige så mange forskellige attributter og endnu flere værdier - der vil gå en tid før du kan huske dem. Kør kapitlerne igennem trin for trin og det vil efterhånden hænge ved :-). Syntax regler Med hensyn til elementer og attributter er der nogle konventioner (regler), du skal være opmærksom på. Efterfølgende regler skal altid overholdes: Det er tilladt at skrive elementer og attributter med både store og små bogstaver, efterfølgende er lige korrekt: <B>Dette er en fed tekst</b> <b>dette er en fed tekst</b> <HR SIZE= 5 > <hr size= 5 > <HR size= 5 > <hr SIZE= 5 > Det er dog altid en god ide at have system i kildekoden - den mest benyttede måde er at skrive elementer og attributter med store bogstaver og værdier med små bogstaver. Du lagde måske før mærke til, at jeg havde sat værdien 5 i anførselstegn () i HTML-koden. En attributs værdi tildeles altid vha. et lighedstegn (=). Værdier til attributter kan opdeles i følgende typer: URL's (adresser) F.eks. HREF=mitdokument.htm eller HREF= Tekststrenge F.eks. HREF=Times New Roman eller ALT=Billede af min mor. Farvekoder F.eks. COLOR=#FF0000. Tal F.eks. WIDTH=200 Procenter (n%) F.eks. WIDTH=50% Udsagn F.eks. SCROLLING=yes Værdier anføres som hovedregel altid i anførselstegn ( ). Ved tal mellem 0-9, tekststrenge der kun består af bogstaverne a-z samt A-Z, bindestreger (-) samt punktum (.), kan anførselstegn udelades. Gider du ikke huske på disse regler kan du blot sætte anførselstegn omkring alle værdier, så går det aldrig galt. Jeg har konsekvent placeret anførselstegn omkring alle værdier i hæftets kode eksempler. Undlad at benytte store bogstaver i filnavne i forbindelse med Internettet: (rigtigt) (forkert) back.gif (forkert) Backg.Gif (forkert) Ved henvisning til filer eller dokumenter på Internettet erstattes backslash (\) af den almindelige skråstreg (/): (rigtigt) (forkert)! Eksemplerne der er brugt i ovenstående regler siger dig måske ikke så meget på nuværende tidspunkt, men du vil hurtigt forstå syntaksen, når vi kaster os over de mange eksempler i de efterfølgende kapitler. Du kan også altid vende tilbage til dette afsnit, når du bliver i tvivl. Specielle tegn Tegn der findes i US-ASCII (amerikanske tegntabel som er en del af det internationale ISO tegnsæt), kan benyttes uden problemer i HTML, men når du skal bruge danske eller andre europæiske tegn der ikke findes i US-ASCII, skal der benyttes internationale special-koder. Dette for at brugere med udenlandske browser versioner kan læse hjemmesiden korrekt. Specielt tre

12 11 Grundlæggende HTML tegn er unikke for Danmark, nemlig Ææ, Øø og Åå - disse tegn findes ikke i US-ASCII og vil ikke umiddelbart kunne forstås af browsere med udenlandsk tastatur opsætning. Derudover er der visse tegn der har en speciel betydning i forhold til HTML sproget - du kender dem allerede, nemlig tegnene < (mindre end), > (større end) samt (anførselstegn). Hvis du vil vise disse tegn på skærmen i browseren, f.eks. i forbindelse med et eksempel på HTML-kode, skal du benytte tegnenes internationale koder ellers vil browseren opfatte tegnene som en del af selve HTML dokumentets kode. Følgende lille tabel viser de vigtigste internationale special-koder samt hvornår de skal benyttes. Kode Tegn Benyttes æ Lille æ Altid Æ Stort Æ Altid ø Lille ø Altid Ø Stort Ø Altid å Lille å Altid Å Stort Å Altid & og tegn & Altid Mellemrum Altid " Anførselstegn Ved eksempel tekst. < Mindre end < Ved eksempel tekst. > Større end > Ved eksempel tekst. Copyright Altid Reg. Varemærke Altid! Der findes internationale koder for alle Ikke- US-ASCII tegn i ISO-8859 tegnsættet - du kan finde en komplet oversigt hos World Wide Web Konsortiet på Internet adressen: Nu bliver du sikkert forskrækket og tænker - skal jeg virkelig skrive disse besværlige koder hver eneste gang jeg skal bruge et æ, ø el. å osv. JA! Det skal du faktisk, hvis du programmerer direkte i ren HTML, via f.eks. Wordpad. Skriv din tekst med normal brug af Ææ, Øø og Åå, når du er færdig med teksten vælger du Rediger, erstat og du får dialogboksen Erstat: Søg på æ, Æ ø, Ø, å, Å og erstat alle forekomster med de tilsvarende internationale koder. $ Husk! At markere feltet Forskel på store og små bogstaver. $ Metoden må ikke bruges til erstatning af de specielle tegn <, > og, ved f.eks. eksempel kodetekst. Gør du dette, vil du ødelægge dokumentets egentlige HTML kode. Når du har lært HTML-sproget at kende, kan du kaste dig over en decideret HTML editor som f.eks. Stones WebWriter. Disse editorer har automatiseret samtlige HTML-koder, så du ved enkelte museklik kan få programmet til at indsætte koderne for dig. De fleste af disse editorer kan også finde ud af, at konvertere HTML dokumentet mht. internationale koder WebWriter (læs også HTML editorer s. 65).! Et godt råd! Lad være med og forsøge at kaste dig over en decideret HTML editor nu med det samme, selvom det måske er fristende - fortsæt med Wordpad indtil du har lært HTMLsproget. Derefter kan du så begynde at forsøde programmeringen. Jeg kan love dig, at det kan betale sig lige at bruge et par uger på at sætte sig ordentligt ind i HTML - Du bliver glad for det senere, lige meget, hvilken editor du så vælge at benytte. Besværlige koder med Erstat Der findes en metode til at afhjælpe besværet med indtastning af internationale kodere, nemlig Wordpad s Erstat i menuen rediger.

13 Grundlæggende HTML 12 HTML s grundlæggende struktur Vi går nu i gang med at forme dit første HTML dokument. De efterfølgende formaterings elementer udgør ethvert HTML dokuments standard skelet og skal forekomme i alle HTMLdokumenter. Indtast nu følgende: <HTML> <HEAD> <TITLE>Michael s hjemmeside</title> </HEAD> </HTML> <HTML> </HTML> Dette element definerer henholdsvis starten og slutningen på et HTML-dokument. Vi har nu fortalt browseren, hvor starten og slutningen af dokumentet er. Alle andre elementer i dokumentet skal altid placeres i mellem <HTML> og </HTML>. Vi udvider med: <HTML> <HEAD> </HEAD> </HTML> definerer selve kroppen i dokumentet, alt der skal vises i browseren skal placeres i dette element. Elementet har flere attributter som vi kommer ind på senere. SådanDet var det Standard skelettet til HTML-dokumentet er færdigt. 1. Vælg Filer, Gem (Ctrl+S). 2. Åbn Windows Stifinder og gå til mappen c:\webtest. 3. Dobbeltklik på filen eller ikonet test.htm. Et nyt element - <HEAD> findes også i dokumentets skelet. I <HEAD> placeres forskellige andre elementer og instruktioner, der skal gælde for hele dokumentet. I første omgang nøjes vi med at introducere elementet <TITLE>. Vi udvider endnu engang: <HTML> <HEAD> <TITLE>Michael s hjemmeside</title> </HEAD> </HTML> Vi har givet dokumentet en titel. Denne titel benyttes bl.a. af søgemaskiner på nettet til at finde frem til hjemmesiden og vil også blive vist i browserens Tiltellinie i stedet for dokument filnavnet. Skriv evt. din egen titel i stedet for den i eksemplet.! Det er ikke krævet at du giver dokumenter en titel, men gør det altid - specielt din hjemmesides Hovedside (index.htm). Dokumentet åbnes i browseren og skulle gerne se ud som ovenstående ganske TOMT! ( læg dog mærke til, at den titel du skrev i <TITLE>, vises i browserens Titellinie øverst i skærmbilledet). Du har lavet dit første HTML dokument. Du kan nu det mest grundlæggende, nemlig at oprette et standard HTML-dokument.! Hvis dokumentet ikke automatisk åbnes i browseren, når der dobbelklikkes på filen eller ikonet er din browser højst sandsynligt ikke installeret korrekt - check installationen. Vi indsætter sidste element i skelettet.

14 13 Grundlæggende HTML Vend tilbage til Wordpad (Alt+Tab).! I alle efterfølgende eksempler vil billeder af MSIE s browser vindue være beskåret. Hint! Når du i efterfølgende eksempler og øvelser laver ændringer i kildeteksten i Wordpad, så gem dokumentet (Ctrl+S), skift til browser vinduet (Alt+Tab) og klik på knappen Opdater eller tryk F5. På den måde opdateres dine ændringer hele tiden automatisk i browseren. Det var det - Du har oprettet det dokument der senere skal ligge til grund hjemmesidens Hovedside # Du kan se løsningen til denne opgave via HTML support - Opgaver - Delopgave 1. Delopgave 1 Vi starter allerede nu med at opbygge vores sideløbende hjemmeside. Brug hvad du har lært og gør følgende:! I denne og alle efterfølgende kapitel øvelser vil jeg bruge fiktive titler, overskrifter, tekst osv. Det står dig selvfølgeligt frit at bruge din egen tekst i stedet. For at holde vores sideløbende hjemmeside adskilt fra eksempler og øvelser, vil vi placere den i sin egen mappe på drev C.\. Denne og alle efterfølgende opgaver skal derfor laves i denne mappe. 1. Opret en ny mappe på drev c:\. Giv den navnet webudgiv (c:\webudgiv). 2. Opret undermappen images i c:\webudgiv (c:\webudgiv\images). Denne mappe skal bruges til hjemmesidens grafik/lyd. 3. Sørg for at have Wordpad åben. [er allerede åben] 4. Opret et nyt tomt HTML dokument (inkl. Skellet). [hvorfor ikke Gem Som] 5. Giv dokumentet titlen Michael s hjemmeside 6. Gem dokumentet under navnet index.htm i mappen c:\webudgiv - Husk at gemme i MS-DOS format.

15 Layout og formatering 14 Layout og formatering I dette kapitel lærer du: Den første tekst Lineskift, afsnit og Justering Vandrette linier Formatering af tekst Skrifttyper og skriftstørrelser Overskrifter (Headings) Lister og opstillinger Sørg for at have test.htm i mappen c:\webtest åben i Wordpad.[Menu Filer, står nederst] De elementer vi oprettede i forrige kapitel, var jo selve standard skelettet til et hvert HTMLdokument derfor er de underforstået i alle hæftets efterfølgende kode eksempler. Jeg vil dog vise alle eksempler indlemmet i: Ovenstående skal altså ikke medtages, når du skal indskrive kommende eksempler. Derudover kan du, altid se hvad du skal indsætte eller udvide med via den grå baggrund i samtlige kode eksempler. Tip! Når du arbejder med eksemplerne i hæftet, bruger du hele tiden det samme testdokument (test.htm) og gemmer det igen og igen. Når du skal afprøve et nyt eksempel, så slet alt i mellem og og indtast på ny. Du kan selvfølgelig hele tiden genbruge kode der er identisk fra forrige eksempel - sørg bare for, at dokumentet ikke vokser og vokser så det bliver uoverskueligt. Den første tekst Prøv at indtaste følgende: Velkommen til min nye hjemmeside! Gem dokumentet (Ctrl+S), skift til browseren og tryk F5 (Opdater) - ændringen opdateres automatisk i browseren. Så kom der tekst på vores lille Hjemmeside. Vend tilbage til Wordpad. Linieskift og afsnit Browsere er ikke de kløgtigste i verden, idet de ikke forstår formatering som f.eks. et tekstbehandlingsprogram. Hvis du ikke hele tiden fortæller browseren, hvordan den skal vise teksten, vil teksten blot vises i en stadig strøm på skærmen. Linieskift Betragt følgende: Velkommen til min nye hjemmeside! Jeg har lavet den i Wordpad med rigtig HTML programmering. eller Velkommen til min nye hjemmeside! Jeg har lavet den i Wordpad med rigtig HTML programmering. giver nøjagtigt det samme resultat på skærmen: [læseren bliver nysgerrig og efterprøver, dvs. indtaster det] Vil du have et linieskift, skal du bruge det åbne element <BR> (break).

16 15 Velkommen til min nye hjemmeside! <BR> Jeg har lavet den i Wordpad med <BR> rigtig HTML programmering. Nu er teksten formateret med linieskift. Layout og formatering rigtig HTML programmering. Som det ses øges afstanden mellem linierne (du kan sætte ligeså mange <BR> elementer efter hinanden som du har lyst til). Afsnit Ren tekst og andre HTML-elementer kan placeres i et lukket <P> element, som definerer et afsnit. Det er ikke bydende nødvendigt af bruge afsnit, men <P> elementet har flere fordele. Det er i princippet ligegyldigt, hvordan tekst skrives i Wordpad - det er formaterings elementerne der bestemmer, hvordan det kommer til at se ud i browseren. I dette tilfælde elementet <BR>, der definerer et linieskift. Havde du f.eks. skrevet det sådan: Velkommen til min nye hjemmeside! <BR>Jeg har lavet den i Wordpad med<br>rigtig HTML programmering. havde det givet nøjagtigt samme resultat.! Et godt råd! Vend dig alligevel til at skrive tekst i Wordpad på den samme måde som du vil have at det vises på skærmen - det gør det betydeligt mere overskueligt når du programmerer. Hvis du vil lave flere linieskift efter hinanden kan du umiddelbart bruge det antal <BR> elementer du finder nødvendigt. Velkommen til min nye hjemmeside! <BR> <BR> Jeg har lavet den i Wordpad med <BR> Lad os prøve at dele en tekst op i afsnit og linieskift. <P> Velkommen til min nye hjemmeside! <BR> <BR> Jeg har lavet den i Wordpad med <BR> rigtig HTML programmering. </P> <P> Hilsen Michael - Webmaster </P> Vi har puttet tekst ind i to adskilte afsnit (<P>).

17 Layout og formatering 16 <P> elementet har attributten ALIGN som bestemmer afsnittets justering. ALIGN kan antage én af 3 værdier: Værdi left center right Beskrivelse Afsnittet venstrejusteres. (standard*) Afsnittet centreres. Afsnittet højrejusteres. *Når jeg her og ved efterfølgende attribut værdier skriver standard i parentes, betyder det at denne værdi vil være aktiv i browseren, hvis den tilhørende attribut udelades i HTML koden. <P align= center > Velkommen til min nye hjemmeside! <BR><BR> Jeg har lavet den i Wordpad med <BR> rigtig HTML programmering. </P> <P align= right > Hilsen Michael - Webmaster </P> Vi har i første afsnit givet attributten ALIGN værdien center og i andet afsnit værdien right. Vær specielt opmærksom på, at ikke kun selve afsnittet justeres - alle linier i afsnittet justeres også. <P> elementet kan også bruges til at lave tvungne linieskift i stil med det åbne <BR> element, men laver hvad der svarer til et dobbelt linieskift:! Tomme afsnit læses ikke af browseren. Derfor skal du som minimum indsætte speciel koden for et mellemrum ( ) i afsnittet - et mellemrum opfattes som et tegn, men vises ikke.! Om du bruger den ene eller anden metode til at skabe luft i dokumentet er op til dig selv. Justering Mht. justering af tekst og objekter, findes der yderligere to justerings elementer, nemlig <CENTER> og <DIV>. <CENTER> centrerer tekst, afsnit eller andre elementer på siden. <DIV> gør det samme, men indeholder attributter til både venstrejustering (standard), centrering og højrejustering. <CENTER> elementet er det ældste i HTML specifikationen og forventes at forsvinde fra HTML standarden i løbet af de næste år, idet <DIV> elementet anses for at være mere hensigtsmæssigt. De seneste versioner af MSIE og Netscape understøtter både <CENTER> og <DIV>. Lad os betragte et eksempel på begge elementer: Betragt følgende: <CENTER > <P> Velkommen til min nye hjemmeside! <BR> <BR> Jeg har lavet den i Wordpad med <BR> rigtig HTML programmering. </P> <P> Hilsen Michael - Webmaster </P> <CENTER> Ovenstående vil centrere alle de indlejrede afsnit på én og samme gang. <P> </P> vil svare til <BR> <BR>

18 17 Layout og formatering Og her med brug af <DIV>: <DIV align=right> <P> Velkommen til min nye hjemmeside! <BR> <BR> Jeg har lavet den i Wordpad med <BR> rigtig HTML programmering. </P> <P> Hilsen Michael - Webmaster </P> </DIV > Ovenstående vil højrejustere alle indlejrede afsnit - en effekt der ikke kan opnås med <CENTER>. Vandrette linier Vandrette linier, eller på engelsk Horizontal Rulers, er grafiske adskillelses-linier der kan indsætte og formateres i HTML dokumentet. Vi skal have fat i det åbne element <HR> som egentlig kan sammenlignes med et åbent </P> element, blot med den forskel, at elementet vises i browseren som en vandret linie. <HR> Der indsættes en standard tredimensional vandret linie, venstrejusteret med en bredde på 100% samt en tykkelse på 2 pixels. <HR> elementet har følgende attributter: Attribut ALIGN WIDTH SIZE NOSHADE Beskrivelse/værdier Bestemmer liniens justering på siden. Der kan benyttes left, center og right (Left er standard) Bestemmer liniens bredde i pixels eller procent af aktuel vinduesstørrelse. Bestemmer liniens tykkelse i pixels. Ingen skygge. Hvis denne attribut er sat vil linien optræde som en flad todimensional linie. NOSHADE har ingen værdier. <HR SIZE= 1 > <HR SIZE= 3 WIDTH= 50% ALIGN= center > <HR SIZE= 10 WIDTH= 75% ALIGN= center > <HR SIZE= 3 WIDTH= 50% ALIGN= right > <HR SIZE= 3 WIDTH= 200 ALIGN= center > <HR SIZE= 20 WIDTH= 150 NOSHADE> Eksemplet viser forskellige muligheder med <HR> elementet. Prøv evt. selv at ændre på attributter og værdier. Tekstformatering I HTML kan du formatere tekst fuldstændigt (næsten) mht. skriftstørrelse, skrifttype, skriftfarve mv. som i et tekstbehandlingsprogram. Til dette benyttes en række elementer og attributter. Standard tekstfarver Både MSIE 4.x og Netscape 4.x har nogle standardfarver, hvormed de viser alm. tekst. Med alm. tekst forstås den tekst der placeres i mellem og. Hvis du skriver en sætning i, som du har gjort i tidligere eksempler, vil den blive vist med browserens standardfarve, hvis ikke andet er anført med en attribut direkte i

19 Layout og formatering 18 elementet eller med <FONT> elementet direkte på teksten (se senere i dette kapitel). Standardfarven for tekst i både MSIE 4.x og Netscape 4.x er Sort. Denne standardfarve kan ændres med attributten TEXT: Følgende element vil f.eks. gøre alm. tekst Mørkeblå i stedet for Sort: <BODY TEXT=#330099> Farven angives med en hexadecimal farvekode (læs mere om farvekoder senere i afsnittet).! Udover standardfarver for alm. tekst, findes der også standardfarver for baggrundsfarve, baggrundsgrafik samt hyperlink. Disse kommer vi nærmere ind på i forbindelse Billeder og grafik i kapitlet Grafik og billeder s. 25 samt i forbindelse med Hyperlink s.39. Fremhævning Vi fortsætter med de mest elementære elementer til tekstformatering (disse elementer er altid lukkede og har ingen attributter). <U></U> Understreget skrift. (undgå at benytte dette element da understreget tekst kan forveksles med hyperlink (hyperlink forklares s. 39).! Elementerne <STRONG> og <EM> er logiske elementer, hvilket vil sige at de er afhængige af browseren. Hvis du bruger disse, vil teksten som regel blive vist med fed eller kursiv, men ikke altid. Bruger du derimod <B> eller <I>, vil teksten altid blive vist med fed eller kursiv. Der er ikke mange der benytter <STRONG> og <EM>, men hvis du senere kommer til at arbejde med HTML- eller WYSIWYG editorer, vil du grangiveligt støde på dem. Jeg vil efterfølgende holde mig til <B> og <I>. <P> <B>Velkommen</B> til min nye <I>hjemmeside!</I> </P> <P> <BIG>Michael</BIG> - <SMALL>Webmaster</SMALL> </P> <B></B> Fed skrift. <STRONG></STRONG> (logisk) Fed skrift <I></I> Kursiv skrift <EM></EM> (logisk) Kursiv skrift <BIG></BIG> Stor skrift - gør skriften én størrelse større end browserens standard skriftstørrelse. <SMALL></SMALL> Lille skrift - gør skriften én størrelse mindre end browserens standard skriftstørrelse. Vi har fremhævet enkelte dele af teksten på forskellige måder.! Vi har ikke defineret nogen decideret skriftstørrelse, hvilket bevirker at tekst generelt vises med browserens standard skriftstørrelse, som regel str. 3 som svarer til 12 pkt. <BIG> bevirker at ordet Michael gøres én størrelse større end standard-skriftstørrelsen - til str. 4. <SMALL> bevirker at ordet Webmaster gøres én størrelse mindre end standard skriftstørrelsen - til str. 2 (læs mere om skriftstørrelser i næste afsnit).

20 19 Layout og formatering Vi kunne også indlejre elementerne lad os sige at vi gerne vil have ordet velkommen både Fed og kursiveret. Prøv følgende: <P> <I><B>Velkommen</B></I> til min nye <I>hjemmeside!</I> </P> Vi har indlejret elementerne <I> og <B> og ordet Velkommen, bliver både Fed og Kursiveret $ Pas på med overlapning ved indlejring. Skrifttype - størrelse og farve Her skal vi have fat i elementet <FONT>. <P> <I><B>Velkommen</B> </I>til min nye<i> <FONT FACE= Arial SIZE= 5 COLOR= #FF0000 >hjemmeside!</font></i> </P> Sådan! Ordet hjemmeside er formateret med Skrifttypen Arial, skriftstørrelsen 5 samt skriftfarven Rød. For at udnytte <FONT> elementet rigtigt kræver det imidlertid, at du ved lidt om dets attributter, nemlig dem vi brugte i ovenstående eksempel. face Angiver hvilken skrifttype der skal benyttes, f.eks. Arial, Times New Roman, Helvetica osv. Du skal dog være meget konsekvent med brugen af skrifttyper på nettet. Hvis du definerer en skrifttype som en bruger ikke har installeret på sin computer, vil han/hun ikke kunne se denne skrifttype, men i stedet se den standard skrifttype, der er defineret i vedkommendes browser (for det meste Times New Roman str. 3). Disse skrifttyper er installeret på næsten alle computere med Windows 95/98. Arial Arial black Comic Sans MS Courier New Impact Σψµβολ (symbol) Times New Roman Verdana %&'(&')* (Windings) Hold dig til disse skrifttyper og du vil være rimelig sikker på, at alle vil se hjemmesiden, som du vil have det.! Vil du bruge andre smarte skrifttyper, så lav dem grafisk i et grafik-program og indsæt dem som billeder. size Angiver hvilken skriftstørrelse teksten skal have. På nettet opererer man med syv skriftstørrelser (1-7). Str. 1 svarer ca. til 8 pkt. i alm. tekstbehandling og str.7 svarer ca. til 36 pkt. De fleste browseres standard skriftstørrelse er sat til 3, dvs. at hvis du ikke definerer en SIZE attribut i <FONT> elementet, vil skriftstørrelsen automatisk blive 3. Str. 1 (Pkt. 8) Str. 2 (Pkt. 10) Str. 3 (Pkt. 12) Str. 4 (Pkt. 14) Str. 5 (Pkt. 18) Str. 6 (Pkt. 24) Str. 7 (Pkt. 36)

21 Layout og formatering 20 color Definerer hvilken skriftfarve teksten skal have. Farver angives altid med tegnet # (havelåge) efterfulgt af en farvekode angivet med hexadecimale tal (16-tals systemet). Der bruges tre hexadecimale tal-par, altså i alt seks tegn. De enkelte tal-par giver udtryk for en værdi mellem 0 og 255 og angiver således andelen af de tre pcgrundfarver (rød, grøn, blå). #FF0000 definerer f.eks. farven Rød (255 dele rød, nul dele grøn og nul dele blå). Der er utallige kombinationer at vælge i mellem, og selvfølgelig kan man ikke huske alle i hovedet. Du kan derfor benytte et farveskema, men du skal være opmærksom på, at der aldrig vises flere farver en brugerens skærm kan vise. Derfor er det en god ide at benytte Netscape s browser sikre 216-farvers farveskema - så er du sikker på at alle brugere vil se de farve du definerer rigtigt. Heading/Overskrift Foruden <FONT> elementet kan du også benytte elementet <Hx> (x udgør et tal mellem 1 og 6), til at formatere tekst til overskrifter. Foruddefinerede Headings, som de kaldes, opfattes af browseren som Fed skrift og tilføjer automatisk et efterfølgende linieskift. # Du kan finde farveskemaet via HTML Support - Den sikre web-palette. Lad os opsummere og prøve at ændre lidt i de forskellige attributter. Vi kunne ændre på skriftstørrelse, skrifttype og farve. <P> <B>Velkommen</B> til min nye <I><FONT FACE= Comic Sans MS SIZE= 7 COLOR= #FF00FF >hjemmeside!</font></i> </P> <H1 ALIGN= center >Michael s hjemmeside</h1> <HR ALIGN= center WIDTH= 50% > Vi har ændret skrifttype, skriftstørrelse samt farve på ordet Hjemmeside! og resultatet skulle se ud som ovenstående.! Der findes i dag mere globale metoder til at styre tekstformatering for hele dokumenter, nemlig Stylesheets - se det kommende hæfte Videre med hjemmesider. Her et eksempel på brug af Heading 1 (<H1>) i forbindelse med en vandret linie til f.eks. overskriften til en Hovedside. Som du kan se af ovenstående eksempel, kan <Hx> elementet også justeres. Elementet har nemlig en justerings attribut, nøjagtigt som f.eks. <P> elementet:

22 21 align som antager følgende værdier: Layout og formatering Værdi left Center Right Beskrivelse Venstrejusterer overskriften (standard). Centrerer overskriften. Højrejusterer overskriften.! <Hx> optræder som en form for selvstændigt afsnit og placeres derfor ikke i <P> elementet.! Brug headings når du skal lave overskrifter, det sparer bl.a. tid i programmeringen. Lister og Opstillinger Lister i HTML er hvad der svarer til punktopstillinger i et alm. tekstbehandlingsprogram. Der findes flere typer af lister, men de to mest benyttede, er ordnede (nummererede) lister og uordnede (punkttegns) lister. Et par eksempler: 1. Bananer 2. Appelsiner 3. Druer Bananer Appelsiner Druer Ordnede lister Her benyttes elementet <OL> til at definere selve liste typen samt elementet <LI> til at definere de enkelte punkter i listen. Dette skal der til for at lære HTML: <OL> <LI>Sved</LI> <LI>Slid</LI> <LI>Arbejde</LI> </OL> Du får en standard ordnet liste.! Læg mærke til, at du ikke behøver elementet <BR> imellem de enkelte <LI> elementer. Elementet <LI> tilføjer automatisk et efterfølgende linieskift. Du kan vælge i mellem en række forskellige nummererings typer. Dette gøres med attributten TYPE som har følgende værdier: Værdi Beskrivelse A Store bogstaver, A, B, C osv. a Små bogstaver, a, b, c osv. 1 Tal, 1, 2, 3 osv. (standard) i Små romertal, i, ii, iii osv. I Store romertal, I, II, III osv. Dette skal der til for at lære HTML: <OL TYPE= A > <LI>Sved</LI> <LI>Slid</LI> <LI>Arbejde</LI> </OL> Samme opstilling som før, men nu nummereret med store bogstaver..

23 Layout og formatering 22 Uordnede lister Du kan også definere en uordnet liste. Til dette benyttes elementet <UL> til at definere selve liste typen og igen elementet <LI> til at definere de enkelte punkter. Dette skal der til for at lære HTML: <UL> <LI>Sved</LI> <LI>Slid</LI> <LI>Arbejde</LI> </UL> Du får en standard uordnet liste. Også her kan du vælge i mellem en række forskellige typer. Her bruges også attributten TYPE, men med andre værdier. Samme opstilling som før, men nu med en cirkel som punkttegn. Mere om lister Hvis du vil have forskellige punkttegn i enkelte punkter i en liste, kan dette også lade sig gøre, idet attributten TYPE uden problemer også kan placeres i elementet <LI> (menupunkt). Dette skal der til for at lære HTML: <UL> <LI>Sved</LI> <LI TYPE= circle >Slid</LI> <LI TYPE= square >Arbejde</LI> </UL> disc circle Square Giver en sort bullet (standard). Giver en cirkel. Giver et kvadrat Dette skal der til for at lære HTML: <UL TYPE= circle > <LI>Sved</LI> <LI>Slid</LI> <LI>Arbejde</LI> </UL> Sådan! det kan selvfølgelig også gøres med en ordnet liste. Du kan indlejre en liste i en liste, dvs. lave underpunkter til enkelte punkter i listen. <H4>Dagsorden</H4> <UL> <LI>Formandens beretning</li> <UL> <LI>Økonomi</LI> <UL> <LI>Indtægter/Udgifter </LI> </UL> <LI>Året der gik</li> <LI>Visioner</LI>

24 23 </UL> <LI>Udddannelses udvalget</li> <LI>Diverse</LI> </UL> Layout og formatering Vi ser her en blandet liste med underpunkter. Underpunkter i en uordnet liste. Læg mærke til, at standard punkttypen i en uordnet liste for punkter på niveau 2, er circle og for niveau 3 er den square. Du kan også indlejre ordnede og uordnede lister i hinanden. <H4>Dagsorden</H4> <OL> <LI>Formandens beretning</li> <OL TYPE= a > <LI>Økonomi</LI> <UL> <LI>Indtægter/Udgifter </LI> </UL> <LI>Året der gik</li> <LI>Visioner</LI> </OL> <LI>Udddannelses udvalget</li> <LI>Diverse</LI> </OL> En sidste ting vil skal have med er attributten START. Den kan bruges til at bestemme startværdien for nummereringen. START kan kun benyttes i ordnede lister, til gengæld både ved tal og bogstavs nummerering. Eks.: <OL START= 3 > eller <OL TYPE= b START= 3 > I ovenstående eksempler starter listen henholdsvis ved 3. eller c. # Du kan finde yderligere eksempler på brug af emnerne beskrevet i dette kapitel, via HTML Support - HTML eksempler - Layout og formatering.

25 Layout og formatering 24 Delopgave 2 Vi fortsætter her med at udbygge vores sideløbende hjemmeside. Brug hvad du har lært i dette og tidligere kapitler og gør følgende: 1. Åbn dokumentet index.htm i mappen c:\webudgiv. Du har lavet den foreløbige Hovedside til din første hjemmeside. # Du kan se løsningen til denne opgave via HTML support - Opgaver - Delopgave 2. Vi skal nu have puttet noget tekst på vores Hovedside. 2. Sæt dokumentets baggrundsfarve til farven #FFFFFF (attributten BGCOLOR i ) og dokumentets tekstfarve til farven # (Attributten TEXT i ). 3. Indsæt en overskrift med størrelsen 1 (<H1>), placer den øverst i og centrer den - indskriv teksten Michael s hjemmeside. 4. Indsæt en centreret vandret linie (<HR>) med bredden 75%. 5. Indsæt et centreret afsnit (<P>), hvori du skriver en velkomst hilsen Velkommen til min nye hjemmeside!. Teksten skal formateres med skrifttypen Comic Sans MS, tekstfarven # samt skriftstørrelsen Indsæt to tvungne linieskift (<BR>). 7. Indsæt endnu et centreret afsnit (<P>), hvori du skriver Jeg har lavet den i Wordpad med rigtig HTML programmering.. Ordet Wordpad skal vises med kursiveret skrift (<I>). 8. Indsæt en centreret vandret linie med bredden 75%. 9. Indsæt et højrejusteret afsnit (<P>), hvori du skriver teksten Hilsen Michael - Webmaster. Ordet Michael, skal vises ét punkt større end browserens standard skriftstørrelse (<BIG>) og ordet Webmaster, skal vises ét punkt mindre end browserens standard skriftstørrelse (<SMALL>). 10. Gem index.htm og check resultatet i browseren.

26 25 Grafik og billeder I dette kapitel lærer du Baggrundsfarver og baggrundsgrafik Billeder Grafik og billeder Baggrundsbillede En mere spændende attribut til elementet er BACKGROUND. Denne attribut definerer en sti (URL), til et baggrundsbillede der vises på den aktuelle side. Sørg for at have test.htm i mappen c:\webtest åben i Wordpad og slet alt i mellem og så du kun har det rå HTML skelet tilbage. Du har indtil nu lært det grundlæggende om, hvordan man indsætter og behandler almindelig tekst og adskillelser - vi vil i dette kapitel se nærmere på behandling af baggrundsfarve, baggrundsgrafik og specielt billeder. Grafik Vi vil først se på et par globale ting mht. grafik. Baggrundsfarve Hvis der ikke angives nogle former for attributter i elementet, vil MSIE 4.x og Netscape 4.x, som standard opfatte HTML dokumentets baggrundsfarve som Hvid (#FFFFFF). Dette kan du ændre vha. attributten BGCOLOR. <BODY BGCOLOR=#FFFF99> Velkommen til min nye hjemmeside! Et baggrundsbillede kunne f.eks. se sådan ud: Nå! tænker du - det kan da umuligt fylde hele skærmen. Men jo! det kan det sagtens. Baggrundsbilleder i HTML dokumenter vises nemlig på nøjagtig samme måde som f.eks. bagrundstapet der vises side om side på Skrivebordet i Windows 95/98. Det vil sige, at det enkelte billede gentages til hele skærmbilledet er fyldt ud. # For at lave følgende eksempel skal du hente grafik-filen bg1.gif fra HTML Support - Eksempel filer og placere den i mappen c:\webtest. <BODY BACKGROUND=bg1.gif> <FONT SIZE=5 COLOR=FF0000>Velkommen til min nye hjemmeside!</font> Den hvide farve er erstattet af en Gul baggrundsfarve (#FFFF99) Prøv selv at eksperimentere med andre farver (find farvekoder via farveskemaet i HTML Support - Farveskema - Den sikre Web-palette. Billedet bg1.gif deles op på skærmen og danner dermed en baggrund til siden. Vi vil ikke gøre mere ud af baggrundsbilleder her, men du kan jo selv eksperimentere videre med egne *.gif eller *.jpg billeder (du kan finde baggrundsgrafik via HTML Support - Grafik galleri).! Fjern attributten BAGGROUND fra elementet, når du er færdig med at eksperimentere.

27 Grafik og billeder 26 Billeder Det er jo ikke kun tekst der kan forkomme i et HTML dokument. Med elementet <IMG> kan du indsætte henvisninger til eksterne billedfiler, der så vises på siden. Elementet <IMG> kan ikke stå alene, idet du som minimum bliver nødt til at definere en sti (URL) til -samt en størrelse på det billede du vil indsætte. # Du skal bruge grafik-filen help.gif fra HTML Support - Eksempel filer og placere den i mappen c:\webtest. <P> <IMG SRC=help.gif WIDTH= 87 HEIGHT= 62 > </P> Billedet help.gif indsættes i dokumentet og vises i browseren. src Attributten SRC definerer både navnet på den ønskede grafik-fil og placeringen af selve filen. I ovenstående eksempel skrev vi blot help.gif, hvilket betyder, at filen skal være placeret i samme mappe som det HTML dokument, hvori den skal indsættes. Hvis vi ønsker at indsætte en grafik-fil der er placeret i en anden mappe, bliver vi nødt til at definere en sti til denne mappe. Når du skal opbygge en komplet hjemmeside og senere lægge den op på udbyderens server, er det smart at lave et moderat mappe hierarki, idet det med tiden bliver ret uoverskueligt, hvis samtlige filer ligger i én og samme mappe på serveren. Vi kunne jo tænke os at du oprettede en undermappe til dine grafik-filer og kaldte den /images. Hvis vi nu ville indsætte et billede der var placeret i mappen /images, skulle koden se sådan ud: <P> <IMG SRC=images/help.gif WIDTH= 87 HEIGHT= 62 > </P> Her har vi defineret en sti (URL) til en grafik-fil der er placeret i undermappen /images (Læs mere om URL's s. 39). width OG height Attributterne WIDTH og HEIGHT angiver billedets størrelse i pixels. Det vil sige de dimensioner hvormed grafik-filen er gemt. Yderligere <IMG> attributter <IMG> elementet har yderligere nogle attributter - nedenstående skema viser de vigtigste: Atrribut ALIGN VSPACE HSPACE BORDER ALT Beskrivelse Bestemmer billedets justering i forhold til skærm og tekst. Bruges kun når der indsættes billeder direkte i. Bestemmer vertikal billede margen. Værdien angives i pixels. Bestemmer horisontal billede margen. Værdien angives i pixels. Tilføjer en standard ramme om billedet. Værdien angives i pixels. Angiver en alternativ tekst til det indsatte billede. Den alternative tekst vises mens billedet loades i browseren. I MSIE vil den alternative tekst endvidere vises som et tooltip, når musen føres over billedet. Værdien skrives som en tekststreng. Vi vil efterfølgende se nogle eksempler på brug af de forskellige attributter. align ALIGN har to sæt værdier. left og right definerer billedets justering på skærmen. bottom, middle og top definerer tekstens placering i forhold til billedet.

28 27 Grafik og billeder Værdi left Right Top Middle Bottom Beskrivelse Venstrejusterer billedet, tekst løber højre om (standard). Højrejusterer billedet. Tekst løber venstre om. Tekstens basislinie justeres til billedets top. Tekstens basislinie justeres til billedets midte. Tekstens basislinie justeres til billedets bund (standard). <P> <IMG SRC=help.gif WIDTH= 87 HEIGHT= 62 ALIGN= right > </P> Vi har her sat attributten ALIGN til værdien right og billedet højrejusteres. Lad os se et par eksempler med billeder og tekst. <P> <IMG SRC=help.gif WIDTH= 87 HEIGHT= 62 ALIGN= top >Hjælp! jeg drukner i HTML kode </P> Attributten ALIGN er sat til top. Teksten starter fra billedets top..,.. <P> <IMG SRC=help.gif WIDTH= 87 HEIGHT= 62 ALIGN= middle >Hjælp! jeg drukner i HTML kode </P>! I ovenstående eksempel, hvor vi ikke har indsat andet et det enkelte billede i afsnittet, kunne du også have nøjedes med at sætte selve <P> elementets ALIGN attribut til right, f.eks.: <P ALIGN= right > <IMG SRC= help.gif WIDTH= 87 HEIGHT= 62 > </P>! Hvis du f.eks. vil centrere et billede i et i forvejen højrejusteret eller venstrejusteret afsnit kan du indlejre <IMG> i det lukkede <CENTER> element, f.eks.: <CENTER> <IMG SRC= help.gif WIDTH= 87 HEIGHT= 62 > </CENTER> ALIGN er nu sat til middle og teksten starter fra billedets midte.! Du lagde måske mærke til, at der til ALIGN attributten ikke fandtes en center værdi til at centrere billedet på siden. Hvis du vil centrere billeder, kan du i stedet bruge ALIGN i det <P> element, hvori billedet er placeret. I <P> ele-mentet kan du jo sætte ALIGN lig med center, f.eks.: <P ALIGN= center > <IMG SRC= help.gif WIDTH= 87 HEIGHT= 62 > </P>

29 Grafik og billeder 28 vspace OG hspace Disse attributter bestemmer henholdsvis vertikal og horisontal margen mellem det indsatte billede og omkringstående tekst. Værdien angives i pixels. Betragt følgende: Dimensioner Attributterne WIDTH og HEIGHT som fortæller browseren billedets dimensioner, er faktisk ikke nødvendige, men der er alligevel en god grund til, at jeg i starten af dette kapitel sagde at du skulle bruge dem som standard. Prøv at betragte følgende: <P> <IMG SRC=help.gif> </P> Her HSPACE og VSPACE ved øverste billede sat til 5 og ved nederste billede til 50. Som du kan se kan der skabes mere eller mindre luft mellem billede og tekst. border OG alt De to sidste attributter vis skal se på, bruges til henholdsvis billed ramme og alternativ tekst. <P> <IMG SRC=help.gif WIDTH= 87 HEIGHT= 62 ALIGN= middle BORDER= 3 ALT= Hjælp! Jeg drukner i HTML kode. > </P> Som du kan se står billedet ganske fint i browseren selvom vi ikke har defineret dimensionerne på billedet - browseren er nemlig så klog, at den selv kan regne billedets størrelse ud. Der er bare én hage ved det - skal browseren selv regne billedstørrelsen ud, er billedet betydeligt længere om at loade - derfor skal du altid oplyse billedet størrelse via attributterne WIDTH og HEIGHT. Du kan via WIDTH og HEIGHT også manipulere med billedets dimensioner som du vil. Her er billedet trukket ud horisontalt, dvs. WIDTH er sat til et betydeligt større antal pixels end billedets oprindelige bredde. BORDER sørger her for at der sættes en standard ramme om billedet og ALT giver billedet en alternativ tekst (tekst der vises mens browseren loader billedet). Prøv at føre musen over billedet og du vil i MSIE, se et lille tooltip poppe op med den alternative tekst. Her er billedet presset sammen horisontalt, dvs. WIDTH er sat til et betydeligt mindre antal pixels end billedets oprindelige bredde.

30 29 Grafik og billeder Du kan på samme måde manipulere med HEIGHT. # Du kan finde yderligere eksempler på brug af emnerne beskrevet i dette kapitel, via HTML Support - HTML eksempler - Grafik og billeder. Delopgave 3 Vi fortsætter med at udbygge vores sideløbende hjemmeside. Vi skal nu have peppet vores Hovedside lidt op med farver og grafik. 8. Indsæt sun_11.gif umiddelbart under de just tilføjede linieskift (<BR>). Husk! Også at sætte WIDTH og HEIGHT i billedhenvisningen. 9. Gem index.htm og check i browseren. Vi har tilføjet baggrundsgrafik og billeder på vores Hovedside. # Du kan se løsningen til denne opgave via HTML support - Opgaver - Delopgave 3. Brug hvad du har lært i dette og tidligere kapitler og gør følgende: 1. Åbn index.htm i mappen c:\webudgiv i Wordpad. 2. Find baggrundsbilledet bk12.gif via HTML Support - Eksempel filer - gem billedet i mappen c:\webudgiv\images. 3. Indsæt billedet som baggrundsbillede på Hovedsiden (attributten BACKGROUND i elementet). 4. Find billederne chilileft.gif og chiliright.gif via HTML Support - Eksempel filer - gem dem i mappen c:\webudgiv\images (husk at bemærke billedernes dimensioner). 5. Indsæt chilileft.gif umiddelbart før teksten i dokumentets 1. afsnit (<P>). Indsæt derefter chiliright.gif umiddelbart efter teksten i samme afsnit. Sæt HSPACE til 10 i begge billedhenvisninger. Husk! Også at sætte WIDTH og HEIGHT. 6. Find billedet sun_11.gif via HTML Support - Eksempel filer - gem billedet i mappen c:\webudgiv\images. 7. Indsæt to tvungne linieskift (<BR>) umiddelbart efter teksten i dokumentets 2. afsnit (<P>).

31 Tabeller 30 Tabeller I dette kapitel lærer du: Begrebet tabeller Grundlæggende opbygning af tabeller Billeder i tabeller Sørg for at have dokumentet test.htm åbnet i Wordpad og slet alt mellem og så du kun har det rå HTML-skelet tilbage. Du har i tidligere kapitler set eksempler på, hvordan man indsætter og formaterer tekst og billeder direkte i HTML dokumentets element. Dette er også godt nok, men formateringsmulighederne mht. justering og placering er ikke overvældende. Den eneste og bedste måde, hvorpå du for fuld formateringskontrol over tekst og billeder, er ved at benytte tabeller (eng. Tables). Jeg vil i dette kapitel introducere elementet <TABLE> - et af de mest brugte elementer overhovedet. Næsten alle hjemmesider på nettet benytter tabeller. Du kan sammenligne tabeller med tabeller i et regneark eller tekstbehandlingsprogram - rækker og kolonner. Den første tabel <TABLE> elementet er faktisk ikke kun ét element, men består som standard af elementerne <TABLE>, <TD>, samt <CAPTION>. <TABLE> definerer selve tabellens ramme, definerer tabelrækker, <TD> definerer tabelceller og <CAPTION> kan bruges til at lave en overskrift til tabellen. <TABLE> <TD></TD> </TABLE> Vi har her lavet den mest simple form af en tabel som indeholder én tabelrække med én tabelcelle.! Læg mærke til, at <TABLE> elementet ikke placeres i et afsnit (<P>), da <TABLE> i sig selv definerer et afsnit. Flere tabeller Vi prøver nu at putte noget alm. tekst i tabellen. <TABLE> <TD>Bananer</TD> </TABLE> Det ser jo ikke meget anderledes ud end hvis vi blot have skrevet teksten direkte i - men fat mod, vi kommer til ideen med det hele i løbet af kapitlet. Vi skal lige først se på <TABLE> elementernes vigtigste attributter. Både <TABLE>, <TD> og har attributter. Vi vil først gennemgå de attributter der kan bruges i selve <TABLE> elementet:! Der findes flere elementer til opbygning af tabeller, men de bruges sjældent - vi nøjes derfor med de omtalte.

32 31 Tabeller Attribut BORDER CELLPADDING CELLSPACING WIDTH HEIGHT BGCOLOR ALIGN BACKGROUND BORDERCOLOR Beskrivelser Bestemmer om der skal være ramme om hele tabellen. Værdien angives i pixels. Bestemmer afstanden mellem tekst og -eller grafik og tabelcellers kanter. Værdien angives i pixels. Bestemmer afstanden mellem enkelte tabelceller. Værdien angives i pixels. Bestemmer tabellens overordnede bredde. Værdien angives i enten pixels eller procent af skærmopløsning. Bestemmer tabellens overordnede højde. Værdien angives enten i pixels eller procent af skærmopløsnng. Bestemmer selve tabellens baggrundsfarve. Værdien angives med en hexadecimal farvekode, f.eks. #FF0000. Lad os se nogle eksempler border <TABLE BORDER= 1 > <TD>Bananer</TD> </TABLE> Bestemmer tabellens justering på skærmen. Værdien angives med enten left (standard), center el. right. Indsætter et baggrundsbillede i en tabel række eller tabel celle. Værdien angives som en tekststreng og definerer en henvisning til en grafik-fil. Bestemmer farve på tabel ramme, hvis en sådan er valgt via attributten BORDER. Kun MSIE. Værdien angives med en hexadecimal farvekode, f.eks. #FF00FF. Der kom en fin ramme på vha. attributten BORDER, som kan sættes til hvilken tykkelse du måtte ønske. Du kan vælge at benytte rammer til dine tabeller eller helt lade være. Rammen kunne også være rigtig fed. <TABLE BORDER= 10 > <TD>Bananer</TD> </TABLE> Vi satte attributten BORDER til 10 og vi får en god tyk ramme.! Vær opmærksom på, at standard er sat til ingen ramme, dvs. hvis du helt undlader attributten BORDER.! I de efterfølgende eksempler vil jeg konsekvent for overskuelighedens skyld bruge rammetykkelsen 1. For at vi kan afprøve de næste attributter bliver vi nødt til at indsætte flere celler i vores lille tabel. <TABLE BORDER= 1 > <TD>Bananer</TD> <TD>Æbler </TD> <TD>Pærer</TD>

33 Tabeller 32 <TD>Appelsiner</TD> <TD>Druer</TD> <TD>Jordbær</TD> </TABLE> Vi har nu 2 rækker med tre celler i hver række. Dette svarer til to rækker og tre kolonner. cellpadding <TABLE BORDER= 1 CELLPADDING= 10 > <TD>Bananer</TD> <TD>Æbler </TD> <TD>Pærer</TD> <TD>Appelsiner</TD> <TD>Druer</TD> <TD>Jordbær</TD> </TABLE> Vi har skabt luft omkring celleteksten vha. CELLPADDING. Læg mærke til, at tabellens overordnede størrelse tilpasses automatisk. cellspacing <TABLE BORDER= 1 CELLSPACING= 10 > <TD>Bananer</TD> <TD>Æbler </TD> <TD>Pærer</TD> <TD>Appelsiner</TD> <TD>Druer</TD> <TD>Jordbær</TD> </TABLE> Her skaber vi luft i mellem de enkelte celler vha. CELLSPACING.! De to attributter CELLPADDING og CELLSPACING kan også bruges i kombination. align Vi kan også placere tabellen, hvor på siden vi vil. <TABLE ALIGN= center BORDER= 1 CELLSPACING=10> <TD>Bananer</TD> <TD>Æbler </TD> <TD>Pærer</TD> <TD>Appelsiner</TD> <TD>Druer</TD> <TD>Jordbær</TD> </TABLE>

34 33 Tabeller Tabellen er centreret midt på siden. Du kan ved ALIGN selvfølgelig også bruge værdien right - prøv det. width OG height Du har i de foregående eksempler måske lagt mærke til, at tabellens overordnede størrelse hele tiden har afpasset sig efter hvad der blev puttet i de enkelte celler. Dette kan du imidlertid selv styre. <TABLE ALIGN= center BORDER= 1 WIDTH= 60% > <TD>Gode sider</td> <TD>Dårlige sider</td> </TABLE>! Du skal passe på med at benytte fast tabelbredde som ikke kan afpasses brugerens skærmopløsning. Laver du f.eks. en tabel med en fast bredde på 800 pixels og brugeren kun kører med en opløsning på 640x480, skal han/hun scrolle sidelæns i sin browser for at se hele tabellen. Så er det bedre at benytte relative størrelser via %vis tabelbredde. Du kan som eksempel prøve at lave en tabel og give den en fast bredde på 1200 pixels og så prøve at se i browseren. <TABLE ALIGN= center BORDER= 1 WIDTH= 60% HEIGHT= 125 > <TD>Gode sider</td> <TD>Dårlige sider</td> </TABLE> Her defineres en fast højde med attributten HEIGHT.! Læg her specielt mærke til at teksten i tabel cellerne automatisk justeres midt i cellerne. Nu har tabellen en procentmæssig bredde, nemlig 60% af skærmens bredde. Dette vil i praksis sige, at tabellen altid vil have en bredde på 60% af aktuel skærmbredde uanset opløsning eller skærmstørrelse hos brugeren. Du kunne også have defineret en tabelbredde med et fast antal pixels, f.eks dette vil resultere i at tabellen får en fast bredde, som ikke ændrer sig ved forskellige skærmopløsninger eller skærmstørrelser. Du kunne selvfølgelig også bruge HEIGHT. bgcolor <TABLE ALIGN= center BORDER= 1 WIDTH= 60% BGCOLOR= #FFFF00 > <TD>Gode sider</td> <TD> Dårlige sider</td> </TABLE>

35 Tabeller 34 Tabellen har fået en baggrundsfarve - i dette tilfælde Gul. background Du kan måske huske BACKGROUND fra s. 11, hvor vi lavede baggrundsbillede for en hel side via elementet. Hvis BACKGROUND benyttes i elementet <TABLE>, vil det valgte baggrundsbillede blot vises i den aktuelle tabel. For at lave efterfølgende eksempel, skal du bruge filen back.gif fra HTML Support - Eksempel filer. Placer den i mappen c:\webtest (Den skulle allerede findes i mappen fra en tidligere øvelse). <TABLE ALIGN= center BORDER= 1 BACKGROUND= bg1.gif > <TD>Gode sider er<br> bare gode</td> <TD> Dårlige sider<br> er bare dårlige </TD> </TABLE> bordercolor Den sidste attribut jeg vil vise dig til elementet <TABLE> er BORDERCOLOR (virker kun i MSIE). Med BORDERCOLOR har du mulighed for at definere en tabels rammefarve, hvis der valgt en sådan via attributten BORDER. <TABLE ALIGN= center BORDER= 1 BORDERCOLOR= #FF0000 > <TD>Gode sider er<br> bare gode</td> <TD> Dårlige sider<br> er bare dårlige </TD> </TABLE> Rammefarven er her sat til rød (#FF0000). BORDERCOLOR virker som tidligere nævnt kun i MSIE, så man kan diskutere om attributten er værd at bruge. Du kan også benytte attributter i de underliggende elementer <TD> og. Nogle attributter går igen fra <TABLE> elementet, mens nogle kun kan benyttes i <TD>. Attributter i og <TD> Attributter sat i eller <TD> gælder kun for den celle eller den række, hvori de indsættes. Grafik-filen bg1.gif vises som baggrundsbillede i hele tabellen.

36 35 Nedenstående tabel viser attributter for både og <TD> elementerne: Tabeller Attribut ALIGN VALIGN BGCOLOR BACKGROUND COLSPAN ROWSPAN WIDTH HEIGHT NOWRAP Beskrivelse Bestemmer den horisontale tekstjustering i den enkelte celle eller cellerække. Værdien angives med enten left (standard), center el. right. Bestemmer den vertikale tekstjustering i den enkelte celle eller cellerække. Værdien angives med enten top, middle (standard) el. bottom. Bestemmer den enkelte celles eller cellerækkes baggrundsfarve. Værdien angives med en hexadecimal farvekode, f.eks. #FF0000. Indsætter et baggrundsbillede i en tabelrække eller tabelcelle. Værdien angives som en tekststreng og definerer en henvisning til en grafik-fil. Bestemmer hvor mange kolonner en given celle skal sprede sig over. Værdien angives i antal. Bestemmer hvor mange rækker en given celle skal sprede sig over. Værdien angives i antal. Definerer en fast bredde på en tabel celle i pixels. Kan kun benyttes i <TD>. Definerer en fast højde på en tabel celle i pixels. Kan kun benyttes i <TD>. Forhindrer tekstombrydning i en celle. Kan kun benyttes i <TD>. Her er attributterne ALIGN og VALIGN placeret i elementet. Læg mærke til, at teksten i samtlige celler justeres centreret horisontalt og vertikalt i toppen af cellerne. Vi kunne også vælge at placere attributterne i <TD> elementet: <TABLE WIDTH= 60% HEIGHT= 125 BORDER= 1 CELLPADDING= 2 > <TD ALIGN= center VALIGN= top >Bananer </TD> <TD>Æbler </TD> <TD>Pærer </TD> </TABLE> align OG valign <TABLE WIDTH= 60% HEIGHT= 125 BORDER= 1 CELLPADDING= 2 > <TR ALIGN= center VALIGN= top > <TD>Bananer</TD> <TD> Æbler </TD> <TD> Pærer</TD> </TABLE> Og du vil se at nu gælder attributterne kun for den enkelte celle, hvori de er indsat.! Attributterne ALIGN og VALIGN kan selvfølgelig også bruges uafhængigt af hinanden.

37 Tabeller 36 bgcolor Så kommer vi til BGCOLOR - en genganger fra <TABLE> elementet. <TABLE BORDER= 1 > <TR BGCOLOR= #FFFF00 > <TD>Bananer</TD> <TD>Æbler </TD> <TD>Pærer</TD> <TD>Appelsiner</TD> <TD>Druer</TD> <TD>Jordbær</TD> </TABLE> Her giver vi en hel tabelrække en baggrundsfarve, idet BGCOLOR placeres i. Vi kunne også farvelægge enkelte celler: <TABLE BORDER= 1 > <TD BGCOLOR= #FFFF00 >Bananer</TD> <TD BGCOLOR= #FF3300 >Æbler</TD> <TD BGCOLOR= #0000FF >Pærer</TD> <TD BGCOLOR= # > Appelsiner</TD> <TD BGCOLOR= #FF00FF >Druer</TD> <TD BGCOLOR= #00FF00 >Jordbær</TD> </TABLE> Her er enkelte celler farvelagt - BGCOLOR er placeret i <TD>. colspan Denne attribut kan kun bruges i eller <TD> elementet. <TABLE BORDER= 1 > <TD COLSPAN= 3 BGCOLOR= #FFFF00 >Frugter</TD> <TD BGCOLOR= # > Bananer</TD> <TD BGCOLOR= #FF00FF >Æbler</TD> <TD BGCOLOR= #00FF00 >Pærer</TD> </TABLE> I dette eksempel får vi én celle til at brede sig over tre underliggende celler. rowspan Denne attribut kan kun benyttes i eller <TD>. <TABLE BORDER= 1 > <TD ROWSPAN= 3 BGCOLOR= #FFFF00 > Frugter</TD>

38 37 <TD BGCOLOR= #FFFF00 >Bananer</TD> <TD BGCOLOR= #FF3300 >Æbler</TD> <TD BGCOLOR= #0000FF >Pærer</TD> <TD BGCOLOR= # > Appelsiner</TD> <TD BGCOLOR= #FF00FF >Druer</TD> <TD BGCOLOR= #00FF00 >Jordbær</TD> </TABLE> Tabeller Her har vi sat WIDTH til 200 pixels i tabel cellen Æbler. Læg mærke til at effekten får indvirkning på alle celler i den pågældende kolonne. Prøv med HEIGHT i stedet for, men sæt værdien til 100. Følgende resultat vil fås: Én celle breder sig over to rækker. width OG height Gengangere fra <TABLE>, dog kan disse attributter ikke benyttes i. <TABLE BORDER= 1 > <TD ROWSPAN= 3 BGCOLOR= #FFFF00 > Frugter</TD> <TD BGCOLOR= #FFFF00 >Bananer</TD> <TD WIDTH= 200 BGCOLOR= #FF3300 >Æbler</TD> <TD BGCOLOR= #0000FF >Pærer</TD> <TD BGCOLOR= # > Appelsiner</TD> <TD BGCOLOR= #FF00FF >Druer</TD> <TD BGCOLOR= #00FF00 >Jordbær</TD> </TABLE> Læg her mærke til, at effekten får indvirkning på alle celler i den pågældende række. <CAPTION> Jeg nævnte elementet <CAPTION> i begyndelsen af kapitlet - lad os lige se et eksempel på brug af dette element. <TABLE BORDER= 1 > <CAPTION>Dette er en fin tabel</caption> <TD BGCOLOR= #FFFF00 >Bananer</TD> <TD BGCOLOR= #FF3300 >Æbler</TD> <TD BGCOLOR= #0000FF >Pærer</TD> <TD BGCOLOR= # > Appelsiner</TD> <TD BGCOLOR= #FF00FF >Druer</TD> <TD BGCOLOR= #00FF00 >Jordbær</TD> </TABLE>

39 Tabeller 38 denne celle får tildelt den plads der skal bruges for at vise teksten uden ombrydning. Billeder i tabeller Til sidst skal vi se et eksempel på, hvordan du kan indsætte almindelige grafik filer i en tabel. Som du kan se oprettes der ved brug af <CAPTION>, automatisk en overskrift til tabellen.! Du kan for øvrigt også benytte attributten ALIGN i <CAPTION> og på den måde enten venstrejustere (standard), centrere eller højrejustere overskriften. nowrap Den sidste attribut, vi skal se på, er NOWRAP som bruges til at forhindre tekstombrydning i tabelceller. <TABLE BORDER= 1 WIDTH = 400 > <TR > <TD>Bananer smager dejligt. De fås som både grønne og gule.</td> <TD NOWRAP> Bananer smager dejligt. De fås som både grønne og gule.</td> </TABLE> # For at lave følgende eksempel skal du hente grafik-filerne straw.gif, banana.gif og apple.gif fra HTML Support - Eksempel filer og placere dem i mappen c:\webtest. <TABLE BORDER= 1 > <TD><IMG SRC= straw.gif WIDTH= 50 HEIGHT= 53 ></TD> <TD>Jordbær</TD> <TD>Bananer</TD> <TD><IMG SRC= banana.gif WIDTH= 50 HEIGHT= 49 ></TD> <TD><IMG SRC= apple.gif WIDTH= 50 HEIGHT= 46 ></TD> <TD>Æbler</TD> </TABLE> Vi har her en tabel med blot to celler i én række. Vi har sat NOWRAP i den højre celle og givet tabellen en fast bredde på 400 pixels. Normalt ville de to celler få tildelt hver halvdelen af tabel bredden (200 pixels), men på grund af NOWRAP, bliver teksten i den højre celle nægtet ombrydning (automatisk linieskift), hvilket resultere i, at En opstilling med grafik og tekst. # Du kan finde yderligere eksempler på brug af emnerne beskrevet i dette kapitel, via HTML Support - HTML eksempler - Tabeller.

40 39 Tabeller Delopgave 4 Vi fortsætter med at udbygge vores sideløbende hjemmeside. Da vi nu kender til tabeller bør vi bruge dem til at organisere Hovedsiden lidt bedre samt forberede en menu der senere skal bruges til navigation på hjemmesiden.. Brug hvad du har lært i dette og tidligere kapitler og gør følgende: 1. Åbn index.htm i mappen c:\webudgiv i Wordpad. Vi vil nu forberede Hovedsidens navigationsmenu - vi beslutter allerede nu, hvilke underliggende sider vi vil have på hjemmesiden.. 2. Indsæt en tabel (<TABLE>) bestående af én tabelrække med seks tabelceller umiddelbart efter dokumentets 1. vandrette linie (<HR>). Sæt BORDER til 0, ALIGN til center og CELLPADDING til 5 og indtast menupunkterne som vist i ovenstående eksempel i de seks celler. Disse menupunkter repræsenterer hjemmesidens underliggende sider med undtagelse af Hovedside og Indsæt en centreret vandret linie (<HR>) med en bredde på 75% umiddelbart efter tabellen. 4. Indsæt to tvungne linieskift (<BR>). 5. Gem index.htm og check i browseren. Vi har nu lavet forarbejdet til vores lille navigationsmenu - vi laver den færdig i slutningen af næste kapitel. # Du kan se løsningen til denne opgave via HTML support - Opgaver - Delopgave 4. Hyperlink I dette kapitel lærer du: Begrebet hyperlink Indsættelse og brug af hyperlink Brug af bogmærker Sørg for at have dokumentet test.htm i mappen c:\webtest åbnet i Wordpad og slet alt i mellem og så du kun har det rå HTML skelet tilbage. Vi vil i dette kapitel lære om hyperlink og hvordan de bruges. Et hyperlink i et HTML dokument er blot en henvisning, som ved klik med musen i browseren udfører en handling. Hyperlink er et af de vigtigste redskaber, når man skal navigere rundt på en hjemmeside eller på WWW generelt. Hyperlink kan deles op i følgende typer: Hyperlink til andre HTML dokumenter på hjemmesiden eller på Internettet generelt. Hyperlink til en fil. Hyperlink til en adresse Derudover skelner man mellem alm. teksthyperlink og hyperlink på grafiske elementer (billeder). Der findes en del indstillinger for, hvordan hyperlink skal opføre sig - vi kommer ind på de vigtigste, via attributter i løbet af kapitlet. Et hyperlink defineres vha. elementet <A> (anker). Elementet bruges dog næsten altid med atttributten HREF, som definerer det der skal henvises til. En undtagelse er bogmærker, som vi kommer ind på lidt senere. Inden vi kaster os over eksempler og øvelser, skal du oprette et ekstra test HTML dokument i mappen c:\webtest. Giv dokumentet titlen Linkside og indsæt billedet help.gif fra HTML Support - Eksempel filer i dokumentet (du har allerede help.gif liggende i c:\webtest fra en tidligere øvelse). Placer billedet i et centreret afsnit. Gem dokumentet under navnet testlink.htm. Luk til sidst det nye dokument og vend tilbage til test.htm i Wordpad.

41 Hyperlink 40 Er du stadig i tvivl om, hvordan man opretter et nyt HTML dokument og indsætter billeder? Okay! kildekoden til testlink.htm skal se sådan ud: <HTML> <HEAD> <TITLE>Linkside</TITLE> </HEAD> <P ALIGN=center> <IMG SRC=help.gif WIDTH= 87 HEIGHT= 62 > </P> </HTML> Og resultatet ser derefter ud som ovenstående i browseren. Vend tilbage til test.htm. Hyperlink til andre dokumenter <P> <A HREF= testlink.htm >Se mine billeder</a> </P> Prøv nu at klikke på linket - Hvad skete der? Du skulle meget gerne have åbnet dokumentet testlink.htm. Prøv at benytte browserens Tilbage knap og du vil automatisk gå tilbage til test.htm.! Browserens knapper Tilbage og Fremad virker i princippet som hyperlink. De husker hvilke dokumenter du sidst har haft åbne i browseren. Når man laver underliggende sider på sin hjemmeside behøver man i princippet ikke at lave link der viser tilbage til Hovedsiden - brugeren kan blot bruge Tilbage knappen i browseren. Det er dog god kutyme altid at lave link der viser tilbage til udgangspunktet på en hjemmeside. Vi kunne også lave et tekstlink som en del af en tekst. <P> Se min <A HREF= testlink.htm >Clipart side</a>. </P> Her findes linket som en del af en tekst og man er jo ikke i tvivl om, hvor linket befinder sig! Nu er det jo ikke kun tekst du kan oprette link på - grafik kan skam også bruges. Åbn dokumentet testlink.htm i Wordpad. Vi har her lavet et ganske alm. tekstlink der linker til dokumentet testlink.htm du oprettede før. Prøv at føre musen over linket og læg mærke til, at den ændrer form til en lille hånd - på denne måde kan du i browseren altid se, hvornår der er tale om et link. Derudover bliver tekstlink altid som standard understreget samt får en anden farve af browseren - vi ser lidt senere på netop linkfarver. Indtast så følgende: <P ALIGN=center> <A HREF= test.htm ><IMG SRC=help.gif></A> </P> * Læg mærke til, at den eksisterende billede henvisning blot indlejres i link henvisningen.

42 41 Hyperlink Før musen over billedet - Et billede som hyperlink - men hvor kom den blå ramme fra? I HTML er det nu sådan, at gør du et billede til et link, vil der automatisk blive tilføjet en standard ramme om billedet med farven blå (det svarer til den automatiske blå understregning på tekstlink). Denne ikke specielt kønne ramme kan du nemt fjerne ved blot at sætte attributten BORDER lig med 0 i <IMG> elementet Tilføj BORDER attributten: <P ALIGN=center> <A HREF= test.htm ><IMG SRC=help.gif BORDER=0></A> </P> Prøv nu at klikke på billedet og du vil åbne test.htm. Jeg har nu vist dig den mest almindelige og simple form for link anvendelse på henholdsvis tekst og grafik. Vi vil efterfølgende se på mange flere muligheder. Hyperlink til En service som findes på faktisk alle hjemmesider, er muligheden for, at sende til hjemmesidens indehaver. Til dette benyttes også hyperlink, der linkes her blot til brugerens program med attributten MAILTO: i link henvisningen. Sørg for at have test.htm åben i Wordpad. <P> <A HREF=MAILTO:pctrold@get2net.dk> Skriv til mig!</a> </P> * Skift adressen pctrold@get2net.dk ud med din egen adresse. Dette link vil resultere i, at brugerens program vil åbne og automatisk oprette en tom med dig som modtager. Har du, som jeg bad dig om, indsat din egen e- mail adresse, kan du prøve at klikke på linket i browseren og dit eget program vil åbne. Hyperlink til en fil Du har måske allerede prøvet at downloade en fil fra nettet. Her er der igen tale om ganske almindelige link - her henvises direkte til en fil på hjemmesiden eller et andet sted på nettet. # For at lave følgende eksempel skal du hente den pakkede fil download.zip fra HTML Support - Eksempel filer og placere den i mappen c:\webtest. <P> <A HREF=download.zip>Download denne fil</a> </P> Lad os prøve at simulere et download - Prøv i browseren at klikke på linket og du vil få følgende dialogboks:

43 Hyperlink 42 Bogmærker har sin fordel hvis du f.eks. i et dokument har en meget lang tekst med mange forskellige punkter. Man kan så fra f.eks. en menu vælge at hoppe til et bestemt punkt i det pågældende dokument. For at lave et bogmærke benyttes elementet <A> med attributten NAME, f.eks. <A NAME= mark >. Elementet indsættes på det sted i det dokument, hvori bogmærket ønskes. For at linke til bogmærket indsættes derefter en henvisning i det link der skal referere til det pågældende bogmærke. Dette gøres ved at indsætte et havelågetegn (#) efterfulgt af bogmærkenavnet, umiddelbart efter link dokumentets navn i attributten HREF. Der er to muligheder! Du kan som standard vælge at gemme filen lokalt på harddisken (Download). Dette valg vil resultere i standard Windows dialogboksen Gem som, hvorefter en kopi af filen blot gemmes på harddisken. Prøv evt. som eksempel at downloade filen download.zip til f.eks. skrivebordet- det kan sagtens lade sig gøre selvom du er Off-Line. Brugeren kan imidlertid også vælge at åbne filen direkte On-Line. Dette kræver imidlertid at han/hun har et program installeret på computeren der kan læse filens format. Er der f.eks. tale om en Zip-fil, som i dette tilfælde, kræves det at der er et program der kan læse Zip-formatet, f.eks. Winzip (Læs om WinZip via HTML Support - Hjælpeprogrammer). Vælges denne metode vil det installerede program ganske enkelt åbne filen direkte mens du er On-Line ( vi kommer til at snakke mere om direkte åbning af filer i forbindelse med Lyd og video i kapitlet Specielle elementer s. 48). Henvisning til bogmærker Du lærte tidligere hvordan man linkede til et andet dokument på hjemmesiden. Du kan imidlertid også linke til et bestemt sted i et andet dokument - dette gøres vha. bogmærker. Et bogmærke er ganske enkelt en markering et bestemt sted i et HTML dokument, som der kan linkes til. For at undgå at du her skal sidde og skrive en kæmpe tekst for at afprøve bogmærker, vil vi i stedet lave et dokument med en række billededer, der fylder flere skærmsider og på den måde se et eksempel. * Du skulle gerne have grafik-filen help.gif liggende i c:\webtest fra tidligere ellers skal du hente den fra HTML Support - Eksempel filer NU. Åbn dokumentet testlink.htm som du lavede tidligere i kapitlet og slet alt i mellem og. Indsæt herefter følgende: <P> 1. <IMG SRC =help.gif > <BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR> 2.<IMG SRC=help.gif > <BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR> 3.<IMG SRC=help.gif > <BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><A NAME=mark> 4.<IMG SRC=help.gif > <BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR> 5.<IMG SRC=help.gif > </P> <BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR> * Læg mærke til, at bogmærket indsættes umiddelbart før billede nr. 4 (<A NAME=mark>).

44 43 Hyperlink Vi vil ikke her gå mere ind på bogmærker, men jeg håber at eksemplet har givet dig en ide om, hvor brugbare de er, specielt mht. lange dokumenter. Læg mærke til, at for at se f.eks. billede nr. 4, er det nødvendigt at scrolle nedefter. Vi vil nu linke til det indsatte bogmærke fra et andet dokument så brugeren automatisk bliver ført ned til billede nr. 4, når testlink.htm åbnes. Åbn dokumentet test.htm i Wordpad og indsæt følgende: <A HREF= testlink.htm#mark >Billede nummer 4.</A> Vi laver her et link til testlink.htm og definerer, ved at indsætte et havelågetegn samt bogmærkenavnet umiddelbart efter filnavnet, at vi ønsker at brugeren sendes til et bestemt sted på den side der linkes til. Gem test.htm og check i browseren. Prøv at klikke på linket og se hvad der sker. Url s Når man definerer link snakker man om to typer af URL s (adresser). Relative URL s. Absolute URL s. Den form for adressering vi hidtil har set, er det man kalder relative URL s. Det vil sige at man ikke definerer en fuldstændig adresse på Internettet, men blot den interne sti i et eget mappe hierarki på serveren. <IMG SRC= images/help.gif > er et eksempel på en relativ URL - den definerer blot, at filen help.gif befinder sig i undermappen /images på serveren.! Bemærk! Når du skal adskille mapper eller filer i Url s, skal du benytte den almindelige / (skråstreg) og ikke \ (backslash). Skal du lave links til f.eks. andre hjemmesider eller dokumenter på Internettet, bliver du nødt til at benytte absolutte URL s. En absolut URL er en fuldstændig Internet adresse, som peger på et helt bestemt sted på nettet. <A HREF= > er et eksempel på en absolut URL. Her defineres en helt bestemt adresse, idet og server-adresse er medtaget.! Absolutte URL s kan selv sagtens ikke umiddelbart testes af Off-Lline, idet de jo henviser til adresser der ligger direkte på nettet. Du skulle meget gerne åbne testlink.htm og derefter automatisk blive ført ned til billede nr. 4.

45 Hyperlink 44 Standard hyperlinkfarver Både MSIE 4.x og Netscape 4.x har nogle standardfarver, hvormed de viser tekstlinks. Der skelnes i mellem link, besøgte link og aktive link. Følgende standardfarver gælder for både MSIE 4.x og Netscape 4.x: Hyperlink er Blå (#0000FF). Aktive hyperlink er Røde (#FF0000). Besøgte hyperlink er Lilla (#660066). Disse standardfarver kan ændres med følgende attributter som alle skal placeres i direkte i start elementet: LINK (link) ALINK (aktivt link) VLINK (besøgt link) Følgende start element vil f.eks. gøre baggrundsfarven Hvid, alm. tekst Sort, hyperlink Blå, aktive hyperlink Røde og besøgte hyperlink Lila: <BODY BGCOLOR=#FFFFFF TEXT=# LINK=#0000FF VLINK=# ALINK=#FF0000>! Både MSIE 4.x og Netscape 4.x understøtter direkte formatering (<FONT>) på hyperlink. Dvs. at du godt kan sætte standard hyperlink farven i et dokument til en farve og så f.eks. farvelægge et enkelt hyperlink i dokumentet med en anden farve. Hyperlink og placering af filer Alt hvad vi har linket til indtil nu har været placeret samme sted, dvs. i samme mappe. Vi var lidt inde på det i kapitlet Grafik og billeder i forbindelse med billeder/grafik. Når du bestiller hjemmesideplads hos en udbyder får du tildelt en personlig mappe på udbyderens server. Der er imidlertid intet galt i, at du selv opdeler denne mappe i flere undermapper. Den eneste fil der dog skal ligge direkte rodmappen på serveren er din hjemmesides hoved dokument/side (index.htm). Alle andre filer, det være sig HTML dokumenter, grafik-filer osv. kan du organisere fuldstændig som du har lyst til, f.eks. i specielle undermapper - der er dog et par konventioner du skal være opmærksom på - de kommer her: Farverne ses ikke så tydeligt pga. det sort/hvide tryk.

46 45 Hyperlink Link konventioner i forbindelse med mappe hierarki. <IMG SRC= billede1.gif > indsat i test.htm. Her er filen billede1.gif placeret i samme mappe som det dokument, hvori linket til filen befinder sig. <IMG SRC= images/billede1.gif > indsat i test.htm. Her er filen billede1.gif placeret i undermappen /images. Læg mærke til ændringen i Url en ovenover. <IMG SRC=../test.htm > indsat i link.htm. Her linkes fra dokumentet link.htm som er placeret i undermappen /Dokument til dokumentet test.htm som er placeret direkte i Rodmappen. Vi går altså her et niveau op i mappe hierarkiet. <IMG SRC=../../test.htm > indsat i link.htm. Her linkes fra dokumentet link.htm som er placeret i undermappen vejled til dokumentet test.htm som er placeret direkte i Rodmappen. Vi går her to niveauer op i mappehierarkiet. Du kan nu selv gætte, hvad der skrives, hvis man f.eks. vil gå hele tre niveauer op. <IMG SRC=../images/billede1.htm > indsat i link.htm. Her linkes fra dokumentet link.htm som er placeret i undermappen dokument til filen billede1.gif som er placeret i Undermappen images. Vi går her ét niveau op i mappe hierarkiet og derefter et niveau ned igen. Vi har i dette kapitel set på de vigtigste anvendelses muligheder med hyperlink. Der findes flere og mere avancerede attributter til <A> elementet - de fleste vil du ikke umiddelbart få brug for, dog med undtagelse af attributten TARGET, som vi vil komme ind på i kapitlet Rammer s. 58. # Du kan finde yderligere eksempler på brug af emnerne beskrevet i dette kapitel, via HTML Support - HTML eksempler - Hyperlink.

47 Hyperlink 46 Opgave 5a Vi fortsætter med at udbygge vores sideløbende hjemmeside. Du har nu lært om hyperlink og derfor skal vi have oprettet nogle underliggende sider til hjemmesiden. Derudover skal vi også have lavet vores linkmenu fra Del opgave 4 færdig. Brug hvad du har lært i dette og tidligere kapitler og gør følgende: Først skal vi have oprettet hjemmesidens underliggende sider (dem vi om lidt skal henvise til via vores navigationsmenu). 1. Sørg for at have Wordpad åben. 2. Opret et nyt HTML dokument. Giv det titlen Om mig selv. Indsæt en centreret overskrift med størrelsen 1 (<H1>) og indskriv teksten Om mig selv. Indsæt umiddelbart under overskriften en centreret vandret linie (<HR>) med bredden 75%. Gem under navnet om.htm i mappen c:\webudgiv. 3. Opret endnu et HTML dokument. Giv det titlen Interesser. Indsæt en centreret overskrift med størrelsen 1 (<H1>) og indskriv teksten Interesser. Indsæt umiddelbart under overskriften en centreret vandret linie (<HR>) med bredden 75%. Gem under navnet inter.htm i mappen c:\webudgiv. 4. Opret endnu HTML dokument. Giv det titlen Foto album. Indsæt en centreret overskrift med størrelsen 1 (<H1>) og indskriv teksten Foto album. Indsæt umiddelbart under overskriften en centreret vandret linie (<HR>) med bredden 75%. Gem under navnet foto.htm i mappen c:\webudgiv. 5. Opret et sidste HTML dokument. Giv det titlen Links. Indsæt umiddelbart under overskriften en centreret overskrift med størrelsen 1 (<H1>) og indskriv teksten Links. Indsæt en centreret vandret linie (<HR>) med bredden 75%. Gem under navnet links.htm i mappen c:\webudgiv. Sådan! Vi har oprettet fire dokumenter til fire underliggende sider. Vi skal nu have lavet menupunkterne i navigationsmenuen om til hyperlink, så de underliggende sider kan åbnes. 6. Åbn index.htm i mappen c:\webudgiv. 7. Find tabellen med navigationsmenuen du lavede i forrige opgave. 8. Lav hyperlink på teksten Om mig selv til dokumentet om.htm (<A>). 9. Lav hyperlink på teksten Interesser til dokumentet inter.htm (<A>). 10. Lav hyperlink på teksten Foto album til dokumentet foto.htm (<A>). 11. Lav hyperlink på Links til dokumentet links.htm (<A>). Det var henvisningerne til de underliggende sider. Vi har stadig to menupunkter tilbage 12. Lav hyperlink på teksten Hovedside til dokumentet index.htm (<A>). Du vil lidt senere se, hvorfor vi gør dette. 13. Lav hyperlink på teksten . Her skal du henvise til din adresse (<A>). Husk du skal bruge attributten MAILTO: 14. Gem index.htm. Til sidste skal vi have placeret navigationsmenuen på samtlige underliggende sider, så den kan benyttes lige meget hvor man er på hjemmesiden. 15. Marker navigationsmenuen (hele tabellen som udgør menuen) samt den efterfølgende vandrette linie (<HR>), højreklik og vælg Kopier (Ctrl+C). 16. Åbn om.htm. Placer markøren umiddelbart under <HR> elementet (den vandrette linie), højreklik og vælg Sæt ind (Ctrl+V) Gem dokumentet.

48 47 Hyperlink Navigationsmenuen er nu kopieret til dokumentet om.htm. 17. Gentag punkt med de tre andre underliggende sider (inter.htm, foto.htm og links.htm). Så er vi næsten færdige for denne gang - check om det hele virker i browseren.! læg mærke til at menupunktet Hovedside i navigationsmenuen optræder på alle underliggende sider og brugeren kan dermed altid komme tilbage til Hovedsiden. # Du kan se løsningen til denne opgave via HTML support - Opgaver - Delopgave 5a. Opgave 5b Som du sikkert bemærkede manglede der noget da du checkede i browseren. De fire underliggende sider har endnu ikke samme baggrund og standard tekstfarve som Hovedside. 1. Tilret nu de fire underliggende sider så de får samme layout som Hovedsiden (Hint! Du skal have fat i attributterne TEXT og BACK- GROUND i de enkelte dokumenters element). # Du kan se løsningen til denne opgave via HTML support - Opgaver - Delopgave 5b.

49 Specielle elementer 48 Specielle elementer I dette kapitel lærer du: Lyd og video Klikbare billeder (Imagemaps) META information Kommentarer Sørg for at have dokumentet test.htm i mappen c:\webtest åbnet i Wordpad og slet alt i mellem og. I dette kapitel vil vi se på nogle mere specielle elementer, som ikke kan kategoriseres i de andre kapitler. Lyd og video Disse elementer bliver mere og mere udbredt på nettet. Du kan med simpel HTML programmering indsætte lyd, musik og videoklip på din hjemmeside. Vi vil i dette afsnit se nærmere på de mest elementære muligheder. Der er to måder hvorpå du kan levere lyd, musik eller video til dine brugere. Enten kan du lade brugeren vælge selv, dvs. han/hun selv skal aktivere hændelsen, eller du kan indlægge baggrundslyde eller musik som automatisk bliver afspillet for brugeren - en video kan f.eks. også startes automatisk. I begge tilfælde stilles der dog krav til de brugere der skal se hjemmesiden. For det første skal brugeren selvfølgelig have et lydkort installeret. Browsere kan af sig selv ikke afspille lyd og musik - der kræves et ekstern program som browseren kan kalde når der klikkes på en lyd eller videofil. Det er som regel ikke et problem, idet langt de fleste brugere der har installeret Windows xx samt lydkort helt automatisk har fået installeret programmet Medieafsiller som er en del af standard installationen af Windows. Medieafspiller kan afspille både lyd og video filer. Derudover findes der mange andre medieafspillere som kan afspille både lyd og video, f.eks. ActiveMovie, Realaudio osv.! Ovenstående betingelser gælder selvfølgelig også for dig selv, når du skal arbejde med lyd og videofiler i forbindelse med din egen hjemmeside. Lyd og video filer findes i forskellige typer - her er de meste udbredte af slagsen: wav, au mid avi, mov Bruges fortrinsvis til lyde. Bruges fortrinsvis til musik. Bruges til video. Der findes andre f.eks. Mpg, Mp3 m.fl. Disse vil vi dog ikke komme ind på her.! Hvis du er usikker på, om du har installeret en Mediafspiller på computeren, kan du via Stifinder finde en lyd eller videofil og dobbeltklikke på den. Har du en afspiller installeret korrekt, vil den automatisk starte og du får mulighed fa at afspille den pågældende lyd eller video. Får du en fejlmelding skal du installere en Mediaafspiller (for yderligere oplysninger om disse ting - se evt. hæftet Start med Windows 98). Brugerbestemte hændelser Hvis du vil præsentere en lyd eller videofil på din hjemmeside som kan afspilles ved klik, skal du henvise til den pågældende fil med et hyperlink - du har lært om hyperlink s. 39. # For at lave efterfølgende eksempler skal du bruge filerne musik.mid, lyd.wav samt video.avi fra HTML support - Eksempel filer. Placer dem i mappen c:\webtest. Indtast nu følgende: <P> <A HREF= lyd.wav >Hør min favorit lyd<a/> <BR> <A HREF= musik.mid >Hør mit favorit musikstykke <A/> <BR> <A HREF= video.avi >Se min favorit video<a/> </P> Vi har her indsat et link til henholdsvis en wav-fil (lydfil), en mid-fil (musikfil) samt en avi-fil (videofil).

50 49 Specielle elementer Prøv at klikke på et tekstlink. Er det første gang der linkes til en bestemt filtype i browseren vil du få dialogboksen Filoverførsel som du kender fra download af en fil (s. 39). Automatiske hændelser I forrige afsnit skulle brugeren jo selv aktivere den fil de ville høre eller se, men man kan også indsætte henvisninger til filer der automatisk aktiveres når den pågældende side åbnes i browseren. Vi starter med lyd og musik - vi kan bruge de samme filer vi brugte i forrige afsnit. Vi skal her have fat i elementet <EMBED>. Indsæt følgende: <EMBED SRC=musik.mid AUTOSTART=true HIDDEN=true LOOP=infinite LOOP= 1000 > <EMBED> virker i både MSIE og Netscape og vil automatisk afspille musik filen musik.mid, når den pågældende side åbnes i browseren. Brugeren vil intet se, men blot høre lyden/musikken. Du vælger blot om du vil downloade filen eller afspille den direkte i browseren. 1. Vælg Åbn denne fil fra dens oprindelige placering. 2. klik på Ok. Den installerede Medieafspiller vil åbne og afspille filen.! Fjerner du markeringen i afkrydsningsfeltet Spørg altid før filer af denne type åbnes, vil du næste gang du klikker på et link til en fil af den pågældende type, ikke få dialogboksen Filoverførsel, men filen vil blive afspillet med det samme i browseren.! Brugere af Netscape vil se en lidt anden type afspiller og de vil slet ikke få dialogboksen Filoverførsel. Check det i browseren. Fjern <EMBED> elementet, når du har afprøvet eksemplet. Attributterne SRC, AUTOSTART, HIDDEN og LOOP er bestemmende for, hvordan filen skal afspilles og betyder følgende: Attribut SRC AUTOSTART HIDDEN LOOP Beskrivelse Definerer Url/Sti til lydfilen. Bestemmer om filen skal starte automatisk. Værdien kan sættes til enten true eller false. Bestemmer at der ikke skal vises et lille Medie panel når filen afspilles. Bestemmer hvor mange gange filen skal starte forfra. Infinite betyder uendelig i MSIE.! Netscape understøtter ikke infinite som værdi til LOOP, derfor er der tilføjet en ekstra LOOP med værdien 1000, hvilket må siges at svare til uendeligt i MSIE. Du kan også vise brugeren et lille afspilnings panel som han/hun skal klikke på, for at afspille filen. Det svarer sådan set til det du så under Automatiske hændelser s. 49, men her bliver den

51 Specielle elementer 50 eksterne Medieafspiller integreret med browseren. <P> <EMBED SRC=musik.mid WIDTH=145 HEIGHT=60 AUTOSTART=false HID- DEN=false> </P> <P> <EMBED SRC=video.avi WIDTH=100 HEIGHT=100 AUTOSTART=true LOOP= infinite > </P> </BODY Vi har her sat både AUTOSTART og HIDDEN til false og derfor tvinges browseren til at vise et afspilnings panel og brugeren tvinges til selv at klikke på Play knappen.! Brug altid bredden 145 og højden 60 i attributterne WIDTH og HEIGHT. Årsagen er, at Netscape har sit eget indbyggede afspilnings panel og dette vises kun korrekt med disse indstillinger. Sådan ser det ud i MSIE.! Vi har i de forrige eksempler benyttet musik filer af typen mid - prøv evt. selv at bruge en lyd fil, f.eks. lyd.wav som du allerede har liggende i c:\webtest.! Når du indsætter baggrundsmusik i et dokument så indsæt altid <EMBED> elementet sidst i, så loades musikken nemlig til sidst og brugeren skal ikke vente med at se sidens indhold til musikfilen er loadet. Denne regel gælder selvfølgelig kun for baggrundsmusik, hvor musikfilen afspilles skjult og automatisk. Video kan også indsættes med <EMBED>. Vi tager et par hurtige eksempler med video.avi som du allerede har liggende i c:\webtest. video.avi startes automatisk og starter forfra igen og igen, men læg her mærke til, at man ikke slipper for at få afspilnings panelet vist.! Husk altid at WIDTH og HEIGHT skal sættes til den størrelse pixels videoen har (dimensioner). Prøv denne implementering og du vil tvinge brugeren til selv at starte videoen integreret i browseren: <P> <EMBED SRC=video.avi WIDTH=100 HEIGHT=100 AUTOSTART=false > </P> video.avi loades, men brugeren skal selv starte afspilningen. Ikke mere om Lyd, musik og video i denne omgang. Der findes andre og meget mere avancerede måde, at implementere lyd og video på i dag, men dette må høre til i et andet hæfte.

52 51 Specielle elementer $ Pas på med at indsætte lyd og video der loader automatisk, når en side åbnes i browseren. Lyd- og specielt videofiler er tunge og derfor længe om at loade. Hvis du absolut vil spille automatisk baggrundsmusik for dine brugere, så brug lyd filer, der ikke er for store. Mht. video (*avi) vil jeg anbefale dig at bruge alternativet, nemlig animerede gif-filer. En animeret gif-fil indsættes på nøjagtig samme måde som et almindeligt billede - se s. 39. Klikbare billeder (Imagemaps) Med Imagemaps kan du lave det man også kalder klikbare billeder. Dvs. Et billede opdeles i klikbare områder - hvert område kan så tilknyttes et hyperlink. Det kræver lidt øvelse at lave klikbare billeder manuelt. De fleste WYSIWYG editorer har automatiseret processen. Hvis du arbejder i ren HTML findes der også deciderede Image mappere, som er programmer som letter produktionen af Klikbare billeder (læs om programmet CoffeeMap via HTML Support - Hjælpeprogrammer). Som jeg har nævnt flere gange tidligere, er det godt at vide lidt om, hvordan det hele egentlig hænger sammen - derfor gør vi det på den manuelle måde her. Når man laver et klikbart billede deler man billedet op i felter/områder som bliver defineret med koordinater i billedet. Et klikbart område kan defineres som henholdsvis et rektangulært område, et cirkulært område eller som et mangekantet område (polygon).! Koordinater beregnes i pixels i forhold til det valgte billedes areal og altså ikke i forhold til skærm areal. Dette gør, at det er forholdsvis nemt at beregne koordinater i et grafik-program, der kan vise koordinater i billeder og har markerings funktioner. Vi skal først have fat i elementerne <MAP> og <AREA>. <MAP> definerer selve det klikbare billede og har en enkelt attribut, nemlig NAME som definerer et unikt navn på det klikbare billede. Værdien angives som en tekststreng og kan i princippet være hvad som helst, f.eks. map1. <AREA> definerer et klikbart område i det klikbare billede. <AREA> har flere attributter - de er som følger: Attribut SHAPE COORDS HREF TARGET TITLE ALT Værdi Definerer formen på et klikbart område. Værdien kan sættes til enten rect, circle eller polygon. Det klikbare områdes koordinatsæt, f.eks. 8,5,27,36. Der regnes i pixels. Link henvisning der kan tilknyttes det klikbare område. Mål ramme for link henvisning. Viser Tooltip for de enkelte klikbare områder (MSIE). Viser Tooltip for de enkelte klikbare områder (Netscape). Du er sikkert forvirret! - så i stedet for flere forklaringer, ser vi et eksempel. #Du skal bruge eksempel billedet menumap.gif fra HTML Support - Eksempel filer. Placer den i mappen c:\webtest. Som det ses at ovenstående illustration defineres et område i billedet som koordinatpar. Ved cirkulære områder bruges dog yderligere værdien radius (R). $ Du skal være opmærksom på, at det er meget vigtigt at du indtaster efterfølgende kildekode100% nøjagtig - den mindste afvigelse i koordinaterne vil resultere i, at det klikbare billede ikke vil virke korrekt.

53 Specielle elementer 52 <MAP NAME=menu> <AREA SHAPE=rect COORDS=14,32,189,50 HREF=link1.htm> <AREA SHAPE=rect COORDS=250,10,330,23 HREF=link2.htm> <AREA SHAPE=rect COORDS=362,23,459,33 HREF=link3.htm> <AREA SHAPE=rect COORDS=496,38,568,48 HREF=link4.htm> <AREA SHAPE=rect COORDS=361,52,427,62 HREF=link5.htm> <AREA SHAPE=rect COORDS=250,67,291,77 HREF=link6.htm> </MAP> <P ALIGN=center> <IMG SRC=menumap.gif BORDER= 0 WIDTH= 580 HEIGHT= 84 ALIGN= bottom USEMAP=#menu> </P> Billedet menumap.gif deles i dette eksempel op i 6 rektangulære klikbare områder Selve billedet indsættes blot med en almindelig billede henvisning (<IMG>). Der benyttes så attributten USEMAP til at henvise til elementet <MAP> som danner rammen om definitionen af det klikbare billede. USEMAP skal sættes lig med værdien sat i elementet <MAP> s NAME attribut (unikt navn) med et foranstående havelåge tegn (#). Selve opdelingen af de enkelte klikbare områder skal indlejres i <MAP> med elementet <AREA>. I <AREA> elementerne bruges i dette eksempel attributten RECT til at definere koordinaterne for de enkelte klikbare områder i billedet. HREF attributten definere på almindelig vis den Url, det enkelte klikbare område skal referere til. Med hensyn til hvordan du opretter koordinater - se afsnittet Oprettelse af koordinater s. 52. Men inden du går videre så prøv at gem test.htm og check resultatet i browseren. Sådan skulle resultat se ud - før musen over billedets menupunkter. I browserens Statuslinie, vil du kunne se at de enkelte menupunkter henviser til forskellige dokumenter - i dette eksempel er det blot dokumenter vi ikke har oprettet - derfor vil du få en fejlmelding, hvis du klikker på billedets henvisninger. Hvis du vil afprøve eksemplet i praksis kan du blot ændre link henvisningerne i de enkelte <AREA> elementer til et dokument du har liggende i c:\webtest. Oprettelse af koordinater Det kan umiddelbart se lidt uoverskueligt ud mht. oprettelse af koordinaterne, men det er faktisk mere surt slid end indviklet. Når du har bestemt dig for et billede du vil opdele i klikbare områder, skal du åbne det i et grafik-program som har markerings funktioner og kan vise koordinater i billeder, f.eks. Paint Shop Pro, som kan downloades i ShareWare version via dette hæftes webside Jeg vil følgende beskrive hvordan du gør i Paint Shop Pro - fremgangsmåden er nogenlunde den samme i andre lignende grafik-programmer. For at følge efterfølgende instruktioner, skal du selvfølgelig have downloadet og installeret programmet.! Er du i tvivl om, hvordan du installerer Paint Shop Pro, kan du kan finde en installations vejledning til programmet via HTML Support - Eksterne programmer. Vi bruger billedet menumap.gif fra før som eksempel og vil efterfølgende se, hvordan jeg fandt koordinatsættene til de seks klikbare områder i billedet. Vælg File, open (Ctrl+O) i Paint Shop Pro og åbn menumap.gif (du skulle have billedet liggende i c:\webtest).

54 53 Vælg værktøjet Zoom i Værktøjslinien og venstreklik en til to gange på billedet - så kan du se hvad du laver. Vælg værktøjet Selection i Værktøjslinien. Sørg for at Selection type i det flydende kontrolpanel Controls er sat til Rectangle. Specielle elementer det rektangulære områdes koordinater i 1. og 2. Man benytter altså reelt to punkter (koordinatpar) til at definere et rektangulært område. De kan skrives på formen x1,y1,x2,y2: I dette eksempel 14, 32, 189, 50. I den første parentes aflæses koordinaterne for udgangspunktet for området (der hvor du nedtrykkede museknappen). I den anden parentes aflæses koordinaterne for, hvor du er nu. I den tredje parentes aflæse områdets totale størrelse i pixels - i dette eksempel 175 x 18.! Findes kontrolpanelet Controls ikke flydende i programvinduet, skal du vælge View, Toolbars og afkrydse punktet Control palette i dialogboksen Toolbars. Prøv at føre musemarkøren ind over billedet og læg mærke til, at du i programmets Statuslinie kan se de præcise koordinater for, hvor du er i billedet. Vi finder først koordinaterne til det rektangulære område der skal dække teksten Michael s place.! Den kantede parentes kan bruges til at aflæse nøjagtigheden af et kvadratisk eller cirkulært område. Er værdien i denne parrentes lig med 1,000, vil du have en nøjagtigt kvadrat eller en nøjagtig cirkel. Du har nu fundet koordinaterne for det første klikbare område og kan nemt, på nøjagtig samme måde, finde koordinaterne for de resterende 5 områder (de fem menutekster). #Du kan se et eksempel på praktisk brug af Dette eksempels Imagemap, via HTML Support - HTML eksempler - Specielle elementer - Imagemap 1. Cirkulære og mangekantede områder <AREA> s to andre attributter POLYGON og CIR- CLE bruges til at definere henholdsvis mangekantede og cirkulære klikbare områder. Den måde, hvorpå du finder koordinaterne er lidt anderledes end ved det rektangulære område - vi vil lige se et lille eksempel: Placer musemarkøren øverst lige til venstre for teksten Michael s place (koordinaterne 14, 32). Hold venstre museknap nede mens, du trækker diagonalt med musen til nederst lige til højre for teksten (koordinaterne 189, 50 ) - du må ikke slippe museknappen). #Du skal bruge eksempel billedet danmark.gif fra HTML Support - Eksempel filer. Placer den i mappen c:\webtest. Åbn billedet danmark.gif i PsP. Vi ser først på det cirkulære område. Se i Statuslinien og du vil kunne aflæse

Relaterede dokumenter

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

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

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

Vejledning til opbygning af hjemmesider

Vejledning til opbygning af hjemmesider Side 1 af 9 Vejledning til opbygning af hjemmesider Hvis du er inde på din klubs hjemmeside, fx på forsiden, kan du nu gå i gang med at redigere. For at få redigeringsværktøjet frem, skal du klikke på

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

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

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

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

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

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

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

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

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

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

Skifte til PowerPoint 2010

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

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

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

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside 1 Alle har ret og råd til en professionel hjemmeside på få minutter GoMinisite

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

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

Annemette Søgaard Hansen/www.dinwebvejleder.dk

Annemette Søgaard Hansen/www.dinwebvejleder.dk Google Docs Regneark Indholdsfortegnelse Værktøjer... Side 3 Menuer... Side 6 Opgave... Side 13 Få adgang til filerne fra din computer... Side 19 Vejledende løsning... Side 20 GoogleDocs Regneark 2 Google

Læs mere

Den Talende Bog. version 4.0. Mikro Værkstedet A/S

Den Talende Bog. version 4.0. Mikro Værkstedet A/S Den Talende Bog version 4.0 Mikro Værkstedet A/S Den Talende Bog : version 4.0 Mikro Værkstedet A/S Revision 1.42, 7. maj 2007 Indholdsfortegnelse Den Talende Bog... v 1. Kom godt i gang... 1 1.1. Hjælp...

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

Grundlæggende WordPad i 11 lette trin Til Elisabeth 2013 SeniorKultur/AluData :: Vanløse

Grundlæggende WordPad i 11 lette trin Til Elisabeth 2013 SeniorKultur/AluData :: Vanløse Grundlæggende WordPad i 11 lette trin Til Elisabeth 2013 SeniorKultur/AluData :: Vanløse 1 ordpad er en grundlæggende tekstbehandlingsprogram, der er inkluderet i Windows W (siden Windows 95, hvor det

Læs mere

Velkommen til manualen for Styleclasses Introduktion til Styleclasses Rediger styleclass

Velkommen til manualen for Styleclasses Introduktion til Styleclasses Rediger styleclass 14.2.0 Velkommen til manualen for Styleclasses 1 14.2.1 Introduktion til Styleclasses 1 14.2.2 Ny styleclass 1 14.2.3 Rediger styleclass 2 14.2.3.1 Custom 3 14.2.3.2 Setup 3 14.2.3.3 Slet 4 14.2.4 Problemer

Læs mere

BRUGERVEJLEDNING. Diabetesforeningens lokale hjemmesider

BRUGERVEJLEDNING. Diabetesforeningens lokale hjemmesider BRUGERVEJLEDNING Diabetesforeningens lokale hjemmesider Om Diabetesforeningens lokale hjemmesider Alle Diabetesforeningens lokalforeninger, børnefamilie- og ungergrupper har en officiel hjemmeside. Det

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

Modul 2 - Computerens drev og tekstbehandling. Computerens netværksdrev og mappen dokumenter

Modul 2 - Computerens drev og tekstbehandling. Computerens netværksdrev og mappen dokumenter IT-Brugerkursus Modul 2 - Computerens drev og tekstbehandling Indholdsfortegnelse Computerens netværksdrev og mappen dokumenter Oprettelse af mapper Navngivning og omdøbning af mapper Sletning af mapper

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

Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen.

Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen. Validering 4 Nu skal vi især se på og samt centrering af hele siden på skærmen. Det er i HTML ikke forbudt at bruge koden , men lad nu være alligevel, du får blot en masse valideringsproblemer.

Læs mere

Manual til administration af online booking

Manual til administration af online booking 2016 Manual til administration af online booking ShopBook Online Med forklaring og eksempler på hvordan man konfigurerer og overvåger online booking. www.obels.dk 1 Introduktion... 4 1.1 Formål... 4 1.2

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

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

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS4, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

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

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

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

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

Du skal nu se om din mail er kommet hjem til dig. Klik på Indbakken.

Du skal nu se om din mail er kommet hjem til dig. Klik på Indbakken. 27 Åbn en e-mail. Du skal nu se om din mail er kommet hjem til dig. Klik på Indbakken. Hvis der ikke er kommet ny post, klik på Send/mod, i den øverste linje, så leder mailprogrammet efter ny mail. Nye

Læs mere

Sådan starter du PowerPoint vha. Start-knappen

Sådan starter du PowerPoint vha. Start-knappen Bliv en haj til IT i hverdagen 4.3 PowerPoint Microsoft PowerPoint er et præsentationsprogram, som kan bruges til at oprette flotte præsentationer, der enten kan udskrives eller afspilles på en computer.

Læs mere

En blog med dansk brugerflade. Opret en Smartlog konto Gå til http://www.smartlog.dk/ Opret en konto ved at skrive din e-mailadresse

En blog med dansk brugerflade. Opret en Smartlog konto Gå til http://www.smartlog.dk/ Opret en konto ved at skrive din e-mailadresse Blogs Om blogs http://www.it-borger.dk/den-nye-it-verden/internet/blogs Om at oprette blogs http://www.it-borger.dk/laer-om-it/internet/nar-du-vil-pa-nettet/blogs/sadan-laver-du-en-blog Råd når du laver

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

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

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

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

Nvu hjemmesider hurtigt og let

Nvu hjemmesider hurtigt og let Nvu hjemmesider hurtigt og let Brugervenlig og grafisk præsentation af textdokumenter var en af de store udfordringer indenfor softwareudvikling i slutningen af 1980erne. Tim Berners-Lee fra CERN udvikler

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

Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt.

Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt. HTML & CSS 1 Efterlyst! All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Introduktion

Læs mere

Bogfunktionen eller Slægtsbogen i FTM

Bogfunktionen eller Slægtsbogen i FTM Bogfunktionen eller Slægtsbogen i FTM En blandt mange af Family Tree Maker s styrker er evnen til at præsentere data på mange forskellige måder, og i dette skrift vil bogfunktionen blive gennemgået. Funktionen

Læs mere

At indsætte ord og billeder og brug af hjælpefunktionen.

At indsætte ord og billeder og brug af hjælpefunktionen. Udarbejdelse af kommunikationsbøger Noter og øvelser i forbindelse med at udarbejde kommunikationsbøger vha. programmet Phraseit (Genlyd). Følgende øvelser og instruktion er baseret på at Phrase-it 2.1

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

Opstart. I gang med Dreamweaver. Læs mere om...

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS5, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

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

Skifte til OneNote 2010

Skifte til OneNote 2010 I denne vejledning Microsoft Microsoft OneNote 2010 ser meget anderledes ud end OneNote 2007, og vi har derfor oprettet denne vejledning, så du hurtigere kan komme i gang med at bruge programmet. Læs videre

Læs mere

Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW.

Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW. Denne guide er oprindeligt udgivet på Eksperten.dk CSS - en gennemgang Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW. Der er lidt CSS historie

Læs mere

Quick guide Dynamicweb 9. Kom godt i gang med brugen af redigeringsværktøjet bag vores hjemmesideløsning CMS-systemet Dynamicweb

Quick guide Dynamicweb 9. Kom godt i gang med brugen af redigeringsværktøjet bag vores hjemmesideløsning CMS-systemet Dynamicweb Quick guide Dynamicweb 9 Kom godt i gang med brugen af redigeringsværktøjet bag vores hjemmesideløsning CMS-systemet Dynamicweb Indholdsfortegnelse Sådan logger du på... 3 Opbygning... 4 Beskrivelse af

Læs mere

VUC IT Niveau G. Drev Mapper Filer

VUC IT Niveau G. Drev Mapper Filer VUC IT Niveau G Drev Mapper Filer Harddiske og andre lagringsmedier ( drev ) Det mest enkle er at tænke på disk-drev som et arkivskab. Drev navngives med et bogstav. Normalt navngives med C:, D:, E: osv.

Læs mere

SIDEN PÅ WORDPRESS.COM

SIDEN PÅ WORDPRESS.COM WordPress WordPress er et fantastisk program til blog og til hjemmesider, hvor du gerne vil kunne rette via din browser. WordPress er meget udbredt og det er derfor nemt at finde fora, templates og hjælp

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

BRUGER KURSUS RAMBØLL HJEMMESIDE

BRUGER KURSUS RAMBØLL HJEMMESIDE Til Forsyningsvirksomheder i Danmark Dokumenttype Brugervejledning Rambøll Hjemmeside Full Responsive Dato Oktober 2017 BRUGER KURSUS RAMBØLL HJEMMESIDE BRUGER KURSUS RAMBØLL HJEMMESIDE Revision 01 Dato

Læs mere

Opstart. I gang med Dreamweaver. Læs mere om...

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS6, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

Læs mere

Vejledning i brug af GMAIL (Google)

Vejledning i brug af GMAIL (Google) Vejledning i brug af GMAIL (Google) Send meddelelser Har du ikke prøvet Gmail før? Her har du en trinvis vejledning i, hvordan du skriver og sender meddelelser: Klik på knappen Skriv i venstre side i Gmail.

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

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

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

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

5.0 Velkommen til manualen for kanalen HTML-grab Introduktion til kanalen HTML-grab kanalside Hvad er et spot?

5.0 Velkommen til manualen for kanalen HTML-grab Introduktion til kanalen HTML-grab kanalside Hvad er et spot? 5.0 Velkommen til manualen for kanalen HTML-grab 1 5.1 Introduktion til kanalen 1 5.2 HTML-grab kanalside 1 5.2.1 Hvad er et spot? 2 5.2.2 Opret et nyt spot 2 5.2.3 Aktivt og inaktivt spot 3 5.2.4 Rediger

Læs mere

Manual til WordPress CMS

Manual til WordPress CMS Manual til WordPress CMS 1. Log ind på din Wordpress-side For at arbejde på din hjemmeside skal du først logge ind på administrationsdelen. Muligvis har du et direkte link på siden. Ellers er adressen

Læs mere

Vejledning til vedligehold af

Vejledning til vedligehold af Vejledning til vedligehold af www.ajsport.dk Udarbejdet af Helle M. Klausen Indhold Sådan logger du på... 2 Sådan logger du af... 2 Hvad er ikke tilladt under vedligehold af www.ajsport.dk?... 2 Kan www.ajsport.dk

Læs mere

Billeder på hjemmeside

Billeder på hjemmeside Billeder på hjemmeside Indholdsfortegnelse Emne 1. Billedredigering (Microsoft Picture Manager) Side 3 a. Komprimer billeder b. Beskæring af billeder 3 9 2. Billeder og tekst ved hjælp af en skabelon (Template

Læs mere

Handlinger du kan foretage er f.eks at du kan : - Oprette, - markere og kopiere, klippe og slette filer eller mapper.

Handlinger du kan foretage er f.eks at du kan : - Oprette, - markere og kopiere, klippe og slette filer eller mapper. Guide Denne computer & Handlinger Af Frank Skibby Jensen 2003 www.3wave.dk I alt 5 Sider Handlinger du kan foretage er f.eks at du kan : Oprette, markere og kopiere, klippe og slette filer eller mapper.

Læs mere

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette.

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Spørgsmålet er nu, hvordan laver man sådan en side? Du skal have et såkaldt webhotel, hvilket jeg

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

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

MANUAL - Joomla! Version 1

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

Læs mere

Mini brugermanual CMD 5.1

Mini brugermanual CMD 5.1 Mini brugermanual CMD 5.1 Kom i gang For at tilgå CMD skal du åbne en web browser og indtaste URL en på dit CMD website i adressefeltet, hvorefter dialogboksen til log in vises. 1. Indtast dit brugernavn

Læs mere

Undervisning Version 1.0 redigering af billeder til hjemmesiden

Undervisning Version 1.0 redigering af billeder til hjemmesiden Undervisning Version 1.0 redigering af billeder til hjemmesiden Nødvendigheden for at almindelig god bruger til edb. Her taler jeg ikke om at blive en superbruger men bare en bruger der styr på almindelig

Læs mere

Vejledning KPK Online Prøverum

Vejledning KPK Online Prøverum Vejledning KPK Online Prøverum INDHOLD Introduktion side 2 Funktionsliste side 2 Få adgang til systemet side 3 Opload dine billeder side 4 Sådan bruges systemet side 5 Gem dine eksempler side 7 Side 1/7

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

Guide til Umbraco CMS

Guide til Umbraco CMS web Guide til Umbraco CMS Indhold Indledning 3 Kompatible browsere 3 Log ind i Umbraco 4 Content-delen 5 Indholdstræet 5 Tilføjelse af en side/sektion 7 Sortering af indhold 12 Galleri 14 Mediebibliotek

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

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

Brugermanual til Wordpress 3.2.x Content Management System

Brugermanual til Wordpress 3.2.x Content Management System Indhold Brugermanual til Wordpress 3.2.x Content Management System Kontrolpanelet 2 Brugerniveauer 2 Log ud 3 Profil 4 Generel Info (vigtigt) 5 Tilføj nyt indlæg(1) 6 Tilføj nyt indlæg(2) 7 Tilføj nyt

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

Brugervejledning til Design Manager Version 1.02

Brugervejledning til Design Manager Version 1.02 Brugervejledning til Design Manager Version 1.02 Indholdsfortegnelse 1. Introduktion... 3 1.1 Det kan du med HostedShop Design Manager... 3 1.2 Feature list... 3 2. Design... 4 3. Filer og CSS... 4 3.1

Læs mere

vorbasse.dk Redaktørmanual Kentaur

vorbasse.dk Redaktørmanual Kentaur Redaktørmanual Kentaur Indholdsfortegnelse Kapitel 1 - TYPO3 Brugerfladen 3 Log ind 3 Backend 4 Frontend 5 Hvor skal jeg klikke? 5 Gem, gem og vis, gem og luk 6 Kapitel 2 - Sider & menuer 7 Sammenhæng

Læs mere

Manual Version 2. til oprettelse af hjemmesider for landsbyer i Rebild kommune

Manual Version 2. til oprettelse af hjemmesider for landsbyer i Rebild kommune Manual Version 2 til oprettelse af hjemmesider for landsbyer i Rebild kommune Oversigt: Login Hjemmeside...... side 3 Login Administrationsmodul... side 5 Kategorier.. side 6 Opret/rediger første side...

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

8.0 Distriktshjemmesider

8.0 Distriktshjemmesider 8.0 Distriktshjemmesider Indhold Login... 2 Forside... 3 Distriktsside opbygning...4 Rediger på en side... 5 Upload filer til mediebibliotek... 8 Kontroller links på filer... 12 Indsæt billeder... 13 Slet

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

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

Velkommen til Stifikseren!

Velkommen til Stifikseren! Powered by Velkommen til Stifikseren! Du har nu fået et meget effektivt værktøj til på én gang at lette dit arbejde og kvalificere dine elevers udbytte af deres og din indsats i forhold til deres skriftlige

Læs mere

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette.

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Spørgsmålet er nu, hvordan laver man sådan en side? Du skal have et såkaldt webhotel, hvilket jeg

Læs mere

Øvelser rundt på computeren

Øvelser rundt på computeren Øvelser rundt på computeren Kursister med it-færdigheder bør læse øvelserne igennem. Hvis der er elementer, som er ukendte, bør du udføre øvelserne. Hvis øvelserne derimod er kendt information kan øvelserne

Læs mere

Nogle tips til Explorer 7

Nogle tips til Explorer 7 Side 1 af 12 Nogle tips til Explorer 7 Indhold Nogle tips til Explorer 7...1 Indhold...1 Benytter du den sidste udgave af programmet?...2 Ændre standardindstillinger...2 Bestem selv din startside...2 Ændre

Læs mere

Du har nu en genvej på dit skrivebord hen til den mappe hvor dine filer med bøgerne kommer til at ligge, den virkelige sti = c:\bøger.

Du har nu en genvej på dit skrivebord hen til den mappe hvor dine filer med bøgerne kommer til at ligge, den virkelige sti = c:\bøger. Download af bøger i MP3 format Side 1 af 6 Forudsætninger for at kunne benytte denne mulighed er: En computer med rimelig diskplads (hvert bog fylder små 200 MB). En god Internetforbindelse, for ikke at

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

Sådan redigerer du en hjemmeside i Umbraco

Sådan redigerer du en hjemmeside i Umbraco Brugermanual til din boligafdelings hjemmeside Sådan redigerer du en hjemmeside i Umbraco Indhold Introduktion... 2 Log på Umbraco og redigér din hjemmeside... 3 Opret ny side... 7 Gem side uden at udgive/publicere

Læs mere

Opgave: Digitalisering af et dokument

Opgave: Digitalisering af et dokument Denne opgave omhandler digitaliseringen af et Veje i Frederikssund Kommune. I opgaven gennemgås følgende: Oprettelse af mapper og sider på hjemmesiden Indsættelse af tekst, billeder, links til PDF og hjemmesider

Læs mere
2024 © DocPlayer.dk Fortrolighedspolitik | Servicevilkår | Feedback