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 8. Rubriker och fonter 9. Övning 1 10. Installera HTML-edit 12. Startsidans kod 13. Så här ska startsidan se ut 14. Förslag till mappstruktur 15. Sidan Frågesport Adressen till kursens webbsida : www.cas.varmdo.se/jh/webbdistans/dist.html Bra hjälpsidor: www.webdesignskolan.se www.atiger.pp.se/sida.html www.javascript.nu Vilka program behöver jag? Anteckningar (Note Pad) Windows gratis HTML-edit Tanka hem från: www.htmledit.net gratis WS FTP LE Från kursens webbsida gratis Bildbehandlingsprogram Photoshop, Paint Shop Pro, Gimp, eller liknande Boktips! Nyckeln till din egen hemsida på Internet Dan Josefsson ISBN 91-518-3703-X www.etc.se/nyckeln/nyckeln20/start.htm Vad ska jag göra till nästa möte? 1. Koda din startsida i Anteckningar 2. Installera ett FTP-program Du kan hämta en Zipfil från vår hemsida under Programtankning 3. Kontakta din webbserver via FTP 4. Skicka över startsidan och bilderna 5. Kolla att allting fungerar 6. Maila din webbadress till: jukka.herne@varmdo.se OBS! Skaffa dig egen webbplats så fort som möjligt. 1
FTP- hur gör man? 1. Här kan du skriva ditt namn 2. Serveradress t. ex. ftp.telia.com 3. Inloggningsnamn t. ex. u85702345 4. Lösenord t. ex. gr5jky67 5. Klicka på OK 6. Du är inne Din egen dator Servern Markera de filer du vill överföra och klicka på pil höger Du kan byta namn på en fil RENAME Du kan kasta filer DELETE Du kan skapa mappar MkDir 2
Vad ska jag göra? 1. Skaffa dig en webbplats. 2. Gör övningarna 1 4 från Webdesignskolan i Anteckningar. 3. Knacka koden till Startsidan index.html (Inlämningsuppgift 1) i Anteckningar. 4. Skicka upp index.html och bilderna till din webbplats. 5. Skapa mappen idoler och sidan idoler.html (Inlämningsuppgift 2) i Anteckningar. 6. Skapa mappen idoler på din webbplats och skicka upp html-dokumentet och bilderna. 7. Gör länk från index.html till idoler.html och tillbaka. 8. Uppdatera din webbplats. (Skicka upp index.html och idoler.html med länkar.) 9. Installera programmet HTML-edit 10. Skapa mappen och sidorna till Frågesport (Inlämningsuppgift 3) med HTML-edit Övningen är en länkövning med tre frågesidor och tre felsidor samt en avslutningssida. Döp sidorna så här: fraga1.html fraga2.html fraga3.html fel1.html fel2.html fel3.html avslut.html 11. Skapa mappen fraga på din webbplats och skicka in alla dokument i den. 12. Gör en länk från index.html till fraga1.html 13. Gör en länk från avslut.html till index.html 14. Uppdatera din webbplats När du har kommit så här långt och allting fungerar, har du lättare att gå vidare på egen hand. 3
Webbsidans grundtaggar Ett HTML-element består av allting mellan en starttagg och en sluttagg. Det kan innehålla ett attribut, vilket består av ett attributnamn och attributvärde. Attributnamnet anger en egenskap som texten mellan starttagg och sluttagg skall ha. Ett exempel på attributnamn är BGCOLOR vilket anger att sidan ska ha bakgrundsfärg. Attributvärdet preciserar attributsnamnets egenskap. Exempelvis så kan du precisera attributnamnet BGCOLOR genom att ange attributvärdet "red", vilket gör bakgrundsfärgen blir röd. <BODY BGCOLOR= red >här kommer innehållet på sidan att hamna</body> Märke Starttagg Attributnamn Attributvärde Märke Sluttagg <html> </html> <head> </head> <title> </title> <body> </body> Anger att allt inom dessa taggar innehåller HyperText Markup Language. Anger start och slut på sidans "huvud". Informationen som finns inom dessa koder syns inte direkt på webbsidan utan den berättar exempelvis för sökmotorer om sidans innehåll, författare samt vilka sökord som kan användas för att hitta sidan. Detta är ett exempel på en tagg som läggs inom sidans "huvud" och det du skriver mellan dessa koder blir sidans titel. Titeln är den text som hamnar uppe i den blå listen i webbläsarfönstret samt blir den titel på sidan som anges när någon lägger till din sida som ett bokmärke. Denna tagg markerar början och slutet på den "synliga" webbsidan. Allt som skrivs mellan dessa koder blir synligt för besökaren. 4
<p> </p> <br> <b> </b> <i> </i> <table> </table> <tr> </tr> <td> </td> Anger att ett nytt stycke börjar samt slutar. Anger att textraden skall brytas, med andra ord byter du helt enkelt rad. Allt som skrivs mellan dessa taggar blir fetmarkerad text, "bold" på engelska. Allt som skrivs mellan dessa taggar blir kursiv text, "Italic" på engelska. Dessa taggar markerar början och slutet på en tabell. Dessa taggar markerar början och slutet på en tabellrad. Dessa taggar markerar början och slutet av innehållet i varje cell. <!-- --> Allt som skrivs mellan dessa taggar blir inte synligt för webbläsaren. Mellan dessa taggar kan du alltså lägga in komentarer, Javascript eller SSI som du ej vill ska visas i webbläsaren. <img src ="sv"> Denna tagg infogar en bild på din webbsida. Byt ut filnamn till den sökväg som leder till bilden som skall visas. sv= sökväg till bilden med utgångspunkt från den html-sida där bilden skall visas <img src ="sv" align="left"> Denna tagg gör att bilden hamnar till vänster och att den text du skriver efter denna kod hamnar strax till höger om bilden. sv= sökväg till bilden <a href="?"> Nisse </a> Ordet Nisse blir en länk när du byter ut "?" mot den adress/fil du vill länka till. <a href="?">dn</a> Ordet DN blir en länk när du byter ut "?" mot: http://www.dn.se 5
TABELLER & LAYOUT TABLE, TR och TD Som ni säkert har förstått så är HTML inte det lättaste att hantera när det gäller layout. Man kan inte riktigt få bilden eller texten där man vill ha den. Det är där tabellerna kommer in. Idag kan man nästan inte hitta en hemsida där tabeller inte har använts. Det är helt enkelt det bästa sättet att placera saker på rätt plats. Tabellerna består av rader och kolumner i det antal du skriver in. Tabellen, en viss rad eller en viss kolumn kan ha en fast bredd eller höjd i punkter eller en relativ bredd eller höjd i procent. Alla celler kan ha olika justeringsattribut eller bakgrundsfärg. Tabellerna börjar och slutar alltid med en TABLE-tag, Varje rad i tabellen börjar och slutar alltid med en TR-tag (Table Row). Inom varje rad kan man ha valfritt antal celler, TD (Table Data), som bildar kolumner. <TABLE> <TR> <TD>Rad 1 Cell 1</TD><TD>Rad 1 Cell 2</TD> </TR> <TR> <TD>Rad 2 Cell 1</TD><TD>Rad 2 Cell 2</TD> </TR> </TABLE> Resultatet av denna tabell kanske inte är så fint. Med det förklarar grundprincipen. Border, cellspacing & cellpadding Det finns en mängd attribut som hänger ihop med tabeller, rader och celler, exempelvis BORDER, CELLSPACING och CELLPADDING. Border bestämmer hur stor ram det skall vara i ytterkanten. Cellspacing bestämmer hur stort avstånd det skall vara mellan cellerna och cellpadding bestämmer avståndet från texten eller objektet i cellen till dess ytterkant. Alla värden är i antal punkter. Attributen skrivs i TABLE-taggen som följer. <TABLE BORDER="5" CELLSPACING="2" CELLPADDING="10"> <TR> <TH>Rad 1 Cell 1</TH> <TH>Rad 1 Cell 2</TH> </TR> <TR> <TD>Rad 2 Cell 1</TD> <TD>Rad 2 Cell 2</TD> </TR> </TABLE> Vill man inte ha någon ram eller mellanrum så sätter man alla värden till noll. 6
INFOGA BILDER Hemsidan blir ofta lite roligare om man lägger in några bilder. För att lägga in en bild skriver man: <IMG SRC="bildnamn.gif"> I detta fall måste bilden ligga i samma katalog som hemsidedokumentet. Annars hittar inte webläsaren bilden. Det brukar ofta bli rätt många bilder och dokument till en hel "site". Då är det bra att skapa underkataloger till sina bilder. Om bilden ligger i en underkatalog som heter "bilder", skriver du så här: <IMG SRC="bilder/bildnamn.gif"> Andra bildattribut Om man vill vara "nästan" säker på att layouten bibehålls även om bildvisningen är avstängd i webläsaren, så bör man lägga till attribut för bredd och höjd på bilden. Då syns ofta en tom ruta i rätt storlek åtminstone. Detta medför även att bildnedladdningen blir en aning snabbare i vissa fall. Observera att bilden blir den storleken du skriver in. Skriver du fel blir bilden förvrängd. <IMG SRC="bilder/bildnamn.gif" WIDTH="300" HEIGHT="200"> Ibland kan det behövas lite "luft" mellan bilden och omkringliggande text. Horisontellt eller vertikalt. Eller man kanske vill ha en ram runt sin bild. <IMG SRC="bilder/semester.jpg" WIDTH="300" HEIGHT="200" HSPACE="5" VSPACE="15" BORDER="3"> Bildens justering En bild är som standard alltid justerad till vänster i fönstret och texten "flyter" inte runt bilden automatiskt. Det finns en mängd attribut för att justera bilden i förhållande till texten. <IMG ALIGN="left" SRC="...> Bilden ligger till vänster och texten flyter runt bilden. <IMG ALIGN="right" SRC="...> Bilden ligger till höger och texten flyter runt bilden. <IMG ALIGN="top" SRC="...> Texten börjar i bildens överkant. Texten flödar inte. <IMG ALIGN="middle" SRC="...> Texten börjar i mitten av bilden. Texten flödar inte. 7
RUBRIKER & FONTER Normal text behöver man inte sätta några taggar omkring. Den har alltid sin standardstorlek. Vill man öka eller minska den storleken så finns det några sätt att göra det på. Font I fonttaggen kan man styra hur stort teckensnittet skall vara, vilken färg det skall ha och i viss mån vilket teckensnitt det skall vara. Glöm inte sluttaggen! Standardinställningen är för det mesta storlek 3 på en skala mellan 1 och 7, svart och Times New Roman. Om inte användaren har ställt in något annat i sin webläsare. Vill man ändra på detta kan man t.ex. skriva så här: <FONT SIZE="1" FACE="Arial, Geneva" COLOR="#00FF00">Denna text är grön</font> Denna text är grön SIZE="1" Detta ger den allra minsta storleken på teckensnittet. Kan vara mellan 1 och 7. Kan även skrivas relativt, t.ex. SIZE="+2" eller SIZE="-3", för att tillfälligt öka eller minska teckensnittet. COLOR="#..." Fungerar på samma sätt som bakgrundsfärgen. FACE="..." Här kan man skriva in önskat teckensnitt. Teckensnittet måste dock finnas i den dator där dokumentet läses annars väljs standardteckensnittet istället. Här har jag valt en vanlig rubrikfont från PC-världen och en liknande från Macvärlden. Man behöver inte använda alla samtidigt om man inte vill. Man tar det man behöver. Taggar kan även omsluta varandra, men tänk då på att få rätt antal start och sluttaggar. Exempelvis: <FONT FACE="Comic Sans MS, Times"><FONT SIZE="+2">S</FONT>törre bokstav i början av meningen.</font> Större bokstav i början av meningen. 8
Övning 1 1. Skapa en mapp (Där du sparar HTML-dokument och bilder) 2. Starta programmet "Anteckningar" (Start-Program-Tillbehör-Anteckningar) 3. Skriv din kod (Koden nedan) 4. Spara dokumentet i din mapp (Filen måste ha ändelsen html) 5. Leta reda på dokumentet via "Den här datorn" (filen har en Explorerikon) 6. Om du kör Explorer kan du "Visa-Källa" (och fortsätta att koda) <HTML> Startkoden för HTML <HEAD> Inom Head lägger man script, css och annat som inte syns på sidan <TITLE>Min webbsida</title> Sidans titel ligger i Head-taggen </HEAD> <BODY BGCOLOR="yellow"> Det som ligger inom Body är synligt i webbläsaren Sidan får gul bakgrundsfärg <CENTER><H1>Välkommen</H1></CENTER> Den största rubriken centrerad <BR> Radmatning <IMG SRC= bild.jpg > Infogar en bild </BODY> </HTML> Här slutar den synliga sidan Slutkoden 9
Installera HTML-edit 1. Gå in på sidan: www.htmledit.net 2. Välj Operativsystem 3. Klicka på HTML-edit 4. Klicka på Spara 5. Dubbelklicka på ikonen 10
1. Starta HtmlEdit och stäng tipsrutan (om den kommer fram). 2. Öppna/välj ett nytt dokument. 3. Välj 'Om HtmlEdit...' under 'Hjälp'-menyn. 4. Dubbelklicka mitt emellan 'Tack till' och 'Registrera'-knapparna. ^^^ OBSERVERA "mitt emellan"!!! 5. Skriv in namnet Gratis licenserbjudande och lösenordet 7-1172670-11-r 11
<HTML> <HEAD> <TITLE>STARTSIDA</TITLE> <STYLE> A{text-decoration:none;} </STYLE> </HEAD> <BODY BGCOLOR="#0000FF"> <TABLE WIDTH="600" BORDER="1" BGCOLOR="#FFFFFF" ALIGN="center" HEIGHT="350" CELLPADDING="3" CELLSPACING="3" BORDERCOLOR="#0000FF"> <TR> <TD><IMG SRC="nylogo.jpg"></TD> <TD ALIGN="center"> <FONT FACE="Verdana"><B>Webbdistanskursen ht 2008</B></FONT></TD> </TR> <TR> <TD VALIGN="top"><FONT FACE="Verdana" SIZE="-1"> <B>Mina idoler</b></font> <BR> <BR> <B><FONT FACE="Verdana" SIZE="-1">Frågesport</FONT></B> <BR> <BR> <B><FONT FACE="Verdana" SIZE="-1">Frames/Imagemap</FONT></B> <BR> <BR> <B><FONT FACE="Verdana" SIZE="-1">Javascript/CSS</FONT></B></TD> <TD ALIGN="center" VALIGN="top"><BR> <IMG SRC="apel.jpg" WIDTH="115" HEIGHT="133"> <BR> <FONT FACE="Verdana" SIZE="-1"> Välkommen till förnamn efternamn:s inlämningssida<br> Här kan du se vilka inlämningsuppgifter jag har gjort<br> </FONT> </TD> </TR> </TABLE> </BODY> </HTML> STARTSIDANS KOD BILDERNA HITTAR DU HÄR: http://www.cas.varmdo.se/jh/webbdistans/inlam/vikodade.html Högerklicka och välj Spara bild som Spara i samma mapp där du sparade koden!! 12
Sidans bakgrundsfärg #0000FF (blå) nylogo.jpg Tabellens bakgrundsfärg #FFFFFF (vit) Tabellrad (TR) Länkar Tabellcell (TD) Kantlinjefärg #0000FF (blå) apel.jpg 13
Förslag till Mappstruktur Här ligger htmldokumenten till inlämningsuppgift erna: Animering och bildlänk Här ligger htmldokumenten till inlämningsuppgift en: Frågesport Här ligger htmldokumenten till inlämningsuppgift en: Idoler Lägg alla dina bilder i den här mappen. Sökvägen blir: bilder/bild.jpg Här ligger htmldokumenten till inlämningsuppgift en: Imagemap Här ligger htmldokumenten till inlämningsuppgiften: Java /CSS Här ligger htmldokumenten till inlämningsuppgiften: Frames (Sverige) Det här är startsidan. Den måste ligga direkt i roten och den ska heta index.html 14
Sidan Frågesport i HTML-edit 1. Ställ din musmarkör efter Y och före > i <BODY> 2. Tryck på mellanslag 3. Klicka på VISA ATTRIBUT 4. Dubbelklicka på BGCOLOR 5. Välj svart färg och klicka OK 6. Klicka på STÄNG 7. Ställ musmarkören här 8. Klicka på Infoga tabell 15
9. Tre rader en kolumn Centrerad Ingen ram Höjd och bredd 300 Cell-höjd och avstånd 5 Bakgrundsfärg VIT 10. Infoga 11. I den översta cellen skriver du Fråga 1 12. Markera texten och formatera som här ovan Tahoma, +-0, centrerad 13. I den här cellen skriver du din fråga. Tahoma, -1, centrerad och röd 14. Ställ musmarkören i den nedersta cellen och klicka på Infoga tabell 16
15. Tabellen har en rad och två kolumner, den har bredden 90% den är vit, centrerad, har ramen 1 samt cell- höjd och avstånd 5. 16. Infoga 17. I dom här cellerna skriver du svarsalternativen. Tahoma, -1, centrerad EXEMPEL! 17
18. Spara html-dokumentet i din mapp och döp den till: Frågemall.html 19. Klicka på tangenten F6. Ser din ut så här? 20. Stäng av förhandsgranskningen 21. Spara dokumentet som: a) fraga1.html b) fraga2.html c) fraga3.html 22. Skriv olika frågor i de tre dokumenten och ge dem egna titlar (<TITLE>) 23. Markera det rätta svaret i fraga1.html och länka den till fraga2.html 24. Markera det rätta svaret i fraga2.html och länka den till fraga3.html 18
25. Skapa en sida som ser ut så här: 26. Spara fyra kopior av sidan: fel1.html, fel2.html, fel3.html och en som heter final.html där det ska stå Rätt istället för Fel. 27. Gör länkar till felsidor från respektive frågesida och tillbaka. 28. Gör en länk från din indexsida till fraga1.html 29. Gör en länk från det rätta svaret på fraga3.html till sidan final.html 30. Skapa länkarna Avsluta och En gång till på sidan final.html 19