Kursen består av 3 delar
|
|
- Monica Lindberg
- för 4 år sedan
- Visningar:
Transkript
1 Kursen består av 3 delar Hur man gör webbsidor med korrekt funktionalitet och utseende Hur man använder JavaScript för att få en mer interaktiv webbbsida Hur man använder ett publiceringssystem för att göra sin webbsida
2 Självregistrering Ni måste registrera er själva via webben! Det är inte samma sak som att registrera sig som användare på Moodle Registering görs via följande hemsida: Registreringen är öppen 7-14 december
3 Registrering på Moodle Ni ska också registrera er som användare på Moodle-sidan Det gör ni via kursens hemsida:
4 Betyg Bestäms utifrån ert resultat på laborationerna 3 Alla laborationer godkända 4 Alla laborationer godkända 3 pluspoäng (3VG eller 1VG + 1 MVG) 5 Alla laborationer godkända Pluspoäng på alla uppgifter 4 pluspoäng (2VG + 1MVG)
5 Laborationer A305, A306, A307 Labsalar bokade på förmiddagen fram till kursens slut Ni har förtur till datorerna då En annan kurs har bokat labben på eftermiddagen så då har de förtur
6 En introduktion till HTML
7 HTML Markeringsspråk (MarkUp Language) - strukturerar dokument för Webben (World Wide Web) Dokumentet delas upp i komponenter med hjälp av element eller taggar starttaggar och sluttaggar <p>detta är ett stycke text</p> <h1>detta är en rubrik troligen med stor font</h1>
8 Försök inte att göra ett snyggt HTML-dokument. HTML beskriver bara strukturen hos dokumentet inte hur det skall se ut på läsarens skärm. Utseendet styrs i ett separat style-dokument en.css-fil Det är browsern, skärmens upplösning och css-filen som slutligen bestämmer hur ditt dokument ser ut
9 Vad är en tagg? <TAGG> innehåll </TAGG> Start-tagg Slut-tagg HTML-container
10 Taggens utseende <FONT SIZE="6"> Hej </FONT> Element Attribut Värde Element Instruktion till webbläsaren Attribut Tillägg för att beskriva taggen Värde Värdet för attributet
11 HTML dokumentets struktur TITLE HEAD HTML BODY
12 Grundläggande dokument <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>basdokument</title> </head> <body> <p>hello world</p> </body> </html>
13 XML version Deklarationen <?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="iso "?> Skall alltid placeras överst i dokumentet före alla andra taggar
14 XHTML version <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Anger vilken standard som dokumentet följer och var man kan hitta denna standard
15 HTML - taggen Sedan man angett DOCTYPE och XML standard så kommer det egentliga HTML dokumentet omgivet av starttaggen <HTML> och sluttaggen </HTML> HTML taggen innesluter taggarna <head> </head och <body> </body> <html xmlns=" xml:lang="en" lang="en > HTML- taggen kan ha språkattribut XMLNS är referens till Extended Markup Language Name Space
16 Head Head-taggen markerar en sektion av dokumentet som innehåller overheadinformation titel, sökord, författarnamn med mera Mellan body-taggarna finns det egentliga dokumentet
17 Ett mycket enkelt exempel
18 Head Ligger alltid under taggen <html> Mellan starttaggen och sluttaggen kan dessa element finnas base link meta script style title
19 Base Med elementet <base> kan man ange en basadress. Bilden som finns på adress pg Kan enklare hittas med hjälp av basadressen och filnamnet bil.jpg
20 Exempel - base <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" " <html xmlns=" <head> <base href=" ></base> <title>elementet BASE</title> </head> <body> <p>titta en bil</p> <p><img src="bil.jpg" alt="bil"/> </p> <p> <a href=" src=" alt="valid XHTML 1.0 Strict" height="31" width="88" /></a> </p> </body> </html>
21 Link Elementet link används för att referera till externa resurser Det kan finnas flera Link-element i ett html-dokument En vanlig användning är att ge en referens till.css filer d.v.s. filer som information om hur dokumentet skall se ut på skärmen
22 Link grundläggande Attribut href specificerar var resursen finns - href="stajl.css" Det finns ett antal typer av fördefinierade länkar Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help och Bookmark. Media specificerar målmedium screen är det som gäller om ingenting anges (default) - media="screen" andra media är tty, tv, projection, handheld, print, braille, aural och all type anger mediatyp type="text/css" Det kan exempelvis vara text/css eller text/javascript
23 Link ett exempel <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" " <html xmlns=" <head> <link rel="stylesheet" href="stajl.css" media="screen" type="text/css" /> <title>elementet LINK</title> </head> <body> <h1>min BIL</h1> <p><img src="bil.jpg" alt="bil"/> </p> <p>titta en bil</p> </body> </html>
24 Meta Meta elementet används för att specificera data kring dokumentet vem som är författare, nyckelord, övergripande beskrivningar av dokumentet med mera KEYWORDS nyckelord som kan användas av sökmotorer AUTHOR - författarnamn DESCRIPTION kort beskrivning visas av sökmotorn som sammanfattning av dokumentet DISTRIBUTION - specificerar om dokumentet är globalt eller regionalt
25 Meta exempel <meta name="description" content= Grundkurs i hur man skriver XHTML-kod /> <meta name="keywords" content="xhtml, css" /> <META name="author" content= Ulf Holmgren /> <META name="copyright" content=" 2007 TFE. /> <META name="date" content= />
26 Meta - exempel <-- For speakers of US English --> <META name="keywords" lang="en-us" content= color, New York"> <-- For speakers of British English --> <META name="keywords" lang="en" content= colour, London">
27 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>meta-element</title> <meta name="autor" content="ulf Holmgren" /> <meta name="keywords" content="html, CSS, easy" /> <meta name="description" content="this is an easy course in XHTML" /> </head> <body> </body> </html>
28 Script och Style Elementet Style används för att bädda in information om exempelvis fonter, färger, marginaler etc. Denna information bör läggas i ett separat dokument -.css Elementet Script används för att bädda in script som styr beteende om sidan detta behandlas inte i detta sammanhang
29
30 Title Elementet Title används för att identifiera dokumentet titeln brukar visas övers i det fönster där dokumentet visas <title>xhtml Title Tag</title> Det får bara finnas en title-tag i dokumentet
31 Text eller innehåll Det här avsnittet handlar om <p> brödtexten <H1> till <H6> rubriker av olika dignitet <br> ny rad utan att skapa ett nytt stycke Speciella tecken % & Förstärkning <em> och <strong>
32 <p> P markerar ett stycke (paragraph) I stycket kan det finnas text och bilder samt inlinekod P används för att strukturera texten att dela upp den i stycken man skall inte användas för att formge dokumentet. Detta skall istället göra i ett separat style-dokument Webbläsarna brukar lämna en tom rad mellan dokumentets stycken Får finnas inuti exempelvis följande element: ADDRESS, BLOCKQUOTE, DD, DIV, TD, TH
33 <br> och Den text som skrivs in mellan starttaggen <p> och sluttaggen </p> betraktas som ett flöde av asciitecken de radbrytningar som du skriver i editorn kommer inte att visas i webbläsaren. Extra mellanslag och radbrytningar måste markeras med taggen <br> för radbrytning eller
34 <br>, och ä <body> <p>alternativ 1: Titta en bil Den är jättefin </p> <p>alternativ 2:<br/>Titta en bil <br/> den är jättefin</p> </body>
35 Andra specialtecken <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" " <html xmlns=" <head> <title>p-element</title> </head> <body> <p> cent<br/> ± plus-minus<br/> copy <br/> µ mikro<br/> pund</p> </body> </html> MER:
36 Rubriker Rubriker finns av sex storlekar Normalt är <h1> störst och <h6> minst, men det styr du i ditt stylesheet <h1>rubrik 1</h1> <h2>rubrik 2</h2> <h3>rubrik 3</h3> <h4>rubrik 4</h4> <h5>rubrik 5</h5> <h6>rubrik 6</h6>
37 Att förstärka delar av texten med <em> och <strong> <body> <p>detta är en himla rolig historia:<br/> - har du <strong>julgransfot</strong><br/> - ja de har jag<br/> - hur får du då på dig <em>byxorna</em></p> <p> </body>
38 Citat <blockquote> och <q> Att markera citat i sin HTML-kod är att sätt att underlätta enhetlig formattering samt att underlätta för synskadade att rätt uppfatta texten De element som används är blockquote och q
39 Citat ett exempel <body> <p>om man Googlar på <q>roliga citat</q> så kan man hitta följande om Bill Gates</p> <blockquote cite=" umor/citat/blandat.php"><p> 640 kb borde vara tillräckigt för vem som helst</p> </blockquote> <p>och det kan man ju tyckas vara roligt så här i efterhand</p> </body>
40 Ytterligare element för logisk formattering <p>definition - <dfn>tjur=kopappa</dfn> </p> <p>kod - <code>u=sin(2*pi*200*t</code> </p> <p>exempel - <samp>exempel</samp></p> <p>tangentbord - <kbd>knatter knatter knatter</kbd> </p> <p>variabel - <var>svaret=5</var> </p> <p>citat - <cite>two bee or not two bee</cite> </p> <p>en förkortning - <abbr>t.ex.</abbr> </p> <p>akronym - <acronym>xhtml</acronym> </p>
41 Adresser <address> Kontaktperson för XHTML-föreningen <br/> Eva Andersson<br/> Skogsstigen 8<br/> Umeå </address>
42 Preformatterad text <p> Detta stycke är oformatterat och omgivet bara av p- taggarna. Läsaren kommer inte att bry sig om radbrytningar om det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör</p> <pre width="20"> Detta block kommer att vara maximalt 20 tecken brett och radbrytningarna kommer att finnas kvarom det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör </pre>
43 Div och span är Containrar som används tillsammans med CSS <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en"> <head> <title>div and span ELEMENT</title> <link rel="stylesheet" href="stajl2.css" media="screen" type="text/css" /> </head> <body> <div class="kontainer1"> asd ssdlk ss sfk jkk aj s </div> <div class="kontainer2"> asd ssdlk ss sfk jkk aj s </div> body { background-color: #def; margin-left: 30px; margin-top: 20px; } p span {color: green}.kontainer1 {font-family: verdana, arial, sans-serif; color: black;}.kontainer2 {margin-left: 20px;color: yellow;color: blue;}.kontainer3 {margin-left: 30px;color: green;} <p> asd ssdlk <span>ss</span> sfk jkk aj s </p> <div class="kontainer3"> asd ssdlk ss sfk jkk aj s </div> </body> </html>
44 HTML används för logisk formatering inte för utseende I HTML-dokumentet skall du formattera logiskt Dessa ord ska framhävas Detta är en tabell Detta är en länk Detta är en rubrik MEN du ska inte använda HTML för att styra utseendet hos sidan du ska inte ange kursiv stil, stilstorlek eller font i HTML Lämna detta till stilmallen CSS-dokumentet
45 Så här ser index dokumentet ut i en frames-struktur
46 Och så här blir resultatet
47 Exempel Om du börjar titta på HTML-sidor med dina nya kunskaper kommer du att hitta många konstruktioner som bygger på frames. Ett enkelt exempel hittar du på
48 Länkar En länk åstadkommer att exempelvis en ny fil öppnas i det aktuella fönstret eller (eventuellt) i något annat fönster Länken består av En startpunkt ett ankare Ett mål en target En destination När du klickar på länken kommer du att flyttas till en annan plats en annan fil, en annan plats i det aktuella dokumentet eller exempelvis till din mailhanterare.
49 Tre varianter av länkar <p> <a href="tfn_lista.html">telefonlista i separat dokument</a> </p> <p> <a onclick="window.open(this.href); return false;" href="tfn_lista.html">telefonlista i nytt fönster</a> </p> <p><a href="#tfnlista">telefonlista i detta dokument</a></p>
50 Tre andra typer av länkar <p> <a href=" ml/entities.html">specialtecken</a><br/ > <a mail till Nisse</a> </p><br/> <a href=" CMbw2tuG0I8CFQRgMAodhWiZzA"><IM G SRC="bil6.jpg" ALT="bild på bil"></a><br/> <p>
51 Bilder Läggs in i dokument med <IMG> taggen Finns aldrig i dokumentet, utan separat fil "länkas" in Attribut: SRC="bildfil" HEIGHT="pixlar" "procent" WIDTH="pixlar" "procent" BORDER="pixlar" ALT="Text om inte bilden visas" ALIGN="left" "center" "right" VALIGN="top" "middle" "right"
52 Bildexempel <IMG SRC="bild.gif" BORDER="2"> <IMG SRC="mapp/bild.gif"> <IMG SRC="
53 Länka med bilder <A HREF=" <IMG SRC=" s/hp0.gif"> </A>
54 Image maps hotspot bild Bilder med klickbara områden (länkar) 2 typer - Serverside (används ej längre) - Clientside
55 Image map taggarna Taggen <IMG> används som vanligt för att visa bilden (med attributet USEMAP) Skapas med <MAP> taggen Attribut: NAME="kartnamn" Områdena definieras med <AREA> Attribut: SHAPE="CIRCLE" "RECT" "POLYGON" COORDS="x,y,d" "x1,y1..." HREF="url"
56 Image map exempel <IMG SRC="bild.jpg" USEMAP="#karta"> <MAP NAME="karta"> <AREA SHAPE="CIRCLE" COORDS="50,50,25" HREF=" <AREA SHAPE="RECT" COORDS="100,100,150,150" HREF=" <AREA SHAPE="POLYGON" COORDS="0,0,50,20,40,60,10,30" HREF=" </MAP>
57 Ordnade listor, oordnade listor och definitionslistor LISTANS UTSEENDE STYRS I CSS-filen
58 Tabeller Används för att presentera data prydligt uppspaltat "Osynliga" tabeller används för positionering av text och bilder (layout) Skapas med taggen <TABLE> Tabellrader skapas med <TR> Tabellceller på raderna med <TD>
59 Så här ser grundstrukturen ut för en tabell <table> <caption>tabellrubrik</caption> <tr> <th>kolumn <br/> rubrik 1</th> <th><h3>kolumn<br/>rubrik 2</h3></th> </tr> <tr> <td>cell 11</td> <td>cell 12</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> <tr> <td>cell 31</td> <td>cell 32</td> </tr> </table>
60 border Anger bredden på ramen runt varje element angivet i pixlar. cellpadding Anger hur mycket luft det skall vara mellan cellens innehåll och ramen cellspacing Anger hur mycket luft det ska vara mellan ramen och nästa cell. summary En text som beskriver tabellens innehåll texten är inte synlig på skärmen, men kan ev. finnas med om sidan presenteras i talade medier. width Anger tabellens totala bredd i pixlar eller som procent av det fönster där den ligger.
61
62 Slå ihop celler horizontellt Cell 1 Cell 3 Cell 4
63 Colspan <TABLE> <TR> <TD COLSPAN="2">Cell 1</TD> </TR> <TR> <TD>Cell 3</TD> <TD>Cell 4</TD> </TR> </TABLE>
64 Slå ihop celler vertikalt Cell 2 Cell 1 Cell 4
65 Rowspan <TABLE> <TR> <TD ROWSPAN="2">Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD>Cell 4</TD> </TR> </TABLE>
66 Border
67 Cellpadding
68 Cellspacing
En introduktion till HTML
En introduktion till HTML HTML Markeringsspråk (MarkUp Language) strukturerar dokument för Webben (World Wide Web) Dokumentet delas upp i komponenter med hjälp av element eller taggar starttaggar och sluttaggar
Läs merProduktion för tryckta medier och webb
Ulrik Söderström ulrik.soderstrom@tfe.umu.se 8 Dec 2008 Produktion för tryckta medier och webb XHTML 1 HTML Hypertext text som via hyperlänkar är förbunden med andra texter Uppmärkning sker med taggar
Läs merInternet A. HTML Grunder. 02-01-14 Maximilien Chiang 1
Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min
Läs merORDLISTA WEBBDESIGN 100P
ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.
Läs merKommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod
html och css Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa : http://www.w3schools.com/browsers/
Läs merInför prov 1 i webbdesign
Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke
Läs merAtt berätta med webb + En introduktion till HTML
Att berätta med webb + En introduktion till HTML Vad är en bra historia? Uppbyggnad En serie handlingar/händelser som tillsammans bildar en enhet Budskap Produkt Bra, användarvänlig, lättförståelig, etc.
Läs merLektion 2 - CSS. CSS - Fortsätt så här
Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt
Läs merTNMK30. Elektronisk publicering
TNMK30 Elektronisk publicering Välkomna till kursen Niklas Rönnberg niklas.ronnberg@liu.se Kopparhammaren 2, rum 2011 Medverkande Stefan Gustavson, stefan.gustavson@liu.se Camilla Forsell, camilla.forsell@liu.se
Läs merIntroducerande övningar i HTML
Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer
Läs mer21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html
Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar
Läs merFörkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">
CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning
Läs merXhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)
Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet
Läs mer20/01/2016. html och css
html och css 1 Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare http://gs.statcounter.com/#desktop-browser-se-monthly-201501-201601-bar 2 Verktyg
Läs merHTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)
HTML och CSS Eric Elfving Institutionen för Datavetenskap (IDA) Upplägg Introduktion Grundläggande HTML Ändra utseende med CSS 2 Introduktion HyperText Markup Language används för att strukturera text
Läs merEn grundkurs i hemsidor och hur de är uppbyggda
En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och
Läs mer12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration
REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap
Läs merHTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015
. HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17
Läs merLaboration 2: Xhtml och CSS.
Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och
Läs merSidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.
Lab1 - CV-sidan Du ska bygga en variant av en CV-sida i HTML och CSS. Sidan ska åtminstone innehålla en bild på dig, en klassisk tabell med utbildningar/erfarenheter, ditt favoritcitat, en eller flera
Läs merF02 En första sida. Dagens agenda
F02 En första sida Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML Indentering Block/inline-element Struktur Se demo #2
Läs merTabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.
Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition
Läs merTillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.
Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny
Läs merF02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet
Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet F02 HTML Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML
Läs mer03/12/2015. Logga in på: b.socrative.com eller ladda ner appen
Logga in på: b.socrative.com eller ladda ner appen Använder Har skapat använt skrivit internet i webbsidor. CSS html. (stilmall). (nästan ) dagligen. 1 Dator med webbläsare Interne t Webserver Smartphon
Läs merTENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p
UMEÅ UNIVERSITET TFE SE/KF TENTAMEN 2004-09-29 TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p Tid: 2004-09-29 kl. 14.00-18.00 (-20.00 förlängd skrivtid) Plats: Östra paviljongen sal 8 Hjälpmedel: Presentation:
Läs merÖvning (X)HTML 2. Sidan 1 av 7 2010-11-11
Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan
Läs merFöreläsning 4. CSS Stilmallar för webben
Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll
Läs merÖvnings hemtentamen med förslag till lösning, webbprogrammering
Övnings hemtentamen med förslag till lösning, webbprogrammering Se detta som ett förslag efter som uppgifterna ofta går att lösa få flera sätt. Uppgift 1 CSS 4 poäng Alla css regler skall placeras i en
Läs merLektion 2 Del 1 Kapitel 6
Lektion 2 Del 1 Kapitel 6 Inlärningsmål Att kunna kontrollera och styra webbsidors utseende med hjälp av CSS mallar Att med hjälp av CSS mallar kunna ge en hel website ett gemensamt utseende Att med hjälp
Läs merWEBBUTVECKLING Kursplanering
Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,
Läs merF07 Stilmallar Dagens agenda
F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar
Läs merLektion 3 HTML, CSS och JavaScript
Lektion 3 HTML, CSS och JavaScript I den här lektionen behandlas HTML, CSS och JavaScript (JS). Det förutsätts att lektion 1 och 2 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML
Läs merWebbdesign vt. 2010. Innehållsförteckning
Webbdesign vt. 2010 mångar: Kl. 8:30 12:00 Innehållsförteckning 2. FTP-hur gör man? 3. Grundtaggar 5. Tabeller 6. Infoga bilder 7. Rubriker och fonter 8. Övning 1 9. Installera HTML-edit 11. Startsidans
Läs merCSS- Cascading Stylesheets
CSS- Cascading Stylesheets 2D1525 Programmering för interaktiva medier http://www.nada.kth.se/kurser/kth/2d1525/ Cascading Stylesheets Ett språk för att definiera hur XML-dokument ska rendreras på web,
Läs merInternet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20
Laboration 3 CSS del 2 1 av 20 Vad kommer jag att lära mig på laboration 3? 1. Skriva en stilmall Boxegenskaper o border o margin o padding o width o float o clear Färger och bakgrundsbilder Positionering
Läs merManual för visionutv.net Redigera
Manual för visionutv.net Redigera Version 2.0 Visionutveckling 2004 Innehåll: 1 Om Redigera 3 1.1 Bakgrund 3 1.2 Hur Redigera är uppbyggt 3 1.3 Vad är? 4 2 Inloggning 6 3 Nyheter i Redigera 2.0 7 3.1 Funktionsknappar
Läs merIntegrerad i egen cup-portal Sid 1
Integrerad i egen cup-portal Sid 1 Skillnader mellan fristående och integrerad cup-portal En liten viktig synpunkt innan ni går vidare: Det går snabbt och enkelt att växla mellan den fristående och integrerade
Läs merCSS-övningar. 1. Grunder
CSS-övningar 1. Grunder CSS Testa stilmallar Klasser Elementen div och span Ärvda egenskaper Mer om typsnitt, marginaler och mått Textdekor Fristående CSS -fil Attributet style Prioritetsordning hos stilelement
Läs merIntroduktion till programmering
Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med
Läs merT a b e l l e r - t a b l e s
skriv ut» T a b e l l e r - t a b l e s Exempel på tabeller» Grundkoden för tabellen» Tabell- och kolumnbredd» Sammanfoga celler» Bakgrundssbild och bakgrundsfärg» Kantlinjebredd och färg» Avstånd mellan
Läs merWebbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5
Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med
Läs merHTML & webbteknik. Introduktion till HTML. Formatering. Struktur HTML. Uppdelning. Hur man skapar hemsidor. Öppen standard W3C. Plattformsoberoende
Introduktion till HTML HTML & webbteknik Hur man skapar hemsidor Öppen standard W3C World Wide Web Consortium Plattformsoberoende Om standarden följs. XHTML Utveckling av HTML, kommer kanske i framtiden
Läs mer<header> </header> <footer> </footer>
Tidigare har man använt taggen för att märka delar av dokument. I HTML5 har man lagt till stöd för de nya taggarna för att det inte ska bli så många -taggar. I exemplet nedan använder
Läs merWebbdesign vt. 2009. Innehållsförteckning
Webbdesign vt. 2009 Fysiska träffar onsdagkvällar: Kl. 18:00 21:00 28/1 11/2 11/3 25/3 1/4 22/4 6/5 Innehållsförteckning 2. FTP-hur gör man? 3. Vad ska jag göra? 4. Grundtaggar 6. Tabeller 7. Infoga bilder
Läs merSpråk för webben introduk4on 4ll HTML
Föreläsning i webbdesign Språk för webben introduk4on 4ll HTML Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se En webbsidas beståndsdelar Text (formaterad, strukturerad) Länkar Inkluderade
Läs merEn bortsprungen katt
Nivå 1 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. En bortsprungen katt
Läs merEn stiligare portal Laboration 3
Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt
Läs merLabora&on 2 HTML och validering övningar/uppgi:er
Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det
Läs mer<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim
Kursledare: Mahmud Al Hakim Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet
Läs merTentamen ITK:P2. Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng.
Tentamen ITK:P2 lördag 2007-04-14 Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng. 40 poäng ger betyget G, 55 ger VG Peter Mozelius DSV 1.) Ditt
Läs mer/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }
/*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height:
Läs merRepetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma
Läs merRepetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Föreläsning 2 Internet Hypertext Server och klient HTTP HTML Internet Många sammankopplade nät Gemensamma adresser T ex 10.10.0.1 Gemensamma protokoll Protokoll = regler och algoritmer för kommunikation
Läs merLaboration med Internet och HTML
Laboration med Internet och HTML Denna laboration går ut på att du skall kunna skapa enkla hemsidor i HTML. Vi kommer inte att ta upp edstorer för hemsidor som t.ex. DreamWeaver eller FrontPage. Dessa
Läs merHur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka
Webben som verktyg Idag: Hur hänger det ihop? Viktiga tekniker Stegen i ett webbprojekt Verktyg Dreamweaver Photoshop Joomla CMS Storyboard och flödesschema Fixa webbhotell Hur hänger det ihop? För att
Läs merBilder. Bilder och bildformat
och bildformat Det första du måste göra är att skaffa bilder att lägga in i ett HTMLdokument. Ta en bild med din mobil/ webbkamera eller rita bilden själv.du kan ta gratisbilder från Google, gå in på bilder
Läs merLaboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter
Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter 1M321 Webbteknik 1, 7,5hp Medieteknik 2018 Rune Körnefors rune.kornefors@lnu.se 1. Skapa ett nytt HTML-dokument I denna laboration
Läs merCascading Style Sheets (CSS) An Introduction. Nayeb Maleki
Cascading Style Sheets (CSS) An Introduction Nayeb Maleki CSS CSS utvecklades under mitten av 90-talet för att kunna separera stilformatering och formateringsinformation från innehåll i HTML sidor. Fungerar
Läs merNätet. Uppgiften. Nivå
Nivå 1 Nätet 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. Uppgiften Har
Läs merWebbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011
Webbkurs för distriktsansvariga Stockholm den 7 och 13 september 2011 Klistra in text från Word Klistra in: all formateringskod från Word kommer med och är den som styr det webbläsaren visar, även om man
Läs merEDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript
EDA095 HTML Per Andersson Lund University http://cs.lth.se/pierre_nugues/ April 26, 2017 Innehåll: HTML, CSS, DOM, JavaScript Per Andersson EDA095 HTML April 26, 2017 1 / 23 Webben Webben byggs upp av
Läs merHTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00
Mitthögskolan ITM Telefon 063-16 53 00 HTML Laborationskompendium i konstruktion av webbsidor Detta exemplar tillhör: VT 2005 Mittuniversitetet, ITM Telefon 063-16 53 00 Laborationskompendium för konstruktion
Läs merFrågor och svar - Diagnostisk prov ht14 - Webbutveckling 1
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi
Läs merGuide för att skapa & ändra Sidor och Statiska block - Speedcom E-Handel
Guide för att skapa & ändra Sidor och Statiska block - Speedcom E-Handel * Zooma dokumentet (150%) så ser du skärmdumparna bättre. De flesta texter som du kan ändra ligger i statiska block så vi börjar
Läs merFör att få respektive betyg krävs: 25 för godkänt, 37,5 för väl godkänt (obs betyget gäller tentan, inte kursen som helhet)
Webbdesign Provmoment: Ladokkod: Tentamen ges för: TentamensKod: TEN NWD011 SV16 7,5 högskolepoäng Tentamensdatum: 31 okt 2017 Tid: 9-13 Hjälpmedel: Färgpennor är tillåtna. Totalt antal poäng på tentamen:
Läs merTNMK30. Elektronisk publicering
TNMK30 Elektronisk publicering VÄLKOMNA TILL KURSEN! Katerina Vrotsou katerina.vrotsou@liu.se Medieteknik. 2004 Informationsvisualisering, visuell data analys MEDVERKANDE Stefan Gustavson, stefan.gustavson@liu.se
Läs mer! Katerina Vrotsou! Medieteknik. 2004! Informationsvisualisering, visuell data analys
VÄLKOMNA TILL KURSEN! TNMK30 Elektronisk publicering! Katerina Vrotsou! katerina.vrotsou@liu.se! Medieteknik. 2004! Informationsvisualisering, visuell data analys MEDVERKANDE OVERVIEW! Stefan Gustavson,
Läs mer24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den
24-timmarswebben WebPublish gör det möjligt att skapa läsvänliga sidor. Vi tycker att det är en självklarthet att informationen på en webbplats ska vara tillgänglig för och kunna läsas av så många som
Läs merWebbutveckling Laboration 1: HTML5 och CSS3.
Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan
Läs merWEBDESIGN A - DTR 1210
Lektion 9: Tips tricks och diverse Bakgrundsbilder Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt är att använda bakgrundsbilder. Man behöver en bild: HTML-koden
Läs merWebbstandarder för fler än en plattform
Beteckning: Institutionen för matematik, natur- och datavetenskap Webbstandarder för fler än en plattform Mikael Norling, Tomas Wigren Juni 2008 Examensarbete, 15 poäng, B Datavetenskap Internetteknologi
Läs merWEBDESIGN A - DTR 1210
Lektion 6: Tabeller Vi ska lägga till en tabell i hemsidan. Först ska vi titta lite på hur man gör tabeller. Vi börjar med enklast tänkbara tabell. En tabell med bara en ruta: Nu ska vi gå igenom steg
Läs merLabora&on 4 CSS och validering övningar/uppgi9er
Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna
Läs merWebbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion
Webbteknik En kort introduktion Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender 1 Historisk återblick 89 CERN Tim Berners Lee Ett plattformsoberoende sätt att sprida
Läs merLektion 1, Del1, Kapitel 4
, Del1, Kapitel 4 Inlärningsmål Att förstå uppbyggnaden av XHTML dokument Att kunna använda XHTML för att skapa enkla webbsidor. Att kunna lägga till bilder till en webbsida Att förstå hur man skapar och
Läs merLabora&on 7 Syfte med laborationen:
Labora&on 7 Syfte med laborationen: - att förstå enkel 7ilhantering i PHP - att repetera grundläggande PHP- begrepp såsom loopar, arrayer, stränghantering och formulär. VIKTIGT: uppgift 3-5 är repetitionsuppgifter
Läs merTDDD52 CSS. Färger. Färger 1/3/13
Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis
Läs merIkon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering
Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning... 10 CSS-klass... 10 Egna anteckningar:...
Läs merInförande av CSS i existerande tabellbaserat HTML-dokument
Institutionen för kommunikation och information Examensarbete i datalogi 10p C-nivå Vårterminen 2006 Införande av CSS i existerande tabellbaserat HTML-dokument Henrik Larsson HS-IKI-EA-06-604 Examensrapport
Läs merDu kan själv följa med i denna steg-för-steg guide i din texteditor.
Grundläggande HTML HTML Steg-för-steg Du kan själv följa med i denna steg-för-steg guide i din texteditor. doctype Linköpings universitet I textdokument som används på internet finns på första raden information
Läs merTNMK30 - Elektronisk publicering
Webben TNMK30 - Elektronisk publicering Vad är internet? Vad är internet? Vad är internet? Internet: sammankoppling av datornätverk. Används för bl.a. epost, chat, filöverföring, webbsidor. Kommunikation
Läs merLabora&on 4 CSS och validering samt fråga D övningar/uppgi?er
Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna
Läs merProgrammeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen
MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering
Läs merWebbteknik för ingenjörer
Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera
Läs merHTML, SGML, CSS, XML, XHTML, MIME, HTTP
Internets innehåll HTML, SGML, CSS, XML, XHTML, MIME, HTTP gruint06/ingint06, internets innehåll Föreläsning 2, bild 1 av 27 Vad ska vi lära? Vad HTML är, var det kommer från och var vi hittar information
Läs merHTML. Introduktion till HyperText Markup Language
HTML Introduktion till HyperText Markup Language 1 Frågor innan vi börjar? 2 Dagens föreläsning Snabb introduktion till webben Varför använder vi HTML? Ett första HTML-dokument Metadata Teckenkodning Validera
Läs merLabora&on 6 CSS och responsiv webbdesign övningar/uppgi:er
Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on
Läs merHyperlänkar. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor).
Länkar, ankar och resurser En länk är en hänvisning från ett dokument till en resurs. En resurs kan nästan vara vad som helst. Det mesta på internet är resurser i någon form, som exempelvis HTLM-dokument,
Läs merHandbok HTML. Vi utvecklar kontinuerligt nya titlar, besök www.rxk.se för aktuell statuslista. Gör din beställning direkt i vår webbutik.
Handbok HTML I denna Handbok lär du dig att skapa egna hemsidor från grunden. Handboken innehåller information om hur du hanterar texter, bilder, tabeller, ramar och listor. Du får även läsa om grunderna
Läs merDel 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550
Del 1 och 2 HTML/CSS Vi har fått i uppgift att göra en hemsida av eget val! Jag har bestämt mig för att skapa en hemsida åt en påhittad restaurang här i Umeå som inriktar sig på exklusiv nyttig mat och
Läs mer07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html
Stilmallar - styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html iecept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Utseende
Läs merAtt styla webbsidor. Nivå. Uppgiften
Nivå 2 Att styla webbsidor 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.
Läs merOptimering av webbsidor
1ME323 Webbteknik 3 Lektion 7 Optimering av webbsidor Rune Körnefors Medieteknik 1 2019 Rune Körnefors rune.kornefors@lnu.se Agenda Optimering SEO (Search Engine Optimization) Sökmotor: index, sökrobot
Läs merUppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 3. Peter Dalenius Institutionen för datavetenskap
Uppmärkningsspråk TDP007 Konstruktion av datorspråk Föreläsning 3 Peter Dalenius Institutionen för datavetenskap 2017-01-26 2 Vad handlar det andra seminariet om? Strukturerad text Uppgifter Hämta information
Läs merITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML
ITK:P2 F1 FTP, HTTP, HTML, XML och XHTML DSV Peter Mozelius 1 Hemsidor med HTML Hur många av er har provat på att bygga en egen hemsida med HTML eller XHTML? För hand eller med hjälpverktyg? Har ni lagt
Läs merLabora&on 5 CSS och layout samt fråga E övningar/uppgi>er
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Dokument i övningarna I denna labora&on finns inga filer ar
Läs merHTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren.
Vad är Semantic Elements? HTML5 Semantic Informationen kommer från w3schools.com Semantik (av grekiska sema, "tecken") avser det vetenskapliga studiet av teckensystems innebörd och tolkning. Semantic elements
Läs merLabb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller
Labb 3: ASP.NET 4.5 Anpassningar av användargränssnittet: Master Pages, Teman, och Kontroller Beräknad tidsåtgång: ca. 3 timmar. I ASP.NET 4.5 finns en stor mängd nya funktioner för att förenkla utvecklingen
Läs merÖvning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:
Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både
Läs mer