introduction to web site development
DESCRIPTION
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 is OK is OK. Quick Recap 1. An HTML page is a tree of HTML elements - PowerPoint PPT PresentationTRANSCRIPT
Introduction to Web Site Development
Steven EmoryDepartment of Computer Science
California State University, Los Angeles
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:<!doctype html><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>