2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.

En presentation över ämnet: "2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript."— Presentationens avskrift:

1 2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript

2 Lektion1a <meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1" /> Lektion1a-2I1073/IV1006

3 Lektion1a Lektion1a Det är inte mycket till innehåll i detta dokument. Men det fungerar och <a href = "http://www.htmlhelp.com/tools/validator/"> det klarar en validering.

4 Lektion1a <a href= "http://validator.w3.org/check/referer"> <img src = "http://www.w3.org/Icons/valid-xhtml11" alt= "Valid XHTML 1.1!" height= "31" width= "88" />

5 Lektion1b XHTML <meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1" /> <link href= "./lektion1b.css" rel= "stylesheet" type= "text/css" /> Lektion1b-2I1073

6 Lektion1b XHTML Lektion1b Nu testar vi med lite stilsättning. Ett C ascading S tyle S heet är inlänkat. Nu blir det andra teckensnitt och färger än i Lektion1a. Här finns en länk till lektionens CSS. Varför ändras bakgrundsfärgen när man skall klicka på länken? Vad i stilmallen gör att textraderna bryts? Är bilderna inlänkade på olika sätt?

7 Lektion1b XHTML C ascading S tyle S heet

8 Lektion1b XHTML <a href= "http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src= "http://jigsaw.w3.org/css- validator/images/vcss" alt="Valid CSS!" / >

9 Lektion1b CSS h1 { background-color : #ffffff; color : #000000; font-size : 23pt; font-weight : bold; font-family: Garamond, serif; }

10 Lektion1b CSS body { background-color : #FFFFFF; color : #000000; margin-top : 40px; margin-left : 120px; font-size : 11pt; font-family : Verdana, Geneva, Helvetica, sans-serif; background-image : url(./fern.gif); background-repeat : no-repeat; }

11 Lektion1b CSS p { width : 420px; } p#lektion1b { width : 100px; margin-left : 100px; } span.anfang{ font: bold 400% sans-serif; color: #004400; background-color: #ffffff; width: 30pt; float: left; }

12 Lektion1b CSS a { background-color : #ffffff; color : #008000; } a:hover { background-color : #ffff00; color : #008000; } img { border : 0; } CSS Examples: http://www.w3schools.com/css/css_examples.asp

13 Lektion1c Lektion1c Det är inte mycket till innehåll i detta dokument. Men det fungerar med inlänkningen av ett Javascript. <script type="text/javascript" src="lektion1c.js">

14 Lektion1c var surfare = prompt("Vad heter du som besöker denna sida?", "Desdemona"); var lasare = window.navigator.appName; document.write(" Hej ", surfare, ", jag ser att du använder ", lasare, ". ");

15 Lektion1d Att länka in en applet i HTML: 1) <applet code="Lektion1d.class" width="400" height="130"> Problem med att visa sidans applet Har du installerat stöd för Java?? Bakåtkompatibelt, Validerar ej, Fungerar ej för Swing

16 Lektion1d Att länka in en applet i HTML: 2) + HTMLConverter Bakåtkompatibelt, Validerar ej, Fungerar för Swing

17 Lektion1d Att länka in en applet i HTML: 3) Med Validerar, fungerar för Swing men inte i gamla webbläsare

18 Lektion1d import java.awt.*; import java.awt.event.*; import java.applet.*; public class Lektion1d extends Applet implements ActionListener { private Panel nordPanel, mittPanel, sydPanel; private CheckboxGroup kontrollGrupp; private Checkbox kille, tjej; private Label längdLabel, viktLabel; private TextField längdFält, viktFält, infoFält; private Button knapp;

19 Lektion1d public void init() { skapaGränsSnitt(); knapp.addActionListener(this); }//init public void skapaGränsSnitt() { this.setSize(400, 130); this.setLayout(new BorderLayout()); this.setBackground(new Color(255, 255, 0)); this.setLayout(new BorderLayout());

20 Lektion1d nordPanel = new Panel(); nordPanel.setSize(400, 50); kontrollGrupp = new CheckboxGroup(); kille = new Checkbox("Man", kontrollGrupp, true); tjej = new Checkbox("Kvinna", kontrollGrupp, false); nordPanel.add(kille); nordPanel.add(tjej); längdLabel = new Label(" längd (cm):"); längdFält = new TextField("180"); viktLabel = new Label(" vikt (kg):"); viktFält = new TextField("180");

21 Lektion1d nordPanel.add(längdLabel); nordPanel.add(längdFält); nordPanel.add(viktLabel); nordPanel.add(viktFält); this.add(nordPanel, BorderLayout.NORTH); mittPanel = new Panel(); mittPanel.setLayout(new GridLayout(1,1)); mittPanel.setSize(400, 50); infoFält = new TextField(" Fyll i din längd och kroppsvikt i textrutorna här ovanför!"); mittPanel.add(infoFält); this.add(mittPanel, BorderLayout.CENTER);

22 Lektion1d sydPanel = new Panel(); sydPanel.setSize(400, 50); knapp = new Button("Ja tack, jag vill gärna att ni räknar ut mitt BMI."); sydPanel.add(knapp); this.add(sydPanel, BorderLayout.SOUTH); this.setVisible(true); }

23 Lektion1d public void actionPerformed(ActionEvent event) { if(event.getSource() == knapp) { double vikt = Double.parseDouble(viktFält.getText()); double längd = Double.parseDouble(längdFält.getText()) / 100; evaluera(vikt, längd); } }//actionPerformed

24 Lektion1d public void evaluera(double vikt, double längd) { double bmi = vikt / (längd * längd); boolean kvinna = tjej.getState(); if(bmi > 27.8 || kvinna && bmi > 27.3) infoFält.setText(" Ta ett snack med Laura, din digitala tränare!"); else infoFält.setText(" Sitt kvar vid datorn och öppna en chipspåse!"); } }