2I1073 Föreläsning 1. HTML och XHTML XHTML

Storlek: px

Starta visningen från sidan:

Download "2I1073 Föreläsning 1. HTML och XHTML XHTML"

Martin Lindström
för 7 år sedan
Visningar:

1 2I1073 Föreläsning 1 XHTML, stilmallar och Javascript 1 KTH-MI Peter Mozelius HTML och XHTML HyperText Markup Language Element = taggar + taggarnas innehåll <h3> innehåller lite text</h3> taggarna kan även ha attribut <tagg attribut= värde > HTML + XML = XHTML 2 XHTML Alla taggar ska skrivas med gemener Krav på perfekt nästling: <h1><b>medicinsk informatik</b></h1> INTE <h1><b>medicinsk informatik</h1></b> Validatorer för att kontrollera syntaxen 3 1

attribut= värde > HTML + XML = XHTML 2 XHTML Alla taggar ska skrivas med gemener Krav på perfekt nästling:

2 Stilsättning med CSS Innehållet i en XHTML-fil Stilsättningen som ett CSS Cascading Style Sheet Separera stilsättningen från innehållet CSS i en egen fil som länkas in <link href="./lektion1b.css" rel="stylesheet" type="text/css" /> 4 Stilsättning med CSS Det går att åstadkomma många både vackra och hemska effekter med färger och bilder Ett allmänt råd är att ofta hålla igen på t ex antalet färger på en hemsida. Vilka färger passar tillsammans? Det viktigaste på en hemsida är väldigt ofta att formatera texten så att den är lätt att läsa 5 Textformatering från CSS Det finns massor av textegenskaper som går att styra från en stilmall. Några av de absolut viktigaste är: Teckengrad Teckensnitt Radlängd Textens färg Bakgrundsfärg 6 2

css" rel="stylesheet" type="text/css" /> 4 Stilsättning med CSS Det går att åstadkomma många både vackra och hemska effekter med färger och bilder Ett allmänt råd är att ofta hålla

3 XHTML- listor Ordnade listor <ol> de ingående objekten är numrerade Oordnade listor <ul> de ingående objekten är INTE numrerade Båda varianterna använder <li> </li> Definitionslistor <dl> Använder <dt> och <dd> 7 Nästlade listor Hur är detta nästlat? 8 Navigationslistor Nytt i XHTML <nl> <label>kända programmerare</label> <li href="#intro">allmän översikt</li> <li> <nl> <label>kända personligheter</label> <li href="#ada">ada Lovelace</li> <li href="#billy">billy Joy</li> </nl> </li> <li href="#spel">spelprogrammering</li> <li href="#os">operativsystem</li> </nl> 3

4 XHTML- tabeller Tabellstruktur i XHTML <table> <tr> <td> data </td> </tr> </table> <caption> <thead> <tbody> <tfoot> 10 XHTML- tabeller Tabellformatering i CSS color: green; background-color: white; border-style: solid; border-width: 4px; Attributet rules för linjer mellan cellerna rows, cols, all, none XHTML- tabeller caption thead tbody 12 tfoot 4

green; background-color: white; border-style: solid; border-width: 4px; Attributet rules

5 IV1006/2I1073 Föreläsning1 13 Bilder i XHTML XHTML < 2 <img id="bild" src= bild.jpg" alt= Bild på en hund" width="152" height="160" /> XHTML >= 2 <object id="bild" type="image/jpeg" data="bild.jpg" width="152" height="160"> <p>bild på en hund</p> </object> 14 Bildformat för nätet Punktgrafik (bitmap) GIF JPEG - JPEG2000 PNG Vektorgrafik SVG (Scalable Vector Graphics) 15 5

6 Bildbehandling Två program som finns i IT-Forum: GIMP Photoshop Kom igång med GIMP: mp_start.php Komigångövningar för Photoshop: 16 Javascript Ett interpreterat skriptspråk Objektbaserat men INTE objektorienterat Används på klientsidan för t ex: animeringar beräkningar datavalidering styrning av SVG 17 Javascript Syntaxen är väldigt lik Java MEN, det finns mycket som skiljer Svag typning till skillnad från Java Objekt och metoder document write() 18 6

htm 16 Javascript Ett interpreterat skriptspråk Objektbaserat men INTE objektorienterat Används på klientsidan för t ex: animeringar

7 Javascript inne i XHTML <html> <head> <title>2i1073 Javascript 1</title> </head> <body> <script language= JavaScript type= text/javascript > document.write( Hej KTH-MI! ); </script> </body> </html> 19 Javascript inlänkat från fil Det blir lätt grötigt och svårläst om allt ligger i samma fil. Lägg Javascriptet i en egen fil och länka in i XHTML-filen <script type="text/javascript" src="lektion1c.js"> </script> Skriptet ligger i filen: lektion1c.js 20 Model - View - Controller MVC en vanlig bra princip som vi tidigare har pratat om för javaprogrammering Ett annat exempel på MVC är Model = innehållet/xhtml-filen View = stilsättningen/css-filen Controller = javaskriptet Håll sakerna separerade i olika filer 21 7

Lägg Javascriptet i en egen fil och länka in i XHTML-filen <script type="text/javascript" src="lektion1c.js"> </script> Skriptet ligger i filen: lektion1c.

8 FTP Ett protokoll för att flytta filer via Internet Används inte lika mycket nu som för 10 eller 20 år sedan Här på 2I1073/IV1006 ska ni lägga upp era lösningar av uppgifterna på valfri server med valfri FTP-klient FTP SFTP 22 SFTP och WinSCP SFTP = Secure File Transfer Protocol 23 Första delens laborationer Uppgift1a: Bygg en redovisningssida i XHTML Uppgift1b: Stilsätt sidan med ett validerat CSS Uppgift1c: Lägg in bilder, listor och tabeller Uppgift1d: Flytta över resultatet till ditt konto Uppgift1e: Grundläggande Javascript Uppgift1f: Frivillig fördjupning i Javascript Uppgift1g: Frivillig fördjupning i Javascript 24 8

laborationer Uppgift1a: Bygg en redovisningssida i XHTML Uppgift1b: Stilsätt sidan med ett validerat CSS Uppgift1c: Lägg in bilder, listor och tabeller

9 Samtliga laborationer Uppgifterna är tänkta som träning och stöd för ert projektarbete som ska bygga på teknikerna i lösningarna till laborationerna Handledningen ger huvudsakligen hjälp och tips för lösningar till de obligatoriska labbarna Allmänna frågor i First Class Så även frågor om de frivilliga uppgifterna Kurshemsidan: 25 Apache Tomcat Om du sedan tidigare är van att jobba med de tekniker som jag har tagit upp här idag och snabbt blir klar med första delens övningar: Starta upp er Apache Tomcat: XHTML Quiz: 26 Vi ses igen efter lunch! 9

Relevanta dokument

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML ITK:P2 F1 FTP, HTTP, HTML, XML och XHTML DSV Peter Mozelius 1 Hemsidor med HTML Hur många av er har provat på att bygga en egen hemsida med HTML eller XHTML? För hand eller med hjälpverktyg? Har ni lagt