WEBMASTER DAG 4 Mahmud Al Hakim

2 A GENDA – Repetition Formulär – 12.25Lunch – 14.00Stilmallar - CSS – 14.20Rast – Java Applets ActiveX 2 Copyright, Mahmud Al Hakim, 2008

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

4 Övning: En komplicerad HTML-tabell Rita följande tabell i HTML Copyright, Mahmud Al Hakim, 2008

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

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

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

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

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

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

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

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( ) CSS level 2 (2004) CSS level 3 under utveckling Läs mer på CSS 2 referens finns här: 12 Copyright, Mahmud Al Hakim, 2008

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

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

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

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

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

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

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

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

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

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

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

/* 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, Mahmud Al Hakim, 2008

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

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

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

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

Ö VNING : SID Copyright, Mahmud Al Hakim, 2008

30 Java Applets Java är ett programmeringsspråk som har skapats av Sun Microsystems 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). Copyright, Mahmud Al Hakim, 2008

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

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

Ö VNING L ADDA NER OCH TESTA FLERA J AVA A PPLETS Copyright, Mahmud Al Hakim, 2008

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

35 ActiveX Control Pad ”ActiveX Control Pad” är ett program som underlättar infogning av ActiveX-kontroller i webbsidor. Gå till Sök efter ”ActiveX Control Pad” Ladda ner och installera Copyright, Mahmud Al Hakim, 2008

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

37 H EMUPPGIFTER Sid Sid Sid. 164, uppgift 14.1 Tips: Copyright, Mahmud Al Hakim, 2008