Internet Programming
Internet Programming
COMP SCI 331
1
Introductions
My name is …
 How to find me
 Course Policies
 Background
 Your turn

Internet Programming
2
Mac 122 Policies







The room will be locked but students who take a class in that
room will have card access during the following times as long as
no class is in session:
– 1. Monday through Friday. 7:00 AM - 9:30 PM.
– 2. Saturday and Sunday 9:00 AM through 4:30 PM
There is no access during other hours.
The computers are to be used for course work only.
Students are NOT to use the instructor workstations nor the
projection equipment. We CAN check who logged into them.
No software is to be installed on any of the machines. Installing
software will result in your access being revoked. Be aware, that
it is easy to find out who was logged into a machine when
unauthorized software was installed.
No food or drink is allowed in the room at any time.
No one who does not have card access should be let into the
room.
Internet Programming
3
Internet Physical Layout
Internet Programming
4
The First Version of the Internet
Internet Programming
5
Internet History
ARPA = DoD Advanced Research Projects
Agency funds ARPANet. FTP and e-mail only
 First node: UCLA in 1969
 1971: 26 computers form the ARPAnet
 1982: TCP/IP becomes the standard protocol.
First proposed in 1974
 1986: National Science Foundation (NSF)
sponsors the NSFnet that replaces ARPANet
 1990: commercial companies are allowed to join

Internet Programming
6
Internet Protocols
Internet Programming
7
TCP/IP Protocol

IP Header Structure
Internet Programming
8
TCP/IP Protocol

TCP Header Structure
Internet Programming
9
Domain Name Server (DNS)
Internet Programming
10
Some Domain Name Suffixes
Internet Programming
11
Internet and Local Area Networks

LAN organization
Internet Programming
12
Internet and Local Area Networks

Router provides TCP/IP connection to LAN
Internet Programming
13
Multiple Accounts on a Server
Internet Programming
14
Multiple Domains on a Server
Internet Programming
15
Internet Next Generation
Current version of TCP/IP is IPv4
 More than 100 countries are on the Internet
 Over 100 million nodes
 Internet address space is running out

– There are assigned but underused domains
IETF (Internet Engineering Task Force) has
issued the new spec (August 10, 1998, Toronto)
 IPv6 also known as IPng

Internet Programming
16
IPv4 vs. IPv6
IPv6 will provide

Expanded Routing and Addressing Capabilities
– increases the IP address size from 32 bits to 128 bits

A new type of address called a "anycast address“
– allows nodes to control the path which their traffic
flows

New Header Format
– Although IPng addresses are four times longer than the
IPv4 addresses, the IPng header is only twice the size of
the IPv4 header
– some IPv4 fields are dropped or made optional
Internet Programming
17
IPv6 Additional Capabilities

Improved Support for Options
– more efficient forwarding
– less stringent limits on the length of options
– greater flexibility for introducing new options

Quality-of-Service Capabilities
– enable the labeling of packets belonging to particular
traffic "flows"

Authentication and Privacy Capabilities
– extensions to provide support for authentication, data
integrity and confidentiality
Internet Programming
18
IP Addresses and Routing

Experiment: look at Internet Addresses
Internet Programming
19
IP Addresses and Routing

Experiment: trace the route of a package
Internet Programming
20
Web Design Guidelines
Internet Programming
21
Web Design Guidelines
Don’t make users think
 Don’t squander users’ patience
 Focus users’ attention
 Expose features
 Communicate effectively
 Use white space
 Use conventions
 Test early and often

Internet Programming
22
Usability Commandments
You don’t use pop-ups.
 You don’t change users’ window size.
 You don’t use too small font sizes.
 You be concise.

– Long passages are harder to read.
Internet Programming
23
Usability Commandments

You don’t have unclear link text.
– Links have to be precise and lead to the
destination they describe. Ambiguous or hidden
links should be avoided.
You don’t have dead links.
 You have at most one animation per page.
 You make it easy to contact you.

Internet Programming
24
HTML and XHTML
Internet Programming
25
HTML


Hypertext Mark-up Language – formatting
specification for hyperdocuments
Current version DOCTYPE header:
<!DOCTYPE HTML PUBLIC =”-//w3c/DTD XHTML 1.0 Strict//EN
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

Based on tags
– Block tags:
– Inline tags:


<tag> …. </tag>
<tag/>
Comments: not rendered but carry information
<!-- …comment text here …-->
Internet Programming
26
HTML Versions





Hypertext Mark-up Language – formatting specification
for hyperdocuments
HTML has gone through several versions
The last one is HTML 4.0 but this HTML standards are
being replaced by XHMTL standards
XHMTL is HTML that confirms with XML syntax rules
DHTML is a reference to HTML with interactive
(dynamic) content
– Most often created by JavaScript
– There are other client-side scripting languages
Internet Programming
27
The HTML Source Document




All web pages are entirely plain-text
documents
Special formatting is imparted through the
use of tags
HTML files should end in .htm and not
contain any spaces in the file name
You can open a HTML file by dragging the
file icon to an open browser window
Internet Programming
28
Writing and Indenting HTML Code
Any text editor can be used to create an
HMTL document – even Notepad
We will use MS Visual Web Developer


–
–


Provides useful syntax highlighting and help
MS Expression Web, NVU and many other
Web editors exist
Use lower case letters for your tags
Indenting your code makes nesting tags
easier
Internet Programming
29
Block-level vs. Inline Elements
Block-level elements are designed to define
a complete section of text

–
For example the header, <p>, and <body> tags
are block elements
Inline elements affect a small text area

–
–
–
Can be as small as a single character
More often a word, phrase or sentence
The <em>, <strong>, and <b> tags are inline
elements
Internet Programming
30
HTML Document Skeleton
<html>
<head>
The header: contains information about the
document, not content
</head>
<body>
The body: contains the contents of the
document
</body>
</html>
Internet Programming
31
XHTML
XHTML was introduced to supercede HTML
and has stricter rules
Standardized version of HTML by the W3C
Based on XML



–
–


XML is not a formatting mark-up language
Its function is to define data formats and store data
XML has much stricter syntax rules than HTML
XHTML is HTML that complies with strict
XML syntax rules
Internet Programming
32
XHTML Document Skeleton
<?xml version=1.0:?>
<!DOCTYPE HTML PUBLIC =”-//w3c/DTD . . . >
<html xmlns = “http://www.w3.org/1999/xhtml”>
<head>
The header: contains information about the
document, not content
</head>
<body>
The body: contains the contents of the
document
</body>
</html>
Internet Programming
33
XHTML Syntax Rules
Documents start with an XML declaration
 The html tag has an XML namespace
specification
 Tags are case sensitive
 Attribute values must always be quoted
 Documents must have a root element
 Elements must be properly nested

Internet Programming
34
The XHTML Source Document
XHTML documents require an XML
declaration at the head of the document

–
Identifies version of XML
A DOCTYPE directive provided a Document
Type Definition (DTD)

–
Specifies the type of document as XHTML
The HTML tag includes and xmlns attribute

–
–
Defines the XML namespace
Needs to distinguish identically named tags
Internet Programming
35
Nesting XML Tags

The following tags are properly nested:
<root>
<child>
<subchild>
...
</subchild>
</child>
</root>
Internet Programming
36
Improper Nesting

The following nesting of tags is wrong:
<root>
<child>
<subchild>
...
</child>
</subchild>
</root>
Internet Programming
37
The <meta> Element



Meta tags add information about a web
page that is invisible to web browsers
The tags are read by search engines and
indexers
Meta tags are often used to identify
keywords and descriptions
Internet Programming
38
Paragraphs: the <p> Element
Browsers ignore consecutive whitespace
characters
The <p> element is used to define a new
paragraph
Good HTML design requires that you use the
closing </p> tag, however no browser
requires it
Browsers ignore any tag that is not
understood




–
if a tag is not performing the function you want, check for
misspelling
Internet Programming
39
Line Breaks: the <br /> Element



The <br /> tag causes an immediate line
break on the page
The <br /> has no closing tag, so the
XHTML tag has a trailing forward slash
It is also correct to write a
<br> </br>
pair
Internet Programming
40
Headers




Headers are content tags that specify a
font size
They should be used only for titles and
section headers
<h1> is the largest, <h6> the smallest
Proper use of header tags allows a table
of contents to be retrieved by just
displaying the headers
Internet Programming
41
HTML Container Tags
<b> … </b>
<i> … </i>
<strong> … </strong>
<em> … </em>
<strike> … </strike>
<big> … </big>
<small> … </small>
<u> … </u>
<tt> … </tt>
_…
^…
Boldface text
Italic text
Strong text
Emphasized text
Strikethrough text
Increase font size
Decrease font size
Underlined text
Teletype = monospace
Subscript
42
Superscript
HTML Container Tags
<center> … </center>
<p> … </p>
<h1> … </h1>
<h2> … </h2>
<h3> … </h3>
<h4> … </h4>
<h5> … </h5>
<h6> … </h6>
<pre> … </pre>
<blockquote> … <blockquote>
Align as center
Paragraph (blank line)
Header 1
(Largest)
Header 2
Header 3
Header 4
Header 5
Header 6 (Smallest)
Preserve formatting
Indented block
43
HTML Inline Tags
<br>, <br />
<hr>, <hr />
Line break
Horizontal rule (line)
Special Characters
(space)
&
<
&nbsp;
&amp;
&lt;
Non-breaking space
Ampersand
Less than
>
“
‘
&gt;
&quot;
&apos;
Greater than
Double quote
Apostrophe (single quote)
44
Tag Attributes
<hr>
Attribute
width
size
align
Values
%, pixels
pixels
left, right, center
noshade
Default
width=“100%”
size=“2”
align=“center”
shaded markup
<font> … </font> - DEPRECATED!
Attribute
size
color
face
Values
1 through 7
named or hex color
font family
Default
3, about 10 points
black, “#000000”
45
browser dependent
Tag Attributes
<body> … </body>
Attribute
bgcolor
text
link
Values
named or hex color
named or hex color
named or hex color
Default
white, “#FFFFFF”
black, “#000000”
browser dependent
alink
vlink
background
named or hex color
named or hex color
image source
browser dependent
browser dependent
none
<p> … </p>
Attribute
align
Values
left, right, center
Default
align=“center”46
Anchors and Links
<a> … </a>
Attribute
href
Values
absolute URL
relative URL
fragment identifier
Default
none
name
textual name
none
47
Site Organization
No planned structure
Internet Programming
48
Site Organization
Linear linking structure
Internet Programming
49
Site Organization
Hierarchical structure
Internet Programming
50
Site Organization
Pages
Links
Internet Programming
51
Site Organization
Pages
Links
Internet Programming
52
<img>
Attribute
src
align
hspace
vspace
border
alt
ismap
usemap
Images
Values
absolute URL
relative URL
left, right, center
Default
none
left
top, middle, bottom
pixels
pixels
pixels
“text string”
bottom
browser dependent
browser dependent
0
no alternate text
53
-
“#text string”
Lists
<ul> … </ul>
Attribute
type
Values
circle, disc, square
Default
disc
<ol> … </ol>
Attribute
type
Values
1 (integers)
i, I (lower/upper Roman)
a, A (lower/upper letter)
Default
align=“center”
<li> … </li>
Used to create list items with the <ul> and
54
<ol> tags
Tables
<table> … </table>
Attribute
align
bgcolor
border
Values
left, right, center
named or hex color
pixels
Default
left
web inherited
0
cellpading
cellspacing
height
width
pixels
pixels
pixels, percent
pixels, percent
1
2
minimum needed
minimum needed
55
Table Row Attributes
<tr> … </tr>
Attribute
align
valign
bgcolor
Values
left, right, center
top, middle, bottom
named or hex color
Default
left
middle
web inherited
56
Table Cell and Header
<td> … </td> and <th> … </th>
Attribute
align
valign
background
Values
left, right, center
top, middle, bottom
URL or image
Default
left
middle
-
bgcolor
named or hex color
web inherited
height
%, percent
cell contents size
width
%, percent
cell contents size
colspan
integer
0
rowspan
integer
0
57
Frameset and Frame
<!-- this is doc1.html -->
<html>
<head>
</head>
<frameset>
<frame src=”doc2.html”>
<frame src=”doc3.html”>
</frameset>
</html>
Internet Programming
58
Frames
<frameset> … </frameset>
Attribute
cols
rows
border
Values
pixels, percent
pixels, percent
pixels
Default
browser dependent
bordercolor
named or hex color
browser dependent
Values
name of frame
_self, _parent
Default
_self
<a> … </a>
Attribute
target
59
Frame Attributes
<frame> … </frame>
Attribute
src
name
marginheight
Values
URL
character string
pixels
Default
browser dependent
marginwidth
pixels
browser dependent
scrolling
yes, no, auto
auto
60
HTML Forms
Internet Programming
61
HTML Forms
Forms are used in HTML to create a
Graphical User Interface (GUI)
 Forms contain visual controls
 Visual controls allow the user to interact
with the page
 Visual controls are a convenient way to
perform I/O
 Forms make Web pages interactive

Intro to Computing and Internet
62
Buttons and Text Boxes
Buttons and Text Boxes are the simplest
visual controls
 Both are created within a Form
 Both are types of <input … /> controls
 Text Boxes are created by specifying type =
“text”
 Buttons are created by specifying
type=“button”

Intro to Computing and Internet
63
Buttons and Text Boxes
The value attribute assigns
a default value to a textbox
 A caption to a button
 A textbox returns a string as the result of
what the user typed in
 A button can activate a click event handler
 The event handler’s name is specified in the
onClick property of the button

Intro to Computing and Internet
64
Checkboxes
Checkboxes are used to indicate a yes/no
condition
 Boxes can be read by reading the boolean
“checked” property of the checkbox
 The property is true if checked, false if not
checked
 Multiple checkboxes can be checked
simultaneously

Intro to Computing and Internet
65
Radio Buttons
Radio buttons are designed to allow a single
selection out of a group of options
 Selecting one button causes any others to be
deselected
 Creating a radio button group from the
individual <input> tags require that we give
each radio button the identical name; the
browser then assumes they are part of the
same group

Intro to Computing and Internet
66
Cascading Style Sheets
Internet Programming
67
The problem with HTML
HTML was originally intended to describe the
content of a document
 Page authors didn’t have to describe the layout-the browser would take care of that
 This is a good engineering approach, but it didn’t
satisfy advertisers and “artists”

– Even people that actually had something to say wanted
more control over the appearance of their web pages
 As a result, HTML acquired more and more tags to
control appearance
– Content and appearance became more intertwined
– Different browsers displayed things differently, which is
a real problem when appearance is important
Internet Programming
68
Cascading Style Sheets
A Cascading Style Sheet (CSS) describes
the appearance of an HTML page in a
separate document
CSS has the following advantages:

– It lets you separate content from presentation
– It lets you define the appearance and layout of
all the pages in your web site in a single place
– It can be used for both HTML and XML pages
CSS has the following disadvantage:
– Most browsers don’t support it very well
Internet Programming
69
CSS Skeleton Page
<html>
<head>
<title>Practice CSS</title>
<style type=“text/css”>
body { background-color : red}
h1
{ color : “white”; font-size : 20px}
</style>
</head>
<body>
<h1>Practice CSS</h1>
</body>
</html>
Internet Programming
70
CSS syntax
CSS syntax is very simple--it’s just a file
containing a list of selectors (to choose tags) and
descriptors (to tell what to do with them):
– Example: h1 {color: green; font-family: Verdana}
says that h1 (HTML heading level 1) tags should be
in the Verdana font and colored green
A CSS file is just a list of these
selector/descriptor pairs
– Selectors may be simple HTML tags or XML tags,
but CSS also defines some ways to combine tags
– Descriptors are defined in CSS itself, there is a long
list of them
Internet Programming
71
CSS syntax
 The general syntax is:
selector {property: value}
– or
selector, ..., selector {
property: value;
...
property: value
}
– where
» selector is the tag to be affected (the selector is casesensitive if and only if the document language is casesensitive)
» property and value describe the appearance of that tag
» Spaces after colons and semicolons are optional
» A semicolon must be used between property:value pairs, but
72
a semicolon after the last pair is optional
CSS Examples




/* This is a comment */
h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st
available font */
p, table, li, address {
/* apply to all these tags */
font-family: "Courier New"; /* quote values containing
spaces */
margin-left: 15pt;
/* specify indentation */
}
p, li, th, td {font-size: 80%;} /* 80% of size in containing
element */
Internet Programming
73
CSS Examples

th {background-color:#FAEBD7}

body { background-color: #ffffff;}
h1,h2,h3,hr {color:saddlebrown;}
a:link {color:darkred}
a:visited {color:darkred}
a:active {color:red}
a:hover {color:red}





Internet Programming
/* colors can be
specified in hex */
/* adds to the above
/* an unvisited link */
/* a visited link */
/* link being visited */
/* mouse hovers over */
74
More about selectors
 An HTML tag can be used as a simple element selector:
body { background-color: #ffffff }
 You can use multiple selectors:
em, i {color: red}
You can repeat selectors:
h1, h2, h3 {font-family: Verdana; color: red}
h1, h3 {font-weight: bold; color: pink}
• When values disagree, the last one overrides any earlier ones
 The universal selector * applies to any and all elements:
* {color: blue}
• When values disagree, more specific selectors override general
ones (so em elements would still be red)
Internet Programming
75
Example of overriding
Internet Programming
76
More about selectors
A descendant selector chooses a tag with a specific
ancestor:
– p code { color: brown }
– selects a code if it is somewhere inside a paragraph
 A child selector > chooses a tag with a specific parent:
h3 > em { font-weight: bold }
selects an em only if its immediate parent is h3
 An adjacent selector chooses an element that
immediately follows another:
b + i { font-size: 8pt }
Example: <b>I'm bold and</b> <i>I'm italic</i>
Result will look something like: I'm bold and I'm italic
77
More about selectors
A simple attribute selector allows you to choose
elements that have a given attribute, regardless of
its value:
– Syntax: element[attribute] { ... }
– Example: table[border] { ... }
An attribute value selector allows you to choose
elements that have a given attribute with a given
value:
– Syntax: element[attribute="value"] { ... }
– Example: table[border="0"] { ... }
Internet Programming
78
The class attribute
The class attribute allows you to have different
styles for the same element
– In the style sheet:
p.important {font-size: 24pt; color: red}
p.fineprint {font-size: 8pt}
– In the HTML:
<p class="important">The end is nigh!</p>
<p class="fineprint">Offer ends 1/1/97.</p>
To define a selector that applies to any element
with that class omit the tag name (keep the dot):
.fineprint {font-size: 8pt}
Internet Programming
79
The id attribute
The id attribute is defined like the class attribute,
but uses # instead of .
– In the style sheet:
p#important {font-style: italic}
# important {font-style: italic}
– In the HTML:
<p id="important">

or
class and id can both be used, and do not need to
have different names:
<p class="important" id="important">
Internet Programming
80
div and span
div and span are HTML elements whose only
purpose is to hold CSS information
 div ensures there is a line break before and after
(so it’s like a paragraph); span does not
Example:

– CSS: div {background-color: #66FFFF}
span.color {color: red}
– HTML: <div>This div is treated like a
paragraph, but <span class="color">this
span</span> is not.</div>
Internet Programming
81
Using style sheets
There are three ways of using CSS:
– External style sheet
» This is the most powerful
» Applies to both HTML and XML
» All of CSS can be used
– Embedded style sheet
» Applies to HTML, not to XML
» All of CSS can be used
– Inline styles
» Applies to HTML, not to XML
» Limited form of CSS syntax
Internet Programming
82
External style sheets
 In
HTML, within the <head> element:
<link REL="STYLESHEET"
TYPE="text/css" HREF="Style Sheet
URL">
 As
a PI in the prologue of an XML
document:
<?xml-stylesheet href="Style Sheet
URL" type="text/css"?>
 Note: "text/css"
is the MIME type
Internet Programming
83
Embedded style sheets
In HTML, within the <head> element:
<style TYPE="text/css">
<!-CSS Style Sheet
-->
</style>
 Note: Embedding the style sheet within a
comment is a sneaky way of hiding it from
older browsers that don’t understand CSS

Internet Programming
84
Inline style sheets
The STYLE attribute can be added to any HTML
element:
<html-tag STYLE="property: value">
or
<html-tag STYLE="property: value;
property: value; ...; property: value">
Advantage:
– Useful if you only want a small amount of markup
Disadvantages:
– Mixes display information into HTML
– Clutters up HTML code
– Can’t use full range of CSS features
Internet Programming
85
Cascading order
 Styles will be applied to HTML in the
following order:
1.
2.
3.
4.

Browser default
External style sheet
Internal style sheet (inside the <head> tag)
Inline style (inside other elements, outermost
first)
When styles conflict, the “nearest” (most
recently applied) style wins
Internet Programming
86
Example of cascading order
External style sheet:h3 { color: red;
text-align: left;
font-size: 8pt
}
 Internal style sheet: h3 { text-align: right;
font-size: 20pt
}
 Resultant attributes: color: red;
text-align: right;
font-size:
20pt
Internet Programming

87
CSS Font Properties
font-family examples
Type
serif
sans-serif
cursive
Name
Times New Roman
Ariel, Helvetica
Sanvico, Old English Text MT
monospace
Courier, Prestige
fantasy
Critter
Names with spaces should have single quotes: ‘Times New Roman’
88
Some font properties and values
 font-family:
– inherit (same as parent)
– Verdana, "Courier New", ... (if the font is on the client
computer)
– serif | sans-serif | cursive | fantasy | monospace
(Generic: your browser decides which font to use)
 font-size:
– inherit | smaller | larger | xx-small | x-small | small |
medium | large | x-large | xx-large | 12pt
 font-weight:
– normal | bold |bolder | lighter | 100 | 200 | ... | 700
 font-style:
– normal | italic | oblique
89
Shorthand properties
Often, many properties can be combined:
h2 { font-weight: bold; font-variant:
small-caps; font-size: 12pt; line-height:
14pt; font-family: sans-serif }
can be written as:
h2 { font: bold small-caps 12pt/14pt sansserif }
Internet Programming
90
Colors and lengths
color: and background-color:
– aqua | black | blue | fuchsia | gray | green | lime |
maroon | navy | olive | purple | red | silver | teal |
white | #FF0000 | #F00 | rgb(255, 0, 0) | Additional
browser-specific names (not recommended)
These are used in measurements:
– em, ex, px, %
» font size, x-height, pixels, percent of inherited size
– in, cm, mm, pt, pc
» inches, centimeters, millimeters, points (1/72 of an inch),
picas (1 pica = 12 points), relative to the inherited value
Internet Programming
91
Some text properties and values
text-align:
– left | right | center | justify
text-decoration:
– none | underline | overline | line-through
text-transform:
– none | capitalize | uppercase | lowercase
text-indent
– length | 10% (indents the first line of text)
white-space:
– normal | pre | nowrap
Internet Programming
92
Pseudo-classes
Pseudo-classes are elements whose state (and
appearance) may change over time
 Syntax: element:pseudo-class {...}

– :link
» a link which has not been visited
– :visited
» a link which has been visited
– :active
» a link which is currently being clicked
– :hover
» a link which the mouse is over (but not clicked)


Pseudo-classes are allowed anywhere in CSS selectors
Note, however, that XML doesn’t really support
Internet Programming
93
hyperlinks yet
Choosing good names
 CSS is designed to separate content from style
– Therefore, names that will be used in HTML or (especially) in
XML should describe content, not style
 Example:
– Suppose you define span.huge {font-size: 36pt} and you use
<span class="huge"> throughout a large number of documents
– Now you discover your don’t like this, so you change the CSS to
be span.huge {font-color: red}
– Your name is inappropriate; do you change all your documents?
– If you had started with span.important {font-size: 36pt}, the
documents would look better
Internet Programming
94
CSS units
 For many of the remaining CSS values, we will need to
be able to specify size measurements
– These are used to specify sizes:
» em width of the letter ‘m’
» ex height of the letter ‘x’
» px pixels (usually 72 per inch, but depends on monitor)
»%
percent of inherited size
– These are also used to specify sizes, but don’t really make
sense unless you know the screen resolution:
» in inches
» cm centimeters
» mm millimeters
» pt points (72pt = 1in)
95
» pc picas (1pc = 12pt)
Padding
Padding is the extra space around an element, but
inside the border
To set the padding, use any or all of:

–
–
–
–
–
padding-top: size
padding-bottom: size
padding-left: size
padding-right: size
padding: size
to set all four sides at once
size is given in the units described earlier
 Example: sidebar {padding: 1em; padding-bottom: 5mm}

Internet Programming
96
Borders
You can set border attributes with any or all of: bordertop:, border-bottom:, border-left:, border-right:,
and border: (all at once)
 The attributes are:

– The thickness of the border: thin, medium (default), thick, or a
specific size (like 3px)
– The style of the border: none, dotted, dashed, solid, double,
groove, ridge, inset, or outset
– The color of the border: one of the 16 predefined color names,
or a hex value with #rrggbb or rgb(r, g, b) or rgb(r%, g%, b%)


Example: section {border-top: thin solid blue;}
Note: the special styles (such as groove) are not as cool
as they sound
Internet Programming
97
Margins
Margins are the extra space outside the border
Setting margins is analogous to setting padding
To set the margins, use any or all of:
–
–
–
–
–
margin-top: size
margin-bottom: size
margin-left: size
margin-right: size
margin: size
to set all four sides at once
Internet Programming
98
Sizing elements
Every element has a size and a natural position
in which it would be displayed
You can set the height and width of
display:block elements with:
– height: size
– width: size
You cannot set the height and width of inline
elements (but you can set left and right margins)
In HTML, you can set the height and width of
images and tables Internet
(img
and table tags)
Programming
99
position:absolute; left: 0in; top: 0in
position:absolute; right: 0in; top: 0in
Setting absolute position
 To move an element to an absolute position on the
page
– position: absolute (this is required!) and also one or
more of
– left: size or right: size
– top: size or bottom: size
Internet Programming
position:absolute; left: 0in; bottom: 0in
100
position:absolute; right: 0in; bottom: 0in
Setting Absolute Position
 Rules of absolute positioning:
– size can be positive or negative
– top: size puts an element’s top size units from the page top
– bottom: size puts an element’s bottom size units from the
page bottom
– left: size puts an element’s left side size units from the left
edge of the page
– right: size puts an element’s right side size units from the
right edge of the page
– Changing an element’s absolute position removes it from the
natural flow, so other elements fill in the gap
– You need to be careful not to overlap other elements
Internet Programming
101
Setting Relative Position
 To move an element relative to its natural position,
use
– position: relative (this is required!) and also one or
more of
– left: size or right: size
– top: size or bottom: size
Internet Programming
102
Setting Relative Position
 Rules of relative positioning
– size can be positive or negative
– to move left, make left negative or right positive
– to move right, make right negative or left positive
– to move up, make top negative or bottom positive
– to move down, make bottom negative or top positive
– Setting an element’s position does not affect the position of
other elements, so
» There will be a gap in the element’s original, natural
position
» Unless you are very careful, your element will overlap
other elements
Internet Programming
103
Pseudo-elements
Pseudo-elements describe “elements” that are
not actually between tags in the XML document
 Syntax: element:pseudo-class {...}
– first-letter the first character in a block-level element
– first-line the first line in a block-level element (depends on
the browser’s current window size)
 Especially useful for XML (but not implemented in
Internet Explorer):
– before adds material before an element
» Example: author:before {content: "by "}
– after adds material after
an element
Internet Programming
104
External style sheets

In HTML, within the <head> element:
<link REL="STYLESHEET" TYPE="text/css"
HREF="Style Sheet URL">

As a PI in the prologue of an XML
document:
<?xml-stylesheet href="Style Sheet URL"
type="text/css"?>

Note: "text/css" is the MIME type
Internet Programming
105
Some border styles and values


You can put borders around elements
Borders have width, style, and color
– These can be set individually:
» border-left-style:, border-bottom-color:, etc.
– Or a border at a time:
» border-top:, border-right:, etc.
– Or all borders at once: border:

Available values are:
– border-width: thin | medium | thick | length
– border-style: none | hidden | dotted | dashed | solid
| double | groove | ridge | inset | outset
– border-color: color
Internet Programming
106
Padding

Padding is used to set the space around an
element
– You can set padding individually:
padding-top:, padding-left:,
padding-bottom:, padding-right:
– Or all at once: padding:
– Allowable values: length | 12%
Internet Programming
107
Visual Web Developer
Internet Programming
108
Visual Web Developer
Microsoft IDE (Integrated Development
Environment) for Web applications
 Replaces most programming tasks with drag and
drop operations
 Uses CSS, Themes and Skins to provide
consistent site look and feel
 Site look and feel is consolidated in the concept
of Master Pages.

Internet Programming
109
Master Page and Content Page
Internet Programming
110
Basic VWD Components
Internet Programming
111
Basic VWD Components
Web Form: a standard .aspx (content) page
 Master Page: adds consistent site look and feel
 Style Sheet: provides styling (colors, fonts …)
 Web Configuration file: settings for the site
 Site Map:
XML file that lists all the pages
 Global Application Class: handles events for site
 SQL Database: storage of the data for the site

Internet Programming
112
VWD Navigation Controls
Internet Programming
113
Client Side Scripting
Internet Programming
114
Client Side Scripting

Static HTML: limited to formatting of
(unchanging) documents

Dynamic HTML: incorporates user
interaction
– By client-side scripting
and/or
– By server-side scripting
Internet Programming
115
Client Side Scripting
 Web
Programming: due to the client-server
architecture underlying the operation of the
internet, “programming” can refer to
– client-side programming (client-side scripting)
» Code is executed within (by) the browser (= internet client)
– server-side programming (server-side scripting)
» Code is executed by a web server and the result is an HTML
page (possibly w/ client-side scripts embedded in it) which
is sent to client (browser)
Internet Programming
116
Client Side Scripting
 Executable
code embedded in HTML
 Browsers have a built-in interpreter that
executes code.
 Difference: Interpreter and Compiler
– Compiler: converts code into new .exe file
– Interpreter: executes code line-by-line
 The
code is written in a scripting syntax
(language) called JavaScript
Internet Programming
117
JavaScript
 Originally
developed Netscape
- became Internet standard, all browsers support it
 Modeled
after Java
 JavaScript syntax is Java-like, but NOT Java
- not Object Oriented
-doesn’t rely on JDK
-very loose w/ type-checking (not strongly typed)
-hard to debug (no debugger)
Internet Programming
118
Basic JavaScript Syntax
 Scripts
are embedded in a pair of
<script> … </script> tags
 Scripts can be place in HTML head or body
 Code is placed in HTML comment
<script type=«text/javaScript« >
// code here ...
</script>
Internet Programming
language attribute
119
Conditional Statements

IF Statement
if ( cond expression ) { statements } else {
statements }

When the block delimiters{} are excluded, JavaScript
assumes there is a single line scope

SWITCH Statement
switch (cond) { case 1: ... break; case 2: ... break;
default: ... }

If break is omitted, the code in the remaining case
statement(s) is automatically executed (until a break is
encountered or the switch
statement is complete). 120
Internet Programming
Repetition Statements
FOR Loop
for (var i=0; i<10; i++)
{ ... }
 WHILE Loop
var i=0 ;
while (i<10)
{ ...
i++ ;
Internet Programming
}

121
JavaScript Array Object
Property/Method
length
Array()
join(delimeter)
reverse()
sort(compareFunction)
push(element), pop()
unshift(element)
slice(lower, upper)
concat(arrayObject)
Effect
Size of array
Constructor
Create string from array
Reverse order
Sort (lex. if no comp.)
Add/remove at end
Add at front
Extract subarray
Append arrayObject
122
JavaScript String Object
Property/Method
length
big(), small()
bold(), italics()
blink()
strike()
fixed()
sub(), sup()
fontcolor(“colorName”)
fontsize(1..7)
Effect
Length of string
Increase,decrease size
Select font type
Blink effect
Strikethrough font
Teletype font
Sub/Superscript
Font color
Font size
123
JavaScript String Object
Method
charAt(), charCodeAt()
fromCharCode()
indexOf(), lastIndexOf()
concat()
split(delimeter)
slice()
substr/substring(from, to)
toUpperCase() toLowerCase()
anchor(), link()
Effect
char, ASCII code
Convert from ASCII
Find position of char
Concatenate strings
Tokenize
Substring
Return substring
Convert to upper/lower
Create anchor/link124
JavaScript Date Object
Attribute
getDate()
getDay()
getMonth()
getYear()
getFullYear()
getTime()
getHours()
getMinutes()
getSeconds()
Effect
Returns value between 1 and 31
Returns weekday as 0 (Sunday) …6
Returns value between 0 and 11
Returns century year 0 … 99
Returns year 0 … 9999
Milliseconds since Jan 1, 1970
Returns value between 0 and 23
Returns value between 0 and 59
Returns value between 0 and 59
125
JavaScript Date Object
Attribute
Date()
setDate()
setMonth()
setYear()
setFullYear()
setTime()
setHours()
setMinutes()
setSeconds()
Effect
Date constructor
Sets value between 1 and 31
Sets value between 1 and 11
Sets 20th century year 0 … 99
Sets year 0 … 9999
Set milliseconds since Jan 1, 1970
Sets value between 0 and 23
Sets value between 0 and 59
Sets value between 0 and 59 126
JavaScript Date Object
Attribute
setUTC()
getTimeZoneOffset()
toLocaleString()
toGMTString()
Date.parse()
Date.UTC()
UTC =
Effect
Set UTC value
Time Zone offset
Locale String
GMT string
Convert to string
Get UTC value
Coordinated Universal Time
different from GMT due to the
irregular rotation of the Earth 127
Domain Object Model

Main JavaScript DOM objects
Internet Programming
128
JavaScript Window Object
Attribute
toolbar
location
directories
status
menubar
scrollbars
resizable
width = num
height = num
Effect
Back/Forward/Home/Edit buttons
Location window below toolbar
What’s Hot/Cool etc. buttons
Window’s Status bar
File, Edit, View pulldown menus
Scrollbar displaying
Resize handles
Window width in pixels
Window height in pixels
129
Server Side Scripting
Internet Programming
130
Server Side Scripting
Serving Static Web Pages
Static Web Page Request and Response Operations
Internet Programming
131
Server Side Scripting
Serving Dynamic Web Pages
Dynamic Web Page Request and Response Operations
Internet Programming
132
Server Side Scripting
HTML generation is decoupled
from Web Server functionality
Other engines may be used (Servlet, JSP, PHP …)
Internet Programming
133
ASP.NET Operations
ASP.NET Request and Response Operations
Internet Programming
134
Data Access in Visual Web
Developer

The data access related controls are in the Data
tab of the Toolbox.
Data-bound Display Controls
Data Source Controls
Internet Programming
135
GridView

GridView provides a tabular display of records.
– Can be editable or read-only
Internet Programming
136
FormView

FormView provides a data-bound form for display.
– Can be editable (with Update link or button) or read-only
Internet Programming
137
DetailsView

DetailsView provides a Master – Detail design
GridView
Selected Record
Select
Buttons
DetailsView
Internet Programming
138
HTML


Hypertext Mark-up Language – formatting
specification for hyperdocuments
Current version DOCTYPE header:
<!DOCTYPE HTML PUBLIC =”-//w3c/DTD XHTML 1.0 Strict//EN
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

Based on tags
– Container tags: <tag> …. </tag>
– Inline tags:
<tag/>


Comments: not rendered but carry information
<!-- …comment text here …-->
Internet Programming
139