1 / 24

The Head and Body Section

Lab of COMP 102 Mar . 14- Mar . 15 , 2012. The Head and Body Section. Shenghua ZHONG Department of Computing The Hong Kong Polytechnic University zsh696@gmail.com. Outline. The head Section The Supporting Elements in head Section The body Section List in body Phrase Elements in body

zea
Download Presentation

The Head and 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. 14-Mar. 15, 2012 The Head and Body Section Shenghua ZHONG Department of Computing The Hong Kong Polytechnic University zsh696@gmail.com

  2. Outline The head Section The Supporting Elements in head Section The body Section List in body Phrase Elements in body Codes for Programming

  3. Outline The head Section The Supporting Elements in head Section The body Section List in body Phrase Elements in body Codes for Programming

  4. Beginning of head 4 • Characters of head • Is a section as well as an element • May contain any of the following elements as well: base, link, meta, script, style, and title • Nothing in the head section is displayed to users in the browser, except the <title> element, show in browser’s title bar • Example

  5. Outline The head Section The Supporting Elements in head Section The body Section List in body Phrase Elements in body Codes for Programming

  6. The Supporting Elements in head Section--<base> • Function of <base> • Help make links shorter and maintenance easier • Specify a base URL for all the links in a document • Required Attributes • href: Specifies a URL to be used as the base URL for links in the document • Example

  7. The Supporting Elements in head Section--<link> • Function of <link> • Defines the relationship between two linked documents • Often used to link external style sheets into the current document • Optional Attributes • href: The URL pointing to the document that is being linked • rel: Defines the relationship between the document being linked to and the current document • type: Specifies the Multipurpose Internet Mail Extensions (MIME) type of the target URL • … • Example

  8. The Supporting Elements in head Section--<meta> • Function of <meta> • Use the <meta> tag to provide keywords and descriptions that search engines can use to catalog your document • Optional Attributes • http-equiv: Connects the content attribute value to a specific HTTP response header • name: Assigns extra information to a document • … • Example

  9. The Supporting Elements in head Section--<style> makes the screen font size 16 pixels, while making the text on the printed page 12 pixels. Both the screen and printed media have normal font weight (as opposed to bold) • Function of <style> • Create internal style sheets for your document. • Required Attributes • type: Defines the style type and is pretty much always set to text/css • Optional Attributes • media: Defines what media the style should affect. • … • Example

  10. Outline The head Section The Supporting Elements in head Section The body Section List in body Phrase Elements in body Codes for Programming

  11. body Element in Html • Position of body • Come after the head element and must be closed before the closing </html> tag • Any content appearing outside the body element will make the document invalid • Empty body element

  12. The Supporting Elements in body Section--<p> • Function of <p> • Marking each paragraph’s boundaries with a p element • The beginning of one paragraph is indicated by an opening <p> tag, and a closing </p> tag marks its end • Required Attributes • type: Defines the style type and is pretty much always set to text/css • Optional Attributes • media: Defines what media the style should affect. • … • Example

  13. The Supporting Elements in body Section--<h1>, <h2>, <h3>,...,<h6> • Function of <h1>,<h2>,….<h6> • Act as titles to introduce a new section of content • Offers a range of six heading elements to indicate the relative importance of a heading or its rank in the document’s hierarchy • Organize your document as a simple outline, separated into specific topics or areas of interest, sorted from the top down in order of importance • Example

  14. The Supporting Elements in body Section--<pre> • Function of <pre> • Define a block of preformatted text in which white space and line breaks should be preserved exactly as they appear in the markup • Useful for displaying computer code or poetry • Example

  15. Outline The head Section The Supporting Elements in head Section The body Section List in body Phrase Elements in body Codes for Programming

  16. List in body • Three types of lists • Unordered lists, ordered lists, and definition lists In this lab, we introduce the first two. • Unordered list • Designated by the ul element and is used for lists wherein the sequence isn’t especially significant • Each list item is in turn defined by li element, all contained by the surrounding <ul> and </ul> tags • Example

  17. Ordered List • Definition • The ol element defines an ordered list, items are followed in a specific sequence • Example

  18. Example of Complex Unordered List

  19. Outline The head Section The Supporting Elements in head Section The body Section List in body Phrase Elements in body Codes for Programming

  20. Phrase Elements in body • Function of phrase elements • Wrap around a short string of a few words to give it added meaning and formatting • em • Add emphasis to a word or phrase • Display in an italicized font in most visual web browsers • Screen-reading software used by visually impaired may read contents aloud with different vocal inflection • strong • The strong element adds strong emphasis to text • More importance than an em element can provide • Text in a strong element is displayed in a boldfaced font in graphical browsers, but may be emphasized differently by other devices

  21. More Popular Tags • br • Creates a line break at a specific point make text to wrap to a new line (single self-closed tag with />) • hr • Creates a horizontal rule, a dividing line between sections of content (single self-closed tag with />)

  22. Outline The head Section The Supporting Elements in head Section The body Section List in body Phrase Elements in body Codes for Programming

  23. Programming Code in HTML • code • Be used to designate a portion of code • kbd • Defines text or commands that the user should enter • samp • Illustrates sample output of a program or script • var • Be used to designate a programming variable or argument

  24. Other Supporting Elements in body Section • blockquote • Designates a long quotation, such as a passage from a book or a blurb from a review • address • Provide contact information for the person or organization responsible for the particular document • abbr … • cite … • q … • dfn …

More Related