Grundforløb 1 TEMA2 HTML
|
|
|
- Signe Jakobsen
- 5 år siden
- Visninger:
Transkript
1 Grundforløb 1 TEMA2 HTML HTML KNOWLEDGE BASE Mere HTML og CSS KNOWLEDGE BASE HTML
2 Indhold HVAD ER HTML? WEBSITES I DAG BASIC HTML TAGS MARKUP = HTML TEKST I HTML STANDARDER I HTML ELEMENTERNE I HTML MERE OM BLOCK OG IN-LINE ELEMENTER MARGIN OG PADDING STYLING FONTS LINKS OG ANCHORS BILLEDER I HTML CLASSES, COMBINATORS OG ID S LISTER I HTML MERE OM LISTER I HTML MENUER I LISTER DIV / SPAN OPDELING AF SIDEN HTML5 TAGS SEMANTIK I HTML5 TABELLER LINKS
3 HVAD ER HTML? Et HTML dokument har extension ( Det der kommer efter punktummet ): html / htm: *Herover: 2 html filer: Én.html, og én.htm. (HTML filer vises normalt i en browser). *(Hvis du laver dit HTML dokument i Notepad, skal du helst gemme i: UTF-8 format)! DE 5 STANDARD HTML5 TAGS: <!DOCTYPE html> <html> <head> <title> <body> Fortæller Browseren at der er tale om HTML5! Her starter HTML delen! Head tagget indeholder f.eks. sidens titel og scripts! Sidens Titel, dette tag står i head Tagget! Selve indholdet skal stå i body Tagget! Et tomt HTML dokument uden indhold ser sådan her ud (HTML5): <!DOCTYPE html> <html> HTML Start <head> Head Start <title>sidens Titel</title> </html> </head> <body> </body> Head End Body Start Body End HTML End HTML består af en række koder: (Tags). De fleste er afsluttede: </body> Enkelte Tags er ikke afsluttede (Kan stå alene): <br /> *Tags kan have ATTRIBUTTER! Eks.: (Attributter = Tilføjelser f.eks.: style på body tagget). <body style="color: grey;"> HTML Timeline:
4 WEBSITES I DAG Et Website, består som regel af andet end HTML. Et Website i dag, består oftest af mere og andet end HTML filer. Det kunne være: CSS Cascading StyleSheets Styling på HTML/Markup JavaScript Javascripts Clientbaseret OOP Databaser Databaser / SQL mm. F.eks.: Dynamiske sider EKSEMPEL StyleSheets JavaScripts Databaser Indholdet i dit HTML kaldes for MarkUp. Din MarkUp består af dine HTML tags, Attributter mm. I din HTML kan du have henvisninger og links til CSS, JavaScripts og Databaser. Eksempel på link til CSS: <link href="content/css/main.css" rel="stylesheet" /> Eksempel på link til JavaScript: <script src="content/js/myscript.js"></script> Mappestruktur i dit website. Udover Stylesheets og JavaScripts, består websites tit også af billeder og evt. undersider, og for at kunne finde rundt i dine filer, bør du gøre dig nogle overvejelser om, hvordan dine filer skal organiseres og navngives. *Lav mapper til billeder, Scripts og Stylesheets. (Eks.: content / css / main.css).
5 BASIC HTML TAGS Helt basale HTML tags BASIC HTML TAGS <a> Anchors Links <br > Linebreak Linjeskift <hr > Horizontal Rule Linjeskift <h1> - <h6> Headings Overskrifter (h1 til h6) <p> Paragraph Afsnit <header> Header Indeholder f.eks. overskrifter <footer> Footer Afslutning af sider eller artikler <nav> Navigation Navigationer / Menu <section> Section Sektioner af relateret indhold <article> Article Artikler i sektioner <ul> Unordered List Punktopstilling 1 <ol> Ordered List Punktopstilling 2 <li> ListItem Listepunkt i Listen <img> Image Image / Billede i HTML <link> Link / CSS I forbindelse med ekstern CSS <tabel> Table Tabel, Start tag <tr> Table Row Række i tabellen <td> Table Data Kolonne i rækkerne i tabellen Positioneringer: <span> Span Område : Inline-Element <div> Diversion Område : Block-Element
6 MARKUP = HTML Din HTML kaldes også Markup! Den sidste version af HTML, hedder: HTML5. HTML5 indeholder en del Specialtags, der fortæller hvilket indhold de har, f.eks.: <section> Indhold af relateret indhold, f.eks.: Sports sektionen. <article> Tekst og billeder, der giver mening i sig selv (En artikel) <header> Samling af overskrifter i en artikel, sektion eller side. <footer> Afslutning af en artikel eller en side. <nav> Navigation, indeholder menuer eller navigation. SEMANTIK Semantic Correct HTML, er at anvende de rigtige Tags til de rigtige ting, Eks.: <section> <h1>section One</h1> <article> <header> <h3>article One</h3> <h4>article One Subheading</h4> </header> <p>her kommer en Paragraph, en Paragraph er et afsnit i teksten</p> <p>paragraphs laver "afsnit", eller linjeskift i teksten fordi de er blockelementer</p> <footer> <p>her er footeren i artiklen så</p> </footer> </article> </section> *Sektionen med artiklen ser sådan her ud, i en browser: *NB. H1 (Heading One) er brugt som hovedoverskrift i sektionen. I artiklens header, er der brugt to overskrifter (h3 + h4). (Pas på med ikke at bruge for mange h1)!
7 TEKST I HTML Tekster hedder Fonts i HTML. De var noget af det første der kom i HTML. Du kan Tagge tekst i HTML, akkurat som du gør i f.eks. Word. OVERSKRIFTER Der er 6 overskrifter i HTML: H1 ~ H6 H1 er den største, og vigtigste overskrift. H6 er den mindste: <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> AFSNIT I HTML Et afsnit i en tekst, hedder Paragraph, og tagges med: <p> Både Headings og Paragraphs laver linjeskift: <h1>her er en overskrift</h1> <h3>her er en under-overskrift</h3> <p>her kommer første afsnit i teksten, et afsnit skrives i et "P"-tag.</p> <p>her kommer andet afsnit i teksten, hvert P tag laver linjeskift.</p> *Brug afsnit til at gøre teksten lettere at læse. Pas på med meget lange afsnit! STANDARDER Hvis ikke du gør noget, så gælder standarderne. *Browserne har standardindstillinger, altså hvilke baggrundsfarver, teksttyper, margener og meget mere. Disse indstillinger er mere eller mindre éns for alle browsere. Standarden for tekst, eller font er normalt Times New Roman, Sort, 1em i Paragraphs. Browsere har standard marginer, og paddings, og det er disse du ændrer, når du bruger CSS og styling i din HTML. Eks.: <h1 style="color: red;"> Her er Heading: h1 ændret, fra standard sort til rød tekstfarve (Attributten: style="color: red;"). Vi ser lige lidt mere på browsernes standardindstillinger på næste side.
8 STANDARDER I HTML *Browsere har standard indstillinger, herunder margen, farver og fonte. Tekst hedder fonts. Der er 2 overordnede tags der drejer sig om fonts i HTML MarkUp: <p> Paragraph eller Brødtekst (Indholdsteksten) P = Afsnit. <h?> Headings (h1 h6) Heading 1 er den største: (Overskrift 1). *Tags som f.eks. h2, p mm. Har nogle standardindstillinger i Browseren hvis ikke du styler dem. <p> eller Paragraph har f.eks. følgende egenskaber som standard: font-family: Times New Roman; font-size: medium / 12pt / 16px / 1em / 1rem / 100%; color: black; *Herover (CSS) Standard størrelsen på en Paragraph eller brødtekst: <p> er enten: Medium 12pt: (Points) 16px: (Pixel) 1em: (Emphasis) 1rem: (Root Emphasis) 100%: (100% af standard) *Ovenstående properties giver alle det samme resultat eller størrelse på fonten. Men de har forskellige egenskaber i forhold til andre elementer. Eks.: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>my Website</title> </head> <body> <p> Denne tekst står som standard med: 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 / sort. *NB: <meta charset="utf-8" /> (Unicode Transformation Format 8-bit) er, uden at gå i detaljer, en del af Unicode-Tegnsættet. Se om din side viser Æ, Ø, og Å? (Se evt. side 3). *Hvis du laver dit HTML i Notepad, skal du gemme i utf-8 format.
9 ELEMENTERNE I HTML Markup, eller HTML er opbygget af elementer. Der er grundlæggende 2 typer af elementer i HTML: Block-Elementer Inline-Elementer Dvs. at browserne tolker / viser elementerne som værende enten den ene, eller den anden type af element. Og viser dem (Display) på den ene eller den anden måde i browserne. *Man siger at Elementets Display Property, er enten: Block eller Inline-Element. BLOCK / INLINE-ELEMENTER Headings eller Overskrifter samt Paragraphs (afsnit), er Block-Elementer, der groft sagt fylder hele bredden af det, de ligger i, og derfor laver en ny linje for hvert nyt element: *Herunder: Links eller <a> (Anchor) er derimod Inline Elementer, fylder kun indholdet, og laver derfor ikke linjeskift: *Se din Markup på en hvilken som helst side, med de indbyggede udviklerværktøjer i Browserne (DOM-Explorer). Vi ser på DOM lige om lidt. HISTORISK SET Opdelingen af siderne i blokke af indhold, skete i starten simpelthen med overskrifter og linjeskift (Block-elementer), eller ved at opstille dele af siderne i listeform. (Se eksempel på First Webpage ever nederst på denne side). Man var begrænset af de få HTML tags der fandtes dengang i starten af 1990 erne, nemlig: overskrifter, afsnit, lister, Links (anchors: <a>) mm. Den dag i dag, er elementernes Display Property stadig afgørende for hvordan de vises i browserne. Og styling og design er i høj grad muligheden for at påvirke disse egenskaber. *(Du kan ændre elementernes Display-Property (Den måde de vises på), f.eks.: p{ display: inline; ) Vises som Inline element. a{ display: block; ) Vises som Block element. li{ display: inline-block; ) Vises som inline-block element. First Webpage ever:
10 MERE OM BLOCK OG IN-LINE ELEMENTER Elementer i HTML er altså overordnet, enten det ene eller det andet. Brug DOM Explorer til at undersøge elementerne i siden. Eks.: <h1>heading One</h1>: *Herover: Heading One er et Block-Element. Block-Elementer fylder hele bredden, af det element det ligger inden i, I dette tilfælde Browservinduet (<body>). Paragraph (<p>) er også et Block-Element. Læg mærke til at der laves linjeskift, for hvert nyt Block-Element der kommer: *Herover: Elementerne i ( DOM explorer ). Lys blå er selve elementet. Lys rød markering er elementernes margin. *DOM Explorer: F12 eller Højre klik: Vælg Inspicer Element / Inspect Element. Dom Exploreren er et værktøj til inspektion og fejlrettelse. *Du kan se, og ændre indstillingerne, og de standarder, elementerne har, i DOM-Explorer. *Når du genindlæser / refresher siden, forsvinder rettelserne.
11 MARGIN OG PADDING HTML Elementer har standard margener, både indvendige og udvendige. Margin (Margen), og Padding ( Polstring, eller indvendig margen ), er standard på mange ting i HTML. Margin er den udvendige afstand, og Padding er den indvendige afstand. Eks.: <artikel> <h4>marginer OG PADDINGS</h4> <p>margins og Paddings er standard for mange elementer.</p> </artikel> Resultat i browseren: MERE OM MARGINS OG PADDINGS: Du kan opnå en masse effekter, ved at skrue på et elements margins og paddings. Eks.: Browser *Eksempel: Paragraph padding (<p>). DOM Explorer CSS, anvendt i eksemplet: p { display: inline-block; font-family: 'Open Sans'; color: white; text-align: center; padding: 2em 2em; background-color: red; width: 2em; (Vises ikke som block-element) (Fonten ændres) (Farven på teksten) (Centreret tekst) ( Luft omkring teksten) (p-elementets baggrundsfarve) (Bredden på p-elementet)
12 STYLING FONTS INLINE STYLING Browserne bestemte i starten 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 der 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 deklaration (Declaration): Property (color) med en Value: (red)! <h1 style= font-family: Consolas; >Consolas</h1> * 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 Selector Property Value
13 INTERNAL STYLESHEETS Efterhånden som siderne voksede i indhold og omfang, blev <style> introduceret. Style-tagget placeres i <head> tagget, og rammer via Selectors tags på siden. Denne måde at style på kaldes Internal Stylesheet og er en noget nemmere måde at style et helt dokument med meget indhold 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 i body 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.
14 EXTERNAL STYLESHEETS Du kan ændre alle sider et sted fra, med et External Stylesheet. Et External Stylesheet er et dokument med Extension:.css som du refererer til via en sti: <link href="content/styles/main.css" rel="stylesheet" /> (Stien til CSS filen: main.css) (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> Eks.: *Herover: Eksempel på Extern Stylesheet (main.css) i mappen: content/styles/ SAME BUSINESS? Du bruger samme metode ( syntaks ), som i dit Internal StyleSheet, når du laver CSS i et Extern Stylesheet. Du skal bare ikke have <style> Tagget med i det eksterne Stylesheet: <style> body { font-family: Consolas; h2 { font-size: 1.4em; h3 { font-size: 1.2em; </style> *HEROVER: Internal Stylesheet i <head> body { font-family: Consolas; h2 { font-size: 1.4em; h3 { font-size: 1.2em; * HEROVER: External Stylesheet *Du kan referere til flere StyleSheets i samme side, Husk at Browseren læser oppefra og ned, og derfor overskriver de sidste styles hvis der er samme deklarationer i dem!
15 LINKS OG ANCHORS Links udspringer af Anchor, altså et Anker eller placering i en tekst. LINKS I HTML Links i HTML tagges med <a>, (a står for Anchor ): <a href=" *Herover: a har en Hyper reference eller et link : (href) der peger på en side. Teksten imellem start tagget : <a> og slut tagget : </a> er den tekst, linket virker på. ATTRIBUTES href Hyper Reference Stien eller Url til fil (# = blindt link) target Target Det vindue link åbner i Eks.: (_blank) EKSEMPEL <a href=" target="_blank">w3schools</a> *Attribut: target har Property: _blank. (Attributtens Property står i gåseøjne ). * Gåseøjne anvendes til f.eks.: Stien i href, Teksten i alt: (alt="image-of-cute-cat"), idet stier og f.eks.: Teksten til et billede, IKKE er HTML. STYLING AF LINKS <a> Rammes af Font-Family, men ikke af Color mm. Eksempel på et stylet link: a { Selector: a. font-size: 1.2em; Tekst størrelsen. color: whitesmoke; Tekst farven. text-decoration: none; Fjerner understregning. padding: 2px 8px; Padding eller indvendig margen. background-color: deeppink; Linkets baggrundsfarve. transition: 200ms; Tiden i millisekunder. a:hover { color: white; padding: 3px 8px; background-color: hotpink; Selector: a, ved mus over (:hover). Farven ændres Padding ændres Baggrundsfarve ændres *Alt der ændres, sættes i:hover, Properties der IKKE ændres nedarves fra a! PSEUDOCLASSES a:hover Er en Pseudoclass. Properties træder kun i kraft hvis :hover.
16 BILLEDER I HTML Billeder tagges med <img>, img tagget er ikke afsluttet. BILLEDER I HTML <img src="cutecat.jpg" alt="my-cute-cat" /> Stien til billedet beskrives med: src (source) og: alt er en kort beskrivelse af billedet. Husk at billedets src (Navnet på billedet) og alt (Beskrivelsen) ikke er standard HTML, og derfor står i gåseøjne. ATTRIBUTES alt Alternate Text Gerne en Sigende tekst til billedet. Billeder laver ikke linjeskift, med mindre de er så store, at de optager al pladsen. <img src="content/images/cutecat.jpg" alt="image-cute-cat" /> <img src="content/images/mirrorcat.jpg" alt="image-mirror-cat" /> Resultat: *Herover, der kan lige være to billeder i browseren, men ikke tre! (Img = Inline). STYLING img { width: 25%; Selector: img. Bredden på elementet. *Ovenstående CSS, gør at alle billeder bliver 25%, af det element, de ligger indeni. *Hvis kun enkelte billeder, eller billeder i bestemte områder skal skaleres, kan man ramme disse med Klasser (Classes). Det ser vi på nu.
17 CLASSES, COMBINATORS OG ID S Anvendelse af klasser og ID s i styling CLASSES På foregående side har vi set på billeder, herunder skalering via CSS: (width: 25%;). Selector img rammer alle billeder på siden. Men hvad nu hvis ikke alle billeder, men kun nogle få billeder skal skaleres anderledes? Img Tagget rammer altså alle billeder på siden. Du kan lave Klasser (Classes), der kun rammer elementer med denne class tilknyttet. *Classes skrives med et punktum foran Classname i CSS. Eks.:.gallery { width: 25%; I MarkUp, (HTML) ser det sådan her ud: <img src="content/images/cutecat.jpg" alt="cute" class="gallery"/> I MarkUp kalder du din Class med class= ditklassenavn. Husk at i MarkUp skal der ikke et punktum foran klassenavn. *Brug ikke æ, ø, å eller mellemrum i klassenavne. Giv dine klasser logiske navne. ID S Du kan evt. bruge et ID på samme måde, Husk dog at ID s er Unikke, og må derfor kun, forekomme en enkelt gang pr. side. Et ID, defineres i CSS med et Hashtag, Eksempel: #gallery { width: 25%; I MarkUp, (HTML) ser det sådan her ud: <img src="content/images/cutecat.jpg" alt="cute" id="gallery"/> CSS COMBINATORS Forestil dig, at billederne skal skaleres, men kun i en enkelt sektion. F.eks. en gallerisektion? *Du kan ramme Områder i din HTML med CSS Combinators. Eks.:.gallery img{ width: 25%; Rammer img, men KUN hvis de ligger i noget med class.gallery
18 LISTER I HTML Lister bruges overalt i HTML! Du kender sikkert lister fra Word og tekstbehandling? Der findes 2 listetyper i HTML: UNORDERED LIST: List Item One List Item Two List Item Three List Item Four List Item Five ORDERED LIST: 1. List Item One 2. List Item Two 3. List Item Three 4. List Item Four 5. List Item Five Lister Kan have Under punkter: List Item One List Item Two List Item Three o Sub Item One o List Item Two o List Item Three List Item Four List Item Five LISTER I HTML: Lister i HTML skrives med tagget <ul> eller <ol> (Unordered / Ordered List) Unordered List: <ul> <li>list Item One</li> <li>list Item Two</li> <li>list Item Three</li> <li>list Item Four</li> <li>list Item Five</li> </ul> Ordered List: <ol> <li>list Item One</li> <li>list Item Two</li> <li>list Item Three</li> <li>list Item Four</li> <li>list Item Five</li> </ol>
19 MERE OM LISTER I HTML Endnu mere om lister i HTML! LISTER ER BLOCK-ELEMENTER Mark Up: Ser sådan her ud i Browseren: <ul> <li>list Item One</li> <li>list Item Two</li> <li>list Item Three</li> <li>list Item Four</li> <li>list Item Five</li> </ul> Da både den Overordnede Liste (<ul>) og List-Items (<li>) Er Block-Elementer, kommer punkterne i listen, under hinanden, og nye lister kommer også under hinanden: Herover: Unordered List i DOM Explorer. *Lister har en række standarder for marginer, paddings og text-decoration (bullets). DU KAN ÆNDRE ELEMENTERNES DISPLAY PROPERTIES! Med CSS, kan du ændre den måde din liste vises på. Herunder Inline Stylesheet i Head tagget. Selectors: ul + li. Display: Inline! <style> </style> ul, li { display: inline; (Style-tagget i head) (Både ul, og li) (ul og li vises som inline-elementer) *Herover: Unordered List i DOM Explorer, både ul og li vises som inline elementer. (Læg mærke til elementets standard indrykning og margin: den grønne markering).
20 MENUER I LISTER Lister anvendes til en masse i HTML, herunder menuer. LISTER SOM MENUER I HTML Herunder: Unordered list, med 5 Links (DOM Explorer i browseren): *Listens <ul> ses som den lyseblå markering i DOM, den er standard (Display): block *Listens <li> er stylet til at blive vist (Display): inline (Standard er block). MARKUP SER SÅDAN HER UD: <ul> <li><a href="#">list Item One</a></li> <li><a href="#">list Item Two</a></li> <li><a href="#">list Item Three</a></li> <li><a href="#">list Item Four</a></li> <li><a href="#">list Item Five</a></li> </ul> *Herover 5 Links i en Unordered List. CSS SER SÅDAN HER UD: li { display: inline; Mere CSS på Links i listen li a{ font-family: sans-serif; color: #fff; text-decoration: none; padding: 5px 10px; background-color: #CC0000; Ny teksttype (Sans-Serif) Hvid tekstfarve (Hexfarve) Ingen understregning Padding eller Luft omkring tekst Baggrundsfarve på links SER SÅDAN HER UD I BROWSEREN Herunder de 5 links med baggrund, padding og farver: DOM Explorer ser sådan her ud. (Blå markering er <ul>):
21 DISPLAY PROPERTIES Mere om liste menuer. Herunder: I eksemplet fra forrige side, satte vi <li> til at blive vist som Inline-Element i CSS. (display: inline;), hvilket giver flg. resultat (DOM Explorer): Som du kan se, ligger liste elementerne (<li>) efter hinanden, da de nu vises som Inline. Men bla. Padding på Links (<a>) virker ikke korrekt. De rager ligesom ud over <ul>. <a> Tagget er standard et Inline-Element og Inline-Elementer viser som standard ikke bla. Paddings korrekt. Sådan her så CSS for a når de ligger i en li li a{ font-family: sans-serif; color: #fff; text-decoration: none; padding: 5px 10px; background-color: #CC0000; Ny teksttype (Sans-Serif) Hvid tekstfarve (Hexfarve) Ingen understregning Padding eller Luft omkring tekst Baggrundsfarve på links ÆNDRING AF DISPLAY PROPERTIES Block-elementer kan vise Padding, og du kan få et Block-element til at vises som Inline! Eksempel: li a{ display: inline-block; font-family: sans-serif; color: #fff; text-decoration: none; padding: 5px 10px; background-color: #CC0000; a er et Block-element der vises inline Ny teksttype (Sans-Serif) Hvid tekstfarve (Hexfarve) Ingen understregning Padding eller Luft omkring tekst Baggrundsfarve på links *Lige nøjagtigt i dette tilfælde behøves <a> faktisk ikke at være Inline-Block, du ville opnå samme resultat i eksemplet med: a display: block; Da <li> er Inline, og a, fordi de er block, fylder bredden af disse. Resultat i DOM Explorer: Nu Presser <a> tags listen ud, da de nu er inline-block og ikke inline.
22 DIV / SPAN Span og div, er tags der omslutter områder, eller dele af siden eller teksten. DIV og SPAN er ældre HTML tags der kan anvendes til at opdele sider i områder. <div> </div> Diversion Område på siden Block-Element <span> </span> Span Område på siden inline-element Eksempler: DIV: *<div> er et block-element, og kan bruges til f.eks.: at style områder på siden: Div <div style="color: red;">(diversions)</div> er block. Resultat i Browseren: Div (Diversions) (<div> Laver linjeskift). er block SPAN: *<span> er et Inline-element, og kan bruges til f.eks.: at style dele af en tekst. Span <span style="color: red;">(spans)</span> er inline Resultat i Browseren: Span (Spans) er inline (<span> Laver ikke linjeskift). HTML / HTML5: *<div> og <span> er ældre HTML elementer, og IKKE HTML5 elementer. Den seneste version af HTML (HTML5), indeholder en del Smart tags, der afløser specielt <div> tagget. *Hverken <div> eller <span> siger noget om det indhold der er deri. I HTML5 er der en række tags, der er specielt lavet til at indeholde den ene, eller den anden form for indhold. Det er ekstremt vigtigt at overholde disse standarder. F.eks.: <section>: et område af indhold, der på én eller anden måde hører sammen: (Sportssektionen), eller <article>, en artikel, altså en tekst, der i sig selv giver mening. En sektion kan bestå af mange artikler. *Mere om HTML5 og Semantik på side 25.
23 OPDELING AF SIDEN Websider opdeles med fordel i Områder, f.eks.: Navigation, Header, Indhold og Footer. DIV SOM OPDELING AF SIDEN Du kan bruge div til at opdele siden. Eks.: <div id="wrapper"></div>div med ID wrapper Husk ID s er Case Sensitive! #wrapper { width: 1200px; margin: auto; border: 1px solid #ccc; ID med navnet wrapper Bredden af elementet Centrerer Elementet Sætter en grå border på Elementet *I eksemplet er der anvendt et ID, da der kun er én wrapper på siden, normalt vil det være en fordel at bruge Classes, da man så kan genbruge flere steder på siden. I dette tilfælde med ID, ville HTML se sådan her ud: <div id="wrapper"> <h3>this is the wrapper</h3> </div> Resultat i Browseren: *I eksemplet herover er der sat en <h3> ind i wrapperen, da den ellers ikke ville have nogen højde. Resultat i DOM Explorer: *Herover: wrapper er markeret med lyseblå, margin: auto; vises i siderne. <div class="wrapper"></div> Div med classnavnet wrapper. Husk at class skrives med punktum og ikke hashtag i dit CSS. CSS MED CLASS I STEDET FOR ID:.wrapper { width: 1200px; margin: auto; border: 1px solid #ccc; Class med navnet wrapper Bredden af elementet Centrerer Elementet Sætter en grå border på Elementet
24 STYLING AF OMRÅDERNE Eksempel på opdeling af en side med <div> tags. Markup: <div id="wrapper"> wrapper start <div><h1>the PAGE HEADER</h1></div> Div 1 <div> Div 2 <a href="index.html">forside</a> <a href="page-two.html">side TO</a> <a href="page-three.html">side TRE</a> </div> <div> Div 3 <h3>main Content area of the page!</h3> </div> <div> Div 4 <h3>the main footer of the page</h3> </div> <div> wrapper end Resultat i DOM Explorer: *Herover: De fire Divs, (markeret med blå) inden i den femte ( wrapperen ). *Som udgangspunkt er <div> elementet et Block-element, og optager derfor hele bredden, af det element det ligger i, her ligger de i wrapper. De tre Links: (</a>), er Inline-Elementer og kommer derfor efter hinanden i Div 2. I eksemplet ligger de fire div-elementer altså inden i en femte div, med ID: wrapper og fylder hele bredden af denne.
25 HTML5 TAGS Navigation, Header, Indhold og Footer. Har deres egne tags. HTML ER SMART! Du kan bruge div og span til at opdele siden i områder. HTML5 har specielle tags, til specielle områder på siderne. F.eks.: <nav> Navigation Bør indeholde en navigation af en art. <section> Section Indhold af samme karakter, eller emne. <article> Article En Artikel, der giver mening i sig selv. <header> Header F.eks.: På siden, (er lavet til artikler). <footer> Footer F.eks.: På siden, (er lavet til artikler). *Ovenstående HTML5 tags er alle block-elementer, som <div> tagget. EN SIMPEL HTML5 SIDE: Simpel side i HTML5, MARKUP: <div id="wrapper"> <header><h1>the PAGE HEADER</h1></header> <nav> <a href="index.html">forside</a> <a href="page-two.html">side TO</a> <a href="page-three.html">side TRE</a> </nav> <section> <h3>første SEKTION</h3> <artikel> <h4>artikel EET</h4> <p>indholdet i Artikel eet</p> </artikel> </section> <footer> <h3>footeren PÅ SIDEN</h3> </footer> </div> *Herover en simpel HTML5 side med en wrapper, en navigation, en sektion med en enkelt artikel og en footer.
26 SEMANTIK I HTML5 Semantics er den korrekte, mest logiske måde at opmærke/tagge dit indhold HTML5 er konstrueret til at indeholde en lang række special tags. Hvis du anvender de rigtige tags til det rigtige indhold, kan browsere, og ikke mindst søgemaskiner nemmere håndtere og forstå indholdet. ARTIKLER I HTML En sammenhængende tekst i HTML, bør ligge i en <article>! En artikel kan indeholde overskrifter, afsnit, billeder mm. Tænk logisk, når du opbygger dit indhold. Artikler kan ligge i <section>, som i eksemplet på forrige side. Sektioner kan indeholde mange artikler, og en artikel, kan hvis den er stor også indeholde sektioner! Eksempel på en artikel: I eksemplet herover er der én sektion, med to artikler. Normalt er artikler, det der hedder Block-Elementer, og laver derfor linjeskift. Det kan du ændre. I eksemplet er der anvendt et stykke CSS, Der sætter bredde på artikler, og sætter dem til at display som Inline-block Elementer. CSS i Eksemplet. (49.7% og ikke 50% på grund af browserens Standard margener), Eks.: article { width: 49.7%; display: inline-block; *Artiklerne vises som Inline-block, og fylder ca. halvdelen af det de ligger i (section).
27 TABELLER Div afløste i midten af 1990érne Tabeller, da de er langt nemmere at Style. *Herunder, Tabel: Header Menu Content Footer OM TABELLER Tabeller startes med <table> tagget, og indeholder rækker: <tr> og table data : <td>. Markup, Tabel med en enkelt række og en enkelt celle: <table> <tr> <td>første TABLE DATA</td> </tr> </table> Table start Table row Table data Tabel end Markup, Tabel med en enkelt række og to celler: <table> <tr> <td>første TABLE DATA</td> <td>anden TABLE DATA</td> </tr> </table> Markup, Tabel med to rækker og to celler: <table> <tr> <td>første TABLE DATA</td> </tr> <tr> <td>anden TABLE DATA</td> </tr> </table> Table start Table row Table data eet Table data to Tabel end Table start Table row eet Table data eet Table row to Table data eet Tabel end
28 LINKS GENERELLE LINKS o o o o o OM W3SCHOOLS Rigtig god portal med tutorials og en Online editor, hvor du kan lege med koderne, direkte i browseren. W3SCHOOLS er nok den mest besøgte side for webudviklere. OM CHANNEL 9 Bob Tabor fra Microsoft har lavet en række videoer omkring HTML5 og CSS3. Han arbejder med Notepad, og starter helt fra bunden. Der er 21 videoer i alt. BILLEDER Billeder på Internettet er som udgangspunkt beskyttet af loven om ophavsret! En tommelfingerregel er, at hvis ikke der står at du må! Så må du ikke! Det vil sige, at på langt de fleste sider, må du ikke hente eller downloade billeder mm. Der findes en række sider, udover Colourbox, hvor du gerne må hente og bruge billeder, og rent faktisk også bruge dem, også kommercielt. Her er en række links: o o o *Ovenstående sider, giver alle ret til at hente og bruge billeder, med enkelte restriktioner. 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>
Webudvikleruddannelsen
En Introduktion til, HTML og CSS 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
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!
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
workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop
Om opgaven: For et halvt år siden overtog nogle bekendte værtshuset Midtskiws i Skive. De havde derfor brug for en ny hjemmeside, som kunne fungere som et online informationssted og visitkort for deres
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
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
Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen.
Validering 4 Nu skal vi især se på og samt centrering af hele siden på skærmen. Det er i HTML ikke forbudt at bruge koden , men lad nu være alligevel, du får blot en masse valideringsproblemer.
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
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
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
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.
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
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,
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
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
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...
Oversigt HTML5 nye tags til sideopbygning
HTML5 er udviklet af WHATWG Oversigt HTML5 nye tags til sideopbygning (Web Hypertext Application Technology Working Group) En
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
Webmaster Sweet-Swing.dk Websidens opbygning. Som eksempel er brugt siden om korets målsætning som den vises i editoren.
Opbygning Som eksempel er brugt siden om korets målsætning som den vises i editoren. I editoren vises tabellinierne, selvom de på den færdige side i vores tilfælde er usynlige, bortset fra den sorte ramme
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
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.
Martin Møller Web1b Tirsdag den 19 juni 2012
Martin Møller Web1b Tirsdag den 19 juni 2012 Projektbeskrivelse 3 Tema valg 3 Budskab 3 Afsender 4 Målgruppe 4 Kommunikations mål 4 Skitser 6 Layout index 7 Layout Kulturliv 8 Layout Gratis glæder 9 Layout
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å
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,
Grundformen 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.
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
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
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
Fase Forklaring Navigation. Opret en div til feltet hvorpå scrollbaren ønskes placeret. Giv div'en mål og position absolut. Vælg Overflow: auto.
1 Scrollbar Åbn index.html Der skal være en side åben. Indsæt en div: scroll Opret en div til feltet hvorpå scrollbaren ønskes placeret. Definér div'en Giv div'en mål og position absolut. Vælg Overflow:
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,
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
Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN
2015 Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN I denne tutorial kommer du til at I denne tutorial vil du lære hvad Bootstrap er, hvordan det fungerer og hvordan
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
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
Forståelse for grafisk produktion og workflow
Forståelse for grafisk produktion og workflow Fallulah hjemmeside Opgaven: Blev stillet i forbindelse med forløbet avanceret webdesign, jeg har hverken fået karakter eller bedømmelse på den. Opgaven bestod
Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet.
Side 1 Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet. Dette er nogle gange et ønske fra den enkelte kunde, som blot ønsker
Ø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
Vejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8
Tabulex Hjemmeside Styling af sidemenuer Side 1 af 8 Styling af sidemenuer Sidemenuerne kan styles efter alle ønsker. Du skal vælge modulet: "Styling" på det niveau, hvor det skal have virkning. F.eks.
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.
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
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
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
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
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
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:...
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
I gang med Adobe Muse CC
I gang med MUSE Muse er et program fra Adobe til fremstilling af websites, for de som ikke ønsker at arbejde med koder. De fremstillede websites baserer sig naturligvis på HTML, CSS, Javascript mm., du
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
OPGAVE BESKRIVELSE ARBEJDSPROCES. Idéudvikling. Inspiration. Skelet. Uploade til server. Kodning. Teste sitet igennem. Rettelser og godkendelse
GRAFISK WORKFLOW ARBEJDSPROCES OPGAVE BESKRIVELSE OPGAVEN At lave et redesign af AGF Fanclubs hjemmeside med et mere nutidigt look og bedre oversskuelig brugerflade. Opgaven har jeg stillet mig selv, men
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
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
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
GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM
GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM OPGAVEN Redesign af Ole Møgelbys hjemmeside, der efter stor succes med sine værker, gerne vil have frisket udtrykket lidt op. Billedsiderne skal udvides
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
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
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
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
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,
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
Almindelig indholdsside
Indhold Almindelig indholdsside... 2 Login... 3 Lås side, lås alt op og log ud... 4 Opret genveje på Sitecore's skrivebord... 5 Upload filer (billeder, PDF m.m.)... 6 Genbrug tekst fra f.eks. mail eller
Designmanual BUTLER FM
Designmanual BUTLER FM 2015 Grontmij A/S, Facilities Management Forfatter: Rikke Carlsen, RIC Indhold Grid... 3 Afstande... 5 Fonte og typografier... 6 Farver... 7 Tabeller... 8 Andre elementer... 10 Ikoner...
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
Formatering af tekst, JCE Editor, Joomla
Formatering af tekst, JCE Editor, Joomla skrevet af Inge Vittrup Paragraph anvender du ved almindelige sætninger. Heading 1 er hovedoverskrift med største skrift. Heading 2 er overskrift til en artikel
Designmanual for websider
Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet
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
MANUAL - Joomla! Version 1
MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 3 Log ind... 3 Ret i en artikel, der allerede er oprettet... 4 Opret ny artikel... 8 a) Skriv direkte i tekstfelt... 9 b) Indsæt tekst
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
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
Grafisk 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
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
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
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,
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)
Afsluttende opgave i Kom/IT
Afsluttende opgave i Kom/IT Hjemmeside om varmluftballoner Fag:Kommunikation/IT Lærer: Karl G Bjarnason Problemformulering Den afsluttende opgave er den du skal til prøve i, hvis du skal til eksamen i
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
Vejledning Tabeller (data tabeller)
. Vejledning Tabeller (data tabeller) Datatabeller vs. Layouttabeller Beskrivelse af en tilgængelig datatabel Opret en tilgængelig (simpel) tabel indsæt eller fjern en række eller kolonne Indsæt spænd
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
WEB kursus I. Grundkursus i CMS
WEB kursus I Grundkursus i CMS 1 Link til manual på intranet: http://intranet.regionsyddanmark.dk/cmsmanual Nyttig information Support telefonnummer: 65 41 32 25 Support e-mail: websupport@regionsyddanmark.dk
FBS for praktikere Fyn. Notifikation og print skabeloner
FBS for praktikere Fyn Notifikation og print skabeloner 1.Velkomst v/anton Helms 2.Introduktion til HTML/CSS/Freemarker v/kent Gottschalk Hansen. 3.Skabeloner i Cicero v/kent Gottschalk Hansen. 4.Erfaringsudveksling
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,
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,
Grafisk Workflow. hovedforløb 2
Grafisk Workflow hovedforløb 2 WORLD OF FURNITURE Forside.wrapper width: 95%; margin: 0 auto; box-shadow: 0px 0px 25px #888888; Image slider carousel 5 sekunder .button span.button span:after.button:hover
5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.
GRAFISK WORKFLOW Grafisk workflow Beskrivelse Opgaven Design af website til Tipsbladet Fokus, som er noget, jeg selv har fundet på. Det er tænkt som et alternativ til Tipsbladet.dk, hvor der på Tipsbladet
OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre.
WORKFLOW OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre. Det er en fiktiv opgave. MIT BIDRAG Jeg stod for al design og
Projekt i Programmering C Menu til hjemmeside.
Projekt i Programmering C Menu til hjemmeside. 10-12-2004 Holstebro HTX Bent Arnoldsen Synopsis. Projektet her er en menu til hjemmesider, som er lavet så den er let at tilrette, når man tilføjer eller
GRAFISK WORKFLOW. Proces. Kodning. Fonts:
P f t r o o i l o 1 H GRAFISK WORKFLOW»Vi skal bruge en hjemmeside, så vi kan få fat i patienterne til vores botilbud. Ellers risikerer vi at de vælger noget andet. Der skal laves logo, samt lærringsvideoer«proces
Form og dens underlige box model
Denne guide er oprindeligt udgivet på Eksperten.dk Form og dens underlige box model Denne artikel handler om hvilke problemer man som webudvikler kan komme ud for, og hvordan man løser dem. Jeg kommer
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
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
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
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
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,
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
Indholdsfortegnelse. Forord
Indholdsfortegnelse Forord i Indholdsfortegnelse iii Indledning ix 1. Introduktion til HTML 1 Websider laves med HTML 2 Websider læses med en browser 2 Browserspecifikke markører 3 HTML-dokumentet 4 Hvad
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
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,
Typografi og ombrydning
Typografi og ombrydning Maria Gjedsted MG25 2. skoleperiode Denne opgave har jeg vaglt at fremhæve, da jeg lærte at bleve fortrolig med at arbejde i tabeller. Det var også en udfordrende opgave i og med
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