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

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

Lektion1a Lektion1a Det är inte mycket till innehåll i detta dokument. Men det fungerar och <a href = " det klarar en validering.

Lektion1a <a href= " <img src = " alt= "Valid XHTML 1.1!" height= "31" width= "88" />

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

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?

Lektion1b XHTML C ascading S tyle S heet

Lektion1b XHTML <a href= " <img style="border:0;width:88px;height:31px" src= " validator/images/vcss" alt="Valid CSS!" / >

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

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; }

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; }

Lektion1b CSS a { background-color : #ffffff; color : #008000; } a:hover { background-color : #ffff00; color : #008000; } img { border : 0; } CSS Examples:

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">

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, ". ");

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

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

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

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;

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());

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");

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);

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); }

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

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!"); } }