Fundamentals of Web Programming Lecture 5: HTML Basics II Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Today’s Topics Block-Level Formatting Tags List Formatting Tags Hyperlink Tags Lecture 5: HTML Basics II

Block-Level Format Tags <BLOCKQUOTE>, <BR>, <CENTER>, <DIV>, <HR>, <H1>…<H6>, <P>, <PRE>, <SPAN> Lecture 5: HTML Basics II

Tag: <BLOCKQUOTE> Type: container Function: Contains quoted text to be display indented from the main body text Syntax: <BLOCKQUOTE URL=“url”> … </BLOCKQUOTE> Lecture 5: HTML Basics II

Tag: <BLOCKQUOTE> Attributes: CITE - supply a URL for an on-line source Example: <BLOCKQUOTE> We the people, … </BLOCKQUOTE> Related: <Q> is used to quote text that is in line with the body text. Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <BR> Type: standalone Function: Insert line break in the document; adds no vertical space Syntax: <BR CLEAR=“LEFT|RIGHT|ALL”> Attributes: CLEAR - tells which margin to break to beyond a floating element Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <BR> Example: My Name<br> My Address1<br> My Address2<br> My State&Zip Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <CENTER> Type: container Function: Centers all text and other page components it contains Syntax: <CENTER>…</CENTER> Attributes: none Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <CENTER> Example: <CENTER> <H2>My Example</H2> <H3>by Me</H3> </CENTER> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <DIV> Type: container Function: Defines a section or division that requires special alignment Syntax: <DIV ALIGN= “LEFT | RIGHT| CENTER | JUSTIFY”>…</DIV> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <DIV> Attributes: ALIGN - controls how the contents are aligned Example: <DIV ALIGN=“RIGHT”>Text to right-align</DIV> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <HR> Type: standalone Function: Places a horizontal line (“rule”) on the page Syntax: <HR ALIGN=“LEFT | RIGHT |CENTER” NOSHADE SIZE=“n” WIDTH=“pixels_or_%”> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <HR> Attributes: ALIGN - changes the alignment on the page (if width less than page width); default is CENTER NOSHADE - suppress the shading effect (solid line) SIZE - thickness of the line in pixels WIDTH - width of the line in pixels or a percentage of the document width Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <HR> Example: <HR NOSHADE WIDTH=“80%” SIZE=4> Lecture 5: HTML Basics II

Tag: <H1>…<H6> Type: container Function: A hierarchy of document heading levels (from largest to smallest); all are boldface and add vertical space to the document above and below. Lecture 5: HTML Basics II

Tag: <H1>…<H6> Syntax: <Hn ALIGN=“LEFT | RIGHT | CENTER | JUSTIFY”>…</Hn> where n = 1,2,3,4,5, or 6 Attributes: ALIGN - controls how the heading is aligned on the page; default is LEFT Lecture 5: HTML Basics II

Tag: <H1>…<H6> Example: <H1 ALIGN=“CENTER”>Table of Contents</H1> <H2>Chapter 1</H2> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <P> Type: container Function: Denotes a paragraph; adds vertical space above and below the contained items. Syntax: <P ALIGN=“LEFT | RIGHT | CENTER | JUSTIFY”>…</P> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <P> Attributes: ALIGN - controls how the text in the paragraph is aligned Example: <P ALIGN=“CENTER”> Every line in this paragraph will be centered… </P> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <PRE> Type: container Function: Denotes pre-formatted text; rendered width fixed-width, white space not ignored Syntax: <PRE WIDTH=“width of widest line”>…</PRE> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <PRE> Attributes: WIDTH - the number of characters in the widest line of the text block; helps browser choose the right font size Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <PRE> Example: <PRE WIDTH=34> Catalog No. Item Price AZ-1390 Polo Shirt $29.99 </PRE> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <SPAN> Type: container Function: Generic container tag for scoping style information Syntax: <SPAN STYLE=“style info”>…</SPAN> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <SPAN> Attributes: STYLE - a sequence of characteristic: value pairs (css1) Example: <SPAN STYLE=“font-weight: bold; color: red; text-indent: 0.25in”> Here is some bold, red, indented text. </SPAN> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II List Tags <LI>, <DIR>, <DL>, <DT>, <DD>, <MENU>, <OL>, <UL> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag:<LI> Type: container Function: Denotes an item in a list Syntax: <LI TYPE=“list_type” START=“start_value”>…</LI> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <LI> Attributes: START - for ordered lists; specify the starting position (default=1, a, etc.) TYPE - for ordered lists: can be 1 (Arabic), A (uppercase), a (lowercase), I (uppercase Roman), i (lowercase Roman) for unordered lists: can be DISC, SQUARE, CIRCLE (bullet style) Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <LI> Example: <LI>Fee</LI> <LI>Fi</LI> <LI>Fo</LI> Related:Used with <DIR>, <MENU>, <OL>, <UL> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <DIR> Type: container Function: Creates a directory listing (deprecated) Syntax: <DIR COMPACT>…</DIR> Attributes: COMPACT - reduce vertical spacing as much as possible Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <DIR> Example: <DIR> <LI>Larry, x1234</LI> <LI>Moe, x3456</LI> </DIR> Related: Items are specified using <LI> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <DL> Type: container Function: Denotes a definition list Syntax: <DL COMPACT>…</DL> Attributes: COMPACT - reduce vertical spacing as much as possible Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <DL> Example: <DL> <DT>Browser</DT> <DD>Your cyber-surfboard</DD> </DL> Related: Terms are specified with <DT>, definitions with <DD> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <DT> Type: container Function: Contains a term to be defined in a definition list Syntax: <DT>…</DT> Attributes: none Example: (see <DL>) Related: Must be used inside <DL> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <DD> Type: container Function: Contains a definition for a term Syntax: <DD>…</DD> Attributes: none Example: (see <DL>) Related: Must be used inside <DL> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <MENU> Type: container Function: Creates a menu listing (deprecated) Syntax: <MENU COMPACT>…</MENU> Attributes: COMPACT - reduce the vertical spacing between items Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <MENU> Example: <MENU COMPACT> <LI>Tofu</LI> <LI>Tempeh</LI> <MENU> Related: Items specified with <LI> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <OL> Type: container Function: Creates an ordered (numbered) list Syntax: <OL TYPE=“1 | A | a | I | i” START=“start_value” COMPACT>…</OL> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <OL> Attributes: COMPACT - reduce vertical spacing between items START - change starting index of the first item TYPE - controls numbering scheme (see <LI>) Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <OL> Example: <OL TYPE=“A”> <LI>HTML</LI> <LI>Dynamic HTML</LI> </OL> Related: Items specified with <LI> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <UL> Type:container Function: Creates an unordered (bulleted) list Syntax: <UL TYPE=“DISC | SQUARE | CIRCLE” COMPACT>…</UL> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <UL> Attributes: COMPACT - reduce vertical spacing between items TYPE - specify the type of bullet character that is used Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <UL> Example: <UL TYPE=“SQUARE”> <LI>Navigator</LI> <LI>Explorer</LI> </UL> Related: Items specified with <LI> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Hyperlink Tags <A> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <A> Type: container Function: Used with HREF, creates a hyperlink to a URL Used with NAME, creates a named anchor Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <A> Syntax: <A HREF=“URL” TARGET=“frame” REL=“forward_link_type” REV=“reverse_link_type” ACCESSKEY=“key_letter” TABINDEX=“tab_order_position”>…</A> <A NAME=“anchor_name”>…</A> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <A> Attributes: ACCESSKEY - a shortcut key (e.g., Alt+key in Windows) HREF - URL the link points to NAME - Name of the anchor REL - Forward link (see Table 3.1) REV - Reverse link (see Table 3.1) TABINDEX - position in tab order TARGET - frame to load to Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <A> Example: <A HREF=“prod.html” TARGET=“main” ACCESSKEY=“P”> Products and Services </A> Lecture 5: HTML Basics II

Lecture 5: HTML Basics II Tag: <A> Example: <A NAME=“toc”> <H1>Table of Contents</H1> </A> <A HREF=“#toc”> <A HREF=“index.html#toc”> Lecture 5: HTML Basics II