420 likes | 644 Views
Steven Emory Department of Computer Science California State University, Los Angeles. Introduction to Web Site Development. Lecture 2: More HTML. Quick Recap 0. HTML is case insensitive <HTML></HTML> is OK <Html></htML> is OK. Quick Recap 1. An HTML page is a tree of HTML elements
E N D
Steven Emory Department of Computer Science California State University, Los Angeles Introduction to Web Site Development Lecture 2: More HTML
Quick Recap 0 • HTML is case insensitive • <HTML></HTML> is OK • <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 • For example, void elements with no content such as BR • 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 (The P Element) • Description • Used to mark paragraphs. The P element should always be a part of flow content. • Comments • Start Tag: Required • End Tag: Optional • Self-Closing Tag: Works, but not technically legal • Example • <P>The is paragraph text. Type more here…</P>
Quick Recap (The BR Element) • Description • Marks a line break within phrasing content (text, video and audio). • Comments • Start Tag: Required • End Tag: Forbidden • Self-Closing Tag: Works, but technically illegal • Example • <P>Steven Emory<BR>10298 Atlantic Ave.<BR>Beverly Hills, CA 90210</P>
Quick Recap (The H1 - H6 Elements) • Description • Marks a new heading (H1 largest, H6 smallest). • Comments • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example • <H1>Chapter 1</H1><H2>Section 1.1</H2> <H2>Section 1.2</H2><H3>Section 1.2.1</H3>
Quick Recap (The B and I Elements) • Description • Marks bold and italic phrasing content. • Comments • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example • <P>Sometime <B>long</B> ago, in a land<I>far, far</I> away…</P>
Quick Recap (The STRONG and EM Elements) • Description • Marks strong and emphatic phrasing content. • Comments • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example • <P>Sometime <STRONG>long</BTRONG> ago,in a land <EM>far, far</EM> away…</P>
Quick Recap (The STRONG and EM Elements) • The STRONG and EM elements by default behave similarly to B and I respectively, but there is a difference • We can make STRONG and EM behave differently using CSS • Try the code on the next slide! • We haven’t covered CSS, but we can make them behave differently!
Quick Recap (The STRONG and EM Elements) • STRONG versus B example: • <!doctypehtml><html><head><title>Lab</title> <style type="text/css"> strong{color:#FF0000;font-size:xx-large} </style></head><body><p>This is <strong>strong</strong> text.</p><p>This is <b>bold</b> text.</p></body></html>
Quick Recap (The SMALL Element) • Description • Marks phrasing content that will be rendered small. • Comments • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example • <SMALL>*Your results may vary. You will more than likely not experience the same results.</SMALL>
Quick Recap (The SUB and SUP Elements) • Description • Marks subscript and superscript phrasing content. • Comments • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example • b<SUB>0</SUB>2<SUP>0</SUP> +b<SUB>1</SUB>2<SUP>1</SUP> + … +b<SUB>n–1</SUB>2<SUP>n–1</SUP>
Comments • It is really easy to add a comment in HTML • Syntax: • <!- comment text --> • Comment text may not contain two double dashes • Comment text should not contain < or > either • Example: • <!- This is a comment. -->
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 • 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 • 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>
More HTML Elements • The HR Element (Horizontal Rule) • The PRE Element (Preformatted Text) • The ABBR Element (Abbreviation) • The BDO Element (Bidirectional Override) • The OL and UL Elements (Lists) • The LI Element (List Item) • The DL Element (Definition List) • The DT Element (Definition Term) • The DD Element (Definition Description)
The HR Element • Description: • Used to render a horizontal rule (line) • Comments: • Start Tag: Required • End Tag: Forbidden • Self-Closing Tag: Works, but technically illegal • Example: • <HR>
The PRE Element • Description: • Used to render preformatted text • Comments: • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example: • <PRE>Preformatted text!</PRE>
The ABBR Element • Description: • Used to mark an abbreviation or acronym • Comments: • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example: • <ABBR title="Australia">AUS</ABBR>
The BDO Element • Description: • Controls the direction of text • You should override the DIR attribute • Comments: • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example: • <BDO DIR="RTL">Hey look, this is really weird!</BDO>
The OL Element • Description: • Defines an ordered list • Optional START attribute may be overridden • Comments: • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example: • <OL start="3"><LI>1<LI>2</OL>
The UL Element • Description: • Defines an unordered list • Comments: • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example: • <UL start="3"><LI>1<LI>2</UL>
The LI Element • Description: • Defines an ordered or unordered list item • You may override the VALUE attribute • Comments: • Start Tag: Required • End Tag: Optional • Self-Closing Tag: Works, but technically illegal • Example: • <UL start="3"><LI>1<LI>2</UL>
The LI Element • Description: • Defines an ordered or unordered list item • You may set the VALUE attribute to skip numbers in an ordered list (see example on next slide) • Comments: • Start Tag: Required • End Tag: Optional • Self-Closing Tag: Works, but technically illegal
The LI Element (Example) • 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: • Defines a definition list • Useful for things like a list of dictionary entries that have many definitions • Must contain zero or more DT elements (terms) • Comments: • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden
The DT Element • Description: • Defines a definition term within a definition list • Useful to describe something (a term) that has multiple meanings (definitions) • Must contain one or more DD elements (definitions) • Comments: • Start Tag: Required • End Tag: Optional • Self-Closing Tag: Works, but technically illegal
The DD Element • Description: • Defines a definition description for a definition term • Comments: • Start Tag: Required • End Tag: Optional • Self-Closing Tag: Works, but technically illegal
DL Element Example • 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>