Successful Team Programming
Download
Report
Transcript Successful Team Programming
HTML Web Page Development
Debbie Bartlett
February 23, 2011
February 23, 2011
Web Program Development
1
Your website should include
Something about you
At least one image
At least two different web pages that you can
traverse between without use of the “back arrow”
Some use of color and varied fonts
Links to other sites
Links or other display of your javascript and applets
Some kind of table or form
No bad links
Have perfect spelling and grammar
February 23, 2011
Web Program Development
2
HTML Basics
Composed of tags
Always enclosed in angle-brackets, <>
Are case-insensitive
Occur in begin-end pairs in the form of
<tag> … </tag>
Text file is white-space insensitive
February 23, 2011
Web Program Development
3
Document tags
<HTML>
…
</HTML>
First and last tags in a document.
Tells web browser where the HTML in your
document begins and ends
<HEAD>
…
</HEAD>
Contains all of the document’s header information
<TITLE>
…
</TITLE>
Placed within the HEAD structure
Title appears at the top of the browser’s title bar, in
the history list, and your bookmark file
<BODY>
…
</BODY>
Comes after the HEAD structure
Between the BODY tags is all the content that is
displayed by the browser
February 23, 2011
Web Program Development
4
Basic HTML Document
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
February 23, 2011
Web Program Development
5
Text and Font Tags
<B>…</B>
Everything
between is
boldfaced
<I>…</I>
Everything
between is
italicized
<U>…</U>
Everything
between is
underlined
<FONT size=“5”>…</FONT>
<FONT color=“blue”>…</FONT>
<FONT face=“Arial”>…</FONT>
<FONT size=“5” color=“blue”>…</FONT>
Sets font size,
color, type
February 23, 2011
Web Program Development
6
List Tags
<UL>
…
</UL>
“Unordered” list, i.e. bullet
List begin & end
<OL>
…
</OL>
“Ordered” list, i.e. numbered
List begin & end
<LI>
Each item in the list
<UL>
<LI> Bullet item 1
<LI> Bullet item 2
<LI> Bullet item 3
</UL>
February 23, 2011
<OL>
<LI> Numbered item 1
<LI> Numbered item 2
<LI> Numbered item 3
</OL>
Web Program Development
7
Table Tags
<TABLE>
…
</TABLE>
Table
Begin & end
<TR>
…
</TR>
“Table Row
Begin & End
<TD>
…
</TD>
Table data for a cell
Begin & end
<TABLE border>
<TR>
<TD>A1</TD><TD>A2</TD><TD>A3</TD>
</TR>
<TR>
<TD>B1</TD><TD>B2</TD><TD>B3</TD>
</TR>
</TABLE>
February 23, 2011
Web Program Development
8
Reference & Image Tags
<A HREF=“URL”>web_page</A>
Hypertext reference
<A HREF=“mailto:email_address”>send
email to</A>
Send email to the link
<IMG SRC=“URL”>
<IMG SRC=”image.gif”>
Link to an image
Display image
February 23, 2011
Web Program Development
9
CSS: Cascading Style Sheets
Purpose: Defines how HTML elements are to
be displayed
Benefits: Allows you to change the
appearance and layout of all pages in your
Web by just editing one single CSS
document
File Name: Typically saved as separate .css
files
February 23, 2011
Web Program Development
10
CSS: Cascading Style Sheets - Syntax
Selector {property: value}
Example: body {color: green}
Referencing style sheet example
<head>
<link rel="stylesheet" type="text/css“ href="mystyle.css" />
</head>
February 23, 2011
Web Program Development
11
Use available references
See these class notes in ramct/assignment
Talk to a class mate who has experience
Come to computer science club or Friday office hours/lab
Right click in a browser and click on ‘view source’
See example web pages:
http://www.cs.colostate.edu/~bartlett
http://www.cs.colostate.edu/~cs192/Examples/index.html
http://www.cs.colostate.edu/~cs192/Examples/sample.html
http://www.cs.colostate.edu/~cs192/Examples/SampleForms.html
Google HTML & something you want to do like border
Style sheets: http://www.w3schools.com/css/default.asp
Start with your current knowledge base and expand it!!!
February 23, 2011
Web Program Development
12