1.NET Web Forms HTML Introduction © 2002 by Jerry Post.
17
1 .NET Web Forms HTML Introduction © 2002 by Jerry Post
-
Upload
thomasine-floyd -
Category
Documents
-
view
216 -
download
0
Transcript of 1.NET Web Forms HTML Introduction © 2002 by Jerry Post.
1
.NET Web Forms
HTML Introduction
© 2002 by Jerry Post
2
HTML<HTML><HEAD>
<TITLE>This is a title</TITLE></HEAD>
<BODY><P>Main text here.</P></BODY>
</HTML>
The browser is essentially an intelligent display page. It displays text and graphics.
Add-ins can handle audio and video.
Ultimately, everything sent to the client must be either:
(1) HTML
(2) Image (GIF, JPEG, or PNG)
(3) JavaScript
(4) Data for an add-in.
The tags are usually given in pairs: a starting tag and an ending tag that starts with a slash (/). The tags are marked with angle-brackets < >.
Certain base tags are required for any document:
<HTML></HTML> <HEAD></HEAD> <TITLE></TITLE>
<BODY></BODY> <P></P>
The paragraph tag marks paragraphs <P> </P>. The ending tag (</P>) is new with HTML 3.2 and ignored by many browsers and editors.
Documents must be stored as ASCII text files. You can create them with text editors or with Web editors.
3
HTML Tags: Main Page
<HTML>
<HEAD>
<TITLE>Label used for browser window.</TITLE>
<LINK href="Styles.css" type="text/css" rel="stylesheet">
</HEAD>
<BODY>
<P><TABLE> … </TABLE></P>
</BODY>
</HTML>
4
Sample HTML Page
<HTML>
<HEAD>
<LINK href="Styles.css" type="text/css" rel="stylesheet">
<TITLE>My main page</TITLE></HEAD>
<BODY>
<P>My text goes in paragraphs.</P>
<P>Additional tags set <B>boldface</B> and <I>Italic</I>.
<P>Tables are more complicated and use a set of tags for rows and columns.</P>
<TABLE>
<TR><TD>First cell</TD><TD>Second cell</TD></TR>
<TR><TD>Next row</TD><TD>Second column</TD></TR>
</TABLE>
<P>There are form tags to create input forms for collecting data.
But you need CGI program code to convert and use the input data.</P>
</BODY>
</HTML>
5
HTML ColorsNetscape and Microsoft define colors by “#rrggbb”
Most browsers also support some standard color names.
Color numbers are given as percentages of red, green, and blue. Values are entered in hexadecimal format (0 . . . FF) => (0 . . . 255).
White #FFFFFF
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
Black #000000
decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
hex 0 1 2 3 4 5 6 7 8 9 A B C D E F
hex convert decimal
15 1*16 + 5 21
A4 10*16 + 4 164
6
Color Wheel
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnhess/html/hess08142000.asp
FF,00,00
00,FF,0000,00,FF
FF,FF,00FF,00,FF
00,FF,FF
00,FF,80
80,FF,00
FF,80,00FF,00,80
80,00,FF
00,80,FF
7
Color Groups
Primary additive colors: red, green, blue
Secondary additive colors: cyan, magenta, yellow
Tertiary colors: middle of primary and secondary
8
Color GroupsAnalogous colors
Adjacent colors are harmonious.
Opposite colors are used for contrast—text and background.
Complementary colors
Triad colors
Equidistant colors create tension.
9
Color Groups
Warm colors Cool colors
Add warmth and appear to move toward the viewer.
More reserved, and appear to recede into the screen.
10
HTML Tags: Layout
<P align=“left”>paragraph</P>
<BR>line break (without the paragraph spacing)
<SUP>superscript</SUP>
<SUB>subscript</SUB>
<H1>Heading level (1 through 6 available)</H1>
<SPAN>inline grouping, used to assign styles</SPAN>
<DIV>grouping that forces a paragraph break</DIV>
<IMG src=“graphicsfile.gif”>
11
HTML Tags: Miscellaneous
<TITLE>title</TITLE>
<!--comment --> Anything after the exclamation must be duplicated at end --
<Address>Common street address</Address>
<HR> Horizontal rule/separator.
<META>Usually set by HTML generators, do not change.
Special characters: Escape sequences (&)
< < © (ASCII value)
> >
& &
" “
© ©
12
HTML Tags: Lists<DL> Definition list/glossary
<DT>Term to define</DT>
<DD>Definition</DD>
</DL>
<UL> Unordered list
<LI>First item in list</LI>
<LI>Next item</LI>
</UL>
<OL> Ordered list (numbered)
<LI>First item</LI>
<LI>Second item</LI>
</OL>
13
HTML Tags: Links
<BASE HREF=“URL”> Set a base/home machine/directory (rarely used)
<A HREF=“URL” >text </A>
<A NAME=“internal name”> text </A>
<A HREF=“URL#name”
Document1General text . . . <A HREF=“Document2#middle”>link text</A>More text
HTML
Browser Display
General text . . .link textMore text
Document2This is a second document.<A NAME=“middle”>More text.Even more text.
More text.Even more text.
HTML
Browser Display
User clicks on link.
14
HTML: Tables
<TABLE BORDER=#> <CAPTION>…</CAPTION> <TR>
<TH>Col 1 Title</TH> <TH>Col 2 Title</TH>
</TR> <TR>
<TD>Cell 1</TD> <TD>Cell 2</TD>
</TR>
</TABLE> Can also include (for pages)
<THEAD>…</THEAD> <TFOOT>…</TFOOT>
Cell options ALIGN=left | right | center VALIGN=top | middle | bottom WIDTH=##% ROWSPAN=## COLSPAN=##
Table options CELLSPACING=“…” CELLPADDING=“…” WIDTH=“…” COLS=##
Cellspacing: space between cellsCellpadding: space within cells
Use <BR> to force new lines inside a cell.
15
HTML: Frames
Document to set frames: use <FRAMESET> not <BODY> <FRAMESET ROWS=“#%, #%”, COLS=“#%, #%”>
<FRAME SRC=“…” NAME=“…” SCROLLING=yes/no> </FRAME> <FRAME SRC=“…” NAME=“…” SCROLLING=yes/no></FRAME>
</FRAMESET>
Source documents are standard html documents. The windows/frames are independent of each other. Common use: a top or left frame as a table of contents.
Click a link in the TOC and the main window is updated. You need to specify the frame in the link. <A HREF="Syl343.htm" TARGET="main">Introduction to MIS</A>
If users have a Microsoft browser, you can also use IFrames, which enable you to display a separate “page” in a frame that floats within the other HTML. Useful if you want to add a “window” to the middle of a page and fill it with different information.
16
HTML: References
http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm
Netscape
http://msdn.microsoft.com
Microsoft
http://www.htmlcompendium.org
HTML Compendium.org
17
META Tags
<META NAME="Keywords" CONTENT="">
<META HTTP-EQUIV=“REFRESH” CONTENT=“10;URL=newpage.html”>
In the old days, search engines used Meta tags to help identify content, but people abused them. So now they are ignored.
Content rating labels using META PICS
http://www.icra.org
