markup languages and web programming
DESCRIPTION
Markup Languages and Web Programming. 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 - PowerPoint PPT PresentationTRANSCRIPT
Markup Languages andWeb Programming
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