Handbok HTML. Vi utvecklar kontinuerligt nya titlar, besök för aktuell statuslista. Gör din beställning direkt i vår webbutik.

Transkript

1 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 för formatering, stilmallar och multimedia. Information om bildhantering på Internet och hur du publicerar din hemsida med hjälp av FTP är exempel på andra ämnen Handboken tar upp. En praktisk tagglista finns i slutet av boken. Vår förhoppning är att Ni skall få nytta av Handboken. Vi utvecklar kontinuerligt nya titlar, besök för aktuell statuslista. Gör din beställning direkt i vår webbutik. RXK Konsult AB, Riddarplatsen 36 Plan Järfälla Tel: , Fax: e-post: info@rxk.se

2 Detta material är författat av Multisoft Education AB med viss bearbetning av RXK Konsult AB. Mångfaldigande av någon del av eller hela innehållet i denna Handbok är enligt lagen om upphovsrätt av förbjudet utan skriftligt medgivande från RXK Konsult. Förbudet gäller alla former av mångfaldigande såsom kopiering, tryckning, överföring till datamedia, bandinspelning etc. Copyright ISBN Detta material är tryckt på miljövänligt papper.

3 Handbok HTML Innehållsförteckning Bilder...9 Bildbehandling... 9 Bilder på din hemsida... 9 Bild som länk...10 Uppdelade länkade bilder...10 Animerade bilder...11 Lägg in en gif-animation...11 Felsökning...12 Formulär...13 Inmatningsfält...13 Allmänt för inmatningsfälten...14 Funktionsknappar...14 Allmänt för funktionsknapparna...15 FTP...19 Användningsområden för FTP...19 Filöverföring till/från en dator där du har ett eget konto...19 Filöverföring från ett offentligt FTP-arkiv...19 Ange lösenord och logga in...19 Färger...20 Exempel på några vanliga färger...21 Så räknar du ut RGB-koden...21 HTML...22 Att komma igång...22 Din första sida på Internet...23 HTML-historia...24 Några milstolpar i utvecklingen...24 Hyper Text Markup Language...24 HTML-taggar...24 HTML-dokument...24 Tre huvuddelar...25 HTML-tips...26 Undvik vissa tecken...26 Ordning och reda...27 Listor...28 Skapa listor

4 Länkar...29 Aktiva hyperlänkar...29 Besökta hyperlänkar...30 Skapa en hyperlänk...30 Länkar i samma dokument...30 Javascript...31 Länkar med FrontPage Skapa hyperlänkar...34 Skapa hyperlänkar till bokmärken...35 Ta bort hyperlänkar...35 Redigera hyperlänkar...35 Uppdatera hyperlänkar...35 Verifiera hyperlänkar...36 Metataggar...36 Sökord...37 Smarta lösningar med metataggar...37 Automatisk överflyttning av besökare till annan hemsida...37 robots.txt...37 Sökmotorer...38 Länkar...38 Multimedia...39 Ljud...39 Olika ljudformat...39 Olika sätt att förmedla ljud...40 Video...41 Olika videoformat...42 Ramar...42 Index-fil...42 Döp ramarna...43 Ta bort kanterna mellan dina ramar...44 Kolumner och rader...44 Ram-attribut...44 Target...45 Iframes...46 Stilmallar...47 Tre sätt att skapa stilmallar...47 Skapa en stilmall...47 En stilmall...49 Ändra stilmallen tillfälligt...49 Användbara tips för stilmallar...49 Egna stilklasser...50 Positionera lager...50 Handbok HTML 4

5 Handbok HTML Tabeller...52 Grunder i tabellhantering...52 Exempel på en tabell...52 Ram runt tabell...52 Ändra färg på kantram...53 Bild som bakgrund i tabell...53 Justera cellernas avstånd...53 Höjd och bredd i en tabell...53 Justering av text i celler...54 Tabellfunktionen i FrontPage Infoga tabell...55 Infoga en ny tabell med hjälp av verktygsfältet...55 Infoga en ny tabell med kommandot Infoga tabell...55 Dela rader och kolumner...56 Justera kolumnbredd och radhöjd...56 Markera en tabell...57 Markera rader och kolumner...57 Markera en cell i en tabell...57 Ta bort texten i en eller flera celler...58 Flytta rader, kolumner och celler...58 Infoga en ny rad i slutet av tabellen...58 Infoga rader eller kolumner i tabellen...58 Infoga en cell i en tabell...59 Omvandla text till tabell...60 Omvandla en tabell till text...60 Ta bort rader, kolumner och celler...60 Ta bort tabell...61 Sammanfoga celler...61 Tabellegenskaper...61 Tagglista...62 A Ankare och länkar...62 ADDRESS Kontaktinformation...62 APPLET Java-applet...62 AREA Client-side imagemap hotspot...62 BASE Basadress i HEAD...63 BASEFONT Ändra teckensnitt i hela dokumentet...63 BIG Större text...63 BLOCKQUOTE Större citat...63 BODY Dokumentets kropp...63 BR Ger ny rad...63 B Fetstil...64 CAPTION Tabellrubrik

6 CENTER Centrering...64 CITE Citat...64 CODE Kodexempel...64 DD Definitionsdata i lista...64 DFN Definitionsterm i text...64 DIR Kataloglista...65 DIV Justera del av dokument...65 DL Definitionslista...65 DT Definitionsterm i lista...65 EM Betonad text...65 FONT Teckensnittets utseende...65 FORM HTML-formulär...66 FRAME Ram...66 FRAMESET Ramverk...66 H1 H6-rubriker...66 HEAD Dokumentets huvud...66 HR Avgränsande linje...66 HTML HTML-dokument...67 IMG bildresurs...67 INPUT Inmatningsfält...67 ISINDEX Primitiv sökning...67 I Kursivt...67 IFRAME Inlineram...68 LINK Osynlig länk i Head...68 LI Listdelar...68 LISTING...68 MAP Client-side imagemap...68 MENU Menylista...69 META Metainformation...69 OL Numrerad lista...69 OPTION Valmeny i formulär...69 PARAM Parametrar för Java-applet...69 PLAINTEXT...69 PRE Preformatted text...70 P Nytt stycke...70 SAMP Exempeltext...70 SCRIPT Inkludera scripts...70 SELECT Valmeny i formulär...70 SMALL Mindre text...70 STRIKE Genomstruken text...71 STRONG Logiskt betonad text...71 STYLE För stilmallar...71 Handbok HTML 6

7 Handbok HTML SUB Subscript...71 SUP Superscript...71 TABLE Tabell...71 TD Tabellcell...72 TEXTAREA Inmatning av text i forms...72 TEXTFLOW Alternativ text i applets...72 TH Rubrikcell...72 TITLE Dokumentets titel...72 TR - Tabellrad...73 TT Skrivmaskinstext...73 UL Onumrerad lista...73 U - Understruken text...73 VAR Variablar...73 Sökordsindex

8

9 Handbok HTML Bilder HTML Bilder Bildbehandling Nedan listas några tips för bildbehandling på Internet: En bild på Internet bör ha 72 pixlars upplösning. Ju högre upplösning desto längre nedladdningstid. Ett fotografi bör sparas i jpg-format. Streckade linjer, logotyper och texter i bildformat gör sig bäst i gif-format (max 256 färger). Tänk på att nedladdningstiden ökar med filstorleken. Transparenta bilder görs endast i gif-format. Med det menas att en färg tas bort helt och hållet och görs transparent. Det kan exempelvis gälla en vit bakgrund som man inte vill ska synas. Ett bra program för denna typ av bildbehandling är Jasc Paintshop Pro som finns att ladda hem i en demoversion på En bild som är interlaced (sammanflätad) byggs upp i flera skikt (den tonar fram) under nedladdningen så att den framträder efter hand på skärmen. En bild som är noninterlaced visas i stegvis under nedladdningen. Det är viktigt att veta om bildens namn är inskrivet med versaler (stora bokstäver) eller gemener (små bokstäver). Det enklaste är att ha som regel att alltid skriva in bildernas namn med gemener. Glöm inte att även skicka upp bilderna då du uppdaterar hemsidan. Kom ihåg att om du flyttar en bild till en annan mapp måste du ändra dess sökväg i HTML-koden. Bilder på din hemsida Lägg in en bild på din hemsida med följande kod: <IMG SRC= bild.gif > Ange storleken på bilden med attributen height och width Exempel: <IMG SRC= bild.gif HEIGHT=25 WIDTH=50> Tips! Det går snabbare att ladda ned hela dokumentet om du anger korrekt mått på bilderna. Originalstorleken på bilderna kan du se i ett bildbehandlingsprogram. 9

10 Bilder Handbok HTML Centrera bilden med följande kod: <P ALIGN=CENTER><IMG SRC= foto.jpg HEIGHT=25 WIDTH=50></P> Eller: <CENTER></CENTER> Högerjustera bilden med följande kod: <P ALIGN=RIGHT></P> Eller: <IMG SRC= foto.jpg HEIGHT=25 WIDTH=50 ALIGN= right > Bild som länk Du kan använda bilder som klickbara länkar. Använder du en transparent bild som klickbar länk kan du få bort ramen runt den genom att skriva <BORDER=0>. Det syns ändå att det är en klickbar bild eftersom markören förvandlas till en pekande hand när den förs över bilden. Exempel: <A HREF= fotografi.htm ><IMG SRC= bild.gif BORDER=0 HEIGHT=25 WIDTH=50></A> BORDER= 0 behövs egentligen inte, men är bra när en bild är länkad för att slippa den fula ramen som annars uppstår. Uppdelade länkade bilder Ibland kan det vara bra att dela upp en bild i olika länkade delar, till exempel så att ett familjekort kan länka till undersidor beroende på vem på kortet man klickar på. För att lyckas med detta använder man sig av taggen <MAP>. OBS! Med fördel lägger man <MAP>-taggen med innehåll mellan <HEAD>-taggarna eftersom man då kan vara säker på att det redan är laddat när bilden ska användas. Själva bilden behöver i detta fall inte vara länkad med <A>-taggar utan endast med USEMAP-attributet i <IMG>-taggen. Gör så här 1 Skriv följande kod där du vill att bilden ska vara: <IMG SRC= bild.jpg USEMAP= #kartans_namn BORDER= 0 > 2 Skriv följande mellan <HEAD>-taggarna: <MAP NAME= mappens_namn > <AREA SHAPE= poly COORDS= 130,2,80,2,130,30" HREF= ett.html > <AREA SHAPE= circle COORDS= 200,200,70" HREF= tva.html > <AREA SHAPE= rect COORDS= 10,10,100,100" HREF= tre.html > </MAP> 10

11 Handbok HTML Bilder Koden gör följande: I <IMG>-taggen bestäms vilken karta som ska användas (olika bilder använder olika kartor men kan ändå ligga i samma dokument). Det är USEMAP som anger vilken karta som ska användas. Att tecknet # används berättar också att kartan ligger i samma dokument. Mellan <MAP>-taggarna skriver man vilka olika områden som ska vara länkade. Det finns 3 olika former: rektangel (rect), cirkel (circle) och utefter punkter en egen form (poly). Rektanglarnas koordinater skrivs efter första och andra punkten: x, y för första punkten och x, y för andra punkten. Rektangeln som kan skapas mellan dessa blir rektangeln som blir klickbar. Cirkelns koordinater bestäms efter en punkt (x, y) och sedan hur stor radien ska vara. En egen bestämd form får man genom att skriva olika punkters koordinater: x 1, y 1, x 2, y 2 och x 3, y 3. Animerade bilder En animering är egentligen ett antal bilder som satts ihop för att visas i en följd. Animeringar kan du göra själv med rätt program eller genom att skriva ett skript (exempelvis Javascript) som visar bilderna. Tips! Ett mycket populärt program för att göra gif-animationer är Adobe ImageReady eftersom det följer med Adobe Photoshop från och med version 5.5, men det är också ett kraftfullt redskap. Andra bra program för att göra gif-animationer är bland annat Jasc Animation Shop 3 som följer med Paint Shop Pro. Tips! Ett vanligt fel som man kan göra som nybörjare är att lägga in alldeles för många animeringar på sidan; vilket oftast bara ger ett rörigt intryck. Vårt tips är att du använder dig av animeringar där de fyller en funktion. Lägg in en gif-animation För att lägga in en gif-animation använder du koden: <IMG SRC= animationen.gif WIDTH= 100 HEIGHT= 100 > Med andra ord fungerar det på samma sätt som att lägga in en vanlig bild. 11