1 / 22

Other Important Part in Body Section

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 zsh696@gmail.com. Outline. Multipurpose Elements Embedding External Content Styling Content with CSS

tadhg
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. 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. Lab of COMP 102Mar. 21-Mar. 22, 2012 Other Important Part in Body Section Shenghua ZHONG Department of Computing The Hong Kong Polytechnic University zsh696@gmail.com

  2. Outline Multipurpose Elements Embedding External Content Styling Content with CSS Including Images in Your Content

  3. Outline Multipurpose Elements Embedding External Content Styling Content with CSS Including Images in Your Content

  4. 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

  5. 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

  6. Outline Multipurpose Elements Embedding External Content Styling Content with CSS Including Images in Your Content

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

  8. Results after Embedding External Content

  9. 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

  10. Special Characters • Entity name • A predefined name referring to a particular symbol • Numeric character reference • Refers to a character by its assigned • Example

  11. Outline Multipurpose Elements Embedding External Content Styling Content with CSS Including Images in Your Content

  12. 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

  13. Example about CSS Font Family Font Size Line Height Font Size

  14. 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

  15. Styling Lists (II) Changing the style of ordered lists Example

  16. Outline Multipurpose Elements Embedding External Content Styling Content with CSS Including Images in Your Content

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

  18. 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

  19. Simple Example of img • Why need alt • Provide a brief alternative text description preserves some intent when the image itself isn’t visible • Example

  20. img in Context • An img inline with text in a paragraph

  21. img in Context with CSS • The CSS Rule for the figure Class

  22. Background Images • You can add decorative imagery to your page and still avoid mixing presentation with your content

More Related