Presentation laddar. Vänta.

Presentation laddar. Vänta.

W EBMASTER DAG 3 Mahmud Al Hakim

Liknande presentationer


En presentation över ämnet: "W EBMASTER DAG 3 Mahmud Al Hakim"— Presentationens avskrift:

1 W EBMASTER DAG 3 Mahmud Al Hakim

2 A GENDA – Repetition Mer om Listor Mer om Länkar Tabeller – 12.25Lunch – Tabeller – fort. Ramar – 14.20Rast – Lite om Bilder, Ljud och Video XHTML 2 Copyright, Mahmud Al Hakim, 2008

3 R EPETITION 1. Vad betyder följande förkortningar? 1. HTTP 2. FTP 3. URL 2. Hur många nivåer finns det för rubriker? 3. Vad är skillnaden mellan absolut och relativ teckenstorlek? Koda ett enkelt exempel! 3 Copyright, Mahmud Al Hakim, 2008

4 Ö VNING F ÄRGLÄGG WEBBSIDAN Färglägg sidan Test Text... Text med en annan färg Tips: Copyright, Mahmud Al Hakim,

5 V AD ÄR SKILLNADEN MELLAN ABSOLUTA OCH RELATIVA URL ER ? Absolut URL Här ska hela adressen anges inkl. protokoll Ex. Relativ URL Används för att länka till dokument som ligger på samma server. Ex. mapp/s2.html/ Exempel: sid Övning: sid Copyright, Mahmud Al Hakim, 2008

6 Ö VNING - L ISTOR 6 Copyright, Mahmud Al Hakim, 2008

7 Första steget Det som kommer först Andra steget Det som kommer efter det första Trede steget Kommer normalt före det fjärde steget. Fjärde steget I denna listan är det sista steget. Nu blir det ännu mer komplicerat. En definitionslista och en ordnad lista i en oordnad. Första listelementet är en definistionslista. Andra listelementet är denna lista vars listelement markeras med versaler med början på bokstaven G. 7 Copyright, Mahmud Al Hakim, 2008

8 U NDERLÄ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 HTML 4.0 Index Övning: sid Copyright, Mahmud Al Hakim, 2008

9 E- POSTLÄNK Använd protokollet mailto för att skapa e-postlänkar. Ex. Mejla mig! 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 9 Copyright, Mahmud Al Hakim, 2008

10 Med slipper du skriva ut hela sökvägen för länkar i kroppen. Exempel. 10 Copyright, Mahmud Al Hakim, 2008 Mer om IMG-taggen senare

11 T ABELLER 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! 11 Copyright, Mahmud Al Hakim, 2008

12 T ABELLENS STRUKTUR Schema DagAktivitet Måndag Tisdag Onsdag Torsdag Fredag 12 Copyright, Mahmud Al Hakim, 2008 Tabellrubrik Table Headings Table Data Table Row

13 E N ENKEL HTML- TABELL Schema DAG Aktivitet Måndag Tisdag Onsdag Torsdag Fredag 13 Copyright, Mahmud Al Hakim, 2008

14 T ABELLEGENSKAPER Kantlinjer bestäms med attributet BORDER (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: 14 Copyright, Mahmud Al Hakim, 2008

15 T ABELLSTORLEK 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: 15 Copyright, Mahmud Al Hakim, 2008

16 P LACERING För horisontell placering använd ALIGN ALIGN: left (standardvärde), center, right Exempel Måndag För vertikal placering använd VALIGN VALIGN: top, middle (standardvärde), bottom Exempel: DAG 16 Copyright, Mahmud Al Hakim, 2008

17 S AMMANFOGA CELLER COLSPAN sammanfogar två kolumner Eexempel: SCHEMA ROWSPAN sammanfogar två rader Eexempel: Onsdag OBS! Glöm inte att ta bort ev. extra rader eller kolumner! 17 Copyright, Mahmud Al Hakim, 2008

18 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" 18 Copyright, Mahmud Al Hakim, 2008

19 R AMAR (F RAMES ) 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. 19 Copyright, Mahmud Al Hakim, 2008

20 G RUNDEN FÖR RAMAR Ramar 20 Copyright, Mahmud Al Hakim, 2008 COLS ger vertikala ramer. ROWS ger horisontella ramar

21 K ONTROLLERA RAMARNA YTTERLIGARE Välj om rullningslist ska visas med SCROLLING Har tre värden: AUTO (standard), YES, NO Ange fast ramstorlek Ge kantlinjerna en färg Ta bort ramarnas kantlinjer Justera marginalerna med MARGINHEIGHT och MARGINWIDTH 21 Copyright, Mahmud Al Hakim, 2008

22 D IRIGERA LÄNKADE DOKUMENT Om du har länkar i meny-ramen som ska visas i dokument-ramen använder du attributet TARGET Kontakt 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. 22 Copyright, Mahmud Al Hakim, 2008

23 B ILDFORMAT 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 23 Copyright, Mahmud Al Hakim, 2008

24 Ö VNING - B ILDFORMAT Ö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é. 24 Copyright, Mahmud Al Hakim, 2008

25 I NFOGA BILDER MED 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 Copyright, Mahmud Al Hakim, 2008

26 A NIMERADE 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 Copyright, Mahmud Al Hakim, 2008

27 L JUDFORMAT MIDI ( M usical I nstrument D igital I nterface ) 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 27 Copyright, Mahmud Al Hakim, 2008

28 V IDEOFORMAT 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) 28 Copyright, Mahmud Al Hakim, 2008

29 L ÄGGA IN L JUD ELLER V IDEO 1. Infoga som en länk Klicka här för att lyssna 2. Med taggen EMBED (HTML 5.0) 3. Med taggen OBECT Övning, sid. 126 – Gör ljudet tillgängligt för alla 29 Copyright, Mahmud Al Hakim, 2008

30 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 1. Alla element måste alltid stängas. 2. Även tomma elementtyper måste stängas. 3. Element får inte nästlas så att de överlappar varandra. 4. Alla element- och attributnamn skrivs med gemener. 5. Attribut får inte förkortas. 30 Copyright, Mahmud Al Hakim, 2008

31 Ö VNING : H ITTA FELET ! 1. This is a paragraph This is another paragraph 2. A break: A horizontal rule: An image: 3. This text is bold and italic 4. This is a paragraph Copyright, Mahmud Al Hakim, 2008

32 D OKUMENTMALLAR FÖR XHTML OBS! DOCTYPE ÄR OBLIGATORISK XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset 32 Copyright, Mahmud Al Hakim, 2008 OBS! Ingen sluttagg

33 N AMNRYMDER (N AMESPACE ) 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 33 Copyright, Mahmud Al Hakim, 2008

34 T ECKENKODNING ( 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. OBS! charset-delen av HTTP-huvudet Content-Type har högre prioritet än XML-deklarationen. 34 Copyright, Mahmud Al Hakim, 2008

35 V ALIDERA 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 ( Källa : Webbutveckling med standarder - Rekommendationer och goda råd ) 35 Copyright, Mahmud Al Hakim, 2008

36 Ö VNING - XHTML Skriv en grundstruktur för ett XHTML- dokument. Validera dokumentet på XHTML 36 Copyright, Mahmud Al Hakim, 2008

37 H EMUPPGIFTER Sid Sid Sid Sid. 129 Läs mer om XHTML Copyright, Mahmud Al Hakim, 2008


Ladda ner ppt "W EBMASTER DAG 3 Mahmud Al Hakim"

Liknande presentationer


Google-annonser