Johdatus ohjelmointiin

Johdatus ohjelmointiin

Ohjelmat selaimessa ja

HTMLJaana Holvikivi

J.Holvikivi 2

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 3

Sivupyynnöt Webissä

Internet

Käyttäjän työasema

Selain:HTML,skriptit

Tietokanta-palvelin

HTTP pyyntö

Palvelin

HTMLsivut

Ohjelmapalvelin

CGI

HTTP: HTML sivut

PHP

JavaASP

SQL Oracle

J.Holvikivi 4

<html> <head>

<title>Esimerkki HTML sivusta</title></head> <body>

<p>Tässä on sivulle tuleva teksti</p>

</body> </html>

HTML -sivun rakenne

J.Holvikivi 5

<!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 6

Keskeisiä HTML - elementtejä

linkki:<a href="http://www.google.com">Suuri hakukone</a>Alku ja loppuelementti 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 7

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 8

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" /> <input type="reset" /></p>

</form>

J.Holvikivi 9

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 10

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 11

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 12

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 13

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 14

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ä tyylitiedosto-

prosessointikäskyn tiedostoon)

J.Holvikivi 15

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/xhtml1-strict.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 16

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 17

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 18

Tyylit ja skriptit HTML sivuilla

HTML

STYLE

HEAD

BODY

Javascript

SCRIPT

<tag Javascript>

<tag style>

STYLEsheet

Javascript file

J.Holvikivi 19

Inline styles

<html>

<head><title>CSS Inline Styles</title></head><body><p>This text does not have any style applied to it.</p>

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

Internal styles

<html><head><title>Introduction to CSS </title>

<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><h1 class = "special">Main heading</h1><p> For st etc.

J.Holvikivi 21

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 22

Selain rakentaa sivun ja ohjaa toimintaa

User workstation

Browser:Capture event

XMLHTTPRequest Server PHP script:•Request•readyState•response

•Create Request•Send•Monitor status

Returned data

Browser:Update page

Get response•Process returned data

Click button

HTML

CSS

JavaScriptfunctions

JavaScriptfunctions

Johdatus ohjelmointiin

Documents

Transcript of Johdatus ohjelmointiin