1 / 22

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)

johnda
Download Presentation

Johdatus ohjelmointiin

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Johdatus ohjelmointiin Ohjelmat selaimessa ja HTML Jaana 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ä Käyttäjän työasema Palvelin HTTP pyyntö HTML sivut Selain: HTML, skriptit HTTP: HTML sivut Internet Ohjelmapalvelin CGI PHP ASP Java Tietokanta- palvelin Oracle SQL J.Holvikivi

  4. HTML -sivun rakenne • <html> • <head> • <title>Esimerkki HTML sivusta</title> • </head> • <body> • <p> • Tässä on sivulle tuleva teksti • </p> • </body> • </html> 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 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

  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" />&nbsp; <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.1perustuvat 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 juurenpitää 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 HEAD STYLEsheet STYLE Javascript file SCRIPT BODY <tag Javascript> Javascript <tag style> J.Holvikivi

  19. 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

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

  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 HTML XMLHTTPRequest • Server • PHP script: • Request • readyState • response CSS • Create Request • Send • Monitor status JavaScript functions Returned data Browser: Capture event • Get response • Process returned data Browser: Update page JavaScript functions Click button User workstation J.Holvikivi

More Related