Datalogi HTML Aarhus Katedralskole
|
|
|
- Ejvind Frederiksen
- 8 år siden
- Visninger:
Transkript
1 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 at strukturere indhold på! HTML definerer en række markeringskoder, kaldet tags, som benyttes når en hjemmeside skal konstrueres. Den simple struktur af en (tom) hjemmeside ses herunder: <html> <head> </head> <body> </body> </html> Sandkassen og HTML-dokumenter ( En hjemmeside er det samme som et HTML-dokument. En browser er det program man bruger til at se hjemmesiderne/html-dokumenterne gennem. Browseren omdanner HTMLdokumentet til et grafisk billede på computerskærmen. HTML-dokumenter, af typen.html, indeholder ren tekst. En tekst-editor til at skrive hjemmesider i, behøver derfor kun at kunne skrive ren tekst! og det er ideen bag sandkassen på (se herunder): Figur 1 Sandkassen på etablerer et simpelt udviklingsmiljø til konstruktion af hjemmesider. Side 1
2 Tags og attributter Tags forekommmer i 2 varianter: container-tags og separator-tags. Container-tags består altid af et start-tag og et slut-tag, som fx <html>.</html> medens separator-tags kun består af et tag, som fx <img>. Tags kan forsynes med attributter, som fx <img src= bil.jpg >, hvor attributten er src (source) med værdien bil.jpg (et navn på en grafik-fil). En anden skrivemåde kunne være: <img src= bil.jpg > Dokument modellen og DOM-træet Dataloger elsker at lave modeller af alting, og har selvfølgelig også lavet en model af et HTMLdokument, kaldet Document Object Modelellen og forkortet DOM. HTML-dokumenter er, i denne model, kun opbygget af 3 forskellige typer klodser : 1. HTML-elementer (også kaldet TAGS), fx <p> p 2. Text-elementer text 3. Attributter til HTML-elementer (attribut-navn= attribut-værdi ), fx src= bil.jpg src Modellen vises altid som et (omvendt) træ - et såkladt DOM-træ (se herunder): <html> <head> </head> <body> Sunde madvarer: <ul> <li>grøntsager</li> <li>frugt</li> </ul> <img src="bil.jpg"> </body> </html> html head body text ul img li li text text src Figur 2 HTML-dokumentet i den venstre ramme er illustreret i DOM-træet til højre. Træet indeholder 3 textelementer, 1 attribut og 7 HTML-elementer, hvoraf 1 er et separator-tag og resten container-tags. De enkelte elementer i træet kaldes også knuder og man beskriver knuderne relativt til hinanden svarende til et stamtræ - på engelsk: Knuden direkte over en knude er parent (forælder) til denne knude. Knuderne et niveau direkte under en knude er children (børn) af denne knude. Knuder på samme niveau og med samme parent er siblings (søskende). Mængden af alle knuder på alle niveauer under en knude er descendants (efterkommere) af denne knude. Parent, grandparent, og alle andre knuder ovenover en knude, er ancestors (forfædre) til denne knude. (Bemærk at text-knuder/text-elementer ikke kan have children) Side 2
3 ex1.html: 1 : <html> 2: <head> 3: <title>om HMTL</title> 4: </head> 5: <body> 6: HTML-dokument: 7: <ul> 8: <li>html-elementer</li> 9: <li>text-elementer</li> 10: <li>attributter</li> 11: </ul> 12: <img src="bil.jpg" width="100"> 13: <hr> 14: <a href=" 15: </body> 16: </html> BROWSER HTML - Øvelse 1 HTML-dokumentet i filen ex1.html indlæses af browseren og skærmbilledet nederst genereres. (Linjenumrerne i kildekoden hører ikke med til dokumentet og har kun pædagogisk værdi) a) Knyt linjenumre til de enkelte elementer i browserens genererede skærmbillede b) Hvor mange TEXTelementer indeholder dokumentet? c) Lav en skitse at HTMLdokumentets DOM-træ Side 3
4 HTML Øvelse 2 Gå i sandkassen og lav en hjemmeside der indeholder en række links, præsenteret i en liste. Når din browser modtager et HTML-dokument fra fx en web-server, ankommer hele indholdet som én lang tekst-linje. Efterhånden som browseren tygger sig igennem de enkelte tegn, opbygges DOM-træet for det pågældende dokument. HTML-elementerne/HTML-knuderne definerer således strukturen af dokumentet medens text-elementerne/text-knuderne er selve indholdet på godt dansk : HTML is for content (and structure of content). Vi afslutter denne lille gennemgang af dokument modellen, med at tilføje, at DOM-træet altid har en øverste knude (roden) kaldet document, således at DOM-træet helt præcist tegnes som vist herunder: document html head body text Figur 3 document-knuden er den øverste Attributten id Som vi lige har set bliver, selv forholdsvis simple, hjemmesider til en kompleks fremstilling i DOM-modellen. Hvis en hjemmeside skal være dynamisk og interaktiv, har vi brug for at kunne finde bestemte HTML-elementer og manipulere dem. Her kommer attributen id på banen. Attributtens værdi skal være et unikt navn i det pågældende HTML-dokument. Et eksempel kunne være: <ul id= favoritlinks >. Eksempel på etablering af navigation med attributten id Meget lange HTML-dokumenter vil altid ses i browseren sammen med en lodret scroll-bar (figur 4). Derfor vil man ofte placere en navigations-menu, bestående af links til de respektive afsnit, øverst på siden, og i bunden af hvert afsnit placere et link tilbage til menuen. Dette kan nemt etableres via id-attributter på de elementer der skal hoppes til og a-elementer (links) til at foretage hoppene. Her følger en detaljeret fremgangsmåde: 1: Vi vil hoppe til overskrifterne MENU, Afsnit 1 og Afsnit 2, og da disse er tekst-elementer i h3-elementer (headerelementer) forsynes disse h3-elementer med id-attributter med de anførte værdier: Figur 4 Store dokumenter scroller. Side 4
5 . <h3 id= menu >MENU</h3>. <h3 id= af1 >Afsnit 1</h3>. <h3 id= af2 >Afsnit 2</h3>. 2: Links der hopper til de 3 elementer med de angivne atrribut-værdier etableres, som sagt, via a-elementer hvor href-attributtens værdi netop er det relevante id, på det HTML-element der skal hoppes til. Dog skal vi fortælle browseren at de angivne href-værdier peger på HTML-elementer i samme dokument, og dette gøres ved at foranstille id-værdien et #-tegn:. <h3 id= menu >MENU</h3> <a href= #af1 >Afsnit 1</a> <a href= #af1 >Afsnit 1</a> <h3 id= af1 >Afsnit 1</h3>..[en masse tekst] <br><a href= #menu >Til menu</a> <h3 id= af2 >Afsnit 2</h3>. [en masse tekst] <br><a href= #menu >Til menu</a> Figur 5 Der er klikket på linket til Afsnit 2' (se vt. Figur 4)og browseren har scrollet dokumentet så Headeren på Afsnit 2 (med id= af2 ) placeres øverst i browser-vinduet. HTML Øvelse 3 Hop i sandkassen og lav et dokument med navigation via attributten id. Sikkerhedsindstillinger i FireFox-broweren kan medføre at navigationen ikke virker i sandkassen. I stedet kan man kopiere indholdet fra tekstboksen (i sandkassen) og placere denne i en selvstændig html-fil (se fx også HTML-elementet iframe Ved hjælp af denne container-tag kan man indsætte et vindue i et dokument, hvori et andet web-dokument kan vises. Indholdet i framen defineres ved src-attributten, hvis værdi angiver adressen på det dokument der skal vises i rammen. width og height er attributter, som definerer størrelsen af den ramme hvori det fremmede web-dokument vises, og frameborder-attributten bestemmer om der skal vises en ramme om det indlejrede dokument eller ej. Man kan således, fx, overvåge mange hjemmesider på en gang i et og samme browservindue. Vi iler med et eksempel: <iframe src= width= 100% height= 90% frameborder= no > </iframe> Side 5
6 Figur 6 I sandkassen har vi testet en iframe med de viste attribut-værdier. Eksempel på etablering af navigation med iframe Figur 7 I sandkassen har vi etableret en navigation via en iframe. Side 6
7 Forsynes iframen fra figur 6 med en id-attribut kan man opbygge en lille navigation med, fx knapper, der indlæser forskellige hjemmesider i den samme iframe. Vi springer lige ud i et eksempel i figur 7. Vi har faktisk her sneget lidt JavaScript ind via event-handleren onclick Kildekoden samt en kort forklaring følger her. <html> <head> </head> <body> <button onclick="document.getelementbyid('f1').src=' > Google</button> <button onclick="document.getelementbyid('f1').src=' > Katedralskolen</button> <hr> <iframe src=" width="100%" height="90%" frameborder="no" id="f1" > </iframe> </body> </html> document.getelementbyid( f1 ) er en reference til iframe-elementet..src henviser til den lokale src-attribut i dette iframe-element, hvis værdi sættes til hvilket har den effekt at et muse-klik på knappen udløser onclickevent-handleren, hvorved Katedralskolens hjemmeside indlæses i iframen. HTML Projektopgave: Datalogiholdets hjemmeside navigation på 2 niveauer Der skal etableres et site bestående af flere HTML-dokumenter, som beskriver datalogiholdet på Aarhus Katedralskole (fx et HTML-dokument der beskriver de enkelte elever med , adresse og telefonnummer - gerne med billeder, et andet HTML-dokument der fx indeholder diverse favoritlinks etc ). Et styrende HTML-dokument, forsynet med en iframe, skal gøre det muligt at vælge mellem disse. De enkelte HTML-dokumenter som vises i iframen kan endvidere være forsynet med en lokal navigation som omtalt på side 4 og 5. Sitets URL: Side 7
8 Projektopgave: Datalogiholdets hjemmeside - navigation på 2 niveauer Følgende HTML-dokumenter, alle placeret i mappen projekt1 kunne udgøre starten på projektet: ramme.html elevdata.html billeder.html favoritlinks.html ramme.html Etablerer en række knapper og et iframeelement, således at når der fx klikkes på knappen Elev data så vises HTMLdokumentet elevdata.html i iframe en. Grp.: (Gruppen skal gennemgå opbygningen af hjemmesiden for de andre elever) elevdata.html viser elevdata (i en tabel) med indlagt lokal navigation. Grp.: (Gruppen skal gennemgå opbygningen af hjemmesiden specielt tabeller - for de andre elever) billeder.html Viser billeder (med navn) med indlagt lokal navigation. Grp.: (Gruppen skal gennemgå opbygningen af hjemmesiden for de andre elever) favoritlinks.html viser favoritlinks (i liste) med indlagt lokal navigation. Figur 8 Et bud på Datalogiholdets hjemmeside Grp.: (Gruppen skal gennemgå opbygningen af hjemmesiden for de andre elever) Side 8
9 Endnu et udviklingsmiljø til konstruktion af hjemmesider Sandkassen er fin at teste små hjemmesider i, men skal man i gang med større projekter er det nødvendig at bruge en tekst-editor. Programmet Notesblok (eng.: NotePad ), som følger gratis med Windows, er et udmærket bud på en sådan editor. Det afgørende er at man husker at gemme dokumentet i en fil af typen.html (i stedet for default-værdien.txt) ved fx at skrive eksempel.html når filen skal gemmes (anførselstegnene skal med). Når dokumentet først er gemt, kan man efterfølgende navigere til dokumentet og fx klikke på det, hvorefter ens browser viser dokumentet. Den videre konstruktion af hjemmesiden foregår nu ved at redigere HTML-dokumentet i teksteditoren (notesblok), gemme det, og skifte til browservinduet, hvor der trykkes opdater. Banalt men hamrende effektivt! Figur 9 Udviklingsmiljøet etableret på forfatterens skrivebord. Til venstre programvinduet med tekst-editoren notesblok, og til højre programvinduet med browseren. HTML-editorer Der findes et stort udvalg af HTMLeditorer på markedet, op på internettet kan man downloade gratis (freeware) udgaver. Fælles for disse editorer er ofte en høj indgnags-tærskel, samt et ofte let genkendeligt design på de producerede hjemmesider. Vil man ændre i det genererede HTMLdokument, bliver man alligevel nødt til at have et grundlæggende kendskab til HTML. Figur 10 En god, gratis editor er fx ConTEXT som tillader at man selv skriver HTML-indholdet. Man kan arbejde med flere HTML-dokumenter, der bliver vist i faneblade. Til venstre ses en oversigt over filerne i den mappe, hvor ens site ligger. Side 9
10 Udgivelse/upload til server Via det tidligere beskrevne udviklingsmiljø, kan man, i ro og mag, på ens egen computer, kreere sit eget hjemmesidekompleks men skal andre have glæde af anstrengelserne, skal hjemmesiderne placeres på en web-server. Medens klient-programmet: browseren, er perfekt til download fra en web-server,og efterfølgende visning af hjemmesiderne, så benytter man ofte en anden klient/program, når der skal uploades til en web-server, nemlig en såkaldt FTP-klient (FTP = File Transfer Protocol). Sådanne klienter kan hentes som freeware på internettet, og figur 11 viser én af slagsen. Figur 11 FTP-klienten har 2 vinduer. Det venstre indeholder filer og mapper på ens egen computer (klienten) mens det højre viser filer og mapper på web-serveren. Ved at markere mapper/filer og klikke på piletasterne kan filer flyttes mellem klient og server. Specialtegn Visse tegn som ikke findes på tastaturet,og fx tegnene < og >, kan alligevel skrives ind i et HTML-dokument, via en såkaldt escape-sekvens. Vi iler med nogle eksempler: Tegn Escape-sekvenser < < < > > = & & & Udvalgte HTML-elementer/tags Dette er langtfra en gennemgang af samtlige HTML-elementer. Et overblik kan fx findes på flg. (engelske) site: Tekst: <h1> </h1> (head: overskrift> Indsætter en overskrift. Tallet angiver font-size, med 1 som det største og 6 som det mindste. Side 10
11 <p> </p> (paragraph: afsnit) Markerer et tekst-afsnit. Browseren indsætter lidt luft før og efter elementet. <br/> (linebreak: ny linje) <ul> </ul> (unordered list: ikke-nummereret liste) Placerer en liste i HTML-dokumentet. De enkelte elementer i listen markeres med <li> </li>. Eks.: <ul> <li>tænd for computeren</li> <li>etabler forbindelse til internettet</li> <ul> <ol> </ol> (ordered list: nummeretret liste) Placerer en nummereret liste i HTML-dokumentet. De enkelte elementer i listen markeres med <li> </li>. <table> </table> (tabel) Indsætter en tabel med rækker: <tr> </tr>, indeholdende celler: <td> </td>. Eks.: <table> <tr><td>celle 1</td><td>celle 2</td></tr> <tr><td>celle 3</td><td>celle 4</td></tr> </table> Tabellen set gennem en browser. Grafik: <img> (image: billede) Indsætter et billede/grafik på en hjemmeside. Attributter: src= url url udpeger en grafik-fil, typisk af typen.jpg,.gif eller.png Link: width= 380 height= 120 Dimensionerer billedet i billedpunkter (pixels). Hvis kun én af attributterne angives, skaleres billedet. Hvis begge angives kan billedet (evt.) forvrænges. <a> </a> (anchor: anker) Indsætter et link til et andet sted i samme dokument, eller til et andet dokument på samme computer/webserver eller til et dokument på en anden webserver på internettet. Attribut: href= url url udpeger det dokument der hoppes til, når der klikkes på teksten mellem <a> og </a>, kaldet linkteksten. url en kan være relativ, og pege på et sted i samme dokument, hhv. på en fil på samme computer/webserver, eller være absolut, og pege på en fil på en anden Side 11
12 webserver på internettet. Vi iler med en række eksempler: Eks.: Relative url er: <a href= #afsnit1 >Afsnit 1</a> Der hoppes til et HTML-element med det angivne id (= afsnit ) i samme dokument. Den klikbare del af linket er teksten Afsnit 1. <a href= indhold.html >Indholdsfortegnelse</a> Der hoppes til et andet dokument relativt til det aktuelle (dvs. i samme mappe på den samme computer). Browseren viser herefter det angivne dokument indhold.html. <a href= oversigt.html#kap3 >Kapitel 3</a> Der hoppes til et andet dokuments HTML-element med id= kap3. <a href= bog1/kap4/indhold.html >Kapitel 4</a> Der hoppes til dokumentet indhold.html, der befinder sig relativt til det aktuelle dokument, i en undermappe kap4 til en undermappe bog1 på samme computer. <a href=../kap7/indhold.html >Kapitel 7</a> Der hoppes til dokumentet indhold.html, der befinder sig i en mappe kap7 på samme niveau som den aktuelle mappe (../ betyder ét niveau op (= overmappe)) Absolut url: <a href= >Google</a> Den danske Google-startside (homepage) vises i browseren, hvis der klikkes på linkteksten Google. Den absolutte url kendes på Doctype-erklæring og angivelse af tegnsæt HTML-dokumenter bør forsynes med en varedeklaration, en såkaldt Doctype-erklæring, som fortæller browseren hvad det er for en version af HTML der benyttes i det pågældende dokument. En Doctype-erklæring placeres allerførst i dokumentet og kan, fx, se således ud: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso "> <title>min første, pinlig korrekte, hjemmeside</title> </head> <body> </body> </html> Side 12
13 Doctype-erklæringen fortæller, bl.a. at det er HTML-version 4.01 vi har benyttet til opmærkning af dokumentet. Endvidere er der i <head>-afsnittet placeret en meta-tag som fortæller at det tegnsæt browseren skal anvende hedder utf-8. Validering og W3C Man kan sikre sig at det HTML-dokument man har lavet overholder de gældende regler for opmarkering af hjemmesideindhold ved at konsultere WorldWideWeb-konsortiets (W3C s) hjemmeside på adressen: og her få ens hjemmeside valideret: Figur 12 Vi har valgt at validere ved at copy-paste indholdet fra hjemmesiden direkte over i et tekst-felt på validatoren. Trykkes på 'Check -knappen falder dommen prompte (se figur 14 på næste side) W3C er en verdensomspændende organisation som har til opgave at udarbejde standarder for hvorledes dokumenter på internettet skal konstrueres, således at fx browserkonstruktørerne kan være med på de nyeste standarder. Figur 13 Den del af MIT som bl.a. huser det amerikanske W3C-team. Side 13
14 Figur 14 Vi var heldige! dokumentet vi pastede ind i validatoren overholdt alle forskrifter (det var for øvrigt kun en tom skal) og vi kan nu blære os med et af nedenstående ikoner vist i figur 15 herunder. Figur 15 De to blære -ikoner man kan placere på egen hjemmeside hvis hjemmesiden er kommet igennem W3C-validatorens nåleøje! Side 14
15 Side 15
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
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
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
Vejledning til opbygning af hjemmesider
Side 1 af 9 Vejledning til opbygning af hjemmesider Hvis du er inde på din klubs hjemmeside, fx på forsiden, kan du nu gå i gang med at redigere. For at få redigeringsværktøjet frem, skal du klikke på
Ø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
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
Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS
Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS4, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,
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
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
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,
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
vorbasse.dk Redaktørmanual Kentaur
Redaktørmanual Kentaur Indholdsfortegnelse Kapitel 1 - TYPO3 Brugerfladen 3 Log ind 3 Backend 4 Frontend 5 Hvor skal jeg klikke? 5 Gem, gem og vis, gem og luk 6 Kapitel 2 - Sider & menuer 7 Sammenhæng
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
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,
Password-beskyttelse af visse filer
W EB DESIGN 101 K ODEORDSBESKYTTELSE A F VISSE FI LER Password-beskyttelse af visse filer P å et websted kan det være interessant kun at give en del af brugerskaren adgang til visse filer. Der er en mængde
ActiveBuilder Brugermanual
ActiveBuilder Brugermanual Forfatter: TalkActive I/S Dato: Juni 2004 Version: R. 1.01 Sprog: Dansk Copyright 2004 - Talk Active - all rights reserved. Indhold: 1. INDLEDNING...2 2. QUICK-START...3 3. OPBYGNINGEN
ASB E-mailsignatur. Figur a: eksempel. http://asb.dk/inline/services/kommunikationsforum/skabeloner/emailsignatur.aspx og hent filen asb_signatur.zip.
ASB E-mailsignatur I det følgende vil det forklares, hvordan du opretter ASBs e-mailsignatur for medarbejdere. Det skal her noteres at e-mail signaturen ikke kan opsættes i webmail (webmail.asb.dk), men
Kom godt i gang med iframe
Kom godt i gang med iframe Denne introduktion til iframe henvender sig til dig, der arbejder med skolens onlinekommunikation. Den forklarer, hvordan du med en forholdsvis enkel HTML-kode automatisk kan
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,
Vejledning. Indhold. Side 1
Indhold HTML-faneblade... 2 Sådan tilføjer du et HTML-faneblad til din Facebook side.... 3 Sådan redigerer du et HTML-faneblad på din Facebook side.... 5 Sådan deler du fanebladet... 10 Side 1 HTML-faneblade
Quick guide Dynamicweb 9. Kom godt i gang med brugen af redigeringsværktøjet bag vores hjemmesideløsning CMS-systemet Dynamicweb
Quick guide Dynamicweb 9 Kom godt i gang med brugen af redigeringsværktøjet bag vores hjemmesideløsning CMS-systemet Dynamicweb Indholdsfortegnelse Sådan logger du på... 3 Opbygning... 4 Beskrivelse af
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
PHP kode til hjemmeside menu.
PHP kode til hjemmeside menu. Home Hovedmenu 1 Hovedmenu 2 Hovedmenu 3 Hovedmenu 4 Undermenu 1 Breadcrumb Her vises indholdet af den valgte side Undermenu 2 Undermenu 3 Undermenu 4 Evt. en mulighed for
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
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
SIDEN PÅ WORDPRESS.COM
WordPress WordPress er et fantastisk program til blog og til hjemmesider, hvor du gerne vil kunne rette via din browser. WordPress er meget udbredt og det er derfor nemt at finde fora, templates og hjælp
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
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,
Indhold. 1. Adgang og afslutning
1 Indhold 1. Adgang og afslutning 2. Menupunkter 3. Tekst 4. Billeder 5. Video 6. Lyd 7. Bannere 8. Bokse 9. Dokumenter 10. Links 11. Iframe 12. Markedspladsen 13. Nyheder 14. Job 15. Kalender 16. Selvbetjeningsbjælken
Arrangementer i Listevisning
Kort introduktion til Typo3-plugin ARRANGEMENTER. De indledende øvelser er fuldstændig de samme som i TYPO3 TRIN FOR TRIN 1 side 1-2. Du åbner altså din browser (Internet Explorer er den almindeligste),
Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW.
Denne guide er oprindeligt udgivet på Eksperten.dk CSS - en gennemgang Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW. Der er lidt CSS historie
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
har jeg hentet nedenstående anmeldelse af et godt program til
Software Fra design af hjemmesider: har jeg hentet nedenstående anmeldelse af et godt program til Wordpress er intet mindre end et genialt program til hjemmesider. For det første er det gratis, og for
8.0 Distriktshjemmesider
8.0 Distriktshjemmesider Indhold Login... 2 Forside... 3 Distriktsside opbygning...4 Rediger på en side... 5 Upload filer til mediebibliotek... 8 Kontroller links på filer... 12 Indsæt billeder... 13 Slet
Manual til administration af online booking
2016 Manual til administration af online booking ShopBook Online Med forklaring og eksempler på hvordan man konfigurerer og overvåger online booking. www.obels.dk 1 Introduktion... 4 1.1 Formål... 4 1.2
BRUGER KURSUS RAMBØLL HJEMMESIDE
Til Forsyningsvirksomheder i Danmark Dokumenttype Brugervejledning Rambøll Hjemmeside Full Responsive Dato Oktober 2017 BRUGER KURSUS RAMBØLL HJEMMESIDE BRUGER KURSUS RAMBØLL HJEMMESIDE Revision 01 Dato
SIGIL Sådan opretter du en e- bog Step by Step
SIGIL Sådan opretter du en e- bog Step by Step Af Gitte Winter Graugaard Nov. 2013, Sigil version 0.7.2 1 Her følger en intro skridt for skridt til at oprette en e- bog i SIGIL og publicere den på SAXO
Her ser du dit arbejde i preview undervejs og udgiver dit arbejde når du er færdig. (se side 4)
Sitecore vejledning Hvad er det? Sitecore er det program, den officielle del af Spejdernet laves i. Sitecore er et Content Management System, dvs. indholds-håndteringssystem til hjemmesider. Hvordan starter
Mini brugermanual CMD 5.1
Mini brugermanual CMD 5.1 Kom i gang For at tilgå CMD skal du åbne en web browser og indtaste URL en på dit CMD website i adressefeltet, hvorefter dialogboksen til log in vises. 1. Indtast dit brugernavn
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
Introduktion til Indholdsredigering
Sitecore Foundry 4.0 Introduktion til Indholdsredigering 18. oktober 2013 - Version 1.2 Pentia A/S Store Kongensgade 66, Baghuset 1264 København K Telefon: 7023 3330 E-mail: info@foreningssite.dk Indholdsfortegnelse
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.
Brugervejledning @venbuild Light
HÅNDBOG FOR SYSTEMADMINISTRATOR/REDAKTØR Side 1 INDHOLDSFORTEGNELSE OM @VENBUILD LIGHT... 3 ADGANG... 3 OVERSIGT OVER LÆRINGSOBJEKTER... 4 NAVIGATION... 5 OVERSIGT OVER VARIANTER... 5 OVERSIGT OVER EGNE
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
2. 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
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
OK Fonden. Umbraco CMS Quickguide
OK Fonden Umbraco CMS Quickguide 1 Indhold 1 Indhold... 2 2 Indledning... 3 2.1 Kompatible browsere... 3 2.2 Log ind i Umbraco... 3 2.3 Naviger i administrationsområdet... 4 2.4 Brug af træ menu... 5 3
Vejledning for LOF s afdelingshjemmeside
Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Marts 2012 Adresse: http://dinafdeling.lof.dk/ Rediger hjemmeside i Umbraco: http://dinafdeling.lof.dk/umbraco/ Mobilside: Der er lavet en
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:...
Hjemmeside manual. Indholdsfortegnelse. Noter: - 1 -
Hjemmeside manual Indholdsfortegnelse Login... - 2 - Login på din hjemmeside... - 2 - Profil... - 3 - Opdatering af profil oplysninger... - 3 - Menu... - 3 - Menupunkter... - 3 - Medier... - 4 - Hjemmesidens
Generelt Windows tidligere versioner... 1 Windows Apple Mac Log på... 2 Rediger dokumentet Tilføj et tillægsdokument...
Vejledning i brug af dli dokumenthåndteringssystemet til forfattere og referenter Indhold Vejledning i brug af dli dokumenthåndteringssystemet til forfattere og referenter... 1 Generelt... 1 Windows tidligere
Nvu hjemmesider hurtigt og let
Nvu hjemmesider hurtigt og let Brugervenlig og grafisk præsentation af textdokumenter var en af de store udfordringer indenfor softwareudvikling i slutningen af 1980erne. Tim Berners-Lee fra CERN udvikler
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
TYPO3 TRIN FOR TRIN 3
TYPO3 TRIN FOR TRIN 3 De indledende øvelser er fuldstændig de samme som i TYPO3 TRIN FOR TRIN 1 side 1-2. Du åbner altså din browser, skriver ale.dk/typo3 i Adressefeltet, og klikker på ordet Side i menuen
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.
Guide til oprettelse/redigering af events på bornholm.info
Guide til oprettelse/redigering af events på bornholm.info Trin Login Beskrivelse 1. Login på hjemmesiden: URL: http://bornholm.info/wp-admin/ Brugernavn: se mailen Adgangskode: se mailen Opret event 1.
Elevvejledning til SkoleKomNet - Min egen hjemmeside
Indledning...1 Sådan får du adgang...2 Dit KlasseWeb skrivebord Overblik...2 Dit arbejdsområde...3 Din hjemmeside på nettet...3 Sådan laver du en hjemmeside i 4 trin...3 Trin 1 Dit personlige billede på
Lundtofte skole 2007/08. Åbn FrontPageExpress og Explorer begge programmer skal være åbne når du laver hjemmesiden.
Det vigtigste Hjemmeside i FrontPageExpress Åbn FrontPageExpress og Explorer begge programmer skal være åbne når du laver hjemmesiden. Lav en mappe til din hjemmeside. Find først din mappe på skolens netværk,
5.0 Velkommen til manualen for kanalen HTML-grab Introduktion til kanalen HTML-grab kanalside Hvad er et spot?
5.0 Velkommen til manualen for kanalen HTML-grab 1 5.1 Introduktion til kanalen 1 5.2 HTML-grab kanalside 1 5.2.1 Hvad er et spot? 2 5.2.2 Opret et nyt spot 2 5.2.3 Aktivt og inaktivt spot 3 5.2.4 Rediger
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
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
Tilgængelighedsmanual Århus kommunes hjemmeside
Sensus ApS Torvet 3-5, 2.tv. DK-3400 Hillerød Telefon: +45 48 22 10 03 CVR nr.: DK11130976 www.sensus.dk sensus@sensus.dk Tilgængelighedsmanual Århus kommunes hjemmeside Version 1.4 Indhold 1 GRUNDLÆGGENDE...
Sitecore - 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
Daglig brug af JitBesked 2.0
Daglig brug af JitBesked 2.0 Indholdsfortegnelse Oprettelse af personer (modtagere)...3 Afsendelse af besked...4 Valg af flere modtagere...5 Valg af flere personer der ligger i rækkefølge...5 Valg af flere
Handlinger du kan foretage er f.eks at du kan : - Oprette, - markere og kopiere, klippe og slette filer eller mapper.
Guide Denne computer & Handlinger Af Frank Skibby Jensen 2003 www.3wave.dk I alt 5 Sider Handlinger du kan foretage er f.eks at du kan : Oprette, markere og kopiere, klippe og slette filer eller mapper.
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
IDAP manual Emission
IDAP manual Emission Dato: 08-06-2005 16:32:35 Indhold INDHOLD... 1 1 EMISSION... 2 1.1 KURVER... 2 1.2 RAPPORTER... 5 1.3 DATA REDIGERING... 6 1.3.1 Masse redigering... 7 1.3.2 Enkelt redigering... 10
FOTO strategi Gem Udvælg Rediger Gem
FOTO strategi 1. Gem billederne i en mappe på skrivebordet a. Opret en mappe på skrivebordet og navngiv den evt. med årstallet. b. Kopier billederne i kameraets DCIM-mappe og sæt den ind i mappen på skrivebordet.
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...
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
Den digitale Underviser. Clouds. Dropbox
Den digitale Underviser Clouds Dropbox Indhold Indhold... 1 Dropbox... 1 Installer Dropbox... 2 Åbn Dropbox fra egen computer... 2 Åbn Dropbox fra en anden computer... 3 Lagre filer i Dropbox (offline
Brugervejledning. Hjemmesider med Cmsimple.
1af23 Brugervejledning. Hjemmesider med Cmsimple. 1. Forord. Denne brugervejledning er fremstillet for at hjælpe personer ved Lokalhistorisk Arkiver i ny Sønderborg kommune, som kun har ringe kendskab
Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2
Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2 Indledning:... 2 Metode 1 en samling af sider, med kun en engelsk version:... 3 Metode 2 Eksisterende sider med både en dansk og en engelsk
Manual til WordPress CMS
Manual til WordPress CMS 1. Log ind på din Wordpress-side For at arbejde på din hjemmeside skal du først logge ind på administrationsdelen. Muligvis har du et direkte link på siden. Ellers er adressen
CSS fortsat: Boksmodel, floating & positionering
Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 1. Lidt om hvad du har lært Du har i øvelse
Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup
Niels Sundstrup Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Webteknologi - Carl- Henrik Nielsen - Syddansk Universitet, Kolding - Udlevering: 12. januar 2012 Aflevering: 19. januar
HTML5 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,
Tastemanual til Webbyggeren
Tastemanual til Webbyggeren Denne tastemanual er opbygget således, at eleverne skal lave deres hjemmeside i en allerede konstrueret hjemmesideskabelon, som de kan arbejde videre i, lægge tekst ind i, ændre
Filer Under menupunket Administration får du adgang til Indekssiden, hvor du finder symbolet for modulet Filer.
Filer Generelt Det ikke er tilladt at lagre informationer, der er i strid med gældende dansk lovgivning. For at kunne arbejde med filer på internetportalen skal du være logget ind med brug af medlemsnummer
Å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
IT-Brugerkursus. Modul 1 - Introduktion til skolens netværk og FC. Modul 1 - Introduktion til FC og Lectio. Printvenligt format. Indholdsfortegnelse
Modul 1 - Introduktion til FC og Lectio IT-Brugerkursus Modul 1 - Introduktion til skolens netværk og FC Printvenligt format Indholdsfortegnelse Formål og opbygning Opgave Vejledning til intranettet Åbne
Jysk Online Medie ApS - Vestergade 32, 8600 Silkeborg - Tlf.:
Brugervejledning til hjemmeside Kristian Kalajdzic Denne vejledning har til formål at hjælpe dig til at tilgå, vedligeholde og benytte din hjemmeside. Vejledningen henvender sig til hjemmesider bygget
Hjemmeside manual. Indholdsfortegnelse. Noter: - 1 -
Hjemmeside manual Indholdsfortegnelse Login... - 2 - Login på din hjemmeside og generel support info... - 2 - Kontrolpanel... - 3 - Opdatering af profil oplysninger... - 3 - Menu... - 4 - Menupunkter...
Konstruktion af websites - 1. kursusgang Øvelse 1 opsætning af tekst
Konstruktion af websites - 1. kursusgang Øvelse 1 opsætning af tekst Lav ved hjælp af teksteditor og browser en webside, der indeholder elementer som den herunder - tilføj desuden din udgave af hjemmeside
Afsnitstyper Susanne V. Andersen
Webbyggeren som videndelingsværktøj Afsnitstyper Susanne V. Andersen Webbyggeren som videndelingsværktøj 2005 Programdatateket 1. oplag, november 2005 ISBN 87-984429-5-3 Forfatter: Susanne V. Andersen
QuickMail som er beregnet til små hurtige meddelelser i ren tekst, uden logo, farver etc. (se QuickMailGuide)
TYPO3 Direct Mails Medlemsmails sendes fra Typo3 s Mailmodul, der er et plugin. Efter login skal du først klikke på Direct Mail i venstrekolonnen, og derefter på Nyhedsbrev Dinlokalafdeling i midterkolonnen,
Vi anbefaler, at du lader boksen med træffetider blive liggende på din afdelingsforside. Hvad der ellers skal være af indhold er op til jer.
1 Tips! På din forside har du mange muligheder for at tilføje forskellige komponenter, så du kan tilpasse siden til din afdeling eller organisations egne behov. Det er dog ikke alle komponenter, der kan
Vejledning i brug af dli dokumenthåndteringssystemet til virksomheder
Vejledning i brug af dli dokumenthåndteringssystemet til virksomheder Indhold Generelt... 1 Windows tidligere versioner... 1 Windows 10... 2 Apple Mac... 2 Log på... 2 Rediger dokumentet... 2 Tilføj et
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
DRFLive - dynamisk visning af resultater fra DRF Stævnesystem
DRFLive - dynamisk visning af resultater fra DRF Stævnesystem Resumé: Beskrivelse af program (DRFLive) til dynamisk visning af resulter fra DRF Stævnesystem Forfatter: Claus Hulstrøm Dato: 15. januar 2010
www.wikispaces.com Din egen hjemmeside UNI C 2008 Pædagogisk IT-kørekort Basismodul 3
Basismodul 3 www.wikispaces.com Din egen hjemmeside Wikispaces.com er et sted på internettet, hvor man har mulighed for at oprette sin egen hjemmeside sit eget sted. Den hjemmeside man får er ret enkel
E-MAIL G-MAIL (GOOGLE)
E-MAIL G-MAIL (GOOGLE) Erik Thorsager, Esbjerg. 3. udgave: G-mail Side 1 G-mail E-mail: Det engelske ord mail betyder post. E står for elektronisk. E-mail betyder altså elektronisk post. Elektronisk post
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
Dan Rolsted PIT. Side 1
Side 1 Side 2 Indledning I denne vejledning vil der vises hvordan Office 365 opsættes på de forskellige platforme, herunder IOS (ipad) og Android (HTC One). Derudover vil der også være vejledning til Windows
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
RIGSPOLITIET. Vejledning i konvertering. fra. Word -dokument. til. PDF-fil. på politi.dk. Rigspolitiets websektion
RIGSPOLITIET Vejledning i konvertering fra Word -dokument til PDF-fil på politi.dk Rigspolitiets websektion Indledning Da vi skal leve op til kravene om tilgængelighed på Internettet, skal alle tekster
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.