Markup languages and web programming
This presentation is the property of its rightful owner.
Sponsored Links
1 / 28

Markup Languages and Web Programming PowerPoint PPT Presentation


  • 52 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Markup languages and web programming

Markup Languages andWeb Programming


Objectives

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


Markup languages and web programming

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


Markup languages and web programming

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


Markup languages and web programming

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


Markup languages and web programming

  • 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


Markup languages and web programming

  • 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

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


Markup languages and web programming

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


Markup languages and web programming

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


Markup languages and web programming

  • 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)


Markup languages and web programming

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


Markup languages and web programming

  • 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


Markup languages and web programming

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


Markup languages and web programming

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


Markup languages and web programming

  • 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)


Markup languages and web programming

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>


Markup languages and web programming

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

bookbookmovie

titletitletitlestudio

authorauthordirectordistributor

Moby DickCrime&Punish. AI Dreamworks

H. MelvilleF. DostoevskyS. SpielbergWarner Bros.


Markup languages and web programming

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

bookbookmovie

titletitletitlestudio

authorauthordirectordistributor

Moby DickCrime&Punish. AIDreamworks

H. MelvilleF. DostoevskyS. SpielbergWarner Bros.


Markup languages and web programming

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

bookbookmovie

titletitletitlestudio

authorauthordirectordistributor

Moby DickCrime&Punish. AI Dreamworks

H. MelvilleF. DostoevskyS. SpielbergWarner Bros.


Separating data from view code

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


Markup languages and web programming

  • 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

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


Client side javascript

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


Markup languages and web programming

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>


Server side cgi

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


Markup languages and web programming

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


Markup languages and web programming

<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


  • Login