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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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