Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

1 Internet Programming1 COMP SCI 331

2 Internet Programming2 My name is … My name is … How to find me How to find me Course Policies Course Policies Background Background Your turn Your turn Introductions

3 Internet Programming3 The room will be locked but students who take a class in that room will have card access during the following times as long as no class is in session: The room will be locked but students who take a class in that room will have card access during the following times as long as no class is in session: –1. Monday through Friday. 7:00 AM - 9:30 PM. –2. Saturday and Sunday 9:00 AM through 4:30 PM There is no access during other hours. 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 projection equipment. We CAN check who logged into them. Students are NOT to use the instructor workstations nor the projection equipment. We CAN check who logged into them. No software is to be installed on any of the machines. Installing software will result in your access being revoked. Be aware, that it is easy to find out who was logged into a machine when unauthorized software was installed. No software is to be installed on any of the machines. Installing software will result in your access being revoked. Be aware, that it is easy to find out who was logged into a machine when unauthorized software was installed. No food or drink is allowed in the room at any time. No food or drink is allowed in the room at any time. No one who does not have card access should be let into the room. No one who does not have card access should be let into the room. Mac 122 Policies

4 Internet Programming4 Internet Physical Layout

5 Internet Programming5 The First Version of the Internet

6 Internet Programming6 Internet History ARPA = DoD Advanced Research Projects Agency funds ARPANet. FTP and only ARPA = DoD Advanced Research Projects Agency funds ARPANet. FTP and only First node: UCLA in 1969 First node: UCLA in : 26 computers form the ARPAnet 1971: 26 computers form the ARPAnet 1982: TCP/IP becomes the standard protocol. First proposed in : TCP/IP becomes the standard protocol. First proposed in : National Science Foundation (NSF) sponsors the NSFnet that replaces ARPANet 1986: National Science Foundation (NSF) sponsors the NSFnet that replaces ARPANet 1990: commercial companies are allowed to join 1990: commercial companies are allowed to join

7 Internet Programming7 Internet Protocols

8 Internet Programming8 TCP/IP Protocol IP Header Structure IP Header Structure

9 Internet Programming9 TCP/IP Protocol TCP Header Structure TCP Header Structure

10 Internet Programming10 Domain Name Server (DNS)

11 Internet Programming11 Some Domain Name Suffixes

12 Internet Programming12 LAN organization LAN organization Internet and Local Area Networks

13 Internet Programming13 Internet and Local Area Networks Router provides TCP/IP connection to LAN Router provides TCP/IP connection to LAN

14 Internet Programming14 Multiple Accounts on a Server

15 Internet Programming15 Multiple Domains on a Server

16 Internet Programming16 Current version of TCP/IP is IPv4 Current version of TCP/IP is IPv4 More than 100 countries are on the Internet More than 100 countries are on the Internet Over 100 million nodes Over 100 million nodes Internet address space is running out Internet address space is running out –There are assigned but underused domains IETF (Internet Engineering Task Force) has issued the new spec (August 10, 1998, Toronto) IETF (Internet Engineering Task Force) has issued the new spec (August 10, 1998, Toronto) IPv6 also known as IPng IPv6 also known as IPng Internet Next Generation

17 Internet Programming17 Expanded Routing and Addressing Capabilities Expanded Routing and Addressing Capabilities –increases the IP address size from 32 bits to 128 bits A new type of address called a "anycast address A new type of address called a "anycast address –allows nodes to control the path which their traffic flows New Header Format New Header Format –Although IPng addresses are four times longer than the IPv4 addresses, the IPng header is only twice the size of the IPv4 header –some IPv4 fields are dropped or made optional IPv4 vs. IPv6 IPv6 will provide

18 Internet Programming18 Improved Support for Options Improved Support for Options –more efficient forwarding –less stringent limits on the length of options –greater flexibility for introducing new options Quality-of-Service Capabilities Quality-of-Service Capabilities –enable the labeling of packets belonging to particular traffic "flows" Authentication and Privacy Capabilities Authentication and Privacy Capabilities –extensions to provide support for authentication, data integrity and confidentiality IPv6 Additional Capabilities

19 Internet Programming19 IP Addresses and Routing Experiment: look at Internet Addresses Experiment: look at Internet Addresses

20 Internet Programming20 IP Addresses and Routing Experiment: trace the route of a package Experiment: trace the route of a package

21 Internet Programming21 Web Design Guidelines

22 Dont make users think Dont squander users patience Focus users attention Expose features Communicate effectively Use white space Use conventions Test early and often Internet Programming22

23 Usability Commandments You dont use pop-ups. You dont change users window size. You dont use too small font sizes. You be concise. – –Long passages are harder to read. Internet Programming23

24 Usability Commandments You dont have unclear link text. – –Links have to be precise and lead to the destination they describe. Ambiguous or hidden links should be avoided. You dont have dead links. You have at most one animation per page. You make it easy to contact you. Internet Programming24

25 Internet Programming25 HTML and XHTML

26 Internet Programming26 HTML Hypertext Mark-up Language – formatting specification for hyperdocuments Hypertext Mark-up Language – formatting specification for hyperdocuments Current version DOCTYPE header: Current version DOCTYPE header: Based on tags Based on tags –Block tags: …. –Block tags: …. –Inline tags: –Inline tags: Comments: not rendered but carry information Comments: not rendered but carry information

27 Internet Programming27 HTML Versions Hypertext Mark-up Language – formatting specification for hyperdocuments Hypertext Mark-up Language – formatting specification for hyperdocuments HTML has gone through several versions HTML has gone through several versions The last one is HTML 4.0 but this HTML standards are being replaced by XHMTL standards The last one is HTML 4.0 but this HTML standards are being replaced by XHMTL standards XHMTL is HTML that confirms with XML syntax rules XHMTL is HTML that confirms with XML syntax rules DHTML is a reference to HTML with interactive (dynamic) content DHTML is a reference to HTML with interactive (dynamic) content –Most often created by JavaScript –There are other client-side scripting languages

28 Internet Programming28 The HTML Source Document All web pages are entirely plain-text documents All web pages are entirely plain-text documents Special formatting is imparted through the use of tags Special formatting is imparted through the use of tags HTML files should end in.htm and not contain any spaces in the file name HTML files should end in.htm and not contain any spaces in the file name You can open a HTML file by dragging the file icon to an open browser window You can open a HTML file by dragging the file icon to an open browser window

29 Internet Programming29 Writing and Indenting HTML Code Any text editor can be used to create an HMTL document – even Notepad Any text editor can be used to create an HMTL document – even Notepad We will use MS Visual Web Developer We will use MS Visual Web Developer –Provides useful syntax highlighting and help –MS Expression Web, NVU and many other Web editors exist Use lower case letters for your tags Use lower case letters for your tags Indenting your code makes nesting tags easier Indenting your code makes nesting tags easier

30 Internet Programming30 Block-level vs. Inline Elements Block-level elements are designed to define a complete section of text Block-level elements are designed to define a complete section of text –For example the header,, and tags are block elements Inline elements affect a small text area Inline elements affect a small text area –Can be as small as a single character –More often a word, phrase or sentence –The,, and tags are inline elements

31 Internet Programming31 HTML Document Skeleton The header: contains information about the document, not content The body: contains the contents of the document

32 Internet Programming32 XHTML XHTML was introduced to supercede HTML and has stricter rules XHTML was introduced to supercede HTML and has stricter rules Standardized version of HTML by the W3C Standardized version of HTML by the W3C Based on XML Based on XML –XML is not a formatting mark-up language –Its function is to define data formats and store data XML has much stricter syntax rules than HTML XML has much stricter syntax rules than HTML XHTML is HTML that complies with strict XML syntax rules XHTML is HTML that complies with strict XML syntax rules

33 Internet Programming33 XHTML Document Skeleton The header: contains information about the document, not content The body: contains the contents of the document

34 Internet Programming34 XHTML Syntax Rules Documents start with an XML declaration Documents start with an XML declaration The html tag has an XML namespace specification The html tag has an XML namespace specification Tags are case sensitive Tags are case sensitive Attribute values must always be quoted Attribute values must always be quoted Documents must have a root element Documents must have a root element Elements must be properly nested Elements must be properly nested

35 Internet Programming35 The XHTML Source Document XHTML documents require an XML declaration at the head of the document XHTML documents require an XML declaration at the head of the document –Identifies version of XML A DOCTYPE directive provided a Document Type Definition (DTD) A DOCTYPE directive provided a Document Type Definition (DTD) –Specifies the type of document as XHTML The HTML tag includes and xmlns attribute The HTML tag includes and xmlns attribute –Defines the XML namespace –Needs to distinguish identically named tags

36 Internet Programming36 Nesting XML Tags The following tags are properly nested: The following tags are properly nested:...

37 Internet Programming37 Improper Nesting The following nesting of tags is wrong: The following nesting of tags is wrong:...

38 Internet Programming38 The Element Meta tags add information about a web page that is invisible to web browsers Meta tags add information about a web page that is invisible to web browsers The tags are read by search engines and indexers The tags are read by search engines and indexers Meta tags are often used to identify keywords and descriptions Meta tags are often used to identify keywords and descriptions

39 Internet Programming39 Paragraphs: the Element Browsers ignore consecutive whitespace characters Browsers ignore consecutive whitespace characters The element is used to define a new paragraph The element is used to define a new paragraph Good HTML design requires that you use the closing tag, however no browser requires it Good HTML design requires that you use the closing tag, however no browser requires it Browsers ignore any tag that is not understood Browsers ignore any tag that is not understood –if a tag is not performing the function you want, check for misspelling

40 Internet Programming40 Line Breaks: the Element The tag causes an immediate line break on the page The tag causes an immediate line break on the page The has no closing tag, so the XHTML tag has a trailing forward slash The has no closing tag, so the XHTML tag has a trailing forward slash It is also correct to write a It is also correct to write a pair

41 Internet Programming41 Headers Headers are content tags that specify a font size Headers are content tags that specify a font size They should be used only for titles and section headers They should be used only for titles and section headers is the largest, the smallest is the largest, the smallest Proper use of header tags allows a table of contents to be retrieved by just displaying the headers Proper use of header tags allows a table of contents to be retrieved by just displaying the headers

42 42 HTML Container Tags … … Boldface text … … Italic text … … Strong text … … Emphasized text … … Strikethrough text … … Increase font size … … Decrease font size … … Underlined text … … Teletype = monospace … … Subscript Superscript

43 43 HTML Container Tags … … Align as center … … Paragraph (blank line) … … Header 1 (Largest) … … Header 2 … … Header 3 … … Header 4 … … Header 5 … … Header 6 (Smallest) … … Preserve formatting … … Indented block

44 44 HTML Inline Tags,, Line break,, Horizontal rule (line) Special Characters (space) Non-breaking space &&Ampersand << Less than >> Greater than " Double quote ' Apostrophe (single quote)

45 45 Tag Attributes … - DEPRECATED! … - DEPRECATED!


AttributeValuesDefault width %, pixels width=100% sizepixelssize=2 align left, right, center align=center noshade shaded markup AttributeValuesDefaultsize 1 through 7 3, about 10 points color named or hex color black, # face font family browser dependent

46 46 Tag Attributes AttributeValuesDefault bgcolor named or hex color white, #FFFFFF text named or hex color black, # link named or hex color browser dependent alink named or hex color browser dependent vlink named or hex color browser dependent background image source none … … AttributeValuesDefaultalign left, right, center align=center

47 47 Anchors and Links AttributeValuesDefault href absolute URL none relative URL fragment identifier name textual name none … …

48 Internet Programming48 Site Organization No planned structure

49 Internet Programming49 Site Organization Linear linking structure

50 Internet Programming50 Site Organization Hierarchical structure

51 Internet Programming51 Site Organization Pages Links

52 Internet Programming52 Site Organization Pages Links

53 53 Images AttributeValuesDefault src absolute URL none relative URL - align left, right, center left top, middle, bottom bottom hspacepixels browser dependent vspacepixels borderpixels0 alt text string no alternate text ismap- usemap #text string -

54 54 Lists AttributeValuesDefault type circle, disc, square disc … … AttributeValuesDefaulttype 1 (integers) align=center i, I (lower/upper Roman) a, A (lower/upper letter) … … Used to create list items with the and tags

55 55 Tables AttributeValuesDefault align left, right, center left bgcolor named or hex color web inherited borderpixels0 cellpadingpixels1 cellspacingpixels2 height pixels, percent minimum needed width pixels, percent minimum needed … …

56 56 Table Row Attributes AttributeValuesDefault align left, right, center left valign top, middle, bottom middle bgcolor named or hex color web inherited … …

57 57 Table Cell and Header AttributeValuesDefault align left, right, center left valign top, middle, bottom middle background URL or image - bgcolor named or hex color web inherited height %, percent cell contents size width %, percent cell contents size colspaninteger0 rowspaninteger0 … and … … and …

58 Internet Programming58 Frameset and Frame

59 59 Frames AttributeValuesDefault cols pixels, percent - rows - borderpixels browser dependent bordercolor named or hex color browser dependent … … AttributeValuesDefaulttarget name of frame _self _self, _parent … …

60 60 Frame Attributes AttributeValuesDefault srcURL- name character string - marginheightpixels browser dependent marginwidthpixels scrolling yes, no, auto auto … …

61 Internet Programming61 HTML Forms

62 Intro to Computing and Internet62 HTML Forms Forms are used in HTML to create a Graphical User Interface (GUI) Forms are used in HTML to create a Graphical User Interface (GUI) Forms contain visual controls Forms contain visual controls Visual controls allow the user to interact with the page Visual controls allow the user to interact with the page Visual controls are a convenient way to perform I/O Visual controls are a convenient way to perform I/O Forms make Web pages interactive Forms make Web pages interactive

63 Intro to Computing and Internet63 Buttons and Text Boxes Buttons and Text Boxes are the simplest visual controls Buttons and Text Boxes are the simplest visual controls Both are created within a Form Both are created within a Form Both are types of controls Both are types of controls Text Boxes are created by specifying type = text Text Boxes are created by specifying type = text Buttons are created by specifying type=button Buttons are created by specifying type=button

64 Intro to Computing and Internet64 Buttons and Text Boxes The value attribute assigns The value attribute assigns a default value to a textbox a default value to a textbox A caption to a button A caption to a button A textbox returns a string as the result of what the user typed in A textbox returns a string as the result of what the user typed in A button can activate a click event handler A button can activate a click event handler The event handlers name is specified in the onClick property of the button The event handlers name is specified in the onClick property of the button

65 Intro to Computing and Internet65 Checkboxes Checkboxes are used to indicate a yes/no condition Checkboxes are used to indicate a yes/no condition Boxes can be read by reading the boolean checked property of the checkbox Boxes can be read by reading the boolean checked property of the checkbox The property is true if checked, false if not checked The property is true if checked, false if not checked Multiple checkboxes can be checked simultaneously Multiple checkboxes can be checked simultaneously

66 Intro to Computing and Internet66 Radio Buttons Radio buttons are designed to allow a single selection out of a group of options Radio buttons are designed to allow a single selection out of a group of options Selecting one button causes any others to be deselected Selecting one button causes any others to be deselected Creating a radio button group from the individual tags require that we give each radio button the identical name; the browser then assumes they are part of the same group Creating a radio button group from the individual tags require that we give each radio button the identical name; the browser then assumes they are part of the same group

67 Internet Programming67 Cascading Style Sheets

68 Internet Programming68 The problem with HTML HTML was originally intended to describe the content of a document HTML was originally intended to describe the content of a document Page authors didnt have to describe the layout-- the browser would take care of that Page authors didnt have to describe the layout-- the browser would take care of that This is a good engineering approach, but it didnt satisfy advertisers and artists This is a good engineering approach, but it didnt satisfy advertisers and artists –Even people that actually had something to say wanted more control over the appearance of their web pages As a result, HTML acquired more and more tags to control appearance As a result, HTML acquired more and more tags to control appearance –Content and appearance became more intertwined –Different browsers displayed things differently, which is a real problem when appearance is important

69 Internet Programming69 Cascading Style Sheets A Cascading Style Sheet (CSS) describes the appearance of an HTML page in a separate document A Cascading Style Sheet (CSS) describes the appearance of an HTML page in a separate document CSS has the following advantages: CSS has the following advantages: –It lets you separate content from presentation –It lets you define the appearance and layout of all the pages in your web site in a single place –It can be used for both HTML and XML pages CSS has the following disadvantage: CSS has the following disadvantage: –Most browsers dont support it very well

70 Internet Programming70 CSS Skeleton Page Practice CSS Practice CSS body { background-color : red} body { background-color : red} h1 { color : white; font-size : 20px} h1 { color : white; font-size : 20px} Practice CSS Practice CSS

71 Internet Programming71 CSS syntax CSS syntax is very simple--its just a file containing a list of selectors (to choose tags) and descriptors (to tell what to do with them): CSS syntax is very simple--its just a file containing a list of selectors (to choose tags) and descriptors (to tell what to do with them): –Example: h1 {color: green; font-family: Verdana} says that h1 (HTML heading level 1) tags should be in the Verdana font and colored green A CSS file is just a list of these selector/descriptor pairs A CSS file is just a list of these selector/descriptor pairs –Selectors may be simple HTML tags or XML tags, but CSS also defines some ways to combine tags –Descriptors are defined in CSS itself, there is a long list of them

72 72 CSS syntax The general syntax is: The general syntax is: selector {property: value} selector {property: value} –or selector,..., selector { property: value;... property: value } selector,..., selector { property: value;... property: value } –where »selector is the tag to be affected (the selector is case- sensitive if and only if the document language is case- sensitive) »property and value describe the appearance of that tag »Spaces after colons and semicolons are optional »A semicolon must be used between property:value pairs, but a semicolon after the last pair is optional

73 Internet Programming73 CSS Examples /* This is a comment */ /* This is a comment */ h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st available font */ h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st available font */ p, table, li, address { /* apply to all these tags */ font-family: "Courier New"; /* quote values containing spaces */ margin-left: 15pt; /* specify indentation */ } p, table, li, address { /* apply to all these tags */ font-family: "Courier New"; /* quote values containing spaces */ margin-left: 15pt; /* specify indentation */ } p, li, th, td {font-size: 80%;} /* 80% of size in containing element */ p, li, th, td {font-size: 80%;} /* 80% of size in containing element */

74 Internet Programming74 CSS Examples th {background-color:#FAEBD7} /* colors can be specified in hex */ th {background-color:#FAEBD7} /* colors can be specified in hex */ body { background-color: #ffffff;} body { background-color: #ffffff;} h1,h2,h3,hr {color:saddlebrown;} /* adds to the above h1,h2,h3,hr {color:saddlebrown;} /* adds to the above a:link {color:darkred} /* an unvisited link */ a:link {color:darkred} /* an unvisited link */ a:visited {color:darkred} /* a visited link */ a:visited {color:darkred} /* a visited link */ a:active {color:red} /* link being visited */ a:active {color:red} /* link being visited */ a:hover {color:red} /* mouse hovers over */ a:hover {color:red} /* mouse hovers over */

75 Internet Programming75 More about selectors An HTML tag can be used as a simple element selector: An HTML tag can be used as a simple 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, h3 {font-weight: bold; color: pink} h1, h2, h3 {font-family: Verdana; color: red} 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 universal selector * applies to any and all elements: The universal selector * applies to any and all elements: * {color: blue} * {color: blue} When values disagree, more specific selectors override general ones (so em elements would still be red)When values disagree, more specific selectors override general ones (so em elements would still be red)

76 Internet Programming76 Example of overriding

77 77 More about selectors A descendant selector chooses a tag with a specific ancestor: –p code { color: brown } –selects a code if it is somewhere inside a paragraph A child selector > chooses a tag with a specific parent: A child selector > chooses a tag with a specific parent: h3 > em { font-weight: bold } h3 > em { font-weight: bold } selects an em only if its immediate parent is h3 selects an em only if its immediate parent is h3 An adjacent selector chooses an element that immediately follows another: An adjacent selector chooses an element that immediately follows another: b + i { font-size: 8pt } Example: I'm bold and I'm italic b + i { font-size: 8pt } Example: I'm bold and I'm italic Result will look something like: I'm bold and I'm italic Result will look something like: I'm bold and I'm italic

78 Internet Programming78 More about selectors A simple attribute selector allows you to choose elements that have a given attribute, regardless of its value: A simple attribute selector allows you to choose elements that have a given attribute, regardless of its value: –Syntax: element[attribute] {... } –Example: table[border] {... } An attribute value selector allows you to choose elements that have a given attribute with a given value: An attribute value selector allows you to choose elements that have a given attribute with a given value: –Syntax: element[attribute="value"] {... } –Example: table[border="0"] {... }

79 Internet Programming79 The class attribute The class attribute allows you to have different styles for the same element The class attribute allows you to have different styles for the same element –In the style sheet: p.important {font-size: 24pt; color: red} p.fineprint {font-size: 8pt} –In the HTML: The end is nigh! Offer ends 1/1/97. –In the HTML: The end is nigh! Offer ends 1/1/97. To define a selector that applies to any element with that class omit the tag name (keep the dot): To define a selector that applies to any element with that class omit the tag name (keep the dot):.fineprint {font-size: 8pt}.fineprint {font-size: 8pt}

80 Internet Programming80 The id attribute The id attribute is defined like the class attribute, but uses # instead of. The id attribute is defined like the class attribute, but uses # instead of. –In the style sheet: p#important {font-style: italic} or # important {font-style: italic} –In the HTML: –In the HTML: class and id can both be used, and do not need to have different names: class and id can both be used, and do not need to have different names:

81 Internet Programming81 div and span div and span are HTML elements whose only purpose is to hold CSS information div and span are HTML elements whose only purpose is to hold CSS information div ensures there is a line break before and after (so its like a paragraph); span does not div ensures there is a line break before and after (so its like a paragraph); span does not Example: Example: –CSS: div {background-color: #66FFFF} span.color {color: red} –HTML: This div is treated like a paragraph, but this span is not. –HTML: This div is treated like a paragraph, but this span is not.

82 Internet Programming82 Using style sheets There are three ways of using CSS: There are three ways of using CSS: –External style sheet »This is the most powerful »Applies to both HTML and XML »All of CSS can be used –Embedded style sheet »Applies to HTML, not to XML »All of CSS can be used –Inline styles »Applies to HTML, not to XML »Limited form of CSS syntax

83 Internet Programming83 External style sheets In HTML, within the element: In HTML, within the element: As a PI in the prologue of an XML document: As a PI in the prologue of an XML document: Note: "text/css" is the MIME type Note: "text/css" is the MIME type

84 Internet Programming84 Embedded style sheets In HTML, within the element: In HTML, within the element: Note: Embedding the style sheet within a comment is a sneaky way of hiding it from older browsers that dont understand CSS Note: Embedding the style sheet within a comment is a sneaky way of hiding it from older browsers that dont understand CSS

85 Internet Programming85 Inline style sheets The STYLE attribute can be added to any HTML element: The STYLE attribute can be added to any HTML element: or or Advantage: Advantage: –Useful if you only want a small amount of markup Disadvantages: Disadvantages: –Mixes display information into HTML –Clutters up HTML code –Cant use full range of CSS features

86 Internet Programming86 Cascading order Styles will be applied to HTML in the following order: Styles will be applied to HTML in the following order: 1.Browser default 2.External style sheet 3.Internal style sheet (inside the tag) 4.Inline style (inside other elements, outermost first) When styles conflict, the nearest (most recently applied) style wins When styles conflict, the nearest (most recently applied) style wins

87 Internet Programming87 Example of cascading order External style sheet: h3 {color: red; text-align: left; font-size: 8pt } External style sheet: h3 {color: red; text-align: left; font-size: 8pt } Internal style sheet: h3 {text-align: right; font-size: 20pt } Internal style sheet: h3 {text-align: right; font-size: 20pt } Resultant attributes: color: red; text-align: right; font-size: 20pt Resultant attributes: color: red; text-align: right; font-size: 20pt

88 88 CSS Font Properties TypeName serif Times New Roman sans-serif Ariel, Helvetica cursive Sanvico, Old English Text MT monospace Courier, Prestige fantasyCritter font-family examples Names with spaces should have single quotes: Times New Roman

89 89 Some font properties and values font-family: font-family: –inherit (same as parent) –Verdana, "Courier New",... (if the font is on the client computer) –serif | sans-serif | cursive | fantasy | monospace (Generic: your browser decides which font to use) font-size: font-size: –inherit | smaller | larger | xx-small | x-small | small | medium | large | x-large | xx-large | 12pt font-weight: font-weight: –normal | bold |bolder | lighter | 100 | 200 |... | 700 font-style: font-style: –normal | italic | oblique

90 Internet Programming90 Shorthand properties Often, many properties can be combined: Often, many properties can be combined: h2 { font-weight: bold; font-variant: small-caps; font-size: 12pt; line-height: 14pt; font-family: sans-serif } h2 { font-weight: bold; font-variant: small-caps; font-size: 12pt; line-height: 14pt; font-family: sans-serif } can be written as: can be written as: h2 { font: bold small-caps 12pt/14pt sans- serif } h2 { font: bold small-caps 12pt/14pt sans- serif }

91 Internet Programming91 Colors and lengths color: and background-color: color: and background-color: –aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | #FF0000 | #F00 | rgb(255, 0, 0) | Additional browser-specific names (not recommended) These are used in measurements: These are used in measurements: –em, ex, px, % »font size, x-height, pixels, percent of inherited size –in, cm, mm, pt, pc »inches, centimeters, millimeters, points (1/72 of an inch), picas (1 pica = 12 points), relative to the inherited value

92 Internet Programming92 Some text properties and values text-align: text-align: –left | right | center | justify text-decoration: text-decoration: –none | underline | overline | line-through text-transform: text-transform: –none | capitalize | uppercase | lowercase text-indent text-indent –length | 10% (indents the first line of text) white-space: white-space: –normal | pre | nowrap

93 Internet Programming93Pseudo-classes Pseudo-classes are elements whose state (and appearance) may change over time Pseudo-classes are elements whose state (and appearance) may change over time Syntax: element:pseudo-class {...} Syntax: element:pseudo-class {...} –:link »a link which has not been visited –:visited »a link which has been visited –:active »a link which is currently being clicked –:hover »a link which the mouse is over (but not clicked) Pseudo-classes are allowed anywhere in CSS selectors Pseudo-classes are allowed anywhere in CSS selectors Note, however, that XML doesnt really support hyperlinks yet Note, however, that XML doesnt really support hyperlinks yet

94 Internet Programming94 Choosing good names CSS is designed to separate content from style CSS is designed to separate content from style –Therefore, names that will be used in HTML or (especially) in XML should describe content, not style Example: Example: –Suppose you define span.huge {font-size: 36pt} and you use throughout a large number of documents –Now you discover your dont like this, so you change the CSS to be span.huge {font-color: red} –Your name is inappropriate; do you change all your documents? –If you had started with span.important {font-size: 36pt}, the documents would look better

95 95 CSS units For many of the remaining CSS values, we will need to be able to specify size measurements For many of the remaining CSS values, we will need to be able to specify size measurements –These are used to specify sizes: »em width of the letter m »em width of the letter m »ex height of the letter x »ex height of the letter x »px pixels (usually 72 per inch, but depends on monitor) »% percent of inherited size –These are also used to specify sizes, but dont really make sense unless you know the screen resolution: »in inches »cm centimeters »mm millimeters »pt points ( 72pt = 1in ) »pc picas ( 1pc = 12pt )

96 Internet Programming96Padding Padding is the extra space around an element, but inside the border Padding is the extra space around an element, but inside the border To set the padding, use any or all of: To set the padding, use any or all of: –padding-top: size –padding-bottom: size –padding-left: size –padding-right: size –padding: size to set all four sides at once size is given in the units described earlier size is given in the units described earlier Example: sidebar {padding: 1em; padding-bottom: 5mm} Example: sidebar {padding: 1em; padding-bottom: 5mm}

97 Internet Programming97Borders You can set border attributes with any or all of: border- top:, border-bottom:, border-left:, border-right:, and border: (all at once) You can set border attributes with any or all of: border- top:, border-bottom:, border-left:, border-right:, and border: (all at once) The attributes are: The attributes are: –The thickness of the border: thin, medium (default), thick, or a specific size (like 3px ) –The style of the border: none, dotted, dashed, solid, double, groove, ridge, inset, or outset –The color of the border: one of the 16 predefined color names, or a hex value with #rrggbb or rgb(r, g, b) or rgb(r%, g%, b%) Example: section {border-top: thin solid blue;} Example: section {border-top: thin solid blue;} Note: the special styles (such as groove ) are not as cool as they sound Note: the special styles (such as groove ) are not as cool as they sound

98 Internet Programming98 Margins Margins are the extra space outside the border Margins are the extra space outside the border Setting margins is analogous to setting padding Setting 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: size –margin-bottom: size –margin-left: size –margin-right: size –margin: size to set all four sides at once

99 Internet Programming99 Sizing elements Every element has a size and a natural position in which it would be displayed Every element has a size and a natural position in which it would be displayed You can set the height and width of display:block elements with: You can set the height and width of display:block elements with: –height: size –width: size You cannot set the height and width of inline elements (but you can set left and right margins) You cannot set the height and width of inline elements (but you can set left and right margins) In HTML, you can set the height and width of images and tables ( img and table tags) In HTML, you can set the height and width of images and tables ( img and table tags)

100 Internet Programming100 Setting absolute position To move an element to an absolute position on the page To move an element to an absolute position on the page –position: absolute (this is required!) and also one or more of –left: size or right: size –top: size or bottom: size position:absolute; left: 0in; top: 0inposition:absolute; right: 0in; top: 0in position:absolute; left: 0in; bottom: 0inposition:absolute; right: 0in; bottom: 0in

101 Internet Programming101 Setting Absolute Position Rules of absolute positioning: Rules of absolute positioning: –size can be positive or negative –top: size puts an elements top size units from the page top –bottom: size puts an elements bottom size units from the page bottom –left: size puts an elements left side size units from the left edge of the page –right: size puts an elements right side size units from the right edge of the page –Changing an elements absolute position removes it from the natural flow, so other elements fill in the gap –You need to be careful not to overlap other elements

102 Internet Programming102 Setting Relative Position To move an element relative to its natural position, use To move an element relative to its natural position, use –position: relative (this is required!) and also one or more of –left: size or right: size –top: size or bottom: size

103 Internet Programming103 Setting Relative Position Rules of relative positioning Rules of relative positioning –size can be positive or negative –to move left, make left negative or right positive –to move right, make right negative or left positive –to move up, make top negative or bottom positive –to move down, make bottom negative or top positive –Setting an elements position does not affect the position of other elements, so »There will be a gap in the elements original, natural position »Unless you are very careful, your element will overlap other elements

104 Internet Programming104 Pseudo-elements Pseudo-elements describe elements that are not actually between tags in the XML document Pseudo-elements describe elements that are not actually between tags in the XML document Syntax: element:pseudo-class {...} Syntax: element:pseudo-class {...} –first-letter the first character in a block-level element –first-line the first line in a block-level element (depends on the browsers current window size) Especially useful for XML (but not implemented in Internet Explorer): Especially useful for XML (but not implemented in Internet Explorer): –before adds material before an element »Example: author:before {content: "by "} –after adds material after an element

105 Internet Programming105 External style sheets In HTML, within the element: In HTML, within the element: As a PI in the prologue of an XML document: As a PI in the prologue of an XML document: Note: "text/css" is the MIME type Note: "text/css" is the MIME type

106 Internet Programming106 Some border styles and values You can put borders around elements You can put borders around elements Borders have width, style, and color Borders have width, style, and color –These can be set individually: »border-left-style:, border-bottom-color:, etc. –Or a border at a time: »border-top:, border-right:, etc. –Or all borders at once: border: Available values are: Available values are: –border-width: thin | medium | thick | length –border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset –border-color: color

107 Internet Programming107 Padding Padding is used to set the space around an element Padding is used to set the space around an element –You can set padding individually: padding-top:, padding-left:, padding-bottom:, padding-right: –Or all at once: padding: –Allowable values: length | 12%

108 Internet Programming108 Visual Web Developer

109 Internet Programming109 Visual Web Developer Microsoft IDE (Integrated Development Environment) for Web applications Microsoft IDE (Integrated Development Environment) for Web applications Replaces most programming tasks with drag and drop operations Replaces most programming tasks with drag and drop operations Uses CSS, Themes and Skins to provide consistent site look and feel Uses CSS, Themes and Skins to provide consistent site look and feel Site look and feel is consolidated in the concept of Master Pages. Site look and feel is consolidated in the concept of Master Pages.

110 Internet Programming110 Master Page and Content Page

111 Internet Programming111 Basic VWD Components

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

113 Internet Programming113 VWD Navigation Controls

114 Internet Programming114 Client Side Scripting

115 Internet Programming115 Client Side Scripting Static HTML: limited to formatting of (unchanging) documents Static HTML: limited to formatting of (unchanging) documents Dynamic HTML: incorporates user interaction Dynamic HTML: incorporates user interaction –By client-side scripting and/or –By server-side scripting

116 Internet Programming116 Client Side Scripting Web Programming: due to the client-server architecture underlying the operation of the internet, programming can refer to Web Programming: due to the client-server architecture underlying the operation of the internet, programming can refer to –client-side programming (client-side scripting) »Code is executed within (by) the browser (= internet client) –server-side programming (server-side scripting) »Code is executed by a web server and the result is an HTML page (possibly w/ client-side scripts embedded in it) which is sent to client (browser)

117 Internet Programming117 Client Side Scripting Executable code embedded in HTML Executable code embedded in HTML Browsers have a built-in interpreter that executes code. Browsers have a built-in interpreter that executes code. Difference: Interpreter and Compiler Difference: Interpreter and Compiler –Compiler: converts code into new.exe file –Interpreter: executes code line-by-line The code is written in a scripting syntax (language) called JavaScript The code is written in a scripting syntax (language) called JavaScript

118 Internet Programming118 JavaScript Originally developed Netscape Originally developed Netscape - became Internet standard, all browsers support it Modeled after Java Modeled after Java JavaScript syntax is Java-like, but NOT Java JavaScript syntax is Java-like, but NOT Java - not Object Oriented -doesnt rely on JDK -very loose w/ type-checking (not strongly typed) -hard to debug (no debugger)

119 Internet Programming119 Basic JavaScript Syntax Scripts are embedded in a pair of Scripts are embedded in a pair of … tags … tags Scripts can be place in HTML head or body Scripts can be place in HTML head or body Code is placed in HTML comment Code is placed in HTML comment // code here... // code here... language attribute

120 Internet Programming120 Conditional Statements IF Statement IF Statement if ( cond expression ) { statements } else { statements } When the block delimiters{} are excluded, JavaScript assumes there is a single line scope When the block delimiters{} are excluded, JavaScript assumes there is a single line scope SWITCH Statement SWITCH Statement switch (cond) { case 1:... break; case 2:... break; default:... } If break is omitted, the code in the remaining case statement(s) is automatically executed (until a break is encountered or the switch statement is complete). If break is omitted, the code in the remaining case statement(s) is automatically executed (until a break is encountered or the switch statement is complete).

121 Internet Programming121 Repetition Statements FOR Loop FOR Loop for (var i=0; i<10; i++) {... } WHILE Loop WHILE Loop var i=0 ; while (i<10) {... i++ ; }

122 122 JavaScript Array Object Property/MethodEffect length Size of array Array()Constructor join(delimeter) Create string from array reverse() Reverse order sort(compareFunction) Sort (lex. if no comp.) push(element), pop() Add/remove at end unshift(element) Add at front slice(lower, upper) Extract subarray concat(arrayObject) Append arrayObject

123 123 JavaScript String Object Property/MethodEffect length Length of string big(), small() Increase,decrease size bold(), italics() Select font type blink() Blink effect strike() Strikethrough font fixed() Teletype font sub(), sup() Sub/Superscript fontcolor(colorName) Font color fontsize(1..7) Font size

124 124 JavaScript String Object MethodEffect charAt(), charCodeAt() char, ASCII code fromCharCode() Convert from ASCII indexOf(), lastIndexOf() Find position of char concat() Concatenate strings split(delimeter)Tokenize slice()Substring substr/substring(from, to) Return substring toUpperCase() toLowerCase() Convert to upper/lower anchor(), link() Create anchor/link

125 125 JavaScript Date Object AttributeEffect getDate() Returns value between 1 and 31 getDay() Returns weekday as 0 (Sunday) …6 getMonth() Returns value between 0 and 11 getYear() Returns century year 0 … 99 getFullYear() Returns year 0 … 9999 getTime() Milliseconds since Jan 1, 1970 getHours() Returns value between 0 and 23 getMinutes() Returns value between 0 and 59 getSeconds()

126 126 JavaScript Date Object AttributeEffect Date() Date constructor setDate() Sets value between 1 and 31 setMonth() Sets value between 1 and 11 setYear() Sets 20 th century year 0 … 99 setFullYear() Sets year 0 … 9999 setTime() Set milliseconds since Jan 1, 1970 setHours() Sets value between 0 and 23 setMinutes() Sets value between 0 and 59 setSeconds()

127 127 JavaScript Date Object AttributeEffect setUTC() Set UTC value getTimeZoneOffset() Time Zone offset toLocaleString() Locale String toGMTString() GMT string Date.parse() Convert to string Date.UTC() Get UTC value UTC = Coordinated Universal Time different from GMT due to the irregular rotation of the Earth

128 Internet Programming128 Domain Object Model Main JavaScript DOM objects Main JavaScript DOM objects

129 129 JavaScript Window Object AttributeEffect toolbar Back/Forward/Home/Edit buttons location Location window below toolbar directories Whats Hot/Cool etc. buttons status Windows Status bar menubar File, Edit, View pulldown menus scrollbars Scrollbar displaying resizable Resize handles width = num Window width in pixels height = num Window height in pixels

130 Internet Programming130 Server Side Scripting

131 Internet Programming131 Server Side Scripting Serving Static Web Pages Static Web Page Request and Response Operations

132 Internet Programming132 Server Side Scripting Serving Dynamic Web Pages Dynamic Web Page Request and Response Operations

133 Internet Programming133 Server Side Scripting HTML generation is decoupled from Web Server functionality Other engines may be used (Servlet, JSP, PHP …)

134 Internet Programming134 ASP.NET Operations ASP.NET Request and Response Operations

135 Internet Programming135 Data Access in Visual Web Developer The data access related controls are in the Data tab of the Toolbox. The data access related controls are in the Data tab of the Toolbox. Data-bound Display Controls Data Source Controls

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

137 Internet Programming137 FormView 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-only

138 Internet Programming138 DetailsView DetailsView provides a Master – Detail design DetailsView provides a Master – Detail design Selected Record Select Buttons DetailsView GridView

139 Internet Programming139 HTML Hypertext Mark-up Language – formatting specification for hyperdocuments Hypertext Mark-up Language – formatting specification for hyperdocuments Current version DOCTYPE header: Current version DOCTYPE header: Based on tags Based on tags –Container tags: …. –Container tags: …. –Inline tags: –Inline tags: Comments: not rendered but carry information Comments: not rendered but carry information


Download ppt "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."

Similar presentations


Ads by Google