Fundamentals of Web Programming Lecture 5 HTML Basics

Today’s Topics • Block-Level Formatting Tags • List Formatting Tags • Hyperlink Tags 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 2

Block-Level Format Tags • <BLOCKQUOTE>, <BR>, <CENTER>, <DIV>, <HR>, <H 1>…<H 6>, <PRE>, <SPAN> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 3

Tag: <BLOCKQUOTE> • Type: container • Function: Contains quoted text to be display indented from the main body text • Syntax: <BLOCKQUOTE URL=“url”> … </BLOCKQUOTE> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 4

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. 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 5

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 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 6

Tag: <BR> • Example: My Name My Address 1 My Address 2 My State&Zip

Tag: <CENTER> • Type: container • Function: Centers all text and other page components it contains • Syntax: <CENTER>…</CENTER> • Attributes: none 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 8

Tag: <CENTER> • Example: <CENTER> <H 2>My Example</H 2> <H 3>by Me</H 3> </CENTER> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 9

Tag: <DIV> • Type: container • Function: Defines a section or division that requires special alignment • Syntax: <DIV ALIGN= “LEFT | RIGHT| CENTER | JUSTIFY”>…</DIV> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 10

Tag: <DIV> • Attributes: – ALIGN - controls how the contents are aligned • Example: <DIV ALIGN=“RIGHT”>Text to right-align</DIV> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 11

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_%”> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 12

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 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 13

Tag: <HR> • Example: <HR NOSHADE WIDTH=“ 80%” SIZE=4> 20 -753: Fundamentals of Web

Tag: <H 1>…<H 6> • 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. 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 15

Tag: <H 1>…<H 6> • 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 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 16

Tag: <H 1>…<H 6> • Example: <H 1 ALIGN=“CENTER”>Table of Contents</H 1> <H 2>Chapter 1</H 2> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 17

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> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 18

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> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 19

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> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 20

Tag: <PRE> • Attributes: – WIDTH - the number of characters in the widest line of the text block; helps browser choose the right font size 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 21

Tag: <PRE> • Example: <PRE WIDTH=34> Catalog No. Item Price AZ-1390 Polo Shirt $29. 99 </PRE> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 22

Tag: <SPAN> • Type: container • Function: Generic container tag for scoping style information • Syntax: <SPAN STYLE=“style info”>…</SPAN> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 23

Tag: <SPAN> • Attributes: – STYLE - a sequence of characteristic: value pairs (css 1) • Example: <SPAN STYLE=“font-weight: bold; color: red; text-indent: 0. 25 in”> Here is some bold, red, indented text. </SPAN> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 24

List Tags • <LI>, <DIR>, <DL>, <DT>, <DD>, <MENU>, <OL>, <UL> 20 -753: Fundamentals

Tag: <LI> • Type: container • Function: Denotes an item in a list • Syntax: <LI TYPE=“list_type” START=“start_value”>…</LI> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 26

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) 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 27

Tag: <LI> • Example: <LI>Fee</LI> <LI>Fi</LI> <LI>Fo</LI> • Related: Used with <DIR>, <MENU>, <OL>, <UL> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 28

Tag: <DIR> • Type: container • Function: Creates a directory listing (deprecated) • Syntax: <DIR COMPACT>…</DIR> • Attributes: – COMPACT - reduce vertical spacing as much as possible 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 29

Tag: <DIR> • Example: <DIR> <LI>Larry, x 1234</LI> <LI>Moe, x 3456</LI> </DIR> • Related: Items are specified using <LI> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 30

Tag: <DL> • Type: container • Function: Denotes a definition list • Syntax: <DL COMPACT>…</DL> • Attributes: – COMPACT - reduce vertical spacing as much as possible 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 31

Tag: <DL> • Example: <DL> <DT>Browser</DT> <DD>Your cyber-surfboard</DD> </DL> • Related: Terms are specified with <DT>, definitions with <DD> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 32

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> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 33

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> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 34

Tag: <MENU> • Type: container • Function: Creates a menu listing (deprecated) • Syntax: <MENU COMPACT>…</MENU> • Attributes: – COMPACT - reduce the vertical spacing between items 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 35

Tag: <MENU> • Example: <MENU COMPACT> <LI>Tofu</LI> <LI>Tempeh</LI> <MENU> • Related: Items specified with <LI> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 36

Tag: <OL> • Type: container • Function: Creates an ordered (numbered) list • Syntax: <OL TYPE=“ 1 | A | a | I | i” START=“start_value” COMPACT>…</OL> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 37

Tag: <OL> • Attributes: – COMPACT - reduce vertical spacing between items – START - change starting index of the first item – TYPE - controls numbering scheme (see <LI>) 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 38

Tag: <OL> • Example: <OL TYPE=“A”> <LI>HTML</LI> <LI>Dynamic HTML</LI> </OL> • Related: Items specified with <LI> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 39

Tag: <UL> • Type: container • Function: Creates an unordered (bulleted) list • Syntax: <UL TYPE=“DISC | SQUARE | CIRCLE” COMPACT>…</UL> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 40

Tag: <UL> • Attributes: – COMPACT - reduce vertical spacing between items – TYPE - specify the type of bullet character that is used 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 41

Tag: <UL> • Example: <UL TYPE=“SQUARE”> <LI>Navigator</LI> <LI>Explorer</LI> </UL> • Related: Items specified with <LI> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 42

Hyperlink Tags • <A> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics

Tag: <A> • Type: container • Function: – Used with HREF, creates a hyperlink to a URL – Used with NAME, creates a named anchor 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 44

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> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 45

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 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 46

Tag: <A> • Example: <A HREF=“prod. html” TARGET=“main” ACCESSKEY=“P”> Products and Services </A> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 47

Tag: <A> • Example: <A NAME=“toc”> <H 1>Table of Contents</H 1> </A> <A HREF=“#toc”> <A HREF=“index. html#toc”> 20 -753: Fundamentals of Web Programming Lecture 5: HTML Basics II Copyright © 1999, Carnegie Mellon. All Rights Reserved. 48