HTML - FOR BEGYNDERE. Hans Hedegaard. (Frit hentet fra html.dk ) Redigeret af

Størrelse: px
Starte visningen fra side:

Download "HTML - FOR BEGYNDERE. Hans Hedegaard. (Frit hentet fra html.dk ) Redigeret af"

Transkript

1 HTML - FOR BEGYNDERE (Frit hentet fra html.dk ) Redigeret af Hans Hedegaard

2 HTML-GUIDE for begyndere Lektion 1: Det praktiske I denne første lektion får du en kort præsentation af de værktøjer, du skal bruge for at lave dine egne websites. Hvad skal der da bruges? Du skal bruge: en browser og et tekstprogram (notepad er rigeligt!!!). Hent evt. programmet Notepad++ Det er ikke så vigtigt, hvilken browser du bruger. Den mest almindelige er Microsoft Internet Explorer, men der findes også andre (f.eks. Chrome og Mozilla Firefox), og fælles for dem alle er, at de kan bruges her. Så du skal altså nok få set dine kommende sider, men først skal de jo lige laves. Du skal have fat i programmet Notepad (på dansk: Notesblok), der som regel ligger i startmenuen under Programs (Programmer) under punktet Accessories (Tilbehør): En browser og Notepad er alt du behøves for at gennemgå dette kursus og lave dit eget website. NOTE: det er en fordel at bruge en udvidet version af Notepad som hedder programmers notepad. Det fylder ikke meget og kan hentes på viggo-net under fildeling. Skal jeg være online? Du behøver ikke være online! Også når du laver et website (og det gør du snart), kan du være offline. Normalt vil du først lave siderne på din egen computer, og derefter lægge dem ud på Internettet, når de er færdige. Hvad så nu? Hop videre til den næste lektion og læs lidt om hvad HTML egentlig er

3 Lektion 2: HTML Denne anden lektion har til formål at give dig en kort præsentation af din nye ven - han hedder HTML Hvem eller hvad er HTML så? HTML er browserens 'modersmål' og fundamentet for alle sider på Internettet. HTML er et 'sprog', der gør det muligt at præsentere materiale (f.eks. forskningsresultater) på Internettet. Når du går ind på et websted, er det du ser en 'oversættelse' af HTML - det er din browser, der oversætter HTML. Klik på "View" (Vis) i menuen i din browser og vælg "Source" (Kilde) for at se HTML-koden, der ligger bag denne side. For almindelige dødelige ser HTML enormt kompliceret og forvirrende ud. Men bare rolig. Når du har læst denne tutorial vil det hele give mening. Okay, men hvad betyder HTML? HTML er en forkortelse af HyperText Mark-up Language - hvilket allerede er mere end du behøver at vide, så lad os i stedet komme i gang med det, det handler om: at lave websites.

4 Lektion 3: Tags Efter disse to indledende lektioner er du nu parat til at lære de første tags at kende. "Tags"? "Tags" er det browseren læser og oversætter inden den viser en hjemmeside for dig. Tags er engelsk (udtales også på engelsk) og betyder egentlig etiket eller mærkat. Det er altså en slags mærkater med forskellige kommandoer, du bruger til at fortælle browseren, hvordan du vil have din side til at se ud. Alle tags har det samme format: De starter med et mindre-end tegn "<" og slutter med et større-end tegn ">". Generelt findes der to slags tags: Åbningstags: <kommando> og lukketags: </kommando>. For at lave et lukketag skal du blot tilføje en "/" i åbningstaget. Al information, du putter mellem et åbningstag og lukketag, vil være underlagt den kommando, der står i taget. Ingen regel uden undtagelse. Der findes et par enkelte tags, der både åbnes og lukkes i samme tag. Disse tags indeholder kommandoer, der ikke er knyttet til et specielt stykke tekst, men er en enkeltstående kommando - f.eks. et linjeskift. HTML er ikke andet end tags. At lære HTML er at lære at kende tags og bruge dem. Hvad med et par eksempler? Taget <b> fortæller f.eks. browseren at alt der står mellem <b> og </b> skal skrives med fed skrift (b er en forkortelse for "bold", der betyder fed): Eksempel 1: <b>dette skal stå med fed</b> Vil se sådan ud i browseren: Dette skal stå med fed Tagsene <h1>, <h2>, <h3> osv. fortæller browseren at den skal skrive en overskrift (h står for "heading", der er engelsk for overskrift), hvor <h1> er den største, <h2> den næststørste osv. Eksempel 2: <h1>dette er en stor overskrift</h1> <h2>dette er en lidt mindre overskrift</h2> Vil se sådan ud i browseren: Dette er en stor overskrift Dette er en lidt mindre overskrift

5 Skal man skrive et tag med stort eller småt? De fleste browsere er i udgangspunktet ligeglad om du skriver din tags med stort, småt eller begge dele. <KOMMANDO>, <kommando> eller <KomMaNDO> vil normalt give det samme resultat i browseren. MEN det rigtige er at skrive tags med småt, så du kan lige så godt gøre det til en vane at skrive dine tags med lille. Fint nok, men hvor skriver jeg så mine tags? Dine tags skriver du i et HTML-dokument. Når du surfer rundt på Nettet åbner du blot filer i form af HTML-dokumenter. Forvirret? Så hop videre til den næste lektion, for om ti minutter har du lavet dit første website.

6 Lektion 4: Dit første website Udfra det du har lært i de foregående lektioner, er du nu kun minutter fra at lave dit første HTMLdokument. Hvordan? I lektion 1 fik du af vide, hvad du skulle bruge for at lave HTML-dokumenter: en browser og Notepad (eller en lignende teksteditor). Åben browseren. Åben også Notepad Hvad kan jeg lave? Jeg tror vi starter med noget enkelt - måske en side der skriver "Dette er min første side". Okay? HTML virker på en meget simpel og logisk facon. Browseren læser HTML, ligesom du selv læser: fra toppen til bunden og fra venstre mod højre. En HTML-side starter derfor med det der skal komme først, og afsluttes med det der skal komme sidst. Det du allerførst skal gøre, er at fortælle browseren, at du har tænkt dig at skrive HTML. Det gør du med taget <html> (ingen overraskelser der). Gå derfor ind i Notepad og skriv <html> øverst på siden. Som du måske husker fra den forrige lektion, er <html> et åbningstag, og skal derfor lukkes med et </html>, når du er færdig med at skrive HTML. Indsæt derfor et </html> et par linjer nede, og skriv resten af siden mellem <html> og </html>. Dernæst skal din side have et hoved og en krop. Meget logisk sidder hovedet (<head> og </head>) ovenpå kroppen (<body> og </body>). Nu skulle din side se sådan ud: <html> <head> </head> <body> </body> </html> Hvis den gør det, har du lavet dit første HTML-dokument. En usandsynlig kedelige side og sikkert ikke det du har drømt om, men alligevel et slags websted. For det du har lavet, er grundskabelonen for alle dine fremtidige sider....!? Ja okay, lad os lave en rigtig side.

7 Din side har altså to dele: et hoved og en krop. I 'hovedet' kan du gemme oplysninger om siden, mens 'kroppen' indholder det, der udfører siden. Hvis du vil oplyse om sidens titel, ville det derfor være naturligt at gøre det i 'hovedet'. Taget for en titel er <title>: <title>min første side</title> Som lovet skal vi have siden til at skriv "Dette er min første side". Det er altså det, der skal udføres, og hører derfor til i 'kroppen' (body'en): <p>dette er min første hjemmeside</p> P'et i <p>-taget står for "Paragraph", som oversat betyder "afsnit", og det er jo præcis hvad det er. Sådan skulle det gerne se ud: <html> <head> <title>min første side</title> </head> <body> <p>dette er min første side</p> </body> </html> Færdigt arbejde. Du har lavet din første rigtige side! Nu skal den bare gemmes, så den kan åbnes i din browser. For nemheds skyld nøjes vi i første omgang med at gemme siden på din egen computer og ikke på Internettet: Vælg "Save As..." ("Gem som...") under "File" i Notepad. Vælg "All Files" ("Alle Filer") i boksen "Save as type" ("Gem som type") (Dette er meget vigtigt, da du ellers gemmer din side som et tekstdokument og ikke som en HTML-fil). Gem nu din side som f.eks. "side1.html" (endelsen ".html" fortæller, at det er en HTML-fil, men endelsen ".htm" giver det samme resultat, så du kan selv bestemme, hvilken endelse du vil bruge. Selv bruger jeg ".htm"). Gå nu over i det ekstra browservindue: Vælg "Open" ("Åben") under "File" ("Fil") I boksen der kommer til syne klikkes på "Browse" ("Gennemse") Find nu din side og åben den. Tillykke! Nu skulle der meget gerne stå "Dette er min første side" i din browser.

8 Lektion 5: Hvad du har lært Den eneste måde at lære HTML, er at prøve sig frem - du kan hverken ødelægge din computer eller Internettet. Hvad skal det nu betyde? Ingen bliver dygtig til at lave hjemmesider ved at lave de eksempler, der er givet her i tutorialen. I stedet må du selv ud på det dybe vand og stå på egne ben (...måske ikke). Og faktisk kan du allerede lave meget: Start altid med den grundskabelon du lavede i det forrige modul: <html> <head> </head> <body> </body> </html> I princippet er det ligegyldig, hvordan du sætter din HTML op, men for at bevare overblikket kan det kraftigt anbefales, at du altid sætte siderne pænt og overskueligt med linieskift og indryk (brug tabulator-tasten), ligesom i ovenstående eksempel. I head'eren bør du altid skrive en titel: <title>titel</title>. Hvis du ligger mærke til det, bliver titlen på en side vist øverst til venstre i din browser: Titlen bruges også af søgemaskiner som f.eks. Google, når de indekserer dit website og vises i søgeresultatet. I body'en skriver du sidens egentlige indhold. Til dette brug kender du allerede en række tags: <p>bruges ved afsnit. Når du starter et nyt afsnit hopper du automatisk to linjer ned.</p> <b>skriver teksten med fed.</b> <h1>overskrift</h1> <h2>underoverskrift</h2> <h3>mindre underoverskrift</h3> Hvad er det, du vil have mig til? Prøv nu selv at sætte et par sider op. Lav f.eks. en side med titel, overskrift, lidt tekst, en underoverskrift og lidt mere tekst. Det er helt okay at kigge på denne side, mens du laver den første side, men prøv senere om ikke du kan lave en "uden at kigge efter".

9 Lektion 6: Lidt flere tags Fik du lavet din egen side? Ellers er her et eksempel: <html> <head> <title>min side</title> </head> <body> <h1>en overskrift</h1> <p>tekst, tekst tekst, tekst</p> <h2>underoverskrift</h2> <p>tekst, tekst tekst, tekst</p> </body> </html> Hvad så nu? Nu er det tid til at lære 8 nye tags. På samme måde som du laver din tekst fed med <b>, kan du sætte din tekst i kursiv med <i>. "i" er en forkortelse for "italic" (engelsk for "kursiv"). Eksempel 1: <i>dette skal stå i kursiv</i> Vil se sådan ud i browseren: Dette skal stå i kursiv Med <small> ("lille") kan du gøre din tekst mindre: Eksempel 2: <small>dette skal være småt</small> Vil se sådan ud i browseren: Dette skal være småt

10 Kan jeg bruge to typer tags samtidig? Du kan sagtens bruge flere typer tags på samme tid, bare du undgår overlappende tags. Dette er bedst illustreret med et eksempel: Eksempel 3: Hvis du vil skrive en tekst med fed og i kursiv, skal det gøres sådan: <b><i>tekst i fed og kursiv</i></b> Og IKKE sådan: <b><i>tekst i fed og kursiv</b></i> Forskellen er, at jeg i det første eksempel lukker det tag, jeg har åbnet først, til sidst. På den måde undgår jeg at forvirre både mig selv og browseren. Hvad med de sidste 6 tags? Kan du huske, at jeg i lektion 4 fortalte, at der findes tags, der åbnes og lukkes i samme tag. Disse tags indeholder kommandoer, der ikke er knyttet til et specielt stykke tekst, men er en enkeltstående kommando. Et eksempel på et sådan tag er <br />, som skaber et tvunget linieskift: Eksempel 4: Lidt tekst <br />og lidt mere tekst på en ny linie Vil altså se sådan ud i browseren: Lidt tekst og lidt mere tekst på en ny linie Bemærk at der er indsat et mellemrum og en skråstreg til siden i taget, på den måde åbnes og lukkes det på samme tid. I princippet kunne man også skrive <br></br>, men der er jo ingen grund til at gøre det mere kompliceret. Et andet tag, der også åbnes og lukkes i samme tag, er <hr />, som bruges til at tegne en horisontal streg. "hr" står for "horizontal rule" = "horizontal streg" (jo, "rule" kan godt betyde "streg"): Eksempel 5: <hr /> Vil altså se sådan ud i browseren:

11 Et tag, hvor der både skal bruges et åbnings- og et lukningstag (som der oftest skal), er <blockquote> ("citat-blok"). Taget laver et indryk i din tekst: Eksempel 6: <p>pludselig pegede Bilbo:</p> <blockquote><p>der er den gamle drossel igen!</p></blockquote> Vil altså se sådan ud i browseren: Pludselig pegede Bilbo: Der er den gamle drossel igen! En anden måde at lave et indryk på, er ved at bruge <ul>: "unordered list", hvilket sådan cirka kan oversættes til "liste uden rækkefølge". Eller <ol>: "ordered list" = "liste med rækkefølge". Til at lave punkter i listen bruges <li> ("list item" = "listepunkt"). Forvirret? Se eksemplerne: Eksempel 7: <ul> <li>her står punkt A</li> <li>her står punkt B</li> </ul> Vil se sådan ud i browseren: Her står punkt A Her står punkt B Eksempel 8: <ol> <li>her står punkt et</li> <li>her står punkt to</li> </ol> Vil se sådan ud i browseren: 1. Her står punkt et 2. Her står punkt to Puha, var det alt? Det var alt for nu. Prøv nu igen at lave dine egne sider, hvor du bruger nogle af de 8 nye tags: <i>kursiv</i> <small>mindre tekst</small> <br /> linieskrift <hr /> Horisontal linie <blockquote>indrykning</blockquote> <ul>liste<ul> <ol>ordnet Liste<ol> <li>listepunkt</li>

12 Lektion 7: Attributter Udover at et tag i sig selv er en kommando, kan du også indsætte ekstra information i en række tags. Undskyld, kan jeg lige få den én gang til? Et tag er, som du nok husker, en kommando til browseren (f.eks. er <br /> en kommando om at lave et linieskift). I visse tags kan du præcisere kommandoen ved at knytte mere information til kommandoen inde i selve taget. Sådanne informationer kaldes attributter. Hvad skal jeg bruge det til? Der findes mange forskellige attributter. Den første attribut du skal stifte bekendskab med er style. Med style-attributten kan du føje layout til dine sider - f.eks. en baggrundsfarve: Eksempel 1: <html> <head> </head> <body style="background-color:#ff0000;"> </body> </html> Vil i browseren være en helt rød side ("background-color" betyder "baggrundsfarve"). Prøv selv. Og hvordan var det lige siden blev rød? I eksemplet ovenfor satte jeg baggrundsfarven til at være "#ff0000", som er en farvekode med den tekniske betegnelse Hexadecimaltal. Til hver farve er der tilknyttet et Hexadecimaltal. Her er nogle eksempler: Hvid: #ffffff Sort: # (nuller) Rød: #ff0000 Blå: #0000ff Grøn: #00ff00 Gul: #ffff00 Et Hexadecimaltal består af et # og seks cifre eller bogstaver, og der findes flere tusinde HEXkoder, der giver hver sin farve. Det er ikke umiddelbart nemt at regne ud hvilken HEX-værdi, der er tilknyttet en bestemt farve, så besøg i stedet denne hjemmeside: I stedet kan man dog også bruge den engelske betegnelse for de mest almindelige farver (white, black, red, blue, green og yellow). Men nok om det. Lad os komme tilbage til attributterne.

13 Okay, i hvilke tags kan der benyttes attributter? Der kan bruges attributter i alle tags. Men hvilke attributter og hvor ofte er meget forskelligt. F.eks. vil man ofte indsætte attributter i <body>, for derved at give nogle ekstra informationer om en sides 'krop'. Omvendt vil man meget sjældent bruge attributter i <br />, da et linieskift normalt bare er et linieskift. Ligesom der findes mange forskellige tags, findes der også mange forskellige attributter. Nogle attributter kan kun bruges i én slags tags, andre kan bruges i mange forskellige. Nogle tags kan kun indeholde en slags attributter, andre kan indeholde mange. Det lyder måske forvirrende, men ofte vil det være de samme attributter man bruger igen og igen, og man opdager, hvor lette de er at bruge, og hvor mange muligheder de giver. Ligesom du lærer de vigtigste og mest brugte tags, lærer du også de væsentligste attributter i denne tutorial. Hvad hedder den del af taget, som ikke er attributter? Grunddelen af et tag, f.eks. p i <p>, hedder et element. Så et tag består altså af enten bare ét element (f.eks. <p>) eller af ét element og en eller flere attributter (f.eks. <h2 id="heading4">).

14 Lektion 8: Links Velkommen til lektion 8. I denne lektion lærer du at lave links mellem sider. Hvad skal jeg bruge? Til at lave links skal du bruge det, du altid bruger når du koder HTML: et tag. Et simpelt lille tag med ét element og én attribut, og du kan linke til alt og alle. Her er et eksempel på hvordan et link til html.dk ville se ud: Eksempel 1: <a href="http://www.html.dk">her er et link til html.dk</a> Ville se sådan ud i browseren: Her er et link til html.dk Elementet a står for "anchor", som er engelsk for "anker". Attributten href er en forkortelse af " Hypertext REFerence", hvilket betyder "Det er her linket går til" (sådan cirka). href sættes lig "http://www.html.dk", hvilket er den fulde adresse på html.dk, og kaldes en URL (Uniform Resource Locator) (bemærk "http://", der også skal medtages). Sætningen "Her er et link til html.dk" er det der ses i browseren som et link. Husk at lukke taget med et </a>. Hvad med links mellem mine egne sider Hvis du linker mellem sider der deler placering, behøver du ikke skrive hele adressen (URL'en). Hvis du f.eks. har lavet to sider (side1.htm & side2.htm) og gemt dem i samme folder (f.eks. under "Dokumenter" på harddisken), kan du linke fra den ene side til den anden med kun navnet på siden. Et link fra side1.htm til side2.htm ville derfor se sådan ud: Eksempel 2: <a href="side2.htm">et link til side 2</a> Ligger side 2 i en underfolder (navngivet "underfolder"), kan linket se sådan ud: Eksempel 3: <a href="underfolder/side2.htm">et link til side 2</a> Et link den anden vej fra side 2 (i underfolderen) til side 1 vil da se sådan ud: Eksempel 4: <a href="../side1.htm">et link til side 1</a> "../side1.htm" gør at der hoppes et niveau tilbage før der kigges efter filen. Man kan også hoppe to niveauer tilbage, så ser det sådan ud: "../../side1.htm". Forstod du systemet? Ellers kan du selvfølgelig altid bruge den fulde adresse (URL'en).

15 Og hvad med links internt på en side Vil man have links internt på sine sider, kan det også sagtens lade sig gøre. F.eks. en indholdsfortegnelse øverst med links til hvert afsnit nedenfor. Du skal blot bruge attributten id. Med id-attributten kan du give tag en unik identifikation. Eksempel 5: <h1 id="overskrift1">overskrift 1</h1> Du kan nu linke til det specifikke tag. I linket skrives blot et "#" (så ved browseren at den skal blive på samme side) efterfulgt af det id du vil linke til: Eksempel 6: <html> <head> </head> <body> <p><a href="#overskrift1">link til overskrift 1</a></p> <p><a href="#overskrift2">link til overskrift 2</a></p> <h1 id="overskrift1">overskrift 1</h1> <p>tekst tekst tekst tekst</p> <h1 id="overskrift2">overskrift 2</h1> <p>tekst tekst tekst tekst</p> </body> </html> Vil se sådan ud i browseren: Link til overskrift 1 Link til overskrift 2 Overskrift 1 Tekst tekst tekst tekst Overskrift 2 Tekst tekst tekst tekst

16 Kan man også linke til en adresse? Ja, man kan godt linke til en adresse. Måden at gøre det på er den samme, som når du linker til en side: Eksempel 7: <a en til html.dk</a> Vil se sådan ud i browseren: Send en til html.dk Forskellen er, at du i stedet for at skrive adressen på en side, skriver et "mailto:" efterfulgt af adresse. Når du klikker på linket, åbner du automatisk dit program med en ny besked adresseret til Denne funktion vil dog kun virke, hvis der er installeret et program på computeren. Prøv. Er der flere attributter, jeg bør kende? For at lave et link skal du altid bruge href. Herudover kan du bl.a. også sætte en titel på dit link: Eksempel 8: <a href="http://www.html.dk" title="link til html.dk">her er et link til html.dk</a> Ville se sådan ud i browseren: Her er et link til html.dk Attributten title kan bruges til at skrive et kort beskrivelse af linket. Hvis du - uden at klikke - holder musen henover linket, vil du se at teksten "Link til html.dk" kommer frem.

17 Lektion 9: Indsættelse af billeder Ville det ikke være lækkert, hvis man kunne indsætte et billede af Richard Ragnvald lige midt på sin side? Og det kan man faktisk! Men er det ikke drøn anstrengende? Jo, men til gengæld er det ret nemt. Alt du skal bruge er som sædvanligt et tag: Eksempel 1: <img src="ragnvald.jpg" /> Vil i browseren se sådan ud: img er et element og en forkortelse af "image" ("billede" på dansk). src er en attribut og en forkortelse af "source" ("kilde"). Det virker jo meget logisk: Først fortæller man browseren, at man ønsker at indsætte et billede (img) og dernæst hvor det er placeret (src). Læg mærke at img åbnes og lukkes i samme tag - ligesom med <br /> er der tale om en kommando, der ikke er knyttet til et stykke tekst. "ragnvald.jpg" er navnet på det billede, du ønsker at indsætte på din side. ".jpg" er den filtype, dit billede er gemt i (på samme måde som ".htm" fortæller at en fil er et HTML-dokument). Der findes tre billedtyper, man kan indsætte på sine sider: GIF (Graphics Interchange Format) JPG eller JPEG (Joint Photographic Equipment Group) PNG (Portable Network Graphics) GIF-billeder er bedst at bruge til tegninger, mens JPEG-billeder er bedst til fotografier. Dette skyldes to ting. For det første kan GIF-billeder kun bestå af 256 farver, mens JPEG-billeder kan indeholde millioner af farver. For det andet er GIF-formatet bedst til at komprimere enkle billeder, mens JPEG-formatet er bedre til de mere komplicerede billeder (jo mindre dine billeder fylder, jo hurtigere bliver din side indlæst i browseren - og der findes ikke noget mere irriterende end unødvendige 'tunge' sider, når man sidder på en langsom forbindelse).

18 Traditionelt har man primært brugt GIF- og JPEG-formatet, men på det seneste er også PNGformatet blevet mere populært - især på bekostning af GIF-billeder. PNG indeholder på mange måder det bedste fra både JPEG- og GIF-formatet: millioner af farver og effektiv komprimering. Hvor får jeg nogle andre billeder fra? For at lave din egne billeder skal du have et tegneprogram. Et godt tegneprogram er et af de vigtigste redskaber til at lave gode hjemmesider. Desværre er der ikke inkluderet et godt tegneprogram i Windows. Du kan derfor med fordel anskaffe dig enten Paint Shop Pro eller PhotoShop (to af de bedste tegneprogrammer jeg kender). Men som lovet er det dog ikke nødvendigt med fancy og dyre programmer for at gennemføre denne tutorial. Du kan nemlig downloade alle billeder på Internettet uden problemer (pas dog på copyrights!). Her er en beskrivelse af, hvordan du gør: Klik på det ønskede billede med højre museknap Vælg "Save picture as..." ("Gem billede som...") i menuen der kommer frem Vælg derefter en placering til billedet på harddisken og tryk "Save" ("Gem") Gør dette med nedenstående billede af html.dk's logo og gem det på harddisken samme sted, som du har dine hjemmesider til at ligge (læg mærke til at logoet er gemt som en GIF-fil: logo.gif): Du kan nu indsætte billedet på en af din egne sider. Prøv selv. Er der mere? Der er et par ting mere, der er handy at vide om billeder. Den ene er, at på samme måde som du kan linke til sider i en underfolder - som du lærte i forrige lektion - kan du også hente dine billeder fra andre foldere - eller endda andre websites: Eksempel 2: <img src="billeder/logo.gif" /> Eksempel 3: <img src="http://www.html.dk/logo.gif" /> Og så lige en anden ting: Billeder kan godt være links: Eksempel 4: <a href="http://www.html.dk"><img src="logo.gif" /></a> Vil se sådan ud i browseren (prøv at klik på billedet):

19 Er der flere attributter, jeg bør kende? Du skal selvfølgelig altid bruge attributten src, der fortæller, hvor billedet er placeret. Derudover er der ligesom ved links en række andre attributter, der kan være nyttige ved indsættelse af billeder. Attributten alt bruges til at give en alternativ beskrivelse af billedet, hvis det af en eller grund ikke vises for brugeren. Dette er især er vigtigt for blinde/synshandicappede og hvis siden loades langsomt eller slet ikke vises. Derfor bør attributten alt altid bruges: Eksempel 5: <img src="logo.gif" alt="logo for html.dk" /> Ligesom ved links kan attributten title bruges til at skrive et kort beskrivelse af billedet: Eksempel 6: <img src="logo.gif" title="html.dk's logo" /> Ville se sådan ud i browseren: Hvis du, uden at klikke, holder musen henover linket, vil du se at teksten "html.dk's logo" kommer frem.

20 To andre attributter er width og height: Eksempel 7: <img src="logo.gif" width="100" height="100" /> Ville se sådan ud i browseren: width (engelsk for "bredde") og height (engelsk for "højde") kan bruges til at angive et billedes højde og bredde. Værdien der bruges til at angive width og height, er pixels. Pixels er også den måleenhed, der bruges til at angive skærmopløsning. I forhold til f.eks. centimeter er pixels en relativ måleenhed der afhænger af skærmopløsningen - hos en bruger med høj skærmopløsning vil 25 pixels måske svare til en centimeter på skærmen, mens de samme 25 pixel ved en lav skærmopløsning er 1½ centimeter på skærmen. Hvis du ikke angiver width og height, bliver billedet bare indsat med den størrelse det faktisk har, men med width og height kan du manipulere med størrelsen: Eksempel 8: <img src="logo.gif" width="100" height="25" /> Ville se sådan ud i browseren: Den reelle størrelse på billedet forbliver dog den samme, og det tager den samme tid at hente billedet ned. Derfor bør du aldrig gøre et billede mindre ved at bruge width og height, men i stedet formindske det i dit tegneprogram, og derved gøre dine sider lettere og hurtigere. Du kan evt. hente det gratis program XnView hvor du nemt og hurtigt kan ændre billedstørrelse endda på flere billeder samtidigt!!! Alligevel er width og height en god idé at bruge, da browseren på den måde på forhånd ved, hvor meget plads billedet vil tage, og kan sætte din side pænt op allerede inden billedet er hentet ned. Ikke flere billeder af hverken Richard eller vores logo i denne omgang... Du er nu klar til at tage hul på Tabeller!!! men det bliver en anden gang

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

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

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

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

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

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

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

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

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

Læs mere

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

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

Billedbehandling Pixlr.com Side 1

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

Læs mere

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING

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

Læs mere

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. oktober, 2013 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13

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

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. september, 2012 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 8 2. Sider... 10 2.a Opret side...

Læs mere

GRAFISK WORKFLOW. 1 Grafisk workflow

GRAFISK WORKFLOW. 1 Grafisk workflow GRAFISK WORKFLOW 1 Opgavebeskrivelse I forbindelse med et nyt online koncept Web in a box skulle jeg lave en Photoshop-skabelon, der kan eksportere materiale til en hjemmeside automatisk. Selve konceptet

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

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 13. marts, 2014 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13 2.b.

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

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

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

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

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

Læs mere

Introduktion til billeddatabasen

Introduktion til billeddatabasen Introduktion til billeddatabasen Colourbox.dk Colourbox.dk er den billeddatabase som Odense Kommune har købt licens til. Det er vigtigt at bemærke, at der ikke er ubegrænset download af billeder. I materialet

Læs mere

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb Dokumentation Workflow Grafisk produktion Trine Alexandersen 1. hovedforløb Jeg har valgt at vise min egen hjemmeside som workflow. Siden er min e-portfolio som skal vise hvad jeg lærer under min uddannelse

Læs mere

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

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

Læs mere

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

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

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

ViKoSys. Virksomheds Kontakt System

ViKoSys. Virksomheds Kontakt System ViKoSys Virksomheds Kontakt System 1 Hvad er det? Virksomheds Kontakt System er udviklet som et hjælpeværkstøj til iværksættere og andre virksomheder som gerne vil have et værktøj hvor de kan finde og

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

Kom godt i gang med I-bogen

Kom godt i gang med I-bogen Kom godt i gang med I-bogen At åbne bogen Det allerførste, du skal gøre, for at kunne arbejde med i-bogen, er at aktivere den. Det gøres ved at oprette en konto på systime.dk og derefter aktivere bogen

Læs mere

Bliv opdaget på Internettet! - 10 gode råd til at optimere din hjemmeside til søgemaskiner

Bliv opdaget på Internettet! - 10 gode råd til at optimere din hjemmeside til søgemaskiner Bliv opdaget på Internettet! - 10 gode råd til at optimere din hjemmeside til søgemaskiner Af Henrik Bro og Martin T. Hansen I har måske allerede en flot, og informativ hjemmeside. Og alle jeres kursister

Læs mere

Kom godt i gang. Sitecore Foundry maj Version 1.1

Kom godt i gang. Sitecore Foundry maj Version 1.1 Sitecore Foundry 4 Kom godt i gang 26. maj 2014 - Version 1.1 Pentia A/S Store Kongensgade 66, Baghuset 1264 København K Telefon: 7023 3330 E-mail: info@foreningssite.dk Indholdsfortegnelse Indledning...

Læs mere

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

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

Læs mere

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

Lav hjemmesider i StarOffice 6.0

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

Læs mere

Mindmapping med FreeMind. En Introduktion til programmet FreeMind

Mindmapping med FreeMind. En Introduktion til programmet FreeMind En Introduktion til programmet FreeMind Jan Leffers 2006 Indholdsfortegnelse Indledning...2 Hvad er et mindmap...2 Mindmap guidelines...3 Download og installation...3 Kom hurtigt i gang...4 Det første

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 upload af ruter og interessepunkter på Endomondo

Guide til upload af ruter og interessepunkter på Endomondo Guide til upload af ruter og interessepunkter på Endomondo Denne guide indeholder følgende emner: A. Rettigheder B. Oprettelse af profil på Endomondo C. Oprettelse af selve ruten D. Redigering af oprettet

Læs mere

Dokumenter. Sider. efact CMS manual v. 1.0

Dokumenter. Sider. efact CMS manual v. 1.0 Dokumenter Dokumenter er stedet, hvor du opretter og vedligeholder dit indhold på hjemmesiden. Der kan uploades filer og billeder til brug på hjemmesiden, samt oprettes sider hvis indhold du redigerer

Læs mere

21-05-2008 Side 1 af 7

21-05-2008 Side 1 af 7 -05-008 Side af 7 Grundlæggende funktioner i billedbehandling. NB! Arbejd på en kopi af dit billede, så du altid har det oprindelige liggende, hvis noget skulle gå galt.. Ændring af billedstørrelse i IrfanView

Læs mere

Dato: Januar 2010. Billeder til web. Photoshop elements ver. 6.0. E-mail: info@cmshouse.dk. CMShouse Boulevarden 17 7100 Vejle www.cmshouse.

Dato: Januar 2010. Billeder til web. Photoshop elements ver. 6.0. E-mail: info@cmshouse.dk. CMShouse Boulevarden 17 7100 Vejle www.cmshouse. Billeder til web Dato: Januar 2010 Photoshop elements ver. 6.0 E-mail: info@cmshouse.dk CMShouse Boulevarden 17 7100 Vejle www.cmshouse.dk Materiale Generelt Materiale Dette materiale er udviklet og bliver

Læs mere

Fremstilling af en hjemmeside

Fremstilling af en hjemmeside Fremstilling af en hjemmeside Du kan vise en hjemmeside på to måder. Enten ved at lade din computer virke som en server, eller ved at købe dig et såkaldt webhotel. Dette er en nem måde, og det er ikke

Læs mere

Cecilie Maria Nielsen, Mathias Fornitz Eriksen og Martin Arnetoft klasse 1.6 07-05-2010

Cecilie Maria Nielsen, Mathias Fornitz Eriksen og Martin Arnetoft klasse 1.6 07-05-2010 ROSKILDE TEKNISKE GYMNASIUM Eksamensopgave Kommunikation/it Cecilie Maria Nielsen, Mathias Fornitz Eriksen og Martin Arnetoft klasse 1.6 07-05-2010 Vi har valgt at beskæftige os med opgave 1 fra oplæget.

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

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

Vejledning til brug af pileforeningen.dk for redaktører.

Vejledning til brug af pileforeningen.dk for redaktører. Vejledning til brug af pileforeningen.dk for redaktører. Log in: Gå ind på: http://pileforeningen.dk Tryk på Login for medlemmer Brugernavn: contentmanager. Password: 1234 Når du er logget ind kan du se

Læs mere

Gem dine dokumenter i BON s Content Management System (CMS)

Gem dine dokumenter i BON s Content Management System (CMS) 24. august 2007 Gem dine dokumenter i BON s Content Management System (CMS) INDHOLDSFORTEGNELSE 1. Indledning... 2 2. Se indholdet i dit Content Management System... 3 3. Tilgå dokumenterne i My Content

Læs mere

Indhold. 1 Indledning... 3. 1.1 Kompatible browsere... 3. 2 Log ind i Umbraco... 3. 3 Content-delen... 4. 3.1 Indholdstræet... 4

Indhold. 1 Indledning... 3. 1.1 Kompatible browsere... 3. 2 Log ind i Umbraco... 3. 3 Content-delen... 4. 3.1 Indholdstræet... 4 Indhold 1 Indledning... 3 1.1 Kompatible browsere... 3 2 Log ind i Umbraco... 3 3 Content-delen... 4 3.1 Indholdstræet... 4 3.2 Ændring af indhold... 5 3.3 Tilføjelse af en side/sektion... 6 3.4. At arbejde

Læs mere

Redigering af Nyheder

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

Læs mere

Aptana editor til MAC og Windows

Aptana editor til MAC og Windows 1 Aptana editor til MAC og Windows http://aptana.com/products/studio3/download For at downloade Mac versionen skal du klikke på : Customize Your Download og der efter klikke på MAC OS X. Indtast navn og

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

portfolio GRAFISK WORKFLOW

portfolio GRAFISK WORKFLOW Grafisk Workflow Opgaven Der skal laves hjemmeside til et lille privat bageri. Kunden ønsker et overskueligt site. Hjemmesiden skal kort og godt fortælle om Skejby Centrets Bageri og deres produkter og

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

Datalogi HTML Aarhus Katedralskole

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

Læs mere

Introduktion til billedbehandling med IrfanView

Introduktion til billedbehandling med IrfanView Introduktion til billedbehandling med IrfanView I takt med at digitalkameraer bliver billigere og efterhånden snart er hvermands eje, stiger behovet også for at kunne behandle sine billeder på en nem,

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

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

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

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1 GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1 GRAFISK WORKFLOW DOKUMENTATION OPGAVEN Denne opgave er lavet som en fiktiv opgave. Opgaven er lavet for et fiktivt firma, som tilbyder personlig fitness træning.

Læs mere

Mindmaps med Freemind

Mindmaps med Freemind Mindmaps med Freemind Et mindmap kan oversættes til at være et mentalt kort over et bestemt emne. Det kan bruges til at sætte struktur på resultatet af en brainstorm eller give overblik over et bestemt

Læs mere

Indhold. Jennie Mathiasen. Google Drev

Indhold. Jennie Mathiasen. Google Drev Indhold Opret Googlekonto... 2 Åbning af Google Drev... 5 Værktøjet Ny... 8 Værktøjet Mappe... 8 Værktøjet Upload fil... 10 Værktøjet Google Docs... 13 Værktøjet Google Sheets... 16 Værktøjet Google Slides...

Læs mere

The GIMP. The GIMP til windows kan hentes fra siden: http://gimp win.sourceforge.net/stable.html

The GIMP. The GIMP til windows kan hentes fra siden: http://gimp win.sourceforge.net/stable.html The GIMP The GIMP er et gratis grafikprogram som kan hentes på nettet. Alle nye opdateringer af programmet bliver lagt på nettet, så snart de er færdige. Tilbehør (bl.a. særlige funktioner) kan også hentes

Læs mere

Martin Geisler. Uge 49, 2001

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

Læs mere

Webmail Gmail Generelt Side 1

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

Læs mere

Grundforløbsprøve Projektbeskrivelse

Grundforløbsprøve Projektbeskrivelse Grundforløbsprøve Projektbeskrivelse Webintegrator Thomas á Rógvi 221191-2505 Indholdsfortegnelse Opgaven... 3 Tidsplan... 4 Målgruppe... 5 Layout... 6 Design... 7 Fonte... 7 Browser... 7 Bilag... 8 Det

Læs mere

Indsæt og opret et billede på én gang

Indsæt og opret et billede på én gang Indsæt og opret et billede på én gang Du kan nu oprette og indsætte billeder på forside og tekst-sider og felter i én arbejdsgang altså uden at først oprette dem i Mediearkivet. Billeder kan indsættes

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

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

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

Læs mere

Google Apps. Lær at oprette, organisere, dele og slette dokumenter. Udarbejdet af PLC, version 2013!!!!!!! Side 1 af 9

Google Apps. Lær at oprette, organisere, dele og slette dokumenter. Udarbejdet af PLC, version 2013!!!!!!! Side 1 af 9 Lær at oprette, organisere, dele og slette dokumenter. Udarbejdet af PLC, version 2013!!!!!!! Side 1 af 9 Arbejde i faner Google Apps arbejder i faner, derfor er det vigtigt, du er bekendt med det. Mappen

Læs mere

Mit grafiske workflow inkluderer:

Mit grafiske workflow inkluderer: GRAFISK WORKFLOW Opgave: Opgaven var at producere en bog og et website med temaet stilhistorie. Jeg har valgt at beskrive mit grafiske workflow i produktionen af websitet. Kravene var, at der skulle være

Læs mere

Projekt i Programmering C Menu til hjemmeside.

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

Læs mere

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

Danhost Webshop. Bliv fundet på Google

Danhost Webshop. Bliv fundet på Google Danhost Webshop Bliv fundet på Google SEO - Søgemaskineoptimering Når du arbejder med SEO, er det med henblik på, at din hjemmeside eller webshop skal dukke op i søgeresultaterne på f.eks. Google når en

Læs mere

Opsætningsvejledning efter opdatering (ghostning) af hybriderne

Opsætningsvejledning efter opdatering (ghostning) af hybriderne Opsætningsvejledning efter opdatering (ghostning) af hybriderne Indholdsfortegnelse Login til Windows... 2 Aktivering af Office 365... 3 Kom i gang med Office 365 og OneDrive for Business... 4 Opsætning

Læs mere

Hermed vejledning i hvordan man lægger billeder ind til brug for hjemmesiden.

Hermed vejledning i hvordan man lægger billeder ind til brug for hjemmesiden. Hermed vejledning i hvordan man lægger billeder ind til brug for hjemmesiden. Manualen er delvist hentet fra en manual Ølstykke IF har lavet til brug for deres hjemmeside Upload af billede For at kunne

Læs mere

Naja Schlüter Roskilde Tekniske Gymnasium 26/ Interessentanalyse

Naja Schlüter Roskilde Tekniske Gymnasium 26/ Interessentanalyse Interessentanalyse Jeg fik til opgave at skulle lave en ny studieweb som er min egen personlige side. Min studieweb skal bruges til lidt information og så vil jeg løbende igennem de to år jeg har igen

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

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

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

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

Læs mere

Dokumentation. Karen-Louise Fejerskov

Dokumentation. Karen-Louise Fejerskov Dokumentation Grafisk Workflow Et af produkterne, jeg skulle lave, var et redesign af FreQuence s info hjemmeside. A B Punkt 1 Ansvar: Jeg har selv stået for opsætningen af hjemmeside og selv bestemt,

Læs mere

Wordpress 2.7. Manual for redaktør/blogger Webwoman.dk. Denne version er fra 9. marts 2009. Må frit kopieres og distribueres i original version

Wordpress 2.7. Manual for redaktør/blogger Webwoman.dk. Denne version er fra 9. marts 2009. Må frit kopieres og distribueres i original version Wordpress 2.7 Manual for redaktør/blogger Webwoman.dk Denne version er fra Må frit kopieres og distribueres i original version 2 Indhold Gennemgående udtryk, du bør kende... 4 Log ind på din hjemmeside/blog...

Læs mere

Rapport Undervisningsmateriale.

Rapport Undervisningsmateriale. Skrevet af Morten & Jacob A. 1.5 HTX Roskilde 2011 Side 1 Rapport Undervisningsmateriale. Arbejdsgruppen bestod af: Morten, Jacob A. fra 1.5. Dato: 6. maj 2011 Skrevet af: Morten & Jacob A. Fag: Kom/IT.

Læs mere

Karens vejledning til WordPress, september 2014 1

Karens vejledning til WordPress, september 2014 1 Karens vejledning til WordPress, september 2014 1 Karens WordPress vejledning september 2014 INDHOLD Hvad er WordPress 1 Generelt om WordPress 2 Frontend og backend 2 Skrive en blog-tekst (indlæg/post)

Læs mere

Sabine Puk Sørensen Svendeprøve portfolio

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

Læs mere

I gang med Adobe Muse CC

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

Læs mere

En simpel hjemmeside med HTML. Kom i gang med FrontPage

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

Læs mere

Lav din egen hjemmeside/blog. Dag 1 22-10-2015. Agenda d. 25. oktober 2015. Pc ere på nettet. Præsentation. Hvad er WordPress? Hvad er WordPress?

Lav din egen hjemmeside/blog. Dag 1 22-10-2015. Agenda d. 25. oktober 2015. Pc ere på nettet. Præsentation. Hvad er WordPress? Hvad er WordPress? Agenda d. 25. oktober 2015 Lav din egen hjemmeside/blog Dag 1 Præsentation af underviser og deltagere Pc erepå nettet Hvad er WordPress? Og hvad er forskellen på en blog og en hjemmeside Hej verden Kvik

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

Modul 02, Harddisken 1

Modul 02, Harddisken 1 60+Bornholm Videregående pc-vejledning Modul 02, Harddisken 1 Harddisken er dit lager Alt, hvad du arbejder med på din pc, skal ligge på en (hard)disk (eller på en cd/dvd eller USBstick men de opfattes

Læs mere

Indhold. Side 1 af 6. Internet Explorer 7 Internet Explorer 7

Indhold. Side 1 af 6. Internet Explorer 7 Internet Explorer 7 Internet Explorer 7 Side 1 af 6 Indhold Internet Explorer 7...1 Indhold...1 Nye ting i Internet Explorer 7...2 Nyt udseende...2 Faneblade...2 Nemmere søgning...3 Nemme nyheder...3 Bedre sikkerhed...5 Understøttelse

Læs mere

Roskilde Tekniske Gymnasium. Eksamensprojekt. Programmering C niveau

Roskilde Tekniske Gymnasium. Eksamensprojekt. Programmering C niveau Roskilde Tekniske Gymnasium Eksamensprojekt Programmering C niveau Andreas Sode 09-05-2014 Indhold Eksamensprojekt Programmering C niveau... 2 Forord... 2 Indledning... 2 Problemformulering... 2 Krav til

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

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

Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco

Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Adresse: http://dinafdeling.lof.dk/ Rediger hjemmeside i Umbraco: http://dinafdeling.lof.dk/umbraco/ HUSK ingen www i adressen, skriv blot

Læs mere

Log ind i administrationspanelet

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

Læs mere

SÅDAN BRUGER DU REGNEARK INTRODUKTION

SÅDAN BRUGER DU REGNEARK INTRODUKTION SÅDAN BRUGER DU REGNEARK INTRODUKTION I vejledningen bruger vi det gratis program Calc fra OpenOffice som eksempel til at vise, hvordan man bruger nogle helt grundlæggende funktioner i regneark. De øvrige

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

1. Værktøjspaletten i Photoshop Elements.

1. Værktøjspaletten i Photoshop Elements. Introduktion til redigering af billeder i Photoshop Elements Kort om brug af billeder til hjemmesiden. Som udgangspunkt må du ALDRIG bruge billeder, som du har fundet på Google. Eneste undtagelse er bogforsider.

Læs mere