Chapter 2
This presentation is the property of its rightful owner.
Sponsored Links
1 / 20

CS332A Advanced HTML Programming PowerPoint PPT Presentation


  • 75 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Cs332a advanced html programming

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


Cs332a advanced html programming

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

H1Tag 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


Cs332a advanced html programming

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


Cs332a advanced html programming

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


Cs332a advanced html programming

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


Cs332a advanced html programming

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


Cs332a advanced html programming

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


Cs332a advanced html programming

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

Somenameunique name

{left bracket

Property:value;assign properties and values

}closing bracket


Cs332a advanced html programming

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>


Cs332a advanced html programming

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

#somenameidentify 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


Cs332a advanced html programming

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


Cs332a advanced html programming

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


Cs332a advanced html programming

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


Cs332a advanced html programming

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


Cs332a advanced html programming

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


Cs332a advanced html programming

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


Cs332a advanced html programming

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,


Cs332a advanced html programming

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


Cs332a advanced html programming

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


Cs332a advanced html programming

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


  • Login