Other important part in body section
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

Other Important Part in Body Section PowerPoint PPT Presentation


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

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

Download Presentation

Other Important Part in Body Section

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 (/>).


Results after embedding external content

Results after Embedding External Content


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


  • Login