| HTML QUIK-CHART FOR MSNTV TAGS THAT WORK PLUS EXAMPLES | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Basic Tags | |||||||||
| <html> </html> Creates an HTML document; first and last tags on a page. | |||||||||
| <head> </head> Separates the title (see below) and other information that isn't displayed (visible) on the Web page itself: meta tags, pre-loaded image & sound tags, some Javascripts and some CSS scripts. | |||||||||
| <body> </body> Defines the visible portion of the document. | |||||||||
| Header Tags | |||||||||
| <title> </title> Puts the name of the page in the title bar. | |||||||||
| <meta> There are many different meta tags. See tutorials for using them. | |||||||||
| <embed src="url-of-mid" hidden="true" autostart="true" loop="2"></embed> (and) <noembed><bgsound src="url-of-mid" loop="2"></noembed> Both sound tags can be put in the head to preload the sound file, so it will play sooner for MSNTV. Use both sound tags as above if computer users will see the page. Use only the embed tag OR the bgsound tag (without the noembed tags) if only MSN TV users will see page. Refer to Sound Tags for MSN TV & Computers for a complete discussion. | |||||||||
| <img src="url-of-image" height="1" width="1"> Used to preload an image so it will appear faster. The normal image tag for this image must also appear in the body of the page. | |||||||||
| Body Tag Attributes | |||||||||
| bgcolor="?" Sets the background color, using name or hex value. | |||||||||
| text="?" Sets the text color, using name or hex value. | |||||||||
| link="?" Sets the color of links, using name or hex value. | |||||||||
| vlink="?" Sets the color of followed or visited links, using name or hex value. | |||||||||
| alink="?" Sets the color of links on click. Does not work for MSNTV. Example of a body tag for MSN TV: <body bgcolor="#ffffff" text="#330000" link="#0000ff" vlink="#800000"> | |||||||||
| fontsize="?" (small, medium, or large) Sets text size and spacing throughout whole page: small, medium, large. MSNTV users have a choice of the above 3 text settings for each user. If the page will have a mixture of text and CSS-placed objects or blocks of text, then the page will appear differently to viewers, depending on which setting they have used. The creator of the page should use the fontsize attribute that corresponds to the setting in his/her box, so that every viewer will see the page the same way. The size settings in the font tags (see below) will still be proportionally smaller or larger in relation to each other. | |||||||||
| Text Tags | |||||||||
| <pre> </pre> Creates preformatted text. Does not work for MSNTV. | |||||||||
| <h1> </h1> Creates the (largest) headline. Sizes are 1 (largest) through 6 (smallest). Example: This is H1This is H6.Refer to H & Font Sizes Comparison Chart | |||||||||
| <b> </b> Creates bold text. Example: This text is bold. | |||||||||
| <i> </i> Creates italic text. Note: MSNTV 2.7, 2.8, and 2.9 can "see" both bold and italic for the same word. Earlier builds can "see" only one or the other. Example: This line is all in italics. | |||||||||
| <u> </u> Emphasizes a word or sentence by underlining it. Example This word has been underlined. | |||||||||
| <tt> </tt> Creates teletype, or typewriter-style text. Example: This is typewriter style. | |||||||||
| <cite> </cite> Creates a citation, italic for MSNTV. Example: This word has been cited, for emphasis. | |||||||||
| <em> </em> Emphasizes a word with italics. Example: This word is emphasized by italics. | |||||||||
| <strong> </strong> Emphasizes a word - bold. Example This word has been made strong. | |||||||||
| <font size="?"> </font> Sets size of font, from 1 to 7 Example: This is size 7. This is size 1. Refer to H & Font Sizes Comparison Chart | |||||||||
| <font color="?"> </font> Sets font color, using name or hex value. | |||||||||
| <font effect="?"> </font> MSNTV-only; shadow, emboss or relief. Size, color and effect can be combined in the same tag, if desired: Examples: <font size="4" color="#ffff00" effect="shadow"> </font> This text is size 4, color is yellow, effect is shadow. This text is size 4, color is white, effect is emboss. This text is size 4, color is white, effect is relief. | |||||||||
| <span style="?"></span> This span style tag will eventually replace the font tag. Sets text size and color. Uses colons (:) instead of equal signs (=). Also, uses semicolons (;) between attributes in the same tag. font: xx-large (or x-large, large, medium, small, x-small, xx-small) color: use either color name or hex code - #000000 (no quotes around hex code) effect: shadow, relief, or emboss Example: <span style="font: x-large; color: bisque"> | |||||||||
| Link Tags | |||||||||
| <a href="URL">Name or url here </a> Creates a hyperlink (clickable link) to another page. | |||||||||
| <a href="mailto:username@host.com">Name or address </a> Creates a mailto hyperlink. | |||||||||
| <a name="NAME">text here </a> Creates a target location within a document/page. Must be used with one of the following three tags: | |||||||||
| <a href="#NAME">text here </a> Links to the above target location from elsewhere on the same page. | |||||||||
| <a href="anotherpage.html#NAME">text here </a> Links to the above target from a different page in the same website/subdirectory. | |||||||||
| <a href="../sub/page.html#NAME">text here </a> Links to the above target from a different website/subdirectory. | |||||||||
| Formatting | |||||||||
| <p> </p> Creates a new paragraph (a double line break). | |||||||||
| <p align="?"> </p> Aligns a paragraph to the left, right, or center. | |||||||||
| <br /> Inserts a line break after text, images or audioscopes. Two <br /> equal one <p>. Since the <br /> contains a built-in closing slash, this tag does not need to be closed like the <p> tag does. | |||||||||
| <blockquote> </blockquote> Indents text from both sides. Example:This whole paragraph of text should appear indented from both sides. This whole paragraph of text should appear indented from both sides. This whole paragraph of text should appear indented from both sides. This whole paragraph of text should appear indented from both sides. BUT, this indents only on the left for MSN TV. | |||||||||
| <dl> </dl> Creates a definition list. Refer to Lists: What They are and How to Make Them for a tutorial. | |||||||||
| <dt> Precedes each word to be defined (definition term). | |||||||||
| <dd> Precedes each definition. These tags will indent or create a wider left margin for a block of text, without numbering or bulleting. Will also create a single line break, so if a double line spacing is required, use 2 <br /> tags. | |||||||||
| <ol> </ol> Creates an ordered (numbered) list; is used with the <li> tag below. | |||||||||
| <li></li> Precedes each list item, and adds a number. For more than one item, use 2 <br /> tags after the end of each item (</li>) for a double line break. Close each list item with </li> | |||||||||
| <ul> </ul> Creates an unordered (bulleted) list. Is used with the <li></li> tags above. But instead of adding numbers, this tag will cause the <li> tag to put a bullet in front of each item. For more than one item, use two <br /> tags after the end of each item (</li>) for a double line break. | |||||||||
| <div align="?"> </div> A generic tag used to format large blocks of HTML or images left, center or right, also used for stylesheets. | |||||||||
| Graphical Elements | |||||||||
| <img src="url-of-image" /> Adds an image to the page. | |||||||||
| align="?" Aligns an image: left, center, right. | |||||||||
| valign="?" Aligns an image vertically: top, middle, bottom. | |||||||||
| height="?" width="?" Assists the browser in setting aside space for the image on the page. This allows the text to continue loading before the image itself fully loads, because text usually loads faster than images. | |||||||||
| border="?" Sets size of a border around an image. For no border, if computer viewers will be looking at the page, use 0 (zero). | |||||||||
| alt="description" Some computer browsers do not have images enabled. The description should tell in a few words what the subject of the image is. All the above image attributes should be combined in the same tag: <img align="right" src="url" height="100" width="100" border="0" alt="description" /> | |||||||||
| <hr /> Inserts a horizontal rule (slim line) which will have a default width of 100%. | |||||||||
| width="?" Sets width of rule, in percentage or absolute value (pixels). This tag incorporates automatic centering. Examples: Default 80% 350 pixels: | |||||||||
| noshade Creates a rule without a shadow. This works only for the 2.7 and later updates. Earlier updates will see no change, just the default rule with a bottom shadow. Example: | |||||||||
| size="?" Sets size (height) of rule. This does not work for MSNTV, only for computers. | |||||||||
| Basic Table Construction | |||||||||
| <table> </table> Creates a table. | |||||||||
| <tr> </tr> Sets off each row in a table. | |||||||||
| <td> </td> Sets off each cell in a row. Cells contain the text and images, in other words, the table data. | |||||||||
| <th> </th> Sets off the table header (a normal cell with bold, centered text). The blue cells on this page are table headers. | |||||||||
| Table Attributes | |||||||||
| Please refer to Dictionary of Table Attributes for more indepth explanations. (table tag) border="?" Sets width of border around table cells. MSNTV also supports an attribute called invertborder. This word, added after the border attribute, reverses the shadow effect. Examples: Border equals 5 pixels, invertborder | |||||||||
| (table tag) cellspacing="?" Sets amount of space (pixels) between table cells. Examples: Cellspacing equals 5 pixels | |||||||||
| (table tag) cellpadding="?" Sets amount of space (pixels) between a cell's border and its contents. | |||||||||
| (table tag) width="?" Sets width of table, in pixels or as a percentage of document width. | |||||||||
| (tr tag) align="?" (td tag) align="?" Sets horizontal alignment for contents of rows or cell(s) (left, center, or right). | |||||||||
| (tr tag) valign="?" or (td tag) valign="?" Sets vertical alignment of contents of rows or cell(s) (top, middle, or bottom) | |||||||||
| (th tag) colspan="?" or (td tag) colspan="?" Sets number of columns a header or cell should span (default=1). Refer to Colspan | |||||||||
| (td tag) rowspan="?" Sets number of rows a cell should span (default=1). Refer to Rowspan | |||||||||
| (td tag) nowrap Prevents the lines within a cell from being broken to fit the width. | |||||||||
| (th tag) bgcolor="?" or (td tag) bgcolor="?" or (tr tag) bgcolor="?" Sets the background color for each header, individual cell or row, if it is to be different from the bgcolor of the table itself. | |||||||||
| (th tag) height="?" width="?" or (td tag) height="?" width="?" Sets specific heights and widths for table headers and cells. All cells in the same row will be the same height, so the height for only the first cell in each row need be specified. Widths may vary, so must be included in each header or cell. Default width is the width of the table. Any or all attributes listed above for headers, cells and rows can be included in the same tag. | |||||||||
| Frames | |||||||||
| <frameset> </frameset> Tag in a frames document; can also be nested in other framesets. | |||||||||
| (frameset tag) rows="value,value" Defines the rows within a frameset, using number in pixels, or percentage of width. | |||||||||
| (frameset tag) cols="value,value" Defines the columns within a frameset, using number in pixels, or percentage of width. | |||||||||
| <frame> Defines a single frame - or region - within a frameset. | |||||||||
| <noframes> </noframes> Defines what will appear on browsers that don't support frames. Also employed by many MSNTV users to indicate when another MSNTV viewer needs to reload the page, due to the JavaScrip error (bug) in the MSNTV browser. | |||||||||
| Frames Attributes | |||||||||
| (frame tag) src="URL" Specifies which HTML document should be displayed. | |||||||||
| (frame tag) name="name" Names the frame, or region, so it may be targeted by other frames. | |||||||||
| (frame tag) marginwidth="?" Defines the left and right margins for the frame; must be equal to or greater than 1. | |||||||||
| (frame tag) marginheight="?" Defines the top and bottom margins for the frame; must be equal to or greater than 1. | |||||||||
| (frame tag) scrolling=VALUE Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto. " The default, as in ordinary documents, is auto. | |||||||||
| (frame tag) noresize Prevents the user's browser from resizing a frame. | |||||||||
| Forms | |||||||||
| For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form. <form> </form> Creates all forms. | |||||||||
| <select multiple name="NAME" size=?> </select> Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll. | |||||||||
| option Sets off each menu item. | |||||||||
| <select name="NAME"> </select> Creates a pulldown menu. | |||||||||
| option Sets off each menu item. | |||||||||
| <textarea name="NAME" cols="40" rows="8"> </textarea>' Creates a text box area. Columns set the width; rows set the height. MSNTV users must use the <form> and </form> tags before and after the textarea tags. | |||||||||
| input type="checkbox" name="NAME" Creates a checkbox. Text follows tag. | |||||||||
| input type="radio" name="NAME" value="x" Creates a radio button. Text follows tag. | |||||||||
| input type="text" name="foo" size="20" Creates a one-line text area. Size sets length, in characters. | |||||||||
| input type="submit" value="NAME" Creates a Submit button. | |||||||||
| input type="image" border="0" name="NAME" src="name.gif" Creates a Submit button using an image. | |||||||||
| input type="reset" Creates a Reset button. | |||||||||
| |||||||||
