Johdatus ohjelmointiin

Download Report

Transcript Johdatus ohjelmointiin 

Johdatus ohjelmointiin
Ohjelmat selaimessa ja
HTML
Jaana Holvikivi
Selaimet ja HTML






Selaimet:
 Internet Explorer 8
 Firefox 3.5, (Mozilla)
 Opera 10,
 Safari 4 (nopein?)
Lukevat HTML sivuja ja asettelevat sisällön näytölle
Tulkitsevat ohjelmia (Javascript, VBscript)
Huolehtivat tietoliikenteestä palvelimiin
Toimivat alustana plug-in apuohjelmille (Flash, media
players)
Vaihtelua versiosta toiseen: ohjelmankehityksen haaste
J.Holvikivi
2
Sivupyynnöt Webissä
Käyttäjän
työasema
Palvelin
HTTP pyyntö
Selain:
HTML,
skriptit
HTML
sivut
HTTP: HTML sivut
Internet
Ohjelmapalvelin
Tietokantapalvelin
SQL
CGI
PHP
ASP
Java
Oracle
J.Holvikivi
3
HTML -sivun rakenne
<html>
<head>
<title>Esimerkki HTML sivusta</title>
</head>
<body>
<p>
Tässä on sivulle tuleva teksti
</p>
</body>
</html>
J.Holvikivi
4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Esimerkki HTML sivusta</title>
</head>
<body>
<h1>HTML dokumentin otsikko</h1>
<p>
Ja tässä taas tekstikappale.
</p>
<hr/>
<p>Ylläpitäjä JHH: 2010 </p>
</body>
</html>
J.Holvikivi
5
Keskeisiä HTML - elementtejä
linkki:
<a href="http://www.google.com">Suuri hakukone</a>
Alku ja loppu
elementti välilyönti attribuutti (lainausmerkeissä)
kuva:
<img src="pete.jpg"/>
alku ja loppu samassa (tyhjä elementti)
välilyönnit, rivinvaihdot ja muu tyhjä tila jää pois
J.Holvikivi
6
Taulukot
<table>
<tr>
<td> solu </td>
<td> cell </td>
</tr>
<tr>
<td> <img src="kuva.gif"/> </td>
<td> 1 </td>
</tr>
</table>
Säännöllisyys!!
J.Holvikivi
7
Lomakkeet
<form action="someAction.cgi"> <p>
<input name="teksti" value=" " size="10"/>Kerro etunimi</p>
<select id="color" class="reqd">
<option value="" selected="selected">Choose a color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<input type="radio" id="twoDoor" name="DoorCt" value="twoDoor"
class="radio" />Two
<input type="radio" id="fourDoor" name="DoorCt" value="fourDoor"
class="radio" />Four
<p><input type="submit" value="Submit" />&nbsp;
<input type="reset" /></p>
</form>
J.Holvikivi
8
HTML dokumentin sisältö


Jokaiselta sivulta tulisi ilmetä sen alkuperä:
 Sivun tekijä (author), ja sivusta vastaava henkilö;
 Sivuston yhteystiedot
 Sivun luomispäivämäärä tai viimeisin päivitysajankohta
 Sivun asiayhteys ja sen luokittelu ,
 yrityksen virallinen asiakirja, tuoteseloste, tms.,
 yksityishenkilön sivu.
Ohjelmoinnin kannalta
 selkeä rakenne: modulaarisuus
 hyvin kommentoitu
J.Holvikivi
9
W3C World Wide Web Consortium






vuodesta 1994
standardoi www-avaruutta
kuten HTML - standardit ”Recommendations”
”vapaa” organisaatio, asianharrastajien perustama, yli
300 jäsentä, suuryritykset ja yliopistot
http://www.w3.org/Consortium/Member/List
suositukset ilmaisia, vapaaehtoisia
J.Holvikivi
10
HTML ja muut tärkeät standardit




HTTP (Hypertext Transfer Protocol)
WWW-dokumenttien siirtojärjestelmä
 HTTPS suojattu.
HTML (Hypertext Markup Language)
 WWW-dokumenttien kuvauskieli. Uusin selaimiin
sisällytetty standardi 4.01
XHTML - W3C recommendations 1.0 ja 1.1
perustuvat HTML 4.0:ään
XML, CSS ja lukuisia muita erityiskieliä
J.Holvikivi
11
XHTML




XHTML - W3C:n uusi suositus
Siirryttäessä HTML:stä XHTML:ään tarkistetaan että
"vanha" HTML-tiedosto on
 hyvinmuodostettu (säännöllinen puurakenne)
 validi: käyttää vain standardin mukaisia
elementtejä
 XHTML-spesifikaation mukainen
Selaintuki vielä epäjohdonmukainen
Pyrittävä kirjoittamaan säännönmukaista koodia, jotta
voi olla varma sen tulkinnasta kaikissa tilanteissa
J.Holvikivi
12
XHTML - hyvinmuodostuneisuus


HTML saa sisältää virheitä mutta XHTML ei
HTML-tiedostossa voi joutua
 lisäämään puuttuvat lopputunnisteet
 muuttamaan tunnisteet niin että elementit ovat
sisäkkäin eivätkä limittäin
 yhtenäistämään alku- ja lopputunnisteiden nimiosat
(esim. <code> ja </code>, tai <CODE></CODE>)
 ympäröimään attribuuttien arvot lainausmerkeillä
 muuttamaan tyhjät tunnisteet esim. <hr> muotoon
<hr/>
J.Holvikivi
13
XHTML - muut vaatimukset



HTML-tiedoston juuren pitää olla html
Nimiavaruus pitää määritellä juuressa ja se on
 http://wwww.w3.org/1999/xhtml
(Mahdollisesti voi myös lisätä tyylitiedostoprosessointikäskyn tiedostoon)
J.Holvikivi
14
XHTML - vaihtoehdot

HTML-tiedostoon lisätään
 DOCTYPE-esittely (3 mahdollisuutta)
 peruselementit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
 löysempi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 kehykset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
J.Holvikivi
15
Cascading Style Sheets






CSS - Cascading Style Sheets language
Cascading Style Sheets (CSS) lisää muotoilutyylejä
(kirjasinlajit, värit, välit) Web dokumentteihin
suunniteltu HTML:n lisäksi 1996
CSS1 (1996), CSS2 (1998), CSS Mobile Profile
selaintuki alkaen versioista:
 CSS1 IE5 and IE6, Firefox, Safari
 CSS2 Firefox 1, Netscape 6, IE6 & Opera 6
eroaa HTML:stä ja Javascriptistä syntaksiltaan
J.Holvikivi
16
CSS säännöt
 h1
{font-size: 32pt; font-weight:bold}
 elementti { ominaisuudet }
 ominaisuus : arvo; ominaisuus: arvo;
 ominaisuus – font-size
 arvo – '32 pt'
 voi määritellä useita kertoja, joista viimeisin on
voimassa
J.Holvikivi
17
Tyylit ja skriptit HTML sivuilla
HTML
HEAD
STYLEsheet
STYLE
Javascript file
SCRIPT
BODY
<tag Javascript>
Javascript
<tag style>
J.Holvikivi
18
Inline styles
<html>
<!-- Exercise 1: inline style -->
<head>
<title>CSS Inline Styles</title>
</head>
<body>
<p>This text does not have any style applied to it.</p>
<!-- The style attribute allows you to declare inline -->
<!-- styles. Separate multiple styles with a semicolon. -->
<p style = "font-size: 20pt">This text has the
<em>font-size</em>
style applied to it, making it 20pt.</p>
<p style = "font-size: 20pt; color: #0000ff">This text has the
<em>font-size</em> and <em>color</em> styles applied to it, making
it 20pt and blue.</p>
</body>
</html>
J.Holvikivi
19
Internal styles
<html>
<head>
<title>Introduction to CSS </title>
<!-- Declaring a style in the header section -->
<style type = "text/css">
em { background-color: #8000ff; color: white }
h1 { font-family: arial, sans-serif }
p { font-size: 110 % }
.special { color: blue }
</style>
</head>
<body>
<!-- This class attribute applies the .blue style -->
<h1 class = "special">Main heading</h1>
<p> For st etc.
J.Holvikivi
20
External styles
<html>
<head>
<title> Linkitys ulkoiseen tyylitiedostoon </title>
<link rel = "stylesheet" type = "text/css" href = "style4.css">
</head>
<body> .. And so on
</html>
/* External style sheet style4.css */
a { text-decoration: none; }
a:hover { text-decoration: underline;
color: red;
background-color: #ccffcc; }
ul { margin-left: 2cm; }
li { color: red; font-weight: bold; }
J.Holvikivi
21
Selain rakentaa sivun ja ohjaa toimintaa
HTML
XMLHTTPRequest
CSS
JavaScript
functions
•Create Request
•Send
•Monitor status
Server
PHP script:
•Request
•readyState
•response
Returned data
Browser:
Capture event
Browser:
Update page
Click button
Get response
•Process
returned data
JavaScript
functions
User
workstation
J.Holvikivi
22