1 / 32

Introduction to Web Site Development

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

lewis-whitehead
Download Presentation

Introduction to Web Site Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Steven Emory Department of Computer Science California State University, Los Angeles Introduction to Web Site Development Lecture 2: More HTML

  2. Quick Recap 0 • HTML is case insensitive • <HTML></HTML> is OK • <Html></htML> is OK

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related