other important part in body section
Download
Skip this Video
Download Presentation
Other Important Part in Body Section

Loading in 2 Seconds...

play fullscreen
1 / 22

Other Important Part in Body Section - PowerPoint PPT Presentation


  • 68 Views
  • Uploaded on

Lab of COMP 102 Mar . 21- Mar . 22 , 2012. Other Important Part in Body Section. Shenghua ZHONG Department of Computing The Hong Kong Polytechnic University [email protected] Outline. Multipurpose Elements Embedding External Content Styling Content with CSS

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Other Important Part in Body Section' - tadhg


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
other important part in body section

Lab of COMP 102Mar. 21-Mar. 22, 2012

Other Important Part in Body Section

Shenghua ZHONG

Department of Computing

The Hong Kong Polytechnic University

[email protected]

outline
Outline

Multipurpose Elements

Embedding External Content

Styling Content with CSS

Including Images in Your Content

outline1
Outline

Multipurpose Elements

Embedding External Content

Styling Content with CSS

Including Images in Your Content

multipurpose elements
Multipurpose Elements

4

  • Function of multipurpose elements
    • Two generic elements in XHTML: div and span
    • Use when no other element quite meets your needs
    • Use to group and distinguish portions of content
  • div
    • Create a logical division by grouping related content and elements together
    • Organize content into large blocks that can style with CSS or manipulate with JavaScript
  • Example
multipurpose elements span
Multipurpose Elements: span

5

  • span
    • The div’s inline cousin
    • Use to set apart an arbitrary segment of text to act as a “hook” for CSS styling
  • Example
outline2
Outline

Multipurpose Elements

Embedding External Content

Styling Content with CSS

Including Images in Your Content

embedding external content
Embedding External Content
  • Why need embed external content
    • Need to embed external content such as images, Java applets, Flash animations, or QuickTime videos
  • obj
    • Embed a file or type of media that exists external to the XHTML document
  • param
    • Nested within an object element to define various object parameters
    • Is an empty element, should close it with a trailing slash (/>).
presentational elements
Presentational Elements
  • Note
    • Strongly discourage the use of presentational markup
  • Some examples
    • i and b: designates text to be displayed in an italic font or designates boldfaced text
    • big and small: be slightly larger or slightly shrunken
    • sub and sup: include superscript or subscript characters in your text
  • Example
special characters
Special Characters
  • Entity name
    • A predefined name referring to a particular symbol
  • Numeric character reference
    • Refers to a character by its assigned
  • Example
outline3
Outline

Multipurpose Elements

Embedding External Content

Styling Content with CSS

Including Images in Your Content

styling content with css
Styling Content with CSS
  • Existing knowledge of CSS
    • Show content rendered in a browser’s default style, with its default fonts, colors, and spacing
  • More CSS
    • Font family
      • Declared using the font-family property, followed by a comma separated list of typefaces, in order of preference
    • Font size
      • Change from default size (16px)
    • Line height
      • Change the line height which is the height of a line of text measured from its baseline to the preceding baseline
example about css
Example about CSS

Font Family

Font Size

Line Height

Font Size

styling lists i
Styling Lists (I)
  • Changing unordered list markers
    • Using the list-style-type property: disc (default bullet), circle (an empty circle), or square (a solid square)
    • Using an image as a list marker
  • Example
styling lists ii
Styling Lists (II)

Changing the style of ordered lists

Example

outline4
Outline

Multipurpose Elements

Embedding External Content

Styling Content with CSS

Including Images in Your Content

including images in your content
Including Images in Your Content
  • Web-Friendly Image Formats
    • Three formats: JPEG, GIF, and PNG
  • Rendering a web page with two-stage
    • First the markup is downloaded
    • Then the external images are downloaded
  • img element
    • It’s an empty element with no text content
    • It must be self-closed with a trailing slash (/>)
attributes of img
Attributes of img
  • Required attributes
    • src: specifies the URL where the graphic file resides on a web server
    • alt: provides an alternative text equivalent of the image
  • Optional attributes
    • width: specifies the width of the image in pixels
    • height: specifies the height of the image in pixels
    • ismap: declares that the image is used for a server-side image map
    • usemap: identifies a client-side image map to be used
    • longdesc: specifies the URL of an extended text description of the image
simple example of img
Simple Example of img
  • Why need alt
    • Provide a brief alternative text description preserves some intent when the image itself isn’t visible
  • Example
img in context
img in Context
  • An img inline with text in a paragraph
img in context with css
img in Context with CSS
  • The CSS Rule for the figure Class
background images
Background Images
  • You can add decorative imagery to your page and still avoid mixing presentation with your content
ad