Manual html
Upcoming SlideShare
Loading in...5
×
 

Manual html

on

  • 974 views

Manual de HTML

Manual de HTML

Statistics

Views

Total Views
974
Views on SlideShare
974
Embed Views
0

Actions

Likes
0
Downloads
27
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Manual html Manual html Document Transcript

  • NCD HTML Design Guide Version 5.0 - PDF Edition Network Communication Design http://www.ncdesign.org/ pdfdocument@ncdesign.org
  • NCD HTML Design Guide - PDF EditionLicenseCopyright ©1994-2000 by Network Communication DesignAll rights reserved,including the right of reproductionin whole or in part in any form.This is SHAREWARE DocumentIf you find the NCD Html Design Guide useful and continue to use it,you should consider sending the shareware fees.One copy of the html design guide is US $5.Please visit our web page for more details: http://www.ncdesign.org/pdfOn-line payment system is available.Shareware fee helps Network Communication Design and support future quality guide.Thanks for your support! Network Communication Design URL: http://www.ncdesign.org/ EMail: pdfdocument@ncdesign.org
  • NCD HTML Design Guide Contents Version 5.0 - PDF Edition Page | Font | Text | Image | Form | Table | Frame | Objects | XML HTML TAG LISTPage Document Structures Document Information Language Charset Information Document Refresh Background and Text Color Page Margin Link Target Windows Base Element Horizontal Rules Style Sheet ElementsFont Header Header Alignment Font Size Physical Style Logical Style Font Color Font Face Base Font Setting EntitiesText Paragraph Quotation Line Break Centering Grouping Elements Basic Listings Customized Listing Preformatted Text Comment Spacer Multi-Column Text Marquee Text Direction PronunciationImage Image Basic Image aligned with Text Floating Image Image Size Border Line Client Side Image Map
  • Form Basic Structure Text & Password Checkbox & Radio Image coordinates Hidden Elements File Select Button Selectable Menu Text Area Old Input Style Button Style Field Style LabelTable Table Basic Tags Table Span Table Size Table Text Alignment Floating Table Table Caption Table Color Groups of Rows Groups of Columns Frame Display Rules DisplayFrames Frame Basic Frame Size Frame Name & Target Frame Appearance Floating FrameObjects Embed Applet Script Object Background Sound Inline VideoXML Custom Tag Inline XML Linking XMLAppendix A: Basic System FontsAppendix B: EntitiesAppendix C: Marquee attributesHTML TAG LIST Copyright & Publishing 1994-2000 Network Communication Design, pdfdocument@ncdesign.org
  • PAGE TAGS NCD HTML Design Guide v5.0 Document Structures <html>...</html> <head>...</head> <body>...</body> <HTML> <HEAD> <title>, <base>, <link>, <isindex>, <meta> </HEAD> <BODY> Body of the document </BODY> </HTML> Document Information <meta http-equiv="#1" content="#2"> #1=Expires, Keywords, Reply-to, Author #2=Information about #1 <meta http-equiv="Keywords" content="travel, Japan, hotel"> <link rel=#1 href=#2> #1=Relationship to destination #2=URL <link rel="Index" href="../index.htm"> <link rel="Next" href="020font.htm"> Language Charset Information <meta http-equiv="Content-Type" content="text/html;charset=#"> #= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80,NCDesign HTML Design Guide - PAGE TAGS 1
  • x-euc-tw, x-cns11643-1, x-cns11643-2, big5 You can specify MIME charset information of your html source. Its good for people who swich some language encodings at option menu. If encoding is presented in html source, browser can swich them automaticaly. Especialy in the case you use some entities, its better to specify your encoding (maybe iso-8859-1). Entities appearance will be changed in other encodings on someones browser. Document Refresh <meta http-equiv="refresh" content="#1"> #1=Refresh Time <meta http-equiv="refresh" content="5"> HTML Sample <meta http-equiv="refresh" content="#1; URL=#2"> #1=Refresh Time, #2=URL <meta http-equiv="refresh" content="5; URL=second.htm"> HTML Sample Background and Text Color Page Color <body bgcolor=# text=# link=# alink=# vlink=#> #= rrggbb Hex Number, or Name: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua ! bgcolor --- background color ! text --- text color ! link --- link color ! alink --- active link color ! vlink --- visited link color Background Image <body background="URL"> Non Scrolling Background <body background="URL" bgproperties=FIXED>NCDesign HTML Design Guide - PAGE TAGS 2
  • Page Margin <body leftmargin=# rightmargin=# topmargin=# bottommargin=#> #=margin amount Link Link Basic <a href="URL"> ... </a> This is a This is a Link Test. Try to push! <a href="url.htm">Link Test</a>. HTML Try to push! Sample Jump to part of a page <a href="#name"> ... </a> <a name="name"> ... </a> <a href="#jump-test"> Jump to next "Link Target" HTML Jump to next "Link Target"</a> ... Sample <a name="jump-test">Link Target</a> Link Target Jump to part of an other page <a href="URL#name"> ... </a> <a name="name"> ... </a> Jump to Jump to "Link Target" HTML <a href="url.htm#jump-test"> Jump to next "Link Target"</a> in a Link Test document. Sample in a Link Test document. Mail Link <a href="mailto:#"> ... </a> #=mail address Send to: Send to: msg@ncdesign.org HTML <a href="mailto:msg@ncdesign.org"> msg@ncdesign.org</a> SampleNCDesign HTML Design Guide - PAGE TAGS 3
  • Target Windows <a href="URL" target="Window_Name"> ... </a> <a href="url.htm" Open A Window! HTML target="window_name"> Open A Window!</a> Sample Base Element <base href="URL" TARGET="Window_Name"> <head> <base href="http://www.ncdesign.org/html/index.htm"> </head> <body> <a href="../sample/index.htm">SAMPLE PAGE</a> </body> SAMPLE PAGE will be resolved to "http://www.ncdesign.org/sample/index.htm" Horizontal Rules <hr> <hr> <hr size=#> #=number of pixel <hr size=10> <hr width=#> #=number of pixel, % of available space <hr width=50> <hr width=50%>NCDesign HTML Design Guide - PAGE TAGS 4
  • <hr align=#> #=left, center, right <hr width=50% align=left> <hr width=50% align=center> <hr width=50% align=right> <hr noshade> <hr noshade> <hr color=#> #= rrggbb Hex Number, or Name: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <hr color="red"> Style Sheet Elements <link rel="stylesheet" type="text/css" HREF=#> Further Info: Style Sheet Guide "Linking Style Sheet" <style type="text/css"> Further Info: Style Sheet Guide "Embedding Style Sheet"NCDesign HTML Design Guide - PAGE TAGS 5
  • FONT TAGS NCD HTML Design Guide v5.0 Header <h#> ... </h#> #=1, 2, 3, 4, 5, 6 Today is fine! <h1>Today is fine!</h1> Today is fine! <h2>Today is fine!</h2> <h3>Today is fine!</h3> Today is fine! <h4>Today is fine!</h4> Today is fine! <h5>Today is fine!</h5> Today is fine! <h6>Today is fine!</h6> Today is fine! ! <hn>---</hn> tag makes fonts bold. ! <hn>---</hn> tag inserts a blank line without <p> tag. So it cant include differnt font sizes in one line. Header Alignment <h1 align=#> ... </h1> #=left, center, right <h1 align=#> ... </h1> #=justify <h3 align=#> Today is fine. </h3> left center right justify Today is Today is Today is Today is fine. fine. fine. fine.NCDesign HTML Design Guide - FONT TAGS 1
  • Font Size <font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -# <basefont size=#> #=1, 2, 3, 4, 5, 6, 7 Today is fine! <font size=7>Today is fine!</font> Today is fine! <font size=6>Today is fine!</font> Today is fine! <font size=5>Today is fine!</font> <font size=4>Today is fine!</font> Today is fine! <font size=3>Today is fine!</font> Today is fine! <font size=2>Today is fine!</font> Today is fine! <font size=1>Today is fine!</font> Today is fine! Physical Style Bold <b> <b>Today is fine!</b> Today is fine! Italic <i> <i>Today is fine!</i> Today is fine! Underline <u> <u>Today is fine!</u> Today is fine! Teletype (Fixed Width) <tt> <tt>Today is fine!</tt> Today is fine!NCDesign HTML Design Guide - FONT TAGS 2
  • Superscript <sup> <sup>Today is fine!</sup> Today is fine! Subscript <sub> <sub>Today is fine!</sub> Today is fine! Strike through <s> <s>Today is fine!</s> Today is fine! Strike through <strike> <strike>Today is fine!</strike> Today is fine! blink <blink> <blink>Today is fine!</blink> Today is fine! Logical Style Emphasis <em> <em>Today is fine!</em> Today is fine! Strong <strong> <strong>Today is fine!</strong> Today is fine! Program Code <code> <code>Today is fine!</code> Today is fine!NCDesign HTML Design Guide - FONT TAGS 3
  • Sample<samp> <samp>Today is fine!</samp> Today is fine! Keybord<kbd> <kbd>Today is fine!</kbd> Today is fine! Variable<var> <var>Today is fine!</var> Today is fine! Defined<dfn> <dfn>Today is fine!</dfn> Today is fine! Citation<cite> <cite>Today is fine!</cite> Today is fine! Small <small> <small>Today is fine!</small> Today is fine! Big <big> <big>Today is fine!</big> Today is fine! Address <address> <address>Today is fine!</address> Today is fine! Quotation <q> <q>Today is fine!</q> Today is fine!NCDesign HTML Design Guide - FONT TAGS 4
  • Inserted Text <ins datetime=#> #=insert date and time <ins datetime="1999-07-01T08:15:30+09:00"> Today is fine! Today is fine!</ins> Deleted Text <del datetime=#> #=delet date and time <del datetime="1999-07-01T08:15:30+09:00"> Today is fine! Today is fine!</del> Acronym <acronym title=#> #=original phrase <acronym title="World Wide Web"> WWW WWW</acronym> If the cursor is over "WWW", it will pop-up the title "World Wide Web". Font Color <font color=#> ... </font> #= #rrggbb Hex Number, or Name: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <font color=#ff0000>RED</font> & RED & RED <font color=red>RED</font> Font Face <font face="#, #, ..., #"> ... </font> #=available font name on the client side <font face="Arial, Helvetica"> Hellow World! Appendix Hellow World!</font> Font FaceNCDesign HTML Design Guide - FONT TAGS 5
  • Base Font Setting <basefont size="#" color="#" face="#"> #=value is same as font tag. Basefont can be used within BODY or HEAD. Entities &#; #=keyword or ascii code number &amp; & Appendix &lt; < Entities &gt; > &quot; "NCDesign HTML Design Guide - FONT TAGS 6
  • TEXT TAGS NCD HTML Design Guide v5.0 Paragraph Paragraph <p> <p>This is a first paragraph. This is a first paragraph. <p>This is a second paragraph. This is a second paragraph. Paragraph Alignment <p align=#> #=left, center, right <p align=#> #=justify <p align=left> <p align=center> <p align=right> <p align=justify> This is a first This is a first This is a first This is a first paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a great story, isnt it? It great story, isnt it? It great story, isnt it? It great story, isnt it? It is exciting, gorgeous, is exciting, gorgeous, is exciting, gorgeous, is exciting, gorgeous, thrilling, fantastic, and thrilling, fantastic, and thrilling, fantastic, and thrilling, fantastic, and romantic! romantic! romantic! romantic! Quotation <blockquote>...</blockquote> Her Song: Her Song: <blockquote> When I was young, I listened to the radio When I was young, I listened to the waiting for my favorite songs.... radio waiting for my favorite </blockquote> songs....NCDesign HTML Design Guide - TEXT TAGS 1
  • Line Break Break Line <br> How are you?<br>Im fine. How are you? Im fine. No Break <nobr> Soft Break <wbr> <nobr> Close your browser window width, and find how this tag will work! This is a first paragraph. This is so exciting ... <wbr>and romantic! </nobr> Close your browser window width, and find how this tag will work! This is a first paragraph. This so... and romantic! Centering <center>...</center> <center>Hello</center> Hello Grouping Elements The <div> and <span> dont impose presentational idioms. They are useful with style sheet. Division (grouping for text block) <div> ... </div> 1. First Step <div class="section"> <H1>1. First Step</H1> In this section, you have to.... </div> In this section, you have to....NCDesign HTML Design Guide - TEXT TAGS 2
  • Division Alignment <div align=#> #=left, center, right <div align=#> #=justify <left> <center> <right> <justify> This is a first This is a first This is a first This is a first paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a great story, isnt it? It great story, isnt it? It great story, isnt it? It great story, isnt it? It is exciting, gorgeous, is exciting, gorgeous, is exciting, gorgeous, is exciting, gorgeous, thrilling, fantastic, and thrilling, fantastic, and thrilling, fantastic, and thrilling, fantastic, and romantic! romantic! romantic! romantic! Span (grouping for word) <span> ... </span> PHONE: PHONE: 000-0000000 <span class="phone"> 000-0000000 </SPAN> Basic Listings Unordered list <ul><li>...</ul> <ul> ! Today <li>Today <li>Tommorow ! Tommorow </ul> <ul><li>ONE ! ONE <ul><li>TWO <ul><li>THREE " TWO </ul></ul></ul> # THREE Ordered lists <ol><li>...</ol> <ol> 1. Today <li>Today <li>Tommorow 2. Tommorow </ol>NCDesign HTML Design Guide - TEXT TAGS 3
  • <ol><li>ONE 1. ONE <ol><li>TWO <ol><li>THREE 1. TWO </ol></ol></ol> 1. THREE Definition lists <dl><dt>...<dd>...</dl> <dl> Today <dt>Today <dd>Today is yesterday. Today will be yesterday. <dt>Tomorrow Tomorrow <dd>Tomorrow is today. Tomorrow will be today. </dl> Directory lists <dir><li>...</dir> <dir> ! Today <li>Today <li>Yesterday ! Yesterday </dir> Menu lists <menu><li>...</menu> <menu> ! Today <li>Today <li>Yesterday ! Yesterday </menu> Customized listing Mark Styles <ul type=#> or <li type=#> #=disk, circle, square <ul> ! ONE <li type=disc>ONE <li type=circle>TWO " TWO <li type=square>THREE # THREE </ul> Capital Letters <ol type=#> or <li type=#> #=A, a, I, i, 1 <ol type="A"> A. ONE-ONE <li>ONE-ONE <li>ONE-TWO B. ONE-TWO </ol>NCDesign HTML Design Guide - TEXT TAGS 4
  • <ol type="a"> a. ONE-ONE <li>ONE-ONE <li>ONE-TWO b. ONE-TWO </ol> <ol type="I"> I. ONE-ONE <li>ONE-ONE <li>ONE-TWO II. ONE-TWO </ol> <ol type="i"> i. ONE-ONE <li>ONE-ONE <li>ONE-TWO ii. ONE-TWO </ol> <ol type="1"> 1. ONE-ONE <li>ONE-ONE <li>ONE-TWO 2. ONE-TWO </ol> List started number <ol start=#> #=number <ol start=5> <li type=A>ONE-ONE <li>ONE-TWO E. ONE-ONE <ol start=10> 6. ONE-TWO <li>TWO-ONE 10. TWO-ONE <li type=i>TWO-ONE xi. TWO-TWO </ol></ol> Definition lists Compact <dl compact> <dl> <dt>A1 A1 <dd>Hyper Text Markup Language Hyper Text Markup Language <dt>A2 A2 <dd>World Wide Web World Wide Web </dl> <dl compact> <dt>A1 <dd>Hyper Text Markup Language A1 Hyper Text Markup Language <dt>A2 A2 World Wide Web <dd>World Wide Web </dl>NCDesign HTML Design Guide - TEXT TAGS 5
  • Preformatted Text <pre>...</pre> <pre> Please use your card Please use your card. VISA Master VISA Master Here is an order form. <b>Here is an order form.</b> ! Fax <ul><li>Fax ! Air Mail <li>Air Mail</ul> </pre> <listing>...</listing> <listing> Please use your card VISA Master Please use your card. Here is an order form. VISA Master ! Fax <b>Here is an order form.</b> <ul><li>Fax ! Air Mail <li>Air Mail</ul> </listing> <xmp>...</xmp> <xmp> Please use your card Please use your card. VISA Master VISA Master <b>Here is an order form.</b> <b>Here is an order form.</b> <ul><li>Fax <ul><li>Fax <li>Air Mail</ul> <li>Air Mail</ul> </xmp> Comment <!-- ... --> CACE 1 CACE 1 <!-- this is a test --> <comment>...</comment> CACE 1 CACE 1 <comment>this is a test</comment>NCDesign HTML Design Guide - TEXT TAGS 6
  • Spacer <spacer type="horizontal" size=#> #=horizontal space <spacer type="vertical" size=#> #=vertical space YESTERDAY <spacer type="horizontal" size=50> TODAY YESTERDAY TODAY <spacer type="vertical" size=50> TOMORROW TOMORROW <spacer type="block" width=# height=# align=--> #=space size (pixel) --=top, middle, bottom, left, right <spacer type="block" width=150 height=50 align=left> YESTERDAY YESTERDAY<br> TODAY<br> TOMORROW TODAY TOMORROW Block space works as same as image object. Multi-Column Text <multicol cols=#> ... </multicol> #=Column Number <multicol cols=2> text text text... </multicol> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <multicol gutter=#> ... </multicol> #=Space between Columns (pixel) <multicol cols=2 gutter=100> text text text... </multicol> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text textNCDesign HTML Design Guide - TEXT TAGS 7
  • <multicol width=#> ... </multicol> #=Column Width (pixel) <multicol cols=2 width=400> text text text... </multicol> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Marquee (Scrolling text) Marquee <marquee>...</marquee> <marquee>Hi, Konnichiha!</marquee> Appendix Marquee Hi, Konnichiha! Text Direction <bdo dir="#">...</bdo> #=ltr, rtl <bdo dir="rtl"> !enif si yadoT Today is fine! <BR> !enif si yadoT Today is fine! </bdo> Pronunciation <RUBY> #1 <RT> #2 </RUBY> #1=Base text, #2=Pronunciation Network Communication Design <RUBY> <img src="samp/jp001.gif"> <RT>Network Communication Design </RUBY>NCDesign HTML Design Guide - TEXT TAGS 8
  • IMAGE TAGS NCD HTML Design Guide v5.0 Image Basic <img src=#> #=Image URL Alternate Text <img alt=#> #= Alternate Text for text browser or one doesnt load images. <img src="f.gif" alt="MY FACE :-)"> Low Source <img lowsrc=#1 src=#2> #1=Low Source Image URL (to load fast) #2=Final Image URL Image aligned with Text <img align=#> #=top, middle, bottom, <img src=face.gif align=top> My face! My Face! <img src=face.gif align=middle> My Face! My face! <img src=face.gif align=bottom> My face! My Face!NCDesign HTML Design Guide - IMAGE TAGS 1
  • <img align=#> #=texttop, absmiddle, absbottom, baseline <img src=face.gif align=texttop> My face! My Face! <img src=face.gif align=absmiddle> My face! My Face! <img src=face.gif align=absbottom> My face! My Face! <img src=face.gif align=baseline> My face! My Face! Difference between top and texttop <img src=face.gif align=top> My face! <IMG SRC=heno01.gif> My Face! <img src=face.gif align=texttop> My face! <IMG SRC=heno01.gif> My Face! Floating Image <img align=left> <img src=URL align=left> My Face! My Face!<br> It is always<br> It is always smiling.<br> smiling. Hahaha....<br> Hahaha....NCDesign HTML Design Guide - IMAGE TAGS 2
  • <img align=right> <img src=URL align=left> My Face! My Face!<br> It is always<br> It is always smiling.<br> smiling. Hahaha....<br> Hahaha.... <br clear=#> #=left, right, all <img src=URL align=left>My Face!<br> My Face! It is always <br clear=all> It is always smiling.<br> Hahaha....<br> smiling. Hahaha.... <img vspace=# hspace=#> #=number of pixel 60pixel 60pixel <img src=URL align=left 20 My Face! vspace=20 hspace=60>My Face!<br> It is always<br> It is always smiling.<br> smiling. Hahaha....<br> Hahaha.... 20 Image Size <img width=# height=#> #=number of pixel <img src=URL.gif width=100 height=30> Border Line <img border=#> #=number of pixel <a href="URL.htm"> <img src=URL.gif border=15> </a>NCDesign HTML Design Guide - IMAGE TAGS 3
  • Client Side Image Map <img src=img.gif usemap="MAP-Name"> <map name="MAP-Name"> <area shape="#" coords="#" href="url"> <area shape="#" coords="#" nohref> </map> #Rectangle Area shape="rect" coords="A,A,B,B" (A,A)=Upper Left, (B,B)=Lower Right #Circle Area shape="circle" coords="A,A,R" (A,A)=Center, (R)=Radius #Polygon shape="poly" coords="A,A,B,B,C,C..." (A,A)=First Corner, (B,B)=Second Corner, ... <img src="mapimg.gif" mapimg.gif usemap="#Face"> <map name="Face"> <!--No link area--> <area shape="circle" nohref coords="80,100,20"> <!--Rectangle BUTTON--> <area shape="rect" href="page.html" coords="140,20,280,60"> <!--Triangle BUTTON--> <area shape="poly" href="image.html" coords="100,100,180,80,200,140"> Mapping Area <!--Circle BUTTON--> <area shape="circle" href="new.html" coords="80,100,60"> </map> HTML SampleNCDesign HTML Design Guide - IMAGE TAGS 4
  • FORM TAGS NCD HTML Design Guide v5.0 Basic Structure Form Basic <form action="url" method=*> ... <input type=submit> <input type=reset> </form> url=url of CGI script *=Form Submission method (GET, POST) Input Basic <input type=* name=**> *=text, password, checkbox, radio, image, hidden, submit, reset **=Symbolic Name for CGI script. All input type (except submit and reset) need this attribute. To use the Form function, you need the CGI program on your server that will receive and process the submitted data. At first, try to ask your ISP or server support CGI or not. And maybe your ISP provide the CGI program, or you can find many kind of programs on the net. When the form is submitted, name & value pairs are sent to the invoked CGI program. Text & Password <input type=*> <input type=* value=**> *=text, password **=initial value <form action=/cgi-bin/post-query method=POST> Your Name: <input type=text name=name> <br> Your Name: Your Home Page: http:// <input type=text name=home value=http://><br> Your Home Page: Password: <input type=password name=name> <br> Password: <input type=submit><input type=reset> Submit Reset </form>NCDesign HTML Design Guide - FORM TAGS 1
  • <input type=* size=**> <input type=* maxlength=***> **=box size in characters ***=max number of characters <form action=/cgi-bin/post-query method=POST> <input type=text name=a01 size=40> <br> <input type=text name=a02 maxlength=5> <br> <input type=submit><input type=reset> </form> Submit Reset Checkbox & Radio <input type=checkbox> <input type=checkbox checked> <input type=checkbox value=**> **=the value to be returned to the server (default value is "on") <form action=/cgi-bin/post-query method=POST> <input type=checkbox name=f01> Banana Banana Apple Orange <input type=checkbox name=f02 checked> Apple <input type=checkbox name=f03 value=Orange> Submit Reset Orange <br><br> <input type=submit><input type=reset> </form> Multiple checkbox can be selected at one time. <input type=radio> <input type=radio checked> <input type=radio value=**> **=the value to be returned to the server (default value is "on") <form action=/cgi-bin/post-query method=POST> <input type=radio name=fruits> Banana Banana Apple Orange <input type=radio name=fruits checked> Apple <input type=radio name=fruits value=Orange> Submit Reset Orange <br><br> <input type=submit><input type=reset> </form> A set of radio button should have the same name. And only one radio button in the set can be selected at one time.NCDesign HTML Design Guide - FORM TAGS 2
  • Image coordinates <input type=image src=url.gif> <form action=/cgi-bin/post-query method=POST> <input type=image name=face src=f.gif> <br><br> <input type=radio name=zoom value=2 checked>x2 <input type=radio name=zoom value=4>x4 <input type=radio name=zoom value=6>x6 <br><br> <input type=reset> </form> x2 x4 x6 Reset The Image works as submit button. When the image is clicked, the coordinats of the clicked point and all other form data is sent to the server. If you set <input type=image name="face">, submitted coordinates names would be "face.x" and "face.y". The coordinates values are in the pixel, upper left corner of the image is (0,0). Attributes for <IMG> tag can be used in this image button. (ex. align=left) Hidden Elements <input type=hidden value=*> <form action=/cgi-bin/post-query method=POST> <input type=hidden name=add value=hoge@hoge.jp> Here is a hidden element. Here is a hidden element. <br><br> <input type=submit><input type=reset> </form> Submit Reset File input <input type=file> <form action="url to script" enctype="multipart/form-data" method=POST> <input type=file name=upload> Select </form> User can send the file to the server.NCDesign HTML Design Guide - FORM TAGS 3
  • Button <input type=button value=* onClick=**> *=text displayed on the button **=script to execute when the user clicks the button <form> <input type=button value="Open a new window!" Open a new window! onClick="window.open(new.htm)"> </form> Selectable Menu Select tags Basic Construction <select name=*> <option> ** <option value=***> ** <option selected> ** </select> *=symbolic name to be send to the server **=the value to be send to the server ***=another value (if this specified, ** value would not send to the server) <form action=/cgi-bin/post-query method=POST> <select name=fruits> Apple <option>Banana <option selected>Apple <option value=My_Favorite>Orange Submit Reset </select><br><br> <input type=submit><input type=reset> </form> Select Area Size <select size=**> *=number of options displayed <form action=/cgi-bin/post-query method=POST> <select name=fruits size=3> Banana <option>Banana Apple <option selected>Apple <option value=My_Favorite>Orange Orange <option>Peach </select><br><br> Submit Reset <input type=submit><input type=reset> </form>NCDesign HTML Design Guide - FORM TAGS 4
  • Multiple Selection <select size=* multiple> <form action=/cgi-bin/post-query method=POST> <select name=fruits size=3 multiple> Banana <option selected>Banana Apple <option selected>Apple <option value=My_Favorite>Orange Orange <option selected>Peach </select><br><br> Submit Reset <input type=submit><input type=reset> </form> Text Area <textarea name=* rows=** cols=***> ... </textarea> *=simbolic name to be send to the server **=number of lines ***=number of characters per line ...=initial value The rows and cols attributes determine the text area size. <form action=/cgi-bin/post-query method=POST> <textarea name=comment rows=5 cols=30> </textarea> <br><br> <input type=submit><input type=reset> </form> Submit Reset Word Wrapping <textarea wrap=*> *=off, soft, hard off: disables word wrap. soft: causes word wrap, but the line breaks are not included in the submitted data. hard: causes word wrap, and the line breaks are included in the submitted data.NCDesign HTML Design Guide - FORM TAGS 5
  • Button Style <button type=*> ... </button> *=submit, reset ...=contents on the button <form action=/cgi-bin/post-query method=POST> Your Name: <input type=text name=name><BR><BR> <button type="submit"> Your Name: <IMG SRC="f.gif"><BR>SUBMIT </button> <button type="reset"> <IMG SRC="f.gif"><BR>RESET </button> </form> SUBMIT RESET Field Style (Form Grouping) <fieldset>...</fieldset> ...=form contents <legend align=*> ** </legend> *=top, bottom, left, center, right **=field title <form action=/cgi-bin/post-query method=POST> <fieldset> <legend>Personal Data</legend> Your Name: <input type=text name=name><br> E-Mail: <input type=text name=e-mail> </fieldset> <fieldset> <legend align=center>Payment Info</legend> Credit Card:<input type=radio name=card>VISA <input type=radio name=card>MASTER<br> Expiration: <input type=text name=exp> </fieldset> <br> <input type=submit><input type=reset> </form> Personal Data Your Name: E-Mail: Payment Info Credit Card: VISA MASTER Expiration: Submit ResetNCDesign HTML Design Guide - FORM TAGS 7
  • Old Input Style <isindex prompt=*> <isindex prompt="Enter Search Keyword: "> Enter Search Keyword: This is a deprecated element and should be replaced by INPUT. Label <label for=*> <input id=*> *=label name When user click the labeled text, jump to labeled input box. <form action=/cgi-bin/post-query method=POST> HTML <label for="inputdata"> Sample Please tell me your E-Mail Address! </label> <SMALL><-- Click this text, reach inputbox faster.</SMALL> <BR><BR> <input type=text name=e-mail id="inputdata"> <input type=submit><input type=reset> </form> Please tell me your E-Mail Address! <-- Click this text, reach inputbox faster. Submit ResetNCDesign HTML Design Guide - FORM TAGS 8
  • TABLE TAGS NCD HTML Design Guide v5.0 Table Basic Tags <table>...</table> - table <tr> - row difinition <th> - header cell <td> - data cell <table border> Food Drink Sweet <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> A B C <tr> <td>A</td> <td>B</td> <td>C</td> </table> <table> Food Drink Sweet <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> A B C <tr> <td>A</td> <td>B</td> <td>C</td> </table> Table Span Column Span <th colspan=#>, <td colspan=#> #=number of columns the cell spans <table border> Morning Menu <tr> <th colspan=3>Morning Menu</th> Food Drink Sweet <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> <tr> <td>A</td> <td>B</td> <td>C</td> A B C </table> Row Span <th rowspan=#>, <td rowspan=#> #=number of rows the cell spans <table border> Food A <tr> <th rowspan=3>Morning Menu</th> Morning Menu Drink B <th>Food</th> <td>A</td> <tr> <th>Drink</th> <td>B</td> Sweet C <tr> <th>Sweet</th> <td>C</td> </table>NCDesign HTML Design Guide - TABLE TAGS 1
  • Table Size Border Width <table border=#> #=number of pixel <table border=10> Food Drink Sweet <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> <tr> <td>A</td> <td>B</td> <td>C</td> A B C </table> Space Between Cells <table cellspacing=#> #=number of pixel <table border cellspacing=10> Food Drink Sweet <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> <tr> <td>A</td> <td>B</td> <td>C</td> A B C </table> Space in Cells <table cellpadding=#> #=number of pixel <table border cellpadding=10> Food Drink Sweet <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> <tr> <td>A</td> <td>B</td> <td>C</td> </table> A B C Table Size <table width=# height=#> Cell Size <th width=# height=#>, <td width=# height=#> #=number of pixel, % 250pixel 50% <table border width=250 height=100>100pixel 70pixel <tr> <th width=50% height=70>Food</th> Food Drink Sweet <th>Drink</th> <th>Sweet</th> <tr> <td>A</td> <td>B</td> <td>C</td> </table> A B C NCDesign HTML Design Guide - TABLE TAGS 2
  • Table Text Alignment Horizontal Alignment <tr align=#> , <th align=#>, <td align=#> #=left, center, right <table border width=160> Food Drink Sweet <tr> <th>Food</th><th>Drink</th><th>Sweet</th> A B C <tr> <td align=left>A</td> <td align=center>B</td> <td align=right>C</td> </table> Vertical Alignment <tr valign=#>, <th valign=#>, <td valign=#> #=top, middle, bottom, baseline <table border height=100> <tr> <th>Food</th><th>Drink</th> Food Drink Sweet Other <th>Sweet</th><th>Other</th> <tr> <td valign=top>A</td> A D <td valign=middle>B</td> B <td valign=bottom>C</td> C <td valign=baseline>D</td> </table> No Wrap <tr nowrap>, <th nowrap>, <td nowrap> Text wrap does not occur. Floating Table <table align=left> <table align="left" border> Food Drink Sweet My favorites... <tr> <th>Food</th><th>Drink</th><th>Sweet</th> menu A, B, C. <tr> <td>A</td><td>B</td><td>C</td> A B C </table> My favorites...<br> menu A, B, C.NCDesign HTML Design Guide - TABLE TAGS 3
  • <table align=right> <table align="right" border> My favorites... Food Drink Sweet <tr> <th>Food</th><th>Drink</th><th>Sweet</th> menu A, B, C. <tr> <td>A</td><td>B</td><td>C</td> A B C </table> My favorites...<br> menu A, B, C. <table vspace=# hspace=#> #=number of pixel These attributes are the same as <img vspace=# hspace=#>. <table align="left" border vspace=20 hspace=30> My favorites... <tr> <th>Food</th><th>Drink</th><th>Sweet</th> <tr> <td>A</td><td>B</td><td>C</td> Food Drink Sweet menu A, B, C. </table> My favorites...<br> A B C menu A, B, C. Table Caption <caption align=#> ... </caption> #=left, center, right Lunch <table border> <caption align=right>Lunch</caption> <tr><th>Food</th><th>Drink</th><th>Sweet</th> Food Drink Sweet <tr><td>A</td><td>B</td><td>C</td> A B C </table> <caption align=#> ... </caption> #=top, bottom <table border> Food Drink Sweet <caption align=bottom>Lunch</caption> A B C <tr><th>Food</th><th>Drink</th><th>Sweet</th> <tr><td>A</td><td>B</td><td>C</td> Lunch </table> <caption valign=#> ... </caption> #=top, bottom <table border> Food Drink Sweet <caption valign=bottom>Lunch</caption> A B C <tr><th>Food</th><th>Drink</th><th>Sweet</th> <tr><td>A</td><td>B</td><td>C</td> Lunch </table>NCDesign HTML Design Guide - TABLE TAGS 4
  • Table Color Cell Background Color <tr bgcolor=#>, <th bgcolor=#>, <td bgcolor=#> #= #rrggbb Hex Number, or Name: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua Cell Background Image <tr background="URL"> <th background="URL">, <td background="URL"> <table border> Food Drink <tr><th bgcolor=ffaa00>Food</th> Sweet A B <th bgcolor=Red>Drink</th> <th rowspan=2 background="image.gif">Sweet</th> <tr><td>A</td><td>B</td> </table> Border Color <table bordercolor=#> <table cellspacing=5 border=5 bodercolor=#ffaa00> Food Drink Sweet <tr><th>Food</th><th>Drink</th><th>Sweet</th> <tr><td>A</td><td>B</td><td>C</td> A B C </table> Light & Dark Border Color <table bordercolorlight=#> <table bordercolordark=#> <table cellspacing=5 border=5 Food Drink Sweet bordercolorlight=White bordercolordark=Maroon> <tr><th>Food</th><th>Drink</th><th>Sweet</th> A B C <tr><td>A</td><td>B</td><td>C</td> </table>NCDesign HTML Design Guide - TABLE TAGS 5
  • Groups of Rows Groups of Rows <thead> ... </thead> - Table Header <tbody> ... </tbody> - Table Body <tfoot> ... </tfoot> - Table Footer Rows Alignment <thead align=#1 valign=#2> ... </thead> #1=left, center, right #2=top, middle, bottom, baseline These attributes can be used in thead, tbody, tfoot. <table border> Food Drink Sweet Header <thead> A B C <tr><th>Food</th><th>Drink</th><th>Sweet</th> Body </thead> D E F <tbody align="right"> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> Groups of Columns Groups of Columns <colgroup> ... </colgroup> <colgroup span=#> #number of colmuns affected <colgroup align=#> #=left, right, center <colgroup valign=#> #=top, middle, bottom, baseline <colgroup width=#> #=width of one colmun <table border> Food Drink Sweet <colgroup span=2 align=center width=50> A B C </colgroup> <colgroup align=right width=100> D E F </colgroup> <thead> <tr><th>Food</th><th>Drink</th><th>Sweet</th> 50pixel 50pixel 100pixel </thead> <tbody> colgroup colgroup <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table>NCDesign HTML Design Guide - TABLE TAGS 6
  • Subdivided Groups of Columns <col> <col span=#> #number of colmuns affected <col align=#> #=left, right, center <col valign=#> #=top, middle, bottom, baseline <col width=#> #=width of one colmun <table border> Food Drink Sweet <colgroup align=center width=50> A B C <col span=2> <col width=100> D E F </colgroup> <thead> <tr><th>Food</th><th>Drink</th><th>Sweet</th> 50pixel 50pixel 100pixel </thead> <tbody> col col <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> colgroup </table> Frame Display All Four Sides of Frame <table frame=box> <table border frame=box> Food Drink Sweet <thead> A B C <tr><th>Food</th><th>Drink</th><th>Sweet</th> </thead> D E F <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> All Four Sides of Frame <table frame=box> Food Drink Sweet A B C D E F Top Side of Frame <table frame=above> Food Drink Sweet A B C D E FNCDesign HTML Design Guide - TABLE TAGS 7
  • Bottom Side of Frame <table frame=below> Food Drink Sweet A B C D E F Top and Bottom Sides of Frame <table frame=hsides> Food Drink Sweet A B C D E F Left and Right Sides of Frame <table frame=vsides> Food Drink Sweet A B C D E F Left Hand Side of Frame <table frame=lhs> Food Drink Sweet A B C D E F Right Hand Side of Frame <table frame=rhs> Food Drink Sweet A B C D E F No Frame <table frame=void> Food Drink Sweet A B C D E FNCDesign HTML Design Guide - TABLE TAGS 8
  • Rules Display All Rules <table rules=all> <table border rules=all> Food Drink Sweet Header <colgroup align=center span=2></colgroup> A B C <colgroup align=right></colgroup> Body <thead> D E F <tr><th>Food</th><th>Drink</th><th>Sweet</th> </thead> Total $-00.0 Body <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> colgroup colgroup </tbody> <tbody> <tr><td rowspan=3 align=right>Total $-00.0</td> </tbody> </table> Rules between Groups <table rules=groups> Food Drink Sweet A B C D E F Total $-00.0 Rules between All Rows <table rules=rows> Food Drink Sweet A B C D E F Total $-00.0 Rules between All Cols <table rules=cols> Food Drink Sweet A B C D E F Total $-00.0 None <table rules=none> Food Drink Sweet A B C D E F Total $-00.0NCDesign HTML Design Guide - TABLE TAGS 9
  • FRAME TAGS NCD HTML Design Guide v5.0 Frame Basic <frameset> ... </frameset> <frame src="url"> <noframes> ... </noframes> <HTML> <HEAD>...</HEAD> <FRAMESET> <FRAME SRC="url"> <NOFRAMES> ...SRC for browsers does not support frame. </NOFRAMES> </FRAMESET> <HTML> Frame Size Column Width <frameset cols=#> #=number of pixel, %, * (assign all left space) <frameset cols=30%,20%,50%> HTML <frame src="A.html"> <frame src="B.html"> Sample <frame src="C.html"> A B C </frameset> Row Height <frameset rows=#> #=number of pixel, %, * (assign all left space) A <frameset rows=25%,25%,50%> HTML <frame src="A.html"> <frame src="B.html"> Sample B <frame src="C.html"> </frameset> CNCDesign HTML Design Guide - FRAME TAGS 1
  • COLS & ROWS <frameset cols=20%,*> HTML <frame src="A.html"> B <frameset rows=40%,*> Sample <frame src="B.html"> <frame src="C.html"> A </frameset> </frameset> C No Resize <frame noresize> Default frame is resizable. If you set this attribute, user cant change frame size. Frame Name & Target <frame name=#> <a href=url target=#> ... </a> #=frame name <frameset cols=50%,50%> HTML <frame src="A.html"> Sample <frame src="B.html" name="HELLO"> A B </frameset> Links on A.html: <a href="C.html" target="HELLO"> Document C will be opened into B. </a> <a href="C.html"> Document C will be opened into A. </a> Special Target <a href=url target=#> #=_blank, _self, _parent, _top Links with target: HTML <a href="target01.html" target="_blank"> Sample Linked Page will be opened in a new blank window. </a> <a href="target01.html" target="_self"> Linked Page will be opened in the same window. </a> <a href="A.html" target="_parent"> Linked Page will be opened in the immediate FRAMESET parent of this document. </a> <a href="A.html" target="_top"> Linked Page will be opened in the full window. </a>NCDesign HTML Design Guide - FRAME TAGS 2
  • Frame Appearance Border Width <frameset border=#> <frameset rows=30%,* border=20> HTML A <frame src="Acol.html"> Sample <frameset cols=30%,*> <frame src="Bcol.html"> <frame src="Ccol.html"> </frameset> </frameset> B C Border Display <frameset frameborder=#> <frame frameborder=#> #=yes, no, 1, 0 <frameset rows=30%,*> <frame src="Acol.html" frameborder=yes> A <frameset cols=30%,*> <frame src="Bcol.html" frameborder=no> <frame src="Ccol.html" frameborder=0> </frameset> B C </frameset> HTML Sample Frame Spacing <frameset framespacing=#> #=Space Size <frameset rows=30%,* framespacing=100> A <frame src="Acol.html"> <frameset cols=30%,*> <frame src="Bcol.html"> <frame src="Ccol.html"> </frameset> HTML </frameset> Sample B CNCDesign HTML Design Guide - FRAME TAGS 3
  • Border Color <frameset bordercolor=#> #=rrggbb Hex Number, or Name: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <frameset rows=30%,* bordercolor=red> <frame src="Acol.html"> A <frameset cols=30%,*> <frame src="Bcol.html"> <frame src="Ccol.html"> HTML </frameset> Sample B C </frameset> Margin <frame marginwidth=# marginheight=#> #=margin size in pixel <frameset cols=50%,50%> HTML <frame src="A.html"> <frame src="A.html" Sample marginwidth=50 AA AAAA marginheight=50> AA </frameset> Scrollbar <frame scrolling=#> #=yes, no, auto #=auto is default.NCDesign HTML Design Guide - FRAME TAGS 4
  • Floating Frame <iframe src=# name=##> ... </iframe> #=URL ##=Frame Name ... = src for browser doesnt supported iframe. <iframe src="A.html" name="window"> Display Here is a Floating Frame HTML Sample A.html </iframe> <br><br> <a href="A.html" Load A target="window">Load A</A> <BR> <a href="B.html" Load B target="window">Load B</A> <BR> Load C <a href="Ccol.html" target="window">Load C</A> <BR> iframe can use the same attributes of frameset, frame and img: border=#, frameborder=#, framespacing=# marginwidth=#, marginheight=# scrolling=yes, no, auto align=top, middle, bottom, absmiddle, absbottom, texttop, baseline, left, right width=#, height=# hspace=#, vspace=#NCDesign HTML Design Guide - FRAME TAGS 5
  • INLINE OBJECTS NCD HTML Design Guide v5.0 EMBED <embed src=#> #=URL This tag is used for embedding alternative elements such as movie, sound, vrml and more. To work <embed> now, correct plugin must be installed. And embed attributes are different between each plugins. Applet <applet codebase=#1 code=#2> <param name=X value=X> </applet> #1=URL, #2=filename of executable content X=property name & value for executable content Script <script language=#> ... script data ... </script> #=Script Language Object <object codebase=#1 code=#2> <param name=X value=X> </object> #1=URL, #2=filename of executable content X=property name & value for executable contentNCDesign HTML Design Guide - INLINE OBJECTS 1
  • Background Sound <bgsound src=#> #=URL of wav file <bgsound loop=#> #=loop number <bgsound src="sound.wav" loop=3> Insert Video <img src="url.gif" dynsrc="url.avi"> <img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"> Start <img start=#> #=fileopen, mouseover #=fileopen is a default. You can specify both as <img start=fileopen,mouseover> <img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" start=mouseover> Controls <img controls> <img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls>NCDesign HTML Design Guide - INLINE OBJECTS 2
  • Loop <img loop=#> <loop=infinite> will loop indefinitely. <img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3> Delay <img loopdelay=#> #=milliseconds <img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3 loopdelay=250>NCDesign HTML Design Guide - INLINE OBJECTS 3
  • XML in HTML NCD HTML Design Guide v5.0 Custom Tag Declaring a XML Namespace <html xmlns:#>...</html> #=namespace Declaring a Tag name and Style <style> #:TAG {Style-Declaration} </style> #=namespace, TAG=custom tag name Use Custom Tag <#:TAG>...</#:TAG> #=namespace, TAG=custom tag name <HTML XMLNS:TEST> <HEAD> <STYLE> TEST:RED {color:red} </STYLE> </HEAD> <BODY> <H1>Custom Tag Test</H1> <TEST:RED>This text will be a red color.</TEST:RED> </BODY> </HTML> Custom Tag Test This text will be a red color.NCDesign HTML Design Guide - XML in HTML 1
  • Inline XML XML data can be included in an HTML document to script against it. Nothing will happen without scripting. <xml ID=#> ..xml data.. </xml> ex. <XML ID="SAMP"> <member> HTML <name>Netwrok Communication Design</name> Sample <email>msg@ncdesign.org</email> </member> </XML> <INPUT TYPE=button VALUE="Member Name" onClick="alert(SAMP.XMLDocument.documentElement.childNodes.item(0).text)"> <INPUT TYPE=button VALUE="E-Mail Address" onClick="alert(SAMP.XMLDocument.documentElement.childNodes.item(1).text)"> Member Name E-Mail Address <script language="xml" ID=#> ..xml data.. </script> ex. <SCRIPT LANGUAGE="xml" ID="SAMP1"> HTML <member> Sample <name>NCDESIGN</name> <email>Not Available</email> </member> </SCRIPT> <INPUT TYPE=button VALUE="Member Name" onClick="alert(SAMP1.XMLDocument.documentElement.childNodes.item(0).text)"> <INPUT TYPE=button VALUE="E-Mail Address" onClick="alert(SAMP1.XMLDocument.documentElement.childNodes.item(1).text)"> Member Name E-Mail AddressNCDesign HTML Design Guide - XML in HTML 2
  • Linking XML <xml ID=# src=#></xml> ex. <XML ID="SAMP2" SRC="samp/sample.xml"></XML> <INPUT TYPE=button VALUE="Member Name" onClick="alert(SAMP2.XMLDocument.documentElement.childNodes.item(0).text)"> <INPUT TYPE=button VALUE="E-Mail Address" onClick="alert(SAMP2.XMLDocument.documentElement.childNodes.item(1).text)"> Member Name E-Mail Address sample.xml: <?xml version="1.0"?> <member> <name>Network Communication Design</name> <email>msg@ncdesign.org</email> </member>NCDesign HTML Design Guide - XML in HTML 3
  • Basic System Fonts Appendix A Windows Fonts Arial * Arial Black * Comic Sans MS * Courier Courier New Impact * Times Times New Roman Verdana * Webdings * WingDings * ... On the Macintosh system, these fonts will be installed with Microsoft Internet Explorer. Macintosh Fonts Chicago Courier Courier New Helvetica Monaco Palatino Times Times New RomanNCDesign HTML Design Guide - Appendix A: Basic System Fonts 1
  • ENTITIES Appendix B Basic Entities &quot; " &amp; & &lt; < &gt; > HTML2.0 Keyword Entities &nbsp; &laquo; « &para; ¶ &iexcl; ¡ &not; ¬ &middot; · &cent; ¢ &shy; &cedil; ¸ &pound; £ &reg; ® &sup1; ¹ &curren; ¤ &macr; ¯ &ordm; º &yen; ¥ &deg; ° &raquo; » &brvbar; ¦ &plusmn; ± &frac14; ¼ &sect; § &sup2; ² &frac12; ½ &uml; ¨ &sup3; ³ &iquest; ¿ &copy; © &acute; ´ &ordf; ª &micro; µ HTML3.2 Keyword Entities &trade; ™NCDesign HTML Design Guide - Appendix B: Entities 1
  • ISO entitiy names Following entities for ISO 8859 Latin -1 ignore when using other character sets. Anyway, you can specify charset of html source with meta tag. &AElig; Æ &aacute; á &#161; ¡ &Aacute; Á &acirc; â &#162; ¢ &Acirc;  &aelig; æ &#163; £ &Agrave; À &agrave; à &#165; ¥ &Aring; Å &aring; å &#166; ¦ &Atilde; à &atilde; ã &#167; § &Auml; Ä &auml; ä &#168; ¨ &Ccedil; Ç &ccedil; ç &#169; © &ETH; Ð &eacute; é &#170; ª &Eacute; É &ecirc; ê &#171; « &Ecirc; Ê &egrave; è &#172; ¬ &Egrave; È &eth; ð &#173; &Euml; Ë &euml; ë &#174; ® &Iacute; Í &iacute; í &#175; ¯ &Icirc; Î &icirc; î &#176; ° &Igrave; Ì &igrave; ì &#177; ± &Iuml; Ï &iuml; ï &#178; ² &Ntilde; Ñ &ntilde; ñ &#179; ³ &Oacute; Ó &oacute; ó &#180; ´ &Ocirc; Ô &ocirc; ô &#181; µ &Ograve; Ò &ograve; ò &#182; ¶ &Oslash; Ø &oslash; ø &#183; · &Otilde; Õ &otilde; õ &#184; ¸ &Ouml; Ö &ouml; ö &#185; ¹ &THORN; Þ &szlig; ß &#186; º &Uacute; Ú &thorn; þ &#187; » &Ucirc; Û &uacute; ú &#188; ¼ &Ugrave; Ù &ucirc; û &#189; ½ &Uuml; Ü &ugrave; ù &#190; ¾ &Yacute; Ý &uuml; ü &#191; ¿ &yacute; ý &#215; × &yuml; ÿ &#222; Þ &#247; ÷ Special Characters (new in HTML4.0) &OElig; Œ &zwnj; ‌ &dagger; † &oelig; œ &zwj; ‍ &Dagger; ‡ &Scaron; Š &ndash; – &permil; ‰ &scaron; š &mdash; — &lsaquo; ‹ &Yuml; Ÿ &lsquo; ‘ &rsaquo; › &circ; ˆ &rsquo; ’ &euro; € &tilde; ˜ &sbquo; ‚ &ensp; &ldquo; “ &emsp; &rdquo; ” &thinsp; &bdquo; „NCDesign HTML Design Guide - Appendix B: Entities 2
  • Marquee Attributes Appendix C Marquee Basic Basic <marquee> ... </marquee> <marquee>Hi, Konnichiha!</marquee> Hi, Konnichiha! Scroll Attributes Direction <direction=#> #=left, right <marquee direction=left>Hi, Konnichiha!</marquee> <P> <marquee direction=right>Hi, Konnichiha!</marquee> Hi, Konnichiha! Hi, Konnichiha! Behavior <bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>Hi, Konnichiha!</marquee> <P> <marquee behavior=slide>Hi, Konnichiha!</marquee> <P> <marquee behavior=alternate>Hi, Konnichiha!</marquee> nichiha! Hi, Konnichiha! Hi, Konnichiha! Loop <loop=#> number=# or infinite <marquee loop=3 width=50% behavior=scroll>Hi, Konnichiha!</marquee> <P> <marquee loop=3 width=50% behavior=slide>Hi, Konnichiha!</marquee> <P> <marquee loop=3 width=50% behavior=alternate>Hi, Konnichiha!</marquee> nichiha! Hi, Konnichiha! Hi, Konnichiha!NCDesign HTML Design Guide - Appendix C: MARQUEE ATTRIBUTES 1
  • Scroll Amount <scrollamount=#> <marquee scrollamount=50>Hi, Konnichiha!</marquee> Hi, Konnichiha! Hi, Konnichiha! Hi, Konnichiha! Scroll Delay <scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>Hi, Konnichiha!</marquee> Hi, Konnichiha! Hi, Konnichiha! Hi, Konnichiha! Marquee Layout Align <align=#> #=top, middle, bottom <font size=6> <marquee align=# width=200>Hi, Konnichiha!</marquee> </font> Im greeting from Japan. Hi, Konnichiha!Im greeting from Japan. Hi, Konnichiha!Im greeting from Japan. Hi, Konnichiha!Im greeting from Japan. Background Color <bgcolor=#> #=rrggbb or name <marquee bgcolor=aaaaee>Hi, Konnichiha!</marquee> Hi, Konnichiha! Size <height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa> Hi, Konnichiha! </marquee> Hi, Konnichiha!NCDesign HTML Design Guide - Appendix C: MARQUEE ATTRIBUTES 2
  • Margins <hspace=# vspace=#> ********************************************<br> Hi, <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>Konnichiha! </marquee> Im greeting from Japan.<br> ******************************************** ******************************************** Konnichiha! Hi, Im greeting from Japan. ********************************************NCDesign HTML Design Guide - Appendix C: MARQUEE ATTRIBUTES 3
  • HTML TAG LIST NCD HTML Design Guide v5.0 Support HTML tag attribute value Browser Specification!-- *text*custom *url #keyword HREF *url#keyword mailto:*address NAME *keywordA *window-name _blank TARGET _self _parent _topACRONYM TITLE *original phraseADDRESS CODEBASE *urlAPPLET CODE *filename rect SHAPE circle polyAREA COORDS *amount HREF *url NOHREFB HREF *urlBASE TARGET *window name
  • SIZE *1 - 7BASEFONT COLOR *color FACE *font ltrBDO DIR rtl SRC *urlBGSOUND LOOP *amountBIGBLINKBLOCKQUOTE BGCOLOR *color TEXT *color LINK *color ALINK *color VLINK *colorBODY BACKGROUND *image-url BGPROPERTIES fixed LEFTMARGIN *amount RIGHTMARGIN *amount TOPMARGIN *amount BOTTOMMARGIN *amount leftBR CLEAR right all submitBUTTON TYPE reset left
  • center ALIGN rightCAPTION top bottom top VALIGN bottomCENTERCITECODE SPAN *amount left ALIGN center rightCOL top middle VALIGN bottom baseline WIDTH *amount left ALIGN center right topCOLGROUP middle VALIGN bottom baseline WIDTH *amount SPAN *amountCOMMENTDD
  • DEL datetime *date&timeDFNDIR leftDIV center ALIGN right justifyDL COMPACTDTEM *urlEMBED SRC center rightFIELDSET ALIGN left SIZE *1 - 7FONT COLOR *color FACE *font ACTION *urlFORM GET METHOD POST SRC *urlFRAM NAME *keyword BORDER *amount yes no FRAMEBORDER 1
  • 0 FRAMESPACING *amountFRAME BORDERCOLOR *color MARGINWIDTH *amount MARGINHEIGHT *amount yes SCROLLING no NORESIZE COLS *amountFRAMESET ROWS *amountH1 ALIGN left centerH1 right justifyH2H3H4H5H6HEAD SIZE *amount WIDTH *amount leftHR ALIGN center right NOSHADE COLOR *color
  • HTML XMLNSI SRC *url NAME *keyword BORDER *amount yes no FRAMEBORDER 1 0 FRAMESPACING *amount BORDERCOLOR *color MARGINWIDTH *amount MARGINHEIGHT *amount yes SCROLLING noIFRAME top middle bottom absmiddle ALIGN absbottom texttop baseline left right VSPACE *amount HSPACE *amount WIDTH *amount HEIGHT *amount SRC *url ALT *text
  • top middle bottom absmiddle ALIGN absbottom texttop baselineIMG left right VSPACE *amount HSPACE *amount BORDER *amount WIDTH *amount HEIGHT *amount LOWSRC *url USEMAP *map-name SRC *url DYNSRC *url fileopen START mouseoverIMG CONTROLS *amount LOOP infinite LOOPDELAY *amount text password checkbox radio TYPEINPUT image hidden
  • submit reset NAME *keyword TYPE text VALUE *textINPUT SIZE *amount MAXLENGTH *amount TYPE password VALUE *textINPUT SIZE *amount MAXLENGTH *amount TYPE checkboxINPUT CHECKED VALUE *text TYPE radioINPUT CHECKED VALUE *text TYPE imageINPUT SRC *url TYPE hiddenINPUT VALUE *textINPUT TYPE file TYPE buttonINPUT VALUE *text TYPE submitINPUT VALUE *text TYPE resetINPUT VALUE *textINS datetime *date&time
  • ISINDEX PROMPT *textKBDLABEL FOR *target id top bottomLEGEND ALIGN left center right A a ILI i TYPE 1 disk circle square REL *relationship to destinationLINK HREF *url REL stylesheetLINK TYPE text/css HREF *urlLISTINGMAP NAME *map-name left DIRECTION right scroll
  • BIHAVIOR slide alternate *amount LOOP infinite SCROLLAMOUNT *amountMARQUEE SCROLLDELAY *amount top ALIGN middle bottom BGCOLOR *color HEIGHT *amount WIDTH *amount HSPACE *amount VSPACE *amountMENU Expires Keywords HTTP-EQUIVMETA Reply-to IndexType CONTENT *text HTTP-EQUIV Content-Type text/html;charset=us-ascii text/html;charset=iso-8859-1 text/html;charset=x-max-roman text/html;charset=iso-8859-2 text/html;charset=x-mac-ce text/html;charset=iso-2022-jp text/html;charset=x-sjisMETA text/html;charset=x-euc-jp CONTENT text/html;charset=euc-kr
  • text/html;charset=iso-2022-kr text/html;charset=gb2312 text/html;charset=gb_2312-80 text/html;charset=x-euc-tw text/html;charset=x-cns11643-1 text/html;charset=x-cns11643-2 text/html;charset=big5 HTTP-EQUIV refreshMETA *amount CONTENT *amount; URL=*url COLS *amountMULTICOL GUTTER *amount WIDTH *amountNOBRNOFRAMES CODEBASE *urlOBJECT CODE *filenameOL START *numberOPTION SELECTED VALUE *text leftP center ALIGN right justifyPREQRT
  • RUBYSSAMP xml LANGUAGESCRIPT *script language ID NAME *keywordSELECT SIZE *amount MULTIPLESMALL horizontal TYPE vertical block SIZE *amount WIDTH *amountSPACER HEIGHT *amount top middle ALIGN bottom left rightSPANSTRIKESTRONGSTYLE TYPE text/cssSUBSUPTABLE WIDTH *amount HEIGHT *amount
  • TABLE BORDER *amount CELLSPACING *amount CELLPADDING *amount left ALIGN rightTABLE VSPACE *amount HSPACE *amount BGCOLOR *colorTABLE BACKGROUND *url BORDERCOLOR *colorTABLE BORDERCOLORLIGHT *color BORDERCOLORDARK *color box above below hsidesTABLE FRAME vsides lhs rhs void all groupsTABLE RULES rows cols noneTBODYTD COLSPAN *amountTD ROWSPAN *amount left
  • ALIGN center right topTD middle VALIGN bottom baseline NOWRAP NAME *keyword ROWS *amount COLS *amountTEXTAREA off WRAP soft hardTFOOTTH left ALIGN center rightTHEAD top middle VALIGN bottom baselineTITLETRTTUULVARWBR
  • IDXML SRC *urlXMPSupport Browser ... Netscape Navigator 3.0 ... Netscape Navigator 4.0 ... Internet Explorer 3.0 ... Internet Explorer 4.0 ... Internet Explorer 5.0 ... Not SupportedHTML Specification ... HTML2.0 (RFC1866) ... HTML3.2 (REC-html32) ... HTML4.01 (REC-html401-19991224) ... Not Specified ... Deprecated Elements (defined in HTML4.01)Deprecated elements should not be used in the future, and would replaced by Style Sheet.More Details about Deprecated can be found in html4.0.