internet programming1 comp sci 331. internet programming2 my name is … my name is … how to find...
TRANSCRIPT
![Page 1: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/1.jpg)
Internet Programming 1
Internet ProgrammingInternet Programming
COMP SCI 331COMP SCI 331
![Page 2: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/2.jpg)
Internet Programming 2
My name is …My name is … How to find meHow to find me Course PoliciesCourse Policies BackgroundBackground Your turnYour turn
IntroductionsIntroductions
![Page 3: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/4.jpg)
Internet Programming 4
Internet Physical LayoutInternet Physical Layout
![Page 5: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/5.jpg)
Internet Programming 5
The First Version of the InternetThe First Version of the Internet
![Page 6: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/7.jpg)
Internet Programming 7
Internet ProtocolsInternet Protocols
![Page 8: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/8.jpg)
Internet Programming 8
TCP/IP ProtocolTCP/IP Protocol
IP Header StructureIP Header Structure
![Page 9: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/9.jpg)
Internet Programming 9
TCP/IP ProtocolTCP/IP Protocol
TCP Header StructureTCP Header Structure
![Page 10: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/10.jpg)
Internet Programming 10
Domain Name Server (DNS)Domain Name Server (DNS)
![Page 11: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/11.jpg)
Internet Programming 11
Some Domain Name SuffixesSome Domain Name Suffixes
![Page 12: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/12.jpg)
Internet Programming 12
LAN organizationLAN organization
Internet and Local Area NetworksInternet and Local Area Networks
![Page 13: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/13.jpg)
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
![Page 14: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/14.jpg)
Internet Programming 14
Multiple Accounts on a ServerMultiple Accounts on a Server
![Page 15: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/15.jpg)
Internet Programming 15
Multiple Domains on a ServerMultiple Domains on a Server
![Page 16: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/17.jpg)
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
![Page 18: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/18.jpg)
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
![Page 19: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/19.jpg)
Internet Programming 19
IP Addresses and RoutingIP Addresses and Routing Experiment: look at Internet AddressesExperiment: look at Internet Addresses
![Page 20: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/20.jpg)
Internet Programming 20
IP Addresses and RoutingIP Addresses and Routing Experiment: trace the route of a packageExperiment: trace the route of a package
![Page 21: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/21.jpg)
Internet Programming 21
Web Design GuidelinesWeb Design Guidelines
![Page 22: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/24.jpg)
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
![Page 25: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/25.jpg)
Internet Programming 25
HTML and XHTMLHTML and XHTML
![Page 26: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/26.jpg)
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>
![Page 27: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/27.jpg)
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
![Page 28: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/28.jpg)
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
![Page 29: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/29.jpg)
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
![Page 30: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/30.jpg)
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
![Page 31: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/31.jpg)
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>
![Page 32: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/32.jpg)
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
![Page 33: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/33.jpg)
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>
![Page 34: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/34.jpg)
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
![Page 35: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/35.jpg)
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
![Page 36: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/36.jpg)
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>
![Page 37: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/37.jpg)
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>
![Page 38: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/38.jpg)
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
![Page 39: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/39.jpg)
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
![Page 40: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/40.jpg)
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
![Page 41: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/41.jpg)
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
![Page 42: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/42.jpg)
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
![Page 43: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/43.jpg)
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
![Page 44: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/44.jpg)
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)
![Page 45: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/45.jpg)
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
![Page 46: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/46.jpg)
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”
![Page 47: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/47.jpg)
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>
![Page 48: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/48.jpg)
Internet Programming 48
Site OrganizationSite Organization
No planned structureNo planned structure
![Page 49: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/49.jpg)
Internet Programming 49
Site OrganizationSite Organization
Linear linking structureLinear linking structure
![Page 50: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/50.jpg)
Internet Programming 50
Site OrganizationSite OrganizationHierarchical structureHierarchical structure
![Page 51: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/51.jpg)
Internet Programming 51
Site OrganizationSite Organization
PagesPages LinksLinks
![Page 52: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/52.jpg)
Internet Programming 52
Site OrganizationSite Organization
PagesPages LinksLinks
![Page 53: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/53.jpg)
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>
![Page 54: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/54.jpg)
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
![Page 55: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/55.jpg)
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>
![Page 56: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/56.jpg)
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>
![Page 57: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/57.jpg)
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>
![Page 58: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/58.jpg)
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>
![Page 59: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/59.jpg)
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>
![Page 60: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/60.jpg)
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>
![Page 61: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/61.jpg)
Internet Programming 61
HTML FormsHTML Forms
![Page 62: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/62.jpg)
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
![Page 63: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/63.jpg)
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”
![Page 64: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/64.jpg)
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
![Page 65: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/65.jpg)
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
![Page 66: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/66.jpg)
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
![Page 67: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/67.jpg)
Internet Programming 67
Cascading Style SheetsCascading Style Sheets
![Page 68: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/68.jpg)
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
![Page 69: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/69.jpg)
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
![Page 70: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/70.jpg)
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>
![Page 71: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/71.jpg)
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
![Page 72: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/72.jpg)
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
![Page 73: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/73.jpg)
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 */
![Page 74: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/74.jpg)
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 */
![Page 75: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/75.jpg)
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)
![Page 76: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/76.jpg)
Internet Programming 76
Example of overridingExample of overriding
![Page 77: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/77.jpg)
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
![Page 78: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/78.jpg)
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"] { ...... }}
![Page 79: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/79.jpg)
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}
![Page 80: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/80.jpg)
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">
![Page 81: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/81.jpg)
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>
![Page 82: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/82.jpg)
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
![Page 83: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/83.jpg)
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
![Page 84: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/84.jpg)
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
![Page 85: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/85.jpg)
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
![Page 86: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/86.jpg)
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
![Page 87: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/87.jpg)
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
![Page 88: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/88.jpg)
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’
![Page 89: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/89.jpg)
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
![Page 90: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/90.jpg)
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 }
![Page 91: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/91.jpg)
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
![Page 92: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/92.jpg)
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
![Page 93: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/93.jpg)
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
![Page 94: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/94.jpg)
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
![Page 95: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/95.jpg)
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))
![Page 96: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/96.jpg)
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}
![Page 97: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/97.jpg)
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
![Page 98: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/98.jpg)
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
![Page 99: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/99.jpg)
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)
![Page 100: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/100.jpg)
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
![Page 101: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/101.jpg)
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
![Page 102: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/102.jpg)
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
![Page 103: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/103.jpg)
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
![Page 104: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/104.jpg)
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
![Page 105: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/105.jpg)
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
![Page 106: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/106.jpg)
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
![Page 107: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/107.jpg)
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%%
![Page 108: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/108.jpg)
Internet Programming 108
Visual Web DeveloperVisual Web Developer
![Page 109: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/109.jpg)
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.
![Page 110: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/110.jpg)
Internet Programming 110
Master Page and Content PageMaster Page and Content Page
![Page 111: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/111.jpg)
Internet Programming 111
Basic VWD ComponentsBasic VWD Components
![Page 112: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/112.jpg)
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
![Page 113: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/113.jpg)
Internet Programming 113
VWD Navigation ControlsVWD Navigation Controls
![Page 114: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/114.jpg)
Internet Programming 114
Client Side ScriptingClient Side Scripting
![Page 115: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/115.jpg)
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
![Page 116: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/116.jpg)
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)
![Page 117: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/117.jpg)
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
![Page 118: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/118.jpg)
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)
![Page 119: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/119.jpg)
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
![Page 120: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/120.jpg)
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).
![Page 121: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/121.jpg)
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++ ;
}}
![Page 122: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/122.jpg)
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
![Page 123: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/123.jpg)
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
![Page 124: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/124.jpg)
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
![Page 125: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/125.jpg)
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
![Page 126: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/126.jpg)
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
![Page 127: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/127.jpg)
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
![Page 128: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/128.jpg)
Internet Programming 128
Domain Object ModelDomain Object Model Main JavaScript DOM objectsMain JavaScript DOM objects
![Page 129: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/129.jpg)
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
![Page 130: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/130.jpg)
Internet Programming 130
Server Side ScriptingServer Side Scripting
![Page 131: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/131.jpg)
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
![Page 132: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/132.jpg)
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
![Page 133: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/133.jpg)
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 …)
![Page 134: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/134.jpg)
Internet Programming 134
ASP.NET OperationsASP.NET Operations
ASP.NET ASP.NET RequestRequest and and ResponseResponse Operations Operations
![Page 135: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/135.jpg)
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
![Page 136: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/136.jpg)
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
![Page 137: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/137.jpg)
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
![Page 138: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/138.jpg)
Internet Programming 138
DetailsViewDetailsView
DetailsView provides a DetailsView provides a Master – DetailMaster – Detail design design
Selected Record
Select Buttons
DetailsView
GridView
![Page 139: 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](https://reader030.vdocuments.site/reader030/viewer/2022013100/5516a25a550346f0208b4ce6/html5/thumbnails/139.jpg)
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>