Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se Webmaster DAG 3 Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se
Lite om Bilder, Ljud och Video Agenda 10.00 – 11.30 Repetition Mer om Listor Mer om Länkar Tabeller 11.30 – 12.25 Lunch 12.25 – 14.00 Tabeller – fort. Ramar 14.00 – 14.20 Rast 14.20 – 15.45 Lite om Bilder, Ljud och Video XHTML Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Repetition Vad betyder följande förkortningar? HTTP FTP URL Hur många nivåer finns det för rubriker? Vad är skillnaden mellan absolut och relativ teckenstorlek? Koda ett enkelt exempel! Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Övning Färglägg webbsidan <HTML> <HEAD><TITLE>Färglägg sidan</TITLE></HEAD> <BODY BACKGROUND="bakgrund.gif" BGCOLOR="red" TEXT="blue"> Test Text... <FONT COLOR="#008000">Text med en annan färg </FONT> </BODY> </HTML> Tips: http://www.backgroundcity.com/ Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Vad är skillnaden mellan absoluta och relativa URLer? Absolut URL Här ska hela adressen anges inkl. protokoll Ex. http://www.domän.se/mapp/s2.html/ Relativ URL Används för att länka till dokument som ligger på samma server. Ex. mapp/s2.html/ Exempel: sid. 68-69 Övning: sid. 70 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Övning - Listor Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
<UL> <LI> <OL> <DL> <DT>Första steget <DD>Det som kommer först </DL> <DT>Andra steget <DD>Det som kommer efter det första <DT>Trede steget <DD>Kommer normalt före det fjärde steget. <DT>Fjärde steget <DD>I denna listan är det sista steget. </OL> <OL TYPE="A" START="7"> <LI>Nu blir det ännu mer komplicerat. <LI>En definitionslista och en ordnad lista i en oordnad. <LI>Första listelementet är en definistionslista. <LI>Andra listelementet är denna lista vars listelement markeras med versaler med början på bokstaven G. </UL> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Underlätta med ankare Med attributet NAME kan man ge ett ankare. Ett ankare markerar en särskild del av ett dokument. Mycket användbart i långa dokument. Ex. Inspektera följande webbplats http://www.tiger.se/dok/html4.html#a <a name="top”>HTML 4.0</a> <a href="#top">Index</a> Övning: sid. 70. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
E-postlänk Använd protokollet mailto för att skapa e-postlänkar. Ex. <a href="mailto:mahmud@hakimdata.se"> Mejla mig!</a> Länken öppnar e-postklienten som är installerad på datorn t.ex. MS Outlook. Adressen till mottagaren fylls i automatiskt. Ämnesrutan fylls i med ?subject= efter adressen: ...mahmud@hakimdata.se?subject=Ang.%20Hakimdata... http://www.w3schools.com/html/tryit.asp?filename=tryhtml_mailto Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Mer om IMG-taggen senare <BASE> Med <BASE> slipper du skriva ut hela sökvägen för länkar i kroppen. Exempel. <HTML> <HEAD> <BASE HREF="http://www.hakimdata.se/" > </HEAD> <BODY> <IMG SRC="images/mahmud.jpg"> </BODY> </HTML> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Mer om IMG-taggen senare
Tabeller Tabeller kan användas för att ordna information i rader och kolumner. Tabeller presenterar fakta på ett strukturerat och lättfattligt sätt. Tabeller kan också användas vid utformning av webbsidor (layout). Tabeller kan även innehålla bilder, knappar, listor och till och med andra tabeller. Blev standard 1997 i HTML 3.2! Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Tabellens struktur Tabellrubrik <caption> Schema Dag Aktivitet Måndag Tisdag Onsdag Torsdag Fredag Table Headings <TH> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Table Row <TR> Table Data <TD>
En enkel HTML-tabell <TABLE> <CAPTION>Schema</CAPTION> <TR> <TH>DAG</TH> <TH>Aktivitet</TH> </TR> <TR> <TD>Måndag</TD> <TD> </TD> </TR> <TR> <TD>Tisdag</TD> <TD> </TD> </TR> <TR> <TD>Onsdag</TD> <TD> </TD> </TR> <TR> <TD>Torsdag</TD> <TD> </TD> </TR> <TR> <TD>Fredag</TD> <TD> </TD> </TR> </TABLE> http://www.w3schools.com/tags/tag_table.asp Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Tabellegenskaper Kantlinjer bestäms med attributet BORDER <TABLE BORDER="1"> (mäts i pixlar). CELLSPACING ändrar avståndet mellan cellerna (standardvärde är 2). CELLPADDING ändrar avståndet mellan cellkant och cellinnehåll (standardvärde är 1). Exempel: <TABLE BORDER="1" CELLSPACEING=”3” CELLPADDING=”2”> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Tabellstorlek Bredd (WIDTH) och höjd (HEIGHT) anges i pixlar eller procent. Celler kan inte ha olika bredder i samma kolumn eller olika höjder på samma rad. Det är alltid den bredaste eller högsta cellen som bestämmer hur stora de andra cellerna ska bli. Du kan ha olika bredder på olika kolumner och olika höjder på olika rader. Exempel: <TABLE BORDER="1" CELLSPACEING="3" CELLPADDING="2" HEIGHT="300" WIDTH="50%"> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Placering För horisontell placering använd ALIGN ALIGN: left (standardvärde), center, right Exempel <TD ALIGN="center">Måndag</TD> För vertikal placering använd VALIGN VALIGN: top, middle (standardvärde), bottom Exempel: <TH VALIGN="top">DAG</TH> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Sammanfoga celler COLSPAN sammanfogar två kolumner Eexempel: <TR><TH COLSPAN="2">SCHEMA</TH></TR> ROWSPAN sammanfogar två rader Eexempel: <TD ROWSPAN="2">Onsdag</TD> OBS! Glöm inte att ta bort ev. extra rader eller kolumner! Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Färglägg tabeller Attributet BGCOLOR sätter färg på bakgrunden i hela tabellen, en rad eller i en enstaka cell. BGCOLOR= "YELLOW” Med BORDERCOLOR får tabellen en färgad ram. BORDERCOLOR="BLUE" Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Ramar (Frames) Med hjälp av ramar kan du dela upp webbläsarfönstret i flera delar. Flera HTML-dokument kan visas samtidigt. Bra för att t.ex. visa en meny i en vänser ram och informationen presenteras i en höger ram. Tips Det är bättre med färre ramar (max 3) Ramar används för att bygga statiska webbplatser. Dynamiska webbplatser byggs med hjälp av tabeller och CSS istället för ramar. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Grunden för ramar <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD><TITLE>Ramar</TITLE></HEAD> <FRAMESET COLS="200,*"> <FRAME SRC="meny.html" NAME="meny"> <FRAME SRC="dokument.html" NAME="dokument"> </FRAMESET> </HTML> COLS ger vertikala ramer. ROWS ger horisontella ramar Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Kontrollera ramarna ytterligare Välj om rullningslist ska visas med SCROLLING Har tre värden: AUTO (standard), YES, NO <FRAME SRC="meny.html“ SCROLLING="NO"> Ange fast ramstorlek <FRAME SRC="meny.html“ NORESIZE> Ge kantlinjerna en färg <FRAMESET COLS="200,*“ BORDERCOLOR="yellow"> Ta bort ramarnas kantlinjer <FRAMESET COLS="200,*" FRAMEBORDER="0" > Justera marginalerna med MARGINHEIGHT och MARGINWIDTH http://www.w3schools.com/tags/tag_frame.asp Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Dirigera länkade dokument Om du har länkar i meny-ramen som ska visas i dokument-ramen använder du attributet TARGET <A HREF="kontakt.html" TARGET="dokument"> Kontakt </A> Attributet TARGET berättar för webbläsaren att HTML-dokumentet ska visas i ramen vars namn är ”dokument”. TARGET har följande värden: _self : dokumentet visas i samma ram. _blank : dokumentet visas i ett helt nytt fönster _top : dokumentet visas i ett nytt fönster utan ramar _parent : högre ramnivå om du använder ramar i ramer. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Bildformat GIF (Graphics Interchange Format) Används för enkla teckningar, logotyper eller fotografier med få färger. Högst 256 färger. Icke-förstörande komprimering. Har stöd för animerade bilder. JPEG (Joint Photographic Experts Group) Används för fotografier. Upp till 16,8 miljoner färger. Komprimeringen är förstörande. PNG (Portable Network Graphics) Bildformatet som är tänkt att ersätta GIF SVG (Scalable Vector Graphics) Används för vektorgrafik på Internet Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Ta en skärmdump (skärmbild) med knappen PrintScreen. Övning - Bildformat Öppna en valfri bild Ta en skärmdump (skärmbild) med knappen PrintScreen. Starta programmet Paint Klistra in bilden Spara i olika bildformat Jämför bildstorlek och bildkvalité. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Infoga bilder med <IMG> Ingen sluttagg Har följande attribut: SRC (Source): Sökvägen till bilden. WIDTH och HEIGHT: Anger bredd och höjd som ska visas i webbläsaren. ALT: Anger alternativ text. BORDER: Anger ramens tjocklek i pixlar. HSPACE och VSPACE: skapar tomrum runt bilden. ALIGN: Anger placering. Har följande värden TOP, MIDDLE, BOTTOM, LEFT, RIGHT. Övning, sid. 111-114 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Animerade bilder Animeringar görs med hjälp av flera GIF-bilder. Speciella animeringsprogram t.ex. ”GIF Constuction Set” sätter ihop bilderna till en bild fil. Animerade bilder läggs in på webbsidan som en vanlig bild. Övning, sid. 108 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Ljudformat MIDI (Musical Instrument Digital Interface) Ett format som innehåller noterna till ljudet. Filtillägget är .mid Wave Ett samplat ljud som kan modifieras och storleksförändras. Filtillägget är .wav MP3 Ett format som komprimerar ljudet. RealAudio Ett ljudformat för direktuppspelning (streaming) Filtillägget är .ra eller .rm Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Videoformat MPEG (Moving Picture Experts Group) Ett videoformat som komprimerar videofilerna utan att kvaliteten försämras. Filtillägget är .mpg eller .mpeg Quicktime Ett programpaket för multimedia utvecklat av Apple. Filtillägget är .mov RealVideo Ett videoformat för direktuppspelning. Kommer från samma företag som RealAudio (RealNetworks) Filtillägget är .rm (RealMedia) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Lägga in Ljud eller Video Infoga som en länk <A HREF="titanic.mid">Klicka här för att lyssna</A> Med taggen EMBED (HTML 5.0) <EMBED SRC="titanic.mid"> Med taggen OBECT <OBJECT DATA="titanic.mid" TYPE="audio/x-wav" WIDTH="200" HEIGHT="20"> </OBJECT> Övning, sid. 126 – Gör ljudet tillgängligt för alla Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
XHTML eXtensible HyperText Markup Language Är en vidareutveckling av HTML men W3C själva rekommenderar både aktuella versioner av XHTML och HTML parallellt. XHTML är baserat på det striktare språket XML. XHTML kräver att dokumentet ska vara välformaterat Alla element måste alltid stängas. Även tomma elementtyper måste stängas. Element får inte nästlas så att de överlappar varandra. Alla element- och attributnamn skrivs med gemener. Attribut får inte förkortas. http://www.w3schools.com/xhtml/xhtml_html.asp Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Övning: Hitta felet! <p>This is a paragraph <p>This is another paragraph A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> <b><i>This text is bold and italic</b></i> <P ALIGN=“center”>This is a paragraph</P> <frame noresize> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Dokumentmallar för XHTML OBS! DOCTYPE är obligatorisk Ingen sluttagg XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Namnrymder (Namespace) I XML är det tillåtet att namnge egna element och därför måste man ange en namnrymd (namespace) för XHTML-dokument. Detta krävs för att webläsaren ska förstå vilka språk som används eftersom XML tillåter att element och attribut hämtas från olika programspråk. För att ange gällande XML-namespace lägger du till följande rad efter doctype <html xmlns="http://www.w3.org/1999/xhtml"> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Teckenkodning (igen!) Man bör tala om vilken teckenkodning som används i XHTML-dokument. Detta kan göras med en XML-deklaration i början i dokumentet t.ex. <?xml version="1.0" encoding="UTF-8" ?> <?xml version="1.0" encoding="iso-8859-1"?> OBS! charset-delen av HTTP-huvudet Content-Type har högre prioritet än XML-deklarationen. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Validera XHTML Att validera ett dokument innebär att man kontrollerar att det följer de regler som finns för det språk som används i dokumentet. Man kan jämföra det med att kontrollera att en text är rättstavad och grammatiskt korrekt. Validering är en viktig del av webbutveckling. Många fel som är svåra att se manuellt hittas vid validering. W3C Markup Validation Service http://validator.w3.org/ (Källa: Webbutveckling med standarder - Rekommendationer och goda råd http://www.456bereastreet.com/lab/developing_with_web_standards/sv/webstandards/ ) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Övning - XHTML Skriv en grundstruktur för ett XHTML- dokument. Validera dokumentet på http://validator.w3.org/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head><title>XHTML</title></head> <body> </body> </html> Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Hemuppgifter Sid. 87-88 Sid. 97-99 Sid. 117-120 Sid. 129 Läs mer om XHTML http://sv.wikipedia.org/wiki/XHTML http://www.w3schools.com/xhtml/ http://www.webdesignskolan.com/html/xml/xml.htm Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008