Att berätta med webb + En introduktion till HTML

Transkript

1 Att berätta med webb + En introduktion till HTML

2 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. Konflikt/hinder Mest för spänning i historien Inte riktigt för webbsidor Roller Karaktärer Handling Anslag, konflikt, klimax, avslut

3 Vad kan man göra med en webbsida? Text Information om produkt/tjänst/personal Bilder Bilder på produkt/tjänst/personal Animationer Ger sidan ett levande intryck Design Extremt viktigt Dålig design gör att budskapet försvinner Bra design gör att fler nås av budskapet

4 Storytelling Marknadsföring Företag, organisation, produkt, etc. Fungerar bra på webbsidor Finns många andra exempel Bygger på sanning Behöver inte vara helt sant

5 Vad är speciellt med webben? Länkar Går att hoppa mellan informationen/sidorna Går att få fram ytterligare information Onlinjäritet Informationen kan komma i olika ordningar Besökaren kan (kommer att) se olika innehåll Besökaren kan starta på olika platser Ser man ofta till att hantera om det är viktigt

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 Vad är en tagg? <TAGG> innehåll </TAGG> Start-tagg Slut-tagg HTML-container

9 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

10 HTML-dokumentets struktur TITLE HEAD HTML BODY

11 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

12 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

13 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 and all. type anger mediatyp type="text/css" Det kan exempelvis vara text/css eller text/javascript.

14 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

15 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>

16 <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 innuti exempelvis följande element: ADDRESS, BLOCKQUOTE, DD, DIV, TD, TH

17 <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

18 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>

19 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>

20 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

21 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 och 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.

22 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>

23 Tre andra typer av länkar <p> <a href=" ies.html">specialtecken</a><br/> <a mail till Nisse</a> </p><br/> <a href=" tug0i8cfqrgmaodhwizza"><img SRC="bil6.jpg" ALT="bild på bil"></a><br/> <p>

24 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"

25 Bildexempel <img src="bild.gif" border="2"> <img src="mapp/bild.gif"> <img src="

26 Länka med bilder <a href=" <img src=" </a>

27 Image maps hotspot bild Bilder med klickbara områden (länkar)

28 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"

29 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>

30 Ordnade listor, oordnade listor och definitionslistor LISTANS UTSEENDE STYRS I CSS-filen

31 Tabeller Används för att presentera data prydligt uppspaltat Skapas med taggen <table> tabellrader skapas med <tr> tabellceller på raderna med <td>

32 CSS Cascading Style Sheets

33 CSS-fil: minstilmall.css h1 { text-align: center; } h2 { font-style: italic; } p { color: maroon;} <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>l2</title> <link href= minstilmall.css" rel="stylesheet" type="text/css" /> </head>

34 Inline stil <h1>rubrik 1</h1> <p style="font-family:arial, Helvetica, sans-serif; margin:15px; padding:1em; background-color:gray; width:10em; color:yellow"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

35 Internal stilmall <title>l4</title> <style type="text/css" media="screen"> p { font-family:arial, Helvetica, sans-serif; margin:15px; padding:1em; background-color:red; width:10em; color:black; } </style> </head>

36 Extern stilmall <head> <title>extern stilmall> <link rel= stylesheet href= minstilmall.css media= screen > <head> <body> <h1>rubrik 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </body>

37 Extern stilmall p { font-family:arial, Helvetica, sans-serif; margin:15px; padding:1em; background-color:gray; width:10em; color:white; } h1 { margin:15px; }

38 CSS för skrivaren eller mobilen <link rel= stylesheet href= for_printer.css media= print > <link rel= stylesheet href= mobile.css media= handheld >

39 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>

40 Box-modellen <div id="content"> <h1> Rubrik 1 </h1> <p> Lorem... </p> </div> #content {margin:10px; border:5px solid gray; background-color:blue; width:200px; padding:25px;} p {font-family:arial, Helvetica, sans-serif; margin:15px; padding:10px; background-color:gray; margin:20px; border:10px dashed white; background-color:red; width:120px;} h1 {color:white;}

41 ID och Class p {color:black;} div p {color:red;} #speciell {background-color:#999900;} h1#first_header {border:dotted} p#vanlig{color:blue;} p#vanlig em {color:green;}.special {background-color:#999999;} p.center {color:maroon} ID är unikt för ett speciellt element Class specifierar en stil för flera element

42 <body> <h1 id="first_header">detta är <em>första</em> rubriken </h1> <p id="vanlig">och här kommer <em>brödtexten</em> </p> <p>lorem ipsum dolor </p> <div id="speciell"><p>ut wisi enim </p></div> <h1 class="special">detta är <em>andra</em>rubriken </h1> <p class="special">nam liber tempor. </p> <p>claritas est etiam.</p> </body>

43

44 Position static p#third{ position: static; }

45

46 Position relative p{ border: 1px solid #333333;} p#first{} p#second{} p#third{ position: relative; left: 20px; top: 30px; } p#fourth{}

47

48 Position absolute rel "utf-8"; /* CSS Document */ p{ border: 1px solid #333333; } p#first{} p#second{} p#third{ border: 1px solid #f00; position: absolute; left: 20px; top: 30px; color:red; } p#fourth{}

49

50 Position Fixed rel "utf-8"; /* CSS Document */ p{ border: 1px solid #333333; } p#first{} p#second{} p#third{ border: 1px solid #f00; position: fixed; left: 20px; top: 30px; color:red; font-weight: bolder; } p#fourth{}

51

52 Länkar 5 tillstånd Normal a:link Visited a:visited Hover a:hover Active a:active Focus a:focus

53 <p> Lorem ipsum dolor sit amet, <a href="l8.html">consectetur </a>adipisicing elit, sed do eiusmod tempor incididunt ut labore <a href="l8.html">et dolore magna</a> aliqua. Ut enim ad <a href=" minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> a{color:blue;} a:link {color: red;} a:visited {color: green;} a:hover {color:black; font-weight:bold; text-decoration:none; border-bottom:1px solid blue; padding:.4em 0; position: relative; background: yellow;}

54