WEBMASTER DAG 4 Mahmud Al Hakim

En presentation över ämnet: "WEBMASTER DAG 4 Mahmud Al Hakim"— Presentationens avskrift:

1 WEBMASTER DAG 4 Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se

2 2 A GENDA 10.00 – 11.30 Repetition Formulär 11.30 – 12.25Lunch 12.25 – 14.00Stilmallar - CSS 14.00 – 14.20Rast 14.20 – 15.45 Java Applets ActiveX 2 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

3 3 R EPETITION 1. Vad menas med att ” XHTML kräver att dokument ska vara välformaterat ”. Ge några exempel! 2. Vilket attribut ändrar bakgrundsbilden för en webbsida. 3 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

4 4 Övning: En komplicerad HTML-tabell Rita följande tabell i HTML Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

5 5 En komplicerad tabell? En annan tabell Cell 1 Cell 2 En cell i den yttersta tabellen över två rader. En länk... Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

6 6 FORMULÄR Formulär är ett sätt att kommunicera med människor. Frågor ställs med formulär och svar ges i form av ifyllda fält på formuläret. Formulär kan kontrolleras via JavaScript t.ex. obligatoriska fält. Formulär används oftast med skriptspråk såsom CGI/PERL, PHP eller ASP. http://www.w3schools.com/tags/tag_form.asp Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

7 7 Infoga formulär med <form action="mailto:mahmud@hakimdata.se" method="post" > … Här brukar man ange sökvägen till ett CGI/PERL, PHP- eller ASP-skript Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

8 8 Etiketter, Textfält och Textarea Vad heter du? <INPUT ID="namn" Används av bl.a. LABEL NAME=”namn” Används för att kunna skicka data till servern TYPE="text” Värdet ”text” anger textfält MAXLENGTH="25” Anger max antal tecken. > Tips: läs om ID vs NAME här: http://www.quirksmode.org/oddsandends/forms.html Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

9 9 Kryssrutor Klassisk Pop Rock Techno Country Tips: bestäm ett förvalt värde med CHECKED t.ex. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

10 10 Radioknappar Används om besökaren ska bara kunna välja ett alternativ Klassisk Pop Rock Techno Country OBS! Samma värde på attributet name för att bilda en grupp. Value identifierar den valda knappen. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

11 11 Knappar eller Skicka Tips: type=”reset” rensar alla fält. Visa knappen som en bild med en IMG-tagg Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

12 S TILMALLAR - CSS CSS står för ”Cascading Style Sheets” CSS används för att få bättre kontroll över utseendet på webbsidor. CSS level 1(1996-1999) CSS level 2 (2004) CSS level 3 under utveckling Läs mer på http://www.w3.org/Style/CSS/http://www.w3.org/Style/CSS/ CSS 2 referens finns här: http://www.w3schools.com/css/css_reference.asp 12 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

13 V ARFÖR CSS? Med CSS skiljer man mellan innehåll och utseende. En CSS-mall styr innehållets utseende. Man får renare HTML-dokument som är lättare att felsöka. I HTML-dokument koncentrerar du dig på innehållet och i CSS-dokument på utseendet. 13 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

14 S KAPA EN CSS-R EGEL selektor { Egenskap: värde;... } p { font-family: Arial; font-size: 18pt; color: red } 14 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

15 K OPPLA IHOP CSS OCH HTML Lägg stilmallen i dokumenthuvudet med Style-taggen CSS p {font-family:Arial; font-size:40pt; color:red} Min första CSS-mall 15 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

16 G RUPPERING Gruppering innebär att man använder samma deklaration till flera olika taggar Exempel: h1,h2,h3,h4,h5,h6 { color: green } 16 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

17 CSS- KLASSER Du kan dela in dina regler i olika klasser. Detta underlättar strukturering av webbsidan. Med klasser specificerar man en regel som kan återanvändas. Klasser ger möjlighet att skapa ett enhetligt utseende! 17 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

18 S KAPA EN CSS- KLASS.b {font-family:Garamond; color:blue} Min första CSS-mall OBS! Klassnamn får inte påbörjas med en siffra Observera punkten Här används klassen 18 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

19 A NVÄND TVÅ KLASSER SAMTIDIGT.bold {font-weight: bold}.center {text-align: center} Centrerat och fet stycke 19 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

20 K LASSER FÖR SPECIFIKA TAGGAR ” KLASS - SELEKTOR ” Man kan begränsa klasserna till att bara gälla en viss tagg genom att skriva selektorn före punkten. h1.b {font-family:Arial; color:blue; font-size:20pt} p.b {font-family:Garamond; color:blue} En rubrik Min första CSS-mall Samma klassnamn men olika selektorer 20 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

21 E TT ANNAT EXEMPEL PÅ KLASS - SELEKTOR p.right {text-align: right} p.center {text-align: center} Centrerat stycke Högerjusterat stycke Olika klasser men samma selektor. 21 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

22 S KAPA EN ID- REGEL ID-regler kan används istället för klasser #a { color:red } En Rubrik # istället för punkt id istället för klass 22 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

23 K LASS OCH ID. V ILKEN REGEL GÄLLER ?.a { color:blue} #a { color:red } En Rubrik 23 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

24 /* CSS- KOMMENTARER */ /* En kommentar kan placeras var som helst i koden vilket gör det lättare att senare förstå vad som var tanken bakom en viss kod */ 24 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

25 P SEUDO - KLASSER FÖR LÄNKAR a:link {color: red} a:visited{color: blue} a:hover {color: green} a:active {color: yellow} 25 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

26 E N EXTERN CSS- MALL Spara alla regler i en fil med filändelsen CSS t.ex. stilmall.css Anropa filen via en link-tagg i dokumenthuvudet. 26 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

27 DIV OCH SPAN DIV och SPAN är "containerelement”. DIV och SPAN Används till att omsluta ett område som ska formateras. DIV upptar hela området som ska formateras. SPAN formaterar ett område lika stort som innehållet. 27 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

28 Ö VNING : DIV OCH SPAN.border { border: medium double rgb(255,0,0)} en div container en span container 28 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

29 Ö VNING : SID. 154 29 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

30 30 Java Applets Java är ett programmeringsspråk som har skapats av Sun Microsystems http://java.sun.com/http://java.sun.com/ Java är plattformsoberoende och kan användas för att skapa webbapplikationer. För att köra Javaprogram behövs en tolk som översätter Javakod till ett körbart program. Denna tolk kallas för ”Java Virtual Machine” JVM. JVM kan integreras i operativsystem och webbläsare. Javaprogram som kan köras i webbläsare kallas för Java Applets (appletprogram). http://java.sun.com/applets/ Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

31 INFOGA EN A PPLET MED A PPLET - TAGGEN En applet … osv 31 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Appletprogram har filändelsen.class Här skickas olika parametrar som finns för att finjustera appleten.

32 E XEMPEL : E N J AVA K LOCKA ( SID. 164) En applet 32 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

33 Ö VNING L ADDA NER OCH TESTA FLERA J AVA A PPLETS http://javaboutique.internet.com/ http://www.hotscripts.com/Java/Applets/ http://www.reconn.us/ 33 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

34 34 ActiveX ActiveX är en Microsoft teknologi i Internet Explorer som möjliggör exekvering av små program s.k. kontroller via webben. ActiveX designades som en konkurrent till Java. http://sv.wikipedia.org/wiki/ActiveX http://iwtjanster.idg.se/webbstudio/pub/artikel.asp?id=260 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

35 35 ActiveX Control Pad ”ActiveX Control Pad” är ett program som underlättar infogning av ActiveX-kontroller i webbsidor. Gå till http://www.download.com/http://www.download.com/ Sök efter ”ActiveX Control Pad” Ladda ner och installera Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

36 36 Övning: Infoga ActiveX Starta ”ActiveX Control Pad” Klicka på File – New HTML Klicka på Edit – Insert ActiveX Control Välj ”Windows Media Player” Under URL kan du ange sökvägen till en ljud- eller videofil. Stäng Egenskapsfönstret. Spara och öppna i Internet Explorer Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

37 37 H EMUPPGIFTER Sid. 141-142 Sid. 153-154 Sid. 164, uppgift 14.1 Tips: http://www.w3schools.com/css/ http://www.ninetnet.com/ 37 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008