1. COMS 161 Introduction to Computing
Title: HTML
Date: March 18, 2005
Lecture Number: 25

2. Announcements
Test 3/23/05
Wednesday
Introducing Wilbur

3. Review
HTML
Document structure
Tags
Block level

4. Outline
HTML
Document structure
Tags
Block level
Lists
Tables

5. Heading Tags
Commonly used to set apart different sections of the document
Belong in the BODY section
Six different levels of headings
<H1>Heading 1</H1> most important
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6> least important

6. Heading Tags Browsers show headings that decrease in significance
With the same font
Decreasing font size
Show Me

7. Heading Tags Headings are meant for section titles
They are defined as existing on a line by themselves
Headings always begin at the margin of a line and always force a line break at the end
Headings can be centered
Show Me
Don’t use heading tags to control font sizes
This is an HTML way of doing this

8. List Elements
HTML provides an assortment of tags for organizing information to be displayed as a list
<OL> is used to create an ordered list (this list of tags is formatted using <OL>)
<UL> is used to create an unordered list
Members of such lists are typically formatted with bullets
<DL> is used to create a definition list
Each member is a pair consisting of the term being defined and the definition

9. Ordered and Unordered Lists
List items are specified with the <LI> tag
<H3> Topics </H3> <UL>  <LI> HTML </LI> <LI> TCP/IP </LI>  </UL>
<H3> Topics </H3> <OL>  <LI> HTML </LI> <LI> TCP/IP </LI>  </OL>
The closing tag </LI> is optional

10. Ordered and Unordered Lists
Bullet/numbering is controlled using the "TYPE" attribute in the <UL>, <OL>, or <LI> tags
<H3> Topics </H3> <UL TYPE=SQUARE>  <LI> HTML </LI> <LI> TCP/IP </LI>  </OL>
<H3> Topics </H3> <OL TYPE=a >  <LI> HTML </LI> <LI> TCP/IP </LI>  </OL>

11. Definition Lists Each member of a definition list requires 2 elements:
The term defined is specified as a <DT> element (define term (DT))
The definition is specified as a <DD> element

12. Definition Lists Show Me <H4> Grade List </H4> <DL>
<DT>Homework</DT>
<DD>Work that should be done outside of the classroom </DD>
<DT>Projects</DT>
<DD>Significantly more work is require than a homework assignment</DD>
</DL>
Show Me

13. Links
To make a link, include some text (or text-level element) between <A ...> and </A> tags
The "A" stands for "Anchor".
The target for the link is specified as the "A" tag's "HREF" attribute using an addressing format known as "Uniform Resource Locator" (URL)
<A HREF="intro.html"> Start over </A>

14. URL
Linking another HTML document or to include an image, it must be identified with a uniform resource locator (URL)
academics/math-cs
index.html
protocol
host name
file path
file name

15. URL
The protocol tells the browser how to communicate with the remote server when retrieving the target document
HTTP
Contact the web server
FTP
Use the file transfer protocol
FILE
Read a file from your own machine

16. URL
The host name identifies the computer from which the target document should be retrieved
Host names in the form found in URLs are also called domain names
people.hsc.edu

17. URL
The file path is a list of the names in the folder/directories containing the named file
Slashes ("/") are always used to separate the folder/directory names
The outermost directory comes first
For simplicity, assume that names containing blanks or punctuation just won't work

18. URL
The file name is just the name of the file containing the HTML description of the document to be displayed
This name should end with .html or .htm
If no file name is specified a file named index.html is used

19. Relative URL’s
If the protocol, host and file path portions of a URL are missing, the browser assumes
It should use the HTTP protocol
It should use the host from which it retrieved the current page
It should look for the file in the directory that contains the current page
A link of the form:
<A HREF="Intro.html"> Start over </A> is called RELATIVE since it is relative to the current page

20. Text Style <EM> Emphasized text </EM>
<TT> Teletype </TT>
<STRONG> Strongly emphasized </STRONG>
<I> Italics </I>
<DFN> Definition of a term </DFN>
<B> Bold </B>
<CODE> Code fragment </CODE>
<U> Underline </U>
<SAMP> Sample Text </SAMP>
<STRIKE> Strikeout </STRIKE>
<KBD> Keyboard input </KBD>
<BIG> Larger text </BIG>
<VAR> Variable </VAR>
<SMALL> Smaller text </SMALL>
<CITE> Short citation </CITE>
Hello <SUB> Subscript </SUB>
Hello <SUP> Superscript </SUP>

21. Fonts
The FONT tag lets you control the size and color of text using "SIZE" and "COLOR" attributes
The size attribute can be absolute or relative:
< FONT SIZE=1 > Tiny < /FONT > ==> Tiny
< FONT SIZE="+1" > Not tiny < /FONT > ==> Not tiny
< FONT SIZE="-7" > Tiny < /FONT > ==> Tiny
The color attribute uses hexadecimal codes or color names:
< FONT COLOR="FF0000" > Red < /FONT > ==> Red
< FONT COLOR="TEAL" > Blue? < /FONT > ==> Blue?