View
213
Download
0
Category
Tags:
Preview:
Citation preview
Objectives
• to learn basic HTML– and how to do web pages in our dept server (because
it is useful) – to understand the layout algorithm behind browsers
• to learn basic XML– as an example of markup languages for structured
data representation
• to use XSL to translate from XML to HTML– to learn the value of separating data from code or
view
• to talk about types of scripting
HTML
• HyperText Markup Language• this is what is behind what you see on a
web page (type Crtl-U to ‘view source’)• early design principle for the web: describe
the content, let the browser figure out how to display it– examples: line breaks/wrapping, fonts– “device-independent”, e.g. terminals that don’t
support graphics...
• Tags: <HTML> <HEAD> <TITLE>This is my web page</TITLE> </HEAD> <BODY> <H1>heading</H1> Here is some text. </BODY></HTML>
• Why tags?– advantages for parsing– can match-up open-tags with close-tags– represents a hierarchical structure to the data
HTML
TITLE
BODY
H1 Here issome text.
headingThis is myweb page
HEAD
• More Tags: <B>boldface</B>, <I>italics</I>
<BR> line break, <P> page break, <HR> horizontal rule
<!-- comments -->
• Lists:– <UL> for unordered lists (bullets)– <OL> for ordered lists (numbered)
<UL>
<LI>list item
</UL>
• Note: – browsers are actually designed to be flexible and
accept loose syntax without properly closed tags– a shorthand to close a tag is: <BR/> = <BR></BR>
• Tables <TABLE border=1><TR><TD>A<TD>B</TR><TR><TD>C<TD>D</TR></TABLE>
• Hyperlinks– <A HREF=“http://www.tamu.edu”>TAMU</A>
• Images– <IMG SRC=“https://www.google.com/images/srpr/logo4w.png”></IMG>
• of course, you can do many other things, like changing fonts and colors, specifying background colors/images, etc...– see this for HTML documentation– http://www.w3schools.com/html/default.asp
A B
C D
• It is important to see what is behind web pages, and to know how to write it by hand.– what you see visually is described in file– think about lists and tables
• we don’t say “put a bullet with a certain indent here...”• we say “here is the next item in the list”
– the browser uses a layout algorithm to determine where to place things and what size, etc.
• example: how to determine column widths in tables based on content?
<TABLE border=1><TR><TD>A<TD>narrower</TR><TR><TD>a very wide wide column<TD>D</TR></TABLE>
Markup Languages
• different systems of tags• There are many markup languages
– SGML: book contents, for publishers• <chapter>, <abstract>, <subsection>...
– VRML: virtual reality, with tags for describing geometric objects and their positions in 3D
– MathML: tags for describing formulas• <sqrt>2</sqrt>
• ax2: <mrow>a <msup>x 2</msup></mrow>
– XML: eXtensible Markup Language
• XML: make up your own tags for representing arbitrary data– example: <author>H.G. Wells</author>– partly, this was a response to the “semi-
structured” TABLEs in HTML– people didn’t know what the <TD> values
meant semantically– tags “markup” or describe the data items
• also known as metadata• data about the data, such as field name, source,
units, etc.• can also use attributes• <price date=“9/29/2013” units=“euros”>2.50</price>
<H1>Nobel Prizes</H1><TABLE border=1><TR><TD>Robert G. Edwards<TD>Medicine <TD>2010</TR><TR><TD>Dan Shechtman <TD>Chemistry<TD>2011</TR></TABLE>
<NobelPrizes> <winner> <name>Robert G. Edwards</name> <area>Medicine</area> <year>2010</year> </winner> <winner> <name>Dan Shechtman</name> <area>Chemistry</area> <year>2011</year> </winner></NobelPrizes>
in HTML
in XML
• there are good parsers available for reading XML files in different languages– xerces for Java and C++– minidom for Python– these APIs provide a parsing function:
• input a filename• outputs the data in a tree-based data structure
• note: XML requires strict syntax – every open tag must be properly closed (and not interleaved)
Courses.csv:”course”,”title”
”CSCE 411”,”Design and Analysis of Algorithms”
”CSCE 121”,”Introduction to Computing in C++”
”CSCE 314”,”Programming Languages”
”CSCE 206”,”Programming in C”
Courses.xml:<courses> <course> <name>CSCE 411</name> <title>Design and Analysis of Algorithms</title> </course> <course> <name>CSCE 121</name> <title> Introduction to Computing in C++</title> </course></courses>
• comparing XML to flat files or .CSV format
• XML is less compact (more verbose)• each item is explicitly labeled• more flexible: can have 0 or >1 titles, fields in any order
• tab-separated or comma-separated
• data laid out in rows and columns, like a spreadsheet
course title
CSCE 411 Design and Analysis of Algorithms
CSCE 121 Introduction to Computing in C++
CSCE 314 ”Programming Languages
CSCE 206 Programming in C
• Now we need a way to display data in XML– browsers show XML in raw form by default– use XSLT to “translate” XML data into HTML
• eXtensible Stylesheet Language Transformation• http://www.w3schools.com/xsl/xsl_languages.asp
1. make up a stylesheet (.xsl) file
2. add a reference to the stylesheet from your .xml file
– this tells the browser how to display the data
<?xml version="1.0" ?><?xml-stylesheet type="text/xsl" href="books.xsl" ?>
<BOOKS>
<book><title>Moby Dick</title><author>Herman Melville</author></book>
<book><title>Crime and Punishment</title><author>Fyodor Dostoevsky</author></book>
<owner>Tom</owner>
</BOOKS>
• XSL files can have HTML code in them, “wrapped” around the data
• Data items in the XML file can be referenced by XPATHs
<?xml version="1.0"?><xsl:stylesheet xmlns:xsl=
"http://www.w3.org/1999/XSL/Transform" version="1.0"><xsl:output method="html" indent="yes"/><xsl:template match="/">
<HTML><BODY>
<H1>Library of <xsl:value-of select="BOOKS/owner"/></H1>...
</BODY></HTML>
XPATHs are a way to name andaccess data items hierarchicallyby descending a sequence of tagsin the XML file
<H1>Library of <xsl:for-each select="BOOKS/owner"><H1>
<TABLE border="1"><TR><TH>Title</TH><TH>Author</TH></TR>
<xsl:for-each select="BOOKS/book"><TR><TD><xsl:value-of select="author"/></TD><TD><xsl:value-of select="title"/></TD></TR></xsl:for-each>
</TABLE>
<TR><TD>Herman Melville</TD><TD>Moby Dick</TD></TR><TR><TD>Fyodor Dostoevsky</TD><TD>Crime and Punishment</TD></TR>
generates
<MEDIA> <book> <title>Moby Dick</title> <author>Herman Melville</author> </book> <book> <title>Crime and Punishment</title> <author>Fyodor Dostoevsky</author> </book> <movie> <title>AI</title> <director>S. Spielberg</director> <studio>Warner Bros,</studio> <distr>Dreamworks</distr> </movie></MEDIA>
MEDIA
book book movie
title title title studioauthor author director distributor
Moby Dick Crime&Punish. AI DreamworksH. Melville F. Dostoevsky S. Spielberg Warner Bros.
XPATHs<xsl:value-of select=“MEDIA/movie/studio"/>Dreamworks
<MEDIA> <book> <title>Moby Dick</title> <author>Herman Melville</author> </book> <book> <title>Crime and Punishment</title> <author>Fyodor Dostoevsky</author> </book> <movie> <title>AI</title> <director>S. Spielberg</director> <studio>Warner Bros,</studio> <distr>Dreamworks</distr> </movie></MEDIA>
MEDIA
book book movie
title title title studioauthor author director distributor
Moby Dick Crime&Punish. AI DreamworksH. Melville F. Dostoevsky S. Spielberg Warner Bros.
XPATHs<xsl:value-of select=“MEDIA/movie/studio"/>Dreamworks
<MEDIA> <book> <title>Moby Dick</title> <author>Herman Melville</author> </book> <book> <title>Crime and Punishment</title> <author>Fyodor Dostoevsky</author> </book> <movie> <title>AI</title> <director>S. Spielberg</director> <studio>Warner Bros,</studio> <distr>Dreamworks</distr> </movie></MEDIA>
MEDIA
book book movie
title title title studioauthor author director distributor
Moby Dick Crime&Punish. AI DreamworksH. Melville F. Dostoevsky S. Spielberg Warner Bros.
XPATHs<xsl:value-of select=“MEDIA/movie/studio"/>= Dreamworks
Separating Data from View/Code
• general principle used in software engineering• can change the view without touching the data
– e.g. swap the columns in the books table via XSL• can change the data without touching the code
– e.g. internationalization: different sets of text strings in different languages
• MVC (Model-View-Controller) paradigm advocated for programming in Smalltalk– M: methods defining how objects work– V: methods defining how they are displayed– C: methods defining how users interact with them
• “resource forks” in Mac apps
• Making your own web pages in our CSCE department– follow these instructions...– https://wiki.cse.tamu.edu/index.php/CSE_Web_Pages
– make a web_home/ directory in your home directory
– can access from PCs in labs via “H:” drive– note: make sure you make .html pages
readable by setting permissions
Web Programming• scripting can make web pages interactive
• client-side vs. server-side processing – client-side: Javascript– server-side: CGI, PERL, Python, PHP
amazon.com pagefor C++ book
Client-side:Javascriptembedded in.html changesappearancedynamically
server image borrowed fromhttp://cliffmass.blogspot.com/2012/06/weather-x.html
Server-side:CGI requestwhen pressSubmit on form
Response inthe form of anew .html pagee.g. receipt
Client-side: Javascript• examples:
– popups when you mouse-over something– dynamically expand a table or section– validate data entered into a field
• how it works– associate events like onmouseover() or
onclick() to components of page (like buttons)– add a <script> section in the <head> of
your .html– define functions to call on these events
<html><head><script>function myFunction(){alert("I am an alert box!");}</script></head>
<body>
<input type="button" onclick="myFunction()" value="Show alert box">
</body></html>
Example from http://www.w3schools.com/js/js_popup.asp:
Javascript can do all sorts ofthings here:• define variables• do calculations• change look of page• update text values• popup a dialog box• trigger a sound
Server-side: CGI
• FORMs– web-page elements like buttons, text-entry
fields, drop-downs, etc.– these refer to a script on the server which
processes the input– data gets passed to server as pairs of
variables and values– script generates a response .html page as
output
CGI = Common Gateway Interface
<FORM name="form1“ method="post" action="http://saclab.tamu.edu/cgi-bin/tom/add.py">
<H3>Enter 2 numbers to add:</H3>
A: <input type=“text” name="A"></input><BR>B: <input type=“text” name="B"></input><BR><input type="submit" value="Submit“>
</FORM>
#!/usr/bin/pythonimport cgi
if __name__=="__main__": form = cgi.FieldStorage() a = int(form['A'].value) b = int(form['B'].value) c = a+b print "Content-type: text/html" print print "<HTML><BODY>" print "A+B = %s+%s = %s" % (a,b,c) print “</BODY></HTML>"
what is sent back to the browser onthe client to display in response:
<HTML><BODY>A+B = 5+10 = 15 </BODY></HTML>
.html file .cgi file (executes on the server)
• other examples: checkboxes, radio buttons, drop-downs...
<BR>text field: <input type=“text” name="state">
<BR>button: <INPUT type="submit" value="Press Me!">
<BR>radio buttons:VISA <INPUT TYPE="radio" NAME="payment" value="V">Mastercard <INPUT TYPE="radio" NAME="payment" value="M">AMEX <INPUT TYPE="radio" NAME="payment" value="A">
<BR>checkboxes:<input type="checkbox" name=“vote“ value=yes> Yes<input type="checkbox" name=“vote“ value=yes> No
<BR>drop-down:<select name="shipping"><option>land</option><option>sea</option><option>air</option></select>
CGI script sees:state = Texaspayment = Mvote = yesshipping = land
Recommended