Øvelse 1, individuel øvelse billeder, links og undersider
|
|
- Jette Hald
- 8 år siden
- Visninger:
Transkript
1 Ø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 eksempel på et meget responsiv, eller rettere sagt elastisk elektronisk dokument. Det bliver responsiv i at teksten ville altid strække sig ud til vinduets bredte. For jer der gerne ville have lidt mere udfordring må i meget gerne begynde at bruge CSS til at lave om på tekst og farve. Det gør du blandt andet ved:. at lave en enkel hjemmeside at skrive din første HTML5 at tilføje et billede at lave dit første link at lave en skabelon for dine HTML5-sider, så du nemt og hurtigt kan tilføje undersider til din hjemmeside at tilføje et CV på en ny underside at opstille en punktliste at linke mellem din forside og underside at validere koden som en vigtigt afslutning i alle kodeprocesser 2. Beskrivelse I denne øvelse skal du lave en personlig hjemmeside, som bliver dit elektroniske ansigt udadtil på kurset og i øvrigt. Siden skal være tilgængelig via internettet på dit_brugernavn. Denne adresse bliver også postet på kursets hjemmeside, så alle nemt kan tjekke hinandens websider ud. Et eksempel på slutresultatet af dagens strabadser ses nedenfor. Du behøver ikke skrive din livshistorie, skriv kort det du tror kan være relevant for andre på ITU at vide om dig og som du har lyst til at fortælle om dig selv. Gør det kort og nemt at gå til.
2
3 3. Koden 3.1. Eksempel Koden til et site i HTML5 ser i sin simpleste form ud som nedenfor. Start med at læse eksemplet igennem. Du vil i kodeeksemplet kunne genkende de helt basale HTML5-elementer: <html>, der omslutter hele dokumentet <head>, der indeholder information om sitet <body>, hvor sitets indhold, som vises i browservinduet, er placeret 3.2 Opret dit HTML-dokument Åbn Notepad++ hvis du bruger PC. Er du Mac-bruger kan du benytte dig af Coda men vær opmærksom på at Coda kun er gratis i en begrænset periode. Istedet kan du bruge et gratis program som TextWrangler. Det er muligt at bruge Dreamweaver men gør det udelukkende i kodevinduet, hvis ikke du er erfaren med HTML Du skal nu kopiere koden fra afsnittet ovenfor over i Notepad++. Marker det du vil kopiere ovenfor og tryk ctrl + c. Gå derefter til Notepad og tryk ctrl + v. (Når du kopierer fra PDF-filen kan der nogle gange opstå en en fejl som udskifter almindelige citationstegn " " med venstre.og højrevendte citationstegn. Denne udskiftning medfører at din kode ikke vil validere -vær derfor opmærksom på om citationstegnene er almindelige som i koden ovenfor). I Notepad++ vælger du File og Save as. Kald filen skabelon.html. I drop-down menuen Filtype vælges Hyper Text Markup Language file (*.html;*.htm;*.shtml;*.shtm;*.xhtml). Dette er vigtigt, ellers vil siden ikke kunne vises. Placer filen på H-drevet i roden af din public_html mappe hvis du
4 arbejder på skolens computer. Arbejder du egen computer skal du bruge en ftp (sevejledningfrasidstegang) Tryk Save. (Bruger du Mac skal du på samme måde sikre dig at encoding er sat til Unicode (UTF-8) når du gemmer din tekstfil -udover det er det vigtigt at du husker at tilføje endelsen.html til dit filnavn) (Vil du vide lidt mere om Document Type Definition osv., henvises til grundbogens kap. 3) Du har nu oprettet en skabelon du kan bruge, hver gang du skal oprette en ny side. Vælg igen Save as... i Notepad++ og gem filen som index.html, så du nu både har en fil ved navn skabelon.html og en ved navn index.html. 3.3 Skriv den første HTML og tjek den i en browser Kodeeksempel: Sørg for at have index.html åben. Du skal nu gengive det kodeeksempel, du ser ovenfor, ved at skrive løs i Notepad++, men indsæt dit eget navn. Hold tungen lige i munden! Tastefejl kan give mange kvaler. Bemærk at det især er vigtigt, de forskellige tags bliver nested korrekt -altså er åbnet og lukket i den rigtige rækkefølge. Derfor er det en rigtig god idé, at du skaber overblik i koden ved at bruge linjeskift og indryk. Selvom du laver indryk/mellemrum og linjeskift, gør det ikke nogen forskel for browseren. Til gengæld er det meget nemmere for dig og andre at vende tilbage til koden senere. Husk også at gemme undervejs ved at trykke ctrl + s. Nu skal sitet tjekkes i en browser: For at se dokumentet i aktion, åbner du din favoritbrowser og indtaster adressen til dit public-drev ( -glæd dig nu over, at din første hjemmeside er i luften. Bemærk, at browsere automatisk finder og åbner index.html som standard. Havde du kaldt filen f.eks. minside.html, ville det være nødvendigt at skrive hele adressen i adressefeltet
5 ( Er der derimod ikke en index.html fil, og angiver man ikke en specifik fil, vil der dukke en oversigt over mapper og filer op i stedet Overskrifter og indhold Næste skridt er at lave to afsnit mere med tekst. Lav for eksempel en paragraf hvor du skriver lidt om dig selv og en med information om faget her. De to paragraffer skal have underoverskrifter <h2>, der passer til indholdet. Du har allerede brugt <article> til at markere det selvstændige indhold på siden, nemlig hele artiklen om dig. Hvert underafsnit er samtidig en sektion i sig selv. Husk derfor at opmarkere dem som <section>. Eksempelvis vil en artikel om frugter være indrammet af <article>, mens den specifikke artikel om banan og æble vil indrammes af <section>. Er du yderligere i tvivl om, hvordan du skal bruge <article> og <section> kan du kikke på Kodeeksempel: Gem dokumentet og se hvordan det ser ud i browseren ved at klikke F5 (mac: cmd+r), når du står i browservinduet. Husk at tjek i alle devices du ejer.
6 3.5. Tilføj billede Nu skal du tilføje et billede til din hjemmeside. Start med at oprette en mappe på dit public-drev, og kald den billeder. Find et billede af dig selv, navngiv det f.eks. dit_fornavn-dit_efternavn.jpg, og placer det i denne mappe (hvis du ikke har et billede af dig selv lige nu, kan du finde et andet, men sørg for at billedet er på inden du afleverer på bloggen, så vi kan genkende dig). Der er forskellige gode tips til navngivning af mapper og filer, hvor de vigtigste er fremhævet her. At følge disse mindsker risikoen for fejlindtastninger, giver pænere URL'er og gør det nemmere at lave links korrekte, så hav dem i baghovedet, når du arbejder med din hjemmeside.. Giv korte, men meningsfulde navne Brug kun små bogstaver Ingen æ, ø og å (eller andre mærkelige tegn) da browserne ikke kan fortolke dem ordentligt Ingen mellemrum, brug evt. bindestreg eller underscore i stedet For at indsætte et billede i koden, skal du bruge <img>-elementet. Til <img> hører som minimum de to attributter src (source) og alt (alternate). Src-attributtens tilhørende værdi angiver, hvor billedfilen ligger i forhold til det dokument, man vil placere billedet i -her altså index.html. Alt-attributtens værdi angiver derimod en beskrivende tekst til billedet, og denne er obligatorisk: <img src= sti-til-billedet alt= beskrivende-tekst /> Bemærk at <img>-elementet er ET såkaldt tomt element. Der er altså intet indhold i elementet, kun attributterne, og derfor heller intet slut-tag, men derimod et mellemrum og en skråstreg sidst i tagget, som alle tomme elementer skal have. Tilføj nu dit billede under den første paragraf, og husk at angive den korrekte sti til billedet som værdi til src-attributten og en beskrivende tekst til billedet i altattributten.
7 Gem og tjek i alle devices du ejer 3.6. Tilføj link Næste opgave er at tilføje et link på din side. Hele nettets struktur er som bekendt bygget op om links, og de findes i forskellige afskygninger:. links til eksterne hjemmesider links til interne sider på samme site (hvis man har flere sider -og jo det skal nok komme) links til et bestemt sted i samme HTML-dokument links til mail-adresser links direkte til filer. Fælles for dem alle er, at man benytter elementet <a> (anchor) med tilhørende attribut href (hypertext reference) og en værdi. Så den generiske opskrift på et link er: <a href="sted-der-skal-linkes-til">det-som-skal-klikkes-på</a> I denne opgave skal du lave et link til kursets hjemmeside, altså en ekstern hjemmeside, i den tredje paragraf, og det-som-skal-klikkes-på skal være ordene Webdesign og Webkommunikation. Kig på eksemplet nedenfor og skriv koden ind i din index.html.
8 Gem og test linket i browseren. Vær opmærksom på, at browseren automatisk vil dekorere et link med den klassiske blå farve og understregning. Dette er en default-fortolkning, som er styret af browserens indbyggede styling. Udseendet af link-teksten skal vi senere på kurset lære at ændre ved hjælp af CSS (Cascading Style Sheets) Opret din første underside Brug nu din skabelon til at oprette din første underside som skal indeholde dit CV -gem siden med et passende navn, eksempelvis cv.html [File > Save as ]. Husk tips til god navngivning nævnt tidligere i vejledningen. På denne side skal du nu skrive dit CV ind. Husk at benytte de tags, som du har lært at bruge til at mærke teksten op -fx tekstafsnit (<p>) og overskrifter (<h1>, <h2>...). vigtig tekst (<strong>), fremhævet tekst (<em>) m.v. Tænk over, at den tekst, du skriver skal læses/skimmes på nettet og ikke nærstuderes på et stykke printet papir meningen er, at den skal være en del af dit online visitkort, som giver et hurtigt overblik over, hvem du er og, hvad du kan. Det kan du bl.a. understøtte ved at strukturere teksten i korte overskuelige afsnit.
9 Koden for cv-siden ses nedenfor. Der er kun brugt h-tags og p-tags til at mærke koden op med, men man kunne f.eks. også vælge at bruge strong-tag'et til at markere årstal eller andre tekstelementer som det betydningsmæssigt giver mening at fremhæve som noget særligt i teksten. Læg også mærke til, hvordan koden er sat op i overskuelige afsnit og med tab.indrykninger som gør det nemmere at overskue koden og finde ud af hvilke dele af koden der passer til de forskellige afsnit man ser i browseren Tilføj punktopstilling For at gøre dit CV mere overskueligt kan du benytte dig af punktopstillinger f.eks. til at lave en liste med din uddannelseshistorik eller erhvervserfaring. Der er to former for punktopstillinger, du kan benytte: ordered list (ol) og unordered list (ul). For at lave dem bruger du henholdsvis <ol></ol> og <ul></ul> rundt om den tekst, der skal være i punktopstillingen. For hvert punkt i listen bruger du list item (li) ved at næste teksten mellem <li> og </li>. Formen bliver altså (her en unordered list): <ul> <li>første punkt</li> <li>andet punkt</li> </ul> En ul laver almindelige bullets som standard og en ol laver nummererede punkter. Her et eksempel på punktopstillinger i Michael Jacksons CV.
10
11 Punktopstillinger kan bruges til meget mere end blot at opstille tekst, f.eks. er de gode til menuer, da de ligesom alt andet kan styles på alle mulige spændende måder med CSS, som du vil lære senere på kurset.
12 3.9. Lav links mellem forside og underside Lige nu kan man kun finde dit CV ved at skrive URL'en i browseren, dvs. fx people/dit_brugernavn/cv.html Men det er jo ikke så smart, at man skal kende den præcise adresse inklusiv filnavnet (cv.html) for at finde dit CV, så du skal nu lave nogle links mellem den nye underside og din forside (index.html), som jo vises automatisk i browseren, når man skriver URL'en people/dit_brugernavn/ Her bruger vi igen en punktopstilling starten på en menu! Tidligere prøvede du at lave et link til et eksternt site, kursets hjemmeside. Nu skal du lave et link til en HTML-side, som hører til dit eget site. Derfor behøver du ikke at sende browseren ud på internettet med for at finde din underside. Du kan nøjes med at lave et relativt link ved at angive stien til, hvor din underside er placeret i forhold til den fil, hvor linket er i (din index-side i dette tilfælde). Det foregår altså på samme måde, som da du skulle angive stien til dit billede. For at lave et relativt link skal du bruge <a href= her_skrives_stien ></a> ligesom med eksterne links. Du kan læse om dette i kapitel 6 i bogen og i slides til denne uges forelæsning. <a href = cv.html >Mit CV</a> Vi har lagt cv.html i samme mappe som index.html derfor ser linket således ud: Så simpelt! Da vi gerne vil have linket i en simpel menu lavet med en punktopstilling, tilføjer vi: <nav> <ul> <li><a href= index.html >Forside</a></li> <li><a href= cv.html >Forside</a></li> <li><a href= >Kommende menupunkt</a></li> </ul> </nav> Læg her mærke til, at <a...></a> placeres inden i <li></li> -for linket er jo netop selve indholdet i det pågældende punkt i listen. <nav>-tagget bruges til at markere vigtig navigation som f.eks. din sides globale navigation. For at gøre det nemmere for brugeren at komme rundt på sitet, skal du selvfølgelig gentage menuen på CV undersiden. For at gøre det, brugeren ser og navigerer igennem konsistent, benytter vi præcis samme menu på alle sider. Her kan du se et eksempel fra Michael Jacksons hjemmeside.
13
14 4.0 -Validering af site Til sidst skal du lære at validere dit site vha. validator.w3.org, så du kan være sikker på, det overholder HTML5 standarden, som er defineret af World Wide Web Consortium (W3C). Det er nu, det kommer til at give mere mening med den ekstra kode, vi har i dokumentets top, da den videregiver alle de nødvendige informationer om f.eks. standard, doctype og encoding til validatoren. Gå ind på validator.w3.org og indtast URLen til den side, du vil validere ( dit_brugernavn/) Klik på knappen Check. Sitet tjekker din kode og vender oftest tilbage med en rød side og teksten "Errors found while checking this document as HTML5!". Nedenunder vises en en liste over de fejl, den mener at kunne finde, og så må du starte fra en ende af og rette fejlene. Hvorfor validerer min side ikke? Det kan godt i starten virke lidt overvældende, hvis man har mange fejl meddelelser, men tager man en dyb indånding, kan man som regel godt tyde ud af fejlmeddelelserne, hvad der er galt. Og så skal man huske på, at en fejl øverst i dokumentet sagtens kan medføre 20 fejl længere nede. Når den øverste fejl er rettet, forsvinder de andre muligvis af sig selv. Et meget godt billede af HTML5 er som perler på en snor, dvs. når et tag bliver åbnet og ikke lukket igen eller lukket forkert, så vil browseren blive ved med at lede efter det rigtige lukke-tag, og alt indimellem fortolkes måske forkert. Er koden derimod i orden efter standarderne (enten i første hug eller efter rettelser) vil validatoren vise en grøn tillykke-side med teksten "This document was successfully checked as HTML5!". Er koden valideret korrekt, kan man nederst på denne grønne side se to små ikoner. Når din side er valideret korrekt Når det er lykkedes dig at få valideret din side korrekt, skal du kopiere adressen fra linket nederst på validator-siden og indsætte det som et link (<a>) i dine html-filer. 4.1 Aflevering Din deadline for aflevering er onsdag 11 sept før midnat. Du har altså en uge til at poste din hjemmesides link ( på kursus-bloggen, på den underside der hører til din hjælpelærer. Du poster bare linket som en kommentar. Af din aflevering skal det være synligt, at du har været igennem denne øvelse. Det betyder, at:. Du har oprettet tre HTML-sider, lagt dem på ITU s servere og postet en fungerende URL på din hjælpelærers blogside til index.html.
15 Du har tilføjet et billede af dig selv. Du har tilføjet fungerende links i et tekstafsnit. Sitet har mindst to sider -et CV og en forside. Der er indsat links mellem de to sider -altså mellem index.html og cv.html Din HTML-kode er udarbejdet som HTML5 og validerer i overensstemmelse med W3C s standarder.
Introduktion til HTML5: Tekst, punktlister, billeder, links og undersider
Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 1, individuel øvelse Introduktion til HTML5: Tekst, punktlister, billeder, links og undersider 1. Målsætning
Læs mereHTML5 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 mereCSS introduktion: Tekstformatering med CSS
Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 3, individuel øvelse CSS introduktion: Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse
Læs mereGrundformen for et website: aside, tabeller, formularer og tekstformatering
Design til digitale kommunikationsplatforme Formiddag (Hold 1), IT Universitetet, Efterår 2013 Øvelse 2, individuel øvelse Grundformen for et website: aside, tabeller, formularer og tekstformatering 1.
Læs mereWeb 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 mereHTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS
Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse 1 lært at lave en HTML5-side med afsnit,
Læs mereInternet 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 mereVejledning i opbygning af Tillidszonen
Vejledning i opbygning af Tillidszonen Vejledning til FOAs lokale afdelinger i opbygningen af deres del af Tillidszonen FOA Fag og Arbejde Januar 2006 1 Indholdsfortegnelse Forbunds- og afdelingsdel...3
Læs mereCSS fortsat: Boksmodel, floating & positionering
Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 1. Lidt om hvad du har lært Du har i øvelse
Læs mereBrugervejledning 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 mereGrafisk workflow. Se siden her: www.cormas.dk
Grafisk workflow Se siden her: www.cormas.dk Dokumentation 4 Procesbeskrivelse 5 Inspirationssøgning 6 Skitser 8 Layout i Photoshop 9 Farver 10 Font 11 Flowchart 12 Wireframe 13 Storyboard 14 kontakt.html
Læs mereByg 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 mereVejledning 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 mereSitecore - basisvejledning Version 2. September 2010
Sitecore - basisvejledning Version. September 00 Sådan opretter du en ny artikelside... Sådan omdøber du et artikelnavn så du får vist æ,ø og å... Sådan udgiver (publiserer) du nyt eller redigeret indhold...4
Læs mereSkrivebordet Windows 10
Få adgang til Stifinder, Indstillinger og andre apps, du bruger ofte, i venstre side af menuen Start. Hvis du vil se alle dine apps og programmer, skal du vælge Alle apps. Vises der en pil til højre for
Læs mereOm 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 mere4 ARBEJDE MED SEKTIONER
4 ARBEJDE MED SEKTIONER Sektioner er en ny måde at vise indhold på. I bund og grund handler det om, at vi opdeler en side i en eller flere sektioner, som kan vise indhold på en række forskellige måder.
Læs mereFase 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 mereGUIDE TIL OPRETTELSE AF ARTIKLER I JOOMLA - FRONTEND
GUIDE TIL OPRETTELSE AF ARTIKLER I JOOMLA - FRONTEND INDHOLDSFORTEGNELSE Login og ændring af adgangskode 2 Oprettelse/redigering af artikler 3 Indsæt billede i en artikel 7 Sæt et link i en artikel 13
Læs mereTillykke Med Fødselsdagen
HTML & CSS 1 Tillykke Med Fødselsdagen 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
Læs mereHjemmeside på SkoleKom
Hjemmeside på SkoleKom 1 Om vejledningen Har din lærer givet tilladelse, kan du nu lave din helt egen personlige hjemmeside på SkoleKom. En hjemmeside på SkoleKom er let at gå til, og har du arbejdet lidt
Læs mereSådan får du Salmebogen på CD-ROM til at fungere i Internet Explorer 7 både under Windows XP og Windows Vista
Sådan får du Salmebogen på CD-ROM til at fungere i Internet Explorer 7 både under Windows XP og Windows Vista Beskrivelse af fejlen Salmebogen på CD-ROM har visse problemer med at fungere i Internet Explorer
Læs merexgalleri 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 merePHP 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 mereAnklagemyndighedens Vidensbase
Anklagemyndighedens Vidensbase Indhold 1 OM DENNE VEJLEDNING... 2 2 LOGIN... 3 3 SØGNINGER... 4 3.1 SØG EFTER DOKUMENTER... 4 3.2 NAVIGÉR DIG FREM... 5 3.3 KOMBINÉR SØGNING OG NAVIGATION... 6 3.4 VISNING
Læs mereBrug Photo Story 3 en let introduktion
Brug Photo Story 3 en let introduktion Denne vejledning forudsætter at programmet Photo Story 3 er installeret på din computer. Se andetsteds for vejledning i at installere programmet, der kan findes gratis
Læs mereIKT 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 mereFSFI s guide til DFR s elektronisk bevissystem
FSFI s guide til DFR s elektronisk bevissystem Dette er en kort guide i anvendelsen af Dansk Førstehjælpsråd elektroniske bevissystem. Guiden viser og forklarer, hvordan du som instruktør og medlem af
Læs mereManual og Hjælp Skoletasken 2
Manual og Hjælp Skoletasken 2 I Skoletasken 2 - Hjælp Indhold I Introduktion 1 Velkomst 2... 2 2 Systemkrav... 2 3 Installation... 3 4 Skoletasken... 8 II Opsætning 10 1 Systemopsætning... 10 2 Bogopsætning...
Læs mere2. H vis du vil br uge egen computer til øvelser ne
W ebdesign og webkommunikation 2, I T U niversitetet, forår 2011. I ntroduktion til det praktiske 1. Målsætning Før vi går i gang med kurset, skal du have de helt lavpraktiske ting på plads, så du er helt
Læs mereTastevejledning Windows XP
Tastevejledning Windows XP Tastevejledningen dækker den danske udgave af Windows XP. Der er taget udgangspunkt i en standard installation, hvor der ikke er foretaget tilpasninger i skærmopsætning, valg
Læs mereLav 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 mereKom godt i gang med OneDrive
Kom godt i gang med OneDrive Office365 er en mulighed for lærere og elever at bruge en office-pakke på egne enheder - man kan downloade det til brug på pc - mac - tablets og smartphones, i alt op til 5
Læs mereModul 8: Clouds (Lagring af filer)
Det sprogpædagogiske kørekort 2012/2013 Modul 8: Clouds (Lagring af filer) Del I Christoph Schepers Studieskolen 8/2012 Indholdsfortegnelse Introduktion... 2 Installer Dropbox (punkt 1-3).. 3 Åbn Dropbox
Læs mere05.060 E-mail mailinglister i Revimentor
05.060 E-mail mailinglister i Revimentor Revimentor giver mulighed for at revisor kan benytte mailinglister til sende e-mails kunder eller kontaktpersoner hos kunder. Dette kan bruges til nyhedsmail eller
Læs mereBrugermanual 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 mereManual til Vandværksløsninger
Intro Hjemmesidens opbygning 1 Manual til Vandværksløsninger 1. Intro Hjemmesidens opbygning Intro Hjemmesidens opbygning 2 Hjemmesidens opbygning, som brugeren ser den Intro Hjemmesidens opbygning 3 Siden
Læs mere8.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 mereSuperskolernes kampagne
Superskolernes kampagne Projekt i Kommunikation/IT Roskilde Tekniske Skole Side 1 af 12 Indhold Indledning... 3 Målgruppeanalyse - Kanylemodel... 4 Begrundelse for valg af medie... 5 Grovskitsering...
Læs mereManual 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 mereRedaktø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 mereWebteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup
Niels Sundstrup Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Webteknologi - Carl- Henrik Nielsen - Syddansk Universitet, Kolding - Udlevering: 12. januar 2012 Aflevering: 19. januar
Læs mereVelkommen til dag 9 i IT for let øvede
Velkommen til dag 9 i IT for let øvede Spørgsmål til dag 10 send venligst ønsker på mail inden torsdag til Peter og Per Gennemgående opgave og Excel v/peter Lidt Internet tips Filer og mapper Øvelse med
Læs mereTinyMCE Bruger Guide. Forord. Contents
TinyMCE Bruger Guide Forord TinyMCE er en platformuafhængig web baseret Javascript HTML WYSIWYG (What You See Is What You Get) editor udgivet som Open Source under LGPL af Moxiecode Systems AB. Dette er
Læs mereDIIS DANISH INSTITUTE FOR INTERNATIONAL STUDIES STRANDGADE 56 1401 COPENHAGEN K DENMARK TEL +45 32 69 87 87 diis@diis.dk www.diis.
DIIS DANISH INSTITUTE FOR INTERNATIONAL STUDIES STRANDGADE 56 1401 COPENHAGEN K DENMARK TEL +45 32 69 87 87 diis@diis.dk www.diis.dk LÆG TEKST (OG NYHEDER) PÅ DIIS.DK! August 2010, Jfr Intern vejledning
Læs mereSådan laver du ansættelsesbreve
Sådan laver du ansættelsesbreve med HR-Løn flettefil Januar 2011 1 Introduktion Vil du gerne kunne lave ansættelsesbreve nemt og hurtigt? Og vil du gerne have, at de er sat op med jeres institutions brevpapir,
Læs mereManual 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 mereQUICKGUIDE TIL XMEDIA
QUICKGUIDE TIL XMEDIA 1 UPLOAD DINE EGNE BILLEDER TIL "MINE MAPPER" 2 ARBEJD MED EN SKABELON 3 OPRETTELSE AF PDF 4 ÅBN OG ARBEJD VIDERE MED EN SKABELON 1 OPLOAD DINE EGNE BILLEDER TIL MINE MAPPER Opret
Læs mereUndervisningsmateriale - Rapport
Kom/IT Undervisningsmateriale - Rapport Klasse 1.7 Mathias Saxe H. Jensen 10-05-2011 Side 1 af 10 Indhold Forside... 1 Indledning... 3 Problemstilling... 3 Målgruppe... 3 Problemformulering... 4 Kommunikationsplan...
Læs mereBRUGERMANUAL. Ruteplanlægning i RUT. Røde Korsindsamlingen 8. MARTS 2012. RødeKors.dk
BRUGERMANUAL 8. MARTS 2012 Ruteplanlægning i RUT Røde Korsindsamlingen RødeKors.dk INDHOLD 1 Introduktion til RUT... 3 2 Sådan finder du og logger på RUT... 4 3 Et par tips... 4 4 Planlægning af ruter...
Læs mereDatalogi 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 mereMoltrup-sogn.dk - Vejledning i redigering af undersider, og oprettelse af nye sider.
Indholdsfortegnelse Moltrup-sogn.dk - Vejledning i redigering af undersider, og oprettelse af nye sider.... 2 Brugernavn og kodeord.... 2 Selve tekstbehandleren... 3 Indsættelse af billeder... 4 Metadata...
Læs mereDer findes mange ting på nettet, som du kan hente ned på din computer bl.a. billeder, tekstdokumenter og installationsfiler til programmer.
Microsoft browser Edge Når du skal på internettet i Windows 10, bruger du som udgangspunkt programmet Microsoft Edge. Det er en helt ny, simpel internetbrowser med en række spændende funktioner. Du kan
Læs mereRetningslinjer for redigering og skrivestil på ballerup.dk
Sidst opdateret: 14. feb. 2011 Retningslinjer for redigering og skrivestil på ballerup.dk Indhold Introduktion... 1 Midtersektion... 2 Overskriften/titlen:... 2 Hovedbillede/Topbillede:... 2 Resume:...
Læs mereSitecore - basisvejledning Oktober 2012
Sitecore - basisvejledning Oktober 0 Indholdsfortegnelse Sådan opretter du en ny artikelside... 3 Sådan omdøber du et artikelnavn så du får vist æ, ø og å... 4 Undgå at din artikel bliver publiceret i
Læs mereNyhedsbreve - brugerdokumentation
Nyhedsbreve - brugerdokumentation Indholdsfortegnelse Nyhedsbreve på SSI.dk... 2 Nyhedsbrevssamling (kun dansk)... 2 Nyhedsbrev... 2 Nyhedsbrevsartikelmappe... 2 Nyhedsbrevsartikel... 2 HTML-baseret mailindhold
Læs merefotografisk kommunikation
XDANMARKS MEDIE- OG JOURNALISTHØJSKOLE CAMPUS KØBENHAVN Forprøve 2016 fotografisk kommunikation 1/2 Professionsbacheloruddannelsen i Visuel Kommunikation Studieretning: Fotografisk Kommunikation Del 1:
Læs mereAfsluttende opgave Webdesign Den 24. maj 2007 Klasse 1.2
Side 1 af 1 Afsluttende opgave i Kom/IT Den afsluttende opgave har jeg valgt at lave alene. Jeg har valgt opgave 1. webdesign, på grund af min interesse for dette. Opgaven går ud på at designe et brugervenligt
Læs mereOnline-timeseddelregistrering
Online-timeseddelregistrering Denne vejledning giver dig et overblik over, hvordan du kommer i gang med at foretage registrering af dine timesedler i vores online-tidsregistreringssystem, som hedder AXP.
Læs mereManual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Sådan opdaterer du din hjemmeside i 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 og lægge nyt på din hjemmeside. Guiden er skrevet
Læs mereManual 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 mereHer kan man oprette et nyt slideshow ved at trykke på kassen med "Opret nyt slideshow". Dette fører en til "Rediger slideshow".
Hjælp til Praksisskærm Redigering i Praksisskærm Redigeringsdelen består af 2 sider. Den ene side - "Oversigt over slideshows" indeholder oversigten over ens slideshows. Den anden - "Rediger slideshow"
Læs mereXerox. Øvelse med tekst og billeder Nattergalen
Xerox Øvelse med tekst og billeder Nattergalen 1. opsætning af dokument i InDesign: - Klik File > New. I dialogboksen udfyldes indstillingerne som vist herunder. Det er vigtigt, at tage stilling til størrelser
Læs mereNå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 mereGoogle Chrome side 1 af13
Google Chrome side 1 af13 Indholdsfortegnelse: Download Google Chrome... Side 2 Overblik... Side 3 Angiv startside... Side 7 Søg direkte i adresselinjen... Side 8 Bogmærker sider... Side 8 Bogmærkeadministratoren...
Læs mereIsenTekst 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 mereRUTruteplanlægningsvejledning. Folkekirkens Nødhjælp Sogneindsamling 2015
RUTruteplanlægningsvejledning Folkekirkens Nødhjælp Sogneindsamling 2015 Indhold 1. Introduktion til RUT... 2 1.1 Om vejledningen... 2 2. Log på RUT... 4 3. Sådan planlægger du ruter... 6 4. Sådan finder
Læs mereFlash 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 mereDenne 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 mereVejledning Aarhus Universitets wordskabeloner
Vejledning Aarhus Universitets wordskabeloner Opdateret den 13. maj 2014 Indhold Introduktion... 3 Sådan opretter du et nyt dokument via menuen 'AU'... 4 Dialogboksen Dokumentoplysninger... 6 Side1: Dokumentoplysninger...
Læs mereNaja 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 mereElevvejledning 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 mereHerning Centerby Guide til Umbraco
Herning Centerby Guide til Umbraco marts 2016 I GANG MED UMBRACO 4 LOGIN 4 LÆR UMBRACO AT KENDE 5 SÅDAN REDIGERER DU SIDER 6 VÆRKTØJSLINJEN 6 RET I TEKSTEN 7 RET ELLER INDSÆT LINK I TEKSTEN 8 RET ELLER
Læs mereMANUAL AF FILIP WALLBERG & RUNE MICHELSEN
MANUAL AF FILIP WALLBERG & RUNE MICHELSEN NB! Denne manual er også fuldt ud anvendelig til arbejdet på radionyheder.dk og tvnyheder.dk, da disse sites er bygget op i nøjagtig samme system! Indhold Om
Læs mereWebside score dictionary.com
Webside score dictionary.com Genereret September 09 2016 21:42 PM Scoren er 33/100 SEO Indhold Titel Dictionary.com Meanings and Definitions of Words at Dictionary.com Længde : 68 Perfekt, din titel indeholder
Læs mereGrafisk produktionsforståelse
04 Grafisk produktionsforståelse Design og koding af steentrae.dk 24 Svendeprøveportfolio Steentrae.dk Responsivt website med CMS I forlængelse af min Grafisk design-del, har jeg her valgt at fokusere
Læs mereVejledning til Blackboards portfolio værktøj
Vejledning til Blackboards portfolio værktøj Brug denne vejledning, når du skal udarbejde din undervisningsportfolio i Blackboards portfolio værktøj. Ved at følge alle trinene nedenfor får du udarbejdet
Læs mereInstallation af ETF s cloudløsning for Privatpraktiserende ergoterapeuter
Installation af ETF s cloudløsning for Privatpraktiserende ergoterapeuter For at starte opsætningen af produktet, downloades programmet ved at gå til nedstående link, og vælge under Privat praktiserende
Læs merexgalleri 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 da- tafiler på nettet; men de fungerer typisk på den måde,
Læs mereBilledbeskæring & Irfan View
Indholdsfortegnelse Indholdsfortegnelse...1 Hvordan redigerer jeg billeder?...2 Installation af Irfan View...2 Opsætning af Irfan View...5 Gem med en fornuftig billedtype...5 Irfanview på dansk...6 Brug
Læs mereIntraWeb med SkoleKom Version 2.1, april 2003 Brugervejledning Tilrettelæggelse & indhold via FirstClass Klient version. 7.*
IntraWeb med SkoleKom Version 2.1, april 2003 Brugervejledning Tilrettelæggelse & indhold via FirstClass Klient version. 7.* Indhold 1 Indledning og læsevejledning... 3 1.1 Indholdsleverandører og administratorer...
Læs mereMini 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 mereIndhold. 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 merePPHansen.dk. Introduktion til websiden. En fag præsentationsside af Palle Preben Hansen
Introduktion til websiden PPHansen.dk En fag præsentationsside af Palle Preben Hansen Eksamensopgave i Webdesign og Grafiske værktøjer, 5. semester SIV. Indholdsfortegnelse Indledning... 2 Udviklingsprocessen...
Læs mereWebside score khtsb.com
Webside score khtsb.com Genereret April 04 2019 09:19 AM Scoren er 50/100 SEO Indhold Titel Welcome to XAMPP Længde : 16 Perfekt, din titel indeholder mellem 10 og 70 bogstaver. Beskrivelse XAMPP is an
Læs mere3 OPRETTELSE AF SIDER
3 OPRETTELSE AF SIDER En af VuptiWebs styrker er muligheden for at oprette forskellige sidetyper og - ikke mindst - sider, som automatisk henter data fra vores administrationsprogram (DOFPro). I første
Læs mereDet sprogpædagogiske kørekort 2012/2013. Modul 9: Rettelse af kursistopgaver (Del 1)
Det sprogpædagogiske kørekort 2012/2013 Modul 9: Rettelse af kursistopgaver (Del 1) Christoph Schepers Indhold I Ret opgaver i Word Markér fejl i farver (nemt og hurtigt).. Brug Words egne retteværktøjer:
Læs mereBrunata WebMon Brugermanual for beboer
Brugermanual for beboer QB 10.1430 / 25.01.2011 Indhold Side Hvad er Brunata WebMon beboeradgang? 2 Hvem har adgang til systemet? 2 Din Browser 2 Sådan ændrer du skriftstørrelsen 2 Forsiden 3 Navngiv selv
Læs mereOpret en formular i Dreamweaver
Opret en formular i Dreamweaver. Åben det html-dokument hvor du vil have din formular skal være på. 2. Klik i det felt (DIV eller tabel) hvor du vil have din formular skal være. Du kan se du er i feltet
Læs mereManualen beskriver brugen af SecureAware version 4.8.0 og senere versioner Dokument opdateret: June 2015
SecureAware Quiz Manualen beskriver brugen af SecureAware version 4.8.0 og senere versioner Dokument opdateret: June 2015 Om dette dokument Dette dokument beskriver brugen af quizmodulet i SecureAware.
Læs mereForslag til arbejdsgang ved tilrettelæggelse af en WebQuest
Forslag til arbejdsgang ved tilrettelæggelse af en WebQuest Ressourcer på webstedet: http://lotte.udsen.person.emu.dk Få ideer fra webstedets "Samlinger af WebQuests". Udfyld det vedlagte arbejdsark. (Dvs.
Læs mereBrugervejledning til udfyldelse og udstedelse af Europass Mobilitetsbevis i Europass Mobilitetsdatabasen
Brugervejledning til udfyldelse og udstedelse af Europass Mobilitetsbevis i Europass Mobilitetsdatabasen Europass Mobilitetsbevis skal udfyldes og udstedes i mobilitetsdatabasen: http://mobilitet.europass.dk/.
Læs mereWebside score google.com
Webside score google.com Genereret Januar 14 2019 10:26 AM Scoren er 37/100 SEO Indhold Titel Google Længde : 6 Kan optimeres; Optimalt bør din titel indeholde mellem 10 og 70 karakterer (med mellemrum)
Læs mereWord. Strukturering, henvisninger m.m.
Word Strukturering, henvisninger m.m. August 2015 Strukturer dokumentet I kan tildele de forskellige dele af teksten, specielt afsnitsoverskrifter, forskellige niveauer, vha. typografi-paletten 2 Strukturer
Læs mereBrug af Office 365 på din Android-telefon
Brug af Office 365 på din Android-telefon Startvejledning Tjek mail Sæt din Android-telefon op til at sende og modtage mail fra din Office 365-konto. Tjek din kalender, uanset hvor du er Hav altid styr
Læs mereDet sprogpædagogiske kørekort 2012/2013. Modul 4: Videofiler (basis)
Det sprogpædagogiske kørekort 2012/2013 Modul 4: Videofiler (basis) Christoph Schepers Indhold I Arbejd med videoer på YouTube 3 Opret din egen YouTube kanal (punkt 1-2).. 3 Saml videoer i afspilningslister
Læs mereWORKFLOW & PRODUKTION
OPGAVE Jeg har lavet et fiktiv website for en hundekennel. Det er mit bud på hvordan sådan en eventuelt kan se ud. PROGRAMMER Photoshop Dreamweaver Illustrator WORKFLOW & PRODUKTION KENNEL BISCO Dokumentation
Læs merePia Schiermer, Underviser ved UNI-C og Amtscentrene 2 pia@schiermer.dk
Pia Schiermer, Underviser ved UNI-C og Amtscentrene 2 Bloggen er et online medie for både de store og de små, høje og lave, lange og brede. Bloggen er for alle på nettet også de andre. En blog, også kaldet
Læs mereComputer og print ved skriftlige prøver på Laursens Realskole
Forudsætninger for at anvende it til prøverne: 1. Ved nogle skriftlige prøver er det tilladt at bruge it-udstyr. It-udstyr betyder en computer + en smartphone og/eller en tablet. FLY-funktionen SKAL være
Læs mere