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 kod 12. Så här ska startsidan se ut 13. Förslag till mappstruktur 14. Sidan Frågesport med programmet HTML-edit 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 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 eller dubbelklicka på filnamnet Du kan byta namn på en fil RENAME Du kan kasta filer DELETE Du kan skapa mappar MkDir 2
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. 3
<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 4
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. 5
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. 6
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. 7
Ö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 inuti 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 ----------------------------------------------------------------------------------------------------------------- 8
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 9
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 10
<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>Webbkursen ht 2009</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!! 11
Sidans bakgrundsfärg #0000FF (blå) nylogo.jpg Tabellens bakgrundsfärg #FFFFFF (vit) Tabellrad (TR) Länkar Tabellcell (TD) Kantlinjefärg #0000FF (blå) apel.jpg 12
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 13
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 14
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 15
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! 16
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 17
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 18