1 / 28

Markup Languages and Web Programming

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

honey
Download Presentation

Markup Languages and Web Programming

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. Markup Languages andWeb Programming

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

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

  4. HTML • 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 BODY HEAD TITLE H1 Here is some text. heading This is my web page

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

  6. Tables <TABLE border=“1”> <TR><TD>A</TD><TD>B</TD></TR> <TR><TD>C>/TD><TD>D</TD></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

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

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

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

  10. in HTML <H1>Nobel Prizes</H1> <TABLE border=“1”> <TR><TD>Robert G. Edwards</TD><TD>Medicine<TD>2010</TD></TR> <TR><TD>Dan Shechtman</TD><TD>Chemistry<TD>2011</TD></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 XML

  11. 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)

  12. 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” • comparing XML to flat files or .CSV format • tab-separated or comma-separated • data laid out in rows and columns, like a spreadsheet 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> • XML is less compact (more verbose) • each item is explicitly labeled • more flexible: can have 0 or >1 titles, fields in any order

  13. 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 • make up a stylesheet (.xsl) file • add a reference to the stylesheet from your .xml file • this tells the browser how to display the data

  14. (.XML file:) <?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> the two lines added to the top of this .XML file reference an .XSL style file which describes how to format the data for display

  15. XSL files can have HTML code in them, “wrapped” around the data <?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 ...</H1> ...table... </BODY> </HTML> </xsl:template> </xsl:stylesheet>

  16. Instead of containing the actual data, the table can be a template that gets filled in with data from the .XML file • Data items in the XML file can be referenced by XPATHs • Example: <BOOKS> <owner>Tom</owner> ... </BOOKS> <H1>Library of <xsl:value-of select="BOOKS/owner"></H1> <H1>Library of Tom</H1> (xml) (xsl) translation (html)

  17. This .XSL code loops over all the <book> records in the .XML file <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> this is what actually gets sent to your browser generates <TABLE border="1"> <TR><TH>Title</TH><TH>Author</TH></TR> <TR> <TD>Herman Melville</TD> <TD>Moby Dick</TD> </TR> <TR> <TD>Fyodor Dostoevsky</TD> <TD>Crime and Punishment</TD> </TR> </TABLE>

  18. 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 studio author author director distributor Moby Dick Crime&Punish. AI Dreamworks H. Melville F. Dostoevsky S. Spielberg Warner Bros.

  19. 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 titlestudio author author directordistributor Moby Dick Crime&Punish. AIDreamworks H. Melville F. Dostoevsky S. SpielbergWarner Bros.

  20. 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 studio author author director distributor Moby Dick Crime&Punish. AI Dreamworks H. Melville F. Dostoevsky S. Spielberg Warner Bros.

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

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

  23. Web Programming • scripting can make web pages interactive • client-side vs. server-side processing • client-side: Javascript • server-side: CGI, PERL, Python, PHP Client-side: Javascript embedded in .html changes appearance dynamically Server-side: CGI request when press Submit on form Response in the form of a new .html page e.g. receipt server image borrowed from http://cliffmass.blogspot.com/2012/06/weather-x.html amazon.com page for C++ book

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

  25. Example from http://www.w3schools.com/js/js_popup.asp: • Javascript can do all sorts of • things here: • define variables • do calculations • change look of page • update text values • popup a dialog box • trigger a sound <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>

  26. Server-side: CGI CGI = Common Gateway Interface • 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

  27. <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/python import 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>" .html file .cgi file (executes on the server) what is sent back to the browser on the client to display in response: <HTML><BODY> A+B = 5+10 = 15 </BODY></HTML>

  28. <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: <selectname="shipping"> <option>land</option> <option>sea</option> <option>air</option> </select> • other examples: checkboxes, radio buttons, drop-downs... CGI script sees: state = Texas payment = MC express = yes shipping = land

More Related