Internet Programming1 COMP SCI 331. Internet Programming2 My name is … My name is … How to find me How to find me Course Policies Course Policies Background

Internet Programming 1

Internet ProgrammingInternet Programming

COMP SCI 331COMP SCI 331


My name is …My name is … How to find meHow to find me Course PoliciesCourse Policies BackgroundBackground Your turnYour turn

IntroductionsIntroductions


The room will be locked but students who take a class in that 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 room will have card access during the following times as long as no class is in session:no class is in session:– 1. Monday through Friday. 7:00 AM - 9:30 PM.1. Monday through Friday. 7:00 AM - 9:30 PM.– 2. Saturday and Sunday 9:00 AM through 4:30 PM2. Saturday and Sunday 9:00 AM through 4:30 PM

There is no access during other hours.There is no access during other hours. The computers are to be used for course work only.The computers are to be used for course work only. Students are NOT to use the instructor workstations nor the Students are NOT to use the instructor workstations nor the

projection equipment. We CAN check who logged into them.projection equipment. We CAN check who logged into them. No software is to be installed on any of the machines. Installing No software is to be installed on any of the machines. Installing

software will result in your access being revoked. Be aware, that software will result in your access being revoked. Be aware, that it is easy to find out who was logged into a machine when it is easy to find out who was logged into a machine when unauthorized software was installed.unauthorized software was installed.

No food or drink is allowed in the room at any time.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 No one who does not have card access should be let into the

room.room.

Mac 122 PoliciesMac 122 Policies


Internet Physical LayoutInternet Physical Layout


The First Version of the InternetThe First Version of the Internet


Internet HistoryInternet History ARPA = DoD Advanced Research Projects ARPA = DoD Advanced Research Projects

Agency funds ARPANet. FTP and e-mail onlyAgency funds ARPANet. FTP and e-mail only First node:First node: UCLA in 1969 UCLA in 1969 1971: 26 computers form the ARPAnet1971: 26 computers form the ARPAnet 1982: TCP/IP becomes the standard protocol. 1982: TCP/IP becomes the standard protocol.

First proposed in 1974First proposed in 1974 1986: National Science Foundation (NSF) 1986: National Science Foundation (NSF)

sponsors the NSFnet that replaces ARPANetsponsors the NSFnet that replaces ARPANet 1990: commercial companies are allowed to join1990: commercial companies are allowed to join


Internet ProtocolsInternet Protocols


TCP/IP ProtocolTCP/IP Protocol

IP Header StructureIP Header Structure


TCP/IP ProtocolTCP/IP Protocol

TCP Header StructureTCP Header Structure


Domain Name Server (DNS)Domain Name Server (DNS)


Some Domain Name SuffixesSome Domain Name Suffixes


LAN organizationLAN organization

Internet and Local Area NetworksInternet and Local Area Networks


Internet and Local Area NetworksInternet and Local Area Networks

Router provides TCP/IP connection to LANRouter provides TCP/IP connection to LAN


Multiple Accounts on a ServerMultiple Accounts on a Server


Multiple Domains on a ServerMultiple Domains on a Server


Current version of TCP/IP is IPv4Current version of TCP/IP is IPv4 More than 100 countries are on the InternetMore than 100 countries are on the Internet Over 100 million nodesOver 100 million nodes Internet address space is running outInternet address space is running out

– There are assigned but underused domainsThere are assigned but underused domains IETF (Internet Engineering Task Force) has IETF (Internet Engineering Task Force) has

issued the new spec (August 10, 1998, Toronto)issued the new spec (August 10, 1998, Toronto) IPv6 also known as IPngIPv6 also known as IPng

Internet Next GenerationInternet Next Generation


Expanded Routing and Addressing Capabilities Expanded Routing and Addressing Capabilities – increases the IP address size from 32 bits to 128 bitsincreases the IP address size from 32 bits to 128 bits

A new type of address called a "anycast address“A new type of address called a "anycast address“– allows nodes to control the path which their traffic allows nodes to control the path which their traffic

flowsflows

New Header FormatNew Header Format– Although IPng addresses are four times longer than the Although IPng addresses are four times longer than the

IPv4 addresses, the IPng header is only twice the size IPv4 addresses, the IPng header is only twice the size of the IPv4 header of the IPv4 header

– some IPv4 fields are dropped or made optionalsome IPv4 fields are dropped or made optional

IPv4 vs. IPv6IPv4 vs. IPv6IPv6 will provideIPv6 will provide


Improved Support for Options Improved Support for Options – more efficient forwardingmore efficient forwarding

– less stringent limits on the length of optionsless stringent limits on the length of options

– greater flexibility for introducing new optionsgreater flexibility for introducing new options

Quality-of-Service Capabilities Quality-of-Service Capabilities – enable the labeling of packets belonging to particular enable the labeling of packets belonging to particular

traffic "flows" traffic "flows"

Authentication and Privacy CapabilitiesAuthentication and Privacy Capabilities– extensions to provide support for authentication, data extensions to provide support for authentication, data

integrity and confidentialityintegrity and confidentiality

IPv6 Additional CapabilitiesIPv6 Additional Capabilities


IP Addresses and RoutingIP Addresses and Routing Experiment: look at Internet AddressesExperiment: look at Internet Addresses


IP Addresses and RoutingIP Addresses and Routing Experiment: trace the route of a packageExperiment: trace the route of a package


Web Design GuidelinesWeb Design Guidelines

Web Design GuidelinesWeb 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


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


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



HTML and XHTMLHTML and XHTML


HTMLHTML Hypertext Mark-up Language – formatting specification for hyperdocumentsHypertext Mark-up Language – formatting specification for hyperdocuments Current version DOCTYPE header: Current version DOCTYPE header:

Based on Based on tagstags– Block tags: Block tags: <tag> …. </tag><tag> …. </tag>– Inline tags:Inline tags: <tag/> <tag/>

Comments: not rendered but carry informationComments: not rendered but carry information <>

<!DOCTYPE HTML PUBLIC =”-//w3c/DTD XHTML 1.0 Strict//EN http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd>


HTML VersionsHTML Versions Hypertext Mark-up Language – formatting specification Hypertext Mark-up Language – formatting specification

for for hyperdocumentshyperdocuments HTML has gone through several versionsHTML has gone through several versions The last one is HTML 4.0 but this HTML standards are The last one is HTML 4.0 but this HTML standards are

being replaced by XHMTL standardsbeing replaced by XHMTL standards XHMTL is HTML that confirms with XML syntax rulesXHMTL is HTML that confirms with XML syntax rules DHTML is a reference to HTML with interactive DHTML is a reference to HTML with interactive

(dynamic) content(dynamic) content– Most often created by JavaScriptMost often created by JavaScript

– There are other client-side scripting languagesThere are other client-side scripting languages


The HTML Source DocumentThe HTML Source Document

All web pages are entirely plain-text All web pages are entirely plain-text documentsdocuments

Special formatting is imparted through the Special formatting is imparted through the use of tagsuse of tags

HTML files should end in .htm and not HTML files should end in .htm and not contain any spaces in the file namecontain any spaces in the file name

You can open a HTML file by dragging the You can open a HTML file by dragging the file icon to an open browser windowfile icon to an open browser window


Writing and Indenting HTML CodeWriting and Indenting HTML Code

Any text editor can be used to create an Any text editor can be used to create an HMTL document – even NotepadHMTL document – even Notepad

We will use MS Visual Web DeveloperWe will use MS Visual Web Developer– Provides useful syntax highlighting and helpProvides useful syntax highlighting and help– MS Expression Web, NVU and many other MS Expression Web, NVU and many other

Web editors existWeb editors exist Use lower case letters for your tagsUse lower case letters for your tags Indenting your code makes nesting tags Indenting your code makes nesting tags

easiereasier


Block-level vs. Inline ElementsBlock-level vs. Inline Elements

Block-level elements are designed to define Block-level elements are designed to define a complete section of texta complete section of text

– For example the header, <p>, and <body> tags For example the header, <p>, and <body> tags are block elements are block elements

Inline elements affect a small text area Inline elements affect a small text area – Can be as small as a single characterCan be as small as a single character– More often a word, phrase or sentenceMore often a word, phrase or sentence– The <em>, <strong>, and <b> tags are inline The <em>, <strong>, and <b> tags are inline

elementselements


HTML Document SkeletonHTML Document Skeleton<html><html>

<head><head>The header: contains information about the The header: contains information about the document, not contentdocument, not content

</head></head>

<body><body>The body: contains the contents of the The body: contains the contents of the documentdocument

</body></body>

</html></html>


XHTMLXHTML XHTML was introduced to supercede HTML XHTML was introduced to supercede HTML

and has stricter rulesand has stricter rules Standardized version of HTML by the W3CStandardized version of HTML by the W3C Based on XMLBased on XML

– XML is not a formatting mark-up languageXML is not a formatting mark-up language– Its function is to define data formats and store dataIts function is to define data formats and store data

XML has much stricter syntax rules than HTMLXML has much stricter syntax rules than HTML XHTML is HTML that complies with strict XHTML is HTML that complies with strict

XML syntax rulesXML syntax rules


XHTML Document SkeletonXHTML Document Skeleton<?xml version=1.0:?><?xml version=1.0:?><!DOCTYPE HTML PUBLIC =”-//w3c/DTD . . . > <!DOCTYPE HTML PUBLIC =”-//w3c/DTD . . . > <html xmlns = “http://www.w3.org/1999/xhtml”><html xmlns = “http://www.w3.org/1999/xhtml”>

<head><head>The header: contains information about the The header: contains information about the document, not contentdocument, not content

</head></head>

<body><body>The body: contains the contents of the The body: contains the contents of the documentdocument

</body></body></html></html>


XHTML Syntax RulesXHTML Syntax Rules

Documents start with an XML declarationDocuments start with an XML declaration The html tag has an XML namespace The html tag has an XML namespace

specificationspecification Tags are case sensitiveTags are case sensitive Attribute values must always be quotedAttribute values must always be quoted Documents must have a root elementDocuments must have a root element Elements must be properly nestedElements must be properly nested


The XHTML Source Document The XHTML Source Document

XHTML documents require an XML XHTML documents require an XML declaration at the head of the documentdeclaration at the head of the document

– Identifies version of XMLIdentifies version of XML A DOCTYPE directive provided a Document A DOCTYPE directive provided a Document

Type Definition (DTD)Type Definition (DTD)– Specifies the type of document as XHTMLSpecifies the type of document as XHTML

The HTML tag includes and The HTML tag includes and xmlnsxmlns attribute attribute– Defines the XML Defines the XML namespacenamespace– Needs to distinguish identically named tagsNeeds to distinguish identically named tags


Nesting XML TagsNesting XML Tags The following tags are properly nested:The following tags are properly nested:

<root> <child> <subchild>

...

</subchild> </child></root>


Improper NestingImproper Nesting The following nesting of tags is The following nesting of tags is wrongwrong::

<root> <child> <subchild>

...

</child> </subchild></root>


The <meta> ElementThe <meta> Element

Meta tags add information about a web Meta tags add information about a web page that is invisible to web browserspage that is invisible to web browsers

The tags are read by search engines and The tags are read by search engines and indexersindexers

Meta tags are often used to identify Meta tags are often used to identify keywordskeywords and and descriptionsdescriptions


Paragraphs: the <p> ElementParagraphs: the <p> Element Browsers ignore consecutive whitespace Browsers ignore consecutive whitespace

characters characters The <p> element is used to define a new The <p> element is used to define a new

paragraphparagraph Good HTML design requires that you use the Good HTML design requires that you use the

closing </p> tag, however no browser closing </p> tag, however no browser requires it requires it

Browsers ignore any tag that is not Browsers ignore any tag that is not understoodunderstood

– if a tag is not performing the function you want, check for if a tag is not performing the function you want, check for misspellingmisspelling


Line Breaks: the <br /> ElementLine Breaks: the <br /> Element

The <br /> tag causes an immediate line The <br /> tag causes an immediate line break on the pagebreak on the page

The <br /> has no closing tag, so the The <br /> has no closing tag, so the XHTML tag has a trailing forward slashXHTML tag has a trailing forward slash

It is also correct to write aIt is also correct to write a

<br> </br><br> </br>

pairpair


HeadersHeaders

Headers are content tags that specify a Headers are content tags that specify a font sizefont size

They should be used only for titles and They should be used only for titles and section headerssection headers

<h1> is the largest, <h6> the smallest<h1> is the largest, <h6> the smallest Proper use of header tags allows a table Proper use of header tags allows a table

of contents to be retrieved by just of contents to be retrieved by just displaying the headersdisplaying the headers

42

HTML Container TagsHTML Container Tags<b> … </b><b> … </b> Boldface textBoldface text

<i> … </i><i> … </i> Italic textItalic text

<strong> … </strong><strong> … </strong> Strong textStrong text

<em> … </em><em> … </em> Emphasized textEmphasized text

<strike> … </strike><strike> … </strike> Strikethrough textStrikethrough text

<big> … </big><big> … </big> Increase font sizeIncrease font size

<small> … </small><small> … </small> Decrease font sizeDecrease font size

<u> … </u><u> … </u> Underlined textUnderlined text

<tt> … </tt><tt> … </tt> Teletype = monospaceTeletype = monospace

<sub> … </sub><sub> … </sub> SubscriptSubscript

<sup> … </sup> <sup> … </sup> SuperscriptSuperscript

43

HTML Container TagsHTML Container Tags

<center> … </center><center> … </center> Align as centerAlign as center

<p> … </p><p> … </p> Paragraph (blank line)Paragraph (blank line)

<h1> … </h1><h1> … </h1> Header 1 (Largest)Header 1 (Largest)

<h2> … </h2><h2> … </h2> Header 2Header 2




<h6> … </h6><h6> … </h6> Header 6 (Smallest)Header 6 (Smallest)

<pre> … </pre><pre> … </pre> Preserve formattingPreserve formatting

<blockquote> … <blockquote> <blockquote> … <blockquote> Indented blockIndented block

44

HTML Inline TagsHTML Inline Tags

<br>, <br /><br>, <br /> Line breakLine break

<hr>, <hr /><hr>, <hr /> Horizontal rule (line)Horizontal rule (line)

Special CharactersSpecial Characters(space)(space) Non-breaking spaceNon-breaking space

&& && AmpersandAmpersand

< < << Less thanLess than

>> >> Greater thanGreater than

“ “ "" Double quoteDouble quote

‘‘ '' Apostrophe (single quote)Apostrophe (single quote)

45

Tag AttributesTag Attributes

<font> … </font> - <font> … </font> - DEPRECATED!DEPRECATED!

<hr><hr>AttributeAttribute ValuesValues DefaultDefault

widthwidth %, pixels%, pixels width=“100%”width=“100%”

sizesize pixelspixels size=“2”size=“2”

alignalign left, right, centerleft, right, center align=“center”align=“center”

noshadenoshade shaded markupshaded markup

AttributeAttribute ValuesValues DefaultDefault

sizesize 1 through 71 through 7 3, about 10 points3, about 10 points

colorcolor named or hex colornamed or hex color black, black, “#000000”“#000000”

faceface font familyfont family browser dependentbrowser dependent

46

Tag AttributesTag Attributes


bgcolorbgcolor named or hex colornamed or hex color white, white, “#FFFFFF”“#FFFFFF”

texttext named or hex colornamed or hex color black, black, “#000000”“#000000”

linklink named or hex colornamed or hex color browser dependentbrowser dependent

alinkalink named or hex colornamed or hex color browser dependentbrowser dependent

vlinkvlink named or hex colornamed or hex color browser dependentbrowser dependent

backgroundbackground image sourceimage source nonenone

<body> … </body><body> … </body>

<p> … </p><p> … </p>AttributeAttribute ValuesValues DefaultDefault

alignalign left, right, centerleft, right, center align=“center”align=“center”

47

Anchors and LinksAnchors and Links


hrefhref absolute URLabsolute URL nonenone

relative URLrelative URL

fragment identifierfragment identifier

namename textual nametextual name nonenone

<a> … </a><a> … </a>


Site OrganizationSite Organization

No planned structureNo planned structure



Linear linking structureLinear linking structure


Site OrganizationSite OrganizationHierarchical structureHierarchical structure



PagesPages LinksLinks



PagesPages LinksLinks

53

ImagesImages


srcsrc absolute URLabsolute URL nonenone

relative URLrelative URL --

alignalign left, right, centerleft, right, center leftleft

top, middle, bottomtop, middle, bottom bottombottom

hspacehspace pixelspixels browser dependentbrowser dependent

vspacevspace pixelspixels browser dependentbrowser dependent

borderborder pixelspixels 00

altalt ““text string”text string” no alternate textno alternate text

ismapismap --

usemapusemap ““#text string”#text string” --

<img><img>

54

ListsLists


typetype circle, disc, squarecircle, disc, square discdisc

<ul> … </ul><ul> … </ul>

<ol> … </ol><ol> … </ol>AttributeAttribute ValuesValues DefaultDefault

typetype 1 (integers)1 (integers) align=“center”align=“center”

i, I (lower/upper Roman)i, I (lower/upper Roman)

a, A (lower/upper letter)a, A (lower/upper letter)

<li> … </li><li> … </li>Used to create list items with the <ul> and <ol> tagsUsed to create list items with the <ul> and <ol> tags

55

TablesTables



bgcolorbgcolor named or hex colornamed or hex color web inheritedweb inherited

borderborder pixelspixels 00

cellpadingcellpading pixelspixels 11

cellspacingcellspacing pixelspixels 22

heightheight pixels, percentpixels, percent minimum neededminimum needed

widthwidth pixels, percentpixels, percent minimum neededminimum needed

<table> … </table><table> … </table>

56

Table Row AttributesTable Row Attributes



valignvalign top, middle, bottomtop, middle, bottom middlemiddle


<tr> … </tr><tr> … </tr>

57

Table Cell and HeaderTable Cell and Header



valignvalign top, middle, bottomtop, middle, bottom middlemiddle

backgroundbackground URL or imageURL or image --


heightheight %, percent%, percent cell contents sizecell contents size

widthwidth %, percent%, percent cell contents sizecell contents size

colspancolspan integerinteger 00

rowspanrowspan integerinteger 00

<td> … </td> and <th> … </th><td> … </td> and <th> … </th>


Frameset and FrameFrameset and Frame

  <html><html><head><head></head></head><frameset><frameset> <frame src=”doc2.html”> <frame src=”doc2.html”> <frame src=”doc3.html”> <frame src=”doc3.html”></frameset></frameset></html></html>

59

FramesFrames


colscols pixels, percentpixels, percent --

rowsrows pixels, percentpixels, percent --

borderborder pixelspixels browser dependentbrowser dependent

bordercolorbordercolor named or hex colornamed or hex color browser dependentbrowser dependent

<frameset> … </frameset><frameset> … </frameset>


targettarget name of framename of frame _self_self

_self, _parent_self, _parent

<a> … </a><a> … </a>

60

Frame AttributesFrame Attributes


srcsrc URLURL --

namename character stringcharacter string --

marginheightmarginheight pixelspixels browser dependentbrowser dependent

marginwidthmarginwidth pixelspixels browser dependentbrowser dependent

scrollingscrolling yes, no, autoyes, no, auto autoauto

<frame> … </frame><frame> … </frame>


HTML FormsHTML Forms

Intro to Computing and Internet 62

HTML FormsHTML Forms

Forms are used in HTML to create a Forms are used in HTML to create a Graphical User Interface (GUI)Graphical User Interface (GUI)

Forms contain visual controlsForms contain visual controls Visual controls allow the user to interact Visual controls allow the user to interact

with the pagewith the page Visual controls are a convenient way to Visual controls are a convenient way to

perform I/Operform I/O Forms make Web pages interactiveForms make Web pages interactive


Buttons and Text BoxesButtons and Text Boxes

Buttons and Text Boxes are the simplest Buttons and Text Boxes are the simplest visual controlsvisual controls

Both are created within a FormBoth are created within a Form Both are types of <input … /> controlsBoth are types of <input … /> controls Text Boxes are created by specifying type = Text Boxes are created by specifying type =

“text”“text” Buttons are created by specifying Buttons are created by specifying

type=“button”type=“button”


Buttons and Text BoxesButtons and Text Boxes

The value attribute assignsThe value attribute assigns a default value to a textboxa default value to a textbox A caption to a buttonA caption to a button A textbox returns a string as the result of A textbox returns a string as the result of

what the user typed inwhat the user typed in A button can activate a click event handlerA button can activate a click event handler The event handler’s name is specified in the The event handler’s name is specified in the

onClick property of the buttononClick property of the button


Checkboxes Checkboxes

Checkboxes are used to indicate a yes/no Checkboxes are used to indicate a yes/no conditioncondition

Boxes can be read by reading the boolean Boxes can be read by reading the boolean “checked” property of the checkbox“checked” property of the checkbox

The property is true if checked, false if not The property is true if checked, false if not checkedchecked

Multiple checkboxes can be checked Multiple checkboxes can be checked simultaneouslysimultaneously


Radio ButtonsRadio Buttons

Radio buttons are designed to allow a single Radio buttons are designed to allow a single selection out of a group of optionsselection out of a group of options

Selecting one button causes any others to be Selecting one button causes any others to be deselecteddeselected

Creating a radio button group from the Creating a radio button group from the individual <input> tags require that we give individual <input> tags require that we give each radio button the identical name; the each radio button the identical name; the browser then assumes they are part of the browser then assumes they are part of the same groupsame group


Cascading Style SheetsCascading Style Sheets


The problem with HTMLThe problem with HTML HTML was originally intended to describe the HTML was originally intended to describe the contentcontent

of a documentof a document Page authors didn’t have to describe the layout--the Page authors didn’t have to describe the layout--the

browser would take care of thatbrowser would take care of that This is a good engineering approach, but it didn’t satisfy This is a good engineering approach, but it didn’t satisfy

advertisers and “artists”advertisers and “artists”– Even people that actually had something to say wanted more Even people that actually had something to say wanted more

control over the appearance of their web pagescontrol over the appearance of their web pages As a result, HTML acquired more and more tags to As a result, HTML acquired more and more tags to

control control appearanceappearance– Content and appearance became more intertwinedContent and appearance became more intertwined– Different browsers displayed things differently, which is a real Different browsers displayed things differently, which is a real

problem when appearance is importantproblem when appearance is important


Cascading Style SheetsCascading Style Sheets A A CCascading ascading SStyle tyle SSheetheet ( (CSSCSS) describes the ) describes the

appearance of an HTML page in a separate appearance of an HTML page in a separate documentdocument

CSS has the following advantages:CSS has the following advantages:– It lets you separate content from presentationIt lets you separate content from presentation– It lets you define the appearance and layout of all the It lets you define the appearance and layout of all the

pages in your web site in a single placepages in your web site in a single place– It can be used for both HTML and XML pagesIt can be used for both HTML and XML pages

CSS has the following disadvantage:CSS has the following disadvantage:– Most browsers don’t support it very wellMost browsers don’t support it very well


CSS Skeleton PageCSS Skeleton Page

<html><html><head><head><title>Practice CSS</title><title>Practice CSS</title>

<style type=“text/css”><style type=“text/css”> body { background-color : red}body { background-color : red}

h1 { color : “white”; font-size : 20px}h1 { color : “white”; font-size : 20px}</style></style>

</head></head><body><body><h1>Practice CSS</h1><h1>Practice CSS</h1>

</body></body></html></html>


CSS syntaxCSS syntax CSS syntax is very simple--it’s just a file CSS syntax is very simple--it’s just a file

containing a list of containing a list of selectorsselectors (to choose tags) and (to choose tags) and descriptors descriptors (to tell what to do with them):(to tell what to do with them):– Example:Example: h1 {color: green; font-family: h1 {color: green; font-family:

Verdana}Verdana} says that says that h1h1 (HTML heading level 1) tags (HTML heading level 1) tags should be in the Verdana font and colored greenshould be in the Verdana font and colored green

A CSS file is just a list of these selector/descriptor A CSS file is just a list of these selector/descriptor pairspairs– Selectors may be simple HTML tags or XML tags, but Selectors may be simple HTML tags or XML tags, but

CSS also defines some ways to combine tagsCSS also defines some ways to combine tags– Descriptors are defined in CSS itself, there is a long list Descriptors are defined in CSS itself, there is a long list

of themof them

72

CSS syntaxCSS syntax The general syntax is:The general syntax is:

selectorselector {{propertyproperty:: valuevalue}}– oror selectorselector,, ......,, selectorselector {{

propertyproperty: : valuevalue;; . . .. . . propertyproperty:: valuevalue}}

– wherewhere» selectorselector is the tag to be affected (the selector is case-sensitive if is the tag to be affected (the selector is case-sensitive if

and only if the document language is case-sensitive)and only if the document language is case-sensitive)» propertyproperty and and valuevalue describe the appearance of that tag describe the appearance of that tag» Spaces after colons and semicolons are optionalSpaces after colons and semicolons are optional» A semicolon must be used A semicolon must be used betweenbetween property:value pairs, but a property:value pairs, but a

semicolon after the last pair is optionalsemicolon after the last pair is optional


CSS ExamplesCSS Examples

/* This is a comment *//* This is a comment */ h1,h2,h3 {font-family: Arial, sans-serif;}h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st /* use 1st

available font */ available font */ p, table, li, address {p, table, li, address { /* apply to all these tags *//* apply to all these tags */

font-family: "Courier New";font-family: "Courier New"; /* quote values containing /* quote values containing spaces */ spaces */

margin-left: 15pt;margin-left: 15pt; /* specify indentation *//* specify indentation */}}

p, li, th, td {font-size: 80%;}p, li, th, td {font-size: 80%;} /* 80% of size in /* 80% of size in containing containing element */ element */


CSS ExamplesCSS Examples

th {background-color:#FAEBD7}th {background-color:#FAEBD7} /* colors can be /* colors can be specified in hex */ specified in hex */

body { background-color: #ffffff;}body { background-color: #ffffff;} h1,h2,h3,hr {color:saddlebrown;}h1,h2,h3,hr {color:saddlebrown;} /* adds to the above/* adds to the above a:link {color:darkred}a:link {color:darkred} /* an unvisited link *//* an unvisited link */ a:visited {color:darkred}a:visited {color:darkred} /* a visited link *//* a visited link */ a:active {color:red}a:active {color:red} /* link being visited *//* link being visited */ a:hover {color:red}a:hover {color:red} /* mouse hovers over *//* mouse hovers over */


More about selectorsMore about selectors An HTML tag can be used as a An HTML tag can be used as a simple element selectorsimple element selector::

body { background-color: #ffffff }body { background-color: #ffffff } You can use multiple selectors:You can use multiple selectors:

em, i {color: red}em, i {color: red} You can repeat selectors:You can repeat selectors:

h1, h2, h3 {font-family: Verdana; color: red}h1, h2, h3 {font-family: Verdana; color: red}h1, h3 {font-weight: bold; color: pink}h1, h3 {font-weight: bold; color: pink}

• When values disagree, the last one overrides any earlier onesWhen values disagree, the last one overrides any earlier ones The The universal selectoruniversal selector ** applies to any and all elements:applies to any and all elements:

* {color: blue}* {color: blue}• When values disagree, more specific selectors override general When values disagree, more specific selectors override general

ones (soones (so emem elements would still be red) elements would still be red)


Example of overridingExample of overriding

77

More about selectorsMore about selectors

A A descendant selectordescendant selector chooses a tag with a specific ancestor: chooses a tag with a specific ancestor:– p code { color: brown }p code { color: brown }– selects a selects a codecode if it is somewhere inside a paragraph if it is somewhere inside a paragraph

A A child selectorchild selector >> chooses a tag with a specific parent: chooses a tag with a specific parent: h3 > em { font-weight: bold }h3 > em { font-weight: bold } selects an selects an emem only if its immediate parent isonly if its immediate parent is h3h3

An An adjacent selectoradjacent selector chooses an element that immediately chooses an element that immediately follows another:follows another: b + i { font-size: 8pt }b + i { font-size: 8pt }

Example: Example: <b>I'm bold and</b> <i>I'm italic</i><b>I'm bold and</b> <i>I'm italic</i> Result will look something like:Result will look something like: I'm boldI'm bold and and I'm italicI'm italic


More about selectorsMore about selectors A A simple attribute selectorsimple attribute selector allows you to choose allows you to choose

elements that have a given attribute, regardless of its elements that have a given attribute, regardless of its value:value:– Syntax: Syntax: elementelement[[attributeattribute] {] { ...... }}– Example:Example: table[border] {table[border] { ...... }}

An An attribute value selectorattribute value selector allows you to choose allows you to choose elements that have a given attribute with a given value:elements that have a given attribute with a given value:– Syntax: Syntax: elementelement[[attributeattribute="="valuevalue"] {"] { ... ... }}– Example:Example: table[border="0"] {table[border="0"] { ...... }}


The The classclass attribute attribute The The classclass attribute allows you to have different attribute allows you to have different

styles for the same elementstyles for the same element– In the style sheet:In the style sheet:

p.important {font-size: 24pt; color: red}p.important {font-size: 24pt; color: red}p.fineprint {font-size: 8pt}p.fineprint {font-size: 8pt}

– In the HTML:In the HTML:<p class="important">The end is nigh!</p> <p class="important">The end is nigh!</p> <p class="fineprint">Offer ends 1/1/97.</p><p class="fineprint">Offer ends 1/1/97.</p>

To define a selector that applies to any element with To define a selector that applies to any element with that class omit the tag name (keep the dot):that class omit the tag name (keep the dot): .fineprint {font-size: 8pt}.fineprint {font-size: 8pt}


The The idid attribute attribute The The idid attribute is defined like the attribute is defined like the classclass attribute, attribute,

but uses but uses ## instead of instead of ..– In the style sheet:In the style sheet:

p#important {font-style: italic}p#important {font-style: italic} or or# important {font-style: italic}# important {font-style: italic}

– In the HTML:In the HTML:<p id="important"><p id="important">

classclass and and idid can both be used, and do not need to can both be used, and do not need to have different names:have different names:<p class="important" id="important"><p class="important" id="important">


divdiv and and spanspan divdiv and and spanspan are HTML elements whose only are HTML elements whose only

purpose is to hold CSS informationpurpose is to hold CSS information divdiv ensures there is a line break before and after (so ensures there is a line break before and after (so

it’s like a paragraph); it’s like a paragraph); spanspan does not does not Example:Example:

– CSS:CSS: div {background-color: #66FFFF}div {background-color: #66FFFF} span.color {color: red} span.color {color: red}

– HTML: HTML: <div>This div is treated like a <div>This div is treated like a paragraph, but <span class="color">this paragraph, but <span class="color">this span</span> is not.</div>span</span> is not.</div>


Using style sheetsUsing style sheets

There are three ways of using CSS:There are three ways of using CSS:– External style sheetExternal style sheet

» This is the most powerfulThis is the most powerful

» Applies to both HTML and XMLApplies to both HTML and XML

» All of CSS can be usedAll of CSS can be used

– Embedded style sheetEmbedded style sheet

» Applies to HTML, Applies to HTML, notnot to XML to XML

» All of CSS can be usedAll of CSS can be used

– Inline stylesInline styles

» Applies to HTML, not to XMLApplies to HTML, not to XML

» Limited form of CSS syntaxLimited form of CSS syntax


External style sheetsExternal style sheets

In HTML, within theIn HTML, within the <head><head> element: element:<link REL="STYLESHEET"<link REL="STYLESHEET" TYPE="text/css" HREF="TYPE="text/css" HREF="Style Sheet Style Sheet URLURL">">

As a PI in the prologue of an XML As a PI in the prologue of an XML document:document:<?xml-stylesheet href="<?xml-stylesheet href="Style Sheet Style Sheet URLURL" type="text/css"?>" type="text/css"?>

Note: Note: "text/css""text/css" is the MIME typeis the MIME type


Embedded style sheetsEmbedded style sheets

In HTML, within theIn HTML, within the <head><head> element: element: <style TYPE="text/css"><style TYPE="text/css">  --></style></style>

Note: Embedding the style sheet within a Note: Embedding the style sheet within a comment is a sneaky way of hiding it from comment is a sneaky way of hiding it from older browsers that don’t understand CSSolder browsers that don’t understand CSS


Inline style sheetsInline style sheets The The STYLESTYLE attribute can be added to any HTML attribute can be added to any HTML

element:element: <<html-taghtml-tag STYLE="STYLE="propertyproperty:: valuevalue">"> or or <<html-taghtml-tag STYLE="STYLE="propertyproperty:: valuevalue;;

propertyproperty:: valuevalue;; ......;; propertyproperty:: valuevalue">"> Advantage:Advantage:

– Useful if you only want a small amount of markupUseful if you only want a small amount of markup Disadvantages:Disadvantages:

– Mixes display information into HTMLMixes display information into HTML– Clutters up HTML codeClutters up HTML code– Can’t use full range of CSS featuresCan’t use full range of CSS features


Cascading orderCascading order

Styles will be applied to HTML in the Styles will be applied to HTML in the following order:following order:

1.1. Browser defaultBrowser default

2.2. External style sheetExternal style sheet

3.3. Internal style sheet (inside the Internal style sheet (inside the <head><head> tag) tag)

4.4. Inline style (inside other elements, outermost Inline style (inside other elements, outermost first)first)

When styles conflict, the “nearest” (most When styles conflict, the “nearest” (most recently applied) style winsrecently applied) style wins


Example of cascading orderExample of cascading order External style sheet:External style sheet: h3 {h3 {color: red;color: red;

text-align: left;text-align: left;font-size: 8ptfont-size: 8pt}}

Internal style sheet:Internal style sheet: h3 {h3 {text-align: right; text-align: right; font-size: 20ptfont-size: 20pt}}

Resultant attributes:Resultant attributes: color: red;color: red;text-align: right;text-align: right;font-size: 20ptfont-size: 20pt

88

CSS Font PropertiesCSS Font Properties

TypeType NameName

serifserif Times New RomanTimes New Roman

sans-serifsans-serif Ariel, HelveticaAriel, Helvetica

cursivecursive Sanvico, Old English Text MTSanvico, Old English Text MT

monospacemonospace Courier, PrestigeCourier, Prestige

fantasyfantasy CritterCritter

font-family examplesfont-family examples

Names with spaces should have single quotes: ‘Times New Roman’Names with spaces should have single quotes: ‘Times New Roman’

89

Some font properties and valuesSome font properties and values font-family:font-family:

– inheritinherit (same as parent) (same as parent)

– Verdana, "Courier New", ...Verdana, "Courier New", ... (if the font is on the client (if the font is on the client computer)computer)

– serif | sans-serif | cursive | fantasy | monospaceserif | sans-serif | cursive | fantasy | monospace(Generic: your browser decides which font to use)(Generic: your browser decides which font to use)

font-size:font-size:– inherit | smaller | larger | xx-small | x-small | small inherit | smaller | larger | xx-small | x-small | small

| medium | large | x-large | xx-large | | medium | large | x-large | xx-large | 1212ptpt font-weight:font-weight:

– normal | bold |bolder | lighter | 100 | 200 | ... | 700normal | bold |bolder | lighter | 100 | 200 | ... | 700 font-style:font-style:

– normal | italic | obliquenormal | italic | oblique


Shorthand propertiesShorthand properties

Often, many properties can be combined:Often, many properties can be combined: h2 {h2 { font-weight:font-weight: bold;bold; font-variant:font-variant:

small-caps;small-caps; font-size:font-size: 12pt; 12pt; line-line-height:height: 14pt; 14pt; font-family:font-family: sans-serif }sans-serif }

can be written as:can be written as: h2 {h2 { font:font: bold small-caps 12pt/14pt bold small-caps 12pt/14pt

sans-serif } sans-serif }


Colors and lengthsColors and lengths color: color: andand background-color: background-color:

– aqua | black | blue | fuchsia | gray | green | lime | aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white maroon | navy | olive | purple | red | silver | teal | white | #FF0000 | #F00 | rgb(255, 0, 0) || #FF0000 | #F00 | rgb(255, 0, 0) | Additional browser-Additional browser-specific names (not recommended)specific names (not recommended)

These are used in measurements:These are used in measurements:– em, ex, px, em, ex, px, %%

» font size, x-height, pixels, percent of inherited sizefont size, x-height, pixels, percent of inherited size

– in, cm, mm, pt, pcin, cm, mm, pt, pc» inches, centimeters, millimeters, points (1/72 of an inch), picas (1 inches, centimeters, millimeters, points (1/72 of an inch), picas (1

pica = 12 points), relative to the inherited valuepica = 12 points), relative to the inherited value


Some text properties and valuesSome text properties and values text-align:text-align:

– left | right | center | justifyleft | right | center | justify

text-decoration:text-decoration:– none | underline | overline | line-throughnone | underline | overline | line-through

text-transform:text-transform:– none | capitalize | uppercase | lowercasenone | capitalize | uppercase | lowercase

text-indenttext-indent– length | 10% (indents the first line of text)length | 10% (indents the first line of text)

white-space:white-space:– normal | pre | nowrapnormal | pre | nowrap


Pseudo-classesPseudo-classes

Pseudo-classes Pseudo-classes are elements whose state (and are elements whose state (and appearance) may change over timeappearance) may change over time

Syntax: Syntax: elementelement::pseudo-classpseudo-class {{......}}– :link:link

» a link which has not been visiteda link which has not been visited– :visited:visited

» a link which has been visiteda link which has been visited– :active:active

» a link which is currently being clickeda link which is currently being clicked– :hover:hover

» a link which the mouse is over (but not clicked)a link which the mouse is over (but not clicked) Pseudo-classes are allowed anywhere in CSS selectorsPseudo-classes are allowed anywhere in CSS selectors Note, however, that XML doesn’t really support Note, however, that XML doesn’t really support

hyperlinks yethyperlinks yet


Choosing good namesChoosing good names

CSS is designed to CSS is designed to separate content from styleseparate content from style– Therefore, names that will be used in HTML or (especially) in Therefore, names that will be used in HTML or (especially) in

XML should describe XML should describe content, not stylecontent, not style

Example:Example:– Suppose you define Suppose you define span.huge {font-size: 36pt}span.huge {font-size: 36pt} and you and you

use use <span class="huge"><span class="huge"> throughout a large number of throughout a large number of documentsdocuments

– Now you discover your don’t like this, so you change the CSS to Now you discover your don’t like this, so you change the CSS to be be span.huge {font-color: red}span.huge {font-color: red}

– Your name is inappropriate; do you change all your documents?Your name is inappropriate; do you change all your documents?– If you had started withIf you had started with span.important {font-size: 36pt}span.important {font-size: 36pt},,

the documents would look betterthe documents would look better

95

CSS unitsCSS units For many of the remaining CSS values, we will need to be able For many of the remaining CSS values, we will need to be able

to specify size measurementsto specify size measurements– These are used to specify sizes:These are used to specify sizes:

» emem width of the letter ‘width of the letter ‘mm’’» exex height of the letter ‘height of the letter ‘xx’’» pxpx pixels (usually 72 per inch, but depends on monitor)pixels (usually 72 per inch, but depends on monitor)»%% percent of inherited sizepercent of inherited size

– These are also used to specify sizes, but don’t really make sense unless These are also used to specify sizes, but don’t really make sense unless you know the screen resolution:you know the screen resolution:» inin inchesinches» cmcm centimeterscentimeters» mmmm millimetersmillimeters» ptpt points (points (72pt 72pt == 1in 1in))» pcpc picas (picas (1pc 1pc == 12pt 12pt))


PaddingPadding PaddingPadding is the extra space around an element, but inside is the extra space around an element, but inside

the borderthe border To set the padding, use any or all of:To set the padding, use any or all of:

– padding-top:padding-top: sizesize– padding-bottom:padding-bottom: sizesize– padding-left:padding-left: sizesize– padding-right:padding-right: sizesize– padding:padding: sizesize to set all four sides at onceto set all four sides at once

sizesize is given in the units described earlieris given in the units described earlier Example:Example: sidebar {padding: 1em; padding-bottom: 5mm}sidebar {padding: 1em; padding-bottom: 5mm}


BordersBorders You can set border attributes with any or all of: You can set border attributes with any or all of: border-top:border-top:,,

border-bottom:border-bottom:,, border-left:border-left:,, border-right: border-right:,, and and border:border: (all at once)(all at once)

The attributes are:The attributes are:– The The thicknessthickness of the border: of the border: thinthin, , mediummedium (default), (default), thickthick, or a specific , or a specific

size (like size (like 3px3px))– The The stylestyle of the border: of the border: nonenone, , dotteddotted,, dashed dashed, , solidsolid, , doubledouble, ,

groovegroove, , ridgeridge, , insetinset, or , or outsetoutset– The The colorcolor of the border: one of the 16 predefined color names, or a hex of the border: one of the 16 predefined color names, or a hex

value with value with ##rrggbbrrggbb or or rgb(rgb(rr, , gg, , bb)) or or rgb(rgb(rr%,%, gg%,%, bb%)%) Example: Example: section {border-top: thin solid blue;}section {border-top: thin solid blue;} Note: the special styles (such as Note: the special styles (such as groovegroove) are not as cool as they ) are not as cool as they

soundsound


MarginsMargins

MarginsMargins are the extra space outside the border are the extra space outside the border Setting margins is analogous to setting paddingSetting margins is analogous to setting padding To set the margins, use any or all of:To set the margins, use any or all of:

– margin-top:margin-top: sizesize– margin-bottom:margin-bottom: sizesize– margin-left:margin-left: sizesize– margin-right:margin-right: sizesize– margin:margin: size size to set all four sides at onceto set all four sides at once


Sizing elementsSizing elements Every element has a Every element has a sizesize and a and a natural positionnatural position in in

which it would be displayedwhich it would be displayed You can set the height and width of You can set the height and width of

display:blockdisplay:block elements with: elements with:– height:height: sizesize– width:width: sizesize

You You cannotcannot set the height and width of inline set the height and width of inline elements (but you can set left and right margins)elements (but you can set left and right margins)

In HTML, you can set the height and width of In HTML, you can set the height and width of images and tables (images and tables (imgimg and and tabletable tags) tags)


Setting absolute positionSetting absolute position

To move an element to an absolute position on the To move an element to an absolute position on the pagepage– position: absoluteposition: absolute (this is required!) (this is required!) and alsoand also one one

or more ofor more of– left:left: size size or or right:right: sizesize– top:top: sizesize or or bottom:bottom: sizesize

position:absolute; left: 0in; top: 0in position:absolute; right: 0in; top: 0in

position:absolute; left: 0in; bottom: 0in position:absolute; right: 0in; bottom: 0in


Setting Absolute PositionSetting Absolute Position

Rules of absolute positioning:Rules of absolute positioning:– sizesize can be positive or negative can be positive or negative

– top:top: sizesize puts an element’s top puts an element’s top sizesize units from the page top units from the page top

– bottom:bottom: sizesize puts an element’s bottom puts an element’s bottom sizesize units from the units from the page bottompage bottom

– left:left: size size puts an element’s left side puts an element’s left side sizesize units from the left units from the left edge of the pageedge of the page

– right:right: sizesize puts an element’s right side puts an element’s right side sizesize units from the units from the right edge of the pageright edge of the page

– Changing an element’s absolute position removes it from the Changing an element’s absolute position removes it from the natural flow, so other elements fill in the gapnatural flow, so other elements fill in the gap

– You need to be careful not to overlap other elementsYou need to be careful not to overlap other elements


Setting Relative PositionSetting Relative Position

To move an element relative to its natural position, To move an element relative to its natural position, useuse– position: relativeposition: relative (this is required!) (this is required!) and alsoand also one or one or

more ofmore of– left:left: sizesize or or right:right: sizesize – top:top: sizesize or or bottom:bottom: sizesize


Setting Relative PositionSetting Relative Position

Rules of relative positioningRules of relative positioning– sizesize can be positive or negative can be positive or negative– to move to move leftleft, make , make leftleft negative or negative or rightright positive positive– to move to move rightright, make , make rightright negative or negative or leftleft positivepositive– to move to move upup, make , make toptop negative or negative or bottombottom positive positive– to move to move downdown, make , make bottombottom negative or negative or toptop positive positive– Setting an element’s position Setting an element’s position does not affectdoes not affect the position of the position of

other elements, soother elements, so» There will be a gap in the element’s original, natural There will be a gap in the element’s original, natural

positionposition» Unless you are very careful, your element will overlap Unless you are very careful, your element will overlap

other elementsother elements


Pseudo-elementsPseudo-elements Pseudo-elementsPseudo-elements describe “elements” that are describe “elements” that are

not actually between tags in the XML documentnot actually between tags in the XML document Syntax: Syntax: elementelement::pseudo-classpseudo-class {{......}}

– first-letterfirst-letter the first character in a block-level elementthe first character in a block-level element

– first-linefirst-line the first line in a block-level element (depends on the first line in a block-level element (depends on the browser’s current window size)the browser’s current window size)

Especially useful for XML (but not implemented in Especially useful for XML (but not implemented in Internet Explorer):Internet Explorer):– beforebefore adds material before an element adds material before an element

» Example: Example: author:before {content: "by "}author:before {content: "by "}

– afterafter adds material after an element adds material after an element


External style sheetsExternal style sheets

In HTML, within theIn HTML, within the <head><head> element: element:<link REL="STYLESHEET" <link REL="STYLESHEET" TYPE="text/css" HREF="TYPE="text/css" HREF="Style Sheet Style Sheet URLURL">">

As a PI in the prologue of an XML As a PI in the prologue of an XML document:document:<?xml-stylesheet href="<?xml-stylesheet href="Style Sheet URLStyle Sheet URL"" type="text/css"?>type="text/css"?>

Note: Note: "text/css""text/css" is the MIME typeis the MIME type


Some border styles and valuesSome border styles and values You can put borders around elementsYou can put borders around elements Borders have width, style, and colorBorders have width, style, and color

– These can be set individually:These can be set individually:» border-left-style:border-left-style:, , border-bottom-color:border-bottom-color:, etc., etc.

– Or a border at a time:Or a border at a time:» border-top:border-top:, , border-right:border-right:, etc., etc.

– Or all borders at once: Or all borders at once: border:border: Available values are:Available values are:

– border-width: thin | medium | thick |border-width: thin | medium | thick | lengthlength– border-style: none | hidden | dotted | dashed | border-style: none | hidden | dotted | dashed |

solid | double | groove | ridge | inset | outsetsolid | double | groove | ridge | inset | outset– border-color:border-color: colorcolor


PaddingPadding

Padding is used to set the space around an Padding is used to set the space around an elementelement– You can set padding individually:You can set padding individually:

padding-top:padding-top:, , padding-left:padding-left:,,padding-bottom:padding-bottom:, , padding-right:padding-right:

– Or all at once: Or all at once: padding:padding:– Allowable values: Allowable values: lengthlength || 1212%%


Visual Web DeveloperVisual Web Developer


Visual Web DeveloperVisual Web Developer

Microsoft IDE (Integrated Development Microsoft IDE (Integrated Development Environment) for Web applicationsEnvironment) for Web applications

Replaces most programming tasks with drag and Replaces most programming tasks with drag and drop operationsdrop operations

Uses CSS, Themes and Skins to provide Uses CSS, Themes and Skins to provide consistent site look and feelconsistent site look and feel

Site look and feel is consolidated in the concept Site look and feel is consolidated in the concept of Master Pages.of Master Pages.


Master Page and Content PageMaster Page and Content Page


Basic VWD ComponentsBasic VWD Components


Basic VWD ComponentsBasic VWD Components

Web Form:Web Form: a standard a standard .aspx.aspx (content) page (content) page Master Page:Master Page: adds consistent site look and feeladds consistent site look and feel Style Sheet:Style Sheet: provides styling (colors, fonts …)provides styling (colors, fonts …) Web Configuration file:Web Configuration file: settings for the sitesettings for the site Site Map:Site Map: XML file that lists all the pagesXML file that lists all the pages Global Application Class:Global Application Class: handles events for site handles events for site SQL Database:SQL Database: storage of the data for the site storage of the data for the site


VWD Navigation ControlsVWD Navigation Controls


Client Side ScriptingClient Side Scripting


Client Side ScriptingClient Side Scripting

Static HTML: limited to formatting of Static HTML: limited to formatting of (unchanging) documents(unchanging) documents

Dynamic HTML: incorporates user Dynamic HTML: incorporates user interactioninteraction– By client-side scriptingBy client-side scripting

and/orand/or– By server-side scriptingBy server-side scripting


Client Side ScriptingClient Side Scripting Web Programming:Web Programming: due to the due to the client-server client-server

architecturearchitecture underlying the operation of the underlying the operation of the internet, “programming” can refer tointernet, “programming” can refer to – client-side programming (client-side scripting)client-side programming (client-side scripting)

» Code is executed within (by) the browser (= internet client)Code is executed within (by) the browser (= internet client)

– server-side programming (server-side scripting)server-side programming (server-side scripting)» Code is executed by a Code is executed by a web serverweb server and the result is an HTML and the result is an HTML

page (possibly w/ client-side scripts embedded in it) which page (possibly w/ client-side scripts embedded in it) which is sent to client (browser)is sent to client (browser)


Client Side ScriptingClient Side Scripting Executable code embedded in HTMLExecutable code embedded in HTML Browsers have a built-in interpreter that Browsers have a built-in interpreter that

executes code.executes code. Difference: Interpreter and CompilerDifference: Interpreter and Compiler

– Compiler: converts code into new .exe fileCompiler: converts code into new .exe file– Interpreter: executes code line-by-lineInterpreter: executes code line-by-line

The code is written in a scripting syntax The code is written in a scripting syntax (language) called JavaScript(language) called JavaScript


JavaScriptJavaScript Originally developed NetscapeOriginally developed Netscape

- became Internet standard, all browsers support it- became Internet standard, all browsers support it Modeled after JavaModeled after Java JavaScript syntax is Java-like, but NOT JavaJavaScript syntax is Java-like, but NOT Java

- not Object Oriented- not Object Oriented

-doesn’t rely on JDK-doesn’t rely on JDK

-very loose w/ type-checking (not -very loose w/ type-checking (not strongly typedstrongly typed))

-hard to debug (no debugger)-hard to debug (no debugger)


Basic JavaScript SyntaxBasic JavaScript Syntax

Scripts are embedded in a pair ofScripts are embedded in a pair of

<script> … </script><script> … </script> tags tags Scripts can be place in HTML head Scripts can be place in HTML head oror body body Code is placed in HTML commentCode is placed in HTML comment

<script type=«text/javaScript« ><script type=«text/javaScript« >

// code here ...// code here ...

</script></script>

language attribute


Conditional StatementsConditional Statements IF IF Statement Statement

if ( if ( cond expressioncond expression ) { statements } else ) { statements } else

{ statements }{ statements }

When the block delimiters{} are excluded, JavaScript When the block delimiters{} are excluded, JavaScript assumes there is a single line scopeassumes there is a single line scope

SWITCH SWITCH Statement Statement

switch (switch (condcond) { case 1: ... break; case 2: ... break; ) { case 1: ... break; case 2: ... break;

default: ... }default: ... } If If breakbreak is omitted, the code in the remaining case is omitted, the code in the remaining case

statement(s) is automatically executed (until a break is statement(s) is automatically executed (until a break is encountered or the switch statement is complete).encountered or the switch statement is complete).


Repetition StatementsRepetition Statements FOR FOR Loop Loop

for (var i=0; i<10; i++) for (var i=0; i<10; i++)

{ ... } { ... } WHILE WHILE Loop Loop

var i=0 ;var i=0 ;

while (i<10) while (i<10)

{ ... { ...

i++ ;i++ ;

}}

122

JavaScript JavaScript ArrayArray Object Object

Property/MethodProperty/Method EffectEffect

lengthlength Size of arraySize of array

Array()Array() ConstructorConstructor

join(delimeter)join(delimeter) Create string from arrayCreate string from array

reverse()reverse() Reverse orderReverse order

sort(compareFunction)sort(compareFunction) Sort (lex. if no comp.)Sort (lex. if no comp.)

push(element), pop()push(element), pop() Add/remove at endAdd/remove at end

unshift(element)unshift(element) Add at frontAdd at front

slice(lower, upper)slice(lower, upper) Extract subarrayExtract subarray

concat(arrayObject)concat(arrayObject) Append arrayObjectAppend arrayObject

123

JavaScript JavaScript StringString Object Object

Property/MethodProperty/Method EffectEffect

lengthlength Length of stringLength of string

big(), small()big(), small() Increase,decrease sizeIncrease,decrease size

bold(), italics()bold(), italics() Select font typeSelect font type

blink()blink() Blink effectBlink effect

strike()strike() Strikethrough fontStrikethrough font

fixed()fixed() Teletype fontTeletype font

sub(), sup()sub(), sup() Sub/SuperscriptSub/Superscript

fontcolor(“colorName”)fontcolor(“colorName”) Font colorFont color

fontsize(1..7)fontsize(1..7) Font sizeFont size

124

JavaScript JavaScript StringString Object Object

MethodMethod EffectEffect

charAt(), charCodeAt()charAt(), charCodeAt() char, ASCII codechar, ASCII code

fromCharCode()fromCharCode() Convert from ASCIIConvert from ASCII

indexOf(), lastIndexOf()indexOf(), lastIndexOf() Find position of charFind position of char

concat()concat() Concatenate stringsConcatenate strings

split(delimeter)split(delimeter) TokenizeTokenize

slice()slice() SubstringSubstring

substr/substring(from, to)substr/substring(from, to) Return substringReturn substring

toUpperCase() toLowerCase()toUpperCase() toLowerCase() Convert to upper/lowerConvert to upper/lower

anchor(), link()anchor(), link() Create anchor/linkCreate anchor/link

125

JavaScript JavaScript DateDate Object Object

AttributeAttribute EffectEffect

getDate()getDate() Returns value between 1 and 31Returns value between 1 and 31

getDay()getDay() Returns weekday as 0 (Sunday) …6Returns weekday as 0 (Sunday) …6

getMonth()getMonth() Returns value between 0 and 11Returns value between 0 and 11

getYear()getYear() Returns century year 0 … 99Returns century year 0 … 99

getFullYear()getFullYear() Returns year 0 … 9999Returns year 0 … 9999

getTime()getTime() Milliseconds since Jan 1, 1970Milliseconds since Jan 1, 1970

getHours()getHours() Returns value between 0 and 23Returns value between 0 and 23

getMinutes()getMinutes() Returns value between 0 and 59Returns value between 0 and 59

getSeconds()getSeconds() Returns value between 0 and 59Returns value between 0 and 59

126



Date()Date() Date constructorDate constructor

setDate()setDate() Sets value between 1 and 31Sets value between 1 and 31

setMonth()setMonth() Sets value between 1 and 11Sets value between 1 and 11

setYear()setYear() Sets 20Sets 20thth century year 0 … 99 century year 0 … 99

setFullYear()setFullYear() Sets year 0 … 9999Sets year 0 … 9999

setTime()setTime() Set milliseconds since Jan 1, 1970Set milliseconds since Jan 1, 1970

setHours()setHours() Sets value between 0 and 23Sets value between 0 and 23

setMinutes()setMinutes() Sets value between 0 and 59Sets value between 0 and 59

setSeconds()setSeconds() Sets value between 0 and 59Sets value between 0 and 59

127



setUTC()setUTC() Set UTC valueSet UTC value

getTimeZoneOffset()getTimeZoneOffset() Time Zone offsetTime Zone offset

toLocaleString()toLocaleString() Locale StringLocale String

toGMTString()toGMTString() GMT stringGMT string

Date.parse()Date.parse() Convert to stringConvert to string

Date.UTC()Date.UTC() Get UTC valueGet UTC value

UTC =UTC = Coordinated Universal TimeCoordinated Universal Time

different from GMT due to thedifferent from GMT due to the

irregular rotation of the Earthirregular rotation of the Earth


Domain Object ModelDomain Object Model Main JavaScript DOM objectsMain JavaScript DOM objects

129

JavaScript JavaScript WindowWindow Object Object


toolbartoolbar Back/Forward/Home/Edit buttonsBack/Forward/Home/Edit buttons

locationlocation Location window below toolbarLocation window below toolbar

directoriesdirectories What’s Hot/Cool etc. buttonsWhat’s Hot/Cool etc. buttons

statusstatus Window’s Status barWindow’s Status bar

menubarmenubar File, Edit, View pulldown menusFile, Edit, View pulldown menus

scrollbarsscrollbars Scrollbar displayingScrollbar displaying

resizableresizable Resize handlesResize handles

width = width = numnum Window width in pixelsWindow width in pixels

height = height = numnum Window height in pixelsWindow height in pixels


Server Side ScriptingServer Side Scripting



Serving Static Web PagesServing Static Web Pages

Static Web Page Static Web Page RequestRequest and and ResponseResponse Operations Operations



Serving Dynamic Web PagesServing Dynamic Web Pages

Dynamic Web Page Dynamic Web Page RequestRequest and and ResponseResponse Operations Operations


Server Side ScriptingServer Side ScriptingHTML generation is decoupled HTML generation is decoupled from Web Server functionalityfrom Web Server functionality

Other engines may be used (Servlet, JSP, PHP …)Other engines may be used (Servlet, JSP, PHP …)


ASP.NET OperationsASP.NET Operations

ASP.NET ASP.NET RequestRequest and and ResponseResponse Operations Operations


Data Access in Visual Web Data Access in Visual Web DeveloperDeveloper

The data access related controls are in the Data The data access related controls are in the Data tab of the Toolbox.tab of the Toolbox.

Data-bound Display Controls

Data Source Controls


GridViewGridView

GridView provides a tabular display of records.GridView provides a tabular display of records.– Can be editable or read-onlyCan be editable or read-only


FormViewFormView

FormView provides a data-bound form for display.FormView provides a data-bound form for display.– Can be editable (with Update link or button) or read-onlyCan be editable (with Update link or button) or read-only


DetailsViewDetailsView

DetailsView provides a DetailsView provides a Master – DetailMaster – Detail design design

Selected Record

Select Buttons

DetailsView

GridView


HTMLHTML Hypertext Mark-up Language – formatting specification for hyperdocumentsHypertext Mark-up Language – formatting specification for hyperdocuments Current version DOCTYPE header: Current version DOCTYPE header:

Based on Based on tagstags– Container tags: Container tags: <tag> …. </tag><tag> …. </tag>– Inline tags:Inline tags: <tag/> <tag/>

Comments: not rendered but carry informationComments: not rendered but carry information <>

<!DOCTYPE HTML PUBLIC =”-//w3c/DTD XHTML 1.0 Strict//EN http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd>