1 / 20

CS332A Advanced HTML Programming

Chapter 2. CS332A Advanced HTML Programming. CSS Placement HTML Tag Affects the specific tag only (Inline Rule) To override preceding CSS rules Format: <HTML-Tag style=“property:value;” > …… </HTML-Tag> Head of Document Effects entire document web page

triage
Download Presentation

CS332A Advanced HTML Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 2 CS332AAdvanced HTML Programming • CSS Placement • HTML Tag • Affects the specific tag only (Inline Rule) • To override preceding CSS rules • Format: • <HTML-Tag style=“property:value;”> …… </HTML-Tag> • Head of Document • Effects entire document web page • Between <HEAD> and </HEAD> HTML tags • <style type=“text/css”> selector{property:value;} selector{property:value;}</style> 18 20

  2. Chapter 2 CS332AAdvanced HTML Programming H1 {font:small-caps bold italic 2.5em ‘minion web’ Georgia, ‘Times New Roman’, Times, serif; color: red;} 18/21 FORMAT H1 Tag to be defined{ Begin definitionfont: Description will be of a fontsmall-caps bold italic 2.5em ‘minion web’ Georgia, ‘Times New Roman’, Times, serif;color: red;} End of CSS Rule

  3. Chapter 2 CS332AAdvanced HTML Programming • LAB ICSS Placement • HTML Tag (see links from web site) • 1. Document without CSS - using h1 header defaults • 2. Document with h1 headers hardcoded into web page • 3. Document with CSS hardcoded into web page

  4. Chapter 2 CS332AAdvanced HTML Programming • CSS Placement • Link to a CSS document • Used to affect an entire web site • Create external text file • Do not use <style> tags in external document • Standard CSS rules applied in external document • File extension of .css • Filename.css • Format • <HEAD><link rel=“stylesheet” href=“filename.css”><link rel=“stylesheet” href=“filename.css”></HEAD> • Inserts the CSS into the document • Affects the entire document doing the ‘link’ • CSS is in same directory 23

  5. CS332AAdvanced HTML Programming • LAB IICSS Placement • Link (see links from web site) • Document with CSS linked into web page • CSS Document linked into web page

  6. Chapter 2 CS332AAdvanced HTML Programming • CSS Placement • Import a CSS document • Used to affect an entire web site • Create external text file • Placed between the <style> tags in receiving document • Standard CSS rules applied in external document • File extension of .css • Filename.css • Format • <HEAD><STYLE type=“text/css”>@import url(filename.css);@import url(filename2.css);Other CSS rules</STYLE></HEAD> • Inserts the CSS into the document • Affects the entire document doing the ‘import’ • CSS is not in the same directory 28

  7. Chapter 2 CS332AAdvanced HTML Programming • LAB IIICSS Placement • Import (see links from web site) • Document with CSS imported into web page • CSS Document imported into web page

  8. Chapter 2 CS332AAdvanced HTML Programming Defining Classes Creating a unique Tag A class selector Set up a style to be used with any tag Define your own style Name the new tag appropriately (do not use keywords) 31 FORMAT . Begin with a period Somename unique name { left bracket Property:value; assign properties and values } closing bracket

  9. Chapter 2 CS332AAdvanced HTML Programming Defining Classes Creating a unique Tag 31 Usage CSS hardcoded, linked, or imported .smith {font-size: 18px; line-height: 75%;} <head> <style type=“text/css”> .smith {font-size: 18px; line-height: 75%;} Blockquote.smith {font-size: 14px;} </style> </head>

  10. Chapter 2 CS332AAdvanced HTML Programming Defining IDs Identify and Object 33 Set up a style to be used with any tag Cornerstone of Dynamic HTML (DHTML) Allow JavaScript to identify an object to manipulate Used only once of a page to define a single element as an object FORMAT #somename identify the object { left bracket Property:value; assign properties and values } closing bracket SAMPLE Page DHTML:34, Code 2.9 Web page: Page DHTM: 33, Figure 2.18

  11. Chapter 2 CS332AAdvanced HTML Programming Defining NEW Inline HTML Tags 35 <SPAN>…..</SPAN> Empty tag – has no properties Set any properties you wish Can be use with <div>, classes, IDs Hardcoded, linked, imported Usage <span class=“someclass”>……..</span> <span id=“someID”>…………..</span> Sample Page DTHML: 35/36 Web page: DHTM:35, Figure 2.19 Code: DHTML:35/36, Code 2.10 35

  12. Chapter 2 CS332AAdvanced HTML Programming Defining Block-Level HTML Tags 37 <DIV>…..</DIV> Inherent property: line break before and after the tag Set any properties you wish Can be use with classes, IDs Hardcoded, linked, imported Usage <div class=“someclass”>……..</div> <div id=“someID”>…………..</div> Sample Page DTHML: 37/38 Web page: DHTM:37, Figure 2.20 Code: DHTML:37/38, Code 2.11

  13. Chapter 2 CS332AAdvanced HTML Programming Multiple Tags with the same rules 39 Create the CSS rule Preceed the rule by all the selectors separated by a comma (,) Add rules for any separate HTML selector as needed Sample Page DTHML: 39/40 Web page: DHTM:39, Figure 2.22 Code: DHTML:40, Code 2.12

  14. Chapter 2 CS332AAdvanced HTML Programming Define tags in context 41 Tag is used in context of the HTML document Nested tags Sample Page DTHML: 41/42 Web page: DHTM:41, Figure 2.24 Code: DHTML:41/42, Code 2.13

  15. Chapter 2 CS332AAdvanced HTML Programming Making a tag important 43 Add !important to the definition Sample Page DTHML: 43/44 Web page: DHTM:43, Figure 2.26 Code: DHTML:44, Code 2.14

  16. Chapter 2 CS332AAdvanced HTML Programming Inheritance 45 • Parent/child relationship • Outer tag is the parent • Inner tag is the child • Tags assume the properties of parent tags • Example • <body> is the parent tag of ALL tags • Any tag inside the <body> tag will assume the <body> properties • Sample • Page DTHML: 45/46 • Web page: DHTM:46, Figure 2.28 • Code: DHTML:45/46, Code 2.15

  17. Chapter 2 CS332AAdvanced HTML Programming Cascade Order 47 Browsers have the ability to override web page style sheets Visitors may set their web browsers style sheets Order: !important Weights of HTML tags (Page DHTML:50, Specificity) Last tag (rule) definition Inherited properties Generally: the visitor style rules will apply Sample Page DTHML: 49 Web page: DHTM:50, Figure 2.30 Code: DHTML:50, Code 2.17, 2.18,

  18. Chapter 2 CS332AAdvanced HTML Programming Display or Printing 51 The web page, when printed, will not always print properly Create a .css for the browser display Create a .css for printing Sample Page DTHML: 51 Web page: DHTM:51, Figure 2.31 Printed output: DHTML:51, Figure 2.32 Code: DHTML:52/53, Code 2.19, 2.20, 2.21

  19. Chapter 2 CS332AAdvanced HTML Programming Comments 54 Single line comment Begin with // No ending parameter Example // this is a comment on a single line Block of lines comment Begin with /* The CSS code End with a */ Example /* this is the first line of the comment this is the second line of the comment this is the third, and last line of the comment */ Sample Page DTHML: 54 Code: DHTML:54, Code 2.22

  20. Chapter 2 CS332AAdvanced HTML Programming Style-Sheet Strategies 55 Place style in external style sheets (.css files) Place styles in a common place (directory location) Easier to locate for updates Define a global.css style sheet Common to ALL web pages Define section.css style sheets Use with specific areas of a web page Create different .css files for distinctive uses Split the .css files into smaller files Larger files take longer to download Import/Link .css files as needed Save download time Place styles in the <HEAD> AFTER the JavaScript code Place the <STYLE> tags in the same place - consistency Avoid using styles directly (inline) in the tags Sample Page DTHML: 55

More Related