Introduction to Web Site Development Lecture 2: More HTML Department of Computer Science California State University, Los Angeles
Quick Recap 0 HTML is case insensitive <HTML></HTML> is OK
Quick Recap 1 An HTML page is a tree of HTML elements The beginning and end of each element in an HTML page must be marked by start and end tags Some elements may be declared minus their end tags For example, void elements with no content such as BR Use <BR> instead of <BR></BR> Some elements may be declared with self-closing tags Use <BR /> instead of <BR> or <BR></BR>
Quick Recap 2 An HTML page always begins with a DOCTYPE header (it is not an HTML element or tag) <!DOCTYPE HTML> Required for legacy reasons (XHTML) Next up we place the HTML element Must contain a HEAD element, followed by a BODY element The HEAD element contains metadata, such as the TITLE element
Quick Recap 3 The BODY element contains flow content Flow content is any element that can be used within the BODY element (stuff you want to show up in your webpage) Paragraphs, images, tables, code, etc. Here are the flow content elements we covered in class last week P, BR, H1, H2, H3, H4, H5, H6 B, I, STRONG, EM, SMALL, SUB, SUP
Quick Recap 4 The P element contains phrasing content Phrasing content is any element that can be used within the P element Text, images, videos, etc. Here are the phrasing content elements we covered in class last week BR, B, I, STRONG, EM, SMALL, SUB, SUP
Global Attributes HTML elements may specify attributes within the start tag Global attributes are attributes common to all HTML elements For now, we are only going to worry about two global attributes TITLE DIR
The TITLE Attribute Description Values Example Displays a tooltip when you hover the mouse over an HTML element Values Text content Example <P TITLE="This is a tooltip.">When you place the mouse over this text, you will get a tooltip!</P>
The DIR Attribute Description Values Example Controls the direction of the content. Values RTL (right-to-left) LTR (left-to-right) Example <P DIR="RTL">Hey look, this is really weird!</P>
The HR Element Description: Requirements: Usage: Used to render a horizontal rule (line) Requirements: Start Tag: REQUIRED End Tag: FORBIDDEN Usage: Context: Where flow content is expected Content Model: Empty
The HR Element Examples: <HR> <HR />
The PRE Element Description: Requirements: Usage: Used to render preformatted text Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where flow content is expected Content Model: Phrasing content
The PRE Element Examples: <PRE>Preformatted text!</PRE> <PRE> Dreamworks Pictures 1000 Flower St. Glendale, CA 90012 </PRE>
The CODE Element Description: Requirements: Usage: Used to render preformatted code Currently, poor browser support Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where phrasing content is expected Content Model: Phrasing content
The CODE Element Examples: <CODE>Preformatted code!</CODE> <CODE> #include<iostream> using namespace std; void main() { cout << “Hello world!” << endl; } </CODE>
The SAMP Element Description: Requirements: Usage: Used to render preformatted sample output Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where phrasing content is expected Content Model: Phrasing content
The SAMP Element Examples: <SAMP>Preformatted output!</SAMP> <SAMP> Level 01: 164 pts<BR> Level 02: 128 pts<BR> Level 03: 197 pts<BR> Level 04: 243 pts </SAMP>
The KBD Element Description: Requirements: Usage: Used to render preformatted sample output Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where phrasing content is expected Content Model: Phrasing content
The KBD Element Examples: <SAMP>Preformatted output!</SAMP> <SAMP> Level 01: 164 pts<BR> Level 02: 128 pts<BR> Level 03: 197 pts<BR> Level 04: 243 pts </SAMP>
The ABBR Element Description: Requirements: Usage: Used to mark an abbreviation or acronym Use TITLE attribute to define abbreviation Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where phrasing content is expected Content Model: Phrasing content
The ABBR Element Example: <ABBR title="Australia">AUS</ABBR>
The CITE Element Description: Requirements: Usage: Used to mark a title of a work Typically used in citations Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where phrasing content is expected Content Model: Phrasing content
The CITE Element Example: <p><cite>Texture mapping on surfaces of arbitrary topology using norm preserving-based optimization</cite>, The Visual Computer, 2005, pp. 783-790</p>
The BDO Element Description: Requirements: Usage: Controls the direction of text Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where phrasing content is expected Content Model: Phrasing content
The BDO Element Example: <P> <BDO DIR="RTL">Hey, this is weird!</BDO> </P>
The OL Element Description: Requirements: Usage Defines an ordered list Optional START attribute may be overridden Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage Context: Use where flow content is expected Content Model: Zero or more LI elements
The OL Element Examples: <OL start="3"><LI>1<LI>2</OL> <OL> <LI>Cereal</LI> <LI>Strawberries</LI> <LI>Bananas</LI> </OL>
The UL Element Description: Requirements: Usage: Defines an unordered list Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Use where flow content is expected Content Model: Zero or more LI elements
The UL Element Examples: <UL> <LI>Steven <LI>Joe <LI>Alan </UL>
The LI Element Description: Requirements: Usage: Defines an ordered or unordered list item Use VALUE attribute to skip numbers in ordered lists Requirements: Start Tag: REQUIRED End Tag: OPTIONAL Usage: Context: Use inside OL and UL elements Content Model: Flow content
The LI Element Example: <OL START="3"> <LI>1 <LI VALUE="12">2 <LI>3 </OL> Note that START and VALUE are not global attributes. They are attributes specific to OL and LI, respectively.
The DL Element Description: Comments: Usage Defines a definition list Useful for a things like a list of dictionary entries Comments: Start Tag: REQUIRED End Tag: REQUIRED Usage Context: Where flow content is expected Content Model: Zero or more DT elements
The DT Element Description: Comments: Usage: Defines a definition term within a definition list Must contain one or more DD elements (definitions) Comments: Start Tag: REQUIRED End Tag: OPTIONAL Usage: Context: Before DD or DT elements inside DL elements Content Model: Phrasing content
The DD Element Description: Requirements: Usage: Defines a definition description for a definition term Requirements: Start Tag: REQUIRED End Tag: OPTIONAL Usage: Context: Use after DT or DD elements inside DL elements Content Model: Flow content
DL, DT, and DD Element Example <DL> <DT>Steven</DT> <DD>Old graduate student</DD> <DD>Funny-looking guy</DD> <DD>Your CS120 instructor</DD> < DT>Joe</DT> <DD>Steven's crazy newphew</DD> <DD>Silly kid</DD> <DD>Crazy about fishing</DD> </DL>