Internet Programming1 COMP SCI 331. Internet Programming2 My name is … My name is … How to find...
-
Upload
zoe-cotterell -
Category
Documents
-
view
216 -
download
0
Transcript of Internet Programming1 COMP SCI 331. Internet Programming2 My name is … My name is … How to find...
Internet Programming 1
Internet ProgrammingInternet Programming
COMP SCI 331COMP SCI 331
Internet Programming 2
My name is …My name is … How to find meHow to find me Course PoliciesCourse Policies BackgroundBackground Your turnYour turn
IntroductionsIntroductions
Internet Programming 3
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 Programming 4
Internet Physical LayoutInternet Physical Layout
Internet Programming 5
The First Version of the InternetThe First Version of the Internet
Internet Programming 6
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 Programming 7
Internet ProtocolsInternet Protocols
Internet Programming 8
TCP/IP ProtocolTCP/IP Protocol
IP Header StructureIP Header Structure
Internet Programming 9
TCP/IP ProtocolTCP/IP Protocol
TCP Header StructureTCP Header Structure
Internet Programming 10
Domain Name Server (DNS)Domain Name Server (DNS)
Internet Programming 11
Some Domain Name SuffixesSome Domain Name Suffixes
Internet Programming 12
LAN organizationLAN organization
Internet and Local Area NetworksInternet and Local Area Networks
Internet Programming 13
Internet and Local Area NetworksInternet and Local Area Networks
Router provides TCP/IP connection to LANRouter provides TCP/IP connection to LAN
Internet Programming 14
Multiple Accounts on a ServerMultiple Accounts on a Server
Internet Programming 15
Multiple Domains on a ServerMultiple Domains on a Server
Internet Programming 16
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
Internet Programming 17
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
Internet Programming 18
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
Internet Programming 19
IP Addresses and RoutingIP Addresses and Routing Experiment: look at Internet AddressesExperiment: look at Internet Addresses
Internet Programming 20
IP Addresses and RoutingIP Addresses and Routing Experiment: trace the route of a packageExperiment: trace the route of a package
Internet Programming 21
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
Internet Programming 22
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.
Internet Programming 23
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.
Internet Programming 24
Internet Programming 25
HTML and XHTMLHTML and XHTML
Internet Programming 26
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 <<!-- …!-- …comment text herecomment text here …-- …-->>
<!DOCTYPE HTML PUBLIC =”-//w3c/DTD XHTML 1.0 Strict//EN http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Internet Programming 27
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
Internet Programming 28
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
Internet Programming 29
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
Internet Programming 30
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
Internet Programming 31
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>
Internet Programming 32
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
Internet Programming 33
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>
Internet Programming 34
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
Internet Programming 35
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
Internet Programming 36
Nesting XML TagsNesting XML Tags The following tags are properly nested:The following tags are properly nested:
<root> <child> <subchild>
...
</subchild> </child></root>
Internet Programming 37
Improper NestingImproper Nesting The following nesting of tags is The following nesting of tags is wrongwrong::
<root> <child> <subchild>
...
</child> </subchild></root>
Internet Programming 38
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
Internet Programming 39
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
Internet Programming 40
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
Internet Programming 41
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
<h3> … </h3><h3> … </h3> Header 3Header 3
<h4> … </h4><h4> … </h4> Header 4Header 4
<h5> … </h5><h5> … </h5> Header 5Header 5
<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
AttributeAttribute ValuesValues DefaultDefault
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
AttributeAttribute ValuesValues DefaultDefault
hrefhref absolute URLabsolute URL nonenone
relative URLrelative URL
fragment identifierfragment identifier
namename textual nametextual name nonenone
<a> … </a><a> … </a>
Internet Programming 48
Site OrganizationSite Organization
No planned structureNo planned structure
Internet Programming 49
Site OrganizationSite Organization
Linear linking structureLinear linking structure
Internet Programming 50
Site OrganizationSite OrganizationHierarchical structureHierarchical structure
Internet Programming 51
Site OrganizationSite Organization
PagesPages LinksLinks
Internet Programming 52
Site OrganizationSite Organization
PagesPages LinksLinks
53
ImagesImages
AttributeAttribute ValuesValues DefaultDefault
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
AttributeAttribute ValuesValues DefaultDefault
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
AttributeAttribute ValuesValues DefaultDefault
alignalign left, right, centerleft, right, center leftleft
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
AttributeAttribute ValuesValues DefaultDefault
alignalign left, right, centerleft, right, center leftleft
valignvalign top, middle, bottomtop, middle, bottom middlemiddle
bgcolorbgcolor named or hex colornamed or hex color web inheritedweb inherited
<tr> … </tr><tr> … </tr>
57
Table Cell and HeaderTable Cell and Header
AttributeAttribute ValuesValues DefaultDefault
alignalign left, right, centerleft, right, center leftleft
valignvalign top, middle, bottomtop, middle, bottom middlemiddle
backgroundbackground URL or imageURL or image --
bgcolorbgcolor named or hex colornamed or hex color web inheritedweb inherited
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>
Internet Programming 58
Frameset and FrameFrameset and Frame
<!-- this is doc1.html --> <!-- this is doc1.html --> <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
AttributeAttribute ValuesValues DefaultDefault
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>
AttributeAttribute ValuesValues DefaultDefault
targettarget name of framename of frame _self_self
_self, _parent_self, _parent
<a> … </a><a> … </a>
60
Frame AttributesFrame Attributes
AttributeAttribute ValuesValues DefaultDefault
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>
Internet Programming 61
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
Intro to Computing and Internet 63
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”
Intro to Computing and Internet 64
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
Intro to Computing and Internet 65
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
Intro to Computing and Internet 66
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
Internet Programming 67
Cascading Style SheetsCascading Style Sheets
Internet Programming 68
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
Internet Programming 69
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
Internet Programming 70
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>
Internet Programming 71
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
Internet Programming 73
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 */
Internet Programming 74
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 */
Internet Programming 75
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)
Internet Programming 76
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
Internet Programming 78
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"] { ...... }}
Internet Programming 79
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}
Internet Programming 80
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">
Internet Programming 81
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>
Internet Programming 82
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
Internet Programming 83
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
Internet Programming 84
Embedded style sheetsEmbedded style sheets
In HTML, within theIn HTML, within the <head><head> element: element: <style TYPE="text/css"><style TYPE="text/css"> <!-- <!-- CSS Style SheetCSS Style Sheet --> --></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
Internet Programming 85
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
Internet Programming 86
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
Internet Programming 87
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
Internet Programming 90
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 }
Internet Programming 91
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
Internet Programming 92
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
Internet Programming 93
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
Internet Programming 94
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))
Internet Programming 96
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}
Internet Programming 97
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
Internet Programming 98
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
Internet Programming 99
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)
Internet Programming 100
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
Internet Programming 101
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
Internet Programming 102
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
Internet Programming 103
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
Internet Programming 104
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
Internet Programming 105
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
Internet Programming 106
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
Internet Programming 107
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%%
Internet Programming 108
Visual Web DeveloperVisual Web Developer
Internet Programming 109
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.
Internet Programming 110
Master Page and Content PageMaster Page and Content Page
Internet Programming 111
Basic VWD ComponentsBasic VWD Components
Internet Programming 112
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
Internet Programming 113
VWD Navigation ControlsVWD Navigation Controls
Internet Programming 114
Client Side ScriptingClient Side Scripting
Internet Programming 115
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
Internet Programming 116
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)
Internet Programming 117
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
Internet Programming 118
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)
Internet Programming 119
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
Internet Programming 120
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).
Internet Programming 121
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
JavaScript JavaScript DateDate Object Object
AttributeAttribute EffectEffect
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
JavaScript JavaScript DateDate Object Object
AttributeAttribute EffectEffect
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
Internet Programming 128
Domain Object ModelDomain Object Model Main JavaScript DOM objectsMain JavaScript DOM objects
129
JavaScript JavaScript WindowWindow Object Object
AttributeAttribute EffectEffect
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
Internet Programming 130
Server Side ScriptingServer Side Scripting
Internet Programming 131
Server Side ScriptingServer Side Scripting
Serving Static Web PagesServing Static Web Pages
Static Web Page Static Web Page RequestRequest and and ResponseResponse Operations Operations
Internet Programming 132
Server Side ScriptingServer Side Scripting
Serving Dynamic Web PagesServing Dynamic Web Pages
Dynamic Web Page Dynamic Web Page RequestRequest and and ResponseResponse Operations Operations
Internet Programming 133
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 …)
Internet Programming 134
ASP.NET OperationsASP.NET Operations
ASP.NET ASP.NET RequestRequest and and ResponseResponse Operations Operations
Internet Programming 135
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
Internet Programming 136
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
Internet Programming 137
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
Internet Programming 138
DetailsViewDetailsView
DetailsView provides a DetailsView provides a Master – DetailMaster – Detail design design
Selected Record
Select Buttons
DetailsView
GridView
Internet Programming 139
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 <<!-- …!-- …comment text herecomment text here …-- …-->>
<!DOCTYPE HTML PUBLIC =”-//w3c/DTD XHTML 1.0 Strict//EN http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd>