Webudvikleruddannelsen
|
|
|
- Sara Juhl
- 5 år siden
- Visninger:
Transkript
1 En Introduktion til, HTML og CSS
2 Indhold Webudvikler uddannelsen Techcollege Aalborg Internettet, Short story. Hvad er HTML? Basic HTML? Om HTML Tags Tekster i HTML Mere om tekster i HTML STYLING FONTS HTML ØVELSE 1 MORE HTML Get in Code-Mode
3 Webudvikler uddannelsen Techcollege Aalborg Fra midten af 1990érne opstod der et behov for en certificeret uddannelse idet den kommercielle brug af Internettet for alvor tog fart. I skrivende stund er Webudvikler uddannelsen en kort skolebaseret Erhvervsuddannelse der varer 1 år og 9 mdr. Uddannelsen består af et grundforløb (GF2, Evt.. GF1) og et hovedforløb. Webudvikler uddannelsen beskæftiger sig med udvikling af Webbaseret kommunikation og sigter efter det, der med et fint ord hedder Frontend Udvikling. Du kommer til at arbejde en del med objekorienteret programmering i form af Javascript og NodeJS, samt databaser og dynamisk Web. Grundforløbet varer 20 uger og afsluttes af en grundforløbsprøve eller Eksamen der skal bestås for at du kan starte på hovedforløbet. GF 1 (20 uger) GF 2 (20 uger) Hovedforløb (80 uger) I ALT (Eks. GF 1): 1 år og 9 mdr. På TCAA ser grundforløbet (GF2) lige nu ca. sådan her ud (20 uger): *Du kommer altså udover diverse grundfag og billedbehandling, til at arbejde mest med koderne der ligger bag siderne: (Blokken Webproduktion). Hovedforløbet varer 1,5 år, og her arbejder vi med de seneste teknologier herunder dynamisk web og forskellige CMS-systemer. Samarbejde og Værksted er en stor del af hovedforløbet. Du kommer til at arbejde med versionsstyring i de fleste af dine større projekter. Herover: uddannelsen varer altså (eksklusiv GF 1): 1 år og 9 mdr. og er en erhvervsuddannelse. *Hvis du har opfyldt visse gymnasiale krav, er uddannelsen et rigtigt godt udgangspunkt for en overbygning som f.eks. softwareudvikler, Multimediedesigner eller Datamatiker. Vi bestræber os på at følge de til en hver tid gældende standarder og den nyeste teknologi og de tendenser der er i en branche der udvikler sig eksplosivt. Vil du have et godt grundlag for at arbejde med Web og udvikling af applikationer, og har du en sund interesse for teknik og evne til at tilegne dig viden, er Webudvikler uddannelsen måske noget for dig. Læs mere om uddannelsen her:
4 Internettet, Short story. I starten af 1990 erne, var sider på Internettet ikke særligt spændende rent grafisk at se på. Muligheden for at kategorisere indhold, og dedikere områder i dokumenterne var i starten begrænset til overskrifter, lister og afsnit som de første versioner af HTML gav mulighed for. *Herover First Webpage : Opdeling af siden sker med Lister og Overskrifter. Fonten er Times New Roman Links er blå med understregning. *Tabeller blev i midten af 1990érne introduceret i HTML 3, og var det første element der anvendtes til at opdele sider i områder som f.eks. sektioner, footer eller navigation. Header Navigation Section Footer Herover: Tabel som du kender den fra et tekstbehandlings program Rækker og Kolonner bruges til at opdele dokumentet i områder.
5 Hvad er HTML? HTML (Hyper Text Markup Language) er det sprog som sider på Internettet og Browsere som f.eks.: Chrome eller Internet Explorer/Edge bruger for at vise indholdet. HTML blev opfundet af Tim Berners Lee i starten af 1990 erne, og er en protokol (Et regelsæt) for hvordan sider skal skrives. W3.org står for disse regler. *Du kan se sidernes HTML ved at højreklikke på Websider og vælge Vis Kildetekst (Chrome/Dansk) Sidens koder hedder også sidens Markup: Billede 1: Siden åbnet. W3Schools.com er et rigtigt godt sted at starte med at lære HTML og meget mere. De har en fin Online Editor hvor du kan indtaste og afprøve dine koder i en browser. Billede 2: Du kan lave dine egne HTML sider! I mappen Root-Start ligger et helt tomt HTML dokument, det hedder index.html, det kan du ændre f-eks. Med Notepad som editor. Højreklik, vælg Åbn med Notesblok. Video: Introduktion til HTML:
6 Basic HTML? Standard HTML ser sådan her ud: <!DOCTYPE html> <html> </html> <head> <title>sidens Titel</title> </head> <body> </body> Øvelse 1: Med Notepad, prøv at indtaste standard HTML i det tomme HTML Dokument. Gem filen og åbn den med Browseren. Se hvad der sker! Forklaring: Som du kan se, viser browseren ikke noget indhold. Standard Markup indeholder en række Tags der fortæller browsere hvad og hvordan dette skal vises. Selve indholdet skal stå i <body>. <!DOCTYPE html> Fortæller Browseren at der er tale om HTML! <html> <head> <title> <body> Her starter HTML delen! Head tagget indeholder f.eks. sidens titel! Sidens Titel, dette tag står i head Tagget! Selve indholdet skal så i body Tagget! Du har altså et tomt HTML dokument med en titel (Det der vises på fanebladet). Prøv at skrive eet eller andet i body tagget, f.eks.. <body>her kommer indholdet så!</body> Gem siden prøv at se den i en Browser igen.
7 Om HTML Tags HTML består af tags! Udover de fem Standard Tags består HTML af et væld af koder der fortæller Browsere hvad indholdet er, og hvordan det skal vises. Som du måske også har bemærket er de fleste Tags startet og afsluttet. Du afslutter tags med Slash: / <title> Starter title tagget! </title> Afslutter title tagget! Prøv nu at indtaste flg. Tekst i body tagget inkl. 2 overskrifter og med afsnit: HTML Hyper Text Markup Language Sider på Nettet består af koder og indhold, koderne betyder at indholdet tolkes på forskellig måde. HTML er den standard langt de fleste ting du ser på Internettet er opbygget af. HTML blev opfundet af Tim Berners Lee i starten af 1990 erne. W3.org sætter standarden for de regler der gælder på Nettet, En standard eller en regel kalder man også en protokol. Du kan lære meget mere på w3schools.com! *Gem filen i Notepad, prøv at vise den igen i en browser. Billede 3: Sådan ser teksten ud i en Browser! Al tekst står i een lang smøre, uden overskrifter og afsnit, forklaring: Browseren ved ikke hvad der er afsnit og tolker ikke linjeskift i koden??
8 Tekster i HTML Tekst i HTML. Du skal fortælle Browseren hvordan den skal læse dit indhold! I teksten fra før var der 2 overskrifter (Overskrift1 og Overskrift2) samt 3 afsnit. Overskrifter (Headings) og Afsnit (Paragraphs) er det der hedder Block Elementer i HTML. Block elementer optager hele body-bredden. Block Elementer laver linjeskift! Basic Tekst Tags: <h1>heading One</h1> Den største og vigtigste Heading <h2>heading Two</h2> Lidt mindre overskrift <p>heading One</p> Paragraph eller Afsnit! Hvert afsnit laver et linjeskift. Prøv at rette din kode med Notepad, sæt 2 overskrifter og 3 afsnit ind i din Markup: Se om du kan få siden til at vises som ovenstående billede. *Husk at du skal afslutte de fleste tags i HTML. Hvis ikke du afslutter et tag fortsætter det! Prøv at eksperimenter lidt med dine tags. Sæt evt. flere afsnit ind, prøv at ændre dine overskrifter: HTML giver mulighed for 6 forskellige overskrifter, H6 er den mindste! I mappen Root start ligger der et tomt HTML dokument og en mappe med billeder du kan prøve at sætte ind i dit HTML dokument. Billede i HTML: <img src="img/cake.png" alt="yummy" /> Link i HTML: <a href="mypage.html"/>mypage</a>
9 Mere om tekster i HTML *Tekst hedder Fonts når det drejer sig om HTML. Der er 2 overordnede tags der drejer sig om fonts i HTML MarkUp: <p> Paragraph eller Brødtekst (Indholdsteksten) <h1> Headings (h1 h6) Heading 1 er den største (Overskrift 1) *Tags som f.eks. h2, p mm. Har nogle standard indstillinger i Browseren hvis ikke du styler dem. <p> eller Paragraph har f.eks. følgende egenskaber: Font-Family: Times New Roman; Font-size: medium / 12pt / 16px / 1em / 1rem / 100%; *Herover (CSS) Standard størrelsen på en Paragraph eller brødtekst: <p> er enten: Medium 12pt: (Points) 16px: (Pixel) 1em: (Emphasis) 12rem: (Root Emphasis) 100%: (100% af standard) Ovenstående properties giver alle det samme resultat, men har forskellige egenskaber. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>my Website</title> </head> <body> <p> Denne tekst står som standard: Times New Roman størrelse 1em! </p> </body> *Med andre ord: Hvis ikke du bestemmer hvordan din tekst skal se ud vil den som standard i de fleste browsere stå med: Times New Roman / 1em. *NB: <meta charset="utf-8" /> (Unicode Transformation Format 8-bit) er uden at gå i detaljer, en del af Unicode-Tegnsættet. *Du skal evt. afhængigt af indhold, sprog, styresystem, installerede sprog og browserindstillinger anvende den hvis browseren ikke viser specialtegn som æ, ø og å korrekt.
10 STYLING FONTS INLINE STYLING Browserne bestemte hvordan de første sider på Internettet så ud, farver og teksttyper som vi kender det i dag kom starten af 1990érne. I takt med udbredelsen af Internettet opstod et behov for grafisk at påvirke brugernes oplevelse. Style blev introduceret som begreb. Style påførtes det Tag der skulle styles. Eks.: <h1 style= color: red; >Inline Style</h1> *Overskrift 1 har fået en Style deklaration (Declaration): Property (color) der har en Value (red)! <h1 style= font-family: Consolas; >Consolas</h1> *Style Property color ændret til font-family og Value: Consolas. Nu har jeg en anden font. Deklaration på hele siden. Eks.: <body style= font-family: Consolas; >Consolas på alt i body</body> Som du kan se kan du vælge at lægge din Style i body-tagget, og hermed ramme al din tekst i body tagget. Du kan lægge andre styles på forskellige Tags i din MarkUp, eller style h1, h2 eller p på hver deres måde. HUSK! Browsere læser koden oppefra og ned, derfor kan du overskrive tidligere deklarationer! Eks.: <body style= font-family: Consolas; > <h1>consolas fonten på alt i body<h1> <h2 style= font-family: Times New Roman ; >Undtagen her!</h2> </body> Inline styling er den stærkeste måde at style dit HTML dokument på, da den læses direkte på de enkelte tags, men den er samtidigt omfattende og svær at vedligeholde idet der skal rettes rigtig mange steder hvis f.eks. fonten eller designet skal ændres. Style Declarations direkte i din MarkUp kalder man Inline Styling! *Anatomy of styles: Declaration Seclector Property Value
11 INTERNAL STYLESHEETS Efterhånden som siderne voksede i omfang blev det overordnede tag <style> introduceret. Style-tagget placeres i <head> tagget og rammer via Selectors de forskellige tags på siden. Denne måde at style på kaldes Internal Stylesheet og er en noget nemmere måde at style et helt dokument på. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>my Website</title> <style> body { font-family: Consolas; </style> </head> <body> <p> Denne tekst står nu med fonten Consolas! </p> </body> EKSEMPEL 2 *Du kan lægge alle Style Declarations vedr. din side i <style> tagget. <style> body { font-family: Consolas; h2 { font-size: 1.4em; h3 { font-size: 1.2em; </style> *I eksemplet herover er der 3 Style Declarations der: Sætter den overordnede font til Consolas, og laver h2 og h3 lidt mindre end normalt. (Browserstandard for h2 = 1.5em). Internal StyleSheets er noget nemmere at vedligeholde en side på. Men du skal stadig ind på hver enkelt HTML dokument i dit Website og ændre dine deklarationer.
12 EXTERNAL STYLESHEETS Som du måske kan forestille dig er det smart at ændre f.eks. indstillinger for tags i Head Tagget, og endnu smartere hvis du kunne ændre f.eks. farver for fonte for alle dine sider et enkelt sted. Det kan du med et External Stylesheet. Et External Stylesheet er et dokument med Extension:.css som du refererer til via en sti i <Head>. <link href="content/styles/main.css" rel="stylesheet" /> (Stien til CSS filen) (Relationen= Stylesheet) Det ser sådan her ud i din MarkUp: <head> <meta charset="utf-8" /> <title>my Website</title> <link href="content/styles/main.css" rel="stylesheet" /> </head> I stedet for <style> tagget er der et link med en href (Hyper Reference) til en CSS fil (main.css). *Herover: Eksempel på Extern Stylesheet (main.css) i mappen: content/styles/ SAME BUSINESS? Du bruger samme metode som i dit Internal StyleSheet når du laver CSS i et Extern Stylesheet som du gjorde i Internal StyleSheet. Du skal bare ikke have <style> Tagget med: <style> body { font-family: Consolas; h2 { font-size: 1.4em; h3 { font-size: 1.2em; </style> body { font-family: Consolas; h2 { font-size: 1.4em; h3 { font-size: 1.2em; *Internal Stylesheet *External Stylesheet Du kan referere til flere StyleSheets, Husk at Browseren læser oppefra og ned, og derfor overskriver de sidste styles hvis der er samme deklarationer i dem!
13 HTML ØVELSE 1 Prøv at lave en mappe f.eks. på dit skrivebord, kald den evt. html-01. Lav nu en text fil i mappen: *Min tekst fil hedder index (Startsiden på de fleste websider) og den har extension:.txt fordi den er lavet med Notepad. Du skal slå din extension/efternavne til hvis ikke du kan se dem! Indtast teksten herunder. HyperText Markup Language (HTML). HTML er et opmærkningssprog, der primært har til formål at strukturere indholdet på en hjemmeside og få tekst og billeder til at virke som links til andre html-sider. Markup betyder at "opmærke". I hjemmesidesammenhæng vil det sige at html definerer indhold på websider, f.eks. kan en tekst markeres som overskrift eller brødtekst, arrangeres i en punktopstilling eller tabel og et hyperlink kan indsættes som klikbar tekst. Dermed kan webbrowsere som f.eks. Firefox, MS Internet Explorer, Safari, Opera eller Google Chrome, skelne de forskellige teksttyper fra hinanden og vise indholdet formateret efter hvilken type det er markeret som. Typisk vil f.eks. overskrifter vises med forstørret fed skrift og hyperlinks med blå skrift. Html indeholder mulighed for med CSS at bestemme mere detaljeret over udseendet af f.eks. overskrifter, tabeller, hyperlink og indlejring af billeder. Html-filer bruges på internettet, især på World Wide Web. Html filer har Extension:.Html eller.htm. Luk filen. Omdøb Extension til HTM Eller HTML: *Herover: Ikonet er skiftet, min fil er nu et HTML dokument og åbnes med Google Chrome. Prøv at få teksten til at stå som eksempel med afsnit og overskrift! NB. Fonten hedder Consolas!
14 MORE HTML LINKS o o o o o CHANNEL 9 Bob Tabor fra Microsoft har lavet en række videoer omkring HTML5 og CSS3 på: Du skal se de første 2 videoer inden næste gang: Series Introduction - 01 Creating Your First HTML5 Web Page 02 HUSK: *Browsere læser koderne oppefra og ned! Markup består af Tags Tags er normalvis afsluttede Du kan kombinere Tags: <b><i>bold and <u>italic</u></i></b>
15 Get in Code-Mode Du kan fortælle Browseren at den f.eks. skal bruge en anden font end Browserens standard i dit head tag. Det ser sådan her ud: <!DOCTYPE html> <html> <head> <title>text Styling</title> </head> <body> </body> <style> </style> body{ font-family: arial; color: blue; </html> *I style-tagget fortæller jeg at al tekst i body-tagget skal anvende fonten: Arial med blå farve. Du kan læse om HTML. CSS, Javasript og meget mere på:
Hvad er HTML og CSS? EN INTRODUKTION TIL HTML OG CSS
Hvad er HTML og CSS? EN INTRODUKTION TIL HTML OG CSS Webudvikler Uddannelsen Tech College Aalborg. 2018 INDHOLD INTERNETTET, THE SHORT STORY... Fejl! Bogmærke er ikke defineret. DE FØRSTE NETVÆRK... Fejl!
Grundforløb 1 TEMA2 HTML
Grundforløb 1 TEMA2 HTML HTML KNOWLEDGE BASE Mere HTML og CSS KNOWLEDGE BASE HTML Indhold HVAD ER HTML? WEBSITES I DAG BASIC HTML TAGS MARKUP = HTML TEKST I HTML STANDARDER I HTML ELEMENTERNE I HTML MERE
PHP Quick Teknisk Ordbog
PHP Quick Teknisk Ordbog Af Daniel Pedersen PHP Quick Teknisk Ordbog 1 Indhold De mest brugte tekniske udtryk benyttet inden for web udvikling. Du vil kunne slå de enkelte ord op og læse om hvad de betyder,
6 Ugers Digital Markedsførings Uddannelse. Online Marketing SEO Præsentation Anders Sevelsted Bigum&Co Amagerbrogade
6 Ugers Digital Markedsførings Uddannelse Bigum&Co Kursist hemmeligt Anders Sevelsted Underviser & Foredragsholder Teori Vs. Praksis Viden Vs. Færdigheder Hvad forventes det i kan når vi er færdig? Skal
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
Tillykke 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
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
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
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
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
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
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
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
TinyMCE Bruger Guide. Forord. Contents
TinyMCE Bruger Guide Forord TinyMCE er en platformuafhængig web baseret Javascript HTML WYSIWYG (What You See Is What You Get) editor udgivet som Open Source under LGPL af Moxiecode Systems AB. Dette er
Velkommen til manualen for Styleclasses Introduktion til Styleclasses Rediger styleclass
14.2.0 Velkommen til manualen for Styleclasses 1 14.2.1 Introduktion til Styleclasses 1 14.2.2 Ny styleclass 1 14.2.3 Rediger styleclass 2 14.2.3.1 Custom 3 14.2.3.2 Setup 3 14.2.3.3 Slet 4 14.2.4 Problemer
GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE
GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE 2 REDESIGN AF FUTURECOM BUSINESS SOLUTIONS HJEMMESIDE OPGAVEN Den gamle hjemmeside skulles redesignes da den daværende hjemmeside var forældet (indhold og udseende)
CentOS 7. Lavet af Ali Sarac og Andreas Jensen
CentOS 7 Lavet af Ali Sarac og Andreas Jensen 3.8.2017 Indholdsfortegnelse Konklusion... 3 Installer CentOS 7 i VMware... 3 Installation af Apache, PHP5 og vores HTML side... 7 2.4 spørgsmål... 12 Kildekoder...
Mini Afsluttende Projekt
Mini Afsluttende Projekt Tobias Sønderskov Hansen og Lau Lund Leadbetter Roskilde Tekniske Gymnasium Klasse 2.4 - IT 2013 Side 1 af 18 Indholdsfortegnelse Indledning... 3 Mindmap... 3 User Stories... 4
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
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
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
Grafik & Billede weloveorganic.com webshop
Grafik & Billede weloveorganic.com webshop Opgaven og afsender: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt
GRAFISK WORKFLOW - RESPONSIV WEBSIDE
GRAFISK WORKFLOW - RESPONSIV WEBSIDE REDEGØRELSE Opgavebeskrivelse Redesign hjemmeside for Murerfirmaet Døssing i responsivt design, som udstråler professionalisme. Der skulle være en referenceside med
Procesbeskrivelse - Webprogrammering
Procesbeskrivelse - Webprogrammering Indholdsfortegnelse Forudsætninger... 1 Konceptet... 2 Hjemmesiden... 2 Server-side... 3 Filstrukturen... 3 Databasehåndtering og serverforbindelse... 4 Client-side...
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,
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
grafisk workflow OPGAVE: EMBRACE-IT WEBSITE
grafisk workflow OPGAVE: EMBRACE-IT WEBSITE BESKRIVELSE GRAFISK WORKFLOW BESKRIVELSE Den tidligere nævnte virksomhed Embrace-IT, forsøger i takt med at virksomhen vokser, at opdatere og optimere deres
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å
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
Introduktion til redigeringsfaciliteterne
Sitecore Foundry 3.0 Introduktion til redigeringsfaciliteterne 25. april 2012 - Version 1.2 Pentia A/S Store Kongensgade 66, Baghuset 1264 København K Telefon: 7023 3330 E-mail: info@foreningssite.dk Indholdsfortegnelse
Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS
Opgavebeskrivelse Lav en webside om i Sønderjylland. Opgaven fører dig igennem de basale ting, hvad angår opbygningen af en side med CSS. Der er ikke tale om et komplet site, men du kan bruge opgaven som
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
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
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.
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...
ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på
Grafisk design Design af hjemmeside til indretningsarkitekt med firma navn enrico indret, som jeg tidligere har designet logo for. Firmaet laver udelukkende erhvervsindretning og målgruppen for sitet er
OPGAVE: WELOVEORGANIC.COM WEBSHOP
OPGAVE: WELOVEORGANIC.COM WEBSHOP OPGAVEN OG AFSENDER: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt ønsker
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
Undervisningsbeskrivelse
Undervisningsbeskrivelse Stamoplysninger til brug ved prøver til gymnasiale uddannelser Termin Juni 2016 Institution CampusVejle Uddannelse Fag og niveau Lærer(e) Hold Hhx Informationsteknologi C Peter
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
Byg et website med Dreamweaver
Byg et website med Dreamweaver I denne øvelse skal vi opbygge et website for Hotel Holiday i Dreamweaver. Det færdige site kan ses her: http://www.itu.dk/people/khhp/hotel_holidays/velkommen.html Øvelsen
Grafisk produktion og workflow
Grafisk produktion og workflow Helle Nicolaysen svendeprøve juni 2016 Kunde (fiktiv) Bomholt er en virksomhed der laver og sælger plankeborde og som nu ønsker en helhedsorienteret grafisk designlinje,
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
Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt.
HTML & CSS 1 Efterlyst! All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Introduktion
Kort om baggrund for kurset, aktører, kodning.dk
præsentation 1 2 Kort om baggrund for kurset, aktører, kodning.dk 3 Kort rammesætning hvorfor er det vigtigt med fokus på programmering også i en skolekontekst særligt slide 7 er værd at dykke ned i og
Webside score ming-hotels.com
Webside score ming-hotels.com Genereret Maj 21 2019 14:35 PM Scoren er 54/100 SEO Indhold Titel Home Ming Hotels Længde : 18 Perfekt, din titel indeholder mellem 10 og 70 bogstaver. Beskrivelse Længde
GRAFISK PRODUKTION & WORKFLOW. Endotest website
GRAFISK PRODUKTION & WORKFLOW Endotest website DOKUMENTATION OPGAVEN: Endotest ApS ønskede at redesigne deres hjemmeside, så den fremstår mere professionel og enkel. Derudover skal det nye site præsentere
Grafisk 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
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,
Se hjemmesiden på:
Se hjemmesiden på: www.share-connect.dk Dokumentation Opgavebeskrivelse Det lokale erhvervsnetværk, Share & Connect skulle have designet og programmeret sin nye hjemmeside, hvor de ville kunne have mulighed
CSS 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
GRAFISK DESIGN. Min personlige e-portfolio
GRAFISK DESIGN Min personlige e-portfolio 2 OPGAVEBESKRIVELSE Produkt: E-portfolio Farve: RGB Programmer: Brackets, Photoshop og Illustrator Min personlige e-portfolio er udarbejdet som et led i min uddannelse
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
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
GRAFISK WORKFLOW H1 MARIA SCHELDE
GRAFISK WORKFLOW H1 MARIA SCHELDE DOKUMENTATION Opgaven Arkitekt Mette Schelde skulle have designet og programmeret et website, hvorpå hun kunne præsentere hendes produkter. Designkrav Sitet skal være
! }! FORSIDE! <html>! <head>!
FORSIDE opgaver body { background-color:#33adff; } header { background:#33adff; color:white; text-align:center; padding:5px;
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,
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,
Webside 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)
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
GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2.
GRAFISK PRODUKTION OG WORK- FLOW CSS Wrapper paragraph h1 h2 DREAMWEAVER CS5 Class Tags Kodning Design a.link, a.hover, a.visited HTML Kundekontakt Komposition og modulopbygning Skelet Pixels Layout Usabillity
Vejledning i udsendelse af s
Side 1 af 5 Vejledning i udsendelse af e-mails Åben en internet browser: Vælg din klubs webadresse og log på siden. Eller log på via ngfp.dk: Nu kommer der en Administrator menu frem som kan have flere
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
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
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,
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
WORKFLOW. RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling. www.mads-pj.dk/clothesly
WORKFLOW RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling www.mads-pj.dk/clothesly DOKUMENTATION OPGAVE Opgaven jeg stillede mig selv, var at designe og kode et koncept til en webshop
Serversideprogrammering, CMS og eshop. Dag 1: Introduktion og serverside programmering Niels Østergaard
Serversideprogrammering, CMS og eshop Dag 1: Introduktion og serverside programmering Niels Østergaard Dagens program Introduktion til forløbet Begrebet serverside Introduktion til PHP-programmering Tilmelding
KODNING AF RESPONSIV DESIGN
Grafisk Workflow REDEGØRELSE GRAFISK WORKFLOW 39 OPGAVEN Frk. Nielsens rengøringsfirma kom til os for at få lavet ny hjemmeside. Hun var træt af den gamle, da hun ikke kunne rette i indholdet, og valgte
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,
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
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,
GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL
GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden
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
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
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 da- tafiler på nettet; men de fungerer typisk på den måde,
Introduktion til redigeringsfaciliteterne
Introduktion til redigeringsfaciliteterne 11. august 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...
Ø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
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
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.
Lav en hjemme side der kan sælge fly billetter til en stor i Europa.
EKSAMENS OPGAVE Lav en hjemme side der kan sælge fly billetter til en stor i Europa. Det første jeg startede ud med var at brainstorme hvad det var jeg skulle bruge i min side da jeg nu ved hvad den skal
MANUAL - Joomla! Version 1
MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 2 Log ind... 2 Ret i en artikel, der allerede er oprettet... 3 Opret ny artikel... 6 a) Skriv direkte i tekstfelt... 7 b) Indsæt tekst
UMS Velkomst Byder nye brugere velkommen til skolen
Forord UMS Velkomst modulet giver mulighed for at give de kommende studerende et godt førstehåndsindtryk ved skolestart - den indledende kontakt til de studerende er umådelig vigtig. Velkomst modulet består
Namespaces. Vi kan kvalificere elementer på denne måde: <?xml version="1.0" encoding="iso-8859-1"?>
Namespaces...1 Default namespace:...6 Præfiks:...7 To slags navne i XML:...11 Standard namespaces:...14 RDF Resource Description Framework:...18 Attributter:...19 DTD skemaer og namespaces:...21 Namespaces.
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
Webside score seo-haip.com
Webside score seo-haip.com Genereret Maj 08 2019 15:11 PM Scoren er 44/100 SEO Indhold Titel Seo Haip Længde : 8 Kan optimeres; Optimalt bør din titel indeholde mellem 10 og 70 karakterer (med mellemrum)
Grafisk Workflow. Website til European Blues Challenge
Grafisk Workflow Website til European Blues Challenge Opgaven: European Blues Challenge er en europæisk blues festival som skifter lokation hvert år. I 2017 kommer festivallen til Horsens, og vores kunde
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
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
Redaktørmanual TYPO3 Version 6.2
Redaktørmanual TYPO3 Version 6.2 www.t3cms.dk TYPO3 Manual Version 6.2 Side 1 af 20 T3CMS Tlf: 70 25 00 22 Indholdsfortegnelse Generel info om TYPO3 3 Rediger din side 4-6 Indsættelse af links 7 Indsæt
UCSJ DIGITAL. Tips og Tricks
UCSJ DIGITAL Table of Contents Webbrowsere...3 Slet midlertidige filer og cookies... 4 Mobile enheder...8 UCSJ mail på smartphone og tablet... 9 Video mm....10 Rip en DVD... 11 Brug Handbrake til at reducere
Dokumentation af hjemmeside/studieweb
Dokumentation af hjemmeside/studieweb Jeg startede med at bruge ca. to kom/it moduler på at genopfriske kodning i html, siden at jeg har lavet hjemmeside i html og css før, men det er efterhånden et par
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
Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed
Redegørelse Grafisk Opgaven At redesigne en hjemmeside for AGF fanclub, som har et mere moderne look og et nyhedsarkiv som er let oversskueligt. Hjemmesiden er en opgave jeg selv har stillet mig og kunne
Vejledning til. LearnSpace
Vejledning til LearnSpace Version 13. 08. 2015 Indholdsfortegnelse Om LearnSpace... 2 Oprette et nyt kursus i egen afdeling... 3 Aktivere selvtilmelding til et kursus... 5 Tilmelde undervisere der må redigere
Beginning CSS and Web Development kap. 1 11
Beginning CSS and Web Development kap. 1 11 Plan Xhtml opbygning CSS Divs, class, id Baggrunde, farver og billeder Tekst Links Lister Tabeller Stand up programmering Xhtml vs. html i XHTML skal alle elementer
Manual Version 2. til oprettelse af hjemmesider for landsbyer i Rebild kommune
Manual Version 2 til oprettelse af hjemmesider for landsbyer i Rebild kommune Oversigt: Login Hjemmeside...... side 3 Login Administrationsmodul... side 5 Kategorier.. side 6 Opret/rediger første side...
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
Her ser i hvorledes man nemt kan installere en række nyttige programmer, uden at få andet end selv programmet installeret. på WWW.NINITE.
Når man nu har en frisk ny Windows installation, så gælder det om at tilpasse den så den er brugbar men også at få de hjælpe of vedligeholdes programmer som gør maskinen kan sikres mod diverse malware