Introduktion till HTML - Grunder

Storlek: px
Starta visningen från sidan:

Download "Introduktion till HTML - Grunder"

Transkript

1 Introduktion till HTML - Grunder Kursmål Att ge kunskaper och färdigheter om hur man utformar en Webbsida. Kännedom om multimediala programvaror. Att använda text och bild (även ljud) för att förstärka förmedling av information. Att söka information på internet för att följa utvecklingsprocessen inom Webb. Vad är HTML? Förkortningen HTML står för Hyper Text Markup Language. HTML är ett sidbeskrivningsspråk och används alltså för att bestämma hur hemsidor på Internet skall se ut. HTML skapades i datorernas barndom och är därför både inexakt och svåranvänt. Hypertext Hypertext är TEXT som innehåller aktiva kommandon till annan text. Dessa kommandon kallas hyperlänkar eller enklast Länkar. I länkarna finns osynlig information om vart de leder. Genom att välja en sådan länk instrueras Webbläsaren att visa det HTMLdokument som länken hänvisar till. Varför är HTML bra? HTML är grunden för Internets genomslagskraft. Att koppla ihop datorer till nätverk är inget nytt, men HTML är en standard för att presentera information som används över hela världen. En hemsida som följer den standarden ser i princip likadan ut över hela världen. Eftersom HTML egentligen bara består av text kan vem som helst med en dator och kunskap göra hemsidor. Med andra ord är HTML lika tillgängligt för den fattige studenten i Filippinerna som för Bill Gates i egen hög person. Att kunna kommunicera med alla är det som gör HTML unikt. Varför är HTML dåligt? HTML är gjort för att kunna användas av alla oavsett vilken typ av dator man sitter vid. Priset för det är att det inte finns särskilt många finesser eller möjligheter för t.ex. avancerad och exakt layout. Dessutom tar det ganska lång tid att lära sig. HTML-språket utökas hela tiden med nya möjligheter. Nackdelen är att nyheterna inte förstås av alla. Det betyder att det visserligen är möjligt att göra otroligt avancerade hemsidor men att det också utestänger många från att ta del av informationen. Därmed förvandlas hela idén med Internet till en klubb för inbördes beundran av de som kan skriva de "häftigaste" koderna. 1

2 Vad behövs? Det du behöver bäst är kanske tålamod. Däremot behöver du inte några dyra program eller avancerad utrustning. Du behöver bara ett redigeringsprogram. Det räcker utmärkt med en enkel ordbehandlare. Om du har Windows/Windows 95 kan du t.ex. använda "Anteckningsblocket/Notepad/Wordpad". Om du har Macintosh kan du använda "Texthanteraren/Skriv Text". Det finns också många program som är specialgjorda för att göra hemsidor, t.ex. Netscape Navigator Gold, Microsoft Frontpage, Macromedia DreamWeaver, Adobe Go Alive. Dessa program försöker underlätta tillverkningen av hemsidor genom att efterlikna traditionella layoutprogram. Dessutom brukar det finnas inbyggd hjälp för filöverföring, länkkontroll m.m. I dagsläget kan specialprogram inte helt ersätta kunskap om HTML-kod för att göra riktigt bra hemsidor. För att titta på sidorna du gjort behövs en webbläsare, t.ex. Microsoft Internet Explorer (gratis) eller Netscape Navigator (gratis för studenter). HTML-språk När man skriver i HTML-språk specifierar man hur olika delar av texten skall visas genom att märka den (MARKUPP). Märkning sker med TAGS <> som på svenska kallas Taggar eller Tag. Man skriver en Taggs namn inom tecken mindre än [<] och större än[>]. Hur man skriver taggarna är valfritt, men det gäller att vara konsekvent och alltid använda antingen gemener eller versaler. Detta för att känna igen taggkommandot från övrig text. Start och sluttagg definierar kommandots start och avslutande. Du definierar ett HTMLdokument med <HTML> och avslutar med </HTML>. Som du ser har jag valt att definiera mina taggar med versaler. En tagg kan även kompletteras med ett attribut, dvs ett värde inom citattecken Ex med tagg <FONT FACE> anges vilket teckensnitt man vill ha. (Jag väljer Verdana som Attribut. Taggen ser ut så här: <FONT FACE= Verdana > HTML-dokumentets beståndsdelar HTML-dokument definieras med tagg <HTML> som start tagg. DEN formas av ett huvud och en kropp, liknande ett vanligt brev eller trycksak där kroppen definieras av satsytan. I HTML:s Huvud <HEAD> står vad dokumentet skall heta och i kroppen <BODY> finns innehållet i själva sidan. Det utgör grunprincipen och alla taggar skall avslutas med sluttagg: </HEAD>; </BODY>; </HTML>. Vi undersöker nu hur en webbsida kan byggas. Märket <HTML> definierar vilket språk och dokument vi jobbar med. (Numera finns även som första taggen <!DOCTYPE> som informerar om HTML-standard. Vi återkommer senare om detta.) 2

3 Märket <HEAD> markerar början av dokument-huvudet. Det är den del som skickas först till webbläsaren och i det skickas viktig information om sidans innehåll. <TITLE> är den titel Du ger ditt dokument som besökarna kommer att se och som syns i webbfönstret och som kan läggas i sökmotorer för att hitta din webbsida i www. <BODY> Här läggs innehållet, text, tabeller, bilder. En (enkel) HTML-Mall <HTML> <HEAD><TITLE>..</TITLE></HEAD> <BODY>.</BODY> </HTML> Vi stannar här. Vi kommer senare att arbeta med en enkel webbsida och fördjupa kunskaperna. 3

4 Hur är HTML uppbyggt? HTML består av en uppsättning koder som styr hur sidans innehåll skall presenteras. Varje textutseende och layout har sin egen kod. När du har angett en kod gäller den ända tills du avslutar den. Varje kod har alltså två delar en startkod och en slutkod. Start-koden är omgiven av <> och slutkoden är omgiven av </> Nästan alla koder fungerar på samma sätt även om några undantag finns. Titta t.ex. på följande exempel: <B> </B> är startkoden för fet stil och gäller för all text som följer efter den. är slutkoden för fet stil och gör att startkoden slutar gälla. Om du t.ex. vill att namnet "Kalle" skall stå i fet stil måste du alltså skriva <B>Kalle</B> Det går också att lägga flera koder i följd, om du t.ex. skulle vilja ha texten både fet och understruken. Använder man flera koder i följd bör man avsluta dem i motsatt ordning från hur man startade dem. Titta på exemplet nedan: <B><U>Kalle</U><B> Eftersom koderna följer en standard måste de skrivas exakt. Det är alltså ingen idé att hitta på egna koder som man tycker skulle vara bra. Skriver du fel ignoreras helt enkelt koden. Däremot spelar det ingen roll om skriver med små eller stora bokstäver eller om du har flera koder på samma rad. Många tycker att det är lättast att läsa om det är en kod per rad. Som du kommer att få se längre fram kan koder också ha ett eller flera attribut som i sin tur kan anta ett värde. Det ger möjlighet till fininställningar. Om vi t.ex. vill ha ett nytt stycke som är centrerat måste vi lägga till koden för nytt stycke <P> och till det lägga attributel ALIGN som skulle få värdet CENTER. Alltihop skulle se ut som här nedan: <P ALIGN="CENTER"> Om övningarna i detta häfte Du är ansvarig hos cyberföretaget Website och har fått i uppdrag att presentera företaget och dess produkter och tjänster på Internet. Övningarna visar dig steg för steg hur du bör gå tillväga. Redan efter första delen har du en fungerande hemsida. I del två och tre får du lära dig fler finesser. Den färdiga "sajten" kommer att bestå av tre separata dokument "index.htm", "tjanster.htm" och "produkt.htm". 4

5 Enkel HTML Filnamn Hemsidor består av ett eller flera dokument. Dokumenten lagras som filer på en server, d.v.s. en dator som är uppkopplad till Internet dygnet runt. Oftast fungerar det så att du får använda en katalog på den datorn till att lägga hemsidans filer i. Servrar kan ha olika regler för hur du skall namnge filerna, men med tanke på de som vill använda hemsidan bör du begränsa sig till max 8+3 tecken t.ex. "bil.htm" (OBS små bokstäver). Filändelsen visar vilken typ av dokument det handlar om. Alla HTML-filer bör ha filändelsen ".htm". Andra vanliga filändelser är t.ex. ".gif", ".jpg" ".mid", ".wav". I vissa fall måste det dokument som du vill använda som startsida för besökaren ha filnamnet "index.htm". Starta redigeringsprogrammet och skapa ett nytt dokument. Spara det med namnet "index.htm" i katalogen "hemsida". När din "sajt" är helt färdig kommer den att bestå av tre separata dokument "index.htm", "tjanster.htm" och "produkt.htm". Du kan dock tills vidare vänta med att skapa dem. Obligatoriska koder <HTML><HEAD><TITLE><BODY> Alla hemsidor bör inledas med koden som talar om för webbläsaren att dokumentet i fråga är ett HTML-dokument. Skriv in koden: <HTML> Nästa obligatoriska kod talar om att det som följer är sidhuvudsinformation. Det som skrivs här visas inte i direkt i läsaren, men kan ha andra funktioner. Det får bara finnas en gång per dokument. Skriv in sidhuvudskoden: <HEAD> 5

6 Direkt efter följer koden för den text som skall hamna i fönstrets titelrad. Det du skriver här blir också den texten som syns i bokmärken. Dessutom använder Internets sökmotorer informationen här. Man bör med andra ord ha en titel som säger något om vad dokument faktiskt handlar om. Skriv in titelkoden: <TITLE>Website Hammarbyhamnen</TITLE> Avsluta sedan hela sidhuvudet med: </HEAD> Nu är det dags att påbörja den del av sidan som kommer att synas i webbläsaren - sidkroppen. Skriv in koden för sidkropp: <BODY> Text <Hn> (H=heading) <B> (B=bold) <I>(I=italic) <U> (U=underlined). Eftersom webbläsare tolkar koderna lite olika är det omöjligt att bestämma exakt hur texten skall se ut i mottagarens läsare. Däremot kan du ange vilken text som skall betonas, och ungefär hur detta ska ske. Rubriker Rubriker är egna stycken med större teckengrad. De skapas med koden <Hn> där "n" kan vara ett nummer från 1-6. <H1> är den största rubriknivån och <H6> den minsta. Senare kan du prova de olika storlekarna. Skriv in rubriken på följande sätt: <H1>Välkommen till Website</H1> Titta hur det ser ut i läsaren 6

7 Fet, kursiv och understruken text Text kan göras fet kursiv eller understruken. Understruken text används dock inte så ofta på Internet eftersom den är lätt att förväxla med länkar, som också är understrukna. Skriv in nedanstående text direkt efter rubriken: <B>Website</B> är ett nystartat företag i Hammarbyhamnen med 15 anställda. Företagets namn kommer från det latinska ordet <I>Webus situs</i> som betyder <I>dator</I> eller <I>nätverk</I>. Företaget har inspirerats av den låga nivån i samhället och på <U>Internet</U> i synnerhet. Titta hur det ser ut i läsaren Radbrytningar och stycken <BR> (BR=break) <P> (P=paragraph). <HR> (HR=horisontal ruler) Det är möjligt att dela in text med hjälp av radbrytningar och stycken Skillnaden mellan radbrytningar och stycken är att stycken alltid har ett avstånd före. Det passar bra för att skapa mer luft i texten. (OBS! Notera att dessa koder inte behöver någon slutkod) Lägg till följande stycke efter texten du nyss skrev: <P>Vår dynamiska VD, <B>Gill Bates</B> har två stora passioner i livet. <BR>Hon skriver dikter och romaner, men skapar också spännande hemsidor. Titta hur det ser ut i läsaren Horisontell linje Som dekoration, och för att hjälpa betraktaren att orientera sig på sidan ska du föra in en horisontell linje. (OBS denna kod behöver ingen slutkod) Lägg till följande kod till din sida: <HR> Titta hur det ser ut i läsaren 7

8 Länkar <A> (A=anchor) Det som gör Internet och HTML så fantastisktt är möjligheten att länka hemsidor till andra hemsidor. På det sättet kan all nödvändig information bli tillgänglig genom ett musklick. Vanligtvis visas länkar genom att vissa ord blir blå och understrukna. När du sedan klickar på länken hämtar din webbläsare in denna information. Länkar till andra sidor Koden för att göra länkar är lite annorlunda än de koder du hitintills stött på. Anledningen är att du både måste ange att det skall vara en länk och var den länken skall gå. Skapa länkar till sidorna "produkt.htm" och "tjanster.htm" som senare ska ingå i sajten genom att skriva in följande: Lägg också in kod för radbrytningar. <A HREF="produkt.htm">Produkter</A> som gör människor effektivare.<br> <A HREF="tjanster.htm">Tjänster</A> som gör att produkterna fungerar bättre.<br> Titta hur det ser ut i läsaren. Om du har gjort rätt är orden "Produkter" och "Tjänster" blå och understrukna. Du kan dock ännu inte klicka på dem eftersom de övriga dokumenten i sjaten ännu inte är färdiga. Infoga bilder <IMG SRC="filnamn"> (IMG=image SRC=source) Bilder som visas på en hemsida ingår inte i själva dokumentet. Istället fungerar det så koden talar om för webbläsaren att den skall visa en bild och var den bilden kan hittas. (OBS denna kod behöver ingen slutkod) Internet är väldigt, väldigt stort och därför kan det vara mycket besvärligt att ange var bilden finns. Om du vill göra det enkelt lägger du bilden i samma katalog som själva hemsidan. Då behöver du nämligen inte ange var bilden finns utan webbläsaren hittar den själv. Alla bilder måste ha formatet ".jpg" eller ".gif". Om du gör något fel visar webbläsaren att bilden inte kan hittas. Infoga bilden "line.gif" längst upp på sidan (mellan <BODY> och <H1>) på följande sätt: <IMG SRC="line.gif"> 8

9 Titta hur det ser ut i läsaren Avsluta sida och dokument Avsluta sidan genom att skriva: </BODY> Slutligen avslutar du hela dokumentet med: </HTML> Spara dokumentet 9

10 Fler övningar produkt.htm Skapa ett nytt dokument och spara det som "produkt.htm". Skriv in följande: <HTML> <HEAD> <TITLE>Websites produkter</title> </HEAD> <BODY> <IMG SRC="line.gif"> <H1>Websites produkter</h1> <HR> <P> <B>Macintosh</B> - för den kräsne<br> <B>Power Tools</B> - för kreatören<br> <B>SIMM-line Art Gallery</I></B> - för skribenten<br> <B>Anti-DOS tools</b> - för humanisten<br> <B>Doktor Max</B> - Hjälpredan som håller din dator i trim<br> <P> <HR> <A HREF="tjanster.htm">Tjänster</A> som gör att produkterna fungerar effektivare. <BR> <A HREF="index.htm">Tillbaka</A> till första sidan </BODY> </HTML> Spara dokumentet 10

11 tjanster.htm Skapa ett nytt dokument och spara det som "tjanster.htm". Skriv in följande: <HTML> <HEAD> <TITLE>Tjänster</TITLE> </HEAD> <BODY> <IMG SRC="line.gif"> <H1>Websites tjänster</h1> <HR> <P> <B>Nätverksterapi</B> - för Internetberoende<BR> <B>Sjukgymnastik</B> - för musarmbågar<br> <B>Rekreationsresor</B> - surfa till Honolulu<BR> <P> <HR> <A HREF="produkt.htm">Produkter</A> som gör människan effektivare<br> <A HREF="index.htm">Tillbaka</A> till första sidan </BODY> </HTML> Spara dokumentet 11

12 Medelsvår HTML Färger och bakgrunder <BODY BGCOLOR, TEXT, LINK, ALINK, VLINK, BACKGROUND> Färg på bakgrund och text Som du har sett blir hemsidans bakgrundsfärg automatiskt grå och texten svart. Om du vill ha andra färger måste du lägga till attribut och värden till <BODY>. Det kan vara ganska krångligt att ange exakta färger i HTML eftersom man måste använda speciella koder. Det finns som tur är 16 fördefinierade färger som du kan använda om du anger deras namn på engelska. De färger du kan välja mellan är: Engelskt namn Svenskt namn Hexadecimal Kod BLACK Svart # GREEN Grön # SILVER Grå #C0C0C0 LIME Klargrön #00FF00 GRAY Mörkgrå # OLIVE Olivgrön # WHITE Vit #FFFFFF YELLOW Gul #FFFF00 MAROON Rödbrun # NAVY Marinblå # RED Röd #FF0000 BLUE Blå #0000FF PURPLE Lila # TEAL Blågrön # FUCHSIA Cerise #FF00FF Öppna dokumentet "index.htm" och ändra bakgrundsfärgen till gult genom att lägga till följande attribut och värde till body: <BODY BGCOLOR="YELLOW"> 12

13 Titta hur det ser ut i läsaren Ändra nu också texten till röd genom att lägga till attributet "TEXT" med värdet "RED" i <BODY> <BODY BGCOLOR="YELLOW" TEXT="RED"> Länkfärger Det är också möjligt att ändra på länkarnas färger genom att lägga till fler attribut och värden. Attributet "LINK" ändrar färgen på länkar, innan man klickat på dem. Attributet "ALINK" ändrar på färgen precis medan man klickar på länken. Attributet "VLINK" slutligen påverkar färgen på de länkar man redan besökt. Ändra länkfärger genom att modifiera <BODY> på följande sätt <BODY BGCOLOR="YELLOW" TEXT="RED" LINK="GREEN" ALINK="LIME" VLINK="OLIVE"> Bilder som bakgrund Det går bra att lägga in bilder som bakgrund. Observera dock att det är omöjligt att ha bakgrundsbild och bakgrundsfärg samtidigt. Om bilden inte är stor nog för att täcka hela sidan kommer den att repeteras ända tills sidan är fylld. Tänk på att bakgrunder inte syns vid utskrift. Ändra nu <BODY> på följande sätt <BODY BACKGROUND="jazzbkgd.gif"> Text <FONT COLOR,FACE,SIZE> Textfärg Som du redan har sett kan man byta textfärg i hela dokumentet genom att ange det i <BODY>. Det går också att byta textfärg på enstaka ord och stycken. 13

14 Ändra textfärg på namnet "Gill Bates" på följande sätt: <FONT COLOR="TEAL">Gill Bates</FONT> Byta teckensnitt Det går rent teoretiskt att välja vilket teckensnitt som helst. Du måste dock vara medveten om att mottagaren kanske inte har dessa teckensnitt installerade i sin dator och därför inte kommer att kunna se sidan på samma sätt som du gör. Du kan därför också ange två alternativa teckensnitt. Finns inte heller de kommer standardteckensnitt att användas Ändra teckensnitt på rubriken "Välkommen till Website" på följande sätt <FONT FACE=Braggadoccio,Arial,Helvetica>Välkommen till Website</FONT> Ändra teckenstorlek Du kan också ändra storleken på text genom att lägga till attributet SIZE och ett värde mellan 1 (minst) och 7 (störst) i <FONT>. Ändra storlek på ordet "VD" på följande sätt: <FONT SIZE="7">VD</FONT> Stycken <P ALIGN> <CENTER> <UL> <OL> <DL> Vänsterställa, högerställa eller centrera stycken Om du inte gör någonting vänsterställs automatiskt alla stycken. Ibland kan högerställd eller centrerad text vara att föredra. Det åstadkommer du lätt genom att lägga till attributet ALIGN och något av värdena LEFT, RIGHT eller CENTER till <P>. (Dessa attribut kan även användas i rubriker) Högerställ stycket som handlar om den dynamiska VD:n genom att lägga till attribut och värde i styckekoden, på följande sätt: <P ALIGN="RIGHT"> Det finns också ett annat alternativ för att centrera text eller bilder. 14

15 Centrera rubriken "Välkommen till Website" på följande sätt: <CENTER>Välkommen till Website</CENTER> 15

16 Listor Att läsa sida efter sida med vanlig text är jobbigt för betraktaren. Ett sätt att bryta upp texten är att använda olika typer av listor. Det finns flera olika typer av listor. Listor behöver två koder - en som talar om vilken typ av lista det är fråga om, och för varje ny punkt. Punktlista Öppna dokumentet "produkt.htm" och ändra produktlistan till följande <UL> <LI><B>Macintosh</B> - för den kräsne<br> <LI><B>Power Tools</B> - för kreatören<br> <LI><B>SIMM-line Art Gallery</I></B> - för skribenten<br> <LI><B>Anti-DOS tools</b> - för humanisten<br> <LI><B>Doktor Max</B> - Hjälpredan som håller din dator i trim<br> </UL> Numrerade listor Öppna dokumentet "index.htm" och lägg till följande lista längst ner på sidan (före </BODY>) <OL> <LH>Personal <LI>Agnes Winterknapp, 32, civilekonom och pingislirare <LI>Werner Bontron, 45, civilingenjör och smörgåsfanatiker <LI>Bengt Olivetti, 38, jägare på jakt <LI>Sara Sahara, 26, ostälskare och konfigureringsexpert <LI>Vilgot Pardon, 32, rutinerad soffliggare <LI>Ezra Swärd, 23, receprion och växel <LI>Mats Swärd, 30, kabeldragre från Minsk <LI>Niklas Plååt, 23, viruskontrollant och hacker. <LI>Lina Styyf, 22, matematiker och analytiker <LI>Per Garthon, 52, Styrelseproffs och miljövän <LI>Wolfgang Makadam, 47, termineringsingenjör <LI>Gertrud Svensson, 49, mogen ordbehandlare <LI>Karl P Dahl, 36, kalkylering och offertskrivning <LI>Minna Laaksonen, 34, ingenjör och gympaledare <LI> Vesa Kangas, 32, systemerare på halvtid </OL> 16

17 Definitionslistor Öppna dokumentet "tjanster.htm" och ändra det på följande sätt: <DL> <DD><B>Nätverksterapi</B> - för Internetberoende<BR> <DD><B>Sjukgymnastik</B> - för musarmbågar<br> <DD><B>Rekreationsresor</B> - surfa till Honolulu<BR> </DL> Bilder <IMG,ALT,WIDTH,HEIGHT,BORDER,ALIGN> Ange dimensioner Det är egentligen inte nödvändigt att ange en bilds dimensioner för att använda den. Ibland kan det ändå vara bra att göra det eftersom sidan då kan kännas lite snabbare. En annat tillfälle då det skulle kunna vara användbart är om man vill ta fram en hemsidas layout, men ännu inte har fått tag i alla bilder - då kan man åtminstone se en tom bildram i rätt storlek. Bildens dimensioner anges i "pixlar" d.v.s. bildpunkter. I bildbehandlingsprogram, typ Photoshop, har du alltid möjlighet att ta reda på detta. Du anger bilddimensioner genom att lägga till attributen "HEIGT" respektive "WIDTH" som i exemplet nedan. Öppna dokumentet "index.htm" och infoga en bild med angivna dimensioner genom att lägga till följande rad längst ner på sidan (precis före slutkoden </BODY>) <IMG SRC="telefon.gif" WIDTH="166" HEIGHT="188"> Alternativtext De flesta webbläsare ger användaren möjlighet att stänga av bildvisningen för att göra surfandet snabbare. När man gör hemsidor måste du tänka på det. Det gäller särskilt om du använder bilder som länkar, eftersom det måste gå att klicka på dem även om bilden inte visas. Du bör därför lägga till en alternativtext som visas även om bilden inte skulle göra det. Du anger alternativtext genom att lägga till attributet ALT till <IMG>. Lägg till alternativtext till den bild du nyss infogade genom att ändra koden på följande sätt <IMG SRC="telefon.gif" WIDTH="166" HEIGHT="188" ALT="Här skall det vara en bild på en telefon"> 17

18 Bildram Ibland kan det se trevligt ut att ha en ram runt bilder. Det åstadkommer man genom att lägga till attributet BORDER till <IMG>. Ramens tjocklek anges i pixlar. Lägg till en ram på två pixlar till den bild du nyss infogade genom att ändra koden på följande sätt: <IMG SRC="telefon.gif" WIDTH="166" HEIGHT="188" BORDER="2" ALT="Här skall det vara en bild på en telefon"> Justera bildpositionen Man kan justera bildens position i sidled på sidan genom att lägga till attributet ALIGN som kan anta värdet "LEFT", "RIGHT" eller "CENTER". Högerjustera bilden "telefon.gif" genom att ändra koden på följande sätt: <IMG SRC="telefon.gif" WIDTH="166" HEIGHT="188" BORDER="2" ALIGN="RIGHT" ALT="Här skall det vara en bild på en telefon"> Justera avståndet runt bilden Det är möjligt att ange hur mycket fritt utrymme som skall omge en bild. Man anger avståndet i höjdled genom attributet VSPACE och i sidled genom attributet HSPACE. Avståndet anges i pixlar. Så här skulle det t.ex. kunna se ut: <IMG SRC="telefon.gif" HSPACE="20" VSPACE="20"> 18

19 Länkar <A HREF NAME, MAILTO> Länkar inom den egna sidan Om man har en lång sammanhängande hemsida kan det vara praktiskt att skapa länkar mellan olika delar av sidan. För att göra det måste du ange en startplats och en landningsplats i dokumentet. Det gör du i två steg. För att ange startplats skall du, i dokumentet "index.htm", leta reda på orden "15 anställda" och skriva in följande kod framför och bakom: <A HREF="#GÄNGET">15 anställda.</a> Nästa steg är att skapa en landningsplats precis före listan med de anställda (före <OL>) genom att skriva in följande kod. <A NAME="GÄNGET"> Länkar för E-post En användbar möjlighet är att lägga in en länk för e-post på hemsidan. På det sättet blir det lätt för besökaren att få kontakt med dig. Längst ner i dokumentet "index.htm" (före slutkoden </BODY>) lägger du till följande text och kod för att skapa en e-postlänk: Vill du skicka <A Länkar till andras hemsidor Att länka till sidor någonstans på nätet är inte svårare än att länka till ens egna sidor. I <A> skriver du helt enkelt in adressen (URL) till sidan du vill gå. SÅ här kan det t.ex. se ut: <A HREF="http://www.microsoft.se"> Till Microsofts hemsida</a> Tabeller <TABLE, TR,TD> (TR=TableRow) (TD=TableData) Tabller låter kanske inte så upphetsande men faktum är att de kan användas till mer än det traditionella. Framför allt är det ofta det enda sättet att placera bild och text exakt där man vill 19

20 ha dem. Dessutom är det enda sättet att skriva text i kolumner. När man gör tabeller krävs det att man håller tungan rätt i mun. Det tar ett tag innan man kommer underfund med hur det fungerar. Ett bra sätt är att låna inspiration från andras tabeller som man ser på internet. Koden för tabell är <TABLE> och den måste alltid två andra koder, nämligen <TR> som ger ny rad, och <TD> som ger ny cell. Alla koder måste också avslutas i rätt ordning. En enkel tabell Öppna dokumentet "produkt.htm" och skapa en tabell med en pixel tjock ramlängst ner på sidan (före slukoden </BODY>. Skriv in följande kod och attribut: <TABLE BORDER="1"> Lägg sedan till en ny rad genom koden. <TR> Nästa steg är att lägga till två celler med innehåll. Skriv: <TD>Produkt</TD><TD>Pris</TD> Avsluta nu raden genom att skriva in följande slutkod: </TR> Lägg ny till ytterligare en rad med två celler genom att skriva in följande kod: <TR> <TD>Doktor Max</TD><TD>999,50</TD> Avsluta nu även denna rad genom: </TR> 20

21 Avsluta nu hela tabellen genom: </TABLE> Titta hur det ser ut i läsaren Justera storleken Normalt sett anpassar sig cellens storlek så att innehållet precis ryms. Det går också att själv bestämma bredd och höjd genom att lägga till attributen WIDTH och/eller HEIGHT. Alla storleksangivelser sker i pixlar - bildpunkter. Justera tabellens bredd och de olika cellernas höjd på följande sätt: <TABLE BORDER="1" WIDTH="150"> <TR> <TD HEIGHT="30">Produkt</TD><TD HEIGHT="30">Pris</TD> </TR> <TR> <TD HEIGHT="50">Doktor Max</TD><TD HEIGHT="50">999,50</TD> </TR> </TABLE> Justera cellinnehåll Cellens innehåll kan justeras i sidled genom attributet ALIGN (möjliga värden: LEFT, RIGHT, CENTER) och i höjdled genom attributet VALIGN (möjliga värden: TOP, BOTTOM, MIDDLE) Justera "Pris" och "999,50" så att de hamnar längst till höger i sina celler. Gör följande ändringar: <TABLE BORDER="1" WIDTH="150"> <TR> <TD HEIGHT="30">Produkt</TD><TD HEIGHT="30" ALIGN="RIGHT">Pris</TD> </TR> <TR> <TD HEIGHT="50">Doktor Max</TD><TD HEIGHT="50" ALIGN="RIGHT">999,50</TD> </TR> </TABLE> 21

22 Justera "Produkt" och "Pris" så att de hamnar längst ner i sina celler. Gör följande ändringar: <TABLE BORDER="1" WIDTH="150"> <TR> <TD HEIGHT="30" VALIGN="BOTTOM">Produkt</TD><TD HEIGHT="30" ALIGN="RIGHT" VALIGN="BOTTOM">Pris</TD> </TR> <TR> <TD HEIGHT="50">Doktor Max</TD><TD HEIGHT="50" ALIGN="RIGHT">999,50</TD> </TR> </TABLE> Bakgrundsfärg Det går även att ändra bakgrundsfärg genom attributet BGCOLOR. Om man ger attributet till <TABLE> får hela tabellen samma bakgrundsfärg, men man kan också ge attributet till enstaka celler. Ändra bakgrundsfärg i de två cellerna i den översta raden genom att införa följande ändringar: <TABLE BORDER="1" WIDTH="150"> <TR> <TD HEIGHT="30" VALIGN="BOTTOM" BGCOLOR="#FFFF00">Produkt</TD><TD HEIGHT="30" ALIGN="RIGHT" VALIGN="BOTTOM" BGCOLOR="#FFFF00">Pris</TD> </TR> <TR> <TD HEIGHT="50">Doktor Max</TD><TD HEIGHT="50" ALIGN="RIGHT">999,50</TD> </TR> </TABLE> Bilder i tabellen Den stora fördelen med tabeller är att man kan placera innehållet nästan exakt där man vill ha dem. Det fungerar också med bilder. Enkelt är det också. Det enda du behöver göra är att byta ut orden mot bilder, d.v.s. du lägger in <IMG SRC="filnamn"> i en cell. 22

23 Avancerad HTML Färger och bakgrunder Allt du ser på en bildskärm byggs upp av tre färger, eller för att vara mer exakt ljus med tre våglängder- Rött, Grönt, Blått- s.k. RGB-färg. Som du redan vet finns det 16 fördefinierade färger men naturligtvis finns det ännu fler färger att välja mellan, närmare bestämt stycken. Även om det fanns så många namn på färger skulle det nog ta ganska lång tid att lära sig dem. Genom att ange mängden av respektive färg kan du dock själv blanda till en nyans som passar. När man ska blanda färg anger man färgmängd med numeriska benämningar i stället för namn. Det som krånglar till det är att man använder sig av det hexadecimala talsystemet i stället för det vanliga decimala. Ett hexadecimalt värde kan t.ex. se ut så här #5F89E2 Trots att det hexadecimala systemet verkar omständigt är det faktiskt inte så besvärligt att förstå hur det fungerar. Om du tänker på vårt vanliga decimala talsystem vet du att det har tio olika siffror (0-9). Genom att låta siffrornas position avgöra huruvida det rör sig om ental, tiotal, hundratal, etc. kan vi med enbart dessa tio siffror ändå beskriva stora tal. Se t.ex. på hur man skriver talet 255 nedan Hundratal Tiotal Ental Det hexadecimala talsystemet däremot har sexton siffror först 0-9 och sedan A-F. Tänk dig att du har räknat till F (15 decimalt) och att du sedan vill fortsätta räkna. Då måste du göra som i det decimala systemet och låta siffrornas position bestämma dess värde. För att räkna till 16 decimalt skulle du hexadecimalt behöva skriva 10. Genom att fortsätta på det sättet kan man räkna ut att det hexadecimala systemet FF motsvarar 255 i det decimala systemet. Titta på tabellen nedan för att se vad respektive siffra motsvarar i det decimala talsystemet. Hexadecimalt A B C D E F Decimalt

24 Tänk dig nu att du ska beskriva en RGB-färg. För varje delfärg kan du använda hexadecimala tal mellan 00-FF (motsvarande decimalt). Om du inte skulle vilja ha någon färg alls (total frånvaro av ljus/svart) skulle du vara tvungen att ange följande värden Rött=00, Grönt=00 och Blått=00. När man skriver in dessa värden i ett HTML-dokument blir det # För att på motsvarande sätt ta maximalt av varje delfärg, och därmed åstadkomma vitt ljus, skulle du få skriva #FFFFFF. Klarrött blir #FF0000. Klargrönt blir #00FF00. Klarblått blir #0000FF Det tråkiga med alltihop är att många mäniskor har skärmar som inte kan visa mer än 256, men det förändras nu i rask takt då bildskärmar och grafikort blir allt bättre till ett lägre pris. För de som bara kan se 256 färger kan den färg du mödosamt har blandat ihop framstå som en kornig röra. För att slippa detta finns det framtaget 216 färger som är allmänt vedertagna. S.kl. websäkra färger. Håll dig till dem om du vill att alla betraktare av din websida ska se samma sak. Text och stycken Specialtecken Så länge du enbart håller dig till bokstäverna A-Z och siffrorna 0-9 så är allt frid och fröjd. Vill du däremot använda specialtecken, som t.ex. Å,Ä,Ö,&,Ç,Ã,Ñ,ü, eller liknande måste du byta ut alla sådana tecken mot en kod. Har du Windows som operativsystem kan du klara dig, men för att vara på den säkra sidan bör du ändå använda specialkoderna. Nödvändigt för oss svenskar är framför allt följande teckenkoder: Å å Ä ä Ö ö Å å Ä ä Ö ö Teckensnitt I dagsläget är de enda teckensnitten man kan vara säker på att mottagaren har Times/Times New Roman, Hevetica/Arial och Courier/Courier New. Microsoft har också börjat sprida vissa gratisteckensnitt; Om några år är de förmodlöigen global de facto-standard. Indrag Det finns inga bra sätt att göra indragna stycken med hjälp av HTML, men ett ofta använt sätt är att använda koden <BLOCKQUOTE> 24

25 Cascading Style sheets framtiden? De möjligheter som moderna ordbehandlare har att formatera text är på väg att bli en del av HTML. Med hjälp av det som kallas Style Sheets - ungefär formatmallar - kommer det att på ett snabbt och enkelt sätt bli möjligt attformatera alla stycken i ett eller flera dokument samtidigt. De senaste versioner av såväl Netscapes som Microsofts läsare stödjer CSS, om än på olika sätt. Det kommer säkert att dröja ytterligare några år in tekniken är fullt genomförd. Bilder Rätt upplösning På grund av bildskärmars låga upplösning bör man sträva efter att använda bilder med en upplösning på 72dpi. Högre kvalitet än så ger inte bättre bild men ökar däremot tiden det tar att ladda ner bilden. Rätt färgdjup Antalet färger i en bild (GIF) anges med hjälp av s.k. bitdjup. Minska det så mycket du kan utan att kvaliteten försämras. Välj rätt bildformat Det finns två olika bildformat, GIF och JPG. Ofta är der bästa sättet att välja bildformat helt enkelt att prova spara i båda formaten och sedan välja det som blev minst med acceptabel kvalitet. GIF-bilder GIF-bilder kan innehålla max 256 nyanser. För färgfotografier är det oftast i minsta laget. Med andra ord lämpar sig GIF bäst för bilder med få nyanser. GIF-filer kan vara s.k. "interlaced", vilket gör att de växer fram gradvis för betraktaren. Dessutom kan de vara rörliga. JPG-bilder (JPEG) JPG (JPEG) kan innehålla miljontals nyanser. Det ger möjlighet att få en bra färgåtergivning på fotografiska motiv. Genom att komprimera JPG-bilder kan du få dem att krympa avsevärt. Om du komprimerar för mycket försämras dock kvalitén. Prova dig fram till lagom komprimeringsgrad. Ett bra tips är att jobba med kopior eftersom för en hårt komprimerad JPG-fil aldrig kan återfå orginalkvalitén. Kanske en lågupplöst variant? Om du vill ha både hög kvalitet och snabb nedladdning kan du prova att använda en bra JPGbild och sedan spara en svartvit kopia i GIF-format (1-bits) om du kodar rätt laddas först den lilla GIF-filen in för att sedan ersättas av JPG-bilden med högre kvalitet. Se exemplet nedan: <IMG SRC=filnamn.jpg" lowsrc="filnamn.gif"> 25

26 Inbäddade objekt Inbädade objekt kan vara t.ex. ljud eller filmer. Tänk på att mottagaren förutom ljudkort och dylikt även måste vara utrustad med en mycket stor portion tålamod, eftersom även mycket korta ljud kan ta flera minuter att ladda hem. Korta ljud kan loopas, d.v.s repeteras så att det känns längre än vad de egentligen är. Ljud som inte kan stängas av kan vara ett av de bästa sätten att få betraktaren vansinnig och de bör därför användas med besinning. Ljud Liksom som det finns olika bildformat finns det olika ljudformat. De vanligast är.wav,.au,.aif. Välj.AU om du har möjlighet eftersom det ger bäst kompabilitet. Det finns flera sätt att lägga in ljud på en hemsida. Antingen i form av en länk som man måste klicka på för att höra ljudet, som ett bakgrundsljud,e ller också som ett "inbäddat objekt". För att ljud skall fungera i både Netscape Navigator och Internet Explorer (även IE 2.0) måste man använda alla teknikerna. Så här kan det t.ex. se ut: <BGSOUND SRC="filnamn"> <EMBED SRC="filnamn" WIDTH="146" HEIGHT="16" AUTOSTART=True CONTROLLER=True CONTROLS=SMALLCONSOLE VOLUME="90"> <NOEMBED><A HREF="filnamn">[Play Sound]</A></NOEMBED> Midi-filer I stället för ljud kan du använda dig utav s.k. "midi"-filer (.MID). Midifiler innehåller inga ljud i sig själv utan bara en instruktion om hur ljud skall spelas upp, ungefär som notskrift. T.ex. kan en midifil innehålla anvisningar om att ett visst parti skall spelas upp med pianoljud. Exakt hur pianot skall låta bestäms däremot av ljudkortet i mottagarens dator. Enklaste sättet att förstå principen är förmodligen att tänka på de rullar som fanns till självspelande pianon förr i tiden. Fördelen med midifiler är att de tar liten plats och därmed går snabbt att överföra. nackdelen är att kvaliteten blir beroende av mottagarens utrustning. För att lägga in en midifil går du till väga på exakt samma sätt som med en ljudfil, men byter bara ut filnamn. Filmer Det är teoretiskt möjligt att lägga in filmer på en hemsida. På grund av att internets långsamhet är det dock i det närmaste oanvändbart. Skulle du ändå vilja ha en film finns det tre vanliga format: Video för Windows (.AVI), QuickTime (.MOV), och MPEG (.MPG). Vart och ett av formaten har olika fördelar vad gäller kompabilitet, flexibilitet, prestanda. Ramar (Frames) Som du säkert har sett kan man dela in en hemsida i flera mindre delar, s.k. ramar (frames). T.ex. är det vanligt att man har en del till vänster med en innehållsförteckning. När man klickar på en länk där visas innehållet i den högra ramen. Ramar är praktiskt om man har stora mängder information som ska systematiseras. Ofta ger ramar dock ett stelt och lite tråkigt intryck. Är de dessutom dåligt kodade kan de vara en riktig pina för betraktaren. Tänk också på att äldre webbläsare inte kan hantera ramar över huvud taget.. 26

27 Dela in sidan Grunden för en sida med ramar är att första sidan enbart har till syfte att skapa en grundstruktur och dela upp fönstret i rader och/eller kolumner. Varje ram ges ett namn och dessutom finns det en referens till de.htm-dokument som skall visas i respektive ram. Observera att <BODY> inte ska finnas då man använder ramar. Så här kan en typisk första sida se ut: <HTML> <HEAD> <TITLE>index.htm</TITLE> </HEAD> <FRAMESET Cols="25%,75%"> <FRAME Name="contents" SRC="innehall.htm" Scrolling="Yes"> <FRAME Name="main" SRC="about.html" Scrolling="Yes"> </FRAMESET> </HTML> Länkar Om du har en sida med ramar måste du tänka på var du vill att en länks innehåll ska visas upp när du klickar på länken. I exemplet ovan skulle det ju inte vara så festligt om länken visades upp i den vänstra ramen istället för den högra. För att länken skall visas på rätt ställe anger du dess mål, eller som det heter på HTML-språk, dess "Target". Om länkinnehållet skulle visas i höger ram måste du i exemplet ovan skriva så här: (observera strecket) <A HREF="filnamn/URL" target=main>klicka här</a> Javascript Java är ett sätt att utöka Internets möjligheter. HTML i sig själv ger nämligen mycket små möjligheter till interaktivitet med användaren. Med Javascript kan man t.ex. konstruera olika fält där användaren fyller i uppgifter vilka sedan kan behandlas t.ex. matematiskt. Om du har konstruerat en internetbutik kanske du vill att kunden hela tiden ska se hur mycket varorna som ligger i "korgen" kostar sammanlagt. Nackdelen med Javascript är att det är mycket svårt att lära sig att göra egna scripts. Vill man inte det så finns det massor med användbara scripts, som ofta är gratis, tillgänliga på internet. Hittar man ett bra script brukar det för det mesta inte vara svårare att lägga in det på hemsidan än vanlig HTML-kod. Något man ska tänka på är att det är många webbläsare som inte stödjer Javascripts, och att vissa som påstår sig göra det i praktiken är funktionsodugliga - t.ex. alla versioner av Internet Explorer utom den senaste (version 4). 27

28 Java Trots namnlikheten har Javascript och Java inte särskilt mycket med varandra att göra. Java är ett programspråk utvecklat av SUN som är tänkt att vara plattformsoberoende, d.v.s. det skall gå att använda oavsett vilken sorts dator mottagaren har. Med Java kan man göra det mesta som avancerade programspråk kan. T.ex. kan man göra spel, ritprogram, animationer etc. som ligger inlagda som en del av hemsidan. Java är extremt svårt att lära sig. Därför nöjer många sig med att kopiera s.k. "applets", d.v.s. små miniprogram skrivna i Java, och lägga in dem på den egna hemsidan. Såna program finns det gott om på Internet. Tänk på att alla inte är gratis. Trots att Java just nu är inne så ska man ändå tänka sig för innan man använder det. För att Java ska bli acceptabelt snabbt krävs en snabb dator och många väljer därför att stänga av Javatolkningen i sina webbläsare. CGI-script I vissa fall kan en "webmaster" behöva hjälp från servern för vissa uppgifter. Det kan t.ex. gälla att ta reda på hur många besökare som varit in på sidan. För att lösa den uppgiften behöver man ofta ett "CGI-script". Om man är duktig programmerare kan man skriva egna, men annars brukar serveroperatören tillhandahålla ett urval som fritt kan användas. Det krävs nästan alltid tillstån från operatören för att få använda egna CGI-scripts. Hos t.ex. Tele2 lägger du in följande kod i hemsidan för att få en besöksräknare. <!--#exec cgi="/cgi-bin/counter"--> 28

Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1

Internet 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 mer

ORDLISTA WEBBDESIGN 100P

ORDLISTA 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 mer

Inför prov 1 i webbdesign

Infö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 mer

Manual för visionutv.net Redigera

Manual 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 mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

Webbdesign vt. 2010. Innehållsförteckning

Webbdesign 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 mer

Webbdesign vt. 2009. Innehållsförteckning

Webbdesign 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 mer

Introducerande övningar i HTML

Introducerande ö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 mer

Laboration med Internet och HTML

Laboration 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 mer

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.

Tabeller. 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 mer

Carl-Oscar Hermansson WEBB DESIGN

Carl-Oscar Hermansson WEBB DESIGN Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...

Läs mer

Kort om World Wide Web (webben)

Kort om World Wide Web (webben) KAPITEL 1 Grunder I det här kapitlet ska jag gå igenom allmänt om vad Internet är och vad som krävs för att skapa en hemsida. Plus lite annat smått och gott som är bra att känna till innan vi kör igång.

Läs mer

WEBDESIGN A - DTR 1210

WEBDESIGN 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 mer

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00

HTML. 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 mer

Kom igång med FrontPage 2003

Kom igång med FrontPage 2003 Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker

Läs mer

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11

Ö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 mer

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

Webbkurs 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 mer

Gör en modern släktbok för CD eller webben

Gör en modern släktbok för CD eller webben Gör en modern släktbok för CD eller webben 21 Den traditionella släktboken består av ett antal tabeller och i bästa fall en grafisk stam- eller antavla, och man kan med ett register eller hänvisningar

Läs mer

Nätet. Uppgiften. Nivå

Nä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 mer

DIN FÖRSTA HEMSIDA: Det här är min första hemsida.

DIN FÖRSTA HEMSIDA: Det här är min <b>första</b> hemsida. 3 Grunderna Nu är det dags att börja skriva HTML på allvar. I det här kapitlet kommer vi att gå igenom allt du behöver veta för att göra en hemsida med rubriker i olika storlekar och text som är formaterad

Läs mer

12 Webb och kurshemsidor

12 Webb och kurshemsidor 12 Webb och kurshemsidor Många lärare använder sig av kurswebbsidor eller egna personliga webbsidor som ett ställe att samla information och dokumentation kring sitt arbete. Om du ska skapa en webbsida,

Läs mer

CSS-övningar. 1. Grunder

CSS-ö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 mer

En grundkurs i hemsidor och hur de är uppbyggda

En 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 mer

LATHUND FRONTPAGE 2000

LATHUND FRONTPAGE 2000 LATHUND FRONTPAGE 2000 RXK Läromedel AB, Riddarplatsen 36 Plan 7 177 30 Järfälla Tel: 08-580 886 00, Fax: 08-580 259 40 www.rxk.se, e-post: info@rxk.se Detta material är författat av RXK Läromedel AB.

Läs mer

Att göra Web-sidor på Macintosh

Att göra Web-sidor på Macintosh Att göra Web-sidor på Macintosh Av Jacob Palme 95-10-30, senast ändrad 96-11-26 21.06. Original filnamn: web-sidor-med-mac.mw6. Detta dokument kan laddas ner från följande URL-er: I Adobe Acrobat format:

Läs mer

Handbok 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. 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 mer

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Webbens 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 mer

Manual för. 2.4 KALAS Sitemanager

Manual för. 2.4 KALAS Sitemanager Manual för 2.4 KALAS Sitemanager 1. Introduktion Den här manualen skall hjälpa dig att komma igång så att du själv på ett enkelt sätt kan lägga till, redigera eller ta bort webbsidor på din webbplats.

Läs mer

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se Macromedia Dreamweaver 8 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 1 Arbeta i Dreamweaver... 3 Fönster... 4 Statusfältet... 4 Menyer...

Läs mer

Användarmanual för Content tool version 7.5

Användarmanual för Content tool version 7.5 Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN

Läs mer

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

Ikon 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 mer

Kurs 6:1 Att publicera på webben

Kurs 6:1 Att publicera på webben Kurs 6:1 Att publicera på webben S TUDE NTDATOR UTBILDNINGE N MALMÖ HöGSKOLA Beijerskajen 8, K3, källaren, sal Apollo (A01:303), 205 06 Malmö www.bit.mah.se/undervisning/sdm Att publicera på webben, del

Läs mer

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1 Personalsupport Medicinska fakulteten, Lunds universitet Textredigeraren Moodle version 2.7.1 Lars Rundgren, 2012-2014 Moodle 2.7.1 Textredigeraren Textredigeraren... 3 Nya ikoner i textredigeraren...

Läs mer

Dokumentation av rapportmall

Dokumentation av rapportmall Dokumentation av rapportmall Utgivningsår: 2003 Författare: Eva Erbenius Samhällsmedicin Centrum för Tillämpad Näringslära Box 175 33 Wollmar Yxkullsgatan 19 118 91 Stockholm Innehåll Inledning... 3 Rapportens

Läs mer

Manual för din hemsida

Manual för din hemsida Manual för din hemsida Dynamiska hemsidor är en lösning för att man på ett enkelt sätt skall kunna lägga till, ändra och ta bort sidor på sin hemsida. För att detta skall vara möjligt bygger lösningen

Läs mer

ATT GÖRA WEBBSIDOR. Frivillig labb

ATT GÖRA WEBBSIDOR. Frivillig labb Numerisk analys och datalogi KTH 100 44 Stockholm Kerstin Frenckner, tel 790 7143, e-post kfrenck@nada.kth.se 2D1339 Programkonstruktion Hösten 2001 Datorintroduktion Frivillig labb ATT GÖRA WEBBSIDOR

Läs mer

Frontpage 2002/XP (2)

Frontpage 2002/XP (2) Frontpage 2002/XP Frontpage 2002 eller Frontpage XP som det också kallas är ett hemsideprogram där du inte behöver kunna koda som annars är fallet om man gör en hemsida. Att snabbt, enkelt och snyggt kunna

Läs mer

Andra filtyper på en webbsida

Andra filtyper på en webbsida Andra filtyper på en webbsida Syftet med denna text och övning är att synliggöra problemen med bristande standardisering av hantering av olika typer av mediafiler på webben och att skapa en egen testplats

Läs mer

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Del 4 BILDER OCH TABELLER 0. Arbeta med bilder... 9. Redigera bilder... 96. Klickbara bilder/imagemaps... 0. Tabeller... 04 4. Skapa

Läs mer

Laboration 0. Enhetsbokstaven anges med ett kolon efter och man läser ofta ut detta, exempelvis C:(sekolon).

Laboration 0. Enhetsbokstaven anges med ett kolon efter och man läser ofta ut detta, exempelvis C:(sekolon). Laboration 0 Laborationen är till för dig som inte är familjär med att navigera i filträd på en dator. Om du är van vid detta (vilket är det vanliga nu för tiden) så kan du bara snabbt titta igenom laborationen.

Läs mer

Introduktion till Word och Excel

Introduktion till Word och Excel Introduktion till Word och Excel HT 2006 Detta dokument baseras på Introduktion till datoranvändning för ingenjörsprogrammen skrivet av Stefan Pålsson 2005. Omarbetningen av detta dokument är gjord av

Läs mer

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt 1. Inställningar / Kontaktuppgifter Uppgifter som matas in i den vyn ovan visas i sidfoten på hemsidan: 2. Skapa nya sidor Om man

Läs mer

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

Sidan 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 mer

Word 2003. bengt hedlund

Word 2003. bengt hedlund Word 2003 bengt hedlund Det här dokumentet är tänkt underlätta för Dig när Du arbetar med Word. I kursen Datagrund, när Du skriver en rapport i någon annan kurs, eller i varje sammanhang när Du vill använda

Läs mer

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning.

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Sida 1 av 23 Editor, Avancerad I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Detta dokument syftar till att hjälpa dig som vill jobba mer aktivt

Läs mer

På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett

På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett relaterat ämne till ett annat. En länk från en sida

Läs mer

Internets historia Tillämpningar

Internets historia Tillämpningar 1 Internets historia Redan i slutet på 1960-talet utvecklade amerikanska försvaret, det program som ligger till grund för Internet. Syftet var att skapa ett decentraliserat kommunikationssystem som skulle

Läs mer

Att bygga enkla webbsidor

Att bygga enkla webbsidor Nivå 1 Att bygga enkla 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/18cplpy to find out what

Läs mer

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Programmeringteknik. 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 mer

och Lär dig surfa på Internet Bilden nedan föreställer Södertälje kommuns hemsidans startsida Adressen till hemsidan

och Lär dig surfa på Internet Bilden nedan föreställer Södertälje kommuns hemsidans startsida Adressen till hemsidan Utgåva 1 och Lär dig surfa på Internet Sammanställd av: SeniorNet i Södertälje November 2008 Vi använder här Microsofts surfprogram: Windows Internet Explorer På skrivbordet högerklickar du på ikonen:

Läs mer

Manual för. 2.5 KALAS Sitemanager

Manual för. 2.5 KALAS Sitemanager Manual för 2.5 KALAS Sitemanager 1. INTRODUKTION...1 1.1 SYSTEMKRAV...1 1.1.1 Visning av sidor...1 1.1.2 Produktion av sidor...1 1.1.3 Inloggning...1 2. KALAS SITEMANAGER...3 2.1 LÄGGA TILL EN WEBBSIDA...4

Läs mer

Digital bildhantering

Digital bildhantering Digital bildhantering En analog bild blir digital när den scannas. Bilden delas upp i småbitar, fyrkanter, pixlar. En pixel = den digitala bildens minsta byggsten. Hur detaljrik bilden blir beror på upplösningen

Läs mer

Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor

Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor http://w3.msi.vxu.se/multimedia Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor Rune Körnefors Innehåll Variabler i JavaScript

Läs mer

1. Uppdateringsmodul (CMS)

1. Uppdateringsmodul (CMS) Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...

Läs mer

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

Läs mer

Vilken version av Dreamweaver använder du?

Vilken version av Dreamweaver använder du? Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser

Läs mer

Dags att skriva uppsats?

Dags att skriva uppsats? Dags att skriva uppsats? Grundkurs i Word 2010 SDM Studentdatorutbildning vid Malmö högskola Att skriva i Word! 1 Börja skriva/skapa ditt dokument- något att tänka på 1 Spara ditt dokument 1 Bra att veta

Läs mer

Skapa webbsidor med SeaMonkey Composer

Skapa webbsidor med SeaMonkey Composer 1 av 25 2011-01-18 19:37 Skapa webbsidor med SeaMonkey Composer SeaMonkey Composer låter dig skapa dina egna webbsidor och publicera dem på webben. Du behöver inte känna till HTML för att använda Composer;

Läs mer

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför

Läs mer

http://office.microsoft.com/sv-se/word/ha100444731053.aspx

http://office.microsoft.com/sv-se/word/ha100444731053.aspx 1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan

Läs mer

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

ITK: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 mer

Spelprogrammering med JavaScript och HTML5

Spelprogrammering med JavaScript och HTML5 Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj.

Läs mer

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07 Guide Eva Pärt-Enander, 2012-12-14 Webbsidor i Studentportalen Uppdaterad: 2014-10-07 Innehåll Webbsidor i Studentportalen... 1 Om webbsidor... 2 Lägg till en webbsida... 2 Lägg till samma webbsida på

Läs mer

Word-guide Introduktion

Word-guide Introduktion Word-guide Introduktion På det kognitionsvetenskapliga programmet kommer du läsa kurser inom flera olika vetenskapsområden och för varje vetenskapsområde finns ett speciellt sätt att utforma rapporter.

Läs mer

Webbstudio Internetworld - Webbproduktion förklarad på svenska - En del av IDG.se. I dessa program redigerar du HTML och så sparar du dina filer

Webbstudio Internetworld - Webbproduktion förklarad på svenska - En del av IDG.se. I dessa program redigerar du HTML och så sparar du dina filer Webbstudio Internetworld - Webbproduktion förklarad på svenska - En del av IDG.se http://internetworld.idg.se/webbstudio/pub/avdelning.asp?id=25 Sida 1 av 2 2006-10-18 HTML Publicerade artiklar» Lektion

Läs mer

3. Hämta och infoga bilder

3. Hämta och infoga bilder Sida 1 av 8 Lektion 1: sida 4 av 4 «Sida 3 av 4 Till kursens framsida 3. Hämta och infoga bilder Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder? Det är inte svårt alls! Det

Läs mer

Labora&on 8 Formulär övningar/uppgi6er

Labora&on 8 Formulär övningar/uppgi6er Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument

Läs mer

Bildredigering i EPiServer & Gimp

Bildredigering i EPiServer & Gimp Bildredigering i EPiServer & Gimp Maria Sognefors 7minds Agenda Teori om bilder Att tänka på när jag fotograferar Föra över bilder från kamera till dator Ladda upp bilder till EPiServer CMS 5 Enkel redigering

Läs mer

Integrerad i egen cup-portal Sid 1

Integrerad 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 mer

Manual till publiceringsverktyg

Manual till publiceringsverktyg Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten

Läs mer

Snabbguide för E-lomake

Snabbguide för E-lomake Snabbguide för E-lomake 1 Om E-lomake/E-blankett...1 1.1 Inloggning...1 1.2 Symboler...1 1.3 Användargränssnittets flikar...1 1.4 Skapande av en ny blankett...2 2 Skapande av en ny blankett, Fält-funktionen...3

Läs mer

Manual Webb-admin för evenemang

Manual Webb-admin för evenemang Manual Webb-admin för evenemang Version: 001 Innehållsförteckning Logga in... 1 Lägg in nytt/redigera evenemang... 3 Prenumerant... 3 Evenemang eller Aktivitet... 3 Huvudtema och Tema... 3 Huvudkategori

Läs mer

APA för nybörjare. Innan du börjar. Översikt

APA för nybörjare. Innan du börjar. Översikt APA för nybörjare Den här texten är tänkt som en snabb introduktion hur du kan använda publiceringssystemet APA (Advanced Publication Application) för att redigera webbplatser. Texten kräver inga förkunskaper

Läs mer

Laboration 4: Digitala bilder

Laboration 4: Digitala bilder Objektorienterad programmering, Z : Digitala bilder Syfte I denna laboration skall vi återigen behandla transformering av data, denna gång avseende digitala bilder. Syftet med laborationen är att få förståelse

Läs mer

Grunder. Grafiktyper. Vektorgrafik

Grunder. Grafiktyper. Vektorgrafik 2 Grunder All vår början bliver svår eller hur det nu brukar heta, och detta är något som gäller även Flash. För den som är ovan vid Flash gäller det säkert extra mycket, då det kan vara knepigt att förstå

Läs mer

Så skapas färgbilder i datorn

Så skapas färgbilder i datorn Så skapas färgbilder i datorn 31 I datorn skapas såväl text som bilder på skärmen av små fyrkantiga punkter, pixlar, som bygger upp bilden. Varje punkt har sin unika färg som erhålls genom blandning med

Läs mer

SNABBGUIDE för Windows Media Encoder (media kodaren) - Sänd live med din webbkamera

SNABBGUIDE för Windows Media Encoder (media kodaren) - Sänd live med din webbkamera SNABBGUIDE för Windows Media Encoder (media kodaren) - Sänd live med din webbkamera Instruktionerna till denna kameraguide är en enkel kom igång guide. Grundkrav: En webbkamera som är kopplad till datorn

Läs mer

Manual för Episerver 5 för redaktörer i förskola och skola www.mark.se Innehåll

Manual för Episerver 5 för redaktörer i förskola och skola www.mark.se Innehåll Manual för Episerver 5 för redaktörer i förskola och skola Marks kommuns hemsida www.mark.se ses bäst i text storlek mellan. Du kan ändra i Explorer Visa, textstorlek. Webbplatsen är byggd för upplösningen

Läs mer

Word kortkommando. 5. I rutan till höger klickar du på kommandot eller elementet.

Word kortkommando. 5. I rutan till höger klickar du på kommandot eller elementet. kortkommando Kortkommandon Koppla kortkommandon till menykommandon eller andra element Du kan koppla ett kortkommando till ett kommando, ett makro, ett teckensnitt, en autotextpost, en formatmall eller

Läs mer

KAPITEL 5 Användbara program. Tillbehör. WordPad. Paint

KAPITEL 5 Användbara program. Tillbehör. WordPad. Paint KAPITEL 5 Användbara program Som jag nämnde i inledningen är Windows mycket mer än bara ett operativsystem. Det följer även med ett antal användbara program som är mycket användbara. Du har fått bekanta

Läs mer

Ljud och video på webbsidor

Ljud och video på webbsidor Nivå 3 Ljud och video på 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

Läs mer

Migrera till PowerPoint 2010

Migrera till PowerPoint 2010 I den här guiden Microsoft Microsoft PowerPoint 2010 skiljer sig rent utseendemässigt mycket, så vi har skapat den här guiden för att hjälpa dig att snabbare lära dig programmet. Här kan du läsa om de

Läs mer

Inledning till OpenOffice Calculator Datorlära 2 FK2005

Inledning till OpenOffice Calculator Datorlära 2 FK2005 Inledning till OpenOffice Calculator Datorlära 2 FK2005 Mål Lära sig att skapa och använda ett räkneblad med OpenOffice Calculator Beräkna medelvärde och standardavvikelsen med räknebladet Producera en

Läs mer

Talsystem Teori. Vad är talsystem? Av Johan Johansson

Talsystem Teori. Vad är talsystem? Av Johan Johansson Talsystem Teori Av Johan Johansson Vad är talsystem? Talsystem är det sätt som vi använder oss av när vi läser, räknar och skriver ner tal. Exempelvis hade romarna ett talsystem som var baserat på de romerska

Läs mer

Utseende. Lauri Watts Översättare: Stefan Asserhäll

Utseende. Lauri Watts Översättare: Stefan Asserhäll Lauri Watts Översättare: Stefan Asserhäll 2 Innehåll 1 Utseende 4 1.1 Allmänt............................................ 4 1.2 Teckensnitt.......................................... 4 1.3 Stilmallar...........................................

Läs mer

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Du 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 mer

VERKTYGSFÄLTET I ARTIKELEDITORN

VERKTYGSFÄLTET I ARTIKELEDITORN Joomla Guide 2.5.11 VERKTYGSFÄLTET JCE EDITORN Sida 1 av 8 VERKTYGSFÄLTET I ARTIKELEDITORN En kort genomgång/förklaring till de vanligaste symboler och användningsområdena för verktygsfältet i Joomla Uppdateringsmodulen

Läs mer

Förbered och planera bildmanuset

Förbered och planera bildmanuset Del av Kapitel 4: Förbered och planera bildmanuset I detta kapitel kommer du att: Omvandla ditt manus till ett bildmanus Lägga till bildmanusguider Planera för de bilder som ska visas på skärmen Skriva

Läs mer

Hur man skapa en Wiki.

Hur man skapa en Wiki. Hur man skapa en Wiki. Ordet wiki (i t.e.x Wikipedia) kommer från Hawaiian och betyder snabbt. Kortfattat kan man säga att en wik i är en webbplats där alla enkelt kan publicera och redigera material när

Läs mer

Bilaga 2. Layoutstöd för examensarbeten och uppsatser

Bilaga 2. Layoutstöd för examensarbeten och uppsatser Bilaga 2 Layoutstöd för examensarbeten och uppsatser Lärstöd Karlstads universitetsbibliotek ht 2007 Layoutstöd examensarbeten och uppsatser ht -07 Innehåll 1. Inledning...1 1.1 Dispositon...2 2. Om omslag...3

Läs mer

Vad behöver man för att göra hemsidor?

Vad behöver man för att göra hemsidor? http://www.monkeytoys.pp.se/htmlkurs/ Senast uppdaterad: 1997-04-14 klockan: 12.00 Vad behöver man för att göra hemsidor? En av de bästa sakerna med att göra hemsidor är att man inte behöver några dyra

Läs mer

EPI Server 6.0. Lathund till Episerver. Innehåll

EPI Server 6.0. Lathund till Episerver. Innehåll EPI Server 6.0 Lathund till Episerver Innehåll Inloggning... 1 Hitta dina sidor... 1 Skapa, spara och publicera... 3 Obligatoriska fält... 4 Redigera innehåll... 6 Tillgängliga knappar i editorn... 6 Bilder...

Läs mer

Manual för webbpublicering. Enköpings kommun

Manual för webbpublicering. Enköpings kommun Manual för webbpublicering Enköpings kommun Innehåll ATT LOGGA IN I SWWWING 3 Inloggningsrutan 3 GRÄNSSNITTET 4 Filhanteraren 4 Content Management 4 Verktyget Notify - Dags att uppdatera 4 SKAPA OCH REDIGERA

Läs mer

Webbsidekurs för nybörjare

Webbsidekurs för nybörjare Webbsidekurs för nybörjare Hörselskadades distrikt i Stockholms län (www.distriktet.info) Inledande faktaruta Alla HRF föreningar erbjuds möjligheten att kostnadsfritt publicera information på en egen

Läs mer

Lathund för att hantera kongresshandlingar

Lathund för att hantera kongresshandlingar Lathund för att hantera kongresshandlingar Dator PC Inför och under kongressen 2013 förekommer handlingarna enbart i digital form, närmare bestämt i PDF-format. I denna lathund får du som använder en dator/pc

Läs mer

Datorövning 1 Calc i OpenOffice 1

Datorövning 1 Calc i OpenOffice 1 Datorövning 1 Calc i OpenOffice 1 1 OpenOffice Calc Till förmån för de som följer kursen Fysikexperiment för lärare skall vi här gå igenom några få exempel på hur OO Calc (motsvarar MS Excel) kan användas

Läs mer

Förbundet Vi Ungas. Grafiska handbok

Förbundet Vi Ungas. Grafiska handbok Förbundet Vi Ungas Grafiska handbok Innehållsförteckning INLEDNING 2 KAPITEL ETT 3 LOGOTYPEN 4 Vad man inte får göra med Vi Ungas logotyp 5 FÄRGER 6 TYPSNITT 7 FLÄTAN 8 KAPITEL TVÅ 9 GRAFISKA ELEMENT 10

Läs mer

Laboration 2. Webbproduktion En stiligare webbsida HT2015

Laboration 2. Webbproduktion En stiligare webbsida HT2015 Laboration 2 Webbproduktion Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt sätt som möjligt. Nu är det dags att ge ögat något vackert att vila på.

Läs mer

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

Läs mer

Skärmbilden i Netscape Navigator

Skärmbilden i Netscape Navigator Extratexter till kapitel Internet Skärmbilden i Netscape Navigator Netscape är uppbyggt på liknande sätt som i de flesta program. Under menyraden, tillsammans med verktygsfältet finns ett adressfält. I

Läs mer