1.NET Web Forms HTML Introduction © 2002 by Jerry Post

2 HTML This is a title Main text here. 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: The paragraph tag marks paragraphs. The ending tag ( ) 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 Label used for browser window. …

4 Sample HTML Page My main page My text goes in paragraphs. Additional tags set boldface and Italic. Tables are more complicated and use a set of tags for rows and columns. First cell Second cell Next row Second column There are form tags to create input forms for collecting data. But you need CGI program code to convert and use the input data.

5 HTML Colors Netscape 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) => ( ). White#FFFFFF Red#FF0000 Green#00FF00 Blue#0000FF Magenta#FF00FF Cyan#00FFFF Yellow#FFFF00 Black# decimal hex A B C D E F hexconvertdecimal 151* A410*

6 Color Wheel 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 Groups Analogous 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 colorsCool colors Add warmth and appear to move toward the viewer. More reserved, and appear to recede into the screen.

10 HTML Tags: Layout paragraph line break (without the paragraph spacing) superscript subscript Heading level (1 through 6 available) inline grouping, used to assign styles grouping that forces a paragraph break

11 HTML Tags: Miscellaneous title Anything after the exclamation must be duplicated at end -- Common street address Horizontal rule/separator. Usually set by HTML generators, do not change. Special characters: Escape sequences (&) <<© (ASCII value) >> && "“ ©©

12 HTML Tags: Lists Definition list/glossary Term to define Definition Unordered list First item in list Next item Ordered list (numbered) First item Second item

13 HTML Tags: Links Set a base/home machine/directory (rarely used) text <A HREF=“URL#name” Document1 General text... link text More text HTML Browser Display General text... link text More text Document2 This is a second document. More text. Even more text. More text. Even more text. HTML Browser Display User clicks on link.

14 HTML: Tables   …   Col 1 Title  Col 2 Title   Cell 1  Cell 2    Can also include (for pages)  …  Cell options  ALIGN=left | right | center  VALIGN=top | middle | bottom  WIDTH=##%  ROWSPAN=##  COLSPAN=##  Table options  CELLSPACING=“…”  CELLPADDING=“…”  WIDTH=“…”  COLS=## Cellspacing: space between cells Cellpadding: space within cells Use to force new lines inside a cell.

15 HTML: Frames  Document to set frames: use not     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.  Introduction to MIS  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 Netscape Microsoft HTML Compendium.org

17 META Tags 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