HTML and XHTML Essentials

HTML and XHTML
BITM 3730
Developing Web Applications

What is HTML?
• HTML is the language for describing the structure of Web pages. HTML gives authors the
means to:
• Publish online documents with headings, text, tables, lists, photos, etc.
• Retrieve online information via hypertext links, at the click of a button.
• Design forms for conducting transactions with remote services, for use in searching for
information, making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in their
documents.
• With HTML, authors describe the structure of pages using markup. The elements of the
language label pieces of content such as “paragraph,” “list,” “table,” and so on.

HTML Basics
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size is the
attribute and +1 is the value of the attribute. that are specified in the open
bracket.

HTML Snippet
• In the following HTML snippet name the following: tag, attribute, attribute
value and value: <font size=“+1”>Test font</font>
• Tag = font
• Attribute = size
• Attribute value = +1
• Value = Test font
• Why does </font> appear at the end?
• To close out the tag in the HTML code

Static vs. Dynamic Websites
• Static Websites
• Never change
• Unless the HTML code is changed
and uploaded to web server
• Dynamic Websites
• Can change based on an event or data
based on code in the website
• Common occurrences of this are
dates/times on a website

Important Code for this week
• <!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
</body>
</html>
• This HTML code indicates the title of the
web page is Important Code
• The <head> element is a container for
metadata (data about data) and is placed
between the <html> tag and the <body>
tag.
• Metadata is data about the HTML
document. Metadata is not displayed.
• Metadata typically define the document
title, character set, styles, scripts, and other
meta information.

<body></body> tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• Note: There can only be one <body> element in an HTML document.

<ul></ul> tag
• An unordered HTML list:
• <ul>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
• The <ul> tag defines an unordered
(bulleted) list.
• Use the <ul> tag together with the <li>
tag to create unordered lists.
• Tip: Use CSS to style lists.
• Tip: For ordered lists, use the <ol> tag.

<li></li> tag
• The <li> tag defines a list item.
• The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
• In <ul> and <menu>, the list items will usually be displayed with bullet points.
• In <ol>, the list items will usually be displayed with numbers or letters.
• Tip: Use CSS to style lists.

<a></a> tag
• The <a> tag defines a hyperlink, which is used to link from one page to another.
• The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

<a href….</a>
• How to open a link in a new browser window:
• <a href="https://www.w3schools.com" target="_blank">Visit
W3Schools.com!</a>
• The hyperlink reference is to the website, the target opens the link in a new browser
window and the text Visit W3Schools.com! is the text listed which is linked to the
website.

HTML Simple Page
<html>
<head>
<title>Your Name</title>
</head>
<body>
<ul>
<li>Bulleted Text</li>
<li><a href="http://www.website.com">Website</a></li>
</ul>
</body>
</html>

Week 1 Review
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size is the attribute and
+1 is the value of the attribute. that are specified in the open bracket.
• Static websites never change unless you edit the code and upload updated version
• Dynamic websites can change based on an event or data embedded within the code;
common with dates and times

Week 1 HW
Answer (for me)
• Your code will obviously
be different because you
are current students with a
major and your favorite
website will be different
• Your code also may not
have the meta data I have
included
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1252">
<title>Assignment 1</title>
</head>
<body>
<ul>
<li>Matt Marino</li>
<li>No Major, not currently a student</li>
<li>Graduated a long time ago</li>
<li><a href="http://innovativeprof.com/">My Favorite Website</a></li>
</ul>
</body>
</html>

Client
• Client is “served” pages from a webserver
• Client can be Internet Explorer, Chrome, Firefox and Safari
• A web browser is considered a client
• Client performs some processing of the output of the server

Server
• Server returns HTML along with other content such as images and small
applications (flash, applets)
• Servers are often found on the web
• This is “interpreted” by the browser and displayed to the end user
• Application servers typically provide dynamic content while the webserver is
responsible for the delivery

Common HTML Tags
• <html>…</html> - begins and ends the entire HTML document
• <head>…</head> - defines information about the document
• <body>…</body> - defines the document’s body
• <p>…</p> - defines a paragraph
• <ul>…</ul> - defines an unordered list
• <ol>…</ol> - defines an ordered list
• <li>…</li> - defines a list item
• <a href>…</a> - hyperlink
• <img src…./> - defines an image

Tags for building a table
• <table>…</table> - defines a table
• <tr>…</tr> - defines a table row, must appear within a table
• <td>…</td> - defines a table column, must appear within a table row
• <th>…</th> - defines a table header

<table></table> tag
• The <table> tag defines an HTML table.
• An HTML table consists of one <table> element and one or more <tr>,
<th>, and <td> elements.

<tr></tr> tag
• The <tr> tag defines a row in an HTML table.
• A <tr> element contains one or more <th> or <td> elements.

<td></td> tag
• The <td> tag defines a standard data cell in an HTML table.
• An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
• The text in <td> elements are regular and left-aligned by default.
• The text in <th> elements are bold and centered by default.

<th></th> tag
• The <th> tag defines a header cell in an HTML table.
• An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
• The text in <th> elements are bold and centered by default.
• The text in <td> elements are regular and left-aligned by default.

Building an HTML file with a Table
Begin with basic code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
</body>
</html>

Add Your Header
• <title>New Page 1</title>
• </head>
• <h1 align="center">Your Schedule</h1>
• <body>
• By adding the <h1></h1> code you have created an overall header

Begin creating your Table
• <body>
• <table border="0" width="100%">
• </table>
• </body>
• You can play around with the thickness of the table’s border by changing “0”
to different sizes

Building the Table’s Data
• <table border="0" width="100%">
• <tr>
• <th>Course Name</th>
• <td> </td>
• <td> </td>
• <td> </td>
• <td> </td>
• </tr>
• </table>

Building the Table’s Data
• <tr>
• <th>Instructor</th>
• <td> </td>
• <td> </td>
• <td> </td>
• <td> </td>
• </tr>
• <tr>
• <th>Number of Credits</th>
• <td> </td>
• <td> </td>
• <td> </td>
• <td> </td>
• </tr>

Visual Table Notes
• Sizes of the cells in each row will change when you replace the   code
with actual text
• What do you do if you are taking more than 4 courses?
• You will need to add an additional <td></td> for each section [Course Name,
Instructor, and Number of Credits] until you have enough cells to cover all of your
courses for the table you create in Assignment 2

HW 1 and 2 Review
• HW 1 Example – http://pirate.shu.edu/~marinom6/mattmarino.html
• HW 2 Example – http://pirate.shu.edu/~marinom6/schedule.html
• Please Note only previously due HW assignments are posted on my
pirate.shu.edu web space

HTML Review
• <a href=“websitelink.com”>Website Link</a> serves as code for
hyperlinking a website
• As discussed href is “hyperlink reference”
• The <h1></h1> tag represents a header
• <h2></h2>, <h3></h3>, etc. also exist and get smaller

<div></div> tag
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is then styled with
CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Any sort of content can be put inside the <div> tag!
• Note: By default, browsers always place a line break before and after the <div>
element.
• For our purpose, it is important to note the <div> tag serves as a break for a
paragraph [<p></p> tag]

XHTML Basics
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is a stricter, more XML-based version of HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers

XHTML for the Experts
• XML is a markup language where all documents must be marked up
correctly (be "well-formed").
• XHTML was developed to make HTML more extensible and flexible to
work with other data formats (such as XML). In addition, browsers ignore
errors in HTML pages, and try to display the website even if it has some
errors in the markup. So XHTML comes with a much stricter error handling.

Strict?
• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden

Example XHTML code
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
• "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml">
• <head>
• <title>Title of document</title>
• </head>
• <body>
• some content here...
• </body>
• </html>

Compared to HTML code
• <html>
• <head>
• </head>
• <body>
• </body>
• </html>

Importance of XHTML
• XHTML documents are XML conforming as they are readily viewed, edited, and
validated with standard XML tools.
• XHTML documents can be written to operate better than they did before in
existing browsers as well as in new browsers.
• XHTML documents can utilize applications such as scripts and applets that rely
upon either the HTML Document Object Model or the XML Document Object
Model.
• XHTML gives you a more consistent, well-structured format so that your webpages
can be easily parsed and processed by present and future web browsers.

Importance of XHMTL
• You can easily maintain, edit, convert and format your document in the long run.
• Since XHTML is an official standard of the W3C, your website becomes more
compatible with many browsers and it is rendered more accurately.
• XHTML combines strength of HTML and XML. Also, XHTML pages can be
rendered by all XML enabled browsers.
• XHTML defines quality standard for your webpages and if you follow that, then
your web pages are counted as quality web pages. The W3C certifies those pages
with their quality stamp.

Important Tags for this week
• <p></p> for writing a paragraph with text
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <small> - Smaller text

<b> and <strong> tags
• In order to bold text you can use either the <b> or <strong> tags
• <b>Marino</b> will show up as Marino
• <strong>Marino</strong> will show up as Marino
• Notice they are both merely bold!

<i> and <em> tags
• In order to italicize text you can use either the <i> or <em> tags
• <i>Marino</i> will show up as Marino
• <em>Marino</em> will show up as Marino
• Notice they are both merely italic!

<small> tag
• This merely makes your text smaller without having to utilize the size
attribute or similar attributes within HTML code
• Ideally, you use this tag to deemphasize something [things that are not
important]

Keep in Mind Now, but for Later
• <form>…</form> - defines a form
• <input type…/> - defines a form input
• button
checkbox
file
hidden
image
password
radio
reset
submit
text

Building Assignment 3
• Some suggestions:
• <h1></h1> tags for About Me, My Favorite Sport or Musical Act, and My Favorite
Animal
• <p></p> tags when providing the paragraph about each section
• Your paragraph should be any where from 3 to 5 sentences

Building Assignment 3 Example
<h1>About Me</h1>
<p>I am an Adjunct Professor of BITM at Seton Hall University. I have
taught courses in Management Information Systems [BITM 2701] and
Developing Web Applications [BITM 3730]. My web space created for this
course is available at <a href="http://pirate.shu.edu/~marinom6/">My Site>
</p>
You do not need to include any hyperlink for Assignment 3

Building Project #1
• Refer to Professor Nazzaro’s example at http://pirate.shu.edu/~nazzarma/
• Listing your address while at Seton Hall University instead of your home address is fine
• You will in theory only list one degree [the one you will receive at SHU] under
Education
• Unless you have an Associate’s degree from somewhere
• Your Experience will be vastly less
• Try to have bullet points on what you did at your job(s)

Building Project #1
• Your Skills do not have to broken down into different areas
• Please list three References [you can include former professors, friends, other
people in the class to meet this requirement]
• Remember to use the tags discussed to bold and italicize as necessary

Important Note for Project #1
• Professor Nazzaro’s Resume is created in XHTML
• For the purposes of Project #1 you are more than welcome to only use
HTML code
• Consideration of extra credit will be given if you are able to utilize XHTML properly
for Project #1

CSS
BITM 3730

HW 3 and Project 1 Review
• HW 3 Example and Project 1 Example at
• http://pirate.shu.edu/~marinom6/work.html

Why CSS?
• CSS stands for Cascading Style Sheets.
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
• Websites generally have sub-folders where CSS files are stored

Stylesheets
• While HTML defines where structures start and end, stylesheets define what they
look like
• When used properly, stylesheets allow for a consistent look and feel throughout a
website with one simple change of a file
• They are defined in three different ways:
• External: the styles are defined in a .css file (preferred)
• Internal: the styles are defined inside the HTML file, usually in the header section
• Inline: the style is defined inside an existing tag, usually in the body section

How to use the 3 Methods
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file

Inline Example
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
• The following example sets the text color of the <h1> element to blue, and
the text color of the <p> element to red:
• <h1 style="color:blue;">A Blue Heading</h1>
• <p style="color:red;">A red paragraph.</p>

Internal Example
• An internal CSS is used to define a style for a single
HTML page.
• An internal CSS is defined in the <head> section of
an HTML page, within a <style> element.
• The following example sets the text color of ALL the
<h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue"
background color:
• <html>
• <head>
• <style>
• body {background-color: powderblue;}
• h1 {color: blue;}
• p {color: red;}
• </style>
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>

External Example [Most Comon]
• <html>
• <head>
• <link rel="stylesheet" href="styles.css">
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>

styles.css Code
• body {
• background-color: powderblue;
• }
• h1 {
• color: blue;
• }
• p {
• color: red;
• }

Beyond CSS Basics
• With CSS, you can control:
• Color
• Font
• size of text
• spacing between elements
• how elements are positioned and laid out
• what background images or background colors to be used
• different displays for different devices and screen sizes

Changing Stylesheets
• Changing a stylesheet on the fly can be done on the server when the request
is received. For example, the webserver can determine the type of browser
(Internet Explorer, Firefox, Chrome, iPhone, Blackberry) and render the
page appropriately
• You can also give that functionality to the user. Perhaps the user might want
a larger font or a different color. With JavaScript, you can create a button
that changes the stylesheet for the entire page.

Two More Stylesheet Examples
• styles.css
h1 {
border: 2px black solid;
color: black;
}
.justified {
text-align: left;
}
• styles2.css
h1 {
border: 2px red solid;
color: red;
}
.justified {
text-align: right;
}

How Stylesheets are put together
• Each style in a style sheet has three parts:
• A selector
• One or more properties
• One or more values for each property
• Syntax
selector {
property1: value1 [value2 …];
property2: value1 [value2 …];
}
• To associate a style sheet to an HTML document, use the <link> tag within the head tag:
• <link href=“styles.css” rel=“stylesheet” type=“text/css” />

Stylesheet styles
• #id – ID’s are used to define large structures in an HTML document. Each
id can be used only once in each HTML document.
• .class – Classes are styles that can be reused and applied to different elements
via a class parameter, such as <h1 class=“name”> …</h1>
• Element – elements are used to redefine how existing HTML elements (tags)
are to be formatted.

Building Assignment 4 Example
Start with the basics:
<html>
<head>
</head>
<body>
</body>
</html>

• Put some sample text inside the body section
• Make sure they appear before you add your stylesheet
• <h1>Test</h1>
• <p>Random text here</p>

• Place your style tag within the body section of your
HTML code
• <style>
• </style>

• body {
• background-color: put your background color here;
• }
• h1 {
• color: put text color here;
• }
• p {
• color: put text color here;
• }

• When saving your file as a .css file you only need the information on the
previous slide
• The “building” example is if you were to do an internal example of CSS

CSS Properties
• The CSS color property defines the text color to be used.
• The CSS font-family property defines the font to be used.
• The CSS font-size property defines the text size to be used.

CSS Properties
• The CSS border property defines a border around an HTML element.
• The CSS padding property defines a padding (space) between the text and
the border.
• The CSS margin property defines a margin (space) outside the border.

CSS Properties
• Use the HTML style attribute for inline
styling
• Use the HTML <style> element to define
internal CSS
• Use the HTML <link> element to refer to
an external CSS file
• Use the HTML <head> element to store
<style> and <link> elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text
fonts
• Use the CSS font-size property for text
sizes
• Use the CSS border property for borders
• Use the CSS padding property for space
inside the border
• Use the CSS margin property for space
outside the border

CSS Linking
• This example uses a full URL to link to a style sheet:
• <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
• This example links to a style sheet located in the html folder on the current web site:
• <link rel="stylesheet" href="/html/styles.css">
• This example links to a style sheet located in the same folder as the current page:

XML
BITM 3730

Previous Work Review
• http://pirate.shu.edu/~marinom6/work.html
• Begin organizing your creating files for this course into an easy to find folder
on your desktop for easy FTP later on

XML Basics
• Stands for eXtensible Markup Language
• Used to define customized markup languages
• We are already familiar with XML since we understand HTML

Interesting XML Notes
• XML is a software- and hardware-independent tool for storing and transporting
data.
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• Maybe it is a little hard to understand, but XML does not DO anything.

XML Just Stores Data
• XML is just information wrapped in tags.
• XML is the parent language to HTML
• XML is used to contain data, not to display data
• XML tags are custom, defined by the author.
• HTML can enrich XML data but neither can replace the other. One is used
for storing (XML) and the other is used for displaying (HTML).

XML Rules
• XML elements must follow these rules:
• Can contain letters, numbers and other characters
• Can’t start with a number or punctuation character
• Can’t start with ‘xml’
• Can’t contain spaces

Writing in XML
• XML attributes must be quoted as in: <employee type=‘permanent’>
• Alternatively, you can write
• <employee>
<type>permanent</type>
</employee>
• Both above examples accomplish the same goal and there are no rules as to which
one is right. The second example is easier to read and looks nicer.

XML vs. HTML
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data looks
• XML tags are not predefined like HTML tags are

You Define XML Tags
• The XML language has no predefined tags.
• Tags are "invented" by the author of the XML document.
• HTML works with predefined tags like <p>, <h1>, <table>, etc.
• With XML, the author must define both the tags and the document structure.

Why Use XML?
• It simplifies data sharing
• It simplifies data transport
• It simplifies platform changes
• It simplifies data availability

More Reasons to use XML
• XML stores data in plain text format. This provides a software- and hardware-
independent way of storing, transporting, and sharing data.
• XML also makes it easier to expand or upgrade to new operating systems, new
applications, or new browsers, without losing data.
• With XML, data can be available to all kinds of "reading machines" like people,
computers, voice machines, news feeds, etc.

In What Ways Can We Use XML?
• Create a list of books
• Create a list of transactions
• Create a news article header
• Detail weather service information
• And much, much more!

XML Example Code
• <?xml version="1.0" encoding="UTF-8"?> Prolog
• <note> Root
• <to>Tove</to>
• <from>Jani</from>
• <heading>Reminder</heading>
• <body>Don't forget me this weekend!</body>
• </note> notice all have closing tags like HTML!!!!

XML can use HTML tags
• Tags you have previously seen can be used in XML, such as:
• <b></b> for bold text
• <i></i> for italicized text

Attributes Must Be Quoted
• <note date="12/18/1953">
• <to>Tove</to>
• <from>Jani</from>
• </note>
• In this example our attribute is our date 12/18/1953

Entity References
< < less than
> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
Entity references help you to avoid errors

Comments in XML
• 
• This exact structure is required for XML comments

XML Elements
• An element can contain:
• Text
• Attributes
• other elements
• or a mix of the above
• Examples could be <rate>19.99</rate>

XML Naming Rules Reminder
• XML elements must follow these naming rules:
• Element names are case-sensitive
• Element names must start with a letter or underscore
• Element names cannot start with the letters xml (or XML, or Xml, etc)
• Element names can contain letters, digits, hyphens, underscores, and periods
• Element names cannot contain spaces
• Any name can be used, no words are reserved (except xml).

Standards Advising Naming Rules
• Create descriptive names, like this: <person>, <firstname>, <lastname>.
• Create short and simple names, like this: <book_title> not like this: <the_title_of_the_book>.
• Avoid "-". If you name something "first-name", some software may think you want to subtract "name" from "first".
• Avoid ".". If you name something "first.name", some software may think that "name" is a property of the object "first".
• Avoid ":". Colons are reserved for namespaces (more later).
• Non-English letters like éòá are perfectly legal in XML, but watch out for problems if your software doesn't support them.

XLink
• <?xml version="1.0" encoding="UTF-8"?>
• <homepages xmlns:xlink="http://www.w3.org/1999/xlink">
• <homepage xlink:type="simple"
xlink:href="https://www.w3schools.com">Visit W3Schools</homepage>
• <homepage xlink:type="simple" xlink:href="http://www.w3.org">Visit
W3C</homepage>
• </homepages>

Where Else Can We Use XML?
• HTML
• JavaScript
• PHP

XSLT
• XSLT - eXtensbile Stylesheet Language Transformations
• XSLT transform XML into HTML, before it is displayed by a browser
• You can transform a XML document into an HTML document just by
linking the XML document to the XSLT file by using the following line:
• <?xml-stylesheet type="text/xsl" href="xsltexample.xsl"?>

Another XML Example
• <xml>
<addressbook>
<address>
<name>Mark Nazzaro</name>
<email>nazzarma@shu.edu</email>
</address>
<address>
<name>David Rosenthal</name>
<email>rosentdv@shu.edu</email>
</address>
</addressbook>
</xml>

<xml>
<instructors>
<name>Professors</name>
<contact>
<name>Mark Nazzaro</name>
<email>nazzarma@shu.edu</email>
</contact>
</instructors>
</xml>

• Each new professor’s name and email will require another contact tag
<contact>
<name>Matt Marino</name>
<email>matt.marino@shu.edu</email>
</contact>

• You will need to create as many <contact> tag attributes for name and email
as you have professors this semester
• In the upcoming example I have listed four professor contacts

Building Project 2
• The easiest way to embed a file is to use a <link> tag in HTML
• However, we have not uploaded our files to pirate.shu.edu yet, so we will
embed them right into the code
• <xml id="cdcat" src="cd_catalog.xml"></xml>

Building Project 2
• First, put the following code from your Blue.css file under the title:
<style>
body {
background-color: black;
}
h1 {
color: blue;
}
p {
color: blue;
}
</style>

Building Project 2
• Putting your XML into HTML requires you to translate it into a table [easiest for our beginner status]
• First, create your table:
<h1>Email Data</h1>
<table border="1">
<tbody>
Add table rows here
</tbody>
</table>
We need the <h1> tag so that our text is colored blue from our Blue.css code

Building Project 2
• First, we need our table headers:
<tr>
<th><p>Name</p></th>
<th><p>Email</p></th>
</tr>

Building Project 2
• Next, we need our table data:
<tr>
<td><p>Matt Marino</p></td>
<td><p>matt.marino@shu.edu</p></td>
</tr>
We need the <p> tag so that our text is colored blue from our Blue.css code

Building Project 2
• Keep adding each professor to the table using the tags and elements
provided on the previous slide using the <tr>, <td>, and <p> tags as
appropriate

Project 2 Visually
If your code is correct within your HTML file
your result should look like this
All of our text is blue and our background is
black due to our Blue.css code [make sure it is
embedded using the <style> tag
We also made sure to use the <h1> and <p>
tags to see our CSS code in action
The names and emails depend on your professors
this semester like your XML file

JavaScript
BITM 3730

JavaScript Basics
• JavaScript is embedded in an HTML file using
<script></script>
• .js is the file extension for JavaScript
• Functions make up the majority of JavaScript
• If statements are used for condition execution in JavaScript
• You comment out a single line of code using //

JavaScript Important Notes
• Like Java [uses functions]
• Interpreted by the browser, not compiled
• Complimentary to HTML, used for dynamic web pages and form validation
• OS and Browser (for the most part) independent
• JavaScript is either embedded in a webpage using <script> …</script> or in a separate file
usually with a .js extension.
• Like stylesheets and css files, JavaScript and js files allows for portability and reusability.
• To reference an external JavaScript: <script src=“scripts.js”></script>

DIV and SPAN Reminder
• DIV – gives you the ability to identify particular sections (divisions) of a
document using the id attribute. Particularly useful in AJAX and dynamic
HTML.
• SPAN – has the same attributes and uses above. Both tags have the style,
class and id attributes.
• Primary difference between the two is the DIV tag inherently breaks a
paragraph.
• Both are typically used to apply styles to HTML documents.

JavaScript Intro
• JavaScript allows for client-side code execution.
• Similar to Java
• Typically used for client-side form validation, dynamic HTML and AJAX.
• Example:
<script>
document.write(“Our first JavaScript”);
</script>
• In the above example, code is written directly in the HTML document.
• In order for code to be reusable, the code can be stored in a .js file.

Basic Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/scripts.js" ></script>
</head>
<body>
<div>TODO write content</div>
<button onclick="myFirstFunction();" >Click Me!</button>
</body>
</html>

Function Being Called
function myFirstFunction()
{
alert("our test works!")
}

onclick
• Using standard HTML, a webpage is static (i.e. it won’t change until the
HTML file is changed)
• Using dynamic HTML and events like onClick, the content of a page or a tag
can be changed on the fly

onclick Example HTML
<html>
<head>
<title></title>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="myDIV">TODO write content</div>
<button id="divChange" onclick="divChange()">Change the DIV value</button><br/>
<button id="divChangeBack" onclick="divChangeBack()">Change the DIV value back</button><br/>
<button id="docChange" onclick="docChange()">Change the entire document</button><br/>
</body>
</html>

onclick JavaScript code
function divChange()
{
previousDIV = document.getElementById("myDIV").innerHTML;
document.getElementById("myDIV").innerHTML="DIV has changed";
}
function divChangeBack()
{
document.getElementById("myDIV").innerHTML = previousDIV;
}
function docChange()
{
document.write("Document has changed");
}

Another onclick Example HTML
<html>
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css" title="Default Style" id="defaultStyle" />
<link href="styles2.css" rel="stylesheet" type="text/css" title="Mobile Style" id="mobileStyle"/>
</head>
<body>
<h1>Here is my H1, watch it change.</h1>
<p class="justified">this is a test of the justified class</p>
<button id="styleSwitchButton" onclick="switchStyle()">Switch Style</button>
</body>
</html>

Another onclick Example JS
function switchStyle()
{
styleDefault = document.getElementById("defaultStyle");
styleMobile = document.getElementById("mobileStyle");
if (styleDefault.disabled)
{
styleDefault.disabled = false;
styleMobile.disabled = true;
}
else
{
styleDefault.disabled = true;
styleMobile.disabled = false;
}
}

JS Functions
• JavaScript code can be written as a block or code that will execute once or as
functions
• Functions are useful when they are used again and again within a page or a
website. One use for a function is form validation. Custom functions can be
written to validate the form before it is submitted.

JS Functions Cont.
• The function syntax is
function myFunction(){
• …..;
}
• In the above example, the function name is myFunction and it takes no arguments
• A argument is passed for use within the function
• A function can return a value as well so it can be assigned to an outside variable.
• function myAdditionFunction(a, b) {
return a + b;
}

JS Comments
• When writing code, it is useful to embed comments, so the purpose of the
code is understood
// - this comments out a single line
• /*
• */ comments all content between and ignores line breaks

document
• Similar to java, there are objects within JavaScript
• The main one to remember is the document object. This object references the entire HTML
document.
• One typical use is the document.getElementById(“myid”).innerHTML=“some string”;
• In the above example, the code will find an HTML element such as a <p>, <div> or a
<span> and change the “value” of that tag (i.e. the content between the open and close
tag).
• In order for the element to be referenced, the id attribute must be used in the opening tag
(<div id=“myid”>This text will change</div>

Variables
• In programming, variables allow for the storage of a value so it can be referenced later within the code.
• JavaScript creates variables using the following syntax:
var foo = “a”;
var bar = “b”;
• Javascript has no types. Programming languages typically have types like integer, string, decimal. Javascript stores everything using the same
variable type.
• It is possible to create a variable with no initial value
var myVar;
• var x = 1;
var y = 2;
var z = x + y;
• var x = “test”;
var y = “string”;
var z = x + “ “ + y;

Scope
• Variables have a limited scope when defined in a function.
Function myFunction() {
var myLocalVar = 1; //this var will not be accessible from outside
}

Operators
• + adds two operands
• - subtracts second operand from the first
• * multiply both operands
• / divide first operand by the second operand
• ++ increments the operator by one
• -- decrements the operator by one
• == Checks if two operands are equal, if so,
returns true, otherwise false
• != Checks if two operands are not equal, if so,
returns true, otherwise false
• > Checks if the first operand is greater than the
second operand
• < Checks if the first operand is less than the
second operand
• >= Checks if the first operand is greater than or
equal to
• <= Checks if the first operand is less than or
equal to

Additional Operators
• && returns true if both statements are true
• || returns true if either statement is true
• ^ returns true if only one statement is true
• = simple assignment operator
• += adds right operand to the left operand and assigns to
the left operand
• -= subtracts right operand from the left operand and
assigns to the left operand
• *= multiples right operand with the left operand and
assigns to the left operand.
• /= divides the left operand with the right operand and
assigns to the left operand.
• C += A is equal to c = c+a
• C -= A is equal to c = c-a
• C *= A is equal to c = c * a
• C /= A is equal to c = c/a

If Statement
• If statements are used for conditional execution.
• Else statements are used to run a different set of code if the if statement doesn’t evaluate to true
• The syntax in Java is:
if (condition)
{
code to be executed
}
else
{
code to be executed
}

If in Action
var alertString='';
var firstName=document.getElementById("firstName");
var lastName=document.getElementById("lastName");
if (firstName.value == "")
{
alertString+='Enter your first namen';
}
if (lastName.value == "")
{
alertString+='Enter your last namen';
}
if (alertString != "")
{
alert(alertString);
}

AJAX
• Asynchronous JavaScript and XML
• Why asynchronous? – Allows time for the server to process the request and return the results when
complete. JavaScript proceeds while the server is processing
• Uses XMLHttpRequest – builtin javascript object for sending requests for XML using JavaScript
• Two most useful methods for XMLHttpRequest are open and send.
• Open method has the following parameters
• Method – GET or POST. GET will be sufficient most times however it won’t be sufficient when a uncached
copy of the file is necessary
• url – the URL of the xml file or script
• Async – true or false – send the method asynchronously or not

AJAX Cont.
• For the response from the server, you can use the responseText or
responseXML property of the XMLHttpRequest object
• responseText is used when the response consists of plain text
• responseXML is used when the response consists of XML

What is a Cookie?
• A small piece of data sent from a website and stored in a user’s web browser
while a user is browsing a website
• When the user browses the same website in the future, the data stored in the
cookie can be retrieved by the website.

JavaScript Cookie
• Name: the name of the cookie
• Value: the value of the cookie
• Expires: the date/time when the cookie expires automatically
• Path: the path of the cookie
• Domain: the name of the server that created the cookie
• Secure: whether to use encryption to read/set the cookie
• Only small amounts of data can be stored in a cookie
• Cookies are available via JavaScript only to the domain used when the cookie was created
• Cookies are available only to files in the same directory the cookie was created in (use path “/” to make a
cookie available to all files)

Setting a Cookie
• To set a cookie, you assign an appropriate value to document.cookie
• We can write a function so that we don’t need to write the same code again and again
function setCookie(name, value, expireDays)
{
var expires = new Date();
expires.setDate(expires.getDate() + expireDays);
var myCookie = name + "=" + escape(value) +
";expires=" + expires.toGMTString() +
";path=/";
document.cookie = myCookie;
}

Explaining What We Just Did
• Var expires is set to a new Date object. An object is a data structure which contains
properties and its behavior.
• The above Date object is created with no date and time. The Date() function is
called its constructor. When setDate is called, it is set with the current date and the
number of days in expiresDays is added hence setting the expire time.
• The myCookie var is nothing but a string. The escape function “escapes” characters
within a string. The characters it escapes are used in the URL and can cause the
HTTP request to fail
• In order to delete a cookie, we can just call setCookie(name, “”, -1). This will clear
out the cookie name and value and set it to expire to yesterday

function setCookie(name, value, expireDays)
{
var expires = new Date();
expires.setDate(expires.getDate() + expireDays);
var myCookie = name + "=" + escape(value) +
";expires=" + expires.toGMTString() +
";path=/";
document.cookie = myCookie;
}

Getting a Cookie
function getCookie(name)
{
if ((document.cookie == null) || (document.cookie == ""))
{
return "";
}
else
{
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++)
{
var cookie = cookies[i].split('=');
if (removeLeadingSpace(cookie[0]) == name)
{
return unescape(cookie[1]);
}
}
return "";
}
}

JavaScript Function Test
function myWhileFunction(a, b)
{
var i = 1;
var counter = 1;
while (counter <= b)
{
i = i * a;
counter++;
}
return i;
}
• Explain how many times the following
while loop will run and what the value
of i will be when it is complete when
called with myWhileFunction(2,8)

Test Answer
• It will run 8 times
• i will equal 256
function myWhileFunction(a, b)
{
var i = 1;
var counter = 1;
while (counter <= b)
{
i = i * a;
counter++;
}
return i;
}

Important Notes
• XML works well with JavaScript
• JavaScript can help in getting a cookie in addition to setting a cookie
• A cookie stores small amounts of data
• The expires function is used to set an expiration date on a cookie
• Cookies are available in the same directory the cookie was created in

XML and JavaScript [HTML file]
<html>
<head>
<title></title>
</head>
<body onload="showData()">
<div id="addressbook"></div>
</body>
</html>

XML and JavaScript [JS file]
function showData()
{
var xml = new XMLHttpRequest();
var addressHTML = "";
var addressbook = document.getElementById("addressbook");
xml.open("GET", "addressdata.xml", false);
xml.send("");
var xmlDoc = xml.responseXML;
var names = xmlDoc.getElementsByTagName("name");
var mails = xmlDoc.getElementsByTagName("email");
for (var i = 0; i < names.length; i++)
{
var name = names[i].childNodes[0].nodeValue;
var mail = mails[i].childNodes[0].nodeValue;
addressHTML += "<li>" + name + "(" + mail + ")</li>n";
}
addressbook.innerHTML = addressHTML;
}

Concerns with Cookies
• Cookies can be overwritten in the browser.
• Some browsers allow for this and others can be edit by opening the file which stores
the cookies.
• Cookies are prime targets for sql injection. Imagine you are performing a
select based on the username:
• select student_id from students where username = “<username>” where <username>
is the valued stored in the cookie.

<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body onload="checkCookie()">Marino's cookie checker</body>
</html>

External Version [Assignment 7] – HTML File
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="checkCookie()">Marino's cookie checker</body>
</html>

External Version [Assignment 7] – JS File
function checkCookie()
{
alert(document.cookie);
var username=getCookie("username");
{
alert("Welcome again " + username);
}
else
{
username=prompt("Please enter your name:","");
{
setCookie("username",username,365);
}
}
}

onclick Display Date and Time
<!DOCTYPE html>
<html>
<body>
<h2>Date and Time</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

JavaScript Compared to HTML/CSS
• HTML to define the content of web pages
• CSS to specify the layout of web pages
• JavaScript to program the behavior of web pages

More onclick Examples
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
</body>
</html>

Another onclick Example
<!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>

Common JS/HTML Elements
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML
element
onmouseout The user moves the mouse away from an
HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

JavaScript - Java
• Arrays
• Booleans
• Math Class
• Random Class
• Objects
• Functions
• Assignment requirements

JavaScript Community
• https://www.javascript.com/
• Tutorials
• Questions – Community
• And More!

JSON
BITM 3730

JSON Basics
• JSON stands for JavaScript Object Notation
• JSON is easier to parse than XML
• Properties make up a JSON object
• JSON.parse() parses retrieved data
• JSON.stringify() converts a JavaScript object into a string

JSON vs. XML
• Syntax for storing and exchanging
data
• Similar to XML:
• Hierarchical – values embedded
within values
• Human readable
• Both can use XMLHttpRequest
• Different from XML:
• No tags
• Shorter
• Quicker to read and write
• JSON uses arrays
• Easier to parse JSON

JSON Object Example
• A car is an object which has three properties describing it
• Make – String value representing the make of the car
• Model – String value representing the model of the car
• Price – Numeric value representing the price of the car

How That Looks in XML
<car>
<make>Chevrolet</make>
<model>Suburban</model>
<price>60000</price>
</car>

How It Looks in JSON
{
"make": "Chevrolet",
"model": "Suburban",
"price": 60000
}

JSON Data Types
• String – {“name”:”Mark”}
• Number – {“age”: 41}
• Objects –
• {
“address”: {“name”:”Matt Marnio”, “email”:”matt.marino@shu.edu”}
}
• Arrays –
• {
“students”:[“Manny”, “Moe”, “Jack”]
}
• Booleans - {“Full-time”: true}
• Null – {“Job Description”: null}

Accessing Values in Objects
• In order to access the values of an object, you can
use the dot (.) notation
myObj =
{“firstName”:”Matt”,”lastName”:”Marino”,”
age”:34};
firstName = myObj.firstName;
lastName = myObj.lastName;
age = myObj.age;
• You can also access the values using a bracket
notation
firstName = myObj[“firstName”];
lastName = myObj[“lastName”];
age = myObj[“age”];
• You can also access all of the values using a for
loop:
for (x in myObj)
{
}

Parsing
• When data is received from a web server, it can be parsed with JSON.parse() and it
becomes a JavaScript object.
var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Stringify
• Convert a JavaScript object into a string
var obj = { "name":"John", "age":30, "city":"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON

Building Project 3 – Reminder of XML Code
<xml>
<instructors>
<name>Professors</name>
<contact>
<name>Matt Marino</name>
<email>matt.marino@shu.edu</email>
</contact>
</instructors>
</xml>

Building Project 3 – JSON Code
{
“name": “Matt Marino",
“email": “matt.marino@shu.edu",
}
• Create additional ones for each professor you have this semester

JSON Example
<html>
<head>
<title></title>
</head>
<body onload="show()">
<div id="carJSON"></div>
<div id="carXML"></div>
</body>
</html>

JSON Example Visual
JSON XML
function showJSON()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("carJSON").innerHTML = myObj.make;
}
};
xmlhttp.open("GET", "cars.json", true);
xmlhttp.send();
}
function showXML()
{
var xmlhttp = new XMLHttpRequest();
var xmldoc = xmlhttp.responseXML;
var myObj = xmldoc.getElementsByTagName("make");
alert(myObj[0].childNodes[0].nodeValue);
document.getElementById("carXML").innerHTML =
myObj[0].childNodes[0].nodeValue;
}
};
xmlhttp.open("GET", "cars.xml", true);
xmlhttp.send();
}
function show()
{
showJSON();
showXML();
}

JSON Table
<!DOCTYPE html>
<html>
<body>
<h2>Make a table based on JSON data.</h2>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 14 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_html_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
</body>
</html>

JSON Community
• https://www.json.org/json-en.html
• Goes in depth on all JSON topics
• Including using JSON with various programming languages

Web Server and Application Server
Technologies
BITM 3730

Basics
• A web server delivers static content
• An application server delivers dynamic content
• The relationship between application servers and a database is that it
transforms data with business logic
• Web servers and application servers which are free and readily available are
open source
• FTP stands for File Transfer Protocol

Web Server Defined
• A web server is software and hardware that uses HTTP (Hypertext Transfer
Protocol) and other protocols to respond to client requests made over the
World Wide Web.
• The main job of a web server is to display website content through storing,
processing and delivering webpages to users.

Web Server Possibilities
• A static web server: We call it "static" because the server sends its hosted files as-is
to your browser.
• A dynamic web server: We call it "dynamic" because the application server
updates the hosted files before sending content to your browser via the HTTP
server.
• An error message

Potential Errors – 5 Levels
• 1xx informational response – the request was received, continuing process
• 2xx successful – the request was successfully received, understood, and
accepted
• 3xx redirection – further action needs to be taken in order to complete the
request
• 4xx client error – the request contains bad syntax or cannot be fulfilled
• 5xx server error – the server failed to fulfil an apparently valid request

1xx Level Errors
• 100 Continue: The server has received the request headers and the client should proceed to send the request body (in the
case of a request for which a body needs to be sent; for example, a POST request). Sending a large request body to a server
after a request has been rejected for inappropriate headers would be inefficient. To have a server check the request's
headers, a client must send Expect: 100-continue as a header in its initial request and receive a 100 Continue status code in
response before sending the body. If the client receives an error code such as 403 (Forbidden) or 405 (Method Not
Allowed) then it shouldn't send the request's body. The response 417 Expectation Failed indicates that the request should
be repeated without the Expect header as it indicates that the server doesn't support expectations (this is the case, for
example, of HTTP/1.0 servers).
• 101 Switching Protocols: The requester has asked the server to switch protocols and the server has agreed to do so.
• 102 Processing: A WebDAV request may contain many sub-requests involving file operations, requiring a long time to
complete the request. This code indicates that the server has received and is processing the request, but no response is
available yet. This prevents the client from timing out and assuming the request was lost.
• 103 Early Hints: Used to return some response headers before final HTTP message

2xx Level Errors
• 200 OK: Standard response for successful HTTP requests. The
actual response will depend on the request method used. In a
GET request, the response will contain an entity corresponding to
the requested resource. In a POST request, the response will
contain an entity describing or containing the result of the action.
• 201 Created: The request has been fulfilled, resulting in the
creation of a new resource.
• 202 Accepted: The request has been accepted for processing, but
the processing has not been completed. The request might or
might not be eventually acted upon and may be disallowed when
processing occurs.
• 203 Non-Authoritative Information: The server is a
transforming proxy (e.g. a Web accelerator) that received a 200
OK from its origin but is returning a modified version of the
origin's response.
• 204 No Content: The server successfully processed the request and is
not returning any content.
• 205 Reset Content: The server successfully processed the request, asks
that the requester reset its document view, and is not returning any
content.
• 206 Partial Content: The server is delivering only part of the resource
(byte serving) due to a range header sent by the client. The range
header is used by HTTP clients to enable resuming of interrupted
downloads or split a download into multiple simultaneous streams.
• 207 Multi-Status: The message body that follows is by default an XML
message and can contain a number of separate response codes,
depending on how many sub-requests were made.
• 208 Already Reported: The members of a DAV binding have already
been enumerated in a preceding part of the (multistatus) response and
are not being included again.
• 226 IM Used: The server has fulfilled a request for the resource, and
the response is a representation of the result of one or more instance-
manipulations applied to the current instance.

3xx Level Errors
• 300 Multiple Choices: Indicates multiple options for the resource from which the
client may choose (via agent-driven content negotiation). For example, this code could
be used to present multiple video format options, to list files with different filename
extensions, or to suggest word-sense disambiguation.
• 301 Moved Permanently: This and all future requests should be directed to the given
URI.
• 302 Found (Previously "Moved temporarily"): Tells the client to look at (browse
to) another URL. 302 has been superseded by 303 and 307. This is an example of
industry practice contradicting the standard. The HTTP/1.0 specification (RFC 1945)
required the client to perform a temporary redirect (the original describing phrase was
"Moved Temporarily"), but popular browsers implemented 302 with the functionality
of a 303 See Other. Therefore, HTTP/1.1 added status codes 303 and 307 to
distinguish between the two behaviours. However, some Web applications and
frameworks use the 302 status code as if it were the 303.
• 303 See Other : The response to the request can be found under another URI using
the GET method. When received in response to a POST (or PUT/DELETE), the
client should presume that the server has received the data and should issue a new
GET request to the given URI.
• 304 Not Modified: Indicates that the resource has not been modified since
the version specified by the request headers If-Modified-Since or If-None-
Match. In such case, there is no need to retransmit the resource since the
client still has a previously-downloaded copy.
• 305 Use Proxy: The requested resource is available only through a proxy, the
address for which is provided in the response. For security reasons, many
HTTP clients (such as Mozilla Firefox and Internet Explorer) do not obey
this status code.
• 306 Switch Proxy: No longer used. Originally meant "Subsequent requests
should use the specified proxy."
• 307 Temporary Redirect: In this case, the request should be repeated with
another URI; however, future requests should still use the original URI. In
contrast to how 302 was historically implemented, the request method is not
allowed to be changed when reissuing the original request. For example, a
POST request should be repeated using another POST request.
• 308 Permanent Redirect: The request and all future requests should be
repeated using another URI. 307 and 308 parallel the behaviors of 302 and
301, but do not allow the HTTP method to change. So, for example,
submitting a form to a permanently redirected resource may continue
smoothly

4xx Level Errors
• 400 Bad Request: The server cannot or will not process the request due to an apparent client error (e.g., malformed request syntax, size too
large, invalid request message framing, or deceptive request routing).
• 401 Unauthorized: Similar to 403 Forbidden, but specifically for use when authentication is required and has failed or has not yet been
provided. The response must include a WWW-Authenticate header field containing a challenge applicable to the requested resource. See Basic
access authentication and Digest access authentication. 401 semantically means "unauthorised", the user does not have valid authentication
credentials for the target resource.
• 402 Payment Required: Reserved for future use. The original intention was that this code might be used as part of some form of digital cash
or micropayment scheme, as proposed, for example, by GNU Taler, but that has not yet happened, and this code is not widely used. Google
Developers API uses this status if a particular developer has exceeded the daily limit on requests. Sipgate uses this code if an account does not
have sufficient funds to start a call. Shopify uses this code when the store has not paid their fees and is temporarily disabled. Stripe uses this
code for failed payments where parameters were correct, for example blocked fraudulent payments.
• 403 Forbidden: The request contained valid data and was understood by the server, but the server is refusing action. This may be due to the
user not having the necessary permissions for a resource or needing an account of some sort or attempting a prohibited action (e.g. creating a
duplicate record where only one is allowed). This code is also typically used if the request provided authentication by answering the WWW-
Authenticate header field challenge, but the server did not accept that authentication. The request should not be repeated.

4xx Level Errors Cont.
• 404 Not Found: The requested resource could not be found but may be available in the future. Subsequent requests by the client are
permissible.
• 405 Method Not Allowed: A request method is not supported for the requested resource; for example, a GET request on a form that
requires data to be presented via POST, or a PUT request on a read-only resource.
• 406 Not Acceptable: The requested resource is capable of generating only content not acceptable according to the Accept headers sent in the
request.
• 407 Proxy Authentication Required: The client must first authenticate itself with the proxy.
• 408 Request Timeout: The server timed out waiting for the request. According to HTTP specifications: "The client did not produce a
request within the time that the server was prepared to wait. The client MAY repeat the request without modifications at any later time."
• 409 Conflict: Indicates that the request could not be processed because of conflict in the current state of the resource, such as an edit conflict
between multiple simultaneous updates.
• 410 Gone: Indicates that the resource requested is no longer available and will not be available again. This should be used when a resource has
been intentionally removed and the resource should be purged. Upon receiving a 410 status code, the client should not request the resource in
the future. Clients such as search engines should remove the resource from their indices. Most use cases do not require clients and search
engines to purge the resource, and a "404 Not Found" may be used instead.

• 411 Length Required: The request did not specify the length of its content, which is required by the requested resource.
• 412 Precondition Failed: The server does not meet one of the preconditions that the requester put on the request header fields.
• 413 Payload Too Large: The request is larger than the server is willing or able to process. Previously called "Request Entity Too
Large".
• 414 URI Too Long: The URI provided was too long for the server to process. Often the result of too much data being encoded as
a query-string of a GET request, in which case it should be converted to a POST request. Called "Request-URI Too Long"
previously.
• 415 Unsupported Media Type: The request entity has a media type which the server or resource does not support. For example,
the client uploads an image as image/svg+xml, but the server requires that images use a different format.
• 416 Range Not Satisfiable: The client has asked for a portion of the file (byte serving), but the server cannot supply that portion.
For example, if the client asked for a part of the file that lies beyond the end of the file. Called "Requested Range Not Satisfiable"
previously.
• 417 Expectation Failed: The server cannot meet the requirements of the Expect request-header field.

• 421 Misdirected Request: The request was directed at a server that is not able to produce a response.
• 422 Unprocessable Entity: The request was well-formed but was unable to be followed due to semantic errors.
• 423 Locked: The resource that is being accessed is locked.
• 424 Failed Dependency: The request failed because it depended on another request and that request failed (e.g., a
PROPPATCH).
• 425 Too Early: Indicates that the server is unwilling to risk processing a request that might be replayed.
• 426 Upgrade Required: The client should switch to a different protocol such as TLS/1.0, given in the Upgrade
header field.
• 428 Precondition Required: The origin server requires the request to be conditional. Intended to prevent the 'lost
update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when
meanwhile a third party has modified the state on the server, leading to a conflict.

Last 4xx Level Errors
• 429 Too Many Requests: The user has sent too many requests in a given amount
of time. Intended for use with rate-limiting schemes.
• 431 Request Header Fields Too Large: The server is unwilling to process the
request because either an individual header field, or all the header fields collectively,
are too large.
• 451 Unavailable For Legal Reasons: A server operator has received a legal
demand to deny access to a resource or to a set of resources that includes the
requested resource. The code 451 was chosen as a reference to the novel Fahrenheit
451

5xx Level Errors
• 500 Internal Server Error: A generic error message, given when an unexpected condition was encountered
and no more specific message is suitable.
• 501 Not Implemented: The server either does not recognize the request method, or it lacks the ability to
fulfil the request. Usually this implies future availability (e.g., a new feature of a web-service API).
• 502 Bad Gateway: The server was acting as a gateway or proxy and received an invalid response from the
upstream server.
• 503 Service Unavailable: The server cannot handle the request (because it is overloaded or down for
maintenance). Generally, this is a temporary state.
• 504 Gateway Timeout: The server was acting as a gateway or proxy and did not receive a timely response
from the upstream server.
• 505 HTTP Version Not Supported: The server does not support the HTTP protocol version used in the
request.

• 506 Variant Also Negotiates: Transparent content negotiation for the request results in a
circular reference.
• 507 Insufficient Storage: The server is unable to store the representation needed to complete
the request.
• 508 Loop Detected: The server detected an infinite loop while processing the request (sent
instead of 208 Already Reported).
• 510 Not Extended: Further extensions to the request are required for the server to fulfil it.
• 511 Network Authentication Required: The client needs to authenticate to gain network
access. Intended for use by intercepting proxies used to control access to the network (e.g.,
"captive portals" used to require agreement to Terms of Service before granting full Internet
access via a Wi-Fi hotspot).

Commonly Used Web Servers [FREE]
• Apache HTTP
• NGINX
• Apache Tomcat
• Node.js
• Lighttpd

Web Servers [PAID]
• GoDaddy
• HostGator
• OneWebHosting
• Hostwinds
• A2 Web Hosting
• WP Engine
• 1&1

Understanding the Web
• Website [also referred to as a domain]
• Highest level of the website [Ex. https://www.shu.edu/ ]
• Web page
• Individual page within the website [Ex. https://www.shu.edu/business/index.cfm ]
• Sub Domain
• Generally, features its own web pages in a secondary folder [Ex.
https://www.shu.edu/business/ or http://pirate.shu.edu/ ]

If You Build It, They Will Come

Web Server for Chrome
• https://chrome.google.com/webstore/detail/web-server-for-
chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en
• App from Chrome Web Store
• Runs Offline
• Explained in depth at https://github.com/kzahel/web-server-chrome

Application Server
• Server that hosts application
• Common tools
• Java application servers
• .NET Framework [from Microsoft]
• PHP application servers
• Mobile application servers

Where Can App Servers Be Deployed
• On premises [your computer/network]
• Cloud [public on internet]
• Private Cloud [private on internet – likely requires password]
• PaaS – Platform as a Service [can be cloud based]

PaaS
PaaS can be delivered in three ways:
• As a public cloud service from a provider, where the consumer controls software
deployment with minimal configuration options, and the provider provides the networks,
servers, storage, operating system (OS), middleware (e.g. Java runtime, .NET runtime,
integration, etc.), database and other services to host the consumer's application.
• As a private service (software or appliance) behind a firewall.
• As software deployed on a public infrastructure as a service.

Web APIs
• When used in the context of web development, an API is
typically defined as a set of specifications, such as Hypertext
Transfer Protocol (HTTP) request messages, along with a
definition of the structure of response messages, usually in an
Extensible Markup Language (XML) or JavaScript Object
Notation (JSON) format.

You Build
• You can build apps on your own using https://ibuildapp.com/
• Google also provides similar opportunities
https://developers.google.com/appmaker
• You can even turn your Mac into a server
https://www.apple.com/macos/server/

Application Servers – Most Commonly Used
• JBoss [open source]
• Glassfish [Oracle]
• Weblogic [Oracle]
• Websphere [IBM]

App Stores [Mobile]
• Google Play Store
• Apple App Store
• Samsung Galaxy Apps
• LG SmartWorld
• Huawei App Store
• Sony Apps
• Amazon Appstore
• Aptoide
• F-Droid
• GetJar
• ACMarket
• SlideME
• Uptodown Market
• Itch.io
• Cydia
• neXva

App Store vs. Application Server
• App Store is a distribution tool to promote apps for download and/or
purchase
• Application server is a tool for storing applications

• Download WinSCP from https://winscp.net/eng/download.php
• Follow instructions on Blackboard
• Take a screenshot:
• On a Mac – press Shift, Command, and 3 all at once
• On Windows – press CTRL and PRT SC at the same time
• Edit the screenshot to only show your FTP process

Web Server and Application Server
Technologies: FTP
BITM 3730

Basics
• The most common FTP port is port 21
• The main connection in FTP is either referred to as the Control or
Command Connection
• SFTP stands for Secure File Transfer Protocol
• SFTP is secure because it runs over SSH (Secure Shell) protocol
• FTP connects the server and client

FTP
• FTP is a way to transfer files online.
• Browsers use a protocol called HTTP.
• IMAP and POP, for instance, are two protocols that email clients use
to send and receive messages.
• XMPP is a protocol used to send and receive instant messages.
• FTP is another such protocol.

FTP Connects
• An FTP server offers access to a directory, with sub-directories.
• Users connect to these servers with an FTP client, a piece of software that
lets you download files from the server, as well as upload files to it.

FTP Channels
• FTP uses two basic channels to operate:
• The command channel carries information about the task
itself — what files are to be accessed, if commands are
registering, etc.
• The data channel then transfers the actual file data between
devices.

Error and Status Codes – 6 Levels
• 1xx - The requested action is being initiated, expect another reply before proceeding
with a new command.
• 2xx - The requested action has been successfully completed.
• 3xx - The command has been accepted, but the requested action is on hold, pending
receipt of further information.
• 4xx - The command was not accepted and the requested action did not take place,
but the error condition is temporary and the action may be requested again.
• 5xx - The command was not accepted and the requested action did not take place.
• 10xxx - Winsock error codes

1xx Codes
110 Restart marker reply.
120 Service ready in nn minutes.
125 Data Connection already open, transfer starting.
150 File status okay, about to open data connection.

2xx Codes
200 Command okay.
202 Command not implemented, superfluous at this site.
211 System status, or system help reply.
212 Directory status.
213 File status.
214 Help message.
215 NAME system type. (Where NAME is an official system name from the list in the
Assigned Numbers document.)
220 Service ready for new user.
221 Service closing control connection. Logged out if appropriate.
225 Data connection open; no transfer in progress
226 Closing data connection. Requested file action successful (for example - file transfer
or file abort).
227 Entering Passive Mode.
230 User logged in, proceed.
250 Requested file action okay, completed.
257 "PATHNAME" created.

3xx Codes
331 User name okay, need password.
332 Need account for login.
350 Requested file action pending further information.

4xx Codes
421 Service not available, closing control connection. This may be a reply to any
command if the service knows it must shut down.
425 Can't open data connection. Try changing from PASV to PORT mode.
426 Connection closed; transfer aborted.
450 Requested file action not taken. File unavailable (e.g., file busy).
451 Requested action aborted: local error in processing.
452 Requested action not taken. Insufficient storage space in system.

5xx Codes
501 Syntax error in parameters or arguments.
502 Command not implemented.
503 Bad sequence of commands.
504 Command not implemented for that parameter.
530 Not logged in. Your password is being rejected, contact the server administrator.
532 Need account for storing files.
550 Requested action not taken. File unavailable (e.g., file not found, no
access). Contact the server administrator.
552 Requested file action aborted. Exceeded storage allocation (for current directory
or data set). Contact the server administrator.
553 Requested action not taken. File name not allowed. Try changing the file name,
or getting rid of spaces in the file name.

10xxx Codes
10054 Connection Reset by Peer - The connection was forcibly closed by the remote
host.
10060 Can't connect to remote server (Generally a time-out error). Try switching from
PASV to PORT mode.
10061 Can't connect to remote server. The connection is actively refused by the
server. Try switching from PASV to PORT mode.
10066 Directory not empty. The server will not delete this directory while there are
files/folders in it.
10068 Too many users, server is full. Contact the server administrator.

FTP Data Types
• ASCII (TYPE A): Used for text. Data is converted, if needed, from the sending host's
character representation to "8-bit ASCII" before transmission, and (again, if necessary) to
the receiving host's character representation. As a consequence, this mode is inappropriate
for files that contain data other than plain text.
• Image (TYPE I, commonly called Binary mode): The sending machine sends each file
byte by byte, and the recipient stores the bytestream as it receives it. (Image mode support
has been recommended for all implementations of FTP).
• EBCDIC (TYPE E): Used for plain text between hosts using the EBCDIC character set.
• Local (TYPE L n): Designed to support file transfer between machines which do not use
8-bit bytes

FTP File Structures
• File organization is specified using the STRU command:
• F or FILE structure (stream-oriented). Files are viewed as an arbitrary
sequence of bytes, characters or words.
• R or RECORD structure (record-oriented). Files are viewed as divided into
records.
• P or PAGE structure (page-oriented). Files are divided into pages.

FTP Data Transfer Modes
• Data transfer can be done in any of three modes:
• Stream mode (MODE S): Data is sent as a continuous stream, relieving FTP from doing any
processing. Rather, all processing is left up to TCP. No End-of-file indicator is needed, unless the
data is divided into records.
• Block mode (MODE B): Designed primarily for transferring record-oriented files (STRU R),
although can also be used to transfer stream-oriented (STRU F) text files. FTP puts each record
(or line) of data into several blocks (block header, byte count, and data field) and then passes it
on to TCP.
• Compressed mode (MODE C): Extends MODE B with data compression using run-length
encoding.
• Most contemporary FTP clients and servers do not implement MODE B or MODE C

FTP Login
• FTP login uses normal username and password scheme for granting access.The username is
sent to the server using the USER command, and the password is sent using the PASS
command. This sequence is unencrypted "on the wire", so may be vulnerable to a network
sniffing attack.
Anonymous FTP:
• A host that provides an FTP service may provide anonymous FTP access. Users typically log
into the service with an 'anonymous' (lower-case and case-sensitive in some FTP servers)
account when prompted for user name. Although users are commonly asked to send their
email address instead of a password, no verification is actually performed on the supplied
data. Many FTP hosts whose purpose is to provide software updates will allow anonymous
logins.

FTP Security Issues
• Brute-force attack
• FTP bounce attack
• Packet capture
• Port stealing (guessing the next open port and usurping a legitimate connection)
• Spoofing attack
• Username enumeration
• DoS or DDoS

Other FTP Options
• FTP over SSH is the practice of tunneling a normal FTP session over a Secure Shell connection.
• Explicit FTPS is an extension to the FTP standard that allows clients to request FTP sessions to
be encrypted.
• The SSH file transfer protocol (chronologically the second of the two protocols abbreviated
SFTP) transfers files and has a similar command set for users but uses the Secure Shell protocol
(SSH) to transfer files.
• Trivial File Transfer Protocol (TFTP) is a simple, lock-step FTP that allows a client to get a file
from or put a file onto a remote host.
• Simple File Transfer Protocol (the first protocol abbreviated SFTP), proposed as an (unsecured)
file transfer protocol with a level of complexity intermediate between TFTP and FTP.

Top FTP Tools
• FileZilla [now said to include viruses upon download in the form of adware
and malware, so avoid]
• WinSCP
• Using Windows Explorer [i.e. folder on your computer]

File eXchange Protocol
• File eXchange Protocol (FXP or FXSP) is a method of data transfer which
uses FTP to transfer data from one remote server to another (inter-server)
without routing this data through the client's connection.
• Enabling FXP support can make a server vulnerable to an exploit known as
FTP bounce. As a result of this, FTP server software often has FXP disabled
by default. Some sites restrict IP addresses to trusted sites to limit this risk.

File Service Protocol
• File Service Protocol (FSP) is a UDP-based replacement for the File Transfer
Protocol, designed for anonymous access with lower hardware and network
requirements than FTP.
• As the FSP protocol is not officially recognized by IANA, it has no official
port number.

FTP Port Numbers
• 20 FTP -- Data
• 21 FTP -- Control
• 22 SSH Remote Login Protocol
• 23 Telnet
• 25 Simple Mail Transfer Protocol (SMTP)
• 69 Trivial File Transfer Protocol (TFTP)
• 80 HTTP
• 115 Simple File Transfer Protocol (SFTP)

• Click on public_html to upload your files
• Select all of your files prior to Assignment 10 and select the Upload
button
• Follow the prompts
• May take time to transfer a copy from your desktop [or whereever you
have these files saved] to the pirate.shu.edu server

Model/View/Controller
programming construct
BITM 3730

Model/View/Controller
Here is a visual of the relationship between
Model and View &
Model and Controller

Model/View/Controller Cont.
A view is seen by user and the user uses the controller – this is
the role a user plays
The view is considered to be output of data for user to view
Commands are what the controller sends to the model and view

MVC in Simpler Terms
• Model – consists of the application’s model or business model. For example,
in an accounting system – account, invoice, cost center
• View – output of the data for the user to view
• Controller – brings together the model and view by sending commands to
both

Java MVC Example - Students
• Step 1
• Create Model.
• Student.java

Student.java
public class Student {
private String rollNo;
private String name;
public String getRollNo() {
return rollNo;
}
public void setRollNo(String rollNo) {
this.rollNo = rollNo;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}

• Step 2
• Create View.
• StudentView.java

StudentView.java
public class StudentView {
public void printStudentDetails(String studentName, String studentRollNo){
System.out.println("Student: ");
System.out.println("Name: " + studentName);
System.out.println("Roll No: " + studentRollNo);
}
}

• Step 3
• Create Controller.
• StudentController.java

StudentController.java
public class StudentController {
private Student model;
private StudentView view;
public StudentController(Student model, StudentView view){
this.model = model;
this.view = view;
}
public void setStudentName(String name){
model.setName(name);
}
public String getStudentName(){
return model.getName();
}
public void setStudentRollNo(String rollNo){
model.setRollNo(rollNo);
}
public String getStudentRollNo(){
return model.getRollNo();
}
public void updateView(){
view.printStudentDetails(model.getName(), model.getRollNo());
}
}

• Step 4
• Use the StudentController methods to demonstrate
MVC design pattern usage.
• MVCPatternDemo.java

MVCPatternDemo.java
public class MVCPatternDemo {
public static void main(String[] args) {
//fetch student record based on his roll no from the database
Student model = retriveStudentFromDatabase();
//Create a view : to write student details on console
StudentView view = new StudentView();
StudentController controller = new StudentController(model,
view);
controller.updateView();
//update model data
controller.setStudentName("John");
controller.updateView();
}
private static Student retriveStudentFromDatabase(){
Student student = new Student();
student.setName("Robert");
student.setRollNo("10");
return student;
}
}

• Step 5
• Verify the output.
• Student:
• Name: Robert
• Roll No: 10
• Student:
• Name: John
• Roll No: 10

Pretty Boring Right?
• Next week you will see MVC can be used with JSP (Java Server Pages) to do
things behind the scenes
• You have previously seen with JavaScript that the internet (a web server) can
interpret the Java programming language

Building Assignment 11 Hit Submit

Building Assignment 11 Code
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My Form</title>
</head>
<body>
</body>
</html>

Building Assignment 11 Code
<form method="POST" action="--WEBBOT-SELF--">

<p>Name: <input type="text" name="T1" size="20"></p>
<p>Address: <input type="text" name="T2" size="20"></p>
<p>City: <input type="text" name="T3" size="20"></p>
<p>State: <input type="text" name="T4" size="20"></p>
<p>Zip Code: <input type="text" name="T5" size="20"></p>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>

Why No One Does It That Way?
• Basic, static HTML form – limited in functionality
• Does not work unless you create a csv file and put it somewhere on your
server
• Not visually appealing

Building Project 4 Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact Form</title>
</head>
<body id="top">
<div class="wrapper">
<div id="container">
<h2><span>Contact Form</span></h2>
<p>

Building Project 4 Code
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- HIDE script
var validForm
validForm=0
function confirmReset(myForm) {
var resetForm = confirm("Are you sure you want to Clear all the Information Entered?");
if (resetForm == true)
return true;
return false;
}

HTML and XHTML Essentials

Recomendados

Recomendados

Más contenido relacionado

Similar a HTML and XHTML Essentials

Similar a HTML and XHTML Essentials (20)

Más de MattMarino13

Más de MattMarino13 (20)

Último

Último (20)

HTML and XHTML Essentials

Notas del editor