Scribd Logo
Upload

Welcome to Scribd!

  • 80 views

    HTML Basic Tutorial

    Uploaded by

    Santu Nandi
    This document provides an overview of basic HTML tags and concepts. It covers HTML page structure, headings, paragraphs, links, images, lists, text formatting, forms, tables and more through examples and explanations of different tags and their uses.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd

    HTML Basic Tutorial

    Uploaded by

    Santu Nandi
    80 views63 pages
    This document provides an overview of basic HTML tags and concepts. It covers HTML page structure, headings, paragraphs, links, images, lists, text formatting, forms, tables and more through examples and explanations of different tags and their uses.

    Original Description:

    Make your personal website

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an overview of basic HTML tags and concepts. It covers HTML page structure, headings, paragraphs, links, images, lists, text formatting, forms, tables and more through examples and explanations of different tags and their uses.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Download as doc, pdf, or txt
    80 views63 pages

    HTML Basic Tutorial

    Uploaded by

    Santu Nandi
    This document provides an overview of basic HTML tags and concepts. It covers HTML page structure, headings, paragraphs, links, images, lists, text formatting, forms, tables and more through examples and explanations of different tags and their uses.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Download as doc, pdf, or txt
    of 63

    HTML Basic tutorial

    1. <html> <body> <h1>Soft4free</h1> <p>Here you find all type of software for free</p> </body> </html> 2. HTML Headings <h1>soft4free</h1> <h2>soft4free</h2> <h3>soft4free</h3> <h4>soft4free</h4> <h5>soft4freeh</h5> <h6>soft4free</h6> 3. HTML Paragraphs <p>This is a paragraph</p> <p>This is another paragraph</p> 4. HTML LINKS <a href="http://www.w3schools.com">This is a link</a> 5. HTML IMAGES <html> <body> <img src="google.jpg" width="104" height="142" /> </body> </html> 6. HTML Attributes Reference Below is a list of some attributes that are standard for most HTML elements: Attribute class Value class_rule or style_rule Description The class of the element

    id style title

    id_name style_definition tooltip_text

    A unique id for the element An inline style definition A text to display in a tool tip

    7. HTML Rules (Lines) The <hr /> tag is used to create an horizontal rule (line). <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>

    8. HTML Comments
    Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. <html> <body> <!--This comment will not be displayed--> <p>This is a regular paragraph</p> </body> </html>

    9. HTML Tag Reference


    W3Schools' tag reference contains additional information about these tags and their attributes. You will learn more about HTML tags and attributes in the next chapters of this tutorial. Tag <html> <body> <h1> to <h6> <hr /> <!--> 10. HTML Line Breaks Description Defines an HTML document Defines the document's body Defines header 1 to header 6 Defines a horizontal rule Defines a comment

    <html> <body> <p>This is<br />a para<br />graph with line breaks</p> </body> </html> 11. Example: <html> <title>home page</title> <body> <p> My Bonnie lies over the ocean.<br> My Bonnie lies over the sea.<br/> My Bonnie lies over the ocean. <hr/> Oh, bring back my Bonnie to me.<hr/> </p> <p>Note that your browser ignores your layout!</p> </body> </html> 12. More paragraph <html> <body> <p> This paragraph contains a lot of lines in the source code, but the browser ignores it.</p>

    <p>This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p>

    <p> The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change. </p> </body> </html> 13. HTML text formatting <html> <body> <p><b>This text is bold</b></p> <p><big>This text is big</big></p> <p><i>This text is italic</i></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>

    14. Text Formatting Tags


    Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <s> <strike> <u> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use <del> instead Deprecated. Use <del> instead Deprecated. Use styles instead

    "Computer Output" Tags

    Tag <code> <kbd> <samp> <tt> <var> <pre> <listing> <plaintext> <xmp>

    Description Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text Deprecated. Use <pre> instead Deprecated. Use <pre> instead Deprecated. Use <pre> instead

    Citations, Quotations, and Definition Tags


    Tag <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Description Defines an abbreviation Defines an acronym Defines an address element Defines the text direction Defines a long quotation Defines a short quotation Defines a citation Defines a definition term

    15. Preformated text <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i

    </pre> </body> </html> 16. Computer output tag <html> <body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <br> <tt>Teletype text</tt> <br> <samp>Sample text</samp> <br> <var>Computer variable</var> <br> <p> <b>Note:</b> These tags are often used to display computer/programming code. </p> </body> </html> 17. Address <html> <body> <address> Donald Duck<br> BOX 555<br> Disneyland<br> USA </address> </body> </html> 18. Abbreviations and acronyms <html> <body> <abbr title="United Nations">UN</abbr> <br />

    <acronym title="World Wide Web">WWW</acronym> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> </body> </html> 19. Text direction <html> <body> <p> If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> </body> </html> 20. Quotations <html> <body> A blockquote quotation: <blockquote> This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. </blockquote> <p><b>The browser inserts line breaks and margins for a blockquote element.</b></p> A short quotation: <q>This is a short quotation</q> <p><b>The q element does not render as anything special.</b></p> </body> </html> 21. Deleted and tnserted text <html>

    <body> <p> a dozen is <del>twenty</del> <ins>twelve</ins> pieces </p> <p> Most browsers will overstrike deleted text and underline inserted text. </p> <p> Some older browsers will display deleted or inserted text as plain text. </p> </body> </html> 22. HTML styles <html> <body style="background-color:PowderBlue;"> <h1>Look! Styles and colors</h1> <p style="font-family:verdana;color:red"> This text is in Verdana and red</p> <p style="font-family:times;color:green"> This text is in Times and green</p> <p style="font-size:30px">This text is 30 pixels high</p> </body> </html> 23. HTML styles example style="background-color:yellow" style="font-size:10px" style="font-family:Times" style="text-align:center 24. Deprecated Tags and Attributes

    In HTML 4, some tags and attributes are defined as deprecated. Deprecated means that they will not be supported in future versions of HTML and XHTML. The message is clear: Avoid the use of deprecated tags and attributes. These tags and attributes should be avoided: Tags <center> <font> and <basefont> <s> and <strikeout> <u> Attributes align bgcolor color 25. <html> <body> <p><font size="2" face="Verdana"> This is a paragraph. </font></p> <p><font size="5" face="Times" color="red"> This is another paragraph. </font></p> </body> </html> 26. Alignment <html> <body> <h1 style="text-align:center">This is heading 1</h1> <p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p> </body> </html> Description Defines centered content Defines HTML fonts Defines strikeout text Defines underlined text Description Defines the alignment of text Defines the background color Defines the text color

    27. <h1 align="center">This is heading 1</h1> 28. HTML links <html> <body> <p> <a href="lastpage.htm"> This text</a> is a link to a page on this Web site. </p> <p> <a href="http://www.microsoft.com/"> This text</a> is a link to a page on the World Wide Web. </p> </body> </html> 29. Open a link in a new window <html> <body> <a href="http://equitecinfra.com" target="_blank">Last Page</a> <p> If you set the target attribute of a link to "_blank", the link will open in a new window. </p> </body> </html> 30. The name Attribute When the name attribute is used, the <a> element defines a named anchor inside a HTML document. Named anchor are not displayed in any special way. They are invisible to the reader. Named anchor syntax: <a name="label">Any content</a> The link syntax to a named anchor: <a href="#label">Any content</a>

    The # in the href attribute defines a link to a named anchor.

    Example:
    A named anchor inside an HTML document: <a name="tips">Useful Tips Section</a> A link to the Useful Tips Section from the same document: <a href="#tips"> Jump to the Useful Tips Section</a> A link to the Useful Tips Section from another document: <a href="http://www.w3schools.com/html_tutorial.htm#tips"> Jump to the Useful Tips Section</a> 31. An image as a link <html> <body> <p> You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> </p> </body> </html> 32. Link to a location on the same page <html> <body> <p> <a href="#C10">See also Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 4</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p>

    <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C10"></a>Chapter 10</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> </body> </html> 33. Break out of a frame <html> <body> <p>Locked in a frame?</p> <a href="http://www.w3schools.com/" target="_top">Click here!</a> </body> </html> 34. Create a mailto link: how to link to a mail message <html> <body> <p> This is a mail link: <a href="mailto:[email protected]?subject=Hello%20again"> Send Mail</a> </p> <p>

    <b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly. </p> </body> </html> 35. Create a mailto link more person at a time: <html> <body> <p> This is another mailto link: <a href="mailto:[email protected]? [email protected]&[email protected]&subject=Sum mer%20Party&body=You%20are%20invited%20to%20a%20big%20summer %20party!">Send mail!</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly. </p> </body> </html> 36. HTML images <html> <body> <h2>Norwegian Mountain Trip</h2> <img border="0" src="/images/pulpit.jpg" width="304" height="228" /> </body> </html> 37. <html> <body> <p> An image: <img src="constr4.gif" width="144" height="50"> </p>

    <p> A moving image: <img src="hackanm.gif" width="48" height="48"> </p> <p> Note that the syntax of inserting a moving image is no different from that of a nonmoving image. </p> </body> </html> 38. Insert images from different location: your computer own site folder or another site folder by using url <html> <body> <p>An image from another folder:</p> <img src="/images/chrome.gif" width="33" height="32"> <p>An image from W3Schools:</p> <img src="http://buzz18.in.com/media/picdownload/wallpapers/srk_1024x768.jpg" width="500" height="450"> </body> </html> 39. Image tag and src(source) attribute In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image: <img src="url" /> The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. 40. The Alt Attribute The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="Big Boat" />

    The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers. 41. Image background <html> <body background="background.jpg"> <h3>Look: A background image!</h3> <p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html> 42. Aligning images <html> <body> <p> An image <img src="hackanm.gif" align="bottom" width="48" height="48"> in the text </p> <p> An image <img src ="hackanm.gif" align="middle" width="48" height="48"> in the text </p> <p> An image <img src ="hackanm.gif" align="top" width="48" height="48"> in the text </p> <p>Note that bottom alignment is the default alignment</p>

    <p> An image <img src ="hackanm.gif" width="48" height="48"> in the text </p> <p> <img src ="hackanm.gif" width="48" height="48"> An image before the text </p> <p> An image after the text <img src ="hackanm.gif" width="48" height="48"> </p> </body> </html> 43. Let the image float <html> <body> <p> <img src ="hackanm.gif" align ="left" width="48" height="48"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p> <p> <img src ="hackanm.gif" align ="right" width="48" height="48"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p> </body> </html> 44. Adjust image to different size <html> <body>

    <p> <img src="hackanm.gif" width="20" height="20"> </p> <p> <img src="hackanm.gif" width="45" height="45"> </p> <p> <img src="hackanm.gif" width="70" height="70"> </p> <p> You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag. </p> </body> </html> 45. Display an alternative text for an image <html> <body> <img src="goleft.gif" alt="Go Left" width="32" height="32"> <p> Text-only browsers cannot display images and will only display the text that is specified in the "alt" attribute for the image. Here, the "alt"-text is "Go Left".</p> <p> Note that if you hold the mouse pointer over the image, most browsers will display the "alt"-text. </p> </body> </html> 46. Make a hyperlink of an image <html> <body> <p>

    You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> </p> </body> </html> 47. Create an image map <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" /> </map> </body> </html> To see real effect log no to the bellow address and learn how to create this http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap 48. Turn an image into an image map <html> <body> <p> Move the mouse over the image, and look at the status bar to see how the coordinates change. </p> <p> <a href="tryhtml_ismap.htm"> <img src="planets.gif" ismap width="146" height="126"> </a> </p>

    </body> </html> To see the log no to http://www.w3schools.com/html/tryit.asp?filename=tryhtml_ismap 49. <html> <body> <p> Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. </p> <h4>One column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>One row and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>Two rows and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>

    50. Table borders <html> <body> <h4>With a normal border:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With a thick border:</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With a very thick border:</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> 51. Table with no border <html> <body>

    <h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>And this table has no borders:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> 52. Headings in a table <html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td>

    <td>555 77 855</td> </tr> </table> <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html> 53. Empty cell <html> <body> <table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td></td> <td>Some text</td> </tr> </table> <p> As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border. </p> <p> The trick is to insert a no-breaking space in the cell. </p>

    <p>No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it. </p> <p>The no-breaking space entity starts with an ampersand ("&"), then the letters "nbsp", and ends with a semicolon (";") </p> <p> </p> </body> </html> 54. Table with a caption <html> <body> <h4> This table has a caption, and a thick border: </h4> <table border="6"> <caption>My Caption</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> 55. Table cell that span more than one row/column <html> <body> <h4>Cell that spans two columns:</h4>

    <table border="1"> <tr> <th>Name</th> <th colspan="3">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> 56. Tags inside a table <html> <body> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td>

    </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html> 57. Cell padding <html> <body> <h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr>

    <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> 58. cell spacing <html> <body> <h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> 59. Add a background color and background image to a table <html> <body> <h4>A background color:</h4> <table border="1" bgcolor="violet"> <tr>

    <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>A background image:</h4> <table border="1" background="bgdesert.jpg"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> 60. Add a background color or a background image to a table cell <html> <body> <h4>Cell backgrounds:</h4> <table border="1"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <tr> <td background="bgdesert.jpg"> Second</td> <td>Row</td> </tr> </table> </body> </html>

    61. Align the content in a table cell <html> <body> <table width="400" border="1"> <tr> <th align="left">Money spent on....</th> <th align="right">January</th> <th align="right">February</th> </tr> <tr> <td align="left">Clothes</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">Make-Up</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">Food</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">Sum</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </body> </html> 62. The frame attribute <html> <body> <p> If you see no frames around the tables in these examples, your browser is too old, or does not support it. </p> <h4>With frame="border":</h4> <table frame="border">

    <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With frame="box":</h4> <table frame="box"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With frame="void":</h4> <table frame="void"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With frame="above":</h4> <table frame="above"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

    <h4>With frame="below":</h4> <table frame="below"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With frame="hsides":</h4> <table frame="hsides"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With frame="vsides":</h4> <table frame="vsides"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With frame="lhs":</h4> <table frame="lhs"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr>

    </table> <h4>With frame="rhs":</h4> <table frame="rhs"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> 63. The frame and border attributes <html> <body> <p> If you see no frames around the tables in these examples, your browser does not support the frame attribute. </p> <table frame="hsides" border="3"> <tr> <td>First row</td> </tr> </table> <br /> <table frame="vsides" border="3"> <tr> <td>First row</td> </tr> </table> </body> </html> 64. Table Tags Tag Description <table> Defines a table <th> Defines a table header <tr> Defines a table row

    <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot>

    Defines a table cell Defines a table caption Defines groups of table columns Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer

    65. Different type of order list <html> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4>

    <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html> 66. Different types of unordered lists <html> <body> <h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html> 67. A nested list <html> <body> <h4>A nested List:</h4>

    <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html> 68. Definition list for paragraph <html> <body> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> </html> 69. List Tags Tag Description <ol> Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <dl> Defines a definition list <dt> Defines a term (an item) in a definition list <dd> Defines a description of a term in a definition list <dir> Deprecated. Use <ul> instead <menu> Deprecated. Use <ul> instead

    70. Forms text field <html> <body> <form action=""> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html> 71. Password fields <html> <body> <form action=""> Username: <input type="text" name="user"> <br> Password: <input type="password" name="password"> </form> <p> Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters. </p> </body> </html> 72. Check boxes <html> <body> <form action=""> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br /> I have an airplane:

    <input type="checkbox" name="vehicle" value="Airplane"> </form> </body> </html> 73. Radio buttons <html> <body> <form action=""> Male: <input type="radio" checked="checked" name="Sex" value="male"> <br> Female: <input type="radio" name="Sex" value="female"> </form> <p> When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked </p> </body> </html> 74. Simple drop down box <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> 75. Another drop down box <html>

    <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> 76. Text area <html> <body> <p> This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. </p> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> </body> </html> 77. Create a button: On the button you can define your own text <html> <body> <form action=""> <input type="button" value="CLICK HERE TO DOWNLOAD"> </form> </body> </html> 78. Field set around data: how to draw a border with a caption around your data. <html> <body> <fieldset> <legend> Health information: </legend> <form action=""> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form>

    </fieldset> <p> If there is no border around the input form, your browser is too old. </p> </body> </html> 79. Forms with input fields and a submit button <html> <body> <form name="input" action="html_form_action.asp" method="get"> Type your first name: <input type="text" name="FirstName" value="Mickey" size="20"> <br>Type your last name: <input type="text" name="LastName" value="Mouse" size="20"> <br> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. </p> </body> </html> 80. Forms with check boxes and a submit button <html> <body> <form name="input" action="html_form_action.asp" method="get"> I have a bike: <input type="checkbox" name="vehicle" value="Bike" checked="checked" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> <br /><br />

    <input type="submit" value="Submit" /> </form> <p> If you click the "Submit" button, you send your input to a new page called html_form_action.asp. </p> </body> </html> 81. Forms with radio button and a submit button <html> <body> <form name="input" action="html_form_action.asp" method="get"> Male: <input type="radio" name="Sex" value="Male" checked="checked"> <br> Female: <input type="radio" name="Sex" value="Female"> <br> <input type ="submit" value ="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. </p> </body> </html> 82. Send email from a form <html> <body> <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> <h3>This form sends an e-mail to W3Schools.</h3> Name:<br> <input type="text" name="name" value="yourname" size="20"> <br> Mail:<br> <input type="text" name="mail"

    value="yourmail" size="20"> <br> Comment:<br> <input type="text" name="comment" value="yourcomment" size="40"> <br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> </body> </html> 83. Form Tags Tag <form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> <isindex> 84. Color value <html> <body> <p style="background-color:#F0FF00"> Color set by using hex value </p> <p style="background-color:rgb(255,255,0)"> Color set by using rgb value </p> <p style="background-color:yellow"> Color set by using color name </p>

    Description Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Defines a caption for a fieldset Defines a selectable list (a drop-down box) Defines an option group Defines an option in the drop-down box Defines a push button Deprecated. Use <input> instead

    </body> </html> 85. Colors are displayed combining RED, GREEN, and BLUE light. Color Values HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign. Color Values Color Color HEX #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)

    Try it yourself 16 Million Different Colors The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at least 16384 different colors. If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero. To see a full list of color mixes when the red light varies from 0 to 255, click on one of the hex or rgb values below. Red Light Color HEX Color RGB #000000 rgb(0,0,0) #080000 rgb(8,0,0) #100000 rgb(16,0,0) #180000 rgb(24,0,0) #200000 rgb(32,0,0) #280000 rgb(40,0,0)

    #300000 #380000 #400000 #480000 #500000 #580000 #600000 #680000 #700000 #780000 #800000 #880000 #900000 #980000 #A00000 #A80000 #B00000 #B80000 #C00000 #C80000 #D00000 #D80000 #E00000 #E80000 #F00000 #F80000 #FF0000

    rgb(48,0,0) rgb(56,0,0) rgb(64,0,0) rgb(72,0,0) rgb(80,0,0) rgb(88,0,0) rgb(96,0,0) rgb(104,0,0) rgb(112,0,0) rgb(120,0,0) rgb(128,0,0) rgb(136,0,0) rgb(144,0,0) rgb(152,0,0) rgb(160,0,0) rgb(168,0,0) rgb(176,0,0) rgb(184,0,0) rgb(192,0,0) rgb(200,0,0) rgb(208,0,0) rgb(216,0,0) rgb(224,0,0) rgb(232,0,0) rgb(240,0,0) rgb(248,0,0) rgb(255,0,0)

    Shades of Gray Gray colors are displayed using an equal amount of power to all of the light sources. To make it easier for you to select the right gray color we have compiled a table of gray shades for you: Gray Shades Color HEX Color RGB #000000 rgb(0,0,0) #080808 rgb(8,8,8) #101010 rgb(16,16,16)

    #181818 #202020 #282828 #303030 #383838 #404040 #484848 #505050 #585858 #606060 #686868 #707070 #787878 #808080 #888888 #909090 #989898 #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF

    rgb(24,24,24) rgb(32,32,32) rgb(40,40,40) rgb(48,48,48) rgb(56,56,56) rgb(64,64,64) rgb(72,72,72) rgb(80,80,80) rgb(88,88,88) rgb(96,96,96) rgb(104,104,104) rgb(112,112,112) rgb(120,120,120) rgb(128,128,128) rgb(136,136,136) rgb(144,144,144) rgb(152,152,152) rgb(160,160,160) rgb(168,168,168) rgb(176,176,176) rgb(184,184,184) rgb(192,192,192) rgb(200,200,200) rgb(208,208,208) rgb(216,216,216) rgb(224,224,224) rgb(232,232,232) rgb(240,240,240) rgb(248,248,248) rgb(255,255,255)

    Cross-Browser Color Names A collection of nearly 150 color names are supported by all major browsers. View the cross-browser color names Web Standard Color Names The World Wide Web Consortium (W3C) has listed 16 valid color names for HTML and CSS:

    aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want to use other colors, you should specify their HEX value. Web Safe Colors? Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors. The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette. This is not important now, since most computers can display millions of different colors. Anyway here is the list: 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

    CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00

    CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33

    CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66

    CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99

    CCCCCC CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC

    CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF

    86. The Red value is now #A0

    00

    10

    20

    30

    40

    50

    60

    70

    80

    90

    A0

    B0

    C0

    D0

    E0

    F0

    FF

    The vertical numbers are the Green values, horizontal values are the Blue. 00 10 20 30 40 50 60 70 80 90 A0 00 08 10 18 20 28 30 38 40 48 50 58 60 68 70 78 80 88 90 98 A0 A8 B0 C0 D0 E0 F0 FF

    B0 B8 C0 C8 D0 D8 E0 E8 F0 F8 FF 87. Color Names Supported by All Browsers The list below is a complete list of the color names supported by all major browsers. You can click on a color name (or a hex value) to view the color as the background-color along with different text colors. Sorted by Names Link: Same list sorted by values Color Name HEX Color Shades Mix AliceBlue #F0F8FF Shades Mix AntiqueWhite #FAEBD7 Shades Mix Aqua #00FFFF Shades Mix Aquamarine #7FFFD4 Shades Mix Azure #F0FFFF Shades Mix Beige #F5F5DC Shades Mix Bisque #FFE4C4 Shades Mix Black #000000 Shades Mix BlanchedAlmond #FFEBCD Shades Mix Blue #0000FF Shades Mix BlueViolet #8A2BE2 Shades Mix Brown #A52A2A Shades Mix BurlyWood #DEB887 Shades Mix CadetBlue #5F9EA0 Shades Mix Chartreuse #7FFF00 Shades Mix Chocolate #D2691E Shades Mix Coral #FF7F50 Shades Mix CornflowerBlue #6495ED Shades Mix Cornsilk #FFF8DC Shades Mix Crimson #DC143C Shades Mix

    Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DodgerBlue FireBrick FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Green GreenYellow HoneyDew HotPink IndianRed

    #00FFFF #00008B #008B8B #B8860B #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 #DAA520 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C

    Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

    Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

    Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSteelBlue LightYellow Lime LimeGreen Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream

    #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #D3D3D3 #90EE90 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370D8 #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA

    Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

    Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

    MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray Snow

    #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #D87093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA

    Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

    Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

    SpringGreen #00FF7F Shades Mix SteelBlue #4682B4 Shades Mix Tan #D2B48C Shades Mix Teal #008080 Shades Mix Thistle #D8BFD8 Shades Mix Tomato #FF6347 Shades Mix Turquoise #40E0D0 Shades Mix Violet #EE82EE Shades Mix Wheat #F5DEB3 Shades Mix White #FFFFFF Shades Mix WhiteSmoke #F5F5F5 Shades Mix Yellow #FFFF00 Shades Mix YellowGreen #9ACD32 Shades Mix Note: The names above are not a part of the W3C web standard. The W3C HTML and CSS standards have listed only 16 valid color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want valid HTML or CSS use the HEX values instead. 88. Get darker/lighter shades of any color. http://www.w3schools.com/tags/ref_colorpicker.asp?colorhex=7FFF00

    Select color:

    Darker/lighter shades:

    Hex values:

    #FAFAD2

    Selected color:

    #000000 #191915 #32322A #4B4B3F #646454 #7D7D69 #96967E #AFAF93 #C8C8A8 #E1E1BD #FAFAD2 #FAFAD6 #FBFBDB #FCFCE0 #FCFCE4 #FCFCE8 #FDFDED #FEFEF2 #FEFEF6 #FEFEFA #FFFFFF

    89. Mix two colors and see the result. http://www.w3schools.com/tags/ref_colormixer.asp? colorbottom=00CED1&colortop=FFFFFF Select colors: Top color:

    #00FF00 #009CA6

    #00FF00 #00FA08 #00F511 #00F019 #00EB21 #00E62A #00E132 #00DC3A #00D742 #00D24B #00CE53 #00C95B #00C464 #00BF6C #00BA74 #00B57C #00B085 #00AB8D #00A695 #00A19E #009CA6
    Bottom color:

    90. Background AliceBlue, shown with different text colors. Hex F0F8FF FAEBD7 00FFFF 7FFFD4 F0FFFF F5F5DC FFE4C4 000000 FFEBCD 0000FF 8A2BE2 A52A2A RGB 240,248,255 250,235,215 0,255,255 127,255,212 240,255,255 245,245,220 255,228,196 0,0,0 255,235,205 0,0,255 138,43,226 165,42,42 AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown Name

    DEB887 5F9EA0 7FFF00 D2691E FF7F50 6495ED FFF8DC DC143C 00FFFF 00008B 008B8B B8860B A9A9A9 006400 BDB76B 8B008B 556B2F FF8C00 9932CC 8B0000 E9967A 8FBC8F 483D8B 2F4F4F 00CED1 9400D3 FF1493 00BFFF 696969 1E90FF B22222 FFFAF0 228B22

    222,184,135 95,158,160 127,255,0 210,105,30 255,127,80 100,149,237 255,248,220 237,164,61 0,255,255 0,0,139 0,139,139 184,134,11 169,169,169 0,100,0 189,183,107 139,0,139 85,107,47 255,140,0 153,50,204 139,0,0 233,150,122 143,188,143 72,61,139 47,79,79 0,206,209 148,0,211 255,20,147 0,191,255 105,105,105 30,144,255 178,34,34 255,250,240 34,139,34

    BurlyWood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenRod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DodgerBlue FireBrick FloralWhite ForestGreen

    FF00FF DCDCDC F8F8FF FFD700 DAA520 808080 008000 ADFF2F F0FFF0 FF69B4 CD5C5C 4B0082 FFFFF0 F0E68C E6E6FA FFF0F5 7CFC00 FFFACD ADD8E6 F08080 E0FFFF FAFAD2 D3D3D3 90EE90 FFB6C1 FFA07A 20B2AA 87CEFA 778899 B0C4DE FFFFE0 00FF00 32CD32

    255,0,255 220,220,220 248,248,255 255,215,0 218,165,32 128,128,128 0,128,0 173,255,47 240,255,240 255,105,180 205,92,92 75,0,130 255,255,240 240,230,140 230,230,250 255,240,245 124,252,0 255,250,205 173,216,230 240,128,128 224,255,255 250,250,210 211,211,211 144,238,144 255,182,193 255,160,122 32,178,170 135,206,250 119,136,153 176,196,222 255,255,224 0,255,0 50,205,50

    Fuchsia Gainsboro GhostWhite Gold GoldenRod Gray Green GreenYellow HoneyDew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenRodYellow LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSteelBlue LightYellow Lime LimeGreen

    FAF0E6 FF00FF 800000 66CDAA 0000CD BA55D3 9370D8 3CB371 7B68EE 00FA9A 48D1CC C71585 191970 F5FFFA FFE4E1 FFE4B5 FFDEAD 000080 FDF5E6 808000 6B8E23 FFA500 FF4500 DA70D6 EEE8AA 98FB98 AFEEEE D87093 FFEFD5 FFDAB9 CD853F FFC0CB DDA0DD

    250,240,230 255,0,255 128,0,0 102,205,170 0,0,205 186,85,211 147,112,219 60,179,113 123,104,238 0,250,154 72,209,204 199,21,133 25,25,112 245,255,250 255,228,225 255,228,181 255,222,173 0,0,128 253,245,230 128,128,0 107,142,35 255,165,0 255,69,0 218,112,214 238,232,170 152,251,152 175,238,238 219,112,147 255,239,213 255,218,185 205,133,63 255,192,203 221,160,221

    Linen Magenta Maroon MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite Navy OldLace Olive OliveDrab Orange OrangeRed Orchid PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum

    B0E0E6 800080 FF0000 BC8F8F 4169E1 8B4513 FA8072 F4A460 2E8B57 FFF5EE A0522D C0C0C0 87CEEB 6A5ACD 708090 FFFAFA 00FF7F 4682B4 D2B48C 008080 D8BFD8 FF6347 40E0D0 EE82EE F5DEB3 FFFFFF F5F5F5 FFFF00

    176,224,230 128,0,128 255,0,0 188,143,143 65,105,225 139,69,19 250,128,114 244,164,96 46,139,87 255,245,238 160,82,45 192,192,192 135,206,235 106,90,205 112,128,144 255,250,250 0,255,127 70,130,180 210,180,140 0,128,128 216,191,216 255,99,71 64,224,208 238,130,238 245,222,179 255,255,255 245,245,245 255,255,0

    PowderBlue Purple Red RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen SeaShell Sienna Silver SkyBlue SlateBlue SlateGray Snow SpringGreen SteelBlue Tan Teal Thistle Tomato Turquoise Violet Wheat White WhiteSmoke Yellow

    9ACD32 154,205,50 YellowGreen 91. Color values: Color Names Supported by All Browsers The list below is a complete list of the color names supported by all major browsers. You can click on a color name (or a hex value) to view the color as the background-color along with different text colors.

    Sorted by HEX Value Link: Same list sorted by names Color Name HEX Black #000000 Navy #000080 DarkBlue #00008B MediumBlue #0000CD Blue #0000FF DarkGreen #006400 Green #008000 Teal #008080 DarkCyan #008B8B DeepSkyBlue #00BFFF DarkTurquoise #00CED1 MediumSpringGreen #00FA9A Lime #00FF00 SpringGreen #00FF7F Aqua #00FFFF Cyan #00FFFF MidnightBlue #191970 DodgerBlue #1E90FF LightSeaGreen #20B2AA ForestGreen #228B22 SeaGreen #2E8B57 DarkSlateGray #2F4F4F LimeGreen #32CD32 MediumSeaGreen #3CB371 Turquoise #40E0D0 RoyalBlue #4169E1 SteelBlue #4682B4 DarkSlateBlue #483D8B MediumTurquoise #48D1CC Indigo #4B0082 DarkOliveGreen #556B2F CadetBlue #5F9EA0 CornflowerBlue #6495ED

    Color

    Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

    Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

    MediumAquaMarine DimGray SlateBlue OliveDrab SlateGray LightSlateGray MediumSlateBlue LawnGreen Chartreuse Aquamarine Maroon Purple Olive Gray SkyBlue LightSkyBlue BlueViolet DarkRed DarkMagenta SaddleBrown DarkSeaGreen LightGreen MediumPurple DarkViolet PaleGreen DarkOrchid YellowGreen Sienna Brown DarkGray LightBlue GreenYellow PaleTurquoise LightSteelBlue PowderBlue

    #66CDAA #696969 #6A5ACD #6B8E23 #708090 #778899 #7B68EE #7CFC00 #7FFF00 #7FFFD4 #800000 #800080 #808000 #808080 #87CEEB #87CEFA #8A2BE2 #8B0000 #8B008B #8B4513 #8FBC8F #90EE90 #9370D8 #9400D3 #98FB98 #9932CC #9ACD32 #A0522D #A52A2A #A9A9A9 #ADD8E6 #ADFF2F #AFEEEE #B0C4DE #B0E0E6

    Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

    Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

    FireBrick DarkGoldenRod MediumOrchid RosyBrown DarkKhaki Silver MediumVioletRed IndianRed Peru Chocolate Tan LightGrey PaleVioletRed Thistle Orchid GoldenRod Crimson Gainsboro Plum BurlyWood LightCyan Lavender DarkSalmon Violet PaleGoldenRod LightCoral Khaki AliceBlue HoneyDew Azure SandyBrown Wheat Beige WhiteSmoke MintCream GhostWhite

    #B22222 #B8860B #BA55D3 #BC8F8F #BDB76B #C0C0C0 #C71585 #CD5C5C #CD853F #D2691E #D2B48C #D3D3D3 #D87093 #D8BFD8 #DA70D6 #DAA520 #DC143C #DCDCDC #DDA0DD #DEB887 #E0FFFF #E6E6FA #E9967A #EE82EE #EEE8AA #F08080 #F0E68C #F0F8FF #F0FFF0 #F0FFFF #F4A460 #F5DEB3 #F5F5DC #F5F5F5 #F5FFFA #F8F8FF

    Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

    Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

    Salmon AntiqueWhite Linen LightGoldenRodYellow OldLace Red Fuchsia Magenta DeepPink OrangeRed Tomato HotPink Coral Darkorange LightSalmon Orange LightPink Pink Gold PeachPuff NavajoWhite Moccasin Bisque MistyRose BlanchedAlmond PapayaWhip LavenderBlush SeaShell Cornsilk LemonChiffon FloralWhite Snow Yellow LightYellow Ivory White

    #FA8072 #FAEBD7 #FAF0E6 #FAFAD2 #FDF5E6 #FF0000 #FF00FF #FF00FF #FF1493 #FF4500 #FF6347 #FF69B4 #FF7F50 #FF8C00 #FFA07A #FFA500 #FFB6C1 #FFC0CB #FFD700 #FFDAB9 #FFDEAD #FFE4B5 #FFE4C4 #FFE4E1 #FFEBCD #FFEFD5 #FFF0F5 #FFF5EE #FFF8DC #FFFACD #FFFAF0 #FFFAFA #FFFF00 #FFFFE0 #FFFFF0 #FFFFFF

    Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

    Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

    Note: The names above are not a part of the W3C web standard. The W3C HTML and CSS standards have listed only 16 valid color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want valid HTML or CSS use the HEX values instead. 92. HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket. HTML Basic Document <html> <head> <title>Document name goes here</title> </head> <body> Visible text goes here </body> </html> Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>Smallest Heading</h6> Text Elements <p>This is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>This text is preformatted</pre> Logical Styles <em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code> Physical Styles <b>This text is bold</b> <i>This text is italic</i> Links, Anchors, and Image Elements <a href="http://www.example.com/">This is a Link</a> <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a> <a href="mailto:[email protected]">Send e-mail</a> A named anchor: <a name="tips">Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a> Unordered list <ul> <li>First item</li> <li>Next item</li> </ul>

    Ordered list <ol> <li>First item</li> <li>Next item</li> </ol> Definition list <dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl> Tables <table border="1"> <tr> <th>someheader</th> <th>someheader</th> </tr> <tr> <td>sometext</td> <td>sometext</td> </tr> </table> Frames <frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> Forms <form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="lastname" value="Nixon" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden"> <select> <option>Apples <option selected>Bananas <option>Cherries </select> <textarea name="Comment" rows="60" cols="20"></textarea> </form>

    Entities &lt; is the same as < &gt; is the same as > &#169; is the same as Other Elements <!-- This is a comment --> <blockquote> Text quoted from some source. </blockquote> <address> Address 1<br> Address 2<br> City<br> </address> 93.

    You might also like